/* CSS issu des tutoriels css.alsacreations.com */
/**********  MISE EN PAGE *******/
html, body {
height: 100%;
width: 100%;
}

body {
font-family:  "Trebuchet MS", "Comic sans MS", Verdana, serif;
font-size: small;
color: rgb(75,0,130); /*indigo (106,90,205);/*le texte est écrit en "slateblue"*/
background-color:white;
margin: 0;/* pour éviter les marges (cf http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS)*/
text-align:center;/* pour éviter les marges */
padding: 0;
}


#conteneur{
position:relative;/*absolute;*/
height: 100%;
width:100%;
margin-left: auto; /*pour que tout soit centré*/
margin-right: auto; /* idem*/
text-align: left; /* on rétablit l'alignement normal du texte */
background-color:white;
}

#centre{
position:absolute;
left:27%;
/*margin-left: 27%;/*210px;*/
overflow: auto;
/*border-left: 2px solid rgb(255,168,36);/*couleur "aureoline_yellow" */
padding-left:6px;
padding-bottom:4px;
padding-top:4px;
padding-right:6px;
scrollbar-face-color: rgb(255,168,36);/*couleur "aureoline_yellow"*/
scrollbar-highlight-color: white;/*rgb(253,248,255);*//*couleur "zinc white"*/
scrollbar-arrow-color: white;
/* http://openweb.eu.org/articles/dimensions_boites_css/ => affichage des boîte selon standard ou ie5*/
width: 73%;/*la largeur nécessaire à IE5 pour afficher la largeur voulue*/
height: 96%;/* la largeur nécessaire à IE5 pour afficher la largeur voulue*/
voice-family: "\"}\""; /*  syntaxe particulière qui cachera ce qui suit à IE 5.x Windows et ne le laissera lire qu'aux navigateurs respectant le modèle de boîte standard ;*/
voice-family:inherit;
width: 71%;/*100%-27%=73% - 2px de bordure gauche - 2fois 6px de padding gauche et droite*/
height: 93%;/* 100%-2fois 4 px de padding haut et bas- 4 % du pied*/
}

html>body> #centre{ /*ie ne comprend pas cete syntaxe et ignore ces lignes
/*  nécessaire pour que Opéra, qui comme ie5 ne lit pas les lignes après voice..., mais qui applique le modèle standard, affiche la bonne dimension*/
width: 71%;/*100%-27%=73% - 2px de bordure gauche - 2fois 6px de padding gauche et droite*/
height: 93%;
}

#gauche {
position: absolute;
left:0;
width: 27%;/*210px;*/
height: 96%;/* à cause des 4 % du pied*/
border-right: 2px solid rgb(255,168,36);/*couleur "aureoline_yellow" */
}

#pied{
position: absolute;
bottom:0;
width:100%;
height: 4%;
background-color:rgb(255,168,36);/*couleur "aureoline_yellow"*/
}

.texte_pied {
font-size:xx-small;
text-align:center;
}

/********** BALISES XHTML **********/

img{
border:none;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
/*list-style-type: none;*/
}

p {margin: 0 0 10px 0;}

input, select, textarea{
color: rgb(75,0,130); /*indigo (106,90,205);/*"slateblue"*/
background-color:rgb(253,248,255);/*couleur "zinc white"*/
}

legend{
font-weight: bold;
font-size: 1.2em;
}

fieldset{
border:1px solid rgb(75,0,130); /*indigo  (106,90,205);/* "slateblue"*/
}

table{
padding:10px;
}

/********** ASPECT **********/




/***** GAUCHE *****/

/*** TITRES ***/
#gauche h3 /* Tous les titres h3 de la partie gauche */
{
   font-weight: bold;
   text-align: center;
   /*font-family: Arial, "Arial Black", "Times New Roman", Times, serif;*/
}

/*** MENUS ***/
/* pour menu_public_old.php */
.menugauche{
list-style-type: none;
margin: 0;
padding:5px;
padding-bottom:0;
font-size:0.9em;
}

.menugauche li {
margin-bottom: 5px;
font-weight: bold;
padding-left:5px;
}
.menugauche a , .menu_horizontal a {
text-decoration: none; /* Les liens ne seront plus soulignés */
color: rgb(199,21,133); /*mediumvioletred*/
font-weight: bold;
/*padding-left:5px;*/
padding-right: 5px;
}

.menugauche  a:visited
   {
	/*color: rgb(193,112,214); /*(215,140,181);/*orchid*/
   }

.menugauche a:hover, .sous_menu  a:hover, #menu_horizontal a :hover{
background-color: rgb(199,21,133);/*mediumvioletred*/
	/*color: rgb(255,255,240);/*ivory*/
	color: white;
	padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
	padding-left: 5px; 
	padding-right: 5px;
}

