/* a two level menu system. Can be either Horizontal or Vertical. */

div#headerMenu {
	position:relative;
	clear: both;
	height:18px;
	background-color:#E38E31;
	background-image:url(images/menubackground.jpg);
	padding:0 0 0 3px;
	border-left:3px solid black;
	border-right:3px solid black;
	z-index:1;
}

div#headerMenu a {  /* set default styling for all anchors in menu */
	width:100%;	/* makes anchor fill listitem in IE */
	display: block;
	padding:0px 0px 1px 0px;
	border:1px solid #E4933A;
	color:black;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div#headerMenu ul {     /* settings for all lists in menu */
	position:absolute;/* added 09-Feb-2008 */
	list-style:none;
	padding:0px;
	margin:0px;
	background-image:url(images/shim.gif); /* This keeps the submenus open in IE when there is a space between listitems!! */
	/* IF VERTICAL MENU, uncomment width and set to same value as in the next rule */
	/* width:120px; */ 
}

div#headerMenu li  {    /* settings for all listitems in menu and submenus*/
	width:88px;
	float: left;
	position: relative;
	margin:0px 1px 0px 1px;
	background-color:transparent;
	text-align: center;
}

div#headerMenu li ul {  /* adjust position and width of second-level menus */
	position:absolute;
	width:120px;   /* this width is the same as the li width in the rule above */
	margin-top:0px; 
	margin-left:0px;
	/* IF VERTICAL MENU - use these two settings instead */
	/* margin-top:-24px; */   /* moves submenu up next to associated listitem */
	/* margin-left: 110px; */ /* set to the MENU-WIDTH, or, less to overlap */
	left:-2000px;  /* this is the rule that hides the submenus */
	top:18px;
}

div#headerMenu li ul li {  /* adjust position and width of second-level menus */
	margin-top:1px; 
}

div#headerMenu li:hover a {  /* style top-level listitem hovers */
	background-color:#dee;
	border:1px solid black;
}

div#headerMenu li:hover li a {  /* style second-level listitems */
	background-color:#cca;
	border:1px solid black;
}

div#headerMenu li li:hover a {  /* style second-level listitem hovers */
	background-color:#eec;
}

div#headerMenu li:hover ul {  /* this shows the second level menu */
	/*left:auto;*/
	left:-2px;
}