/**********************************************************************************
**
** SuckerFish Menu CSS File
**  
**  This uses concepts and methods from:
**		http://www.htmldog.com/articles/suckerfish/dropdowns/
**  Go to that link for a full tutorial on its use
**		[NOTE: the tutorial uses id="nav" for the top-level <ul> tag;
**			but since we already use 'nav' as the id for the containing <div> tag, 
**			we use 'menu' as the id for the top-level <ul> tag.]
**
** Must also use sfmenu.js to work with IE6
**
** Currently only supports 3 levels (top, 1st dropdown, 2nd dropdown).  
**
** The menu structure must look like this:
** 	<div id="nav">
**		<ul id="menu"> <!-- top level -->
**			<li><a href="#">1</a></li>
**			<li><a href="#">2</a></li>
**			<li><a href="#">3</a>
**				<ul> <!-- 1st dropdown level -->
**					<li><a href="#">3-1</a></li>
**					<li><a href="#">3-2</a>
**						<ul> <!-- 2nd dropdown level -->
**							<li><a href="#">3-2-1</li>
**							<li><a href="#">3-2-2</li>
**							<li><a href="#">3-2-3</li>
**						</ul> <!-- end 2nd dropdown level -->
**					</li> <!-- end item 3-2 -->
**					<li><a href="#">3-3</a></li>
**				</ul> <!-- end dropdown level -->
**			</li> <!-- end item 3 -->
**			<li><a href="#">1-4</a></li>
**		</ul> <!-- end menu -->
**	</div> <!-- end nav -->
**
** You will have to adjust some parts of this file for each use 
** in order to customize page colors, sizes, and exact positioning. 
** Any line commented 'styling' may be changed without too much trouble.
**
** Good luck, and remember to test in all browsers often!
**
**********************************************************************************/

#nav {
	text-align:center; /* styling */
	text-transform:capitalize; /* styling */
	font-size:13px; /* styling */
	font-weight:bold; /* styling */
	display:block; /* Req'd */
}

/* ---------------------------------------------------------------------- */
/* begin: push the whole menu to the right a few pixels to fake centering */
#nav #navWrap {
	display:block;
	float:none;
	margin-left:45px;
	white-space:nowrap;
}

#nav #navWrap.navComm {
	margin-left:40px;
}
/* end: push the whole menu to the right a few pixels to fake centering */
/* ---------------------------------------------------------------------- */


#menu {
}

#menu, #menu ul {
	padding: 0; /* initialization */
	margin: 0; /* initialization */
	list-style: none; /* initialization */
	line-height: 1; /* works in conjunction with the 'margin' (top) code below for '#menu li ul ul' */
	z-index:10; /* if the menu has to be visible above a Flash element  */
	position:relative; /* Req'd */
}

#menu a {
	white-space:nowrap; /* keeps menu items on a single line */
	display:block; /* Req'd */
	color:#000; /* styling */
}

#menu li {
	float:left; /* lines up the menu items horizontally */
	display:block; /* Req'd */
	position:relative; /* Req'd */
	margin:4px 0px 0px 0px;  /*styling */
	padding-bottom:7px; /*styling - must match #menu li ul {margin-top} below */
}


/* ------------------------------------------- */
/* ---- begin: Spacing between Menu Items ---- */
#menu li {
	margin-right:40px;
}
#menu ul li {
	margin:0px;  /* styling - negates the margin added to the top-level li element */
}

#navWrap.navComm #menu li {
	margin-right:50px;
}
#navWrap.navComm #menu ul li {
	margin:0px;  /* styling - negates the margin added to the top-level li element */
}
#navWrap.navComm #menu li.lastItem, #menu li.lastItem {
	margin-right:0px; /* gets rid of margin-right for last menu item, so it doesn't push off the page */
}
/* ----- end: Spacing between Menu Items ----- */
/* ------------------------------------------- */



#menu li ul {
	position: absolute; /* breaks the flow of the page, so that the submenus may be hidden */
	left: -999em; /* pushes the sub-menu out of sight to the left until 'revealed' */
	background:#ffbf00; /* styling */
	border: 2px solid #003265; /* styling */
	border-top: none;
	text-align:left; /* styling */
	text-transform:none;  /* styling */
	width:210px; /* Req'd - adjust as needed */
	margin-top:7px; /*styling - must match #menu li {padding-bottom} above */
}

#menu ul li {
	width:100%; /* Req'd */
	display:block; /* Req'd */
	white-space:nowrap; /* keeps menu items on a single line */
	padding:0px; /* styling */
	margin:0px;  /* styling - negates the margin added to the top-level li element */
}

#menu li:hover ul, #menu li.sfhover ul { /* note: .sfhover is a class created by sfmenu.js, so that IE6 can recoginze a hover on the <li> element */
	left: auto;  /*shows 1st level submenu when the containing <li> is hovered */
}

/* pushes the 2nd level sub-menu out of sight to the left when the 1st level is revealed, until it is also 'revealed' */
#menu li:hover ul ul, #menu li.sfhover ul ul { /* note: .sfhover is a class created by sfmenu.js, so that IE6 can recoginze a hover on the <li> element */
	left: -999em;
}

/* shows 2nd level submenu when the containing <li> is hovered */
#menu li:hover ul, #menu li.sfhover ul, {
	left:auto;
}

/* forces last dropdown to appear to float right - must use class="navLastItem" in the sub-menu's <ul> tag */
#menu li:hover ul.navLastItem, #menu li.sfhover ul.navLastItem {
	left:-66px;
}


#menu ul a {
	color:#003265; /* styling */
	padding: 4px 1em 4px; /* styling */
}

#menu ul a:hover  {
	color:#ffbf00; /* styling */
	background:#003265; /* styling */
}

a.parent {
	cursor:default; /* UI context ass't; for use when a header has a drop-down, but the header wont link anywhere */
}


/* end Suckerfish Menu CSS code */