/* CSS Document */

#main_menu {
	width: 700px;
	height: 41px;
	float: left;
	font-family: "Trebuchet MS";
	background: ("bg-menu.jpg") repeat-x;
}

#main_nav {
/*	top-level list	*/
	padding: 0 0 0 10px;
	margin: 0;
}

#main_nav li {
	list-style-type: none;
	list-style-image: none;
	
	line-height: 41px;

	float: left;	
	margin: 0;
	display: block;
}

#main_nav a {
    text-decoration: none;
	display: block;
}

#main_nav a img {
	margin: 3px 0 1px 0;
}


#main_nav ul {
/*	second level list	*/
	background-color: #EEEEED;
	padding: 0;
	float: left;
	width: 164px;
	border-top: 1px solid #656261;
	margin: 0;	/* ||||||||> need to counteract padding in #main_nav li to position sub-menus properly <|||||||| submenu position IE fix*/
}

#main_nav li a {
	display: block;
	color: #656261;
	font-size: 18px;

	text-align: center;

	padding-left: 10px;
	padding-right: 10px;
	
	line-height: 41px;
}

/* Level 2 menu items */
#main_nav ul li a {
	font-size: 12px;
	font-weight: normal;
	
	text-transform: none;
	letter-spacing: normal;
	
	background-color: #EEEEED;
	background-image: none;	/*	this counteracts the image in level_0 li a 	*/
	
	text-align: left;
	
	margin: 0;
	padding: 4px 10px 4px 10px;
	
	border: 1px solid #656261;
	border-top: none;
	
	width: 142px;
	color: #FFFFFF;
	
	line-height: normal;
}

#main_nav ul ul {	/*	these styles relate to placing the Level2 menu in relation to Level1	*/
	position: relative;
	margin: -25px 0 0 163px;
}
#main_nav ul ul ul {
	display: none;
}


/*	Has Children	*/

#main_nav ul.level_1 li.has_children a {
	background-image: url("menu_2_arrow.gif");
	background-position: center right;
	background-repeat: no-repeat;
}

/*	remove arrow from second level lists.. this menu only shows level 0-2 right now
	you have to write the rule this way so that the child <li>s don't inherit bg from parent <li>
*/
#main_nav ul.level_1 li.has_children ul a {
	background-image: none;
}


/*	all HOVERS here	*/

/*	normal hovers	*/

#main_nav li:hover, #main_nav li:hover a{
	display: block;
	color: #4071AD;
	background: url("menu-arrow.jpg") no-repeat bottom;
}

#main_nav li:hover ul a {
	background-color: #EEEEED;
	background-image: none;
}

#main_nav ul li a:hover {
	background-color: #FFFFFF;
	color: #656261;
	border: 1px solid #656261;
	border-top: none;
}


/*	Menu functionality	*/

#main_nav li ul {	/* hides level_1 and below lists */
	position: absolute;	
	left: -999em;		
}

/* no need to change these hover classes 
unless you need more than 3 levels */
#main_nav li:hover ul ul,
#main_nav li:hover ul ul ul {
	left: -999em;
}

#main_nav li:hover ul,
#main_nav li li:hover ul,
#main_nav li li li:hover ul {
/*	position: absolute;	*/
	top: auto;
	left: auto;
}