/* ====================================================================== */
/* AFFICHAGE DU FOND D ECRAN -------------------------------------------- */
/* ====================================================================== */
html {
	background: 	black;
	overflow-x: 	hidden; 
	overflow-y:		hidden;
}

/* ====================================================================== */
/* CENTRAGE DU SITE ----------------------------------------------------- */
/* ====================================================================== */
.centrer-le-site{
	margin-left: 	auto;
	margin-right:	auto;
	margin-top: 	auto;
	margin-bottom:	auto;
	width: 			1550px;
	height: 		840px;
	background: 	linear-gradient(to bottom, #1E90FF, #7FFF00 60%, #F4A460);
	border:			10px green ridge;
	border-radius: 	15px;
}

/* ====================================================================== */
/* Bord en jaune et texte bleu ------------------------------------------ */
/* ====================================================================== */
p.bloc-image {
	display:		inline-block;
}

p.bloc-image img {
	border:			solid 3px blue;
	border-radius:	15px;
	width: 			100px;
}
 
p.bloc-image span {
    display:		block;
	margin-left: 	auto;
	margin-right:	auto;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	font-family:	'Comic Sans MS'; 
	color:			blue;
	margin-top:		2px;
	margin-bottom:	2px;
	border:			solid 3px blue;
	border-radius:	20px;
	background-color:#F5F5DC;
}

/* ====================================================================== */
/* Bord en bleu et texte bleu ------------------------------------------- */
/* ====================================================================== */
p.bloc-image img:hover {
	border:			solid 3px red;
	border-radius:	15px;
}

/* ====================================================================== */
/* Affichage de l option demandee en bas a droite du bandeau superieur ---*/
/* bord en rouge et texte rouge ----------------------------------------- */
/* ====================================================================== */
p.bloc-image-couleur {
	display:		inline-block;
	position:		relative;
	margin-left: 	110px;
}

p.bloc-image-couleur img{
	display:		inline-block;
	border:			solid 3px red;
	width: 			100px;
	height: 		76px;
	border-radius:  100px / 76px; 
}

p.bloc-image-couleur span {
	display:		block;
	position: 		relative;
	top:			0px;
	text-align:		center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		0.80em; 
	color:			red;
	font-family:	'Comic Sans MS'; 
	margin-top:		2px;
	margin-bottom:	2px;
	border:			solid 3px red;
	border-radius:	20px;
	background-color:#F5F5DC; 
}

/* ====================================================================== */
/* AFFICHAGE DU DIAPORAMA ----------------------------------------------- */
/* Position du diaporama -------------------------------------------------*/
/* ====================================================================== */
.diaporama {
	position: 		relative;
			top:			-1032px;
	overflow-x: 	hidden; 
	overflow-y:		hidden;
	margin-left	: 	auto;
	margin-right:	auto;
	width:			1000px;
	height:			420px; 
	border-radius:	8px;	
}

.diaporama li{
	list-style-type:none; 
}

/* COMPLEMENTS : Compteur en bas à gauche de l image ----*/
.diaporama span {
	position: 		relative;
	top: 			-35px;
	left: 			-25px;
	text-align: 	center;
	border:			solid 3px green;
	border-radius:	25px;
	background	: 	linear-gradient(#00FF00, #FFFF00);
	padding-left: 	15px;
	padding-right: 	15px;
	font-family:	'Comic Sans MS';	
	FONT-SIZE:		0.938em; 
	FONT-WEIGHT:	bold;
	color: 			blue;
}

/* ====================================================================== */
/* Position du centrage des boutons de defilement des images -------------*/
/* ====================================================================== */
.diaporama_controls{
	position: 		relative;
	top:			-1005px;
	text-align: 	center;
	FONT-WEIGHT:	bold; 
	FONT-SIZE:		1em; 
	font-family:	'Comic Sans MS';
}	

.diaporama_controls a{
	padding-left: 	20px;
	padding-right: 	20px; 
	background: 	linear-gradient( #00FF00, #FFFF00);
	border-radius:	15px;
    border:			solid 2px blue;
	text-decoration:none;
	color:			blue;
}

.diaporama_controls a:hover{
	PADDING-RIGHT:	20px; 
	PADDING-LEFT: 	20px; 
	background: 	linear-gradient(#FFFF00, #00FF00);
	border-radius:	15px;
    border:			solid 2px red;
	text-decoration:none;
	color:			red;
}

/* ====================================================================== */
/* AFFICHAGE DU TITRE A GAUCHE DANS LES DIVERS =============================== */
/* ====================================================================== */
#titre-de-option-divers-a-gauche{
	height:				570px;
	width:				100px;
	display:			inline-block;
	text-align: 		center;
	color: 				#228B22;
	font-family:		arial black;
	font-size:			1.875em;
	text-shadow:		white 5px 5px 5px;
	line-height: 		115%;
	writing-mode: 		vertical-lr;
	text-orientation:	upright;
}

/* ====================================================================== */
/* AFFICHAGE DU TEXTE A DROITE DANS LES DIVERS =============================== */
/* ====================================================================== */
#zone-de-travail{
	margin-top	: 	-637px;
	margin-left	: 	auto;
	margin-right:	auto;
	width		:	1470px; 
	height		:	570px;
	font-size	:	0.938em; 
	font-family	:	'Comic Sans MS';
}

#saut-de-ligne{
	margin-top:	-23px;
}	
	
/* ====================================================================== */
/* ZONE DU PIED DE PAGE ================================================= */
/* ====================================================================== */
#zone-du-pied-de-page{
	margin-left:	auto;
	margin-right: 	auto;
	height:			44px;
	width: 			1525px;
}
	
