#menuhcontainer
	{
	width:100%;
margin:auto;
align:center;
}


#menu { 
width: 100%; 
background-color: transparent;}

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

#menu a:link, #menu a:visited, #menu a:active	/* menu at rest */
	{
	color: #333366;
	background-color: #f2f2ff;
	text-decoration:none;
	font-size: 12px;
	font-weight: normal;
	font-family: calibri, arial;
	border-width: 1px; 
	border-style: solid; 
	border-color: #333366 #333366 #333366 #333366;
	display: block;
	padding: 2px 3px;
	overflow: hidden; 
	}
	
#menu a:hover	/* menu at mouse-over  */
	{
	color: #333366;
	background-color: #ffffff;
	text-decoration:none;
	clear:both;
	}
	
#menu a.h2 {
	color: #333366;
	text-decoration:none;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	font-family: calibri, arial;
	border-width: 0px;
	text-align: center; 
	}
	
A:link.h2 {
	color: #333366;
	text-decoration:none;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	font-family: calibri, arial;
	border-width: 0px;
	text-align: center; 
	}
A:visited.h2 {
	color: #333366;
	text-decoration:none;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	font-family: calibri, arial;
	border-width: 0px;
	text-align: center; 
	}
A:hover.h2 {
	color: #333366;
	text-decoration:none;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	font-family: calibri, arial;
	border-width: 0px;
	text-align: center; 
	}


	
#menu a.h2:hover {
	color: #333366;
	text-decoration:none;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	font-family: calibri, arial;
	border-width: 0px;
	text-align: center; 
	}

.nodash
	{
	border-left: 1px solid #333366;
	border-right: 1px solid #333366;
	border-top: 1px solid #333366;
	border-bottom: 0px solid #333366;
	}
	
	
	
#menu a.parent, #menu a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(/images/arrow_blue.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}


/* move the relative position to the hovered li.. IE doesn't like doing anything with :hover element element unless it has something on the basic hover and the positioning is not needed until the hover is activated so this saves adding something unnecessary */ 

#menu li {} 
#menu li:hover {z-index: 500;} 

/* this bit is common to all drop menus */ 
#menu ul ul { 
position: absolute; 
z-index: 500; 
top: auto; /* the first drop automatically appears below its parent */ 
} 

#menu ul ul ul { 
top: 0;  /* the second level+ needs brought back to the actual top to match their parent */ 
} 

div#menu ul ul, 
div#menu ul li:hover ul ul, 
div#menu ul ul li:hover ul ul 
{left: -9999px;} /* use this method of hiding to avoid IE quirks as mentioned above */ 

/* bring the first level back onto the page and position where it automatically should be */ 
div#menu ul li:hover ul {left: auto;} 

/* bring the 2nd level+ back onto the page but put them to the right of their parent */ 
div#menu ul ul li:hover ul, 
div#menu ul ul ul li:hover ul 
{left: 100%;} 

/* add the missing style tag */ 
</style> 

<!-- change the conditional comment below so it only applies to IE6 and below --> 
<!--[if lt IE 7]> 
<style type="text/css" media="screen"> 
body { 
behavior: url(csshover.htc); 
font-size: 100%; 
} 

#menu ul li {float: left; width: 100%;} 
#menu ul li a {height: 1%;} 

#menu a, #menu h2 { 
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
} 
</style> 
<![endif]-->