html { font-size: 100%; height: 100%; margin: 0; background-color:white; background-image:url('../images/fondmer.gif');}
body { position: relative; margin: auto; margin-top: 5px; margin-bottom: 20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; color:navy;} /*font: 0.8em "Trebuchet MS", helvetica, sans-serif ;*/
* { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; color:navy;}
#page { min-height: 1300px; position:relative; margin: 0 auto; padding:0; background:none; background-image:url(../images/fond2.gif);
border: 2px solid silver; padding-bottom:20px; width:1000px; }
/*#page {position:absolute;left : 0;width : 100%;background-image : url(../images/fond2.gif);background : url(../images/engage02.gif) no-repeat fixed 100% 75%;} */
#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'); }
#connectes { position:absolute; width:133px; top:700px; left:0;}
#centre { width:860px; margin-left:138px; margin-bottom:20px; 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 } /*clear:left;*/
#pagelistemousses {position:relative; margin-left:auto; margin-right:auto; width:900px; border: 2px solid silver ; background-image:url('../images/fond2.gif');}
/* ----------------------------- */
/* bloc Page */
/* ----------------------------- */
#colgauche { float: left; width: 540px; padding-left: 15px; 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;}
.load{ background:url('images/votreicone.gif') no-repeat center;}
.wrapper {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 857px;
text-align: left;
}
.outer {width: 857px;}
.pages { text-align:center;}
/* ----------------------------- */
/* M E N U S */
/* ----------------------------- */
/* pour le menu en haut*/
.menuhaut { height:33px; width:100%; float:left; margin-left:130px; margin-top:0; padding:0;}
.menuhaut a { text-decoration:none; margin-left:10px;}
.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*/
.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*/}
/* =========pour les mini cartes de localisation des escales =============== */
.LocalisationMap { position:relative; width:250px; height:155px; }
.localisation { position:absolute; width:1px; height:1px; border:0; }
/* =========pour les menus à gauche =============== */
div#links { position:absolute; top:5px;left:0; width:130px; 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:black;
background:#2175bc; background-image:url('../images/fondciel2.gif'); border-right : 5px solid #505050;}
div#links a:hover { color:white; background:grey; background-image:url(../images/fondmer.gif); 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:500px; left:0; width:120px; padding:3px; margin:0; z-index:100; color:red;
background-image:url(../images/fond2.gif); font:10px Verdana, sans-serif; text-align:center;}
/* ================= pour les menus à droite ============ */
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;}
div#content { position : absolute;top : 26px;left : 161px;right : 25px;color : #baa;background : #22232f; font:13px Verdana, sans-serif;padding : 10px;border : 5px solid #444;}
div#content p { margin : 0 1em 1em;}
div#content h3 { margin-bottom : 0.25em;}
/* pour menu horizontal*/
/* Méthode des portes coulissantes */
#nav {list-style:none; margin:10px; padding:0; overflow:hidden; text-align:center;} /* Création du contexte de formatage */
#nav li {float:left ;width:110px ;border:2px solid silver ;margin-right:1px ;color:#fff ;background:#c00 ;}
#nav li a {display:block ;background:#900 url(../images/FondCielMer.gif) left top no-repeat ;color:#fff ;font:10px Verdana, sans-serif ;
line-height:1em; padding:4px 0 ;text-align:center ;text-decoration: none ;}
#nav li a:hover, #nav li a:focus, #nav li a:active {background: #033 url(../images/FondCielMer.gif) right top no-repeat ;text-decoration:underline ;}
/**********************************/
/**********************************/
.lettrine { float : left;font-size:3em;font-weight : bold;font-family : comic, Georgia, Times New Roman, Times, serif; color:navy; border:1px solid #990000;
background-color : #ffffcc;margin : 1px;padding : 1px;line-height : 1em;}
.texterouge {color : red;}
h1 { font : bold 25px comic sans ms, verdana, sans-serif;position : relative;top : 15px;left : 10%;color : gray;bottom : 15px;text-decoration : blink;}
h1 span { font : bold 25px comic sans ms, verdana, sans-serif;position : absolute;top : -2px;left : -2px;color : red;text-decoration : blink;}
h2 { font-size : 100%;color:blue;background-color:transparent;text-align : left;border-bottom : 2px solid silver;}
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;}
h5 { font-size : 80%;color:#20b2aa;background-color:transparent;text-align : right;}
h6 {background-color:navy;color:white;font-size:0.9em;margin-bottom:0px;}
.titre { font : bold 50px comic sans ms, verdana, sans-serif;position : relative;top:15px;left : 30%;color : red;bottom : 15px;text-decoration : blink;}
.titre span { font : bold 50px comic sans ms, verdana, sans-serif;position : absolute;top : -2px;left : -2px;color : yellow;}
.livredor p {background-color:#CCCCCC;margin-top:0px;font:14px comic sans ms, Verdana, sans-serif;text-align : left;}
.livredor {width:95%;margin:auto;}
a img { border-style:none; padding:0 2px;}
a.lien_ext:after { content : "\0000a0[\2197]";}
a.bouton_a { width:200px;text-align:center;display:block;border-width:5px;font-weight:bold;text-decoration:none;background:#B9B9B9;
border-top:3px #DBDBDB solid;border-left:3px #DBDBDB solid; border-bottom:3px #868686 solid;border-right:3px #868686 solid;}
a.bouton_a:hover {background-color: #FF6600; border-top:4px #FFCC00 solid;border-left:4px #FFCC00 solid;border-bottom:2px #CC0000 solid; border-right:2px #CC0000 solid; }
a.bouton { display:block;width:150px;height:15px;background-color:#6495ED;color:black;text-align : center;font:12px Verdana, sans-serif; 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*/}
a.bouton:hover {width:150px;height:15px;color:white;text-align : center;font:12px Verdana, sans-serif;border-color: #696969 #DCDCDC #DCDCDC #696969;}
a.bouton-relief {color: white;background-color: #000080;text-decoration: none;font-weight: bold;text-align:center;padding: 5px; border: 2px outset #c0c0c0;}
a.bouton-relief:hover {background-color: #6495ED;background-image:url(ciel.gif); border: 2px inset #c0c0c0;}
a.button, a.buttonDis { display:block;background-color:transparent;background-image: url(../images/cssButtonsFiles/buttonBackground.gif);background-repeat: no-repeat;
width: 132px;height: 28px;margin: 5px auto;padding: 5px 0 0 0;text-align: center;font-size: 100%;font-weight: bold;text-decoration: none;
font-family: Helvetica, Calibri, Arial, sans-serif; }
a.button:link, a.button:visited {color: #002577;}
a.button:hover, a.button:active {background-position: 0 -36px;color: #FF7200;}
a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {background-position: 0 -72px;color: #5F5F5F;cursor: default;}
.icon {background-repeat: no-repeat;padding: 0 0 5px 18px;}
a.button:hover .icon, a.button:active .icon { background-position: 0 -28px;}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon { background-position: 0 -56px;}
/* list of button icons */
#buttonOK .icon {background-image: url(../images/cssButtonsFiles/ok.gif);}
#buttonCancel .icon {background-image: url(../images/cssButtonsFiles/cancel.gif);}
#buttonImport .icon {background-image: url(../images/cssButtonsFiles/import.gif);}
img { border:0;}
.floatleft { float:left;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}
.floatright { float:right;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left: 10px;}
.imgleft { float : left;}
.imglrignt { float : right;}
P { clear:left;}
p { background-color:transparent; margin-left:20px; margin-right:0;}
.centrer { text-align:center;}
.cadre1 { border:solid 1px; padding:10px;}
.conteneur { padding:5px; width:100%; height:auto; margin-left:auto; margin-right:auto; text-align:center; }
.col1 { width:700px; height:auto; float:left; color:navy; text-align:left;}
.col2G { width:48%; height:auto; float:left;}
.col2D { width:48%; height:auto; float:right;}
.col3G { width:32%; height:auto; float:left;}
.col3C { width:32%; height:auto; float:left;}
.col3D { width:32%; height:auto; float:right;}
div.journal { position:relative; width:95%; height:160px; font-family:Arial; font-size:12px; text-align:center;}
div.jourcol { width:160px; text-align:center; padding:5px;}
.titre1 { text-align : left;background-color : #CCCCCC ;font-size : 100%;}
li { background-color:transparent; margin-left:0; margin-right:0;}
.plan1ul { margin : 0;padding : 0;line-height : 0;}
.plan1li { background-image : url(../images/ancre1.gif);background-repeat:no-repeat;background-position: 0% 3%;line-height : 2;padding-left : 35px;margin-left : 50px;}
.plan2ul { margin : 0;padding : 0;line-height : 0;}
.plan2li { background-image : url(../images/barre1.gif);background-repeat:no-repeat;background-position: 0% 3%;line-height : 1.5;padding-left : 35px;margin-left : 120px;}
.plan3ul { margin : 0;padding : 0;line-height : 0;}
.plan3li { background-image : url(../images/blueball.gif);background-repeat:no-repeat;background-position: 0% 3%;line-height : 1;padding-left : 35px;margin-left : 170px;}
.livredorul { margin : 0;padding : 0;line-height : 0;}
.livredorli { background-image : url(../images/book1.gif);background-repeat:no-repeat;background-position: 0% 3%;line-height : 3;padding-left : 55px;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;}
.blueball ul { margin : 0;padding : 0;line-height : 5px;}
.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;}
a:link { font-size:100%; color:blue; background-color:transparent;text-decoration:underline;}
a:visited { font-size:100%; color:purple; background-color : transparent;text-decoration : none;}
a:hover { font-size:100%; color:red; background-repeat:no-repeat; text-decoration:underline;}
table { border-color:transparent; border-style:none; border-width:0;}
td { font-size:100%; color:navy; text-align:left;}
.tbrouge { width:95%; background-color:#990000; text-align:center; border-color:white; border-style:ridge; border-width:2px; margin-left:15px;}
.tdrouge { width: 33%; font-size:90%; color:yellow; text-align:center; background-color:transparent; border-color:white; border-style:ridge; border-width:2px;}
.tba { width:98%;}
.tra { 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:left; background-color:transparent;border-color:white;border-style:ridge;border-width : 2px;}
.tbbord0 { background-color : transparent;text-align : center;border-style : none;border-width : 0;}
.tdbord0 { font-size:100%;text-align : center;background-color : transparent;border-style : none;border-width : 0;}
.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;}
.boxcentre { float : left;text-align : center;width:500px;height:auto;margin : 1em 15%;background-color : white; border:2px solid red; padding:0.5em;}
.sommaire { text-align : center;margin : 1em 10%;padding : 6px 10px 8px;border : 1px solid #ccc;}
/* _____Page_____ */
div.inf_pagrethau{ margin:0px; margin-top:20px; padding-right:10px; padding-bottom:0px; text-align:right;}
div.inf_pagrethau a{ color:#114F9C; text-decoration:none;padding-right:15px; background: url(../images/inf_pagrethau.gif) top right no-repeat;}
div.inf_pagrethau a:hover{ text-decoration:underline;}