body { background:url(images/FondTraceVerte.jpg) center top fixed no-repeat; margin:0; padding:0; font-size:14px; font-family:Calibri, Arial, Helvetica, sans-serif}
#bandeau {width:100%; height:140px; display:block; position:absolute; background:url(images/bandeau.png) repeat-x; top:0px}
#banniere { width:990px; height:110px; position:absolute; left:50%; margin-left:-395px; top:8px}

#onglets { width:990px; height:32px; position:absolute; left:50%; margin-left:-495px; top:160px; display:block}
	#onglets ul {padding:0; margin:0}
	#onglets ul li { margin:0; padding:2px 0px 0 0px; height:32px; width:125px; line-height:32px; list-style:none; float:left; }
	#onglets ul li a {color:#FFFFFF; font-size:15px; text-decoration:none; text-align:center; font-weight:bold; display:block ;height:32px; width:125px;background:url(images/ongletvert.gif) no-repeat; }
	#onglets ul li a.rouge, #onglets ul li a:hover {background:url(images/ongletrouge.gif) no-repeat; }

	
#conteneur { width:990px; position:absolute; left:50%; margin-left:-495px; background:#FFFFFF; top:192px}
	.ssmenu { width:990px; min-height:3px;  background:url(images/navigationssmenu.gif) top no-repeat;  display:block; float:left}
	.ssmenu ul {padding:0; margin:0}
	.ssmenu ul li { margin:0; padding:4px 12px 2px 12px; height:22px; line-height:22px; list-style:none; float:left; }
	.ssmenu ul li a { text-decoration:none; color:#FFFFFF; font-weight:bold; padding:2px 5px;}
	.ssmenu ul li a:hover, .ssmenu ul li a.selected { background:#4D4D4D; border-radius: 5px; }

	#colonegauche { margin:0; padding:0; width:160px; height:542px; background:url(images/colone-gauche.jpg) no-repeat; display:block; float:left}

	#page { margin:0; padding:0; width:590px; float:left; display:block}
		#page p, #page table, #page object  {margin:0;padding:0px 20px 0px 30px}
		.typo img {margin:0;padding:10px 20px 5px 30px}
		#page h1 {margin:0; padding:17px 15px 10px 15px; font-size:18px; text-align:center; height:40px; line-height:40px; color:#FFFFFF; text-transform:uppercase; background:url(images/menucentralvert.gif) center no-repeat; }
		#page h1.top {background:none; position:absolute; top:-600px}
		#page h2 {margin:0 100px 10px 30px; padding:3px 0px 0px 0px; font-size:18px; color:#5F8115; border-top:solid 2px #6F9619; }
		#page h3 {margin:0 100px 5px 30px; padding:3px 0px 0px 0px; font-size:15px; color:#5F8115; }
		#page strong {}
		#page a { text-decoration:none; color:#CC0000; font-weight:bold;}
		#page a:hover {text-decoration:underline}
		
		
	#colonedroite {width:240px; display:block; float:right; padding-top:15px}
		#colonedroite h3 {margin:0; padding:5px 10px 0px 10px; font-size:15px; text-align:center;height:29px; line-height:29px; color:#FFFFFF; text-transform:uppercase}
		#colonedroite h3.vert {background:url(images/menudroitevert.gif) center no-repeat;  }
		#colonedroite h3.rouge {background:url(images/menudroiterouge.gif) center no-repeat}
		#colonedroite #calendar, #colonedroite .formulaire_recherche { margin:0;padding:3px 5px 0px 15px}
		#colonedroite p, #colonedroite ul { margin:0;padding:3px 15px 15px 15px; font-size:14px}
		#colonedroite ul li { margin:0; padding:0 0 12px 0 ; list-style:none; text-align:center}
		#colonedroite p a { text-decoration:none; color:#CC0000; font-weight:bold;}
		#colonedroite p a:hover {text-decoration:underline}	
		#colonedroite ul li a { font-size:14px; color:#000000; text-decoration:none; font-weight:bold}
		#colonedroite ul li a:hover {color:#CC0000; text-decoration:underline}
		#colonedroite ul li a span { font-size:14px; color:#CC0000; text-decoration:none}
		#colonedroite ul li a span:hover {text-decoration:underline}
		#colonedroite #calendar { font-size:16px; display:block; width:100%; margin:0 auto; text-align:center; padding-left:40px; background:url(images/FondCalendrier.gif) 30px 0px no-repeat}
		#colonedroite #calendar a { font-size:16px; color:#CC0000; font-weight:bold; text-decoration:none}
		#colonedroite #calendar a:hover { text-decoration:underline}

	#pied { width:790px; height:197px; background:url(images/pied.jpg) no-repeat; display:block; float:right}
		#pied p {padding:5px 15px 5px 15px; font-size:13px; margin-top:153px}
		#pied a { text-decoration:none; color:#000000; font-weight:bold }
		#pied a:hover { text-decoration:underline;}
		#pied span a {text-decoration:none; color:#333333; font-weight:normal}

hr.spip {clear:both; border:none}
.spip_documents_center { display: block; clear: both; width: 100%; margin: 1em auto; text-align:center }
.spip_documents_left { float: left; }
.spip_documents_right { float: right;}
img.spip_logos {display:block}

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:400px; height:466px; background:url(../images/PhotoEquipe.jpg) no-repeat; position:relative; margin-left:10px}
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {display:block; width:400px; height:0; padding-top:266px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(../images/PhotoEquipe.jpg) no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; height:0;}
/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}
/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #photo1 {left:16px; top:60px; z-index:20;}
#imap #photo2 {left:110px; top:40px; z-index:20;}
#imap #photo3 {left:160px; top:57px; z-index:20;}
#imap #photo4 {left:204px; top:30px; z-index:20;}
#imap #photo5 {left:272px; top:55px; z-index:20;}
#imap #photo6 {left:330px; top:18px; z-index:20;}
#imap #photo7 {left:208px; top:147px; z-index:20;}
#imap #photo8 {left:304px; top:133px; z-index:20;}
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#gregory, #imap a#david, #imap a#mariepierre, #imap a#sebastien, #imap a#jessie, #imap a#benjamin, #imap a#jeanbaptiste, #imap a#nicolas {display:block; width:45px; height:55px; background:transparent url(images/hove.gif) center no-repeat; text-decoration:none; border:thin dotted #CCCCCC; z-index:20;}
/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}
/* move the link background image to position 0 0 when hovered */
#imap a#gregory:hover, #imap a#david:hover, #imap a#mariepierre:hover, #imap a#sebastien:hover, #imap a#jessie:hover, #imap a#benjamin:hover, #imap a#jeanbaptiste:hover, #imap a#nicolas:hover {background-position:0 0;}
/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}
/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}
/* move the span text to a common position at the bottom of the image map 266 */
#imap a#gregory:hover span {left:-16px; top:206px;}
#imap a#david:hover span {left:-110px; top:226px;}
#imap a#mariepierre:hover span {left:-160px; top:209px;}
#imap a#sebastien:hover span {left:-204px; top:236px;}
#imap a#jessie:hover span {left:-272px; top:211px;}
#imap a#benjamin:hover span {left:-330px; top:248px;}
#imap a#jeanbaptiste:hover span {left:-208px; top:119px;}
#imap a#nicolas:hover span {left:-304px; top:133px;}
/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}

#imap dd img {padding:0; margin:0; border:none}