@charset "UTF-8";

/* Global Styles */
* {
  box-sizing: border-box;
}

article, aside, footer, header, main, nav, section {
  display: block;
}

/* Header */
#header {
  background-color: maroon;
  color: bisque;
  padding: 50px;
}

/* Body Structure */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  text-align: center;
}

/* Page Structure */
section {
 margin: 20px auto;
 padding: 20px;
}

/* Link Section */
p.links {
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
}

a.blur {
	text-decoration: none;
	color: #339;
}

a.blur:hover, a.blur:focus {
	text-decoration: underline;
	color: #933;
}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus {
	text-decoration: none;
	color: rgba(0,0,0,0);
	outline: 0 none;
	-webkit-transition: all 400ms ease 100ms;
	transition: all 400ms ease 100ms;
}

.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus {
	text-shadow: 0 0 4px #339;
}

.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus {
	text-shadow: 0 0 0 #339;
}

a.glow, a.glow:hover, a.glow:focus {
	text-decoration: none;
	color: #aaf;
	text-shadow: none;
	-webkit-transition: all 500ms linear 0s;
	transition: all 500ms linear 0s;
	outline: 0 none;
}

a.glow:hover, a.glow:focus {
	color: #fff;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

.textshadow a.backlit:hover, .textshadow a.backlit:focus {
	color: #336;
}

/* Glow Link Section */
.glow-link {
  background-color: #336;
  color: #eee;
}

/* Button Section */
button {
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 15px;
	margin: 20px auto;
	color: #ccc;
	background-color: #555;
	background: linear-gradient(#888, #555);
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
	cursor: pointer;
	-webkit-transition: all 150ms ease;
	transition: all 150ms ease;
}

button:hover, button:focus {
	-webkit-animation: pulsate 1.2s linear infinite;
	animation: pulsate 1.2s linear infinite;
}
	
@-webkit-keyframes pulsate {
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
		
@keyframes pulsate {
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button:active {
	color: #fff;
	text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
	box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	-webkit-animation: none;
	animation: none;
}

/* Tooltip Section */
.tooltips {
  background-color: rgb(212, 202, 202);
}

*[data-title] {
	display: inline;
  position: relative;
	border-bottom: 1px dotted #333;
	cursor: help;
}

*[data-title]:before, *[data-title]:after {
	content: "";
	position: absolute;
	font-size: 0.8em;
	opacity: 0;
	z-index: 9999;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	-webkit-transition: all 300ms ease 200ms;
	transition: all 300ms ease 200ms;
}
		
*[data-title]:before {
	content: attr(data-title);
	width: 12em;
	bottom: 1em;
	text-align: center;
	line-height: 1.1em;
	padding: 0.2em 0.5em;
	color: #555;
	background-color: #ff8;
	border-radius: 5px;
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
		
*[data-title]:after	{
	width: 0;
	height: 0;
	left: 2em;
	bottom: 0em;
	border: 0.6em solid transparent;
	border-top-color: #ff8;
	-webkit-transform-origin: left top;
	transform-origin: left top;
}

*[data-title]:hover:before, *[data-title]:hover:after {
	bottom: 2em;
	opacity: 1;
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}

*[data-title]:hover:after {
	bottom: 1em;
}

/* Horizontal Accordian Section */
accordion {
  font-size: 90%;
	color: #333;
	background-color: #e5eaff;
	margin: 10px;
	z-index: 0;
}

#accordion h3 {
  font-size: 1.3em;
	font-weight: normal;
	margin: 2em 0 0 0;
}

#accordion p {
  margin: 0.6em 0;
}

p.accnav {
	font-size: 1.1em;
	text-transform: uppercase;
	text-align: right;
}

p.accnav a {
	text-decoration: none;
	color: #999;
}

article.accordion {
	display: block;
	width: 43em;
	margin: 0 auto;
	background-color: #666;
	overflow: auto;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion section {
	position: relative;
	display: block;
	float: left;
	width: 2em;
	height: 12em;
	margin: 0.5em 0 0.5em 0.5em;
	color: #333;
	background-color: #333;
	overflow: hidden;
	border-radius: 3px;
}

article.accordion section h3 {
	position: absolute;
	font-size: 1em;
	font-weight: bold;
	width: 12em;
	height: 2em;
	top: 12em;
	left: 0;
	text-indent: 1em;
	padding: 0;
	margin: 0;
	color: #ddd;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

article.accordion section h3 a {
	display: block;
	width: 100%;
	line-height: 2em;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}

article.accordion section,
article.accordion section h3 {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

article.accordion section:target {
	width: 30em;
	padding: 0 1em;
	color: #333;
	background-color: #fff;
}

article.accordion section:target h3 {
	position: static;
	font-size: 1.3em;
	text-indent: 0;
	color: #333;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

/* Footer */
#footer {
  background-color: maroon;
  color: bisque;
  height: 80px;
  padding: 10px;
}