@charset "utf-8";
/* This css controls formatting of menu bar beneath the header graphic The
menu bar consists of a top-level menu with items like Home, Research, Museum, etc. and submenus related to the top-level menu items. Some of the
top-level menu items like Home do not have a related submenu. This css works
with superfish javascript and related scripts, located at javascript. More
information is available on superfish at http://users.tpg.com.au/j_birch/plugins/superfish/ Superfish requires the jquery library*/
/* this code removed b*/



/* width and height of the header graphic, background color if any */
#header {

width:800px;
height:72px;
background-color:#01254E;

}

/*******************************************************************

Margin & Padding: Setting margin and padding to 0 ensure that the menu bar is flush with the header graphic. Setting these to a positive value will create white space between the menu bar and the header graphic

Line Height: This affects the height of the menu bar. To make it thicker
increase the line height value. Increasing the thickness too much might push content below to the right, at least in Safari. Max value might be 65em 

Font-Family: Font face for top-level menu items

********************************************************************/

ul.sf-menu {
	margin:0;
	padding:0;
	line-height:0.20em;/*1.0;*/
    font-weight:700; /* 300 */;
	list-style:none;
    font-family: "Arial","Helvetica","sans";
     
    /*"Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;*/
	
   
}

	
/******************************************************************* 

Width: Setting the width here controls the width of the top-level menu items 
If the width of each menu item is reset either higher or lower than 113px the menu bar will be either wider or not as wide as the header graphic. (This
is assuming the header graphic is set to 904 pixels wide. See #header above. 
If additional top-level menu items are added or existing ones are removed the width setting will need to be adjusted

Background: Sets background color of the top level menu bar

Height: Set the height of the menu bar

*******************************************************************/    

 .sf-menu li {
    
    width:100px;/*was set to 113. There are 8 menu items. The graphic was reduced from 904 to 800 pixels wide, a 104 pixel reduction. 104/8=13. So I subtracted 13 pixels from the width of each menu item*/
    background:		#dfd9bb; /*#f3eccc;*/
    height:19px;
	

   }   
    

       
/******************************************************************

Position: Setting position to absolute ensures that the dropdown
menu will overlay content below it. If position is commented out
or set to relative, it will push the content below it either down
or over. In short, if position is not set to absolute, the dropdown
will not work properly.

Opacity: Setting opacity to 1.0 ensures that when the dropdown menu
overlays content below it, the content below it is not visible. As the
opacity setting is decreased the dropdown menu becomes more transparent, making it more difficult to see and revealing the content below it. Reducing the opacity setting is not recommended.

*******************************************************************/
    
	.sf-menu ul{
	
    position:absolute;
	opacity:1.0;
	
	
    }

/* create separate font weight for drop-down menu items */

	.sf-menu ul li {
		 font-weight:300;
	}
	

    .sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
    }

/******************************************************************

Position: Setting position to relative ensures that the menu items
in the menu bar line up next to one another. If position is set to
absolute, only one menu item will display.


******************************************************************/    

    .sf-menu li {
	float:			left;
	position:		relative;
    
	}


/******************************************************************

Display: Setting display to block ensures that the menu bar will maintain its height. If display is set to none, the menu bar will not show. If 
display is set to inline, the menu bar height will shrink significantly,
though the menu item text will not. Best to keep display property set to
block.

Padding: Affects the position of the individual top-level menu items and text. If padding is set to 0px the menu item text will intersect with the header graphic. If it is set to 40px it will appear below the menu bar. I set it to 10px so it looks roughly centered, vertically, between the top and 
bottom edges of the menu bar.

*******************************************************************/          
   
 
 .sf-menu a {
	display:		block;
    padding: 8px;
	text-decoration:none;
 	color:#000000;
   }

  /*added Nov. 4 to style top level links on rollover*/	
  .sf-menu li a:hover{
	color:#1133aa;
	}


/******************************************************************
    
            SOME OF THE SUBMENU (dropdown menu) SETTINGS ON DROPDOWN LINKS 

Background-color: Controls the background color behind submenu items
when you roll over them. Currently commented out. If uncommented (remove the forward slashes and asterisks) the background 
color behind submenu items will change to white when moused over. This is just for purposes of example. 
Please change the color setting to another value if white is not appropriate. 
 
Opacity: If you want the submenu text and submenu background to be lightened 
when the user mouses over it, change the setting to a value less than 1.0. This will not create 
problems with transparency. The dropdown menu itself will still cover content below it. 
This will just affect the submenu item being moused over.

Text-decoration: Controls what will happen to link text in the submenu when
moused over. Currently set to underline. When user mouses over a submenu item, the text 
will be underlined. Change it to none if you don't want underline to appear. 

******************************************************************/  
   
.sf-menu ul li a:hover,.sf-menu ul li a:visited:hover {

 /*background-color:#FFFFFF;*/
    
 opacity:1.0;
 text-decoration:none;
 width:155px; /*was 155... 156px. set it to 155 so that the overlay would not cover the right border 90px;*/
 height:2px;
 background-color:#F7F4E9;
}


 

