/* ******
	This file turns an "outline" (nested UL's) into a horizontal menu, with dropdowns
	for submenus.
	
	Original author is unknown.
	Denny Brown (dbrown@xs.com) acquired the original file from http://forum.stanford.edu/
	and added comments and a few cleanups.
	
	Sample markup (<a> markup elided to make structure clear):
	  <div id="menu">
	  	<ul id="menulist">
			<li>Link 1</li>
			<li>Link 2</li>
				<ul>
					<li>Link 2.1</li>
					<li>Link 2.2</li>
				</ul>
			<li>Link 3</li>
		</ul>
	  </div>
	  
	  The code here would be simpler if there weren't a bunch of cross-browser bugs that
	  require wierd work-arounds.
	  
	  I retained comments that were in the original file, marking them ORIG. 
	  Items that are for debugging are marked DBG.
	
****** */

/*  ------  Structure and Functionality	------ */

body {
	behavior:url("http://www.norcaloldtimers.org/antiques/include/csshover.htc");
	/* Google csshover to find out about this. It's an interesting hack (in the good sense) */
	/* It handles a bunch of cross-browser bugs. */
}

#date {
	float:right;
	/* font-family:Tahoma,Verdana,Arial,Helvetica; /* Use default fonts. */
	/* font-size:12px; /* */
	margin: 3px;
	color: #444;
}

/* establish the basic #menu functionality. */
#menu {
	/* ORIG
	height: ??;
	Since we are floating all LIs, then you need to set height in the make-up part, if you want to place some background on the menu
	*/
	display: block;
	margin:5px 0px 20px 0px;
}

#menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
}

#menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
}

#menu a {
	display: block;
}

* html #menu li a {
	position: relative; /* ORIG Fix IE6's inability to expand clickable area */
}

/* Hide everything below top level. */
#menu li ul { /* I *think* that this is for IE. Use visibility & position instead of display, b/c IE does display wrong. */
	visibility: hidden;
	position: absolute;
	z-index: 1000;
}

			/* ORIG: using display is better (no scrollbars when page loads), but IE can't handle it. */
			/* so the rule above is written for IE.
			Only good browsers should see this rule. */
html>body #menu li ul { /* I think this is invisible to IE, but b/c of specifity other browsers will use this instead of the one above. */
	display: none;
}

/* I'm not sure why this is required. */
#menu li li {
	width: 100%;
}

/* When you do show a drop-down, this tells where to put it. This rule "finishes" the position:relative; rules above.  */
/* ORIG: fix the position */
#menu li li ul {
	top: 0;
	left: 100%;
}

/* Here comes some of the hairy stuff. */
/* ORIG: simulate child selector for IE */

/* I think this is for IE. It differs from "the normal show" below because of IE's problem with display.*/
/* It basically says "turn on the ul below me if you're hovering over me." For IE, you have to be explicit */
/* for every level in the outline. */
div#menu li:hover ul,
#menu li:hover li:hover ul,
#menu li:hover li:hover li:hover ul {
	visibility: visible;
		/* dpb added the following to try to eliminate the IE dark menu problem.*/
		/* This made the boxes pop up with dark text, only turning white when hovered. */
		/* background-color: #003366; /* was white for Stanford */
		/* color:#FFFFFF; /* Added for problem on IE 6 win */
}

/* I think this one turns off the ul below li's that I'm not hovering over. */
div#menu li:hover li ul,
#menu li:hover li:hover li ul,
#menu li:hover li:hover li:hover li ul {
	visibility: hidden;
}

/* ORIG do the normal show, with increased specificity, for good browsers */
#menu ul.menuList li:hover>ul { /* this version assumes menuList is on a ul */
/* #menu #menuList li:hover>ul { /* this version doesn't restrict menuList to a ul. But it breaks the two rules above */
	display: block;
	visibility: visible;
}


/* ORIG:  ------  Make-up  --------  */
/* This is the Look & Feel part for the items introduced above. */

#menu {
	/* font-family: Tahoma, sans-serif; /* use default font specs. */
	/* font-size: 11px; /* */
	/* color: #000; /* Original black */
	color: #003366; /* nlpco color */
	background-color: #EEE; /* light gray */
	border: 1px solid #CCC; /* slightly darker gray */
	height: 22px;/* Height mentioned above */
}

/* IE does not allow hover with anything other than links. So this one is invisible to IE. */
#menu li:hover {
	background-color: #EEEEEE; /* light gray. */
	/* background-color: #99bbff; /* DBG: light blue. */
	/* color: #000000; /* DBG: Black. Does anybody see this? Nope. Commented out 060605. */
	/* background-color: #003366; /* was white for Stanford */
	/* color:#FFFFFF; /* DBG: Added for problem on IE 6 win */
}

/* Both? */
#menu a {
	text-decoration: none;
	text-align: center;
	/* color: #444; /* use default color */
	color: #003366; /* nlpco color */
	/* color: #FFFF00; /* DBG: yellow */
	padding: 4px 5px 5px;
}

/* Both? */
#menu a:visited {
	/* text-decoration: none; /* */
	/* text-align: center; /* */
	color: #003366; /* use nlpcoColor. i.e. don't change visited in #menu color */
	/* color: #FFFFFF; /* DBG: white. */
	/* padding: 4px 5px 5px; /* */
}

/* Added 060602 by dpb. DBG? or maybe for real. */
#menu a:hover {
	/* background-color: #FF6600; /* DBG: dark Orange */ /* Works on FFox. */
	background-color: #FFFFFF; /* white */ /* Works on FFox. */
}

/* FFox sees this; IE Win does NOT. */
#menu li:hover>a, #menu a:hover { /* This version is original. */
/* #menu li:hover>a, #menu a:hover, #menu a:visited:hover { /* This version is DPB's attempt to fix IE6 bug. Not effective. Probly cuz of IE confusion on double classes. */
	/* color: #00FFFF; /* DBG: teal; was red for Stanford */
	color: #003366; /* nlpco color */
}

/* This specs the popup that appears when you're on a menu item that has a submenu. */
/* This works on both FFox and IE Win */
#menu li ul {
	/* color: #000; /* use default text color */
	/* color: #003366; /* nlpco color */
	/* border: 1px solid #003366; /* nlpco color */
	width: 180px;
	background-color: #eee; /* Original from stanford. */
	border: 1px solid #ccc; /* Original from stanford. */
	/* color:#9900FF; /* DBG: dark purple; I don't think this was visible on either ffox or ie. */
	/* background-color: #CC99FF; /* DBG: light purple */
	/* border: 1px solid #9900FF; /* DBG: dark purple */
}

#menu li ul a {
	text-align: left;
}

#menu li ul a.submenu {
	background-image: url(images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 100% 5px;
}
/* Not using this search id in the nlpco design.
#search {
	border:1px solid #CCC;
}
*/
