/* REGLAGES GENERAUX */

html {height: 100%;width: 100%;font-size: 100%;}

body {
min-height: 100%;
margin : 0;
padding: 0;
background-color:white;
background-image:url(../calques/fondSite-1920-1200.jpg);
background-repeat:no-repeat;
background-attachment : scroll;
font-family: Arial, Helvetica, sans-serif;
text-align:left;
line-height: 155%;
font-size: 16px;
 }
 
p { margin : 0; padding : 0;}
 
img { border-width : none; border : none; border-style: none; }	
 
h1 {font-weight: bold;}
 
 .bouton{float: right;}
 .cache { position : absolute; left: 0; top : -5000px;}
 .gras {font-weight: bold;}
 .italic {font-style: italic;}
 .center {text-align: center;}
 .soulign {text-decoration: underline;}
 .noir {color:#000000;}
 .blanc {color:#FFFFFF;}
 .joue {color: rgb(230,23,114);}
 .grenadine {color: rgb(253,0,48);}
 .champagne {color: rgb(0,153,204);}
 .paris {color: rgb(130,130,120);}
 .green {color:green;}
 .page-active { margin-left:-30px; padding-left: 30px; color: #e92579; background: url(../calques/fleche.png) left  no-repeat; }
 
#logo { position : absolute; left: 10px; top : 5px; z-index : 5;} 
#nuage-logo { position : absolute; top : 10px; left: 62px; z-index : 4;} 


#reseaux {position : absolute;left: 585px; top : 12px;}
.reseau { float:left; margin:0 4px; /* 10px a droite et a gauche de l image */ padding:0; height: 60px;}

#like { position: absolute; margin: 0; padding: 0; top:16px; left: 870px; z-index: 3;}	

#menu { position: absolute; top: 130; left: 40; margin : 0; padding : 0; z-index: 10; font-weight:bold; font-size: 20px;
  line-height: 25px; font-family: Arial, Helvetica, sans-serif;}
#menu li {list-style-type: none;margin-bottom:5;}
#menu #carnet a:hover{ margin-left:-30px; padding-left: 30px; color: #e92579;
              background: url(../calques/fleche.png) left  no-repeat;}

a {text-decoration: none;color: #000000;} 

/* FIN REGLAGES GENERAUX */




/* PAGE ACCUEIL */
#portrait { position: absolute; top: 50px; left: 350px; width : 523px; z-index: 3;}

#carnet { position: absolute; top: 340px; left: 510px; width : 280px; height : 327px;
  background: url(../calques/carnet.png) no-repeat; z-index: 4;}
 
#carnet p { margin-top: 40px; margin-left: 30px; height: 120px; width: 200px; color:#000000; font-weight: normal;
            font-size: 100%; text-align:center;}  

#FORM { position : absolute; top: 380px; left: 530px; height: 200px; width: 210px; z-index: 4; color : black;
        display :none; font-family: "Trebuchet MS"; line-height: 120%}

#FORM p { width: 200px; clear: left; margin: 0; padding: 5px 0 8px 0; padding-left: 55px;}

#FORM label { float: left;
    margin-left: -55px; /*width of left column*/
    width: 50px;} /*width of labels. Should be smaller than left column (155px) to create some right margin*/

#FORM input{ width: 160px;}/*width of text boxes. IE6 does not understand this attribute*/

#boheme {position: absolute; top : 400px; left :1310px; width : 233px; height : 330px; z-index: 0;} 

#alaffiche {position: absolute; top : 430px; left :80px; width : 233px; height : 330px; z-index: 0; text-align: center; font-weight: bold; text-decoration: underline; }  

#ecran {position: absolute; top : 400px; left :860px; width : 300px; height : 194px; z-index: 0;}  

/* FIN PAGE ACCUEIL */



/* PAGE BIO */
#nuage { position: absolute; top: 200px; left: 350px; width : 466px; height : 458px;
  background: url(../calques/nuage.png) no-repeat; z-index: 1;}
