/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 03
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */


#wrapper {
background: #ffffff url(../img/bgup.png) no-repeat top center;
}


body {
    color: #1755a0;
}


#barrebouton {
    text-align: center;
}


#viewer {
    text-align: center;
}

a {
    color: #FF65FF;
}
a:hover, a:focus {
    color: #FF4C00;
}
strong {
    color: #A1B55D;
}

/* Page */
#global {
    background: url(../img/corp.png) repeat-y ;
}

/* Navigation */
#navigation {
    background: url(../img/navigba.png);

}
#navigation a {
    color: #ffffff;
}
#navigation a:hover, #navigation a:focus {
    background: #9fc1df;
}

/* Contenu principal */
#contenu {
    color: #363B29;
}
#contenu a {
    color: #0F63B1;
}
#contenu a:hover, #contenu a:focus {
    color: #0B4A85;
}
#contenu strong {
    color: #181A12;
}

/* Pied de page */
#pied {
    color: #E6A948;
    background: url(../img/footer.png) no-repeat;
    height: 80px;
}


/* --- POSITIONNEMENT --- */

/* Page */


html, body {
    height: 100%; /* Voir -> Note 1 ci-dessous */
}


body {
    padding: 0;
}


#global {
    min-height: 100%; /* -> 1 */
    width: 750px;
    overflow: hidden; /* -> 2 */
    margin-left: auto;
    margin-right: auto; /* -> 3 */
}

/* En-tête */
#entete {
    height:97px;
    background: url(../img/header.png) top left no-repeat;
    padding: 15px 20px 10px 20px;
}
#entete h1 {
    margin: 0;
}
#entete #logo {
    padding: 20px 0 0 20px;
}
#entete .sous-titre {
    margin: 4px 0 15px 0;
}

/* Menu de navigation */
#navigation {
    padding: 12px 15px;
}
#navigation ul {
    margin: 0;
    list-style: none;
    text-align: center;
}
#navigation li {
    display: inline;
}
#navigation a {
    padding: 6px;
    line-height: 1.5;
    font-size: .9em;
    text-decoration: none;
}

/* Contenu */
#contenu {
    padding:0px 10px 10px;
}
#contenu > :first-child {
    margin-top: 0px;
}
#contenu p, #contenu li {
    line-height: 1.5;
}


#barrecate {
    width: 750px;

    padding-left: 1px;
}
#barrecate div {
    float: left;
}
#orange {
    width: 242px;
}
#bleu {
    width: 245px;
}
#vert {
    width: 243px;
}

#blockcouleur {
display: none;
position: relative;
height:255px;
bottom:17px;
}
#blockorange {
width : 202px;
position: absolute;
left : 0;
background-image: url(../img/champorange.png) ;
height: 250px;
padding: 20px;
}
#blockbleu {
position: absolute;
width : 202px;
left : 245px;
background-image: url(../img/champbleu.png) ;
height: 250px;
padding: 20px;
}
#blockvert {
width : 202px;
position: absolute;
left: 487px;
background-image: url(../img/champvert.png) ;
height: 250px;
padding: 20px;
}

/* Pied de page */
#pied {
    padding: 15px 20px;
    font-size: .85em;
}
#pied p {
    margin: .5em 0;
}
#copyright {
    text-align: left;
    font-size: 1em;
}

.cont-normal h3 {
    margin: 0;
}
#cont-normal {
    padding: 0px 20px 10px;
}

/*LAVALAMP STYLES*/
#lavaLampBasicImage {
position: relative;
width: 750px;
background: url("../img/navigba.png") no-repeat top;
padding: 0px;
margin: 0px 0;
overflow: hidden;
height:40px;
}

#lavaLampBasicImage li {
float: left;
list-style: none;
padding:5px 0 0 23px;

}
#lavaLampBasicImage li.backLava {
background: url("../img/lava.png") no-repeat right -80px;
width: 9px; height: 40px;
z-index: 8;
position: absolute;
padding-top:0;

}
#lavaLampBasicImage li.backLava .leftLava {
background: url("../img/lava.png") no-repeat top left;
height: 40px;
margin-right: 16px; /* 7px is the width of the rounded shape */
}
#lavaLampBasicImage li a {
font: 12px verdana;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 40px;
position: relative;
overflow: hidden;
margin: auto 8px;   
padding-left: 10px; 
margin-right:12px;
}

#lavaLampBasicImage li a:hover, #lavaLampBasicImage li a:active, #lavaLampBasicImage li a:visited {
color: #fff;
border: none;
}

/* End style lavalamp */

a {outline:0;border:none;text-decoration: none;}
.clear {clear: both}

#imgcont {
    text-align: center;
    margin-left:30px;
}

.realisation {
    padding-bottom: 1em;
    /*overflow: hidden;*/
}

.realisation:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.realisation img {
    float: left;
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.5);
    /*-webkit-transform:rotate(-3deg);*/
    /*-moz-transform:rotate(-3deg);*/
    margin-right: 15px;
}