/*#############################################################
Site par F. Saillard

#############################################################*/


* {
	margin: 0;
	padding: 0;
}

body {
	
	background: url(Arcus_vol_02.jpg) no-repeat center fixed ; 
    background-size:cover;
	 margin:0;
  padding:0;
   -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
	color: #543;
	font: normal 62.5% "Cantarell",sans-serif;
}




p,cite,code,ul {
	font-size: 1.2em;
	padding-bottom: 1.2em;
	text-align: justify;
}
h1 {
	font-size: 1.4em;
	margin-bottom: 4px;
	text-align: center;
}


h1,h2,h3 {
	color: #33CCFF;
	padding-top: 6px;
}

p
{
color: #FFFFFF;
font-size: 15px;
}


.container {
	margin: 0 auto;
	width: 1300px;
	padding-bottom :0px;
}


.header {
	background: url(gif.gif) repeat-x;
	height: 160px;
	margin: 0 auto;
	width: 1300px;
}

.title {
	padding: 10px;
	padding-left: 360px; 
}
.title h1 {
	color: #FFFFFF;
	font: normal 3.4em "Lucida Sans Unicode","Trebuchet MS",sans-serif;
}

/*placement du slide menu à gauche*/

.placementslide {
	
	float: left;
	
	
	}
	

	
	
	
	/*paragraphe presentation club*/
	
.paragraphe  {

filter:alpha(opacity=90); /* propriétaire IE */
-moz-opacity:0.90; /* propriétaire Firefox */
opacity:0.90; /* CSS3 */ 
background: #099 url(img/bgnavigation.gif) repeat-x;
font: bold 2.5em Verdana,sans-serif;
height: 120px;
width: 650px;
float: right;

margin-bottom : 15px;
margin-right : 0px;
padding: 15px;

border-radius: 7px 7px 7px 7px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);

}

/*paragraphe avec slider à l'intérieur*/

.paragraphe2  {

filter:alpha(opacity=90); /* propriétaire IE */
-moz-opacity:0.90; /* propriétaire Firefox */
opacity:0.90; /* CSS3 */ 
background: #099 url(img/bgnavigation.gif) repeat-x;
font: bold 2.5em Verdana,sans-serif;
height: 500px;
width: 650px;
float: right;

margin-bottom : 35px;
margin-right : 0px;
padding: 15px;

border-radius: 7px 7px 7px 7px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);
}


/*boite menu à gauche avec slide = OK*/

ul:before{
content:"";
position:absolute;
z-index:100;
filter:alpha(opacity=40); /* propriétaire IE */
-moz-opacity:0.70; /* propriétaire Firefox */
opacity:0.70; /* CSS3 */ 
background:#099;
height:100%;
width:192px;
margin-top:-66px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);
}

ul{
position:relative;
list-style:none;
width:182px;
padding:40px 0px;
margin-left:103px;
margin-top:26px;
}
ul li{
height:40px;
width:182px;
}
ul li a.menuLien{
position:absolute;
z-index:110;
font-weight:bold;
color:white;
font-size:1.5em;
padding-left:22px;
display:block;width:160px;height:40px;
text-decoration:none;
text-shadow:0px 0px 5px rgba(0,0,0,0.5);
letter-spacing:-1px;
}


/*la boite qui slide en bougeant vers la droite=ok*/
ul li div{
width:182px;height:220px;
padding:20px;padding-top:10px;
background:rgba(0,0,0,0.6);
overflow:hidden;
color:white;
position:absolute;top:-25px;left:0;z-index:50;
opacity:0;margin-top:10px;
-webkit-transition:1s left,1s width,1s opacity;
   -moz-transition:1s left,1s width,1s opacity;
     -o-transition:1s left,1s width,1s opacity;
        transition:1s left,1s width,1s opacity;
}

ul li:hover div{
left:197px; /*regle le decalage du slide à droite initialement 182*/
opacity:1;
width:276px; 
background:rgba(0,0,0,0.6);
}



