body {background: #222222; color: #ffffff; margin: 0}
.metal, td.metal img {border: 2px ridge #444444}
.sky, td.sky img     {border: 2px ridge #800000}
.earth, td.earth img {border: 2px ridge #808000}
.water, td.water img {border: 2px ridge #000080}
.leaf, td.leaf img   {border: 2px ridge #004000}
.ice, td.ice img     {border: 2px ridge #a6c2e4}
.fire, td.fire img {border: 2px ridge #ff6000}
.neutral, td.neutral img {border: 2px ridge #cccccc}
.metal, .sky, .earth, .water, .leaf, .ice, .neutral, .fire {background: #111111}
.highlight {background: #333333}
td.higlight {background: #111111}
td {text-align: center; padding: .5em}
td.compact {margin: 0; padding: 0}
.compact a:hover {text-decoration: none}
td.compact img {border: none; margin-bottom: -4px}

img.terrain {position: relative; z-index: 3}
.travel-arrow-e, .travel-arrow-w {vertical-align: 50%; position: relative; z-index: 1}
.travel-arrow-e {margin-left: -10px}
.travel-arrow-w {margin-right: -10px}
.travel-arrow-ne, .travel-arrow-nw {margin-bottom: -5px; margin-left: 4px; margin-right: 4px;}
.travel-arrow-se, .travel-arrow-sw {margin-top: -10px; margin-left: 4px; margin-right: 4px;}

a:link, a:visited {color: #cccccc; text-decoration: none}
/* add underlines on hover. match all the subclasses to made the underline color correct. */
a:hover, a:hover .textneutral, a:hover .textwater, a:hover .textleaf, a:hover .textearth, a:hover .textice, a:hover .locals {text-decoration: underline}

.fullneutral, .fullwater, .fullleaf, .fullice, .fullearth, .fullfire, .fullsky {color: #ffffff; padding: 2px}
.fullneutral {background: #444444; border: 2px ridge #444444}
.fullneutral a:link, .fullneutral a:visited {color: #cccccc}
.textneutral {color: #ffffff}
.fullwater {background: #011f41; border: 2px ridge #1a7bbc}
.fullwater a:link, .fullwater a:visited, .textwater {color: #1a7bbc}
.fullleaf {background: #004200; border: 2px ridge #00B800}
.fullleaf a:link, .fullleaf a:visited {color: #00B800}
.textleaf {color: #00B800}
.fullearth {background: #404000; border: 2px ridge #C2C200}
.fullearth a:link, .fullearth a:visited {color: #C2C200;}
.textearth {color: #C2C200}
.fullice  {background: #2b415a; border: 2px ridge #a6c2e4}
.fullice  a:link, .fullice a:visited {color: #a6c2e4}
.textice  {color: #a6c2e4}
.fullfire  {background: #702400; border: 2px ridge #ff9000}
.fullfire  a:link, .fullfire a:visited {color: #ff9000}
.textfire {color: #ff9000}
.fullsky  {background: #500000; border: 2px ridge #dd0000}
.fullsky  a:link, .fullsky  a:visited {color: #ee4040}
.textsky {color: #dd0808}
.slouched {font-style: italic}

.weather {font-size: .8em}
.locals[title] {border-bottom: dotted 1px}
.locals.textneutral {color: #ffffff}
.locals.textland    {color: #fefe33}
.locals.textsea     {color: #0247fe}
.locals.textair     {color: #fe2712}

img {border: none}
.d {margin-left: 2em;}
.forumthreadlist, .threadlist {padding: 0; margin: 0; margin: .25em .5em .25em 2em}
.forumthreadlist li div, .threadlist li div {overflow: hidden; text-overflow: ellipsis;}
.d:first-child {margin-left: 0}
.b {padding: 2px; margin-bottom: 1px}
.newthread {font-weight: bold}
.neutral.b {background: #222222;}
.fullneutral .d {border-left: 2px ridge #cccccc}
.water.b {background: #000020}
.fullwater .d {border-left: 2px ridge #1a7bbc}
.leaf.b {background: #001F00}
.fullleaf .d {border-left: 2px ridge #00B800}
.ice.b {background: #1b2837}
.fullice .d {border-left: 2px ridge #a6c2e4}
.earth.b {background: #292900}
.fullearth .d {border-left: 2px ridge #757500}
.sky.b  {background: #300000}
.fullsky .d {border-left: 2px ridge #ee4040}
.fire.b {background: #3D1300}
.fullfire .d {border-left: 2px ridge #ff9000}
.newpost.b {background: #000000}
.nobr {white-space: nowrap}
.spacer {margin: 0 0 1em 0}

.hmenu {padding: 0; border-width: 2px 0 2px 0; margin: 0; list-style-type: none}
.hmenu li {display: inline}
.hmenu li a {padding: 0 .5em 0 .75em; margin: 0}
#floatfix {float: right; width: 13%; margin-right: 1%}
#mu-forum > #floatfix {display: none}
#mu-guest > #floatfix {display: none}
#mu-forum > #content {width: 98%; margin-right: 1%}
#mu-guest > #content {width: 98%; margin-right: 1%}
#move, #overview {text-align: right; margin-bottom: 1em}
#queue {text-align: right; padding: 0 .2em; margin-top: 1em}
#queue ul {list-style: none; padding: 0; margin: 0}
#queue li {border-top: 1px solid black}
#content {margin-left: 1%; width: 84%; float: left}
#logo {float: right; font-weight: bold; margin-right: 1em}
#clock {margin-top: 2em; text-align: center; clear: both}
#footer {text-align: center}

label,input,select {display: block; width: 25%; float: left; margin-bottom: 1em; margin-right: 1em}
input[type="submit"] {width: auto}
.inline input {display: inline; width: auto; float: none; margin: auto}
textarea {float: left; margin-bottom: 1em}
input,select,textarea {background: #222222; color: #cccccc; border: 2px ridge #444444}
fieldset {border: 2px ridge #444444; margin-left: 2px; margin-right: 2px}
input[type="hidden"] {display: none}
label {text-align: right; width: 12%; padding-right: 2em}
.pref label {width: 20%}
.radio_dir {display: inline; width: auto; float: none; margin: 0}
br {clear: left}
#recaptcha_response_field {color: #cccccc !important;}

@media (max-width: 800px) {
	#floatfix {float: none; width: auto; margin-left: 1%; margin-right: 1%}
	#overview {float: left; width: 15%; text-align: left}
	#move {width: 15%; float: right}
	#queue {width: 65%; margin-left: 2%; float: left}
	#queue li {display: inline; border: none}
	#queue li:after {content: " \BB "}
	#queue li:last-child:after {content: ""}

	#content {width: 98%; margin-right: 1%}
	a:link {line-height: 1.5}
	td img {width: 40px; height: 40px}
}

@media (min-resolution: 120dpi) {
	body {background: #000000}
}

.login-table-container {
	width: 100%;
	display: table;
	table-layout: fixed;
}

.login-table-row {
	display: table-row;
}

.login-table-cell {
	width: 50%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
}

.action-table-container {
	width: 100%;
	display: table;
	table-layout: fixed;
}

.action-table-row {
	display: table-row;
}

.action-table-cell {
	width: 50%;
	display: table-cell;
}