body { font-family: jura-demibold; }

.haut {  
      text-align:  center;
	position:absolute; 
      top: 0px;
      left: 0px;
      width:100%;
      height: 200px;
      margin-top: 4px;
	padding-bottom: 12px; }

#logo { 
      
      padding:20px;
      border:none; 
      width: 980%;
	height: 920%; 
      margin-left: auto;
      margin-right: auto;    }


.rspvimage {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 99%; }

.rspvimage  li {
   
  -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
   left: 4;
   top: 0;  }

.rspvimage  li:first-child {
   
   position: relative;
   display: block;
   float: left;  }


/*Titre cellule BLOG MACHINE dans tableau blog machine*/

.cellule-blog { 

  font-size : 20px; 
  height: 16px; 
  text-shadow: 3px 3px 4px #ffffff;
  background: -moz-linear-gradient(top, #ffffff, #666666);
  background: -ms-linear-gradient(top, #ffffff, #666666);
  background: -o-linear-gradient(top, #ffffff, #666666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));
  padding-bottom: 4px;   }
  background-color: #A0A0A4;
  vertical-align: top;
  text-align: left;
  color: #000000;
  letter-spacing:3px;  }


/*Titre cellule des Sujet rubriques SERVICES, CULTURE...ex: VRML 2.0*/

.titre-cellule  { 

  background-color: #A0A0A4;
  vertical-align: top;
  text-align: left;
  height: 10px;
  font-size: 19px;
  padding-left: 0px;		 
  padding-bottom: 4px;	        
  background: -moz-linear-gradient(top, #ffffff, #666666);
  background: -ms-linear-gradient(top, #ffffff, #666666);
  background: -o-linear-gradient(top, #ffffff, #666666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));  
  color: #000000;
  font-weight: bold;
  letter-spacing:3px;  }



.image-cellule {

  width: 1000px; 
  font-size : 20px; 
  height: 16px; 
  text-shadow: 3px 3px 4px #ffffff;
  border-radius: 8px 8px;
  -moz-border-radius: 8px 8px;
  -webkit-border-radius: 8px 8px;
  background: -moz-linear-gradient(top, #ffffff, #666666);
  background: -ms-linear-gradient(top, #ffffff, #666666);
  background: -o-linear-gradient(top, #ffffff, #666666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));
  padding-bottom: 4px;   }


.canal-cell  { 
  
  background-color: #A0A0A4;
  width: 100%;
  vertical-align: top;
  padding: 8px; 
  font-size: 24px;  
  height: 26px;
  font-weight: bold;
  font-style: italic;  
  color: #000000;
  letter-spacing:4px; }


/*Cellule Titre dans Page CANAL UP*/

.canalcolor { 

  border-top: solid 1px ; 
  border-bottom: solid 1px ;
  border-color: #000000; 
  height: 16px;             
  font-size : 16px; 
  font-weight: bold;
  background-color: #C0C0C0;
  letter-spacing : 4px; 
  text-align:left;  
  color: #000;   }



.lettrage12  { font-size: 12px; }


.titre2 { 

font-size: 19px;
padding: 11px;
text-align: justify;  }


.titre3 { font-size: 15px; }

/* Titre Année Blog-Machine*/


.titre6 { 

font-size: 15px;
font-weight: bold; }


.titre7 { 

font-size: 2.6em; 
line-height: 1.1em;
text-align: left;
padding: 8px;}

.titre8 { 

font-size: 3.3em;
padding: 8px;  }



h4 { 

  font-size : 20px; 
  background-color:#C0C0C0;
  height: 25px;
  padding-left: 9px;
  vertical-align: bottom;
  font-weight: bold;
  letter-spacing:3px;
  background: -moz-linear-gradient(top, #ffffff, #666666);
  background: -ms-linear-gradient(top, #ffffff, #666666);
  background: -o-linear-gradient(top, #ffffff, #666666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));   }


#dossier { 
 
  position: absolute;
  top: 154px;
  left: 90px; 
  height: 26px; 
  background-color: #fff;  
  font-family: jura-demibold;  
  font-size: 14px;   }


#moteur { 
  
  position: absolute;
  top: 190px;
  left: 90px; 
  height: 26px; 
  background-color: #fff;  
  font-family: jura-demibold;
  font-size: 17px; }

#menu-genre {
 
  font-family: jura-demibold; 
  position: absolute;
  top: 292px;
  left: 202px;   
  font-size: 24px;
  text-shadow: 4px 4px 9px #666;  }


.maindoss { 
      
  font-family: jura-demibold;  
  font-size: 19px;     
  border: 1px solid black;  
  width: 260px;
  height: 30px;
  background-color: #fff;
  box-shadow: 3px 3px 5px #666;  }

.maindoss1 { 
      
  font-family: jura-demibold;  
  font-size: 19px;     
  border: 1px solid black;  
  width: 260px;
  height: 30px;
  background-color: #fff;
  box-shadow: 3px 3px 5px #666;  }


.moteurdoss {
 
  position: absolute;
  top: -20px;
  left: 40px;
  font-family: jura-demibold;
  font-size: 19px;    
  border: 1px solid black;  
  width: 280px;
  height: 30px; 
  background-color: #fff; 
  box-shadow: 3px 3px 5px #666;  }

#mot { 
  
  position: absolute;
  top: 20px;
  left: 40px;
  padding: 4px; 
  font-family: jura-demibold;  
  font-size: 12px;    
  border: 1px solid black;
  background-color: #fff;   
  width: 140px;
  height: 46px;
  box-shadow: 3px 3px 5px #666;  }


.bouton { 
      
  font-family: jura-demibold; 
  position: absolute;
  top: 110px;
  left: 180px; 
  font-size: 18px;     
  border: 1px solid black;  
  width: 140px;
  height: 28px;  }



.bouton1 { 
  
  position: absolute;
  top: 50px;
  left: 200px;
  font-family: jura-demibold;  
  font-size: 18px;     
  border: 1px solid black;  
  width: 140px;
  height: 28px;  }


.picto  {

text-align:  center;
margin: 4px;
padding: 4px;    }



a.liens-clip { 

color: #333333; 
text-decoration:none;
font-size:18px;
letter-spacing:2px; }


a:hover.liens-clip {

 color: #000; }

p  {

text-align: justify;
font-size: 19px;  }
 
blockquote  {

text-align: justify;
font-size: 19px;  }



/*tableau contenant icones sur page-index*/

.main-icon { 
      
      text-align:  center;
	position:absolute;
	top:510px;
      left: 0px;
      width: 100%;
      padding: 0px;   }


/*tableau contenant contenu sur page blog*/

.main-blog { 
      
	position:absolute;
	top:22%;
      left: 0px;
       }

.main-mp3 { 
      
	position: absolute;
	top:194px;
      left: 0px;
      text-align:  left;
      padding: 4px;
	margin-left: auto;
      margin-right: auto;   }

.main-photo { 
      
	position: absolute;
	top:194px;
      left: 0px;
      text-align:  left;
      padding: 4px;
	margin-left: auto;
      margin-right: auto;   }

.main-img { 
      
	position: absolute;
	top:194px;
      left: 0px;
      text-align:  left;
      padding: 4px;
	margin-left: auto;
      margin-right: auto;   }



.faceimg  {

      border: 1px solid #000;
      text-align:  center;
      box-shadow: 9px 9px 10px;
      margin: 12px;
      padding: 12px;
      min-width:50%; 
      max-width:50%;
      width: 40px;
      height: 40px;    }

a  {
   text-decoration: none;
   color: #ff6600;
   font-size : 18px; 
   line-height: 26px;  }

a.hover  {

   text-decoration: none;
   color: #000;
   font-size : 18px; 
   line-height: 26px;   }

a:active  {

   text-decoration: none;
   color: #0ff; }


#pied-page { 

  padding: 
  margin: 10px;
  border: solid 1px black;  }

#legende {  
  
  position: relative;
  top: 2px;
  left: 10px;
  text-shadow: 2px 2px 4px #666;
  letter-spacing : 3px;
  font-family: jura-demibold;
  font-size : 0.7em;
  color: #000;
  letter-spacing : 1px;
  font-weight: bold;
  padding-right: 10px;    
  text-align: right;  }

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

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

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

}



@media only screen and (color) 

and (min-width : 360px) {

/*tableau contenant icones sur page-index*/

.main-icon { 
      
      text-align:  center;
	position:absolute;
	top:580px;
      left: 0px;
      width: 100%;
      padding: 0px;  }


/*tableau contenant contenu sur page blog*/

.main-blog { 
      
	position:absolute;
	top:200px;
      left: 0px;
      text-align:  left;
      padding: 0px;
	margin-left: a1uto;
      margin-right: a1uto;   }

/*tableau contenant la page music mp3*/

.main-mp3 { 
      
	position:absolute;
	top:194px;
      left: 0px;
      text-align:  left;
      padding: 0px;
	margin-left: auto;
      margin-right: auto;   }

.main-photo { 
      
	position: absolute;
	top:194px;
      left: 0px;
      text-align:  left;
      padding: 0px;
	margin-left: auto;
      margin-right: auto;   }


.main-img { 
      
	position: absolute;
	top:194px;
      left: 0px;
      text-align:  left;
      padding: 0px;
	margin-left: auto;
      margin-right: auto;   }



.faceimg  {

      border: 1px solid #000;
      text-align:  center;
      box-shadow: 9px 9px 10px;
      margin: 12px;
      padding: 12px;
      min-width:50%; 
      max-width:50%;
      width: 40px;
      height: 40px;
      box-shadow: 6px 6px 6px;    }

  
#filet { 
  
  width: 98%;
  height: 60px;  }

#logo { 
      
      padding:10px;
      border:none; 
      width: 94%;
      height: 60px   }

#dossier { 
 
  position: absolute;
  top: 394px;
  left: 50px; 
  width: 90%;  }

#moteur { 

  position: absolute;
  top: 250px;
  left: 10px;  }

#menu-genre {
   
  top: 382px;
  left: 42px;  }

.maindoss { 
      
      width: 280px;
      height: 30px;  }

.maindoss1 { 
      
      width: 300px;
      height: 30px;  }


.moteurdoss { 
      
      width: 300px;
      height: 30px;   }



.bouton { 
      
  font-family: jura-demibold; 
  position: absolute;
  top: 112px;
  left: 164px; 
  font-size: 18px;     
  border: 1px solid black;  
  width: 140px;
  height: 28px;  }



.bouton1 { 
  
  position: absolute;
  top: 60px;
  left: 210px;
  font-family: jura-demibold;  
  font-size: 18px;     
  border: 1px solid black;  
  width: 140px;
  height: 28px;  }


#pied-page {  

  height: 20px;
  width: 310px; 
  letter-spacing : 1px;  }

#legende {  

  font-size : 0.7em;
  letter-spacing : 1px;  }




.titre2 { 

font-size: 19px;
padding: 11px;
text-align: justify;  }



a  {
   text-decoration: none;
   color: #ff6600;
   font-size : 18px;  }

a.hover  {

   text-decoration: none;
   color: #000;
   font-size : 18px;  }

a:active  {

   text-decoration: none;
   color: #000; }
}

/*Titre cellule des Sujet rubriques SERVICES, CULTURE...ex: VRML 2.0*/

.titre-cellule  { 

  background-color: #A0A0A4;
  vertical-align: top;
  text-align: left;
  height: 10px;
  font-size: 19px;
  padding-left: 0px;		 
  padding-bottom: 4px;	        
  background: -moz-linear-gradient(top, #ffffff, #666666);
  background: -ms-linear-gradient(top, #ffffff, #666666);
  background: -o-linear-gradient(top, #ffffff, #666666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));  
  color: #000000;
  font-weight: bold;
  letter-spacing:3px;  }




@media only screen and (color) 

and (min-width : 1024px) {


/*tableau contenant icones sur page-index*/

.main-icon { 
      
      text-align:  center;
	position:absolute;
	top:550px;
      left: 0px;
      width: 100%;
      padding: 0px;   }


/*tableau contenant contenu sur page blog*/

.main-blog { 
      
	position:absolute;
	top:354px;
      left: 0px;
      width: 100%;
      text-align:  left;
      padding: 0px;   }

/*tableau contenant la page music mp3*/

.main-mp3 { 
      
	position: absolute;
	top:354px;
      left: 0px;
      text-align:  left;
      padding: 4px;
	margin-left: auto;
      margin-right: auto;   }

.main-photo { 
      
	position: absolute;
	top:354px;
      left: 0px;
      text-align:  left;
      padding: 4px;
	margin-left: auto;
      margin-right: auto;   }


.main-img { 
      
	position: absolute;
	top:354px;
      left: 0px;
      text-align:  left;
      padding: 4px;
	margin-left: auto;
      margin-right: auto;   }



#filet { 
      
      width: 90%;
      height: 110px;
       }
  


#logo { 
      
      width: 881px;
      height: 92px; }




#dossier { 
      position: absolute;
      top: 384px;
      left: 180px; 
      height: 26px;  
         }


#moteur { 
      position: absolute;
      top: 404px;
      left: 680px; 
       }

#menu-genre {

      position: absolute;
      top: 292px;
      left: 262px;     }

.maindoss { 
      
      width: 280px;
      height: 30px;  }

.maindoss1 { 
       
      width: 350px;
      height: 30px;  }


.moteurdoss { 
       
      width: 300px;
      height: 30px;  }

#pied-page { 

width: 80%; 
font-size : 1.2em; 
letter-spacing : 2px;  }


.titre2 { 

font-size: 19px;
padding: 11px;
text-align: justify;  }


a  {
   text-decoration: none;
   color: #ff6600;
   font-size : 18px;  }

a.hover  {

   text-decoration: none;
   color: #000;
   font-size : 18px;  }

a:active  {

   text-decoration: none;
   color: #000; }




/*Titre cellule des Sujet rubriques SERVICES, CULTURE...ex: VRML 2.0*/

.titre-cellule  { 

  background-color: #A0A0A4;
  vertical-align: top;
  text-align: left;
  height: 10px;
  font-size: 19px;
  padding-left: 0px;		 
  padding-bottom: 4px;	        
  background: -moz-linear-gradient(top, #ffffff, #666666);
  background: -ms-linear-gradient(top, #ffffff, #666666);
  background: -o-linear-gradient(top, #ffffff, #666666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));  
  color: #000000;
  font-weight: bold;
  letter-spacing:3px;  }




#legende {  

  font-size : 0.7em;
  letter-spacing : 1px;  }
}