/* CSS Document */

/* COULEURS UTILISEES (code hexa / code RVB (pour utilisation dans le mapfile par exemple) / désignation) :
 *
 * #D4D4CA / / gris arrière-plan
 * #245888 / 36 88 136 / bleu du texte
 * #EEF1E8  / 238 241 232 / gris clair
 * #6087CC / 96 135 204 / bleu mairie pour l'en tête, les titres et les boutons
 * #6699CC / / bleu du fond des liens
 * #FF6600 / 255 102 0/ les liens en surbrillance
 * #FF8945 / 255 137 59 / orange des boutons sélectionnés
 *
 *
 * ordre des marges dans margin: droite bas gauche haut
 *
 */
 
*{ /* appliqué partout pour s'affranchir des marges par défaut des navigateurs */
	margin:0;
	padding:0;
	}
body{
	background-color:#D4D4CA;
	}
h3{ /* titres de parties */
	margin:5px;
	padding:5px;
	background-color:#6087CC;
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
	font-family:"Comic sans MS", sans-serif;
	font-size:small;
	}
h4{ /* titres de paragraphes (page d'aide) */
	margin:5px;
	color:#245888;
	text-align:left;
	font-family:"Comic sans MS", sans-serif;
	font-size:medium;
	font-weight:normal;
	}
h5{ /* Espace */
	margin:15px;
	color:#245888;
	text-align:left;
	font-family:"Comic sans MS", sans-serif;
	font-size:medium;
	font-weight:normal;
	}
p{/* paragraphes */
	margin:0 5px 0 5px;
	text-decoration:none;
	text-align:left;
	color:#245888;
	font-family:"Garamond", sans-serif;
	font-size:small;
	}
	p.accueil{ /* texte de la page d'accueil */
		text-align:center;
		font-size:0.8em; /* autre maniere de definir la taille que les mots clés small, normal ...*/
		font-family:"Comic sans MS", sans-serif;
		/* width:400px; */
		margin:0 15% 3px 15%;
		}
	p.texte{
		margin-top:8px;
		text-indent:15px; /* alinéa */
		text-align:justify; 
		}
	p.texte_rouge{
		color:#FF0000;
		}
	p.texte_rouge_Nouveaute{
		color:#FF0000;
		text-align:center; 
		font-size:medium;
		}
	p.illustration{ /* paragraphes contenant des images (page d'aide) ou le paragraphe contenant le lien d'entrée (page d'accueil) */
		margin:5px;
		text-align:center;
		/* font-size:large; */
		}
	p.presentation{ /* premier paragraphe des pages d'aide et de En savoir plus ...*/
		margin-bottom:10px;
		font-weight:bold;
		}
	p.separation{ /* paragraphes necessitant un trait de separation avant */
		margin-top:5px;
		padding-top:5px;
		border-top:solid 1px #6087CC;
		}
	a.sommaire{ /* liens vers les différentes parties de la page en savoir plus ... */
		color:#245888;
		}
		a.sommaire:hover{
			color:#FF6600;
			}
	a.bouton{
		padding:2px;
		text-decoration:none;
		color:#FFFFFF;
		background-color:#6087CC;
		}
		a.bouton:hover{
			color:#FF6600;
			}
	a.langue{
		float:right;
		margin:0 5px 0 5px;
		border:0;
		}
li{ /* éléments de liste */
	text-decoration:none;
	margin:0 5px 0 30px;
	color:#245888;
	font-family:"Garamond", sans-serif;
	font-size:medium;
	list-style-type:disc;
	}
.dragDrop{ /* classe pour le cadre du cliquer-glisser et la carte */ 
	border-width:thin;
	border-color:#ff8945;
	border-style:solid; 
	z-index:0; 
	}
#cache { /* div contenant le texte de chargement de la page */
    position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	visibility:hidden; /* non visible par défaut */
	text-align:center;
	font-size:x-large;
	background-image:url('RESSOURCES/cadre_transparent.gif');
}
/* ************************************************************* */
/*												*/
/* 					TITRE 						*/
/*												*/
/* ************************************************************* */
#titre2{
	background-color:#6087CC;
	background-image:url('RESSOURCES/baniere_right.png'); /* image de droite */
	background-repeat:no-repeat;
	background-position:right;
	margin-bottom:5px; /* aligne tout le reste 5px plus bas */
	}
