/* point blocks? */
body {
	background-color: #003399;
	color: #fefefe;
}
div.hex {
	height:71px; 
	width: 60px; 
	padding:0px; 
	margin: 0px; 
	position: fixed;  
	background: transparent url("../images/hexagon.gif") no-repeat top left;
}
div.fade {
	height:71px; 
	width: 60px; 
	padding:0px; 
	margin: 0px; 
	position: fixed;  
	background: transparent url("../../favicon.ico") no-repeat top left;
	top: 110px; 
	left: 400px;
}
div.hex1 {
	top: 60px; 
	left: 220px;
}
div.hex2 {
	top: 110px; 
	left: 250px;
}
div.hex3 {
	top: 160px; 
	left: 280px;
}
div.hex4 {
	top: 210px; 
	left: 250px;
}
div.hex5 {
	top: 260px; 
	left: 280px;
}
div.hex6 {
	top: 310px; 
	left: 310px;
}
div.hex7 {
	top: 360px; 
	left: 340px;
}
div.hex8 {
	top: 360px; 
	left: 400px;
}
div.hex9 {
	top: 310px; 
	left: 430px;
}
div.hex0 {
	top: 260px; 
	left: 460px;
}
div.hexTag {
	top: 110px; 
	left: 310px;
}
div.hexA {
	top: 10px; 
	left: 10px;
}
div.hexB {
	top: 60px; 
	left: 40px;
}
div.hexC {
	top: 110px; 
	left: 10px;
}
div.hexD {
	top: 160px; 
	left: 40px;
}
div.hexE {
	top: 210px; 
	left: 10px;
}
div.hexF {
	top: 260px; 
	left: 40px;
}
div.hexG {
	top: 310px; 
	left: 10px;
}
div.hexH {
	top: 360px; 
	left: 40px;
}
div.hexI {
	top: 410px; 
	left: 10px;
}
div.hexJ {
	top: 460px; 
	left: 40px;
}
div.hexK {
	top: 510px; 
	left: 10px;
}
div#hexes {
	padding:0px; 
	margin: 0px; 
	position: fixed;  
	top: 121px;
	left: 98px;
	width: 145px;
}

div.hexWho {
	left: -65px;
	position: absolute;
}
div.hexWhy {
        left: -155px;
        position: absolute;
}
div.hexWhen {
        left: -115px;
        position: absolute;
}
div.hexLefthalf {
	height:71px; 
	width: 30px; 
	padding:0px; 
	margin: 0px; 
	position: fixed;  
	background: url("../images/hexagon.gif") no-repeat top left;
	display: block;
}
div.hexRighthalf {
	height:71px; 
	width: 30px; 
	padding:0px; 
	margin: 0px; 
	position: fixed;
	background: url("../images/hexagon.gif") no-repeat top right;
	display: block;
}
div.hexTophalf {
	height:30px; 
	width: 60px; 
	padding:0px; 
	margin: 0px; 
	position: fixed;  
	background: url("../images/hexagon.gif") no-repeat top left;
	display: block;
}
div.hexBottomhalf {
	height:31px; 
	width: 60px; 
	padding:0px; 
	margin: 0px; 
	position: fixed;  
	background: url("../images/hexagon.gif") no-repeat bottom left;
	display: block;
}
div.hexhalfWho {
	top: 410px;
	left: 340px;
}
div.hexhalfWhat {
	top: 10px;
	left: 250px;
}
div.hexhalfWhere {
	top: 410px;
	left: 430px;
}
div.hexhalfWhen {
	top: 210px;
	left: 220px;
}
div.hexhalfWhy {
	top: 110px;
	left: 220px;
}
div.hexhalfHow {
	top: 210px;
	left: 430px;
}
.hexLefthalf p {
	font-size: 15px; 
	margin: 0px; 
	padding: 24px 0px 0px 18px;  
	color: #eeeeee;
}
.hexRighthalf p {
	text-align: right;
	float: right;
	font-size: 15px; 
	margin: 0px; 
	padding: 24px 18px 0px 0px;  
	color: #eeeeee;
}
p {
	font-size: 25px; 
	margin: 0px; 
	padding: 18px 0px 0px 20px;  
	color: #eeeeee;
}
h1 { 
	margin: 0px; 
	padding: 12px 0px 0px 20px;  
}
span {
	font-weight: bold;
}
#map {
	position:relative; 
	margin:0px; 
/*	border: 1px solid #fff;  */
	height: 600px;
	width: 800px;
	}
