/* ==============================
 élèments communs
================================= */
* {
	margin: 0;
	padding: 0;
}
body {
	background: #D0E8FF url(../images/haut.gif) repeat-x;
	color: #0000B3;
	font: normal 65.5% 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	margin: 0;
	text-align: justify;
	color: #0000B3;
}
.clearer {
	clear: both;
 	margin: 0;
	padding: 0;
}

/* ==============================
	structure de la page
================================= */
.container {
	background: url(../images/haut_gauche.gif) no-repeat;
}

/* ==========================
 élèment du header
=============================  */
#header {
	height: 92px;
}
#header h1 {
	padding:0 0 0 0;
}
#header p {
	width:470px;
	height: 92px;
	padding-top:0;
	background: transparent url(../images/masque1.gif) no-repeat top left;
	margin-top:0;
	margin-left: 310px;
	color:#0000B3;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 25px;
	text-align: center;
}
html>body #header p {
	width:470px;
} 
#header img {
	float:left;
	margin-top: 17px;
	margin-left: 35px;
}

/* ==========================
 corps de la page
=============================  */
.corps {
	background: url(../images/corps_gauche.gif) no-repeat;
	clear: both;
	padding: 12px 12px 0 52px;
}

/* ==========================
 élèment partie gauche
=============================  */
.gauche {
	float: left;
	width: 24%;
}
#menu {
	width: 90%;
	border: 0 solid #0377BF;
	margin: 0 auto;
	color: #333;
   }
   
#conseils {
	width: 100%;
	margin: 0 auto;
   }

#menu ul {
	list-style: none;
	margin:0;
	border: none;
}

#menu li {
	border-bottom: 1px solid #91F8FC;
	margin: 0;
   }

#menu li a {
	display: block;
	padding: 4px 4px 4px 0.4em;
	border-left: 10px solid #0B69AD;
	border-right: 10px solid #75C3E3;
	background-color: #2175bc;
	font-size: 1.2em;
	color: #fff;
	text-decoration: none;
}

#menu a span {     /* définition de la balise <span> inclue dans <a> */
display: none;
}

#menu a:hover span {   /* définition de la balise <span> au survol */
display: block;
position: absolute;
padding: 2px;
left: 147px;
width: 96px;       /* largeur de la zone de commentaires, selon la taille du menu */
height: 71px;
border: 1px solid #000000;
background: #2586d7 url('../images/fonds_span.jpg') no-repeat;
font-size: 0.9em;
font-weight: bold;
text-align: left;
line-height: 20px;
color: #000000;
}


html>body#menu li a {
	width: auto;
   }

#menu li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background: #2586d7 url('../images/fleche1.gif') no-repeat;
	background-position:2% 50%;
	padding-left:15px;
	color: #FFFF10;
	text-decoration: none;
   }
   
#menu_bas {
	margin-bottom: 2px;
   }	

/* ==============================
	  sous-menu rando
================================= */
.anylinkcss {
position:absolute;
visibility: hidden;
	width: 250px;
	border: 0 solid #0377BF;
	margin: 0 auto;
	color: #333;
z-index: 100;
}

.anylinkcss ul {
	list-style: none;
	margin:0;
	border: none;
}

.anylinkcss li {
	border-bottom: 1px solid #91F8FC;
	margin: 0;
   }

.anylinkcss li a {
	display: block;
	height: 18px;
	margin: 0 auto;
	padding: 0 0 0 0.4em;
	border-left: 10px solid #0B69AD;
	border-right: 10px solid #75C3E3;
	background-color: #2175bc;
	font-size: 1.1em;
	color: #fff;
	text-decoration: none;
}

.anylinkcss a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #FF1838;
	color: #FFFF10;
	text-decoration: none;
}

/* ==========================
 élèment partie droite
=============================  */
.droite {
	float: right;
	margin-right: 4%;
	width: 69%;
	background: #FFFFFF;
}

.sous_titre {
	font-weight: bold;
	padding:2px;	
}

.bleu_blanc {
	font-size: 1.4em;
	color:#FFFFFF;
	background-color:#00B0FF;
	padding:2px;
	margin-top: 2px;
}

