body, html {
	text-align:center;
	padding:0;
	margin:0;
}

#wrapper {
	width:800px;
	margin:0 auto;
	text-align:left;
}
	#header {  position: relative;
		background:url(../images/new/bg_header.gif) left top no-repeat;
		width:790px;
		height:118px;
		float:left;
		}
	/*	#headermap1 { position:relative; width:80px; height:70px; left:20px; top:0px;  z-index:200; } */ /* border: 1px dotted; #aaa; background:#aaa;  */
	/*	#headermap2 { position:relative; width:280px; height:50px; left:520px; top:-80px; z-index:200; } */ /*  background:#aaa;  */   
	/*  see below the modif. based on   http://www.position-relative.com/tutorials/tute1_css_bg_image.php -  this has been saved in C:\DOCS-1ERE\MAQUETTES\image-map-css\position-relative-com-debbie-campbell  */ 
	#headermap1 { position:absolute; width:80px; height:70px; left:20px; top:0px; } /* border: 1px solid yellow; */ /* border: 1px dotted; #aaa; background:#aaa;  */
	#headermap2 { position:absolute; width:280px; height:60px; left:520px; top:0px;} /*border: 1px solid yellow; */ /*  background:#aaa;  */
		#nav {
			position:relative;
			left:115px;
			top:85px;
	}
	#spacer {
		background:url(../images/new/bg_spacer.gif) left top no-repeat;
		padding: 20px 20px 0 115px;
		width:660px;  /*  was  666px */
		height:43px;
		float:left;
	}  
	#content {
		position:relative;
		background:url(../images/new/bg_content.gif) left top repeat-y;
		width:666px;
		min-height:395px;
		padding:0 20px 0 115px;
		clear:both;
		text-align:justify;
	}
	/*   html body div#wrapper div#content div { width:560px; }  see the new template, opposition with Contact Old  &  Template New   = solved by the line below  ***************************************/
	  html body div#wrapper div#header div#navigation { width:680px  } /*  */
	  html body center div#ensemble  { width:680px  } 
/*  .boxright1 { position:relative; top:-60px; right:-100px; width:200px; height:50px; padding:10px; }   written in  gabarit.css , see gabarit.css  *-*-*-*-*************************************/
	#footer {
		background:url(../images/new/bg_footer.gif) left top no-repeat;
		width:801px;
		height:92px;
		float:left;;
	}


#nav ul {
	list-style:none;
	display:inline;
	}
	#nav ul li{
		display:inline;
		float:left;
	}

.lien1, .lien2, .lien3, .lien4, .lien5, .lien6, .lien7 {
	display:block;
	background-position:0px 7px;
	background-repeat:no-repeat;
	border:none;
	height:27px;
}

.lien1b, .lien2b, .lien3b, .lien4b, .lien5b, .lien6b, .lien7b {
	display:block;
	background-repeat:no-repeat;
	border:none;
	height:27px;
}

.lien1 {
	background-image:url(../images/quis.gif);
	width:130px;
	}
	a:hover .lien1, .lien1b {
		background-image:url(../images/quih.gif);
		background-position:0px 0px;
		width:130px;
		}

.lien2 {
	background-image:url(../images/formations.gif);
	width:90px;
	}
a:hover .lien2, .lien2b {
		background-image:url(../images/formationsh.gif);
		background-position:0px 0px;
		width:90px;
		}
		
.lien3 {
	background-image:url(../images/autourDeNous.gif);
	width:105px;
	}
	a:hover .lien3, .lien3b {
		background-image:url(../images/autourDeNoush.gif);
		background-position:0px 0px;
		width:105px;
		}

.lien4 {
	background-image:url(../images/inscrire.gif);
	width:85px;
	}
	a:hover .lien4, .lien4b{
		background-image:url(../images/inscriptionsh.gif);
		background-position:0px 0px;
		width:85px;
		}

.lien5 {
	background-image:url(../images/livres.gif);
	width:105px;
	}
	a:hover .lien5, .lien5b {
		background-image:url(../images/livresh.gif);
		background-position:0px 0px;
		width:105px;
		}

.lien6 {
	background-image:url(../images/agenda.gif);
	width:85px;
	}
	a:hover .lien6, .lien6b {
		background-image:url(../images/agendah.gif);
		background-position:0px 0px;
		width:85px;
		}
		
.lien7 {
	background-image:url(../images/contact.gif);
	width:85px;
	}
	a:hover .lien7, .lien7b {
		background-image:url(../images/contacth.gif);
		background-position:0px 0px;
		width:85px;
		}