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

* { 
    margin: 0;
    padding: 0;
  }
  body {
    font-size: 15px;
    font-family: 'Roboto Slab', serif;
    padding:;
	color:#000;
	background: url(img_pages/background/background4-01.png);
	background-attachment:fixed;
  }
  
    A:link {color: #000;}
A:visited {color:#000;}
A:hover {color:#000;}

  footer, section, article, header, aside, figure, nav {
    display: block;
  }
   nav {
    padding: 20px;
    z-index: 20;
    
    background: #fff;
    position: fixed;
	height:auto;
	width:auto;
	top:20px;
	left:4%;
	border-radius:5px;
	
  }

  nav li {
    display: inline;
    padding-right: 2em;
	list-style:none;
  }
  nav a {
    background: #FF3;
    padding:;
    border-radius:;
    color: #000;
    font-weight:bold;
    text-decoration: underline;
	font-size:15px;
	
  }
  nav a:hover, nav a:focus {
    background: #CCC ;
  }
  footer {
    clear: both;
    font-size: 10px;
  }
  footer a {
    color: #000;
  }
  

  
  #global
  {
	  margin-left:4%;
	  margin-right:auto;
	  width:1140px;
	  height:auto;
	  position:relative;
	  margin-top:125px;
	  }
	  
   #bouton
  {
	 width:240px;
	 text-align:left;
	 padding:px;
	 background-color:#FFF;
	 text-decoration:none;
	 margin-left:;
	 border-radius:;
	 display:block;
	}
		
 
  #bouton li
  {
	  display:inline;
	  list-style-type:none;
	  padding-right:1em;
	  }
	  
	  #bouton a
	  {
		  color:#000;
		  font-size:11px;
		  font-weight: lighter;
		  }
  
  #bouton a:hover
  { background-color:#FF3;}



		
  #texte
 	    {
	  left:800px;
	  top:;
	  background-color:#FFF;
	 position:absolute;
	  height:375px;
	  width:300px;
	  padding:20px;
	  font-size:11px;
	 font-weight: lighter; 
	  color:;
  }
  	 #texte a:hover
 { background-color:#FF3; } 
  

 #texte #retour
 {
	 text-align:center;
	 width:60px;
	 position:absolute;
	 top:375px;
	 left: 240px;
	 display: block;
	 background-color:#FFF;
	 font-size:11px;
	 font-weight: lighter;
	 
	 }
	 
	#texte #retour a
 {
	 color: #000;
	 text-decoration:underline;;
	 } 
	 
	 #texte #retour a:hover
 { background-color:#FF3; } 
	 

#slideshow {
    position: absolute;    /*le parent positionné*/
    width: 800px;          /*limite en largeur (1 élément du slideshow)*//*CHANGER ICI POUR taille ou -100%*/
    height: 415px;         /*limite en hauteur*//*CHANGER ICI POUR taille ou -100%*/
	overflow: hidden;      /*on cache ce qui déborde*/
	top:;   /* DECIDE DE L'EMPLACEMENT DU SLIDE*/
	left:;
	background-color:#FFF;

}


#sContent {
    position: absolute;   /*on sort l'élément du flux*/
    top: 20px;               /*on le positionne précisément dans ...*/
    left: 20px;              /*l'angle haut gauche de son parent positionné*/
    width: 500%;
	height:350px;         /*ou 300% car 3 éléments*//*CHANGER ICI POUR taille ou -100%*/
    margin: 0; 
	           
   
    
    /*CSS3 transition*/
        -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s ease-in;
}
#sContent li {
    display: inline;      /*on aligne les éléments du slideshow*/
	margin-right:20px;
}

#slideshow .next, #slideshow .prev {
	position: absolute;
	top: 380px;/* POSITIONNEMENT DE NEXT ET PREV*/
	left: 105px;
	z-index: 20;
	width:40px;
}

#slideshow .prev { left: 30px; padding-top:2px; padding-bottom:2px; text-align:center; }
#slideshow .next { right: 0; padding-top:2px; padding-bottom:2px; text-align:center;  }

#slideshow .prev:hover { background-color:#FF3; }
#slideshow .next:hover { background-color:#FF3; }

/* initialisation */
#slideshow .next, #slideshow .prev { display: none; }
#slideshow .next1 { display: block; }

/* Vers 1ère étape */
#s1:target #sContent { left: 20px; top: 20px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -594px;top: 20px; } /*CHANGER ICI POUR taille ou -100% */
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }

/* Vers 3ème étape */
#s3:target #sContent { left: -892px;top: 20px; } /*taille base + 20margin right!!*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3, #s3:target .next3 { display: block; }

/* Vers 4ème étape */
#s4:target #sContent { left: -1375px;top: 20px; } /*taille base +20 margin right!!*/
#s4:target .next, #s4:target .prev { display: none; }
#s4:target .prev4, #s4:target .next4 { display: block; }

/* Vers 5ème étape */
#s5:target #sContent { left: -1900px;top: 20px; } /*taille base +30 margin right!!*/
#s5:target .next, #s5:target .prev { display: none; }
#s5:target .prev5 { display: block; }