body 						/* applicable a toute la page*/
	{	
		padding: 0.3%; /* Pour centrer notre page */
		font-family:"Arial","FreeSans", serif;
		font-size:0.9em;
		background-color:#2133c1;
	
	}	

.mentions 
	{	
		text-align:center;
		
	}
.mentions a
	{	
		color:#f4c400;
		font-weight:bold;
		text-decoration : none;  
	}		
.mentions a:hover
	{	
		color:#f4c400;
		font-weight:bold;
		text-decoration : underline;  
	}		
#page
	{
		background-color:white;
		border-radius:5px 5px 5px 5px;
		width:1200px;
		margin:auto;
		box-shadow:0px 10px 8px;
		
	}


p 			/* applicable a tous les paragraphes*/
	{
		text-align: justify;
	}
	
/*------------------------------------------------------------------------------------------------------------------------------------------------*/	
		
header
	{
		
		height:198px;
		margin-bottom:3%;
		background-position:right 0px;
		background-image:url("images/baniere-bateau.png");
		background-repeat:no-repeat;
		border-radius:5px 5px 0px 0px;	
	}
	
#titre_principal				/*applicable a l'en-tete*/
	{
		
		width:27%;
		height:152px;
		display:inline-block;
		margin-left:0%;
		
	}	
/*--------------------menu pages-----------------------------------------------------------------------*/


nav {	
	width:100%;
	
	height:40px;
	
    }
    
nav .onglets
	{	
		margin:auto;
		margin-left:1.4%;
		width:7%;
		padding:0;
		list-style-type:none;
		display:inline-block;
	}
	
nav .onglets li
	{	
		border:1px solid gray;
		margin-right:1%;
		width:100%;
		border-radius:5px 5px 0px 0px;
		background-image:url("images/menu.png");
		padding:0px;
		height:45px;
	}
	
.acces			{background-position:left top; }
.stages			{background-position:left 93%; }
.voiture 		{background-position:left 7%; } 
.aac			{background-position:left 17%; }
.scooter 		{background-position:left 28% ; }
.cvcinq			{background-position:left 100%; }
.moto			{background-position:left 39%; }
.petiteremorque		{background-position:left 50%; }
.remorque 		{background-position:left 63%; } 
.bateau			{background-position:left 73%; }
.hauturier 		{background-position:left 85%; } 

.acces:hover 		{background-position: right top;}
.stages:hover		{background-position: right 93%; }
.voiture:hover 		{background-position: right 7%;}
.aac:hover 		{background-position: right 17%;}
.scooter:hover 		{background-position: right 28%;}
.cvcinq:hover		{background-position: right 100%; }
.moto:hover 		{background-position: right 39%;}
.petiteremorque:hover	{background-position: right 50%;}
.remorque:hover 	{background-position: right 63%;}
.bateau:hover 		{background-position: right 73%;}
.hauturier:hover 		{background-position: right 85%;}


/*-------------------------liens du menu------------------------------------------------------------------------*/

nav .onglets li a
	{	
		display: block;
		width:100%;
		height:40px;
		
					
	}
nav .onglets  li a:hover
	{	
		display: block;
		width:100%;
		height:40px;
		
	}

/*------------------------------------------------------------------------------------------------------------------------------------------------*/
#menu2											/* applicable au menu 2  */
	{	
		position:relative;			
		padding:0px;
		border-bottom:1px dashed #2133c1;
		display:inline-block;
		width:100%;
			
	}

#onglets									/* applicable aux onglets du menu2  */
	{
	    	font :"Trebuchet MS",Arial,"FreeSans", serif;
	    	list-style-type : none;   	
	}

#onglets li													/* applicable aux onglets  */
	{
	    		display:inline-block;
			margin-left:0.5%;
			
	}

 #onglets a									/* applicable pour les liens de l'onglet  */
	{
		
		border-radius:5px;
		box-shadow:0px 2px 2px black;
	   	display : block;
		color:#f4c400;
		background-color:#384063;
		height:20px;	
		font-weight:bold;
		text-align:center;
		padding-top:4px;
		padding-left:10px;
		padding-right:10px;
		text-decoration : none;  
	}
 
#onglets a:hover								/* applicable au survol des liens de l'onglet  */
	{
			color:white;
			background-color:#2133c1;
	}
/*------------------------------------------------------------------------------------------------------------------------------------------------*/
#partie_gauche,article,aside							/* applicable a tous le menu*/
	{
		width:17%;
		display:inline-block;	
		vertical-align:top;
	}

#partie_gauche img
	{
		display: block;
		margin: auto;
		border: none;
	}
	
