body
{
    
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("fondcartes.jpg");
   overflow:auto;
   
}   

p
{
color:purple;
font-size: 30px;
font-family:"DejaVu Serif Condensed","Accent SF","AbottOldStyle", "Arial Black", Arial, Verdana, serif;
text-align: center;
font-weight: bold;
}
h1
{
color:purple;
font-size: 36px;
font-family:"Accent SF","AbottOldStyle", "Arial Black", Arial, Verdana, serif;
text-align: center;
}
h2
{
color:purple;
font-size: 30px;
font-family:"Accent SF","AbottOldStyle", "Arial Black", Arial, Verdana, serif;
text-align: center;
}

#centre
{
color:purple;

position:absolute;
left:3%;
top:15%;
height:20%;
}
#un
{

margin-bottom:10px;
position:absolute;
left:10%;
top:30%;
height:20%;
}
#deux
{

margin-bottom:10px;
position:absolute;
left:25%;
top:30%;
height:20%;
}

#trois
{

margin-bottom:10px;
position:absolute;
left:40%;
top:30%;
height:20%;
}
#quatre
{

margin-bottom:10px;
position:absolute;
left:55%;
top:30%;
height:20%;
}
#cinq
{

margin-bottom:10px;
position:absolute;
left:70%;
top:30%;
height:20%;
}
#six
{

margin-bottom:10px;
position:absolute;
left:85%;
top:30%;
height:20%;
}
#sept
{

margin-bottom:10px;
position:absolute;
left:15%;
top:60%;
height:20%;
}
#huit
{

margin-bottom:10px;
position:absolute;
left:30%;
top:60%;
height:20%;
}
#neuf
{

margin-bottom:10px;
position:absolute;
left:45%;
top:60%;
height:20%;
}
#dix
{

margin-bottom:10px;
position:absolute;
left:60%;
top:60%;
height:20%;
}
#onze
{

margin-bottom:10px;
position:absolute;
left:75%;
top:60%;
height:20%;
}
#douze
{

margin-bottom:10px;
position:absolute;
left:10%;
top:80%;
height:20%;
}
#treize
{

margin-bottom:10px;
position:absolute;
left:25%;
top:80%;
height:20%;
}
#quatorze
{

margin-bottom:10px;
position:absolute;
left:40%;
top:80%;
height:20%;
}
#quinze
{

margin-bottom:10px;
position:absolute;
left:55%;
top:80%;
height:20%;
}
#seize
{

margin-bottom:10px;
position:absolute;
left:70%;
top:80%;
height:20%;
}
#dixsept
{

margin-bottom:10px;
position:absolute;
left:85%;
top:80%;
height:20%;
}
#dixhuit
{

margin-bottom:10px;
position:absolute;
left:17%;
top:108%;
height:20%;
}
#dixneuf
{

margin-bottom:10px;
position:absolute;
left:33%;
top:108%;
height:20%;
}
#vingt
{

margin-bottom:10px;
position:absolute;
left:63%;
top:108%;
height:20%;
}
#vingtun
{

margin-bottom:10px;
position:absolute;
left:78%;
top:108%;
height:20%;
}
#vingtdeux
{

margin-bottom:10px;
position:absolute;
left:15%;
top:138%;
height:20%;
}
#vingttrois
{

margin-bottom:10px;
position:absolute;
left:30%;
top:138%;
height:20%;
}
#vingtquatre
{

margin-bottom:10px;
position:absolute;
left:45%;
top:138%;
height:20%;
}
#vingtcinq
{

margin-bottom:10px;
position:absolute;
left:60%;
top:138%;
height:20%;
}
#vingtsix
{

margin-bottom:10px;
position:absolute;
left:75%;
top:138%;
height:20%;
}
#vingtsept
{

margin-bottom:10px;
position:absolute;
left:17%;
top:158%;
height:20%;
}
#vingthuit
{

margin-bottom:10px;
position:absolute;
left:33%;
top:158%;
height:20%;
}
#vingtneuf
{

margin-bottom:10px;
position:absolute;
left:68%;
top:158%;
height:20%;
}
#trente
{

margin-bottom:10px;
position:absolute;
left:83%;
top:158%;
height:20%;
}

#MENU
{


position:absolute;
left:2%;
top:195%;
height:20%;
}

#textebas
{


position:absolute;

top:190%;
text-align: center;
left:70%;

}
#bas
{

margin-bottom:10px;
position:absolute;
left:75%;
top:180%;
height:20%;
}
#fleche
{
position:absolute;
left:49%;
top:88%;

}
#curieux
{
position:absolute;
left:45%;
top:115%;

}
#pticurieux
{
position:absolute;
left:40%;
top:152%;

}
#CURSEUR
{

margin-bottom:10px;
position:absolute;
left:80%;
top:190%;
height:20%;
}
#tresbas
{
margin-bottom:10px;
position:absolute;
left:1%;
top:250%;
height:20%;
}