@charset "utf-8";
/* CSS Document */

		html	{
			margin: 0;
			padding: 0;
		}
		body  {
			font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
			background-color: #84d0f0;
			background-image: url(/Images/Fond.jpg);
			background-repeat: repeat-x;
			margin: 0; /* il est conseill de mettre  zro la marge et le remplissage de l'lment body, pour tenir compte des diffrentes valeurs par dfaut des navigateurs */
			padding: 0;
			text-align: center; /* ce paramtrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite align  gauche (valeur par dfaut) dans le slecteur #container */
			color: #000;
    	}

		img {
			border: 0;
		}


		p, td, ul, li, ol, h1, h2, h3, h4, h5, dt, dd	{
    	font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; /* ce code est redondant pour palier au problme d'hritage d'anciens navigateurs. Netscape 4.X ne respecte pas et ignore l'hritage, ainsi que toutes les rgles appliques  l'lment body. IE pour Windows, jusqu' la version 6, connait un problme similaire de non prise en compte des styles de fontes dans les tableaux */
		}
		p	{
			padding: 0;
			margin: 0 20px 10px 20px;
			
			/* la mthode de Fahrner */
			font-size: x-small;
			/* valeur fausse pour IE 4/5 sous Windows */
			voice-family: "\"}\"";
			/* on trompre IE 4/5 pour Windows en lui faisant croire  tort que la rgle finit ici */
			voice-family: inherit;
			/* on dfait cette petite astuce */
			font-size: small;
			/* voici la bonne valeur, celle qu'utiliseront les meilleurs navigateurs */
		}
		h1	{
			border: 0;
			color: #069;
			padding: 0;
			margin: 0;
			
			/* la mthode de Fahrner */
			font-size: large;
			/* valeur fausse pour IE 4/5 sous Windows */
			voice-family: "\"}\"";
			/* on trompre IE 4/5 pour Windows en lui faisant croire  tort que la rgle finit ici */
			voice-family: inherit;
			/* on dfait cette petite astuce */
			font-size: x-large;
			/* voici la bonne valeur, celle qu'utiliseront les meilleurs navigateurs */
		}
		h2	{
			border-style: solid;
			border-width: 0 0 1px 0;
			border-color: #FF3300;
			color: #069;
			padding: 0;
			margin: 0 0 ;
			
			/* la mthode de Fahrner */
			font-size: larger;
			/* valeur fausse pour IE 4/5 sous Windows */
			voice-family: "\"}\"";
			/* on trompre IE 4/5 pour Windows en lui faisant croire  tort que la rgle finit ici */
			voice-family: inherit;
			/* on dfait cette petite astuce */
			font-size: larger;
			/* voici la bonne valeur, celle qu'utiliseront les meilleurs navigateurs */
		}
		h3	{
			border: 0;
			color: #069;
			padding: 0;
			margin: 0 0 5px 20px;
			
			/* la mthode de Fahrner */
			font-size: x-small;
			/* valeur fausse pour IE 4/5 sous Windows */
			voice-family: "\"}\"";
			/* on trompre IE 4/5 pour Windows en lui faisant croire  tort que la rgle finit ici */
			voice-family: inherit;
			/* on dfait cette petite astuce */
			font-size: small;
			/* voici la bonne valeur, celle qu'utiliseront les meilleurs navigateurs */
		}




    #container { 
    	width: 900px;
    	background: #FFF;
    	margin: 10px auto; /* les marges automatiques (et dotes d'une largeur positive) centrent la page */
		padding: 0;
    	border: 1px solid #000;
    	text-align: left; /* ce paramtrage annule le paramtre text-align: center de l'lment body. */
    } 
    #header { 
    	background: #000;
    	padding: 0;  /* ce remplissage correspond  l'alignement  gauche des lments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insre dans l'lment #header, il est conseill de supprimer le remplissage. */
    } 
    #header h1 {
    	margin: 0; /* la mise  zro de la marge du dernier lment du div #header permet d'viter une disparition de la marge (espace inexplicable entre les lments div). Si l'lment div est entour d'une bordure, cette prcaution n'est pas ncessaire, car la bordure vite galement la disparition de la marge */
    	padding: 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'loigner l'lment des bords de l'lment div */
    }
    
    /* Conseils pour barreMenu :
    1. comme nous travaillons en pourcentages, il est prfrable de ne pas utiliser de remplissage latral pour l'encadr. Pour les navigateurs conformes aux standards, il sera ajout  la largeur, crant ainsi une largeur relle inconnue. 
    2. Pour crer un espace entre le ct de l'lment div et les lments qu'il contient, attribuez une marge gauche et une marge droite  ces lments, comme dans la rgle ".twoColLiqLtHdr #barreMenu p".
    3. Comme Internet Explorer calcule les largeurs aprs avoir restitu l'lment parent, des bogues inexpliques peuvent parfois se produire pour les colonnes calcules en pourcentage. Pour obtenir des rsultats plus prvisibles, il est donc prfrable de dimensionner les colonnes en pixels.
    */


    #barreMenu {
		width: 100%;
		height: 2em;
		background-color: #000;
		margin: 0;
		padding: 0;
		list-style-type: none;
    }
    #barreMenu li {
		display: block;
		float: left;
		line-height: 2em;
		vertical-align: middle;
		margin: 0;
		padding: 0 10px;
		background-color: #000;
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: #F60;
    }

    #barreMenu a#actif {
		color: #FF9900;
    }
	
    #barreMenu a:link{
		color: #FFF;
		text-decoration: none;
		background: transparent;
    }
    #barreMenu a:visited{
		color: #FFF;
		text-decoration: none;
		background: transparent;
    }
    #barreMenu a:hover{
		color: #FF9900;
		text-decoration: underline;
		background: transparent;
    }
    #barreMenu a:active{
		color: #FFF;
		text-decoration: none;
		background: transparent;
    }


    /* Conseils pour mainContent :
    1. l'espace compris entre les lments mainContent et barreMenu est cr avec la marge gauche de l'lment div mainContent.  Quelle que soit la taille du contenu dans l'lment div barreMenu, l'espace des colonnes reste prserv. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'lment div #mainContent remplisse l'espace de l'lment #barreMenu lorsque le contenu de ce dernier se termine.
    2. pour viter une perte de l'lment flottant  la rsolution minimale prise en charge (800 x 600), la taille des lments contenus par l'lment div mainContent doit tre gale ou infrieure  430 pixels (images comprises).
    3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la proprit zoom permet de donner  l'lment mainContent l'attribut "hasLayout." Cela vite l'apparition de plusieurs bogues spcifiques d'Internet Explorer.
    */
    #mainContent {
    	margin: 30px; /* la marge droite peut tre indique en pourcentage ou en pixels. Elle cre l'espace dans la partie infrieure du ct droit de la page. */
		padding: 0;
    } 
    #footer {
		width: 900px;
		margin: 0 auto;
    	padding: 0 0 10px 0; /* ce remplissage correspond  l'alignement  gauche des lments des div qui apparaissent au-dessus. */
    	background: transparent;
    } 
    #footer p {
    	margin: 0; /* la mise  zro de la marge du premier lment du pied de page permet d'viter une possible disparition de la marge (espace entre les lments div) */
    	padding: 0; /* l'utilisation d'un remplissage pour cet lment cre un espace, tout comme une marge l'aurait fait, mais en vitant le risque de disparition de la marge */
    }
    #footer a:link{
			color: #000;
			text-decoration: none;
			background: transparent;
    }
    #footer a:visited{
			color: #000;
			text-decoration: none;
			background: transparent;
    }
    #footer a:hover{
			color: #000;
			text-decoration: underline;
			background: transparent;
    }
    #footer a:active{
			color: #000;
			text-decoration: none;
			background: transparent;
    }

    
    /* Diverses classes  rutiliser */
    .fltrt { /* cette classe permet de rendre flottant le ct droit d'un lment dans la page. L'lment flottant doit prcder l'lment  ct duquel il doit se trouver dans la page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* cette classe permet de rendre flottant le ct gauche d'un lment dans la page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* cette classe doit tre place pour un lment div ou break et doit tre l'lment final avant la balise de fin d'un conteneur qui doit contenir entirement un lment flottant */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
	
	#videoSpectacle {
		text-align: center;
	}