body  { 
font-family: jura-demibold;  
position: absolute;
left: 12px; 
top: 12px;
color: #000;      }

#conteneur {
width: 1000px; 
height: 770px;
position:relative;
left: 2px; 
top: 5px;
margin-left:auto;
margin-right:auto;
margin-bottom: 10px;
background-color: #3366cc; 
border: solid 4px #000 ;     
box-shadow: 5px 5px 18px #000;  }

.boitus_groupe {  

  position: absolute;
  top: 230px;
  left: 240px;
  overflow:auto; 
  width:670px;
  height: 500px;  }

.skeud  { box-shadow: 9px 11px 24px #000;
          text-align: center; 
	  border: 2px solid #000;    }

#box   {
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
height: 14px;
font-size: 5.3em;   }

.titre-music { font-size: 26px; font-weight: bold;  }

.titre1 { font-size: 24px; text-align: justify; }

.titre2 { font-size: 24px; padding-left: 1%;padding-right: 1%; text-align: justify; }

.titre3 { font-size: 15px; }

.titre4 { font-size: 22px; text-align: left; }

.titre5 { font-size: 22px; text-align: right; }

.titre6 { font-size: 40px; text-align: left; line-height:50px; letter-spacing: 7px;  }

.titre7 { font-size: 55px; line-height: 65px; text-align: left; letter-spacing: 4px; }

.titre8 { font-size: 24px; line-height: 34px; text-align: justify; padding: 4px; letter-spacing: 3px; }

.titre9 { font-size: 33px; text-align: left; line-height: 34px; letter-spacing: 6px;   }

#lettre  { padding: 4px; font-size: 24px; text-align: justify; letter-spacing: 2px; }

.lettrage12 { padding: 4px; font-size: 24px; text-align: justify; letter-spacing: 2px; }

.titre-design { font-size: 49px; line-height: 59px; text-align: left; letter-spacing: 6px;  }


h1  {  font-size: 30px; line-height: 40px; text-align: left; letter-spacing: 5px;  }

h2  {  font-size: 38px; line-height: 46px; text-align: left; letter-spacing: 5px; padding: 12px;  }


#logo   {
position: absolute;
top: 28px;
left: 110px;   }

#cyberfly   {
margin: 0px;
padding: 5px;
background-color: #fff;
letter-spacing: 72px;
font-size: 1.2em;
color: #000;    }


