.menulist a{

	font-size: 13px;

	vertical-align: middle;

	display: block;

	float: left;

	text-decoration: none;

	margin: 0 0;

	padding: 0 10px;

	line-height: 16px;

	color: #60bfff;

}

.menulist ul a{

	font-size:11px;

	color: #56b7fb;

	line-height: 14px;

	padding: 3px 0;

	font-weight: normal;

}



.menulist a.highlighted{

	color: white;

}

.menulist a.active, .menulist a:hover, .menulist a:active, .menulist li ul li a:link.active, .menulist li ul li a:visited.active { 

	color: white;

}

.menulist{

	display:block;

	margin: 0 auto;

}

.menulist ul {

 display: none;

 position: absolute;

 top: 14px; 

 margin-top: 13px; /* I'm using ems and px to allow people to zoom their font */

 left: -7px;

 	background-color: #023284;

	width: 180px;

	z-index:3;

	border-left: 1px solid #56b7fb;

	border-bottom: 1px solid #56b7fb;

	border-right: 1px solid #56b7fb;

	padding: 5px 0;

}

.menulist li {

 float: left;

 display: block;

 position: relative;

 margin-right: -1px;

}

.menulist li li a:link, .menulist li li a:visited{

 color: #56b7fb;

}

.menulist li li a:hover, .menulist li li a:active{

	color:#fff;

}

.menulist ul ul {

	top: -1px; 

	margin-top: 0;

	left: 148px;

}

.menulist ul li {

 float: left;

 margin: 0;

 margin-bottom: -1px;

 width: 100%;

 padding-left:17px;

}

.menulist ul>li:last-child {

 margin-bottom: 1px; /* Mozilla fix */

}



/*

 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;

}