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

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

#container, #header {width: 885px;}
#header {height:360px;}
#footer{
 width: 998px;
}

#left-column {width: 255px;}
#right-column {width: 630px;}

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

.push	{clear: both;}

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


/* ===| 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;}

#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;	
}
.ref {
		position: absolute;
		top: -10000px;
	}
#footer {
	margin: 0 auto;
	padding: 0;}
#footer-left{
 width:360px;
 height: 70px;
 float:left;
 display:table;
 font-size:12px;
 padding-top:70px;
}
  #footer-left p{
  text-align:left;
  }

#footer-right{
 width:635px;
 height: 100px;
 float:left;
 display:table;
 padding: 40px 0 0 0;
}
.legales:link, .legales:visited{
  text-decoration: none;
  color:#fff3d1;
}
.legales:active, .legales:hover{
  color:#dbf1ff;
	text-decoration: underline;
}



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

/* ===| III. CONTENT ELEMENTS |===============================================*/
#actualites{
 background: url(../images/charte/actualites.jpg) top left no-repeat;
 height:250px;
 width:255px;
}
#panier{
 background: url(../images/charte/panier.jpg) top left no-repeat;
 width: 255px;
 height: 138px;
}
#news{
 background: url(../images/charte/newsletter.jpg) top left no-repeat;
 width: 255px;
 height: 96px;
}
#adresse{
 background: url(../images/charte/adresse.jpg) top left no-repeat;
 width: 255px;
 height: 144px;
}
  #text-adresse{
   padding-top:53px;
   padding-left:28px;
   font-size: 11px;
   color:#022247;
   line-height: 14px;
  }
  #adresse-email{
   padding-left:28px;
  }
  .adresse-email:link, .adresse-email:visited{
   font-size:11px;
   font-weight: bold;
   color: #ff0b00;
   text-decoration: none;
  }
  .adresse-email:hover, .adresse-email:active{
   text-decoration: underline;
  }

#horaires{
 background: url(../images/charte/horaires.jpg) top left no-repeat;
 width: 255px;
 height: 181px;
}
  #text-horaires{
   padding-top:53px;
   padding-left:28px;
   font-size: 11px;
   color:#022247;
   line-height: 14px;
  }
  #plan{
   padding-left: 51px;
   padding-top: 4px;
  }

  .plan:link, .plan:visited{
   background: url(../images/charte/plan.jpg) top left no-repeat;
   width: 125px;
   height: 64px;
   display: table;
   float:left;
  }
  .plan:hover, .plan:active{
   background: url(../images/charte/plan-over.jpg) top left no-repeat;
  }

.min20{
  position: relative;
  float: right;
}


#box1{
 background: url(../images/charte/box1-repeat.png) top left repeat-y;
 width:630px;
 float:left;
}
#box1-grad{
 background: url(../images/charte/box1-repeat-top.jpg) top left no-repeat;
 padding:0px 45px;
 width:540px;
 display: inline;
 text-align:justify;
 float:left;
}

#box2{
 background: url(../images/charte/box2-repeat.jpg) top left repeat-y;
 width:540px;
 padding:0px 45px;
 text-align:justify;
}
#box3{
 background: url(../images/charte/box3-repeat.jpg) top left repeat-y;
 width:630px;
 text-align:justify;
 display:table;
}
ul.list{
 width:480px;
 padding-left:33px;
 padding-top:10px;
}
.list li{
background: url(../images/charte/puce1.jpg) left 3px no-repeat;
padding-left:15px;
}
ul.list1{
 width:480px;
 padding-left:33px;
 padding-top:10px;
}
.list1 li{
background: url(../images/charte/puce2.jpg) left 3px no-repeat;
padding-left:15px;
}
ul.list2{
 width:320px;
 padding-left:20px;
 padding-top:25px;
 float:left;
}
.list2 li{
background: url(../images/charte/puce1.jpg) left 3px no-repeat;
padding-left:15px;
}
ul.list3{
 width:524px;
 padding-left:10px;
 float:left;
}
.list3 li{
background: url(../images/charte/puce1.jpg) left 3px no-repeat;
padding-left:15px;
width:240px;
float:left;
}
.mid-image{
 text-align: center;
 width:630px;
 padding:10px 0px;
}
.pres-link:link, .pres-link:visited{
 color:#ff0000;
 font-weight: bold;
 font-style: italic;
 text-decoration:none;
}
.pres-link:hover, .pres-link:active{
text-decoration: underline;
}
.commander:link, .commander:visited{
 color:#f15952;
 font-weight: bold;
 font-style: italic;
 text-decoration:none;
}
.commander:hover, .commander:active{
text-decoration: underline;
}
.imprimer:link, .imprimer:visited{
background: url(../images/charte/imprimer.jpg) top left no-repeat;
width: 221px;
height: 22px;
float: left;
display: table;
}
.imprimer:hover, .imprimer:active{
 background: url(../images/charte/imprimer-over.jpg) top left no-repeat;
}
/* ===| IV. NAVIGATION |===============================================*/
#menu2 ul li{display: inline;}
/* ---| THE END |------------------------- */