
figure 
	{ 
	display: inline-block; 
	}

#slideshow
	{
	position: relative;
	width: 708px;
	height: 400px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;

	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	}

/* --------  Ombrage du cadre du défilement --------  */

#slideshow:before,
#slideshow:after
	{
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	
	z-index: -10;
	}
#slideshow:before
	{
	left:0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	}
#slideshow:after
	{
	right:0;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	}

/* --------  Fin  Ombrage --------  */

/* --------  Définition de la zone de Défilement  -------- */

#slideshow .container
	{
	position:relative;
	width: 708px;
	height: 400px;
	overflow: hidden;
	}

/* --------  timeline base  -------- */

#slideshow .container:after
	{
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 100%;
	height: 1px;
	}

/* --------  Zone de partage du temps de Défilement  -------- */

/* --------  Début  Keyframe  -------- */
@-webkit-keyframes slider
	{
		 0%, 4%, 100%	{ left: 0% }
		6.6%, 11%	{ left: -100% }
		13.2%, 18%	{ left: -200% }
		19.7%, 24%	{ left: -300% }
		26.4%, 31%	{ left: -400% }
		33%, 37%	{ left: -500% }
		39.5%, 44%	{ left: -600% }
		46.1%, 51%	{ left: -700% }
		52.8%, 57%	{ left: -800% }
		59.4%, 64%	{ left: -900% }
		66%, 70%	{ left: -1000% }
		72.6%, 77%	{ left: -1100% }
		79.1%, 84%	{ left: -1200% }
		85.8%, 90%	{ left: -1300% }
		92.3%, 97%	{ left: -1400% }

	}

@-moz-keyframes slider
	{
		 0%, 4%, 100%	{ left: 0% }
		6.6%, 11%	{ left: -100% }
		13.2%, 18%	{ left: -200% }
		19.7%, 24%	{ left: -300% }
		26.4%, 31%	{ left: -400% }
		33%, 37%	{ left: -500% }
		39.5%, 44%	{ left: -600% }
		46.1%, 51%	{ left: -700% }
		52.8%, 57%	{ left: -800% }
		59.4%, 64%	{ left: -900% }
		66%, 70%	{ left: -1000% }
		72.6%, 77%	{ left: -1100% }
		79.1%, 84%	{ left: -1200% }
		85.8%, 90%	{ left: -1300% }
		92.3%, 97%	{ left: -1400% }

	}

@keyframes slider 
	{		 0%, 4%, 100%	{ left: 0% }
		6.6%, 11%	{ left: -100% }
		13.2%, 18%	{ left: -200% }
		19.7%, 24%	{ left: -300% }
		26.4%, 31%	{ left: -400% }
		33%, 37%	{ left: -500% }
		39.5%, 44%	{ left: -600% }
		46.1%, 51%	{ left: -700% }
		52.8%, 57%	{ left: -800% }
		59.4%, 64%	{ left: -900% }
		66%, 70%	{ left: -1000% }
		72.6%, 77%	{ left: -1100% }
		79.1%, 84%	{ left: -1200% }
		85.8%, 90%	{ left: -1300% }
		92.3%, 97%	{ left: -1400% }

	}
/* --------  Fin  Keyframe  -------- */

/* --------  Temps de Défilement  -------- */

#slideshow .slider {
	position: absolute;
	left:0; top:0;

	width: 1500%;

	/*  Espace de Défilement = NbImages multiplié par 100% */

	height: 400px;	/*  Hauteur image en pixels */
	/* Temps total de Défilement de toutes les images */
	-webkit-animation: slider 75s infinite;
	-moz-animation: slider 75s infinite;
	animation: slider 75s infinite;
}

/* --------  slideshow figure  -------- */

#slideshow figure {
	position:relative;
	padding:0; margin:0;
}

