/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 03
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */
body {
	color: #eee8aa;
	background: #2C2F22;
	background-color: black;
	background-image: ;
	background-repeat: ;
	background-position: ;
	}
	
a {
	color: black;
	text-decoration: none;
}

a:hover, a:focus {
	color: red;
	text-decoration: underline;
}

strong {
	color: red;
}

/* Page */
#global {
	background: black;
	border-right: ;
	border-left: ;
}

/* Navigation */
#navigation {
	background: black;
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	color: rgb(255, 69, 0);
	text-decoration: underline;
}

/* Contenu principal */
#contenu {
	min-width: 500px;
	min-height: 500px;
}

#contenu a {
	color: black;
}
#contenu a:hover, #contenu a:focus {
	text-decoration: underline;
	
}
#contenu strong {
	color: black;
}

/* Pied de page */
#pied {
	color: #E6A948;
}


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
	
}
#global {
	min-height: 100%; /* -> 1 */
	width: 1200px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}


/* Menu de navigation */
#navigation {
	margin-top: 0px;
	}
#navigation ul {
	margin: 0;
	list-style: none;
	text-align: center;
	}
#navigation li {
	display: inline;
}
#navigation a {
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	margin: auto; 
}

#contenu p, #contenu li {
	line-height: 1.5;
}
#contenu ul {
	margin: 20;
	text-align: center;
}
#contenu li {
	display: inline;
}
#contenu a{
	color: white;
}

.contenu {
	margin: auto; 
}

.contenu p, .contenu li {
	line-height: 1.5;
}
.contenu ul {
	margin: 20;
	text-align: center;
}
.contenu li {
	display: inline;
}
.contenu a{
	color: white;
}




/* Pied de page */
#pied {
	padding: 10px;
	font-size: .85em;
}
#pied p {
	margin: .5em 0;
	text-align: center;
}
#copyright {
	text-align: center;
	font-size: 1em;
}


/* --- NOTES ---

1.	Pour pouvoir utiliser une hauteur (height) ou une hauteur minimale
	(min-height) sur un bloc, il faut que sont parent direct ait lui-même une
	hauteur déterminée (donc toute valeur de height sauf "auto": hauteur en
	pixels, em, autres unités...).
	Si la hauteur du parent est en pourcentage, elle se réfère alors à la
	hauteur du «grand-père», et ainsi de suite.
	Ainsi, pour pouvoir utiliser un "min-height: 100%" sur div#contenu, il nous
	faut:
	- un parent (body) en "height: 100%";
	- le parent de body également en "height: 100%".

2.	Il faut éviter que les marges des enfants de div#global ne se transmettent
	à leur parent. Notamment, le margin-top du premier enfant (ici, div#entete),
	et le margin-bottom du dernier enfant (ici, div#pied).
	On évite ce problème grâce à la propriété CSS overflow, qui bloque la
	fusion des marges. En savoir plus sur la fusion des marges:
	http://web.covertprestige.info/test
		04-blocs-imbriques-et-fusion-des-marges.html

3.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

*/

.coordonnées
{
margin: auto;
width: 355px;
height: 200px;
color: black;
background-image: url("zicos2.jpg");
background-repeat: no-repeat;
border: solid 5px black;
}

.coordonnées p
{
color: black;
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
margin-left: 130px;
} 


/* Menu Acceuil */
a#biographie{
	display:inline-block;
	width: 150px; 
	height: 148px;
	background-image: url('xxxbiographie_150.jpg');
}
a#biographie:hover{
	background-image: url('xxxbouton_batterie_150.jpg');
}
a#methode{
	display:inline-block;
	width: 150px; 
	height: 148px;
	background-image: url('xxxmethode_150.jpg');
}
a#methode:hover{
	background-image: url('xxxbouton_livre_150.jpg');
}
a#audios{
	display:inline-block;
	width: 150px; /* largeur de ton image en pixels */
	height: 148px;
	background-image: url('xxxaudios_150.jpg');
}
a#audios:hover{
	background-image: url('xxxcasque_150.jpg');
}
a#influences{
	display:inline-block;
	width: 150px; /* largeur de ton image en pixels */
	height: 148px;
	background-image: url('xxxinfluences_150.jpg');
}
a#influences:hover{
	background-image: url('xxxtomes_150.jpg');
}
a#contact{
	display:inline-block;
	width: 150px; /* largeur de ton image en pixels */
	height: 148px;
	background-image: url('xxxcontact_150.jpg');
}
a#contact:hover{
	background-image: url('xxxtelephone_150.jpg');
}
a#liens{
	display:inline-block;
	width: 150px; /* largeur de ton image en pixels */
	height: 148px;
	background-image: url('xxxliens_150.jpg');
}
a#liens:hover{
	background-image: url('xxxmetronome_150.jpg');
}







