/***************** BODY *****************/
*{
/*---on passe toutes les marges à 0---*/
margin:0;
padding:0;
}
body,html{
height:100%;
/*---permet de changer la couleur de la barre de scroll dans IE (déconseillé)
scrollbar-base-color:#7d8a2e;
---*/
}
body{
background:#fff url(../images/charte/bg-body.gif) top center no-repeat;
font:13px/15px Arial, Helvetica, sans-serif;
color:#999;
}
/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:990px;
margin:0 auto;
}

#container #container2{
width:990px;
min-height:100%;
background:transparent url(../images/charte/bg-container.jpg) no-repeat scroll 0 446px;
}
/***************** HEADER *****************/
#header{
width:990px;
height:446px;
background:url(../images/charte/bg-header.gif) no-repeat;
}

/***************** MENU TOP *****************/
#menuTop{
position:relative;
z-index:10;
width:990px;
height:70px;
list-style:none;
background:url(../images/charte/bg-menutop.jpg) no-repeat;
}

#menuTop li{
position:relative;
float:left;
}

#menuTop a{
text-decoration:none;
font:bold 12px/30px Arial, Helvetica, sans-serif;
color:#000;
text-align:center;
text-transform:uppercase;
display:block;
height:70px;
overflow:hidden;
}

#menuTop a span{visibility:hidden;}

#menuTop li.bt1 {background:url(../images/charte/menutop/btntop_1.gif) no-repeat top left; width:93px;height:70px;}
#menuTop li.bt2{background:url(../images/charte/menutop/btntop_2.gif) no-repeat top left; width:87px;height:70px;}
#menuTop li.bt3{background:url(../images/charte/menutop/btntop_3.gif) no-repeat top left; width:63px;height:70px;}
#menuTop li.bt4{background:url(../images/charte/menutop/btntop_4.gif) no-repeat top left; width:64px;height:70px;}
#menuTop li.bt5{background:url(../images/charte/menutop/btntop_5.gif) no-repeat top left; width:77px;height:70px;}
#menuTop li.bt6{background:url(../images/charte/menutop/btntop_6.gif) no-repeat top left; width:111px;height:70px;}
#menuTop li.bt7{background:url(../images/charte/menutop/btntop_7.gif) no-repeat top left; width:62px;height:70px;}
#menuTop li.bt8{background:url(../images/charte/menutop/btntop_8.gif) no-repeat top left; width:84px;height:70px;}
#menuTop li.bt9{background:url(../images/charte/menutop/btntop_9.gif) no-repeat top left; width:93px;height:70px;}
#menuTop li.bt10{background:url(../images/charte/menutop/btntop_10.gif) no-repeat top left; width:116px;height:70px;}
#menuTop li.bt11{background:url(../images/charte/menutop/btntop_11.gif) no-repeat top left; width:140px;height:70px;}
	
	
#menuTop li.bt1:hover,
#menuTop li.bt2:hover,
#menuTop li.bt3:hover,
#menuTop li.bt4:hover,
#menuTop li.bt5:hover,
#menuTop li.bt6:hover,
#menuTop li.bt7:hover,
#menuTop li.bt8:hover,
#menuTop li.bt9:hover,
#menuTop li.bt10:hover,
#menuTop li.bt11:hover {
	background-position:bottom left;
	}

#container #menuTop a:hover,
#container #menuTop a.trigered{
	color:#666;
}
/***************** SOUS MENU *****************/
#menuTop li ul{
list-style:none;
position:absolute;
width:90px;
top:-6000px;
left:0;
background:#000;
border:solid #fff;
border-width:1px 0 0 0;
z-index:100;
}
#menuTop li li{
float:none;
}
#container #menuTop li li a{
background:none;
width:auto;
position:relative;
height:20px;
font:11px/20px Arial, Helvetica, sans-serif;
text-transform:none;
color:#fff;
text-decoration:none;
border:solid #fff;
border-width:0 0 1px 0;
}
#container #menuTop li li a:hover{
background:#999;
}

/***************** CONTENU *****************/
#contenu{
float:left;
padding:40px 15px 0 40px;
width:615px;
}

/***************** BIOGRAPHY *****************/

#contenu #profil  {
	width:650px;
	height:322px;
	}
	
