.menu{
	height: 23px;
	position: relative; 
	z-index: 100;
	font-family: verdana, sans-serif;
	text-align: center;
    margin:0 auto;
    width:100%;
	background-color:#878787;
}
#menuContainer{
	width:760px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu div{
	margin: 0 auto;
	list-style-type: none;
	text-align: left;
    height:23px;
}
.menu div li{
	width: 80px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li{
	float: left;
	width: 80px;
	position: relative;
}

/* style the links for the top level */

.menu a, .menu a:visited{
	display: block;
	font-size: 11px;
	text-decoration: none;
	color: #fff;
	width: 80px;
	height: 23px;
	border-left: 1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
	background-color: #878787;
	padding-left: 10px;
	line-height: 19px;
}
.menuitem ul a{
border:1px solid #FFFFFF;
border-width: 1px 0 1px 1px;
}
.menuitem[name~="read"] ul a{
    border-style:none;
}
.menu .menuitem a:hover, .menu li:hover
{
	background-color: #728EAE;
}


/* my stuff */
.menuitem[name~="input"]{
    font-size:10px;
}
.menuitem{
    height:23px;
}
/*  REMOVE HOVER EFFECT FROM INPUT BOX  */
.menuitem[name~="input"]:hover{
    	background: #878787; 
}
.menuitem .searchText{
    height:11px;
    vertical-align:middle;
    font-size:10px;
}

.menuitem[name="study"],.menuitem[name~="input"]
{
	display: block;
	font-size: 11px;
	text-decoration: none; 
	color: #FFFFFF;
	width: 100px;
	border-left: 1px solid #FFFFFF;
	background: #878787; 
	padding-left: 10px; 
	line-height: 19px;
}
.menuitem[name~="read"]{
   	display: block;
	font-size: 11px;
	text-decoration: none;
	color: #FFFFFF;
	width: 100px;
	border-color:#FFFFFF;
    border-left-style:solid;
    border-width:1px;
    padding-left:10px;
	background: #878787;
	line-height: 19px;
}
.menuitem[name~="read"] a[alt~="Read"]{
    width:100%;
    border-style:none;
    padding:0px;
}
.menuitem[name~="read"]:hover a{
    background-color: #728EAE;
}
.menuitem[name~="read"] ul li{
    width:113%;
    border-bottom-style:solid;
    border-color:#FFFFFF;
    border-width:1px;
}
/* end my stuff */

/* style the second level background */
.menuitem ul a.drop, .menuitem ul a.drop:visited{
	background-color:#728EAE;
}

/* style the second level hover */
.menuitem ul a.drop:hover{
	background-color: #878787;
}

.menuitem ul:hover > a.drop{
	background-color:#878787;
}

/* style the third level background */
.menuitem ul ul a, .menuitem ul ul a:visited{
	background-color: #728EAE;
	width: 200px;
}

/* style the third level hover */

.menuitem ul ul a:hover, .menuitem ul ul li:hover{
	background-color: #878787;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menuitem ul{
	visibility: hidden;
	position: absolute;
    margin:0px 0px 0px 0px;
	height: 0px;
	top: 23px;
	left: 0px;
	width: 149px;
	border-top: 1px solid #FFFFFF;
}
 
/* position the third level flyout menu */
.menuitem ul ul{
	left: 170px;
    margin:0px 0px 0px 0px;
	position: absolute;
	top: -1px; 
	width: 149px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table{
	position: absolute; 
	top: 0; 
	left: 0; 
	border-collapse: collapse;
}
 
/* style the second level links */
.menu .menuitem ul a, .menu .menuitem ul a:visited{
	background: #728EAE;
	color: #FFFFFF;
	height: auto; 
	line-height: 1.1em;
	padding: 5px 10px; 
	width: 149px;
	border-width: 0 1px 1px 1px;
}

/* style the top level hover */
.menu a:hover{
	color: #ffffff; 
	background: #728eae;
}
.menu .menuitem ul a:hover{
	background: #878787;
}
.menu :hover > a, .menu .menuitem ul :hover > a, .menu .menuitem ul a:hover{
	color: #ffffff; 
	background: #878787;
}
 
/* make the second level visible when hover on first level list OR link */
.menu li:hover ul, .menu ul a:hover ul{
	visibility: visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu :hover ul ul{
	visibility: hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu :hover ul :hover ul{
	visibility: visible;
}