body 
{	
	margin: 0 auto;
    padding: 0px;
	
	max-width: 100%;

	background: #999;
	
}
			
/* -- Plan de Site -- */	
			
			#Plan	
			{	
				float: right;
				height: 20px;	
				padding-top: 0px;
				padding-left: 10px;
				margin-right: 10px;	
				font-family: verdana, arial;
				font-size: 12px;
				color:  #ccc;
				border-bottom: 0px solid #ccf;								
				background-color: #222;			
			}			
			
			.menu	
			{	
				font-family: verdana, arial;
				font-size: 12px;
				color:  #b1f6f2;
				text-decoration: none;
				font-style: none;
				font-weight: normal;			
			}			

			.Plan0 
			{
				display: block;			
				width: 90%;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
								
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				text-align: left;
				font-style: italic;
				font-weight: normal;
			}	

			.Plan1 /* -- Plan de site -- */
			{
				display: block;			
				width: 90%;
				
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
				
				border: 0px solid #000;	
				background-color: #eee;
				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #900;
				text-decoration: none;
				text-align: center;
				font-style: none;
				font-weight: bold;
			}	

			.Plan1:hover 
			{		
				width: 90%;
				color:  #000;
				background-color: #ff9;
				border: 0px solid #000;	
			}		

			.Plan2 /* -- Plan de site -- */
			{
				display: block;			
				width: 90%;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
				
				border: 0px solid #000;	
				background-color: #eee;
				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #009;
				text-decoration: none;
				text-align: center;
				font-style: none;
				font-weight: bold;
			}	

			.Plan2:hover 
			{
				width: 90%;
				color:  #000;
				background-color: #9ff;
				border: 0px solid #000;	
			}			

			.Plan3 /* -- Plan de site -- */
			{
				display: block;			
				width: 90%;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom: 5px;
				
				border: 0px solid #000;
				background-color: #eee;	
				
				font-family: verdana, arial;
				font-size:12px;
				color:  #090;
				text-decoration: none;
				text-align: center;
				font-style: none;
				font-weight: bold;
			}	

			.Plan3:hover 
			{
				width: 90%;
				color:  #000;
				background-color: #9f9;
				border: 0px solid #000;	
			}		
			
/* -- HAUT commun à toutes les pages -- */	

	@media screen and (min-width: 780px) 
		{
			#haut	
			{	
				margin: auto;
				max-width: 70%;
				padding-top: 10px;		
				border-bottom: 2px solid #ccf;
				border-right: 2px solid #000;									
				background-color: #222;			
			}	
			
			#bas	
			{	
				margin: auto;
				max-width: 70%;
				padding-top: 10px;								
				background-color: #222;	
				border-top: 2px solid #ccf;
				border-bottom: 2px solid #ccf;			
			}	
		}	
		
	@media screen and (max-width: 779px) 
		{
			#haut	
			{	
				margin: auto;
				max-width: 100%;
				padding-top: 10px;		
				border-bottom: 2px solid #ccf;
				border-right: 2px solid #000;									
				background-color: #222;			
			}	
			
			#bas	
			{	
				margin: auto;
				max-width: 100%;
				padding-top: 10px;								
				background-color: #222;	
				border-top: 2px solid #ccf;
				border-bottom: 2px solid #ccf;	
			}	
		}
			
			.souslogo
			{				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #ccc;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				padding: 3px;
				border: 1px solid #222;
			}	
			
			.souslogo:hover
			{				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #c9c;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				padding: 3px;
				border: 1px solid #c9c;
			}	
			
			.souslogofixe
			{				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #ccc;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				padding: 5px;
				border: 1px solid #222;
			}
			
			.page
			{				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #eec600;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				padding: 5px;
			}	
			
			.page:hover
			{				
				font-family: verdana, arial;
				font-size: 14px;
				color:  #eec600;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				padding: 3px;
				border: 1px solid #eec600;
			}	
			
			.BasTexteFixe
			{			
				display: block;
				height: 15px;
				width: auto;
				padding: 2px 8px;
				font-family: verdana, arial;
				font-size: 14px;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				color:  #eee;
				background-color: #222;
				border: 0px solid #999;
			}	
			
			.BasTexte
			{			
				display: block;
				height: 15px;
				width: auto;
				padding: 2px 8px;
				font-family: verdana, arial;
				font-size: 14px;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
				color:  #ccc;
				background-color: #222;
				border: 1px solid #222;
			}	
			
			.BasTexte:hover
			{	
				color:  #ffbb55;
				background-color: #633;
			}			

