/*----------------------------------------------------------*/
/* Lorain Soil and Water Conservation District				*/
/* CSS name: nav.css										*/
/* Developer: MindPick Software LLC							*/
/* Date: 7/12/2007											*/
/*															*/
/* Description: Style sheet for elements of the navigation 	*/
/* 		menu with all media.								*/
/*----------------------------------------------------------*/

/*--------------------------------------------------------------*/
/* The navigation menu items will have a green background with	*/
/* white text. Don't underline links.							*/
/*--------------------------------------------------------------*/
#nav_menu {
	position: relative;
	padding: 15px 0;
	color: #f8f8f8;
	font-family: arial, sans-serif;
}

#nav_menu a {
	display: block;
	color: #f8f8f8;
	text-decoration: none;
}

/*----------------------------------------------------------------------*/
/* Put a gold border around the entire menu and put some space above	*/
/* and below it. This applies to fly-out menus, also.					*/
/*----------------------------------------------------------------------*/
.submenu_box, #nav_menu_box {
	margin: 0 ! important;
	border: solid #cccc99;
	border-width: 1px 2px 2px 2px ! important; /* border always 2px, but first 
								menu item supplies one of the two. */
	padding: 0 ! important; /* Turn off padding (problem in Mozilla/Gecko 
								browsers). */
	background-color: #006600;
}

/*------------------------------------------------------------------*/
/* The navigation menu items will be bordered in gold, and will		*/
/* be spaced to allow room for current item icon.					*/
/*------------------------------------------------------------------*/
.nav_menu_title {
	width: 151px;  /* IE before v6 will read this width (and compensate for 
	                 incorrectly handling the box model). */
	wid\th: 136px;  /* All other browsers will read this width. */
	padding: 1px 0 0 13px;
	border-top: 1px solid #cccc99;
	background-color: #006600;  /* needed by IE7 to have title item fill the 
								entire block. */
}

.nav_menu_item {
	padding: 1px 0 1px 13px;
	border: solid #cccc99;
}

.submenu_item {
	width: 153px ! important;  /* IE before v6 will read this width (and compensate for 
	                 incorrectly handling the box model). */
	wid\th: 140px ! important;  /* All other browsers will read this width. */
	padding: 1px 0 1px 13px ! important;
	border-top: 1px solid #cccc99;
}

/*--------------------------------------------------------------*/
/* Turn off the border above sub-submenu titles in IE before	*/
/* v6, because the border goes all the way across the menu		*/
/* instead of just across the top of the title (ugly!).			*/
/*--------------------------------------------------------------*/
#nav_menu ul ul .nav_menu_title {
	width: 138px;  /* IE before v6 will read this width (and compensate for 
	                 incorrectly handling the box model). */
	wid\th: 123px;  /* All other browsers will read this width. */
	border-top: 0 solid #cccc99;	
	b\order-top: 1px solid #cccc99;
}

/*----------------------------------------------------------*/
/* Don't use any bullets for the menu items.				*/
/*----------------------------------------------------------*/
#nav_menu li {
	list-style-image: none;
	list-style-type: none;
}

/*--------------------------------------------------------------------------*/
/* Set the width for first level menu items. Put a gold line above each.	*/
/*--------------------------------------------------------------------------*/
#nav_menu ul li .nav_menu_item {
	width: 151px;  /* IE before v6 will read this width (and compensate for 
	                 incorrectly handling the box model). */
	wid\th: 136px;  /* All other browsers will read this width. */
	border-width: 1px 0 0;
}

/*------------------------------------------------------*/
/* Set the width of the submenus.						*/
/*------------------------------------------------------*/
#nav_menu ul ul {
	width: 136px;  
	margin: 0 0 0 -16px; /* IE before v6 wants to indent sub-submenus,
							so change the margin. */
	marg\in: 0;  /* Margin is 0 for all other browsers. */
	border: solid #cccc99;
	border-width: 0;
	padding: 1px 0 0;
}

#nav_menu ul ul ul {
	width: 123px; 
	margin: 0 0 0 -16px; /* IE before v6 wants to indent sub-submenus,
							so change the margin. */
	marg\in: 0;  /* Margin is 0 for all other browsers. */
	border: solid #cccc99;
	border-width: 0;
	padding: 1px 0 0;
}

.submenu_box li { 
	margin: 0 0 0 -16px; /* IE before v6 wants to indent submenus,
							so change the margin. */
	marg\in: 0;  /* Margin is 0 for all other browsers. */
}

/*--------------------------------------------------------------*/
/* Set the width for submenu items. Put a gold line above and	*/
/* to the left of each.											*/
/*--------------------------------------------------------------*/
#nav_menu ul ul li .nav_menu_item {
	width: 138px;
	wid\th: 122px;
	border-width: 1px 0 0 1px;
}

#nav_menu ul ul ul li .nav_menu_item {
	width: 125px;
	wid\th: 109px;
	border-width: 1px 0 0 1px;
}

/*------------------------------------------------------------------*/
/* Change the background and text color when the cursor is over a	*/
/* menu item.														*/
/*------------------------------------------------------------------*/
#nav_menu a:hover {
	color: black;
	background-color: #cccc99;
}