/* ==========================
 pied de page
=============================  */
.footer {
	background: #62C1FC url(../images/footer.jpg) no-repeat top left;	
	height: 44px;
	font-size: 1.2em;
	line-height: 40px;
	text-align: center;
}
.footer a {
	color: #0000B3;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}

/* ==============================
	  cadre coin arrondi corps
================================= */ 
		#cadre_1 {
		    width:101%;
			background-image:url('../images/cote_gauche.gif');
			background-repeat: repeat-y;
            background-color : #FFFFFF;
		}
        #cadre_2 {
			background-image:url('../images/cote_droit.gif');
			background-repeat: repeat-y;
            background-position: right;
		}

		#haut {
            height:28px;
            background-image:url('../images/haut_1.gif');

		}

		#haut img {
		    vertical-align:top; /* for ie5*/
		}

			#coin_g_h {
   			width:12px;
				height:28px;
				background-image:url('../images/coin_g_h.gif');
				float: left;

			}
			#coin_d_h {
   			width:18px;
				height:28px;
				background-image:url('../images/coin_d_h.gif');
				float: right;

			}
		#contenu {
			font-size: 1.2em;
			padding: 0 12px 0 5px;
		}

		.inter_titre {
			padding: 2px 0 1px 2px;
		}

		.inter_para {
			padding: 2px 0 10px 7px;
		}

		.inter_sous_titre {
			padding: 10px 0 1px 7px;
		}

		.titre_rando {
			background-color:#C8F0F0;
			font-weight: bold;
			border:1px outset #0000B3;
			padding: 2px;
		}

		.sous_titre_rando {
			background-color:#C8F0F0;
			font-weight: bold;
			border-bottom:1px solid #0000B3;
			padding: 1px;
		}

		#bas {
            height:28px;
            background-image:url('../images/bas_1.gif');
		}
			#coin_g_b {
                width:12px;
				height:28px;
				background-image:url('../images/coin_g_b.gif');
				float: left;
			}
			#coin_d_b {
                width:18px;
				height:28px;
				background-image:url('../images/coin_d_b.gif');
			    float:right;
			}
/* ==============================
	  fin cadre coin arrondi droit
================================= */

/* ==============================
	  cadre coin arrondi gauche
================================= */ 
		#cadre_3 {
			width:101%;
			background-image:url('../images/cote_gauche.gif');
			background-repeat: repeat-y;
            background-color : #FFFFFF;
		}
        #cadre_4 {
			background-image:url('../images/cote_droit.gif');
			background-repeat: repeat-y;
            background-position: right;
		}

		#haut_m {
            height:28px;
            background-image:url('../images/haut_1.gif');

		}

		#haut_m img {
		    vertical-align:top; /* for ie5*/
		}

			#coin_m_g_h {
                width:12px;
				height:28px;
				background-image:url('../images/coin_g_h.gif');
				float: left;

			}
			#coin_m_d_h {
                width:18px;
				height:28px;
				background-image:url('../images/coin_d_h.gif');
				float: right;

			}
		#contenu_m {
			padding: 1px 15px 1px 11px;
		}

		#contenu_m p {
			margin: 0px;

		}

		#bas_m {
            height:28px;
            background-image:url('../images/bas_1.gif');
		}
			#coin_m_g_b {
                width:12px;
				height:28px;
				background-image:url('../images/coin_g_b.gif');
				float: left;
			}
			#coin_m_d_b {
                width:18px;
				height:28px;
				background-image:url('../images/coin_d_b.gif');
			    float:right;
			}
/* ==============================
	  fin cadre coin arrondi gauche
================================= */

/* ==============================
	  cadre coin arrondi conseils
================================= */ 
		#cadre_5 {
			width:101%;
			background-image:url('../images/cote_gauche_c.gif');
			background-repeat: repeat-y;
            background-color : #FFFFFF;
		}
        #cadre_6 {
			background-image:url('../images/cote_droit_c.gif');
			background-repeat: repeat-y;
            background-position: right;
		}

		#haut_m_c {
            height:28px;
            background-image:url('../images/haut_1_c.gif');

		}

		#haut_m_c img {
		    vertical-align:top; /* for ie5*/
		}

			#coin_m_g_h_c {
                width:12px;
				height:28px;
				background-image:url('../images/coin_g_h_c.gif');
				float: left;

			}
			#coin_m_d_h_c {
                width:18px;
				height:28px;
				background-image:url('../images/coin_d_h_c.gif');
				float: right;

			}
		#contenu_m_c {
			padding: 1px 15px 1px 11px;
		}

		#contenu_m_c p {
			margin: 0px;

		}

		#bas_m_c {
            height:28px;
            background-image:url('../images/bas_1_c.gif');
		}
			#coin_m_g_b_c {
                width:12px;
				height:28px;
				background-image:url('../images/coin_g_b_c.gif');
				float: left;
			}
			#coin_m_d_b_c {
                width:18px;
				height:28px;
				background-image:url('../images/coin_d_b_c.gif');
			    float:right;
			}
/* ==============================
	  fin cadre coin arrondi conseils
================================= */

/* ==========================
 élèment de la fenêtre
=============================  */
#fenetre {
	width: 100%;
	height:175px;
	padding: 0 1px 0 6px;
	margin:0 auto;
	background-color : #FFFFFF;
	overflow:auto;
}

html>body #fenetre {
	width:100%;
} 

#interieur p {
	margin:1px 0 5px 7px;
}	
	
.inter {	
	padding: 1px 0 5px 2px;
}

.inter_titre_fen {
	padding: 2px 0 1px 2px;
}

