/* -------------------- BOX MODEL -------------------- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}




/* -------------------- RESET -------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; /* HTML5 display-role reset for older browsers */
}

img {
    height: auto;
    vertical-align: middle;
    border: 0;
}

body {
    line-height: 1;
}

audio, canvas, video {
    display: inline-block;
}

img, table, td, blockquote, code, pre, textarea, input, video, embed, object {
    max-width: 100%;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}






/* -------------------- HTML + BODY -------------------- */

html {
    font-size: 62.5%; /* base font-size corresponds to "10px" and is adapted to rem unit */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000;
    font-size: 1.2em; /* equiv 14px */
    line-height: 1.2; /* adapt to your design */
    background-color: #FFF;
}




/* -------------------- LIENS -------------------- */

a {
    color: red;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
a:hover {
    color: green;
}




/* -------------------- CLEAR -------------------- */

.clear {
    clear: both;
    display: block;
    width: 0;
    height: 0;
    border: 0;
    font-size: 0;
}




/* -------------------- MASQUER -------------------- */

.hidden {
    display: none;
    visibility: hidden;
    left: -7000px;
    overflow: hidden;
}




/* -------------------- IMAGES -------------------- */

img.block {
    display: block;
}




/* -------------------- TEXTES -------------------- */

p, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details,  figure {
    color: #000;
}

code, pre, samp, kbd {
    white-space: pre-line;
    white-space: pre-wrap;
    font-family: Courier;
    line-height: normal;
}

em, address, cite, dfn, i, var {
    font-style: italic;
}

strong {
    font-weight: bold;
}

small, sub, sup {
    font-size: smaller;
}

.txt_left {
    text-align: left;
}

.txt_right {
    text-align: right;
}

.txt_center {
    text-align: center;
}

.txt_justify {
    text-align: justify;
}

.txt_barre {
    text-decoration: line-through;
}




/* -------------------- TITRES -------------------- */

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
}




/* -------------------- TABLEAUX -------------------- */

table {
    display: table;
    width: 100%;
    max-width : 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
    border: 1px solid grey;
}

tr {
    border-left: 1px solid grey;
}

th, td {
    text-align: left;
    border-bottom: 1px solid grey;
    vertical-align: top;
}




/* -------------------- CALQUES -------------------- */

.bloc {
    overflow: hidden;
}

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.inline_bloc {
    display: inline-block;
    vertical-align: top;
}




/* -------------------- LARGEURS -------------------- */

.wauto      { width: auto; }

.w10        { width: 10%; }
.w20        { width: 20%; }
.w25        { width: 25%; }
.w30        { width: 30%; }
.w33        { width: 33.333%; }
.w40        { width: 40%; }
.w50        { width: 50%; }
.w60        { width: 60%; }
.w66        { width: 66.666%; }
.w70        { width: 70%; }
.w75        { width: 75%; }
.w80        { width: 80%; }
.w90        { width: 90%; }
.w100       { width: 100%; }

.w10p       { width: 10px; }
.w20p       { width: 20px; }
.w30p       { width: 30px; }
.w40p       { width: 40px; }
.w50p       { width: 50px; }
.w60p       { width: 60px; }
.w70p       { width: 70px; }
.w80p       { width: 80px; }
.w90p       { width: 90px; }
.w100p      { width: 100px; }
.w120p      { width: 120px; }
.w150p      { width: 150px; }
.w200p      { width: 200px; }
.w300p      { width: 300px; }
.w400p      { width: 400px; }
.w500p      { width: 500px; }
.w600p      { width: 600px; }
.w700p      { width: 700px; }
.w800p      { width: 800px; }
.w900p      { width: 900px; }
.w1000p     { width: 1000px; }
.h200p      { height: 200px; }

.mw10p       { max-width: 10px; }
.mw20p       { max-width: 20px; }
.mw30p       { max-width: 30px; }
.mw40p       { max-width: 40px; }
.mw50p       { max-width: 50px; }
.mw60p       { max-width: 60px; }
.mw70p       { max-width: 70px; }
.mw80p       { max-width: 80px; }
.mw90p       { max-width: 90px; }
.mw100p      { max-width: 100px; }
.mw150p      { max-width: 150px; }
.mw200p      { max-width: 200px; }
.mw300p      { max-width: 300px; }
.mw400p      { max-width: 400px; }
.mw500p      { max-width: 500px; }
.mw600p      { max-width: 600px; }
.mw700p      { max-width: 700px; }
.mw800p      { max-width: 800px; }
.mw900p      { max-width: 900px; }
.mw1000p     { max-width: 1000px; }










