/* CSS Document */

	
/* height fix for IE6 */
/* * html #category-wrap {
	height: 0; 
	}*/

#category-wrap {
	text-align: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .85em;
	}

#category {
	float: right;
	}

/********************************************* DO NOT DELETE! *********************************************/
/**********Use only when keeping the drop-down inline with text that is horizontally next to it ***********/

/* #category li {
	display: inline; 
	}

#category ul {
	display: inline;
	} */
	
/**********************************************************************************************************/

#nav li#first-item { /* simulates a text field */
	width: 15em; /* controls the width of the visible "text field" */
	border: 1px solid #ddd;
	background: white;
	text-align: left;
	/* margin-right: 2em; */
	/* float: none; */ /* keeps the drop-down horizontally inline with "Select a category" */
	}

#first-item a.select {
	color: #000; /* text color for the top-most list item, which is in the simulated text field */
	width: 14.1em; /* controls the extent of the hover color change for the first item */
	display: block; /* overrides DISPLAY:BLOCK to allow use of "A" tag for hover color change */
	background: url(../images/arrow.gif) 12.9em 0 no-repeat;
	}

#first-item a.select:hover {
	color: #fff; /* text hover color for the top-most list item */
	background: green url(../images/arrow_hover.gif) 12.9em 0 no-repeat;
	}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}

#nav a {
	display: block;
	width: 10em;
	text-decoration: none;
	color: white;
	padding: .5em;
}

#nav li { /* all list items */
	float: left; /* allows for hover color change to work in sub-menus */
	width: 11em; /* width needed or else Opera goes nuts */
	text-align: center;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #3C0; /* light green */
	width: 15em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

/* ***** These 2 IE fixes weren't needed since we text-aligned left FIRST-ITEM above; imagine that! ***** */
/* ***** They're zeroed out now, but they could be needed in the future if layout changes.          ***** */

* html #nav li ul { /* second-level left margin fix for IE6 */
	margin-left: 0em;
	}

*:first-child+html #nav li ul { /* second-level left margin fix for IE7 */
	margin-left: 0em;
	}

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

#nav li ul li { /* second-level lists */
	width: 15em;
}

#nav li ul li a { /* second-level lists */
	width: 14em;
}

#nav li ul li {
	text-align: left;
	line-height: 1em;
	}

#nav li ul ul { /* third-and-above-level lists */
	margin: -2em 0 0 15em;
}

*:first-child+html #nav li ul ul { /* third-level left margin fix for IE7 */
	margin: -2em 0 0 15em;
	}

#nav li ul ul#bu {
	margin-top: -2em; 
	}

* html #nav li ul ul#bu { /* third-level top margin fix for IE6 */
	margin-top: -2em;
	}

*:first-child+html #nav li ul ul#bu { /* third-level top margin fix for IE7 */
	margin-top: -2em;
	}

#nav li ul ul#sga {
	margin-top: -2em;
	}

#nav li ul ul li {
	text-align: left;
	}

#nav li:hover ul ul, #nav li.sfhover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: #34adfe; /* cyan blue */
}

/*	************************************************************************************************************
	Separate Styling Below for Scrollable States Selection
	************************************************************************************************************ */

ul {
	list-style: none; /* this removes the default bullets */
	margin: 0;
	padding: 0;
	}
	
#stateslist { /* attributes for the top States level */
	width: 14em; /* this width is trumped by the settings above for NAV ID selector */
	background: #005b9c; /* dark blue background specifically for the States selection */
	}

#nav #stateslist ul {
	width: 16.6em; /* do not set width smaller than 16.6em or else horizontal scrollbars will show up in States drop-down */
	}

#stateslist ul { /* styles for the second-level drop-down list when hovered over */
	width: 14em; /* this width is trumped by the default setting above for NAV ID selector; it is activated when the scrollable States selector funcions as a standalone; left in after the testing phase */
	height: 15em;
	background-color: #f5f5f5;
	overflow: auto; /* this allows the vertical scrollbar to show up */
	position: relative;
	left: -999em; /* this hides the drop-down list when States is not hovered over */
	}

#stateslist ul li { /* styles for the individual States */
	height: 1em; /* this line is for Opera; this also controls the "line spacing" between each State */
	padding: .5em 0;
	}
	
#stateslist ul li a {
	display: block; /* expands the linkable space to the block level and not just the text */
	padding: .5em; /* a little breathing room on the left and right of each State; this is trumped by the setting set for the NAV ID selector; kept in after testing phase */
	margin-top: -.5em; /* re-aligns the individual links vertically in the highlight box; without this, the text will look like it's bottom-aligned in IE7 */
	}
	
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
	left: auto; /* allows the drop-down to appear when hovered over States */
	}
	
#nav li:hover,
#nav li:hover,
#nav li.sfhover,
#nav li li.sfhover {
	position: static; /* prevents the drop-down from "sticking" in IE7 */
	background-color: green;
	}