.sous_menu{
list-style-type: none;
margin-left: 20px;
padding:5px;
font-size:0.8em;
}

.sous_menu a{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: rgb(199,21,133); /*mediumvioletred*/
padding-left:5px;
padding-right: 5px;
}

/*pour menu_public.php */
#menu {
position: absolute;
top: 180px;
/*left: 1em;*/
list-style-type: none;
margin: 0;
/*padding:5px;*/
padding-bottom:0;
font-size:0.9em;
width: 100%;/*130px;*/
}

#menu dt {
cursor: pointer;
/*background: white;*/
/*margin: 2px 0;*/
text-align: left;
font-weight: bold;
padding-left: 5px; 
padding-right: 5px;
margin-left:0px;
margin-bottom:2px;
/*color: rgb(199,21,133); /*mediumvioletred*/
}

.non_cliquable, .dt_non_cliquable{
background-color:rgb(255,240,245); /*lavenderblush*/
border-left: 2px solid rgb(255,240,245); /*lavenderblush*/
/*width:130px;*/
}

.dt_non_cliquable{
padding-left: 5px; 

}

ul .non_cliquable{

}

.non_cliquable li {
text-align: left;
font-size: 85%;
/*padding-left: 5px; */
list-style-type: none;
margin:0;
border-bottom:2px solid rgb(255,240,245); /*lavenderblush*/
}

#menu dd {
/***position: absolute;***/
/*z-index: 100;*/
/*top:-1.4em;*/
/*margin-top: 10em;*/
/***left:130px;***/
/***width: 78px;***/
/*background: none;*/
/***color: rgb(199,21,133); /*mediumvioletred*/
/*border-left: 2px solid rgb(199,21,133); /*mediumvioletred*/
/***list-style-type: none;***/
}

.dd_cliquable{
position: absolute;
z-index: 100;
left: 50%;/*100px;/*11em*/
margin-top: -1.5em;/*-1.4em;*/
width: 50%;/*125px;*/
/*padding-left:1px;*/
background: white;
color: rgb(199,21,133); /*mediumvioletred*/
border:1px solid rgb(199,21,133); /*mediumvioletred*/
/*border-left: 2px solid rgb(199,21,133); /*mediumvioletred*/
/*border-right: 2px solid rgb(199,21,133); /*mediumvioletred*/
/*border-bottom: 2px solid rgb(199,21,133); /*mediumvioletred*/
}

.dd_non_cliquable{
position: absolute;
z-index: 100;
left: 130px;/*11em*/
margin-top: 0em;/*-1.4em;*/
width: 75px;
/*padding-left:1px;*/
background: white;
color: rgb(199,21,133); /*mediumvioletred*/
border-left: 2px solid rgb(255,240,245); /*lavenderblush*/
border-right: 2px solid rgb(255,240,245); /*lavenderblush*/
}

.cliquable{
/*padding: 1px;*/
border-left: 2px solid rgb(199,21,133); /*mediumvioletred*/

}
.cliquable li {
list-style-type: none;
text-align: left;
font-size: 85%;
/*padding-left: 5px; */
margin:0;
border-bottom:2px solid white;
}
#menu li a, #menu dt a {
color: rgb(199,21,133); /*mediumvioletred*/
text-decoration: none;
display: block;
font-weight: bold;
padding-left:5px;

}

#menu li a:hover,  #menu dt a:hover{
background-color: rgb(199,21,133);/*mediumvioletred*/
color: white;

}

/***** CENTRE *****/

/*** TITRES ***/
#centre h1 /* Tous les titres h1 du corps */
{
	padding-top:10px;
	padding-bottom:10px;
	
	background-color: rgb(199,21,133);/*mediumvioletred*/
	color: white;
   font-weight: bold;
   text-align: center;
}

#centre h2 /* Tous les titres h2 du corps */
{
	margin: 0px;
	margin-top:10px;
	padding : 0px;
	color: rgb(199,21,133);
   font-weight: bold;
   text-indent: 20px;
  
}

#centre h3 /* Tous les titres h3 du corps */
{

}

#sous_menu_horiz{
width:500px;
margin:auto;
text-align:center;
}

.liens_sousmenu{
font-size:x-small;

}




/*** PARAGRAPHES ***/

#centre p
{
text-indent: 20px;
text-align:justify;
}


#centre p:first-letter/* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
}

/*** LIENS ***/

#centre a {
text-decoration: none; /* Les liens ne seront plus soulignés */
color: rgb(199,21,133); /*mediumvioletred*/
font-weight: bold;
}

