@charset "utf-8";
* { margin:0; padding:0; }

a {
	color:#69a;
	text-decoration: none;
}

img { border:0 }

h1,h2,h3 { text-transform:uppercase; margin-bottom:20px }

body { 
	background-color:#000; 
	background-image:url(http://cdn.thedarkswarm.com/somagame/gfx/bg-final.jpg);
	background-position:top center;
	font-size:16px; 
	color:#FFF; 
	font-family: Arial, Helvetica, sans-serif; 
	overflow-y:scroll 
}

.caseBody { background-image:url(http://cdn.thedarkswarm.com/somagame/gfx/bg-final-2.jpg) }



#header, #content, #footer { text-align:center }

.dust { position:fixed; z-index:50; width: 821px; height: 448px; pointer-events: none; }

.dust#tl { top:0; left:0 }
.dust#tr { top:0; right:0 }
.dust#bl { bottom:0; left:0 }
.dust#br { bottom:0; right:0 }

#face {
	opacity:0.7;
	position:absolute;
	top:400px;
	left:50%;
	margin-right:400px;
	z-index:-100;	
}

#face2 {
	opacity:0.7;
	position:absolute;
	top:800px;
	left:50%;
	margin-left:-600px;
	z-index:-100;	
}




#container { width: 960px; margin: 50px auto }

ul#nav { list-style:none }
ul#nav li { display: inline-block; width:202px; height:43px; text-align:center; margin:10px }

ul#nav a { 
	color:#FFF;
	transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;
	opacity:0.6; 
	text-decoration:none; 
	font-weight:bold; 
	text-transform:uppercase; 
	padding-top:6px; 
	height:37px; font-size:24px; 
	display: block; 
	background-image:url(http://cdn.thedarkswarm.com/somagame/gfx/soma-btn-sprites.png);
}

ul#nav a:hover, 
ul#nav a.active { 
	background-position: 0 -43px;
	opacity:0.9;  
}



#content { margin-top:20px; padding:8px}

#content p  { margin-bottom:20px; }

#content h3 { 
	text-align:left;
	text-shadow:  0 0 10px #FFFFFF,
    0 0 20px #FFFFFF,
    0 0 30px #FFFFFF;
}

#content #casefiles { max-width:400px; margin:auto }

#content #casefiles a, 
#content #casefiles span, 
#content #item a { 
	display:block; 
	height:20px; 
	margin:8px; 
	padding:8px; 
	border-radius: 4px; 
	background-color:#3b828f; 
	background-image:url(http://cdn.thedarkswarm.com/somagame/gfx/backdrop-texture-light.png);
	text-decoration:none; 
	text-transform:uppercase; 
	font-weight:bold; 
	color:#fff; 
	text-shadow: 0 0 10px #666, 0 0 20px #666;
	opacity:0.7;
	transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;	
}

#content #casefiles span { opacity:0.3 }
#content #casefiles a:hover,
#content #item a:hover { opacity:1 }

#content #item { text-align:left; background-color: #08151b; width:510px; margin:auto; padding:20px; line-height:20px; border:5px solid #003 }
#content #item p { margin-bottom:40px;   }



#content #item h2, 
#content #item h3, 
#content #item a {
	margin-bottom:20px; 
	font-weight:bold;
	font-size:16px; 
	color:#fff; 
	text-shadow: 0 0 10px #666, 0 0 20px #666; 
	text-transform:uppercase 
}

#content #item h2 { font-size:20px; margin-bottom:40px; line-height:20px; }

#content #item a { text-align:center }

#content img.chr { position: relative; top: 4px}

#content #info .col  { width:700px; font-size:16px; margin:auto; margin-bottom:40px; display:block;  vertical-align:text-top; text-align:left; line-height:20px; text-shadow:0 0 5px #000, 0 0 5px #000, 0 0 5px #000;  }
 
#content #info .story { font-style:italic; }
#content #info .story p { padding-left:20px; padding-right:40px;}


#content .quote { 
	margin-top:20px; 
	margin-bottom:40px; 
	text-align:right; 
	max-width:400px; 
	display:inline-block; 
	/*font-size:18px;*/ 
	font-size:16px; 
	font-family:Georgia, "Times New Roman", Times, serif; 
	text-shadow:0 0 10px #000, 0 0 10px #000, 0 0 10px #000;
}

#content .quote p { 
	text-align:center; 
	/*font-size:24px;*/ 
	font-size:18px 
}


#gallery { margin-top: 0px }
#gallery a { display:inline-block; border: #333333 1px solid; }
#gallery a:hover { border: #3b828f 1px solid; -moz-transition:all 0.5s; }

#gallery a img { width:100px; height:115px; }

@media (max-width:960px) {
	
	#container { width: 100%; }
	/*#content #info .col { width:600px; font-size:16px }*/
	
	h1 img { width:100%; height:auto }
	
}

@media (max-width:720px) {
	#container iframe { width: 480px; height: 270px }
	#content #info .col { width:96%; margin-left:2%; margin-right:2% }
	#content #item { width:96%; padding:2%; }
	
	.dust { display:none }
	
}

@media (max-width:480px) {
	
	#footer { text-align:right }
	
	#gallery a { width:40%; height:auto } 
	#container iframe { width: 300px; height: 170px }
	
	
}

#master_bar {
    background-color: rgba(42, 42, 42, 0.7);
    text-align: left;
    height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 7px;
    border-bottom: 1px solid rgb(58, 58, 58);
    position: fixed;
	top:0;
	left:0;
	right:0
}

#mb_span_1 {
    float: left;
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px solid rgb(58, 58, 58);
}

#footer { padding:8px; position:fixed; bottom:0; left:0; right:0; background-color: rgba(0, 0, 0, 0.5);   }


#gal-overlay { background-color:rgba(0,0,0,0.5); position:fixed; top:0; left:0; right:0; bottom:0; }
#gal-overlay img { width:100%; max-width:1280px; height:auto; box-shadow:0 0 20px #000, 0 0 20px #000, 0 0 20px #000;}
#gal-overlay table { width:100%; height:100% }
#gal-overlay table td { vertical-align:middle; text-align:center }