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

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


* {
	margin: 0;
	padding: 0;
}

body {
	
	background: url(ask13.png) 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 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: 325px;
width: 460px;
float: right;

margin-bottom : 20px;
margin-right : 0px;
padding: 5px;

border-radius: 7px 7px 7px 7px;

}


.paragraphe3  {

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: 330px;
width: 1290px;
float: right;

margin-bottom : 20px;
margin-right : 0px;
padding: 5px;

border-radius: 7px 7px 7px 7px;

}


.paragraphecours  {

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: 2.5em Verdana,sans-serif;
height: 25px;
width: 635px;
float: left;
padding-top:10px;
margin-bottom : 20px;
margin-right : 0px;
padding: 5px;

border-radius: 7px 7px 7px 7px;

}


.paragraphevideo  {

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: 2.5em Verdana,sans-serif;
height: 25px;
width: 635px;
float: right;

margin-bottom : 20px;
margin-right : 0px;
padding: 5px;

border-radius: 7px 7px 7px 7px;

}




.paragraphe4  {

background: #099 url(img/bgnavigation.gif) repeat-x;
font: bold 2.5em Verdana,sans-serif;
height: 345px;
width: 810px;
float: left;

margin-bottom : 20px;
margin-right : 0px;
padding: 5px;

border-radius: 7px 7px 7px 7px;

}



.paragraphe5  {

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: 345px;
width: 460px;
float: right;
line-height: 80%;
margin-bottom : 25px;
margin-right : 0px;
padding: 5px;

border-radius: 7px 7px 7px 7px;

}


/*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; /*largeur de la boite*/
margin-top:-66px; /*modifie la hauteur de la boite fixe, initalement 40*/
-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; /*regle le decalage de la boite fixe a gaucge ou droite*/
margin-top:26px;
margin-bottom: -10px; 
}
ul li{
height:37px;
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; /* hauteur, largeur boite qui slide*/
padding:20px; /*marges intérieures de la boite qui slide*/
padding-top:10px; /*idem*/
background:rgba(0,0,0,0.6);
overflow:hidden;
color:white;
position:absolute;top:-18px;left:0;z-index:50; /*valeur top permet de décaler en hauteur boite qui slide*/
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 */
	
	
		
	

	
	#featured{ 
	width:312px; 
	padding-right:145px; 
	position:relative; 
	border:2px solid #ccc; 
	height:320px; overflow:hidden;
	background:#fff;
}
#featured ul.ui-tabs-nav{ 
	
	padding:0px; /*ajoute une marge en haut photo*/
	margin:0px; 
	width:0px; height:0px; 
	overflow:auto;
	overflow-x:hidden;
}

#featured .ui-tabs-panel .info{ 
	position:absolute; 
	bottom:3px; left:3px; /*regle le decalage du menu noir translucide qui slide vers le haut*/
	height:40px; /*regle la hauteur de la barre de description des images qui slide vers le haut possiblite de la cacher*/
	background: url('images/transparent-bg.png'); 
}


/* en dessous reglage petit bouton cacher montrer*/
#featured .ui-tabs-panel .info a.hideshow{
	position:absolute; font-size:10px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:5px; outline:none; background:#333;
}


#featured .info h2{ 
	font-size:0.6em; font-family:Georgia, serif; 
	color:#fff; padding:0px; margin:0px; font-weight:normal; /*regle le titre info*/
	overflow:hidden; 
}

#featured .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}
	
	
	/* fin test slide avec js*/
	
	
	
	
	
.auteur {
margin-top: 40px;
float: right;
margin-right: 390px;
	}
	

.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;
}



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