﻿body
{
    background: url(../images/background.jpg);
    background-repeat: repeat-x;
    margin: 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.7em Arial, helvetica, sans-serif ;
	color: #555555;
	font-weight: normal;
}
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */

.conteneur
{
	width: 800px ;
	margin: 0 auto ;
	text-align: left ;
	background: #FFF;
	border: 1px dashed #99cccc;
}

.header
{
    margin: 10px 25px 0 25px;
    border: 0px solid black;
}

.menu
{
    margin: 0;
    border: 0px solid black;
}

.main
{
    display: block;
    clear: both;
    margin: 25px 25px 0 25px;
    min-height: 400px;
    text-align: left;
    border: 0px solid Red;
}

.footer
{
    margin-top: 10px;
    border: 0px solid black;
}

#boutonsHeader { float: right; margin-top: 40px; }
#boutonsLangues { float: left; margin-top: 8px; }
#boutonsPanierCompte { float: left; margin-left: 20px; }
#logoHeader { float: left; margin: 10px 0 0 25px; }

.separationBleue { background-color: #e5e9f1; color: #e5e9f1; border: 0; height: 8px; }
.petiteSeparationGrise { background-color: #ededed; height: 2px; border: 0; margin-bottom: 10px;}
.separationVerte { background-color: #dae3d9; color: #dae3d9; height: 8px; border: 0;}
.separationPointillee { background: url(../images/separationPointillee.gif) repeat-x; height: 1px; border: 0; margin: 20px 0 20px 0; }

a, a:link { color: #555555; font-weight: normal; text-decoration: none; }
a:visited { color: #555555; font-weight: normal; text-decoration: none; }
a:hover { color: #222222; font-weight: normal; text-decoration: none; }
a:active { color: #555555; font-weight: normal; text-decoration: none; }

a.lienBleu { color: #4c7f9a; }
a.lienArticle { color: #4c7f9a; text-decoration: underline; }

.bleu { color: #4c7f9a; }
.gris { color: #555555; }

.separationTexteGrise { width: 2px; height: 20px;  margin-left: 10px;  margin-right: 10px; vertical-align: text-bottom; }
.petiteSeparationTexteGrise { width: 1px; height: 14px;  margin-left: 4px;  margin-right: 4px; vertical-align: text-bottom; }
.footer .separationTexteGrise { width: 1px; height: 14px;  margin-left: 6px;  margin-right: 6px; vertical-align: text-bottom; }
.separationTexteBleue { width: 1px; height: 14px; margin-left: 6px; margin-right: 6px; vertical-align: text-bottom; }



.cadreGris { border: 1px solid #cccccc; }

.loupeOurs
{
    position: relative;
    bottom: 23px;
    right: -45%;
}

.loupePlan
{
    position: relative;
    bottom: 40px;
    right: -43%;
}



#credits
{
    margin: 30px 30px 0 30px;
    padding: 0 30px 0 30px;
    border: 0px solid black;
}

#mentionsLegales
{
    margin: 30px 30px 0 30px;
    padding: 0 30px 30px 30px;
    text-align: justify;
    border: 0px solid black;
}

#conditionsGenerales
{
    margin: 30px 30px 0 30px;
    padding: 0 30px 30px 30px;
    text-align: justify;
    border: 0px solid black;
}

.labelTitre
{
    color: #4c7f9a;
    font-size: 14px;
    font-weight: bold;
}

.labelSousTitre
{
    color: #4c7f9a;
    font-size: 12px;
    font-weight: bold;
}



.monCompte_inscription
{
    float: right;
    width: 500px;
    border: 0px solid black;
}

.monCompte_identification
{
    float: left;
    width: 210px;
    padding: 10px;
    background-color: #ededed;
    border: 0px solid green;
}

#monCompte_infosLivraison
{
    float: left;
    clear: left;
    width: 210px;
    margin-top: 25px;
    padding: 10px;
    background-color: #ededed;
    border: 0px solid blue;
}

h1 {color: #4c7f9a; font-size: 24px;}
h2 {color: #4c7f9a; font-size: 14px;}
h3 {color: #000000; font-size: 10px;}

#pnlMonCompte_inscription h2 {color: #4c7f9a; font-size: 18px;}

.labelBleu
{
    color: #4c7f9a;
    font-size: 10px;
    font-weight: bold;
    clear: right;
}

.labelNoir
{
    color: #000000;
    font-size: 10px;
    font-weight: bold;
}

.histoire_Droite { float: right; width: 450px; border: 0px solid black; }
.histoire_Gauche { float: left; width: 258px; text-align: center; border: 0px solid black;  }

.atelier_Droite { float: right; width: 400px; border: 0px solid black; }
.atelier_Gauche { float: left; width: 258px; text-align: left; border: 0px solid black;  }

.catalogue_Droite { float: right; width: 400px; border: 0px solid black; }
.catalogue_Gauche { float: left; width: 258px; text-align: center; border: 0px solid black; }

.produit_Droite { float: right; width: 460px; border: 0px solid black; }
.produit_Gauche { float: left; width: 258px; text-align: center; border: 0px solid black;}

.contact_Droite { float: right; width: 250px; border: 0px solid black; }
.contact_Gauche { float: left; width: 460px; text-align: center; border: 0px solid black;}

.presse_Droite { float: right; width: 350px; border: 0px solid black; }
.presse_Gauche { float: left; width: 350px; border: 0px solid black;}

.legendeImage { color: #999999; font-size: 10px; }
.legendeImageBleue { color: #4c7f9a; font-size: 11px; font-weight:bold; }

.citation
{
    color: #4c7f9a;
}

/* Classe Produits sur mesure */

.surMesure_listeProduits
{
/* Zone d'affichage de tous les produits */
    float: left;
    width: 100%;
    border: 0px solid red;
}

.surMesure_produit
{
/* Zone d'affichage pour chaque produit */    
    display: block;
    float: left;
    width: 350px;
    border: 0px solid blue;
    /* Ici tu peux régler l'espacement entre chaque produit */
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.produitBleu { color: #4c7f9a; font-size: 12px; font-weight: bold; }
.labelProduitBleu   { color: #4c7f9a; font-size: 13px; }
.radioList   { color: #777777; font-size: 12px; vertical-align: text-top; }

.radioList input { margin: 0 5px 0 15px; vertical-align:middle; }

.detailsProduit { color: #777777; font-size: 12px; }

.titrePanier { color: #cccccc; font-size: 14px; }

.legendeArticle { font-style: italic; }