@charset "utf-8";
body  {
    	font: 100% Geneva, Arial, Helvetica, sans-serif;
    	margin: 0; 
    	padding: 0;
    	color: #000;
		background-image: url(images/planete_esperance.jpg);
		background-repeat:no-repeat; background-position:right bottom;
    }
#container{margin: 0; padding: 0;background:transparent;}
a:link,a:visited {
color:#0000cd;
text-decoration:none;
}
a:hover,a:active {
text-decoration:underline;
color:#ab1703;
}
abbr, acronym, .help {
  border-bottom: 1px dotted #333;
  cursor: help;
  }
li {margin: 0 0 1em 0}
h1{
	font-family: "Times New Roman", Times, serif;
	font-size: 3em;
	color: #1e1860;
	text-align: center;
}
h2{
	font-family: "Garamond", Times, serif;
	font-size: 1.5em;
	color: #1e1860;
	text-align: center;
	margin: 0 1em;
	background-image: url(images/slim25.jpg);
	line-height: 25px;
	border-top: #CCCCCC 1px solid;
}
h3{
	font-size: 115%;
	color: #334d55;
	padding-top: .1em;
}
h4{
	font-size: 105%;
	font-weight: bold;
	color: #ab1703;
	padding-top: .1em;
	padding-bottom:1px;
}  
h5{
font-size: 105%;font-weight: bold;
} 
.h7{
	font-size: 95%;
	font-weight: bold;
	color: #ab1703;
	padding-top: 0.6em;
	padding-bottom:1px;
	background-color: #FFFF99;
} 
.paragrCentre{
	font-size: medium;
	color: #000066;
	font-style: italic;
	text-align: center;
}
#tetiere {
		height: 100px;
		background:#fca852 url(bigimage/tetiere.jpg);
		padding:0;
		margin:1px 2px 0 2px;
		border-bottom:inset #1e1860 ;
} 
    #tetiere img {
	margin: 0 136px 0 15px;
	float: right; border: none;		
    }
.hrtiret{width:auto;background-image:url(images/tiret.gif);background-repeat:repeat-x;height:3px;}
.hrpointille{width:auto;
	background-image:url(images/pointille.gif);background-repeat:repeat-x;height:3px;}
#titrepage {
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	color: #1e1860;
	height: auto;
	text-align: center;
	margin-top: 10px;
	font-weight: lighter;
	width: auto;
	background-image: url(images/slim50.jpg);
	border-top-color: #CCCCCC;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-color: #999999;
	border-right-style: solid;
	border-right-width: 2px;
	border-bottom-color: #006633;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-left-color: #CCCCCC;
	border-left-style: outset;
	border-left-width: 1px;
	}
/* ---------------------------  C  O  L  O  N  N  E  S  __________________________________ */
#colGauche {
	float: left;
	width: 150px;
	height:795px;/*767px*/
	padding:0;
	font-size:.9em;
	background-color:#d6d4f7;
	background-image:url(bigimage/colgauche.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
    }
#colDroite {
    	float: right; 
    	width: 18%; 
    	background: #EBEBEB; 
    	padding: .05em .2em 0 .2em; 
    }
#colDroite ul li {
	color:#333333;
	font-size:.8em;
	vertical-align: text-top;
    }
#colGauche p, #colGauche h2 {
    	margin-left: 1px; 
    	margin-right: 1px;
		padding:0;
    }
#colDroite p {
	margin-left: 10px;
	margin-right: 10px;
	color: #333;
	font-size:.8em; 
    }
#colDroite h2, #colDroite h3, #colDroite h4 {
    	margin-left: 3px; 
    	margin-right: 3px;	font-size:1em; 
    }
