/* Navigation - Top Menu 
   This menu uses SuperFish and thus the sfHover class. In my implementation, SuperFish is only invoked for IE6
   and CSS is used for all modern browsers.
   This version provides for a three-level menu - top, horizontal bar, dropdown from that, flyout from that.
   Developed by Will Fastie, December 2009, for GHNS
*/

/* The nav bar is constructed from the top level ul */
.nav { height: 25px; width: 100%; /* fixed height, spans the full width */
  margin: 0; padding: 0;
  /* Nav bar itself has background image */
  background: white url('../img/nav-bg-std.jpg') repeat-x;
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .75em;
  font-weight: normal;
  text-align: center;
  z-index: 10;
}
/* Progression of styles below follows the general order described by Suckerfish */
/* Resets */
.nav, .nav ul { padding: 0; margin: 0; list-style: none; }
/* ULs beneath the first level are drop-downs/fly-outs. */
.nav ul {  text-align: left;
  border: 1px #2c9b8d solid; border-top: 0;
  background-color: #acd8d2;
  top: 25px;
}
/* All links have the same format... */
.nav a { display: block; 
  text-decoration: none; color: black;
  margin: 0;
  padding: 4px 7px 4px 7px;
}
/* ...except that the links in drop-downs have slightly more padding vertically (matter of taste) */
.nav ul a { padding: 5px 7px 5px 7px; }
/* Establish the other pseudo-class behaviors for links */
.nav a:visited { color: black; }
/* IE6 problem -- When the color below is set, the dart vanishes but when not set, non-subnav links don't have a hover background color */
.nav a:hover { color: white; /* background-color: #2c9b8d; */ } 
/* At the top level, the li elements float left and have variable width. The a tag establishes spacing. */
.nav li { float: left; position: relative;
  padding: 0; margin: 0;
  height: 25px;
  border: 0; border-right: 2px white solid;
}
/* All li elements get a solid background on hover */
.nav li:hover, .nav li.sfHover { background-color: #2c9b8d; background-image: none; }
/* Items in the dropdowns and flyouts have a fixed width but can expand vertically to hold more text  */
.nav li ul li { width: 200px; height: auto;
  border: 0; border-top: 1px #2c9b8d solid;
}
/* subnav is used to get the dart to point to flyouts */
.nav li.subnav {  
  background-image: url('../img/dart-lg.gif'); background-repeat: no-repeat;
  background-position: right 6px;
}
.nav li.subnav:hover, .nav li.sfHover.subnav { /* this is the problem area for IE6 that I'm currently ignoring */
  background-image: url('../img/dart-dg.gif'); background-repeat: no-repeat;
  background-position: right 6px;
}
/* Hide the dropdown menu by moving it way off to the left (avoids display:none;). Also establish the width? */
.nav li ul { position: absolute; width: 200px; left: -999em; }
/* Display the drop-down on hover */
.nav li:hover ul, .nav li.sfHover ul { left: auto; }
/* Position the third level (flyout) as needed... */
.nav li ul ul { margin: -26px 0 0 200px; }
/* ...but hide them when the top level is hovered */
.nav li:hover ul ul, .nav li.sfHover ul ul { left: -999em; }
/* Display the third-level flyout on hover from second level */
.nav li li:hover ul, .nav li li.sfHover ul { left: auto; }

.hide-nav { display: none; }