/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.menu {
  width:600px;
  height:25px;
	position:absolute;
	z-index:100;
	background: #BD0000 url(../images/mainButtonBg.gif) repeat-x left top;
	padding:0;
	left: 207px;
	top: 64px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
  padding:0;
  margin:0;
  list-style-type:none;
}
.menu ul ul {
  width:180px;
  margin:0;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
  width: 100px;
  padding:0;
  border:0;
 	height: 25px;
 	text-align: center;
	line-height: 25px;
	margin:0;
	display: inline;
  background: url(../images/mainButtonBetweenR.gif) no-repeat left top;
}
.menu li#first {
  background: url(../images/mainButtonLeft.gif) no-repeat left top;
}
/*.menu li:hover, .menu li.highLight {
	background: url(../images/menu_item_sel_bg.gif) no-repeat left top;
}

.menu li#first:hover, .menu li#first.highLight {
  background: url(../images/menu_item_first_sel_bg.gif) no-repeat left top;
}*/
/* style the links for the top level */
.menu a:link, .menu a:visited {
text-decoration: none;
	color: #FFFFFF;
	display: block;
   text-transform: uppercase;
  font-weight: bold;
  padding: 0;
  margin:0;
}
.menu a:hover{
 background: none;
	color: #E6E6E6;
	display: block;
}
.menu li div.right-border{
  background: url(../images/mainButtonBetweenL.gif) no-repeat top right;
  position: absolute;
  top:0;
  right:0;
  width: 7px;
  height: 25px;
}
.menu li#last div.right-border{
  background: url(../images/mainButtonRight.gif) no-repeat top right;
  position: absolute;
  top:0;
  right:0;
  width: 7px;
  height: 25px;
}
.menu li:hover div.right-border, .menu li.highLight div.right-border{
  background: url(../images/mainButtonBetweenL.gif) no-repeat top right;
  position: absolute;
  top:0;
  right:0;
  width: 7px;
  height: 25px;
  
}
.menu li div.bg{
	background: url(../images/mainButtonLeft.gif) no-repeat top left;
}
.menu li:hover div.bg, .menu li.highLight div.bg{
  background: url(../images/menu_item_sel.gif) repeat-x top left;
}
.menu li#first:hover div.bg, .menu li#first.highLight div.bg{
  background: url(../images/menu_item_first_sel.gif) no-repeat top left;
}
a.highLight:link, a.highLight:visited {
  color:#ab0000;
}
span.arrow{
  background: url(../images/arrow.gif) no-repeat center right;
  padding: 0 10px 0 0;
}
.menu a:hover span.arrow, .menu a.highLight span.arrow{
  background: url(../images/arrow_on.gif) no-repeat center right;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:180px;

}
/* another hack for IE5.5 */
* html .menu ul ul {
top:25px;
t\op:25px;
}
.menu ul ul li {
	background: none;
	height: auto;
	margin:0;
	display:block;
  background: #bd0000;
  width: auto;
}


/* 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;}

/* style the second level links */
.menu ul ul a:link, .menu ul ul a:visited {
	display: block;
	color:#FFFFFF;
	height:auto;
	line-height:1em;
	padding:7px 8px 7px 14px;
	width:139px;
	margin:0;
	background: none;
	text-transform: none;
	font-weight: normal;
	text-align: left;
	border-bottom: 1px solid #FFFFFF;
	
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:139px;
w\idth:139px;
}


/* style the top level hover */

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

/* 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 a{
	color: #E6E6E6;
	
}
.menu ul li:hover a span.arrow{
  background: url(../images/arrow_on.gif) no-repeat center right;
}
.menu ul li:hover ul a{
	color: #FFFFFF;
}
.menu ul li:hover ul a:hover{
	color: #FFFFFF;
}