/*===| I. LAYOUT SIZE |====================================================*/
#container{
    width:890px;
    padding-right:20px;
    padding-left:20px;
    height:646px;
    position: relative;
    z-index:2;
    background-color: red;
}

#footer, #header {width: 890px;}
#header {height:119px;}
#left-column {width: 458px;}

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



/* --- Important! -------------------------------
	The bottom margin of #wrap-container
	is the negative value of the footer's height 
	-----------------------------------------------
*/


/* ===| 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:0px;
  margin:0px;
}
.clear{
  clear:both;
  display:inline;
}

a:focus{
  outline: none;
}
.ref {

    clear:both;
    width:890px;
	text-align:center;
    color:#FFffff;
    font-size: 11px;
    font-family: verdana;
    padding-top:8px;
}

#wrap-container {
	height:645px;}
#container {
	margin:0 auto;
	text-align: left;}
/*-------------------------left-column----------------*/
#left-column{
	float:left;
    height:478px;
}
#left-column1{
	float:left;
    width:211px;
    height:478px;
}
#diapo{
  width: 211px;
  height:409px;
}
#newsletter{
  width: 201px;
  height: 31px;
  padding:38px 0 0 10px;
}

#left-column2{
	float:left;
    width:247px;
    height:478px;
}
#menu-left{
   width: 247px;
   height: 154px;
}
#actualite{
  width:227px;
  height:76px;
  padding:26px 10px 0 10px;
}
#actualite img{
    float:right;
    border:1px solid #2A6BB7;
    margin-left:8px;
    margin-top:2px;
}

#info{
  width:247px;
  height:83px;
  padding-top:48px;
  text-align: center;
}
#plan{
  width:247px;
  height:67px;
  padding-top:24px;
}

/*-------------------------right-column----------------*/
#right-column{
    width: 413px;
	float:left;
    height:476px;
    border:1px solid #EAC995;
    padding:0 8px 0 9px;
}
#footer {
    clear:both;
	margin: 0 auto;
	padding: 0;
}

#digital-age{
    float:left;
    width: 206px;
    height: 33px;
    padding:16px 0 0 5px;
    text-align:center;
}
#mentions{
    float:left;
    width: 664px;
    height: 44px;
    padding:5px 0 0 15px;
}


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

/* ===| III. CONTENT ELEMENTS |===============================================*/

img {border: 0;}

/*	--- Important! ----------------------------------
	Use class "left" or "right" on the html elements 
	you want to float (on the thumbs, for example)
*/	.left{float: left; margin-right:8px;} .right{float: right; margin-left:8px;}

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


.title{
  width:413px;
  height:32px;
  float:left;
}
.paragraph{
  clear:both;
  width:395px;
  padding-right:8px;
}
ul.list1{
    list-style: none;
    margin-left:25px;
	}
ul.list1 li{
	background: url(../images/charte/bullet1.jpg) no-repeat top left;
    background-position:0px 4px;
	text-align:left;
    padding-left:20px;
}
.prod1{
    clear:both;
    width:395px;
    height:110px;
    padding-right:8px;
    border-bottom:1px solid #C5964C;
    margin-top:20px;
}
.prod2{
    width:395px;
    height:110px;
    padding-right:8px;
    border-bottom:1px solid #A6C2E3;
    margin-top:20px;
}
#right-column1{
    width: 413px;
	float:left;
    height:476px;
    border:1px solid #EAC995;
    padding:0 8px 0 9px;
}
#merci{
  width:390px;
  height:174px;
  text-align:center;
  margin:160px 0px 0 12px;
}