@charset "utf-8";
/* CSS Document */


/* général */
* {
	margin: 0;
	padding: 0;
	border: 0;
}

ul {
	list-style: none;
}
	

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
	

#page {
	width: 1000px;
	border: 1px solid black;
	/*margin: auto;*/
	margin: 0 0 0 2px;
	overflow: hidden;
}
/******************************************************************************************************************/





/* éléments communs à toutes les pages */
#barre_bourgogne {
	width: 15px;
	height: 838px;
	background-image: url(images/barre_bourgogne.jpg);
	background-repeat: no-repeat;
	float: left;
}


#logo {
	height: 90px;
	background-image: url(images/logo_degrade.png);
	background-repeat: repeat-x;
	margin: 0 0 10px 0;
}
#logo img {
	margin: 20px 0 0 60px;
}
#deco {
	width: 432px;
	height: 85px;
	background-image: url(images/decor.png);
	background-repeat: no-repeat;
	float: right;
	margin: -100px 0 0 00px;
}

h1 {
	font-size: 18px;
	text-align: center;
	margin: 0 0 20px 0;
}



#explication {
	width: 800px;
	text-align: justify;
	margin: auto;
}
	#explication #haut {
		width: 800px;
		height: 15px;
		background-image: url(images/explication_cadre_haut.png);
		background-repeat: no-repeat;
		float: left;
	}
	#explication #bas {
		width: 800px;
		height: 15px;
		background-image: url(images/explication_cadre_bas.png);
		background-repeat: no-repeat;
		float: left;
		margin: 0 0 15px 0;
	}
	#explication #milieu {
		width: 800px;
		background-color: #e8e8e8;
		float: left;
	}
		#explication h2 {
			font-size: 14px;
			margin: 0 0 8px 30px;
		}
		
		#explication p {
			width: 700px;
			margin: auto;
		}




#general {
	width: 800px;
	text-align: center;
	margin: 15px auto 0 auto;
}
	#general #haut {
		width: 800px;
		height: 22px;
		background-image: url(images/general_cadre_haut.png);
		background-repeat: no-repeat;
		float: left;
	}
	#general #bas {
		width: 800px;
		height: 27px;
		background-image: url(images/general_cadre_bas.png);
		background-repeat: no-repeat;
		float: left;
	}
	#general #milieu {
		width: 800px;
		background-image: url(images/general_cadre_milieu.png);
		background-repeat: repeat-y;
		float: left;
	}
		#general h3 {
			width: 168px;
			height: 18px;
			background-image: url(images/puce.png);
			background-repeat: no-repeat;
			background-color: transparent;
			background-position: top left;
			font-size: 14px;
			text-align: center;
			text-transform: capitalize;
			margin: 0 0 0 25px;
			float: left;
		}
		#general h3:hover {
			text-decoration: underline;
			background-position: left bottom;
		}
		#general a {
			color: #000;
			text-decoration: none;
		}



#ariane {
	width: 950px;
	height: 16px;
	font-size: 9px;
	text-align: left;
	margin: 10px 0 15px 15px;
	float: left;
}
	#ariane .espace{
		margin: 0 5px 0 0;
	}
	#ariane #puce_accueil{
		height: 16px;
		background-image: url(images/puce_accueil.png);
		background-repeat: no-repeat;
		background-color: transparent;
		text-decoration: none;
		padding: 0 1px 0 20px;
		margin: 0 5px 0 0;
		float: left;
	}
	#ariane a{
		color: black;
		text-decoration: underline;
		font-weight: bold;
	}

/***************************************************************************/









/* accueil ************************************************************************************************/
#les_blocs {
	width: 830px;
	margin: auto;
}
.bloc {
	width: 254px;
	float: left;
	margin: 10px 0 0 17px;
}
	.bloc .haut {
		width: 254px;
		height: 14px;
		background-image: url(images/bloc_cadre_haut.png);
		background-repeat: no-repeat;
		float: left;
	}
	.bloc .bas {
		width: 254px;
		height: 12px;
		background-image: url(images/bloc_cadre_bas.png);
		background-repeat: no-repeat;
		float: left;
	}
	.bloc .milieu {
		width: 254px;
		height: 425px;
		background-image: url(images/bloc_cadre_milieu.png);
		background-repeat: repeat-y;
		overflow: auto;
		float: left;
	}
		.bloc h3 {
			font-size: 14px;
			text-align: center;
			text-transform: uppercase;
			margin: 0 0 10px 0;
		}
		.bloc .separation {
			width: 200px;
			height: 1px;
			border: 1px solid #e8e8e8;
			background-color: #f2f2f2;
			margin: 0 auto 7px auto;
		}
		.bloc li {
			width: 180px;
			height: 16px;
			background-image: url(images/puce.png);
			background-repeat: no-repeat;
			background-color: transparent;
			background-position: top left;
			margin: 0 0 5px 25px;
			padding: 0 0 2px 20px;
		}
		.bloc li:hover {
			background-position: left bottom;
		}
		.bloc a {
			width: 250px;
			color: #000;
			text-decoration: none;
		}
		.bloc .selection {
			color: #f00;

		}
		.bloc a:hover {
			text-decoration: underline;
		}

/**********************************************************************************************************/


/* detail ************************************************************************************************/
#un_bloc {
	width: 270px;
	float: left;
}

