body {  

  margin:0px;
  font-family: jura-demibold; 
  background-color:#fff;
  font-size: 24px;
   
}

input , button , textarea {

  border-radius: 6px 6px;
  -moz-border-radius: 6px 6px;
  -webkit-border-radius: 6px 6px;
  border: 2px solid #000;
}



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

input , button , textarea {

  border-radius: 6px 6px;
  -moz-border-radius: 6px 6px;
  -webkit-border-radius: 6px 6px;
  border: 2px solid #000;
}

#tableau {
  
  width: 540px;
  height: 100%;
  color:black; 
  padding: 18px;
  border: solid 2px #000 ;
  margin: 18px;     
  border-radius: 14px 14px;
  -moz-border-radius: 14px 14px;
  -webkit-border-radius: 14px 14px;
  box-shadow: 8px 8px 12px #000;
  -moz-box-shadow: 8px 8px 12px #000;
  -webkit-box-shadow: 8px 8px 12px #000;
  background-color: #fff; 
  background-repeat: repeat;  
}





a { 

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

a:hover { 

  color:red; }

a:visited { 

  color:#333;
  text-decoration:line-through; }

a:active { 

  color: #000;
  text-decoration:underline overline; }


.bouton-ferme  {

   position: absolute;
   top: -11px;   
   left: 326px;
   width:22px;
   height:22px;
   border: 3px solid #fff;
   z-index:10;   
   border-radius: 18px;  }


.canalcolor { 
 
  padding: 3px;
  border-bottom: solid 1px ;
  border-color: #000; 
  height: 16px;             
  font-size : 16px; 
  font-weight: bold;
  background-color: #fff;
  letter-spacing : 3px; 
  text-align:left;  
  color: #000;   }


.telephone  {   position: absolute;
   		top:10px;   
   		left: 20px;  }

#menu  {
  position: absolute;
  top: 104px;
  left: 14px;
  width: 330px;
  height: 420px;
  padding: 12px;
  border: 1px solid #000;
  letter-spacing: 10px;
  box-shadow: 6px 6px 16px;
  z-index: 4;
  background-color: #c0c0c0;
}

#top0 {
 
  background-color: #c0c0c0;
  height: 20px;
  padding: 8px;
}

#top1 {
 
  background-color: #c0c0c0;
  height: 40px;
  padding: 8px;
}

#top2 {
 
  background-color: #c0c0c0;
  height: 40px;
  padding: 8px;
}

#top3 {
 
  background-color: #c0c0c0;
  height: 40px;
  padding: 8px;
}

#top4 {

  background-color: #c0c0c0;
  height: 40px;
  padding: 8px;
}

#top5 {
 
  background-color: #c0c0c0;
  height: 20px;
  padding: 8px;
}

a { 

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

a:hover { 

  color:red; }

a:visited { 

  color:#333;
  text-decoration:line-through; }

a:active { 

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

.canal-cell  {
  width: 100%;
  height: 800px;		
  background: -moz-linear-gradient(top, #000, #fff);
  background: -ms-linear-gradient(top, #000, #fff);
  background: -o-linear-gradient(top, #000, #fff);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#000));  }

.canal-cell0  {
  width: 100%;
  height: 800px;		
  background: -moz-linear-gradient(top, #000, #fff);
  background: -ms-linear-gradient(top, #000, #fff);
  background: -o-linear-gradient(top, #000, #fff);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cc0000), to(#fff));  }



.canal-cell1  {
  width: 100%;
  height: 800px;		
  background: -moz-linear-gradient(top, #000, #fff);
  background: -ms-linear-gradient(top, #000, #fff);
  background: -o-linear-gradient(top, #000, #fff);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1E9E44), to(#fff));  }


#menu  {

position: absolute;
top: 180px;
left: 10px;
width: 320px;
height: 430px;
text-align: left;
}


.diapo  {

position: absolute;
top: 100px;
left: 100px;    }

.pretentieux  {

position: absolute;
top: 280px;
left: 270px;    }

.canalcolor { 

  padding: 3px;
  border-color: #000; 
  height: 28px;             
  font-size : 16px; 
  font-weight: bold;
  background-color: #fff;
  letter-spacing : 3px; 
  text-align:left;  
  color: #000;   }


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

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

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

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

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

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


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




#menu
{ 
position: absolute;
top: 120px;

-ms-animation:menu 2s ease;
-webkit-animation:menu 2s ease;
-moz-animation:menu 2s ease;
-o-animation:menu 2s ease;
animation:menu 2s ease;  }