/*#############################################################
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: 2.4em;
	margin-bottom: 4px;
	text-align: center;
}


h1 {
	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;
}



/*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: 275px;
width: 721px;
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: 340px;
width: 1250x;
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);
}


/*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:3em;
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:260px;
padding:0px;
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:3em;
	color:#099;
	text-align:center;
		}



ul li div p{
	text-indent:15px;
	padding-top:10px;
	width:240px;
	margin-left:15px;
	overflow:hidden;
	font-size:2.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 */
	
	
	
html, body, div, span, applet, object, iframe, h2, h3, h4, h6, ul, li, thead, tr, th, td, nav, output, ruby, time, mark, audio, video {

  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { overflow-y: scroll; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 39.5%;
  line-height: 1.5;
  color: #515151;
  padding: 25px 0;
 
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, hgroup, menu, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }



/** page structure **/
#w {
  display: block;
  max-width: 1300px;
  min-width: 300px;
  margin: 0 auto;
  padding: 2px 3px;
}


/** posts slider widget **/
.crsl-items {
  display: block;
  padding: 5px;
}

.crsl-item {
  background: #fff;
  padding: 8px;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}

.crsl-item .thumbnail {
  display: block;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}
.crsl-item .thumbnail img { 
  display: block; 
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.crsl-item .thumbnail:hover img {
  opacity: 0.8;
}

.crsl-item h3 { /*reglage texte avec lien possible*/
  font-family: 'Oswald', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 2.95em;
  line-height: 1.25em;
  margin-bottom: 12px;
}
.crsl-item h3 a {
  text-decoration: none;
  color: #333;
}
.crsl-item h3 a:hover {
  text-decoration: underline;
}

.crsl-item .postdate { /* reglage date */
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  font-size: 1.8em; /*regle police date*/
  font-weight: bold;
  background: #4e90da;
}

.crsl-item p {
  font-size: 2.2em; /*regle police en savoir plus*/
  line-height: 1.55em;
  margin-bottom: 5px;
}

.crsl-item p.readmore a {
  display: block;
  float: right;
  color: #4e90da;
  padding: 3px 5px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 3px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.crsl-item p.readmore a:hover {
  background: #4b6caa;
  color: #fff;
}


/** posts slider nav **/
.slidernav {
 
  margin-top: 710px;
  margin-left: -975px;
  text-align: center;
  margin-bottom: 5px;
}

.slidernav a { /*ici reglage bouton suivant precedent */
  display: inline-block;
  padding: 5px 8px;
  margin-right: 8px;
  font-size: 2em; /*regle olice bouton suivant prcedent */
  background: #fff;
  color: #666;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}
.slidernav a:active {
  -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}


/** media queries **/
@media screen and (max-width: 660px) {
  h1 { font-size: 32.4em; line-height: 1.2em; }
  
  .crsl-item h3 { font-size: 1.65em; }
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

		

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

.footer {
    
	background: url(pied__page.png) repeat-x;
	height: 180px;
	width: 1300px;
	margin-top: 15px;
	float : bottom;
	}