/* The entire "menu area". This contains the menus */
div.menubar {
	background-color: #ff0000;
	color: white;
	width: 130px;
	float: left;
	padding: 0em 0em 0em 0.5em;
	position: absolute;
	left: 0px;
	top: 180px;
	z-index: 13;

}

/* the item that causes the menu to "pop up". */
div.menu {
	font-weight: bold;
	font-size: 100%;
	/* if these two aren't set the same the :hover below makes the text look uncentered when the background is changed */
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

/* change the background color of the menu link when the mouse is over it to provide some visual feedback to what menu is selected
 * This doesn't do anything under IE. I don't know about safari. Works fine in firefox.
 */
div.menu:hover {
	/* background-color: #3366cc; */
	color: black;
}

/* the actual popup menu. */
div.popupmenu {
	/* we don't have to set the visibility here. The attach() function does that for us. */
	visibility: hidden;
	
	/* set the background and non-link text color */
	background-color: white;
	color: black;
	
	/* put a little border around the menu to offset it from the background */
	border-width: 1px;
	border-color: black;
	border-style: solid;
	
	/* move it left 5em. This "usually" puts the menu a little closer to the text */
	 margin-left: -3em; 
	
	/* set the font options */
	font-style: italic;
	text-align: left;
	font-size:  100%;
	
}

/* set the padding for any div text elements in the menu */
div.popupmenu > div {
	padding:	0.25em 0.5em;
}

/* set padding for links, as well as turning them into block rather than inline elements */
div.popupmenu > a {
 	display: block;
	padding:	0.25em 0.5em;
}

/* change the background of the link when you hover the mouse over it. This doesn't work in IE */
div.popupmenu > a:hover {
	/* background-color: #AAAA88; */
	color: #ff0000;
}