a {  color: #000000;  text-decoration:none; font-size:20px; }
a:hover { color: #FF9537; font-size:20px; text-decoration:underline; }
a:active { color: #c0c0c0; text-decoration:none; font-size:20px;   }

.genre_box   {
width: 160px;
height: 20px;
padding-bottom: 16px;
padding-top: 4px;
padding-left: 14px;
margin: 18px;
text-align: left;
border-radius: 0.4em;
border: 2px solid #000;
font-family: akashiregular;
background-image: url(../interface/fond.jpg);
font-size: 34px;
background-repeat: repeat; 
box-shadow: 8px 8px 28px #000;
cursor: pointer;
z-index: 5;
color: #000;  }


a.genre_box  {
  
  border: 1px solid #000;
  text-decoration: none;
  color: #000; 
  font-size: 34px; }

.genre_box:hover  {
  
  border: 2px solid #cc0000;
  box-shadow: 8px 8px 28px #ffcc00;
  text-decoration: none;
  font-size: 34px;
  color: #000;  }


/*Tableau principal dans section et article au centre de l'ecran */


.tableau-centre-blog { 

  line-height: 40px;
  position: absolute;
  top: 0px;
  left:0px;
  width: 630px;
  height: 600px;  
  font-size: 24px;
  background-color: #3366cc;
  text-align:left;
  Z-index: 0;  }


.artistes  {
display: none; 
position: absolute;
top: 180px;
left: 726px;
width: 268px;
height: 36px;
color: #777;
font-size: 24px;
font-family: arial, helvetica;
background-color: #fff;
border-radius: 3px;
border: solid 2px #000;  }


#box1   {
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
height: 16px;  
background-color: #000;
border-top: solid 1px #000; }

#box2   {
position: absolute;
top: 106px;
left: 0px;
width: 1000px;
height: 16px;  
background-color: #000;
border-top: solid 1px #000; }

#box3   {
position: absolute;
top: 752px;
left: -2px;
width: 1005px;
height: 24px;  
background-color: #000;
border-top: solid 1px #666;
border-bottom: solid 1px #666; }

#moteur   {

position: absolute;
top: 150px;
left: 620px;  }


#boite-genre  {

  position: absolute;
  top: 240px;
  left: 310px;
  overflow:auto; 
  width: 490px;
  height: 460px;  }

.titre-date  {

  position: absolute; 
  top:630px; 
  left: 20px;
  width: 330px;
  height: 90px;
  font-size: 24px;
  color: #000; 
  font-family: jura-demibold;  }

hr { color: #000; }




.img-eu-mini { position: relative; top: 190px; left:60px;  }
             
.ico-snd { position: absolute; top: 30px; left:30px;  }

.champmoteur   {

  position:relative;
  top: -10px;
  left: 108px;
  font-family: jura-demibold;
  font-size: 20px;
  letter-spacing: 2px;
  border-radius: 6px;
  border: solid #000 1px;
  width: 214px;
  height: 26px;
  color:#333;  }


.chercheboxsubmit  {

  position:relative;
  top: -10px;
  left: 110px;
  font-family: jura-demibold;
  font-size: 18px;
  letter-spacing: 2px;
  border-radius: 6px;
  width: 40px;
  height: 30px;
  border: solid #000 2px;
  vertical-align: top;
  background-color:#fff;
  color:#333;   }



.resultatmoteur  {   
  position: absolute;
  top: 200px;
  left: 260px;
  overflow:auto; 
  width: 466px;
  height: 538px;
  font-family: jura-demibold;
  font-size: 24px;  }


.color-gif  { 
  position: absolute;
  top: 250px;
  left: 240px;
  border-radius: 11px;
  border: solid #000 2px;
  width: 650px;
  height: 420px;  }   
 

#flags {   
  position: absolute;
  top: 140px;
  left: 22px;
  z-index: 1;
  width: 780px;
  height: 70px;  }


.flag-fr  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-uk  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-es  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-de  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-nl  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-it  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-be  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-ir  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-lu  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-dk  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }

.flag-pt  {
border: solid 2px #000;
width: 40px;
height: 30px;
margin-right: 8px;  }


#menu-droite {   
  position: absolute;
  top: 280px;
  left: 924px;
  z-index: 1;
  border: solid 0px #000;
  width: 102px;
  height: 302px;  }

.maison  {
border: solid 0px #000;
width: 48px;
height: 48px;
margin-left: 8px; 
padding: 6px;
margin: 4px;   }

.messagerie  {
border: solid 0px #000;
width: 48px;
height: 48px;
margin-left: 8px; 
padding: 6px;
margin: 4px;   }  

.television  {
border: solid 0px #000;
width: 48px;
height: 48px;
margin-left: 8px;
margin-bottom: 10px; 
padding: 6px;
margin: 4px;   }

.ecran  {
border: solid 0px #000;
width: 48px;
height: 48px;
margin-left: 8px;
margin-bottom: 10px;  
padding: 6px; }

.me3ssagerie  {
border: solid 0px #000;
width: 45px;
height: 45px;
margin-left: 8px;
margin-bottom: 14px;   }



.boxgenre  {

position: absolute;
top: 123px;
left: 1px;  }


#desc  {

position: absolute;
top: 190px;
left: 32px;
font-size: 2.5em;  }


.boxpays  {

position: absolute;
top: 190px;
left: 220px;
width: 600px;
height: 316px;
overflow: hidden;  }


.europe   {
position: absolute;
top: 190px;
left: 260px; }

#genre   {
position: absolute;
top: 232px;
left: 12px;
font-size: 1.2em;
color: #000; }


.mouche   {
position: absolute;
top: 50px;
left: 860px;
width: 76px;
height: 51px;   }


.spirale   {
display: none;
position: absolute;
top: 555px;
left: 928px;
width: 54px;
height: 54px; }

.usine   {
position: absolute;
top: 620px;
left: 919px;
width: 74px;
height: 60px }

.ezvision   {
position: absolute;
top: 696px;
left: 919px;
width: 74px;
height: 49px  } 
 
.genre_box   {
width: 160px;
height: 20px;
padding-bottom: 16px;
padding-top: 4px;
padding-left: 14px;
margin: 18px;
text-align: left;
border-radius: 0.4em;
border: 2px solid #000;
font-family: akashiregular;
background-image: url(../interface/fond.jpg);
font-size: 1.8em;
background-repeat: repeat; 
box-shadow: 8px 8px 28px #000;
cursor: pointer;
z-index: 5;
color: #000;  }


a.genre_box  {
  
  border: 1px solid #000;
  text-decoration: none;
  color: #000; 
  font-size: 1.8em; }

.genre_box:hover  {
  
  border: 2px solid #cc0000;
  box-shadow: 8px 8px 28px #ffcc00;
  text-decoration: none;
  font-size: 1.8em;
  color: #000;  }


.img-dsk  {   width: 420px; 
	      height: 420px; 
	      margin: 20px; 
	      border: solid 2px #000; }

.lienmoteur { border: solid 2px #000; }

#credits   {
  position: absolute;
  top: 754px;
  left: 680px;
  font-size: 18px;
  width: 400px;
  height: 22px;
  color:#fff;
  font-weight: bold; 
  z-index:1;    } 

#boite-audio  {

  position: absolute;
  top: 420px;
  left: 620px;  }  

#pied-page {
  position: absolute;
  top: 748px;
  left: 1px; 
  width: 998px;
  height: 32px; 
  margin-bottom: 10px; 
  background: -moz-linear-gradient(top, #666666 0%, #FFFFFF 33%, #C0C0C0 77%, #666666);
  background: -ms-linear-gradient(top, #666666 0%, #FFFFFF 33%, #C0C0C0 77%, #666666);
  background: -o-linear-gradient(top, #000000 0%, #FFFFFF 33%, #C0C0C0 77%, #000000);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));   }

#zone {
  position: absolute;
  top: 480px;
  left: 30px; 
  width: 300px;
  height: 300px; }


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


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




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

body { width: 640px;  }


#conteneur {
 
width: 1024px; 
height: 770px;
position:relative;
left: 2px; 
top: 5px;  }

}


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

body { width: 640px;  }

#conteneur {
width: 640px; 
height: 640px;
position:relative;
left: 2px; 
top: 2px;  }

#box   {
position: relative;
top: 4px;
left: 4px;
width: 390px;   }

#box1   {
position: relative;
top: 4px;
left: 4px;
width: 390px;   }

#box2   {
position: relative;
top: 4px;
left: 4px;
width: 390px;   } 

#logo   {
position: relative;
width: 360px;
top: 28px;
left: 110px;   }

#cyberfly   {
background-color: #fff;
letter-spacing: 28px;
font-size: 0.4em;
color: #000;    }

}



@media only screen and (color) 
and (max-width : 412px) {

body { width: 412px;  }

#conteneur {
width: 400px; 
height: 750px;
position:relative;
left: -3px; 
top: -2px;  }

#box   {
width: 390px;
position:relative;   }

#box1   {
width: 390px;
position:relative;   }

#box2   {
position:relative;
top: 4px;
left: 4px;
width: 390px;   } 

#logo   {
position: absolute;
top: 28px;
left: 110px;   }

#cyberfly   {
position:relative;
top: 2px;
left: 10px;
font-size: 34px;
color: #333;    }

}