﻿

#cra-nav-m1 ul li.cra-nav-m1-home{ background-image: none;}
#cra-nav-m1 ul li.cra-nav-m1-home a:hover { background-image: url("../img/bg-nav-m1.gif"); }

#cra-nav-m1 { position: relative; z-index: 1300; width: 955px;height: 32px; background-image: url("../img/bg-nav-m1.gif");}
/* hack to correct IE5.5 faulty box model */
* html #cra-nav-m1 {width:955px;}
/* remove all the bullets, borders and padding from the default list styling */
#cra-nav-m1 ul { border: solid 0px red; padding: 0; margin: 0; list-style-type: none; float: left; }
/* float the list to make it horizontal and a relative positon so that you can control the dropdown listmenu positon */
#cra-nav-m1 li { float: left; position: relative; z-index: 1300; }	/*set width here if all li is the same width*/
 
/*MAIN STYLING*/ 
	/* style the links for the top level */
	#cra-nav-m1 a, #cra-nav-m1 a:visited				/*JACK may need to define different language here*/
	{
		padding: 9px 15px 0px 25px;
		min-height: 23px;
		height: 23px;
		float: left;
		
		display: block;
		font-weight: bold;
		font-size: 13px;
		text-decoration: none;
		color: white;
	}
	/* a hack so that IE5.5 faulty box model is corrected */
	* html #cra-nav-m1 a, * html #cra-nav-m1 a:visited {}

	/* style the second level links */
	#cra-nav-m1 ul ul a, #cra-nav-m1 ul ul a:visited
	{
		padding: 4px 0px 2px 8px;
		width: 144px;
		min-height: 16px;
		height: auto !important;
		height: 16px;
		
		font-weight: normal;
		font-size: 12px;
	    
		border-left: solid 1px #f2ae80;
		border-right: solid 1px #f2ae80;
	}
	/* yet another hack for IE5.5 */
	* html #cra-nav-m1 ul ul a, * html #cra-nav-m1 ul ul a:visited {width: 144px;}
									
	/* style the third level background */
	#cra-nav-m1 ul ul ul a, #cra-nav-m1 ul ul ul a:visited
	{
		padding: 4px 0px 2px 8px;
		width: 144px;
		
		border-left: solid 1px #f2ae80;
		border-right: solid 1px #f2ae80;
	}


/* hide the sub levels and give them a positon absolute so that they take up no room */
#cra-nav-m1 ul ul			{ visibility: hidden; position: absolute; left: 0; top: 32px; }
#cra-nav-m1 ul ul.left	{ left: 0px; }
/* another hack for IE5.5 */
* html #cra-nav-m1 ul ul {top:32px;}

/* position the third level flyout listmenu */
#cra-nav-m1 ul ul ul		{ left: 153px; top: 0px; }
/* position the third level flyout listmenu for a left flyout */
#cra-nav-m1 ul ul ul.left	{ left: -153px; } /*need to set left to match with width here*/ /*base width 174*/


/* style the table so that it takes no ppart in the layout - required for IE to work */
#cra-nav-m1 table {position:absolute; top:0; left:0; border-collapse:collapse;}


/* HOVER STYLE */
/* style the top level hover */
#cra-nav-m1 a:hover		{ color: #fff200; text-decoration: underline; background-color:#eb7100; background-image: url("../img/bg-nav-m1-hover.gif"); }			/*must have background-color in order to work*/
#cra-nav-m1 :hover > a	{ color: #fff200; text-decoration: underline; background-color:#eb7100; background-image: url("../img/bg-nav-m1-hover.gif"); }
/* style the second level hover */
#cra-nav-m1 ul ul a:hover		{ color: #fff200; text-decoration: underline; background-color: #cc0200; background-image: url("../img/bg-nav-m1-l2-hover-long.png"); background-repeat: no-repeat; }
#cra-nav-m1 ul ul :hover > a	{ color: #fff200; text-decoration: underline; background-color: #cc0200; background-image: url("../img/bg-nav-m1-l2-hover-long.png"); background-repeat: no-repeat; }
/* style the third level hover */
#cra-nav-m1 ul ul ul a:hover	{ color: #fff200; text-decoration: underline; background-color: #cc0200; background-image: url("../img/bg-nav-m1-l2-hover-long.png"); background-repeat: no-repeat; }


/*IMAGE STYLE*/
/* style the background of item with sub menu 
#cra-nav-m1 ul ul a.drop, #cra-nav-m1 ul ul a.drop:visited		
{ background-repeat: no-repeat;	background-position: right center; background-image: url(../image/menu-marker.gif);}
#cra-nav-m1 ul ul a.drop:hover, #cra-nav-m1 ul ul :hover > a.drop	
{ background-repeat: no-repeat;	background-position: right center; background-image: url(../image/menu-markerSub.gif);}
*/

/* style the background of the menu 
#cra-nav-m1 ul ul			{ background-image: url(../image/menu-background.png); background-position: bottom; background-repeat: no-repeat; }
#cra-nav-m1 ul ul ul		{ background-image: url(../image/menu-background.png); background-position: bottom; background-repeat: no-repeat; }
*/

/* style the background of the menu item */
#cra-nav-m1 ul li		{ background-image: url("../img/bg-nav-m1-div.gif"); background-repeat: no-repeat; }
#cra-nav-m1 ul ul li	{ background-color: #ed7800; background-image: url("../img/bg-nav-m1-l2-long.png"); background-repeat: no-repeat; }
#cra-nav-m1 ul ul ul li	{ background-color: #ed7800; background-image: url("../img/bg-nav-m1-l2-long.png"); background-repeat: no-repeat; }


/*FIX CONTROL*/
/* make the second level visible when hover on first level list OR link */
#cra-nav-m1 ul li:hover ul, #cra-nav-m1 ul a:hover ul { visibility: visible; }
/* keep the third level hidden when you hover on first level list OR link */
#cra-nav-m1 ul :hover ul ul { visibility: hidden; }
/* make the third level visible when you hover over second level list OR link */
#cra-nav-m1 ul :hover ul :hover ul { visibility: visible; z-index: 1; }
