/* Quelle est la différence entre "class" et "ID" ? 	

Les classes sont destinées à être utilisées plusieurs fois dans le document HTML. 
Une seule classe peut donc être appliquée à plusieurs blocs dans la même page.
Pour définir une classe CSS, on ajoute un point devant son nom.
Dans le fichier CSS : .nom_du_style{...}
Dans le fichier HTML : <balise class="nom_du_style"> 

Les ID ne doivent être utilisés qu'une seule fois dans chaque page HTML. 
Un ID s'applique donc à un objet unique, il ne doit pas y avoir deux mêmes ID dans une page.
Pour définir une ID, on ajoute un dièse devant son nom.
Dans le fichier CSS : #nom_du_style{...}	
Dans le fichier HTML : <balise id="nom_du_style"> 

A titre d'exemple : 
- on utilisera une classe pour définir un style de paragraphe. 
- on utilisera une ID pour définir la position d'un bloc particulier dans la page.

*/		   

/* Utilisation de <span> 			   

<span>...</span>.
On dit que ce style est inline, c'est-à-dire en ligne, parce qu'il s'applique
à un morceau de texte lui-même déjà contenu dans un <div>...</div>.
Utilisez <span>...</span> dès que vous voulez marquer sur du texte une variation
par rapport aux indications générales. Il peut s'agir de couleur, de police
d'écriture, de taille, de poids, etc.
	  
Un paragraphe et de façon générale tous les éléments de type blocs on une marge (margin) par défaut.
*/				   

body
{ 
	background : url(../images_new/body_bg.gif) repeat-x; 
	background-attachment : fixed; 
	background-color : black; 
	padding : 0; 
	margin : 0; 
} 

