/* ------ Page ------ */
body { margin:0; font: small/normal Arial, Helvetica, sans-serif;
       background:#F4F4F8 url(/css/images/entetebleu.png) repeat-x top;
}

/* ----- Pour le Debbugage ----- */
/* * { border : 1px solid #f00;}  */

/* ------ Balise de Base HTML ------ */
table {width:100%;}
td {vertical-align:top; padding: 1px 10px 1px 0px;}
img {border:0;}
h1, h2, h3 {position:relative; text-decoration:none;  border:0; color:dimgray; padding:0; margin:0; font:10px Verdana, Arial, Helvetica, sans-serif;}
h1 {margin: 3px 2px 12px; font-size:14px; color:#333;}
h2 {margin: 2px 4px 10px; font-size:13px; color:#444;}
h3 {margin: 1px 0 10px; font-size:12px;}

/* --- Architecture --- */
#conteneur {position:absolute; width:92%; margin-left:4%; margin-right:4%;}
#entete {height:40px; padding:0 0 15 0; border-bottom:1px solid #EAEAEA;}

#bandeau {margin:0; padding:0; height:14px; font:10px Arial, Helvetica, sans-serif;}
#bandeau a {margin:0; padding:0;text-decoration:none; border:0; color:dimgray;font-size:10px;text-align:right;}
#bandeau a:visited {color:dimgray;}
#bandeau a:hover {color:blue; background-color:transparent;}
#bandeau img {width:9px;height:9px; margin-right:3px; margin-left:3px; }
#filariane {margin:3 0 0 0; height:20px; border-bottom:1px solid #EAEAEA;}
#filariane img {width:11px;height:11px; margin-top:3px; margin-right:5px; margin-left:3px; }
#filariane a {display:inline;font-size:11px}

#gauche {position:absolute; left:0%; width:19%;}
#centre {margin-left:22%; margin-right:23%;}
#droite {position:absolute; right:0%; width:20%;}
#basdepage {height:30px;}

/* ------  A  ------ */
a {text-decoration:none; padding:3px 2px 3px 2px; color:#606060; display:block; font-size:13px}
a:hover {padding:2px 1px 2px 1px; background-color:#eee; color:black; border:solid 1px; border-color:gray LightGray LightGray gray;}
a:visited {color:purple;}

a.logo {text-decoration:none; position:absolute; padding:5px; top:-10px; display:float; color:black; font-size:30px;}
a.logo:visited,a.logo:hover {color:black;}

a.texteblanc, a.texteblanc:visited {text-decoration:none; color:white; font-size:28px;}
a.texteblanc:hover {color:black;}

a.sommaire {background:white; color:#627; font-size:13px;
            padding:2px 12px 8px 12px; margin:12px 0px 18px 0px;
            border:1px solid gray; border-color: LightGray gray gray LightGray;
            border-radius: 10px 10px; -moz-border-radius: 10px;
}
a.sommaire:visited {color:#627;}
a.sommaire:hover {color:#627; background:#e4e4e4; }

a.Htitre {text-decoration:none; font-size:14px; color:#333; padding:3px 2px 3px 2px; display:block; float:left;}
a.Htitre:hover {padding:2px 1px 2px 1px; color:#8060A0; border:solid 1px; border-color:LightGray LightGray #627 LightGray; }
a.Htitre:visited {color:#8060A0;}

a.Htitre2 {text-decoration:none; font-size:13px; color:#444; padding:3px 2px 3px 2px; display:block;}
a.Htitre2:hover {padding:2px 1px 2px 1px; color:#8060A0; border:solid 1px; border-color:LightGray LightGray #627 LightGray; }
a.Htitre2:visited {color:#8060A0;}

.imgplus {width:16px;height:16px; margin-right:6px; margin-left:6px; vertical-align:top;}
.infoicon {width:16px; height:16px; margin-right:1px; margin-left:1px; vertical-align:middle;}
.miniicon {width:16px; height:16px; margin-right:6px; margin-left:6px; vertical-align:middle;}
.microicon {width:15px; height:15px; margin-right:3px; margin-left:0px; vertical-align:middle;}
.icon20 {width:24px; height:24px; margin-right:3px; margin-left:0px; vertical-align:middle;}
.icon24 {width:24px; height:24px; margin-right:3px; margin-left:0px; vertical-align:middle;}

.drapeau  {width:14px; height:9px;  margin-right:3px; margin-left:3px; vertical-align:middle;}
.banner {text-decoration:none; position:absolute; top:16px; right:0; color:#8263A3; font-size:22px; text-align:right;}
.banner2 {text-decoration:none; color:#604080; font-size:27px; text-shadow: 2px 2px 2px #BBB;}
.enteteicon {top:30; width:32px; height:32px; margin-right:12px;}

.section {background:white url(/css/images/entetelight.png) repeat-x top;
          padding:2px 12px 8px 12px;
          margin:12px 0px 18px 0px;
          border:1px solid gray; border-color: LightGray gray gray LightGray;
          border-radius: 10px 10px; -moz-border-radius: 10px;
}

.sectionN2 {background: white url(/css/images/entetelight.png) repeat-x top;
          padding:2px 12px 6px 6px;
          margin:12px 4px 4px 4px;
          border:1px solid gray; border-color: LightGray gray gray LightGray;
          border-radius: 10px 10px; -moz-border-radius: 10px;
}

.sectionsommaire {background: #FEFAFC;
          padding:8px 12px 8px 12px;
          margin:12px 25px 20px 0px;
          border:1px solid gray; border-color: LightGray gray gray LightGray;
          border-radius: 10px 10px; -moz-border-radius: 10px;
}

.sectionminilink {
          padding:2px 0px 8px 0px;
          margin:10px 0px 14px 0px;
          border-top:1px solid #EAEAEA;
}

.sstitre {color:gray;}

.fondbois { background:#FFF url(/css/images/fondbois.jpg) repeat-x top;}
.fondnoir { background:#000 url() repeat-x; }
.fondetoiles { background:#000 url(/css/images/fondetoiles.gif) }
.fondrose {background: #F8F4F4 url(/css/images/enteterose.png) repeat-x top;}
.fondbleu {background: #F4F4F8 url(/css/images/entetebleu.png) repeat-x top;}
.fondvert {background: #F4F8F4 url(/css/images/entetevert.png) repeat-x top;}
.fondjaune {background: #FBFBDD url(/css/images/entetejaune.png) repeat-x top;}
.fondblanc {background: #FFF url(/css/images/entete.gif) repeat-x top;}
.bgsommaire {background: #FEFAFC;}
.bgnavy {background: #118;}
.frouge {background-color:#F11;}

.nobord {border:0px;}
.bordrouge {border-color:indianred darkred darkred indianred;}
.image3d {border:1px solid gray; border-color: LightGray DarkGray DarkGray LightGray;}

.titre {text-decoration:none; color:dimgray; padding:5px 0 15px 0; font:16px Verdana, Arial, Helvetica, sans-serif;}

.casetitreg {float:left;}
.casetitred {float:right;}
.case {float:left;margin:8px;padding:5px;}
.spacer {clear: both;}

.w40p {width:40%;}
.w4p {width:4%;}
.w18 {width:18px;}
.w100 {width:100px;}

/* ------ Font ------ */
.justifie {text-align:justify;}
.aligndroite {text-align:right;}
.aligngauche {text-align:left;}
.aligncentre {text-align:center;}
.aligntop {vertical-align:top;}

.date {position:absolute; right:0; top:24px; color:gray; font-size:12px;}

/* ------  Cache / montre une balise div  ------ */
a.btnreduit {float:right; right:10px; padding:1px;} /* permet de mettre des balises A en ligne */
a.btnreduit:hover {padding:0px; background-color:#EEE; color:black; border:solid 1px; border-color:gray LightGray LightGray gray;}

a.plus {float:right; right:10px; padding:1px; font-size:10px;} /* permet de mettre des balises A en ligne */
a.plus:hover {padding:0px; font-size:11px; background-color:#EEE; color:black; border:solid 1px; border-color:gray LightGray LightGray gray;}

a.minilink {float:left; padding:1px;} /* permet de mettre des balises A en ligne */
a.minilink:hover {padding:0px; background-color:#EEE; color:black; border:solid 1px; border-color:gray LightGray LightGray gray;}

div.textetitre {float:left;}
span.textetitre {float:left;}
.cachediv {display:none; height:1px; margin-top:-1px; position:absolute;}

/* cache les <span> placés dans un lien <a> et affiche comme un statusbar */
a span.hint {text-decoration:none; display:none; color:gray;}
a:hover span.hint {display:block; position:absolute; top:25px; left:10px; text-align:right;}

/* --------------------- info bulle ---------------------- */
/* Rend invisible tout notre bloc span */
a.info_bulle span.info_bulle
{position:absolute; top:-2000em; left:-2000em; width:1px; height:1px; overflow:hidden;}
/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle, a.info_bulle:active span.info_bulle
{top:auto; left:auto; width:220px; height:auto; overflow:visible; z-index:500;}
span.info_bulle { background:#F6F6FF; color:#000; text-align:left; border:1px solid; border-color: LightGray gray gray LightGray;}
span.header  {display:block; background:#F6F6FF; font-size:12px; font-weight:bold; height:30px; line-height:220%; text-align:center;}
span.content {display:block; background:#F6F6FF; font-size:12px; padding:0 8px;margin-bottom:4px}
span.footer  {display:block; background:#ECECEF; text-align:center; border-top:1px solid; border-color:LightGray; font-size:11px; height:18px;}

/* --------------------- qrcode_bulle ---------------------- */
/* Rend invisible tout notre bloc span */
a.qrcode_bulle span.qrcode_bulle
{position:absolute; top:-2000em; left:-2000em; width:1px; height:1px; overflow:hidden;}
/* Rend visible tout notre bloc span et lui attribue une taille */
a.qrcode_bulle:hover span.qrcode_bulle, a.qrcode_bulle:focus span.qrcode_bulle, a.qrcode_bulle:active span.qrcode_bulle
{top:32px; left:-220px; right:0px; width:220px; height:auto; overflow:visible; z-index:500;}
span.qrcode_bulle { background:#F6F6FF; color:#000; text-align:left; border:1px solid; border-color: LightGray gray gray LightGray;}
span.header  {display:block; background:#F6F6FF; font-size:12px; font-weight:bold; height:30px; line-height:220%; text-align:center;}
span.content {display:block; background:#F6F6FF; font-size:12px; padding:0 8px;margin-bottom:4px}
span.footer  {display:block; background:#ECECEF; text-align:center; border-top:1px solid; border-color:LightGray; font-size:11px; height:18px;}