.nuage-txt { position: absolute; top: 250px; left: 400px; height: 300px; width: 320px; z-index: 4; color:#000000; 
             font-weight: normal; font-size: 16px; line-height:23px; text-align:center;}

#bio2 {display : none;}	
#bio3 {display : none;}	

#suite { position: absolute; top: 600px; left: 520px; z-index: 4; color:#81c200; font-weight:normal; font-size: 160%;
         text-align:left;}

#precedent { position: absolute; top: 600px; left: 440px; z-index: 4; color:#81c200; font-weight:normal;
             font-size: 160%; display : none; text-align:left;}

#photo-bio { position: absolute; bottom: 0; left: 640px; z-index: 2;}
/* FIN PAGE BIO */



/* PAGE GALERIE */
#cadre { position: absolute; top: 65px; margin-left:340px; width : 615px; height : 416px;
         background: url(../calques/cadre2.png) no-repeat; z-index: 3;}
#photos-galerie { position: absolute; margin-top: 69px; margin-left: 51px; z-index: 3;}

.galleria{list-style:none;width:400px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:20px 10px 10px 0;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left: 180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */
/* FIN PAGE GALERIE */         



/* PAGE DISQUES */  
#single { position: absolute; top: 130px; left: 490px; z-index: 2; }
#album-joue { position: absolute; top: 450px; left: 490px; z-index: 2; text-align: center; }
#album-courbet { position: absolute; top: 450px; left: 90px; z-index: 2; }

#disque { position: absolute; top: 350px; left: 800px; z-index: 2;}
#disque-fixe { position: absolute; top: 350px; left: 800px; z-index: 1;}


#titre-chanson2 {position : absolute;left: 80px; top : 430px; font-family: "Trebuchet MS";}
#lecteur2 {position : absolute;left: 40px;top : 440px;}
#lien-texte2 {position : absolute;left: 245px;top : 430px;font-family: "Trebuchet MS";text-decoration: underline;color : gray;}
#texte-chanson2 {position : absolute;top: 300px;left: 360px;z-index: 15;display :none;}

#titre-chanson3 {position : absolute;left: 80px; top : 500px; font-family: "Trebuchet MS";}
#lecteur3 {position : absolute;left: 40px;top : 510px;}
#lien-texte3 {position : absolute;left: 245px;top : 500px;font-family: "Trebuchet MS";text-decoration: underline;color : gray;}
#texte-chanson3 {position : absolute;top: 300px;left: 360px;z-index: 15;display :none;}

#titre-chanson4 {position : absolute;left: 80px; top : 570px; font-family: "Trebuchet MS";}
#lecteur4 {position : absolute;left: 40px;top : 580px;}
#lien-texte4 {position : absolute;left: 245px;top : 570px;font-family: "Trebuchet MS";text-decoration: underline;color : gray;}
#texte-chanson4 {position : absolute;top: 300px;left: 360px;z-index: 15;display :none;}

#titre-chanson1 {position: absolute;margin: 0; padding: 0;left: 80px; top : 640px; font-family: "Trebuchet MS";}
#lecteur1 {position: absolute;margin: 0; padding: 0;left: 40px;top : 650px;} 
#lien-texte1 {position: absolute;margin: 0; padding: 0;left: 245px;top : 640px;font-family: "Trebuchet MS";text-decoration: underline;color : gray;}
#texte-chanson1 {position: absolute;margin: 0; padding: 0;top: 300px;left: 360px;z-index: 15;display :none;}

#streamings {position : absolute;left: 488px; top : 372px;}
.streaming { float:left; margin:0 4px; /* 10px a droite et a gauche de l image */ padding:0; height: 22px;}
/* FIN PAGE DISQUES */ 



/* PAGE VIDEOS */
#bouton1 {position : absolute; top : 540px; left: 390px; z-index: 12;}
#bouton2 {position : absolute; top : 540px; left: 470px; z-index: 12;}
#bouton3 {position : absolute; top : 540px; left: 550px; z-index: 12;}
#bouton4 {position : absolute; top : 540px; left: 630px; z-index: 12;}
#bouton5 {position : absolute; top : 540px; left: 710px; z-index: 12;}
#bouton6 {position : absolute; top : 540px; left: 790px; z-index: 12;}

#noir { position: absolute; top: 230px; left: 340px; z-index: 1;}

#video1 { position: absolute; top: 234px; left: 360px; z-index: 9;}
#video2 {position: absolute; top: 234px; left: 360px; z-index: 8;}
#video3 { position: absolute; top: 234px; left: 360px; z-index: 7;}
#video4 { position: absolute; top: 234px; left: 360px; z-index: 6;}
#video5 { position: absolute; top: 234px; left: 360px; z-index: 5;}
#video6 { position: absolute; top: 234px; left: 360px; z-index: 4;}

#tv-haut { position: absolute; top: 52px; left: 285px; z-index: 10;}
#tv-bas { position: absolute; top: 508px; left: 285px; z-index: 10;}
#tv-droit { position: absolute; top: 52px; left: 847px; z-index: 11;}
#tv-gauche { position: absolute;  top: 52px; left: 285px; z-index: 11;}
/* FIN PAGE VIDEOS */



/* PAGE NEWS */
#news {
	position: absolute;
    top: 100px;
    left: 270px;
	width: 700px;
	height: 550px;
	overflow : scroll;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
	background-color : rgba(255,255,255,0.8);
    z-index: 10;
	
	scrollbar-base-color:yellow; /*changes the base color */
    scrollbar-arrow-color:red; /*changes the color of the arrows */
    scrollbar-track-color:yellow; /*changes the color of the track */
    scrollbar-darkshadow-color:black; /*changes the border colors */
    scrollbar-face-color:yellow; /*changes the color of the face */
    scrollbar-highlight-color:green; /*changes the color of highlights */
    scrollbar-shadow-color:black; /*changes the color of shadows */
}
/* FIN PAGE NEWS */



