#container{        
        padding:0;
        margin:0;
        list-style-type:none;
      }
      #slider{
        background:url('../images/background.jpg');
        width:900px;
        height:273px;
        margin-top: -30px;
        margin-bottom: 20px;
        position:relative;
      }
      #mask{
        width:100%;
        height:100%;
        position:absolute;
        overflow:hidden;
      }
      .fleche{
        position:absolute;
        top:113px;
        cursor:pointer;
      }
      #fleche_gauche{
        left:-17px;
      }
      #fleche_droite{
        right: -17px;
      }
      #image_container{
        position:absolute;
        width:300%;
        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:-100%;
      }
      .image3 #image_container{
        left:-200%;
      }
      
      /* Les images */
      #image_container li{
        float:left;
      }
      
      /* L'encart Bleu */
      #encart{
        position:absolute;
        top:-15px;
        left:200px;
        background:url('../images/text.png');
        width:328px;
        height:396px;
      }
      
      #bouton{
        position:relative;
        width:244px;
        height:55px;
        margin: 300px 0px 0px 40px;
        cursor:pointer;
      }
      
      /* Les points de navigation */
      #dots{
        position:absolute;
        width:130px;
        height:15px;
        left:425px;
        bottom:-25px;
      }
      
      /* les points, avec leur background non selectionné */
      #dots li{
        float:left;
        margin: 0px 2px;
        width:12px;
        height:12px;
        background: url('../images/empty-dot.png');
        cursor:pointer;
      }
      /* Point au survol */
      #dots li:hover{
        background: url('../images/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{
        background: url('../images/selected-dot.png');
        cursor:normal;
      }

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