* {
	margin: 0;
	padding: 0;
	border: 0;
}

h1 {display:block; width:100%; height:27px; }
h1 span {display:none;}
h2{
	margin-top:10px;
	font: bold 12px/16px  "Times New Roman", Times, serif;/* ca centre le texte verticalement */
	color:#FF0088;
}

a       { text-decoration:none; color:#333333; font-weight: bold; }
a:hover { color:#FF0088; }
a:active{ color:#FF0088; }

.active {
    color:#FF0088 !important;	
}
 b { color:#FF0088;} 

ul{ list-style-type: none; }

input, textarea{
	border: 1px #333333 dashed;
}
input:focus, textarea:focus{
	border: 1px #FF0088 dashed;
}

body{
	background-color: #333333;
	color: #F00;
	font-family: "Times New Roman", Times, serif;
}

.rose{
	color:#FF0088;
}

/* ----- on centre tout le site ----- */
#centrage{
  position: absolute;
  left: 50%;
  width:739px;
  margin-left: -370px;/*la moitie de la largeur */	
}

/* ----- la barre de navigation du haut ----- */
#nav_haut {display:block;  width:739px; height:28px; background:#FFF; color:#000; }
#nav_haut ul {list-style-type:none; }
#nav_haut li {float:left; width:78px; }
#nav_haut a  {display:block; width:78px; height:28px;  }
#nav_haut a#item1        {background: url(../img/A_fr_01.png) 0px -28px no-repeat}
#nav_haut a#item2        {background: url(../img/A_fr_02.png) 0px -28px no-repeat}
#nav_haut a#item3        {background: url(../img/A_fr_03.png) 0px -28px no-repeat}
#nav_haut a#item4        {background: url(../img/A_fr_04.png) 0px -28px no-repeat}
#nav_haut a#item5        {background: url(../img/A_fr_05.png) 0px -28px no-repeat}
#nav_haut a#item6        {background: url(../img/A_fr_06.png) 0px -28px no-repeat}
#nav_haut a#item1:hover  {background: url(../img/A_fr_01.png) 0px -56px no-repeat}
#nav_haut a#item2:hover  {background: url(../img/A_fr_02.png) 0px -56px no-repeat}
#nav_haut a#item3:hover  {background: url(../img/A_fr_03.png) 0px -56px no-repeat}
#nav_haut a#item4:hover  {background: url(../img/A_fr_04.png) 0px -56px no-repeat}
#nav_haut a#item5:hover  {background: url(../img/A_fr_05.png) 0px -56px no-repeat}
#nav_haut a#item6:hover  {background: url(../img/A_fr_06.png) 0px -56px no-repeat}
#nav_haut a#item1:active, #nav_haut a#item1on {background: url(../img/A_fr_01.png) 0px 0px no-repeat}
#nav_haut a#item2:active, #nav_haut a#item2on {background: url(../img/A_fr_02.png) 0px 0px no-repeat}
#nav_haut a#item3:active, #nav_haut a#item3on {background: url(../img/A_fr_03.png) 0px 0px no-repeat}
#nav_haut a#item4:active, #nav_haut a#item4on {background: url(../img/A_fr_04.png) 0px 0px no-repeat}
#nav_haut a#item5:active, #nav_haut a#item5on {background: url(../img/A_fr_05.png) 0px 0px no-repeat}
#nav_haut a#item6:active, #nav_haut a#item6on {background: url(../img/A_fr_06.png) 0px 0px no-repeat}		
#nav_haut a span{ display:none; /* on vire le texte */}
/* fin menu haut */

/* ----- la banniere du site ----- */
#titre{
	background-color : white; 
	height:92px;
} 

#content{
  	float :left;
	width:100%;
 	background: #FFF url(../img/musique.png) no-repeat left bottom;
}
 

/* ----- la liste des groupes qui est à gauche sur chaque page ----- */
#listegroupe {
	float:left;
	border: solid #333333 1px;
 	color: #000;
	background: #FFF url(../img/B_01.png) no-repeat bottom left;
 	padding-bottom:10px;
 	width:173px;
	overflow:hidden;/* Pour les noms super long peut-on mieux faire... */
 	margin-left:10px; /* BUG IE largeur reellement desiree: 19px */
}/* masquage IE/mac + IE/win \*/
html>body #listegroupe {
	margin-left:19px;
	/* Attention: pas de commentaire avant cette ligne (fin du hack IE/mac) */
	/* Pour les navigateurs modernes: on redefini la largeur desiree initialement */
}

#listegroupe h1 {background: url(../img/B_fr_01.png) no-repeat; }
#listegroupe ul {list-style-type:none; margin:10px; }
#listegroupe a  {text-decoration: none;  	}  

#col_activite, #col_jukebox, #col_galerie, #col_contact, #col_lien{
	float:left;
  	margin-left:9px;
 	padding-bottom: 246px;
}
#col_activite{background:url(../img/D_grafik.png) no-repeat bottom;}	
#col_jukebox {background:url(../img/E_grafik.png) no-repeat bottom;}	
#col_galerie {background:url(../img/F_grafik.png) no-repeat bottom;}	
#col_contact {background:url(../img/G_grafik.png) no-repeat bottom;}	
#col_lien    {background:url(../img/H_grafik.png) no-repeat bottom;}	

