body {	background-color:white; /* couleur de fond */
		background-image:url(../images/fond2.gif);/* image de fond */
		 margin:0 auto; /* suppression de toutes les marges */
		padding:0; width:1000px;position:relative;
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; color:navy;}

* {	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	font-size:1em; color: navy;}
/* ----------------------------- */
/*            bloc Pages         */
/* ----------------------------- */
#page {	min-height: 100%; position:relative; margin: 0 auto; padding:0;  background:none; background-image:url(../images/fond2.gif); 
		border: 2px solid silver; padding-bottom:40px; width:990px; } 
#entete { height:105px; width:100%; background-image:url('../images/fondciel2.gif');} 
#logo { height:68px; width:100%;  margin-top:3px;} 
#gauche { min-height:700px; width:135px; position:absolute; left:0; background-image:url('../images/fond2.gif'); } 
#centre { min-height: 100%;width:860px; margin-left:135px; bottom:30px; background-image:url(../images/fond2.gif)} 
#droite { position:absolute; right:0; width:130px } 
#pied { 	position:absolute; width:100%; bottom:0; background-image:url('../images/fondmer.gif'); text-align:center }

#colgauche { float: left;  margin-left: 15px; width: 540px; padding-top:20px; background-image:url('../images/fond2.gif');}
#coldroite {	float: right; margin-right: 2px; width: 290px; padding-top:20px; background: #EFECE2 url(images/center-bg.png) center top repeat-y; color: #444;}
#connectes { position:absolute; top:550px; left:0;} 
#compt { position: absolute; top:550px; left: 0; font-size: 80%;}

a img {	border-style: none; padding: 0 2px}
a:link {		font-size:100%; color:blue; background-color:transparent; text-decoration: underline;}
a:visited {	font-size:100%; color:black; background-color:transparent; text-decoration: none;}
a:hover {	font-size:100%; color:red; background-image:url(../images/fondmer.gif);	background-repeat:no-repeat; text-decoration: underline;}
img {	border: 0; }
p { 	clear: left; }
p {	font-size: 100%; color:navy; background-color:transparent; margin-left:20px; margin-right:0px;}
h1 {	font: bold 25px comic sans ms, verdana, sans-serif;
	position: relative; /* on positionne le conteneur H1 pour placer ensuite le SPAN */
	top: 15px; /* on décale le SPAN */
	left: 10%; color: gray; bottom: 15px; text-decoration: blink;}
h1 span {font: bold 25px comic sans ms, verdana, sans-serif;
		position: absolute; /* on superpose le SPAN sur le titre */
		top: -2px; /* on décale le SPAN */ left: -2px; color: red;}
