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



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/final_drop.html



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



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



way to fit your requirements.



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







.menu {



height:170px;



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



font-size: 12px;



font-weight: bold



margin:0px 0 0px 0px; /* this page only */



}







/* 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:161px;



}



/* style the list items */



.menu li {



background: #009090;



height:26px;



/* for IE7 */



float:left;



}



.menu li.sub {background: #009090 url(sub.gif) no-repeat right center;}







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



height:25px;



line-height:25px;



width:179px;



color:#fff;



text-indent:5px;



border:1px solid #fff;



border-width:0 0px 1px 0px;



}



/* style the sub level 1 background */

.menu ul :hover a.drop {background:#447b7b;}

/* style the sub level 2 background */

.menu ul ul :hover a.drop1 {background:#447b7b;}



/* hack for IE5.5 */



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



/* style the link hover 

* html .menu a:hover {color:#000; background: #009090; position:relative;}

.menu li:hover {position:relative;} */

/* For accessibility of the top level menu when tabbing

.menu a:active, .menu a:focus {color:#000; background: #009090;}*/







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

.menu :hover > a {color:#fff; background: #009090;}  */



/* style the level hovers */

/* first */



* html .menu a:hover {color:#ff0;background:#447b7b center center; position:relative; z-index:100;}

.menu li:hover {position:relative;}

.menu :hover > a {color:#ff0;background:#447b7b center center;}

/* second */

* html .menu ul ul a:hover{color:#ff0;background:#7aa; position:relative; z-index:110;}

.menu ul ul li:hover {position:relative;}

.menu ul ul :hover > a {color:#ff0;background:#7aa;}

/* third */

* html .menu ul ul ul a:hover {background:#7aa; position:relative; z-index:120;}

.menu ul ul ul :hover > a {background:#7aa;}

/* fourth */

.menu ul ul ul ul a:hover {background:#7aa; position:relative; z-index:130;}



/* 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:05px;



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



left:170px;



/* set up the overrun area */



padding:0px;



border:1px solid #BEB797; border-width:1 1px 1px 1px;

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



background:transparent url(transparent.gif);



}







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



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



/* 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 :hover ul ul{visibility:hidden;}



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

.menu ul :hover ul :hover ul ul{visibility:hidden;}



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

.menu ul :hover ul :hover ul :hover ul ul{visibility:hidden;}



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

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



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

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



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

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



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

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