/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11 déc. 2015, 11:35:51
    Author     : Pygmalion
*/

/*Si l'écran est inférieur à 640px*/
@media screen and (max-width: 1200px) {
    nav, nav ul, nav ul li {
        display:none;
    }
    /* Body animation when left panel is opened */
    body.ps-active {
        -webkit-transform: translateX(400px);
        -ms-transform: translateX(400px);
        transform: translateX(400px);
    }

    /* Panel styles */
    .panel {
        position: fixed;
        top: 0;
        width: 400px;
        /*height: 100%;*/
        /*padding: 20px;*/
        background-color: #333!important;
        color: #fff;
        box-shadow: inset 0 0 5px 5px #222;
    }

    #left-panel {
        left: 0;
        -webkit-transform: translateX(-400px);
        -ms-transform: translateX(-400px);
        transform: translateX(-400px);
    }
}

@media screen and (min-width: 1200px) {
    nav {
        background:#000;
    }
    
    #left-panel, #left-panel-link{
        display:none;
    }

    #menu-deroulant, #menu-deroulant ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #menu-deroulant {
        /* on centre le menu dans la page */
        text-align: center;
    }
    #menu-deroulant li {
        /* on place les liens du menu horizontalement */
        display: inline-block;
        width:14.285%; /* 16.667% */

        line-height:50px;
        white-space: nowrap;
        font-size:15px;
        font-family:'Helvetica Neue', Helvetica;
    }

    #menu-deroulant #menu-deroulant-item {
        margin-left:-5px;
    }

    #menu-deroulant-item ul li {
        line-height:30px;
    }
    #menu-deroulant-item #menu-deroulant-item ul li {
        width:100px;
    }
    #menu-deroulant-item:nth-child(6){
        width:18%;
    }

    #menu-deroulant-item:nth-child(3), #menu-deroulant-item:nth-child(4){
        width:10%;
    }

    #menu-deroulant-item:nth-child(5) {
        width: 18%;
    }

    #menu-deroulant-item:nth-child(2) {
        width:18%;
    }

    #menu-deroulant-item:nth-child(1){
        width:16%; /* 16.667% */
    }
    #menu-deroulant-item:last-child{
        width:10.285%;
    }
    #menu-deroulant ul li {
        /* on enlève ce comportement pour les liens du sous menu */
        display: inherit;
    }
    #menu-deroulant a {
        text-decoration: none;
        display: block;
    }

    #menu-deroulant ul {
        position: absolute;
        /* on cache les sous menus complètement sur la gauche */
        left: -999em;
        text-align: left;
        z-index: 1000;
    }
    
    #menu-deroulant li:hover ul {
        /* Au survol des li du menu on replace les sous menus */
        left: auto;
    }
    
    #menu-deroulant li:last-child:hover ul {
        right:auto;
    }

    #menu-deroulant li:hover ul li{
        /* Au survol des li du menu on replace les sous menus */
        width:280px;
        padding-left:20px;
    }

    #menu-deroulant #menu-deroulant-item a,#menu-deroulant #menu-deroulant-item ul li a, #menu-deroulant #menu-deroulant-item li ul {
        color:#fff;    
    }

    #menu-deroulant #menu-deroulant-item:nth-child(3) ul li a, #menu-deroulant #menu-deroulant-item:nth-child(4) ul li a, #menu-deroulant #menu-deroulant-item:nth-child(5) ul li a, #menu-deroulant #menu-deroulant-item:nth-child(7) ul li a {
        color:#fff;
    }

    #menu-deroulant #menu-deroulant-item:nth-child(2) a,#menu-deroulant #menu-deroulant-item:nth-child(2) ul li a, #menu-deroulant #menu-deroulant-item:first-child a,#menu-deroulant #menu-deroulant-item:first-child{
        color:black;    
    }

    #menu-deroulant-item:first-child, #menu-deroulant > #menu-deroulant-item:first-child ul{
        background:#fff;
        background-image:-moz-linear-gradient( #F1EDED, #fff); /* #dd1576 #f2639b */
        background-image:-webkit-linear-gradient( #F1EDED, #fff);
        background-image:-o-linear-gradient( #F1EDED, #fff);
        background-image:linear-gradient( #F1EDED, #fff);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#F1EDED',endColorstr='#fff', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(2),#menu-deroulant > #menu-deroulant-item:nth-child(2) ul{
        background:#FFCF45;
        background-image:-moz-linear-gradient( #FFCF45, #ffd869); /* #096cad #678bb7 */
        background-image:-webkit-linear-gradient( #FFCF45, #ffd869);
        background-image:-o-linear-gradient( #FFCF45, #ffd869);
        background-image:linear-gradient( #FFCF45, #ffd869);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#FFCF45',endColorstr='#ffd869', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(3),#menu-deroulant > #menu-deroulant-item:nth-child(3) ul{
        background:#dd1576;
        background-image:-moz-linear-gradient( #dd1576, #f2639b);
        background-image:-webkit-linear-gradient( #dd1576, #f2639b);
        background-image:-o-linear-gradient( #dd1576, #f2639b);
        background-image:linear-gradient( #dd1576, #f2639b);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#dd1576',endColorstr='#f2639b', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(4),#menu-deroulant > #menu-deroulant-item:nth-child(4) ul {
        background:#096cad;
        background-image:-moz-linear-gradient( #096cad, #678bb7);
        background-image:-webkit-linear-gradient( #096cad, #678bb7);
        background-image:-o-linear-gradient( #096cad, #678bb7);
        background-image:linear-gradient( #096cad, #678bb7);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#096cad',endColorstr='#678bb7', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(5),#menu-deroulant > #menu-deroulant-item:nth-child(5) ul {
        background:#99c20d;
        background-image:-moz-linear-gradient( #99c20d, #b4cf55); 
        background-image:-webkit-linear-gradient( #99c20d, #b4cf55);
        background-image:-o-linear-gradient( #99c20d, #b4cf55);
        background-image:linear-gradient( #99c20d, #b4cf55);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#99c20d',endColorstr='#b4cf55', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(6),#menu-deroulant > #menu-deroulant-item:nth-child(6) ul{
        background:#92278F;
        background-image:-moz-linear-gradient( #92278F, #c761c4);
        background-image:-webkit-linear-gradient( #92278F, #c761c4);
        background-image:-o-linear-gradient( #92278F, #c761c4);
        background-image:linear-gradient( #92278F, #c761c4);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#92278F',endColorstr='#c761c4', 
            GradientType=0);
    }


    #menu-deroulant-item:last-child,#menu-deroulant > #menu-deroulant-item:last-child ul{
        background:#000;
    }

    #menu-deroulant > #menu-deroulant-item ul li:hover {
        background-color:#fff;
    }

    #menu-deroulant > #menu-deroulant-item ul li:hover a:hover {
        color:#222;
    }

}

/* DEBUT MOBILE */
@media screen and (max-width: 1200px) {


    #menu-deroulant, #menu-deroulant ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #menu-deroulant li {
        /* on place les liens du menu horizontalement */
        display: block;
        width:100%;
        line-height:50px;
        font-size:18px;
        font-family:'Helvetica Neue', Helvetica;
    }

    #menu-deroulant-item ul li {
        line-height:30px;
    }

    #menu-deroulant-item{
        width:100%;
    }

    #menu-deroulant ul li {
        /* on enlève ce comportement pour les liens du sous menu */
        display: inherit;
    }
    #menu-deroulant a {
        text-decoration: none;
        display: block;
    }

    #menu-deroulant #menu-deroulant-item a,#menu-deroulant #menu-deroulant-item ul li a {
        color:#fff;    
    }
    #menu-deroulant a{
        padding-left:10px;
    }
    #menu-deroulant-item ul li {
        padding-left:30px;
    }

    #menu-deroulant-item, #menu-deroulant-item > a {
        border-bottom:1px solid #000;
    }

    #menu-deroulant #menu-deroulant-item:nth-child(2) a,#menu-deroulant #menu-deroulant-item:nth-child(2) ul li a, #menu-deroulant #menu-deroulant-item:first-child a,#menu-deroulant #menu-deroulant-item:first-child{
        color:black;    
    }
    
    #menu-deroulant-item:first-child, #menu-deroulant > #menu-deroulant-item:first-child ul{
        background:#fff;
        background-image:-moz-linear-gradient( #F1EDED, #fff); /* #dd1576 #f2639b */
        background-image:-webkit-linear-gradient( #F1EDED, #fff);
        background-image:-o-linear-gradient( #F1EDED, #fff);
        background-image:linear-gradient( #F1EDED, #fff);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#F1EDED',endColorstr='#fff', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(2),#menu-deroulant > #menu-deroulant-item:nth-child(2) ul{
        background:#FFCF45;
        background-image:-moz-linear-gradient( #FFCF45, #ffd869); /* #096cad #678bb7 */
        background-image:-webkit-linear-gradient( #FFCF45, #ffd869);
        background-image:-o-linear-gradient( #FFCF45, #ffd869);
        background-image:linear-gradient( #FFCF45, #ffd869);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#FFCF45',endColorstr='#ffd869', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(3),#menu-deroulant > #menu-deroulant-item:nth-child(3) ul{
        background:#dd1576;
        background-image:-moz-linear-gradient( #dd1576, #f2639b);
        background-image:-webkit-linear-gradient( #dd1576, #f2639b);
        background-image:-o-linear-gradient( #dd1576, #f2639b);
        background-image:linear-gradient( #dd1576, #f2639b);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#dd1576',endColorstr='#f2639b', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(4),#menu-deroulant > #menu-deroulant-item:nth-child(4) ul {
        background:#096cad;
        background-image:-moz-linear-gradient( #096cad, #678bb7);
        background-image:-webkit-linear-gradient( #096cad, #678bb7);
        background-image:-o-linear-gradient( #096cad, #678bb7);
        background-image:linear-gradient( #096cad, #678bb7);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#096cad',endColorstr='#678bb7', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(5),#menu-deroulant > #menu-deroulant-item:nth-child(5) ul {
        background:#99c20d;
        background-image:-moz-linear-gradient( #99c20d, #b4cf55); 
        background-image:-webkit-linear-gradient( #99c20d, #b4cf55);
        background-image:-o-linear-gradient( #99c20d, #b4cf55);
        background-image:linear-gradient( #99c20d, #b4cf55);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#99c20d',endColorstr='#b4cf55', 
            GradientType=0);
    }

    #menu-deroulant-item:nth-child(6),#menu-deroulant > #menu-deroulant-item:nth-child(6) ul{
        background:#92278F;
        background-image:-moz-linear-gradient( #92278F, #c761c4);
        background-image:-webkit-linear-gradient( #92278F, #c761c4);
        background-image:-o-linear-gradient( #92278F, #c761c4);
        background-image:linear-gradient( #92278F, #c761c4);
        filter:progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#92278F',endColorstr='#c761c4', 
            GradientType=0);
    }


    #menu-deroulant-item:last-child,#menu-deroulant > #menu-deroulant-item:last-child ul{
        background:#000;

    }

}
/* FIN MOBILE */


#menu-deroulant-item:nth-child(3), .sous-menu-deroulant li table tr td {
    color: white;
}

#menu-deroulant-item:nth-child(4), .sous-menu-deroulant li table tr td {
    color: white;
}

#menu-deroulant-item:nth-child(5), .sous-menu-deroulant li table tr td {
    color: white;
}

#menu-deroulant-item:nth-child(6), .sous-menu-deroulant li table tr td {
    color: white;
}

#menu-deroulant-item:nth-child(6) .sous-menu-deroulant:hover, .sous-menu-deroulant li table tr:hover td{
    color: black;
}

#menu-deroulant-item:nth-child(5) .sous-menu-deroulant:hover, .sous-menu-deroulant li table tr:hover td{
    color: black;
}

#menu-deroulant-item:nth-child(4) .sous-menu-deroulant:hover, .sous-menu-deroulant li table tr:hover td{
    color: black;
}

#menu-deroulant-item:nth-child(3) .sous-menu-deroulant:hover, .sous-menu-deroulant li table tr:hover td{
    color: black;
}

#menu-deroulant-item:first-child .sous-menu-deroulant li table tr td {
    color: black;
}

#menu-deroulant-item:nth-child(2) .sous-menu-deroulant li table tr td {
    color: black;
}

.sous-menu-deroulant ul{
    display: none !important;
    position: absolute !important; 
    left: 140px !important; 
    margin: 0px !important; 
    padding: 0px !important; 
}

.sous-menu-deroulant:hover ul.sous-menu-deroulant-item {
    display: block !important;
}