/* CSS Document */
#navigation
{
    width:780px;
    
}
#nav {
    float: left;
    clear: left;
    margin: 05px 0 0;
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
    
    height: 48px;
    background: url("../images/menubg.png") no-repeat scroll left top transparent;
    list-style: none;
    font-weight: bold;
    /* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
    /* Clear floats */
}

    #nav li {
        position: relative;
        float: left;
        margin-top: 08px;
        margin-right: 10px;
        height: 60px;
       
          

        text-transform: uppercase;
        font-weight: bold;
        font-size: 14px;
     
    }

     #nav .li-has-subpages a
    {
          background: url("/images/icons/drop_arrow_white.png") right 10px no-repeat;  
    }


    #nav a {
        display: block;
        padding: 05px 10px;
        padding: 4px;
        color: #FFF;
        text-decoration: none;
          padding-left:03px;
         padding-right:17px;
         
    }
     #nav .li-has-subpages a:hover{
          background: url("/images/icons/drop_arrow_black.png") right 10px no-repeat; 
     }

        #nav a:hover {
            border-radius: 15px;
            color: #333;
            
         
        }

    #nav li a:hover,  #nav .li-has-subpages a:hover {
        background-color: #ffce1b;
        color: #333;
     
    }

.current-page-category {
    background:url("/images/active_page.png") no-repeat bottom center;
}
    



    /*--- DROPDOWN ---*/
    #nav ul {
        position: absolute;
        left: -9999px;
        z-index: 1000;
        border-radius: 5px;
        background: url(/images/nav_drop_bg.png);
        list-style: none;
        /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
        /* Hide off-screen when not needed (this is more accessible than display:none;) */
        /*background:rgba(255,255,255,0);  But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    }

        #nav ul li {
            z-index: 1000;
            display: block;
            float: none;
            margin-top: 0px;
            padding-left:0px;
            padding-right: 01px;
            width: 100%;
            height: 30px;
            font-size: 14px;
           
        }

        #nav ul a {
            color: #333;
            white-space: nowrap;
             background:none;
            /* Stop text wrapping and creating multi-line dropdown items */
        }

    #nav li:hover ul {
        top: 40px;
        left: -20px;
        /* Bring back on-screen when needed */
        /* Display the dropdown on hover */
    }

    #nav li:hover {
        /*padding-bottom: 10px;*/       
    }

    #nav li.currentpg {
        background:url("/images/active_page.png") no-repeat bottom center;
    }
    

        #nav li:hover ul li {
            padding-bottom: 0px;
        }

        #nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
                          
        }

        #nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
           
        }
       
        #nav li:hover ul li a:hover {
            border-radius: 0px 0px 0px 0px;
            color: #333;
            background:none;
             background-color: #ffce1b;
            /* Here we define the most explicit hover states--what happens when you hover each individual link. */
        }

            #nav li:hover ul li a:hover:first-child {
                border-radius: 5px 5px 0px 0px;
            }

            #nav li:hover ul li a:hover:last-child {
                border-radius: 5px 5px 5px 5px;
            }


  /*********************** SIDE NAVIGATION *****************************************/
.divSideNav ul li.sidenav-currentpage a{
    color: #24A0DC;
    font-weight:bold;
}
  


.product-SideNav .list-series-title
{
    font-weight:bold;
     background: url("/images/Title_Inner.png") repeat-x bottom transparent;
     padding-bottom:15px;
     margin-top:10px;
}

    .product-SideNav .list-series-title ul li {
       font-weight:normal;
       background:url("/images/icons/sidenav-arrow.png") no-repeat left center;
      
       
    }

    .product-SideNav .list-series-title ul li:hover{
      
        color: #24A0DC;
    }

    .product-SideNav .list-series-title ul li:hover a{
       color: #24A0DC;

    }