body {
	background: black;
	margin: 0px;
	padding: 0px;
}

/*h1 { margin: 0px; position: fixed; background: black; top: 0px; left: 0px; border-bottom: 1px solid gray; width: 100%; height: 6%; }
*/

h1 { margin: 0; padding: 0; position: absolute; top: 15px; left: 10px;}

li {
	padding: 70px 0px 100px 0px;
}
	
#mapwrapper {
	padding: 70px 0px 100px 0px;
}

#settlersmap {
	padding: 0px 0px 100px 0px;
	position: relative;
	top: 50px;
}

/* This rule below is important. If there's to be lists anywhere else on the page, they must be custom-styled. */
ul, ol, li, a { list-style: none; margin: 0px; padding: 0px; overflow: visible; line-height: 1; }

#headerbar {
	background : #D6B07F url(images/woodpanel.gif) repeat-x bottom left;
	top : 0px;
	height : 70px;
	left : 0px;
	position : fixed;
	width : 100%;
}

#consolewrapper {
	background : #D6B07F url(images/woodpanel.gif) repeat-x top right;
	bottom : 0px;
	height : 100px;
	left : 0px;
	position : fixed;
	width : 100%;
}


/**************** HEX STYLES *********************/

#hexes {  width: 800px; }

#hexes li { height: 120px; position: relative; }

#hexes li ol { position: absolute;  }
#hexes li ol.a { left: 20px; }
#hexes li ol.b { left: 90px; }
#hexes li ol.c { left: 160px; }
#hexes li ol.d { left: 230px; }

#hexes li ol li {
	width: 140px;
	height: 160px;
	float: left;
}

#hexes li ol li a {
	display: block;
	width: 140px;
	height: 160px;
	background-image: url(images/alltiles.gif);
}

#hexes li ol li a span { display: none; }

li.desert a	{ background-position: 0px 0px; }
li.forest a	{ background-position: -140px 0px; }
li.hills a { background-position: -280px 0px; }
li.mountains a { background-position: -420px 0px; }
li.pasture a { background-position: -560px 0px; }
li.plains a	{ background-position: -700px 0px; }

li.desert a:hover { background-position: 0px -160px; }
li.forest a:hover { background-position: -140px -160px; }
li.hills a:hover { background-position: -280px -160px; }
li.mountains a:hover { background-position: -420px -160px; }
li.pasture a:hover { background-position: -560px -160px; }
li.plains a:hover { background-position: -700px -160px; }


/**************** ROAD STYLES *********************/

#roads { position: absolute; top:2px; left: 0px; width: 880px; height: 1px; }

#roads li { position: relative; }
#roads li.diagonals { height: 40px; padding: 0px; }
#roads li.verticals { height: 80px; padding: 0px; }

#roads li ol { position: absolute; top: 0px; height: 1px; }

#roads li.diagonals ol.a { left: 20px; }
#roads li.diagonals ol.b { left: 90px; }
#roads li.diagonals ol.c { left: 160px; }
#roads li.diagonals ol.d { left: 230px; }

#roads li.verticals ol.a { left: 0px; }
#roads li.verticals ol.b { left: 70px; }
#roads li.verticals ol.c { left: 140px; }
#roads li.verticals ol.d { left: 210px; }

#roads li.diagonals ol li {	width: 70px; height: 40px; float: left; }
#roads li.verticals ol li {	width: 40px; height: 80px; float: left; margin-right: 100px; }
/*
#roads li  { border: 1px solid blue; }
#roads li ol  { border: 1px solid red; height: 1px; overflow: visible; }
*/

#roads li.diagonals ol li a {
	display: block;
	float: left;
	width: 70px;
	height: 40px;
}
#roads li.verticals ol li a {
	display: block;
	float: left;
	width: 40px;
	height: 80px;
}
#roads li ol li, #roads li ol li a { background: url(images/roads.gif) -110px -80px no-repeat; }
#roads li ol li.vert a:hover { background-position: -70px 0; }
#roads li ol li.fore a:hover { background-position: 0px 0px; }
#roads li ol li.back a:hover { background-position: 0px -40px; }

/*#roads li ol li a {	background: green; }*/
/*#roads li ol li a:hover { background: red; }*/

#roads li ol li a span { display: none; }


/**************** SETTLEMENT STYLES *********************/


#supplement {
	width: 500px;
	border: 1px solid #5B423C;
	background: #E4CBAB;
}