/* 
We remove padding and margin from the Unordered Lists (parent and child),
We apply a left margin to the nested Unordered Lists - just for the look,
We float the elements to display them side by side, we give them a width (floats need a width), we use "position:relative" to prevent an MSIE Mac bug, we "turn-off" the display of bullets and we make the LIs bold (just for the look).
*/
#menu, #menu ul {
	padding:0;
	margin:0;
	height:28px;
}

#menu ul li a{
	text-decoration: none;
	color:#000000;
}

/* Set drop down look and feel */
#menu li:hover ul li:hover,
#menu li.msieFix ul li {
	border-bottom: 1px solid #999999;
	background-color:#FFFFFF;
	line-height: 15px;
	text-align:left;
	padding:2px;
	padding-left:4px;
	letter-spacing: 0.03em;
	width: 150px;
	font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
	font-size:10px;
	font-weight:bold;
}

#menu li:hover ul li:hover,
#menu li.msieFix ul li.msieFix{
	color:#FFFFFF;
	background-color:#928775;
	width: 150px;

}

/*
The normal hover class for Sub-Level links. The Important directive
is required for older browsers. We set a background color, which shows
over the gradient background. We set text color to white.
*/
#menu ul a:hover {
	color: #FFFFFF!important;
}

#menu li {
	/*float:left;*/
	width:auto;
	position:relative;
	list-style-type:none;
	text-decoration: none;
}

/* hide sublists */
#menu li ul {
	visibility:hidden;
	
	/* To "lift" the ULs from the flow, we have to add a declaration to the same rule we used to hide the nested Unordered Lists. */
	position:absolute;
	width:9em;
	
}

/* We make the nested element visible,
We set a background color for that element. */
/* When the cursor hovers over one of the top level LIs, the class msieFix is assigned to the element and it triggers the rule, popping up the nested ULs. When the cursor moves away from that link, we reset everything. */
#menu li:hover ul,
#menu li.msieFix ul {
	visibility:visible;
	background-color:#CCCCCC;
}

/* Trying to bring the nested ULs "in front" with z-index fails with MSIE, so it is the paragraph that we are "moving down" the stack. To fix our positionning problem we can simply take advantage of the position:absolute declaration we used earlier for the nested ULs and give these elements a X and Y reference.

We use the star html selector to make sure only MSIE applies these rules. Other browsers are smart enough to know that HTML is the root of the document and has no parent, so they will ignore the rules. You could think that the second one is harmless, but it is not for NN6 and Mozilla.*/
* html fieldset p {
	z-index:-1;
	position: absolute;
}
* html #menu li:hover ul,
* html #menu li.msieFix ul {
	top:2.6em;
	left:.1em;
	background-color:#CCCCCC;
}

/* The first rule helps NN6 (and Opera 7 to some extend) to paint a background behind the anchors. This browser doesn't render the background color of the ULs, so we set a background color for the second level LIs instead. The width declaration in the second rule is what put all the sub-links in one single column (NN 6, NN 7, Mozilla). */
#menu li ul li {
	background-color:#CCCCCC;
	padding:0;
	margin:0;
}

/* side nav */
#side, #side ul {
	padding:0;
	margin:0;
}

#side li {
	width:145px;
	padding:3px;
	font-size:9.5px;
	font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
	background-color:#E4E4E4;
	border-bottom: 1px solid #BEBEBE;
	line-height: 12px;
	text-align:left;
	list-style-type:none;
	text-decoration: none;
	
}

#side li:hover,
#side li.msieFix {
	width:145px;
	padding:3px;
	font-size:9.5px;
	font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
	background-color:#CFCFCF;
	border-bottom: 1px solid #BEBEBE;
	line-height: 12px;
	text-align:left;
	list-style-type:none;
	text-decoration: none;
	
}

#side a{
	text-decoration: none;
	color:#333333;
}

/* side nav selected */
#side_select, #side_select ul {
	padding:0;
	margin:0;
}

#side_select li {
	width:145px;
	padding:3px;
	font-size:9.5px;
	font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
	font-weight:bold;
	background-color:#CFCFCF;
	border-bottom: 1px solid #BEBEBE;
	line-height: 12px;
	text-align:left;
	list-style-type:none;
	text-decoration: none;
	
}

/* side nav section title */
#side_section, #side_section ul {
	padding:0;
	margin:0;
}

#side_section li {
	width:145px;
	padding:3px;
	font-size:10.5px;
	font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#0049B5;
	border-bottom: 1px solid #BEBEBE;
	line-height: 13px;
	text-align:left;
	list-style-type:none;
	text-decoration: none;
	
}

/* side nav resource title */
#side_resource, #side_resource ul {
	padding:0;
	margin:0;
}

#side_resource li {
	width:145px;
	padding:3px;
	font-size:10.5px;
	font-family: Lucida Grande, Tahoma, Verdana, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#99CC66;
	border-bottom: 1px solid #BEBEBE;
	line-height: 13px;
	text-align:left;
	list-style-type:none;
	text-decoration: none;
}