@charset "UTF-8";


div#mainMenus {
	margin: 0px;
	padding: 7px 0px 0px 0px;
	clear: both;
	width: 100%;
}


/* Menu placement and width. Float to get four columns.*/

div.mainMenu {
	width: 200px;
	float: left;
	clear: none;
	padding: 0px;
	margin: 0px 5px 0px 0px;
	background: #dddddd;
	color: #000000;
	height: 200px;
}


/* Default styling for all menu lists */

div.mainMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
}


/* Override default h3 (and a) formatting for menu headings */

div.mainMenu h3 {
	background-color: #003366;
	color: #ffffff;
	display: block;
	font-size: 12px;
	line-height: 1.7em;
	font-weight: normal;
	margin: 0px;
}

div.mainMenu h3 a {
	background-color: #003366;
	color: #ffffff;
}

div.mainMenu h3 a:hover {
	text-decoration: none;
	border: none;
	background-color: #003366;
}


/* About menu is larger to include room for left side
   border.  It's one pixel smaller to get better spacing
   on the right side of the Find menu since the About menu
   naturally looks a bit bigger anyway. */

div#About {
	width: 200px;   /* 230 + 25 - 1 */
}


/* Set a height for the menus */

div.menuContents {
	height: 15em;
}


/* White border to the left of the About menu.  Doing it
   this way rather than using a negative margin on the blue
   block gets around some annoying margin problems in IE */

div#About div.menuContents {
	border-left: 0px solid #ffffff;
}


/* Remove the margin from the right side of the Find menu
   so it's less likely to wrap */

div#Find {
	margin: 0px;
	width: 200px;
}


div.light {
	background: #dde8f2;
}

div.light div.menuContents a {
	border-right: 5px solid #dde8f2;
}


div.dark {
	background: #c1ddf5;
}
div.darkest {
	background: #7eb6e6;
}

div.dark div.menuContents a {
	border-right: 5px solid #c1ddf5;
}


/* Background and right border highlighting when mousing over a link. */

div.light div.menuContents a:hover{
	border-right: 5px solid #7eb6e6;
	background: #7eb6e6;
}
div.dark div.menuContents a:hover {
	border-right: 5px solid #7eb6e6;
	background: #7eb6e6;
}
div.darkest div.menuContents a:hover {
	border-right: 5px solid #dde8f2;
	background: #dde8f2;
}


/* Menu links.  Must specify block formatting so the
   whole menu line is active */

div.mainMenu a {
    padding: 1px 0px 1px 5px;
    text-decoration: none;
    color: #000000;
    line-height: 1.4em;
    display: block;
}


/* Set the syling and width of the flyout menus.  Absolute
   positioning is used to take them out of the flow to sit
   beside the menu trigger. */

div.menuContents ul li ul {
	width: 220px;
	background-color: #dde8f2;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	left: 12em;
	font-size: 10px;
}

div.dark div.menuContents ul li ul li a,
div.light div.menuContents ul li ul li a {
    border-right: 5px solid #eeeeee;
}


/* Control the horizontal location of the flyout menus */

li#collections ul {
    left: 12em;
}

li#aboutLearnMore ul {
    left: 14em;
}

li#myLibraryMore ul {
    left: 5em;
}

li#helpMore ul {
    left: 5em;
}


/* Flyout menu controls.  These classes are turned on and off with 
   jQuery's .hover command.  The position must be set to relative
   and assigned to the <li> containing the flyout <ul>.  If relative
   is set on the menu items in general (not assigned at the time the 
   flyout is triggered) then they will not be z-index aware and may 
   appear on top of the flyout menu. */

li.home_over {
    z-index: 2; 
    position: relative;
}

li.home_out {}

li.home_over ul {
    display: block;
}

li.home_out ul {
    display: none;
}


/* The following is known as a Holly Hack and is a fix
   for list formatting problems in IE6.  Without this, the 
   menus open up space under the menu trigger when a flyout
   is activated.  Make sure the class applies only to the
   flyout menus or it will cause problems with other lists
   on the page */

/* Fix IE. Hide from IE Mac \*/
* html div.menuContents ul li {
    float: left;
}
* html div.menuContents ul li a {
    height: 1%;
}