﻿/* Basic styles */
body {background: #60A0C0; font: 14px arial, sans-serif;}
.site {color: #0f0; font-family: Arial, Verdana, Helvetica, Sans-serif; font-weight: bold; background: #000;} /* stylized GrnRngr.com */
p.body {font-size: 16px; margin: 1em 5em; color: white; line-height: 1.5;}
ul.gaocombos {margin: .5em 0 .5em 2em;}
ul.gaocombos li {display: block; margin: .5em auto;}
ul.gaocombos li.unused {display: block; margin: .5em auto; font-style: italic;}
ul.gaocombos li .name {font-weight: bold; text-decoration: underline;}

a:link, a:visited {color: white;}
a:hover, a:active {color: red; text-decoration: none;}

/* Layout styles */
#nav {position: fixed; top: 0.25em; left: 1em; width: 225px; text-align: left; margin: 1px;}
#content {vertical-align: top; margin-top: 0.5em; margin-left: 225px;}

#nav p {margin: 0; text-align: center;}
#navhead {width: 150px; height: 132px;}
#skiptonav {position: absolute; left: -9999px; font-size: 16px; font-weight: bold;}
#skiptonav:focus {position: static; display: block; margin-top: 1em; text-align: center;}

/* backwards compatability for IE */
* html #nav {position: absolute;}

/* Navigation List */
ul.navlist {list-style: none; padding: 0; margin: 0;}
ul.navlist li {list-style: none; width: 200px; height: 18px; line-height: 18px; margin-bottom: 2px; padding: 0; text-align: center; 
	background: #2A4380 top left no-repeat; border: 2px solid black; border-color: #D4D0C8 #808080 #808080 #D4D0C8;}
ul.navlist li:hover {background: #FF0700; border-color: #808080 #D4D0C8 #D4D0C8 #808080;}
ul.navlist li a {width: 200px; height: 22px; font-size: 12px; font-weight: bold; display: block; text-decoration: none;}
ul.navlist li:hover a:hover {color: white;}
ul.navlist li#currentnav {background: #008209;}

/* Incomplete pages */
/* ul.navlist li a[href="gao.htm"] {color: red; background: red;} NOW UNUSED */

/* Content Area */
#masthead {margin: 0 auto;}

#home {width: 85%; margin: 0 auto; font-size: 16px; font-weight: bold;}

img {border: 0;}
td.components img {width: 100px; display: block; margin: 0 auto;}
td#g12 {width: 205px;}
td#g12 img {width: 100px; display: inline-block; margin: 0 auto;}
div.helmet {margin: 0 auto; width: 31px; height: 31px;}

h1 {margin-left: -9999px; margin-top: 0;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 15px;}
h2, h3, h4 {margin: 5px 10px;}
h3, h4 {font-weight: normal;}

table {margin: 10px auto; background: white;}
td, th {border: 1px solid black;}
td {text-align: center;}
td.info {padding: 10px; text-align: left;}
td.empty {border: none; background-color: #60A0C0;}
ul {padding-left: 15px; margin-left: 15px;}

#footer {clear: both;}
#footer p, p.dualpage {text-align: center; font-weight: bold;}
#footer p.w3c {vertical-align: baseline;}
#footer img {margin: auto 10px;}

/* Page-specific Tables */
#gao {border-collapse: collapse; background: transparent;}
#gao td {width: 120px; height: 102px; background-color: black;}
#gao td.emptygao {background: transparent; border: none;}
#gao td a {display: block; width: 120px; height: 102px; line-height: 102px;}

#karakuri {border-collapse: collapse;}
#karakuri td.empty {border: none; background-color: #60A0C0;}
#karakuri td {height: 100px; width: 100px; text-align: center; border: 1px solid black; background: #406a80 no-repeat;}
#karakuri td[colspan="2"] {width: 200px;}
#karakuri td[colspan="3"] {width: 300px;}
#karakuri td:hover {background-position: -100px 0px; background-color: #60A0C0;}
#karakuri td[colspan="2"]:hover {background-position: -200px 0px;}
#karakuri td[colspan="3"]:hover {background-position: -300px 0px;}
#karakuri td a {display: block; line-height: 100px; height: 100px; width: 100px;}
#karakuri td[colspan="2"] a {width: 200px;}
#karakuri td[colspan="3"] a {width: 300px;}

#bakuryuu td.emptyleft {border: none; border-top: 2px solid yellow; border-right: 2px solid yellow; background: #60A0C0;}
#bakuryuu td.emptyright {border: none; border-top: 2px solid yellow; border-left: 2px solid yellow; background: #60A0C0;}
#bakuryuu td {height: 132px; width: 132px; text-align: center; border: none; background: none;}
#bakuryuu td a {display: block; line-height: 132px; height: 132px; width: 132px;}

#boukensprite td {width: 104px; height: 89px; background-color: black;}
#boukensprite td:hover {background-position: -104px;}
#boukensprite td a {display: block; width: 104px; height: 89px; line-height: 89px;}

#geki td {height: 106px; width: 148px; text-align: center; border: 1px solid #f2b333; background: none;}
#geki td a {display: block; line-height: 106px; height: 106px; width: 148px;}

#enginesouls td {width: 100px; height: 100px;}
#enginesouls td:hover {background-position: -100px;}
#enginesouls td a {display: block; width: 100px; height: 100px; line-height: 100px;}

#datatable {border: 1px solid black; border-collapse: collapse;}
#datatable th, #datatable td {padding: 4px;}
#gao100 {border-collapse: collapse; width: 90%; max-width: 700px;}
#gao100 th, #gao100 td {padding: 5px; border: 1px solid black;}