/*------------------------------------------*/
/*--------- LE CADRE DES LIENS -------------*/
/*------------------------------------------*/


.cadre_menu  ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.cadre_menu  li {
	padding: 0px;
	margin:0px;
}

.cadre_menu #haut a {
	display: block;
	text-align: center;
	width: 180px;	/*LARGEUR DE L'IMAGE*/
	height: 30px;	/*HAUTEUR DE L'IMAGE*/
	text-decoration: none;
	background-image: url(../Image/menu/Menu_haut.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	line-height: 30px;
	color: #990000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFFFFF;
}
.cadre_menu #haut a:hover {
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 30px;
	background-image: url(../Image/menu/Menu_haut.png);
	background-repeat: no-repeat;
	background-position: -20px -30px;
	font-size: 14px;
}

.cadre_menu  li a {
	display: block;
	text-align: center;
	height: 30px;
	width: 180px;
	text-decoration: none;
	background-image: url(../Image/menu/menu.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	line-height: 30px;
	color: #990000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFFFFF;
}
.cadre_menu  li a:hover {

	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 30px;
	background-image: url(../Image/menu/menu.png);
	background-repeat: no-repeat;
	background-position: 0px -30px;
	font-size: 14px;
}
.cadre_menu #bas a {
	display: block;
	text-align: center;
	height: 30px;
	width: 180px;
	text-decoration: none;
	background-image: url(../Image/menu/Menu_bas.png);
	background-repeat: no-repeat;
	background-position: -20px 0px;
	line-height: 30px;
	color: #990000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFFFFF;
}
.cadre_menu #bas
 a:hover {

	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 30px;
	background-image: url(../Image/menu/Menu_bas.png);
	background-repeat: no-repeat;
	background-position: 0px -30px;
	font-size: 14px;
}
/*------------------------------------------*/
/*--- LES CADRES PRESENTATION DES REGION----*/
/*------------------------------------------*/

.cadre_meteo
{
	margin-top: 30px;
}


.cadre_meteo .milieu_1 .milieu_2 .milieu .fond .separateur_meteo {
	background-image: url(../Meteo/img/1.png);
	background-repeat: repeat-x;
	margin: auto;
	height: 20px;
	width: 80px;
	display: inline;
}
/*------------------------------*/
/*--- LES CADRES LIVRE D'OR ----*/
/*------------------------------*/
.cadre_livre_dor {
	margin-top: 30px;
	text-align: left;
}
.cadre_livre_dor .milieu_1 .milieu_2 .milieu p {
	font-size: 14px;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 5px;
	padding-left: 5px;
	width: 160px;
	text-align: justify;
}
.cadre_livre_dor .milieu_1 .milieu_2 .milieu a {
	color: #FF6600;
	text-align: right;
	padding-right: 10px;
	width: 100%;
}



/*------------------------------------------*/
/*--- DONNEE COMMUNE A TOUT LES CADRE ------*/
/*------------------------------------------*/
.titre_cadre {
	height: 30px;
	text-align: center;
	vertical-align: middle;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 30px;
	color: #800000;

}
.haut_1{
	padding-left: 30px;
	background-image: url(../Image/cadre/haut_gauche.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin: 0;
}
.haut_2{
	padding-right: 30px;
	background-image: url(../Image/cadre/haut_droit.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin: 0;
}
.haut{
	width : 100%;
	background-image: url(../Image/cadre/haut_milieu.png);
	background-repeat: repeat-x;
	background-position: center bottom;/* On met un padding-top ou un padding-bottom dans la balise "la plus imbriquée", celle qui est le plus à l'intérieur comme ça les autres div qui contiennent celle-ci seront redimmensionnées automatiquement et on vera les cadres
Notez que dans une version antérieur de ce tutorial j'utilisait l'attribut height mais je me suis rendu compte que ça créait des problèmes, notament sous Internet Explorer, je sais pas pourquoi :-S  */
	margin: 0;
	height: 30px;
}
.milieu_1{
	padding-left: 1px;
	height : 100%; /* Pour que toute la place disponible soit utilisée, et qu'ainsi tout le fond soit visible */
	background-image: url(../Image/cadre/milieu_gauche.png);
	background-repeat: repeat-y;
	background-position: left;
}
.milieu_2{
	padding-right: 1px;
	height : 100%; /* Pour que tout le fond soit visible */
	background-image: url(../Image/cadre/milieu_droit.png);
	background-repeat: repeat-y;
	background-position: right;
}
.bas_1{
	padding-left: 1px;
	background-image: url(../Image/cadre/bas_gauche.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.milieu p {
	background-image: url(../Image/cadre/milieu.png);
	background-repeat: repeat;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	padding: 0px;
	margin: 0px;
}
.bas_2{
	padding-right: 1px;
	background-image: url(../Image/cadre/bas_droit.png);
	background-repeat: no-repeat;
	background-position: right top;
}
.bas{
	width : 100%;
	padding-top : 1px;
	background-image: url(../Image/cadre/bas_milieu.png);
	background-repeat: repeat-x;
	background-position: center top;
}