body { 

margin: 0px;
text-align: justify;
letter-spacing: 2px;     
font-family: antoniobold;
line-height: 1.6em; 
background-color:#ecca0a;
margin-left: auto;
margin-right: auto;  } 

#conteneur { 
 
   width:100%;
   height: 100%;
   padding: 0px;   }


nav { 

  width:100%;
  height:100%; 
  padding: 0px;  }


#barre  {  

   position: fixed;
   top: 0px;
   left: 0px;
   width:100%;
   height: 56px;
   opacity: 0.3;
   filter:alpha (opacity=30);  }

#boitemenu {  

   position:fixed;
   top: 0px;
   left: 0px;
   width:100%;
   height:47px;
   z-index:4;
   padding: 2px;
   background-color:#ecca0a;    }




article { 

   position: relative;
   top: 10px;
   left: 0px;
   width:100%;
   margin-top: 20px; }


footer { 

   position: relative;
   width:100%;
   margin-top: 6px;   } 


.imgpicto1  {
   
   float:left; 
   border: solid 1px #000;
   margin: 10px;  }


.imgpicto2  {
   
   float:right; 
   border: solid 1px #000;
   margin: 10px;  }


#baniere {  

  position: relative;
  top: 26px;
  height: 100%;
   z-index: 8;
 }  



.videoliste {
  
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  background-color: #87abc7;
  padding-bottom: 30px;   }



video  { 
   position: relative;
   padding-top: 16px; 
   padding-left: 0px; 
   padding-right: 0px; 
   margin-right: 0px;
   margin-left: 0px; }


iframe {
   
   position: relative;
   margin-right: 0px;
   margin-left: 0px;  }



/*SLIDER HAUT ECRAN*/

.rspvimage {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%;
   padding:0px;
   margin: 0px;  }



.rspvimage  img {

   display: block;
   height: auto;
   float: left;
   width: 100%;  }



#baniere  { z-index: 1; margin-bottom: 48px; position: relative; top: 46px; }




.legendes  {
 
   padding: 8px;
   font-size: 1.1em; }

.topicplaylst  {

  margin-bottom: 48px;  }




.titre  {  color:#87abc7; font-size: 22px; }

.titre1  {    padding: 10px; font-size: 1.3em; text-align: left; }

.titre2  { 

  padding-top: 20px;
  padding-bottom: 10px;
  padding-right: 9px; 
  font-size: 1.6em; 
  color:#ecca0a;
  text-align: right; 
  text-shadow: 3px 3px 4px #000; }

.topicindex  {

   padding-top: 16px;
   padding-left: 16px;
   font-size: 33px;
   color:#000;
   line-height: 1.4em;
   text-align: left;
   text-shadow: 1px 1px 1px #fff;   }



.topic  {

   text-decoration: none;
   padding: 1%;
   color:#000;
   font-size: 18px;
   text-align: justify;  }

@-moz-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@-webkit-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@-o-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@-ms-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 

}



#zone  {
    width: 100%;
    height: auto;
   -moz-animation:monanim 6s 0s;
   -webkit-animation:monanim 6s 0s;
   -o-animation:monanim 6s 0s;
   -ms-animation:monanim 6s 0s;
   animation:monanim 6s 0s; }



/*  MENU  */


@-webkit-keyframes trans {
	
0%   { opacity:0;left: -320px;  }
100% {	opacity:1; left: 10px;   }  }

@keyframes trans {
	
0%   { opacity:0;  left: -320px; }
100% { opacity:1;  left: 10px;    }  }

@-ms-keyframes trans {
	
0%   { opacity:0;  left: -314px; }
100% {	opacity:1; left: 6px;    }   }

@-moz-keyframes trans {	
0%   {  opacity:0;  left: -314px; }
100% {	opacity:1;  left: 6px;    }  }

@-o-keyframes trans {	
0%   {  opacity:0;  left: -314px; }	
100% {	opacity:1;  left: 6px;    }  }

@keyframes trans {	
0%   {  opacity:0;  left: -314px; }	
100% {	opacity:1;  left: 6px;    }  }

#boxmenu {  

   position: fixed;
   top: 50px;
   left: 6px;
   width:90%;
   height:auto;
   z-index:4;
   margin-top: 8px;
   display: none;
   letter-spacing: 3px;
   border: 1px solid #000;
   box-shadow: 1px 3px 12px #000;
   -ms-animation:trans 1s ease;
   -webkit-animation:trans 1s ease;
   -moz-animation:trans 1s ease;
   -o-animation:trans 1s ease;
   animation:trans 1s ease;  }



.boutoncroix  {

   position: absolute;
   top:-1%;   
   left: 99%;
   width:22px;
   height:22px;
   z-index:4;   
   border-radius: 18px;
   margin: 0px;  }

.boutonoutils  { 

   position:relative;
   width: 42px;
   height:42px;
   margin: 0px;
   padding: 2px;
   z-index:3;
   cursor: pointer;
   border-radius: 52px; }


#moteur {  

   position:fixed;
   top: 60px;
   left: 4px;
   width:86%;
   height:auto;
   margin-top: 8px;
   padding-left: 8px;
   z-index:4;
   display: none;
   text-align: left;
   border: 1px solid #666;
   box-shadow: 1px 3px 12px #000;
   background-color: #87abc7;  }

input {

   position:relative;
   top: -6%;
   margin: 2px;
   width: 70%;
   height: 26px;
   font-size: 1.3em;
   border-radius: 4px;  }

