/*
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 {white-space:nowrap /*IE hack*/; float:left; font-family: Arial, Verdana;font-size: 10px;line-height: 14px;} /*Color navigation bar normal mode*/
.dropnav ul {list-style-type:none; display:inline; margin: 0; padding: 0;}
.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 {max-width:700px; border:none;}
.dropnav ul li a {padding: 0 1em; height:2.1em; line-height:2.1em; text-decoration:none; font-weight:bold; color: rgb(100,100,100); border: none;}
.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-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/

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

/*Submenu styling*/
.dropnav ul li:hover ul {width: 10em;}
.dropnav ul li:hover ul li a {width: 30em; white-space:normal; display:block; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 1em; background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.dropnav ul li:hover ul li a:hover {text-decoration: underline; background-color: rgb(210,210,210);}

/*Second Level Submenu Positioning*/
.dropnav ul li:hover ul li ul {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;}

/*======================*/
/*     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:2.1em; left:0; margin-top:0.1em;}

/*IE6 Main Menubar Styling*/
.dropnav ul li a {padding: 0 1em;}
.dropnav ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}
.dropnav ul li a:hover ul {}
    
/*Submenu Styling*/
.dropnav ul li a:hover ul li a {white-space:normal; width: 30em; display:block; height:1px; line-height:1.3em; padding:4px 1em; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.dropnav ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*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:2em; left:0; margin-top:-1px;}

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

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