body
{
font-family: Helvetica, sans-serif;
width: 890px;
margin: auto;/*pour centrer notre page*/
margin-top: 50px;
margin-bottom:30px;
background-color: black;
}

/*IMAGES DE FOND*/

#bloc_images
{
width: 890px;
height: 668px;
margin-bottom: 10px;
position:absolute;
border: 1px solid #666;
}

.image_de_gauche
{
float: left;
width: 236px;
height: 668px;
background-image: url("../images/fond/metamorphosis_01.jpg");
background-repeat: no-repeat;
}

.image_de_droite
{
float: right;
width: 654px;
height: 668px;
background-image: url("../images/fond/metamorphosis_02.jpg");
background-repeat: no-repeat;
margin-left: 0px;
position: relative;
}

.image_de_droite_2
{
float: right;
width: 654px;
height: 668px;
background-image: url("../images/fond/metamorphosis_03.jpg");
background-repeat: no-repeat;
position: relative;/* position absolue par rapport au coin en haut à gauche*/
margin-bottom: 50px;
margin-left: 0px;
}

/*MENU_DEROULANT*/

/*on definit la taille des parties du menu.*/ 
.menu_deroulant
{
	position:absolute;
	width:236px;/*ne pas enlever la largeur sinon ie 7 crée un bug*/

}

/* on défininit la grandeur des 2 blocs*/
.menu_deroulant ul 
{
z-index: 1;
padding: 0; /*celui-ci est très important, ne pas l'enlever, ni le changer*/
text-align:right;
margin-left:80px;
margin-top:220px;
}
.menu_deroulant ul:active
{
text-align:right;
}
			
/*On positionne les elements du menu */ 
.menu_deroulant ul li
{
	
padding-right: 20px;
position:relative; /*le haut du menu déroulant permet de commencer à la meme hauteur que band */
list-style: none; /*on enleve les icones de liste */ 
} 
			   
.menu_deroulant ul ul
{
margin-left:17px;/*permet le décalage à droite*/
margin-top:0px;
width:170px;/*permet la lageur exact pour les prénoms et noms*/
background-color:#333;
text-align:left;
position: absolute; /*si on l'enlève le menu déroulant vient se dérouler en dessous et non à coté*/
top: 0;/* il ne faut pas l'enlever, c'est le point d'origine*/
left: 120px; /*correspond au décalage a droite, on décale de la taille du ul de base*/
display:none;/* On cache tous les sous menu avec la propriété display none */
}
.menu_deroulant ul ul:active
{text-align: left;}

.menu_deroulant li a 
{ 
text-decoration: none;
padding: 4px 4px 4px 4px; 
display:block; 
}

.menu_deroulant ul ul a:hover /* si IE ne le lis pas essayer de remplacer li:hover par a:hover*/
{
background-color:#666;
width:162px;/* permet le changement de couleur sur toute la longueur du nom*/
}