#focus, #activite, #jukebox, #galerie, #contact, #courriel, #lien, #espacepro, #bio, #dates{
	width :515px;
	border: solid #333333 1px;
	background-color: #FFF;
	color: #333333;
}
#txt_g{
	padding : 10px;
}
#espacepro, #bio, #dates{
	border: solid #FFF 1px;/* on reste aligne sur le cadre du dessus */
	/*	border: solid red 1px;*/
	margin-bottom:9px; 
}

#focus     h1 {background: url(../img/C_fr_01.png) no-repeat;}
#activite  h1 {background: url(../img/D_fr_01.png) no-repeat;}
#jukebox   h1 {background: url(../img/E_fr_01.png) no-repeat;}
#galerie   h1 {background: url(../img/F_fr_01.png) no-repeat;}
#contact   h1 {background: url(../img/G_fr_01.png) no-repeat;}
#courriel  h1 {background: url(../img/G_fr_02.png) no-repeat;}
#lien      h1 {background: url(../img/H_fr_01.png) no-repeat;}
#espacepro h1 {background: url(../img/I_fr_01.png) no-repeat;}
#bio       h1 {background: url(../img/J_fr_01.png) no-repeat;}
#dates     h1 {background: url(../img/K_fr_01.png) no-repeat;}
#activite h2, p{ margin : 0px 9px 0 9px;/* haut droite bas gauche*/}
#jukebox_g, #jukebox_d{
	float : left;
	width : 46%;
	margin-top:2%;
	overflow:hidden;
} 

#jukebox_g{margin-left:2%; } 
#jukebox_d{margin-right:2%;}

html >body #jukebox_d{
	width : 48%;
}
#activite{
    padding-bottom:30px;
}
.marges{
	margin:9px 9px 18px;
}

#jukebox_g a, #jukebox_d a, #focus_jukebox a {
    padding-right:20px;
	background:  url(../img/mp3.png) no-repeat right bottom; 
 	font:  12px/16px  "Times New Roman", Times, serif;/* ca centre le texte verticalaement */
}
#jukebox_g a:hover, #jukebox_d a:hover, #focus_jukebox a:hover {
	background:  url(../img/mp3.png) no-repeat right top; 
}
#jukebox_g h2, #jukebox_d h2 {
margin:0;
 	font: bold 12px/16px  "Times New Roman", Times, serif;/* ca centre le texte verticalement */
	color:#FF0088;
}
#jukebox_g ul, #jukebox_d ul {
	margin-bottom:30px;
}
/* ----- la galerie ----- */
#galerie p{
		font-weight: bold;
		margin-left:20px
}	
 
#galerie li {float:left;  margin:10px;  }

.vignettes {
	float:left;
 	margin-left:6px;
}
html>body .vignettes{ margin-left:14px;}

.vignettes li{
	margin:5px;
	display:block;
	float:left;
	width:51px;
}

/* --- pour la page contact particularite ---*/
#contact{
	height: 207px;
 	background: url(../img/phone.png) 20px 47px no-repeat;
}
#contact p{
	margin :20px 0px 0px 200px;
}
#courriel{
	margin-top:9px;
}
#courriel p {
	margin : 10px;
}

.btnenvoyer {
	width:79px;
	height:23px;
	margin-left: 222px;
	border: #FFF;
	background : blue url(../img/go_fr.png);
}
.btnenvoyer:hover  {
	border: #FFF;
}

/* ----- les liens ----- */
#lien_cols{
	float:left;
	width:100%;
}
#lien_col1, #lien_col2, #lien_col3{
	float:left;
	width:31%;
	padding:0px 0px 0px 10px;
    font-size:12px;
}
#lien_col1 ul, #lien_col2 ul, #lien_col3 ul  {
	margin-bottom:30px;
}

/* ----- les pages pro ----- */
#col_groupe{
	float:left;
  	margin-left:9px;
}

#groupe{
	padding-bottom: 2em;
	margin-bottom: 9px;
	width: 515px;
	border: solid #333333 1px;
	background-color: #FFF;
	color: #333333;
}

