/*
 * ==== SITE DE MATT MAHLEN ====================================================
 *
 * Feuille de style pour l'écran
 * Julien Bossert - La Fabrique ouèbe - http://fabrique-ouebe.net/
 */


html {
        margin: 0;
        padding: 0;
        height: 100%;
        min-width: 1000px;
}
body {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: "DroidSerif", "Georgia", serif;
        font-size: 100%;  /* 16px */
        line-height: 1.5;  /* 24px */
        text-align: left;
        color: #000000;
        overflow-y: scroll;
        background-color: #ee190a;
}


/* Grille : Boîte centrée de 960px divisée en 12 colonnes de 60px avec une gouttière de 20px */

div.boite {
        position: relative;
        margin: 0 auto;
        padding: 0 20px;
        width: 960px;
}
.grille-01,
.grille-02,
.grille-03,
.grille-04,
.grille-05,
.grille-06,
.grille-07,
.grille-08,
.grille-09,
.grille-10,
.grille-11,
.grille-12 {
        position: relative;
        display: inline;
        float: left;
        margin: 0 10px;
}
.grille-01 {
        width: 60px;
}
.grille-02 {
        width: 140px;
}
.grille-03 {
        width: 220px;
}
.grille-04 {
        width: 300px;
}
.grille-05 {
        width: 380px;
}
.grille-06 {
        width: 460px;
}
.grille-07 {
        width: 540px;
}
.grille-08 {
        width: 620px;
}
.grille-09 {
        width: 700px;
}
.grille-10 {
        width: 780px;
}
.grille-11 {
        width: 860px;
}
.grille-12 {
        width: 940px;
}


/* Mise en page : Table-row vertical box model */

div#page {
        display: table;
        margin: 0 auto;
        height: 100%;
        width: 100%;
}


/* Mise en page : Bandeau */

header {
        display: table-row;
        height: 300px;
        background-image: url("img-biais.png"), url("img-palette.jpg");
        background-position: center bottom, center center;
        background-repeat: no-repeat, no-repeat;
        -webkit-background-size: 1500px 30px, cover;
        -moz-background-size: 1500px 30px, cover;
        -o-background-size: 1500px 30px, cover;
        background-size: 1500px 30px, cover;
}
@media screen and (min-width: 1500px) {
        header { 
                -webkit-background-size: 100% 30px, cover;
                -moz-background-size: 100% 30px, cover;
                -o-background-size: 100% 30px, cover;
                background-size: 100% 30px, cover;
        }
}
header p {
        display: table-cell;
        vertical-align: middle;
        padding: 45px 0 65px 0;  /* 45px + image 190px + 65px = 300 px */
        text-align: center;
}
header img {
        margin-left: 40px;
        vertical-align: bottom;
}


/* Mise en page : Main */

main {
        z-index: 1;
}


/* Mise en page : Corps */

div#corps {
        display: table-row;
        background-image: url("img-blanc.png");
        background-repeat: repeat;
        background-color: #ffffff;
}
div#corps div.boite {
        margin-top: 30px;
        margin-bottom: 30px;
}


/* Mise en page : Pied de page */

footer {
        display: table-row;
        font-family: "MisoRegular", sans-serif;
        font-size: 14px;
        font-weight: normal;
        line-height: 19px;
        text-transform: uppercase;
        color: #666666;
        background-image: url("img-blanc.png");
        background-repeat: repeat;
}
footer div.boite {
        margin-top: 20px;
        margin-bottom: 10px;
}
footer div.boite div:first-child {
        text-align: right;
}
footer p {
        margin: 0;
}
footer a {
        color: #333333;
        text-decoration: none;
}
footer a:hover {
        text-decoration: underline;
}


/* Mise en page : Menu */

