@charset "utf-8";
/* CSS Document */


	  #sl{
        width:844px;
        height:409px;
        margin:50px auto;
        position:relative;
		padding:0;
        margin:50px 0 0 30px;
      }
      #mask{
        width:100%;
        height:100%;
        position:absolute;
        overflow:hidden;
		padding:0;
        margin:0;
      }
      .fleche{
        position:absolute;
        top:158px;
        cursor:pointer;
		padding:0;
        margin:0;
      }
      #fleche_gauche{
        left:-41px;
		padding:0;
        margin:0;
      }
      #fleche_droite{
        right: -41px;
		padding:0;
        margin:0
      }
      #image_container{
        position:absolute;
        width:400%;
        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;
		padding:0;
        margin:0

      }
      
      /* 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%;
      }
      
      /* Les images */
      #image_container li{
        float:left;
      }
      
      /* L'encart Bleu */
      #encart{
        position:absolute;
        top:-15px;
        left:200px;
        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;
        height:15px;
        left:161px;
        bottom:-25px;
      }
      
      /* les points, avec leur background non selectionné */
      #dots li{
        float:left;
        margin: 0px 2px;
        cursor:pointer;
		border-radius: 3px;
    	cursor: pointer;
    	display: inline-block;
    	height: 16px;
    	line-height: 16px;
   		margin-right: 17px;
   	 	padding: 10px;
    	text-align: center
      }
      /* Point au survol */
      
      /* 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(../images/link.gif) repeat-x;
        cursor:normal;
		color:#FFF;
      }

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