/* ----------------------------- */
/* ==website                    */
/* --------------------------- */

.w15    { width: 15%; }


@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.svg#icomoon') format('svg'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body:before, body:after {
    color: rgba(0, 0, 0, 0.03);
    font: 22em/0 normal;
    left: 1%;
    position: fixed;
    top: 0.2em;
    z-index: -1;
}
body:after {
    content: "/" "›";
    font: 22em/0 normal;
    left: auto;
    right: 1%;
}
body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}
.h1-like, .h2-like, h3, .h3-like, .tagline {
    font-weight: normal;
    margin: 0;
    text-align: center;
    font-family: 'Yanone Kaffeesatz', Garamond, Palatino, serif;
}
.h1-like {
    font-size: 5em;
    font-variant: small-caps;
    font-weight: 100;
    line-height: 1em;
    letter-spacing: -1px;
    color: #1985c6;
}
h1.h1-like {margin-top: .3em;}
.h1-like a, .h1-like a:visited, .h1-like a:hover {
    color: #1985c6;
    text-decoration: none;
    border-bottom: none;
}
h2, .h2-like {
    font-weight: bold;
    color: #555;
}
header {
    position: relative;
    width: 600px;
    margin: auto;
    margin-bottom: 2em;
}
.tagline {
    font-size: 1.55em;
    color: #888;
    margin: -15px 0 0 0;
    padding: 0;
}
header:hover .tagline {color: #555;}
h2.txtleft, .h2-like.txtleft {text-align: left}
h3, .h3-like {
    margin-bottom: 0;
    margin-top: 0;
    color: #555;
}
strong, b, i, em, .alternate, code {color: #1985c6}
i {font-style: normal}
.item.phone-hidden {padding-left: 20px;}
.tip-left:before {
    color: #ddd;
    content: "◄";
    font-size: 30px;
    left: -24px;
    line-height: 0;
    position: absolute;
    top: 22px;
}
.tip-left {
    position: relative;
    background: #ddd;
}
a {
    border-bottom: 1px dotted #333333;
    color: #333;
    text-decoration: none;
}
a:visited {
    color: #777;
}

a:hover, a:focus {
    border-bottom: 1px solid #333333;
}

.mod, .col {
    padding: 1em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.03);
}
.mod.tip-left {background: #ddd;}
footer {
    padding-top: 10px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #777;
}
footer a {
    border-bottom: none;
}

.demo, .demo:visited {
    -webkit-transition: background-color 0.4s;
    -moz-transition: background-color 0.4s;
    -ms-transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    transition: background-color 0.4s;

    background-color: #91BD09;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #fff;
    display: inline-block;
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px 18px;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 0;
}

.demo:hover, .demo:focus {
    background-color: #7EA103;
    border-bottom: 0;
}
.demo.alternate {
    background-color: #1985c6;
}
.demo.alternate:hover, .demo.alternate:focus {
    background-color: #912402;
}
.demo-dl:before {
    content: "\21EE ";
    margin-right: 8px;
    display: inline-block;
    font-weight: bold;
    -webkit-transform: scale(1.2) rotate(180deg) rotateZ(0.05deg);
    transform: scale(1.2) rotate(180deg) rotateZ(0.05deg);
}

[class^="ico-"] {
    display: block;
    line-height: 1;
}
[class^="ico-"]:before {
    display: block;
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    text-align: center;
    font-size: 8em;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.25);
    -webkit-font-smoothing: antialiased;
}
.ico-puzzle:before {
    content: "\30";
}
.ico-tag:before {
    content: "\31";
}
.ico-comments:before {
    content: "\32";
}
.ico-grid-view:before {
    content: "\33";
}
.ico-mobile:before {
    content: "\34";
}
.ico-monitor:before {
    content: "\35";
}
.ico-feather:before {
    content: "\36";
}


pre {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    padding: 1em;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.1);
    background: rgba(255,255,255,.6);
}

