body,
header,
nav,
iframe,
footer,
div,
ul,
li,
h1,
a,
small {
	border: 0;
	margin: 0;
	padding: 0;

	-webkit-transition: background-color 0.3s ease; 
	   -moz-transition: background-color 0.3s ease; 
	     -o-transition: background-color 0.3s ease; 
	        transition: background-color 0.3s ease; 

}

#container {
	display: inline-block;
	vertical-align: sub;
	text-align: left;
	position: relative;
	height: 100%;
	color: hsla(0,0%,75%,1);
	width: 10em;
	margin: 0;
	z-index: 2;
	border-right: 1px solid black;
	pointer-events:none;
	background-color: hsla(0,0%,0%,0.7);

	-webkit-transition: left 0.5s ease-out; 
	   -moz-transition: left 0.5s ease-out; 
	     -o-transition: left 0.5s ease-out; 
	        transition: left 0.5s ease-out; 

}

#hidenav {
	position: fixed;
	z-index: 3;
	display: inline-block;
	background: none;
	color: hsla(0,0%,90%,0.8);
	text-shadow: 2px 2px 4px hsla(0,0%,16%,0.8);
	text-decoration: none;
	font-size: 4em;
	top: -0.55em;
	left: -0.15em;
	pointer-events:auto;
	/*outline: none;*/
	-webkit-transition: color 64ms ease; 
	   -moz-transition: color 64ms ease; 
	     -o-transition: color 64ms ease; 
	        transition: color 64ms ease; 
    -webkit-animation: throb 3s ease 0s infinite alternate;
    -moz-animation: throb 3s ease 0s infinite alternate;
    -o-animation: throb 3s ease 0s infinite alternate;
    animation: throb 3s ease 0s infinite alternate;
}

@-webkit-keyframes throb {
  from {
	text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.8);
	color: hsla(0,0%,90%,0.8);
  }
  to {
	text-shadow: 2px 2px 6px rgba(100, 180, 170, 0.8);
	color: hsla(0,0%,100%,0.9);
  }

}

@-moz-keyframes throb {
  from {
	text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.8);
	color: hsla(0,0%,90%,0.8);
  }
  to {
	text-shadow: 2px 2px 6px rgba(100, 180, 170, 0.8);
	color: hsla(0,0%,100%,0.9);
  }

}

@-o-keyframes throb {
  from {
	text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.8);
	color: hsla(0,0%,90%,0.8);
  }
  to {
	text-shadow: 2px 2px 6px rgba(100, 180, 170, 0.8);
	color: hsla(0,0%,100%,0.9);
  }

}

@keyframes throb {
  from {
	text-shadow: 2px 2px 4px rgba(80, 80, 80, 0.8);
	color: hsla(0,0%,90%,0.8);
  }
  to {
	text-shadow: 2px 2px 6px rgba(100, 180, 170, 0.8);
	color: hsla(0,0%,100%,0.9);
  }

}
#hidenav:hover {
	cursor: pointer;
    -webkit-animation: throb 0.3s ease 0s infinite alternate;
    -moz-animation: throb 0.3s ease 0s infinite alternate;
    -o-animation: throb 0.3s ease 0s infinite alternate;
    animation: throb 0.3s ease 0s infinite alternate;
}

#hidenav:active, #hidenav:focus {
	color: red;
}

#hidenav:focus {
	outline: none;
}
.credits {
	margin: 0.5em 0.1em 0.1em 0.1em;
	padding: 0 1em 0 1.5em;
}

body {
	background-color: black;
}

header {
	text-align: right;
	padding: 1em 1em 1em 1em;
	background-color: hsla(0,0%,90%,0.2);
	/*text-shadow: -1px -1px 1px hsla(0,0%,80%,0.65);*/
	text-shadow: -1px -1px 2px hsla(0,0%,8%,0.75);
	border-bottom: 1px solid black;
}
header:hover {
	text-shadow: -1px -1px 1px hsla(0,0%,8%,0.95);
	color: hsla(0,0%,90%,1);
	background-color: hsla(0,0%,90%,0.6);
	cursor: pointer;
	/*background: linear-gradient(135deg, hsla(0,0%,90%,0.9) 5%, hsla(0,0%,9%,0.2) 80%);*/
}