nav#menu {
        font-family: "MisoLight", sans-serif;
        font-size: 22px;
        font-weight: normal;
        line-height: 33px;
        z-index: 2;
}
nav#menu ul {
        margin: 70px 0;
        padding: 0;
        height: 33px;
}
nav#menu li {
        position: relative;
        display: block;
        margin: 3px 0;
        padding: 0 0 0 27px;
        list-style-type: none;
        text-transform: uppercase;
        background-image: url("img-menu.png");
        background-repeat: no-repeat;
        opacity: 0.9;
}
nav#menu li:hover {
        opacity: 1;
}
nav#menu li#menu-1 {
        background-position: 0 0;
}
nav#menu li#menu-5 {
        margin-bottom: 18px;
        background-position: 0 -140px;
}
nav#menu li#menu-2 {
        background-position: 0 -35px;
}
nav#menu li#menu-3 {
        background-position: 0 -70px;
}
nav#menu li#menu-4 {
        background-position: 0 -105px;
}
nav#menu li#menu-6 {
        background-position: 0 -175px;
}
nav#menu li#menu-7 {
        margin-top: 18px;
        background-position: 0 -210px;
}
nav#menu li#menu-8 {
        margin-top: -3px;
        background-position: 0 -245px;
}
nav#menu li#menu-1:hover,
nav#menu li#menu-1.ici {
        background-position: 0 -280px;
}
nav#menu li#menu-5:hover,
nav#menu li#menu-5.ici {
        background-position: 0 -420px;
}
nav#menu li#menu-2:hover,
nav#menu li#menu-2.ici {
        background-position: 0 -315px;
}
nav#menu li#menu-3:hover,
nav#menu li#menu-3.ici {
        background-position: 0 -350px;
}
nav#menu li#menu-4:hover,
nav#menu li#menu-4.ici {
        background-position: 0 -385px;
}
nav#menu li#menu-6:hover,
nav#menu li#menu-6.ici {
        background-position: 0 -455px;
}
nav#menu li#menu-7:hover,
nav#menu li#menu-7.ici {
        background-position: 0 -490px;
}
nav#menu li#menu-8:hover,
nav#menu li#menu-8.ici {
        background-position: 0 -525px;
}
nav#menu a {
        color: #ffffff;
        text-decoration: none;
}
nav#menu li span {
        position: absolute;
        display: none;
        margin-top: -32px;
        padding: 0 5px;
        border: 1px dotted #bbb;
        height: 29px;
        line-height: 29px;
        font-family: "MisoRegular", sans-serif;
        text-transform: lowercase;
        background-color: #ffffff;
        white-space : nowrap;
}
nav#menu li#menu-1 span {
        margin-left: 110px;
}
nav#menu li#menu-2 span {
        margin-left: 88px;
}
nav#menu li#menu-3 span {
        margin-left: 76px;
}
nav#menu li#menu-4 span {
        margin-left: 173px;
}
nav#menu li#menu-5 span {
        margin-left: 167px;
}
nav#menu li#menu-6 span {
        margin-left: 90px;
}
nav#menu li#menu-7 span {
        margin-left: 153px;
}
nav#menu li#menu-8 span {
        margin-left: 90px;
}


/* Mise en page : Photographies d'arrière plan */

body#rubrique-1 header,
body.rubrique-1 header {
        background-image: url("img-biais.png"), url("img-fond-rub1.jpg");
}
body#rubrique-2 header,
body.rubrique-2 header {
        background-image: url("img-biais.png"), url("img-fond-rub2.jpg");
}
body#rubrique-3 header,
body.rubrique-3 header {
        background-image: url("img-biais.png"), url("img-fond-rub3.jpg");
}
body#rubrique-4 header,
body.rubrique-4 header {
        background-image: url("img-biais.png"), url("img-fond-rub4.jpg");
}
body#rubrique-5 header,
body.rubrique-5 header {
        background-image: url("img-biais.png"), url("img-fond-rub5.jpg");
}
body#rubrique-6 header,
body.rubrique-6 header {
        background-image: url("img-biais.png"), url("img-fond-rub6.jpg");
}
body#rubrique-7 header,
body.rubrique-7 header {
        background-image: url("img-biais.png"), url("img-fond-rub7.jpg");
}
body#rubrique-8 header,
body.rubrique-8 header {
        background-image: url("img-biais.png"), url("img-fond-rub8.jpg");
}


/* Typographie : Titraille */

