body{
font-family : Arial, Helvetica, sans-serif;
color:#333333;
margin-top: 0px;  /*Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 0px;   /* Idem pour le bas du navigateur */

border-bottom: 0px;/*//IE*/
border-top: 0px;/*//IE*/
margin: auto; /* Pour centrer notre page */
}


/*//////////////////////////////   TOUS LES ( CLASS ) /////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////*/
/*este es el texto que esta arriba de todas los titulos de las tablas de information es un texto verde claro en gras*/
.texteTitreCentre{ 
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
line-height : 20px;
color : #a5c500;
font-weight : bold;

/*text-align: left;
text-indent: 10px;*/
} 

/*este es el texto que esta en todas los titulos de las tablas de information es un texto verde claro en gras EN BAS */
.texteTitreCentreBas{ 
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 20px;
color : #a5c500;
font-weight : bold;
/*text-indent: 10px;*/
} 

/*este es el texto que esta arriba de todas las tablas de information es un texto rouge barro en gras*/
.texteTitreDroite{ 
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
line-height : 20px;
color : #CC0000;/*#ffffff;*/
font-weight : bold;
/*text-indent: 5px;*/
text-align: center;
} 

/*este es el texto que esta arriba de todas las tablas de information es un texto rouge barro en gras*/
.texteTitreAutre{ 
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
line-height : 20px;
color : #ffffff;
font-weight : bold;
/*text-indent: 5px;*/
text-align: center;
} 

/*este es el texto que esta al interior de todas las tablas de information es un texto verde en medio chiquito*/
.table_info_text { 
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;  /*11px;*/
color: #009900;  /*#333333;*/
text-align: justify;
/*text-indent: 5px;*/
line-height : 14px;

/*este es para el border de los cuadros de infos */
border: 1px solid #ffffff; 
border-bottom: 0px; 
border-top: 0px;
} 

/*este es el texto que esta al interior de las tablas de login */
.table_text_log { 
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;  /*11px;*/
color: #009900;  /*#333333;*/
text-align: left;
/*text-indent: 5px;*/
line-height : 14px;

/*este es para el border de los cuadros de infos */
border: 1px solid #ffffff; 
border-bottom: 0px; 
border-top: 0px;
}
 


/*//////////////////////////////////////////         TEXTs       ///////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*este es el titulo de todas las paginas el mas grande*/
.texteTitreGrand { 
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
color : #ff6600;/*#009900;*/
font-weight : bold;
}

/*este es el titulo de todas las paginas el mas pequenno*/ 
.texteTitrePetite { 
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
color : #009900;
font-weight : bold;
}

/*este es el testo que vamos a utilisar para los pie de paginas pequennos con un cuadro ROJO*/
.textePetiteGras { 
font-family : Arial, Helvetica, sans-serif;

/*border-top : 1px dotted #009933;*/
border-left: 1px dotted #FF6600; /* bordure gauche du cadre et couleur du cadre */
border-right: 1px dotted #FF6600; /*bordure droite du cadre */
border-top: 1px dotted #FF6600; /*bordure droite du cadre, solid signifie que la bordure sera pleinne et px taille en pixel */
border-bottom: 1px dotted #FF6600; /* 009933bordure droite du cadre #66CC00;#cc0000;*//*#ff6600; */

text-align: center;
font-size : 10px;
color: #333333;
line-height : 14px;
vertical-align: bottom;
}
 
.textePetiteGris { 
font-family : Arial, Helvetica, sans-serif;

text-align: center;
font-size : 11px;
color: #333333;
line-height : 12px;
vertical-align: bottom;
}

.textePetiteCommande { 
font-family : Arial, Helvetica, sans-serif;

font-size : 11px;
color: #333333;
line-height : 12px;
vertical-align: bottom;
}
/* La première lettre de chaque paragraphe que este dentro de un td(columna)*/
.textePetiteGris: first-letter{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;  /*En gras*/
font-variant: small-caps;
font-size: 14px;
}


/*C'est le text qui a la meme taille et coleur de links mais sans decoration */
.texteSansLink { 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #669900;
text-decoration: none;
}

/*teste du meme coleur que les infos de haut droite mais sans blod et la meme taille*/
.textesmall { 
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #cc0000; /*coleur marron*/
} 

.textedate { 
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
}

/*este es el texto que esta arriba y a la derecha donde estan las tres opciones accueil | plan du site | Aide*/
.texteHautDroite { 
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 20px;
color : #cc0000;
font-weight : bold;
} 

