body , html{
	
	font: 8pt/16pt arial; 
	color: #FFFFFF; 
	margin : 0px 0px 0px 0px;
	height:100%;
	scrollbar-base-color: #000000;
}

#container
{	
	width:100%;
	height:100%;
	text-align:center;
	background-color:#E6F2A8;

}

#table_charte
{
	/*  Définir ici ce que vous mettiez auparavant dans la balise table */
	/*  Dans la page HTML, quand vous voulez vous servir de ce style pour votre tableau faites comme ceci : */
	/*  <table id="table_charte">   */
	height:100%;
	min-height:100%;
	
	/*  pour un site centré utilisez les propriétés suivantes*/
	width:780px;
	margin-left:auto;
	margin-right:auto;

	   
	
	/*  pour un site en 100%, utilisez les propriétés suivantes  
	width:100%;
	background-color:#B0D262;  */
}

#td_charte	
{
	height:90%;
	width:100%;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	font-style:normal;
	color:#FFFFFF;
	padding-left:20px;
	padding-right:20px;
	background-color: #1A1A1A;
}

a { 
	font-weight: bold; 
	text-decoration: none; 
	color: #FFFFFF;
	}
a:hover { 
	font-weight: bold; 
	text-decoration: underline; 
	color: #FFFFFF;
	}


h1
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	font-style:normal;
	color:#FFFFFF;
	background-repeat:repeat-x;
	background-position:left bottom;
	height:30px;
	padding-left:0px;
	padding-top:20px;
	background-image: url(images/charte/carre.gif);
	width: 100%;
}
h4
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	color:#FF8A00;
}
h5
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	color:#ffffff;
	text-align: center;
}
li{
	list-style-image: url(images/charte/puce01.gif);
	margin-bottom:15px;
}
.li1{
	list-style-image: url(images/charte/puce01.gif);
	margin-bottom:0px;
}

/* Images + légende */
.div_img
        {
         width:900px;
		 height:160px;
         padding:5px 0px 5px 0px;
		 /*border:1px red solid;*/
        }

.img_image{
         float:left;
         width:130px;
         height:104px;
         /*border:1px red solid;*/ 
         margin:0px 10px 4px 0px; /****** ici margin bottom pour changer marges ss Firefox entre div_img et img_compagnons ****/
         font-family: Arial, Helvetica, sans-serif;
         font-size:11px;
         color: #A2A2A4;
         font-weight:600;
}
.img_bordure{
	/*position:relative;
	top:0;*/
	left:0;
	width:130px;
	height:104px;
	border:1px #D7D7D7 solid;
         }
/* cadre */
.cadre{
         float: left;
		 width:400px;
		 height:auto;
         padding:5px 0px 5px 0px;
		 /*border:1px red solid;*/
        }

/* Photos et puce */
#exemple{
	width:100%;
	/*border:1px red solid;*/
	float: left;
	list-style-image: url(images/charte/puce01.gif);
	margin-bottom:0px;
}

.photo{
	/*border:1px white solid;*/
	float: right;
	position:static;}
	
.formcontact {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	background-color: #F0F0F0;
	border: 1px solid #000000;
}
.text{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	font-style:normal;
	color:#FFFFFF;
}
.orange{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold; 
	font-style:normal;
	color:#FF8A00;
}
/*------------------------- page installation -------------------------*/
.liste01{
    float: left;
	width:300px;
	height:auto;
    padding:0 0 0 20px;
    margin:2px 20px 2px 0px;
	/*border:1px red solid;*/
}
.liste01clair{
    float: left;
	width:300px;
	height:auto;
    padding:0 0 0 20px;
    margin:2px 20px 2px 0px;
	/*border:1px red solid;*/
	background-color: #F6F6F6;
	color: #000000;
	font-weight: bold; 
}
.liste01fonce{
	color: #000000;
	font-weight: bold; 
    float: left;
	width:300px;
	height:auto;
    padding:0 0 0 20px;
    margin:2px 20px 2px 0px;
	/*border:1px red solid;*/
	background-color: #BCBCBC;
}
.liste01cg{
	font-weight: bold; 
	text-align: center;
    float: left;
	width:300px;
	height:auto;
    padding:0 0 0 20px;
    margin:2px 20px 2px 0px;
	/*border:1px red solid;*/
}
.liste02{
	font-weight: bold; 
	text-align: center;
    float: left;
	width:461px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 0px 2px 0px;
	border:1px #BCBCBC solid;
}
.liste02clair{
	text-align: center;
    float: left;
	width:461px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 0px 2px 0px;
	/*border:1px red solid;*/
	background-color: #F6F6F6;
	color: #000000;
	font-weight: bold; 
}
.liste02fonce{
	text-align: center;
    float: left;
	width:461px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 0px 2px 0px;
	/*border:1px red solid;*/
	background-color: #BCBCBC;
	color: #000000;
	font-weight: bold; 
}
.liste03{
	font-weight: bold; 
    float: left;
	width:150px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 5px 2px 0px;
	text-align:center;
	border:1px #BCBCBC solid;
}
.liste04{
    float: left;
	width:150px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 5px 2px 0px;
	/*border:1px red solid;*/
	text-align:center;
}
.liste04clair{
    float: left;
	width:150px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 5px 2px 0px;
	border:1px #F6F6F6 solid;
	text-align:center;
	background-color: #F6F6F6;
	color: #000000;
	font-weight: bold; 
}
.liste04fonce{
    float: left;
	width:150px;
	height:auto;
    padding:0 0 0 0;
    margin:2px 5px 2px 0px;
	border:1px #BCBCBC solid;
	text-align:center;
	background-color: #BCBCBC;
	color: #000000;
	font-weight: bold; 
}
.cyc {
	display: none;
}