/* -- CORPS -- */	

	@media screen and (min-width: 780px) 
		{
			#corps
			{		
				margin: auto;
				max-width: 70%;	
				min-width: 320px;				
				background-color: #fff;		
				box-shadow: 5px 5px 5px #666;	
			}	
		}	
	
	@media screen and (max-width: 779px) 
		{
			#corps
			{		
				margin: auto;
				max-width: 100%;	
				min-width: 320px;				
				background-color: #fff;		
				box-shadow: 5px 5px 5px #666;	
			}
		}	
			
			.titrecorps
			{
				font-family: verdana, arial;
				font-size: 20px;
				color:  #933;
				text-decoration: none;
				font-style: normal;
				font-weight: none;	
			}

/* -- LARGEUR LOGO IMAGE -- */			
		
			.logoover 
			{
				max-width: 300px;
				display: block;
				padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				padding-right: 20px;
				border: 1px solid #eee;
				background-color: #eee;
			}

			.logoover:hover 
			{
				max-width: 300px;
				padding-top: 20px;
				padding-bottom: 20px;
				border: 1px solid #000;
				background-color: #66996655;
			}		
			
			.lienover /* -- Page liens -- */		
			{
				display: block;
				border: 1px solid #fff;
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.lienover:hover 
			{
				max-width: 500px;
				border: 1px solid #000;
				background-color: #66996655;
			}			
			
/* -- TEXTES -- */				

			.TexteBureautique
			{
				display: block;
				width: auto;
				padding-left: 10px;		
				padding-right: 0px;
				font-family: verdana, arial;
				font-size: 14px;
				color:  #333;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}								

			.Texte1 /* -- Accueil -- */
			{
				font-family: verdana, arial;
				font-size: 14px;
				color:  #333;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}			

			.Texte2 
			{
				display: block;
				width: auto;
				padding-left: 10px;		
				padding-right: 0px;
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}		

			.Texte3 
			{
				display: block;
				width: auto;
				padding-left: 20px;		
				padding-right: 0px;
				font-family: verdana, arial;
				font-size: 14px;
				color:  #000;
				text-decoration: none;
				font-style: none;
				font-weight: normal;
			}

/* -- BOUTONS -- */	
				
			.boutonmenu 
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				max-width: 340px;
				font-family: arial, helvetica, sans-serif;
				font-size: 20px;
				color:  #000;
				text-align: center;
				background-color: #c99;
				text-decoration: none;
				font-style: italic;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #999;	
			}
			
			.boutonmenu:hover
			{
				background-color: #900;
				color:  #fff;
			}	
				
			.BoutonMenu /* -- Accueil - Retour -- */
			{
				display: block;
				padding-top: 8px;
				padding-bottom: 8px;
				margin: auto;
				width: 100px;
				font-family: verdana, arial;
				font-size: 16px;
				color:  #000;
				text-align: center;
				background-color: #cdc;
				text-decoration: none;
				border: 1px solid #000;		
				border-radius: 0px;				
				box-shadow: 5px 5px 5px #ccc;	
			}
			
			.BoutonMenu:hover /* -- Accueil - Retour -- */
			{
				background-color: #ccc;
				color:  #000;
			}	

/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/*--- PHOTOS DEFIL -------------------------------------------------*/
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/

	@media screen and (min-width: 1132px)
	{
		.cadrephotosdefil
		{
			width: 780px;
			height: 100px;
			top: 360px;
			vertical-align: top;
			background: #eee;
			z-index: 9;
		}	
	
		.photosdefil
		{
			width: 780px;
			height: 136px;
			top: 360px;
			position: absolute;
			overflow: hidden;
			vertical-align: top;
			z-index: 5;
		}
	}	
	
	@media screen and (max-width: 1131px)
	{
		.cadrephotosdefil
		{
			width: 680px;
			height: 100px;
			top: 360px;
			vertical-align: top;
			background: #eee;
			z-index: 9;
		}	
	
		.photosdefil
		{
			width: 680px;
			height: 136px;
			top: 360px;
			position: absolute;
			overflow: hidden;
			vertical-align: top;
			z-index: 5;
		}
	}			
	
	@media screen and (max-width: 994px)
	{
		.cadrephotosdefil
		{
			width: 480px;
			height: 100px;
			top: 360px;
			vertical-align: top;
			background: #eee;
			z-index: 9;
		}	
	
		.photosdefil
		{
			width: 480px;
			height: 136px;
			top: 360px;
			position: absolute;
			overflow: hidden;
			vertical-align: top;
			z-index: 5;
		}
	}	
	
	@media screen and (max-width: 780px)
	{
		.cadrephotosdefil
		{
			width: 100%;
			height: 100px;
			top: 360px;
			vertical-align: top;
			background: #eee;
			z-index: 9;
		}	
	
		.photosdefil
		{
			width: 100%;
			height: 136px;
			top: 360px;
			position: absolute;
			overflow: hidden;
			vertical-align: top;
			z-index: 5;
		}
	}
	
	.real01, 
	.real02, 
	.real03, 
	.real04, 
	.real05, 
	.real06, 
	.real07, 
	.real08,
	.real09, 
	.real10
	{
			position: absolute;
			width: 580px;
			height: 136px;
	}

	
	.real01{left: -200px;}
	.real02{left: -10px;}
	.real03{left: 180px;}
	.real04{left: 370px;}
	.real05{left: 560px;}
	.real06{left: 750px;}
	.real07{left: 940px;}
	.real08{left: 1130px;}
	.real09{left: 1320px;}
	.real10{left: 1510px;}
				
	.defils
	{
		width: 580px;
		height: 136px;
		left:0px;
		position: absolute;
		-webkit-animation-duration: 15s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-name: defilphotos;
		-moz-animation-duration: 15s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-name: defilphotos;
		-ms-animation-duration: 15s;
		-ms-animation-iteration-count: infinite;
		-ms-animation-name: defilphotos;
		animation-duration: 15s;
		animation-iteration-count: infinite;
		animation-name: defilphotos;
	}
		@-webkit-keyframes defilphotos 
	{
		0% {left:-3px;}
		22% {left:-203px;}
		33% {left:-406px;}
		45% {left:-609px;}
		66% {left:-812px;}
		90% {left:-1015px;}
	}
		@-moz-keyframes defilphotos 
	{
		0% {left:-3px;}
		22% {left:-203px;}
		33% {left:-406px;}
		45% {left:-609px;}
		66% {left:-812px;}
		90% {left:-1015px;}
	}
	@-ms-keyframes defilphotos 
	{
		0% {left:-3px;}
		22% {left:-203px;}
		33% {left:-406px;}
		45% {left:-609px;}
		66% {left:-812px;}
		90% {left:-1015px;}
	}
	
	@keyframes defilphotos 
	{
		0% {left:-3px;}
		22% {left:-203px;}
		33% {left:-406px;}
		45% {left:-609px;}
		66% {left:-812px;}
		90% {left:-1015px;}
	}	
			
	/* -- AUDIO -- */	

			#player 
			{
				max-width: 300px;
				padding: 2px;
				background: #070;
				border-radius: 5px;		
				box-shadow: 5px 5px 5px #999;	
			} 
			
			#playlist 
			{	
				display: block;
				font-family: arial, helvetica, sans-serif;
				font-size: 22px;
				list-style: none;	
				text-decoration: none;
				color: #933;
				
				padding-top: 8px;	
				padding-bottom: 8px;
				padding-left: 25px;	
				padding-right: 25px;
				
				border-right: 1px solid #fff;
				border-bottom: 1px solid #fff;
				border-top: 1px solid #fff;
				border-left: 1px solid #fff;
			}
			
			#playlist li:nth-child(even) 
			{
				padding-top: 8px;	
				padding-bottom: 8px;
			}
			
			#playlist li:nth-child(odd) 
			{
				padding-top: 8px;	
				padding-bottom: 8px;
			} 	  
			
			#playlist li a
			{
				text-decoration: none;
				color: #933;
			}		
			
			#playlist li a:hover 
			{
				color: #070;
				text-decoration: none;
				
				background: #eee;
				
				padding-top: 8px;	
				padding-bottom: 8px;
				padding-left: 25px;	
				padding-right: 25px;
				
				border-right: 1px solid #777;
				border-bottom: 1px solid #777;
				border-top: 1px solid #777;
				border-left: 1px solid #777;
			}	
			
	/* -- VIDEO -- */		

			#playervid
			{
				max-width: 300px;
				padding: 0px;
				background: #000;	
				
				border-radius: 5px;			
				box-shadow: 5px 5px 10px #bbb;
			} 
			
			#playlistvid  
			{	
				display: block;
				font-family: arial, helvetica, sans-serif;
				font-size: 22px;
				list-style: none;	
				text-decoration: none;
				color: #933;
				
				padding-top: 8px;	
				padding-bottom: 8px;
				padding-left: 25px;	
				padding-right: 25px;
				
				border-right: 1px solid #fff;
				border-bottom: 1px solid #fff;
				border-top: 1px solid #fff;
				border-left: 1px solid #fff;
			}
			
			#playlistvid li:nth-child(even) 
			{
				padding-top: 8px;	
				padding-bottom: 8px;
			}
			
			#playlistvid li:nth-child(odd) 
			{
				padding-top: 8px;	
				padding-bottom: 8px;
			} 	  
			
			#playlistvid li a
			{
				text-decoration: none;
				color: #933;
			}	
			
			#playlistvid li a:hover 
			{
				color: #070;
				text-decoration: none;
				
				background: #eee;
				
				padding-top: 8px;	
				padding-bottom: 8px;
				padding-left: max;	
				padding-right: max;
				
				border-right: 1px solid #777;
				border-bottom: 1px solid #777;
				border-top: 1px solid #777;
				border-left: 1px solid #777;
			}				


	/* -- PDF -- */	
	
			.partpdf 
			{	
				font-family: arial, helvetica, sans-serif;
				font-size: 22px;
				list-style: none;	
				text-decoration: none;
				color: #933;
				
				padding-top: 6px;	
				padding-bottom: 6px;
				padding-left: 25px;	
				padding-right: 25px;
				
				border-right: 1px solid #fff;
				border-bottom: 1px solid #fff;
				border-top: 1px solid #fff;
				border-left: 1px solid #fff;
			}		
			
			.partpdf:hover 
			{
				color: #070;
				text-decoration: none;
				
				background: #eee;
				
				padding-top: 6px;	
				padding-bottom: 6px;
				padding-left: 25px;	
				padding-right: 25px;
				
				border-right: 1px solid #777;
				border-bottom: 1px solid #777;
				border-top: 1px solid #777;
				border-left: 1px solid #777;
			}		
	
			.legendpdf 
			{	
				font-family: arial, helvetica, sans-serif;
				font-size: 14px;
				list-style: none;	
				text-decoration: none;
				color: #999;
			}	
	
			.legendpdfstyle 
			{	
				font-family: arial, helvetica, sans-serif;
				font-size: 20px;
				list-style: none;	
				text-decoration: none;
				font-weight: bold;
				color: #99c;