/* ######################################################### */
/* #################### Main Navigation #################### */
/* ######################################################### */
/*        Instructions on markup / usage at the bottom       */
/* ######################################################### */


div#nav ul{
    background-color:#f9fbfb;
    list-style:none;
    margin:0;
    padding:0;}
div#nav ul li{
    list-style:none;
    margin:0;
    padding:0;}
div#nav ul li > a{
    display:block;
    color:#666;
    text-decoration:none;
    padding:0.5em 5px 0.5em 2em;
    border-bottom:1px solid #ccc;
    background:url(bg_nav_blue_off.png) 0.8em 0.9em no-repeat;}
div#nav ul li:first-child > a{
    border-top:1px solid #ccc;}
div#nav ul li > a:hover{
    background-color:#056dac;
    background-image:url(bg_nav_white_off.png);
    color:#fff;}
div#nav > ul li > ul{
    display:none;
    background-color:#056dac;
    padding:5px;
    border-bottom:1px solid #fff;}
div#nav > ul li > ul li:first-child > a{
    border-top:0;
    margin-top:-0.5em;}
div#nav > ul > li > ul > li > ul {
    display:none;
    background-color:#9bc5dd;}
div#nav > ul li > ul li {}
div#nav > ul li > ul li > a {
    padding-left:2.5em;
    border:0;
    border-color:#9bc5dd; background-position:1.3em 0.9em;
    color:#fff;
    background-image:url(bg_nav_white_off.png); }
div#nav > ul li > ul li > a:hover {
    color:#056dac;
    background-color:#9bc5dd;
    background-image:url(bg_nav_blue_off.png);}
div#nav > ul > li > ul > li > ul > li > a {
    color:#056dac;
    background-image:url(bg_nav_blue_off.png);}
div#nav ul > li > ul > li > ul > li > a:hover {
   background-color:#056dac;
   color:#fff;
   background-image:url(bg_nav_white_off.png);
   border-color:#056dac;}
/* ######################################################### */
/* ################# Level 1 highlighting ################## */
/* ######################################################### */
body.nav1-1 div#nav > ul > li.nav1 > a,
body.nav1-2 div#nav > ul > li.nav2 > a,
body.nav1-3 div#nav > ul > li.nav3 > a,
body.nav1-4 div#nav > ul > li.nav4 > a,
body.nav1-5 div#nav > ul > li.nav5 > a,
body.nav1-6 div#nav > ul > li.nav6 > a{
   background-color:#056dac;
   color:#fff;
   background-image:url(bg_nav_white_on.png);
   border-color:#056dac;}
body.nav1-1 div#nav > ul > li.nav1 > ul,
body.nav1-2 div#nav > ul > li.nav2 > ul,
body.nav1-3 div#nav > ul > li.nav3 > ul,
body.nav1-4 div#nav > ul > li.nav4 > ul,
body.nav1-5 div#nav > ul > li.nav5 > ul,
body.nav1-6 div#nav > ul > li.nav6 > ul{
    display:block;}
/* ######################################################### */
/* ################# Level 2 highlighting ################## */
/* ######################################################### */
body.nav2-1 div#nav > ul > li > ul > li.nav1 > a,
body.nav2-2 div#nav > ul > li > ul > li.nav2 > a,
body.nav2-3 div#nav > ul > li > ul > li.nav3 > a,
body.nav2-4 div#nav > ul > li > ul > li.nav4 > a,
body.nav2-5 div#nav > ul > li > ul > li.nav5 > a,
body.nav2-6 div#nav > ul > li > ul > li.nav6 > a{
    color:#056dac;
    background-color:#9bc5dd;
    background-image:url(bg_nav_blue_on.png);}    
body.nav2-1 div#nav > ul > li > ul > li.nav1 > ul ,
body.nav2-2 div#nav > ul > li > ul > li.nav2 > ul ,
body.nav2-3 div#nav > ul > li > ul > li.nav3 > ul ,
body.nav2-4 div#nav > ul > li > ul > li.nav4 > ul ,
body.nav2-5 div#nav > ul > li > ul > li.nav5 > ul ,
body.nav2-6 div#nav > ul > li > ul > li.nav6 > ul {
    display:block;
    border-bottom-color:#9bc5dd;}
/* ######################################################### */
/* ################# Level 3 highlighting ################## */
/* ######################################################### */
body.nav3-1 div#nav > ul > li > ul > li > ul > li.nav1 a,
body.nav3-2 div#nav > ul > li > ul > li > ul > li.nav2 a,
body.nav3-3 div#nav > ul > li > ul > li > ul > li.nav3 a,
body.nav3-4 div#nav > ul > li > ul > li > ul > li.nav4 a,
body.nav3-5 div#nav > ul > li > ul > li > ul > li.nav5 a,
body.nav3-6 div#nav > ul > li > ul > li > ul > li.nav6 a{
   background-color:#056dac;
   color:#fff;
   background-image:url(bg_nav_white_on.png);
   border-color:#056dac;
}
/* ######################################################### */
/*              Instructions on markup / usage               */
/* ######################################################### */
/* 
   Example markup for the menu:
   <div id="nav">
    <ul>
        <li class="nav1"><a href="">1</a></li>
        <li class="nav2"><a href="">2</a>
            <ul>
                <li class="nav1"><a href="">2 - 1</a>
                    <ul>
                       <li class="nav1"><a href="">3 - 1</a></li>
                       <li class="nav2"><a href="">3 - 2</a></li>
                    </ul>
                </li>
                <li class="nav2"><a href="">2 - 2</a></li>
            </ul>
        </li>
        <li class="nav3"><a href="">3</a>
    </ul>
    </div><!--nav-->
*/
/* ######################################################### */
/*
   Example nav item highlighting:
   <body class="nav1-1">               =  1st item on 1st level
   <body class="nav1-2">               =  2nd item on 1st level
   <body class="nav1-2 nav2-3">        =  3rd item on 2nd level
   <body class="nav1-2 nav2-3 nav3-2"> =  2nd item on 3rd level
*/
/* ######################################################### */