html, body, table
{
font-family: "trebuchet MS", "Segoe UI", DejaVu, "Bitstream Vera Sans", Helvetica, sans-serif;
height: 100%;
margin: 0;
overflow-y: hidden;
background:#FFFFFF;
font-size: 12px;
}

body, h1, #contenu, #explications
{
min-width: 976px;
_width: 976px;
}

img
{
border: none;
}

a
{
color: #303030;
text-decoration: none;
}

a:hover, a:focus, a:active
{
color: #55b3ff;
text-decoration: none;
}

a.lid
{
color: #55b3ff;
text-decoration: none;
}

a.lid:hover, a.lid:focus, a.lid:active
{
color: #55b3ff;
text-decoration: none;
}

h1
{
text-align: center;
color: #800000;
margin: 0;
font-size: 32px;
height: 45px;
line-height: 45px;
}

/** Les captures de site : */
#contenu { padding-top: 90px; height: 255px; _height: 345px; background: url('images/fondpage.png') 0 0 repeat-x;}
#contenu div { margin-left: 50%; }
#contenu ul { margin: 0; margin-left: -487px; padding: 0; list-style: none inside; }
#contenu li { list-style: none inside; display: block; width: 195px/*=10+175+10*/; text-align: center; float: left; }
#contenu a { display: block; padding: 20px 0 0 0; cursor: pointer;  /*->*/  position: relative; z-index: 1; }
#contenu a:hover, #contenu a:focus, #contenu a:active {  /*->  background: url('-images/hover.png');*/  } /* 195 * 188 px */
#contenu a span { padding: 15px 0 10px 0; /*font-weight: bold;*/ }
#contenu a span { display: block; font-size: 12px; height: 18px; line-height: 18px; vertical-align: middle; /*background-color: yellow;*/ }

/** Animation progressive du survol des boutons : */
.hoverAnimation { position: absolute; width: 195px; height: 188px; background: url('images/hover.png'); z-index: 0; opacity: 0; }

/** Centrage visuel des éléments (centré sur le 1/3 de la hauteur de l'écran au lieu de 1/2) : */
#contenu      { position: absolute; width: 100%; z-index: 8; top: 37%; margin-top: -300px; }
#explications { position: absolute; width: 100%; z-index: 9; top: 66%; margin-top: -200px; }

/** Explications et bonus du bas : */
#explications { clear: both; text-align: center; font-size: 12px; line-height: 19px; height: 600px; /*width: 100%;*/ overflow: hidden; }
#explications a:hover, #explications a:focus, #explications a:active { border-bottom: 1px solid black; }
#scrollarea { position: absolute; width: 100%; }
#scrollarea div { position: absolute; width: 100%; }

/** Chargement : */
#chargement { text-align: center; display: none; font-size: 12px; line-height: 14px; width: 100%; position: absolute; top: 50%; z-index: 1000; }
#barre-chargement { width: 100px; margin: 5px auto; border: 1px solid #800000; padding: 1px; height: 14px; text-align: left; }
#progression-chargement { background-color: #303030; width: 0; height: 14px; }

a { outline: none; -moz-outline: none; }


#contenu      { top: -50%; }
#explications { top: 166%; }