/* ================================================================ 


This copyright notice must be untouched at all times.





The original version of this stylesheet and the associated (x)html


is available at http://www.cssplay.co.uk/menus/flyout_4level.html


Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.


This stylesheet and the associated (x)html may be modified in any 


way to fit your requirements.


=================================================================== */


.menu {
	width:173px;
	font-size:12px;
	text-align:left;
	background:#fff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}
/* remove all the bullets, borders and padding from the default list styling */


.menu ul {


position:relative;


z-index:500;


padding:0;


margin:0;


list-style-type:none;


width:150px;

font-family:Arial,Helvetica,sans-serif;

font-size:10px;

}


/* style the list items */


.menu li {

background:#d4d8bd url(../images/img_menus.jpg) right center;

background-repeat:repeat-y;

border-left:1px solid #fff;

border-right:1px solid #fff;

text-indent:30px;


height:25px;


width:171px;


/* for IE7 */


float:left;


}


.menu li.sub {
background:#d4d8bd url(../images/img_menus_sub.gif)right center;
background-repeat:repeat-y;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
color:#000033;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
height:25px;
text-indent:30px;
} 





/* get rid of the table */


.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}





/* style the links */


.menu a, .menu a:visited {
	display:block;
	text-decoration:none;
	line-height:25px;
	width:185px;
	color:#069;
	font-size:11px;

}


/* hack for IE5.5 */


* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}


/* style the link hover */


* html .menu a:hover {
	color:#0FF;
	background:transparent;
	text-indent:32px;
	position:relative;
}

* html .menu a:hover {
	color:#099;
	background:transparent;
	text-indent:12px;
	position:relative;
}




.menu li:hover {position:relative;}





/* For accessibility of the top level menu when tabbing */


.menu a:active, .menu a:focus {color:#fff; background:transparent;text-indent:32px;}





/* retain the hover colors for each sublevel IE7 and Firefox etc */


.menu li:hover > a {
	color:#333;
	background:transparent;
	text-indent:30px;
}


 


/* hide the sub levels and give them a positon absolute so that they take up no room */


.menu li ul {


visibility:hidden;


position:absolute;


top:-30px;


/* set up the overlap (minus the overrun) */


left:143px;

#left:136px;

/* set up the overrun area */


padding:30px;


/* this is for IE to make it interpret the overrrun padding */


background:transparent url(../images/transparent.gif);


}





/* for browsers that understand this is all you need for the flyouts */


.menu li:hover > ul {visibility:visible;}





.menu li li{


	background: url(../images/img_2nivel.jpg) right center;
	background-repeat:repeat-y;
	color:#000033;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:10px;
	height:auto;
	/*padding-left:8px;*/
	text-indent:5px;

}





.menu li li:hover > a {
	color:#003;
	background:transparent;
	text-indent:5px;
}





/* for IE5.5 and IE6 you need to style each level hover */


/* keep the third level+ hidden when you hover on first level link */


.menu ul a:hover ul ul{


visibility:hidden;


}


/* keep the fourth level+ hidden when you hover on second level link */


.menu ul a:hover ul a:hover ul ul{


visibility:hidden;


}


/* keep the fifth level hidden when you hover on third level link */


.menu ul a:hover ul a:hover ul a:hover ul ul{


visibility:hidden;


}





/* make the second level visible when hover on first level link */


.menu ul a:hover ul {


visibility:visible;


}


/* make the third level visible when you hover over second level link */


.menu ul a:hover ul a:hover ul{ 


visibility:visible;


}


/* make the fourth level visible when you hover over third level link */


.menu ul a:hover ul a:hover ul a:hover ul { 


visibility:visible;


}


/* make the fifth level visible when you hover over fourth level link */


.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { 


visibility:visible;


}