/*************************************/
/*              BODY                 */
/*************************************/



body
{
	background:#262225;
	width: 960px;
	margin: auto; /* Pour centrer notre page */
	margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 20px;    /* Idem pour le bas du navigateur */
}


/*************************************/

/*          Image coin gauche        */

/*************************************/
div#top_left 
{
	float:left;
	width:173px;
	height:137px;
	background:url(images/top_left_bout.gif) no-repeat;
}
div#top_left_bout
{
	float:left;
	width:173px;
	height:137px;
	background:url(images/top_left.gif) no-repeat;
}


/* zone cliquable */
#zone0
{   
	float: left;
	width : 140px;
	height: 100px;
	margin-left: 20px;
	margin-top: 20px;
	border:2px;
}

/*************************************/
/*          Logo Oenolimit           */
/*************************************/
div#top 
{
	float:left;
	width:775px;
	height:137px;
	background:url(images/top.gif) no-repeat;
}

 /* zone cliquable */
#zone1 
{
	float: left;
	width : 340px;
	height: 80px;
	margin-left: 170px;
	margin-top: 25px;
}


div#connexion 
{
	float:right;
	width:166px;
	height:30px;
	font-family: Arial, Verdana, sans-serif;
	font-size:x-small;
	color:white;
	text-align:right;
	margin-top: 25px;
	margin-right: 25px;
}



	

.connect
{	
	font-size:9px;
	width:100px;
	height:12px;

}

.valid_connect
{	
	cursor:pointer;
	border: 0px;
	height:30px;
	width:30px;
	text-align:center;
	font-size:9px;
	background:url(images/ok.png) no-repeat;
}

/*************************************/
/*               Menu                */
/*************************************/
div#menu 
{
	clear:both;
	float:left;
	width:173px;
	height:433px;
	background:url(images/menu_left.gif) no-repeat;
	text-align:center;
	font-family: Arial, Verdana, sans-serif;
	color:white;
	font-size:13px;
	/*font-weight:bold;*/
                     position: relative;
	/*color:#B3B3B3;*/
}
	
div#separateur
{
	margin: auto;	
	width:56px;
	height:10px;
	background:url('images/separateur.png') no-repeat;;
}

div#div_bouton_recherche
{
	position: absolute;
	bottom: 8px;
	left: 20px;
}

.bouton_recherche_standard
{
	cursor:pointer;
	background: url(images/bouton2.png) no-repeat;
	border: 0px;
	width: 119px;
	height: 21px;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
	text-decoration: none;
	color:white;
	/*color: #B3B3B3;*/
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #707070;
   color: black;
}

div#recherche
{
	width:172px;
	height:190px;
}

div#libelle_menu
{
	width:172px;
	height:225px;
}

/*************************************/
/*              Contenu              */
/*************************************/
div#principale 
{
/*padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels 
   padding-left: 20px;*/
	float:left;
	width:757px;
	height:433px;
}

div#menu2 
{
	float:left;
	width:757px;
	height:32px;
	background-color:#262225;
	font-family: Arial, Verdana, sans-serif;
	text-align:left;
	vertical-align:middle;
	font-size:12px;
	/*font-weight:bold;*/
	color:white;
}

.element_contenu a /* Tous les liens se trouvant dans un menu */
{
	text-decoration: none;
	color:white;
	/*color: #B3B3B3;*/
}

.element_contenu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #707070;
   color: black;
}


div#titre_en_cours
{
	width:591px;
	height:30px;
	background-color:#AB1225;
	color:white;
    font-size:14px;
	vertical-align:middle;
}


div#contenu_boutique
{
	/*padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels 
	padding-top: 20px;
    padding-left: 20px;*/
	overflow:scroll;
	overflow-x:hidden;
	float:left;
	width:606px;
	height:401px;
	font-family: Arial, Verdana, sans-serif;
	font-size:15px;
	background-color:white;
}


div#contenu_bordeaux
{
	/*padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels 
	padding-top: 20px;
    padding-left: 20px;*/
	background: url(images/fond_bordeaux.jpg) no-repeat;
	overflow:scroll;
	overflow-x:hidden;
	float:left;
	width:757px;
	height:433px;
	font-family: Arial, Verdana, sans-serif;
	font-size:15px;
	background-color:white;
}

div#detail
{
	float:left;
	width:84px;
	height:20px;
	background-color:#707070;
	color:white;
    font-size:12px;
	text-align:center;
	margin-top: 10px;
}

div#comment
{
	//float:left;
	width:100px;
	height:20px;
	background-color:#707070;
	color:white;
    font-size:12px;	
    text-align:center;
	margin-top: 10px;
	margin-left: 50px;
}


.nombre
{	
	width:25px;
        height:13px;
	font-size:12px;
        text-align:right;
		border: 1px solid #AB1025;
}


div#caddie
{
	float:left;
	width:151px;
	height:401px;
	background: url(images/petite_commande.jpg);
	background-color:#262225;
	font-family: Arial, Verdana, sans-serif;
	color:black;
	font-size:12px;
	overflow:auto;
	overflow-x:hidden;
}


div#grand_caddie
{
	width:757px;
	height:401px;
	background: url(images/grande_commande.jpg) no-repeat;
	font-family: Arial, Verdana, sans-serif;
	color:black;
	font-size:12px;
	overflow:auto;
	overflow-x:hidden;
	float:left;
}

/*div présente dans grand_caddie pour la déporter du bord*/
div#affiche_commande
{
	width:657px;
	height:401px;
	font-family: Arial, Verdana, sans-serif;
	color:black;
	font-size:12px;
	overflow:auto;
	padding-left: 100px;
}

.element_caddie a /* Tous les liens se trouvant dans un menu */
{
	text-decoration: none;
	color:black;
	/*color: #B3B3B3;*/
}


.element_caddie a:hover /* Quand on pointe sur un lien du menu */
{
	background-color: #707070;
	color: white;
}

div#photoflot p
{
	margin:0;
	padding:0;
	text-align:justify;
}

div#photoflot img
{
	float:left;
	background-color:#fafbfc;
	/*border:1px solid #b0b0b0;*/
	margin:0 0 10px 10px;
	padding:5px;
	width:150px;
}

hr
{
	clear:left;
}

.bouton
{ 
	width:20px; 
	height:20px;
} 


/*************************************/
/*            Barre droite           */
/*************************************/


div#right 
{
	float:left;
	width:18px;
	height:433px;
	background:url(images/right.gif) no-repeat;
}

	
/*************************************/
/*             Barre bas             */
/*************************************/
div#bottom 
{
	clear:both;
	float:left;	
	width:948px;
	height:11px;
	background:url(images/bottom.gif) no-repeat;
}

/*************************************/
/*             mentions             */
/*************************************/
div#conditions
{
	width:300px;
	float:left;
	height:11px;
	font-family: Arial, Verdana, sans-serif;
	color:white;
	font-size:12px;
}

div#copyright
{
	width:500px;
	float:right;
	height:11px;
	font-family: Arial, Verdana, sans-serif;
	color:white;
	font-size:12px;
	text-align:right;
}


/*************************************/
/*             formulaire            */
/*************************************/


.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

</style>