*{        
padding:0;
margin:0;
list-style-type:none;
}
#slider{
/*background:url('resources/background.png');*/
width:895px;
height:395px;
position:absolute;
left:4px;
top: 5px;
}
#mask{
width:100%;
height:100%;
position:absolute;
/left: 0px;
overflow:hidden;
}
.fleche{
position:absolute;
top:360px;
cursor:pointer;
z-index:2;
}
#fleche_gauche{
left:360px;
}
#fleche_droite{
right: 360px;
}
#image_container{
position:absolute;
width:700%;
height:100%;
/* La transition sur tout les navigateurs */
   /* Chrome */ 
  -webkit-transition-property:all;
  -webkit-transition-duration:1s;

   /* Firefox */ 
  -moz-transition-property:all;
  -moz-transition-duration:1s;
  
   /* Opera */ 
  transition-property:all;
  transition-duration:1s;

}

/* Les différentes positions du slider */
.image1 #image_container{
left:0;
}
.image2 #image_container{
left:-895px;
}
.image3 #image_container{
left:-1790px;
}
.image4 #image_container{
left:-2685px;
}      
.image5 #image_container{
left:-3580px;
}      
.image6 #image_container{
left:-4475px;
}

/* Les images */
#image_container li{
float:left;
}

#bouton{
position:relative;
width:244px;
height:55px;
margin: 300px 0px 0px 40px;
cursor:pointer;
}

/* Les points de navigation */
#fondots{
position: absolute;
top: 360px;
left: 350px;
width: 195px;
height: 35px;
background: url("/ressources/dots.png");
/*z-index:1;*/
}
#dots{
position:absolute;
width:195px;
height:10px;
left:400px;
bottom:14px;
z-index:2;
}

/* les points, avec leur background non selectionne */
#dots li{
float:left;
margin: 0px 2px;
width:12px;
height:12px;
background: url("/resources/empty-dot.png");
cursor:pointer;
}
/* Point au survol */
#dots li:hover{
background: url("/resources/selected-dot.png");
}

/* Point "selectionné". De la même manière que l'image, on change en fonction de la classe de slider */
.image1 #dots li.button1, .image2 #dots li.button2, .image3 #dots li.button3, .image4 #dots li.button4, .image5 #dots li.button5, .image6 #dots li.button6{
background: url("/resources/selected-dot.png");
cursor:pointer;
}

/* Un eyecandy */
#glass{
position:absolute;
top:0px;
left:0px;
}