#centre a:hover {
background-color: rgb(199,21,133);/*mediumvioletred*/
/*color: rgb(255,255,240);/*ivory*/
color: white;
}

#compo_orchestre a:hover{
background-color: none;
}

/*** IMAGE DE L'ORCHESTRE ***/
#compo_orchestre {    /* bloc image en arrière-plan */
width:550px;
margin:auto;
text-align:center; /* pour corriger le bug de centrage IE  (sauf ie6)*/
}
#batterie {    /* zone cliquable */
position:absolute;
top: 100px;
float: left;
width : 4cm;
height: 3cm;
margin-left: 20px;
margin-top: 30px;
background-color: none;
}




/*** LISTES ***/
#centre ul, #centre li, #centre dl{
margin-left:15px;
}

#centre dt{
font-weight: bold;
}

#centre dd{
text-indent: 20px;
}



/*** MENU HORIZONTAL ***/
.horizontal{
width:448px;
margin:auto;
/*background-color:red;*/
}

.menu_horizontal {
list-style-type: none;
/*width: 540px; /* width:100%;précision pour Opera */
/*margin:auto;*/
}

.menu_horizontal li {
float: left;
}

.menu_horizontal a {
margin: 0 2px;
width: 65px;
height: 35px;
display: block;
text-align: center;
border: 1px solid rgb(199,21,133);/*mediumvioletred*/
text-decoration: none;
font-size:0.7em;
/*color: rgb(199,21,133);/*mediumvioletred*/
/*background: white;*/
}

.a_venir
{
font-weight:bold;
}

.liste_instruments{
margin-left: 20px;
padding:5px;
width:160px;
font-size:0.9em;
}

.fleche_haut{
float:right;
}

#champ_texte{
width:60px;
color: rgb((75,0,130); /*indigo  106,90,205);/*"slateblue"*/
background-color:rgb(253,248,255);/*couleur "zinc white"*/
font-size:0.9em;
/*border:1px ridge rgb(75,0,130); /*indigo  106,90,205);/* "slateblue"*/
}

.bouton{
color:rgb(253,248,255);/*couleur "zinc white"*/
background-color:rgb(75,0,130); /*indigo  (106,90,205);/*"slateblue"*/
font-size:0.9em;
font-weight: bold;
}


#acces_musiciens{
margin-top:5px;
margin-right:5px;
padding-top:2px;
padding-right:2px;
font-size:0.9em;
}

.manifestations{
width:520px;
margin:auto;
text-align: center;
/*margin-top: 20px;
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;*/
border-collapse:collapse;
}

.manifestations td{

border:1px solid rgb(199,21,133);/*mediumvioletred*/;
}

#infos_musiciens{
margin-left:15px;
background-color: rgb(255,255,224);/*yellow_light*/;
}

#infos_musiciens ul{
list-style-image: url("../Images/fleche_droite_rose.jpg");
}

#bureau{
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

#bureau td{
padding-left:10px;
}

.texte_centre{
text-align:center;
}

.symbole{
float:left;
margin-right: 5px;
height:80px;
width:80px;
}

.coordonnees{
list-style-type:none;
/*border-bottom: 2px groove;*/
/*margin-right:110px;*/
}

#groupe{
width:520px;
margin:auto;
text-align:center; /* pour corriger le bug de centrage IE  (sauf ie6)*/
}

.table_coordonnees{
margin:auto;
text-align: left;
/*margin-top: 20px;*/
/*margin-bottom: 20px;*/
/*padding-top: 20px;*/
/*padding-bottom: 20px;*/
border-collapse:collapse;
}

.table_coordonnees td{

border:1px groove rgb(199,21,133);/*mediumvioletred*/;
}

.important{
color: rgb(255,168,36);/*couleur "aureoline_yellow"*/
font-weight: bold;
}

.calendrier{
margin-left:15px;
}

.calendrier li{
list-style-type:disc;
}

/* CSS pour les galeries photo*/
div#galerie
{
width:auto;/*520px ;*/
background: #eed ;
border: 1px solid #dcb ;
padding-top: 10px ;
/*margin: 15px 30px ;*/
text-align: center ;
font: 0.9em Georgia, serif ;
}

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

ul#galerie_mini li
{
float: left ;
}

ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}

dl#photo
{
clear: both ;
margin: 0 auto ;
}

dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

dl#photo dd
{
margin: 0 ;
}

dl#photo img
{
border: 1px solid #dcb ;
}

.banniere{
width:500px;

margin:auto;
}

#banniere_fixe{
width:100%;
margin-left:auto;
margin-right:auto;
background-color:rgb(199,21,133);/*mediumvioletred*/
color:white;
margin-bottom:20px;
text-align:center;
font-weight:bold;
}