@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

@font-face{
	font-family:'inconsolata';
	src: url('fonts/Inconsolata.otf');
}

html {
	height:100%;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

body {
	overflow-x:hidden;
	overflow-y:scroll;
	color: #333;
	background:radial-gradient(ellipse at 50% 50%, #c4c4c4 0%,#cdcdcd 40%,#cccccc 65%,#bfbfbf 100%);
	
}

main {
	overflow:hidden;
	width: 100%;
	height: 100%;
	visibility: visible;  
}

#italic {
	font-style: italic; 
}


#status {
	display:none;
	position:fixed;
	top:0;right:0;left:0;
	margin:auto;
	width:50px;
	background-color:black;
	color:white;
	z-index:99999;
}

#menuClock {
	position:fixed;
	display:block;
	top:20px;
	left:25px;
	height:50px;
	width:55px;
	z-index:99999;
	cursor:pointer;
	-webkit-filter: drop-shadow( 5px 0px 2px yellow );
            filter: drop-shadow( 5px 0px 2px yellow );
}
	#face {
		
	}

	#menuClock:hover ~ #zonedTime {
		display:block;
	}

	#zonedTime {
		position:fixed;
		display:none;
		width:100px;
		top:70px;
		left: 20px;
		z-index:999;
		font-family: 'Source Serif Pro', serif;
		font-size: 17px;
		cursor: hand;
		text-shadow: 5px 0px 2px yellow;
	}

#menuAbout {
	position:fixed;
	display:block;
	top:0;right:45px;
	height:70px;
	margin:15px;
	z-index:99999;
	cursor:pointer;
	font-size:40px;
	transition: transform 0.2s linear;
	text-shadow: -5px 0px 2px yellow;
}

	#menuAbout::after {
		content: "?";
		position:absolute;
		margin:auto;
		top:0;right:0;bottom:0;left:0;
		display:block;
		height:55px;
		width:15px;
	}

	#menuAbout:hover ~ #aboutBox {
		display:block;
	}
	
	#menuAbout:hover ~#aboutBox div {
	}

#menuDownload {
	position:fixed;
	display:block;
	bottom:0;right:0;
	height:70px;
	width:70px;
	margin:15px;
	z-index:99999;
	cursor:pointer;
}	

	#menuDownload::after {
		content: "☭";
		position:absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		display:block;
		font-size:50px;
		height:40px;
		left:10px;
		text-shadow: -5px 0px 2px yellow;
	}
	
#menuAudio {
	position:fixed;
	display:block;
	bottom:0;left:0;
	height:70px;
	width:70px;
	margin:15px;
	z-index:99999;
	cursor:pointer;
	text-shadow: 5px 0px 2px yellow;
}

	#menuAudio.on::after {
		content: '✓';
		position:absolute;
		margin:auto;
		top:10px;right:0;bottom:0;left:0;
		display:block;
		height:35px;
		width:45px;
		font-size:50px;
	}
	
	#menuAudio.off::after {
		content:'×';
		position:absolute;
		margin:auto;
		top:5px;right:0;bottom:0;left:0;
		display:block;
		height:35px;
		width:40px;
		font-size:55px;
	}
	
	#menuAudio:hover::after {
	}
	

#aboutBox {
	display:none;
	position:fixed;
	height:100%;
	width:100%;
	padding:20px;
	transition: opacity 0.1s linear; 
	z-index:9999;
	font-family: 'Source Serif Pro', serif;

}
	
	#aboutBox img {
		content: url('images/flexible-anarchy.png');
		position:fixed;
		display:none;
		bottom:15px;left:0;right:0;
		height:15%;
		margin:0 auto;
	}
	
	#aboutBox div {
		position:fixed;
		width:60%;
		margin:auto;
		display:block;
		left:0;right:0;
		color:black;
		font-size: 20px;
		padding:25px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);

	}
	
	#aboutBox div p {
		position:relative;
	}
	
	#aboutBox ol {
		margin: 5px;
	}
	
		#aboutBox li {
			padding: 5px;
		}
	
	#aboutBox::after {
		content: 'A Flexible Anarchy';
		position:fixed;
		display:block;
		margin:auto;
		top:15px;left:0;right:0;
		color:black;
		font-size: 25px;
		padding-bottom:25px;
		text-align:center;
	}

#borderContainer {
	position:fixed;
	width:100%;
	height:100%;
}

#timeProgress {
	position:fixed;
	z-index:99999;
}

#timeLine {
    stroke-dasharray: 4000;
    stroke-dashoffset: 0;
  }

.keyLog {
	display:block;
	position:fixed;
	margin:0 auto;
	left:50%;
	top:0;
	max-width:200px;
	text-align:left;
	padding:10px;
	z-index:99;
	font-family: 'inconsolata', sans-serif;
	font-size:12px;
	cursor: move;
	color:black;
	-webkit-animation-play-state: paused;
	transition: box-shadow 0.5s linear, background-color 0.5s linear, border-radius 0.5s linear;
	border-radius: 5px;
	border-collapse: collapse;
	word-wrap: break-word;      /* IE 5.5-7 */
	white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
	white-space: pre-wrap;
}

.keyLog:hover {
	z-index:999;
	background-color: #bfbfbf;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	border-radius: 10px;
}

.typed-cursor{
	display:none;
}

#fullView {
	font-size: 100px;
	border-collapse: collapse;
	word-wrap: break-word;      /* IE 5.5-7 */
	white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
	text-align:center;
	z-index:9;
	height:100%;
	width:100%;
	opacity: 0.3;
	color: white;
	-webkit-transform:scale(1.0);
	-moz-transform:scale(1.0);
	-ms-transform:scale(1.0);
	transform:scale(1.0);
	margin:0;
}

@media only screen and (max-width: 1080px) {
	#aboutBox div {
		width:80%;
	}	
	#menuDownload {
		display:none;
	}
	#menuAudio {
		display:none
	}
	#menuAbout {
		display:none;
	}
	#menuClock {
		margin:auto;
		left:0;right:0;
	}
	#zonedTime {
		margin:auto;
		left:0;right:5px;
		text-align:center;
	}
}

@media only screen and (min-width: 1400px) {
	#aboutBox div {
		font-size: 30px;
	}	
	
	#aboutBox::after {
		font-size: 35px;
	}
}