/* ## BASIC SETUP */
:root {
  --voxelnavy: #1b1d2e;
	--voxelnavyhighlight: #262e72;
  --voxelorange: #d44858;
	--voxelorangehighlight:#c12436; 
}


* {margin:0; padding:0; border:0px}

html{ 	overflow-y: scroll; overflow-x: hidden; width:calc(100vw - 15px); }
body {	color:var(--voxelnavy); 	text-align:center;	width:100%;	overflow-x: hidden;	background-color:var(--voxelnavy); 
	font-family: 'PT Serif', Georgia, Times, serif; 
	line-height: 18pt; 
	letter-spacing: .6pt; 
	font-size: 12pt;}
h1, h2, h3, h4, h5, h6 {margin:0px 0px 10px 0px;}
h1, h2, h3 { line-height: normal;  }
p {margin:0px 0px 20px 0px; 	color:var(--voxelnavy);}
a {outline:none; text-decoration:none; color:var(--voxelnavyhighlight); }
a:hover {color:var(--voxelorange); text-decoration:underline;}
a img {border:none;}

div#outline {width:1100px; margin:235px auto; max-width:calc(100%);}
div#nav {position:relative; z-index:2; width:100%; height:38px; margin-top: -20px; 
	border-bottom: 1px solid var(--voxelorange);}
div#content {
	clear:both; 
	z-index:1; 
	background-image: url(./images/GamesPageTiledBG.jpg); 
	background-size: contain;
	background-color: #ebf0f2;
	width:100%;
	position: relative;
}
 


#voxelslogobanner{
	display:inline-block; position:absolute; overflow: hidden; 
	left: calc(50vw - 179px);
	width:calc(50vw + 179px - 15px);
	top:-13px; height: 253px;	z-index: 0;
}
img#voxellogo { 	height:232px; width:2100px; top: 0px;	left:0px;}
div.clickablearea {width:420px; height:170px; z-index: 99; position: absolute; top:50px;}

div.sideshading{	
	background-image: url('./images/sideShading.png');
	background-repeat: repeat-y;
	background-size: contain;
	width:61px;	
	height:calc(100% - 168px); 
	top: 168px;/* half of sideShadingTop height */ 
	position: absolute;
}
div.sideshadingright{ left: 100%;}
div.sideshading img{  position: relative; width:100%; height:168px; top:-168px; }
div.sideshadingleft{left: -61px; transform:scaleX(-1);} 

@media only screen and (max-width: 850px) {
	div#nav {margin-top:48px;}
	.shopBadge {margin-bottom: 16px;}
	div#outline {margin-top: 225px;}
	#voxelslogobanner{ top:11px;}	
}
@media only screen and (max-width: 1100px){.hideBelowWidth1100{ visibility: hidden; display: none; }}
@media only screen and (max-width: 950px){ .hideBelowWidth950 { visibility: hidden; display: none; }}
@media only screen and (max-width: 750px){ .hideBelowWidth750 { visibility: hidden; display: none; }}
@media only screen and (min-width: 750px){ .hideAboveWidth750 { visibility: hidden; display: none; }}
@media only screen and (min-width: 850px){ .hideAboveWidth850 { visibility: hidden; display: none; }}

.float-left{ 	float:left; }
.float-right{ 	float:right; }
.centered { 		text-align: center;	}
.horizCenterContent { width:auto; text-align: center; margin-left: auto;	margin-right: auto; }