/*este es el texto que esta abajo de la pagina con el copyrigth y las otras infos*/
.copyright { 
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align:center;
color : #999999;
line-height : 12px;
} 

/*este es el texto que esta en lo ultimo de abajo con la informationes de la maquina del cliente*/
.pieDePage { 
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 8px;
text-align:center;
color : #999999;
line-height : 10px;
} 

 
/*este es un cadre que voy a utilizar en cualquier lugar */
/*width:800px; permet de donner une longueur au cadre .*/
/*margin:auto; permet de mettre une marge externe au cadre */
/*padding:10px;permet de mettre une marge à l'interieure du cadre . */
/*background-color: #66CC00; /*permet de donner une couleur de fond au cadre*/
/*border-left: 1px; solid #000000;  bordure gauche du cadre et couleur du cadre */
/*border-right: 1px; solid; #000000; bordure droite du cadre */
/*border-bottom: 1px ridge  #ff6600;#66cc00;solid #000000; bordure droite du cadre */
/*border-top:1px; solid #66CC00; bordure droite du cadre, solid signifie que la bordure sera pleinne et px taille en pixel */
/*border-style: dotted; /*
/*border-width: 2px; 
/*border-color: #ff6600;
/*width:50%*/




/*//////////////////////////////////   TOUS LES ( ID ) ///////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////*/

/*este es un cadre que voy a utilizar en el centro */
#cadre_titre_centre{
color: #009900; 
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #009900;
}


/*este es el cuadro que vamos a utilizar para mostrar los pruduits y las categorias 
images/cadreProduit.jpg 

no-repeat L'image d'arrière-plan n'est affichée qu'une seule fois.

repeat-x
L'image d'arrière-plan ne se répète qu'horizontalement.

repeat-y
L'image d'arrière-plan ne se répète que verticalement.
*/
#cadre_produit{
background-image: url("images/cadreProduit.png");
background-repeat: no-repeat;
padding: 8px;
background-position: center;
}

/*este es un cadre de titre que voy a utilizar en la  droite avec imagen de logo*/
#cadre_titre_droite{
background-color: #FFFFFF;/*background-color: #66CC00;*/
width: 1024px;
background-image: url("images/tetetitre.jpg");
background-repeat: repeat-x;
}

#cadre_titre_rest{
color: #FFFFFF; /*#009933; a5c500*/ 
background-color: #a5c500;/*ffffff;*/
border-style: solid;
border-width: 1px;
border-color: #009900;
}


/*este es un cadre de informacion que voy a utilizar en la columna de derecha */
#cadre_info_droite{
padding: 8px; /*permet de mettre une marge à l'interieure du cadre . */
/*background-image: url("images/fondColDroite.png");
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;*/
border-left: 1px solid #009933;/*#CCCCCC;  bordure gauche du cadre et couleur du cadre */
border-right: 1px solid #009933;/*#CCCCCC; bordure droite du cadre */
border-top: 0px dotted #009933;/*#009933; bordure haute du cadre, solid signifie que la bordure sera pleinne et px taille en pixel*/
border-bottom: 1px solid #009933;/*#CCCCCC;  bas droite du cadre #66CC00;#cc0000;*//*#ff6600;*/
}


/*este es un cadre de informacion que voy a utilizar en la columna de derecha */
#cadre_info_produit{
padding: 4px; /*permet de mettre une marge à l'interieure du cadre . */
/*background-image: url("images/fondColDroite.png");*/
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
line-height : 14px;
color: #666666;

border-left: 0px dotted #009933;/*#CCCCCC;  bordure gauche du cadre et couleur du cadre */
border-right: 0px dotted #009933;/*#CCCCCC; bordure droite du cadre */
border-top: 1px solid #009933;/*#009933; bordure haute du cadre, solid signifie que la bordure sera pleinne et px taille en pixel*/
border-bottom: 1px solid #009933;/*#CCCCCC;  bas droite du cadre #66CC00;#cc0000;*//*#ff6600;*/
}


/*cadre_info_prix*/
#cadre_info_prix{
padding: 4px; /*permet de mettre une marge à l'interieure du cadre . 
background-color: */
line-height : 12px;
border-left: 1px solid #FF6600;/*#CCCCCC;  bordure gauche du cadre et couleur du cadre */
border-right: 1px solid #FF6600;/*#CCCCCC; bordure droite du cadre */
border-top: 1px solid #FF6600;/*#009933; bordure haute du cadre, solid signifie que la bordure sera pleinne et px taille en pixel*/
border-bottom: 1px solid #FF6600;/*#CCCCCC;  bas droite du cadre #66CC00;#cc0000;*//*#ff6600;*/
}

