body
{
	margin: 0;
	padding: 0;
	/* image de fond : affiche d'abord l'image des feuilles centree puis le degrade */
	background: url("images/feuilles.png") fixed no-repeat center top, url("images/fond_degrade.png") fixed repeat-x; 
	background-color: rgb(240,240,240);
	font-family: 'AdobeGaramondProRegular', garamond, 'times new roman';
	font-size: 1em;	/* Ne pas changer */
	/*font-style: normal;*/
	color: rgb(64,64,64);
}

p
{
	/* taille des textes standard dans la balise <p> */
	font-size: 1.4em;   /* 1.25em original */
	line-height: 120%; 	/* interligne - 130% original*/
}

.ecriture_page_index
{
	position: relative;
	left: -160px;
	font-family: 'AdobeGaramondProRegular', garamond, 'times new roman';
	font-size: 1em;	/* Ne pas changer */
	/*font-style: normal;*/
	color: rgb(64,64,64);
	line-height: 1em; 	/* interligne */
}

.ecriture_page_apropos
{
	position: relative;
	left: -160px;
	top: -16px;	/* ne pas remonter plus que -16px car sinon ca cache la zone de clic sur l'entete */
    font-family: 'TangerineRegular', garamond, 'times new roman';
	color: rgb(64,64,64);
	font-size: 1.6em;
	line-height: 1em; 	/* interligne */
}

cite
{
	/* balise HTML pour citation de titre à mettre en valeur */
	/* je l'utilise pour mettre en valeur les initiales sur la page index.php */
	display: inline-block;
	/*font-family: 'OpenSansLight', arial, verdana, sans-serif;*/
	font-style: normal;
	font-size: 2.2em;
	font-weight: normal;
	color: rgb(200,135,55);
	padding: 0;
	margin: 59px 0 0 0;	/* marge au-dessus de chaque initiale */
}

h1
{
	/* taille des titres dans la balise <h1> */
	font-family: 'OpenSansLight', arial, verdana, sans-serif;
	text-transform: uppercase;
	font-size: 1.6em;
	font-weight: normal;
	line-height: 150%; 	/* interligne */
	margin: 0;
}

.page
{
	/* h1 sur la page page.php : Titre des chansons */
	font-family: 'OpenSansLight', arial, verdana, sans-serif;
	color: rgb(200,135,55);
	font-size: 1.6em;
}

h2
{
	/* nom des auteurs compositeurs (fonctionne mal) */
	display: inline-block;
	font-family: 'OpenSansLight', arial, verdana, sans-serif;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	color: rgb(200,135,55);
	margin-top: 0px;
	padding-top: 6px;
	border-top: 1px solid rgb(200,135,55);
	/*border: 1px solid rgb(255,0,0);*/
}

h3
{
	/* taille du nom des auteurs/compositeurs dans la balise <h3> */
	/*font-family: 'OpenSansLight', arial, verdana, sans-serif;*/
	display: inline-block;
	font-size: 1.2em;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	padding-top: 6px;
	border-top: 1px solid rgb(200,135,55);
}




/* DEBUT Apparence des liens en general */

a	/* liens par defaut non survoles */
{
	text-decoration: none;
	color: rgb(64,64,64);
	padding-bottom: 0px;
}

a:hover	/* Apparence au survol des liens */
{
	/*text-decoration: none;*/
	background: none;	/* pour que ça marche avec des vieux IE */
	color: rgb(64,64,64);
	border-bottom: 1px solid rgb(200,135,55);
}

/*
a:visited	/* Apparence quand on a deja clique dessus 
{
	text-decoration: none;
	color: rgb(64,64,64);
}


/* FIN Apparence des liens en general */





/* DEBUT Apparence des liens de navigation */
nav
{
	display: inline-block;
	position: relative;
	width: 280px;
	/*height: 31px;*/
	left: 311px;	/* a droite : 554px */
	text-align: center;	/*affiche les boutons au centre */
	margin: 13px 0 8px 0;
	padding: 0;
	/*box-shadow: -1px -1px 2px rgb(32,32,32);	/* ombre */
	/*border-radius: 3px;*/
	/*background-color: rgb(230,230,255);*/
	/*border: 1px solid rgb(255,0,0);*/
}

nav ul
{
	list-style: none;
	padding: 0; 	/* important pour diminuer les marges du menu */
	margin: 0;		/* important pour diminuer les marges du menu */
	/*background-color: rgb(220,200,180);*/
}

