/**
 * Menü quer
 *
 * NOTE: Nach einem Tutorial von
 * http://www.red-team-design.com/css3-dropdown-menu (dort wird auch mit
 * Schattierungen gearbeitet) und
 * http://www.red-team-design.com/css3-animated-dropdown-menu für die
 * Animation.
 * Im Gegensatz zu diesem Tutorial werden IE6 und IE7 nicht separat
 * berücksichtigt. Infos dazu gibt es dort.
 *
 * Für die Animation mittels der transition halfen außerdem
 * http://www.w3schools.com/css3/css3_transitions.asp und
 * http://www.w3schools.com/cssref/css3_pr_transition-timing-
 * function.asp
 * 
 * Neben kleineren Anpassungen ist von mir die Rechtsausrichtung und das
 * 2. Untermenü auf der linken Seite
 */

/**
 * Generelle Formatierungen
 *
 * NOTE:
 */

/* Listenpunkte entfernen */
div#menu ul {
    list-style: none;
    }

@media all and (min-width: 991px) {
    div#menu ul,
    div#menu ul li {
        margin:      0;
        padding:     0;
        position:    relative;
        z-index:99;
    }

    /**
     * Hauptmenü - Die oberste Liste formatieren
     *
     * NOTE:
     */
    div#menu > ul#menu_0 {
        float:      right;
    }
    
    /* Listenpunkte und Links allgemein formatieren */
    div#menu > ul#menu_0 > li {
        float:       left;
        padding:     10px 10px 10px 15px;
        width:       150px;
        height:      120px;

        -moz-border-radius:    25px;
        -webkit-border-radius: 25px;
        -o-border-radius:      25px;
        border-radius:         25px;
        
    }
