#nav, #nav ul { 
	/* all lists */
	font-size:11px;
	font-weight:bold;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1.25;
}
/* If you change width here, you need to change it in:   #nav li &  #nav li ul & #nav li ul ul */
#nav a {
	display: block;
	width: 5.1em;
}

#nav li { 
	/* all list items */
	float: left;
	width: 5.1em; 
	/* This is needed for firefox */
	list-style:none;
	/* width needed or else Opera goes nuts */
}

/* fixing spacer li */
#nav li.spacer {
	width:1px;
	padding-left:8px;
	padding-right:8px;
	}
#nav li.spacer img {
	position:relative;
	top:1px;
	left:2px;
	}
	
#nav li ul { 
/* second-level lists */
	position: absolute;
	width: 6em;
	left: -999em; 
	/* using left instead of display to hide menus because display: none isn't read by screen readers */
}


/* POSITIONING OF ITEMS: DETERMINES DISPLAY ++++++++++++++++++++++++++++++++++++++ */
#nav li ul ul {
 /* third-and-above-level lists */
/* This determines offset from previous link*/
	margin:-2em 0 0 10em;
}

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


#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
/* lists nested under hovered list items */
	left: auto;
	
}
/* END OF POSITIONING OF ITEMS  */




/* +++++++++++++++++++++++++++++++++++++++  STYLING OF LINKS   +++++++++++++++++++++++++++++++++++++++++ */
/* LEVEL ONE LINK STYLING +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* All links at this level */
ul#nav li a:link, ul#nav li a:visited, ul#nav li a:active {
	text-decoration:none;
	color:#3d6175;
	padding-left:5px;
	}
ul#nav li a:hover {
	color:#ffffff;
	text-decoration:none;
	padding-left:5px;
	}
/* Add this class to the xhtml if the link has sublevels */	
ul#nav li a:link.lowerlinks, ul#nav li a:visited.lowerlinks, ul#nav li a:active.lowerlinks {
	background-image:url(images/menu_arrow.jpg);
	background-repeat:no-repeat;
	background-position: 55px;	
	
	}
	ul#nav li a:hover.lowerlinks {
	background-image:url(images/menu_arrow_1.jpg);
	background-repeat:no-repeat;
	background-position: 55px;	
	
	}
ul#nav li a:link.lowerlinkstweak, ul#nav li a:visited.lowerlinkstweak, ul#nav li a:active.lowerlinkstweak {
	background-image:url(images/menu_arrow.jpg);
	background-repeat:no-repeat;
	background-position: 57px;	
	
	}
ul#nav li a:hover.lowerlinkstweak {
	background-image:url(images/menu_arrow_1.jpg);
	background-repeat:no-repeat;
	background-position: 57px;	
	
	}
ul#nav li a:link.lowerlinkstweak2, ul#nav li a:visited.lowerlinkstweak2, ul#nav li a:active.lowerlinkstweak2 {
	background-image:url(images/menu_arrow.jpg);
	background-repeat:no-repeat;
	background-position: 32px;	
	
	}
	ul#nav li a:hover.lowerlinkstweak2 {
	background-image:url(images/menu_arrow_1.jpg);
	background-repeat:no-repeat;
	background-position: 32px;	
	
	}
/* LEVEL TWO LINK STYLING +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
ul#nav li ul li {
	background-color:#d2dfe5;
	width:14em;
	height:2em;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #afc3ce;		
	}
/* All links at this level */
ul#nav li ul li a:link, ul#nav li ul li a:visited, ul#nav li ul li a:active {
	text-decoration:none;
	color:#3c6074;
	/* Should match width of that level's li- otherwise may look funny depending upon styling */
	width:13.5em;
	height:2em;
		}
ul#nav li ul li a:hover {
	background-color:#afc3ce;
	width:13.5em;
	height:2em;

	}	
/* Add this class to the xhtml if the link has sublevels */	
ul#nav li ul li a:link.lowerlinks, ul#nav li ul li a:visited.lowerlinks, ul#nav li ul li a:active.lowerlinks {
	background-image:url(images/sub_link.jpg);
	background-repeat:no-repeat;
	background-position:right middle;
	margin-left:4px;	
	}	
ul#nav li ul li a:hover.lowerlinks {
	background-image:url(images/sub_hover.jpg);
	background-repeat:no-repeat;
	background-position:right;	
	}	
			
/* LEVEL THREE LINK STYLING +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
ul#nav li ul li ul li a:link, ul#nav li ul li ul li a:visited, ul#nav li ul li ul li a:active {
	background-color:#d2dfe5;
	color:#3c6074;
	background-image:none;
	width:150px;
	height:2em;
	}
ul#nav li ul li ul li a:hover {
	background-color:#3c6074;
	color:#d2dfe5;
	width:150px;
	height:2em;
	}

/* +++++++++++++++++++++++ END OF LINK STYLING +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* because navigation  is floated above */
#content {
	clear: left;
	color: #ccc;
}
#nav li:hover, #nav li.hover {
    position: static;
}