/*
* When the user hovers the mouse over a primary navigation menu entry, display 
* the nested UL element (flyout menu) if it exists.
*/
li.topNavigationMenu_LI1:hover>ul,
li.topNavigationMenu_LI1Selected:hover>ul,
li.topNavigationMenu_LI1Highlighted:hover>ul 
{ 
	display: block;
}


/*
* UL elements that define fly-out menu entries.  When present, sub-menus are defined
* as an unordered list (ul) within the LI element that defines the top level
* menu entry.
*/
ul.topNavigationMenu_UL2,
ul.topNavigationMenu_UL3,
ul.topNavigationMenu_UL4,
ul.topNavigationMenu_UL5,
ul.topNavigationMenu_UL6
{
	/* 
	* We need a background color in case there is any spacing or padding between 
	* the LI elements.  Otherwise the page elements behind the flyout will 
	* bleed through.
	*/
	background: #DDD;   
	/* 
	* Make a box around the entire flyout.
	*/	  
	border: 1px solid #999;
	/* 
	* Set display to hide the fly-outs by default.  Then the hover settings at the 
    * top of this file will set display to "block" to show it when the user puts
	* the mouse over a primary menu entry.
	*/
	display: none;   
	padding: 0;
	position: absolute;
	left: 0;    /* As the default, we want fly-out menus to be left aligned with the parent menu entry */
	list-style: none;
	margin-bottom: 0;
	margin-left: -1px;
	margin-right: 0;
	margin-top: 0;
	overflow: hidden;
	text-align: left;
	top: 100%; /* IE */
	width: 100%;
}

/*
* General settings for LI elements that make each entry of the flyout menu.  Each
* entry contains an A tag whose settings are below.
*/
ul.topNavigationMenu_UL2 li,
ul.topNavigationMenu_UL3 li,
ul.topNavigationMenu_UL4 li,
ul.topNavigationMenu_UL5 li,
ul.topNavigationMenu_UL6 li
{
	margin: 0;
	padding: 0;
	text-align: left;
	width: 100%; /* By default be as wide as the parent menu */
}
	
/*
* Basic settings for all A elements that make up the flyout menus.  
* These are general settings to apply to all A elements at the 2nd-nth
* levels.
*/
ul.topNavigationMenu_UL2 a,
ul.topNavigationMenu_UL2 a:link, 
ul.topNavigationMenu_UL2 a:visited,
ul.topNavigationMenu_UL2 a:hover
{
	background: #DDD; 
	border-top: none;
	border-bottom: 1px solid #fff;
	border-left: 0;
	border-right: 0;
	color: #000;
	display: block;
	font-size: .85em; 
	font-weight: normal;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	padding-bottom: .45em;
	padding-top: .45em;
	margin: 0;
	left: 0;
} 

/* 
* Highlight unselected flyout menu entries as the mouse rolls over them
*/
li.topNavigationMenu_LI2 a:hover,
li.topNavigationMenu_LI2 a:focus,
li.topNavigationMenu_LI3 a:hover,
li.topNavigationMenu_LI3 a:focus,
li.topNavigationMenu_LI4 a:hover,
li.topNavigationMenu_LI4 a:focus,
li.topNavigationMenu_LI5 a:hover,
li.topNavigationMenu_LI5 a:focus,
li.topNavigationMenu_LI6 a:hover,
li.topNavigationMenu_LI6 a:focus
{ 
	color: #000;
	border-color: #FFF;
	border-bottom: 1px solid #BBB;
	background-color: #FFF;
	text-decoration: underline;
	left: 0;
}


/* 
* A element settings for the flyout menu entry for the current page.
* The A element will be present but will not have a URL.  No point
* in the user being able to click it, since they are already on
* the page for this entry.
*/
a.topNavigationMenu_A2Selected,
a.topNavigationMenu_A2Selected:link, 
a.topNavigationMenu_A2Selected:visited,
a.topNavigationMenu_A2Selected:focus,
a.topNavigationMenu_A2Selected:hover, 
a.topNavigationMenu_A3Selected,
a.topNavigationMenu_A3Selected:link, 
a.topNavigationMenu_A3Selected:visited,
a.topNavigationMenu_A3Selected:focus,
a.topNavigationMenu_A3Selected:hover, 
a.topNavigationMenu_A4Selected,
a.topNavigationMenu_A4Selected:link, 
a.topNavigationMenu_A4Selected:visited,
a.topNavigationMenu_A4Selected:focus,
a.topNavigationMenu_A4Selected:hover, 
a.topNavigationMenu_A5Selected,
a.topNavigationMenu_A5Selected:link, 
a.topNavigationMenu_A5Selected:visited,
a.topNavigationMenu_A5Selected:focus,
a.topNavigationMenu_A5Selected:hover, 
a.topNavigationMenu_A6Selected,
a.topNavigationMenu_A6Selected:link, 
a.topNavigationMenu_A6Selected:visited,
a.topNavigationMenu_A6Selected:focus,
a.topNavigationMenu_A6Selected:hover
{
/*
	background-color: #c8db00 !important;
*/
	border-bottom: 1px solid #999;
	cursor: default !important;
	font-weight: bold  !important;
	text-decoration: none !important;
} 

/*
* The framework will automatically generate class names for each 
* hierarchical level of menus.  1 is the first and primary level, 2 is the
* first level of sub menus, etc.  You must specify a style for as many levels
* of sub-menus based on how deep you have nested entries in your web.sitemap
* file.
* 
* Notes about width and padding:
* - To make the A element the same width as the containing LI
*   element we must make the following 3 attributes add up to
*   100%:  width, padding-left and padding-right.
* - If you make the width 100%, and also give values to 
*   padding-right and padding-left, then the A element will 
*   extend beyond the width the of the LI element making
*   it difficult to align borders and such.
*/
a.topNavigationMenu_A2,
a.topNavigationMenu_A2Selected
{
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
}

a.topNavigationMenu_A3,
a.topNavigationMenu_A3Selected
{
	width: 91%;
	padding-left: 7%;
	padding-right: 2%;
}

a.topNavigationMenu_A4,
a.topNavigationMenu_A4Selected
{
	width: 86%;
	padding-left: 12%;
	padding-right: 2%;
}

a.topNavigationMenu_A5,
a.topNavigationMenu_A5Selected
{
	width: 81%;
	padding-left: 17%;
	padding-right: 2%;
}

a.topNavigationMenu_A6,
a.topNavigationMenu_A6Selected
{
	width: 76%;
	padding-left: 22%;
	padding-right: 2%;
}