#detail {
	width: 600px;
	margin: 10px 0 0 18px;
	float: left;
}
	#detail #haut {
		width: 600px;
		height: 22px;
		background-image: url(images/detail_cadre_haut.png);
		background-repeat: no-repeat;
		float: left;
	}
	#detail #bas {
		width: 600px;
		height: 27px;
		background-image: url(images/detail_cadre_bas.png);
		background-repeat: no-repeat;
		float: left;
	}
	#detail #milieu {
		width: 600px;
		background-image: url(images/detail_cadre_milieu.png);
		background-repeat: repeat-y;
		float: left;
	}
		#detail #milieu {
		width: 600px;
		height: 407px;
		background-image: url(images/detail_cadre_milieu.png);
		background-repeat: repeat-y;
		overflow: auto;
	}
		#detail #zone_titre {
			width: 150px;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			margin: 0 0 0 38px;
			float: left;
		}
		#detail #zone_aller {
			margin: 0 25px 0 0;
			float: right;			
		}
			#detail #zone_aller .aller {
				font-size: 10px;
				text-transform: uppercase;
				text-align: right;
				color: #808080;
				text-decoration: none;
				margin: 0 0 0 20px;
				border-bottom: dotted 1px silver;
			}
			#detail #zone_aller .aller:hover {
				text-decoration: underline;
			}
		#detail #separation {
			width: 500px;
			height: 1px;
			border: 1px solid #e8e8e8;
			background-color: #f2f2f2;
			margin: 19px auto 7px auto;
		}
		#detail ul {
			width: 550px;
			margin: 20px auto 0 auto;
		}
		#detail li {
			height: 14px;
			background-image: url(images/puce_bilan.png);
			background-repeat: no-repeat;
			background-color: transparent;
			background-position: top left;
			margin: 10px 0 0 0;
		}
		#detail li:hover{
			background-position: bottom left;
		}
		.lien_xml {
			color: black;
			text-decoration: none;
			margin: 0 0 0 15px;
		}
		.lien_xml:hover {
			color: #6c9ddd;
			text-decoration: underline;
		}
		#detail #milieu .italique {
			font-style: italic;
		}


/**********************************************************************************************************/




/* choix/graphique *********************************************************************************/
#graphique {
	width: 800px;
	margin: 15px auto 0 auto;
}
	#graphique #haut {
		width: 800px;
		height: 22px;
		background-image: url(images/graphique_cadre_haut.png);
		background-repeat: no-repeat;
		float: left;
	}
	#graphique #bas {
		width: 800px;
		height: 27px;
		background-image: url(images/graphique_cadre_bas.png);
		background-repeat: no-repeat;
		float: left;
	}
	#graphique #milieu {
		width: 800px;
		height: 407px;
		background-image: url(images/graphique_cadre_milieu.png);
		background-repeat: repeat-y;
		float: left;
	}
		#milieu #contacts {
			width: 350px;
			float: left;
			margin: 50px 0 0 35px;
		}
		#milieu #aides {
			width: 350px;
			margin: 50px 0 0 25px;
			float: left;
		}
		#cont_aide {
			width: 350px;
			margin: 50px auto 0 auto;
		}
		#milieu #lien_contacts {
			width: 142px;
			height: 77px;
			background-image: url(images/choix_contacts.png);
			background-repeat: no-repeat;
			background-position: top;
			margin: 0 0 0 104px;
			float: left;
		}
		#milieu #lien_aides {
			width: 142px;
			height: 77px;
			background-image: url(images/choix_aides.png);
			background-repeat: no-repeat;
			background-position: top;
			margin: 0 0 0 104px;
			float: left;
		}
		#milieu #lien_contacts:hover {
			background-position: bottom;
		}
		#milieu #lien_aides:hover {
			background-position: bottom;
		}
		#milieu .explication {
			width: 350px;
			text-align: justify;
			color: #666;
			float: left;
			margin: 30px 0 0 0;
		}
		#milieu #navigation {
			width: 300px;
			height: 40px;
			float: right;
			margin: 70px 0 0 0;
		}
			#navigation #precedent {
				width: 140px;
				height: 40px;
				background-image: url(images/precedent.png);
				background-repeat: no-repeat;
				background-position: bottom;
				position: relative;
				float: left;
				margin: 0 15px 0 0;
				visibility: hidden;
			}
			#navigation #suivant {
				width: 140px;
				height: 40px;
				background-image: url(images/suivant.png);
				background-repeat: no-repeat;
				background-position: bottom;
				float: left;
			}
			#navigation #precedent:hover {
				background-position: top;
			}
			#navigation #suivant:hover {
				background-position: top;
			}
		#milieu #retour {
			width: 150px;
			height: 40px;
			float: left;
			margin: 70px 0 0 0;
		}
			#milieu #back {
				width: 140px;
				height: 40px;
				background-image: url(images/retour.png);
				background-repeat: no-repeat;
				background-position: top;
				float: left;
			}
			#milieu #back:hover {
				background-position: bottom;
			}



#zone1, #zone2, #zone3, #zone4, #zone5, #zone6, #zone7 {
	width: 500px;
	height: 250px;
	border: 1px solid #999;
	margin: 0 auto 0 auto;
	text-align: right;
}

#zone2, #zone3, #zone4, #zone5, #zone6, #zone7 {
	display: none;
}



/***************************************************************************************************/