body{ position absolute; background-color: lightGrey; width: 1000px;}
#texte{ position: relative; float: left; padding:30px;padding-bottom: 80px; padding-top: 0; width:450px; height:457px;overflow:auto; text-align: justify; background-color: white; border-style:inset; border-width:2px; margin-left: 10px;}
p{font-family: verdana; font-size: 14px;}
#animation{ position: absolute; margin-left: 550px; width : 500px;z-index: 1;}
footer{position: absolute; top:560px;}

#debut{position:absolute;
margin-left: 554px;
z-index: 3;
text-align: center;
margin-top: 300px;
}

#debut a {
position: absolute;
display:block;
width: 80px;
height: 20px;
text-decoration: none;
padding: 6px;
background-color: purple;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
20 background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: no-repeat;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px 6px;}

#debut a:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: no-repeat;
}
#debut a:active {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0,2)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: no-repeat;}

#roue{position:absolute;
margin-left: 554px;
z-index: 3;
text-align: center;
margin-top: 340px;
}

#roue a {
position: absolute;
display:block;
width: 80px;
height: 20px;
text-decoration: none;
padding: 6px;
padding-top: 0;
padding-bottom:10px; 
background-color: blue;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
20 background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: no-repeat;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px 6px;}

#roue a:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: no-repeat;
}
#roue a:active {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0,2)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: no-repeat;
}

#palettes{position:absolute;
margin-left: 554px;
z-index: 3;
text-align: center;
margin-top: 380px;
}

#palettes a {
position: absolute;
display:block;
width: 80px;
height: 20px;
text-decoration: none;
padding: 6px;
background-color: red;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
20 background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: no-repeat;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px 6px;}

#palettes a:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: no-repeat;
}
#palettes a:active {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0,2)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: no-repeat;}


#verge{position:absolute;
margin-left: 554px;
z-index: 3;
text-align: center;
margin-top: 420px;
}

#verge a {
position: absolute;
display:block;
width: 80px;
height: 20px;
text-decoration: none;
padding: 6px;
background-color: yellow;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
20 background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: no-repeat;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px 6px;}

#verge a:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: no-repeat;
}
#verge a:active {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0,2)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: no-repeat;}

#final{position:absolute;
margin-left: 554px;
z-index: 3;
text-align: center;
margin-top: 460px;
}

#final a {
position: absolute;
display:block;
width: 80px;
height: 20px;
text-decoration: none;
padding: 6px;
padding-top: 0;
padding-bottom:10px;
background-color: green;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
text-decoration: none;
font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
20 background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.3));
background-image: no-repeat;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px 6px;}

#final a:hover {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2));
background-image: no-repeat;
}
#final a:active {
border: 1px solid rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -webkit-linear-gradient-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0,2)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0));
background-image: no-repeat;