body{
	width:100%;									/*ces 4 paramètres gèrent la largeur relative du site chez les visiteurs*/
	margin: auto;
	min-width: 800px;
	max-width: 1900px;
	background-image: url("images/fondfonce3.jpg");
	background-repeat: repeat;
	font-family: "Gill Sans MT Light", "Gill Sans Light", Arial, Verdana, serif;
	font-size: 1em;
	line-height: 25px;
}
div#en_tete{
	
	height: 160px;
	margin-top: 10px;
	margin-bottom: 10px;
}
div#colonne1{									/*Gère la largeur de la colonne gauche*/
	float: left;								/*menu gauche couleur bleu clair*/
	width: 125px;
	position : relative;
	margin-right: 2%;
	color: #13d5f2;
	font-size: 1.1em;
	text-align: center;
	display:inline;
}
div#colonne2{									/*Gère la largeur de la colonne droite*/
	float: right;
	position: relative;
	width: 260px;								/*afin que le menu de droite soit aligné à la banniere*/
	margin-left: 2%;	
}
div#centre{
	overflow: hidden;							/*Permet la séparation des colonnes mais attention aux éléments qui dépassent, ils seront coupés !*/
	min-height: 800px;
	margin-left: 25px;
	
	/*pas de bodures arrondies ni d'ombrage car le fond n'a pas une taille définie*/

}
div#footer{
	width: 100%;
	height: 200px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-image: url("images/fond_footer2.jpg");
	
	
}
div.conteneur_boites{							/*Gère l'ensemble des boites de la page d'accueil*/
	left: 50%;
	margin-left: -45%;
	position: relative;
	width: 95%;									/*La boite qui englobe les autres boites prendra 90% de la largeur de la div centre*/

}
div.float{										/*1ere boite qui fait 1/3 du conteneur boite*/
	float: left;
	display:inline;
	margin: 10px;
	width: 30%;
	background-color: #4b4b4b;
	border: #f8f8f8 1px solid;
	padding: 0px;
	line-height: 20px;
	text-align: justify;						/*cette boite sera toujours en justifié*/

	
	/********CSS3******/
	-moz-box-shadow: 4px 4px 10px white;		/*ombre portée pour Firefox*/
	-webkit-box-shadow: 4px 4px 10px white;		/*ombre portée pour chrome & safari*/
	-moz-border-radius: 10px;					/*coins des boites arrondis pour Firefox*/			
	-webkit-border-radius: 10px;				/*coins des boites arrondis pour chrome & Safari*/
	border-radius: 10px;						/*coins des boites arrondis pour Opéra et les autres adoptant le CSS3*/
	box-shadow: 4px 4px 10px white;				/*ombre portée pour Opéra et les autres adoptant le CSS3*/
	
}
div.float2{										/*2eme boite qui fait 2/3 du conteneur boite*/
	float: left;
	display:inline;
	margin: 10px;
	width: 60%;
	background-color: #f8f8f8;
	border: #777777 1px solid;
	padding: 0px;
	line-height: 20px;
	text-align: justify;						/*cette boite sera toujours en justifié*/

	/********CSS3******/
	-moz-box-shadow: 4px 4px 12px #13d5f2;		/*ombre portée pour Firefox*/
	-webkit-box-shadow: 4px 4px 12px #13d5f2;	/*ombre portée pour chrome & safari*/
	-moz-border-radius: 10px;					/*coins des boites arrondis pour Firefox*/			
	-webkit-border-radius: 10px;				/*coins des boites arrondis pour chrome & Safari*/
	border-radius: 10px;						/*coins des boites arrondis pour Opéra et les autres adoptant le CSS3*/
	box-shadow: 4px 4px 12px #13d5f2;			/*ombre portée pour Opéra et les autres adoptant le CSS3*/
}
div.float3{										/*dans cette boite, on choisira l'alignement du texte avec un span*/
	float: left;
	display:inline;
	margin : 7px;
	width: 30%;
	/*background-color: #010a0b;*/
	border: #13d5f2 1px solid;
	padding: 0;
	color: white;
	
	
	/********CSS3*********/
	-moz-border-radius: 0 10px ;				/*coins des boites arrondis pour Firefox*/		
	-webkit-border-radius: 0 10px;				/*coins des boites arrondis pour chrome & Safari*/
	border-radius: 0 10px;						/*coins des boites arrondis pour Opéra et les autres adoptant le CSS3*/
	-moz-box-shadow: 2px 2px 5px white;		/*ombre portée pour Firefox*/
	-webkit-box-shadow: 2px 2px 5px white;		/*ombre portée pour chrome & safari*/
	background-color: rgba(1, 10, 11, 0.5);		/*génère la transparence de la boite 1,10,11=couleur RVB et 0.5= pourcentage d'opacité*/

}
div.float4{										/*boite alignée à gauche et 350px*/
	float: left;
	display:inline;
	margin-left: 15px;
	width: 350px;
	text-align: right;
	
	/*********CSS3*******/
	-moz-border-radius: 15px;					/*coins des boites arrondis pour Firefox*/		
	-webkit-border-radius: 15px;				/*coins des boites arrondis pour chrome & Safari*/
	border-radius: 15px;						/*coins des boites arrondis pour Opéra et les autres adoptant le CSS3*/
	
	
}

