/* All <ul> tags in the menu including the first level */
	.menulist, .menulist  ul {
	 margin: 0;
	 padding: 0;
	 list-style: none;
	background: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: 140px;
	
	}
	
	/* 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;
	}
	
	/* Items in submenus - override float/border/margin from above, restoring default vertical style */
	.menulist ul li {
	 float: none;
	 margin: 0;
	 margin-bottom: -1px;
	 padding:3px;
	 width: 140px;

	}
	.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;
		margin:0px;
		background-color:#677EB2;
		
	}
	
	/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
	.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
	 color: #000000;
	}
	.menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus {
	 color: #000000;	
	  background: #2284BB;
	}
	.menulist a.highlighted {
	 color: #000000;
	}
	
	a.menumain{
	background : none;
	 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;
	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. */
	.menulist a .subind {
	 display: none;
	}
	.menulist ul a .subind {
	 display: block;
	 float: right; margin-top:0px;
	}
	
	
	.seperator {
		padding-top: 2px;
		padding-right: 2px;
		padding-bottom: 0px;
		padding-left: 02px;
	}
	
	
	/*
	 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 */