/*===| I. LAYOUT SIZE |====================================================*/
#container,#footer, #header{width: 998px;}
#wrap-footer{width:  100%;}
#header {height:269px;}
#wrap-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;}
#content{width: 860px;padding: 0 69px 0 69px;}

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

.push	{clear: both;}
.ref {
    clear:both;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color:#828282;
    width:998px;
    text-align: center;
    padding:5px 0 0px 0;
    margin: 0 auto;
	}

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


/* ===| 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: 0 5px;}

#wrap-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;}
#container {
	margin:0 auto;
	text-align: left;}
#header {
/*	text-indent: -9999em;*/}


#footer {
	margin: 0 auto;
	padding: 0;}

/*	--- 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:10px;border:#888686 solid 1px;} .right{float: right;margin:10px;border:#888686 solid 1px;}
    .left1{float: left;margin:10px 30px 10px 10px;border:#888686 solid 1px;}

.paragraph{
	clear: both;
	display: table;
	width: 100%;}
	/* --------------------- presenation page -------------------------- */

#presentation1
{
  width: 840px;
	height: 197px;
	float:left;
	padding: 20px 0 0 20px;
}
#presentation1 p{
  line-height: 17px;
	padding-top: 45px;
}

#presenation2
{
  width: 606px;
	float:left;
	line-height: 18px;
}
#presentation3
{
  width: 199px;
	height:324px;
	padding: 12px 25px 5px 19px;
  float:left;
	margin-top:13px;
}
.text-color
{
  color:#5D4A10;
	text-align:center;
	padding-left: 10px;
}

ul.list
{
  padding: 5px 0px 0 45px;
}

ul.list li{
	background: url(../images/charte/bullet1.jpg) no-repeat top left;
	background-position:0px 4px;
	line-height: 17px;
	padding:0px 0px 0px 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:justify;
	color:#4C4C4C;
	}
ul.list1
{
  padding: 0px 0px 0 45px;
}
ul.list1 li{
	background: url(../images/charte/bullet3.jpg) no-repeat top left;
	background-position:0px 4px;
	line-height: 17px;
	padding:0px 0px 0px 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:justify;
	color:#4C4C4C;
	}
ul.list2
{
 padding: 2px 0px 0 255px;
}

ul.list2 li{
	background: url(../images/charte/bullet2.jpg) no-repeat top left;
	background-position:0px 4px;
	line-height: 18px;
	padding:0px 0px 0px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-size: 12px;
	text-align:justify;
	color:#4C4C4C;
	}
ul.list3
{
    padding:10px 0 0 50px;
    width:250px;
    float:left;
}

ul.list3 li{
	background: url(../images/charte/bullet2.jpg) no-repeat top left;
	background-position:0px 4px;
	line-height: 18px;
	padding:0px 0px 0px 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-size: 12px;
	text-align:justify;
	color:#4C4C4C;
	}
#titre{
margin:0px 0 10px 0;
}
.digital-age
{
  float: left;
	padding: 20px 0 0 89px;
	width: 250px;
}
.digital-age p
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#555555;
	line-height: 16px;
}
.digital-age a:link, .digital-age a:visited
{
	text-decoration: none;
	color: #000000;
}
.digital-age a:hover, .digital-age a:active
{
	text-decoration: none;
  color:#828282;
}

/* ---------------- page occasions-------------------- */

#recherche-bar
{
  float:right;
  width:860px;
  height: 25px;
  padding:10px 0 0 0;
  margin: 0;
}

.listbox
 {
    float:left;
    width:145px;
    margin: 3px;
 }

/*#recherche-button
{
    float:left;
    width: 82px;
    height: 16px;
    padding-top: 3px;
}*/
.buttonRecherche
{
    background: url(../images/charte/recherche.gif) no-repeat top left;
    width: 93px;
    height: 22px;
    border: 0;
    float: right;
}

.buttonRechercheOver
{
    background: url(../images/charte/recherche-over.gif) no-repeat top left;
    width:93px;
    height: 22px;
    border: 0;
    float: right;
    cursor: pointer;
}
.box-left
{
  /*padding:8px 0px 8px 17px;*/
  float:left;
}
.box-right
{
 /* padding:8px 5px 8px 0px; */
  float:right;
}