#groupe h1{
	width:510px; padding-left:5px; /*width + padding = 515px*/
	background:#333333;
	color:#FFF;
	font: bold 18px/26px  "Times New Roman", Times, serif;/* ca centre le texte verticalement */
}
#groupe h2{
font-size: 16px;
}
/* ----- la barre de navigation du haut ----- */
#groupe ul {height:24px; border-bottom: solid #333333 1px; list-style-type:none;}
#groupe li {float:left;  }
#groupe a  {display:block; height:22px;  }
#groupe a#navgpr1        {width: 60px; background: url(../img/dates_fr.png) 0px -22px no-repeat}
#groupe a#navgpr2        {width: 40px; background: url(../img/bio.png)      0px -22px no-repeat}
#groupe a#navgpr3        {width:100px; background: url(../img/pro_fr.png)   0px -22px no-repeat}
#groupe a#navgpr1:hover  {background: url(../img/dates_fr.png) 0px -44px no-repeat}
#groupe a#navgpr2:hover  {background: url(../img/bio.png)      0px -44px no-repeat}
#groupe a#navgpr3:hover  {background: url(../img/pro_fr.png)   0px -44px no-repeat}
#groupe a#navgpr1:active, #groupe a#navgpr1on {width: 60px; height:24px; background: url(../img/dates_fr.png) 0px   0px no-repeat}
#groupe a#navgpr2:active, #groupe a#navgpr2on {width: 40px; height:24px; background: url(../img/bio.png)      0px   0px no-repeat}
#groupe a#navgpr3:active, #groupe a#navgpr3on {width:100px; height:24px; background: url(../img/pro_fr.png)   0px   0px no-repeat}
#groupe a span{ display:none; /* on vire le texte */}
/* fin menu haut */

#groupe p{
	padding-bottom: 20px;
}

#groupe p a{
	display : inline;
}
 	
     
#dates h2{
	padding: 10px;
	color : #333333;
}
#espacepro ul, #dates ul{
	list-style-type: disc;
	list-style: inside;
	padding: 10px;
}
#espacepro ul span{
	color: #FF0088;
	font : bold 14px "Times New Roman", Times, serif;
}
#espacepro ul > li > ul{
	list-style-type: square;	
}
#espacepro a{
	text-decoration : underline;
}
#dates li{
	padding: 10px;
	  
}

/* #dates span.dateville{*/
span.dateville{
	font-weight: bold;
	color : #FF0088;
}
/* #dates span.datedate{ */
span.datedate{
	font-weight : bold;
}
span.rose{
	color :#FF0088;
}
 
#dates a{
	text-decoration: underline;
	font-weight: bold;
	color : #FF0088;
}
#dates a:hover{
	color : #000;
}

#focus p, #bio p{
	margin : 10px 10px 20px 10px;
}
 
#activite h2{
	color: #FF0088;
	margin-top: 1em;
	font-size: 12px;
	font-weight: bold;
}

#focus_bas{
	float:left;
	width :517px;
	margin-top:9px;
	margin-bottom:9px;
}
#focus_date{
	float: left;
 	margin-left: 0px;
	/*padding-bottom: 10px;/*2em;*/
	width: 260px;
	border: solid #333333 1px;
	background-color: white;
	color: #333333;
}
#focus_date h1 {background: url(../img/C_fr_02.png) no-repeat;}
#focus_date h2{
	padding: 0px 0px 0px 10px;
	font: bold 14px  "Times New Roman", Times, serif;
}
#focus_date ul{
	list-style-type: disc;
	list-style: inside;
	padding: 0px 0px 0px 10px;
}
#focus_date li{
    margin-bottom: 10px;
	font: normal 12px  "Times New Roman", Times, serif;
}
#focus_date a{ 
	text-decoration:underline; 
	color:#FF0088; 
}
#focus_jukebox{
	float: right;
	width: 241px;
	border: solid #333333 1px;
	background-color: white;
	color: #333333;
	font-size: 12px;
}
#focus_jukebox span{
	font-weight: bold;
}
#focus_jukebox h1 {background: url(../img/C_fr_03.png) no-repeat;}

#focus_jukebox ul{
	padding : 10px	
}
#focus_jukebox li{
	padding-bottom : 5px	
}
#focus_jukebox span{
	color: #FF0088;
}
/* ----- le menu du bas ----- */
#nav_bas{
clear:both;
 	background-color: #FF0088;
	color:white;
	height:33px;
	font-size: 12px;
	font-weight: bold;
}
/* ----- le menu du bas PS ----- */
#nav_bas_g    {background-color: #FF0088; }
#nav_bas_g ul {list-style-type:none; }
#nav_bas_g li {float:left;  margin-top:10px; width:70px; }
#nav_bas_g a {
	display:block; 
	width:70px; 
	text-align:center; 
	background-color: #FF0088; 
	color:white; 
}
#nav_bas_g a:hover {color:#000000;}
#nav_bas_g a:active{color:#FF99CC;}
/* ----- le menu du bas UMP ----- */
#nav_bas_d    {background-color: #FF0088; }
#nav_bas_d ul {list-style-type:none; }
#nav_bas_d li {float:left; margin-top:10px; width:106px; color:#FF99CC;  }
#nav_bas_d a {
	display:block; 
	width:106px; 
	text-align:center; 
	background-color: #FF0088; 
	color:#FF99CC; 
}
#nav_bas_d a:hover {color:#000000;}
#nav_bas_d a:active{color:#FFFFFF;}

.imggauche{
	float:left;
	margin:10px 19px 10px 10px;
	border:0px;
}
.clear{
	clear: both;
	visibility:hidden;
}