/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
	margin: 0;
	padding: 0;
	background-color: #EBEBEB;
}
hr.both
{
	visibility:hidden;
	height:0;
	width:0;
	clear:both;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}
#conteneur {
	width:780px;
	margin:0 auto;
	border: 1px solid #999999;
	background-color: #FFFFFF;
	background-image: url(../images/fond_haut.jpg);
	background-repeat: no-repeat;
	background-position: center -3px;
}
#centre {
	width: 520px;
	border-left-width: 1px;
	position: relative;
	float: right;
	padding-right: 30px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#gauche {
	float:left;
	width: 205px;
	position: static;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin-top: 30px;
	margin-left: 8px;
}

#menugauche {
	position: static;
	background-image: url(../images/actu_fond.gif);
	background-repeat: repeat-y;
	padding: 0px;
	background-position: left;
	margin: 20px 0px 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	width: 203px;
}

div#menugauche H1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	padding-right: 2px;
	padding-left: 15px;
	font-style: normal;
	font-variant: small-caps;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 10px 0px 0px;
}

div#menugauche p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	padding-right: 5px;
	padding-left: 5px;
}


div#menugauche a {
	color: #333333;
	text-decoration: none;
	list-style-type: circle;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menugauche a:hover {
	color: #cc0000;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */

div#menugauche a:active {
	color: #666666;
	background-color: #CCCCCC;
}


div#menugauche ul {
	list-style-type: none;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px 0px 0px 10px;
	text-indent: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menugauche li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
	line-height: 20px;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

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


#droite {
	float:left;
	width: 181px;
	padding: 0px;
	margin: 0px;
}


     #cotecentre {
	float:right;
	width: 215px;
	margin-left: 7px;
	margin-right: 4px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999999;
	padding-left: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 0px;
	background-color: #FFFFFF;
}

div#centre h1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	color: #333333;
	margin: 0px;
	padding: 0px 0px 5px;
}

div#centre h2{
	font-family: "Franklin Gothic Medium", Verdana;
	font-size: 16px;
	color: #00B273;
	background-color: #E9E9E9;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 15px;
}

#parcours{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	margin: 0px;
	padding: 0px 0px 5px 6px;
}


div#parcours a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	margin: 0px;
	padding: 0px 0px 5px;
	text-decoration: none;
}

	#zoom {
	background-image: url(../images/infoplus.gif);
	background-position: 8px 0px;
	background-repeat: no-repeat;
	margin-left: 5px;
	margin-right: 0px;
	padding-left: 5px;
	color: #FFFFFF;
	margin-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #ABABAB;
	padding-top: 40px;
	font-weight: bold;
	padding-bottom: 10px;
}

div#cotecentre p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	padding-bottom: 2px;
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	width: 220px;
}

div#cotecentre h1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00b373;
	margin: 0px;
	padding: 0px 0px 5px;
}

div#cotecentre h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #990000;
	padding: 0px;
	text-align: center;
	margin-top: 3px;
	margin-bottom: 5px;
}




	#edito {
	background-image: url(/images/zoom_rouge.gif);
	background-position: 8px 0px;
	background-repeat: no-repeat;
	padding-top: 40px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 5px;
}

#pied {
	text-align: center;
	background-image: url(/images/pied_bas.gif);
	background-repeat: no-repeat;
	clear: both;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
}


div#pied p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 20px;
	background-position: left;
}


div#pied a{
	text-decoration: none;
	color: #FFFFFF;
}

div#pied  a:hover {
	background-color: #CCCCCC;
	color: #666666;
}
/*]]>*/


#menudroit a:hover {
text-decoration: none;
}
/*]]>*/



div#menueconomie {
	padding: 45px 0px 0;
	background: url(images/menu_economie.gif) no-repeat 0px 10px;
	margin: 0px;
	width: 170px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menueconomie ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px 0px 0px 5px;
	text-indent: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menueconomie li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
	list-style-type: square;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menueconomie li a {
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menueconomie li a:hover {
	color: #cc0000;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */




div#menuprojets {
	padding: 45px 0px 0;
	background: url(images/menu_projets.gif) no-repeat 0px 10px;
	margin: 0px;
	width: 170px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menuprojets ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px 0px 0px 5px;
	text-indent: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menuprojets li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menuprojets li a {
	font-weight: normal;
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menuprojets li a:hover {
	color: #3399FF;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */



div#menutourisme {
	padding: 45px 0px 0;
	background: url(images/menu_tourisme.gif) no-repeat 0px 10px;
	margin: 0px;
	width: 170px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menutourisme ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px 0px 0px 5px;
	text-indent: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menutourisme li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 16px;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menutourisme li a {
	font-weight: normal;
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menutourisme li a:hover {
	color: #66cc00;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */


div#menucc {
	background: url(/images/menu_comdecom.gif) no-repeat 0px 0px;
	width: 180px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	margin: 0px;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menucc ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;
	text-indent: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menucc li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
	list-style-type: square;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menucc li a {
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menucc li a:hover {
	color: #FF9900;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */


div#menuvie {
	padding: 45px 0px 0;
	background: #FF9900 url(/images/menu_vivre.jpg) no-repeat 0px 0px;
	margin: 0px;
	float: left;
	width: 180px;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menuvie ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	padding: 0px;
	text-indent: 0px;
	margin-left: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menuvie li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
	list-style-type: square;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menuvie li a {
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menuvie li a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */


div#menucc {
	background: url(/images/menu_comdecom.gif) no-repeat 5px 0px;
	padding-top: 35px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	margin: 0px;
	width: 100%;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menucc ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px 0px 0px 10px;
	text-indent: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menucc li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
	list-style-type: square;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menucc li a {
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menucc li a:hover {
	color: #FF9900;
	text-decoration: underline;
}
/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */


div#menuvie {
	background: #FF9900 url(/images/menu_vivre.jpg) no-repeat 5px 10px;
	margin: 0px;
	width: 100%;
	padding-top: 45px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */ 

div#menuvie ul {
	list-style-type: square;
	color: #666666;
	list-style-position: inside;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	padding: 0px 0px 0px 10px;
	text-indent: 0px;
	margin-left: 0px;
} 
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */ 

div#menuvie li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
	list-style-type: square;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */ 

div#menuvie li a {
	color: #333333;
	text-decoration: none;
}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */ 

div#menuvie li a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
    .bandeau {
	width: 540px;
	position: static;
	float: right;
	text-align: right;
}
    .logo {
	margin-right: 13px;
	margin-left: 13px;
}
    .Style1 {
	color: #FF0000;
	font-weight: bold;
	font-size: 14px;
}
div#parcours a:hover {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #990000;
	margin: 0px;
	padding: 0px 0px 5px;
	text-decoration: none;
}
#ficheinfo {
	background-image: url(../images/ficheinformation.gif);
	background-position: 8px 0px;
	background-repeat: no-repeat;
	padding-left: 20px;
	color: #333333;
	margin-top: 20px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 30px;
	border: 1px solid #FF0000;
	background-color: #CCCCCC;
	padding-right: 20px;
}


#centre a span {
	display: none;
	text-decoration: none;
	z-index: 300;
}
#centre a:hover span {
	display: inline;
	width: auto;
	height: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 20px;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	z-index: 5;
	position: absolute;
	top: 50px;
	left: -20px;
}
#conteneur #gauche #menugauche ul li   {
	padding: 0px;
	text-indent: 0px;
	font-size: 0.7em;
	line-height: normal;
	margin-top: 8px;
	margin-right: 4px;
	margin-bottom: 7px;
	margin-left: 0px;
}
.demi {
	float: left;
	width: 240px;
	margin-right: 20px;
}