#slider{
    /*background:url('./slider/resources/background.png');*/
    width:352px;
    height:245px;
    margin-left:-11px;
    position:relative;
}
#mask{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.fleche{
    position:absolute;
    top:145px;
    cursor:pointer;
}
#fleche_gauche{
    left:-17px;
}
#fleche_droite{
    right: -17px;
}
#image_container{
    position:absolute;
    width:1600%; /* = nombre de slides x 100 */
    height:100%;color:#ffffff;
    /* 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:-100%;}
.image3 #image_container{left:-200%;}
.image4 #image_container{left:-300%;}
.image5 #image_container{left:-400%;}
.image6 #image_container{left:-500%;}
.image7 #image_container{left:-600%;}
.image8 #image_container{left:-700%;}
.image9 #image_container{left:-800%;}
.image10 #image_container{left:-900%;}
.image11 #image_container{left:-1000%;}
.image12 #image_container{left:-1100%;}
.image13 #image_container{left:-1200%;}
.image14 #image_container{left:-1300%;}
.image15 #image_container{left:-1400%;}
.image16 #image_container{left:-1500%;}
.image17 #image_container{left:-1600%;}


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

/* L'encart Bleu */
#encart{
    position:absolute;
    top:-5px;
    
    background:url('./slider/resources/bouton.png');
    background-repeat:no-repeat;
    width:351px;
    height:275px;
}

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

/* Les points de navigation *//*
html body.pages div#main.pages div#mainContent div#col_center div#page_content ul li div#slider.image4 div#encart ul#dots{
margin: 258px auto auto;
    width:130px;
    margin:auto;
}
*/
/* les points, avec leur background non selectionné */
#dots li{
    float:left;
    margin: 2px 2px;

    width:12px;
    height:12px;
    background: url('./slider/resources/empty-dot.png');
    cursor:pointer;
}
/* Point au survol */
#dots li:hover{
    background: url('./slider/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, .image7 #dots li.button7, .image8 #dots li.button8,
.image9 #dots li.button9, .image10 #dots li.button10, .image11 #dots li.button11, .image12 #dots li.button12,
.image13 #dots li.button13, .image14 #dots li.button14, .image15 #dots li.button15, .image16 #dots li.button16,
.image17 #dots li.button17 {
    background: url('./slider/resources/selected-dot.png');
}

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