/* Feuille de style pour le contenu des pages
 * C'est cette feuille de style qui doit être liée aux pages du site
 * La feuille de style de la charte est appelée depuis cette feuille.
 */
 
/* Import des style pour la charte */
@import "charte.css";

/******************** Contenu Page ***************************/

#contenuTexte h1{
	width: 779px;
  height: 50px;
}
#contenuTexte h1 span{
	display:none;
}
#contenuTexte h1.accueil{background: url(../images/titres/titre-accueil.gif) left top no-repeat;}
#contenuTexte h1.visite{background: url(../images/titres/titre-visite.gif) left top no-repeat;}
#contenuTexte h1.produits-haircare{background: url(../images/titres/titre-produits-haircare.gif) left top no-repeat;}
#contenuTexte h1.produits-styling{background: url(../images/titres/titre-produits-styling.gif) left top no-repeat;}
#contenuTexte h1.produits-couleurs{background: url(../images/titres/titre-produits-couleurs.gif) left top no-repeat;}
#contenuTexte h1.contact{background: url(../images/titres/titre-contact.gif) left top no-repeat;}
#contenuTexte h1.galerie{background: url(../images/titres/titre-galerie.gif) left top no-repeat;}
#contenuTexte h1.livre{background: url(../images/titres/titre-livre.gif) left top no-repeat;}
#contenuTexte h1.histoire{background: url(../images/titres/titre-histoire.gif) left top no-repeat;}
#contenuTexte h1.merci{background: url(../images/titres/titre-merci.gif) left top no-repeat;}
#contenuTexte h1.mentions{background: url(../images/titres/titre-mentions.gif) left top no-repeat;}

#contenuTexte h2{
	padding: 5px;
	font:bold 1.4em Arial, Helvetica, sans-serif;
	text-align:left;
	color:#eee;
	background-color: #000;
	margin-bottom: 10px;
}

#contenuTexte p{
	padding-bottom:7px;
	font: normal 1.2em Arial, Helvetica, sans-serif;
	color: #EEEEEE;
	text-align:justify;
}

#contenuTexte a:link, #contenu a:visited{
	color: #FF9900;
	font-weight: bold;
	text-decoration:none;
}
#contenuTexte a:hover, #contenu a:active{
  font-weight: bold;
	color: #ff9900;
	text-decoration:underline;
}
#contenuTexte p.couleur, .couleur{
	font-weight:bold;
	color:#FFFFFF;
}
#contenuTexte p.gros, .gros{
	font:bold 1.2em Arial, Helvetica, sans-serif;
	color:#EEE;
	padding: 2px 5px;
	letter-spacing: 0.01em;
	background-color: #000;
}

#boiteCouleurs{
	background: url(../images/charte/bg-couleurs.jpg) left top no-repeat;
	width: 772px;
	height: 440px;
	margin-bottom: 8px;
	border: 3px solid #000000;
}
#boiteCouleurs h1{
	font: normal 3em Arial, Helvetica, sans-serif;
	letter-spacing: 0.2em;
	color:#FF9900;
	width: 300px;
}
#boiteCouleurs ul{
	margin-left: 2px;
}
#boiteCouleurs .listCouleurs li{
	font: bold 1.7em Arial, Helvetica, sans-serif;
	color: #EEEEEE;
	letter-spacing: 0.01em;
	background: url(../images/charte/puce-couleurs.gif) left top no-repeat;
	padding-left: 20px;
	padding-bottom: 10px;
	list-style-type: none;
}

.boite{
background: url(../images/charte/bg-boite-contenu.gif) left top repeat-y;
width: 380px;
float: left;
}
.boite-contenu-01{
  background: url(../images/charte/bg-boite-top.gif) left top no-repeat;
	width: 380px;
	float: left;
}


.boite-contenu-02{
  background: url(../images/charte/bg-boite-top-02.gif) left top no-repeat;
	width: 380px;
	float: left;
}
.boite-bas{
  background: url(../images/charte/bg-boite-bas.gif) left top no-repeat;
	width: 380px;
	height: 17px;
	float: left;
}

.photo-droite{
  border: 3px solid #000000;
	float: right;
	margin-left: 20px;
	padding: 2px;
	background-color: #343434;
}
.photo-gauche{
  border: 3px solid #000000;
	float: left;
	margin-right: 20px;
	padding: 2px;
	background-color: #343434;
}
.photo{
  border: 3px solid #000000;
	padding: 2px;
	background-color: #343434;
}

.divGalerie{
	background: url(../images/charte/bg-photo-galerie.gif) left top no-repeat;
	height: 190px;
  width: 150px;
	text-align: center;
	float: left;
	margin-right: 6px;
	margin-bottom: 10px;
}


