/* All <ul> tags in the menu including the first level */
	.menulist, .menulist  ul {
	 margin: 0;
	 padding: 0;
	 list-style: none;
	
	}
	
	/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
	.menulist ul {
	display: none;
	position: absolute;
	margin-top: 0px; /* I'm using ems and px to allow people to zoom their font */
	left: 0px;
	width: 175px;
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	 left: -10px;
	}
	
	/* Second and third etc. level submenus - position across from parent instead */
	.menulist ul ul {
	 top: 0px; margin-top: 0px;
		
	}
	
	/*
	 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:34px;
	 font-family:Verdana, Arial, Helvetica, sans-serif;
	 font-size:12px;

	}
	
	/* Items in submenus - override float/border/margin from above, restoring default vertical style */
	.menulist ul li {
	 float: none;
	 margin: 0;
	background-color:#4290D0;
	width: 175px;
	border-bottom:#FFFFFF 1px solid;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	}
	.menulist ul>li:last-child {
	 margin-bottom: 1px; /* Mozilla fix */
	}
	
	/* Links inside the menu */
	.menulist a {
		display: block;
		color: #ffffff;
		text-decoration: none;
		text-align:left;
		padding-top: 0px;
		padding-right:12px;
		margin:0px 0px 0px 10px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		
		
	}
	
	/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
	.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
	 color: #FFFFFF; 
	
	}
	.menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus {
	 color: #FFFFFF;background: #8E939D; margin:0px; padding-left:10px;
	}
	.menulist a.highlighted {
	 color: #FFFFFF;
	}
	
	a.menumain{
	 float:left; font-size:11px; color: #f1f1f1; font-weight: bold; font-family:verdana; 
	 text-decoration:none;
	}
	
	a:hover.menumain{
	float:left; font-size:11px; color: #f1f1f1; font-weight: bold; font-family:verdana; text-decoration: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. */
	.menulist a .subind {
	 display: none;
	}
	.menulist ul a .subind {
	 display: block;
	 float: right; margin-top:0px;
	}
	
	
	.seperator {	
		padding:0px 10px 0px 10px;
		height:39px;
		background:url(../images/topnavbar-sep.gif) center no-repeat;
		width:1px;
		}
	.seperator1 {	
		padding:0px 5px 0px 5px;
		height:39px;
		background:url(../images/topnavbar-sep.gif) center no-repeat;
		width:1px;
		}
	
	/*
	 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 */