/*
    div#menu > ul li {
        padding-left: 10px;
        text-indent: -10px;
    }
*/
    div#menu > ul > li span,
    div#menu > ul > li a {
        visibility: hidden; 
        font-size: 3em/2em;
        font-weight: bold;
    }
    
    div#menu > ul > li:hover span,
    div#menu > ul > li:active span,
    div#menu > ul > li:hover a,
    div#menu > ul > li:active a {
        visibility: visible;
    }
    
    div#menu > ul > li {
        margin:      0 0 0 20px;
        background: #4fbd36; /* green */
        background-image: url('/files/menu_bg.png'),
            -o-linear-gradient(#4fbd36, #5fce47);
        background-image: url('/files/menu_bg.png'),
            -moz-linear-gradient(#4fbd36, #5fce47);
        background-image: url('/files/menu_bg.png'),
            -webkit-linear-gradient(#4fbd36, #5fce47);
        background-image: url('/files/menu_bg.png'),
            linear-gradient(#4fbd36, #5fce47);
        background-position: center top;
    }
    
    div#menu > ul > li:first-child {
        margin: 0;
        background: #ed1c24; /* red */
        background-image: url('/files/menu_bg.png'),
            -o-linear-gradient(#ed1c24, #fe2d35);
        background-image: url('/files/menu_bg.png'),
            -moz-linear-gradient(#ed1c24, #fe2d35);
        background-image: url('/files/menu_bg.png'),
            -webkit-linear-gradient(#ed1c24, #fe2d35);
        background-image: url('/files/menu_bg.png'),
            linear-gradient(#ed1c24, #fe2d35);
        background-position: left top;
    }
    
    div#menu > ul > li:last-child {
        background: #f47216; /* orange */
        background-image: url('/files/menu_bg.png'),
            -o-linear-gradient(#f47216, #f58327);
        background-image: url('/files/menu_bg.png'),
            -moz-linear-gradient(#f47216, #f58327);
        background-image: url('/files/menu_bg.png'),
            -webkit-linear-gradient(#f47216, #f58327);
        background-image: url('/files/menu_bg.png'),
            linear-gradient(#f47216, #f58327);
        background-position: right top;
    }

    div#menu > ul > li:hover,
    div#menu > ul > li:active {
        background-position: center bottom;
    }
    
    div#menu > ul > li:hover:first-child,
    div#menu > ul > li:active:first-child {
        background-position: left bottom;
    }
    
    div#menu > ul > li:hover:last-child,
    div#menu > ul > li:active:last-child {
        background-position: right bottom;
    }

/**
 * Falls man mit Dingbats arbeiten kann ist der folgende auskommentierte
 * Teil benutzbar.
 *
 * 
    div#menu > ul > li span,
    div#menu > ul > li a {
        visibility: hidden;
    }
    
    div#menu > ul > li:hover span,
    div#menu > ul > li:hover a {
        visibility: visible;
    }
    
    div#menu > ul > li span,
    div#menu > ul > li a {
        position: relative;
        z-index:2;
    }
    
    div#menu > ul > li:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 130px;
        margin: inherit;
        padding-top: inherit;
        padding-left: inherit;
        padding-right: inherit;
        content: "?";
        font-size: 90px;
        line-height: 100px;
        font-weight: normal;
        color: #eef;
        opacity: 1;
        vertical-align: baseline;
        text-align:center;
        z-index: 1;
    }

    div#menu > ul > li:last-child:before {
        padding-top: 0;
        content: "✉";
    }
    
    div#menu > ul > li:first-child:before {
        content: "➫";
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    div#menu > ul > li:hover:before {
        opacity: 0.3;
    }
*/
    div#menu > ul#menu_0 a,
    div#menu > ul#menu_0 span {
        padding: 40px 0 60px 0;
        display:   block;
        text-align:center;

        color:     #fff;
        text-decoration: none;
        font-size: 20pt;
        font-weight: bold;
    }
/*  
    div#menu > ul#menu_0 > li > a,
    div#menu > ul#menu_0 > li > span {
        text-align: center;
    }
*/
    div#menu > ul#menu_0 span {
        color: #000;
    }

    div#menu > ul#menu_0 li.menu_active_page > span,
    div#menu > ul#menu_0 li:hover > a,
    div#menu > ul#menu_0 li:active > a {
        color: #fff;

    }

    div#menu > ul#menu_0 li li:hover > a,
    div#menu > ul#menu_0 li li:active > a {
        color: #ddd;
    }

    div#menu > ul#menu_0 li.menu_active_page > span {
        text-decoration: none;
        color: #ffa;
    }

    /**
     * Untermenüs formatieren
     *
    div#menu > ul#menu_0 > li > ul {
        visibility: hidden;
        opacity:0.5;
        transition: all .1s linear .1s;
        -moz-transition: all .1s linear .1s;
        -webkit-transition: all .1s linear .1s;
        -o-transition: all .1s linear .1s;
    }


/*
    div#menu > ul#menu_0 li:hover > ul,
    div#menu > ul#menu_0 li:active > ul {
        visibility: visible;
        opacity: 1;
    }
* 
    div#menu > ul#menu_0 li:hover > ul {
        visibility: visible;
        opacity: 1;
    }

    div#menu > ul#menu_0 li:active > ul {
        -webkit-transition: opacity .1s linear;
    }

/**
    div#menu > ul#menu_0 ul li {
        float: none;
        margin: 0;
        padding: 0;
        display: block;
    }
/**/
}

