/*===| I. MAIN LAYOUT  |====================================================*/
#container, #footer, #header  {width: 996px;}
* {margin: 0;}
html, body {height: 100%;}
ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}

.left{float: left;} .right{float: right;}
#push, .clr	{clear: both;}

body{background-color:#FFFFFF}
#bg1{position:absolute; width:100%;}
#bg2{position:absolute; width:100%; }
#bg3{position:absolute;}

#wrap-container{
background-image: url(../../images/charte/container-bg.jpg);
background-repeat: repeat-y;
background-position: top left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
  width: 996px;
  margin: 0 auto ;
}

#container{
	margin:0 auto;
	text-align: left;


}
#content{
background:url("../../images/charte/body.jpg") right top no-repeat;
float: left;
}

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

/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden;}
#left-outter div.outter{height: auto!important; }
#left-outter div.inner{}

#left-outter div.box1{}
#left-outter .box1 .inner{}

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


/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{
float:left;
margin:0;
padding:0;
overflow: hidden;
z-index:1;
position: relative;

}
#right-inner{
padding: 20px 25px 0px 20px;
text-align: justify;
}

#right-inner span{
  color: #C10000;
  font-weight: bold;
}

#right-inner .blue{
  color: #000066;
  font-weight: normal;
}
#right-outter a{
  color:#B21515;
  text-decoration: none;
  font-weight:bold;
  }
#right-outter a:hover{color:#000000;}


/* ===| V. FOOTER BOXES |====================================================*/
#wrap-footer {width: 100%;  margin:0px auto; text-align: left;}


#footer{height:99px; color:#C7C7C7; width: 996px;  background:url("../../images/charte/bg-fotter.jpg") left bottom no-repeat; margin:0px auto; font-family: Arial, Verdana; font-size: 11px; position:relative; z-index:0}


#wrap-footer #footer .inner	{padding: 0; height:99px;}

#digital{
  float:left;
  padding-top:0px;
  padding-left:42px;
  line-height:16px;
  }

  #footer  #digital a{
    color:#ffffff;
    text-decoration: underline;
    cursor: pointer;
    }

  #footer  #digital a:hover{
      color:#C7C7C7;
      text-decoration: none;
      cursor: pointer;
   }



#digital .livraison{
font-size: 12px;
font-weight: bold;
color: #000062;
margin-bottom: 25px;
}


#digital .realise{
padding-left: 25px;
}




#footer-menu{
  float:left;
  padding-top:0px;
  text-align: left;
  line-height:16px;
  padding-left: 70px;
  }

#footer-menu .horaires
 {
 padding-left: 60px;
font-size: 12px;
color: #A50000;
margin-bottom: 18px;
}
 #footer-menu .horaires span{
   color: #585858;
 }


#footer-menu a.mentions
{
    color:#ffffff;
    text-decoration: underline;
    cursor: pointer;
}



  #footer-menu .mentions:hover{
      color:#C7C7C7;
      text-decoration: none;
      cursor: pointer;
   }



  #footer a:hover{color:#ffffff; text-decoration: underline;}

  #footer a{
    color:#C7C7C7;
    text-decoration: none;
    }

   #footer a.actif{
      color:#ffffff;
      cursor: default;
      text-decoration: none;
   }
    #footer .actif:hover{
      color:#ffffff;
      cursor: default;
      text-decoration: none;
   }


  #footer a.digital:hover{color:#FFFFFF}

  #footer-menu a{margin:0 4px;}



div.ref{padding: 2px 0px 0; font-size: 11px; text-align: center; width:960px; margin:0px auto 0px auto;
color: #C7C7C7; font-weight: normal;
}


/* ===| BASIC CSS |====================================================*/

.line{
  height:20px;
  background: url(../../images/charte/line.jpg) repeat-x left center;
  line-height:0;
  font-size:0px;
  padding:0;
  clear:both;
  }
#content .lead{padding-top:0px; color: #000000;}
#content .clear{clear:both}
#content .normal{font-size:12px;}
#content .indent{margin-left:15px;}
#content .indent1{margin-left:21px;}
#content .centered{
  text-align:center;
  margin:0 auto;
  clear:both;}
#content .vertical{padding-top:100px;}

.left{float:left}
.right{float:right}
.image-left{
  float:left;
  margin-right:9px !important;
  margin-bottom:2px;
  display:inline;

  }
.image-right{
  float:right;

  }


.couleur{
	font-weight:bold;
	color:#B21515;
  }
.couleur1{
	font-weight:bold;
	color:#B21515;
   }


/* LEFT COLUMN */
#left-outter{
  color:#000000;
  font-size:11px;
  line-height:14px;
  text-align: justify;
  }

/* ===| MDM |====================================================*/
.mdm{
  background:url("../../images/charte/bg-mdm.jpg") left top no-repeat;
  float: left;
  width:281px;
  height:187px;
  }

 .mdm-text{
  margin:70px 20px 0px 25px;
  height: 70px;
}

