@charset "utf-8";
/* CSS Document */

/********************************************************************************************************************/
/* Aspect général des pages */
/* Couleur de page, typo, centrage, largeur, etc. */
/********************************************************************************************************************/

* {margin: 0px; padding: 0px;}

html {
overflow:scroll;/*permet de régler que les pages bougent légèrement dans Firefox*/
}

body{ /*c'est la base de la page. Couleur de fond, typo*/
	background:#e0dcba;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#333;
	line-height:1.3em;
	text-align:center; /* Permet de centrer le contenu de la page dans IE (mais le texte est centré, il faut faire un texte-align-left pour remettre le texte à gauche). */
}

#page{ /*c'est la base de la zone. Couleur de fond, marges, grandeur*/
	margin:0 auto; /* Permet de centrer le contenu de la page, sauf pour IE */
	width:900px;
	text-align:left;
}

/********************************************************************************************************************/
/* Entete et son visuel */
/********************************************************************************************************************/

.entete{
	width:900px;
	height:349px;
	line-height: 0;	
	background:#e0dcba url(../images/entete.jpg);
	overflow:visible !important /*Firefox*/; 
	overflow:hidden /*IE6*/;
}

/********************************************************************************************************************/
/* Nom d'entreprise et fait que celui-ci soit cliquable et mène vers index.html*/
/********************************************************************************************************************/
.entreprise{
	width:346px; 
	height:75px; 
	position:absolute; 
	z-index:1; 
	margin:20px 0 0 155px; 
	background:url(../images/titre.png); 
}

/********************************************************************************************************************/
/* Menu principal : Entreprise, Produits et services, promotions, etc. */
/* Menu des produits : Vins, bières, alcool, etc. */
/********************************************************************************************************************/
.menuPrincipal {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	width:190px; 
	height:180px; 
	position:absolute; 
	z-index:2; 
	margin:121px 0 0 210px; 
	overflow:visible !important /*Firefox*/; 
	overflow:hidden /*IE6*/;
}

.menuProduits {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	width:187px;
	height:210px;
	position:absolute;
	z-index:3;
	margin:430px 0px 0px 25px;
	overflow:visible !important /*Firefox*/;
	overflow:hidden /*IE6*/;
}

.menuPrincipal ul, .menuProduits ul {
border-top: 1px dashed #aaa583;	
padding: 0;
}

.menuPrincipal li, .menuProduits li  {
border-bottom: 1px dashed #aaa583;
padding: 0;
list-style: none;
}

.menuPrincipal li a, .menuProduits li a{
	font-size: 1.1em;
	color: #5f3f5c;
	font-weight:bold;
	display: block;
	padding: 8px 0 8px 8%;
	text-decoration: none;
	width: 95%;
}

.menuPrincipal li a:hover, .menuProduits li a:hover  {
	color: #8e8a9a;
    display:block;
    background:url(../images/carre.gif) no-repeat left 50%;
    text-decoration:none;
	/*padding:12px 10px 12px 15px;*/
}


/********************************************************************************************************************/
/* Éléments dans la page : Contenu, sous-menu, pied de page, etc. */
/* Contenu différent selon s'il y a un sous-menu ou non */
/********************************************************************************************************************/

#contenu{
clear:both;
background:#fff url(../images/fondContenu.png) repeat-y;
padding:20px 140px 0px 192px;
}

#contenu1{
background:#fff url(../images/fondContenu.png) repeat-y;
clear:both;
}

.sousMenu{
float:left;
width:240px;
}

.introduction{
margin:0px 100px 0px 255px;
width:542px;
}

#piedPage{/*zone qui contient le copyright*/
	clear:both;
	text-align:center;
	font-size:0.85em;
	background:#8e8a9a url(../images/fondPied.png) no-repeat;
	height:140px;
}


/********************************************************************************************************************/
/* Éléments photos */
/* Quand il y a une photo et du texte côte à côte */
/********************************************************************************************************************/
.blocPhotoGauche{margin-left:0px;}

.photoGauche{
float:left;
width:200px;
}

.espacePhotoGauche{
float:right;
width:350px;
padding-top:10px;
padding-left:18px;
}

.espacePhotoGauchePointille{
float:right;
width:349px;
padding-top:10px;
border-left: 1px dashed #5f3f5c;
padding-left:18px;
}

.blocPhotoDroite{margin-right:0px;}

.photoDroite{
float:right;
width:200px;
}

.espacePhotoDroite{
float:left;
width:356px;
padding-right:12px;
padding-top:10px;
}

.espacePhotoDroitePointille{
float:left;
width:355px;
padding-right:12px;
padding-top:10px;
border-right: 1px dashed #5f3f5c;
}

.blocPhotoGauche2{margin-left:55px;}

.photoGauche2{
float:left;
width:200px;
}


/********************************************************************************************************************/
/* Éléments photos SEULEMENT DANS LE DÉBUT DE LA PAGE, ZONE INTRODUCTION*/
/* Quand il y a une photo et du texte côte à côte */
/********************************************************************************************************************/
.blocPhotoGauche1{margin-left:0px;}

.photoGauche1{
float:left;
width:200px;
}

.espacePhotoGauche1{
float:right;
width:322px;
padding-top:10px;
padding-left:18px;
}

.espacePhotoGauchePointille1{
float:right;
width:349px;
padding-top:10px;
border-left: 1px dashed #5f3f5c;
padding-left:18px;
}

.basIntro{
margin-left:33px;
margin-top:20px;
padding-right:40px;
}


/********************************************************************************************************************/
/* Typographie */
/********************************************************************************************************************/

h3 {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:1.3em;
	color:#5c3c59;
	margin-bottom:14px;
	margin-top:34px;
}

.petitCaractere{font-size:0.85em;}

p{line-height:1.4em;}

#grandTitre{
background:#fff url(../images/fondContenu.png) repeat-y;
padding:0px 120px 0px 190px;
}

/********************************************************************************************************************/
/* Liens hypertextes et ancre "Haut de page" */
/********************************************************************************************************************/
a {color: #8e8a9a;}
a:hover {color: #5f3f5c;}

a.hautPage, a.hautPage:hover {
	color: #5f3f5c;
	font-family: Verdana, Arial,Helvetica, sans-serif;
	font-size:0.85em;
	margin-left:410px;
}


/********************************************************************************************************************/
/* Images*/
/********************************************************************************************************************/
a img{border:none;} /* Enlever la bordure bleue des images */

img {display: block;}


/********************************************************************************************************************/
/* Tableau de données */
/********************************************************************************************************************/

.donnees table {
   text-align:center; /* Aligner à gauche le tableau */
   border-collapse: collapse; /* Coller les bordures entre elles */
}

.donnees td {
   text-align: left;
   padding: 8px 25px 8px 0px;
}

td.pointille {
   border-left: 1px dashed #5f3f5c; /* Effet pointillé */
   padding-left:25px;
}

td.pointille2 {
   border-bottom: 1px dashed #5f3f5c;
   text-align: left;
   padding: 8px 5px 8px 5px;
   vertical-align:top;
}

/********************************************************************************************************************/
/* Outil : Annuler l'effet des boites flottantes */
/********************************************************************************************************************/
.spacer {
  clear: both;
}