/*--General--*/
html {
	font-size: 0.95em;
	font-family: "Arial", "Helvetica", sans-serif;
	color: white;
}
body {
	background-color: black;
	background-image: url(pics/style/bg.gif);
	background-attachment: fixed;
	background-position-y: 155px;
	list-style-image: url(pics/style/bullet.gif);
	margin: 0;
	padding: 0;
}
@font-face {font-family: Header; src: url(pics/style/handgotn.ttf);}
a:link {color: #38C0FC; text-decoration: none; transition: 0.3s;}
a:visited {color: #38C0FC; transition: 0.3s;}
a:hover {color: #C0ECFF; transition: 0.1s;}
img {max-width: 100%; height: auto; }
hr {border: 1px ridge #38C0FC; margin: 24px auto; width: 85%;}
h1 {
	font: normal 2rem Header;
	letter-spacing: 1px;
	text-align: center;
	margin: 0px auto 20px auto;
	text-shadow: 3px 3px 0px black;
}
h2 {
	font: normal 1.5rem Header;
	letter-spacing: 1px;
	max-width: 100%;
	border-bottom: 2px solid #38C0FC;
	margin: 40px 0 5px 0;
	clear: both;
}
h3, h2.mild {
	font: normal 1.25rem Header;
	letter-spacing: 1px;
	margin: 20px 0 0px 0;
	border-bottom-width: 0px;
}
p {text-indent: 0px; margin: 0 0 12px 0;}
#news p {text-indent: 15px;}
small {font-size: 0.8rem;}
.small {font-size: 0.8rem;}
.loud {font-weight: bold; text-decoration: underline;}
.right {margin: 0 0 0 10px; float: right;}
.left {margin: 0 10px 0 0; float: left;}
.center {text-align: center;}
.list-header {color: #C0ECFF; font-weight: bold; font-style: italic;}
li.category {position: relative; left: -20px; margin: 18px 0 2px 0; list-style-type: ''; list-style-image: none;}
.media-frame {border: 2px solid black; transition: 0.3s; }
.media-frame:hover {border-color: #38C0FC; transition: 0.1s; }
div.video {position: relative; overflow: hidden; width: 100%; background-color: black; padding-top: 56.25%;} /*75%=4:3*/
div.video iframe {position: absolute; top:0; left:0; bottom:0; right:0; width: 100%; height: 100%; border: 0;}

/*--Template--*/
header {
	background: url(pics/style/bannerbg.png) repeat-x;
	background-color: #4B3512;
	animation: banner-scroll 90s linear infinite;
	min-height: 120px;
	font-family: "Garamond";
	text-shadow: 2px 2px 0px black;
	font-weight: bold;
	text-align: center;
	list-style-image: url(pics/style/bullet2b.gif); /*preload img*/
}
@keyframes banner-scroll {
	0% {background-position : 0px 0px;}
	100% {background-position : -3132px 0px;}
}
header img {margin-top: 33px; font-size: 50px; color: #0078FC;}
header div#sub {
	font-size: 1.05rem;
	margin: 0 auto;
	max-width: 480px;
	display: flex;
}
header div#sub #left {text-align: left;}
header div#sub #right {text-align: right; margin-left: auto;}
nav, footer {
	background-color: #000062;
	background-image: linear-gradient(to top, #000062, #00007A);
	border-width: 1px 0;
	border-style: solid;
	border-color: #0000A0;
	clear: both;
}
nav ul {
	font: 24px Header;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 530px;
	min-height: 33px;
	text-align: center;
	display: flex;
	justify-content: space-between;
}
footer div#content {
	font-size: 1.05rem;
	max-width: 980px;
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	margin: 0 auto;
}
footer div#copy {font-size: 0.8rem; }
footer img {margin: 2px 0 0 5px; }
main {
	max-width: 970px;
	min-height: calc(100vh - 265px); /*120(header) +35(nav) +50(footer) +60(content)*/
	margin: 0 auto;
	padding: 30px 15px;
}

/*--Content--*/
div#archive-menu {
	font-weight: bold;
	font-size: 1.2rem;
	text-align: center;
	margin: 0 auto 25px auto;
}
div#archive-legacy {
	max-width: 690px;
	margin: 0 auto;
	font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif;
	font-size: 10pt;
	text-align: center;
}
div#archive-legacy h2 {font-size: 1.25rem; border-width: 0; margin: 10px 0 5px 0;}
div#archive-legacy .text-wrap {text-align: left; margin: 0 auto;}

.create-assets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 700px;
	margin: 20px auto 0 auto;
}
.flex-table {display: flex; flex-wrap: wrap; justify-content: center;}
table.chart {
	margin: 0 auto;
	font-size: 1.05rem;
	font-weight: bold;
	text-align: center;
	border-spacing: 4px;
}
table.chart td {
	width: 32px; height: 32px;
	padding: 0;
	line-height: 0px;
	background-image: url(pics/guides/chbg.gif);
}
table.chart td.chart-icon {font-size: 1.25rem; background-image: none;}

div.game-dl {margin: 20px auto; text-align: center; clear: both;}
a.btn1 {
	display: inline-block;
	min-width: 140px;
	min-height: 30px;
	margin: 5px 10px;
	padding: 5px 5px 4px 5px;
	font: 1.5rem Header;
	text-align: center;
	background-color: #000062;
	border: 1px solid #0000A0;
	border-radius: 8px;
	box-shadow: 3px 3px 3px black;
}
a.btn1:hover {background-color: #0000A0; box-shadow: 5px 5px 4px black;}
.gallery {margin: 0 auto; text-align: center;}
.gallery img {margin: 7px; }
details > summary {
	color: #38C0FC;
	transition: 0.3s;
	font-size: 1.05rem;
	font-weight: bold;
	cursor: cell;
	margin: 0 0 2px 20px;
	list-style-type: '▶️ '; list-style-image: url(pics/style/bullet2a.gif);
}
details > summary:hover {color: #C0ECFF; transition: 0.1s;}
details[open] > summary {list-style-type: '🔽 '; list-style-image: url(pics/style/bullet2b.gif); }
details div {padding: 0 0 10px 50px; }
details div ul {margin: 8px 0; }

/*--Media--*/
@media only screen and (max-width: 550px) {
	header img {max-width: 95%;}
	header div#sub {max-width: 85%;}
	nav li {padding: 0 2%; flex: 33.3%;}
}
@media only screen and (max-width: 480px) {
	header div#sub {max-width: 95%;}
	nav ul {flex-flow: row wrap;}
	.right, .left {margin: 10px auto; float: none; text-align: center; display: block;}
}