@media all and (max-width:990px) {
    div#menu > ul#menu_0 {
        float: right;
        margin: 10px 0 0 0;
    }

    div#menu > ul#menu_0,
    div#menu > ul#menu_0 ul {
    }
    
    div#menu > ul#menu_0 {
        width: 150px;
    }
    
    div#menu > ul#menu_0 > li {
        -moz-border-radius:    4px;
        -webkit-border-radius: 4px;
        -o-border-radius:      4px;
        border-radius:         4px;
        
    }
    div#menu > ul#menu_0 > li ul {
        -moz-border-radius:    0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
        -o-border-radius:      0 0 4px 4px;
        border-radius:         0 0 4px 4px;
    }

    div#menu > ul#menu_0 > li,
    div#menu > ul#menu_0 > li ul {
        background: #4fbd36; /* green */
        background-image: -webkit-linear-gradient(#4fbd36, #5fce47);
        background-image: -moz-linear-gradient(#4fbd36, #5fce47);
        background-image: -o-linear-gradient(#4fbd36, #5fce47);
        background-image: linear-gradient(#4fbd36, #5fce47);
    }

    div#menu > ul#menu_0 > li:first-child,
    div#menu > ul#menu_0 > li:first-child ul {
        background: #ed1c24; /* red */
        background-image: -webkit-linear-gradient(#ed1c24, #fe2d35);
        background-image: -moz-linear-gradient(#ed1c24, #fe2d35);
        background-image: -o-linear-gradient(#ed1c24, #fe2d35);
        background-image: linear-gradient(#ed1c24, #fe2d35);
    }
    
    div#menu > ul#menu_0 > li:last-child,
    div#menu > ul#menu_0 > li:last-child ul {
        background: #f47216; /* orange */
        background-image: -webkit-linear-gradient(#f47216, #f58327);
        background-image: -moz-linear-gradient(#f47216, #f58327);
        background-image: -o-linear-gradient(#f47216, #f58327);
        background-image: linear-gradient(#f47216, #f58327);
    }

    div#menu > ul#menu_0 li,
    div#menu > ul#menu_0 ul li {
        position: relative;
        padding: 0;
        color: #fff;
    }
    
    div#menu > ul#menu_0 > li {
        margin: 0 0 10px 0;
    }
    
    div#menu > ul#menu_0 a,
    div#menu > ul#menu_0 span {
        display: block;
        width: 130px;
        padding: 2px 10px;
        color: inherit;
        text-decoration: none;
        text-align: right;
        font-size: 14px;
        
        line-height: 28px;
        font-weight: bold;
        letter-spacing: 1px;
    }
    
    div#menu > ul#menu_0 ul a,
    div#menu > ul#menu_0 ul span {
        text-align:left;
        border-bottom: solid 1px #fff;
        font-size: 13px;
        line-height: 26px;
        font-weight: normal;
    }

    div#menu > ul#menu_0 ul li:last-child > a,
    div#menu > ul#menu_0 ul li:last-child > span {
        border-bottom: none;
    }

    div#menu > ul#menu_0 ul {
        width: 150px;
/*
        border:solid 1px #fff;
*/
    }
    
    div#menu > ul#menu_0 a:hover,
    div#menu > ul#menu_0 a:active {
        color: #ccc;
    }
    
    /**
     * Untermenüs formatieren
     *
    div#menu > ul#menu_0 ul {
        z-index: 99;
        position: absolute;
        right: 0;
        margin: 0;
        padding: 0;
        top: 30px;
        visibility: hidden;
        opacity: .5;
        transition: all .1s linear .1s;
        -moz-transition: all .1s linear .1s;
        -webkit-transition: all .1s linear .1s;
        -o-transition: all .1s linear .1s;
    }
    
    div#menu > ul#menu_0 ul ul ul {
        left: 0;
    }
    div#menu > ul#menu_0 ul ul ul ul ul {
        right: 0;
    }

/*
    div#menu > ul#menu_0 li:hover > ul,
    div#menu > ul#menu_0 li:active > ul {
        top:18px;
        visibility: visible;
        opacity: 1;
    }
*
    div#menu > ul#menu_0 li:hover > ul {
        visibility: visible;
        opacity: 1;
    }

    div#menu > ul#menu_0 li:active > ul {
        -webkit-transition: opacity .1s linear;
    }

/**

    div#menu > ul#menu_0 ul li {
        float: none;
        margin: 0;
        padding: 0;
        display: block;
    }
/**/
}


/* Clear floated elements */
div#menu > ul:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }