* {
margin:0px;
padding:0px;
}

body {
	text-align: center;
	background-color:#333333;	/*#333333;*/
	padding: 1px; /* voir le problème des margin qui ne s'appliquent pas cfr MicroApp CSS page 480-481 */
    min-width: 41em; /* largeur minimale qui empêche des sauts à la 
               ligne et des erreurs d'affichage avec les navigateurs modernes */
	font-size: 100.01%;
	margin: 0px;
}

td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

h1 {
	font-size: 13px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding: 5px;
	color:#355E4C;
}

h3 {
	font-size: 11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding: 5px;
	color:#355E4C;
	}

#principal { /*  contient le site et son image de fonds*/
	position: absolute;
	width: 800px;
	height: auto;
	top: 13px;
	bottom: 13px; /* ne fonctionne pas*/
	left: 50%;
	margin-left: -400px;
	text-align: left;
	/*background-image: url(../IMG/content_reapeat.gif); /* image pour constituer le fonds mobile du contenu*/
	background-repeat: repeat-y;
	
}

#top {
	position: relative; 
	width:800px;
	height:207px !important; /*207 pour Firefox*/
	height:247px; /*247 px pour IE notamment IE7 */
	/*left: 50%;
	margin-left: -400px;*/
	background-image:url(../IMG/top247.gif); /* l'image fair 247px pour combler un espace de 40px que fait IE6 malgré que height vaut 207px */
	background-repeat:no-repeat;
	background-position:top;
	/*z-index:100;
	left: 0px;*/
	/*border: 1px dashed red;*/
}



/*\*/
* html #top {
	padding-bottom:40px;  /* Pour Internet Explorer qui place la div trop haut par rapport à ce que fait Firefox  */
}
/**/

/* for understanding browsers */
.container {
min-height:330px; 
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 330px;
}
/**/


/* 2 div pour remplacer min-height dans IE qui ne fonctionne pas */
#out-min-height {
	position: relative;
	width:800px;
	padding-top : 400px; /*comme ça, le contenu descend de 330px*/
	padding-bottom: 1px; /* s'il n'y a pas de padding-bottom, il y a un espace entre le bottom et le reste*/
	/*margin-top:40px; /* Pour Internet Explorer qui place la div trop haut par rapport à ce que fait Firefox  */
	background-image: url(../IMG/content_reapeat.gif); /* image pour constituer le fonds mobile du contenu*/
	background-repeat: repeat-y;
	/*border: 1px dashed green;	*/
}

#in-min-height { /* sera la div du contenu */
	position: relative;
	margin-top : -400px; /*comme ça, le contenu remonte de 330 px jusqu'au top de la div avec le padding de +400px*/
	/*padding-top: 30px;
	/*background-color:yellow;*/
}

/* Pour Internet Explorer qui place la div trop haut par rapport à ce que fait Firefox  */
/*\*/
* html #out-min-height-lien {
	margin-top:40px;
}
/**/

#in-min-height-lien { /* sera la div du contenu */
	position: relative;
	/*left: 0px;
	top: 330px;*/
	/*width:800px;*/
	margin-top : -400px; /*comme ça, le contenu remonte de 330 px jusqu'au top de la div avec le padding de +400px*/
}

#bottom {
	position:relative;
	/*top:200px;
	left:0px; /* pour compenser le padding: 1 px; du #conteneur ci-dessus car le bottom se décale de 1 px ???? je ne sais pourquoi ?????*/
	background-image:url(../IMG/bottom.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	height:48px;
	/*width:830px;*/
	z-index:90;
	/*border: 1px dashed blue;
	/*background-color: yellow;*/
		
}
		
#chemin_page { /* div incluse dans la div "top" */
	position:relative;
	/*margin-top:40px; /* Ce margin-top n'est pas pris en compte par IE 6 What a pity!!! ==> laisser tomber les margin et utiliser uniquement le positionnement relatif*/
	/*margin-left:30px;*/
	left:30px;
	top: 60px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	/*height: 16px;*/
	z-index: 10;
}

#chemin_page_bottom { /* div incluse dans la div "bottom" */
	clear: both;
	position:relative;
	/*margin-top:40px; /* Ce margin-top n'est pas pris en compte par IE 6 What a pity!!! ==> laisser tomber les margin et utiliser uniquement le positionnement relatif*/
	/*margin-left:30px;*/
	left:30px;
	top: -10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	/*height: 16px;*/
}

#bottomcontact{
	position:relative;
	top:0px;
	left:0px;
	background-image:url(../IMG/bottom.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	height:68px;
	width:800px;
	/*border: 1px;
	border-style:dashed;*/
	
}

#txtAccueil { /* Texte Accueil et hebergement ... */
	position: absolute;
	top: 84px;
	left: 32px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#2A3F00;
	height: 65px;
	width: 173px;
	left: 186px;
	border: 0;
}

#titre {
	position:relative;
	display:block;
	/*border : 2px solid;*/
	top: 0px;
	left: 160px;
	height: 164px;
	width: 581px;
	border: 0;
	background-image: url(../IMG/clh_titre.gif);
	background-repeat:no-repeat;
	background-position: top left;
	
}

#logo {
	position: absolute;
	top: 32px;
	left: 147px;
	height: 108px;
	width: 130px;
	left: 25px;
	border: 0;
	background-image:url(../IMG/logo.gif);
	background-repeat:no-repeat;
	
}

#menuPrincipal{
	position: absolute;
	width: 609px;
	height:29px;
	/*display:inline;*/
	/*text-align: center;*/
	margin-top:5px;
	/*margin-left:155px;*/
	left: 186px;
	top: 182px;
	/*left: 0px;
	top: 20px;*/
	/*float:right;*/
	padding-bottom: 15px; /* pour que la décoration soit visible, non cachée par les images des menus*/
	background-image:url(../IMG/decomenu.gif);
	background-position:bottom right;
	background-repeat:no-repeat;
	z-index:5;
	/*border-right: solid 1px;
	border-right-color:#006600;*/
	
}

.sous_menu{
	/*height: 60px;  /*2 images de 150px en hauteur*/
	position:absolute;
	top: -7px;
	left:16px;
	width: 121px;
	/*border-left: solid 1px;*/
	margin-top:10px;
	/*margin-left: 30px;*/
	/*margin: 1em 1em 1em 1em;*/
	/*min-height:30px;*/
}

.sous_menu_liens{
	/*height: 60px;  /*2 images de 150px en hauteur*/
	position:absolute;
	top: -7px;
	left:27px;
	/left:-110px; /* pour corriger le positionnement incompréhensible de la partr de IE6*/
	width: 121px;
	/*border-left: solid 1px;*/
	margin-top:10px;
	/*margin-left: 30px;*/
	/*margin: 1em 1em 1em 1em;*/
	/*min-height:30px;*/
}

/* Exceptions pour IE 6 et 7 : on met "# html" avec l'espace entre # et html*/

/* html #texte {
    height: 492px;  /* contre le bug des 3px avec Internet Explorer jusqu'à la version 6
    margin-bottom: 0;
  } */

.traitgauche {
	position:absolute;
	height:300px;
	top: 10px;
	left:140px;  /* pour faire coïncider l'image contenue dans la div  avec l'image répétée mise en background dans la div de class .texte*/
}

.textelien {
	/*padding-right:125px;*/
	padding-left:20px;
	padding-right:40px;
	/*padding-bottom:4em;*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:115%;
	margin-top:42px;
	margin-bottom:0px;
	margin-left:140px;
	/*border-left: inset 1px;
	border-left-color:#006600;*/
	background-image: url(../IMG/ombre.gif);  /* pour le trait qui se trouve à droite du menu gauche*/
	background-position: left;
	background-repeat:repeat-y;
	/*min-height:330px;*/
	
	
}


.texte {
	/*padding-right:125px;*/
	padding-left: 20px;
	padding-right: 40px;
	/*padding-bottom:4em;*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:150%; /* pour la distnace de l'interligne*/
	margin-top:42px;
	margin-bottom:3em;
	margin-left:140px;
	/*border-left: inset 1px;
	border-left-color:#006600;*/
	background-image: url(../IMG/ombre.gif);  /* pour le trait qui se trouve à droite du menu gauche*/
	background-position: left;
	background-repeat:repeat-y;
	/*min-height:330px;*/
	
	
}

.texte p  {
	margin: 20px 10px 10px 15px; /*Espacement des lignes dans les pargraphes des div qui ont pour classe ".texte"*/
}

.texte ul li  {
	padding-left:10px;
	margin:7px 10px;
}

.texte span { /*pour mettre les mots en évidence dans les span contenus dans les div qui ont pour classe ".texte" */
	color:#355E4C;
	font-size : 11px;
	font-style:normal;
	font-weight:bold;
	}
	
.texte td span { /*pour mettre les mots en évidence dans les span dans des cellules de tableau contenu dans les div qui ont pour classe ".texte" */
	color:#355E4C;
	font-size : 12px;
	font-style:normal;
	font-weight:bold;
	}

#galerie {
	/*position: absolute;*/
	float:right;
	width:332px;
	height:329px;
	padding-left:35px; /*7*/
	padding-bottom:5px;
	padding-right:0px;
	padding-top:5px;
	margin-top: 0px;
	/*margin-right: 1em ;
	margin-bottom: 1em ;
	margin-left: 1em ;*/
	background-image: url(../IMG/ombre.gif); /* pour le trait qui se trouve à droite de la galerie */
	background-position: left;
	background-repeat:repeat-y;

}

#galerievide{
	/*position: absolute;*/
	float:right;
	width:1px;
	height:329px;
	padding-left:32px; /*7*/
	padding-bottom:5px;
	padding-right:0px;
	padding-top:5px;
	margin-top: 0px;
	/*margin-right: 1em ;
	margin-bottom: 1em ;
	margin-left: 1em ;*/
}

#image_gal{
	left: 478px; 
	top: 1px;
	height: 230px;
	width: 300px; /*280*/
	background-image:url(../IMG/IMG_ATELIER/cadre_maxi.gif);
	background-repeat: no-repeat;
}

#image_plan{
	left: 478px; 
	top: 1px;
	height: 230px;
	width: 300px; /*280*/
	background-image:url(../IMG/IMG_ATELIER/cadre_maxi.gif);
	background-repeat: no-repeat;
}

#mini1 { /*div pour les miniatures du diaporama*/
	height: 79px;
	width: 79px;
	background-image:url(../IMG/IMG_ATELIER/cadre_mini.gif);
	background-repeat: no-repeat;
	/*position: absolute;*/
	float:left;
	margin-top:10px;
	margin-right: 10px;
	margin-left:2px;
	/*left: 5px;
	top: 250px;*/
}

#mini2 { /*div pour les miniatures du diaporama*/
	height: 79px;
	width: 79px;
	background-image: url(../IMG/IMG_ATELIER/cadre_mini.gif);
	background-repeat: no-repeat;
	/*position: absolute;*/
	float:left;
	margin-top:10px;
	margin-right: 10px;
	margin-left:2px;
	/*left: 95px;
	top: 250px;*/
}

#mini3 { /*div pour les miniatures du diaporama*/
	height: 79px;
	width: 79px;
	background-image:url(../IMG/IMG_ATELIER/cadre_mini.gif);
	background-repeat: no-repeat;
	/*position: absolute;*/
	float:left;
	margin-top:10px;
	margin-right: 10px;
	margin-left:2px;
	/*left: 185px;
	top: 250px;*/
}


#bottom p, #bottomcontact p { /* reprend les coordonnées*/
	position: relative;
	/*left: 125px;*/
	top: 45px;
	/*/top:20px;*/
	margin-left: 140px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	letter-spacing: -1px;
	text-align:left;
	color:#E6F5DE;
	/*height: 19px;
	width:583px;*/

}

 #bottom  #espace_bas{
	position: relative;
	top: 37px;
 }
 
*html #bottom p {
	position: absolute;
	top: 57px;
	text-align:left;
}
 
*html #bottom  #espace_bas{
	position: absolute;
	top: 67px;
 }
 
#titre_plan {

height: 146px;
	width: 800px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#lien_plan_big { /* dans la feuille rejoindre.html*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	/*height: 15px;
	width:123px;*/
	position: absolute;
	left: 470px;
	top: 285px;

}

#lien_mappy { /* dans la feuille rejoindre.html*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:9px;
	/*height: 15px;
	width:149px;*/
	position: absolute;
	left: 615px;
	top: 285px;
	}
	
 #bottom  a {
	color: #C8F8C2;  /*A6D399; couleur du lien de l'adresse email du Centre Lorrain qui est vert très clair pour être en contraste */
 }
 
 #chemin_page_bottom a {  /* Pour que le lien du chemin_page soit dans la même couleur que les autres liens*/
	color:#355E4C;
  }
 
 
a {
	text-decoration: none;
	color:#355E4C;	/*vert*/
	
	}
a:hover {
	text-decoration: underline;
	color:#009900;
	
	}
	
/*a img {
	border: 0;
}*/


	
#image_plan a img {
	text-decoration: none;
	color:#355E4C;	/*vert*/
	border: 0px;
	border-color: #355E4C;	/*vert*/
	}	

#image_plan a:hover img {
	text-decoration: underline;
	color:#009900;
	border-color: #009900;	
	}
	
/* class pour la couleur de fonds des champs du formulaire*/
.fondsForm {
	background-color: #DFEAD9;
	}

.textarea:focus {
	background-color:#C0DCC0;
	border-color:#000;
	}

.bouton{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color:#92D684;

}

.cellule {
	font-size: 11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
.celluletitre {
	font-size: 12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : bold;
	color:#355E4C;
	text-decoration : underline ;
	}
	
.celluletitreadobe {
	font-size: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : lighter;
	color:#355E4C;
	}
	
.cellulelien {
	font-size: 12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/*font-weight : bold;*/
	width : 210px;
	
	}
	
.cellulelienadobe {
	font-size: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : lighter;
	width : 210px;
	
	}