@font-face {
    font-family:'puppy'; 
    src:url('fonts/puppy-webfont.eot'); 
    src:url('fonts/puppy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/puppy-webfont.woff') format('woff'),
         url('fonts/puppy-webfont.ttf') format('truetype'),
         url('fonts/puppy-webfont.svg#04b03regular') format('svg'); 
    font-weight:normal; 
    font-style:normal; 

}

@font-face {
    font-family: 'titilliumlight';
    src: url('fonts/titillium-light-webfont.eot');
    src: url('fonts/titillium-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/titillium-light-webfont.woff') format('woff'),
         url('fonts/titillium-light-webfont.ttf') format('truetype'),
         url('fonts/titillium-light-webfont.svg#titilliumlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

	/* fonts */

	body, form, select, input, textarea { font-family:'titilliumlight', Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, sans-serif;  line-height:1.5em; }
	h1, h2, h3, h4, h5, td, input[type="submit"], .menu-link, .menu ul li a, .menu ul li .selected, #puppyContent nav, nav#debug, #console, figure.review blockquote,
		.button, figure.review blockquote, #vid .playButton, #home #games > p,
		.blog .entry-meta, .blog .more-link, .blog .no-comments, .blog .comment-reply-link, .blog .footerLink,
		#revenge-help .panel .number, #revenge-help .numbered span.number, #revenge-help .marker { 
		font-family:'puppy'; text-transform:uppercase; font-weight:normal; color:#fff;  }
	

	/* basic layout with sticky footer and v-centered content */

	* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

	html, body, #page { width:100%; height:100%; min-height:100%; margin:0; padding:0; }
	html { background:#21201c; color:#beb8a9; min-width:320px} /* background:#090907; */
   
	header { display:table-row; 
		background:-webkit-linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
		background:linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
	}
   
	#page { display:table; position:relative; overflow:hidden;
		background:-webkit-linear-gradient(181deg, rgba(120,0,255,1) 0%, rgba(130,0,255,0.1) 20em, rgba(140,0,255,0) 100em), -webkit-linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background:linear-gradient(181deg, rgba(120,0,255,1) 0%, rgba(130,0,255,0.1) 20em, rgba(140,0,255,0) 100em), linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background-repeat:no-repeat, no-repeat;
		background-size:auto, auto;
		background-position:top left, top left;
		background-attachment:scroll, fixed;
	}
   
	#puppyContentWrap { display:table-cell; vertical-align:middle; text-align:center; height:100%; }
   	#puppyContent { text-align:left; padding:4em 3em 5em; margin:auto; width:90%; max-width:70em; position:relative; overflow:auto}
   
   	.blog #puppyContent {overflow:visible}
   
	footer { background:black; position:relative; padding:2em 0 0; }
	body > footer:before { content:"";display:block;width:100%;height:3px;position:absolute;top:0;z-index:500;background:linear-gradient( 90deg, hsla(43,11%,60%,0.2) 0%, hsla(43,11%,40%,0.15) 50%, hsla(43,11%,60%,0.2) 100%) }


	/* page background */

	#one, #two {background-attachment:scroll; position:fixed; width:100%;height:100%;min-height: 100%; z-index:-1; } 

	#one { background:url('images/home-background-back.jpg') center top no-repeat transparent; background-size:100% auto; opacity:1; }
	#two { background:url('images/home-background-front.png') center bottom no-repeat transparent;  background-size:100% auto; opacity:0;}
	

	#page {
		background:-webkit-linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background:linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background-attachment:fixed; }
	
	#one { background-image:url('images/home-top.jpg') }
	#two { background-image:url('images/home-bottom.jpg'); opacity:0}
	
		
	/* height of footer fixed... */
	
	footer { margin-top:-9em; height:9em; }
	#page { padding-bottom:9em; }
	#two { bottom:0em; }


	/* assume tablet landscape, 1024 width monitor - override with rules later if poss */	
	
	h1, h2, h3, h4, h5, #hiscoreTables blockquote p:first-of-type, #home #games > p {text-shadow:0 0 0.5em #ffb37b }
	h1 { font-size:3.0em; line-height:0.75em; padding:0; margin:0 0 0.25em;}
	h2, .blog #respond h3 { font-size:2.0em; line-height:0.85em; margin:0 0 0.5em; padding:0; }
	h3 { font-size:1.25em;  line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	h4 { font-size:1.25em; line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	h5 { font-size:1.25em;  line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	p, li { margin:0 0 0.75em 0; max-width:35em; font-size:0.9em;line-height:1.5em}
	strong {color:#fff;font-weight:normal}
	
	.blog #respond h3 small {font-size:0.5em}
	#comments strong {color:#000}
	
	ol, ul {padding-left:0em;margin:0 0 0.75em 0;list-style-position: inside;}
	ol {padding-left:1.25em;}
	li {padding-left:0.5em}
	li li, p li, li p {font-size: 100%;}
	
	li small {font-size:0.75em; vertical-align:top}
	
	a { color:#d2c7b8 }
	a:hover { color:rgba(255, 255, 255, 1); }
	h1 a, h2 a {color:#fff !important; text-decoration:none !important;}
	
	form {position:relative;overflow:visible;}
	form#reset {display:none !important;}
	
	.formWrap {display:table;width:100%;margin-bottom:1em}
	form .formWrap p {display:table-row;max-width:none;width:100%;}
	form .formWrap p input, form .formWrap p textarea, form .formWrap p label, form .formWrap p select {display:table-cell;float:none;max-width:none;min-width:0;width:100%;vertical-align:top;font-size:1.125em}
	form .formWrap p label {width:4.5em;max-width:none;min-width:0;margin:0;padding:0 1em 0 0;clear:none}
	
	select, input, textarea {font-size:1.0em;margin:0 0 1em;width:75%;border:none; transition:all 0.25s ease;opacity:0.9;}
	label {min-width:3.25em;text-align:right;display:block;float:left;clear:left;margin:0 1.25em 0.25em 0;opacity:0.75;line-height:1.75em}
	select, input, textarea, option {width:100%; max-width:17em;border-radius:2px; line-height:1.75em;height:1.75em; outline:0px none !important; padding:0 0 0 0.5em;}
	textarea {height:auto;line-height:1.25em;padding-top:0.25em; resize:vertical; min-height:2em}
	select {padding:0 0 0 0.3em}
	option {border-radius:0;margin:0}
	option[value=""] {color:#aaa}
	input, textarea {}
	input:focus, textarea:focus, select:focus { box-shadow: 0 0 1em rgba(255,255,255,0.5); opacity:1.0 !important}
	
	input[type="submit"], .button, .blog #content .comment-reply-title small a, .comment-reply-link  { width:auto;min-width:6em;float:right;clear:both;padding:0 1em;margin:0;font-size:1.0em;line-height:1.75em;height:1.75em;
		color:hsla(43,11%,100%,1);background:hsla(43,11%,37%,0.6);border:0;border-radius:0.25em;cursor:pointer;text-shadow:none;text-decoration:none;text-align:center;
		transition:color 0.125s, background 0.25s, box-shadow 0.25s, opacity 0.125s;}
		
	input[type="submit"]:hover, .button:hover, #home #games a:hover .button, .blog #content .comment-reply-title small a:hover, .buyButtons .buyButtonArea:hover .button  { color:#fff;background:#f70;box-shadow: 0 0 1em #f30;opacity:1.0 !important}
	input[type="submit"]:active, .button:active, #home #games a:active .button, .blog #content .comment-reply-title small a:active, .buyButtons .buyButtonArea:active .button  { color:#fff;background:#f70;box-shadow: 0 0 1em #f30;opacity:1.0 !important}
	
	.button.disabled {cursor:default;opacity:0.75 !important;color:hsla(43,11%,60%,1)!important}
	.button.disabled:hover  { color:hsla(43,11%,60%,1)!important;background:hsla(43,11%,37%,0.6)!important;box-shadow: none!important;}

	.error p:first-of-type, .thanks p:first-of-type {font-size:1.25em; color:#fff}
	.error p, .thanks p, .thanks li {font-size:1.0em;}
	
	p.intro {font-size:1em; color:#fff;margin-top:0}


	#headerPuppy { float:left; width:16vw; max-width:8em;min-width:64px;margin-top:0.1em;height:100%; position:relative; }
	#headerPuppy img {position:absolute;z-index:1000;width:100%; }
	#headerText { height:100%; width:auto; margin-top:0.5em; float:left; }
	#headerText img { width:24vw; min-width:16em; max-width:50em; opacity:0.75; top:0.5em; position:absolute;}

	#puppyContent section, #revenge-help div.helpSection, #revenge-help div.helpHeading {width:100%;margin:0 0 1em;padding:3em;float:left;position:relative;}
	
	#puppyContent section section { width:100%;margin:2em 0; padding:0; position:relative; }
	#puppyContent section section h3 {margin-top:1em}
	#puppyContent section section .column h3:first-child {margin-top:0.25em}
	
	#puppyContent section section:after {content:"";clear:both;display:block;width:100%;height:3px;padding:0 3em;margin:0;position:relative;bottom:-1.5em;left:-3em;
		 -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;
		 background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);}
	#puppyContent section section:first-of-type { margin-top:0 }
	#puppyContent section section:last-of-type { border:none; margin-bottom:0 }
	#puppyContent section section:last-of-type:after {content:none}

	#puppyContent section section .column {width:48%;float:left;}
	#puppyContent section section .column:first-of-type {margin-right:4%;}

	#puppyContent div.formSectionWrap {display:table;width:100%;margin-bottom:1em;position:relative}
	#puppyContent div.formSectionWrap section {width:auto;height:100%;float:none;display:table-cell;margin:0; border:none }
	#puppyContent div.formSectionWrap form, #puppyContent div.formSectionWrap > nav {width:50%;height:100%;display:table-cell;padding:3em; vertical-align:middle;	}


	div.formSectionWrap nav li {list-style-type:none;font-size:0.9em;line-height:1em;position:relative;}
	div.formSectionWrap nav ol ol {margin:1em 0;padding:0;}
	div.formSectionWrap nav li li {margin-left:2em;}
	div.formSectionWrap nav li a {text-decoration:none}
	div.formSectionWrap nav li .contentsIndex {position:absolute;left:-1em;}
	div.formSectionWrap nav ol ol li .contentsIndex {left:-2em;}


	figure.review blockquote {background:#000;padding:1.25em 1.5em 0.5em;text-align:left;margin:0;font-size:100%;position:relative}
	figure.review blockquote p {font-size:1.158em;line-height:1em}
	figure.review figcaption {font-size:0.8em;font-style:italic;text-transform:lowercase;text-align:right;padding:0 0.25em 0 5.5em; height:4em;line-height:2em;float:right;position:relative;}
	figure.review figcaption img {position:absolute;bottom:0;left:0;height:175%}
	
	figure.review figcaption:before {content:"";width:2em;height:2em;line-height:2em;float:left;margin:0 0 0 -7.5em;
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%) no-repeat;
	}

	figure.review:before, #home #games .game:before, .game #puppyContent section div.slideshow:before {content:"";display:block;width:100%;height:3px;position:relative;bottom:-3px;z-index:1000;background:linear-gradient( 270deg, hsla(43,11%,60%,0.4) 0%, hsla(43,11%,40%,0.15) 100%)}
	#home #games .game:before {content:none}

	#home #puppyContent, .game #puppyContent {text-align:center;width:100%; max-width:100%;padding:1.5em 0 0}
	
	#puppyContent #video h1 {position:absolute;width:100%;bottom:50%;z-index:1000}
	

	/* blog stuff */
	
	div.blogImg { margin: 2em -8vw 1.5em !important; max-width: 1140px !important}



	/* button 

	.game #puppyContent #sandbox .button {display:block;float:none;clear:none;width:10em;font-size:1.25em;min-height:2em;line-height:1em;text-decoration:none;background:#000;text-align:center; 
		margin:0.5em 0;padding:0.5em 0.1em 0.5em;border:0.125em solid white;border-radius:0.25em;
		transition:color 0.25s ease-out, box-shadow 0.5s ease-out, text-shadow 0.5s ease-out, border-color 0.25s ease-out;
		border-color:hsla(265,100%,50%,1);color:hsl(265,100%,50%)!Important;box-shadow:0 0 0.5em hsla(265,100%,50%,0.25);
	}
	.game #puppyContent #sandbox .button:hover { box-shadow:0 0 1em hsla(265,100%,50%,0.5);color:hsl(265,100%,80%)!Important;text-shadow:0 0 0.5em hsla(265,100%,50%,1);
		border-color:hsla(265,100%,60%,1);}
	
	.game #puppyContent a.steam {display:block;width:9em;margin:0 auto;font-size:2em;padding:0 0 0 2.125em;min-height:0;height:2em;line-height:1.8em;
		background:url('images/icon-steam.png') 1.25em 50% no-repeat black; background-size:auto 60%}

	.game #puppyContent #intro a.steam {margin-top:-1em}

	.game img.allOS {width:5%;min-width:6em;max-width:7em;position:relative;top:1em}
	#end img.allOS {margin:-1.5em 0 2em}
*/


	/* patreon button */

	.patreon {text-align:center;width:100%;display:block;clear:both;margin:0 0 1em}
	.patreon .button {padding:1em;clear:both;margin:0 auto 0;float:none;clear:none;display:block;height:100%;
		max-width:30em;
	} 
	.patreon .button span { color:white;clear:both;display:block;font-size:1.25em;margin:-0.25em 0 0} 
	.patreon .button img {margin:0;max-width:80vw}

	/* buy buttons */
	
	.buyButtons {width:100%;background:black;clear:both;padding:0;margin:0;overflow:hidden}
	.buyButtons:after  {content:"";display:table;clear:both;}
	.buyButtons > div {width:auto;margin:0 auto 1em;text-align:center;padding:0;position:relative }
	
	.buyButtonArea {cursor:pointer}
	
	.buyButtons.pcOnly > div:first-of-type {margin-bottom:1.0em}
	
	/* temp b4 ps */
	.buyButtons > div {text-align:center;}
	
	.buyButtons .platform {display:inline-block;padding:1em 0 0;vertical-align:top;margin:0}
	.buyButtons .platform.pc {padding-right:1.5em;}
	
	/* to reduce space on stacking */
	.buyButtons .platform.pc p {margin-bottom:1.0em}
	.buyButtons .platform.pc .buyButtonArea {margin-bottom:-1.0em;margin-top:-1.0em}
	
	.buyButtons .platform p {font-size:0.8em;clear:none;max-width:none;width:auto;margin:0.5em 2em 0 ;position:relative;}
	.buyButtons .platform p img {display:inline-block;vertical-align:middle;margin:0 1em 0 0;position:relative;top:-0.25em}
	.buyButtons .platform > div, .buyButtons .platform .buyButtonArea {display:inline-block;vertical-align:middle;margin:0 auto 0;text-decoration:none}
	
	.buyButtons .platform.ps {margin:0 0 0 1em}
	.buyButtons .platform.ps > div > div {display:inline-block;clear:none;margin:0 auto}
	
	.buyButtons .platform .button {margin:0 0.5em 0 0;min-width:2em;clear:none;float:none;display:inline-block;vertical-align:middle;text-transform:none}
	
	.buyButtons .divide {width:3px;display:inline-block;position:absolute;top:0;bottom:0;
		background:-webkit-linear-gradient( 180deg, hsla(265,100%,50%,1) 0%, hsla(265,80%,30%,0) 100%);
		background:linear-gradient( 180deg, hsla(265,100%,50%,1) 0%, hsla(265,80%,30%,0) 100%);}

	.buyButtons .platform img.shop {opacity:0.71;transition:opacity 0.25s ease-out;display:inline-block;vertical-align:middle}
	.buyButtons .platform.ps:hover img.shop, .buyButtons .platform .buyButtonArea:hover img.shop,  #humbleButtonBuy.disabled img.shop {opacity:1}

	.buyButtons .bundleWidget  {margin:0 auto 0;padding:0;display:block;text-align:center;}
	.buyButtons .bundleWidget iframe {height:1px;width:0;transition:height 0.25s ease-out, width 0.25s ease-out;overflow:hidden;display:block;margin:0 auto 0.5em}
	.buyButtons .bundleWidget .button {clear:both;float:none;display:none;opacity:0;margin-top:0.5em}
	
	.buyButtons .bundleWidget.active {margin:0 auto 1em;}
	.buyButtons .bundleWidget.active iframe {height:264px;width:550px}
	.buyButtons .bundleWidget.active .button {opacity:1;height:auto;display:inline-block;}

	.bundleWidget.thinScreen {display:none}
	.bundleWidget.wideScreen {display:block;}

	.game #playstation .psStore, .game #curve .consoles {clear:left;float:left;background:black;width:100%;text-align:center;margin:0.25em 0 0;padding-bottom:1em}
	.game #curve .consoles {margin-bottom:1.5em;}
	
	.game #curve .consoles img {margin-top:-30px;}
	
	.game #playstation .psStore img:first-of-type, .game #curve .consoles img:first-of-type{width:100%;height:auto;margin:-0.125em 0 0 0}
	.game #playstation .psStore div {display:inline-block;padding:0 0 2em 0}
	.game #playstation .psStore img.shop, .game #playstation .button {
		top:auto;vertical-align:middle;display:inline-block;float:none;clear:none;min-width:2em;margin:0 0 0 0.25em;text-transform:none}
	.game #playstation .psStore img.shop {clear:left;margin:-1em 0 0}

		

	/* vid */

	#puppyContent #video {width:100%;padding:0 15% 3em;position:relative;overflow:hidden }
	
	#video #vid {background:none;cursor:pointer;width:100%;padding:0 0 46%;margin:auto;position:relative;transition:padding 0.25s ease-out;}	
	
	#video #vid img {position:absolute;background:none;width:100%;left:0;top:0;opacity:1;transition:opacity 0.25s ease-out}
	#video #vid.show img {opacity:0}
	
	#video #vid .playButton {cursor:pointer;opacity:1; position:absolute;padding:0;bottom:10%;left:50%;width:5em;min-width:0;height:4em;margin:0 0 0 -2.5em;
		transition:opacity 0.25s ease-out, transform 0.25s ease-out;-webkit-transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
		background:url('images/icon-play.png') 50% 50% no-repeat rgba(0,0,0,0.75); background-size:auto 60%;border:1px solid rgba(255,255,255,0.1) !important;box-shadow:none !important;transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1)}

	#video #vid .playButton:hover {transform:scale3d(1.2,1.2,1);-webkit-transform:scale3d(1.2,1.2,1);}

	#video #vid.show, .blog #vid {width:100%; padding:0 0 56.25%;}

	#video #vid.show .playButton {opacity:0;}

	#video #vid .youTubeVid {opacity:0;background:black;position:absolute;width:100%;height:100%;
		-webkit-transform:scale3d(0,0.5,1);transform:scale3d(0,0.5,1);
		transition:all 0.25s ease-out 0.25s}
	#video #vid.show .youTubeVid {-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:1}

	#video #vid iframe, .blog  #vid iframe{ position:absolute;z-index:1001;width:100%;height:100%;margin:0;padding:0;left:0;top:0;border:0; background:black; border:2px solid hsl(43,10%,20%); }

	/* slides */

	.game #puppyContent section div.slideshowWrap {padding:0 !important;position:relative;overflow:hidden !important; background:#000;  border:2px solid hsl(43,10%,20%); margin:0;}
	.game #puppyContent section div.slideshow:before {top:-3px;position:absolute;z-index:9999}
	.game #puppyContent section#intro div.slideshowWrap {width:100%;max-width:60em; margin:2em auto 1.5em!important;}
	.game #puppyContent section div div.slideshowWrap {}
	
	.game #puppyContent section div.slideshow {width:100%;height:0;padding:0 0 56.25%;margin:0;}
	.game #puppyContent section img.slideshow { position: absolute; display: none; width:100%; padding:0; margin:0; }


	/* section backgrounds */
	
	
	/* purp background, darker at top 
	#puppyContent section.intro,  #revenge-help #puppyContent .formSectionWrap section, #assets #puppyContent .formSectionWrap section,
		.hiscores #puppyContent .formSectionWrap section, .blog #masthead {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(265,100%,0%,0.7) 100%);
		background:linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(265,100%,0%,0.7) 100%);
		box-shadow:0 0 5em 0 hsla(270,100%,60%,0.5) inset; color:#beb8a9; 
	}*/
	
	/* purp background */
	#puppyContent > section, #revenge-help div.helpHeading, #puppyContent div.formSectionWrap section,  .hiscores #puppyContent #hiscoreTables blockquote,
	 .blog article header, .blog .site-footer, .blog #masthead,  #battledroid #puppyContent > section.intro {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,30%,0.5) 0%, hsla(265,100%,40%,0.6) 100%); 
		background:linear-gradient( 0deg, hsla(265,100%,30%,0.5) 0%, hsla(265,100%,40%,0.6) 100%); 
		box-shadow:0 0 5em 0 hsla(270,100%,60%,0.5) inset /*, 0 0 2em 0 hsla(260,100%,70%,0.1);*/
	}
	
	.blog .comments-title {background:black;  box-shadow:none}
	
	.blog #masthead:after {content:"";clear:both;display:block;width:100%;height:3px;padding:0 1em;margin:0;position:relative;bottom:0;left:-2em;
		 -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;
		background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);}

	/*.blog #masthead {background:url('images/blog-banner.jpg') left top no-repeat black;background-size:cover;box-shadow:none;} */


	/* dark background */
	#puppyContent div.formSectionWrap form, .support #puppyContent > section:nth-child(2), #revenge-help div.helpSection, #games section,
	.hiscores #puppyContent #hiscoreTables section, #battledroid #puppyContent > section,
		 #puppyContent div.formSectionWrap > nav, #puppyContent section.intro.blog #respond, .site-header, .blog .entry-content {
		background:hsla(40,5%,0%,0.6); box-shadow:0 0 5em 0 hsla(40,5%,0%,1) inset; /*, 0 0 2em 0 hsla(260,100%,70%,0.1);*/
	}	
	

	

	/* page split grad background */
 
	.game #puppyContent > section {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.5) 50%, hsla(40,5%,10%,0) 100%);
		background:linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.5) 50%, hsla(40,5%,10%,0) 100%); box-shadow:none; }
	
	.game #puppyContent > section#intro {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.75) 40%, hsla(40,5%,0%,0.75) 90%, hsla(40,0%,0%,1) 100%);
		background:linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.75) 40%, hsla(40,5%,0%,0.75) 90%, hsla(40,0%,0%,1) 100%); box-shadow:none; }



	/* HOME -------------------------------------------------------------------------------------------------- */


	#home #page {
		background:-webkit-linear-gradient(180deg,  hsla(20,100%,30%,0.75) 0%, hsla(10,100%,15%,0.5) 20%, hsla(10,100%,0%,0) 50%); 
		background:linear-gradient(180deg,  hsla(20,100%,30%,0.75) 0%, hsla(10,100%,15%,0.5) 20%, hsla(10,100%,0%,0) 50%); 
		background-attachment:fixed; }

	#home #one { background-image:url('images/basingstoke/basingstoke-top.jpg')}

	#home #video:after { height:2px;
		background:-webkit-linear-gradient( 90deg, hsla(20,10%,20%,0) 0%, hsla(25,20%,20%,1) 40%, hsla(25,20%,20%,1) 60%, hsla(20,10%,20%,0) 100%);
		background:linear-gradient( 90deg, hsla(20,10%,20%,0) 0%, hsla(25,20%,20%,1) 40%, hsla(25,20%,20%,1) 60%, hsla(20,10%,20%,0) 100%);}

	#home #games{
		background:-webkit-linear-gradient( 180deg, hsla(20,10%,0%,0.75) 0%, hsla(30,5%,5%,0.5) 40%, hsla(40,5%,0%,0) 100%);
		background:linear-gradient( 180deg, hsla(20,10%,0%,0.75) 0%, hsla(30,5%,5%,0.5) 40%, hsla(40,5%,0%,0) 100%); box-shadow:none; }


	iframe#bundle{width:410px;height:150px;background:none;padding:0;margin:-4em auto 0}

	#home #video #vid img {top:20%;max-width:90vw}

	#home #video #vid .playButton {top:70%; border: 1px solid rgba(255, 255, 255, 0.25) !important;} 

	#home #games {width:100%;padding:2em 2em; margin:auto; overflow:visible}

	#home #games > p {text-align:center;max-width:100%;font-size:1.125em;line-height:1em}
	
	#home #gamesWrap, #home .curveWrap {position:relative;max-width:80em;margin:0 auto;}
	#home #gamesWrap2, #home .curveWrap2 {display:table;border-spacing:0.75em;border-collapse:separate;margin:0 -0.375em;}
	
	#home #games .game {display:table-cell;width:25%;padding:0 0 5.5em;vertical-align:top;background:black;}
	#home #games section {width:100%;margin:0;padding:0;position:relative;}
	#home #games section img {-webkit-transform: rotate(0);-moz-transform: rotate(0);transform: rotate(0);}
	#home #games section img.bw {width:100%; height:auto; }
	#home #games section img.color {position:absolute;top:0;left:0;width:100%; height:auto;opacity:0;transition:opacity 0.25s ease-out}
	#home #games .game:hover section img.color {opacity:1}
	#home #games section p {padding:0.5em 10% 0}

	/* can't set pos relative on <a> as a table cell, but can on wrap as a table */
	#home #games .info {width:25%;display:inline-block;position:absolute;bottom:2.25em;left:0;padding:0 2em;text-align:left;}
	#home #games .info:before {content:"";display:block;width:100%;height:2px;-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;margin:0 -1.625em 0;padding:0 3.25em 0 0;position:relative;top:-2px;
		background:hsla(43,11%,40%,0.2) }
	
	#home #games .button {float:right;margin:1.25em 0 0}
	#home #games .info img {position:static;opacity:0.71;width:auto;min-width:0;max-width:none;transition:opacity 0.25s ease-out;margin:1.5em 0 0}
	#home #games .game:hover .info img {opacity:1}
	#home #games .game:nth-child(2) .info {left:25%}
	#home #games .game:nth-child(3) .info {left:50%}
	#home #games .game:nth-child(4) .info {left:75%}
	
	#home #games .info img.PSStore {float:left;margin:0}
	
	#home #games #gamesWrap + p,  #home #games .curveWrap + p{margin-top:0.75em}

	#home  #puppyContent   .curveWrap {max-width:68em;} /* img or text must => width so table fills ok so that .info pos works */
	#home  #puppyContent   .curveWrap2 {}
	#home  #puppyContent   .curveWrap .game {width:50%;padding-bottom:3em}
	#home  #puppyContent   .curveWrap p {max-width:none;padding-top:0 !important}
	
	#home  #puppyContent .curveWrap .info {width:100%;min-height:100px;bottom:0.75em;padding:0 1em !important} /*width:50%; */
	#home  #puppyContent   .curveWrap .info:before {margin-top:-1px}
	
	#home  #puppyContent   .curveWrap .button {min-width:0;clear:none;text-transform:none;margin:0 0 0 0.5em;position:relative;} /* ;margin:-0.875em 0 0 0.5em; top:50px */
	#home  #puppyContent   .curveWrap .button:last-of-type {margin-left:0}
	#home  #puppyContent   .curveWrap .game:nth-child(2) .info {left:50%}

	#home  #puppyContent   .curveWrap .info:before {margin: 0 -0.625em;padding: 0 1.25em 0 0;}

	#home #games .curveWrap .info.consoles {text-align:center;vertical-align:middle;margin-bottom:30px}
	#home #games .curveWrap .info.consoles img {margin:0 0 -30px}
	

	#home div.reviews {display:table;padding:0;margin:1.5em auto 0;width:80%;max-width:70em;}
	#home div.reviews figure.review {width:33.333%;padding:0 1%;float:none;display:table-cell;vertical-align:bottom}

	
	
	/* HISCORES -------------------------------------------------------------------------------------------------- */

	
	.hiscores #puppyContent div.formSectionWrap form h3{margin-top:1em}
	.hiscores #puppyContent div.formSectionWrap form h3:first-of-type{margin-top:0}
	.hiscores #puppyContent div.formSectionWrap input {max-width:100%}
	.hiscores input[form="reset"] {clear:none;margin-right:1em}
	
	.hiscores #puppyContent #hiscoreTables { float:left; clear:left; margin-left:-1%; width:102%}

	.hiscores table { border-collapse: collapse; width:100%;margin:3.5em 0 1em}
	.hiscores td { text-align:right;margin:0;padding:0.3em 0.25em 0.25em;font-size:1.125em;color:#beb8a9;vertical-align:middle}

	.hiscores table td:nth-child(1) {padding-left:2em;width:1.0em}
	.hiscores table td:nth-child(2) {color:#fff;text-align:left;padding-left:1em;}
	.hiscores table td:nth-child(3) {padding-right:2em}
	
	.hiscores table tr:nth-child(2) {opacity:0.95}
	.hiscores table tr:nth-child(3) {opacity:0.89}
	.hiscores table tr:nth-child(4) {opacity:0.82}
	.hiscores table tr:nth-child(5) {opacity:0.74}
	.hiscores table tr:nth-child(6) {opacity:0.66}
	.hiscores table tr:nth-child(7) {opacity:0.58}
	.hiscores table tr:nth-child(8) {opacity:0.50}
	.hiscores table tr:nth-child(9) {opacity:0.42}
	.hiscores table tr:nth-child(10) {opacity:0.34}

	.hiscores table tr:after {content:"";clear:both;display:block;width:100%;height:2px;padding:0;margin:0;position:absolute;left:0;
		background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);}

	.hiscores tr:first-of-type:after{content:none}
	
	.hiscores #puppyContent #hiscoreTables section {width:48%; float:left; min-height:8em; padding:0;margin:8.5em 1% 1em}
	.hiscores #puppyContent #hiscoreTables section.noScores {margin-top:0.5em;}
	
	.hiscores #puppyContent #hiscoreTables figure {margin:0;width:100%;	position:absolute;top:-8em}
	.hiscores #puppyContent #hiscoreTables blockquote {width:100%;height:8em}
	
	.hiscores #puppyContent #hiscoreTables h2 {margin:1em 0 0.25em;font-size:1.25em}
	.hiscores #puppyContent #hiscoreTables figure h2 {margin:0 0 0.25em}

	.hiscores figure.review figcaption:before {
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(268,100%,45%,0.55) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(268,100%,45%,0.55) 50% ) no-repeat;
	}

	.hiscores #puppyContent #hiscoreTables figcaption {padding:0 1.5em 0 5.5em;line-height:3em}
	.hiscores #puppyContent #hiscoreTables figcaption:before {margin-left:-8em;}

	#hiscoreTables blockquote p:first-of-type {font-size:2.5em;line-height:0.75em;margin:0.25em 0 0.25em;}
	
	.hiscores  #puppyContent #hiscoreTables section {text-align:center}
	.hiscores  #puppyContent #hiscoreTables section .button {float:none;margin:0 auto 1.5em;display:block;max-width:5em}

	.hiscores #puppyContent #hiscoreTables section p.time {position:absolute;top:0.75em;left:1.25em}
	.hiscores #puppyContent #hiscoreTables section.noScores p.time {position:relative;top:0;left:0}


	/* SUPPORT -------------------------------------------------------------------------------------------------- */

	.support #puppyContent > section:first-of-type {padding-right:40%}
	.support #puppyContent section h1 + img {position:absolute;width:42%;right:0em;bottom:0.25em;}
	
	
	
	/* GAMES -------------------------------------------------------------------------------------------------- */


	.game #puppyContent > section {width:100%;margin:0;padding:2em;position:relative;border:none; } 
	.game #puppyContent > section:first-of-type {padding-top:0;}

	.game #puppyContent > section:after, #video:after {content:"";display:block;width:100%;height:3px;padding:0;margin:0;position:relative;bottom:-2em;z-index:-1;
		background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0) 0%, hsla(265,100%,50%,1) 40%, hsla(265,100%,50%,1) 60%, hsla(265,80%,30%,0) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0) 0%, hsla(265,100%,50%,1) 40%, hsla(265,100%,50%,1) 60%, hsla(265,80%,30%,0) 100%);}
	#video:after{bottom:-3em;}

	.game #puppyContent > section > div {padding:3em 3em 0.5em; margin:-2.5em auto 0; width:90%; max-width:70em; position:relative; overflow:visible;text-align:left;}
	.game #puppyContent > section > div:after { content:""; display:table; clear:both;}

	
	.game #puppyContent > section.new div {overflow:visible;}
	.game section.new h1 {font-size:2.75em;padding-left:2em;position:relative;}
	.game section.new h1 img {position:absolute;top:-1.25em;left:-0.25em;width:2em;height:2em}

	.game #puppyContent > section.sub {background:none}


	.game #puppyContent > section > div.reviews {padding:0;margin-top:0;}
	
	.game figure.review {width:31.333%;float:left;margin:0 1%}

	.game #puppyContent > section > div.reviews:first-of-type {display:table;padding:0 0 1em}
	.game #puppyContent > section > div.reviews:first-of-type figure.review {width:33.333%;padding:0 1%;float:none;display:table-cell;vertical-align:bottom}


	.game p.intro {clear:both}

	.game #puppyContent section div h2 {margin:1em 0 0.5em;}

	.game #puppyContent > section .column {width:48%;float:left;}
	.game #puppyContent > section .column:first-of-type {margin-right:4%}
	
	.game #intro h1 {text-align:center}
	.game #intro figure.review {width:100%;max-width:26em;float:right;margin:2em 0 0}
	
	.game #intro .reviews figure.review blockquote {background:hsla(40,10%,20%,0.5);color:white}
	.game #intro .reviews figure.review figcaption:before {
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(40,10%,20%,0.5) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(40,10%,20%,0.5) 50%) no-repeat;
	}

	.game #playstation h1, .game #curve h1 { margin-bottom:0.625em; text-align:center}
	
	.game #puppyContent section#playstation .column {width:40%}
	.game #puppyContent section#playstation .column + .column {width:56%;margin-top:0.25em}

	#ultratron section#curve .column {width:56%}
	#ultratron section#curve .column + .column {width:40%;margin-top:0.25em}


	.game #playstation .psLogosWrap, .game #curve .psLogosWrap{text-align:center;width:100%;max-width:25em;margin:0 auto 2em}
	.game #playstation img.psFamily, .game #curve img.psFamily {margin:0 auto -1em;float:none;clear:both;}
	.game #playstation div.psLogos, .game #curve div.psLogos {margin:0 auto;clear:both;}
	.game #playstation div.psLogos, .game #curve  div.psLogos {margin:0 auto -1.0em}
	.game #playstation img.curve, .game #curve img.curve {clear:both;margin:1.5em auto 0}

	.game #playstation img#TA-on-Vita, .game #curve img#TA-on-Vita{margin:1.5em 0 -2em;width:100%;height:auto}


	#ultratron #end > div {text-align:center;}
	#ultratron #end > div > p {margin:0 auto 1em}
	#ultratron #end h1 {font-size:3em;text-shadow:0 0 0.75em red, 0 0 0.25em #f30}
	#ultratron #end h2 {margin:0.5em 0 1em}
	
	#titanAttacks #end > div {text-align:center;padding-left:1em;padding-right:1em}
	#titanAttacks #end > div > p {margin:0 auto 1em}
	#titanAttacks #end h2 {margin:0.5em 0 1em}	

	 html#revenge { background:#0d0d0b; }
	#revenge #page {
		/*background:-webkit-linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background:linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background-attachment:fixed;*/ 
		background:none}
	
	#revenge #one { background-image:url('images/revenge-of-the-titans/RotT-top.jpg') }
	#revenge #two { background-image:url('images/revenge-of-the-titans/RotT-bottom.jpg'); opacity:0}

	#revenge figure.review figcaption, figure.review.revengeCharacter figcaption {padding-left:5.5em;}
	#revenge figure.review figcaption:before, figure.review.revengeCharacter figcaption:before {margin-left:-7.5em;}
	#revenge figure.review figcaption img, figure.review.revengeCharacter figcaption img {height:150%;bottom:0em;left:0.5em;}


	#revenge #intro .column {width:38%}
	#revenge #intro .column + .column {width:58%}
	
	#revenge #intro .column figure.review {float:right;width:90%;min-width:18em;margin:0 0 1em}
	#revenge #intro .column figure.review figcaption {padding-left:9.5em;}
	#revenge #intro .column figure.review figcaption:before {margin-left:-11.5em;}
	#revenge #intro .column figure.review figcaption img {height:400%;bottom:-9.75em;left:-1.5em;}


	#revenge #sandbox h1 {font-size:2.75em}
	#revenge #sandboxLogo {float:left;width:100%;margin:-0.25em 0 0.75em -5%}
	
	#revenge #puppyContent #sandbox div.slideshowWrap {width:100%; margin-top:1.5em}
	#revenge #sandbox .column:first-of-type {width:60%;}
	#revenge #sandbox .column {width:36%;position:relative}
	#revenge #sandbox .button {float:left;margin-top:1em;width:48%;padding:0;clear:none;max-width:12em}
	#revenge #sandbox .button:first-of-type {margin-right:4%}

	#revenge #steam h1 {margin:0 0 0.5em}
	#revenge #steam img {width:100%;}
	#revenge #steam > div {display:table;padding-left:0!Important;padding-right:1em!Important}
	#revenge #steam .column {display:table-cell;vertical-align:middle;float:none;width:60%;}
	#revenge #steam .column + .column {width:40%;min-width:20em;padding:0 0 0 1em}


	#revenge #xmas img {width:50%;float:left;margin:-2% 0 0}
	#revenge #xmas .column {width:50%;margin:0;}

	#revenge #end > div {text-align:center;}
	#revenge #end > div > p {margin:0 auto 1em}
	#revenge #end h1 {font-size:3em;}
	#revenge #end h2 {margin:0.5em 0 1em}

	#revenge #end > div:first-of-type {padding-left:0;padding-right:0;}
	#revenge #end > div:first-of-type .review {width:48%}
	#revenge #end > div:first-of-type .review:last-of-type {width:70%;float:none;margin:0 auto 0;clear:both;padding-top:0.5em}



	#battledroid #two { background-image:url('images/temp-BD-bottom.jpg'); opacity:0}

