body{background-color:#d8e4f0;alink="#000099" link="#000099" vlink="#990099";
background-image:url(../images/banniere_accueil.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}


/* Les infobulles */
a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
/* caracteristiques de l'info bulle */
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 10px; /* le cadre est a n px de l'image depuis le bas de l'image */
    left: 15px; /* le cadre est a xx px de l'image depuis la gauche */
    padding: 6px; /* hauteur cadre */
    color: #000;
    border: 2px solid #bbb;
    background: #ffc;
    width:150px; /* longueur du cadre de l'info bulle */
    font-family:"Garamond",serif;color:#fb251b;font-size:0.755em;
}

/* fleche de visee du cadre 
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 50px;
    height: 7px;
    width: 6px;
    background: transparent url(../images/image_infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
} 

 Fin des infobulles */


h1{font-size=20;font-family: "New Century Schoolbook", Times, serif;color:black}
h2{font-size=16;font-family: "New Century Schoolbook", Times, serif;color:blue}
p{text-indent:300px;font-size=0.875em;font-family:"Garamond",serif;color:#999999;letter-spacing:-1px;text-decoration:none}
ul{list-style-type:none;position:absolute;left:50px;padding:0px;margin:0px;}

/* definition des lignes */ 
li{
list-style: none;
padding: 0 50px 50px 0;
margin: 0;
font-size:1.2em;
font:bold;
font-family:"Garamond",serif;color:#fb251b;
height: 110px;
width: 200px;
text-align:center;

}

li.actu {
background-image: url(../images/actu-init-text.jpg);
background-repeat: no-repeat;
height: 110px;
width: 200px;
}

li.actu a{
background-image: url(../images/actu-hover-text.jpg);
background-repeat: no-repeat;
height: 110px;
width: 200px;
display: block;
}

li.actu a:hover{
background: none;
}

li.anecdotes {
background-image: url(../images/anecdotes-init-text.jpg);
background-repeat: no-repeat;
height: 110px;
width: 200px;
}

li.anecdotes a{
background-image: url(../images/anecdotes-hover-text.jpg);
background-repeat: no-repeat;
height: 110px;
width: 200px;
display: block;
}

li.anecdotes a:hover{
background: none;
}

li.perso {
background-image: url(../images/personnages-init-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
}

li.perso a{
background-image: url(../images/personnages-hover-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
display: block;
}

li.perso a:hover{
background: none;
}

li.auteur {
background-image: url(../images/auteur-hover-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
}

li.auteur a{
background-image: url(../images/auteur-init-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
display: block;
}

li.auteur a:hover{
background: none;
}

li.forum {
background-image: url(../images/forum-hover-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
}

li.forum a{
background-image: url(../images/forum-init-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
display: block;
}

li.forum a:hover{
background: none;
}

li.liensweb {
background-image: url(../images/liensweb-hover-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
}

li.liensweb a{
background-image: url(../images/liensweb-init-text.jpg);
background-repeat: no-repeat;
height: 100px;
width: 200px;
display: block;
}

li.liensweb a:hover{
background: none;
}
img.right{float:right;border:1px dotted black; margin:0px 0px 15px 20px;}
img.indent{position:absolute;left:250px;}
img(border:1px dotted black; margin:15px 15px 15px 15px;}
span.lettrine{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}

/* les infos bulle */
a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
/* caracteristiques de l'info bulle */
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 500px;
    left: 500px;
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: #ffc;
    width:170px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 10px;
    height: 7px;
    width: 11px;
    background: transparent url(../images/fleche_infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}