h2 {	font-size:100%;	color:blue; background-color:transparent; text-align:left; border-bottom: 2px silver solid;}
h3 {	font-size:80%; color:#20b2aa; background-color:transparent; text-align:left;}
h4 {	font-size:120%; color: aqua; background-color:transparent; text-align:center;text-decoration: blink;}


.floatleft { 	float: left;  font-size: 100%; color:navy; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;}
.floatright {	float: right; font-size: 100%; color:navy; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;}
.imgleft{float: left;}
.imglrignt{float: right;}
.lettrine {	float: left; /* positionnement de la lettrine dans le conteneur*/
		font-size: 3em; /* 3 hauteurs de lignes pour la lettrine*/
		font-weight: bold; font-family: comic, Georgia, Times New Roman, Times, serif; color: navy;
		border: 1px solid #990000; /* définition d'une bordure autour de la lettrine*/
		background-color: #FFFFCC; margin: 1px; padding: 1px; line-height: 1em;}
/* ----------------------------- */
/*            M E N U S          */
/* ----------------------------- */

/* pour le menu en haut*/
/* ========= pour les rollover des boutons du menu haut ====================== */
.menuhaut {	float: left; /* on aligne le menu vertical au centre de son conteneur, head2 */
			margin-left: 150px; margin-top: 0; padding: 0;}
.menuhaut a {	text-decoration: none; /* pour éviter le soulignement au survol */
				margin-left: 10px; /* espacement entre chaque sous-menu */}
.menuhaut a.b1 {			background-image: url(../images/accueil.gif);	background-repeat: no-repeat;}
.menuhaut a.b1:hover {	background-image: url(../images/accueil3.gif);}
.menuhaut a.b2 {			background-image: url(../images/affectations.gif); background-repeat: no-repeat;}
.menuhaut a.b2:hover {	background-image: url(../images/affectations2.gif);}
.menuhaut a.b3 {			background-image: url(../images/liens.gif); background-repeat: no-repeat;}
.menuhaut a.b3:hover {	background-image: url(../images/liens2.gif);}
.menuhaut a.b4 {			background-image: url(../images/pageprecedente.gif); background-repeat: no-repeat;}
.menuhaut a.b4:hover {	background-image: url(../images/pageprecedente2.gif);}
.menuhaut a.b5 {			background-image: url(../images/famille.gif); background-repeat: no-repeat;}
.menuhaut a.b5:hover {	background-image: url(../images/famille2.gif);}
.menuhaut a.b6 {			background-image: url(../images/bateau_051.gif); background-repeat: no-repeat;}
.menuhaut a.b6:hover {	background-image: url(../images/enve1.gif);}
/* pour le menu en bas*/
/* ========= pour les rollover des boutons du menu de pied de page ====================== */
.menupied { margin-left:200px; margin-top:0 ;padding:5px; text-align:center; font:10px Verdana, sans-serif;}
.menupied ul { padding:0; margin:0; list-style-type:none }
.menupied li { margin-left:3px; float:left; /*pour IE*/}
.menupied ul li a{ display:block; float:left; width:120px; height:13px; background-color:#6495ED; color:black;  text-decoration:none; text-align:center; padding:5px; border-width:2px; border-style:solid; border-color:#DCDCDC #696969 #696969 #DCDCDC;  /*pour avoir un effet "outset" avec IE*/}
.menupied ul li a:hover{width:120px; height:13px; color:white; text-align:center; border-color: #696969 #DCDCDC #DCDCDC #696969;}
.menupied a:visited { display:block; float:left; width:120px; height:13px; background-color:#6495ED; color:black; text-align:center; text-decoration:none; padding:5px; border-width:2px; border-style:solid;border-color:#DCDCDC #696969 #696969 #DCDCDC;  /*pour avoir un effet "outset" avec IE*/} 

/* ========= les links pour les menus gauches ====================== */
div#links {	position: absolute; top: 30px; left: 0;	width: 135px; height: 700px; font: 12px Verdana, sans-serif; z-index: 100;}
div#links a {	display: block; text-align: center; font: bold 1em sans-serif; 	padding: 5px 10px; margin: 0 0 1px; border-width: 0; text-decoration: none;
			color: #FFC; background: #2175BC; border-right: 5px solid #505050;}
div#links a:hover {	color: #411; background: #AAA; border-right: 5px double white;}
div#links img {		width: 110px;}
div#links a span {		display: none;}
div#links a:hover span {display: block;	position: absolute; top: 350px; left: 0; width: 130px;	padding: 5px; margin: 0px; z-index: 100;
					color: red; background-image:url(../images/fond2.gif); font: 10px Verdana, sans-serif; text-align: center;}
/* ====================== les links pour les menus droits =================================== */
div#linksd {		position: absolute; top: 30px; left: 0;	width: 125px; height: 700px; font: 12px comic, sans-serif;z-index: 100;}
div#linksd a {	display: block; text-align: center; font: bold 1em sans-serif; padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
				text-decoration: none; color: #FFC; background: #2175BC; border-left: 5px solid #505050;}
div#linksd a:hover {	color: navy; background-image:url(../images/fondmer1.gif); border-right: 5px double white;}
/* ==================== les links pour les menus gauches ou droits ou pied ====================== */
div#content {	position: absolute; top: 26px; left: 161px; right: 25px; color: #BAA;
				background: #22232F; font: 13px Verdana, sans-serif; padding: 10px; border: solid 5px #444;}
div#content p {	margin: 0 1em 1em;}
div#content h3 {	margin-bottom: 0.25em;}
/*==========  fin   links    ======================================================================== */



/* ================================pour liens externes ============================== */
a.lien_ext:after {content: "\0000a0[\2197]";}
/* ================================pour liens externes =============   fin    =============== */


.centrer {text-align: center;}
.conteneur {width:700px;height:250px;margin-left:auto;margin-right:auto;text-align:center;font-size:100%}
.col1  {width:700px;height:auto;float:left;color:navy;text-align:left}
.col2G {width:350px;height:250px;float:left}
.col2D {width:350px;height:250px;float:right}
.col3G {width:235px;height:250px;float:left}
.col3C {width:235px;height:250px;float:left}
.col3D {width:230px;height:250px;float:right}

/* ================================pour le plan du site ============================== */
li {			font-size: 100%; color:navy; background-color: transparent; text-align: left; margin-left: 0px;	margin-right: 0px;}
.plan1ul {	margin: 0; padding: 0;line-height: 0px; /* interligne */}
.plan1li {	font-size: 100%; color: navy; background-image:url(../images/ancre1.gif);
			background-repeat:no-repeat; background-position:0% 65%; line-height: 2;
			padding-left:35px; margin-left: 50px;}
.plan2ul {	margin: 0; padding: 0;line-height: 0px; /* interligne */}
.plan2li {	font-size: 100%; color: navy; background-image:url(../images/barre1.gif);
			background-repeat:no-repeat; background-position:0% 55%; line-height: 1.5;
			padding-left:35px; margin-left: 120px;} 
.plan3ul {	margin: 0; padding: 0;line-height: 0px; /* interligne */}
.plan3li {	font-size: 100%; color: navy; background-image:url(../images/blueball.gif);
			background-repeat:no-repeat; background-position:0% 55%; line-height: 1;
			padding-left:35px; margin-left: 170px;} 
.boiteplan	{position:absolute; z-index:300; left:180px; top:30px; width:200px; padding:5px; margin:10px;}
div#plan4 a span {	display: none;}
div#plan4 a:hover span {display: block;	text-align: center;}
ul,li {	list-style-type: none;  /*pour ne pas avoir de puces */	 /* interligne */}
.blueball ul {	margin: 0; padding: 0;line-height: 5px; /* interligne */}
.blueball li {	font-size: 100%; color: navy; background-image:url(../images/blueball.gif);	background-repeat:no-repeat; 
				background-position:0% 65%; line-height: 0;padding-left:35px; margin-left: 150px;} 

/* ================================ S T Y L E   P O U R    T A B L E A U X   ============================== */

table { 	border-color:transparent; border-style: none; border-width: 0px;}
td {		font-size: 100%; color: navy; text-align: left; }

.tbrouge {	width: 90%; background-color: #990000; text-align: center;	border-color: white; border-style: ridge; border-width: 2px;}
.tdrouge {	width: 33%; font-size: 120%; color: yellow; text-align: center; background-color: transparent; border-color: white; border-style: ridge; border-width: 2px;}

.tba { 		width: 98%;}
.tra {		background: lightgrey; height: 45px;}
.trb {		background-color: transparent; height: 45px;}
.tda {		width:  5%; text-align: center; background-color: transparent;}
.tdb {		width: 28%; padding-left: 5px; background-color: transparent;margin: 10px;}
.tdc {		width: 52%; padding-left: 5px; background-color: transparent;margin: 10px;}
.tdd {		width: 15%; text-align: center; background-color: transparent;}

.tbborder { 	width: 95%; background-color: transparent; text-align: center; border-color: white;	border-style: ridge; border-width: 2px;}
.tdborder {	font-size: 100%; text-align: center; background-color: transparent; border-color: white;border-style: ridge; border-width: 2px;}
.tbbord0 {	background-color: transparent; text-align: center; border-style: none; border-width: 0px;}
.tdbord0 {	font-size: 100%; text-align: center; background-color: transparent; border-style: none; border-width: 0px;}
.tbbord1 { 	width: 100%; margin: 0; text-align: center; border-color: white; border-style: ridge; border-width: 2px;}
.tdbord1 { 	font-size: 100%; text-align: center; border-color: white; border-style: ridge; border-width: 1px;}
.tbbord2 { 	width: 100%; margin: 0; background-color: transparent; text-align: center;	border-color: white; border-style: ridge; border-width: 1px;}
.tdbord2 { 	font-size: 100%; text-align: center; background-color: transparent; border-color: white; border-style: ridge; border-width: 2px;}

.tdcaract {		font-size: 80%; color: black; text-align: left; background-color: #CCCCCC;}
.tdcaracta {		font-size: 80%; color: black; text-align: left;}
.boitecentre {	float: left; text-align: center; margin: 1em 15%; background-color: yellow;	border: 2px solid red; padding: 0.5em;}
.sommaire {	text-align: center; margin: 1em 10%; padding:6px 10px 8px; border:1px solid #ccc;	-moz-border-radius:7px;}
/* ================================  F I N   s t y l e    t a b l e a u x    ============================== */