html, body{
width:100%;
height:100%;
background-image:url(img/fond.jpg);
background-repeat:repeat-x;
background-color:#f8f6f5;
margin: 0;
padding: 0;
overflow:hidden;
}

#fond{/*div pour l'index : la coccinelle qui traverse l'écran*/
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

#ballons{/*div pour la page références : les ballons qui s'envolent avec les projets*/
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

#pere{/*div contenant les coquelicot de gauche et de droite*/
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:hidden;
}

#grd-pere{/*div regroupant tt les élémenst hauts du site*/
position:relative;
width:100%;
min-width:800px;
height:80%;
min-height:330px;
overflow:visible;
clear:both;
}

#logo{
position:relative;
min-width:312px;
width:32%;
height:30%;
min-height:113px;
left:0;
top:0;
}

#coquelicot-gauche{
position:absolute;
left:0;
bottom:0;
width:28%;
min-width:220px;
}

#centre{
position:relative;
clear:both;
width:50%;
height:100%;
margin-left:25%;
overflow:auto;
}

#centre-contact{
position:relative;
clear:both;
width:50%;
height:100%;
margin-left:25%;
overflow:auto;
}

#centre-ref{
position:relative;
clear:both;
width:50%;
height:100%;
margin-left:25%;
overflow:auto;
}

#coquelicot-droit{
position:absolute;
right:0;
bottom:0;
height:90%;
width:25%;
min-height:385px;
min-width:220px;
}

#bas{/*div regroupant tout les éléments du abs du site*/
position:relative;
clear:both;
width:100%;
min-width:800px;
height:20%;
min-height:80px;
overflow:auto;
}

#les-vignettes{
position:relative;
width:100%;
clear:both;
height:50%;
}

.vignette{
height:60%;
float:left;
margin-left:1%;
margin-top:1%;
}

#pied{
background-image:url(img/fond-menu.png);
background-repeat:repeat-x;
position:relative;
clear:both;
width:100%;
height:50%;
}

#facebook{
position:relative;
width:160px;
float:left;
border:none;
}

#img-fb{
width:40px;
margin-top:2%;
margin-left:2%;
float:left;
}

#img-viadeo{
width:40px;
margin-top:2%;
margin-left:8%;
float:left;
}

#menu{
position:relative;
width:50%;
min-width:500px;
margin-top:1%;
margin-left:10%;
float:left;
}

#menu a:link, #menu a:active, #menu a:visited{
font-family:arial;
font-size:100%;
color:#000000;
font-weight:bold;
text-decoration:none;
}

#menu a:hover{
font-family:arial;
font-size:100%;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}

.menu-fixe{
font-family:arial;
font-size:100%;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}

#qui{
float:left;
width:35%;
min-width:137px;
text-align:left;
}

#grde-rubrique{
width:100%;
clear:both;
}
#portfolio{
float:left;
width:15%;
min-width:129px;
text-align:center;
}

#references{
float:left;
width:20%;
text-align:center;
}

#contact{
float:left;
width:15%;
text-align:center;
}

#mentions{
float:left;
width:15%;
text-align:right;
}

#sous-menu{
clear:both;
position:relative;
width:100%;
}

#sous-menu a:link, #sous-menu a:active, #sous-menu a:visited{
font-family:arial;
font-size:80%;
color:#000000;
font-weight:bold;
text-decoration:none;
}

#sous-menu a:hover{
font-family:arial;
font-size:80%;
color:#a8121d;
font-weight:bold;
text-decoration:none;
}

.sous-menu-fixe{
font-family:arial;
font-size:80%;
color:#a8121d;
font-weight:bold;
text-decoration:none;
}

#design{
float:left;
width:33%;
text-align:center;
}

#print{
float:left;
width:33%;
text-align:center;
}

#web{
float:left;
width:33%;
text-align:center;
}

#milieu{
position:relative;
clear:both;
width:100%;
height:70%;
}

#book{
width:50%;
height:100%;
margin-left:25%;
}

#titre-rub{
width:100%;
}

#image{
position:relative;
width:75%;
float:left;
}

#detail{
position:relative;
margin-left:2%;
width:22%;
float:left;
height:60%;
min-height:125px;
overflow:auto;
}

#txt{
width:90%;
}

#txt a:link, #txt a:active, #txt a:visited{
font-family:arial;
color:#000000;
font-size:12px;
font-weight:normal;
text-decoration:underline;
}

#txt a:hover{
font-family:arial;
color:#a8121d;
font-size:12px;
font-weight:normal;
text-decoration:underline;
}

#texte-ref{
width:50%;
margin-left:25%;
}

.txt a:link, .txt a:active, .txt a:visited{
font-family:arial;
color:#000000;
font-size:12px;
font-weight:normal;
text-decoration:underline;
}

.txt a:hover{
font-family:arial;
color:#a8121d;
font-size:12px;
font-weight:normal;
text-decoration:underline;
}

.traitdroite{
border-right: 2px solid black;
}

h1{
text-align:center;
font-family:arial;
color:#a8121d;
font-size:18px;
}