#titre{
	height:100px;
	text-align: center;
	font-family:"Comic sans MS", sans-serif;
	background-image:url('RESSOURCES/logo_SPM_tournant.gif'); /* image de gauche */
	background-repeat:no-repeat;
	background-position:10px;
	}
	#titre h1{ /* style du grand titre de la page */
		padding:15px;
		color:#FFFFFF;
		font-size:large;
		}
	#titre a{
		padding:5px 15px 5px 15px; /* dans l'ordre : top  left  bottom  right */
		margin-left:-7px; /* une marge négative : seule méthode trouvée pour que les liens ne soit pas écartés ! */
		border:0;
		background-color:#6699CC;
		text-decoration:none;
		color:#FFFFFF;
		font-size:medium;
		}
	#titre a:hover{ /* apparence des liens au survol (peut être mal interpreté par netscape) */
		color:#FF6600;
		}
		
/* ************************************************************* */
/*												*/
/* 					CONTENU 						*/
/*												*/
/* ************************************************************* */

/* **************************** LOCALISATION ******************************** */		
#localisation1{
	/* obligation d'utiliser 2 div imbriquées pour avoir les coins arrondis définis dans 2 background différents
	 * cette div ne contient pas de texte ou d'image, juste la div localisation */
	position:relative;
	float:left;
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	width: 200px;
	margin: 0px 5px 5px 5px;
	}  
#localisation{
	position: relative;
	padding:0 0 14px 0;
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	width: 200px;
	}
	.legende{ /* paragraphe contenant l'image de la légende */
		margin-top:5px;
		text-align:center;
		}
	#localisation a{
		margin:0;
		text-decoration:none;
		}
		#localisation img{
			margin:0;
			border:0;
			}
	.actualiser{
		float:right;
		padding-right:5px;
		}
/* **************************** CENTRE ******************************** */			
#middle{
	padding:0 310px 0 210px; /* pour se caler entre la légende à gauche et les requêtes, infos à droite */
	/* border: solid red thin; */
	}
#centre3{
	margin: 0 0 5px 0; /* marge en haut et en bas du cadre central */
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/top_left.gif);
	background-position:top left;
	background-repeat:no-repeat;
	height:100%;
	}
#centre2{
	background-image:url(RESSOURCES/top_right.gif);
	background-position:right top;
	background-repeat:no-repeat;
	height:100%;
	}
#centre1{
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	height:100%;
	}
#centre{
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	padding:10px 0 10px 0;
	height:100%;
	}
	
	#outils{/* affichage des outils de navigation, déplacement, zoom, informations, vue globale, vue prédéfinie */
		position: relative;
		height:30px; /* remarque : les boutons font 25 x 25 */
		}
		#outils a{
			float:left;
			margin:0 0 0 5px; /* espace entre les boutons de la barre d'outils */
			}
			a#actualiser{ /* bouton actualiser en haut à droite */
				float:right;
				margin-right:5px;
				}
		#outils select{ /* menu déroulant pour choisir une zone (zoom_zone) */
			float:left;
			margin:0 0 0 5px;
			background-color:#EEF1E8;
			color:#245888;
			font-family: "Garamond", sans-serif;
			/*width: 112px;*/
			height: 25px;
			vertical-align:bottom;
			border: solid thin  #6087CC;
			}
	#carte{ /* affichage de la carte principale, flèches de déplacement, échelle et coordonnées du curseur */
		position: relative;
		color:#245888;
		text-align:center;
		font-family:"Garamond", sans-serif;
		font-size:medium;
		}
		#carte table{
			margin-left:5px;
			/* border-collapse: collapse;  supprime les espaces entre les cellules */
			/*
			border: solid thin green;
			*/
			}
		#carte td{
			/*
			border: solid thin blue; 
			*/
			}
		#carte INPUT { /* concerne l'affichage des coordonnées du curseur */
			background-color:#EEF1E8; /* mettre la même que l'arrière plan */
			color:#245888;
			width:60px;
			border:0;
			text-align:right;
			font-size:medium;
			font-family:"Garamond", sans-serif;
			}
		#carte td#align_haut{ /* concene la case de la table qui contient l'échelle et les coordonnées du curseur*/
			vertical-align:top;
			text-align:left;
			}
			#carte td#align_haut span#scalebar{
				float:left;
				vertical-align:top;
				}
			#carte td#align_haut span#coords{
				float:right;
				vertical-align:top;
				}
	#centre img{
		border:0;
		}
	span.souligne{
		text-decoration:underline;
		}
/* **************************** INFOS ******************************** */	
#infos3{
	float:right;
	position: relative;
	margin:0 5px 5px 5px;
	width:300px;
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/top_left.gif);
	background-position:top left;
	background-repeat:no-repeat;
	}
#infos2{
	background-image:url(RESSOURCES/top_right.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}
