#navigation {font-size:14px; font-family: verdana, Arial, Helvetica, sans-serif;width:220px;border:none;position:relative;z-index:101010;border-bottom:2px solid #104a7a; /*position + z-index necessary for subnav to float over content pane on hover in DHHS template*/}
 #navigation ul {margin:0; padding:0; font-weight: normal;}
 #navigation li {list-style-type:none;}
/*#navigation li a{padding:80px;}*/

 #navigation ul.top-level {
/*background:#104a7a;*/ /*this color shows through on hover in compat view*/
/*background-repeat:no-repeat !important;
background-position:2px !important; */
}

 #navigation ul.top-level li {
 /*border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;*/
 /*margin-left:2px;*/
 margin-top:0;
 padding-top:0;
 /*border-bottom: 1px solid #093e69;*/
border-bottom: 1px solid #5a80a0;
}

 #navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 line-height:1.5em;
 /*background-color: #0474a6 !important;*/
/*background-image:none !important;*/
     background-color: #104a7a; /*#1769ae;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2e6ea3), to(#0b416e));
    background-image: -webkit-linear-gradient(top, #2e6ea3, #0b416e);
    background-image:    -moz-linear-gradient(top, #2e6ea3, #0b416e);
    background-image:     -ms-linear-gradient(top, #2e6ea3, #0b416e);
    background-image:      -o-linear-gradient(top, #2e6ea3, #0b416e);
    background-image:         linear-gradient(top, #2e6ea3, #0b416e);

}

 #navigation ul.top-level a{
 width: 210px; /* width necessary to give layout to element for compatibility view; otherwise, there is a vertical gap between links in compat view*/
}

 #navigation ul.top-level li a:hover{
/*border-bottom:3px solid #026896 !important;*/
}

 #navigation li:hover .sub-level {
    background-color:#397db5;
    /*border: #ccc solid;*/
    border-width: 1px;
    display: block;
    position: absolute;
    left: 218px;
}



/*all vertical menus except those with subreverse class should display top-down; this has to be done with Javascript/Jquery for <= IE8*, which don't process pseudo-classes*/

 #navigation li:hover ul:not(.subreverse).sub-level{
	    top:2px;
}

/* this class is called from navtoggle.js so that the child menus align with parent in IE 8 and lower, which do not recognize the :not pseudo-class above, which is used to apply the menu 'top' position unless the subreverse class (below) has been added to the submenu to reverse the top-down display so that the menu will fit in the viewport */
.positionSub{
			top:2px; 
}

/*vertical menus with subreverse (i.e., reverse submenu display) class should display bottom-up;*/

 #navigation li:hover ul.subreverse {
    bottom:5% !important;
}


/* not recognized in <= IE8 */
 #navigation li:hover .sub-level li:last-child{
	border-bottom:3px solid #397db5 !important;
}

 #navigation li:hover .sub-level li:first-child{
	border-top:3px solid #397db5 !important;
}

 #navigation a:hover{
 /*text-decoration:underline;*/
 /*border-left:3px solid #fff;*/
 /*background:none;*/
}


 #navigation ul.top-level li a{
	padding:7px 5px 7px 5px;
}


 #navigation .top-level a:hover{
	text-decoration:underline;
	color:#fff !important;
  	background-color: #397db5 !important;
	background-image:none !important;

}

 #navigation li:hover {
 /*background: #026896;*/
 /*border-left:3px solid #fff;*/
 position: relative;
}

/*Second Level*/

 #navigation ul.sub-level,  #navigation ul.sub-level li ul.sub-level {
    display: none;
	/* to edit in WYSIWYG mode */
}

/*sub menu width*/
 #navigation li:hover ul.sub-level a{
 width: 190px; /* width necessary to give layout to element for compatibility view; otherwise, there is a vertical gap between links in compat view*/
 /*width = width + padding and margin*/
padding-right:10px;
}

 #navigation li:hover .sub-level li:hover .sub-level{
    /*background: #999;*/
    position: absolute;
    left: 195px; /* 1px less than width of parent menu + padding and margin */
    top: 2px;
}


 #navigation .sub-level {
font-size:13px;	
}


 #navigation ul.sub-level li {
    float:left;
	margin-top:0;
	padding-top:0;
	border-left:3px solid #397db5  !important;
	border-right:3px solid #397db5  !important;
    border-bottom: 1px solid #5a80a0;
}

 #navigation ul.sub-level li:hover {
	border-left:3px solid #397db5  !important;
	border-right:3px solid #397db5  !important;
	border-bottom:1px solid #397db5 !important;
}

 #navigation .sub-level {
    /*text-decoration:underline;*/
}

 #navigation .sub-level a:hover{
    text-decoration:underline;
		color:#f2eeee !important;
}

/*Third Level*/
 #navigation .sub-level .sub-level a:hover{
    text-decoration:underline !important;
}

/*Fourth Level*/
 #navigation .sub-level .sub-level .sub-level a:hover{
    text-decoration:underline;
}


/*RESET STYLES*/

/* hide or show menus when a grandparent list item is hovered */

/* default state of 3rd level is hidden */
 #navigation li:hover .sub-level .sub-level {
	display:none;
}

/* show 3rd level when 2nd level is hovered */
 #navigation .sub-level li:hover .sub-level {
	display:block;
}

/* if nav has a fourth level... don't show 4th when 2nd level is hovered*/
 #navigation li:hover .sub-level .sub-level .sub-level{
	display:none;
}

/* if nav has a fourth level... show it when the 3rd level is hovered*/

 #navigation .sub-level li:hover .sub-level li:hover .sub-level{
	display:block;
}

/* if nav has a Fifth Level... don't show 5th level when 3rd is hovered*/
 #navigation li:hover .sub-level li:hover .sub-level .sub-level .sub-level {
	display:none;
}

/* if nav has a fifth level... show it when the 4th level is hovered */
 #navigation .sub-level li:hover .sub-level li:hover .sub-level li:hover .sub-level{
	display:block;
}

/* nav probably shouldn't go six levels but if so add last 2 selectors above; add grandparent li:hover and .sub-level to first and li:hover .sub-level to 2nd */