h2{
font-family:arial;
color:#a8121d;
text-align:center;
font-size:14px;
}

h3{
font-family:arial;
color:#000000;
font-size:18px;
}

.txt{
font-family:arial;
color:#000000;
font-size:12px;
font-weight:normal;
}

.rouge{
font-family:arial;
font-size:12px;
font-weight:normal;
color:#a8121d;
}

strong{
font-weight:normal;
font-family:arial;
color:#000000;
font-size:12px;
}

#txt-portfolio{
width:90%;
}

#txt-portfolio a:link,#txt-portfolio a:active,#txt-portfolio a:visited{
font-family:arial;
color:#000000;
text-decoration:none;
font-size:18px;
}

#txt-portfolio a:hover{
font-family:arial;
color:#a8121d;
font-size:18px;
text-decoration:none;
}

#detail a:link, #detail a:active, #detail a:visited{
font-family:arial;
color:#a8121d;
text-decoration:none;
text-decoration:underline;
font-size:12px;
font-weight:bold;
}

#detail a:hover{
font-family:arial;
color:#eb1929;
font-size:12px;
text-decoration:underline;
font-weight:bold;
}


/******formulaire de contact****/

#txt-contact{
width:40%;
min-width:150px;
text-align:justify;
float:left;
}

#formu{/*mise en page de la div formu pour la page contact*/
width:100%;
min-width:150px;
color:#a8121d;
font-family:arial;
font-size:12px;
font-weight:normal;
margin-top:20px;
background-image:url(img/fond-formu.png);
background-repeat:repeat;
border-color:#000000;
border-style:solid;
border-width:1px;
}

#formulaire{
width:90%;
min-width:130px;
margin-left:5%;
padding-top:20px;
padding-bottom:20px;
}

.champdetexte{/*style pour les champs de texte pour le formulaire de la page contact*/
width:100%;
font-family:arial;
font-size:12px;
color:#000000;
font-weight:normal;
background:#ffffff;
border-color:#000000;
border-style:solid;
border-width:1px;
}

.calage{/*calage pour le formulaire de la page contact*/
display:inline;
float:left;
width:100px;
font-family:arial;
font-size:12px;
padding-top:5px;
}

#valider{/*div contenant le btn envoyer et effacer du formulaire de contact*/
width:100%;
padding-top:10px;
padding-bottom:20px;
}

#envoyercontact{/*bouton envoyer de la page contact*/
min-width:82px;
width:20%;
color:#000000;
float:left;
}

#effacercontact{
min-width:82px;
width:20%;
color:#000000;
float:left;
}

.btn-formu{
background-color:#000000;
border-color:#000000;
border-style:solid;
color:#ffffff;
font-family:arial;
font-weight:bold;
cursor:pointer;
}

#messageErreur{
width:50%;
min-width:300px;
text-align:justify;
}


#coordonnees{
width:40%;
margin-left:10%;
min-width:90px;
text-align:justify;
float:left;
}

#coordonnees a:link,#coordonnees a:active, #coordonnees a:visited{
font-family:arial;
font-size:12px;
font-weight:bold;
color:#a8121d;
text-decoration:underline;
}

#coordonnees a:hover{
font-family:arial;
font-size:12px;
font-weight:bold;
color:#eb1929;
text-decoration:underline;
}

.erreur{
font-family:arial;
font-size:12px;
font-weight:normal;
color:#a8121d;
}

.ok{
font-family:arial;
font-size:12px;
font-weight:normal;
color:#39712a;
}


/***************************************/

#carte{
width:100%;
max-width:225px;
}

#btn{
width:100%;
margin-top:5%;
}

#grp-design{
width:100%;
clear:both;
}

#btn-design{
float:left;
width:10%;
}

#txt-design{
float:left;
margin-left:5%;
width:85%;
text-align:left;
}

#grp-print{
width:100%;
clear:both;
padding-top:3%;
}

#btn-print{
float:left;
width:10%;
}

#txt-print{
float:left;
margin-left:5%;
width:85%;
text-align:left;
}

#grp-web{
width:100%;
clear:both;
padding-top:3%;
}

#btn-web{
float:left;
width:10%;
}

#txt-web{
float:left;
margin-left:5%;
width:80%;
text-align:left;
}

#txt-mentions{
width:90%;
text-align:justify;
}

#txt-mentions a:link, #txt-mentions a:active, #txt-mentions a:visited{
font-family:arial;
color:#a8121d;
font-size:12px;
font-weight:normal;
text-decoration:underline;
}

#txt-mentions a:hover{
font-family:arial;
color:#eb1929;
font-size:12px;
font-weight:normal;
text-decoration:underline;
}

/***********Voeux 2012********************/

#ensemble2{
width:100%;
height:100%;
min-width:800px;
min-height:600px;
overflow:visible;
}

#voeux2{
position:relative;
width:612px;
margin:auto;
padding-top:30px;
}
#image2{
position:relative;
width:612px;
height:518px;
margin:auto;
border:solid 1px #000000;
}