.colonnedroite2 { /*ces colonnes sont conçues pour venir à l'intérieur de la colonne centrale */
	width:46%;
	float:right;
	background:transparent;
	margin:.2em;
	padding:.1em .3em 10px .3em;
	border: 1px solid #83e6b4;
	z-index: -1;
}
.colonnegauche2 {
	width:46%;
	float:left;
	background:transparent;
	margin:.2em;
	padding:.1em .3em 10px .3em;	
	border: 1px solid #83e6b4; 
	z-index: -1;
} 
.ssColdroite2 { /*ces colonnes sont conçues pour venir à l'intérieur de la colonne centrale mais sans encadrement */
	width:46%;
	float:right;
	background:transparent;
	margin:.2em;
	padding:.1em .3em 10px .3em;
}
.ssColgauche2 {
	width:46%;
	float:left;
	background:transparent;
	margin:.2em;
	padding:.1em .3em 10px .3em;	
} 
.ssColDroite1Tiers{/*ces colonnes 1/3 et 2/3 sont conçues pour venir à l'intérieur de la colonne centrale mais sans encadrement */
	width:33%;
	float:right;
	background:transparent;
	margin:0 ;
	padding:.1em .3em 10px .3em;
}
.ssColGauche2Tiers{/*ces colonnes 1/3 et 2/3 sont conçues pour venir à l'intérieur de la colonne centrale mais sans encadrement */
width:64.5%;
	float:left;
	background:transparent;
	margin:0;
	padding:.1em .3em 10px .3em;	
}
.ssColDroite3,.ssColCentre3,.ssColGauche3 {
width:32%;
float:left;
background:transparent;
padding-bottom:10px;
margin: 10px 3px 5px 3px;
}
.colonnedroite2 img,.colonnegauche2 img,.ssColdroite2 img,.ssColgauche2 img{
border: 0; 
margin: 1px 2px 1px 2px;
}	
#colCentre{
	margin: 0 19% .2em 160px;
	background: transparent;
	padding: 0 .5em 1em .5em;
	font-size: 0.8em;
	color:#333333;
	text-align: justify;
	border: 1px groove ;
	border-color:#069 #069 #fff #069;
	height:auto;
} 
#colGauche img, #colDroite img { float:right; margin: 10px 2px 15px 7px; border: 0;
}
#colCentre img { float:right; margin: 10px 3px 10px 5px; border: 0;
}
.breves{
width:auto; height:auto; border: 1px solid #83e6b4;margin: 3px 0 5px 2px; padding: 5px 5px 5px 0; color:#1e1860;			border-bottom-color: #006633;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-left-color: #999999;
	border-left-style: outset;
	border-left-width: 1px;
	list-style-image:url(images/puces/puce26.gif);
}
.breves ul li{
margin-left: -22px;
}
#colCentre h2{
	font-family: "Times New Roman", Times, serif;
	font-size: medium;
	color: #1e1860;
	text-align: center;
	margin-top: 10px;
}
	/* =================== B A S   D E    L A    P A G E =============================== */
#hautpage{ /* balise renvoyant vers le haut de la page */
	clear:both;
	margin:0 auto;
	background: #6E7F71 url("images/puce_hautpage.gif") left no-repeat;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-left: 15px;	
	height:13px;
}
#hautpage a:link, #hautpage a:visited {
	color:#FFFFFF;
	font-size: 10px;
}
#hautpage a:hover, #hautpage a:active {
	color:#666666;
	background-color: #ffcc99;
}
.mise_a_jour{ float:left; height: 1.3em; width: 100%;	background:#6E7F71;
font-family: Arial, Helvetica, sans-serif; font-size: 11px;	text-align: center;	margin:0 0 0 0;	font-style: italic;	color: #CCC; border-bottom-style: solid;	border-bottom-color: #FF6600;	border-bottom-width: 1px;}
.mise_a_jour a{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #ccc;font-weight: normal; text-decoration: none }
.mise_a_jour a:link,.mise_a_jour a:visited {
color:#333333;
}
.mise_a_jour a:hover,.mise_a_jour a:active {
color:#FFF;
}
#pied {
	padding: 0;
	background:#6E7F71;
	height: 2.3em;
	border-bottom-color: #F93;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	font-family: Arial, Helvetica, sans-serif; font-size: .9em;	text-align:center;
	color: #CCC;
} 
	/* _____________________L E S   M E N U S _______________________________________________
	_______________M E N U    H A U T    C O N T E X T U E L  ________________________________________*/
.menuhaut {
	list-style-type: none;
	margin: 10px 60% 9px 5px;
	padding:0 0 0 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #39605B;
	border-width: 1px;
	border-color: #aaab9c #aaab9c #ccc #fff;
	border-style: solid;
	background: url("images/fondmenucontextuel.jpg") repeat-y    ;
}
.menuhaut img{margin:1px 3px 1px 0; border:0;}
.menuhaut a:link, .menuhaut a:visited {
	color:#003399;
	font-size: 10px;
	text-decoration:underline;
}
.menuhaut a:hover, .menuhaut a:active {
	color:#666666;
	background-color: #ffcc99;
}
/* **************************************************************** 
             M E N U   H O R I Z O N T A L    S E C O N D A I R E                */
#menuhoriz {
margin: 3px 0 3px 5px; height:32px; background-color:#f0e7d7 ;
}
.navboite ul li{
list-style-type: none;
padding:0;
margin:0 auto;
display: block;
float: left; 
background: url("images/menuNormal.jpg") repeat-x    ; 
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}

