#header 
{
    

    }	

#nav li a {
	display: block;	
	/*width: 90px; -- now on individual LIs
line-height is 38px, but take care of that in twolinetab and onelinetab classes  --wrong! those classes no longer used 1/4/08*/
	height: 22px;
	line-height:21px;
	padding: 0;
	padding-left: 6px;
	padding-top:0px;
	vertical-align:middle;
	text-decoration: none;
	border-right:solid 2px #b9ccea;
	color: #ffffff;
	font-weight:normal;
}


/*2nd level of links - under the main options*/
#nav li li a {
	display: block;
	height: 19px; /*override the 38px on #nav li a */
	vertical-align:middle;
	border: 0;
	text-decoration: none;
	padding:0 0 0 10px; /*give the text of the link a little space from the left side*/
	margin:0 0 0 0px; /*snug the link to the left side of the dropdown part*/
	width:200px;
	text-align:left;
	background:#b9ccea;
	color: #000000;
}

#header ul { /* all lists */
	float:left;	
    margin:0;
    padding: 0;
    list-style:none;
    }


	

#header li { /* all list items */
    float:left;
    position:relative;
    display:block;    
    padding:0;
	margin:0;
    }    

/*
To make a second-level list appear when its parent list item is rolled over, 
we simply need to add the following:
#header li:hover ul is for non IE browsers
#header li.sfhover ul is for IE to go with the JS function on the main page.
*/

#header li:hover ul, #header li.sfhover ul { /*display: block;*/ 
	left:auto; /*bring the 2nd level list into view (from it's earlier position at -999)*/
	}    

/* fix for IE 7 from 
http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/*/
#nav li:hover, #menu li.hover {
    position: static;
}

#header li ul {  /* second-level lists */
  /*display: none;*/
  
  position: absolute;
  padding: 0;
  margin:0;
  border: solid 1px #364f7d;
  border-width: 0 1px 1px 1px;
  background:#364f7d;
  left: -999em;  /*out of the way to the far left, can see, but screen readers can still read*/
  }
  
#header li li {  
	float:none; /*dropdown part want to be vertical*/
	white-space:nowrap;
  padding: 0;
  margin:0;	
  left:0;
  /*border: solid 1px #ffffff;
  background:#ffffff;*/
}

/*The top and left properties are needed in Internet 
Explorer, because without them, IE will align the second-level 
lists to the top right of their relative parent rather than the 
bottom left. Unfortunately, this IE fix will mess things up in browsers 
like Opera, so add the following CSS to reset the top and left properties 
on all but IE browsers:

#header li > ul {
	top: auto;
	left: auto;
	}
*/

    
#header a:hover {
    color:white ;
    background-color:#364f7d;
    }