/*--------------------------------------------------------------------menu photos des elements partie gauche-----------------------------------------------------------------------*/
#partie_gauche .elements
	{	
			
		
		margin:5%;
		padding-left:8%;
		list-style-type:none;	
		
	}
#partie_gauche .elements li

	{	border-radius:10px;
		border:1px solid #2133c1;
		width:187px;
		height:130px;
		display: inline-block;
		margin-top:3%;
		background-image:url("images/divers.png");
	}
		
.uneuro	{	background-position:left top; }
.prepacode { background-position:left 36%;}
.vagnon	{ background-position:left 66%;}
.balade 	{	background-position:left bottom;}

.uneuro:hover {background-position: right top;}
.prepacode:hover { background-position:right 36%;}
.vagnon:hover	{ background-position:right 66%;}
.balade:hover {background-position: right bottom; }

/*-------------liens des elements partie gauche-------------------------------------------------------------*/

#partie_gauche .elements  li a
	{	
		background-color: transparent;
		display: block;
		width:180px;
		height:151px;
	}
#partie_gauche .elements  li a:hover
	{	
		display: block;
		width:180px;
		height:151px;	
	}
/*---------------------------------------------------------------------------------------------------------------*/
article			/* applicable au corps*/
	{	
		position:relative;
		overflow:auto;
		height: 780px;
		width:57%;
		padding:2%;
		
	}

article h1			/* applicable aux titres h1 du corps*/
	{	
		color: #f4c400;
		text-decoration: underline;
		width:70%;
		margin:auto;
		font-size:28px;
		text-align: center;
	}

article h2			/* applicable aux titres h2 du corps*/
	{	
		text-decoration: underline;
		color: #6c6cae;
		width: 50%;
		text-align:left;
	}


article img
	{
		display: block;
		float:left;
		margin-left:20%;
		border: none;
		
		
	}
article ul
	{
		list-style-image:url("images/icone.png");
	}

article a
	{
		color:#6c6cae;
		
	}
article a:hover
	{
		color:#f4c400;	
	}
.bouton
	{
			
	}
.bouton a
	{
		width:50px;
		border-radius:5px;
	    	display : block;
		color:white;
		font:22px uppercase;
		box-shadow:0px 5px 5px black;
		background-color:#384063;
		height:30px;	
		text-align:center;
		margin-left:40%;
		padding-top:3px;
		padding-left:10px;
		padding-right:10px;
		text-decoration : none;  
	}
	
.bouton a:hover								
	{
			color:white;
			background-color: #f4c400;
	}

#voiture
{
	background-image:url("images/auto.png");
	background-repeat:no-repeat;
	background-position:100% 25%;
}
#remorque
{
	background-image:url("images/remorque_plateau.png");
	background-repeat:no-repeat;
	background-position:100% 55%;
}
#remorqueBE
{
	background-image:url("images/remorqueBE.jpg");
	background-repeat:no-repeat;
	background-position:100% 55%;
}
#moto
{
	background-image:url("images/moto_plateau.png");
	background-repeat:no-repeat;
	background-position:100% 45%;
}
#epreuves_moto
{
	background-image:url("images/moto_lent.png");
	background-repeat:no-repeat;
	background-position:100% 85%;
}
#code
{
	background-image:url("images/code.png");
	background-repeat:no-repeat;
	background-position:100% 100%;
}
#bsr
{
	background-image:url("images/scoot.png");
	background-repeat:no-repeat;
	background-position:80% 75%;
}


/*-----------------------------menu photos des remorques-----------------------------------------------------------------------*/

article .remorque
	{
		border-radius:5px;
		width:200px;
		height:200px;
		display: inline-block;
		background-image:url("images/remorque.png");
		margin-top:20%;
		margin-right:2%;
		margin-left:9%;
	}
		
article .remorque.icone1	{	background-position:left top; }
article .remorque.icone2  	{	background-position: right top ; } 

article .remorque.icone1:hover {background-position: left bottom;}
article .remorque.icone2:hover {background-position: right bottom;}


/*---------------------------------liens des remorques--------------------------------------------------------------------------*/

article .photos_remorque
	{
		list-style-type:none;
		padding-bottom:2%;		
	}
	
article .photos_remorque li a
	{	
		background-color: transparent;
		display: block;
		width:200px;
		height:200px;
		border:1px solid transparent;
					
	}
article .photos_remorque  li a:hover
	{	background-color: transparent;
		color: #5c94c8;
		display: block;
		width:200px;
		height:200px;
		border-top: 1px solid white;
		border-left: 1px solid white;
		border-right: 1px solid gray;
		border-bottom: 1px solid gray;
		border-radius:5px;
	}
/*------------------------------------------------------------------------------------------------------------------------------------------------*/

