/***************************************************************************************
	Cascading Menu stylesheet

	Author: Doug Oxford				
	Date:	2008.03.22				

	Description:
		Implements a single cascading menu with a maximum of 3 tiers via CSS.
		If you want additional cascading menues on the same page, then you
		must copy this .css and rename all of the "horiz-menu" strings to
		a new name for the new menu.

		Note: due to IE not including Padding and Borders in size calculations
			we need to make sure we account for the extra pixels when
			we place the pullouts.

		For IE6 the <li> tags must include the following:
			<li onmouseover="this.className='cmhover';" onmouseout="this.className='';">

	Sample:
			<div id="horiz-menu" class="cascadingmenu">
				<ul>
					<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1</a><ul>
						<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.1 &gt;</a><ul>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.1.1</a></li></ul></li>
						<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.2 &gt;</a><ul>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.2.1</a></li>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.2.2</a></li>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.2.3</a></li></ul></li>
						<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 1.3</a></li></ul></li>
					<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2 &gt;</a><ul>
						<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2.1 &gt;</a><ul>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2.2.1</a></li>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2.2.1</a></li>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2.2.2</a></li>
							<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2.2.4</a></li></ul></li>
						<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 2.2</a></li></ul></li>
					<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 3</a></li>
					<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 4</a></li>
					<li onmouseover="this.className='cmHover';" onmouseout="this.className='';"><a href="">Menu 5</a></li>
				</ul>
			</div>
 
 ***************************************************************************************/

/**********************************/
/* Div styles styles for the Menu */
/**********************************/

	/* Font for the Cascade Menu's top row. */
div#horiz-menu {
	font-family: Arial;
	font-size: 8pt;
	height: 20px;		/* Height of the Menu's top row */
	width: 100%;
	background-image: url(Images/Buttons/CRVBC_Button_Background.JPG);
	border-top: solid 1px White;
	border-bottom: solid 1px Gray;
}

	/* Margin and Padding for all sub-menus. */
div#horiz-menu ul {
	margin: 0;
	padding: 0;
}

	/* Main Menu item settings */
div#horiz-menu li {
	margin: 0;
	padding: 0;
	padding-right: 2px;
	float: left;
	list-style: none;
	white-space: nowrap;
}

	/* Main Menu item hyperlink settings */
div#horiz-menu a:link,
div#horiz-menu a:visited {
	display: block;
	float: left;
	padding: 0 12px;
	height: 20px;		/* Height of the Menu's top row */
	line-height: 20px;	/* Height of the Menu's top row */
	text-decoration: none;
}

	/* Alignment of the hyperlink tags in the menu */
div#horiz-menu a {
	display: block;
	float: left;
	height: 20px;		/* Height of the Menu's top row */
	line-height: 20px;	/* Height of the Menu's top row */
	padding: 0 15px;
	text-decoration: none;
	cursor: pointer;
	background: none;
}

	/* Hyperlink Text location with a sub-menu item. */
#horiz-menu li li a:link,
#horiz-menu li li a:visited{
	background: none;
	padding: 0;
	text-indent: 10px;	/* Indent the sub-menu item text */
}

	/* Hyperlink Font within a sub-menu item. */
#horiz-menu li li a:link,
#horiz-menu li li a:visited {
	border: 0;
	font-size: 8pt;
	font-weight: normal;
}
	
	/* The width of sub-menu items. */
#horiz-menu li li {
	background: none;
	padding: 0;
	width: 200px;
}

	/* Basic Sub-Menu settings. */
#horiz-menu ul ul a:link,
#horiz-menu ul ul a:visited {
	display: block;
	text-decoration: none;
	width: 200px;
	text-transform: none;
	background: none;
}

	/* Positioning of the top level menu items. */
#horiz-menu ul li {
	position: relative;
}
	/* Positioning of sub-menues with parent menu items.
		Note: left: -999em is used to move the sub-menu off
		the page until we hover over it. */
#horiz-menu li ul {
 	top: 20px;			/* Height of the menuitems. */
	position: absolute;
	z-index: 10;
	left: -999em;
	height: auto;
	width: 200px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0;
}

	/* Size of sub-menues. */
#horiz-menu ul ul a:link,
#horiz-menu ul ul a:visited {
	width: 197px;
}

/*
	Margin for pullouts:
		-20px = the defined height of a menuitem.
		200px = the defined width of a menuitem.
 */
#horiz-menu li ul ul {
	margin: -20px 0 0 200px;
}
/*********************************/
/* Color Formating styles for the Menu */
/*********************************/

	/* The Text and Background colors of the menuitems in a menu
		when the mouse is not over them. */
#horiz-menu.cascadingmenu a,
#horiz-menu.cascadingmenu li {
	color: #000000;
	background-image: url(Images/Buttons/CRVBC_Button_Background.JPG);
}

	/* The Text and Background colors of the menuitems in a sub-menu
		 when the mouse is not over them. */
#horiz-menu.cascadingmenu li li a,
#horiz-menu.cascadingmenu li li {
	color: #000000;
	background-image: url(Images/Buttons/CRVBC_Button_Background.JPG);
	border-top: 1px solid #C5C3C3;
	border-bottom: 1px solid #C5C3C3;
}
	/* The Text and Background colors of the hyperlinks in a menu
		 when the mouse is over them. */
#horiz-menu.cascadingmenu a:hover,
#horiz-menu.cascadingmenu li li:hover,
#horiz-menu.cascadingmenu li li.cmHover {
	color: #000000;
	background: #C5C3C3;
}

/*********************************/
/* Cascading styles for the Menu */
/*********************************/

#horiz-menu li:hover ul ul, 
#horiz-menu li:hover ul ul ul,
#horiz-menu li:hover ul ul ul ul,  
#horiz-menu li.cmHover ul ul, 
#horiz-menu li.cmHover ul ul ul, 
#horiz-menu li.cmHover ul ul ul ul 
{
	display: none;
/*	left: -999em;*/
}

#horiz-menu li:hover ul, 
#horiz-menu li li:hover ul, 
#horiz-menu li li li:hover ul, 
#horiz-menu li li li li:hover ul,
#horiz-menu li.cmHover ul, 
#horiz-menu li li.cmHover ul,
#horiz-menu li li li.cmHover ul,
#horiz-menu li li li li.cmHover ul
{
	left: 0;
	display: block;
}

#horiz-menu li:hover,
#horiz-menu li.cmHover {
	left: 0;
	display: block;
}

/*
#horiz-menu li li.active {

}
*/