html { height: 100%; }

*,
*:after,
*:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
}

body {
        font-family:  Calibri, Arial, sans-serif;
        background:lightblue;
        font-weight: bold;
        font-size: 18px;
        color: navy;
        height: 100%;
}

.js body {
        overflow: hidden;
}

a {
        color: darkslategray;
        text-decoration: none;
        outline: none;
}

a:hover {
        color: darkred;
}

.container,
.bb-custom-wrapper,
.bb-bookblock {
        width: 100%;
        height: 100%;
}

.container {
        position: relative;
        left: 0px;
        -webkit-transition: left 0.3s ease-in-out;
        -o-transition: left 0.3s ease-in-out;
        transition: left 0.3s ease-in-out;
}

.slideRight {
        left: 200px;
}

.no-js .container {
        padding-left: 200px;
}

.menu-panel {
        background:slategray;
        width: 200px;
        height: 100%;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.js .menu-panel {
        position: absolute;
        left: -200px;
}

.menu-panel h3 {
        font-size: 1.8em;
        padding: 20px;
        font-weight: bold;
        color: lightgreen;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

.menu-toc {
        list-style: none;
}

.menu-toc li a {
        display: block;
        color: darkred;
        font-size: 18px;
        line-height: 2.2;
        padding: 0 10px;
        cursor: pointer;
        background:slategray ;
        border-bottom: 2px solid black;
}

.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
        background: ;
        color:tan;
}

.menu-panel div {
        margin-top: 20px;
}

.menu-panel div a {
        text-transform: capitalise;
        font-size: 0.7em;
        line-height: 1;
        padding: 5px 10px;
        display: block;
        border: none;
        color: tan;
        letter-spacing: 1px;
        font-weight: 800;
        text-shadow: 0 1px rgba(255,255,255,0.2);
}

.menu-panel div a:hover {
        background: inherit;
        color: silver;
        text-shadow: none;
}
/* decalage Gauche et en hauteur des fleches D / G */
.bb-custom-wrapper nav {
        top: 1px;
        left: 220px;
        position: absolute;
  z-index: 1000;
}

.bb-custom-wrapper nav span,
.menu-button {   /* Forme button couleur pourtour  */
        position: absolute;
        width: 46px;
        height: 36px;
        top: 0;
        left: 0;
        font-size:2.2em ;
        background:orangered;
        border-radius: 30%;
        color: black;
        line-height: 30px;
        text-align: center;
        speak: none;
        font-weight:bold;
        cursor: pointer;
 border: 3px solid gold;
}

.bb-custom-wrapper nav span:hover,
.menu-button:hover {
   background: skyblue;
 /*  content:'&#9660';
http://earth.google.com/images/kml-icons/track-directional/track-8.png          fleche vers le bas  64pix
http://earth.google.com/images/kml-icons/track-directional/track-4.png          fleche vers la droite
http://earth.google.com/images/kml-icons/track-directional/track-12.png        fleche vers la gauche
http://maps.google.com/mapfiles/dir_60.png     pointe vers le bas 24 pix
 */
content: url(http://maps.google.com/mapfiles/kml/pal4/icon28.png);
/* content: url(http://www.lannuet.eu/bamako/flechadroite.gif); ou  ▼ = triangle noir pointant vers le bas */
}

.bb-custom-wrapper nav span:last-child {
        left: 70px;
}
 /*decalage bouton LISTING a gauche */
.menu-button {
        z-index: 1000;
        left: 16px;
        top: 12px;
    border: 3px solid black;
        text-indent: -9000px;
}

.menu-button:after {
        position: absolute;
    content: "";
        width: 50%;
        height: 2px;
        background: blue;
        top: 50%;
        margin-top: -1px;
        left: 25%;
        box-shadow: 0 -4px navy, 0 4px black;
}

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
        display: none;
}

.js .content {
        position: absolute;
        top: 3px;
        left: 0;
        width: 100%;
        bottom: 30px;
        overflow: hidden;
        -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
background: -moz-linear-gradient(-45deg,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.scroller {
        padding: 10px 5% 10px 5%;
}

.js .content:before,
.js .content:after {
        content: '';
        position: absolute;
        top: 1px;
        left: 0;
        width: 100%;
        height: 30px;
        z-index: 100;
        pointer-events: none;
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);

}

.js .content:after {
        top: auto;
        bottom: 0;
      background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);

}

.content h2 {
        font-weight: bold;
        font-size: 2em;
        padding: 0 0 10px;
        color: navy;
        margin: 0 1% 20px;
        text-align: left;
        box-shadow: 0 10px 0 rgba(0,0,0,0.02);
        text-shadow: 0 0 2px #fff;
}

.no-js .content h2 {
        padding: 20px 1% 20px;
}

.content p {
        font-size: 1.2em;
        line-height: 1.6;
        font-weight: 800;
        padding: 5px 8%;
        text-align: justify;
}

@media screen and (max-width: 800px){
        .no-js .menu-panel {
                display: none;
        }

        .no-js .container {
                padding: 0;
        }
}

@media screen and (max-width: 400px){
        .menu-panel,
        .content {
                font-size: 75%;
        }
}