/* ******
	This file turns an "outline" (nested UL's) into a horizontal menu, with dropdowns
	for submenus.
	
	Original author is Tom Swarts (tswarts@xs.com).
	Denny Brown (dbrown@xs.com) added documentation notes.
	
	Sample markup (<a> markup elided to make structure clear):
	  	<ul id="mainNav">
			<li>Link 1</li>
			<li>Link 2
				<ul class="mnSubnav">
					<li>Link 2.1</li>
					<li>Link 2.2</li>
				</ul></li>
			<li>Link 3</li>
		</ul>
	  
	  The code here might be simpler if there weren't a bunch of cross-browser bugs that
	  require wierd work-arounds.
	  
	  Items that are for debugging are marked DBG.
	
****** */


/*begin main navigation styles */

/* This is required for IE 6 and maybe others. It generates an error (silently) in 
browsers that don't recognize 'behavior', such as FireFox. */
body {
		behavior: url("/php/csshover2.htc");
}

#mainNav {						/* The main horizontal nav bar */
	position:relative;
	/* margin:5px 0px 0px 0px; /* */
	/*margin:0px 0px 0px 0px; /*prior to KME change 8/14/08  */ 
	margin:8px 0px 0px 200px;
	padding:0px 0px 0px 10px;
	list-style-type:none;
	height:25px; /* */
	/* height:2.0em;
			/* border-top:1px solid #ccc; /* */
			/* border-bottom:1px solid #ccc; /* */
			/* background-color:#ccc; /* gray */
			/* background-color:#000099;  /* asepco deep blue*/
			background-color:#fff;  /* white */
	z-index:2;
}

#mainNav li {
	position:relative;
	float:left;
	/* margin:5px 4px 0px 4px; /* 5px causes ff3 display problem. */
	margin:0px 4px 0px 4px;
	padding:0px 0px 0px 0px;
			font-weight:bold;   /* added by dpb 080605 */
			font-size:10px;  /* added by dpb 080604 */
			/* font-size:0.8em;  /* 080724 */
			text-align:left; /* added by dpb 080604 */
}

#mainNav li a {			/* Links in the main nav bar. */
	display:block;
	text-decoration:none;
			/* color:#003366; /* Subdued dark blue */
			/* color:#fff; /* white */
			color:#666; /* Dark gray */
}

#mainNav li a:hover {	/* Links in the main nav when hovering. */
	display:block;
	text-decoration:none;
	height:20px;
			/* background-color:#fff; /* white */
			/* color:#003366; /* Subdued dark blue */
			background-color:#eee; /* very light gray */
			color:#666; /* Dark gray */
}

#mainNav li a span {
	display: none;
}

#mainNav li a img {
	visibility:hidden;
	vertical-align:bottom;
}

/* --> begin tier2 styles */
#mainNav li ul {
	display:none;	
	margin:0px;
	padding:0px;
	list-style-type:none;
}

#mainNav li .mnSubnav {		/* Sub menus displayed vertically under the menu item */
	position:absolute;
	left:0px;
	top:20px;	
	padding:0px;
	margin:0px;
			/* width:150px; /* */
			width:140px; /* Width of level 2 submenus. */
			border-bottom:1px solid #ccc;		
			/* font-size:9px;  /* added by dpb 080604 */
			/* font-size:0.8em;  /* This is already inside mainNav li. Kept the same. */
			text-align:left; /* added by dpb 080604 */
}

#mainNav li:hover .mnSubnav {
	display: block;
}

#mainNav li .mnSubnav li {	
	position:relative;
	float:none;
	display:inline;
}

#mainNav li .mnSubnav li a {	/* Links in submenus. */
	display:block;
	padding:3px 8px;
	height:100%;
	border:1px solid #ccc;	
	border-bottom:none;
			/* color:#003366; /* Subdued dark blue */
			/* background-color: #eee; /* very light gray */
			/* color:#fff; /* white */
			/* background-color:#000099; /* asepco deep blue */
			color:#666; /* Dark gray */
			background-color: #eee; /* very light gray */
}

#mainNav li .mnSubnav li a:hover {		/* Links in submenus while hovering. */
	height:100%;
			/* color:#003366; /* Subdued dark blue */
			/* background-color: #fff; /* white */
			color:#666; /* Dark gray */
			background-color:#fff; /* white */
}
/* --> end tier2 styles */

/* --> begin tier3 styles */
#mainNav li .mnSubnav li ul {
	position:absolute;	
	left:125px;
	top:0px;
	width:140px;	/* changed from 120px. dpb */
			border-bottom:1px solid #ccc;
}

#mainNav li .mnSubnav li:hover ul {	
	display:block;	
}

/* --> end tier3 styles */

/* The top level items in the horizontal nav bar must have a width. Otherwise, the
hover code and dropdowns don't display properly. This could be handled differently than
what is here now though.
  * Define one style with max width for all the buttons (see .Btn below.)
  * Put the width def'ns in the markup
*/
.Btn {
			width:80px; /* for Asepco, 130 also works. 7 buttons */
}
/* For now, not using these...
.mainNav1 {
	width:34px;
	}
	
.mainNav2 {
	width:65px;
	}
	
.mainNav3 {
	width:45px;
	}
	
.mainNav4 {
	width:25px;
	}
	
.mainNav5 {
	width:45px;
	}
*/

/* end main naviagation styles */