/* CSS Document */
      *{        
        padding:0;
        margin:0;
        list-style-type:none;
      }
      #slider{
        /*background:url('resources/background.png');*/
        width:360px;/*480px;960px; */
        height:410px;/*600px;300px;*/
        margin:50px auto;
        position:relative;
      }
      #mask{
        width:100%; /*300%*/
        height:/*200%;*/100%;
        position:absolute;
        /*border:5px solid green; */
        overflow:hidden;
      }
      .fleche{
        position:absolute;
        top:200px;;/*295px; 145px; un peu moins de la hauteur du slider ???,*/
        cursor:pointer;
      }
      #fleche_gauche{
        left:-17px;
      }
      #fleche_droite{
        right: -17px;
      }
      #image_container{
        position:absolute;
        width:401%;
        /*height:100%;600px;*/
        
        /* La transition sur tous les navigateurs */
           /* Chrome */ 
          transition-property:all;
          transition-duration:1s; 

          -webkit-transition-property:all;
          -webkit-transition-duration:1s;

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

      .container { /*ul*/
        position:absolute;/* ne change rien !!*/
        width:401%; /*width:1442px; */   /* !*/
        height: 410px; /* 600px; Some kind of height is necessary here. */
        line-height: 410px; /*600px;  This value should equal the height */
        /*text-align: center;*/ /* This horizontally centers the element */
        /*background-color: navy;#66D9EF;  */
        
         /* La transition sur tous les navigateurs */
           /* Chrome */ 
          transition-property:all;
          transition-duration:1s; 

          -webkit-transition-property:all;
          -webkit-transition-duration:1s;

           /* Firefox */ 
          -moz-transition-property:all;
          -moz-transition-duration:1s;
          
           /* Opera */ 
          transition-property:all;
          transition-duration:1s;
          
          /*left:-33%;*/
      }

      .centered {/*ul li*/
        display: table-cell;/*inline-block;*/
        *display: inline; zoom: 1; /* IE7 inline-block hack */
        line-height: normal; /* If left out, the line-height of .block will be inherited - by the parent (500px) in this case */
        vertical-align: middle; /* This vertically centers inline-level elements */
        /*background-color: pink;#FFF;*/
        /*padding: 40px 80px;*/
        font-family: arial, sans;
        color: #66D9EF;
      }

         
      li img {width:360px;/*480px;*/height:auto;/* position: absolute; top: 0; bottom: 0; left: 0; right: 0;*/ margin: auto} 
      
      /* Les différentes positions du slider*/
      .image1 ul{
        left:0;
      }
      .image2 ul{
        left:-100%;
      }
      .image3 ul{
        left:-200%;
      }
      .image4 ul{
        left:-300%;
      }                
      
      /* Les images 
      ul li{
        float:left;
      }           */
      
      /* L'encart Bleu */
      #encart{
        position:absolute;
        top:300px;/*600px;-15px;*/
        /*left:316px;*/
        background:aqua;/*url('resources/text.png');*/
        text-align:center;
        width:100%;/*328px;*/
        height:24px;/*72px;396px;*/
        padding-top:7px;
      }
      
      /*#bouton{
        position:relative;
        width:244px;
        height:55px;
        margin: 300px 0px 0px 40px;
        cursor:pointer;
      }*/
      
      /* Les points de navigation */
      #dots{
        width:64px;/*130px;*/
        margin:auto;
      }
      
      /* les points, avec leur background non selectionné */
      #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{
        background: url('resources/selected-dot.png');
      }

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