.navboite a{
color: #333;
text-decoration: none;
display: block;
width: 74px;
padding:0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
}

.navboite li#active, .navboite a:hover{ background: url("images/menuActif.jpg") repeat-x 30px; color:#800000; border-color: #aaab9c #fff #fff #ccc;}

/*     F I N    D U   C O D E   P O U R  M E N U    H O R I Z O N T A L 

*************************************************************** */
/*------------------------------------
---menu vertical Claire Campbell---------*/
#menugauche{
background: #f0e7d7;
width: 150px; 
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

ul#navlist{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 98%;
}

ul#navlist li{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#menugauche>ul#navlist li a { width: auto; }

ul#navlist li#active a{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

/*fin menu gauche vertical Claire Campbell*/
/* ------------------------------------------------------- */
/*menu vertical de Project Seven*/
#boiteDroite ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#boiteDroite li { margin: 0 0 3px 0; }

#boiteDroite a{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width:auto; /*160px*/
background-color: #999;
background-image: url(../St%20MARTIN%2008_09/images/l1_down.gif);
}

#boiteDroite a:link, #boiteDroite a:visited{
color: #EEE;
text-decoration: none;
}

#boiteDroite a:hover{
border: 1px solid #333;
background-color: #f7f2ea;
background-image: url(../St%20MARTIN%2008_09/images/l1_over.gif);
color: #333;
}

/* _______________________________________________ */

    /* Diverses classes à réutiliser */
    .fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
	
.section {
border:1px solid #630;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
text-align:justify;
color:#333;
margin:.3em 0 .3em 0;
padding:0.3em;
}
.section2 {
background:url("images/fondmenucontextuel.jpg") repeat-y;
border:1px groove ;
border-color:#F90 #F90 #993 #993;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
text-align:justify;
color:#333;
margin:.3em 0 .3em 0;
padding:0.3em;
}
.section3 {
background:#fff url("images/fondSectionRosedegrade.jpg") repeat-y;
border:1px groove ;
border-color:#F90 #F90 #993 #993;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
text-align:justify;
color:#333;
margin:.3em 0 .3em 0;
padding:0.3em;}
.titrDiapo{
	background:#fff url("img_logos/encadr.jpg") no-repeat;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:3em;
	text-align:center;
	color: #003366;
	font-weight: bold;
	line-height: 2.5em;
}
.textDiapo{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:1.8em;
	text-align:left;
	margin: 0 0 0 2em;
	color:#006600;
}
.paragEncadre{
	font-family:Verdana, Arial, Helvetica, sans-serif; 	font-size:1.2em;	text-align:center; 	border: solid #063 1px; 	background-color:#fdcd67;	border-bottom-width: 2px; border-right-width: 2px;
}