/* -------------------- ESPACEMENTS -------------------- */

.man { margin: 0; }
.mas { margin: 10px; }
.mam { margin: 20px; }
.mal { margin: 40px; }

.pan { padding: 0; }
.pas { padding: 10px; }
.pam { padding: 20px; }
.pal { padding: 40px; }

.mtn { margin-top: 0; }
.mts { margin-top: 10px; }
.mtm { margin-top: 20px; }
.mtl { margin-top: 40px; }

.mrn { margin-right: 0; }
.mrs { margin-right: 10px; }
.mrm { margin-right: 20px; }
.mrl { margin-right: 40px; }

.mbn { margin-bottom: 0; }
.mbs { margin-bottom: 10px; }
.mbm { margin-bottom: 20px; }
.mbl { margin-bottom: 40px; }

.mln { margin-left: 0; }
.mls { margin-left: 10px; }
.mlm { margin-left: 20px; }
.mll { margin-left: 40px; }

.ptn { padding-top: 0; }
.pts { padding-top: 10px; }
.ptm { padding-top: 20px; }
.ptl { padding-top: 40px; }

.prn { padding-right: 0; }
.prs { padding-right: 10px; }
.prm { padding-right: 20px; }
.prl { padding-right: 40px; }

.pbn { padding-bottom: 0; }
.pbs { padding-bottom: 10px; }
.pbm { padding-bottom: 20px; }
.pbl { padding-bottom: 40px; }

.pln { padding-left: 0; }
.pls { padding-left: 10px; }
.plm { padding-left: 20px; }
.pll { padding-left: 40px; }




/* -------------------- HAUTEURS DE LIGNES -------------------- */

.lhn { line-height: 1; }
.lhs { line-height: 1.4; }
.lhm { line-height: 1.8; }
.lhl { line-height: 2; }




/* -------------------- FORMULAIRES -------------------- */

form, fieldset {
    border: none;
}

input, button, select, label {
    vertical-align: middle; /* @bugfix alignment */
    font-family: inherit;
}

label {
    display: inline-block;
    vertical-align: middle;
    cursor: default;
}

button, input, select {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    vertical-align: middle;
    border: 0;
}

textarea {
    font-family: inherit;
    overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
    min-height: 5em;
    vertical-align: top;
    resize: vertical;
    border: 0;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button; /* clickable input types in iOS */
    *overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */
}

input[type="checkbox"], input[type="radio"] {
    padding: 0; /* Corrects excess space around these inputs in IE8/9 */
    *width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */
}

input[type="search"] {
    -webkit-appearance: textfield;
}

/* if select styling bugs on WebKit */
select {
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    vertical-align: middle;
}

/* 'x' appears on right of search input when text is entered. This removes it */
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }

::-webkit-input-placeholder { color: #777; }

input:-moz-placeholder, textarea:-moz-placeholder { color: #777; }

/* Removes inner padding and border in FF3+ */
button::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner {
    border: 0;
    padding: 0;
}




/* -------------------- VIEWPORT -------------------- */

@-webkit-viewport {
    width: device-width;
    zoom: 1.0;
}

@-moz-viewport {
    width: device-width;
    zoom: 1.0;
}

@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}

@-o-viewport {
    width: device-width;
    zoom: 1.0;
}

@viewport {
    width: device-width;
    zoom: 1.0;
}




/* -------------------- PRINT -------------------- */

@media print {
    * {
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        width: auto !important;
        margin: auto !important;
        font-family: serif;
        font-size: 12pt;
        background-color: #FFF !important;
        color: #333 !important;
    }

    p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
        color: #000 !important;
        margin: auto !important;
    }

    img {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    p, blockquote {
        orphans: 3; /* no orphans */
        widows: 3; /* no widows */
    }

    blockquote, ul, ol {
        page-break-inside: avoid; /* no breaks inside these elements */
    }

    h1, h2, h3, caption {
        page-break-after: avoid; /* no breaks after these elements */
    }

    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}