/* CSS Document */


/* main navigation */



/* nav container div */
#mainMenuContents {
	padding: 0;
	margin: 0;
	text-align: left;
	list-style: none;
	font: normal 11px/17px Tahoma, sans-serif;
}


/* master nav inside of the container div */
#mainMenuContents ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font: normal 11px/17px Tahoma, sans-serif;
}

/* top nav item */
#mainMenuContents li {
	margin: 0;
	padding: 4px 0 6px 5px;
	width: 70px;
	float: left;
	background: url(../img/bg_navBubble1.gif) no-repeat;
}

/* the link within a top nav item */
#mainMenuContents li a {
	margin: 0;
	padding: 10px 15px;
	color: #fff;
	text-decoration: none;
	display: block;
	position: relative;
}

/* any dropdown menu */
#mainMenuContents li ul {
	margin: 0;
	
	padding: 2000px 0 0 4px;
/* why this padding exists:

in firefox, when you have a submenu whose height exceeds the height of one of its parent menus, it causes the entire nav block to jump up by the difference in height between the parent menu and the submenu. this jump is just a blink, it's gone in a split-second, but it's noticeable. this padding sets the height of the first menu (which itself is actually a submenu, because its parent is the single visible item in the navigation when nothing is rolled over) to be higher than the height of the screen. this menu then becomes the tallest menu in the group, and no submenu will exceed its height. this menu will still cause a split-second jump, but it's far off the top of the page and therefore none of its artifacts are visible to the user. for all subsequent menus beyond this first one, the top padding is negated below, in #mainMenuContents li ul ul.

note that, because the padding is a part of the menu, you cannot apply a border directly to the ul's that make up these dropdown menus, because the border will stretch up to the top of the browser window and look dumb. you can still use a positioned background image or background colors on the list items within the menu.

another side-effect of this tall menu is that the user can roll over the menu, then roll off vertically and the menu doesn't go away, because the mouse is sitting on the extra padding. you'd have to move the mouse horizontally until you're outside the padding in order for the menu to go away. */

	position: absolute;
	display: none;
	color: #fff;
	clear: left;
	z-index: 5;
	bottom: 27px;
}

/* any item within a dropdown menu */
#mainMenuContents li li {
	margin: 0;
	padding: 6px 25px 0px 15px;
	display: block;
	width: 125px;
	float: none;
	background: #401701 url('../img/bg_non_parent.gif') right center repeat-y;
}

/* rounded corners */
#mainMenuContents li li.capTop,
#mainMenuContents li li.capTopsfhover {
	padding-top: 0;
	padding-bottom: 0;
	height: 6px;
	line-height: 0.1px;
	background: #401701 url('../img/bg_nav_top_wide.gif') top left no-repeat;
}
#mainMenuContents li li.capBottom,
#mainMenuContents li li.capBottomsfhover {
	margin-top: -8px;
	padding-top: 13px;
	padding-bottom: 0;
	height: 6px;
	line-height: 0.1px;
	background: #401701 url('../img/bg_nav_bottom_wide.gif') bottom left no-repeat;
}

/* the link within any item in a dropdown menu */
#mainMenuContents li li a {
	margin: 0;
	padding: 0;
	text-decoration: none;
	background: none;
	display: inline;
}

/* any dropdown menu that's too far down the line to be visible */
#mainMenuContents li ul ul {
	padding-top: 0; /* this negates the extra height applied to the first menu in #mainMenuContents li ul */
	left: 0;
	bottom: 0;
	display: none;
}

/* the lift class can be applied to any dropdown menu that's not tall enough to reach the arrow coming out from its parent */
#mainMenuContents li ul ul.lift1 {
	bottom: 2em;
}







/* the following nav code represents a subset of what is normally included in a dropdown_menu.css file, because stuff was getting out of hand, and the menu for this site is not that deep */


/* dropdown menus under the current hovered item that are too far down the line to be visible */
#mainMenuContents li:hover ul ul,
#mainMenuContents li:hover ul ul ul,
#mainMenuContents li:hover ul ul ul ul,
#mainMenuContents li:hover ul ul ul ul ul,
#mainMenuContents li.sfhover ul ul,
#mainMenuContents li.sfhover ul ul ul,
#mainMenuContents li.sfhover ul ul ul ul,
#mainMenuContents li.sfhover ul ul ul ul ul,

/* ie6 can't handle more than one class on an item, so the .parent and .sfhover classes are run together to create a new class. the js file is also modified to remove the space in front of " sfhover" so that it will be glued to the existing class name instead of appended to it with a space. */
#mainMenuContents li.parentsfhover ul ul,
#mainMenuContents li.parentsfhover ul ul ul,
#mainMenuContents li.parentsfhover ul ul ul ul,
#mainMenuContents li.parentsfhover ul ul ul ul ul {
	display: none;
	margin: 0 0 0 165px;
}

/* dropdown menu under the current hovered item */
#mainMenuContents li:hover ul,
#mainMenuContents li li:hover ul,
#mainMenuContents li li li:hover ul,
#mainMenuContents li li li li:hover ul,
#mainMenuContents li li li li li:hover ul,
#mainMenuContents li.sfhover ul,
#mainMenuContents li li.sfhover ul,
#mainMenuContents li li li.sfhover ul,
#mainMenuContents li li li li.sfhover ul,
#mainMenuContents li li li li li.sfhover ul,
#mainMenuContents li.parentsfhover ul,
#mainMenuContents li li.parentsfhover ul,
#mainMenuContents li li li.parentsfhover ul,
#mainMenuContents li li li li.parentsfhover ul,
#mainMenuContents li li li li li.parentsfhover ul {
	display: block;
}


/* dropdown item hover */
#mainMenuContents li li.parent:hover,
#mainMenuContents li li.parentsfhover {
	background: #401701 url('../img/bg_parent.gif') right center no-repeat;
}

/* extra emphasis on the link itself to help IE6 users see when .parent:hover is highlighted */
#mainMenuContents li li:hover a,
#mainMenuContents li li.parent li:hover a,
#mainMenuContents li li.parent li.parent li:hover a,
#mainMenuContents li li.parent li.parent li.parent li:hover a,
#mainMenuContents li li.sfhover a,
#mainMenuContents li li.parent li.sfhover a,
#mainMenuContents li li.parent li.parent li.sfhover a,
#mainMenuContents li li.parent li.parent li.parent li.sfhover a,

#mainMenuContents li li.parentsfhover a,
#mainMenuContents li li.parentsfhover li.parentsfhover a,
#mainMenuContents li li.parentsfhover li.parentsfhover li.parentsfhover a {
	color: #fbc446;
}

/* remove emphasis on links in the dropdown menu under the current hovered item, until they themselves are hovered */
#mainMenuContents li li.parent li a,
#mainMenuContents li li.parent li.parent li a,
#mainMenuContents li li.parent li.parent li.parent li a,
#mainMenuContents li li.parent li.parent li.parent li.parent li a,

#mainMenuContents li li.parentsfhover li a,
#mainMenuContents li li.parentsfhover li.parentsfhover li a,
#mainMenuContents li li.parentsfhover li.parentsfhover li.parentsfhover li a {
	color: #fff;
}

/* bring the color back to a hovered item in the last visible menu, if it is not a parent */
#mainMenuContents li li.parentsfhover li.sfhover a,
#mainMenuContents li li.parentsfhover li.parentsfhover li.sfhover a,
#mainMenuContents li li.parentsfhover li.parentsfhover li.parentsfhover li.sfhover a {
	color: #fbc446;
}

