html {
	font-size: 14px; /* was 62.5%; */
}
body {
	margin: 0;
	padding: 0;
	background: #000 url(bg2.gif);
	font-family:Arial,sans-serif;
	color: #fff;
}
a:link	 { color:#0CACFC; }
a:visited{ color:#0AAAFA; }
a:active { color:#0EAEFE; }
a:hover  { color:#fff; }
h1 {
	display: inline;
	font-size: 11pt;
}
h2 {
	font-size: 1.4em;
	margin: 12px 0;
}
th {
	font-weight: bold;
	vertical-align: top;
	text-align: left;
	text-decoration: underline;
}
td {
	vertical-align: top;
	text-align: left;
}


#sitebox {
	width: 970px;
	margin: 0 auto;
	background-image:url(/res/bg.gif);
	text-align: left;
/*	border: 2px solid #f00; */
	position: relative; /* needed for absolute positioned outboard banner containers */
}

.container {
	width: 100%;
	line-height: 1.5em;
}
.container::after {
	content: "";
	display: table;
	clear: both;
}

/* games-db doesn't use a dynamic grid system with percetual width, but a fixed grid with @media breakpoints */
/* the old layout had adverts inside its layout, the new layout uses "outboard containers" like our other sites */
/* also, we make it al little more abstract (like "our glowing boxes float in a limitless digital realm/grid"), with one or the other box here and there "missing" (not having a border) - we start with the button ad on the results page (class .noborder) */
/* 2 columns sidebar + results layout for search and browse (having a sidebar on the left on results is a bit of a relic but a tribute to our old layout */
#leftbar {
	float: left;
	width: 200px;
	box-sizing: border-box;
}
#results {
	float: left;
	width: 770px;
	padding-left: 1em; /* to leftbar */
	box-sizing: border-box;
}
#content, #header {
	float: left;
	width: 650px;
	padding-right: 1em; /* to rightbar */
	box-sizing: border-box;
}
#rightbar, #search {
	float: left;
	width: 320px;
	box-sizing: border-box;
}

#header {
	display: table;
}
#header > div {
	display: table-row;
}
#header > div > div {
	display: table-cell;
	vertical-align: top;
}
#header h1 {
	display: inline;
}
#search {
	border: 2px solid #0CACFC;
	padding: 8px;
	margin-top: 1em;
	margin-bottom: 0.5em;
	box-sizing: border-box;
}
#search input[type=text] {
	width: 205px;
	height: 2.4em;
	border-radius: 0px;
	border: 0;
	box-sizing: border-box;
}
#search input[type=submit] {
	cursor: pointer;
	border: 2px solid #0CACFC;
	color: #0CACFC;
	height: 2.4em;
	width: 90px;
	box-sizing: border-box;
	background-image: url(/res/cellbg.gif);
}
#search div.areas {
	margin-top: 1em;
}

.bhead {
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
 }
.box	{
 border: 2px solid #0CACFC;
 padding: 8px;
	margin-bottom: 0.5em;
	box-sizing: border-box;
 }
.noborder {
 border: 0;
}
.bg {
 background-image: url(/res/cellbg.gif);
}
.boxbg	{
 border: 2px solid #0CACFC;
 padding: 8px;
	margin-bottom: 0.5em;
	box-sizing: border-box;
 background-image: url(/res/cellbg.gif);
 }
.boxbg a:link	{ color:#def; }
.boxbg a:visited{ color:#ddd; }
.boxbg a:active { color:#0eaefe; }
.boxbg a:hover { color:#0eaefe; }
.bold {
 font-weight: bold;
 }
.marginbottom {
	margin-bottom: 1em;
	clear: both; /* this was an easy fix to cure layout in Board */
 }
.floatright {
 float: right;
 }
.clear {
 clear: both;
 }
.boardtable {
 table-layout: fixed;
 border: 0;
 border-spacing: 0;
 width: 100%;
 border-top: 1px solid #0cacfc;
}
#footer {
 border: 2px solid #0CACFC;
 padding: 8px;
 margin-bottom: 10px;
 text-align: center;
 font-size: 8pt;
}

/* outboards need a position: relative on the parent element, which is #sitebox here */
/* top distance depends on layout, here on games-db it's 210px/16rem */
/* note that outboards require a @media call to show them only on really wide screens */
#outboard-left {
	position: absolute;
	top: 210px;
	top: 16rem;
	left: -315px;
	width: 300px; /* max width of skyscrapers should be 300px */
	text-align: right;
	height: 1px;
}
#outboard-right {
	position: absolute;
	top: 210px;
	top: 16rem;
	right: -15px;
	width: 1px;
	height: 1px;
}

#banner-top, #banner-bottom {
	text-align: center;
	min-height: 90px;
	margin-bottom: 1em;
}
#banner-leftbar, #banner-rightbar {
	text-align: center;
	min-height: 90px;
}

@media (max-width: 499px) { /* special @media call only for header */
	#header, #header > div, #header > div > div { display: block; } /* override header default table layout to stacked blocks */
	#header h1 img {
		margin: -23px 0 20px 7px;
	}
}
@media (max-width: 649px) {
	#sitebox {
		width: 100%;
	}
	#leftbar {
		display: none;
		float: none;
		width: 100%;
	}
	#results {
		float: none;
		width: 100%;
		padding-left: 0; /* to leftbar, now hidden */
	}
	#content, #header {
		float: none;
		width: 100%;
		padding-right: 0; /* to rightbar, now stacked */
	}
	#rightbar, #search {
		float: none;
		width: 100%;
	}
}
@media (min-width: 650px) and (max-width: 969px) {
	#sitebox {
		width: 650px;
	}
	#leftbar {
		display: none;
		float: none;
		width: 200px;
	}
	#results {
		float: none;
		width: 650px;
		padding-left: 0; /* to leftbar, now hidden */
	}
	#content, #header {
		float: none;
		width: 650px;
		padding-right: 0; /* to rightbar, now stacked */
	}
	#rightbar, #search {
		float: none;
		width: 650px;
	}

	#search input[type=text] {
		width: 205px;
		height: 2.4em;
		border-radius: 0px;
		border: 0;
		box-sizing: border-box;
	}
	#search > form {
		display: inline; /* making this inline will below "float right" align on same top */
	}
	#search div.areas {
		margin-top: 0.35em;
		float: right;
	}
}
@media (max-width: 1330px) {
	#outboard-left,
	#outboard-right {
		display: none;
	}
}