#navi { height:26px; width:100%; background:url('images/navibg2.gif') repeat-x; position:relative; z-index:100; }



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

#navi ul {padding:0;margin:0;list-style-type:none;position:relative;}

#navi ul ul {width:100px;} /*depends on the parent instead!!!*/

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

#navi li {float:left;width:100px;position:relative;}

/* style the links for the top level */

#navi a, #navi a:visited {display:block;font-size:12px;text-decoration:none; text-align:center; color:#fff; width:90px; height:26px; padding-left:10px; line-height:26px;}



/* style the second level background */

#navi ul ul a.drop, #navi ul ul a.drop:visited {background:#d4d8bd;}

/* style the second level hover */

#navi ul ul a.drop:hover{background:#c9ba65;}

#navi ul ul :hover > a.drop {background:#c9ba65;}

/* style the third level background xxx */

#navi ul ul ul a, #navi ul ul ul a:visited {background:#666666;}

/* style the third level hover xxx */

#navi ul ul ul a:hover {background:#ff6501;}



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

#navi ul ul {visibility:hidden;position:absolute;height:0;top:26px;left:0; width:100px;}



/* position the third level flyout menu */

#navi ul ul ul{left:100px; top:0; width:100px;}



/* position the third level flyout menu for a left flyout */

#navi ul ul ul.left {left:-100px;}



/* style the table so that it takes no ppart in the layout - required for IE to work */

#navi table {position:absolute; top:0; left:0; border-collapse:collapse;;}



/* style the second level links */

#navi ul ul a, #navi ul ul a:visited {background:#666666 url('images/right.gif') 100px 7px no-repeat; color:#fff; height:auto; line-height:1em; padding:5px 10px; width:100px;}

#navi li#link4 ul a, #navi li#link4 ul a:visited, #navi li#link2 ul a, #navi li#link2 ul a:visited {background-image:none;} 



/* style the top level hover */

#navi a:hover, #navi ul ul a:hover{color:#fff; background:#e09523;}

#navi :hover > a {color:#fff; background:url('images/navibg3.gif') repeat-x; }

/* 2nd */

#navi :hover > a a, #navi ul ul :hover > a {color:#fff; background:#ff6501 url('images/right2.gif') 100px 7px no-repeat;}

#navi li#link4 :hover > a a, #navi ul li#link4 ul :hover > a, #navi li#link2 :hover > a a, #navi ul li#link2 ul :hover > a {background-image:none;}



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

#navi ul li:hover ul, #navi ul a:hover ul{visibility:visible; }

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

#navi ul :hover ul ul{visibility:hidden;}

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

#navi ul :hover ul :hover ul{ visibility:visible;}



#navi ul li { border-right:1px solid #fff;}

#navi ul li#link7 { border-right:none; }



/*dependant widths*/

#navi ul ul {width:89px; }

#navi a, #navi a:visited {width:69px; padding:0 10px; }

#navi li {float:left;width:89px;position:relative;}

#navi ul ul a, #navi ul ul a:visited {width:69px; }



#navi ul li#link2 ul { width:102px; }

#navi ul li#link2 a, #navi ul li#link2 a:visited {width:82px;}

#navi ul li#link2 {width:102px;}

#navi ul li#link2 ul a, #navi ul li#link2 ul a:visited { width:82px; }



#navi ul li#link3 ul { width:112px; }

#navi ul li#link3 a, #navi ul li#link3 a:visited {width:92px;}

#navi ul li#link3 {width:112px;}

#navi ul li#link3 ul a, #navi ul li#link3 ul a:visited { width:92px; }

#navi ul li#link3 ul ul { width:112px; left:112px; }

#navi ul li#link3 ul ul.left {left:-112px;}



#navi ul li#link4 ul { width:144px; }

#navi ul li#link4 a, #navi ul li#link4 a:visited {width:124px;}

#navi ul li#link4 {width:144px;}

#navi ul li#link4 ul a, #navi ul li#link4 ul a:visited { width:124px; }



#navi ul li#link5 ul { width:97px; }

#navi ul li#link5 a, #navi ul li#link5 a:visited {width:77px;}

#navi ul li#link5 {width:97px;}

#navi ul li#link5 ul a, #navi ul li#link5 ul a:visited { width:77px; }



#navi ul li#link6 ul { width:97px; }

#navi ul li#link6 a, #navi ul li#link6 a:visited {width:77px;}

#navi ul li#link6 {width:97px;}

#navi ul li#link6 ul a, #navi ul li#link6 ul a:visited { width:77px; }



#navi ul li#link7 ul { width:118px; }

#navi ul li#link7 a, #navi ul li#link7 a:visited {width:98px;}

#navi ul li#link7 {width:118px;}

#navi ul li#link7 ul a, #navi ul li#link7 ul a:visited { width:98px; }