.mdm .image-right{
  border:1px solid #A50000;
  margin-left: 15px;
  }

/* ===| ADRESSE |====================================================*/
#info {
  background:url(../../images/charte/bg-adresse.jpg) left top no-repeat;
  width:281px;
  float: left;
  height:179px;
  line-height: 16px;

  }

 #info .titre {
 margin-bottom: 5px;
 font-size: 13px;
 font-weight: bold;

  }

 #info  .mailt{
 margin-top: 8px;
  font-size: 12px;
 }

 #info a{
   color: #000064;
   font-weight: bold;
 }

  #info a:hover{
   color: #C61E1E;
   font-weight: bold;
 }




#info .inner{
  padding:70px 20px 0 25px;
  }



 #plan{
  background:url(../../images/charte/plan.jpg) left top no-repeat;
  width:281px;
  float: left;
  height:147px;
  padding:0px 0px 0 0px;
  }

 #plan img{
   padding:32px 0px 0px 25px;
 }




/* ===| CONTENT |====================================================*/



/* realisations-box */
.realisations-box{
  width:215px;
  height:166px;
  float:left;
  padding:15px 4px 0 4px;
  }

.realisations-content{
  background:#ffffff url(../../images/charte/bg-realisations.jpg) left top no-repeat;
  padding:0px 7px 5px;
  height:143px
  }
  .realisations-box td{
    text-align: center;
    padding:0 2px;
    width:211px;
    height:28px;
    }
  .realisations-box td p{
    text-align: center;
    font:bold 11px Arial;
    color:#ffffff !important;
    line-height:12px;
    margin-top:0;
    padding-top:0;
    }
  .realisations-box .image-right img{
    border:1px solid #B21515;
    background-color: #FCFFF5;
    }
  #right-inner .realisations-box p{
    color:#000000;
    font-size:11px;
    line-height:12px
    }
/* realisations detail */

.realisations-left{
  width:254px;
  float:left;
  background-color: #B21515;
  padding:10px 7px 10px 10px;
  }

  .realisations-left .image{
    height:250px;
    width:250px;
    text-align: center;
    }


.realisations-left .image,
.thumbs img{
   text-align: center;
   cursor:pointer;
  }
  .thumbs{
    float:left;
    margin:3px 3px 2px 2px;
    width:78px;
    height:78px;
    text-align: center;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    }


  .thumbs-big{

   background-color: #ECECEC;
     }

  #right-outter a.message2{
color: #ffffff;
font-size: 12px;
font-weight: normal;
}

#right-outter .message2:hover{
color: #000000;
font-size: 12px;
font-weight: normal;
}
.realisations-right{
  padding-right:0px;
  padding-left:20px;
  float:left;
  width:375px;
  text-align: justify;
  }
.realisations-right p{  line-height:16px}



/* Contact */
/* contact */
.contact-left{
  width:300px;
  float:left;
  padding-left:50px;
  font:normal 12px Arial;
  }
  .contact-right{
    width:270px;
    display:inline;
    float:left;
    }
    .contact-right p{
      padding-left:5px;
      }

.inputForm{
	border:1px solid #8F0000;
	background-color:#fff;
	color:#000000;
  width:160px;
  font:normal 12px Arial;
	}
.inputFormOver{
	border:1px solid #8F0000;
	background-color:#F9F5F5;
	color:#000000;
  width:160px;
  font:normal 12px Arial
	}
textarea{
  font:normal 12px Arial;
}


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

	}
  .label span{
    color:#466ECD;
    }
.field{
	width:160px;
	float:left;
	margin-top:5px;
  font:normal 12px Arial;
 	}
.btn{
  clear:both;
  width:330px;
  text-align: center;
  margin:10px auto 0;
  }
  .btn div{
    float:left;
    display:inline;
    width:165px;
    }


.button{
  background:url(../../images/charte/button.jpg) no-repeat center top;
  border:none;
	width:108px;
  height:23px;
	cursor:pointer;
  color:#ffffff;
  font:bold 12px Arial;
	}
  .buttonOver{
    background:url(../../images/charte/button-over.jpg) no-repeat center top;
    border:none;
  	width:108px;
    height:23px;
  	cursor:pointer;
    color:#ffffff;
    font:bold 12px Arial;
    }

.vertical{
  padding-top:50px;
  }

   .image-right2{
  float:left;
   margin: 5px 5px 15px 0px;

  }

.recherche{
  background:url(../../images/charte/recherche.jpg) no-repeat center top;
  border:none;
	width:108px;
  height:23px;
	cursor:pointer;
  color:#ffffff;
  font:bold 12px Arial;
	}
  .recherche:hover{
    background:url(../../images/charte/recherche-over.jpg) no-repeat center top;
    border:none;
  	width:108px;
    height:23px;
  	cursor:pointer;
    color:#ffffff;
    font:bold 12px Arial;
    }