#infos1{
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	}
#infos{
	padding:10px 0 10px 0;
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	font-size:small;
	}
	#recherches p{ /* paragraphes de la partie de recherche defini pour mettre un trait de separation entre les types de recherche */
		padding-top:5px;
		padding-bottom:5px;
		border-top:solid 1px #6087CC;
		}
	#infos select{ /* menu déroulant pour choisir une zone (zoom_zone) */
		margin:5px 0 5px 0;
		background-color:#EEF1E8;
		color:#245888;
		font-family: "Garamond", sans-serif;
		border: solid thin #6087CC;
		}
	a.liste{ /* liens de la colonne de droite */
		color:#245888;
		font-family:"Comic sans MS",sans-serif;
		font-size:x-small;
		}
	a.liste:hover{ /* apparence des liens au survol (peut être mal interpreté par netscape) */
		color:#FF6600;
		}
/* ************************************************************* */
/*												*/
/* 					PIED DE PAGE					*/
/*												*/
/* ************************************************************* */
#pieddepage3{
	position:relative;
	clear:both; /* force le placement sous toutes les boites flottantes précédentes */
	margin:5px;
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/top_left.gif);
	background-position:top left;
	background-repeat:no-repeat;
	}
#pieddepage2{
	background-image:url(RESSOURCES/top_right.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}  
#pieddepage1{
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	}    
#pieddepage{/* contient normalement la date de révision, l'auteur, ... */
	padding:10px 10px 15px 10px; /*padding bas plus grand pour inclure suffisament les éléments flottants comme la date */
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	}
	#pieddepage p{
		text-align:center;
		}
	#pieddepage a{
		color:#245888;
		}
	#pieddepage a.norme{
		float:right;
		}
	#date{
		float:right;
		clear:both;
		margin:0;
		}
/* ************************************************************* */
/*												*/
/* 			COLONNE GAUCHE (LIENS EXTERIEURS)		*/
/*												*/
/* ************************************************************* */
#gauche3{
	position:relative;
	float:left;
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/top_left.gif);
	background-position:top left;
	background-repeat:no-repeat;
	width: 200px;
	margin: 0 5px 5px 5px;
	}
#gauche2{
	background-image:url(RESSOURCES/top_right.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}  
#gauche1{
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	}    
#gauche{
	padding:10px 0 10px 0;
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	}
	#gauche h4{
		text-align:center;
		font-size:small;
		font-weight:bold;
		}
	#gauche p{
		margin:7px 5px 7px 30px;
		min-height:20px;
		/* vertical-align:sub; (ne fonctionne pas ici)*/
		/* border:solid thin red; */
		}
	#gauche a{
		color:#245888;
		font-family:"Garamond", sans-serif;
		font-size:small;
	}
	#gauche a:hover{
		color:#FF6600;
	}
	#gauche img.icone{
		width:20px;
		height:20px;
		margin-right:7px; /* espace entre l'icone et le lien */
		float:left;
		}
/* ************************************************************* */
/*												*/
/* 				COLONNE DROITE					*/
/*												*/
/* ************************************************************* */	
	
#droite4{
	float:right;
	position: relative;
	margin:0 5px 5px 5px;
	width:300px;
	}
#droite3{
	/* position:fixed; */
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/top_left.gif);
	background-position:top left;
	background-repeat:no-repeat;
	width:300px;
	}
#droite2{
	background-image:url(RESSOURCES/top_right.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}
#droite1{
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	}
#droite{
	padding:10px 0 10px 0;
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	font-size:small;	
	}
	#droite h4{
		text-align:center;
		}
/* ************************************************************* */
/*												*/
/* 				IMPRESSION						*/
/*												*/
/* ************************************************************* */
#page_impression3{
	margin:5px; /* marge en haut et en bas du cadre central */
	background-color:#EEF1E8;
	background-image:url(RESSOURCES/top_left.gif);
	background-position:top left;
	background-repeat:no-repeat;
	width:650px;
	}
#page_impression2{
	background-image:url(RESSOURCES/top_right.gif);
	background-position:right top;
	background-repeat:no-repeat;
	}
#page_impression1{
	background-image:url(RESSOURCES/bottom_left.gif);
	background-position:left bottom;
	background-repeat:no-repeat;
	}
#page_impression{
	background-image:url(RESSOURCES/bottom_right.gif);
	background-position:right bottom;
	background-repeat:no-repeat;
	padding:10px 0 10px 0;
	}
	#page_impression img.habillage{
		clear:both;
		float:left;
		}

/* frise sur la page d'accueil */	
#frise2{
	/* width:95%; */
	height:70px;
	background-image:url(RESSOURCES/frise70.png);
	background-repeat:no-repeat;
	background-position:center;
	margin:0 5px 0 5px;
	}
#frise1{
	background-image:url(RESSOURCES/degrade_gauche.gif);
	height:70px;
	background-repeat:no-repeat;
	background-position:left;
	}
#frise{
	background-image:url(RESSOURCES/degrade_droite.gif);
	height:70px;
	background-repeat:no-repeat;
	background-position:right;
	}