/* CSS menu gauche.

/* Effet de transition lorsque des éléments se plient ou se déplient */
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/* On définit la largeur du menu dans le layout (mise en page) */
#layout.active #menu {
  left: 180px;
  width: 180px;
}

#layout.active .menu-link {
  left: 180px;
}

/* Le div #menu contient le .pure-menu qui apparait à gauche */
#menu {
  margin-left: -180px; /* "#menu" width */
  width: 180px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000; /* pour que le menu ou son icone soient toujours visibles */
  background: #F8F8F8; /*#4C4C4C; */
  border-right: 1px solid #999999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 12px;
}

/* Logo en haut du menu */
#menu-logo {
  padding-top: 3px;
  /*height: 50px;*/
  background-color: #E3E3E3; /*white;*/
  /*box-shadow: 5px 0px 20px #888888;*/
}

/* Style de toutes les ancres à l'intérieur du menu */
#menu a {
  color: #635D5D; /*#F4F4F4; /*#E5E5E5; /*#CACACA; /*#999;*/
  border: none;
  /*padding: 0.6em 0 0.6em 0.7em;*/
  padding: 0.2em 0 0.3em 0.8em;
}

/* suppression de tous les arrière-plans et des bordures */
#menu .pure-menu,
#menu .pure-menu ul {
  border: none;
  background: transparent;
}

/* On décale les items de menu vers la droite 
#menu .pure-menu-item {
  padding-left: 1em;
}
*/


/* ajout d'une ligne de séparation */
#menu .pure-menu .menu-item-divided {
  border-top: 1px solid #999999; /*#333;*/
}

/* Change la couleur du lien actif ou
   qui a le focus */

#menu .pure-menu li a:focus,
#menu .pure-menu li a:active {
  background: #1F8DD6;
  border: none;
}

/* Change la couleur du lien au survol */
#menu .pure-menu li a:hover {
  background: #D1F6DE; /*#807B7B; /*#1FBF13;*/
  color : black; /*white;*/
}

/* Style l'élément <li> sélectionné */
#menu .pure-menu-selected {
  background: #B6DBF7; /*#1f8dd6;*/
}

#menu .pure-menu-heading {
  /*background: #1f8dd6;*/
  color: #546B92; /*#635D5D; /*white;*/
  font-size: 16px; /*1.15em;*/
  border-top: 1px solid #D6D6D6; /*#999;*/
  padding: 0.5em 0.7em;
}

#menu .pure-menu-heading2 {
  color: #546B92; /*#635D5D; /*white;*/
  font-size: 14px; /*1.15em;*/
  padding: 2em 0 0.5em 0.7em;
}


/* style le lien dans l'élément <li> sélectionné */
#menu .pure-menu-selected a {
  color: black; /*white;*/
}


/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #757575;  /*#000;*/
    /*background: rgba(0,0,0,0.7);*/
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }


/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #layout {
        padding-left: 180px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 180px;
    }

    .menu-link {
        position: fixed;
        left: 180px;
        display: none;
    }

    #layout.active .menu-link {
        left: 180px;
    }
}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 180px;
    }
}