body {
color:#ffffff;
background-color:black;
margin-top:10px;
margin-bottom:0px;
font-family:arial;
text-align:left;
}

a {color:#006666; text-decoration:none;}
a:hover {color:#006666; text-decoration:underline;}
a.ind {padding-left:5px;font-size:20px;font-weight:bold;}
#preload {display:none;}

/* MENU */
div.menuh { /* index horiz top*/
width:500px;height:100px;
position:absolute;top:0px;left:10px;
}

div.menub { /* index horiz bot*/
width:760px;height:80px;
position:absolute;top:420px;left:10px;
}

div.icra {
width:800px;height:80px;
position:absolute;top:520px;left:410px;} 

div.menuv { /* gall vertic */
width:80px;height:550px;
position:absolute;top:0px;left:0px;
margin-left:10px;margin-top:5px;
}

/* MENU horizontal pour PLANCHES */
div.menupl {
width:400px;height:70px;
position:absolute;top:0px;left:90px;
background-color:black;
padding:35px 0 0 20px;
}

a.menupl {
width:30px;height:30px;
font-family:arial;
font-size:22px;
text-align:left;
margin:30px 8px 0 0px;
font-weight:bold;
border:none;
text-decoration:none;
}

a.menupl:link    {color:gray;}
a.menupl:active  {color:gray;}
a.menupl:visited {color:gray;}
a.menupl:hover   {color:silver;text-decoration:none;}
#act {color:silver;text-decoration:none;}

div.contenu {
width:760px;height:320px;
position:absolute;top:0px;left:100px;
}

/* ANIM index */
a.aventure {
width:638px;height:320px;
position:absolute;top:0px;left:0px;
border:none;
}
.flave {
width:638px;height:315px;
position:absolute;top:100px;left:100px;
z-index:1;
}

/* ??? position texte erreur */
.texte {
background-color:gray;
width:400px;height:350px;
position:absolute;top:90px;left:200px;
margin-left:0px;
text-align:center;
}

/* afac : texte sur vignette pour info travaux */
.texteencours {
background-color:gray;
width:400px;height:200px;
position:relative;top:0px;left:0px;
margin-left:0px;
text-align:center;
}


/* BD : emplacement planches, vignettes */
div.planche {
width:330px;height:470px;
position:absolute;top:90px;left:70px;
padding-left:20px;
}
a.planche {
width:320px;height:470px;
position:absolute;top:0px;left:20px;
border:none;
}
.vignette {
width:600px;height:500px;
position:absolute;top:90px;left:420px;
visibility:hidden;
border:0;
}

div.gplanche {
width:400px;height:720px;
position:absolute;top:90px;left:80px;
padding-left:10px;
text-align:right;
border:0;
}
a.gplanche, a.gvignette {
width:400px;height:720px;
position:absolute;top:0px;left:10px;
border:0;
}
.gvignette {
width:500px;height:600px;
position:absolute;top:90px;left:480px;
visibility:hidden;
text-align:left;
border:0;
}
div.planchecam {
width:200px;height:720px;
position:absolute;top:92px;left:150px;
padding-left:0px;
text-align:left;
border:0;
}

/* BD : NAVIGATION entre vignettes */
div.bouton {
width:40px;height:25px;
font-family:verdana,sans-serif;font-size:18px;font-style:bold;
text-align:left; z-index:1;}

a.bout {color:gray; text-decoration:none; font-style:bold;}
a.bout:link {color:gray; text-decoration:none; font-style:bold;}
a.bout:hover {color:white; text-decoration:none; font-style:bold;}
a.bout:active {color:gray; text-decoration:none; font-style:bold;}

#bar {position:absolute;  top:31px;left:420px;}
#bau {position:absolute;  top:31px;left:470px;}
#bav {position:absolute;  top:31px;left:530px;}

#ar {position:absolute;   top:37px;left:426px;}
#autom {position:absolute;top:37px;left:470px;}
#av {position:absolute;   top:37px;left:530px;}
/* navigation entre vignettes pour grandes planches */
#barh {position:absolute;  top:31px;left:460px;}
#bauh {position:absolute;  top:31px;left:511px;}
#bavh {position:absolute;  top:31px;left:570px;}

#arh {position:absolute;   top:37px;left:466px;}
#automh {position:absolute;top:37px;left:511px;}
#avh {position:absolute;   top:37px;left:570px;}

a.suite {
width:250px;height:120px;
position:absolute;top:0px;left:0px;
text-align:center;
font-size:19px;
}

/* BD : PAGE INDEX : image et taille de l'ICONE */
a.g8 {
display:block;width:80px;height:80px;
background:url(img-bd/g82.jpg) no-repeat 0 0;}
a.g8:hover {background-image:url(img-bd/g83.jpg);}

a.expe1 {
display:block;width:80px;height:80px;
background:url(img-bd/expe2.jpg) no-repeat 0 0;}
a.expe1:hover {background-image:url(img-bd/expe3.jpg);}

a.karim {
display:block;width:80px;height:80px;
background:url(img-bd/karim2.jpg) no-repeat 0 0;}
a.karim:hover {background-image:url(img-bd/karim3.jpg);}

a.vimy {
display:block;width:80px;height:80px;
background:url(img-bd/vimy2.jpg) no-repeat 0 0;}
a.vimy:hover {background-image:url(img-bd/vimy3.jpg);}

a.recyclage {
display:block;width:80px;height:80px;
background:url(img-bd/recyclage2.jpg) no-repeat 0 0;}
a.recyclage:hover {background-image:url(img-bd/recyclage3.jpg);}

a.dessins {
display:block;width:80px;height:80px;
background:url(img-bd/dessins2.jpg) no-repeat 0 0;}
a.dessins:hover {background-image:url(img-bd/dessins3.jpg);}

/* BD : INDEX : emplacement des ICONES */
#p1 { position:absolute; top:10px; left:0px;}
#p2 { position:absolute; top:10px; left:160px;}
#p3 { position:absolute; top:10px; left:320px;}
#p4 { position:absolute; top:10px; left:480px;}
#p5 { position:absolute; top:10px; left:640px;}
#p6 { position:absolute; top:0px;  left:800px;}
#p7 { position:absolute; top:10px; left:0px;}
#p8 { position:absolute; top:10px; left:160px;}
#p9 { position:absolute; top:10px; left:320px;}
#p10 {position:absolute; top:10px; left:480px;}
#p11 {position:absolute; top:10px; left:640px;}

/* BD : MENU VERTICAL ICONES : taille, image */
a.g8p {
display:block;width:70px;height:70px;
background:url(img-bd/g82p.jpg) no-repeat 0 0;}
a.g8p:hover {background-image:url(img-bd/g83p.jpg);}

a.expe1p {
display:block;width:70px;height:70px;
background:url(img-bd/expe2p.jpg) no-repeat 0 0;}
a.expe1p:hover {background-image:url(img-bd/expe3p.jpg);}

a.karimp {
display:block;width:70px;height:70px;
background:url(img-bd/karim2p.jpg) no-repeat 0 0;}
a.karimp:hover {background-image:url(img-bd/karim3p.jpg);}

a.vimyp {
display:block;width:70px;height:70px;
background:url(img-bd/vimy2p.jpg) no-repeat 0 0;}
a.vimyp:hover {background-image:url(img-bd/vimy3p.jpg);}

a.recyclagep {
display:block;width:70px;height:70px;
background:url(img-bd/recyclage2p.jpg) no-repeat 0 0;}
a.recyclagep:hover {background-image:url(img-bd/recyclage3p.jpg);}

a.dessinsp {
display:block;width:70px;height:70px;
background:url(img-bd/dessins2p.jpg) no-repeat 0 0;}
a.dessinsp:hover {background-image:url(img-bd/dessins3p.jpg);}


/* BDP : INDEX : liste et liens */
ul.bdp li {
list-style-type:none;
width:700px;height:90px;
position:relative;top:0px;left:20px;}

h2 a {color:white;text-decoration:underline;}
h2 a:hover {color:white;text-decoration:none;}

div.bdp {
width:500px;height:60px;
position:relative;top:10px;left:90px;
background-color:black; color:#003366; font-style:bold;text-decoration:none;}
div.bdp:hover {
background-color:#003366; color:black; font-style:bold;text-decoration:none;}