#image{
		width: 800px;
		text-align: center;
		margin: auto;
}

.photo_gauche{
	float: left; 
	margin-right: 20px; 
	width: 150px;
	border: 5px solid white;
	padding: 5px;
}

.photo_droite{
	float: right; 
	margin-left: 20px;
	width: 150px;	
	border: 5px solid white;
	padding: 5px;
}

.underline{text-decoration: underline;}
.underlinebold{text-decoration: underline; font-weight: bold;}
.bold{font-weight: bold;}
.blink{text-decoration: blink; color: red;}
.blinkunderline{text-decoration: blink underline; color: red;}
.releves{font-size: 1.3em;}
.morceau{margin-left: 150px; font-style: italic;}


.mp3{
float: left;
margin: 0px 20px 20px 20px; 
width: 350px; 
height: 200px;
text-align: center;
}



/* La méthode*/
#menu_methode{
float: left; 
height: 350px; 
width: 290px; 
text-align: left; 
font-size: 15px; 
display: block;
}


 /*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu_methode {
width: 200px;
}

div#menu_methode ul {
padding: 0;
width: 200px;
border:1px solid;
margin:0px;
}

/*On positionne les elements du menu */
div#menu_methode ul li {
position:relative;
list-style: none; /*on enleve les icones de liste */
border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}

div#menu_methode ul ul {
position: absolute;
top: 10;
left: 200px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
}  

div#menu_methode li a {
text-decoration: none; /* plus de soulignement pour les liens */
} 

 /*fond jaune pr les sous-menu*/
div#menu_methode li.sousmenu {
background: yellow;
} 


/*couleur de fond pour le menu */
div#menu_methode a {
color: white;
background-color: black;
text-align: left;
font-weight: bold;
}
div#menu_methode a:hover {
color: black;
background-color: red;
text-decoration: none;
font-weight: bold;
}



/* fond different au survol de la souris entre les sous-menu et les "basiques"*/
div#menu_methode li:hover {
background: yellow;
}

div#menu_methode li.sousmenu:hover {
background: yellow;
}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu_methode li a {
text-decoration: none;
padding: 4px 0 4px 8px;
display:block; border-left:
8px solid black; width:184px
}

div#menu_methode ul ul li a {
width: 304px;
}



/* la bordure de chaque hauteur a une couleure de survol*/
div#menu_methode li a:hover {
border-left-color: red;
}
div#menu_methode ul ul li a:hover {
border-left-color: red;
width: 304px;
}
div#menu_methode ul ul ul li a:hover {
border-left-color: #0000FF;
} 
					 
/* fichier pour internet explorer */
body {
behavior: url(csshover.htc);
}

/* On cache tous les sous menu avec la propriété display none */
div#menu_methode ul ul {
position: absolute;
bottom: -60px;
left: 100px;
display:none;
width: 320px;
}

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu_methode ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu_methode ul.niveau2 li.sousmenu:hover ul.niveau3 {
display:block;
}		 
					 


#texte_methode{
float: left;
min-height: 350px;
width: 800px;
text-align: justify; 
font-size: 15px; 
margin-left: 50px;
}

#texte_methode h2{
text-align: left;
padding-left: 50px;
border-bottom: 3px solid white;
text-decoration: none;
color: white;
}

/* Le logo David Eleouet en haut de page qui devient bouton "back" au passage de la souris*/
a#david{
	display:inline-block;
	width: 300px;
	height: 159px;
	background-image: url('davideleouet.jpg');
}
a#david:hover{
	background-image: url('back.jpg');
}