/*===| I. MAIN LAYOUT  |=====================================================*/
* {margin: 0;}
html{height: 100%;width: 100%;}
html, 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;}
#push, .clr	{clear: both;}

body{background-color: #323232;}
#bg1{position:absolute;z-index: 1; width:100%;}
#bg2{position:absolute;z-index: 2; width:100%;}
#bg3{position:absolute;z-index: 3; background: url(images/bg.jpg) repeat-x left top;}

#wrap-container{position:relative;z-index:4; width: 100%;}
#container{background:url(images/bg-container.jpg) 50% 50% repeat-y; margin:0 auto;	text-align: left;}
#content{}

/* ===| II. HEADER ELEMENTS |================================================*/
#site-header.outter{}
#site-header .inner{}

/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden; padding:0px 0px 18px 0px;}
#left-inner{padding:0px;}
#logo{width:280px; height:98px;background-color: red;}

#actualite{
  width:260px;
  height:106px;
  padding:32px 10px 0px 10px;
  background: url(images/bg-mdm.jpg) no-repeat left top;
}
#actualite img {
  border: 1px solid #000000;
  float:left;
  margin-right:10px;
  margin-top:3px;
}
#info{
  width:260px;
  height:127px;
  padding:36px 10px 0px 10px;
  background: url(images/bg-info.jpg) no-repeat left top;
}
#mail a{
  font-weight: bold;
  display:block;
  padding-bottom:9px;
}

/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{	float:left;	margin:0; padding:0; overflow: hidden;}
#right-inner{padding:0px;}

.box{background: url(../../images/charte/bg-box.jpg) no-repeat left top;}
.paragraph{
  clear:both;
  padding:0px 20px;
}
.programmes{
  width:387px;
  height:155px;
  padding:58px 0px 0px 253px;
}
.pres2{
  width: 299px;
  height:253px;
  padding:41px 20px 0px 0px;
  float:left;
  border-right:1px solid #CECECE;
  background: url(../../images/charte/bg-box1.jpg) no-repeat left top;
}
.pres3{
  width: 300px;
  height:256px;
  padding:38px 0px 0px 20px;
  float:left;
  background: url(../../images/charte/bg-box2.jpg) no-repeat left top;
}

#title{
    width:640px;
    height:54px;
}
.bg{
  display:inline;
  padding:10px;
  background-color: #F1F1F1;
  float:left;
  border: 1px solid #E3E3E3;
  margin-bottom:10px;
  width:620px;
}


/* ===| V. FOOTER BOXES |=====================================================*/
#wrap-footer {position:relative; z-index: 4; width: 100%; text-align: left;}
#fwrap1 {position:absolute; z-index: -3; left:0; width:100%;}
#fwrap2 {position:absolute; z-index: -2; left:0;width:100%;}
#fwrap3 {position:absolute; z-index: -1; left:0; }

#footer.outter	{background-color: #323232; margin: 0 auto; padding: 0px 0px 10px 0px;}
#footer .inner	{background: #F1F1F1 url(images/bg-footer.jpg) repeat-x left top; padding:11px 0px 0px 0px;height:43px;}
#footer .box1{width:270px; float:left; padding-left:10px; height:43px;}
#footer .box2{width:670px; float:left; padding-right:10px; text-align:right; height:43px;}

#footer a:link, #footer a:visited {
    font:normal 11px arial !important;
    border:	0px; padding:0px; margin:0px;
	color:#000000;
	text-decoration: none;}
#footer a:hover, #footer a:active {
	color:#484848 !important;
	text-decoration: none !important;}

.ref{ clear:both; padding:0px; font:normal 10px verdana; color:#555555; background-color: #F1F1F1; text-align:center;}

/* ===| VI. OTHER ELEMENTS |====================================================*/
img {border: 0;}
a:focus{
  outline: none;
}

.color{
  color:#0076BA !important;
}

a:link, a:visited {
    border:	0px; padding:0px; margin:0px; width:auto;
	color:#0076BA;
	text-decoration: none;}
a:hover, a:active {
	color:#484848 !important;
	text-decoration: none !important;}

.thumb{border:3px solid #CECECE;}
.thumb-left{
    float:left;
    border:3px solid #CECECE;
    margin-right:18px;
}
.thumb-right{
    float:right;
    border:3px solid #CECECE;
    margin-left:20px;
}
img.thumb0{border:1px solid #fff;padding:1px; margin: 0 5px; width:75px; height:75px; background:#ccc url("../../images/thumb0.jpg") 50% 50% no-repeat;}

#menu2 ul li{display: inline;}


/* ===| VII. CONTACT FORM |=====================================================*/
.contact-left{
  width:300px;
  float:left;
  font:normal 12px Arial;
  margin:0px 40px 20px 0px;
  }


.inputForm{
	border:1px solid #7A7A7A;
	background-color:#E4E4E4;
	color:#3B3B3B;
    width:215px;
    font:normal 12px Arial;
    padding-left:2px;
    padding-top:1px;
    height:15px;
	}
.inputFormOver{
	border:1px solid #0176BB;
	background-color:#6BBDEC;
	color:#ffffff;
    width:215px;
    font:normal 12px Arial;
    padding-left:2px;
    padding-top:1px;
    height:15px;
	}
textarea{
  font:normal 12px Arial;
}


.label{
	width:80px;
	float:left;
	display:inline;
	clear:both;
	margin-top:5px;
	color:#484848;
	text-align:left;
    font:normal 12px Arial;

	}
.field{
	width:160px;
	float:left;
	margin-top:5px;
  font:normal 12px Arial;
 	}
.btn{
  clear:both;
  width:300px;
  padding:0px 0 0 240px;
  }
  .btn div{
    float:left;
    display:inline;
    width:100px;
    }

.button{
  width:72px;
  height:18px;
  border: none;
  cursor:pointer;
  font: normal 12px arial;
  color:#ffffff;
  background-color:#7C7C7C;
}
.buttonOver{
  width:72px;
  height:18px;
  border: none;
  cursor:pointer;
  font: normal 12px arial;
  color:#FFF000;
  background-color:#5E5E5E;
}
#merci{
	width:354px;
	height:180px;
	background:url(../../images/charte/bg-merci.jpg) no-repeat left top;
	text-align:center;
    margin:80px 0px 0px 130px;
}

/* ===|  MDM |=====================================================*/

#mdm-popup{width:500px; height:500px;}

.border1{
    background-color:#6EBFEE;
    padding: 4px;
}
.border1 img{
  border: 1px solid #ffffff;
}

#mdm-top{
	width:500px;
	height:140px;
    background: url(../../images/charte/mdm-top.jpg) no-repeat top left;
}
#mdm-content {
    width: 458px;
    height: 326px;
    padding: 10px;
    margin: 0 10px 0 10px;
    background-color: #ffffff;
    border: 1px solid #EEF6EB;
}
#mdm-content p{
  color: #484848;
  font-family:arial;
  font-size:12px !important;
  text-align: justify;
  line-height: 14px;
  padding:0px; margin:0px;
}