nav li
{
	display: inline-block;	/* met les boutons cote a cote */
	margin-left: 9px;
	margin-right: 9px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

nav a
{
	margin: 0;
	padding: 0;
}

nav a:hover
{
	/* au survol du bouton, trace un trait sous le bouton */
	/*border: 1px solid rgb(200,135,55);*/
	border: 0;	/* indispensable pour enlever le souligne */
}

nav a:active
{
	/* a l'appui sur le bouton, trace un rectangle blanc sous le bouton */
	/*border-bottom: 1px solid rgb(255,255,255);*/
}

.btn img
{
	width: 41px;
	height: 31px;
	border: 0;
	margin: 0;
	padding: 0;
	/*border: 1px solid rgb(255,0,0);*/
}

.lien_visible
{
	color: rgb(196,58,43);
}


/* FIN Apparence des liens de navigation */





/* DEBUT des blocs */

#bloc_page
{
	/* bloc a centrer, contient la page blanche et le footer transparent en bas */
	position: relative;	/*indispensable pour positionner le bloc_email en absolute */
	width: 900px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;	/* centre le bloc */
	margin-right: auto;	/* centre le bloc */
	padding: 0;
	/*border: 1px solid rgb(240,0,0);*/
}

#bloc_page_blanche
{
	/* page blanche un peu transparente */
	margin: 0;
	padding: 0;
	background-color: rgb(245,245,245);	/* pour les navigateurs qui ne comprennent pas la ligne suivante avec rgba() pour la transparence */
	background-color: rgba(255,255,255,0.93);
	box-shadow: 0px 0px 6px rgb(128,128,128);
	/*border: 1px solid rgb(255,0,0);*/
	/*text-align: center;*/
}

header
{
	/* le header affiche son image de fond qui est transparente et contient juste un trait horizontal en bas de celle-ci */
	height: 106px;
	background-image: url("images/header.png");
	margin: 0;
	padding: 0;
	/*box-shadow: 0px 0px 4px rgb(32,32,32);*/
	/*background-color: rgb(230,255,230);*/
	/*border: 1px solid rgb(255,255,255);*/
}

header a
{
	/* cible l'image lien christophe_andreani.png, retire le cadre */
	border: 0;
}

header a:hover	/* Apparence au survol du lien du logo qui est dans le header */
{
	border: 0;
}

header img
{
	/* cible l'image lien christophe-andreani-entete.jpg et la positionne */
	margin: 30px 0 0 89px;
	border: 0;	/* enleve le cadre autour du logo christophe andreani sur IE */
}

article
{
	width: 540px;
	margin-left: 346px;
	padding-top: 100px;
	padding-bottom: 126px;
	text-align: left;
	min-height: 600px;
	/* avant, avec plus de marge en haut : padding-top: 143px;*/
	/*background-color: rgb(230,230,230);*/
	/*border: 1px solid rgb(255,0,0);*/
}

footer
{
	height: 32px;
	margin: 0;
	padding: 0;
	/*background-color: rgb(255,255,230);*/
	/*border: 1px solid rgb(0,0,0);*/
}

footer img
{
	margin: 0;
	padding: 0;
	border: 0;	/* enleve le cadre autour des logos du footer sur IE */
}

.image_centree
{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.image_a_gauche
{
	display: block;
}
	
.img_cadre
{
	border: 1px solid #CCCCCC;
}

.vignette_album
{
	width: 300px;
	height: 300px;
}	

.grand_album
{
	width: 539px;
	height: 539px;
}	
	
.image_bas_de_page
{
	/* on affiche d'abord le <div> du logo tout en bas */
	margin: 0;
	padding: 0;
	text-align: right;
	/*background-color: rgb(200,200,255);*/
}

.image_bas_de_page a:hover
{
	/* empeche le souligne sous l'image au survol */
	border: 0;
}

.note_bas_de_page
{
	/* puis en dessous du div du logo, on affiche le <div> du texte tout en bas */
	/* puis on le remonte pour l'aligner */
	position: relative;
	width: 75%;	/* limite la largeur de ce bloc à 50% de 900px pour eviter de cacher l'image aux clics (superposition) */
	top: -32px;
	margin: 0;
	padding: 0;
	text-align: left;
	/*background-color: rgb(255,200,230);*/
	/*border: 1px solid rgb(0,0,0);*/
}

.note_bas_de_page p
{
	/* regle uniquement les <p> qui sont dans les balises de class :  .note_bas_de_page */
	margin: 0;
	padding:0;
	font-family: 'OpenSansLight', arial, verdana, sans-serif;
	font-size: 0.7em;
	color: rgb(64,64,64);
}

.bloc_email
{
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: right;
	left: 719px;
	top: 119px;
	opacity: 0.9;
	/*background-color: rgb(255,200,230);*/
	/*background-color: rgb(200,200,255);*/
}

.bloc_home
{
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: left;
	left: 96px;
	top: 119px;
	opacity: 0.9;
	border: 0;
	/*background-color: rgb(255,200,230);*/
	/*background-color: rgb(200,200,255);*/
}

.bloc_email a:hover
{
	border: 0;
}

.bloc_email img
{
	width: 41px;
	height: 31px;
	border: 0;
	margin: 0;
	padding: 0;
	/*border: 1px solid rgb(255,0,0);*/
}

.bloc_home a:hover
{
	border: 0;
}

.bloc_home img
{
	width: 41px;
	height: 31px;
	border: 0;
	margin: 0;
	padding: 0;
	/*border: 1px solid rgb(255,0,0);*/
}

.icone_email_seul_pas_souligne a:hover
{
	border: 0;
}

.fb-like
{
	/* Position bouton facebook J'aime */
	position: absolute;
	top: 0px;
	left: 0px;
}

/* FIN des blocs */





/* DEBUT Polices personnalisees

/* Font CSS generated by Font Squirrel (http://www.fontsquirrel.com)  */
@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AdobeGaramondProRegular';
    src: url('fonts/agaramondpro-regular-webfont.eot');
    src: url('fonts/agaramondpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/agaramondpro-regular-webfont.woff') format('woff'),
         url('fonts/agaramondpro-regular-webfont.ttf') format('truetype'),
         url('fonts/agaramondpro-regular-webfont.svg#AdobeGaramondProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TangerineRegular';
    src: url('fonts/Tangerine_Regular-webfont.eot');
    src: url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
         url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
         url('fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* FIN Polices personnalisees */