/* ====================================================================== */
/* AFFICHAGE DU BOUTON POUR RETOURNER VERS LE PLAN DU SITE ============== */
/* ====================================================================== */
.conteneur{
	/* positions du bouton */
			list-type-style	:	none;
			margin-top		:	-19px;
			margin-left		: 	auto; 
			margin-right	: 	0px;
	
	/*	dimensions du bouton */
			width			:	160px;
			height			: 	30px; 
			border			:	6px #DDDDDD ridge;
			overflow		:	hidden;		
			border-radius 	: 	25px;
			background		: 	linear-gradient(#00FF00, #FFFF00);

	/* le texte du bouton */
			padding-left	: 	30px;		/* padding-left pour un centrage horizontal */
			font-size		: 	1.3em;
			font-family		:	'forte';
			text-shadow		: 	2px 2px white;
			color			: 	red;
}

/* ====================================================================== */
/* AFFICHAGE DU BANDEAU EN HAUT ========================================= */
/* Centrer le bandeau =================================================== */	
#centrer-bandeau{
	margin-top:-5px;
	text-align: center;
}

/* ====================================================================== */
/* AFFICHAGE DU TEXTE EN PIED DE PAGE =================================== */
/* ====================================================================== */
#miniland{
	width			:	535px;
	height			: 	20px;
	margin-top		:	auto;
	margin-bottom	:	auto;
	margin-left		: 	auto;
	margin-right	:	auto;
}

/* ====================================================================== */
/* POSITIONNEMENT DU TEXTE ET DU TRAIT VERTICAL A GAUCHE =================*/
/* =======================================================================*/
#position-de-option-demandee{
	position: 	relative;
	top: 		-755px;
	left:		-150px;
	width: 		420px;
	height: 	100px;
	transform: 	rotate(-90deg);
}

/* AFFICHAGE DU TEXTE VERTICAL A GAUCHE ============= */
#vehicule-fonction{
	text-align: 	center;
	font-family:	arial black;
	font-size:		1.875em;
	text-shadow:	white 5px 5px 5px;
	line-height: 	150%;
}

/* AFFICHAGE DU TRAIT VERTICAL A GAUCHE ========================== */
#trait-vertical{
	margin-top: 	-412px;
	height: 		320px; 
	border-left:	3px solid ;
	transform: 		rotate(-90deg);
}

/* AFFICHAGE DU TRAIT VERTICAL A GAUCHE POUR VOILIER =================== */
#trait-vertical-voilier{
	margin-top: 	-405px;
	height: 		320px; 
	border-left:	3px solid ;
	transform: 		rotate(-90deg);
}
/* ====================================================================== */
/* ====================================================================== */
#position-toutes-images{
	margin-top: 	-65px;
	margin-left: 	auto;
    margin-right: 	auto;
	width: 			1050px;
	height: 		420px;
}

#position-fond{
	position:		relative;
	top: 			-501px;
	margin-left: 	auto;
    margin-right: 	auto;
	border-radius:	15px;
	width:			1050px;
	height: 		420px;
}

/* ====================================================================== */
#fond-pompier{
	border-radius:	15px;
	border		:	8px red ridge;
	background: 	linear-gradient( to left,#FA8072, #FFE4B5 60%,#FFDEAD);
	height:			420px;
}	

/* ====================================================================== */
#fond-tout-terrain{
	border-radius:	15px;
	border		:	8px rgb(184, 134, 11) ridge;
	background: 	linear-gradient( to left, #DAA520, #FFE4C4 60%,#FFE4C4);
	height:			420px;
}

/* ====================================================================== */
#fond-service{
	border-radius:	15px;
	border		:	8px rgb(30, 144, 255) ridge;
	background: 	linear-gradient( to left,#F7BE81, #F2F5A9 60%,#F2F5A9);
	height:			420px;
}

/* ====================================================================== */
#fond-militaire{
	border-radius:	15px;
	border		:	8px rgb(34, 139, 34) ridge;
	background: 	linear-gradient( to left, #DCDCDC, #C0C0C0 60%, #E6E6E6);
	height:			420px;
}

/* ====================================================================== */
#fond-civil{
	border-radius:	15px;
	border		:	8px rgb(123, 104, 238) ridge;
	background: 	linear-gradient( to left, #FACC2E, #FACC2E 60%, #F6E3CE);
	height:			420px;
}	

/* ====================================================================== */
#fond-cirque{
	border-radius:	15px;
	border		:	8px rgb(255, 0, 255) ridge;
	background: 	linear-gradient( to left, #00FF00, #FFFF00 60%, #00BFFF);
	height:			420px;
}

/* ====================================================================== */
#fond-timbre{
	border-radius:	15px;
	border		:	8px rgb(34, 139, 34) ridge;
	background: 	linear-gradient( to left, #DCDCDC, #C0C0C0 60%, #E6E6E6);
	height:			420px;
}

/* ====================================================================== */
#fond-autre{
	border-radius:	15px;
	border		:	8px rgb(34, 139, 34) ridge;
	background: 	linear-gradient( to left, #DCDCDC, #C0C0C0 60%, #E6E6E6);
	height:			420px;
}

/* ====================================================================== */
/* ====================================================================== */
#couleur-txt-vertical-civil{
	color: 		rgb(123, 104, 238);
}

#couleur-txt-vertical-cirque{
	color: 		rgb(255, 0, 255);
}

#couleur-txt-vertical-militaire{
	color: 		rgb(34, 139, 34);	
}

#couleur-txt-vertical-pompier{
	color: 		red;
}

#couleur-txt-vertical-service{
	color: 		rgb(30, 144, 255);
}

#couleur-txt-vertical-tt{
	color: 		rgb(184, 134, 11);
}

/* =================================================================*/
/* ====================== FIN ===================================== */
/* =================================================================*/