/* All <ul> tags in the menu including the first level */
.menulist, .menulist  ul {
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 text-decoration:none; 
	}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
	 display: none;
	 position: absolute;
	 border:1px #b5c9e0 solid;
	 padding:5px;
	 margin-top: -5px;
	 top: 1.0em; margin-top: 18px; /* I'm using ems and px to allow people to zoom their font */
	 left: -30px;
	 width: 178px;
	 text-decoration:none;
	 filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='gray', Positive='true');
	}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
	top: -1px; margin-top: 10px;	
	text-decoration:none;
	}

/*
 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.
*/
.menulist li {
	float: left;
	display: block;
	position: relative;
	line-height:22px;
	text-decoration:none;
	margin-left: 5px;
	}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
 	float: none;	
	margin-bottom: -1px;
/*	background-color:#8FBE72;	
	border:1px solid #A0CD84;*/
	line-height:22px; 
	text-decoration:none;
	}
 /*.menulist ul>li:last-child {
	margin-bottom: 1px; Mozilla fix 
	}*/

/* Links inside the menu */
.menulist a {
	display: block;
	text-decoration:none;
	text-align:left;
	color: #000000;
	font-size:12px;
	font-family:verdana; 
	padding:2px 3px 2px 3px;	
	text-decoration:none;
	}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
	color: #000000; 
	display:block;
	border-bottom:0px solid #6C91BC;
	text-decoration:none;
	}
.menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus {
	color: #4eb0e9;
 	text-decoration:none;
   	/*background-color:#CAE3B6;
	background:url(../images/spacer.gif) bottom repeat-x; */
	border-bottom:0px solid #6C91BC;
	}
.menulist a.highlighted {
	 color: #000000;
	 border-bottom:0px solid #6C91BC;
	 
	}

a.menumain{
	float:left; font-size:14px; color: #000000; font-weight: normal; font-family:verdana; text-decoration:none;
	border:0px white solid;
	padding:5px;
	}

a:hover.menumain{
	float:left; font-size:14px; color: #b4d2ef; font-weight: normal; font-family:verdana; text-decoration:none;
	border:0px black solid;
	border-bottom:0px white solid;
	padding:5px;
	}


/*
 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. */
.menulist a .subind 	{
			display: none;
			
			}
.menulist ul a .subind {
			 display: block;
			 float: right; margin-top:4px;
			}
.seperator {	
		padding:7px 16px 0px 16px;
		font-size:13px;
		color:#b5c9e0;
		font-family:verdana;
		}

/*
 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;
 
	}
* html .menulist ul a {
	 height:22px;
	 line-height:22px;
	 padding-top:4px;
	 padding-bottom:0px;
	}
/* End Hacks */

.navlink{ background: url(../images/menu/menu-bg.jpg) repeat; height:40px; padding-top:5px;}