article .liste_hors_circu_remorque,article .liste_hors_circu_moto
	{
		text-decoration: underline;
	}
/*-------------------------------------------------------------------------menu photos des bureaux-----------------------------------------------------------------------*/

article .bureau
	{	
		border-radius:5px;
		width:190px;
		height:215px;
		display: inline-block;
		float:left;
		margin-top:15%;
		margin-right:2%;
		margin-left:2%;
		background-image:url("images/photos_bureaux.png");
	}
		
.icone1	{	background-position:top left; }
.icone2  {	background-position: top center ; }
.icone3 	{	background-position:top right;}

.icone1:hover {background-position: bottom left;}
.icone2:hover {background-position: bottom center;}
.icone3:hover {background-position: bottom right; }

/*-----------------------------------------------------------liens des bureaux-------------------------------------------------------------------------------------*/

article .photos_bureaux
	{
		list-style-type:none;
		margin:0;
		padding:0;
	}
article .photos_bureaux  li a
	{	background-color: transparent;
		display: block;
		width:190px;
		height:215px;
		border-radius:5px;
		box-shadow:0px 5px 5px black;
			
	}
article .photos_bureaux  li a:hover
	{	background-color: transparent;
		display: block;
		width:190px;
		height:215px;
		
		
	}
/*--------------------------------------------------menu photos des formations-----------------------------------------------------------------------*/

article .formations
	{
		
		width:200px;
		height:151px;
		display: inline-block;
		background-image:url("images/photos_formations.png");
		margin-top:3%;
		margin-right:2%;
		margin-left:13%;
	}
		
article .formations.icone1	{	background-position:left top; }
article .formations.icone2  	{	background-position: 19% top ; } 
article .formations.icone3 	{	background-position:40% top;}
article .formations.icone4 	{	background-position:60.6% top;}
article .formations.icone5 	{	background-position:81% top;}
article .formations.icone6 	{	background-position:100% top;}

article .formations.icone1:hover {background-position: left bottom;}
article .formations.icone2:hover {background-position: 19% bottom;}
article .formations.icone3:hover {background-position: 40% bottom; }
article .formations.icone4:hover {background-position: 60.6% bottom; }
article .formations.icone5:hover {background-position: 81% bottom; }
article .formations.icone6:hover {background-position: 100% bottom; }

/*-------------------------------------------liens des formations------------------------------------------------------------------------------------*/

article .photos_formations
	{
		list-style-type:none;
		padding-bottom:2%;		
	}
	
article .photos_formations  li a
	{	
		background-color: transparent;
		display: block;
		width:199px;
		height:150px;
		border-radius:5px;
		box-shadow:0px 5px 5px black;
					
	}
article .photos_formations  li a:hover
	{	background-color: transparent;
		color: #5c94c8;
		display: block;
		width:199px;
		height:150px;
		
	}
/*-------------------------------------------menu photos des villes-----------------------------------------------------------------------------------*/

#acces .ville1
	{
		width:200px;
		height:61px;
		background-image:url("images/panneaux1.png");
		display:inline-block;
		margin-top:1%;
		margin-right:1%;
		margin-left:10%;
	}
		
#acces .ville1.caderousse	{	background-position:left 0px; }
#acces .ville1.piolenc  	{	background-position:left 307px; } 
#acces .ville1.orange 	{	background-position:left 245px;}
#acces .ville1.uchaux	{	background-position:left 184px;}
#acces .ville1.suze 	{	background-position:left 122px;}
#acces .ville1.pierrelatte	{	background-position:left 63px;}

#acces .ville1.caderousse:hover {background-position: right 0px;}
#acces .ville1.piolenc:hover {background-position: right 307px;}
#acces .ville1.orange:hover {background-position:right 245px; }
#acces .ville1.uchaux:hover {background-position: right 184px; }
#acces .ville1.suze:hover {background-position: right 122px; }
#acces .ville1.pierrelatte:hover 	{	background-position:right 63px;}

#acces .ville2
	{
		width:200px;
		height:61px;
		display: inline-block;
		background-image:url("images/panneaux2.png");
		margin-top:1%;
		margin-right:1%;
		margin-left:10%;
	}
		
#acces.ville2.bourg	{	background-position:left 0px; }
#acces .ville2.lapalud  	{	background-position:left 304px ; } 
#acces .ville2.pont	{	background-position:left 242px;}
#acces .ville2.lamotte	{	background-position:left 184px;}
#acces .ville2.trois-chateaux 	{	background-position:left 122px;}
#acces .ville2.saint-just 	{	background-position:left 63px;}