footer {
	text-align: right;
	padding: 1em 1em 1em 1em;
	background-color: hsla(0,0%,90%,0.1);
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}

footer:hover {
	background: hsla(0,0%,100%,0.2);
}

nav {
	font-size: small;
	padding-left: 1em;
}

/*h1 {
	text-align: right;
	border-bottom: 1px solid black;
	margin: 0.5em;
	font-size: medium;
}*/

ul {
	margin-bottom: 1em;
	font-size: 7pt;
	padding: 0em 0em 0.3em 0em;
	background-color: hsla(0,0%,80%,0.25);
	text-align: left;
	pointer-events: auto;
	border-radius: 2px 0px 0px 5px;
}
ul:hover {
	background-color: hsla(0, 0%, 18%, 1);
}

li {
	text-align: left;
	padding: 0.2em 0.5em 0.2em 0.5em;
	margin-top: 1px;
	list-style: none;
	font-size: 11pt;
	background: hsla(0,0%,80%,0.2);
	pointer-events: auto;
	border-radius: 2px 0px 0px 2px;
	/*box-shadow: -1px -1px 1px white;*/
	/*border-top: 2px inset white;*/;
}

li:hover {
	background: hsla(0,0%,80%,0.4);
}

a {
	/*padding-right: 0.1em;*/
	pointer-events: auto;
	text-decoration: none;
	color: rgba(100, 180, 170, 1);
	text-shadow: -1px -1px 2px hsla(0,0%,8%,0.75);

	-webkit-transition: text-shadow 32ms ease; 
	   -moz-transition: text-shadow 32ms ease; 
	     -o-transition: text-shadow 32ms ease; 
	        transition: text-shadow 32ms ease; 

}

a:visited {
	color: hsla(0,0%,75%,1);
	/*color: inherit;*/
	text-shadow: 0px 0px 1px hsla(0,0%,8%,0.75);
}

a:hover {
	background: hsla(0,0%,100%,0.15);
	text-shadow: -2px -2px 4px hsla(0,0%,12%,0.7);
	color: rgba(0, 225, 225, 1);
	/*color:  linear-gradient(to bottom, hsla(180,100%,50%,0.9) 5%, hsla(0,100%,50%,0.2) 80%);*/
}

small {
	font-size: x-small;
	/*vertical-align: center;*/
}

#bgart {
	position: fixed;
	z-index: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*background: hsla(0, 0%, 9%, 1);*/
	overflow: hidden;
	display: inline-block;
	/*opacity: 0;*/

	-webkit-animation: fadein 3s ease 0s normal 1;
	-moz-animation: fadein 3s ease 0s normal 1;
	-o-animation: fadein 3s ease 0s normal 1;
	animation: fadein 3s ease 0s normal 1;
}

#container {
	-webkit-animation: fadein 0.75s ease 0s normal 1;
	-moz-animation: fadein 0.75s ease 0s normal 1;
	-o-animation: fadein 0.75s ease 0s normal 1;
	animation: fadein 0.75s ease 0s normal 1;
}

@-webkit-keyframes fadein {
  from {opacity:0;}
  10% {opacity: 0;}
  to {opacity:1;}
}

@-webkit-keyframes slideright {
  from {left: -10em;}
  10% {left: -10em;}
  to {left: 0em;}
}


@-moz-keyframes fadein {
  from {opacity:0;}
  10% {opacity: 0;}
  to {opacity:1;}
}

@-o-keyframes fadein {
  from {opacity:0;}
  10% {opacity: 0;}
  to {opacity:1;}
}

@keyframes fadein {
  from {opacity:0;}
  10% {opacity: 0;}
  to {opacity:1;}
}