.boutonok  {

   position:relative;
   top: 10px;
   left: 1%;
   width: 30px;
   height:30px;
   border-radius: 16px; }

.boutoncroix2  {

   position: absolute;
   top:-3%;   
   left: 99%;
   width:22px;
   height:22px;
   z-index:4;   
   border-radius: 18px;  }




.chercheboxsubmit  {

  position:relative;
  top:2px;
  left: 6px;
  font-size: 1.1em;
  font-family: antoniobold;
  letter-spacing: 2px;
  border-radius: 6px;
  width: 18%;
  padding-top: 4px;
  margin: 4px;
  height:16%;
  vertical-align: top;
  background-color:#000;
  color:#ecca0a;   }


#desc  { 

   position: absolute; 
   top: 16px; 
   left: 204px; 
   font-size: 1.1em; }

 

.lienmoteur         { text-decoration: none; color: #000; }
.lienmoteur:hover   { text-decoration: none; color: #87abc7;  }






.resultatmoteur { 

position: relative; 
top: 4px;
padding-left: 8px;
margin-bottom: 16px;
padding-bottom: 66px;  }



#resultatdates   {

   position: relative;
   top: -126px;
   padding:4px; 
   background-color: #ecca0a;  }



@font-face {
    font-family: 'antoniobold';
    src: url('../fonts/antonio-bold-webfont.eot');
    src: url('../fonts/antonio-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/antonio-bold-webfont.woff') format('woff'),
         url('../fonts/antonio-bold-webfont.ttf') format('truetype'),
         url('../fonts/antonio-bold-webfont.svg#antoniobold') format('svg');
    font-weight: normal;
    font-style: normal;    }


.lien1         { text-decoration: none; color: #000; }
.lien1:hover   { text-decoration: none; color: #87abc7;  }

#sponsor  {

  margin-left:auto;
  margin-right:auto;
  width: 100%;
  position: relative;
  top: 10px;
  border-collapse: collapse;
  background-color:#ecca0a;  }

#sponsor td  {  
  
  
  
  text-align: center; 
  vertical-align: bottom;  }

#sponsor tr  {  
   
  text-align: center; 
  vertical-align: bottom;  }

.calendrier  {

  position: relative;
  top: -188px;
  width: 98%;
  height: 260px;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:2px;
  border: 1px solid #000;
  font-size: 1.2em;
  border-collapse: collapse;
  background-color: #87abc7;  }

.calendrier td  {  
   
  border: 1px solid #000;  
  text-align: center; 
  vertical-align: bottom;  }


.calendrier tr  {  
  
  text-align: center; 
  vertical-align: middle; }

.ca1lendrier td :hover { background-color: #ecca0a; }

td .liencalendrier { text-decoration: none; background-color: #ecca0a; padding-top: 0px; padding-right: 2px; padding-left: 2px; color: #000; } 

td .liencalendrier:hover { 

   background-color: #000;
   color: #fff;  }


td {  

  padding:6px;    
  text-align: center; 
  vertical-align: bottom;  }


tr {  

  font-weight: bold;
  padding:0px;   
  text-align: center; 
  vertical-align: middle; }

td :hover { background-color: #ecca0a; }


caption { 

  caption-side: top; 
  padding:6px; 
  border: 1px solid #000; 
  background-color: #000; 
  color: #ecca0a;  }

 
.textedates::first-letter {
   
   font-size: 3.7em;
   font-weight: normal;
   margin-right: 10px;
   margin-bottom: 4px;
   margin-top: 0px;
   line-height: 1.2; 
   text-shadow: 3px 3px 6px #000;  }

.textedates {
     
   position: relative;
   top: -166px;
   padding-left: 6px;
   margin-bottom: 4px;
   line-height: 1.2;  }

.paragraf::first-letter {
    
   float: left;  
   font-size: 3.7em;
   font-weight: normal;
   margin-right: 10px;
   margin-bottom: 4px;
   margin-top: 0px;
   line-height: 1.2; 
   text-shadow: 3px 3px 6px #000;  }

.paragraf {
      
   padding-left: 6px;
   margin-bottom: 4px;
   line-height: 1.8;  }


.boxdates  { 

   margin-bottom:20px; }

p { padding: 0px; }




.boxcarte  { 

   padding-top:20px;
   margin-bottom:20px;  }

.cartetexte  { 

   margin-bottom:10px;
   padding-left: 4px; 
   padding-right: 4px; }


#colonneimg  {

   top: 10px;
   position: relative;
   margin-left: auto;
   margin-right: auto;  }
  

.imagespix  { 
  
  margin-top: 18px; 
  margin-bottom: 18px; }


.retourhaut { 

   width: 100%;
   background-color:#87abc7; 
   text-align: center;
   padding-bottom: 10px;
   padding-top: 10px; } 


.mentions { 

   width: 100%;
   background-color:#ecca0a;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;  } 



.pied-article  {

   width: 100%; 
   text-align: right; 
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #87abc7;
   font-size: 1.4em;  }


.tableau-pub { 
  
   display: none;
   height: 600px;
   width: 320px;
   height: 600px;
   position:absolute;  }



@media only screen and (color) 
and (min-width : 1024px) {

.tableau-pub { 

  display: block;
  top: 330px;
  left:680px;
  height: 600px;   }


#conteneur {
  width: 1280px;  }


#baniere  {

  width: 1010px;  }
}

@media only screen and (color) 
and (min-width : 640px) {

.tableau-pub { 

  width:380px;
  height: auto;  }

#conteneur {
  width: 640px;  }
}