/*

COPYRIGHT

stu nicholls | CSS PLaY | validating drop down cross-browser menu
http://www.cssplay.co.uk/menus/dd_valid.html

Because of all the time and effort spent in producing this menu I would ask that you respect my copyright.
1. If you are using this on a personal web site then please add a comment and a link back to CSS PLaY. I would also appreciate a donation to the 'Support CSS PLaY' fund.
2. If you are using this on a commercial web site then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the 'Support CSS PLaY' fund would be appreciated.

*/

/* common styling */
.menu {
    font-family: arial, sans-serif;
    width:698px;
    /* width:100%;
    width:auto; */
    position:relative;
    margin:0;
    font-size:11px;
    /*margin:50px 0
    margin:2px 0 100px 0;*/
    margin:1px;
    z-index:100;
}
.menu ul li a, .menu ul li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    width:136px;
    height:20px;
    text-align:center;
    color:#fff;
    border:1px solid #eee;
    background:#840018;
    line-height:20px;
    font-size:11px;
    overflow:hidden;
}
.menu ul {
    padding:0;
    margin:0;
    list-style-type: none; 
}
.menu ul li {
    float:left;
    margin-right:1px;
    position:relative;  
}
.menu ul li ul {
    display: none;    
    /*filter: alpha(opacity=80);*/
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    -moz-opacity: 0.90; 
    opacity:0.9;      
}

/* specific to non IE browsers */
.menu ul li:hover a {
    color:#fff;
    background:#ff9c18;
}
.menu ul li:hover ul {
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:139px;
}
.menu ul li:hover ul li a.hide {
    background:#6a3;
    color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
    background:#eee;
    color:#000;
}
.menu ul li:hover ul li ul {
    display: none;
}
.menu ul li:hover ul li a {
    display:block;
    background:#ffe77b;
    color:#000;
}
.menu ul li:hover ul li a:hover {
    background:#eee;
    color:#000;
}
.menu ul li:hover ul li:hover ul {
    display:block;
    position:absolute;
    left:139px;
    top:0;
}
.menu ul li:hover ul li:hover ul.left {
    left:-139px;
}