/************************************************************

                SOME MORE SUBMENU (dropdown menu) SETTINGS

Display: this hides the submenu until it is rolled over. If display
is set to block or inline when page loads you will see all the submenus,
very briefly. Not good. Keep display set to none.

Position: Positions submenu items relative to each other. If position
is set to absolute all the submenu items are positioned in the same
place, resulting in only one showing. Recommended: the value of
position be kept at relative.

Left: Sets the position of dropdown menu's left edge. 0px puts the
left edge about halfway across the menu item it is related to. Thus, I
have it set to -40px. 

Background color: Background color of the entire dropdown menu itself. Individual items 
in the submenu can have a different color. Keeping them
the same color creates unity of feel. 

Width: The width of the dropdown menu. It should be wide enough to 
accomodate the text of all the dropdown items. 

Top: The top position from which the submenu (dropdown) will unfurl. Note that position is set to relative. This means that the submenu (dropdown) will unfurl from just below its parent menu item. If top is set to 100px
the submenu will appear way down the page, far from the menu bar. Not a good idea. Recommend keeping top set to 0. Note: if the background color of the submenu is the same color as the menu, it creates a nice seamless appearance. If the submenu and menu do not share background colors, you
might have to adjust the value of top so that the submenu drops from the very edge of the menu. (This appears to be a tricky thing to do and have
work across all browsers). For reliability similarly colored menu and submenu might be a good way to go. 

Padding: Can be used to play with distance between items in the submenu

Border: Creates borders for each item container in the submenu (essentially 
each rectangle containing a submenu item can have a border. Remove or comment out borders if you don't want them.


**************************************************************/


.sf-menu li ul li {
    display:none;
    position:relative;
    height:20px;
	left:-40px;
    background-color:#efead5; /*#e3dcbe;*/
    width:205px;/*was 170 then 175*/
    font-family: "arial","Helvetica","sans";
    /*"Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;*/
    /*arial,helvetica, sans;*/
    font-size:0.95em;
    color:#800000;
   top:0;
   padding:1px;
   border-color:#C6BC86;    
   border-width:1px 1px 1px 1px;
   border-style:solid;	
  
	/*these were the original border settings. in tests in the safari browser safari 4.05 did not render borders consistent with these css directives.*/  
   /*border-left: 1px solid #C6BC86;  	
   border-right: 1px solid #C6BC86;   
   border-bottom: 1px solid #C6BC86;*/  

}



/************************************************************

            POSITION OF SUBMENU ITEMS RELATIVE
            TO DROPDOWN

Position: Set to relative so that position of each item description
is relative to its parent container

Left: Set to 0px so the text for each item appears flush left with
the edge of the dropdown. 

Background color: Sets the background color of each rectangle containing an item in the dropdown.

filter, moz, and khtml: sets the opacity of the background of each item to 1, so there is no transparency. Note: if you reduce opacity and there is transparency, content beneath the dropdown menu will still not be visible because opacity for the dropdown itself is set 1.0. 


************************************************************/


.sf-menu li ul li a {
    position:relative;
    left:0px;
    background-color:#efead5/; /*#e3dcbe;*/
   filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	/*added by JB August 21, 2013 to accommodate change from White House Decision Center to The White House Decision Center*/
	/*created Nov. 4 to try and fix problem with wrapping*/
	/*width:170px;*/
    
}


/*********************************************************

            Submenu behavior when user mouses over
            top-level item

Top: On hover sets the top property of the submenu to 1.7em. Increasing
the value of top will move the submenu down and away from the menu bar. 
Decreasing the setting will move the submenu up and on top of the menu bar.

Z-index: Controls where the submenu is positioned in the stacking order.
If z-index is set to -999 the submenu will appear behind all other content
on the page, assuming that all other content does not have its z-index set via css. 

**********************************************************/ 

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {

    top:1.6em;
    z-index:99;
    
}


/**************************************************************

            Style the submenu link text

Text-decoration: If you want link text in the submenus underlined
set text-decoration to underline.


**************************************************************/

.sf-menu ul li a,.sf-menu ul li a:visited {
text-decoration:none;
color:#000;
margin:0;
/*padding:5px;*/
}


.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
	
	
}


/*****************************************************************

    Nifty settings for controlling top level menu items
   
Background-color: controls the color of the top-level menu item when
it's moused over. This can be set to the same color as the submenu to
create a nifty look and feel.     

Outline: Don't know what it does. Native setting. Left it alone.

Text-decoration: If you want the top level menu items underlined
when you mouse over them.


******************************************************************/

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background-color:#efead5; /*#e3dcbe;*/
    text-decoration:none;
	outline:		0;

}

.sf-menu ul li a:hover,visited {

    text-decoration:none;

}

.sf-menu li ul li a:hover {
	text-decoration:none;
	color:#000000;
	font-size:11px;
	left:-1;
	font-weight:400;
	width:180px;/*was 160 JB changed to 185 on August 21, 2013 to accommodate The in White House Decision Center this setting helps ensure that linked text in the dropdowns will not wrap on hover*/ 
}


/*ADDITIONAL FEATURES, WHICH I CHOSE NOT TO IMPLEMENT, BELOW*/

/*************************************************************

            IF YOU WANT MULTIPLE LEVELS OF SUBMENUS

Suckerfish can be set up with multiple levels of submenus.
Code like what follows would accomplish that:

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top: -999em; 
}


ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:10em;
    top:0; 
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	 top:			-999em; 
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em;  match ul width /
	top:			0;
} 

*************************************************************/




/**************************************************************

    
                    ARROWS AND DROP SHADOWS
   
        Suckerfish has built in support for downward facing
        arrows on a menu (an indicator for which items have submenus      
        as well as dropshadows on the submenus). I decided not to
        activate these features, as simple is preferable to me.

***************************************************************/


/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
/*a > .sf-sub-indicator {  /* give all except IE6 the correct values */
/*	top:			.8em;*/
/*	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
/*}*/

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	/*-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;*/
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}