/*
http://static.puppygames.net/images/09/
*/
@font-face {
    font-family: 'droid-assault';
    src: url('fonts/droid-assault-webfont.eot');
    src: url('fonts/droid-assault-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/droid-assault-webfont.woff') format('woff'),
         url('fonts/droid-assault-webfont.ttf') format('truetype'),
         url('fonts/droid-assault-webfont.svg#04b09regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body, input, select, textarea {font:100%/1em Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, sans-serif;}
body {margin:0;padding:0;text-align:center;background:#000;width:100%;}

.group a, .group a:link, .group a:visited {color:#fff;text-decoration:none}
.group a:hover, .group a:active {color:#00f0ff;text-decoration:underline}

.group h1, .group h2, .group h3, .group h4, #footer a  {text-transform:uppercase; font-size:30px; line-height:28px; font-family:droid-assault; color:#00f0ff; text-shadow: 0 0 10px #00848c; margin: 0 20px 10px;
	text-align:left;font-weight:normal;}
h1 {}
h1 strong {font-size:48px;font-weight:normal}
h3, h4 {font-size:24px;line-height:20px}
h5 { color:#00f0ff; text-align:left;font-weight:normal;text-shadow: 0 0 10px #00f0ff; }


.group p, .group li, label, th, td{ font-size:13px; line-height:19px; padding:0; margin:0 0 10px; color:#aaa;}

.intro, .group p.intro {font-size:17px;line-height:25px;margin-top:-3px;text-align:left; color:#00f0ff; text-shadow: 0 0 15px #00848c;font-style:italic}
small {font-size:9px}

em {font-style:normal;}
strong {font-weight:normal; }
p strong, li strong {color:#fff;}

.group ul {margin:0 0 15px; padding:0;}
.group li {list-style:none;margin:0 0 8px 0px; padding:0 0 0 20px;text-align:left;background:url(images/bullet.gif) left 6px no-repeat;
}

a img, iframe {border:0;}



#header, #footerWrap, .sectionWrap, .downloadWrap, #videoFrame {margin:0;padding:0;width:100%;clear:both; text-align:center;min-width:950px;}

#footer, .section, .download { width:900px; margin:0 auto; padding:0 25px; } /*  change to overflow hidden to stop abs pos'd elements causing scrollbar */

.group:before, .group:after { content: ""; display:table;} 
.group:after { clear: both;}
.group { zoom: 1; /* For IE 6/7 (trigger hasLayout) */}


/* DOWNLOAD  --------------------------------------------------------------------------------- */

.download {background:url('images/download.button.frame.2.png') top center no-repeat;padding-bottom:60px;}

.download a { display:block; margin:0 auto;width:360px; height:81px;color:#00f0ff; text-shadow: 0 0 10px #00848c; position:relative;}

.download a .button { display:block; margin:0;height:81px; color:#00f0ff; text-shadow: 0 0 10px #00848c; position:relative;
		background:url('images/download.button.main.png') top center no-repeat;width:360px;opacity:0.35;
		transition: opacity 2s;
		-webkit-transition: opacity 2s; /* Safari */
	}

.download a:hover .button { color:#00f0ff; text-shadow:none;
		opacity:1.0;
		transition: opacity 0.25s;
		-webkit-transition: opacity 0.25s; /* Safari */
	}	

.download a .buttonText {position:absolute;top:35px;left:130px;
		font-family:droid-assault;font-size:16px;line-height:17px;text-transform:uppercase;text-align:left;
	}

.download a strong {font-size:30px;font-weight:normal;color:#fff; text-shadow: 0 0 10px #00f0ff; 
		transition:2s;
		-webkit-transition:2s; /* Safari */}
.download a:hover strong {color:#fff; text-shadow: 0 0 20px #00f0ff; 
		transition:0.25s;
		-webkit-transition:0.25s; /* Safari */}
	

.downloadIcon  {display:block;position:absolute;top:0;left:27px;height:81px;width:96px;background:url('images/steam.icon.png') center top no-repeat;opacity:0.5;
		transition: opacity 2s;
		-webkit-transition: opacity 2s; /* Safari */
		}

.download a:hover .downloadIcon {
	opacity:1.0;
	transition: opacity 0.25s;
	-webkit-transition: opacity 0.25s; /* Safari */
	}	

.download a:hover .downloadIcon {
	-moz-animation: iconAnim 0.5s ease 0.1s;
	-webkit-animation: iconAnim 0.5s ease 0.1s;
	-o-animation: iconAnim 0.5s ease 0.1s;
	animation: iconAnim 0.5s ease 0.1s;
	background-position:bottom center;
}

@-moz-keyframes glowAnim { from {text-shadow: 0 0 20px #00f0ff;color:#fff;} to {text-shadow: 0 0 10px #00848c;color:#82f8ff;} }
@-webkit-keyframes glowAnim { from {text-shadow: 0 0 20px #00f0ff;color:#fff;} to {text-shadow: 0 0 10px #00848c;color:#82f8ff;} }
@-o-keyframes glowAnim { from {text-shadow: 0 0 20px #00f0ff;color:#fff;} to {text-shadow: 0 0 10px #00848c;color:#82f8ff;} }
@keyframes glowAnim { from {text-shadow: 0 0 20px #00f0ff;color:#fff;} to {text-shadow: 0 0 10px #00848c;color:#82f8ff;} }

@-moz-keyframes iconAnim { 0% {-moz-transform:scale(1);} 20% {-moz-transform:scale(1.2);} 100% {-moz-transform:scale(1);} }
@-webkit-keyframes iconAnim { 0% {-webkit-transform:scale(1);} 20% {-webkit-transform:scale(1.2);} 100% {-webkit-transform:scale(1);} }
@-o-keyframes iconAnim { 0% {-o-transform:scale(1);} 20% {-o-transform:scale(1.2);} 100% {-o-transform:scale(1);} }
@keyframes iconAnim { 0% {transform:scale(1);} 20% {transform:scale(1.2);} 100% {transform:scale(1);} }

.download a em {
	}
.download a:hover em {
	color:#00f0ff; text-shadow:none; 
	
}

/* PLAY BUTTON --------------------------------------------------------------------------------- */

.youTubeVid .playButton { background:url('images/play.button.frame.png') center center no-repeat;width:200px;height:60px;background-size:contain;
	opacity:1.0;position:absolute;top:37%;left:50%;margin:0 0 0 -100px;overflow:hidden}

#vid .playButton {height:74px}

.youTubeVid .playButton .button { position:absolute;left:0;top:0;width:100%;height:100%;
		background:url('images/play.button.png') center center no-repeat;background-size:contain;
		opacity:0.5;
		transition: opacity 2s;
		-webkit-transition: opacity 2s; /* Safari */
	}

.youTubeVid:hover .playButton .button{ 
		opacity:1.0;
		transition: opacity 0.25s;
		-webkit-transition: opacity 0.25s; /* Safari */
	}	

.playIcon {display:block;position:absolute;top:0;left:0;background:url('images/play.icon.png') center top no-repeat;opacity:0.5;
		width:100%;height:200%;background-size:contain;
		transition: opacity 2s;
		-webkit-transition: opacity 2s; /* Safari */
		}

.youTubeVid:hover .playIcon{
	top:-100%;
	opacity:1.0;
	transition: opacity 0.25s;
	-webkit-transition: opacity 0.25s; /* Safari */
	}	


/* HEADER  AND MAIN VID --------------------------------------------------------------------------------- */

#header  {background:#000 url('images/header.jpg') no-repeat top center;background-size:contain;}	
#header + .sectionWrap {margin-top:-80px}

#videoFrame, #video { padding:0;margin:0;background:none;overflow:visible}

#vidFrameWrap1  {width:50%;min-width:680px;padding:0 100px;margin:0 auto;}
#vidWrap  {width:50%;min-width:680px;margin:0 auto 0;padding:0 135px;} /* frame width smaller so vid extends out into borders */

#videoFrame {position:absolute;}
#vidFrame {position: absolute;	width:100%;height:100%;left:-64px;bottom:-70px;border: solid 64px #000;padding-bottom:0px; /* extra frame at bottom */
	-moz-border-image:url('images/video.box.2.png') 64 repeat stretch;
	-webkit-border-image:url('images/video.box.2.png') 64 repeat stretch;
	-o-border-image:url('images/video.box.2.png') 64 repeat stretch;
	border-image:url('images/video.box.2.png') 64 fill repeat stretch;
	border-width:6px 64px 64px
	}

#video {overflow:hidden;padding-top:10px;} /* frame width at top */ 
#vid, #vidFrameWrap2 {margin:0;position:relative;height:0;overflow:visible;padding-bottom: 56.25%;} /* padding = div ratio */ 
#vid {background:#000;}

#vid iframe, #vid img {position: absolute;top:0;left:0;width:100%;height:100%;background:#000;}
#vidFrameWrap2 {margin:0 50px;}	

.youTubeVid {cursor:pointer}

.youTubeVid .youTubePic, .youTubeVid .playButton {
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s; /* Safari */
}

.youTubeVid {position:relative;background:#000;}
.columns .inset .youTubeVid {width:570px;height:320px;padding:0px;margin:0;}
.columns #biscuitVid.youTubeVid {margin:10px 15px;width:560px;height:315px;}
.youTubePic, .youTubeVid iframe {position:absolute;width:100%;height:100%;margin:0;padding:0;}



/* DOWNLOAD   --------------------------------------------------------------------------------- */
	
.downloadWrap { padding:0 0 150px;height:143px;background:url('images/download.section.purple.jpg') top center no-repeat;}
.downloadWrap .download { position:relative;top:32px;}

#downloadTop {height:1px;margin:10px 0 0;background:none !important;} /* gap between vid and button */ 
#downloadTop  .download {top:0;background:url('images/download.button.frame.png') top center no-repeat;}
#downloadTop  .download a {}

#downloadBottom {background-image:url('images/download.section.blue.jpg');padding-bottom:250px;margin-bottom:-160px;}
#downloadBottom .download {top:78px;}

#downloadTop + .sectionWrap {margin-top:-150px;}
.downloadWrap + .sectionWrap {margin-top:-130px;}

#alt .downloadWrap{background-image:url('images/download.section.3.jpg') }
#alt2 .downloadWrap{background-image:url('images/download.section.4.jpg') }
#alt3 .downloadWrap{background-image:url('images/download.section.5.jpg') }

/* SECTION   --------------------------------------------------------------------------------- */

.sectionWrap { padding:30px 0 20px;background:url(images/section.jpg) bottom center no-repeat;overflow:hidden}
.section {text-align:left;color:#fff; }
.columns div {float:left;width:270px;margin:0 15px;text-align:justify} 
.columns .split {width:420px;} 
.columns .double {width:570px;} 

.columns  h2, .columns h3 {margin-left:0;margin-right:0;}

	/* review   --------------------------------------------------------------------------------- */

	.review {position:relative;padding:0 0 55px;}
	.review  .quote {color:#00f0ff;margin:0 -5px 0 -5px;padding:8px 10px; height:auto; text-align:left;position:relative;
		width:auto;
		display:		block;
		overflow:		visible;
		border: solid 10px transparent;
		background:transparent;
		-moz-border-image:url('images/bubble.png') 10 repeat stretch;
		-webkit-border-image:url('images/bubble.png') 10 repeat stretch;
		-o-border-image:url('images/bubble.png') 10 repeat stretch;
		-ms-border-image:url('images/bubble.png') 10 repeat stretch;
		border-image:url('images/bubble.png') 10 fill repeat stretch;
				
	}

	@media screen and (min-width:0\0) {  
        /* IE9 and IE10 */  
		.review  .quote {background:rgba(0,76,82,0.75)}
    }  
	
	.review .quote:after {content:"";display:block;width:20px;height:20px;position:absolute;bottom:-30px;right:90px;
		background:url('images/bubble.tail.right.png') 0 0 no-repeat;}
	
	.review.alt .quote:after {left:90px;
		background:url('images/bubble.tail.left.png') 0 0 no-repeat;}

	.review  .quote  p {color:#00f0ff;font-size:16px;line-height:14px;text-transform:uppercase;font-family:droid-assault; }
	
	.review  .credit {font-size:12px;line-height:14px;color:#888;text-align:right;position:absolute;bottom:0;right:100px;font-style:italic}
	.review.alt  .credit {text-align:left;left:100px;}
	
	.review  img {position:absolute;bottom:0;right:10px;}
	.review.alt img {left:10px;}

	.columns div .review {margin:15px 0}

	/* inset   --------------------------------------------------------------------------------- */

	.columns .inset {width:290px;float:left;margin:0 -70px 10px 5px;
		padding:10px 15px;
		border: solid 24px transparent;
		-moz-border-image:url('images/inset.box.black.png') 24 repeat stretch;
		-webkit-border-image:url('images/inset.box.black.png') 24 repeat stretch;
		-o-border-image:url('images/inset.box.black.png') 24 repeat stretch;
		border-image:url('images/inset.box.black.png') 24 fill repeat stretch;
	}

	.columns .double.inset.iframeTemp {width:570px;padding:5px 10px;}

	@media screen and (min-width:0\0) {  
        /* IE9 and IE10 */  
		.columns .inset {background:rgba(0,0,0,0.75);box-shadow: 0 0 20px rgba(0,236,255,0.25);}
    }  

	.columns .double .inset,  .columns .double.inset {width:570px;float:left;margin:0 2px 10px -53px;}
	.columns > div + .double .inset,  .columns > div + .double.inset {margin:0 -53px 10px 2px;}

	.inset .columns {width:590px;margin:0;}
	.double .inset .columns div {width:265px;}
	.double .inset .columns .quote {width:auto;}
	
	/* snippet   --------------------------------------------------------------------------------- */
	
		h5 {margin:25px 0 25px 0; font-size:22px;font-style:italic; line-height:24px;}
		h5.alt {margin:25px 0 25px 0; text-align:left;font-size:24px;line-height:22px;font-family:droid-assault;text-transform:uppercase;font-style:normal;text-shadow: 0 0 10px #00848c;}

	/* slideshow   --------------------------------------------------------------------------------- */
	
	div.slideshow	{	position:relative; overflow:hidden; margin:0 0 15px -19px; width:890px; height:499px; 
			border: solid 24px transparent;
			-moz-border-image:url('images/inset.box.black.png') 24 repeat stretch;
			-webkit-border-image:url('images/inset.box.black.png') 24 repeat stretch;
			-o-border-image:url('images/inset.box.black.png') 24 repeat stretch;
			border-image:url('images/inset.box.black.png') 24 fill repeat stretch;
		}
		
	img.slideshow { position: absolute; display: none; width:870px; height:489px; top:0; left:0; margin:10px 15px;}
	
	#newFeatures  .columns h2 + div {margin-top:10px;}
	#newFeatures  div.slideshow { width:600px; height:340px;}
	#newFeatures img.slideshow { width:570px; height:320px;}

	#xmas div.slideshow { width:600px; height:400px;}
	#xmas img.slideshow { width:570px; height:380px;}

	#xmas div.slideshow { margin:0 2px 10px -68px;
			-moz-border-image:url('images/xmas.inset.box.black.png') 24 repeat stretch;
			-webkit-border-image:url('images/xmas.inset.box.black.png') 24 repeat stretch;
			-o-border-image:url('images/xmas.inset.box.black.png') 24 repeat stretch;
			border-image:url('images/xmas.inset.box.black.png') 24 fill repeat stretch;
		}
	
	#newFeatures  div.slideshow { margin:-6px 0 10px -15px;}


	/* special   --------------------------------------------------------------------------------- */

	#reviews {padding-bottom:290px;background-image:url('images/section.refl.jpg');overflow:hidden;}
	#reviews .section {padding:0 10px;width:930px}
	#reviews .review {margin:0 20px;}
	#reviews .review  .quote {height:68px}
	#reviews .middle  .quote {height:44px;margin-top:24px;}
	
	#reviews .review img {bottom:-70px;right:-90px;}
	#reviews .review .credit {bottom:10px;right:110px;}
	
	#destroyAllDroids {margin-top:-280px;}	
	#destroyAllDroids h1 {margin-bottom:20px;text-align:center;line-height:30px;position:relative;z-index:1000}

	#totalBiscuit {margin:15px 0 10px -70px;padding:20px 5px 10px;width:590px}
	#totalBiscuit .review {margin:-60px 0 0 10px !Important;}
	#totalBiscuit .review .quote {height:105px}

	#dlc {height:400px;}

	#newFeatures {background-image:url('images/section.refl.2.jpg'); padding-bottom:77px}
	#newFeatures + .sectionWrap{margin-top:-96px} 

	#xmas {overflow:hidden}
	#xmas.sectionWrap { background:url(images/section.xmas.jpg) bottom center no-repeat;padding-bottom:225px;margin-bottom:-208px;min-width:950px}
	#xmas h3 {margin:20px 0 15px}
	#xmasDroids {position:absolute;bottom:-25px;right:9px}
	#xmas .section {position:relative;overflow:visible}
	#xmas .inset {position:relative;padding:35px 5px 10px;margin-top:10px;
		-moz-border-image:url('images/xmas.inset.box.png') 24 repeat stretch;
		-webkit-border-image:url('images/xmas.inset.box.png') 24 repeat stretch;
		-o-border-image:url('images/xmas.inset.box.png') 24 repeat stretch;
		border-image:url('images/xmas.inset.box.png') 24 fill repeat stretch;
		}
	#xmas .inset h2 {margin-top:-62px;text-shadow: 0 0 20px #00f0ff;line-height:36px}	
	#xmas .inset h2 strong {font-weight:normal;font-size:64px;position:relative;z-index:1000;}
	#xmas .inset h2 em {font-style:normal;font-size:36px;}

	#xmas .inset h2 em, #xmas .inset h2 strong, #destroyAllDroids h1 strong, #last h2 { 
		-moz-animation: glowAnim 0.5s ease-out 0s infinite alternate;
	-webkit-animation: glowAnim 0.5s ease-out 0s infinite alternate;
	-o-animation: glowAnim 0.5s ease-out 0s infinite alternate;
	animation: glowAnim 0.5s ease-out 0s infinite alternate;
	}
	
	/* #xmas h2, #xmas h3, #xmas .intro {color:#a1ff04;text-shadow:0 0 10px #5cff00; }
	#xmas h2, #xmas h3, #xmas .intro {color:#F20;text-shadow:0 0 10px #F00;}
	#xmas li {background:url('images/xmas.bullet.gif') left 6px no-repeat;} */

	/* #gameplay_2 { background-image:url('images/section.red.jpg'); }*/

	#last { overflow:visible;background:none; padding-top:35px;}

/* FOOTER --------------------------------------------------------------------------------- */

#footerWrap { margin:15px 0 0; overflow:visible;}

#footer {padding:0;width:980px;height:370px;background:url(images/footer.puppy.png) top center no-repeat;text-align:center;}

#footer a {text-decoration:none;font-size:16px;color:#0c5c62; text-shadow: 0 0 0 #000; display:block;margin:0 auto;text-align:center;margin:290px 0 0;
			transition: 1s;
		-webkit-transition:1s; /* Safari */}
#footer a:hover {color:#00f0ff!important; text-shadow: 0 0 15px #00848c;
			transition: 0.25s;
		-webkit-transition: 0.25s; /* Safari */}

#footer ul {float:left;margin:0;padding:0;}
#footer li {float:left; display:inline ;margin:0;padding:0;border:1px solid #DDDCE3;border-width:0 0 0 1px;font-size:12px}
#footer li a {padding:0 10px}
#footer li:first-child{border-width:0;}


#footer li a {color:#b0a892}
#footer li.currentPage {color:#666}
#footer a:hover {color:#ff7800}