body {
	margin: 0px 0;
	padding: 0;
	text-align: center;
	font: 13px "Trebuchet MS", helvetica, sans-serif;
	background: #fff0b3;
/* On à ajouté de quoi mettre une police de caractère et une couleur de fond */
	}
div#container {
	width: 780px;
	margin: 0 auto;
	text-align: left;
	border: 0px solid #ab4;
	/*align: center;*/
	background: url(design/droite.gif) repeat-y right top #ffffff;
/* Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci #ffffcc;*/
	}
div#header {
	height: 100px;
	background: url(design/titre.gif) no-repeat left top;
/* Une image de fond correspondant aux 100 pixels de tout à l'heure, attention à bien compresser vos images */
	}

div#header h1 {
	width: 780px;
	height: 90px;
	margin: 0;
	position: relative;
	}
/* On définit largeur et hauteur au titre h1, on supprime les marges et on place le titre en position relative pour pouvoir le placer grâce aux top et left */
div#header h1 a {
	width: 780px;
	height: 90px;
	display: block;
	/*background: url(design/title.gif) no-repeat;*/
	}
/* On donne les mêmes dimensions au lien, chose possible grâce à la propriété display: block; qui transforme le lien en élément de type block, auquel on peut donner des propriétés de taille. On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
div#header h1 a span {
	display: none;
	}
/* Le span entourant le texte est fait pour pouvoir ne supprimer que le texte, ce que nous voulons, il suffit donc de donner à la propriété display la valeur none pour ne pas afficher le texte */



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


div#menu {
	height: 27px;
	width: 770px;
	background: url(design/menu.gif) repeat-x 0 -27px;
	}
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel */
div#menu ul {
	margin: 0;
	padding: 0;
	}
div#menu ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	text-align: center;
	}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */

div#menu ul li a {
	width: 95px;
	line-height: 26px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #CC6600;
	display: block;
	text-decoration: none;
	border-right: 1px solid #CC6600;
	}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a gràce à la propriété display: block; */

div#menu ul li a:hover {
	color: #FFFF00;
	background: url(design/menu.gif) repeat-x 0 0;
	}
/* Et pour finir on déle l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */


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


div#menu2 {
	float: right ;
	width: 210px ; /*taille de l'image de fond de droite */
	}
div#menu2 h2 {
	display: none;
	}
div#menu2 h3 {
	display: block;
	/*width: 200px;*/
	height: 40px;
	font-size: 18px;
	margin: 5px 0px 0px 0;
	padding-top: 6px;
	color: #CC6600;
	text-indent: 15px;
	background: url(design/bg_h3.gif) no-repeat;
	}
div#menu2  dt {
	display: block;
	width: 200px;
	height: 40px;
	font-size: 18px;
	margin: 5px 0 0px 0;
	padding-top: 6px;
	color: #CC6600;
	text-indent: 15px;
	background: url(design/bg_h3.gif) no-repeat;
	cursor: pointer;
	}
div#menu2 h3#panier {
	/*display: block;*/
	padding-left: 0px;
	text-indent: 45px;
	background: url(design/bg_h3_panier.gif) no-repeat;
	}
div#menu2 ul {
	margin: 0;
	padding: 0;
	}
div#menu2 ul li  {
	/*height: 25px;*/
	line-height: 25px;
	margin: 0;
	padding: 0;
	text-indent: 10px;
	list-style-type: none;
	}
div#menu2 dl, dd {
	margin: 0;
	padding: 0;
	text-indent: 10px;
	list-style-type: none;
}
div#menu2 p {
	/*text-align: justify;*/
	font-size: 13px;
	/*line-height: 1.5em;*/
	padding: 0px 0px;
	text-indent: 10px;
	}
div#menu2 a#normal {
	display: inline;
	border-bottom: none;
	text-indent: 10px;
	}

div#menu2 ul li a, div#menu2 a {
	width: 95%;
	display: block;
	color: #CC6600;
	text-decoration: none;
	text-indent: 10px;
	border-bottom: 1px solid #CC6600;
	}
div#menu2 ul li a:hover, div#menu2 a:hover {
	color: #333399;
	border-bottom: 1px solid #333399;
	}

div#menu2 input.bouton_gg{
  margin: 0;
padding: 0;
background-image: url("http://bouledeterre.com/design/btn_google_56_20.gif");
  border: 1px solid #333;
cursor: pointer;
color: white;
background-color: white;
height: 22px;
width: 58px;
}

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


div#page {
	width: 550px; /*580 - 10 px pour la décoration de l'ombre à droite  -10 *2 pour les marges */
	float: left ;
	padding: 10px 10px;
}

div#page h2 {
	padding-left: 30px;
	line-height: 25px;
	font-size: 19px;
	background: url(design/p_amphore.gif) no-repeat left bottom;
	color: #CC6600;
	border-bottom: 1px solid #CC6600;
	}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */

div#page h3 {
	margin-left: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #CC6600;
	border-left: 3px solid #CC6600;
	color: #CC6600;
	}
/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */
div#page p {
	text-align: justify;
	/*text-indent: 2em;*/
	line-height: 1.7em;

}

.rouge{
	color: red;
}

div#accueil p{
	text-align: center;
	text-indent:0;
	font-style: italic;
	font-weight: bold;
}

/* On rend les paragraphes plus propre, alignement justifié, alinéa et auteur de ligne supérieure à l'état normal pour aérer le tout */
div#page a {
	color: #CC6600;
	}
div#page a:hover {
	color: #ff9666;
	}
/* On met en forme les liens contenu dans la page */



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



