/*
This sets the width onto the individual lists, <ul>'s, this time as the need to float side by side to make them fit into whatever horizontal space is available to them. This horizontal width is determined by setting the width of the #menu div itself. The #menu div is also floated in order to "contain" it's floated descendants.
*/

#menu {
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial;
	font-size: .9em;
	height: 30px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
float: left;
}

/* end */

/* Then we apply the required formatting to the top level headings and the <a> anchors. */

#menu a {
	display: block;
	margin: 0;
	color: #333333;
	padding: 5px 10px;
	text-decoration: none;
	width: 165px;
}

#menu a:hover {
	color:#FFFFFF;
	background-color:#99CC99;
}

#menu a:active, #menu a:focus {
	color:#006600!important;
	font-weight: bold!important;
}

/* end */

/* Positioning the Popout Menus and Dropdown Menus */

#menu li {
	padding: 5px 10px;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999999;
}

#menu ul ul {
	position: absolute;
	z-index: 500;
	background-color:#99CC99;
	border: 1px solid #666666;
}

#menu ul ul li {
	width: 200px;
	float: left;
	clear: both;
}

#menu ul ul ul {
	margin: 0px 0px 0px 30px;
}

/* end */

/* This time we actually do want to hide the second level menu (top choice) as we only want the top, inside the top level <ul> to remain visible. 

The display: block; rules show the three levels being activated with the display: none; rules being entered afterwards to more specifically hide the unwanted (deeper nested) lists (counteract them). */

#menu ul ul,
#menu ul li:hover ul ul,
#menu ul ul li:hover ul ul
{
	display: none;
}

#menu ul li:hover ul,
#menu ul ul li:hover ul,
#menu ul ul ul li:hover ul {
	display: block;
}


/* end */