/* Styling for Nav bar
   Modified to work with IE 6
   Relies on hovered list items being given class of .sfHover
 */
 
/* -------------------------  LAYOUT ----------------------
*
*  div#navbar
*      ul#nav
*         li.navtop  << root level links
*             a  home
*         li.navtop  << root level links
*             a  about
*             ul.sub  << submenu 
*                 li a directions    (so 'ul.sub li' selects a submenu                 
*                 li a volunteer
*
*          li.navtop.lastmenuitem
*/


/*  Remove margin, styling and padding from the lists and the links in the navbar */ 

#navbar ul, #navbar li, #navbar a, ul#nav, ul.sub {
	margin:0;
	padding:0;
	list-style:none;  
}

/* root level links are blocks with no decoration */

#navbar li.navtop a {
	display:block;
	text-decoration:none;
}

/* root level list items - they should have a width to keep ie 5 happy, but then we'd have to 
hack it our for the other browsers
*/

#nav li.navtop  {
	float: left;
	position: relative; /* because we are going to position things withing these */
	height:28px;
}


/* set sub menu ul and its li to same width */
#nav ul.sub, ul.sub li, ul.sub a { 
	width:10em; 
}


 /* -------------------------  STYLING ----------------------*/

/* add background image to the root level list items, and the navbar background */

#navbar, #nav li.navtop {
	background:  url(../images/navbar_bg.jpg) repeat-x center; /* both the LI and the container need bgd to be safe */
	border-color: #844144;
}

/* add border on the right of each root level menu item, except for the last one. */

#nav li.navtop { 
    border-right:1px solid #5f3f32;
}
#nav li.lastMenuItem { 
	border-right:none; /* no border on the last element */
}

/* color the root level links and position with padding 
this actually styles all the links throughout the menu
so immediately afterwards we restyle the submenu links 
*/

#nav li.navtop a {
	font: 12px "Trebuchet MS", Helvetica, sans-serif;
	color: #fff;
	padding: 6px 17px;
}
/* submenu links */
#nav li.navtop ul.sub li a {
	color: #000;
	padding: 3px 10px 5px 20px; 
}

/* make the submenus disappear */

#nav ul.sub {
  /* background-color: #ddd;
  color: #3467A0;
  border-bottom: 1px solid #ddd;
  font-size: 0.9em;
  list-style: none; */
  position: absolute;
  top: -999em;
  left: -1px;
  z-index: 1000;
}

/* 
Main hovering links 

note that sfHover class is added by javascript when the link is hovered on. 
so li.sfHover is equivalent to li:hover */

/* lighten the root level item when hovering over it */
#nav li.sfHover a, 
#nav li:hover a{ /* chrome needs the 'hover' otherwise it won't get triggered, so we've used that elsewher also */
  background: #ccc;
  color: #000;
}
/* when hovering over the root item, make the submenu links have a lighter background */
#nav li.sfHover ul a, 
#nav li:hover ul a {
  background-color: #ddd;
  color: #3467A0;	
}

/* when hovering over the submenu link, make it slightly darker */
#nav li ul a:hover {
  background: #ccc;
  color: #000;	
}

/* MAKE THE SUB MENU VISIBLE WHEN HOVERING OVER THE ROOT LINK */
#nav li.sfHover ul, 
#nav li:hover ul {
  top: 28px;
}

/*  * html #nav li.sfHover ul {
  top: 28px;
}  */

 #nav ul li a { 


	 /*   width: 105px;  */
/*    display: block; */ 
  /*  white-space: nowrap;  */
} 
/*   * html #nav ul li a {width: 165px;}   
 #nav ul li a:hover {
  background-color: #ffffff;
  color: #000;
}  */