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

	Author: Dan Curren				
	Date:	2008.09.22				

	Description:
		Implements a single cascading menu with a maximum or 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: 11pt;
	height: 30px;		/* Height of the Menu's top row */
	width: 100%;
      background: #ffffff;
	float: left;
	border-top: 0px solid #A1A1A1;
	border-bottom: 0px solid #A1A1A1;
	text-align: center;
}

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

	/* Main Menu item settings */
div#horiz-menu li a {
	width: 95px;
}

div#horiz-menu li {
	margin-left: 0;
	padding: 0;
	padding-right: 0px;
	list-style: none;
	white-space: nowrap;
	float: left;
	width: 95px;
	border-right: 0px solid #A1A1A1;
}

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

	/* Alignment of the hyperlink tags in the menu */
div#horiz-menu a {
	margin: 0;
	padding: 0px;
	text-decoration: none;
	cursor: pointer;
	background: none;
	font-weight: bold;
	float: left;
}

	/* 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: 9pt;
	font-weight: bold;
}

	/* Background image for subitems with subitems */
#horiz-menu ul li a.parentsubitem:link,
#horiz-menu li li a.parentsubitem:visited  {
	background: url("/Balance/modules/mod_SuckerfishMenu/Arrow.gif") 100% 50% no-repeat;
}

	/* The formatting for items*/
#horiz-menu li a.active:link,
#horiz-menu li a:link,
#horiz-menu li a:visted,
#horiz-menu li a.active:visited  {
	font-weight: bold;
}

	/* The width of sub-menu items. */
#horiz-menu li li {
	background: none;
	padding: 0;
	width: 114px;
}

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

	/* Positioning of the top level menu items. */
#horiz-menu ul li {
	position: relative;
	float: left;
	z-index: 100;
}
	/* 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 {
	height: auto;
	width: 200px;
 	top: 28px;			/* Height of the menuitems. */
	position: absolute;
	z-index: 10;
	left: -999em;
	font-weight: bold;
	border-width: 0;
	margin: 0;
	padding: 0;
}

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

#horiz-menu li ul li {
	margin: -1px;
}

/*********************************/
/* Color Formating styles for the Menu */
/*********************************/

	/* The formatting for items which are the currently active items*/
#horiz-menu.cascadingmenu li a.active:link,
#horiz-menu.cascadingmenu li a.active:visited  {
	color: #FFFF9F;
	background: #00607F;
}

	/* 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: #FFFFC8;
	background: #008080;
}

	/* 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: #FFFFC8;
	background: #008080;
	border-top: 1px solid #A1A1A1;
	border-bottom: 1px solid #A1A1A1;
	border-left: 1px solid #A1A1A1;
	border-right: 1px solid #A1A1A1;
}

	/* 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 a.active:hover,
#horiz-menu.cascadingmenu li li:hover,
#horiz-menu.cascadingmenu li li.cmHover {
	color: #ffffff;
	background: #00707F;
}

/*********************************/
/* 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;
}