#nav
{
padding: 0;
margin: 0;
font: normal 12px bitstream vera sans,sans-serif;
background:#4A7B9C;

}
#nav ul {
  font: normal 11px bitstream vera sans,sans-serif;
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
#nav li
{
display:block;
width: 105px;
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
padding: 0;
text-align:center;
/*float: right;*/
position: relative;
}

#nav li a
{
display: block;
width:100%;
padding: 2px 0px;
/*border-left: 1em solid #AAB;*/
background:#4A7B9C;
text-decoration: none;
z-index:80;
}

#nav li a:link { color: #fff; }
#nav li a:visited { color: #fff; }

#nav li a:hover
{
/*border-color: #FE3;*/
background: #fff;
	color: #000;
	
	
}
#nav li a:active {
	/*border-color: #FE3;*/
	color: #FFF;
	background: #332;

}

#navclear {
  display: none;
}
html>body #navclear {
  display: block;
  clear: both;
}
/* ----- now highlight active tab based on body @class attribute ----- */

body.index #nav li#nav-index a ,
body.about #nav li#nav-about a ,
body.artisticdir #nav li#nav-artisticdir a,
body.classes #nav li#nav-classes a,
body.faculty #nav li#nav-faculty a,
body.company #nav li#nav-company a,
body.locations #nav li#nav-locations a,
body.performances #nav li#nav-performances a,
body.photos #nav li#nav-photos a,
body.register #nav li#nav-register a,
body.tuition #nav li#nav-tuition a

{

  background-color: #aaa;
  color: #000066;
}