#nav {
  background: url(../graphics/menu/buttonRollover.png) repeat-x;
  width: 760px;
  height: 19px;
}

.menu .navFill {
  float: right;
  height: 19px;
  width: 40px; /* 760 - (80 * number buttons) */
  background-image:url(../graphics/menu/button.png);
}

.menu ul {
  padding:0px;
  margin:0px;
  list-style-type:none;
}

.menu li {
  float:left;
  position:relative; 
}

* html .menu li {
  width: 80px;
}

.menu span {
  position: absolute;
  left: 0px;top: 3px;
  text-align: center;
  width: 80px;
  cursor: pointer;   
}

.menu a, .menu a:visited {
  display: block;
  color: #000000;
  font-size: 10px;
  font-weight:bold;
  width: 80px;
  height: 19px;
  display: block;
  float: left;
  text-decoration: none;
  overflow:hidden;
}

.menu a:hover {
  color: #ffffff; 
  text-decoration:none;
}

.menu a:hover img { visibility:hidden } 


.menu img {width: 80px; height: 19px; }

* html a:hover {visibility:visible}

/* a hack so that IE5.5 faulty box model is corrected 
* html .menu a, * html .menu a:visited {
  width:0px; 
  w\idth:0px; 
}*/

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
  visibility: hidden;
  position: absolute;
  text-decoration: none; 
  height:0;
  top: 19px;
  left: 0; 
  width: 110px;
}

/* now for the second and third levels */
.menu ul ul ul,
.menu ul ul ul ul {
  visibility: hidden;
  position: absolute;
  text-decoration: none; 
  height:0;
  top:0px;
  left:121px; 
  width:110px;
}


/* another hack for IE5.5 */
* html .menu ul ul {
  top:19px;
  t\op:19px;
}

* html .menu ul ul ul{
  top:0px;
  t\op:0px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {
  position:absolute; 
  top:0; 
  left:0;
}

/* style the second and third level links */
.menu ul ul a, .menu ul ul a:visited,
.menu ul ul ul a, .menu ul ul ul a:visited,
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {
  background: #cccccc;
  color: #000000; 
  font-size: 10px;
  border: 1px solid #000000; 
  height: auto; 
  line-height: 1em; 
  padding: 5px; 
  width: 109px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
* html .menu ul ul a:visited{
  width:150px;
  w\idth:129px;
}

.menu ul ul a:hover, .menu ul ul ul a:hover, .menu ul ul ul ul a:hover {
  background:#999999;
  text-decoration:none;
  color:#FFFFFF;
}

.menu ul ul :hover > a {
  background:#999999;
  color:#FFFFFF;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
  visibility:visible; 
}

.menu ul li:hover ul ul,
.menu ul a:hover ul ul,
.menu ul li:hover ul ul ul,
.menu ul a:hover ul ul ul,
.menu ul li:hover ul ul ul ul {
  visibility:hidden; 
}

.menu ul ul li:hover ul,
.menu ul ul a:hover ul,
.menu ul ul ul li:hover ul,
.menu ul ul ul a:hover ul,
.menu ul ul ul ul li:hover ul,
.menu ul ul ul ul a:hover ul {
  visibility:visible; 
}
 
/* make sure that the sub menus are on top of everything else */
.menu li li,
.menu li li li, 
.menu li li li li{
  z-index: 199; /* but not on top of the mask layer which has index 200 */
}


/* -----  sub menu  ------- */


#tabs {
  height: 30px;
  width: 100%;
  padding-left:0px;
}

#tabBar {
  height: 19px;
  width: 100%;
  background-color: #000000;
}

.selectedTab,
.tabNav,
.subTab	{
  position: relative;
  margin: 0; 
  padding: 0;
  overflow: hidden;
}

.selectedTab,
.tabNav {
  float: left;
  width: 100px;
  height: 30px;
}

.subTab	{
  float: right;
  background: url(../graphics/menu/buttonRollover.png) no-repeat;
  width: 80px;
  height: 19px;
}	

.tabNav	{
  background-image: url(../graphics/menu/tabRollover.jpg);
}

.selectedTab a,
.tabNav a,
.subTab a {
  display: block;
  font-size: 12px;
  font-weight:bold;
  width: 100px;
  height: 30px;
  display: block;
  float: left;
  text-decoration: none;
}



.subTab a {
  font-size: 10px;
  width: 80px;
  height: 19px;
}

.selectedTab a {
  color: #ffffff;
}

.tabNav a,
.subTab a {
  color: #000000;
}

.selectedTab span,
.tabNav span,
.subTab span {
  position: absolute;
  top: 10px;
  text-align: center;
}

.selectedTab span,
.tabNav span {
  left: 0px;
  width: 100px;  
}	

.subTab span {
  left: 0px;
  top: 2px;
  width: 80px;	     
}

.selectedTab span {
  cursor: default;  
}

.subTab span,
.tabNav span {
  cursor: pointer;    
}
	
.selectedTab img,
.tabNav img {
  width: 100px; 
  height: 30px; 
  border: 0;
}	

.tabNav a:hover,
.subTab a:hover {
  color: #ffffff;
  text-decoration: none;
}

* html a:hover {
  visibility: visible;
}

.subTab a:hover img,
.tabNav a:hover img {
  visibility: hidden;
}

.subTab img {
  width: 80px; 
  height: 19px; 
  border: 0;
}

.subTabText	{
  position:relative;
  float: right;
  margin-right: 10px; 
  padding-top:3px;
  text-align:right;
  width: 300px;
  height: 19px;
  overflow:hidden;/* for ie to hide extra height*/
  color:#FFFFFF;
  font-style:italic;
  font-size:10px;	
}