.intercont {	
	padding: 1px 0 5px 2px;
}

.titre {
	font-weight: bold;
	text-align: left;	
	padding: 0 0 0 2px;
	border-bottom :1px solid #2296F6;
	border-left :1px solid #2296F6;	
}

.titre_1 {
	font-weight: bold;
	text-align: left;	
	padding: 0 0 0 2px;
	border:1px solid #2296F6;	
}

/* ==========================
 élèment de la petite fenêtre
=============================  */
#fenetre_p {
	width: 100%;
	height:125px;
	padding: 0 1px 0 6px;
	margin:0 auto;
	background-color : #FFFFFF;
	overflow:auto;
}

html>body #fenetre_p {
	width:100%;
} 

#interieur_p p {
	margin:2px 0 5px 7px;
}	
	
.inter_p {	
	padding: 1px 0 5px 2px;
}

.inter_titre_fen_p {
	padding: 2px 0 1px 2px;
}

.intercont_p {	
	padding: 1px 0 5px 2px;
}

.titre_p {
	font-weight: bold;
	font-size: 115%;
	text-align: left;	
	padding: 0 0 0 2px;
	margin-left: 9px;
	border-bottom :1px solid #2296F6;
	border-left :1px solid #2296F6;	
}

.titre_p1 {
	font-weight: bold;
	font-size: 135%;
	text-align: center;	
	padding: 2px;
	border:1px solid #2296F6;	
}

/* ==========================
 position des images
=============================  */
.image_gauche {
	float: left;
	clear: both;
	padding: 0 0 0 0; /* ecart entre l'image et la bordure */
	margin-left: 1px;
	margin-top: 1px;
	margin-right: 2px; /* ecart entre la bordure et le texte */
	margin-bottom: 0; /* ecart vers le bas */
	border: 0 solid #000000; /* la bordure */
}

.image_droite {
	float: right;
	clear: both;
	padding: 0 0 0 0; /* ecart entre l'image et la bordure */
	margin-left: 2px;
	margin-top: 2px;
	margin-right: 2px; /* ecart entre la bordure et le texte */
	margin-bottom: 0; /* ecart vers le bas */
	border: 0 solid #000000; /* la bordure */
}

.image_liste {
	padding: 3px 3px 0 0; /* ecart entre l'image et la bordure */
	margin-left: 12px;
	margin-top: 2px;
	margin-right: 2px; /* ecart entre la bordure et le texte */
	margin-bottom: 0; /* ecart vers le bas */
}

/* ==============================
		définition des liens 
================================= */
a.liencorps:link {
	color: #FFFFFF;
	background: #2175bc;
   padding: 2px 2px 2px 2px;
   font-size: 1.2em;
	text-decoration : none;
}

a.liencorps:active {
	color: #FFFFFF;
	background: #2175bc;
   padding: 2px 2px 2px 2px;
	text-decoration : none;
}

a.liencorps:visited {
	color: #FFFFFF;
	background: #2175bc;
   padding: 2px 2px 2px 2px;
	text-decoration : none;
}

a.liencorps:hover {
   font-size: 1.2em;
   font-weight: bold;
	color: #0000b3;	
	background: transparent url('../images/fleche1.gif') no-repeat;
	background-position:2% 50%;	
   padding: 2px 2px 2px 15px;
	text-decoration : none;
}		

a.liensbas:hover {
   font-size: 1.2em;
	color: #FFFF10;
	background: #2586d7;
	border-bottom:5px solid #FFFF10;	
   padding: 2px;
	text-decoration : none;
}


a.liensbas:link {
   font-size: 1.2em;
	color: #FFFFFF;
	background: #2586d7;
   padding: 2px;
	text-decoration : none;
}

a.liensbas:active {
   font-size: 1.2em;
	color: #FFFFFF;
	background: #2586d7;	
   padding: 2px;
	text-decoration : none;
}

a.liensbas:visited {
   font-size: 1.2em;
	color: #FFFFFF;
	background: #2586d7;
   padding: 2px;
	text-decoration : none;
}

a.liensbas:hover {
   font-size: 1.2em;
	color: #FFFF10;
	background: #2586d7;
	border-bottom:5px solid #FFFF10;	
   padding: 2px;
	text-decoration : none;
}

/* ==============================
	positions des liens rouges
================================= */
.tab_right {
	padding-top: 3px;
	padding-bottom: 0;
	padding-right: 3px;
	text-align: right;
}

/* ==============================
	element de liste
================================= */
.liste {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}
.liste ul li {
	list-style: url(../images/liste.gif);
	margin: 0 0 0 30px;
	padding: 1px 0 0 0;
}

.liste_2 {
	margin: 0 0 0 30px;
	padding: 0;
}
.liste_2 ol ul li {
	list-style: url(../images/liste.gif);
	
	padding: 1px 0 0 0;
}