#ribbon {
    position: fixed;
        top: 3em; left: -5em;
        z-index: 1;
    -webkit-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    background: -moz-linear-gradient(top, #a4cf3c 0%, #a0cf38 41%, #75b829 100%);
    background: -webkit-linear-gradient(top, #a4cf3c 0%,#a0cf38 41%,#75b829 100%);
    background: -ms-linear-gradient(top, #a4cf3c 0%,#a0cf38 41%,#75b829 100%);
    background: linear-gradient(to bottom, #a4cf3c 0%,#a0cf38 41%,#75b829 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4cf3c', endColorstr='#75b829',GradientType=0 ); /* IE6-9 */
    padding: 1px 0;
    overflow: hidden;
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    -ms-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.ie678 #ribbon {display:none}

#ribbon p {
    color: #fff;
    border: 1px solid #d5e965;
    margin: 0.05em 0;
    padding: 0.5em 5.5em;
    text-align: center;
  font-size: 1em;
  font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,.5);
}

/* ----------------------------- */
/* ==icons and bullets           */
/* ----------------------------- */

.icon {
    display: inline-block;
    background: rgba(0,0,0,.1);
    padding: .5em;
    margin: 0 .5em .5em 0;
    border-radius: 4px;
}

.icon:before,
.icon > li:before,
.icon.after:after,
.icon.after > li:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative; top: -.1em;
  margin: 0 0.3em 0 0;
  font: 1.4rem/1 sans-serif;
  color: #000;
  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
  speak: none;
}

@media (min-device-width: 768px) {
  .icon:before,
  .icon > li:before,
  .icon.after:after,
  .icon.after > li:after {
  font: 1em/0.6 sans-serif;
  -webkit-transform: rotateZ(0.05deg);
  }
}

.icon.after:after,
.icon.after > li:after {
  margin: 0 0 0 8px;
}

ul.icon {display: block;}
ul.icon > li {list-style: none;}
ul.icon:before,
ul.icon.after:after {content:""}
.icon.after:before,
.icon.after > li:before {content: "" !important}

.icon-check:before,
.icon-check > li:before,
.icon-check.after:after,
.icon-check.after > li:after {
  content: "\2713";
}
.icon-uncheck:before,
.icon-uncheck > li:before,
.icon-uncheck.after:after,
.icon-uncheck.after > li:after {
  content: "\2717";
}
a.icon {
    border-bottom: 0;
}
a.icon:hover, a.icon:focus {
    background-color: rgba(0,0,0,.2);
}

@media (max-width: 1024px) {
    #ribbon {display: none}
}

@media (max-width: 960px) {
    body {padding: 5px 10px;}
    [class^="ico-"]:before {
        font-size: 6em;
    }
    .demo.alternate {margin-bottom: 1em}
    .phone-hidden {display: none}
    pre.w50 {width: 70%;}
    .row {width: 100%!important}
}

@media (max-width: 640px) {
    .row > * {
        display: block;
        width: auto;
        border-left: 0!important;
    }
    .col {margin-bottom: 1em!important;}
    [class^="ico-"]:before {
        font-size: 4em;
    }
    .demo.alternate {margin-right: 0}
    body:before, body:after {
        display: none;
    }
    p.h3-like {font-size: 1.6em; margin-bottom: 0}
}

/* ----------------------------- */
/* ==grids                       */
/* ----------------------------- */

/* equal grids with 2% gutter */
[class^=grid]:after {
    content: "";
    display: table;
    clear: both;
}
[class^=grid] > * {float: left; } /* direct childrens are floating */
[class^=grid] > * + * { margin-left: 2%; } /* here's the gutter */
.grid2 > * { width: 49%; }
.grid3 > * { width: 32%; }
.grid4 > * { width: 23.5%; }
.grid5 > * { width: 18.4%; }
.grid6 > * { width: 15%; }

/* unequal grids (1-2, 2-1, 1-3 and 3-1) with 2% gutter */
.grid2-1 > *:first-child,
.grid1-2 > * + * { width: 66%; }
.grid1-2 > *:first-child,
.grid2-1 > * + * { width: 32%; }
.grid1-3 > *:first-child,
.grid3-1 > * + * { width: 23.5%; }
.grid3-1 > *:first-child,
.grid1-3 > * + * { width: 74.5%; }

/* ----------------------------- */
/* ==autogrids                  */
/* ----------------------------- */

/* auto-justified equal grids */

[class*="autogrid"] {
    text-align: justify;
    font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */
}
[class*="autogrid"]:after {
    content: "";
    display: inline-block;
    width: 100%;
}
[class*="autogrid"] > * {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */
    *display: inline; *zoom: 1; /* ie6 / ie7 hack */
}
.autogrid2 > * {width: 49%}
.autogrid3 > * {width: 32%}
.autogrid4 > * {width: 23.6%}
.autogrid5 > * {width: 19%}
.autogrid6 > * {width: 15%}
.autogrid8 > * {width: 10.8%}
.autogrid10 > * {width: 9%}
.autogrid12 > * {width: 6.4%}

/* Responsiv-o-matic */

@media (max-width: 1024px) {
    .autogrid5 > *,
    .autogrid6 > *,
    .autogrid8 > *,
    .autogrid10 > *,
    .autogrid12 > * {width: 32%}
}
@media (max-width: 768px) {
    .autogrid3 > *,
    .autogrid4 > *,
    .autogrid5 > *,
    .autogrid6 > *,
    .autogrid8 > *,
    .autogrid10 > *,
    .autogrid12 > * {width: 49%}
}
@media (max-width: 640px) {
    [class*="autogrid"] > * {width: 100%}
}
/* ----------------------------- */
/* ==desktop and retina medias   */
/* ----------------------------- */

@media (min-width: 641px) {
    body {
        padding-top: 3em;
    }
    [id="primary-nav"] {
        position: absolute;
            top: 0; left: 0; right: 0;
        padding-bottom: 1px;
        text-align: center;
        background: #eee;
    }
    [id="primary-nav"] ul {
        padding: 0;
    }
    [id="primary-nav"] li {
        display: inline;
    }
    [id="primary-nav"] li + li {
        border-left: 1px solid #ddd;
        padding-left: 4px;
    }
    [id="primary-nav"] a {
        position: relative; top: 0;
        z-index: 1;
        display: inline-block;
        padding: .3em 2em;
        color: #666;
        text-decoration: none;
        border-bottom: none;
        -webkit-transition: .4s;
           -moz-transition: .4s;
            -ms-transition: .4s;
             -o-transition: .4s;
                transition: .4s;
    }
    [id="primary-nav"] a:hover, [id="primary-nav"] a:focus {border-bottom: none;}
    [id="primary-nav"] a:visited {color: #888}
    [id="primary-nav"] a:before {
        content: "";
        position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
            z-index: -1;
        background: #eee;
        border-radius: 0 0 100% 100%;
        -webkit-transition: .4s;
           -moz-transition: .4s;
            -ms-transition: .4s;
             -o-transition: .4s;
                transition: .4s;
    }
    [id="primary-nav"] a:hover, [id="primary-nav"] a:focus {color: #333; outline: none; top: 4px;}
    [id="primary-nav"] a:hover:before, [id="primary-nav"] a:focus:before {
        top: .6em;
        bottom: -.5em;
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */
}

/* ---------------------------------- */
/* ==Responsive large / medium / tiny */
/* ---------------------------------- */

@media (min-width: 1280px) {

    /* layouts for large (l) screens */
    .large-hidden,
    .tablet-hidden { display: none !important; }
    .large-visible { display: block !important; }
    .large-no-float {float: none; }
    .large-inbl {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .large-row {
        display: table;
        table-layout: fixed;
        width: 100% !important;
    }
    .large-col {
        display: table-cell;
        vertical-align: top;
    }

    /* widths for large (l) screens */
    .large-w25 { width: 25% !important; }
    .large-w33 { width: 33.3333% !important; }
    .large-w50 { width: 50% !important; }
    .large-w66 { width: 66.6666% !important; }
    .large-w75 { width: 75% !important; }
    .large-w100 {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0;
    }

    /* margins for large (l) screens */
    .large-ma0,
    .large-man { margin: 0 !important; }
}

@media (max-width: 768px) {

    /* quick tablet reset */
    .w60,
    .w66,
    .w70,
    .w75,
    .w80,
    .w90,
    .w100,
    .w600p,
    .w700p,
    .w800p,
    .w960p,
    .mw960p,
    .medium-wauto { width: auto; }

    /* layouts for medium (m) screens */
    .medium-hidden,
    .tablet-hidden { display: none !important; }
    .medium-visible { display: block !important; }
    .medium-no-float {float: none; }
    .medium-inbl {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .medium-row {
        display: table;
        table-layout: fixed;
        width: 100% !important;
    }
    .medium-col {
        display: table-cell;
        vertical-align: top;
    }

    /* widths for medium (m) screens */
    .medium-w25 { width: 25% !important; }
    .medium-w33 { width: 33.3333% !important; }
    .medium-w50 { width: 50% !important; }
    .medium-w66 { width: 66.6666% !important; }
    .medium-w75 { width: 75% !important; }
    .medium-w100 {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0;
    }
    /* margins for medium (m) screens */
    .medium-ma0,
    .medium-man { margin: 0 !important; }

    /* Responsive grids */
    .grid4 > * {width: 49% !important; }
    .grid4 > :first-child + * + * {margin-left: 0 !important;}
    .grid6 > * {width: 32% !important; }
    .grid6 > :first-child + * + * + * {margin-left: 0 !important;}

    header {
        position: relative;
        width: 300px;
        margin-bottom: 2em;
    }
    .tagline {
        font-size: 1.3em;
    }
}

@media (max-width: 640px) {

    /* quick smartphone reset */
    .mod,
    .item,
    .col,
    fieldset {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0;
    }
    .w30,
    .w33,
    .w40,
    .w50,
    .w300p,
    .w400p,
    .w500p {
        width: auto;
    }
    .row {
        display: block !important;
        width: 100% !important;
    }

    /* layouts for tiny (t) screens */
    .tiny-hidden,
    .phone-hidden { display: none !important; }
    .tiny-visible { display: block !important; }
    .tiny-no-float {float: none;}
    .tiny-inbl {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .tiny-row {
        display: table;
        table-layout: fixed;
        width: 100% !important;
    }
    .tiny-col {
        display: table-cell;
        vertical-align: top;
    }
    th,
    td {
        display: block !important;
        width: auto !important;
        text-align: left !important;
    }
    thead { display: none; }

    /* widths for tiny (t) screens */
    .tiny-w25 { width: 25% !important; }
    .tiny-w33 { width: 33.3333% !important; }
    .tiny-w50 { width: 50% !important; }
    .tiny-w66 { width: 66.6666% !important; }
    .tiny-w75 { width: 75% !important; }
    .tiny-w100 {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0;
    }
    /* margins for tiny (t) screens */
    .tiny-ma0,
    .tiny-man { margin: 0 !important; }

    [id="primary-nav"] {
        text-align: center;
        background: #eee;
        -webkit-columns: 2;
        -moz-columns: 2;
        -ms-columns: 2;
        columns: 2;
        -webkit-column-rule: 1px solid #fff;
        -moz-column-rule: 1px solid #fff;
        column-rule: 1px solid #fff;
        -webkit-column-gap: 1px;
        -moz-column-gap: 1px;
        column-gap: 1px;
    }
    [id="primary-nav"] ul {
        padding: 0;
    }
    [id="primary-nav"] li {
        display: block;
    }
    [id="primary-nav"] a {
        display: block;
        padding: 1em 2em;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #fff;
    }
    [id="primary-nav"] a:hover, [id="primary-nav"] a:focus {border-bottom: 1px solid #fff; background: #ddd}
    [id="primary-nav"] a:visited {color: #666}

    [id="primary-nav"] a:hover, [id="primary-nav"] a:focus {color: #333; outline: none; }
}









    .h2-like, .h3-like, h3 {
        font-weight: bold;
        text-align: left;
        margin-top: 1.5em;
    }
    h3, .h3-like {font-size: 1.5em;}
    h4, .h4-like {font-size: 1.1em; margin-top: 1.5em;}
    section {
        margin-top: 2em;
        padding: 1em;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.03);
    }
    section:target {
        background: rgba(0, 0, 0, 0.1);
    }
    iframe {max-width: 100%;}
    @media (min-width: 1200px) {
        body {
            max-width: none !important;
            width: 80%;
            margin: 0 auto !important;
        }
    }




/**
 * Complément navigation
 **/
 
.active,
[id="primary-nav"] li.active a,
[id="primary-nav"] li.active {
    color: #000;
    font-weight: bold;
}

code {
    background: transparent;
}

/**
 * Doc pour Json
 **/
.code-bg {
    display: block;
    padding: 4px;
    margin: 4px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
}

code.json-code span,
.json-code span {
}

code.json-code {
    display: block;
    padding: 4px;
    margin: 4px;
}
span.json-code {
    display: inline;
    margin: 0;
    padding: 0;
}
.json-code {
    background: #fff;
    color: #000;
    font-weight: bold;
}
.json-code .comment {
    color: #093887;
    font-weight: normal;
}

.json-code .struct {
    color: #333;
    font-weight: bold;
}
.json-code .string {
    color: #00bb4b;
    font-weight: normal;
}
.json-code .int {
    color: #cc0000;
    font-weight: bold;
}
.json-code .doc {
    color: #1985c6;
    font-weight: normal;
}




/**
 * Doc pour html
 **/
code.html-code {
    display: block;
    padding: 4px;
    margin: 4px;
}
span.html-code {
    display: inline;
    margin: 0;
    padding: 0;
}

.html-code {
    color: #000;
    background: #fff;
    font-weight: bold;
}
.html-code .comment {
    color: #093887;
    font-weight: normal;
}

.html-node {
    color: #cc0000;
    font-weight: normal;
}


.html-attribute,
.html-code .attribute {
    color: #1eb842;
    font-weight: normal;
}

.html-string,
.html-code .string {
    color: #000;
    font-weight: normal;
    font-style: italic;
}


.html-code .doc {
    color: #1985c6;
    font-weight: normal;
}






code.javascript-code {
    display: block;
    padding: 4px;
    margin: 4px;
}

span.javascript-code {
    display: inline;
    margin: 0;
    padding: 0;
}

.javascript-code {
    color: #000;
    background: #fff;
    font-weight: normal;
}
.javascript-code .comment {
    color: #999;
    font-weight: normal;
}

.javascript-code .struct {
    color: #333;
    font-weight: bold;
}

.js-var,
.javascript-code .var {
    color: #000;
    font-weight: bold;
}

.js-statement,
.javascript-code .statement {
    color: #cc0000;
    font-weight: bold;
}

.javascript-code .string {
    color: #00bb4b;
    font-weight: normal;
}

.javascript-code .int {
    color: #cc0000;
    font-weight: bold;
}


.javascript-code .doc {
    color: #1985c6;
    font-weight: normal;
}


.js-reserved,
.javascript-code .reserved {
    color: #00bbb9;
    font-weight: normal;
    font-style: italic;
}