@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);

html, body { height: 100%; border: none; padding: 0; margin: 0; }
.clear{ clear: both; }
body{ font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }

header{ min-height: 448px; position: relative; background: url(images/background3.jpg) center center no-repeat black; background-size: cover; }
	#header-content{ background:url(images/content_offset_beveled.png) bottom left repeat-x; }
	
#important{ background: red; color: white; text-align: center; padding: 10px 0; position: fixed; top: 0px; left: 0px; width: 100%; }

h1{ margin: 0; padding: 0px; padding-bottom: 70px;  }
h2{ font-weight: 200; color: #EFEFEF; font-size: 18px; margin: 0; padding: 0; padding: 50px 0;  line-height: 120%; }
	h2 strong{ font-size: 1.5em; }
	
	
a{ -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s;
	text-decoration: none;
	color: #ffc500;
}  a:hover{ color: #00CC00; }

#download{ background: url(images/windows.png) center center no-repeat; background-size: contain; }

#original{ background: url(images/lava.jpg) left center repeat-x; black; background-size: contain; box-shadow: 0 0 90px #ff0000; position: relative; z-index: 1;  }
#original .content{ background: url(images/original.png) center left no-repeat;
    background-size: contain;
    padding: 12px 0;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    width: 290px;
    padding-left: 112px;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px; }
	#original em{ font-size: 14px; color: #ff0001; font-style: normal; font-weight: bold; background: black; }
	#original a{ color: #ffc500; font-weight: bold; background: black; }
	#original a:hover{ color: #00CC00; }

#download_original_space{ border-top: 1px solid #666; width: 30%; margin: auto; margin-top: 20px; }

#download, #original, #download_original_space{ -o-transition:1s; -ms-transition:1s; -moz-transition:1s; -webkit-transition:1s; }

#instructions{ font-size: 14px; color: white; font-weight: bold; font-style: italic; }

article{ background: url(images/article-bg_beveled.jpg) top left repeat #C7B89A; padding: 20px; text-align: center;  font-size: 16px; line-height: 150%; color: #DAC08E; }

article em{ color: #FFC500; font-size: 18px; }

article h3{     font-family: 'Reem Kufi', sans-serif;
    font-size: 48px;
    color: #ffc800;
    border-bottom: 1px solid #2f2b2d;
    width: 600px;
    padding-bottom: 19px;
    margin: 30px auto; }
	
article h3.about{ margin-top: 0px; }

article p{ padding: 5px 0; }
article p.story{ display:block; width: 550px; font-size: 14px; color: #CCC; text-align: justify; line-height: 150%; margin: 10px auto; }
article p.story strong{ font-size: 16px; color: #FFC500; }
article p.gameplay-overview{     font-style: italic;
    font-size: 16px;
    margin-top: -20px;
    padding: 0;
    color: #ff8100; }
article p.in-development{ color: #98c7ea;
    width: 210px;
    margin: auto;
    background: #0068c1;
    border-radius: 70px;
    padding: 11px;
    font-size: 12px;
    line-height: 120%;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
    border: 1px solid #038bff; }
	article p.in-development strong{ text-transform: uppercase; }

article p.requirements{ font-size: 12px; color: #DA824C; display: block; width: 380px; margin: 20px auto; padding: 10px; border: 1px solid #da824c; line-height: 150%; background: rgba(90, 81, 83, 0.68); } 
.system_requirements{ float: left; width: 50%; }
article p.requirements.recommended{ float: left; margin-left: 10px; color: #69b32b; border: 1px solid #69b32b; }
article p.requirements.minimum{ float: right; margin-right: 10px; }

#screenshots{ width: 100%; padding: 0; margin: 0; z-index: 10000; padding-top: 0px; font-size: 12px; }
	#screenshots li{ text-align:center; list-style: none; padding: 20px 0; margin: 0; float: left; width: 33%; position: relative; }
	#screenshots img{ cursor: pointer; width: 75%; border: 5px solid #605457; margin: 0px; padding: 0px;left: auto; right: auto; margin: auto; -o-transition:0.5s; -ms-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s; box-shadow: 0px 0px 50px black; }
	#screenshots li.clear{ clear: both; float: none; width: 0px; height:0px; margin: 0; padding: 0; }

/* #message{ margin-top: -1000px; -o-transition:2s; -ms-transition:2s; -moz-transition:2s; -webkit-transition:2s; } */

#social{ position: absolute; top: 3%; left: 3%; padding: 0; margin: 0; z-index: 100; }
	#social li{ float: left; padding: 5px; margin: 0; list-style: none; }
	#social a{ height: 30px; width: 30px; display: block; -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s;  color: transparent; font-size: 1px; overflow: hidden; }
	#social .facebook a{ background: url(images/socialmedia/Facebook.png) center center no-repeat; background-size: 30px 30px; }
	#social .twitter a{ background: url(images/socialmedia/Twitter.png) center center no-repeat; background-size: 30px 30px; }
	#social .googleplus a{ background: url(images/socialmedia/GooglePlus.png) center center no-repeat; background-size: 30px 30px; }
	
	#social .facebook a:hover{ background: url(images/socialmedia/Facebook_hvr.png) center center no-repeat; background-size: 30px 30px; }
	#social .twitter a:hover{ background: url(images/socialmedia/Twitter_hvr.png) center center no-repeat; background-size: 30px 30px; }
	#social .googleplus a:hover{ background: url(images/socialmedia/GooglePlus_hvr.png) center center no-repeat; background-size: 30px 30px; }

#loadgraphics{ display: none; }

#email{ padding: 0; margin: 0; position: absolute; top: 3%; right: 3%; z-index: 100; }
	#email a{ -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s; color: #444444; padding-left: 40px; padding-top: 6px; display: block; height: 28px; background: url(images/socialmedia/Email.png) left top no-repeat; background-size: 30px 30px; font-size: 14px; }
	#email a:hover{ color: #898989; background: url(images/socialmedia/Email_hvr.png) left top no-repeat; background-size: 30px 30px; }

footer{ position: relative; padding: 20px; background: #222;
    color: #898989;
    border-top: 3px solid black; }

#copyright{
	padding: 0;
	margin: 0;
	font-size: 12px;
	width: 100%;
	text-align: center;
	z-index: 100;
}

#copyright a{ color: #898989; } #copyright a:hover{ text-decoration: underline; }

@media only screen and (max-width : 850px) {
	.system_requirements{ float: none; width: 100%; }
	article p.requirements{ width: 90%; float: none !important; margin: auto 5px !important; }
	article h3{ width: 100%; }
}

@media only screen and (max-width : 800px) {
		article p.story{ width: 100%; }
		#screenshots li{ width: 100%; float: none; }
		
		h3.about img{ width: 100% !important; height: auto; }
	
}