div.float6{										/*c'est le float3 aligné à droite*/
	float: right;
	display:inline;
	margin : 10px;
	width: 30%;
	padding: 0;
	color: white;
	
	
	/********CSS3*********/
	-moz-border-radius: 0 10px ;				/*coins des boites arrondis pour Firefox*/		
	-webkit-border-radius: 0 10px;				/*coins des boites arrondis pour chrome & Safari*/
	border-radius: 0 10px;						/*coins des boites arrondis pour Opéra et les autres adoptant le CSS3*/

	

}

div.float9{										/*float pour texte*/
	float: left;
	display:inline;
	color: white;
	width: 50%;
	padding: 10px;
	
}
div#float10{										/*float simple pour images*/
	float: left;
	display:inline;
}
div#float11{
	float: right;
	display:inline;
}
div.normal{										/*permet de supprimer l'effet float -> permet de placer une div sous des float*/
	width: 90%;
	margin: 10px auto;
	clear: left;		
}
div.centrer{										/*permet de centrer du texte + images*/
	margin: auto;
	text-align: center;
	min-width: 200px;
}
div#tarifs{

	text-align: center;
	font-size: 1.6em;
	font-weight: bold;
	width: 250px;
	height: 60px;
	line-height: 55px;
	margin: auto;
	
	/*****CSS3******/
	background-color: rgba(70,248,124, 0.25);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}



div#presta:hover{

	/*****CSS3******/
	background-color: rgba(255,20,147, 0.25);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
div#materiel:hover{

	/*******CSS3*******/
	background-color: rgba(19,213,242,0.25);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
div#blog:hover{	


	/******CSS3*******/
	background-color: rgba(0, 0, 0, 0.5);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
div#contact:hover{

	/******CSS3******/
	background-color: rgba(231,244,35,0.25);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}


div.eclaircir:hover{

	/*****CSS3******/
	background-color: rgba(44,102,112, 0.5);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
div#image_eclairee{
	margin:0;
}

div#marge-img{
	float: left;
	margin : 10px;
}
div#illustration{
	position: absolute;
	
}

img{border: 0px;}								/*supprime le cadre d'une image*/


a{												/* lien hypertexte bleu foncé sans soulignement*/
	color: #0b7888;								
	text-decoration: none;
}
a:hover{color: white;}							/* lien blanc lorsque l'on passe la souris dessus*/



h1{												/* titre h1 + grand et bleus*/
	font-size: 2.5em;							
	color: #0b7888;
	text-align: center;
}
h2{
	font-size: 1.9em;
	color: #0b7888;
	text-decoration: underline;
}
h3{
	color: #0b7888;
	font-size: 1.4em;
}
h4{
	color:white;
	text-decoration: underline;
	font-weight: bold;
}
	
p{
	margin-left: 15px;
	margin-right: 15px;
	font-size: 1em;
	color: white;
	position: relative;
	
}
ul.centre{										/*centre le tableau */
	margin: auto;	
	width: 45%;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 15px;
	
	/******CSS3*****/
	background-color: rgba(1, 10, 11, 0.5);
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	
}
li{
	color: white;
}
li.gras_blanc{
	font-weight: bold;
	color: white;
	text-decoration: underline;
}

dl{
	color: white;
}
dt{												/*gère les mots à définir*/
	color:white;
	text-decoration: underline;
	
}
dd{												/*gère la définition des mots*/
	color: #f8f8f8;
}
table#petit{											/*défini le tableau*/
	margin: auto;								
	width: 30%;
	color: white;
	text-align: center;
	padding-bottom: 30px;
	
	
	/******CSS3*****/
	background-color: rgba(1, 10, 11, 0.5);
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
table#grand{
	margin: auto;								
	width: 80%;
	color: white;
	text-align: left;
	padding-left: 25px;
	padding-bottom: 25px;
	padding-top: 25px;
	
	/******CSS3*****/
	background-color: rgba(1, 10, 11, 0.5);
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
td.aligne{
	color: white;
	padding-left: 30px;
	
}

.souligne{
	text-decoration: underline;
}
.gras{
	font-weight: bold;
	color: #0b7888;
}
.petit_texte{
	text-align: center;
	font-size: 0.85em;
	line-height: 1.1em;
}
.titre{
	font-weight: bold;
	color: #13d5f2;
	font-size: 1.6em;

}
.titre_accueil{
	font-size: 2.1em;
	text-align: center;

}
.gras_souligne{
	font-weight: bold;
	color: #0b7888;
	text-decoration: underline;
	font-size: 1.2em;
}
.noir{
	color: black;
}
.blanc{
	color: white;
}
.retrait_li{
	padding-left: 20px;
	list-style-type: none;
}
.retrait_dt{
	padding-left: 40px;
}
.gauche{
	float: left;
}
.droite{
	float: right;
}
.gras_blanc{
	font-weight: bold;
	color: white;
	text-decoration: underline;
}
.gras_blc{
	font-weight: bold;
	color: white;
}
.vertical_align{
	vertical-align: middle;
}
.petits_caracteres{
	font-size: 0.8em;
	color: white;
}
.petit_italique{
	font-style: italic;
	font-size: 0.9em;
}