#acces .ville2.bourg:hover {background-position: right 0px;}
#acces .ville2.lapalud:hover {background-position:right 304px;}
#acces .ville2.pont:hover {background-position:right 242px; }
#acces .ville2.lamotte:hover {background-position:right 184px; }
#acces .ville2.trois-chateaux:hover {background-position: right 122px; }
#acces .ville2.saint-just:hover	{	background-position:right 63px;}
/*-------------------------------------------liens des acces------------------------------------------------------------------------------------*/
#acces .panneaux1, #acces .panneaux2
	{
		list-style-type:none;
	}
 

#acces .panneaux1 li a
	{	
		background-color: transparent;
		display:block;
		width:200px;
		height:60px;
		border-radius:5px;
		box-shadow:0px 5px 5px black;
			
	}
#acces .panneaux1 li a:hover
	{	background-color: transparent;
		display:block;
		width:200px;
		height:61px;
		
	}
	
#acces .panneaux2 li a
{	
		background-color: transparent;
		display:block;
		width:200px;
		height:60px;
		border-radius:5px;
		box-shadow:0px 5px 5px black;
			
	}

#acces.panneaux2  li a:hover
	{	
background-color: transparent;
		display:block;
		width:200px;
		height:61px;
		
	}
/*------------------------------------------------------------------------------------------------------------------------------------------------*/
article .imagebalade
	{
		display:block;
		float:left;
		margin-left:20%;
		margin-top:2%;
		box-shadow:0px 5px 5px black;
	}
/*------------------------------------------------------------------------------------------------------------------------------------------------*/
article .plan
	{
		display:block;
		float:right;
		margin-right:3%;
		margin-left:1%;
		margin-top:2%;
	}

/*------------------------------------------------------------------------------------------------------------------------------------------------*/

aside
	{
		border:1px solid #2133c1;
		border-radius:10px;
		width:17%;
		vertical-align:top;
		margin-left:1%;		
	}


aside h3
	{
		color: #f4c400;
		text-decoration: underline;
		width:70%;
		margin:auto;
		font-size:18px;
		text-shadow:0px 1px 1px black;
		font-family: "trebuchet MS",serif;
		text-align: center;
	}
aside img
	{
		display: block;
		border: none;
		margin:auto;
	}

aside .element2
	{
		padding:2%;
		border-bottom:1px solid #2133c1;
	}

aside .element2 ul
	{
		list-style-image: url("images/icone.png");
		
	}
aside .element3
	{
		
		list-style-type:none;
		
	}
aside .element4
	{
		list-style-type:none;
		
	}

/*-------------------------------------------------recup----------------------------------------------------------------------*/

aside .permis
	{
		width:161px;
		height:218px;
		display: inline-block;
		background-image:url("images/permis_point.png");
	}
		
aside .permis.points{	background-position:left top; }

aside .permis.points:hover {background-position: right top;}
/*-------------------------------------------------facebook----------------------------------------------------------------------*/

aside .page
	{
		width:150px;
		height:96px;
		display: inline-block;
		background-image:url("images/fb.png");
	}
		
aside .page.facebook{	background-position:left top; }

aside .page.facebook:hover {background-position: right top;}
/*-------------------------------------------liens de la recup-----------------------------------------------------------------------------------*/

aside.recup
	{
		list-style-type:none;
		
		
	}
aside .recup li a
	{	
		background-color: transparent;
		display: block;
		width:161px;
		height:218px;
		
				
	}
aside .recup  li a:hover
	{	background-color: transparent;
		color: #5c94c8;
		display: block;
		width:161px;
		height:218px;
		
	}

/*-------------------------------------------liens facebook-----------------------------------------------------------------------------------*/

aside.facebook
	{
		list-style-type:none;		
	}
aside .facebook li a
	{	
		background-color: transparent;
		display: block;
		width:150px;
		height:96px;
		
				
	}
aside .facebook  li a:hover
	{	background-color: transparent;
		color: #5c94c8;
		display: block;
		width:150px;
		height:96px;
		
	}

/*------------------------------------------------------------------------------------------------------------------------------------------------*/

footer 
	{
		border-radius:0px 0px 5px 5px;
		width:100%;
		margin:auto;	
		
	}
footer p
	{
		text-align:center;
		color:#384063;
	
		padding:1%;
	}

footer .element
	{
		
		width:18%;
		vertical-align:top;
		margin-right:1%;
		margin-left:1%;
		padding:1%;
		height:150px;
		display:inline-block;
		border-right:1px solid #2133c1;
	}
footer .element h3
{
	text-align:center;
	color:#384063;
	font-size:0.9em;
}
	
footer .element ul
	{
		list-style-image: url("images/icone.png");
		
	}

footer .element a
	{
	color: #384063;
	text-decoration: none;
	}
footer .element a:hover
	{
		color: #f4c400;
	}