/* vmenu */

.menu {
 position:absolute;
 top: 120px;
 left: 0px;
 width: 137px;
 z-index:15000;
}

.menu #firstmenu {
}

.menu #secondmenu {
 margin-top: 30px;
 position: absolute;
 left: 0px;
}

.menu, .menu * {
 margin:0;
 padding:0;
}

.menu ul {
 background:transparent; /*IE6 needs this*/
 width: 137px;
}

.menu ul ul {
 background:transparent; /*IE6 needs this*/
}

.menu li {
 background: transparent url(../images/bt_level01.png) 0px 0px no-repeat;
 float: left;
 list-style:none;
 position:relative;
 width: 137px;
 height: 16px;
 z-index:999;
 color: #FFF;
}

.menu a {
 color: #FFF;
 font-size:11px;
 display:block;
 text-decoration:none;
 width:137px;
}

.menu ul a, .menu ul ul a{
 color:#FFF;
 font-weight:normal; /* this control the submenu apspect*/
}

.menu li ul {
 top:-999em;
 position:absolute;
 width:250px;
 font-weight: normal;
}

.menu li:hover { 
 height: 16px; 
}

.menu li.sfHover,
.menu a:focus, .menu a:hover, .menu a:active {
 color:#FFF;
 text-decoration:none;
}

/*THIS IS THE FIRST ROLLOVER*/

.menu ul a {
 color:#FFF;
 height: 16px;
 text-align: right;
 font-weight:normal;
 width: 116px;
 padding-right: 20px;
}

.menu ul a:active, .menu ul a:hover, .menu ul a:focus {
 background: transparent url(../images/bt_level01.png) 0px -16px no-repeat;
 padding-right: 20px;	
 color:#FFF;
 height: 16px;
 text-align: right;
 font-weight:normal;
 width: 116px;
}

/* here end the first rollorver */


/*THIS IS THE SECOND ROLLOVER*/

.menu ul ul a {
 /*background: yellow;	*/
 color:#FFF;
 height: 16px;
 text-align: left;
 padding-left: 10px;
 padding-right: 0px;
 font-weight:normal;
 width: 250px;
 background: transparent url(../images/bt_level02.png) 0px 0px no-repeat;
}

.menu ul ul a:focus, .menu ul ul a:hover,  .menu ul ul a:active {
 background: transparent url(../images/bt_level02.png) 0px -16px no-repeat;
 color:#000;
 height: 16px;
 text-align: left;
 padding-left: 10px;
 padding-right: 0px;
 font-weight:normal;
 width: 250px; /*need this because overflow in firefox, don't need this in ie6 */
}

/* here end the second rollorver */


.menu ul li:hover { /* this refers to the state of the first hover that remains highlighted (keep the hover state) */
 background: transparent url(../images/bt_level01.png) 0px -16px no-repeat;
 color:#000;
 width: 137px;
 height: 16px;
}


.menu ul li:hover li:hover { /* this refers to the state of the second hover that remains highlighted (keep the hover state) */
 background: white;
 color:#000;
 width: 260px;
 height: 16px;
}



.menu li:hover ul, /* important */ /*position of the first submenu*/
.menu li.sfHover ul {
 left:137px;
 top:0px;
}

.menu li:hover li ul,
.menu li.sfHover li ul {
 top:-999em;
}

/* end position of the second submenu */

.menu li li:hover ul,  /*position of the second submenu*/
.menu li li.sfHover ul {
 left:260px;
 top:0px;
}

.menu li li:hover li ul,
.menu li li.sfHover li ul {
 top:-999em;
}

/* end position of the third submenu */

.menu li li li:hover ul, /*position of the third submenu*/
.menu li li li.sfHover ul {
 left:260px;
 top:0px;
}

/* end position of the third submenu */



/* VERY IMPORTANT FOR IE7 */

/*following rule negates pure CSS hovers
so submenu remains hidden and JS controls
when and how it appears*/

.superfish li:hover ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
 top: -999em;
}

.superfish li a { 
 width:250px;
 height: 21px;
}

.menu li li {
 width:200px;

}

.menu li li li {
}

.menu li li a {
 padding-right:0;
 width:250px;
}