/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
@font-face {font-family: Unsteady;src: url(../Unsteady.ttf);}
::-moz-selection{ background: #fff; color: black; text-shadow: none; }
::selection { background:#fff; color: black; text-shadow: none; }


	body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 24px;background-color: #333;color: #3D3D3D;}
	
	a {color: #3f3f3f;text-decoration: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
	a:hover {color: black;}
	a img {margin: 20px 0 0 0;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;}

	p {margin: 0 0 10px 0 !important;}
		
	h2 {color: #332; margin: 0 0 10px 0;}
	.dt h3 {font-family: Play, sans-serif; margin-bottom: -20px; color: #ccc;}
	h4 {color: #999999; margin: 0 0 -20px 0;}

	.details {background: #bfbfbf;padding-top: 10px;padding-bottom: 20px;}	
	.details h2 {margin-top: 20px;}
	
	
	.details a {text-decoration: underline;font-weight: bold;}
	.details a:hover {text-decoration: none;}
	.details ul {margin-left: 2em; line-height: 26px;}

	.folio {background-color: inherit;}

	header {background: url(../img/banner.png) no-repeat center;position: relative; z-index: 1;}
	header .logo {width: 552px;height: 300px;background: no-repeat;font-family: Unsteady, sans-serif;font-size: 1.8em;line-height: 90px;}
			
	.intro {background-image: url(../img/surface.png);background-repeat: no-repeat;background-position: center;background-position: 50% 0;}
	.intro p {margin-bottom: 16px;}
	.intro .contact {font-weight: normal;}
	.introcopy {margin-bottom: 60px;font-size: 24px;line-height: 32px;color: #8c8c8c;text-shadow: 0px -2px 0px black;font-family: Play;}
	
	.toprow {height: auto !important;}
	
	.headline {font-size: 2em;font-family:Play;text-shadow: 0 1px 0 #000;color: #ddd;padding-top: 10px;}	
		
	.fade {text-align: center;}
	.fade img {margin-top: inherit;opacity: 0.55;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
	.fade img:hover {opacity: 1;}
		
	#up:hover {text-transform: uppercase;}
	#down:hover {text-transform: lowercase;}
		
	#resize {position: fixed;right:0px;bottom:0px;padding: 0px;margin: 0px;}
	
	.columns .onecol {background: #5bd698 url(../img/downloadbg.png);height: 20px;}
	
	abbr {font-weight: bold;}    
	
	.idetails {	color: #eee; background: #111; padding-bottom: 20px;}	
	.idetails img {margin: 20px 0 0 0;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
	.idetails a {text-decoration: underline;font-weight: bold;}
	.idetails a:hover { color: #99cc66; text-decoration: none;}
	.idetails ul {margin-left: 3em; line-height: 26px;}
	.idetails.row {margin: 0; padding: 0;}
	
	footer {margin: 20px 0 20px 0;}
	
	#countDiv{color:#eee;font-size:35px;margin-right:120px;position:absolute;right:50%;top:265px;}
	#main{margin:80px auto;width:130px;}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {margin-bottom: 30px;}		
	header .logo {margin: 0 auto;}
	
	.toprow {height: auto; margin-bottom: 40px;}
	.intro {font-size: 18px;line-height: 26px;}
	.introcopy {clear: both;}

	.fade {display: inline-block; padding: 0 10% 0 10%;}
	
	a img {background-position: center; margin: 20px 0 0 0;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;}

	.details {padding-bottom: 20px;}
	.fourcol {border-bottom: 1px solid #888;}	
}