/* This stylesheet controls the style (not the content) of the menu.  You really should only need to change the colours and fonts in this file, as altering other things can easily break it! */

.menubar {
   width:800px;
   height:32px;
   margin:0px;
   padding:0px;
   z-index:100;
    border-top:2px solid #70b0d0;
   /*border-bottom:1px solid #302020; */
    font:verdana,helvetica,arial,sans-serif;
    background-image:url("../images/bg_menu.gif");
}
/* hack to correct IE5.5 faulty box model */
* html .menubar {width:801px; w\idth:800px;}
*
*/* remove all the bullets, borders and padding from the default list styling */
.menubar ul {
    margin:0;
    list-style-type:none;
    padding:0px;
}
.menubar ul ul {
    width:149px;

}
.menubar li {
    margin:0;
   
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menubar li {
    float:left;
    width:149px;
    position:relative;
    text-align:center;
}
/* style the links for the top level */
.menubar a, .menubar a:visited {
    display:block;
    font: bold 12px verdana,helvetica,arial, sans-serif;
    color:#369;
    text-decoration:none;
    width:149px;
    height:30px; 
    /*border-bottom:1px solid #302020; */
    background-image:url(../images/bg_menu.gif); 
     
    line-height:30px;

}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menubar a, * html .menubar a:visited {width:149px; w\idth:138px;}
*
*/* style the second level background */
.menubar ul ul a.drop, .menubar ul ul a.drop:visited {
    background:#90a0c0;  
}

/* style the second level hover */
.menubar ul ul a.drop:hover{
    /*background-image:url(../images/bg_menu.gif); */
    background:#001;
}
.menubar ul ul :hover > a.drop {
    background:#001;
}
/* style the third level background */

.menubar ul ul ul a, .menubar ul ul ul a:visited {
    background:#001;
}
/* style the third level hover */
.menubar ul ul ul a:hover {
    background:#001;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menubar ul ul {
     visibility:hidden;
     position:absolute;
     height:0;top:30px;left:0;
     width:149px;
     border-top:0px solid #303030;
     z-index:200;
}
/* another hack for IE5.5 */
* html .menubar ul ul {top:30px;t\op:31px;}
*
*/* position the third level flyout menu */
.menubar ul ul ul{
    left:149px;
    top:-1px;
    width:149px;
}

/* position the third level flyout menubar for a left flyout */
.menubar ul ul ul.left {
    left:-149px;
}

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

/* style the second level links */
.menubar ul ul a, .menubar ul ul a:visited {
    color:#26c;
    height:auto;
    line-height:1em;
    padding:10px;5px;
    width:148px;
    /*border-color:#6090ff; */
    border-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#445; */
    border-left-style:solid;
    border-left-color:#445;
    border-right-style:solid;
    border-right-color:#445;
}
/* yet another hack for IE5.5 */
* html .menubar ul ul a, * html .menubar ul ul a:visited {width:150px;w\idth:128px;}
*
*/* style the top level hover */
.menubar a:hover, .menubar ul ul a:hover{
    color:#6090c0;
    background-color:#223;
    border-bottom-color:#a0a0c0;
    border-right-color:#a0a0c0;
}

/* make the second level visible when hover on first level list OR link */
.menubar ul li:hover ul,
.menubar ul a:hover ul{
     visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menubar ul :hover ul ul{
    visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menubar ul :hover ul :hover ul{
    visibility:visible;
}