/*

	html#battledroid { background:#000000; }
	
	#battledroid #page {
		background:none}

	#battledroid #one { background-image:url('images/battledroid/BD-top.jpg') }


	#battledroid #intro .column {width:100%}
	#battledroid #intro .column + .column {width:100%}
	
	#battledroid #end > div {text-align:center;}
	#battledroid #end > div > p {margin:0 auto 1em}
	#battledroid #end h1 {font-size:3em;}
	#battledroid #end h2 {margin:0.5em 0 1em}

	#battledroid #end > div:first-of-type {padding-left:0;padding-right:0;}
	#battledroid #end > div:first-of-type .review {width:48%}
	#battledroid #end > div:first-of-type .review:last-of-type {width:70%;float:none;margin:0 auto 0;clear:both;padding-top:0.5em}

	*/




	html#ultratron { background:#0d1919; }
	#ultratron #page {
		/*background:-webkit-linear-gradient(180deg,  hsla(190,80%,50%,0.8) 0%, hsla(190,60%,10%,0.2) 25%, hsla(190,10%,10%,0.0) 60%); 
		background:linear-gradient(180deg,  hsla(190,80%,50%,0.8) 0%, hsla(190,60%,10%,0.2) 25%, hsla(190,10%,10%,0.0) 60%); 
		background-attachment:fixed;*/
		background:none}

	#ultratron #one { background-image:url('images/ultratron/UT-top-2.jpg') }
	#ultratron #two { background-image:url('images/ultratron/UT-bottom.jpg'); opacity:0}

	#ultratron #puppyContent h1, #ultratron #puppyContent h2, #ultratron #puppyContent h3 {text-shadow:0 0 0.5em hsl(182,100%,50%) }
	
	/*
	#ultratron #puppyContent .button {border-color:hsla(180,100%,50%,0.5);color:hsl(190,100%,50%)!Important;box-shadow:0 0 0.25em hsla(190,100%,50%,0.25);}
	#ultratron #puppyContent .button:hover { box-shadow:0 0 0.5em hsla(190,100%,50%,1);color:hsl(190,100%,70%)!Important;text-shadow:0 0 0.5em hsla(190,100%,50%,1);
		border-color:hsla(180,100%,60%,0.6);}
	*/
	
	#ultratron  .buyButtons .divide { 
		background:-webkit-linear-gradient( 180deg, hsla(182,100%,50%,1) 0%, hsla(180,80%,30%,0) 100%);
		background:linear-gradient( 180deg, hsla(182,100%,50%,1) 0%, hsla(180,80%,30%,0) 100%);}

	#ultratron .game section .reviews figure.review blockquote {background:hsla(180,90%,10%,0.5);color:hsl(190,100%,50%)}
	#ultratron .game section .reviews figure.review figcaption:before {
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(180,90%,10%,0.5) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(180,90%,10%,0.5) 50%) no-repeat;
	}

	#ultratron .game #intro .column figure.review blockquote {color:hsl(190,100%,50%)}
	#ultratron .game #intro .column figure.review figcaption {padding-left:8em;}
	#ultratron .game #intro .column figure.review figcaption:before {margin-left:-10em;}
	#ultratron .game #intro .column figure.review figcaption img {bottom:-1.5em;left:1em;}

	#ultratron #intro h1 {font-size:2.5em;line-height:1.125em;}
	#ultratron #intro h1 strong {font-size:1.75em}

	#ultratron .game #puppyContent > section { 
		background:-webkit-linear-gradient( 0deg, hsla(182,100%,30%,0.5) 0%, hsla(180,50%,5%,0.4) 50%, hsla(180,0%,0%,0.8) 100%);
		background:linear-gradient( 0deg, hsla(182,100%,30%,0.5) 0%, hsla(180,50%,5%,0.4) 50%, hsla(180,0%,0%,0.8) 100%); box-shadow:none; }
	
	#ultratron .game #puppyContent > section#intro {
		background:-webkit-linear-gradient( 0deg, hsla(182,100%,30%,0.5) 0%, hsla(180,50%,5%,0.4) 40%, hsla(180,5%,0%,0.75) 90%, hsla(180,0%,0%,1) 100% );
		background:linear-gradient( 0deg, hsla(182,100%,30%,0.5) 0%, hsla(180,50%,5%,0.4) 40%, hsla(180,5%,0%,0.75) 90%, hsla(180,0%,0%,1) 100% ); box-shadow:none; }	

	#ultratron .game #puppyContent > section:after, #ultratron #video:after { 
		background:-webkit-linear-gradient( 90deg, hsla(180,80%,30%,0) 0%, hsla(182,100%,50%,1) 40%, hsla(182,100%,50%,1) 60%, hsla(180,80%,30%,0) 100%);
		background:linear-gradient( 90deg, hsla(180,80%,30%,0) 0%, hsla(182,100%,50%,1) 40%, hsla(182,100%,50%,1) 60%, hsla(180,80%,30%,0) 100%);}

	#ultratron .game #puppyContent > section#coop {background:hsla(180,0%,0%,0.8)}
	#ultratron .game #puppyContent > section#coop:after {z-index:1;
		background:-webkit-linear-gradient( 90deg, hsla(180,80%,30%,0) 0%, hsla(182,100%,50%,0.5) 40%, hsla(182,100%,50%,0.5) 60%, hsla(180,80%,30%,0) 100%);
		background:linear-gradient( 90deg, hsla(180,80%,30%,0) 0%, hsla(182,100%,50%,0.5) 40%, hsla(182,100%,50%,0.5) 60%, hsla(180,80%,30%,0) 100%);}

	#ultratron #coop .intro {margin-top:2em;clear:none}
	#ultratron #coop div > img {float:right;width:40em;max-width:50%;margin-top:1em}

	#ultratron #steam h1 {margin:0 0 0.5em}
	#ultratron #steam img {width:100%;position:relative;z-index:2}
	#ultratron #steam > div {display:table;padding-left:0!Important;padding-right:1em!Important}
	#ultratron #steam .column {display:table-cell;vertical-align:middle;float:none;width:60%;min-width:35em}
	#ultratron #steam .column + .column {width:40%;min-width:0;padding:0 0 0 1em}


	#ultratron .game #end .reviews figure.review blockquote, #ultratron .game #intro .column figure.review blockquote {background:hsla(180,90%,0%,0.7) !important}
	#ultratron .game #end .reviews figure.review figcaption:before, #ultratron .game #intro .column figure.review figcaption:before {
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(180,90%,0%,0.7) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(180,90%,0%,0.7) 50%) no-repeat;
	}
	
	
	#ultratron .game figure.review:before {background:linear-gradient( 270deg, hsla(182,100%,50%,0.4) 0%, hsla(182,80%,40%,0.15) 100%)}
	
	
	 #ultratron .game #end .reviews figure.review:nth-child(2) blockquote p {font-size:1.5em}
	#ultratron #end img.allOS {margin-top:-3em}	
	
	
	html#titanAttacks { background:#0c0402;} 
	#titanAttacks #page {
		background:-webkit-linear-gradient(181deg, rgba(120,0,255,0.5) 0%, rgba(130,0,255,0.1) 20em, rgba(140,0,255,0) 100em);
		background:linear-gradient(181deg, rgba(120,0,255,0.5) 0%, rgba(130,0,255,0.1) 20em, rgba(140,0,255,0) 100em);
		background-attachment:fixed;
	}
	#titanAttacks #one { background-image:url('images/titan-attacks/TA-top.jpg') }
	#titanAttacks #two { background-image:url('images/titan-attacks/TA-bottom.jpg'); opacity:0}

	#titanAttacks #puppyContent h1 {font-size:3.25em;}
	#titanAttacks #intro h2 { margin: 0.5em 0;}

	#titanAttacks figure.review {padding-bottom:1em !important}
	#titanAttacks figure.review blockquote  {color:#beb8a9 !important}
	#titanAttacks figure.review blockquote strong {color:white !important}
	
	#titanAttacks figure.review figcaption, figure.review.titanAttacksCharacter figcaption {padding-left:7.5em;}
	#titanAttacks figure.review figcaption:before, figure.review.titanAttacksCharacter figcaption:before {margin-left:-9.5em;}
	#titanAttacks figure.review figcaption img, figure.review.titanAttacksCharacter figcaption img {height:180%;bottom:-1.0em;left:0.5em;}

	#titanAttacks #intro .column figure.review {margin-top:0.5em}

	#titanAttacks #steam h1 {margin:0 0 0.5em}
	#titanAttacks #steam img {width:100%;}
	#titanAttacks #steam > div {display:table;padding-left:0!Important;padding-right:1em!Important}
	#titanAttacks #steam .column {display:table-cell;vertical-align:middle;float:none;width:60%;min-width:35em}
	#titanAttacks #steam .column + .column {width:40%;min-width:0}

	#titanAttacks #end > div {text-align:center;padding-left:1em;padding-right:1em}
	#titanAttacks #end > div > p {margin:0 auto 1em}
	#titanAttacks #end h2 {margin:0.5em 0 1em}
	

	#droidAssault figure.review figcaption, figure.review.droidAssaultCharacter figcaption {padding-left:5.5em;}
	#droidAssault figure.review figcaption:before, figure.review.droidAssaultCharacter figcaption:before {margin-left:-7.5em;}
	#droidAssault figure.review figcaption img, figure.review.droidAssaultCharacter figcaption img {height:150%;bottom:0em;left:0.5em;}



	/* ASSETS -------------------------------------------------------------------------------------------------- */

	html#assets { background:#0d0d0b; }
	#assets #one { background-image:url('images/revenge-help/RotT-help-top.jpg') }
	#assets #two { background-image:url('images/revenge-help/RotT-help-bottom.jpg'); opacity:0}

	#assets #puppyContent > section { background:hsla(43,5%,10%,0.8); box-shadow:0 0 5em 0 hsla(43,5%,15%,1) inset; }
	#assets #puppyContent section section {background:none;box-shadow:none;}

	#assets #puppyContent section section:after {bottom:-2.5em}

	.asset img.transparentThumb {background:url(images/thumb-back.gif) top left repeat}
	.asset img.light {background:url(images/thumb-back-light.gif) top left repeat}
	.asset img.dark {background:url(images/thumb-back-dark.gif) top left repeat}
	.asset {float:left;width:18.4%;margin:1em 0 0 2%;}
	.asset .thumb {float:left;height:auto;width:13.428%;margin:0 0 0 1%;}
	
	.asset.first, .asset.full, .asset .thumb:first-of-type,
		.asset .thumb:nth-of-type(8), .asset .thumb:nth-of-type(15), .asset .thumb:nth-of-type(22) {clear:left;margin-left:0;}
	
	.asset img {width:100%;height:auto;line-height:1em}
	.asset.wide {width:38.8%}
	.asset.full {width:100%}
	
	#assets #puppyContent section section p {margin-top:0.5em;font-size:0.625em;clear:left;}
	#assets #puppyContent section > h3 + p {margin-bottom:1em;font-size:0.625em;}
	.asset p strong {text-transform:uppercase;font-weight:normal}
	
	.asset.list {width:auto}
	#assets #puppyContent section .asset.list p {float:left;margin:0 0 1em 0;min-width:10em;}
	#assets #puppyContent section .asset.screenshots p {padding-top:1em}
	
	#assets #puppyContent > section h1 {font-size:3em;margin:0 0 0.5em}
	#assets #puppyContent section h3 {}
	
	#assets #puppyContent a.button {height:1.25em;line-height:1.25em;padding:0 1em;margin:0 0.5em 0.5em 0;font-size:0.8em;float:left;clear:none;
		text-align:center;text-decoration:none;min-width:3em;color:hsla(43,11%,60%,1);background:hsla(43,11%,37%,0.3)}
	#assets #puppyContent a.button:hover { background:#f70; color:#fff}
	#assets .button small {font-size:0.8em;}

	#assets iframe {max-width:100%}
	

	
	#assets object {background:none}
	

	/* REVENGE HELP CSS -------------------------------------------------------------------------------------------------- */
	
	html#revenge-help { background:#0d0d0b; }
	#revenge-help #one { background-image:url('images/revenge-help/RotT-help-top.jpg') }
	#revenge-help #two { background-image:url('images/revenge-help/RotT-help-bottom.jpg'); opacity:0}
	
	#revenge-help p {max-width:100%;}

	#revenge-help .panel, #revenge-help .captionedPic {position:relative;}
	
	#revenge-help .panel {width:100%;padding:0; float:left;margin:1em 0 1em 2%}
	#revenge-help .panel.first, #revenge-help .captionedPic {clear:left;margin-left:0;}
	#revenge-help .panel img { width:100%;}
	#revenge-help .panel .number {color:#fff;position:absolute;font-size:0.8125em;line-height:1.125em;top:0;left:0;background:#000;
		width:1.125em;height:1.125em;text-align:left;text-align:center}
	
	#revenge-help .hint {font-style:italic;}
	
	#revenge-help .panel.x4 {width:23.5%}
	#revenge-help .panel.x3 {width:32%}
	#revenge-help .panel.x2 {width:49%}
	
	#revenge-help .markerWrap {position:relative}
	#revenge-help .captionedPic {position:relative;width:100%;margin:2em 0;clear:left;float:none;}
	
	#revenge-help .captionedPic img, #revenge-help .panel img {border:1px solid #5e5b52}
	
	#revenge-help h1 {margin-bottom:1em}
	#revenge-help h2 {font-size:2em;}
	#revenge-help h3 {font-size:2em;}
	#revenge-help h4 {font-size:1.0526em;margin:1em 0 0.5em;}
	
	#revenge-help .panel p, #revenge-help .captionedPic p, #revenge-help .icon p { font-size:0.85em !Important; line-height:1.375em}

	#revenge-help .numbered {padding-left:2em;position:relative}
	#revenge-help .numbered span.number, #revenge-help .marker {
		display:inline-block;background:#fff;color:#000;font-size:1em;width:1.125em;height:1.125em;line-height:1.125em;text-align:center;}
	#revenge-help .marker {position:absolute;}
	
	#revenge-help .icon img {float:left;margin:0 1em 1em 0}



	#puppyContent > img:first-child {display:none; width:80%; max-width:40em; margin:6em -0.75rem 0 0; position:absolute; right:96%;  }
	h2 a {color:#fff}


	footer #footerPuppy { position:absolute; bottom:0; right:1em; width:12em; height:12em;z-index:1000}
	
	footer section {float:left;padding:0 2.5em; margin:0; height:6em; border-right:3px solid #1c1a17;font-size:0.825em;opacity:0.4;
		transition:opacity 0.25s ease-out; }
	footer:hover section {opacity:1}
	
	footer h2 { font-size:1.5em; margin-bottom:0.25em; padding:0; text-shadow:none} /* text-shadow:0 0 0.5em #6600ff } */
	footer p { margin:0.25em 0}
	
	footer form {position:relative;margin:0.5em 0;float:right;}
	footer form input, footer form input[type="submit"]{max-width:10em;float:left;position:relative;bottom:auto;right:auto;margin:0 1em 0 0}
	footer form input[type="submit"] {margin:0;clear:none}
	footer form label {margin:0 1em 0 0}

	footer #follow {padding-right:2em}
	footer #follow #links {margin:0.75em 0 0 -0.5em}
	footer #follow a {width:4em;height:4em;display:inline-block;}
	
	footer #follow a#facebook, .menu ul li a.imgLink .facebook {background:url('images/follow/facebook-off.png'); background-size:100% 100%}
	footer #follow a#twitter, .menu ul li a.imgLink .twitter {background:url('images/follow/twitter-off.png'); background-size:100% 100%}
	footer #follow a#youtube, .menu ul li a.imgLink .youtube {background:url('images/follow/youtube-off.png'); background-size:100% 100%}
	footer #follow a#rss {background:url('images/follow/rss-off.png'); background-size:100% 100%}
	
	footer #follow a img {width:100%;width:4em;opacity:0;transition:opacity 0.25s ease-out;-webkit-transform: rotate(0);-moz-transform: rotate(0);transform: rotate(0);}
	footer #follow a:hover img {opacity:1}



	#puppyContent section nav ul {margin:0;padding:0}
	#puppyContent section nav ul li { list-style:none;margin:0;padding:0;font-size:1.75em;line-height:1.5em;text-shadow:0 0 0.5em #ffb37b}
	#puppyContent section nav ul li.selected { line-height:0.8em;padding:0.7em 0 0.4em }
	#puppyContent section nav a {color:#B0AB9F;font-size:0.625em;display:inline-block;text-shadow:none;line-height:1em;transition:font-size 0.25s ease-out, color 0.25s ease-out}
	#puppyContent section nav a:hover {color:#fff;font-size:0.75em;}

	#puppyContent div.intro aside {right:0;bottom:auto}
	#puppyContent div.intro aside form {margin:0;padding:0;background:none;overflow:visible}
	#puppyContent div.intro aside form input, #puppyContent div.intro aside form input[type="submit"]{max-width:10em;float:left;position:relative;bottom:auto;right:auto;margin:0 1em 0 0;font-size:0.9em}
	#puppyContent div.intro aside form input[type="submit"] {margin:0;}
	
	
	nav#debug{position:fixed;right:0;width:0.66em;padding:0.75em 0;opacity:0.5;overflow:hidden;transition:all 0.125s ease;background:#000;border-radius:0.25em;z-index:1000}
	nav#debug:hover{width:10em;opacity:1}
	nav#debug a {padding:0.1em 1em 0.1em 0;float:right;clear:both;background:#000;margin:0;white-space:nowrap}
	
	#console {position:fixed;left:0;top:10em;z-index:10000;background:#000;padding:0.25em 0.5em}

	#puppyContent p.trademarks {text-shadow:none !important; text-transform:none !important; font-size:0.625em !important; color:#beb8a9 !important; margin:1em auto 2em; max-width:none;
	font-family:'titilliumlight', Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, sans-serif !important;}
	
	#puppyContent .buyButtons p.trademarks {padding:0 2em;margin:2em 0 1em;color:rgba(104,98,83,0.6)!important}

	#video + .buyButtons p.trademarks {display:none}

	/* MENU NAV */

	nav a {text-decoration:none !important}
	
	.menu-link { display:none; float:right; text-decoration:none; padding:0.15em 0.4em 0.65em 0.5em; font-size:2em; line-height:0.25em;background:#000; }
	
	.menu { float:right; margin:0 0.25em 0 0; font-size:1.625vw; }
	.menu ul { padding:0; margin:0; list-style:none; position:relative; display:inline-table; }
	.menu li { margin:0; padding:0 }
	
	.menu ul:after { content:""; clear:both; display:block; }
	/* .menu ul li {  background-color:rgba(255, 0, 0, 0); } */
	.menu > ul > li { display:inline-block; }
	.menu ul li a, .menu ul li .selected { display:block; text-decoration:none; color:#fff; font-size:1em; }
	.menu ul li > a, .menu ul li .selected { padding:0.75em 0.625em 0.625em; }
	
	
	.menu li.has-submenu a, .menu ul li .selected { cursor:default; }
	.menu li.has-submenu a { background:none;  }
	.menu li.has-submenu ul a  { cursor:pointer;  }
	 
	.menu ul ul { display:block; height:0; overflow:hidden; position:absolute;  z-index:10000; min-width:12em; top:100%; background:#000  }
	
	.menu ul li:hover > ul { display:block; height:auto; }
	
	.menu ul ul > li { position:relative; opacity:0; background:none;
		transition:opacity 0.25s ease-out; }
	
	.menu ul ul > li a { padding:0.25em 1em; height:auto; }
	.menu ul li:hover ul li a, .menu ul li ul li .selected { padding:0.75em 1em !important;}
	.menu ul li:hover ul li  { opacity:1 }
	
	.menu ul li.has-submenu:hover > a, .menu-link:hover, a.menu-link.active { background:#000  }
	.menu ul li:hover > a{ background:#f70; } 
	
	.menu ul li a, .menu ul li .selected, a.menu-link {color:#a69d90; transition:background 0.25s ease-out, color 0.25s ease, padding 0.125s ease-out}
	.menu ul ul li a, .menu ul ul li .selected {color:#a69d90;}
	.menu ul li a:hover, .menu ul > li:hover > a, .menu ul li a.active, a.menu-link:hover {color:#fff}
	
	.menu ul li .selected   { color:#fff !important; text-shadow:0 0 0.5em #ffb37b }
	.menu ul ul li .selected { padding-left:1em; }

	.menu ul li a.imgLink {width:2.2em;position:relative;}
	.menu ul li a.imgLink span {position:absolute;height:80%;width:100%;top:0;left:0;right:0;bottom:0;margin:auto;}
	.menu ul li a.imgLink img {position:absolute;width:100%;height:100%;opacity:0; transition:opacity 0.25s ease-out; -webkit-transform: rotate(0);-moz-transform: rotate(0);transform: rotate(0);}
	.menu ul li a.imgLink:hover {background:none}
	.menu ul li a.imgLink:hover img {opacity:1;} 


	/* smaller menu */

@media screen and (max-width:53em) { 
	
	a.menu-link { display:block; z-index:10000; }

	/* transition:all 0.125s ease-in; */

	.menu { background-color:rgba(0, 0, 0, 1); 
		transition:none;
		max-width:0em !important; position:absolute; right:0; top:0; z-index:10000; height:auto; opacity:0; font-size:1em; margin:0
	}
	
	.menu, .menu > ul ul { overflow:hidden; height:0; width:100%; max-width:100%; }
	.menu > li > ul { padding:0px; border:none; }
	.menu ul li:hover > ul { display:block; height:0; top:0; }

	.menu li.has-submenu a { cursor:pointer; }

	.menu ul ul > li { opacity:1; }

	.menu.active, .menu > ul ul.active, .menu ul li:hover > ul.active { height:auto; top:0; }
	.menu.active {right:0; top:3em;max-width:18em !important;opacity:1}

	.menu ul { display:inline; }
	.menu li {max-width:none}
	.menu li, .menu > ul > li { display:block; }
	.menu li a { color:#000; display:block; padding: 1em !important; border:1px solid #333; border-width:0.125em 0 0; position:relative; }
	.menu ul li:nth-of-type(6) a {border-width:0.125em 0}
	
	.menu li.has-submenu > a:after { content:'+'; position:absolute; top:0; right:0; display:block; font-size:2em; padding:0.4em 0.5em; }
	.menu li.has-submenu > a.active:after { content:"-"; }



	.menu ul ul { display:inherit; position:relative; border:none; }

	.menu ul li a, .menu ul li .selected {color:#a69d90;}

	.menu ul li a, .menu ul li:hover ul li a { padding:0.625em 1em !important; }
	.menu ul ul li a, .menu ul li:hover ul li a, .menu ul li .selected { border:none; padding:0.625em 1em 0.625em 1.5em !important; }
	.menu ul ul li .selected {margin-left:0.5em}

	.menu ul li a.imgLink {border:none;float:left;margin:0;width:3.75em;height:4.5em}
	.menu ul li:nth-of-type(7) a.imgLink {margin-left:0.5em}

	.menu ul li.has-submenu:hover > a {background:#000}
	.menu ul li.has-submenu > a:hover {background:#333}

}



/* small screen */

@media all and (max-width:75em) {
	#console { background:yellow}
	
	#one, #two {z-index:-2;} /* disable scroll pos fx */
	
	#puppyContent { width: 95%;}

	#page { padding-bottom:8em;}	
	footer {height:8em;margin-top:-8em;padding:1.5em 0 0}
	footer #footerPuppy {width:10em;height:10em}
	footer section {padding: 0 2em;}
	footer #follow {padding-right: 1.5em;}

	#puppyContent #video {padding:0 10% 3em}
	#home #video #vid .playButton {  }
	#home #games .game {padding:0 0 7em}
	#home #games .info {text-align:center;}
	#home #games .info img {margin-top:1.25em}
	#home #games #gamesWrap .button {float:none;margin-top:0.75em}

	#home    #puppyContent  .curveWrap .game {padding-bottom:6em}
	#home   #puppyContent  .curveWrap .info {text-align:center}
	#home #games .info img.PSStore {float:none;margin:0 auto 0}
	#home   #puppyContent  .curveWrap .buttons {padding:0 0.5em}

	
	/*
	#home #psGamesWrap .button {margin:-2px 0 0 2%;top:0;float:right;clear:left}  width:32%; 
	#home #psGamesWrap .button:first-of-type {clear:both;}
	#home #psGamesWrap .button:last-of-type {margin-left:0}*/

	#home div.reviews {width:100%}

	.game #puppyContent > section > div {width:100%}

	.buyButtons .divide {position:static;width:100%;height:1px;background:rgba(104, 98, 83, 0.3);}
	.bundleWidget.thinScreen {display:block}
	.bundleWidget.wideScreen {display:none;}
	
	.buyButtons .platform.ps {margin:0 0 1em 0}

	.game #puppyContent #steam > div { display:block !important;padding-right:0 !important}
	.game #puppyContent #steam .column {display:block;width:100%!important;min-width:0;margin:0;padding:0;text-align:center}
	.game #puppyContent #steam img {width:40em;max-width:100%;margin:-4em 0 1em}
	.game #puppyContent #steam p , .game #puppyContent #steam li {max-width:none;line-height:1em}

	#revenge #sandbox .slideshowWrap{margin-bottom:1.5em}
	#revenge #sandbox .column {width: 100% !important; margin:0}
	#revenge #sandboxLogo {width:40%;min-width:10em;float:right;margin-left:5%}
	#revenge #sandbox .button:first-of-type {clear:left}

	#ultratron #intro h1 { line-height:0.8em; }
	#ultratron #intro h1 strong { font-size: 1.5em; line-height:0.75em;display:block;margin-top:0.2em;}
	#ultratron #puppyContent h2 {position:absolute;bottom:-0.5em}
	#ultratron #intro .column {padding-bottom:3em}

	
	#hiscoreTables blockquote p:first-of-type {font-size: 2.0em;}
	.hiscores #puppyContent #hiscoreTables figcaption {font-size: 0.75em;}
	.hiscores td { font-size:1.0em;}
	.hiscores table td:nth-child(1) {padding-left:1em;}
	.hiscores table td:nth-child(3) {padding-right:1em}
}

	
/* tablet or phone probably */
	
@media all and (max-width:53em) {
	
	#console { background:orange}
	
	#headerText img {top:0.825em;min-width:0;width:55%;max-width:20em}

	#one {z-index:-2;background-attachment:scroll; position:absolute;}
	#two {display:none}
	
	#page { padding-bottom:24em;}	
	
	form label {font-size:0.75em}
	
	footer {height:24em;margin-top:-24em;padding:1.5em 0 0;text-align:center;}
	footer #footerPuppy {width:8em;height:8em;left:50%;margin-left:-4em}
	footer section {padding:0;height:auto;border:none;float:none;margin:0 auto;opacity:1}
	
	footer form {float:none;margin:0 auto;display:table;clear:both;margin:0.5em auto 1.5em;width:100%}
	
	
	footer form input, footer form label, footer form input[type="submit"]  {float:none;display:table-cell;width:auto;margin:0.5em}
	footer form label {display:none}
	footer form input#email {width:auto;max-width:none;min-width:10em;padding:0.5em}

	footer section#follow {border:2px solid hsla(43,10%,10%,1);border-width:0.2em 0 0;padding:1em 0 0}
	footer p {margin:0.75em auto;padding:0 1em}


	#puppyContent {padding:2em 0; max-width:32em}
	#revenge-help #puppyContent, #assets #puppyContent, .blog #puppyContent { max-width: 90%;}

	#puppyContent div.formSectionWrap section, #puppyContent div.formSectionWrap form, #puppyContent div.formSectionWrap nav {display:block;clear:both;width:100%}
	#puppyContent div.formSectionWrap form {padding-bottom:4em}
	
	#puppyContent section section .column {width: 92%;}

	#puppyContent section, #revenge-help div.helpSection, #revenge-help div.helpHeading {padding: 6vw;}
	#puppyContent section section:after {padding:0 6vw;left:-6vw;}

	/* #home #video #vid img {width:120%;margin-left:-10%;padding-bottom:2em} */
	#puppyContent #video {padding:0 5% 3em}
	#video:after {}
	#home #video #vid .playButton {  }

	#home #games {padding:0.5em 1em 2em}
	#home #games #gamesWrap + p, #home #games .curveWrap + p {margin:1.5em 0 1.5em 0;clear:both}
	#home #gamesWrap2, #home  #puppyContent  .curveWrap2 {display:block;}
	#home #puppyContent #games .game {width:100%;max-width:30em;display:block;margin:1em auto 0;padding-bottom:1.5em}
	
	#home #puppyContent #games .curveWrap .game.titanAttacks {padding-bottom:1.5em}
	#home #puppyContent #games .curveWrap .game.ultratron {padding-bottom:0}
	
	/*
	#home #puppyContent #games .curveWrap .game {max-width:100%;padding-bottom:0}
	*/
	#home #games .info:before {margin-top:1em}
	#home #games .info, #home #puppyContent .curveWrap .info {width:100%;position:static;text-align:center;height:auto;bottom:auto;clear:both;}
	

	#home #games section img.bw {display:none}
	#home #games section img.color {opacity:1;position:static}

	#home #games #gamesWrap .info img {float:left;margin-top:1.75em}
	#home #games #gamesWrap .button {float:right;clear:none;margin-top:1.5em}

	/*#home #psGamesWrap .buttons {padding:0;display:inline-block;width:100%}
	#home #psGamesWrap .button {padding:0}*/
	
	#page #puppyContent div.reviews {display:block}
	#page #puppyContent figure.review { display:block;width:auto;margin:0 auto;padding:0;clear:both;float:none; max-width:25em}	
	figure.review blockquote p { font-size: 1.1em;  line-height: 1em;	}

	.game #puppyContent > section {min-width:10em;width:100%;padding-left:4vw;padding-right:4vw}
	.game #puppyContent > section > div {padding: 2em 0 0.5em;}

	.game #page #intro figure.review {margin:0 auto 3em;float:none}
	.game #page #end figure.review {margin:0 auto 3em;float:none}

	.buyButtons .platform.pc { padding-right: 0; }

	.game #intro .column {width:100% !important;margin:0 !important}
	.game #intro p { margin-left:auto;margin-right:auto}
	.game #intro p.intro {max-width:31.5em} 

	.game #puppyContent #playstation h1, .game #puppyContent #curve h1{font-size:5vw;text-align:center}
	.game #puppyContent section#playstation .column {width:auto;max-width:31.15em;margin:0 auto;float:none}
	.game #puppyContent section#playstation .column + .column {width:100%;max-width:none;margin:1em 0 0}

	.game #puppyContent section#curve .column {width:100%;max-width:none;margin:1em 0 0}
	.game #puppyContent section#curve .column + .column {width:auto;max-width:31.15em;margin:0 auto;float:none}

	.game #playstation p.intro, .game #curve p.intro  {text-align:center}
	.game #playstation .psLogosWrap, .game #curve .psLogosWrap{max-width:none;margin-left:auto;margin-right:auto}
	.game #puppyContent .psStore {margin-top:1em}

	.game #end img.allOS {margin-top:-1em !important}

	.game #puppyContent #steam img {width:100%;max-width:none;margin:1em 0}

	#revenge #one { background-image:url('images/revenge-of-the-titans/RotT-top-small.jpg') }

	#revenge #intro .column figure.review {width: 100%;float:none;margin:1em auto 11em}
	
	#revenge #xmas img {width: 100%;}
	#revenge #xmas .column { float:none; width: 100%;max-width: 31.5em;margin:0 auto;text-align:center}

	#revenge #end > div:first-of-type .review {width:100% !important}	
	#revenge #end h2 {font-size:1.5em}

	#ultratron #one { background-image:url('images/ultratron/UT-top-small.jpg') }

	#ultratron #intro .column h2 {text-align:center;margin:0.625em auto;position:static}
	#ultratron #intro .column {  padding-bottom: 0em;}
		
	#ultratron #coop div > img {width:100%;max-width:35em;float:none;clear:both;margin:-2.5em auto 0}
	#ultratron #coop div { text-align:center}
	#ultratron #coop div h1  { display:none }
	#ultratron #coop div p {margin:0 auto 0.75em; text-align:left}
	#ultratron #coop .intro {margin-top:0;max-width:31.5em}
	
	#titanAttacks #one { background-image:url('images/titan-attacks/TA-top-small.jpg') }
	
	#titanAttacks #intro h2 {text-align:center;margin:1em auto}
	#titanAttacks #intro .column figure.review {margin:1.5em auto 3.5em}
	#titanAttacks #puppyContent h1 { font-size: 2.5em; }

	.hiscores #puppyContent #hiscoreTables { margin-left:0;  width: 100%;}
	.hiscores #puppyContent #hiscoreTables section {margin: 8.5em 0 1em;  min-height: 8em; width:100%;}
	.hiscores #page #puppyContent figure.review {max-width:none;width:100%}
	.hiscores table td:nth-child(1) { padding-left: 5vw; }
	.hiscores table td:nth-child(3) { padding-right: 5vw; }
	
	#revenge-help .panel {margin-bottom:0}
	#revenge-help .panel.x4, #revenge-help .panel.x3 {width:49%}
	#revenge-help .panel.x2 {width:100%}
	#revenge-help .helpSection .x4:nth-of-type(3), #revenge-help .helpSection .x3:nth-of-type(3), #revenge-help .helpSection .x2 {margin-left:0;clear:both}

	#revenge-help #puppyContent > div:nth-of-type(6) .x4,  #revenge-help #puppyContent > div:nth-of-type(10) .x3:nth-of-type(7) {margin-left:0;clear:both;}
	#revenge-help #puppyContent > div:nth-of-type(6) .x4:nth-of-type(3), #revenge-help #puppyContent > div:nth-of-type(6) .x4:nth-of-type(5) {margin-left:2%;clear:none;}

}


/*  phone portrait */	
/*  this is the smallest - will inherit rules from above, and then reduce margins, decrease line height, and indented bulleted lists etc. */

@media all and (max-width:20em) {
	#console { background:red}
	
}

/* hires tablet landscape, 1368 width monitor */	
/* start scaling up various elements relative to the viewport size using VW units. */

@media all and (min-width:75em) {
	#console { background:green}
	.menu li { font-size:0.85em}
	body  {font-size:1.3vw; line-height:1.618em; }
	h1 {font-size:4vw;}
}

/* 1920 width monitor */	
/* body text starts to get uncomfortably large at 90em so use rem units to keep it at a comfortable reading size while the other elements scale around it */	
	
@media all and (min-width:90em) {
	#console { background:blue}
	.menu ul { font-size:0.85em}
	.menu li li { font-size:0.95em}
	body { border-color:cyan}
	body {font-size:1.1875rem; line-height:1.618em; }
}