@charset "UTF-8";
body  {
	background: #F0E9DD;
	margin: 0; /* il est conseill de mettre  zro la marge et le remplissage de l'lment body, pour tenir compte des diffrentes valeurs par dfaut des navigateurs */
	padding: 0; /* ce paramtrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite align  gauche (valeur par dfaut) dans le slecteur #contenant */
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
    }

    .gaul #contenant {
	width: 650px;
	background-color: #FFF8EB;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding: 0px;
	position: relative;
	top: 20px;
	margin: auto;
    } 
.gaul #contenant2 {
	width: 650px; /* ce paramtrage annule le paramtre text-align: center de l'lment body. */
	background-color: #C5CFBA;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	position: relative;
	top: 20px;
	height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	text-align: center;
}

    .gaul #haut {
	background: #F0E9DD;
	padding: 0;
	height: 67px;
    } 

    .gaul #haut h1 {

    	margin: 0; /* la mise  zro de la marge du dernier lment du div #haut permet d'viter une disparition de la marge (espace inexplicable entre les lments div). Si l'lment div est entour d'une bordure, cette prcaution n'est pas ncessaire, car la bordure vite galement la disparition de la marge */

    	padding: 10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'loigner l'lment des bords de l'lment div */

    }

    .gaul #mng1 {
	float: left; /* cet lment est flottant, il faut donc lui attribuer une largeur */
	width: 140px; /* la couleur de l'arrire-plan est affiche sur la largeur du contenu de la colonne, mais pas au-del */
	padding: 0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	margin: 0px;
    }
.gaul #mng2 {
	float: left; /* cet lment est flottant, il faut donc lui attribuer une largeur */
	width: 140px; /* la couleur de l'arrire-plan est affiche sur la largeur du contenu de la colonne, mais pas au-del */
	padding: 0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	background-color: #999966;
	height: 70px;
	vertical-align: middle;
}

    .gaul #principal {
	width: 510px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: center;
	white-space: normal;
	font-weight: normal;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    } 
.gaul #principal-centre {
	width: 510px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: center;
	white-space: normal;
	margin: 0px;
	padding: 0px;
}
.gaul #principal-cave {
	width: 510px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: center;
	white-space: normal;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	background-image: url(img/fd_princ_7.jpg);
}
.gaul #principal-mer {
	width: 510px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: center;
	white-space: normal;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	background-image: url(img/fd_princ_mer.jpg);
}

    .gaul #pied {
	width: 630px;
	position: relative;
	float: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	font-weight: normal;
	text-align: left;
	padding-left: 20px;
    } 

    .gaul #pied p {

    	margin: 0; /* la mise  zro de la marge du premier lment du pied de page permet d'viter une possible disparition de la marge (espace entre les lments div) */

    	padding: 10px 0; /* l'utilisation d'un remplissage pour cet lment cre un espace, tout comme une marge l'aurait fait, mais en vitant le risque de disparition de la marge */

    }
