/* All <ul> tags in the menu including the first level */
div#mainMenu ul.menulist,
div#mainMenu ul.menulist ul {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
div#mainMenu ul.menulist ul {
	display:none;
	position:absolute;
	top:30px;
	margin-top:0; /* I'm using ems and px to allow people to zoom their font */
	width:175px;
	background:#d3dab6;
	border-bottom:4px solid #221a17;}

/* Second and third etc. level submenus - position across from parent instead */
div#mainMenu ul.menulist ul ul {
	top:0;
	margin-top:0;
	left:175px;}

/* All menu items (<li> tags). 'float: left' lines them up horizontally, and they are positioned relatively to correctly offset submenus. Also, they have overlapping borders.*/
div#mainMenu ul.menulist li {
 float:left;
 display:block;
 position:relative;
 height:35px;}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
div#mainMenu ul.menulist ul li {
 	float:none;
 	margin:0;
 	/*#margin-bottom:-3px;*/
 	padding:0;
 	height:auto;}
 
/* Top Level */
div#mainMenu ul.menulist a,
div#mainMenu ul.menulist a:link,
div#mainMenu ul.menulist a:active,
div#mainMenu ul.menulist a:visited { /*color set in templateVar.css*/
	display:block;
	margin-top:6px;
	padding:4px 8px 0;
	height:18px;
	font-family:Verdana, Arial, Helvetica, sans-serif;}
	
/*div#mainMenu ul.menulist>li:last-child a {
	border-right:none;}*/

/* Sub Menu (flyouts) */	
div#mainMenu ul.menulist li ul li a,
div#mainMenu ul.menulist li ul li a:link,
div#mainMenu ul.menulist li ul li a:active,
div#mainMenu ul.menulist li ul li a:visited {
	height:auto;
	display:block;
	margin-top:0;
	padding:4px 8px;
	color:#000;
	background:url(/images/subNavArrow.gif) left top no-repeat;
	border-right:none;
	text-decoration:none;}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
/* Top Level */
div#mainMenu ul.menulist a:hover,
div#mainMenu ul.menulist a.highlighted:hover,
div#mainMenu ul.menulist a:focus,
div#mainMenu ul.menulist a.highlighted {
	text-decoration:none;
	color:#fff;
	/*color:#5e5953;*/
	background:#4d4d4d;}

/* Sub Menu (flyouts) */	
div#mainMenu ul.menulist li ul li a:hover,
div#mainMenu ul.menulist li ul li a.highlighted:hover,
div#mainMenu ul.menulist li ul li a:focus,
div#mainMenu ul.menulist li ul li a.highlighted {
	background:#a55d00;
	color:#fff;}

div#mainMenu ul.menulist li ul li:hover {
	background:none;}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
ul.menulist a .subind {
 display: none;}
 
div#mainMenu ul.menulist ul a .subind {
 display:block;
 float:left;}


/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .menulist ul li {
 float:left;
 width:100%;}

* html .menulist ul li {
 float:left;
 height:1%;}
 
* html .menulist ul a {
 height:1%;}
/* End Hacks */