div#navbar {
	position:relative;
	top:102px; left:0;
	width:90%;
	margin:0;
	margin-left:auto; margin-right:auto;
	text-align:left;
	font-family:"Times New Roman", Times, serif;
	font-weight:bold;
	font-size:1em;
	line-height:1em;
	list-style-type:none;
	z-index:100;
}

div#navbar ul {
	padding: 0; margin: 0;
	width:100%;
	padding-left:5%; /* the li's are floated left - center them a bit */
}

div#navbar ul li {
	float: left;
	display:inline; /* the top-level list is horizontal */
	width: 15%;
	margin:0 2px 0 2px;
	padding:0;
	line-height:1em;
	list-style-type:none;
	background-color:#ffcc33;
}

div#navbar ul li a {
	display: block;
	width:100%;
	height:2.2em;
	line-height:1em;
	padding:.1em 0 0 0; margin:0;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	color:#990000;
	overflow:hidden; /* clip oversize text */
}

/*	dropdown menu - second list level.
	The ul of the drop-down menu is normally shifted way off the screen, where
	it isn't displayed, but is still readable by text-to-voice readers, etc.
	When the top-level li is in focus, the drop-down ul is shifted into sight.
*/
div#navbar ul li ul {
	position: absolute;
	display:block; /* this list is vertical */
	width:12em;
	list-style: none;
	margin:0;
	padding:0;
	overflow: hidden; /* clip */
	left: -999em; /* hide offscreen */
}

div#navbar ul li:hover ul, div#navbar ul li:active ul, div#navbar ul li:visited ul, div#navbar ul li.sfhover ul {
	left:auto; /* bring on-screen */
}

div#navbar ul li:hover, div#navbar ul li.sfhover {
	background-color:#ffdd44;
}

div#navbar ul li ul li {
	position:relative;
	margin:0 0 0 0;
	padding:0 .5em 0 0;
	width:12em;
	display:block;
	/* background-color:#ffcc33; */
	background-color:#FFFFCC;
}

div#navbar ul li ul li a {
	height: 1em; line-height: 1em;
	text-align:left;
}

div#navbar br.half { line-height:50%; } /* half-space used for vertical centering */