#slideshow {
	position: relative;
	width: 100px; /*640px*/;
	height: 310px; border:10px;
	padding: 15px;
	margin: 0 auto 2em;
	border: 1px solid #ddd;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 
*/
#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}

/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
}

/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
/*****************************************************************************/
/*proposition numero 2 (Celle utilisee dans pixel media */

 *{        
    padding:0;
    margin:0;
    list-style-type:none;
  }


  
  #slider{
    /*background:url('imagesSiteweb/index.fw.png'); /* background.png  */
    /*width:500px;
    height:401px;*/  
    /*margin-left:360px;/*50px*/
	/*padding-top:200px;*/  
	
	width:1182px; 
    height:699px;   
	
    position:relative;
  }
  
  #content_slider{
    
  width:1182px; 
  height:699px;   
    margin:0px;/*50px*/
    position:relative;
  }
  

  #mask{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
  }
  
  #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;

   }
   /* Les images */
   #image_container li{
      float:left;
   }
 /* 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 points de navigation */
      #dots{
        position:absolute;
        width:100px;
        height:15px;		
        left:495px;
        top: 0px;/*-35px;*/
      }
      
      /* les points, avec leur background non selectionné */
      #dots li{
        float:left;
        margin: 0px 2px;
        width:12px;
        height:12px;
        background: url(../imagesSiteweb/empty-dot.png);
        cursor:pointer;
      }
      /* Point au survol */
      #dots li:hover{
        background: url (../imagesSiteweb/selected-dot.png);
      }



 	  #bouton{
        position:relative;
        width:244px;
        height:30px;
        margin: 430px 0px 0px 0px;
        cursor:pointer;
      }
	  
/* 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('../imagesSiteweb/selected-dot.png');
        cursor:normal;
      }
	  
#glass{
        position:absolute;
        top:0px;
        left:0px;
		list-style-position:outside;
      }
.fleche{ padding-top:500px;
        position:absolute;
        top:100px;
        cursor:pointer;
		padding: 50px 0px 0px 0px;
      }
#fleche_gauche{
        left:-5px;
      }
#fleche_droite{
        right: -5px;
      }