#contenu #profil h2 {
	margin-left:80px;
	padding-top:50px;
	width:360px;
	}

#contenu #profil p {
	width:350px;
	margin-left:60px;
	}
	
#contenu #profil.ludo {
	background:url(../images/charte/bg-member1.jpg) no-repeat;
	}
#contenu #profil.leny {
	background:url(../images/charte/bg-member2.jpg) no-repeat;
	}
#contenu #profil.math {
	background:url(../images/charte/bg-member3.jpg) no-repeat;
	}
#contenu #profil.nico {
	background:url(../images/charte/bg-member4.jpg) no-repeat;
	}
#contenu #profil.mak {
	background:url(../images/charte/bg-member5.jpg) no-repeat;
	}
	
#contenu #albumheader {
	float:left;
	width:630px;
	}

#contenu #cover {
	float:left;
	width:250px;
	padding-left:20px;
	}

#contenu #order {
	float:left;
	width:630px;
	}
#contenu #order a {
	padding:0;
	margin-left:10px;
	}
	
#contenu #credits {
	float:left;
	width:350px;
	}
#contenu #tracklist {
	float:left;
	width:230px;
	}

/***************** FORM *****************/

#formulaire fieldset {
	border:none;
	margin-left:130px;
	}
	
#formulaire fieldset ul {
	list-style:none;	
	}
#formulaire fieldset ul li{
	line-height:15px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin-top:10px;
	}	
	
#formulaire fieldset textarea {
	font:12px Verdana, Geneva, sans-serif;
	width:350px;
	height:200px;
	border:1px solid #ccc;
	}
	
#formulaire fieldset select {
	font:12px Verdana, Geneva, sans-serif;
	width:350px;
	height:25px;
	padding-top:5px;
	border:1px solid #ccc;
	}	
	
#formulaire fieldset input {
	font:12px Verdana, Geneva, sans-serif;
	width:350px;
	height:20px;
	padding-top:5px;
	border:1px solid #ccc;
	}

#formulaire fieldset input:focus, #formulaire fieldset textarea:focus, #formulaire fieldset select:focus {
	font:12px Verdana, Geneva, sans-serif;
	 background-color:#000;
 	color:#fff;
 }
#formulaire fieldset input:hover, #formulaire fieldset textarea:hover, #formulaire fieldset select:hover {
border: 1px solid #999;
}

#formulaire fieldset input.reset {
	color:#FFFFFF;
	float:left;
	height:20px;
	padding-top:0;
	width:165px;
	background:#000;
	margin-right:10px;
	}
#formulaire fieldset input.reset:hover {
	color:#000;
	background:#666;
	}	
	
#formulaire fieldset input.envoyer {
	color:#FFFFFF;
	float:left;
	height:20px;
	padding-top:0;
	width:165px;
	background:#000;
	margin-left:10px;
	}
#formulaire fieldset input.envoyer:hover {
	color:#000;
	background:#666;
	}	
	
/***************** MENU RIGHT *****************/
#menuRight{
background:transparent url(../images/charte/bg-colright.jpg) no-repeat;
float:left;
height:1079px;
margin-left:25px;
margin-top:40px;
width:280px;
}

#menuRight #album {
	font:14px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	margin-left:50px;
	margin-top:65px;
	margin-left:11px;
	position:absolute;
	text-align:center;
	}
#menuRight #album a{
	font:14px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration:none;
}

#menuRight #album a:hover {
	color:#ccc;
	}

#menuRight #download {
	font:14px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	margin-left:55px;
	margin-top:495px;
	position:absolute;
	}
#menuRight #download a{
	font:14px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration:none;
}

#menuRight #download a:hover{
	color:#ccc;
}

#menuRight #share {
	font:14px Arial, Helvetica, sans-serif;
	margin-left:5px;
	margin-top:625px;
	position:absolute;
	}
	
#menuRight #share img{
	margin-left:10px
	}	

#menuRight #pics {
	margin-left:30px;
	margin-top:765px;
	position:absolute;
	height:285px;
	width:201px;
	}

/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{
clear:both;
}
#clearFooter{
height:380px;/*--- = à la hauteur du footer ---*/
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:990px;
height:325px;
margin:-325px auto 0;
background:#fff url(../images/charte/bg-footer.jpg) no-repeat;
}