.table{ 	display: table; }
.tablecell{ 	display: table-cell; }
.padding-bottom-huge{ 	padding-bottom: 96px; }
.padding-bottom-lrg{ 	padding-bottom: 48px; }
.padding-bottom-med{ 	padding-bottom: 24px; }
.margin-bottom-huge{ 	margin-bottom: 96px; }
.margin-bottom-lrg{ 	margin-bottom: 48px; }
.margin-bottom-med{ 	margin-bottom: 24px; }
.margin-bottom-tiny{ margin-bottom: 4px; }
.margin-bottom-none{ margin-bottom: 0px; }
.dropshadowed {	-webkit-box-shadow: 4px 4px 8px 0px #a6abc0; box-shadow: 4px 4px 8px 0px #9599ab; }
.scaleOnHover:hover	{	transform: scale(1.04) rotate(0.5deg); }
h3 { 	font-size: 12pt; 	color:var(--voxelnavy); }

/* ## NAVIGATION */ 
div#nav {	position: relative;	z-index: 2;	height: 38px;}
div#nav ul {float: right;	list-style: none;}
div#nav li {float: left;	padding: 7px 13px; background: url(images/nav.png);	background-size: contain; line-height: 18pt;}
div#nav li.iconLink{ padding-top: 5px; padding-bottom: 5px; }
div#nav li:hover {	background: #4d0903;color: var(--voxelorange);	background: url(images/navRed.png);}
div#nav li:hover > a{scale:1.1; text-decoration: underline;}
div#nav li a {	display: block;	color: #f5f5f5;		font-weight: bold;	font-size: 15px;}
div#nav img {	vertical-align: middle;	width: 28px; height: 28px;	padding-top: 0px;} 


/* WE SHOULD REALLY MAKE TOUCH TARGETS BIGGER FOR MOBILE 
 @media (pointer: coarse) {
  div#nav li { padding: 10px;  }
	div#nav {	height: 48px;}
} */


/* GAMES PAGE SPECIFIC */
.gamedetails{	margin:0px 75px 0px 75px; }

@keyframes scaleUpLarge { from  { transform:scale(1.01);} 	to { transform:scale(1.04);} }
@keyframes scaleUpMedium { from  { transform:scale(1.01); } 	to { transform:scale(1.02);} }
@keyframes scaleUpSmall { from  { transform:scale(1); } 	to { transform:scale(1.01); } }


/* BANNERS with TABLE WIDTH METHOD */
:root {--upsize: 1.44; --aspectratio:0.3690909091; --downsize: .66;  --bannerw: 1100px; --bannerh: 406px;  }
div.bannerTable{ height:var(--bannerh); width:100%; max-width: 100vw; overflow:hidden; position: relative;  display:grid; grid-template-columns: [first] 100% [end];  grid-template-rows: [row1-start] 100% [last-line];}
div.bannerCell{ 	grid-column: 1; grid-row: 1; justify-self:center; align-self:center; height:var(--bannerh); width:auto;}
img.cellBg			{		height:100%; width:auto; z-index: 3; position: relative; }
img.cellFront 	{		height:100%; width:auto; z-index: 4; position: relative; top:-100%;}
div.bannerTable:hover img.cellBg {	animation-name: scaleUpSmall; 	animation-timing-function: ease-in-out; animation-duration: .05s; 	animation-fill-mode: both;}
div.bannerTable:hover img.cellFront {  animation-name: scaleUpLarge; animation-timing-function: ease-in-out; animation-duration: .05s; animation-fill-mode: both; }
@media only screen and (max-width: 870px) { 
	div.bannerTable { height:380px; } div.bannerCell { height:380px; } }
@media only screen and (max-width: 680px) {
  div.bannerTable{   height:auto; width:100%; max-width: 100vw; overflow:hidden; position: relative;  display:grid; }
	div.bannerCell { 	height:calc(100vw * var(--upsize) * 0.3690909091); width:calc(100vw * var(--upsize)); grid-column: 1; grid-row: 1; justify-self:center; align-self:center; }
  img.cellBg			{		height:100%; width:100%; z-index: 3; position: relative; }
  img.cellFront 	{		height:100%; width:100%; z-index: 4; position: relative; top: calc(100vw * var(--upsize) * -1 * var(--aspectratio));}
}


.gameDescription{	margin-bottom:24px; 	padding:0px; }
div.gameScreenshots{
	padding:0px 0px 10px 0px;
	margin: 0px 0px 15px 0px;
	height:170px;
	width: calc(100% + 20px);
	left:-10px;
	position: relative;
	border:0px;
	font-size: 0px;
	display:inline-block;
	overflow-y: hidden;
	box-sizing: content-box;
}
div.fiveWide{	height:280px;}
div.gameScreenshot img{height:100%;width:auto;}
div.gameScreenshot{
	height:100%;
	box-sizing: content-box;
	width:auto;
	margin:0px 7px 14px 7px;
	display: inline-block;
	overflow: hidden;
}

div.getItNowOnPlatforms {	margin: 0 50 20 50; font-size:0px; width:calc(100% - 100px);}
div.shopBadge {
	margin: 0px 7px 21px 7px;
	display: inline-block;
	vertical-align: middle;
	text-align:left;
	position: relative;
}
div.shopBadge img{ 	width:auto; 	height:52px }
div.shopBadge p{
	width: 100%;
	height: 24px;
	vertical-align:baseline;
	text-align: center;
	position: absolute;
	top:55px;
	flex-wrap: nowrap;
	white-space: nowrap;
}
div.shopBadge span {vertical-align: bottom;}
.shopBadge p, .shopBadge p a{ color:var(--voxelnavy); 	font:normal 7pt Helvetica;  	font-weight: 200; 	letter-spacing: .8pt;}
.shopBadge p:hover{ 	color:#132988; 	text-decoration:underline;}
h3.gameURL {font-size: 13pt; }
img.gameIcon {height: 150px;}

.legallines{margin:100px;}
.legallines p{ color:rgb(99, 110, 130); margin: 0px; max-width:900px;margin-left:auto; margin-right:auto;}
@media only screen and (max-width: 870px) { .legallines{ margin:50px;} }



/* responsive screen sizes */
@media only screen and (max-width:1099px){.gamedetails{	margin:0px 50px 0px 50px; }}
@media only screen and (max-width: 850px) {
	.gamedetails{	margin:0px 20px 0px 20px; }
	div.getItNowOnPlatforms {	margin: 0 10 20 10; width:calc(100% - 20px);}
	div.shopBadge{ margin: 0px 7px 16px 7px; }
	div.shopBadge img { height:35px}
	div.shopBadge p { font:normal 7pt Helvetica sans-serif; letter-spacing: .7pt; margin-top: 1pt; top: 35px;}
}
@media only screen and (max-width: 675px) {
	div.gameScreenshots{height:190px;width:100%; left:0px;}
	div.gameScreenshots img { max-width: 100%; width:auto;height:100%;}
	img.gameIcon {height: 110px;}
}


/* ## CLEARFIX */

.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
.clear {clear:both;}