html, body {
 height: 100%;
}

body {
 margin: 0;
 padding: 0;
 color: black;
 font-size: 80%;
 font-family: Verdana, Arial, sans-serif;
 }


#content {
    position: relative;
    min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
}

html>body #content {
    height: auto;
}


.droite {
  float: right;
  border: 0 none;
  margin: 0px 20px 20px 20px;
}

.separation {
  clear: right;
  visibility: hidden;
}

.italique {
 font-style: italic;
 }
em {
 font-style: normal;
 background-color: #f8c348;
 }
#header {
 height: 95px;
 background:  #0078e1 url(images/banniere.png) top left no-repeat;
 }
#header img {
 float: left;
 margin: 2px 0 0 5px;
 }
#header h1 {
 text-indent: -5000px;
 margin: 0;
 }
#header p {
 margin: 40px 50px 0 300px;
 font-weight: bold;
 color: white;
 font-size: 1.1em;
 }
#menuhaut {
 margin: 0;
 padding: 0.1em 1em 0.1em 0;
 list-style-type: none;
 background-color: black;
 color: white;
 font-weight: bold;
 text-align: right;
 }
#menuhaut li {
 display: inline;
 }
#menuhaut a {
 color: white;
 text-decoration: none;
 }
#menuhaut a:hover {
 color: red;
 }
#menu {
 float: left;
 width: 13em;
 padding: 0 0 11.5em 0;
 margin: 0px;
 background: url(images/fond_menu.png) bottom left no-repeat;
 }
#menu ul {
 list-style-type: none;
 padding: 0;
 margin: 0 1em 0 1em;
 }
#menu li a {
 display: block;
 text-decoration: none;
 height: 1.8em;
 line-height: 1.8em; /* centre verticalement le texte dans le bouton de lien */
 background: #f8c348;
 color: black;
 font-weight: bold;
 font-size: 105%;
 text-align: center;
 border-width: 1px 2px 2px 1px;
 border-color: #cecece #4a4a4a #4a4a4a #cecece;
 border-style: solid;
 }
#menu li a:hover {
 background: #e19200;
 color: red;
 border-width: 2px 1px 1px 2px;
 border-color: #4a4a4a #cecece #cecece #4a4a4a;
 }
#menu img {
 margin: 2em 1em 0 1em;
 }
#global {
 margin-left: 14em;
 padding-bottom: 150px;
}
#global h1 {
 font-weight: bold;
 font-size: 150%;
 padding-bottom: 0.2em;
 border-bottom: 3px solid #000000;
 text-indent: 5px;
 color: black;
 }
#global h2 {
 margin-top: 0.75em;
 margin-bottom: 0.5em;
 padding: 0 0 0 1em;
 font-size: 130%;
 font-weight: bold;
 color: black;
 }
#global h3 {
 margin: 1em 1em 1em 0;
 padding: 0 0 0 2em;
 font-size: 120%;
 font-weight: bold;
 color: black;
 }
#global p {
color: black;
text-indent: 1em;
}
#global a {
 text-decoration: none;
 color: black;
 }
#global a:hover {
 color: red;
 }
/* Encart */
#encart {
 float: right;
 width: 180px;
 margin: 0 5px 0 5px;
 padding-top: 20px;
 background: url(images/posthaut.png) left top no-repeat;
 }
#encart h3 {
 font-size: 120%;
 font-weight: bold;
 margin: 0 0 0 20px;
 }
#bloccadre {
 background: url(images/postbas.png) left bottom no-repeat;
 padding: 15px 0 25px 20px;
 }
#bloccadre ul {
 margin: 1em 0 0 0;
 padding:0;
 }
#bloccadre li {
 margin: 0;
 list-style-type: none;
 }
#bloccadre li a {
 color: black;
 text-decoration: none;
 }
#bloccadre li a:hover {
 color: red;
 }
#telecharge ul {
 padding: 0;
 margin: 2em 0 0 4em;
 }
#telecharge li {
 margin: 0;
 padding:0 0 2em 0;
 list-style-image: url(images/pdf.gif);
 }
#telecharge li a {
 color: black;
 text-decoration: none;
 }
#telecharge li a hover {
 color: red;
 }
#telecharge ul {
 padding: 0;
 margin: 1em 0 0 4em;
 }
#liens li {
 margin: 0;
 padding:0 0 2em 0;
 list-style-image: url(images/puce.gif);
 }
#liens li a {
 color: black;
 text-decoration: none;
 }
#liens li a hover {
 color: red;
 }

/* formulaire de contact */

p#notes {
	border-bottom: 1px dotted black;
	padding-bottom: 1em;
}
p#footer {
	border-top: 1px dotted black;
	padding-top: 1em;
}
/*** Mise en forme du formulaire ***/

#contact {
	margin: 1em;
	padding: 0;
	text-align: left;
	color: black;
	border: none;
	width: auto; /*** Largeur du formulaire ***/
	}

#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	background: #828282;
	margin: 0;
	padding: .5em;
}
#piedForm {
	text-align: left; /*** Les boutons sont alignés à gauche ***/
}
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}
#corpForm {	/*** Mise en forme du corps du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid black;
	font-color: black;
	margin: 0;
	padding: 1em;
}


#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;
	color: black;
}
#corpForm  label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 30%;	/*** 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. ***/
	color: black;
}
#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}
#corpForm label.oblig {
	font-weight: bold;
	color: black;	/*** Mise en évidence des champs obligatoires ***/
}
#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
}
#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: yellow;
	color: black;
}
#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
}

/*** Mise en forme des messages d'erreur ***/

#corpForm .fielderror { 
 	color: red; 
 	font-weight: bold;
}
#corpForm .fieldreq {
 	color: black;
} 

#corpForm .alerte {	/*** Mis en évidence des champs mal renseignés ***/
	border: 1px solid red;
}
#corpForm .messageAlerte {	/*** Mise en forme des message d'alerte ***/
	display: block;
	margin: 0 0 .3em .3em;
	padding-left: 2em;
	color: red;
	font-weight: bold;
	background: url('images/icon_alert.gif') no-repeat left center;
}

#pied {
 clear: both;
 position: absolute;
 bottom: 0;
 width: 100%;
 margin: 0;
 background-color: #0078e1;
 padding: 0;
 text-align: center;
 }
#pied p {
 color: white;
 font-size: 1.1em;
}
#pied a {
 text-decoration: none;
 font-weight: bold;
 color: white;
 }
#pied a:hover {
 color: red;
 }
#pied img {
 margin: 0 5px 0 25px;
 }