#header {
	background-color: #000080;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	padding-top: 0.5em;
	border-style: groove;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 4px;
	border-top-width: 0px;
}
#header h1 {
	margin-bottom: 0em;
	margin-top: 0.5em;
	color: white;
	font-family: arial, helvetica, sans-serif;
	font-size:150%;
	font-weight: bold;
}

#top {margin-bottom: 1em;}

#logo {float: left;}

#map {
	font-family: arial, helvetica, sans-serif;
	padding-right: 1em;
	margin-bottom: 0.5em;
	color: white;
	text-decoration: underline;
	/*width: 100%;*/
	text-align: right;
}
#map a {
	color: white;
	text-decoration: underline;
	font-size: 70%;
}

#nav {
	clear: both;
	font-size: 80%;
	font-family: arial, helvetica, sans-serif;
	color: white;
	background-color: #222222;
	width: 100%;
	height: 2em;
	margin: 0px;
}

#menu ul {cursor: hand;}
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #222222;	
}
#menu a {
	display: block;
	color: white;
	text-decoration: none;
}
#menu li { /* all list items */
	padding: 4px 8px;
	background-color:#222222;
	float: left;
	position: relative;
	width: auto; /* width needed or else Opera supposedly goes nuts */
}
#menu li ul { /* second-level lists */
	margin-left: -10px;/*This is the line I added, RS 19/3/08*/
	position: absolute;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#menu li#item3 ul {width: 14em;}
#menu li#item4 ul, #menu li#item6 ul {width: 12em;}
#menu li#item5 ul {width: 13em;}
#menu li ul li {width: 100%;}
#menu li:hover ul, #menu li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
#menu li ul li a:hover, #menu li ul li a.sfhover { /*list item hovers*/
	color: #000000;
	background-color: #DDDDDD;
}

#navclear {
	clear: both;
	font-size: 1%;
}