/* This menu should work properly if you drop in the css into the page css 
 * and load the nav file as a view in the header before the main header 
 * background/images are loaded.  You might have to toy around with the css a little
 * if there are conflicting rules, but it shouldn't be too hard to figure out
 */



/* NAVIGATION */
#navigation { border-bottom: 4px solid #FFFFFF; height: 30px;  background-color:#3C3C3C;width:970px; 	position:relative;
	margin:0 auto; }
.menu_tab {}

/* top menu */
ul.menu {float: left; display: block; height: 30px;margin-top:3px;}

/* top menu TAB container */
ul.menu li {display: block; float: left; margin-left: 3px; margin-right: 1px; font-size: 1em;}

/* top menu TAB */
ul.menu li a {display: block; padding: 3px 3px; repeat-x; line-height: 23px; font-size: .75em; font-weight: bold; color: #FFF;text-decoration:none;font:10px Verdana;}

/* arrow images */
ul.menu img {position:relative;top:2px;}

/* menu link hover */
ul.menu li a:hover {background: #3c3c3c; color: #fff;}

/* submenu */
ul.menu ul {display: none; z-index: 99999; position: absolute; left: 0; top: 98%; background: #3c3c3c;}

/* submenu tab */
ul.menu ul li {float: none; *display: inline;}

/* submenu link */
ul.menu ul a {background: none; white-space: nowrap; text-align: left; color: #fff;}

/* submenu link hover */
ul.submenu li a:hover {}

ul.submenu ul {display: block;}

/* display submenu */
ul.menu li:hover>ul {display: block}

/* TAB container while hovering over submenu */
ul.menu li:hover {position: relative; background: #3c3c3c;}

/* TAB while hovering over submenu */
ul.menu li:hover>a {background: #3c3c3c; color: #fff;}

ul.submenu li ul {position: relative; top: 0; left: 0;}
ul.submenu li ul li {margin: 0; padding: 0; position: relative; font-size: 1em;}
ul.menu li a:hover {}

/* dropdown container */
.submenu {border:4px solid #FFF;z-index:9999999;}

/* display submenus */
ul.menu a:hover ul,
ul.menu a:hover a:hover ul {display: block;}