/* PAGE PRESSE */
#references { position: absolute; top: 670px; left: 470px; z-index: 2;}
	
#journal { position: absolute; top: 150px; left: 270px; z-index: 3; z-index: 2;}

#radios {position: absolute; top: 400px; left:80px; width : 350px; z-index: 3;}
#radios li {list-style-type: none; font-weight: bold; margin-left: 0px; font-size: 14px; line-height:16px; margin-bottom:0;}
#radios ul {list-style-type: none; padding: 0; margin: 0;}
#radios a:hover { color:red; text-decoration:none; }

.flotte { float:left; padding-right:10px}

.lang1-txt { position: absolute;top: 175px;left: 315px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang2-txt { position: absolute;top: 235px;left: 330px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang3-txt { position: absolute;top: 295px;left: 345px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang4-txt { position: absolute;top: 355px;left: 360px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang5-txt { position: absolute;top: 435px;left: 375px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang6-txt { position: absolute;top: 470px;left: 460px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang7-txt { position: absolute;top: 530px;left: 470px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
.lang8-txt { position: absolute;top: 570px;left: 480px;z-index: 4;font-weight: normal;font-size: 100%;text-align:left;}
/* FIN PAGE PRESSE */



/* PAGE CONTACT */
#postit { position: absolute; top: 270px; left:520px; width : 261px; height : 221px; 
          background: url(../calques/postit.png) no-repeat; z-index: 3;}
#postit p{ margin-top : 27px; margin-left: -7px; color:#000000; font-weight:normal; font-size: 0.9em;
           line-height: normal; text-align:center;}
#postit a{text-decoration:none;color: #000000;}
#postit a:hover {color:rgb(230,23,114);}
/* FIN PAGE CONTACT */



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