ul li div h5{
	font-size:1.4em;
	color:#099;
	text-align:center;
		}



ul li div p{
	text-indent:15px;
	padding-top:10px;
	width:276px;
	overflow:hidden;
	font-size:1.4em;
	font-weight:normal;
	text-align:justify;
	}

ul li div p.lien{
	text-align:right;
	}
	
ul li div p.lien a{
	color:#c10;
	}

	
	/*fin de la boite à gauche avec slide = OK */
	
	
	
			/*DEBUT : imageslide dans paragraphe2  */

		/*dimensions et placement de la boite*/
		
#slider {
  width: 390px;  /*dimensionnement de la boite*/ 
  height: 258px;
  margin: -25px auto 0;
  position: relative;  /*en mettant absolute ca decale image sur la droite*/

  background: #fff;
	
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); 
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}

#slider:before, #slider:after {
	content: '';
	position: absolute;
	
	width: 60%;
	height: 20px;
	
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	
	-webkit-transform: rotate(-4deg) skew(-10deg);
	-moz-transform: rotate(-4deg) skew(-10deg);
	-o-transform: rotate(-4deg) skew(-10deg);
	-ms-transform: rotate(-4deg) skew(-10deg);
	transform: rotate(-4deg) skew(-10deg);
	
	left: 10px;
	bottom: 13px;
	z-index: -1;
}

#slider:after {
	left: auto;
	right: 10px;
	
	-webkit-transform: rotate(4deg) skew(10deg);
	-moz-transform: rotate(4deg) skew(10deg);
	-o-transform: rotate(4deg) skew(10deg);
	-ms-transform: rotate(4deg) skew(10deg);
	transform: rotate(4deg) skew(10deg);
}

/*en dessous petite boite dans laquelle sont les boutons*/

#slider ul {
  width: 20px;
  height: 0px; /*en mettant 0 largeur ici j'ai fait disparaitre boite qui encadre les boutons  40 sinon*/
  padding: 0 0 0 0;
  position: absolute;
  z-index: 10;
  list-style: none;
  
  left: 50%;
  margin-left: -270px; /* decale le boutons de droite de gauche droite*/
  bottom: 185px; /*regle la hauteur des boutons*/
}

/*en dessous position des boutons*/

#slider ul li:first-child {
  margin-left: 0px; /*regle la position du bouton*/
}

#slider ul li {
  float: left;
  margin-right: 12px;
  margin-top: -10px; /*regle en hauteur les boutons et leur écartement*/
}

#slider ul li:last-child {
  margin-right: 30px;

}

/*parametre la taille des boutons*/

#slider ul li a {
  width: 15px;
  height: 15px;
  display: block;
  outline: none;
  border: none;
  position: relative;
  z-index: 2;
  background: #aaa;
  
  box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
  -moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
  -webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;	
	
  -webkit-border-radius: 50%;  
  -moz-border-radius: 50%;  
  border-radius: 50%;
  
}

#slider ul li a:hover {
  background: #888;
}

#slider img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  
  -webkit-transition: all .5s ease;  
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#slider img:target {
  opacity: 1;
}

#slider img#five {
  opacity: 1;
}

#slider img:not(:target), #slider img:target ~ img#five  {
  opacity: 0;
}


{
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] 
  background: #777;
}




	/*fin du slide dans paragraphe*/
	
	
.auteur {

float: right;
margin-right: 26px;
	}
	

.main {
	clear: both;
	padding: 010px 12px 28px;
}




.content {
	padding-top: 2px;

		float: left;
	width: 68%;
}
.content .descr {
	color: #987E57;
	font-size: 1.1em;
	margin-bottom: 2px;
}
.content li {
	list-style: url(img/li.gif);
	margin-left: 18px;
}


	
.auteur {
margin-top: 40px;
float: right;
margin-right: 390px;
	}


.footer {
    clear: both;
	background: url(pied__page.png) repeat-x;
	height: 160px;
	width: 1300px;
	padding-top: 35px;
	float : bottom;
	}