div #menuSection { position:absolute; background:#fdfde4; top:85px; left:10px; font-size:80%; border-bottom:.4ex solid #808080; margin-top:10px; }

#menuSection #mainMenu .top-lvl-item { margin-top:2px; }
#menuSection #mainMenu .top-lvl-parent { }

#mainMenu, #mainMenu ul { 					/* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	background-color:#fdfde4;
	-moz-opacity:.95; 
	filter:alpha(opacity=90,enabled=1); /* change enabled to 1 for opacity - only works if there are no level 2 menus */
	font-weight:bold;
}

#mainMenu a {
	display: block;
	width: 14ex;  								/* this is the gap between menu items in to top menu bar */
	padding: .5ex 0ex;
	color: #006400;
	text-decoration: none;
}

#mainMenu li { 								/* all list items */
	float: left;
	width: 14ex; 								/* width needed or else Opera goes nuts */
 	padding:.6ex 0px .6ex 1ex; 
}

#mainMenu li ul a {
	width: 24ex;  								/* this is the width of the dropdown menu 'box' */
}

#mainMenu li ul { 							/* second-level lists */
	position: absolute;
	width: 25ex;								/* make it 1ex bigger than #mainMenu li ul a {width: } (or firefox displays the pointy-triangle right on the edge) */
	left: -999ex; 								/* using left instead of display to hide menus because display: none isn't read by screen readers */
	border: solid #cdcdb4;
	border-width: 1px 3px 3px 1px;
	font-weight:normal;
}

#mainMenu li ul ul { 						/* third-and-above-level lists */
	margin: -3ex 0 0 20ex;					/* this is the amount the next dropdown is offset from its parent */
}

#mainMenu li:hover ul ul, 
#mainMenu li:hover ul ul ul, 
#mainMenu li.sfhover ul ul, 
#mainMenu li.sfhover ul ul ul {
	left: -999em;
}

#mainMenu li:hover ul, 
#mainMenu li li:hover ul, 
#mainMenu li li li:hover ul, 
#mainMenu li.sfhover ul, 
#mainMenu li li.sfhover ul, 
#mainMenu li li li.sfhover ul { 			/* lists nested under hovered list items */
	left: auto;
}