/* ======================================================================
 *
 * Filename:    navigation.css
 * Website:     www.albene.de
 * Author:      INTERPAGEmedia
 * Author URL:  http://www.interpage.de
 *
 * Date created:    10/10/2013
 * Last modified:   18/11/2013
 *
 * Description: CSS for the Page Navigation
 *
 * ====================================================================== */





/* ########## MAIN NAVIGATION ########################################### */


/* ########## 1st Level ########## */
#navigation ul {
    float: left;
    list-style: none;
    margin: 5px 0 0 0;
}

    #navigation ul li {
        float: left;
    }
    
        /* Standard Link */
        #navigation ul li a {
            float: left;
            color: #fff;
            display: block;
            font-size: 18px;
            font-style: italic;
            text-decoration: none;
            padding: 0 44px 0 44px;
            background: url(../img/template/nav-liststyle.gif) no-repeat 0 4px;
        }
        
        /* First Element of List */
        #navigation ul li:first-child a {
            padding: 0 50px 0 0;
            background: none;
        }
        
        /* Last Element of List */
        #navigation ul li:last-child a {
            padding: 0 0 0 50px;
        }
        
        /* MouseOver Effect */
        #navigation ul li.red    a:hover {color: #e21c17;}
        #navigation ul li.yellow a:hover {color: #FFCE00;}
        #navigation ul li.green  a:hover {color: #93C01F;}
        #navigation ul li.blue   a:hover {color: #0094E2;}
        #navigation ul li.purple a:hover {color: #6A28C1;}
        
        
        /* Aktiver Link */
        #navigation ul li.red    a.active {color: #e21c17;}
        #navigation ul li.yellow a.active {color: #FFCE00;}
        #navigation ul li.green  a.active {color: #93C01F;}
        #navigation ul li.blue   a.active {color: #0094E2;}
        #navigation ul li.purple a.active {color: #6A28C1;}
        
        
            
/* ########## 2nd Level ########## */

#navigation ul li ul {
    display: none;
}

#navigation ul li:hover ul {
    position: relative;
    width: 100%;
    clear: both;
    display: block;
    padding: 5px 0 0 0;
}

    #navigation ul li ul li {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin: 0 0 3px 0;
        
        /*
        opacity: .8;
        -moz-opacity: .8;
        filter: alpha(opacity=80);
        */
    }
    
    #navigation ul li ul li:hover {
        /* 
        margin: 0 0 1px 0; 
        padding: 0 0 1px 0;
        */
        
        opacity: .9;
        -moz-opacity: .9;
        filter: alpha(opacity=90);
    }
    
    /*
    #navigation ul li ul li.red:hover {border-bottom: 1px solid #e21c17;}
    
    #navigation ul li ul li.yellow:hover {border-bottom: 1px solid #FFCE00;}
    
    #navigation ul li ul li.green:hover {border-bottom: 1px solid #93C01F;}
    
    #navigation ul li ul li.blue:hover {border-bottom: 1px solid #0094E2;}
    
    #navigation ul li ul li.purple:hover {border-bottom: 1px solid #6A28C1;}
    */
    
    
        /* Standard Link */
        #navigation ul li ul li a {
            width: 100%;
            color: #000;
            font-size: 16px;
            background: none;
            padding: 2px 0 2px 20px !important;
        }
        
        #navigation ul li ul li a:hover {
            color: #000 !important;
        }
        
        #navigation ul li ul li.red a {background: #E21C17;}
    
        #navigation ul li ul li.yellow a {background: #FFCE00;}
        
        #navigation ul li ul li.green a {background: #93C01F;}
        
        #navigation ul li ul li.blue a {background: #0094E2;}
        
        #navigation ul li ul li.purple a {background: #6A28C1;}
        
        
        
        
/* ########## UNTERNAVIGATION ########################################### */

span#navtitle {
    float: left;
    width: 25px;
    height: 250px;
    display: block;
    margin: 10px 0 0 5px;
}

    .content_column span img,
    .content_column_first span img  {
        float: left;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

#subnav ul {
    float: right;
    width: 230px;
    list-style: none;
    text-align: left;
    margin: 10px 0px 0 0;
}

    #subnav ul li.red {
        background: #FEE3E1;
    }
    
    #subnav ul li.red:hover,
    #subnav ul li.red_on {
        background: #E21C17;
    }
    
    #subnav ul li.yellow {
        background: #FBF7D3;
    }
    
    #subnav ul li.yellow:hover,
    #subnav ul li.yellow_on {
        background: #FFCE00;
    }
    
    #subnav ul li.green {
        background: #E6F2CE;
    }
    
    #subnav ul li.green:hover,
    #subnav ul li.green_on {
        background: #93C01F;
    }
    
    #subnav ul li.blue {
        background: #D8E5F7;
    }
    
    #subnav ul li.blue:hover,
    #subnav ul li.blue_on {
        background: #0094E2;
    }
    
    #subnav ul li.purple {
        background: #DFCFF0;
    }
    
    #subnav ul li.purple:hover,
    #subnav ul li.purple_on {
        background: #6A28C1;
    }

    #subnav ul li a {
        color: #000;
        width: 170px;
        display: block;
        margin: 0 0 3px 0;
        padding: 3px 20px 3px 40px;
        
    }
    
    #subnav ul li a:hover,
    #subnav ul li.red_on a,
    #subnav ul li.yellow_on a,
    #subnav ul li.green_on a,
    #subnav ul li.blue_on a,
    #subnav ul li.purple_on a { 
        text-decoration: none;
        background: url(../img/template/subnav-liststyle.png) 10px 8px no-repeat;
    }
    
    #subnav ul li:last-child a:hover {
        background: none;
    }




/* ########## META NAVIGATION (Header) ################################## */

#meta_navigation ul {
    float: left;
    list-style: none;
}

    #meta_navigation ul li {
        float: left;
    }
    
        /* Standard Link */
        #meta_navigation ul li a {
            float: left;
            color: #fff; 
            display: block;
            font-style: italic;
            text-decoration: none; 
            padding: 6px 0 0 0;
        }
        
        /* Home Link */
        #meta_navigation ul li a#home {
            margin: 0 14px 0 20px;
        }
        
        /* Language Links */
        #meta_navigation ul li a#lang_de, 
        #meta_navigation ul li a#lang_en {
            margin: 0 14px 0 0;
            padding: 6px 0 0 22px;
        }

        a#lang_de {background: url(../img/template/lang_de.png) no-repeat 0 10px;}
        a#lang_en {background: url(../img/template/lang_en.png) no-repeat 0 10px;}
        
        
        /* MouseOver Effect */
        #meta_navigation ul li a:hover {
            color: #000;
        }