.thumbPhotoGalerie{
   width: 150px;
	 height: 150px;
	 float: left;
	 text-align: center;
}

.divGalerie p{
  font-weight: bold;
	padding-bottom: 0px;
	float: left;
	width: 146px;
	height: 30px;
}


.photoProduits{
  border: 2px solid #F37800;
	padding: 2px;
	background-color: #343434;
}

.photoProduitsOver{
  border: 2px solid #EEEEEE;
	padding: 2px;
	background-color: #343434;
}

.photoGalerie{
  border: 2px solid #E64B09;
	padding: 2px;
	background-color: #343434;
}

.photoGalerieOver{
  border: 2px solid #EEEEEE;
	padding: 2px;
	background-color: #343434;
}


.separateur{
	background: url(../images/charte/separateur.gif) center top no-repeat;
	height: 31px;
	width: 779px;
	text-align: center;
	clear: both;
}

#contenuTexte .bgProduitHaircare{
  width: 190px;
	height: 300px;
	float: left;
	margin-right: 5px;
	margin-bottom: 6px;
	background: url(../images/charte/bg-admin.gif) left top no-repeat;
}
#contenuTexte .titreProduitHaircare{
  font:bold 1.3em Arial, Helvetica, sans-serif;
	color:#b1b1b1;
	text-align: center;
	padding: 20px 0px;
}
#contenuTexte .link-texte:link, #contenuTexte .link-texte:visited{
  color: #fff;
	font-weight: normal;
	text-decoration:none;
}
#contenuTexte .link-texte:hover{
	text-decoration:underline;
}
#contenuTexte .contact-haircare:link, #contenuTexte .contact-haircare:visited{
  color: #F8800B;
	font-weight: bold;
	text-decoration:none;
}
#contenuTexte .contact-haircare:hover{
	text-decoration:underline;
}
#contenuTexte .produits-texte{
  padding: 10px;
	height: 63px;
}

.reponseGuest{
  padding-bottom:7px;
	font: normal 1.1em Arial, Helvetica, sans-serif;
	color: #EEEEEE;
	text-align:center;
}


/********************** CONTACT ************************/
#adresseContact{
  width: 779px;
	height: 150px;
	background: url(../images/charte/bg-contact-top.gif) left top no-repeat;
}


#contenuTexte .text-contact p{
	font:normal 1em/2em Arial, Helvetica, sans-serif;
	text-align: center;
	color: #EEEEEE;
	text-decoration: none;
}

/***************** label *****************/
#contenuTexte .label{
	width:83px;
	float:left;
	font:bold 1.2em Arial, Helvetica, sans-serif;
	vertical-align: top;
	text-align:left;
	color:#EEEEEE;
}

#contenuTexte .label-livredor{
	width:100px;
	float:left;
	font:bold 1.2em Arial, Helvetica, sans-serif;
	vertical-align: top;
	text-align:left;
	color:#EEEEEE;
	padding-bottom: 0px;
}
/*#contenuTexte .label-right{
	width:83px;
	float:right;
	font:bold 1.2em Arial, Helvetica, sans-serif;
	vertical-align: top;
	text-align:justify;
	color:#4B2A00;
}*/

/***************** input *****************/
.input-left{
	float:left;
	margin-bottom: 2px;
}
.input-right{
  float:right;
	margin-bottom: 2px;
}
.br-form{
	clear: both;
	padding: 0px;
	margin: 0px;
}
.inputForm{
	border: 2px solid #000000;
	background: url(../images/charte/bg-input.gif) left top repeat-x;
  letter-spacing: 1px;
  width:199px;
	font:bold 1.2em Arial, Helvetica, sans-serif;
	color:#000000;
  float: left;
}
.inputFormOver{
	border: 2px solid #000000;
	background: url(../images/charte/bg-input-hover.gif) left top repeat-x;
	width:199px;
  letter-spacing: 1px;
	font:normal 1.2em Arial, Helvetica, sans-serif;
	color:#000000;
  float: left;
}

/***************** btns *****************/

.envoyer{
	background: url(../images/charte/envoyer.gif);
	border: 0px;
	width: 100px;
	height: 25px;
	cursor: pointer;
}
.envoyerOver{
	background: url(../images/charte/envoyer-hover.gif);
  border: 0px;
  width: 100px;
	height: 25px;
	cursor: pointer;
}

.retablir{
	background: url(../images/charte/retablir.gif);
	border: 0px;
	width: 100px;
	height: 25px;
	cursor: pointer;
}
.retablirOver{
  background: url(../images/charte/retablir-hover.gif);
  border: 0px;
  width: 100px;
	height: 25px;
	cursor: pointer;
}