h1,
h2,
h3,
h4,
h5 {
        font-family: "MisoBold", sans-serif;
}
h1 {
        margin: 1.3125em 0 0.75em 0;  /* 84px 0 48px 0 */
        width: 620px;  /* 8 colonnes */
        font-size: 64px;
        font-weight: bold;
        line-height: 1;  /* 64px */
        color: #3c2762;
}
h2 {
        margin: -1em 0 2em 0;  /* -48px 0 96px 0 */
        padding: 0 0 0 1.5em;  /* 0 0 0 72px */
        width: 628px;  /* 628px + 72px = 700px càd 9 colonnes */
        font-size: 48px;
        font-weight: bold;
        line-height: 1;  /* 48px */
        color: #3c2762;
}
h3 {
        margin: 1.75em 0 0 0;  /* 56px 0 0 0 */
        font-size: 2em;  /* 32px */
        font-weight: bold;
        line-height: 1.25;  /* 40px*/
        color: #e05301;
        text-transform: uppercase;
}
h4 {
        margin: 2em 0 1em 0;  /* 48px 0 24px 0 */
        font-size: 1.5em;  /* 24px */
        font-weight: bold;
        line-height: 1.25;  /* 30px */
        color: #3c2762;
        text-transform: uppercase;
}
h5 {
        margin: 0;
        font-size: 1em;  /* 16px */
        font-weight: normal;
        line-height: 1.5;  /* 24px */
        color: #3c2762;
        text-transform: uppercase;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
        color: inherit;
        text-decoration: inherit;
}
h1 a:hover,
h1 a:active,
h2 a:hover,
h2 a:active {
        color: inherit;
        text-decoration: inherit;
}
h3 a:hover,
h3 a:active,
h4 a:hover,
h4 a:active,
h5 a:hover,
h5 a:active {
        color: inherit;
        text-decoration: underline;
}


/* Typographie : Paragraphes */

p {
        margin: 1.5em 0;  /* 24px 0 */
}


/* Typographie : Chapô & Post-scriptum */

p.chapo {
        font-weight: bold;
}
p.postscriptum {
        font-weight: bold;
}


/* Typographie : Citations & Poésies */

blockquote {
        margin: 1.5em 2em;  /* 24px 32px */
        font-style: italic;
}
blockquote.spip p {
        margin: 0;
}
blockquote.spip p:last-child {
        font-style: normal;
        font-weight: bold;
}
blockquote.spip p:last-child:before {
        content: "— ";
}


/* Typographie : Listes */

ul,
ol {
        margin: 1.5em 0;  /* 24px 0 */
        padding: 0 0 0 2em;  /* 0 0 0 32px */
}
li {
        margin: 0;
        padding: 0;
}
ul li {
        list-style-type: disc;
}
ol li {
        margin: 0 0 1.5em 0;  /* 0 0 24px 0 */
}


/* Typographie : Liens */

a {
        color: #666666;
        text-decoration: none;
}
a:hover,
a:active {
        text-decoration: underline;
}


/* Typographie : Enrichissements */

strong {
        font-weight: bold;
}
strong em {
        font-weight: bold;
        font-style: normal;
        text-decoration: underline;
}
em {
        font-style: italic;
}
em strong {
        font-weight: normal;
        font-style: italic;
        text-decoration: underline;
}
sup,
sub {
        font-size: .75em;  /* 12px */
        line-height: 0;
        font-variant: normal;
}
abbr,
acronym {
        border-bottom: 1px dotted;
        cursor: help;
}


/* Contenu : Sommaire */

body#sommaire header {
        height: 50%;
}
body#sommaire nav#menu li {
        opacity: 1;
}
body#sommaire nav#menu li:hover span {
        display: block;
}
body#sommaire main {
        height: 402px;  /* 300px (header min) + 402px (main) + 68px (footer) = 830px ??? */
}
body#sommaire main a#merci {
        float: right;
        margin: 240px -160px 0 0;
}
body#sommaire main a#acommebleu {
        float: right;
        margin: 350px -100px 0 0;
}
body#sommaire main a#charte {
        float: right;
        margin: 320px -200px 0 0;
}
body#sommaire main a#merci span,
body#sommaire main a#acommebleu span,
body#sommaire main a#charte span {
        position: absolute;
        display: none;
        padding: 0 5px;
        border: 1px dotted #bbb;
        height: 29px;
        font-family: "MisoRegular", sans-serif;
        font-size: 22px;
        font-weight: normal;
        line-height: 29px;
        text-transform: lowercase;
        color: #000000;
        background-color: #ffffff;
        white-space : nowrap;
}
body#sommaire main a#merci:hover span,
body#sommaire main a#acommebleu:hover span,
body#sommaire main a#charte:hover span {
        display: block;
}
body#sommaire main a#merci span {
        margin: -150px 0 0 45px;
}
body#sommaire main a#acommebleu span {
        margin: -68px 0 0 -120px;
}
body#sommaire main a#charte span {
        margin: -42px 0 0 -120px;
}
body#sommaire main a#hasard {
        display: block;
        margin-top: 92px;  /* 92 + 320 (image) = 412px */
        width: 460px;
        height: 320px;
}
body#sommaire main a.hasard img {
        vertical-align: bottom;
}
body#sommaire footer div.boite div:first-child p {
        visibility: hidden;
}