div.detail_art {
	width: 490px;
	margin: 0px 5px 5px 0px;
	padding: 5px;
	border: 1px solid #9a7;
	background: #ffffcc;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 10px;
	text-align: justify;
}

.detail_art ul li {
	display: block;
	font-weight: bold;
	font-size: 13px;
	line-height: 15px;
	text-decoration: none;
	list-style-type: none;
}

.detail_art_img {
	margin: 3px 3px 3px 3px;
	padding: 2px;
	border: 1px solid #9a7;
}

/*div#page h2 */
div#page h2.article {
	/*color: #CCFFFF;*/
	background: #FFCC99;
	border-bottom: none;
	margin: 0px;
	padding: 0px;
}

div#page h2.articlepromo {
	/*color: #CCFFFF;*/
	border-bottom: none;
	margin: 0px;
	padding: 0px;
	background-image: url(design/promo.gif); background-position:right top; background-repeat: no-repeat;
	background-color: #FFCC99;
}

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


/*** Formulaires  ***/
div.form fieldset {
	padding: 7px;
	border: 1px solid #9a7;
	}
/*div.form fieldset legend {
	padding: 0 5px;
	border: 1px solid #9a7;
	background: #eaf2da;
	}*/
div.form fieldset label {
	float: left;
	margin: 0 15px 0 0;
	}
div.form fieldset input#titre, div.form fieldset input#edit_titre {
	width: 400px;
	font-size: 15px;
	font-weight: bold;
	color: #ab9;
	}
div.form fieldset input.text {
	/*width: 200px;*/
	border: 1px solid #96a478;
	background-color:#eaf2da;
	/*background: url(design/bg_input.gif) repeat-x left bottom;*/
	}
div.form select {
	background-color:#eaf2da;
	border-color:green;
	border: 0px solid;
}

div.form fieldset textarea {
	/*width: 400px;
	height: 150px;*/
	padding: 5px 0 5px 5px;
	border: 1px solid #9a7;
	background: #eaf2da;
	font-family: helvetica, sans-serif;
	}

div.form input.bouton {
	border: 1px solid #000;
	background: #eaf2da;
}

div.form input.bouton:hover {
	background-color:white;
	color:red;
}

div.form input.bouton:active {
	border:2px inset red;
	background-color:red;
	color:white;
}


/************************************************/
	/* mise en page des formulaires */

#piedForm {
	text-align: right; /*** Les boutons sont alignés à droite ***/
}
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}

#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	/*border: 1px solid black;*/
	color: black;
	/*background: #efefef;*/
	margin: 0;
	padding: 1em;
}
#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: black;
	background: transparent;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;
}
#corpForm fieldset#coordonnees label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 40%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}
#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}

#corpForm label.oblig {
	font-weight: bold;	/*** Mise en évidence des champs obligatoires ***/
}

#corpForm a.aide {	/*** Mise en forme des bulles d'aide ***/
	text-decoration: none;
}
#corpForm a.aide img {	/*** Mise en forme de l'image des bulles d'aide ***/
	margin: 0;
	padding: 0;
	border: 0;
}
#corpForm a.aide:hover {	/*** Le curseur de la souris change d'aspect quand il passe au-dessus d'une bulle d'aide ***/
	cursor: help;
}
#corpForm .focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: beige;
	color: black;
}
#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
}
	/**** les vrais tableaux *********/

table {
	border-style:none;
	border-width:1px;
	border-color:black;
	width:100%;
	/*border-collapse:collapse;*/
	font-size: 13px;

}

th {
	border-style:none;
	border-width:1px;
	/*border-color:#FFFFFF;*/
	/*padding:1px;*/
	font-weight: bold;
	text-align:center;
	background-color:#FFCC99;

}

td.chiffre_b {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:right;
	background-color:#F5F3F1;
}

td.texte_b {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:left;
	background-color:#F5F3F1;
}


td.chiffre_o {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:right;
	background-color:#FCDDBE;
}

td.texte_o {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:left;
	background-color:#FCDDBE;
}

td.texte {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:right;
	font-weight: bold;
	/*background-color:#FCDDBE; */
}

td.chiffre {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:right;
	/*background-color:#FCDDBE; */
}

td.chiffre_g {
	border-style:none;
	border-width:1px;
	/*border-color:green;*/
	text-align:right;
	font-weight: bold;
	/*background-color:#FCDDBE; */
}

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

div#galerie
{
	width: 520px ;
	background: #FFFFCC ;
	border: 1px solid #dcb ;
	/*padding: 15px ;*/
	/*margin: 15px 30px ;*/
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 13px Georgia, serif ;
	color: #006633 ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #dcb ;
}

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

.photo_flottante {
	margin: 2px;
	float: left;
	width: 32%;
	height:145px;
	text-align: center;
}

.photo_conteneur {
	width: 100%;
	text-align: center;
}

.photo_spacer {
	clear: both;
}
/*************************************************************************************/

div#footer {
	width: 780px;
	padding-top: 0px;
	padding-right: 0px;
	line-height: 55px;
	text-align: center;
	border: 0px solid;
	color: #8a0;
	background: #fff url(design/bg_footer.gif) no-repeat left bottom;
	clear: both;
	}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre {
	overflow: auto;
	background: #dea;
	border: 2px solid #9b2;
	padding: 5px 0 0 5px;
	font-size: 1.2em;
/*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
	}
* html pre {
	width: 636px;
	}

/*************************************************************************************/
.alert {
	background: #fff6bf url(design/exclamation.png) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	}

.info {
	background: #f8fafc url(design/information.png) 15px 50% no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #b5d4fe;
	border-bottom: 2px solid #b5d4fe;
	}