A
{ 
	color : #ffffff; 
} 
A:hover
{ 
	color : #fbba04; 
} 
#container
{ 
	background : black url("../images_new/fond.jpg") no-repeat fixed 50% 25%; 
	padding-left : 0; 
	padding-right : 0; 
	padding-top : 0; 
	padding-bottom : 0; 
	margin : 0 auto; 
	width : 740px; 
	color : #bdc1bc; 
	font-size : 0.9em; 
	line-height : 1.7em; 
	font-family : "Trebuchet MS", Arial, Verdana, sans-serif; 
	position : relative; 
	text-align : justify; 
} 
#banniere
{ 
	background : url(../images_new/page_haute.jpg); 
	background-repeat : no-repeat; 
	left : -50px; 
	margin : 0; 
	width : 840px; 
	height : 166px; 
	position : relative; 
	z-index : 1; 
} 
#compteur
{ 
	left : 580px; 
	top : 132px; 
	position : absolute; 
	z-index : 3; 
} 
#visiteurs
{ 
	background : url(../imagescompteur/visiteurs.gif); 
	background-repeat : no-repeat; 
	left : 676px; 
	top : 134px; 
	width : 91px; 
	height : 18px; 
	position : absolute; 
	z-index : 3; 
} 
#lukesolo
{ 
	left : -250px; 
	background : url(../images_new/lukesolo.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 320px; 
	height : 412px; 
	position : absolute; 
	top : 0; 
	z-index : 2; 
} 
#teteguitare
{ 
	left : 670px; 
	background : url(../images_new/tete_guitare.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 235px; 
	height : 66px; 
	position : absolute; 
	top : 154px; 
	z-index : 2; 
} 


#menu, #menu ul
{ 
	padding : 0; 
	margin : 0; 
	margin-left : 70px; 
	list-style : none; 
	line-height : 22px; 
	text-align : center; 
	font-weight : bold; 
	font-family : Arial; 
	font-size : 12px; 
} 
#menu a
{ 
	display : block; 
	padding : 0; 
	margin : 0; 
	color : #ffffff; 
	text-decoration : none; 
} 
	#menu a:hover
{ 
	color : #000; 
	background : #fff; 
	background : transparent url("../images_new/menu2.gif") no-repeat; 
} 
#menu li
{ 
	float : left; 
	border-right : 1px solid #fff; 
} 
html > body #menu li
{ 
	border-right : 1px solid transparent; 
} 
#menu li ul
{ 
	position : absolute; 
	width : 144px; 
	left : -999em; 
	margin : 0; 
} 
#menu li ul li
{ 
	border-top : 1px solid #fff; 
} 
html > body #menu li ul li
{ 
	border-top : 1px solid transparent; 
} 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{ 
	left : auto; 
	min-height : 0; 
} 
#menu li ul li a
{ 
	height : 22px; 
	background : transparent url("../images_new/fondmenu2.gif") no-repeat; 
	width : 130px; 
} 
#menu li ul li a:hover
{ 
	height : 22px; 
	color : #000; 
	background : #fff; 
	background : url("../images_new/menuhover.gif") no-repeat; 
} 
#menu li a
{ 
	width : 120px; 
	height : 28px; 
} 
#menu li a.accueil
{ 
	background : url("../images_new/accueil.gif") no-repeat; 
} 
#menu li a.accueil:hover
{ 
	background : url("../images_new/accueilover.gif") no-repeat; 
} 
#menu li a.productions
{ 
	background : url("../images_new/productions.gif") no-repeat; 
} 
#menu li a.productions:hover
{ 
	background : url("../images_new/prodover.gif") no-repeat; 
} 
#menu li a.lecons
{ 
	background : url("../images_new/lessons.gif") no-repeat; 
} 
#menu li a.lecons:hover
{ 
	background : url("../images_new/lessonsover.gif") no-repeat; 
} 
#menu li a.partenaires
{ 
	background : url("../images_new/partenaires.gif") no-repeat; 
} 
#menu li a.partenaires:hover
{ 
	background : url("../images_new/partenairesover.gif") no-repeat; 
} 
#menu li a.divers
{ 
	background : url("../images_new/divers.gif") no-repeat; 
} 
#menu li a.divers:hover
{ 
	background : url("../images_new/diversover.gif") no-repeat; 
} 			


#titrepage
{ 
	padding : 50px 0 30px 53px; 
	margin : 0; 
} 
#preamble
{ 
margin : 0 0 40px 0; 
} 
	#preamble .titreParagraphe
{ 
	font-size : 22px; 
	color : white; 
	margin : 40px 40px 10px 40px; 
} 
#preamble .p1
{ 
	padding-top : 0; 
	padding-right : 40px; 
	padding-bottom : 0; 
	padding-left : 40px; 
	text-indent : 2em; 
} 
#preamble .p2
{ 
	padding-top : 0; 
	padding-right : 40px; 
	padding-bottom : 0; 
	padding-left : 40px; 
	text-indent : 0; 
} 
div.exercices
{ 
	background : url(../images_new/text_header.gif) no-repeat; 
	width : 660px; 
	height : 34px; 
	margin : 0 40px 0 40px; 
} 
div.supportExercices
{ 
	background : url(../images_new/background_text.gif) repeat-y; 
	width : 660px; 
	margin : 0 40px 0 40px; 
} 
div.footer
{ 
	background : url(../images_new/text_footer.gif) no-repeat; 
	width : 660px; 
	height : 69px; 
	margin : 0 40px 30px 40px; 
} 
table.formulaire
{ 
	border-collapse : collapse; 
	margin : 0 0 19px 29px; 
} 
h1.titreFormulaireAmpli
{ 
	padding-left : 30px; 
	font-size : 22px; 
	color : white; 
	margin : 0 0 10px 0; 
	padding : 0; 
} 
h1.titreAmpli
{ 
	font-size : 22px; 
	color : white; 
	margin : 0 0 10px 26px; 
} 
p.paragrapheAmpli
{ 
	padding : 0 30px 0 30px; 
	margin : 0; 
} 
span.sousParagraphe
{ 
	font-size : 17px; 
	padding-bottom : 0; 
} 
span.partition
{ 
	padding-left : 34px; 
} 
span.lien
{ 
	padding-left : 30px; 
} 
span.video
{ 
	padding-left : 70px; 
} 
img.iconeParagrapheAmpli
{ 
	border-color : transparent; 
	padding-left : 30px; 
	border : 3px; 
} 
a.boutonDownload
{ 
	background : url("../images_new/download.gif"); 
	width : 70px; 
	height : 30px; 
	margin : 6px 0 20px 295px; 
	display : block; 
} 
a.boutonDownload:hover
{ 
	background : url(../images_new/download_over.gif); 
	width : 70px; 
	height : 30px; 
	margin-left : 295px; 
} 	  


#colonneDroite
{ 
	background : transparent url(../images_new/colonne.jpg) no-repeat; 
	position : absolute; 
	top : 206px; 
	left : 750px; 
	width : 180px; 
	height : 570px; 
	padding : 14px 0 0 8px; 
	z-index : 1; 
} 
#colonneDroite .titreParagraphe
{ 
	font-size : 20px; 
	color : white; 
} 
#colonneDroiteIdentifiant
{ 
	position : relative; 
} 
#alertLogin
{ 
	background-color : #800080; 
	width : 164px; 
	visibility : hidden; 
} 
#colonneDroitePassword
{ 
	position : relative; 
	top : -20px; 
} 
#alertPassword
{ 
	background-color : #800080; 
	width : 164px; 
	visibility : hidden; 
} 
#colonneDroiteAlertConnexion
{ 
	background-color : #800080; 
	position : relative; 
	top : -30px; 
	width : 164px; 
	visibility : hidden; 
} 
#colonneDroiteBouton
{ 
	position : relative; 
	top : -65px; 
} 
#boutonLog
{ 
	font-size : 13px; 
	font-weight : bold; 
	background : #333a3d; 
	color : #bdc1bc; 
} 	


.bandeauTitre
{ 
	background-image : url(../images_new/bandeau_titre.gif); 
	width : 624px; 
	height : 24px; 
	margin : 3px; 
	text-align : left; 
	font-family : Serif Sans MS; 
	font-size : 17px; 
	font-weight : bold; 
	color : #ffffff; 
	text-indent : 3px; 
} 
.bandeauTitreGrand
{ 
	background-image : url(../images_new/bandeautitregrand.jpg); 
	width : 650px; 
	height : 24px; 
	margin : 3px; 
	text-align : left; 
	font-family : Serif Sans MS; 
	font-size : 17px; 
	font-weight : bold; 
	color : #ffffff; 
	text-indent : 3px; 
} 
.etoile1
{ 
	left : 525px; 
	background : url(../images_new/etoile5.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 19px; 
	height : 17px; 
	position : absolute; 
} 
.etoile2
{ 
	left : 525px; 
	background : url(../images_new/etoile5.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 39px; 
	height : 17px; 
	position : absolute; 
} 
.etoile3
{ 
	left : 525px; 
	background : url(../images_new/etoile5.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 59px; 
	height : 17px; 
	position : absolute; 
} 
.etoile4
{ 
	left : 525px; 
	background : url(../images_new/etoile5.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 79px; 
	height : 17px; 
	position : absolute; 
} 
.etoile5
{ 
	left : 525px; 
	background : url(../images_new/etoile5.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 99px; 
	height : 17px; 
	position : absolute; 
} 
.etoile6
{ 
	left : 525px; 
	background : url(../images_new/etoile6.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 119px; 
	height : 17px; 
	position : absolute; 
} 
.free
{ 
	left : 140px; 
	background : url(../images_new/free.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 81px; 
	height : 16px; 
	position : absolute; 
} 
.new
{ 
	left : 140px; 
	background : url(../images_new/new.gif); 
	background-repeat : no-repeat; 
	margin : 0; 
	width : 67px; 
	height : 16px; 
	position : absolute; 
} 
img.boutonTelechargerTab
{ 
	border-color : #4a5455; 
	border : 1px; 
	width : 96px; 
	height : 51px; 
	margin : 8px 0 14px 0; 
} 
hr
{ 
	text-align : center; 
	width : 50%; 
	color : #999999; 
	margin : 20px 0 20px 0; 
} 
#detail
{ 
	position : absolute; 
	visibility : hidden; 
} 
#bouton
{ 
	font-size : 1.2em; 
	font-weight : bold; 
	background : #333a3d; 
	color : #bdc1bc; 
} 
#champText
{ 
	position : absolute; 
	left : 356px; 
} 
#finPage
{ 
	margin : 0; 
	padding : 0; 
} 
#finPage .titre
{ 
	font-size : 22px; 
	color : white; 
	margin : 0 40px 10px 40px; 
} 
#poutrePiedPage
{ 
	background : url(../images_new/poutre.gif) no-repeat; 
	width : 270px; 
	height : 34px; 
	margin : 50px 0 20px 0; 
}