html, body {
 height: 100%;
}

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

#content {
    position: absolute; /*** position relative ne fonctionne pas dans IE ***/
    min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
}

html>body #content {
    height: auto;
}



/*
#global {
 color: black;
 padding-bottom: 75px;
 }
*/
 
#head1 {
	background: url(../design/joint.jpg);
	background-repeat: repeat-x;
	height: 90px;
	width: 100%;
 	 margin: 0;
	padding: 0;
	}

#head1 img {
	float: top left;
	height: 90px;
	width: 770px;
	border: 0 none;
	margin: 0;
	padding: 0;
}

#menuhaut  {
	 position: absolute;
	 top: 60px;
   left: 225px;
   margin: 0;
   padding: 0.1em 0.5em 0.1em 0;
   list-style-type: none;
   font-weight: bold;
   text-align: right;

}

#menuhaut ul {	
	list-style-type: none;
	color : Black;
	font-weight: bold;
	font-size : 1em;
	text-align: right;
}

#menuhaut li {
	display :  inline;
	}

#menuhaut a {
	color : Black;
	text-decoration : none;
}

#menuhaut a:hover {
	color : Red;
}

/***



#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;
 }
***/

#head2 {
	background-image: url(../design/joint2.jpg);
	background-repeat: repeat-x;
	height: 30px;
	width: 100%;
	margin: 0;
	padding: 0;
}

#head2  img {
	float : left;
	margin: 0;
	padding: 0;
  border: 0;
}


 
#menugauche {
 float: left;
 width: 170px;
 padding: 1.5em 0 15em 0;
 margin: 0;
 background: url(../design/fond_menu.gif) bottom left no-repeat;
}

#menugauche ul {
 list-style: none;
 padding: 0;
 margin: 0 20px;

}
 
#menugauche li a {
 display: block;
 text-decoration: none;
 height: 1.5em;
 line-height: 1.5em; /*centre verticalement le texte dans le bouton */
 background-color: #F8CD8D;
 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;
 }
 
#menugauche li a:hover {
 background-color: #dcb;
 color: red;
 border-width: 2px 1px 1px 2px;
 border-color: #4a4a4a #cecece #cecece #4a4a4a;
 }
 
#menugauche a {
 padding-left: 1em;
 text-decoration: none;
 color: #F8CD8D;
 }
 
#menugauche a:hover {
 color: red;
 }
 
#contenu {
 margin-left:  170px;
 background-color: #eed;
 border: 1px solid #dcb ;
 color: black;
 padding-bottom: 145px;
 }
 
#contenu h1 {
 margin: 0;
 font-weight: bold;
 font-size: 150%;
 padding: 1em 1em 0 1em;
 border-bottom: 3px solid #dcb;
 text-indent: 10px;
 }

#contenu h2 {
  margin: 1.5em 0 1.5em 1em;
 font-size: 110%;
 font-weight: bold;
 }
 
#contenu p {
 margin-left: 10px;
 margin-right: 5px;
 text-align: justify;
 font-size: 120%;
}

#contenu ul {
 list-style: square;
 font-size: 120%;
 }

#contenu li {
 padding: 0.5em 0;
}
 
#contenu a {
 text-decoration: none;
 color: black;
 }
 
#contenu a:hover {
 color: red;
 }
 

  
.lettrine {
float: left;
font: bold 2em/1em Georgia, Times, serif;
border: 1px groove #000000;
background-color: #F8CD8D;
margin-left: 10px;
margin-right: 2px;
padding: 2px;
text-align: center;
}

#plan {
 margin-left: 170px;
 width: auto;
 height: auto;
 background-color: #eed;
 border: 1px solid #dcb ;
 padding-bottom: 75px;
 }
 
#plan h1 {
 margin: 0;
 font-weight: bold;
 font-size: 150%;
 padding: 1em 1em 0 1em;
 border-bottom: 3px solid #dcb;
 text-indent: 10px;
 }

#plan h2 {
 margin: 1.5em 1.5em 0 5em;
 font-size: 120%;
 font-weight: bold;
 }
 
#plan p {
  margin: 1.5em 1.5em 0 5em;
}
.photo_left  {
 float: left;
 margin: 20px;
  }

.photo_right {
  float: right;
  margin: 20px 10px 20px 10px;
}

	/* css album photo */
	
#galerie {
	margin-left: 170px;
	width: auto;
	height: auto;
  background: #eed ;
	border: 1px solid #dcb ;
	font: 0.9em Georgia, serif ;
 }
 


ul#galerie_mini
{
	margin: 0px 0px 0px 170px;
        padding: 5px 15px 95px 15px ;
	list-style-type: none ;
	height: auto;
	width: auto;
	background: #eed ;
	}

ul#galerie_mini li
{
 float: left;
}

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

ul#galerie_mini p
{
        font: italic 1.5em/1.5em Georgia, serif ;
	color: #B9863A ;
	text-align: center ;
}
dl#photo
{
	margin: 0px auto 20px auto;
 	text-align: center;
	}

dl#photo dt
{
	font: italic 1.5em/1.5em Georgia, serif ;
	color: #B9863A ;
	text-align: center ;
}

dl#photo dd
{
	margin: 0;
}

dl#photo img
{
	border: 1px solid #dcb ;
        margin: 0 auto;
	text-align: center ;
        }




#album {
	font: 1.1em/1.33 verdana, sans-serif;
	margin-left: 170px; /* on place le bloc centre par rapport à la largeur du blocgauche */
	height: auto;
	width: auto;
	background-color: #eed ;
	border: 1px solid #dcb ;
	padding: 10px 10px 125px 10px;
	}
	
#album h1 {
 margin: 0;
 font-weight: bold;
 font-size: 150%;
 padding: 1em 1em 0 1em;
 border-bottom: 3px solid #dcb;
 text-indent: 10px;
 }

#album h2 {
 margin: 1em 1em 0 4em;
 font-size: 120%;
 font-weight: bold;
 }

#album h3 {
 margin: 1em 1em 1em 4em;
 font-size: 110%;
 font-weight: bold;
 } 
#album a {
 text-decoration: none;
 color: black;
 }
 
#album a:hover {
 color: red;
 }
 
.card {
	float: left;
	width: 170px;
	margin: 0px 15px 15px 5px;
	padding: 10px 0;
	text-align: center;
	background-color: white;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	font-size: 70%;

/* added rules */
	height: 160px;
	overflow:auto;
	}
	
.card-title {
	margin: 0 0 5px 0;
	font-size: 130%;
	color: #B9863A;
	text-align: left;
	}
.card-photo {
	margin:0 auto; 
	padding:0;
	border: none;
	}
a.card-photo {
  border: none;
	}
	
.card-desc {
	margin: 5px 10px;
	padding:0;
	text-align: left;
	font-size: 110%;
	}
.card-info {
	margin: 5px 10px 0 10px; 
	padding:0;
	text-align: right;
	}

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

/* 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: #dcb;
	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;
	color: black;
	margin: 0;
	padding: 1em;
	background: #F8CD8D;
}


#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('../design/icon_alert.gif') no-repeat left center;
}


#pied {
 width: 100%;
 clear: both;
 background-color: #F8CD8D;
 text-align: center;
 }
 
#pied p {
  	padding: 1em 2em;
	background-color: #dcb;
	width: 350px;
	margin: 0 auto;
 }
 
#pied img {
 float: left;
 padding: 0.5em 0 0.5em 1em;
 }