/* THE LINES WITH EMPTY COMMENTS AT THEIR START ARE NEEDING ATTENTION */

/*************************************
           MENU STRUCTURE
*************************************/

/*********** the whole menu *********/

#menu-wrapper
{
	text-align:center; /* center the menu horizontally */
	clear:both; /* so that it starts below the other elements of the top banner */
	background:#CCC; /* make background not transparent so that the menu is visible if the styling part is deleted */
}

#nav a {
	display:inline-block;
	width:100%;
	/* since IE doesnt detect the hover on the li element,
	   we make the links full width (inline-block needed for this)
	   so that we don't have to hover the text for the hover effects */
}

#nav {
	min-height:25px;
	/* since it doesn't expand vertically to contain the items by itself.
	can be useful if a different background than the li's one is desired. */
	margin: 0; /* remove top and down margins*/
	padding: 0; /* remove left padding */
	display:inline-block; /* inline so that it can be centered using text-align; block so that it can contain other block elements */
	vertical-align:bottom;
}

* html #nav {display:inline;} /* this makes nav display:inline-block for IE6 and below */

*:first-child+html #nav {display:inline;} /* this makes nav display:inline-block for IE7 */

#nav li{ list-style:none; } /* remove the bullets */

/************ menu titles ***********/

#nav li.menu-lvl-0 {
/*	*/float:left; /* keep them block-level elements (since inline-block doesnt work for natively block elements in IE),
				   but allow them to stack to the left instead of not taking a single line for themselves */
	position:relative; /* so that the items below can be positioned relative to these */
/*	*/width:12em; /* they need a given width otherwise they'll take up 100%. This can be dynamically generated via php to allow flexibility */
	line-height:25px; /* make the boxes 25px high in IE too, since height alone is not enough
	                     This also centers the text vertically as a nice side effect */
}

#nav li:hover, #nav li.over { 
	z-index:1; /* make the current menu item (and its children) be on top of the others. useful for when it wraps */
}

/********** submenus ***************/

#nav li ul {
/*	*/min-width:100%; /* make the submenus have at least the same width as their parent menu */
	left:0; /* for IE */
	margin:0; /* for IE */
	padding:0; /* for FF */
	white-space:nowrap; /* we don't want them to wrap */
}

* html #nav li ul {
	width:100%;
}

*:first-child+html #nav li ul {
/*	*/width:100%; /* for IE7 who doen't understand min-width */
}
#nav li.menu-lvl-0 ul { /* put the subnavs in position and hide them */
	display:none; /* comment out this line to see all menus expanded */
	position:absolute; /* make them pop out of the parent blocks's layout, to achieve the dopdown effect */
	top:25px;  /* position the submenu. must be equal to the top menu titles' height */
}

#nav li:hover ul, #nav li.over ul { /* display the subtopics when their parent is hovered */
	display:block;
}

/**************** submenu items **************/

#nav li ul li { 
	height:25px; /* needed for IE7 */
}

/*************************************
           MENU STYLING
*************************************/

#menu-wrapper, #nav{
/*	*/text-align:center; /* either center the text, or add some lateral padding */
	font:bold 11px Verdana, Tahoma, sans-serif;
}

#menu-wrapper, #nav, #nav li ul li{ background:#00407A; } /* unhovered color for menus */
#nav a, #nav li.over ul li a, #nav li:hover ul li a { /* regular style for all links in the menu */
	color:white;
	text-decoration:none;
}

#menu-wrapper {/* borders for the menu */
/*	border-bottom:1px solid #ccc;*/
/*	border-top:1px solid #ccc;*/
}

#nav li.menu-lvl-0:hover, #nav li.over {/* color of hovered top-level menu items */
	background:#025;
}

#nav li ul li { /* first level submenus styling */
	border:1px solid #666;
	border-top:none;
}

#nav li.over a, #nav li:hover a { color:white; } /* set the top menu items color when  hovered */

#nav li ul li a:hover, #nav li:hover ul li a:hover { color:white; background:#025; } /* this overrides the previous rule, for hovered anchors */