.menu_deroulant ul.niveau1 li.sousmenu:hover ul.niveau2, 
.menu_deroulant ul.niveau2 li.sousmenu:hover  
{ 
display:block; /*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
}
			   
.menu_deroulant a
{
color:#999;
font-size: 115%;
font-weight: normal;
} 
.menu_deroulant a:active
{ 	
border:none;
text-decoration:none;
}
/* corps du texte different au survol de la souris entre les sous-menu et les "basiques"*/ 
.menu_deroulant li a:hover, .menu_deroulant li.sousmenu a:hover
{ 
color: white; 
font-weight: normal;
}
 

/*CORPS*/

.corps
{
width: 654px;
height: 668px;
overflow: auto;
margin-left: 236px;
position:absolute;
color:#CCC;
margin-bottom:30px;
}

.corps h3
{
color: white;
font-weight: bold;
text-align: left;
padding-left:20px;
padding-top:20px;
padding-bottom:10px;
}
.corps h4
{
color: white;
font-weight: bold;
text-align: left;
padding-left:20px;
}
.corps h5
{
padding-bottom:30px;
margin-top:2px;
}
.corps p
{
margin-top:0px;
padding:0px 20px 20px 20px;
color:#CCC;
font-size:110%;
text-align: left;
}
.dessous
{
margin-top:0px;
clear: both;
}
.flash
{
text-align:right;}
.image_band
{
	margin: 0 20px 0 20px;
	border: 1px solid #666;
}
.bloc_jean-pierre
{
width:200px;
margin:20px 15px 0 20px;
}
.bloc_olivier
{
width:200px;
margin:-150px 30px 0 424px;
}
.bloc_gabrielle
{
width:200px;
margin:-80px 0px 0 160px;
}
.bloc_laurent
{
width:200px;
margin:-40px 15px 0px 310px;
}
.image_groupe
{
display: block;
width: 400px;
margin-top: 50px;
margin-left:20px;
border: none;
}
	
.image_shop
{
display: block;
width: 180px;
float: right;
margin-right:20px;
margin-top: 0px;
border:none;
}
.portrait_gauche, .image_gauche
{
display:block;
float:left;
height: 200px;
border: 1px solid #666;
margin: 0px 15px 15px 20px;
}
.image_gauche_noir_blanc
{
width: 250px;
margin: 0px 15px 40px 20px;
border: 1px solid #666;
}
.portrait_droit
{
display:block;
float:right;
height: 200px;
border: 1px solid #666;
margin:0px 20px 15px 0px;

}
.image_discography
{
display: block;
width: 200px;
float:left;
border: 1px solid #666;
margin-left: 20px;  
clear: none;
}

.corps ul
{
width:360px;
margin:auto;
text-align: right;
list-style-type:none;
border:none;
margin-top: 20px;
}

.corps a /*sur tous les liens "a"*/
{
color:#699;
font-family: Helvetica, sans-serif;
font-size: 100%;
text-decoration:none;/*la liste ne sera pas soulignée*/
border:none;
}

a img
{
border: 1px solid #666;
}
.cops a:active
{
text-decoration: none;
border:none;
}
.corps ul a
{
color: #CCC;
}
.corps .nom_du_groupe
{
margin:0px 0px 50px 30px;
font-size:65%;
}
.corps .nom_du_groupe a
{
color:#999;
padding-right:15px;
}
.corps .nom_du_groupe a:hover
{
color: white; 

}

table
{
width:600px;
border-collapse:collapse;
margin-bottom:40px;
}
.tableau_links
{
width:600px;
margin: 10px 20px 20px 20px;
}
.tableau_links td
{
height: 40px;
padding: 5px 0px 5px 0;
}
.tableau_discography
{
position:relative;
left:30px;
width: 840px;
margin-right:20px;
}
.tableau_discography td
{
height: 20px;
padding:2px 10px 2px 5px;
border: 1px solid #999;
}
.tableau_portrait
{
margin: 0px 20px 20px 20px;
border-collapse:collapse;
width:600px;
}
.tableau_portrait td
{
vertical-align:top;
height: 40px;
padding: 5px 10px 5px 0px; 
}
.tableau_portrait td .gris
{
color:#999;
font-size: 103%;
font-weight: bold;
}	
.blanc
{
color: white;
font-weight: bold;
font-size: 100%;
}
.rouge
{
color:#F00;
font-weight: bolder;
font-style:110%;
}
/* debut gallery */ 
.content {
	position : relative;
	width :654px;
	height : 580px;
	margin-left: 236px;
	
	text-align : left;
	background-color :transparent;
	margin-bottom: 30px;
	padding-left: 20px;
}
.content h3
{
	color: white;
	font-weight: bold;
	text-align: left;
	padding-top:30px;
	padding-bottom:10px;
}
.content p
{
	margin-top:0px;
	color:#CCC;
	font-size:110%;
	text-align: left;
	padding-right: 20px;
	padding-bottom: 10px;
}

 .gauche {
	float : left;
	width : 352px;
	height : 550px;
	background-color :transparent;
	background-image : url(images/001.jpg);
}
	 
	  
  .texte_index {
	right : 0;
	float : left;
	width : 74px;
	height : 520px;
	background-color :transparent;
	margin-left :30px;
	border-bottom : 2px solid #666
}  

	  

   


.monCalque{
	position:absolute;
	top:0;
	right :0px;
	width:68px;
	height:1908px;
	visibility:visible;
	background-color :transparent
}
			
.monCadre{
	position:relative;
	top:1px;
	right :0px;
	width:74px;
	height:514px;
	visibility:visible;
	overflow:hidden;
	background-color : transparent;
	border-top : 2px solid #666;
}
	
		   
		   
.boutonMonter{ 
	
			}

.boutonDescendre{  
		}
		
			.boot {
	border : none;
	margin-left : 15px;
	margin-bottom: 5px;
}
			
			


ul, li {
margin : 0;
 padding : 0; 
 list-style : none}

    div#galerie
{
	width: 550px ;
	background: #eed ;
	border: 1px solid #dcb ;
	padding: 15px ;
	margin: 15px 30px ;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}


ul#galerie_mini
{
	margin:  2px 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{

}

ul#galerie_mini li a img
{
	margin: 1px 0 ; 
	border: 1px solid #666;
}

ul#galerie_mini li a:hover img
{
	margin: 1px 0;
	border: 1px solid #333;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
border: 1px solid #666;


}

dl#photo dt
{
	font: ARIAL;
	color: #dcb ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{

}

dt {padding : 0; margin : 0 ; text-indent: -9999px; line-height : 0}


#big_pict {
	display : block;
}


/* FIN DE PAGE GALLERY*/
 

	
/*FOOTER*/

#pied_de_page
{
width: 890px;
color:#999;
font-size: 85%;
margin-top: 668px;
position: absolute;
text-align: center;
padding-top:20px;
}
.signature_orel, .signature_orel a
{
color:#666;	
}

#pied_de_page_gallery
{
	width: 890px;
	color:#999;
	font-size: 85%;
	margin-top: 80px;
	position: absolute;
	text-align: center;
	padding-top:30px;
}
.signature_orel, .signature_orel a
{
color:#666;	
}