/*cadre_info_prix*/
#cadre_info_photo{
padding: 4px; /*permet de mettre une marge à l'interieure du cadre . 
background-color: */
line-height : 12px;
border-left: 0px dotted #009933;/*#CCCCCC;  bordure gauche du cadre et couleur du cadre */
border-right: 0px dotted #009933;/*#CCCCCC; bordure droite du cadre */
border-top: 1px solid #009933;/*#009933; bordure haute du cadre, solid signifie que la bordure sera pleinne et px taille en pixel*/
border-bottom: 0px dotted #009933;/*#CCCCCC;  bas droite du cadre #66CC00;#cc0000;*//*#ff6600;*/
}


/*este es un cadre que voy a utilizar en las informations del centro ejemplo select epicier */
#cadre_info_centre{
padding: 5px;/*permet de mettre une marge à l'interieure du cadre . */
border-left: 0px dotted #009933; /* bordure gauche du cadre et couleur du cadre */
border-right: 0px dotted #009933; /*bordure droite du cadre */
border-top: 0px dotted #009933; /*bordure droite du cadre, solid signifie que la bordure sera pleinne et px taille en pixel*/
border-bottom: 1px solid #CCCCCC; /* bordure droite du cadre #009933; #66CC00;#cc0000;*//*#ff6600;*/
}

/* Estos son los cuadros que van a mostrar todos los productos en columnas 
y lineas por cada categoria dentro de la tienda del epicier*/
.cadre_commentaires{ 
border-left: 1px solid #CCCCCC; /* bordure gauche du cadre et couleur du cadre */
border-right: 1px solid #CCCCCC; /*bordure droite du cadre */
border-top: 1px solid #CCCCCC; /*bordure droite du cadre, solid signifie que la bordure sera pleinne et px taille en pixel */
border-bottom: 1px solid #CCCCCC; /* bordure droite du cadre 009933 #66CC00;#cc0000;*//*#ff6600; */
} 

/*este es el cuadro en la parte baja de cuadros de infos CAMBIAR NOMBRE DESPUES*/
#table_bas_image{
padding: 1px;       /*permet de mettre une marge à l'interieure du cadre.*/
border-style: dotted; 
border-left: 1px solid #CCCCCC; /* bordure gauche du cadre et couleur du cadre*/
border-right: 1px solid #CCCCCC; /*bordure droite du cadre*/
border-top: 0px dotted #009933; /*bordure droite du cadre, solid signifie que la bordure sera pleinne et px taille en pixel*/
border-bottom: 1px solid #CCCCCC; /* bordure droite du cadre */
}




/*////////////////////////////////////////////    	   HR      /////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* todas las <hr align="center" size="1" noshade><!----> */
hr { 
color: #009900;
clear: both;
width: 100%;
border: 0; /* enleve toute bordure*/
border-bottom: 1px #009933 solid; /* une seule bordure (sinon firefox met une bordure en haut ET en bas mais pas IE*/
height: 1px; /* pour IE */
}



/*////////////////////////////////////////////			P	   /////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*los parafos 
p{ 
font-family : Arial, Helvetica, sans-serif;
text-indent : 5px;
line-height : 12px;
text-align : justify;
color : #666666;
}*/


/*////////////////////////////////////////////			TD       ///////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* toda las infos que estan en los td donde no se especifiquen ninguna otra clase */
td{ 
font-family : Arial, Helvetica, sans-serif;/*font de la letra*/
font-size : 12px;/*tamanno de la letra*/
color: #333333;
line-height : 12px;/*espacio entre lineas */
} 

/*los parafos que esten dentro de una lista li la primera linea empiez defasada , td ol p, td ul p:*/
td p{ 
font-family : Arial, Helvetica, sans-serif;
/*text-indent : 5px;espacio de la primera linea con respecto a las otras*/
line-height : 14px;
text-align : justify;
}

/*todos los textos de los links que estan dentros de (td)*/
td a{
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 14px;
}
/* La première lettre de chaque paragraphe que este dentro de un td(columna)*/
td p:first-letter{
/*font-family: Arial, Helvetica, sans-serif;
font-weight: bold;  En gras
font-variant: small-caps;
font-size: 14px;*/
}
/* La première ligne de chaque paragraphe de un td(columna) - En petites capitales */
td p:first-line 
{
/*font-variant: small-caps; */
}