.principal_1 {
	float: left;
	width: 230px;
	margin-top: 10px;
	font-size: 0.9em;
	text-align: center;
	padding-right: 8px;
}
.principal_2 {
	float: left;
	width: 230px;
	margin-top: 10px;
	font-size: 0.9em;
	padding: 5px;
	text-align: left;
}
.principal_3 {
	float: left;
	width: 246px;
	margin-top: 0px;
	font-size: 0.9em;
	text-align: center;
	background-image: url(img/fd_princ_g.jpg);
	border-right-width: thin;
	border-right-style: dashed;
	border-right-color: #FFFFFF;
}
.principal_4 {
	float: left;
	width: 250px;
	margin-top: 0px;
	font-size: 0.9em;
	text-align: center;
	background-image: url(img/fd_princ_d.jpg);
}
.principal_5 {
	float: left;
	width: 250px;
	margin-top: 0px;
	font-size: small;
	text-align: center;
}
.principal_6 {
	float: left;
	width: 250px;
	margin-top: 0px;
	font-size: small;
	text-align: center;
	background-repeat: no-repeat;
}
.principal_7 {
	float: none;
	font-size: 0.9em;
	text-align: left;
	clip: rect(auto,auto,auto,auto);
	margin: 0px;
	width: 480px;
	padding: 0px;
}
.principal_9 {
	float: left;
	width: 246px;
	font-size: 0.9em;
	text-align: center;
	background-image: url(img/fd_princ_9.jpg);
	border-right-width: thin;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #FFFFFF;
}
.principal_10 {
	float: left;
	width: 250px;
	margin-top: 0px;
	font-size: 0.9em;
	text-align: center;
	background-image: url(img/fd_princ_10.jpg);
}
.principal_rot {
	width: 510px;
	height: 30px;
	text-align: center;
	background-color: #FFF8EB;
	margin: 0px;
}
.ptebte {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
.bas_ext {
	float: none;
	width: 650px;
	height: 50px;
	margin-top: 10px;
	font-size: x-small;
	text-align: center;
	background-color: #009966;
	clip: rect(auto,auto,auto,auto);
}

    .clearfloat { /* cette classe doit tre place pour un lment div ou break et doit tre l'lment final avant la balise de fin d'un conteneur qui doit contenir entirement un lment flottant */

    	clear:both;

        height:0;

        font-size: 1px;

        line-height: 0px;

    }

    .fltrt { /* cette classe permet de rendre flottant le ct droit d'un lment dans la page. L'lment flottant doit prcder l'lment  ct duquel il doit se trouver dans la page. */

    	float: right;

    	margin-left: 8px;

    }

    .fltlft { /* cette classe permet de rendre flottant le ct gauche d'un lment dans la page */
	float: left;
	margin-right: 6px;
	margin-bottom: 0px;
    }
.bte {
	float: left;
	width: 480px;
	font-size: small;
	text-align: justify;
}
.gaul #principal-fdm {
	width: 510px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: center;
	white-space: normal;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	background-image:  url(img/fd_princ_mere.jpg);
}
.bte-coul {
	float: left;
	width: 490px;
	font-size: 0.8em;
	background-color: #FFCC99;
	text-align: left;
	padding-left: 10px;
	padding-top: 5px;
}
.gaul #principal-dt {
	width: 510px;
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	white-space: normal;
	margin: 0px;
	padding: 0px;
}
.principal_500 {
	float: left;
	width: 500px;
	font-size: 0.9em;
	text-align: center;
	background-color: #E4D6C7;
	padding: 3px;
}
.principal_caf {
	float: left;
	width: 240px;
	font-size: 0.9em;
	text-align: left;
	text-indent: 0px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.bte-coul_caf {
	float: left;
	width: 230px;
	font-size: small;
	background-color: #D1C7B7;
	text-align: left;
	font-weight: bold;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.principal_caf_mn {
	float: right;
	width: 218px;
	margin-top: 5px;
	font-size: 0.9em;
	text-align: center;
	text-indent: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-left: 0px;
	padding-right: 10px;
	margin-right: 8px;
	background-color: #D1C7B7;
}
.principal_caf_dt {
	float: right;
	width: 240px;
	font-size: 0.9em;
	text-align: left;
	text-indent: 0px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.principal_index {
	float: left;
	width: 500px;
	margin-top: 10px;
	font-size: 0.9em;
	text-align: justify;
	padding-right: 8px;
}
.gaul #principal-left {
	width: 500px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: left;
	white-space: normal;
	margin: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.titre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #333333;
	font-weight: bold;
}
.soustitre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #333333;
	font-weight: bold;
	text-align: center;
}
.principal_contact_g {
	float: left;
	width: 150px;
	margin-top: 10px;
	font-size: 0.9em;
	text-align: center;
	padding-right: 8px;
}
.principal_contact_dt {
	float: left;
	width: 320px;
	margin-top: 10px;
	font-size: 0.9em;
	padding: 5px;
	text-align: left;
}
.mnj {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
.gaul #principal-noel {
	width: 510px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	position: relative;
	text-align: center;
	white-space: normal;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}
.principal_480 {
	float: left;
	width: 495px;
	font-size: 0.9em;
	text-align: center;
	background-color: #E4D6C7;
	padding: 3px;
}
.principal_480bis {
	float: right;
	width: 480px;
	font-size: 0.9em;
	text-align: left;
	background-color: #FF9999;
	padding: 3px;
	margin-right: 20px;
}