﻿/*Level 1 home*/
.hsc_m1_list ul.home li{background-image: none;}

.hsc_m1_list{position: relative; z-index: 1300; width: 650px; height: 32px;}
/* hack to correct IE5.5 faulty box model */
* html .hsc_m1_list {width: 650px;}
/* remove all the bullets, borders and padding from the default list styling */
.hsc_m1_list ul {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 */
.hsc_m1_list 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 */
	.hsc_m1_list a, .hsc_m1_list a:visited /* may need to define different language here */
	{
		margin: 0px 0px 0px 1px;
		padding: 0px 5px 0px 5px;
		min-height: 32px;
		height: 32px;
		float: left;

		display: block;
		font-weight: bold;
		font-size: 13px;
		text-decoration: none;
		color: #000000; /*#013919;*/
	}
	/* a hack so that IE5.5 faulty box model is corrected */
	* html .hsc_m1_list a, * html .hsc_m1_list a:visited {}

	/* style the second level links */
	.hsc_m1_list ul ul{border-bottom: solid 1px #e0e0e0;}
	.hsc_m1_list ul ul a, .hsc_m1_list ul ul a:visited
	{
		padding: 4px 0px 2px 8px;
		width: 158px;
		min-height: 18px;
		height: auto !important;
		height: 18px;
		
		font-weight: bold;
		font-size: 13px;
	    
		border-top: solid 0px #e0e0e0;
		border-left: solid 1px #e0e0e0;
		border-right: solid 1px #e0e0e0;
		border-bottom: solid 0px #e0e0e0;
	}
	/* yet another hack for IE5.5 */
	* html .hsc_m1_list ul ul a, * html .hsc_m1_list ul ul a:visited {width: 158px;}
									
	/* style the third level background */
	.hsc_m1_list ul ul ul a, .hsc_m1_list ul ul ul a:visited
	{
		padding: 4px 0px 2px 8px;
		width: 158px;
		
		border-top: solid 0px #e0e0e0;
		border-left: solid 1px #e0e0e0;
		border-right: solid 1px #e0e0e0;
		border-bottom: solid 0px #e0e0e0;
	}

	/* style the 4th level background */
	.hsc_m1_list ul ul ul ul a, .hsc_m1_list ul ul ul ul a:visited
	{
		padding: 4px 0px 2px 8px;
		width: 158px;
		
		border-top: solid 0px #e0e0e0;
		border-left: solid 1px #e0e0e0;
		border-right: solid 1px #e0e0e0;
		border-bottom: solid 0px #e0e0e0;
	}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.hsc_m1_list ul ul {visibility: hidden; position: absolute; left: 0; top: 32px; }
.hsc_m1_list ul ul.lft{left: 0px; }
/* another hack for IE5.5 */
* html .hsc_m1_list ul ul {top:32px;}

/* position the third level flyout listmenu */
.hsc_m1_list ul ul ul		{ left: 167px; top: 0px; }
/* position the third level flyout listmenu for a left flyout */
.hsc_m1_list ul ul ul.lft	{ left: -167px; } /*need to set left to match with width here*/ /*base width 174*/

/* position the 4th level flyout listmenu */
.hsc_m1_list ul ul ul ul		{ left: 167px; top: 0px; }
/* position the 4th level flyout listmenu for a left flyout */
.hsc_m1_list ul ul ul ul.lft	{ left: -167px; } /*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 */
.hsc_m1_list table {position:absolute; top:0; left:0; border-collapse:collapse;}


/* SELECTED STYLE */
.hsc_m1_list .sel .lft {color: white; background-image: url('../image/bg_m1_l1_lft_sel.gif'); background-repeat: no-repeat;}
.hsc_m1_list .sel .ctr {color: white; background-image: url('../image/bg_m1_l1_ctr_sel.gif'); background-repeat: repeat-x; text-decoration: none;}
.hsc_m1_list .sel .rgt {color: white; background-image: url('../image/bg_m1_l1_rgt_sel.gif'); background-repeat: no-repeat;}

/* HOVER STYLE */
/* style the top level hover - highlight customization */
.hsc_m1_list .lft {float: left; border: solid 0px red; height: 32px; width: 7px; cursor: pointer;}
.hsc_m1_list .ctr {float: left; border: solid 0px red; height: 24px; padding: 8px 0px 0px 0px; cursor: pointer;}
.hsc_m1_list .rgt {float: left; border: solid 0px red; height: 32px; width: 7px; cursor: pointer;}
.hsc_m1_list a:hover .lft { background-image: url('../image/bg_m1_l1_lft_sel.gif'); background-repeat: no-repeat;}
.hsc_m1_list a:hover .ctr { background-image: url('../image/bg_m1_l1_ctr_sel.gif'); background-repeat: repeat-x; text-decoration: none;}
.hsc_m1_list a:hover .rgt { background-image: url('../image/bg_m1_l1_rgt_sel.gif'); background-repeat: no-repeat;}
.hsc_m1_list :hover > a .lft { background-image: url('../image/bg_m1_l1_lft_sel.gif'); background-repeat: no-repeat;}
.hsc_m1_list :hover > a .ctr { background-image: url('../image/bg_m1_l1_ctr_sel.gif'); background-repeat: repeat-x; text-decoration: none;}
.hsc_m1_list :hover > a .rgt { background-image: url('../image/bg_m1_l1_rgt_sel.gif'); background-repeat: no-repeat;}

/* style the top level hover */
/*must have background-color in order to work*/
.hsc_m1_list a:hover { color: #484848; text-decoration: none; background-color: white; }
.hsc_m1_list :hover > a { color: #484848; text-decoration: none; background-color: white;}
/* style the second level hover */
.hsc_m1_list ul ul a:hover{ color: #484848; text-decoration: none; background-color: #d0d0d1; background-image: url('../image/bg_m1_l2_sel.gif'); background-repeat: no-repeat; }
.hsc_m1_list ul ul :hover > a{ color: #484848; text-decoration: none; background-color: #d0d0d1; background-image: url('../image/bg_m1_l2_sel.gif'); background-repeat: no-repeat; }
/* style the third level hover */
.hsc_m1_list ul ul ul a:hover{ color: #484848; text-decoration: none; background-color: #d0d0d1; background-image: url('../image/bg_m1_l2_sel.gif'); background-repeat: no-repeat; }
/* style the 4th level hover */
.hsc_m1_list ul ul ul ul a:hover{ color: #484848; text-decoration: none; background-color: #d0d0d1; background-image: url('../image/bg_m1_l2_sel.gif'); background-repeat: no-repeat; }


/*IMAGE STYLE*/
/* style the background of item with sub menu 
.hsc_m1_list ul ul a.drop, .hsc_m1_list ul ul a.drop:visited		
{ background-repeat: no-repeat;	background-position: right center; background-image: url(../image/m1_marker.gif);}
.hsc_m1_list ul ul a.drop:hover, .hsc_m1_list ul ul :hover > a.drop	
{ background-repeat: no-repeat;	background-position: right center; background-image: url(../image/m1_marker_sub.gif);}
*/

/* style the background of the menu 
.hsc_m1_list ul ul			{ background-image: url(../image/bg_m1_ln.png); background-position: bottom; background-repeat: no-repeat; }
.hsc_m1_list ul ul ul		{ background-image: url(../image/bg_m1_ln.png); background-position: bottom; background-repeat: no-repeat; }
*/

/* style the background of the menu item */
.hsc_m1_list ul li{ background-image: url('../image/bg_m1_l1_div.gif'); background-repeat: no-repeat; background-position: left 4px;}
.hsc_m1_list ul ul li{ background-color: white; background-image: url('../image/bg_m1_l2.gif'); background-repeat: no-repeat; background-position: left top;}
.hsc_m1_list ul ul ul li{ background-color: white; background-image: url('../image/bg_m1_l2.gif'); background-repeat: no-repeat; background-position: left top;}
.hsc_m1_list ul ul ul ul li{ background-color: white; background-image: url('../image/bg_m1_l2.gif'); background-repeat: no-repeat; background-position: left top;}


/*FIX CONTROL*/
/* make the second level visible when hover on first level list OR link */
.hsc_m1_list ul li:hover ul, .hsc_m1_list ul a:hover ul { visibility: visible; }
/* keep the third level hidden when you hover on first level list OR link */
.hsc_m1_list ul :hover ul ul { visibility: hidden; }
/* make the third level visible when you hover over second level list OR link */
.hsc_m1_list ul :hover ul :hover ul { visibility: visible;}
/* keep the 4th level hidden when you hover on first level list OR link */
.hsc_m1_list ul :hover ul :hover ul ul { visibility: hidden;}
/* make the 4th level visible when you hover over 3rd level list OR link */
.hsc_m1_list ul :hover ul :hover ul :hover ul{ visibility: visible;}