#map ul {
	padding:0; 
	margin:0; 
	list-style:none; 
	position:absolute; 
	top:0; 
	left:0;
}
#map ul li {
	position:absolute;
}
#map ul li#Who {
	width:100px; 
	height:71px; 
	top:410px; 
	left:220px;
}
#map ul li#What {
	width:260px; 
	height:71px; 
	top:10px; 
	left:250px;
}
#map ul li#Where {
	width:110px; 
	height:71px; 
	top:410px; 
	left:430px;
}
#map ul li#When {
	width:110px; 
	height:71px; 
	top:210px; 
	left:115px;
}
#map ul li#Why {
	width:180px; 
	height:71px; 
	top:110px; 
	left:50px;
}
#map ul li#How {
	width:130px; 
	height:71px;
	top:210px; 
	left:430px;
}
/* remove the absolute position from the list items for lte IE6 */
* html #map ul li {
	position:static;
}
/* and give the absolute position to the links for lte IE6 */
* html #map ul li a.tl {
	position:absolute;
}
* html #map ul li#Who a.tl {
	top:410px; 
	left:220px; 
}
* html #map ul li#What a.tl {
	top:10px; 
	left:250px;
}
* html #map ul li#Where a.tl {
	top:210px; 
	left:430px;
}
* html #map ul li#When a.tl {
	top:210px; 
	left:115px;
}
* html #map ul li#Why a.tl {
	top:110px; 
	left:50px;
}
* html #map ul li#How a.tl {
	top:410px; 
	left:430px;
}
#map ul li a {
	text-decoration:none;
}
#map a {
	text-decoration:none;
}
#map ul li a.tl {
	display:block; 
	text-indent:-9999px;
}
#map ul li a.tl:hover, #map ul li:hover {
	z-index:500;
}
#map ul li#Who a.tl {
	width:100px; 
	height:71px;
}
#map ul li#What a.tl {
	width:100px; 
	height:71px;
}
#map ul li#Where a.tl {
	width:100px; 
	height:71px;
}
#map ul li#When a.tl {
	width:100px; 
	height:71px;
}
/* #map ul li#When a.tl:hover, #map ul li#When:hover {background:#ffffff;} */
#map ul li#Why a.tl {
width:100px; 
	height:71px;
}
#map ul li#How a.tl {
	width:100px; 
	height:71px;
}
#map ul li .xsnazzy, #map ul li a .xsnazzy{
	visibility:hidden;
}
/* For IE6 to work */
* html #map ul li a.tl:hover {
	border:0;
}
* html #map ul li a:hover .xsnazzy {
	visibility:visible;
}
#map ul li:hover .xsnazzy {
	visibility:visible;
}
/* For IE7 to keep the :hover over .xsnazzy - goodness knows why? */
#map ul li:hover .xsnazzy {
	background:url(http://www.cssplay.co.uk/menu/transparent.gif);
}
.xsnazzy {
	display:block; 
	position:absolute; 
	height:auto; 
	text-align:center;
}
#Who .xsnazzy {
	left:30px; 
	top:20px; 
	width:500px;
}
#What .xsnazzy {
	left:30px; 
	top:20px; 
	width:500px;
}
#Where .xsnazzy {
	left:30px; 
	top:30px; 
	width:300px;
}
#When .xsnazzy {
	left:30px; 
	top:20px; 
	width:350px;
}
#Why .xsnazzy {
	left:30px; 
	top:20px; 
	width:350px;
}
#How .xsnazzy {
	left:30px; 
	top:20px; 
	width:320px;
}
.xsnazzy h1, .xsnazzy p{
	margin:0 10px;
}
.xsnazzy h1 {
	font-size:2.5em; 
	color:#fefefe; 
	font-family:georgia, "times new roman", serif; 
	border-bottom: 1px solid #fff;
}
.listcontent h2 {
	font-size:1.3em; 
	color:#fefefe; 
	font-family:georgia, "times new roman", serif; 
	border: none;
	margin: 0 4px;
}
.xsnazzy p {
	padding-bottom:0.5em; 
	color:#eeeeee; 
	font-size:12px; 
	text-align:left;
}
.listcontent p {
	padding-bottom:0.25em; 
	color:#eeeeee; 
	font-size:12px; 
	text-align:left;
}
.xsnazzy {
	background: transparent; 
	margin:1em;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {
	display:block; 
	font-size:0; 
	overflow:hidden;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {
	height:1px;
}
.xb4, .xb5, .xb6, .xb7 {
	background:#ccc; 
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}
.xb1 {
	margin:0 8px; 
	background:#fff;
}
.xb2 {
	margin:0 6px; 
	background:#fff;
}
.xb3 {
	margin:0 4px; 
	background:#fff;
}
.xb4 {
	margin:0 3px; 
	background:#7f7f9c; 
	border-width:0 5px;
}
.xb5 {
	margin:0 2px; 
	background:#7f7f9c; 
	border-width:0 4px;
}
.xb6 {
	margin:0 2px; 
	background:#7f7f9c; 
	border-width:0 3px;
} 
.xb7 {
	margin:0 1px; 
	background:#7f7f9c; 
	border-width:0 3px; 
	height:2px;
} 
.listcontent {
	display:block; 
	background:transparent; 
	border: none;
}
.xboxcontent {
	display:block; 
	background:#333333; 
	border:3px solid #fff; 
	border-width:0 3px;
}
.listcontent a, .listcontent a:visited , .xboxcontent a, .xboxcontent a:visited {
	display:block; 
	color:#efefef; 
	font-weight:bold; 
	font-size:12px; 
	text-indent:0; 
	padding:4px;
}
#map ul li a:hover .xsnazzy .xboxcontent a:hover .listcontent a:hover{
	color:#fff;
	font-weight:bold; 
	font-style:italic; 
	font-size:14px;
}
#map ul li:hover .xsnazzy .xboxcontent a:hover .listcontent a:hover{
	color:#fff;
	font-weight:bold;
	font-style:italic; 	
	font-size:14px;
}
.padded {
	padding-left: 23px;
	padding-top: 18px;
}
.lW {
	float: left; 
	clear: left; 
	height: 15px;
}
.rW {
	float: right; 
	clear: right; 
	height: 15px;
}