/*
Multilevel CSS-Only Menu

Author: Jason DeVelvis
Website: http://www.whenissaturday.com

This menu is based on the CSS-only drop down menu by 1234.info found here:
http://www.1234.info/webtemplates/multiflex3/

============================
Multi-level CSS Menu style 
change guide
============================
.dropnav - container, invisible
.dropnav ul li a - main menu bar links
.dropnav ul li:hover ul li a - drop down menu links (from the first dropdown menu on)
    
============================
To add more levels:
============================
Step 1:
    HTML
    The HTML is the same, just add a new block between the <li> and </li>

Step 2:
    Non-IE6 Hovering CSS
    For each level you want to add, just add another "ul li:hover" after the .dropnav
    For example:

    Fourth Level Submenu Positioning
    .dropnav ul li:hover ul li:hover ul li:hover ul li ul {display:none;}
    .dropnav ul li:hover ul li:hover ul li:hover ul li:hover ul {display:block; position: absolute;  z-index:999; margin-top:0; left:12.0em; top: 0;}

Step 3:
    IE6 Hovering CSS
    For each level you want to add, you need another chunk of css under *IE6 Hovering*:

    Fourth Level Submenu Positioning
    .dropnav ul li a:hover ul li a:hover ul li a:hover ul li a table {display: none;}
    .dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover table {display: block;}
    .dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover {position:relative ; z-index:1000;}
    .dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:0; left:12em; top: 0;}

============================
To change the width of the 
submenu items
============================
Step 1:
    Do a find/replace for 10em, and set it to whatever you want (make sure it's in em for this to work)

Step 2:
    Do a find/replace for 12em, and set it to whatever you set above, plus 2

Step 3: 
    Do a find/replace for 12.1 em, and set it to whatever you set above with .1 on the end

Example:
    To changing the width to 8, you would replace 10em with 8em, 12em with 10em, and 12.1em with 10.1em

============================
To change the height of the
submenu items
============================
Step 1: 
    Do a find/replace for 2em, and set it to what you want (make sure it's in em for this to work)

Step 2:
    Do a find/replace for 2.1em, and set it to whatever you set above with .1 on the end

Example:
    If you want your menu to be 3em, you would replace 2em with 3em, and 2.1em with 3.1em

*/

/*======================*/
/*     Basic Setup      */
/*======================*/
.dropnav { /*IE hack*/; float:left;} /*Color navigation bar normal mode*/
.dropnav ul {list-style-type:none; display:inline; margin: 0; padding: 0; width: 100%}
.dropnav ul li {text-align: center; float:left; display: inline; background: none; margin: 0; padding: 0; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/;}
.dropnav ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block;}
.dropnav ul li ul {display:none; z-index: 2;}

/*Basic Styling*/
.dropnav { border:none; margin-top:0; background: #B9BF64; color: #fff; font-size:130%; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial, sans-serif}
.dropnav ul li a {padding: 0 1em; height:2.1em; line-height:2.1em; text-decoration:none; font-weight:bold; color: #fff;}
.dropnav ul li a:hover {}
.dropnav ul li ul li a {width: 10em; text-align: left;}

/*======================*/
/*   Non-IE6 hovering   */
/*======================*/
/*Main Menu Bar Hovering*/
.dropnav ul li:hover {position:relative;} /*Sylvain IE hack*/
.dropnav ul li:hover a {background:#92983a; text-decoration:none;} /*Color main cells hovering mode*/

/*First Submenu Positioning*/
.dropnav ul li:hover ul {display:block; background: #B9BF64;}
.dropnav ul li:hover ul {position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}

/*Submenu styling*/
.dropnav ul li:hover ul {width: 10em; margin-left: 1px}
.dropnav ul li:hover ul li a {width: 10em; white-space:normal; display:block; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 1em; background-color:#B9BF64; font-weight:normal; color:#fff; border-bottom: 1px solid #fff;} /*Color subcells normal mode*/
.dropnav ul li:hover ul li a:hover {background-color: #92983a; color: #FFFF00}

/*Second Level Submenu Positioning*/
.dropnav ul li:hover ul li ul {display:none;}
.dropnav ul li:hover ul li ul a {display:none;}
.dropnav ul li:hover ul li:hover ul {width: 10em; display:block; position: absolute;  z-index:999; margin-top:0; left:12.1em; top: 0;}

/*Third Level Submenu Positioning*/
.dropnav ul li:hover ul li:hover ul li ul {display:none;}
.dropnav ul li:hover ul li:hover ul li:hover ul {width: 10em; display:block; position: absolute;  z-index:999; margin-top:0; left:12.0em; top: 0;}


.dropnav ul li a, .dropnav ul li a:visited {
float:left; 
display:block; 
text-decoration:none; 
color:#FFF; 
padding:0px 23px;
line-height:24px; 
height:24px;
}

/*======================*/
/*     IE6 hovering     */
/*======================*/
/*Structure*/
.dropnav table {position:absolute; top:0; left:0; border-collapse:collapse; }
.dropnav ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul {display:block; position:absolute; z-index:999; top:1em; left:0; margin-top:0.1em;}

/*IE6 Main Menubar Styling*/
.dropnav ul li a {padding: 0 1em; color: #fff}
.dropnav ul li a:hover {background-color:#92983a; text-decoration:none; #fff}
.dropnav ul li a:hover ul { background: #92983a;}
    
/*Submenu Styling*/
.dropnav ul li a:hover ul li a {white-space:normal; display:block; height:1px; line-height:1.3em; padding:4px 1em; border-bottom: 1px solid #fff; background: #B9BF64; font-weight:normal; color: #fff;} /*Color subcells normal mode*/
.dropnav ul li a:hover ul li a:hover {background: #92983a; text-decoration:none; border-bottom: 1px solid #fff; color: #ffff00} /*Color subcells hovering mode*/

/*First Level Submenu Positioning*/
.dropnav ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; }
.dropnav ul li a:hover ul {display:block; position:absolute; z-index:999; top:2.1em; left:0; margin-top:-1px; background: #B9BF64}

/*Second Level Submenu Positioning*/
.dropnav ul li a:hover ul li a table {display: none;}
.dropnav ul li a:hover ul li a:hover table {display: block;}
.dropnav ul li a:hover ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:-1px; left:12em; top: 0; background: #B9BF64}

/*Third Level Submenu Positioning*/
.dropnav ul li a:hover ul li a:hover ul li a table {display: none;}
.dropnav ul li a:hover ul li a:hover ul li a:hover table {display: block;}
.dropnav ul li a:hover ul li a:hover ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:-1px; left:12em; top: 0;}