/* ---------------------
	Navigation styles for dropdown navigation menus.
---------------------- */

/* =Nav
---------------------- 
	Notes:
		This is some complicated cascading, so comments are drawn out with hyphens to help follow the hierarchy.
		Level 1 = main horizontal top-level links
		Level 2 = first drop-downs from the horizontal links
		Level 3 = "drop-sideways" from Level 2 links
		Font sizes and vertical padding are in ems, to make text-resizing work correctly, so watch out.
---------------------- */
#nav {
	clear: none;	
	padding: 0;
	margin: 0;
	border-top: solid 1px #fff;
	background: #969696 url(../images/bg/nav_bg_br.gif) right bottom no-repeat;
}
#nav-main {	
	padding: 0;
	float: left;
	display: inline;
	width: 60%;
	height: auto !important;
	height: 1%; /* This only works if you have a clear div in the source after the last LI. See further fixes on Level 1 A below. */
}
/*- Level 1 UL */
	#nav-main ul {
		margin: 0;
		padding: 0 0 0 0;
	}
/*----- Level 1 LI */
		#nav-main ul li {
			float: left;
			display: inline; /* fix IE margin bug */
			position: relative;
			clear: none;
			margin: 0;
			padding: 0;
			color: #eee;
			font-weight: bold;
			border-right: solid 1px #ccc;
			border-bottom: none;
			cursor: pointer;
		}
		#nav-main ul li.last {
			border-right: none;
		}

/*--------- Level 1 A */
			#nav-main ul li a {
				margin: 0;
				padding: 0.4em 21px; /* This is an IE value to get the height right */
				display: block;
				margin: 0px;
				border-right: solid 1px #797979;
			}
			#nav-main > ul li a {
				padding: 0.4em 21px; /* This is a good browser value */
			}
			#nav-main ul li a:link, #nav-main ul li a:visited {
				color: #eee;
				text-decoration: none;
			}
			#nav-main ul li.first a:link, #nav-main ul li.first a:visited {
				background: transparent url(../images/bg/nav_bg_bl_init.gif) 0 bottom no-repeat;
			}
			#nav-main ul li a.current:link, #nav-main ul li a.current:visited {
				color: #fff;
			}
			#nav-main ul li.first a.current:link, #nav-main ul li.first a.current:visited {
				color: #fff;
				background: transparent url(../images/bg/nav_bg_bl_init.gif) 0 bottom no-repeat;
			}
			#nav-main ul li a:hover, #nav-main ul li a:active {
				color: #fff;
				text-decoration: none;
				background: #7b7b7b;
			}
			#nav-main ul li.first a:hover, #nav-main ul li.first a:active {
				color: #fff;
				background: #7b7b7b url(../images/bg/nav_bg_bl_over.gif) 0 bottom no-repeat;
			}
			
/*------------- Level 2 UL */
				#nav-main ul li ul {
					display: none;
					position: absolute;
					top: 2.08em !important; /* Calibrate this at the correct value to make the dropdown list flow seamlessly from the bottom of the Level 1 link at all text sizes. */
					top: 2.16em; /* Now re-calibrate it slightly for IE */
					left: 0px;
					z-index: 200;
					list-style: none outside;
					width: 170px;
					margin: 0 0 0 0px;
					padding: 0;
					background: #777;
				}
/*----------------- Level 2 LI */
					#nav-main ul li ul li {
						clear: none;
						margin: 0;
						padding: 0;
						color: #eee;
						font-weight: bold;
						font-size: 0.9em;
						border: none;
						border-bottom: solid 1px #929292;
					}
					#nav-main ul li ul li.last {
					}

/*--------------------- Level 2 A */
						#nav-main ul li ul li a {
							display: block;
							text-align: left;
							width: 128px;
							padding: 0.4em 21px;
							margin: 0;
						}
						#nav-main ul li ul li a:link, #nav-main ul li ul li a:visited {
							color: #eee;
							text-decoration: none;
							background: transparent;
						}
						/* Make sure the 'current' styles display, if any */
						#nav-main ul li ul li a.current:link, #nav-main ul li ul li a.current:visited, #nav-main ul li.last ul li a.current:link, #nav-main ul li.last ul li a.current:visited, #nav-main ul li ul li.last a.current:link, #nav-main ul li ul li.last a.current:visited {
							color: #eee;
							background: #555;
						}
						/* Make sure the 'hover' styles display */
						#nav-main ul li ul li a:hover, #nav-main ul li ul li a:active, #nav-main ul li ul li a.current:hover, #nav-main ul li ul li a.current:active {
							color: #fff;
							text-decoration: none;
							background: #000;
						}
						/* 'Haschildren' is for putting a style (like an arrow graphic) on Level 2 items which have Level 3 children */
						#nav-main ul li ul li a.haschildren:link, #nav-main ul li ul li a.haschildren:visited {
							background: transparent url() 155px 50% no-repeat;
						}
						#nav-main ul li ul li a.haschildren:hover, #nav-main ul li ul li a.haschildren:active {
							background: #000 url() 155px 50% no-repeat;
						}
						
/*------------------------- Level 3 UL */
							#nav-main ul li ul li ul {
								display: none;
								position: absolute;
								top: 0px !important; /* Gotta cancel out the !important fix on the Level 2 UL */
								left: 170px;
								z-index: 220;
								list-style: none outside;
								width: 170px;
								margin: 0;
								padding: 0;
								background: #8c8c8c;
							}
/*----------------------------- Level 3 LI */
								#nav-main ul li ul li ul li {
									clear: none;
									margin: 0;
									padding: 0;
									color: #eee;
									font-weight: bold;
									font-size: 1em;
									border: none;
									border-bottom: solid 1px #9e9e9e;
								}
								#nav-main ul li ul li ul li.last {
								}
/*--------------------------------- Level 3 A */
									#nav-main ul li ul li ul li a {
										display: block;
										width: 128px;
										padding: 0.4em 21px;
										margin: 0;
									}
									#nav-main ul li ul li ul li a:link, #nav-main ul li ul li ul li a:visited {
										color: #eee;
										text-decoration: none;
										background: transparent;
									}
									/* Make sure the 'current' styles display, if any */
									#nav-main ul li ul li ul li a.current:link, #nav-main ul li ul li ul li a.current:visited, #nav-main ul li ul li ul li.last a.current:link, #nav-main ul li ul li ul li.last a.current:visited {
										color: #eee;
										background: #555;
									}
									/* Make sure the 'hover' styles display */
									#nav-main ul li ul li ul li a:hover, #nav-main ul li ul li ul li a:active, #nav-main ul li ul li ul li.last a.current:hover, #nav-main ul li ul li ul li.last a.current:active {
										color: #fff;
										text-decoration: none;
										background: #000;
									}
				
				/* This makes the hover magic work - plus a little Javascript for IE */
				#nav-main ul li:hover ul, #nav-main ul li.over ul {
					display: block;
				}
				/* This preserves cascade order so the level 3 ul isn't always showing */
				#nav-main ul li ul li ul, #nav-main ul li:hover ul li ul, #nav-main ul li.over ul li ul {
					display: none;
				}
				/* This restores the hover magic to level 3 ul */
				#nav-main ul li:hover ul li:hover ul, #nav-main ul li.over ul li.over ul {
					display: block;
				}