@import url(typo.css);
@import url(skin.css);
@import url(menu2.css);

/*===| I. LAYOUT SIZE |====================================================*/

#container, #footer {width: 784px;}
#header {height:316px;}
#left-column {width:194px; padding-left: 2px;}
#right-column {width: 534px; padding-left: 20px; padding-top:8px;}

/*	--- Important! ----------------------------------------
	#wrap-footer, #footer and .push must be the same height
	-------------------------------------------------------
*/	#wrap-footer, #footer, .push {height: 62px;}

.push	{clear: both;}

/* --- Important! -------------------------------
	The bottom margin of #wrap-container
	is the negative value of the footer's height 
	-----------------------------------------------
*/	#wrap-container {	margin: 0 auto -62px;}


/* ===| II. LAYOUT's DEFAULT ELEMENTS |=======================================*/

* {margin: 0;}

html, body {height: 100%; width: 100%;}
body {text-align: center;}
ul, li{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;}

p{	padding: 0 5px;}

#wrap-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;}
#container {
	margin:0 auto;
	text-align: left;}
#header {
/*	text-indent: -9999em;*/}
#left-column{
	float:left;
}
#right-column{
	float:left;	
}

#footer {
	margin: 0 auto;
	padding: 0;}

#left-footer{
 width:196px;
 float:left;
 height:46px;
 padding-top: 15px;
 font-size:10px;
 color:#474747;
}
#right-footer{
 width:553px;
 float:left;
 height:46px;
 padding-top: 15px;
 font-size:10px;
 color:#474747;
 text-align:center;
}
.legal-notice:link, .legal-notice:visited{
 color:#000000;
}
.legal-notice:hover, .legal-notice:active{
 color:#ab0000;
}

#plan{
 background: url(../images/charte/bg-plan.jpg) top left no-repeat;
 width:194px;
 height:137px;
 float:left;
 padding-top:31px;
}
.plan:link, .plan:visited{
background: url(../images/charte/plan-acces.jpg) top left no-repeat;
float: left;
height:123px;
width:194px;
}
.plan:hover, .plan:active{
background: url(../images/charte/plan-acces-over.jpg) top left no-repeat;
}

#contact-info{
 background: url(../images/charte/bg-adresse.jpg) top left no-repeat;
 width: 194px;
 height: 291px;
 float:left;
}
#address-box{
 padding-top: 111px;
 float:left;
 padding-left:8px;
 width:177px;
 color:#474747;
 line-height: 16px;
}
#contact-mail{
 float:left;
 padding-left: 8px;
 padding-top: 5px;
}
.contact-mail:link, .contact-mail:visited{
color: #474747;
}
.contact-mail:active, .contact-mail:hover{
color: #a90000;
}

#actualite{
 background: url(../images/charte/bg-actualite.jpg) top left no-repeat;
 width:194px;
 height: 247px;
 float:left;
}
#content-bg{
 background: url(../images/charte/content-bg.jpg) top left no-repeat;
 display:table;
 min-height: 370px;
 padding-top: 6px;
 float: left;
}
.container-left{
 width:374px;
 padding:0 10px;
 float:left;
}
.container-left p{
padding: 17px 0;
line-height:18px;
 }
.image-right{
 float:left;
}
.separator{
 width: 534px;
 height:22px;
 display: table;
 float:left;
}
.separator1{
 width: 100%;
 height:38px;
 display: table;
 float:left;
}
.image-left{
 float:left;
 padding-left: 10px;
}
.container-right{
 float:left;
 width:430px;
}
ul.list{
width:420px;
padding-left:8px;
float:left;
}
.list li{
background: url(../images/charte/puce1.jpg) left center no-repeat;
padding-left:15px;
line-height:26px;
}
ul.list2{
width:430px;
padding-left:50px;
float:left;
}
.list2 li{
background: url(../images/charte/puce1.jpg) left center no-repeat;
padding-left:15px;
line-height:26px;
width:180px;
float:left;
}
ul.list1{
width:284px;
padding-left:8px;
float:left;
}
.list1 li{
background: url(../images/charte/puce1.jpg) left center no-repeat;
padding-left:15px;
line-height:36px;
}
.details:link, .details:visited{
background: url(../images/charte/savoir-plus.jpg) top left no-repeat;
float: left;
display:table;
height: 12px;
width: 58px;
}
.details:hover, .details:active{
 background: url(../images/charte/savoir-plus-over.jpg) top left no-repeat;
}
.sous-titre{
 color: #ab0000;
 font-weight:bold;
 letter-spacing: 1px;
 font-size: 14px;
 padding:10px 0;
 width:100%;
 float:left;
}
.width-text{
 text-align: justify;
 line-height: 18px;
 padding: 5px 0;
 width:100%;
 float:left;
}
.list-container{
 float:left;
 width:100%;
}
#diap-container{
 float:left;
 width:534px;
 text-align: center;
}

/*	--- Important! -----------------------------------
	If you want space between paragraphs or headers, 
	use padding instead of margin.
	-------------------------------------------------*/

/* ===| IV. NAVIGATION |===============================================*/
#menu2 ul li{display: inline;}
/* ---| THE END |------------------------- */