/*//////////////////////////////////////////////	    A       ////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*estos son todos los link standars et autres */
a { 
font-family: Arial, Helvetica, sans-serif;
color : #669900;
text-decoration : underline;
} 

/*subrallado de link;*/
a:hover { 
font-family:Arial, Helvetica, sans-serif;
color : #ff6600;
text-decoration : underline;
} 


/**************************************************************** LES AUTRES LINKs *********************************/

/*************************************************************** LIEN 1 *********************************************/
A.lien1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#669900; text-decoration:none; line-height:14px; }/*368DC5 none*/
A:hover.lien1 { color:#ff6600; text-decoration:underline; }/*6B4805*/


/**************************************************************** LIEN 2 ***********************************************/
A.lien2 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color:#669900; text-decoration:underline; }/*000000*/
A:hover.lien2 { color:#ff6600; text-decoration:underline; }/*6B4805*/


/****************************************************************** LIEN 3 *********************************************/
A.lien3 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color:#669900; text-decoration:none; }/*368DC5*/
A:hover.lien3 { color:#ff6600; text-decoration:none; }/*6B4805*/

a:hover.liencopyright{
color: #368dc5;
text-decoration : none;
} 

/*************************************************************** LIEN 1 *********************************************/
A.lienPetit { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color:#333333; text-decoration:none; line-height:14px; }/*368DC5 none*/
A:hover.lienPetit { color:#ff6600; text-decoration:underline; }/*6B4805*/

/*************************************************************** LIEN PAGE SUIVANTE *********************************************/
A.lienSuivante { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#669900; text-decoration:none; line-height:14px; }/*368DC5 none*/
A:hover.lienSuivante { color:#ff6600; text-decoration:underline; }/*6B4805*/



/*///////////////////////////////      INPUT  -  SELECT  - TEXTAREA  ///////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*Color de todos los lugares donde escribo es en blanco ffffff y el border en verde*/
input, select, textarea{ 
border: 1px solid #009933;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color : #333333;
} 



/*----------------------------------------------------------------------------------------------------------------------*/
/*//////////////////////////////////////////////	  FORM      ////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
form { 
background-color: #FFFFFF;
margin-bottom : 0;
} 

/*////////////////////////////////////////////	   BULL Help      //////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
.bulleHelp{
	position: absolute;	
	visibility : hidden;
	
	left: 20px;
	top: 20px;
	width: 230px; 
	max-width: 230px;
	height: auto;/*230px*/
	max-height: 230px;
	
	background-color: #FFFFFF;
	margin: 2px 5px 2px 5px;

	filter: alpha(opacity=100);
	-moz-opacity: 1; 
	opacity: 1;
	-khtml-opacity: 1;
	
	padding: 1px;       /*permet de mettre une marge à l'interieure du cadre.*/
			
	color: #CC0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	text-align: justify;
	
	border: 1px solid #009933;
}

/*////////////////////////////////////////////	   BULL Photo      //////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
.bullePhoto{
	position: absolute;	
	visibility : hidden;
	
	left: 0px;
	top: 0px;
	width: 600px; 
	max-width: 600px;
	height: 550px;
	max-height: 550px;

	background-color: #FFFFFF;/*#FFFFCC;*/0.9
	margin: 2px 5px 2px 5px;

	filter: alpha(opacity=100);
	-moz-opacity: 1; 
	opacity: 1;
	-khtml-opacity: 1;
	
	padding: 1px;       /*permet de mettre une marge à l'interieure du cadre.*/
			
	color: #CC0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	text-align: justify;
	
	border: 1px solid #009933;
}


/***********************************************************************/
/*////////////////////////////////////////////	   BULL Help      //////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
.bulleHelpP{
	position: absolute;	
	visibility : hidden;
	
	left: 20px;
	top: 20px;
	width: 200px; 
	max-width: 200px;
	height: auto;/*200px*/
	max-height: 202px;
	
	background-color: #FFFFFF;
	margin: 2px 5px 2px 5px;

	filter: alpha(opacity=100);
	-moz-opacity: 1; 
	opacity: 1;
	-khtml-opacity: 1;
	
	padding: 1px;       /*permet de mettre une marge à l'interieure du cadre.*/
			
	color: #CC0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	text-align: justify;
	
	border: 1px solid #009933;
}