.box-produit
{
    float:left;
    background: #F1F1F1;
    width: 400px;
    height: 160px;
    font-size:11px;
    color:#000000;
	  margin:5px 0 5px 0;
		padding: 10px;
		border: #676767 solid 1px;

}
#content_page
{
  width: 100%;
	padding: 0px 0px 0px 0px;
}
.produit-marque
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  color:#6E6E6E;
}
.produit-title
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  color:#000000;
  padding-bottom:5px;
}
.detail-table
{
  font-size: 11px !important;
}

.lable
{
  width:100px;
  font-size: 11px !important;
}
.lable1 a:link, .lable1 a:visited
{
    text-decoration: underline;
    color:#eb9807;
}
.lable1 a:hover, .lable1 a:active
{
    text-decoration: underline;
    color:#4d4d4d;
}
#pagination
{
    float:left;
    width:100%;
    color:#000;
    font-family: Verdana,Arial, Helvetica, sans-serif;
}

#pag-sel
{
    font-size:12px;
    color:#676767;
    padding:2px 5px 2px 5px;
    background-color: #f1f1f1;
    font-weight:bold;
}

.couleur
{
    font-weight: bold;
	color:#676767;
}
/* ---------------- page occasions- details-------------------- */
 .box-img
{

    background: #F1F1F1;
    width: 270px;
    height: 80px;
	  margin:5px 0 5px 55px;
		padding: 5px 10px 5px 10px;
}

#img-details
{
 width: 370px;
 height: 310px;
 padding: 5px;
 text-align:center;
 	clear:both;
/*margin-left: 35px; */
}
#left-column
{
 width: 380px;
 padding: 10px 10px 10px 10px;
 float:left;
}

#right-column
{
 width: 430px;
 padding: 5px 10px 5px 10px;
 float: left;
 border: #C0C0C0 solid 1px;
 margin: 5px 0 5px 0;
}
.spacer
{
  background: url(../images/charte/img-spacer.jpg) no-repeat top left;
	float:left;
	height: 1px;
	width: 370px;
	margin: 5px 0 10px 10px;
}

.spacer1
{
  background: url(../images/charte/spacer1.jpg) no-repeat top left;
	/*float:left;*/
	height: 1px;
	width: 760px;
	margin: 5px 0 10px 45px;
}

#atelier1
{
  width: 835px;
	height: 197px;
	float:left;
	padding: 20px 10px 0 15px;
	line-height: 17px;
	margin-top:5px ;
}

/* --------------------------page merci------------------------------ */
#merci
{
    padding-top: 120px;
	  float:left;
    padding-left:280px;

}
    #merci p {

        font-weight: bold;
        text-align: center;
				color:#DEA603;
        font-size: 13px;
				width: 300px;
				padding: 15px;
				background-color: #fff;
				border: solid 1px #C7C7C7;
        }
     #merci a:link, #merci a:visited
    {
      font-weight: bold;
      text-decoration: underline;
      color:#666;
    }
    #merci a:hover,  #merci a:active
    {
      font-weight: bold;
      text-decoration: none;
      color:#DEA603;
    }
/* --------------------------coordonnees page------------------------------ */
#coordonnees-top{background: url(../images/charte/bg-coordonnes.jpg) no-repeat top left; width: 348px; height: 77px; float: left;}
#horaires-top{background: url(../images/charte/bg-horaires.jpg) no-repeat top left; width: 348px; height: 77px; float: left;}
#coordonnees-content{ background: #EAEAE8;height: 118px; width: 348px;float:left; }
#coordonnees-content p
{
  text-align: center;
	padding-bottom:5px ;
	line-height: 16px;
}

 #coordonnees-content a:link, #coordonnees-content a:visited
    {
      font-weight: bold;
      text-decoration: underline;
      color:#666;
    }
   #coordonnees-content a:hover,  #coordonnees-content a:active
    {
      font-weight: bold;
      text-decoration: none;
      color:#DEA603;
    }

#coordonnees_footer{
    background: #C5C5C5;
    width: 340px;
    height:24px;
    float:left;
    margin:0;
    padding:8px 8px 8px 0px;
}
#coordonnees_footer a:link, #coordonnees_footer a:visited
{
	float:right;
    width:24px;
    height:24px;
	background:url(../images/charte/img-fermer.jpg) no-repeat top right;
}
#coordonnees_footer a:hover, #coordonnees_footer a:active{background:url(../images/charte/img-fermer-over.jpg) no-repeat top right;float:right;width:24px;height:24px;}

.couleur2
{
 color:#DEA603;
 margin-top:15px;
}

/* ===| IV. NAVIGATION |===============================================*/
/* ---| THE END |------------------------- */