/* Contenu : Rubriques */

body.rubrique h1 {
        margin-left: -20px;
        -webkit-transform-origin: right top;
        -moz-transform-origin: right top;
        -ms-transform-origin: right top;
        -o-transform-origin: right top;
        transform-origin: right top;
        -webkit-transform: rotate(-5deg) translate(0, -60px);
        -moz-transform: rotate(-5deg) translate(0, -60px);
        -ms-transform: rotate(-5deg) translate(0, -60px);
        -o-transform: rotate(-5deg) translate(0, -60px);
        transform: rotate(-5deg) translate(0, -60px);
}
body.rubrique h1 a {
        padding: 5px 15px 20px 20px;
        color: #ffffff;
        background-image: url("img-rub-titre-1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
}
body.rubrique h2 {
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: rotate(-2deg) translate(0, -10px);
        -moz-transform: rotate(-2deg) translate(0, -10px);
        -ms-transform: rotate(-2deg) translate(0, -10px);
        -o-transform: rotate(-2deg) translate(0, -10px);
        transform: rotate(-2deg) translate(0, -10px);
}
body.rubrique h2 a {
        padding: 0 30px 5px 10px;
        color: #ffffff;
        background-image: url("img-rub-titre-2.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
}


/* Contenu : Article */

ul#portfolio {
        padding: 0;
        width: 620px;  /* 8 colonnes */
}
ul#portfolio li {
        display: inline;
        margin: 0 24px 24px 0;
        list-style-type: none;
}
ul#documents {
        padding: 0;
        width: 620px;  /* 8 colonnes */
}
ul#documents li {
        display: block;
        float: left;
        margin: 0 0 18px;
        width: 102px;
        font-size: 0.75em;  /* 12px */
        font-style: italic;
        line-height: 1.5;  /* 18px */
        list-style-type: none;
        text-align: center;
}
ul#documents img {
        margin: 0 0 6px 0;
        vertical-align: baseline;
}


/* Documents : Images */

img {
        margin: 0;
        border: 0;
}
img.image {
        display: block;
        margin: 1.5em 0;  /* 24px 0 */
}


/* Documents : Vidéos */

video {
        max-width: 620px;
}


/* Police : Miso */

@font-face {
        font-family: "MisoRegular";
        src: url("polices/miso-regular.eot");
        src: url("polices/miso-regular.eot?#iefix") format("embedded-opentype"),
             url("polices/miso-regular.woff") format("woff"),
             url("polices/miso-regular.ttf") format("truetype"),
             url("polices/miso-regular.svg#MisoRegular") format("svg");
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: "MisoLight";
        src: url("polices/miso-light.eot");
        src: url("polices/miso-light.eot?#iefix") format("embedded-opentype"),
             url("polices/miso-light.woff") format("woff"),
             url("polices/miso-light.ttf") format("truetype"),
             url("polices/miso-light.svg#MisoLight") format("svg");
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: "MisoBold";
        src: url("polices/miso-bold.eot");
        src: url("polices/miso-bold.eot?#iefix") format("embedded-opentype"),
             url("polices/miso-bold.woff") format("woff"),
             url("polices/miso-bold.ttf") format("truetype"),
             url("polices/miso-bold.svg#MisoBold") format("svg");
        font-weight: bold;
        font-style: normal;
}


/* Boutons d'administration de SPIP */

div#spip-admin {
        position: fixed;
        top: 0;
        right: 5px;
        font-size: 10px;
        text-shadow: none;
}
div#spip-admin a {
        padding: 3px;
        border-radius: 0 0 4px 4px;
        background-color: rgba(128,128,128,0.80);
}
div#spip-admin a.spip-admin-boutons {
        font-weight: normal;
}
div#spip-admin a#ecrire {
        display: none;
}


/* Ce bon viel espaceur !!! */

.espaceur {
        clear: both;
}


/* Fin ! */