/*===| I. MAIN LAYOUT  |=====================================================*/
* {margin: 0;}
html {height: 100%;width: 100%;}
body {width: 100%;}
ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}
p{padding: 0;}
.left{float: left;} .right{float: right;}
.left1{float: left; margin: 0 15px 0 0;} .right1{float: right; margin: 0 0 0 15px;}
#push, .clr	{clear: both;}

body{ background: #000000 url(images/bg-body.jpg) 50% 0% repeat-y;}
#bg1{position:absolute;z-index: 1; width:100%;}
#bg2{position:absolute;z-index: 2; width:100%; background:url("images/bg1.jpg") 50% 0% repeat-x;}
#bg3{position:absolute;z-index: 3; background:url("images/bg2.jpg") 50% 0% no-repeat;}

#wrap-container{position:relative;z-index:4; width: 100%;}
#container{ margin:0 auto; text-align: left;}
#content{}

/* ===| II. HEADER ELEMENTS |================================================*/
#site-header.outter{background:url("images/header.jpg") 50% 0 no-repeat;}
#site-header .inner{}

/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden;}
#left-outter div.outter{background: url(images/box1.gif) 50% 0% no-repeat;padding: 0 0 10px; min-height: 159px; height: auto!important;height: 159px; }
#left-outter div.inner{padding: 0px 5px 0px;}

#left-outter div.box1{padding:0 5px 10px;}
#left-outter .box1 .inner{padding:0}

#left-outter div.box2{}
#left-outter div.box3{}
#left-outter .box4{}


#actualite, #contact-info, #promo {margin-bottom:10px;}

#actualite{
    float:left;
    width:229px;
    height:117px;
    padding:49px 13px 0px 13px;
    background: url(images/bg-mdm.jpg) no-repeat top left;
}
.mdm-photo
{
    float: left;
    border:solid 1px #c4b3a2;
    padding:2px;
    margin:0 10px 10px 0;
}
#contact-info {
    float:left;
    width:238px;
    height:119px;
    padding:47px 0px 0px 13px;
    background: url(images/bg-coordonnees.jpg) no-repeat top left;
}
#icons
{
    float: left;
    width:25px;
}
#mailsPlace
{
    float: left;
    padding-top:6px;
}
#promo {
    float:left;
    width:125px;
    height:90px;
    padding:42px 0px 0px 126px;
    background: url(images/bg-plan.jpg) no-repeat top left;
}
/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{	float:left;	margin:0; padding:0; overflow: hidden;}
#right-inner{padding: 0px 20px 0px 20px;}
.paragraph
{
    clear: both;
    float: left;
    width: 100%;
    text-align: justify;
}
#page-title
{
    float:left;
    padding:0px 0px 9px 0px;
}
ul.list1{
	padding: 3px 0 3px 10px;
    float:left;
    margin: 0;
    width:100px;
	}
ul.list1 li{
	background: url(images/buillet1.jpg) no-repeat top left;
	background-position:0px 6px;
    font-weight:bold;
	text-align:justify;
	line-height: 18px;
    color:#82715f;
	padding:0px 0px 0px 10px;
	}
.bg-list
{
    float:left;
    width:274px;
    background: #f8f2ee;
    margin: 5px 0;
}

ul.list2{
	padding-top: 8px;
    float:left;
    margin: 0;
    width:125px;
	}
ul.list2 li{
	background: url(images/bg-list-dotts.jpg) repeat-x bottom left;
	text-align:justify;
	line-height: 23px;
    color:#4f453c;
	padding:6px 0px 0px 0px;
	}
ul.list3{
	padding: 0px 0 0px 10px;
    float:left;
    margin: 0;
    width: 98%;
	}
ul.list3 li{
	background: url(images/bullet3.jpg) no-repeat top left;
	background-position:0px 9px;
	text-align:justify !important;
	line-height:17px;
    padding:2px 0px 2px 15px;
	}
/*-------- contact ----------------*/
#right-contact
{
    width: 605px;
    height:482px;
    border:solid 1px #807264;
    float:left;
    margin:0;
    padding:0;
    overflow: hidden;
    background: #fff url(images/bg-contact.jpg) no-repeat bottom right;
}
/*-------- merci ----------------*/
#right-merci
{
    width: 605px;
    height:482px;
    border:solid 1px #807264;
    float:left;
    margin:0;
    padding:0;
    overflow: hidden;
    background: #fff url(images/bg-merci.jpg) no-repeat bottom right;
}
.merci-box
{
    clear:both;

    font-size: 12px;
    margin:30px 0 0 0px;
    padding:20px;
    width:220px;
    text-align: center;
    border:solid 1px #ded4cc;
}

.merci-box a:link, .merci-box a:visited
{
    color:#8e8175 !important;
    text-decoration: underline;
    font-weight: bold;
}
.merci-box a:hover, .merci-box a:active
{
    color:#fe7f00 !important;
    text-decoration: none;
    font-weight: bold;
}
/* ===| V. FOOTER BOXES |=====================================================*/
.box1 {
    float: left;
}
.box2 {
    float: right;
}
#footer{
    background: url(images/bg-footer.jpg) repeat-x top left;
    height:45px;
    padding: 9px 10px 0 10px;
}
div.ref{padding: 0 0px 0; background: #23201b; }
/* ===| VI. OTHER ELEMENTS |====================================================*/
img {border: 0;}
img.thumb{border:1px solid #beac9b; padding:2px; background: #fff;}
.separator-blank{width:100%; height:15px; clear:both; padding:0; margin:0; line-height: 0px; font-size: 0; overflow: hidden;}
.separator{width:100%;	height:15px; clear:both; padding:0; margin:0; line-height: 0px; font-size: 0; overflow: hidden; background: url(images/separator2.jpg) no-repeat 50% 50%; }
/*=================== MDM ==============*/
#mdm
{
    float: left;
    width: 600px;
    height: 390px;
    padding: 110px 0 0 0;
    background: url(images/mdm.jpg) no-repeat top left;
}
#fermer
{
    float: right;
    padding-right:5px;
}