/**
*	Style Gusto & Jo
*	Didier Ciochetto - Technimédia
*/


html
{
	background-color: white;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	color: #666;
}

body
{
	position: relative;
	margin: 0 auto;
	padding: 150px 245px 10px 165px;
	width: 505px;
}



/*+ Les balises générales. +*/

p
{
	text-align: justify;
	margin: 1ex;
}

.centrer {
text-align:center;
}

a img
{
	border: 0;
	text-decoration: none;
	position: relative;
	top: 3px;
}

hr
{
	clear: both;
	margin: 0 20px;
}


/*+ Les titres. +*/
h1
{
	color: #2ad;
	font-size: 1.3em;
	text-transform: uppercase;
	clear: both;
	padding: 10px;
	/* margin: 5px 20px; */
	display: inline; /* inline-block serait parfait, mais il y a IE... :-( */
	line-height: 42px;
	margin-left: 20px;
	background-color: white;
	white-space: nowrap;
}

h2
{
	font-size: 1.2em;
	padding-left: 7px;
}
h3, h4
{
	font-size: 1.1em;
	padding-left: 1ex;
	color: #2ad;
}


/*+ Les liens +*/
a, .styleLien
{
	color: #2ad;
}

a:hover, .styleLien:hover, p.identification a:hover, p.inscriptionLettre a:hover, h4.panier a:hover, h4.contact a:hover
{
	color: #666;
	/* background: none; après on doit réécrire tous les fonds des liens... :-/ */
	/* Correction bug IE. Merci Alsacreations. */
}


/* Equilibrage des navigateurs. */
form
{
	margin: 0;
}

small
{
	font-size: 8pt;
}


/* Quand on passe en application/xml l'alignement par défaut n'est pas le m^. */
td
{
	vertical-align: middle;
}


/* Sur la page accessibilité. */
kbd 
{
	padding: 0px 1px;
	border-width: 1px 2px 2px 1px;
	border-style: outset;
	background: #faf6f6;
}

pre
{
	font-family: Verdana, Arial, sans-serif;
	margin-left: 3ex;
}




/************************************************************************************************
 * +++++++++++++++++++ Les positions absolues, présentation générales. ++++++++++++++++++++++++ *
 ************************************************************************************************/

.logo
{
	position: absolute;
	top: 5px;
	left: -20px;
	width: 957px;
	text-align: center;
	z-index: 2;
}


.bandeau
{
	position: absolute;
	top: 70px;
	left: -20px;
	width: 957px;
	height: 26px;
	background: url('images-site/bandeau.png') no-repeat bottom center;
}


.barreOnglets
{
	position: absolute;
	top: 110px;
	left: -20px;
	width: 957px;
	text-align: center;
	height: 27px;
	z-index: 2;
}

table.onglets
{
	text-align: center;
	margin: 0 auto;
	z-index: 3;
	white-space: nowrap;
}

.onglet, .ongletActif
{
	font-weight: bold;
	font-size: 9pt;
}
.onglet a, .ongletActif a
{
	padding: 0 8px 10px;
}

.onglet a
{
	color: #666;
	text-decoration: none;
}
.ongletActif a
{
	color: #333;
	text-decoration: none;
}


.onglet a:hover, td.o a:hover
{
	color: #666;
	background: url('images-site/onglet-actif.png') repeat-x bottom;
}

.ongletActif a:hover, .sousOnglets a:hover
{
	/* Correction bug IE. */
	background-color: transparent;
	color: #333;
}

.sousOnglets, .vide
{
	display: none;
}


/*+cccccccccccccccccccccccccccc Les colonnes gauche / droite. cccccccccccccccccccccccccccccc+*/

.cadres p
{
	padding: 5px;
}


.cadres h4
{
	background: url('images-site/colonne-h4.png') no-repeat top left;
	height: 25px;
	padding: 2px 0 0;
	text-align: center;
}
.cadres h4, .cadres h4 a
{
	text-decoration: none;
	color: #2ad;
}
.cadres h4 a:hover, .cadres h3 a:hover
{
	color: #666;
}


/*------------ La colonne de gauche. ++++++++++ */
.engagements
{
	position: absolute;
	top: 140px;
	left: -10px;
	width: 160px;
	padding-top: 4em;
}
.engagements a
{
	color: #666;
}
.engagements h3
{
	background: url('images-site/colonne-h3.png') no-repeat left;
	padding-left: 20px;
	border-bottom: 1px solid #2ad;
}


/* Le téléphone qui n'a pas la m^ image de fond. */ 
h3.téléphone
{
	margin-left: 10px;
	margin-top: 1em;
	padding-right: 15px;
	padding-top: 10px;
	text-align: right;
	height: 53px;
	background: url('images-site/cadre-tel.png') no-repeat top left;
}
h3.téléphone a
{
	color: black;
}

/* Les rayons affichés dans la colonne. */
.engagements h3 a
{
	color: #2ad;
	text-decoration: none;
}
.engagements h3 a:hover
{
	color: #666;
}
.rayonsPrincipaux ul
{
	list-style-type: none;
	padding: 0;
	margin: -10px 0 0;
}
.rayonsPrincipaux a
{
	text-decoration: none;
}
.rayonsPrincipaux a:hover
{
	color: #2ad;
}


/*--------------- La colonne de droite. +++++++++++++ */
.dynamiques
{
	position: absolute;
	top: 90px;
	right: -15px;
	width: 240px;
	padding-bottom: 3em;
	padding-top: 4em;
}

.dynamiques p
{
	position: relative;
	/* Correction bug IE. */
	font-size: 9pt;
	margin: -18px 18px 0 7px;
	text-align: left;
}


/* Les produits en évidence sur le coté. */
.dynamiques .miniature
{
	float: left;
	margin-right: 3px;
	margin-bottom: 5px;
}

.dynamiques input
{
	font-size: 0.8em;
}
/* Pas possible de ne faire que les input[type="text"] dans IE. */


.dynamiques small
{
	display: block;
	text-align: center;
	clear: both;
}

.dynamiques button, .inscriptionLettre button
{
	border: none;
	background-color: transparent;
	padding: 0;
	margin: 0;
	width: 30px;
	margin-bottom: -5px;
}


/*-!-!-!-!-!- Les cadres particuliers. +!+!+!+!+!+!+*/

h4.contact
{
	margin: 0;
	padding: 0 6px;
}
h4.contact a
{
	background: url('images-site/contact.png') no-repeat left bottom;
	display: block;
	height: 23px;
}

h4.panier
{
	background: url('images-site/panier.png') no-repeat top left;
	text-align: center;
	padding: 5px 0 40px 0px;
}
h4.panier a, h4.contact a
{
	color: black;
	text-transform: uppercase;
	text-decoration: none;
}
h4.panier small
{
	text-align: center;
	margin-top: -25px;
}
h4.panier small a
{
	color: #666;
}

p.inscriptionLettre
{
	position: absolute;
	top: 33px;
	right: 0;
	z-index: 2;
	text-align: center;
	background: url('images-site/lettre.png') no-repeat;
}
.inscriptionLettre #lettre_info
{
	width: 80px;
	height: 12px;
	font-size: 0.8em;
	margin-top: 5px;
}
.inscriptionLettre button
{
	position: relative;
	top: 3px;
}

#cadre_recherche_rayon
{
	width: 120px;
}


/*- fin cccccccccccccccccccccccc -*/



p.recherche
{
	position: absolute;
	top: 145px;
	left: -10px;
	text-align: left;
	line-height: 1em;
	margin: 0;
	z-index: 2;
}
p.recherche a
{
	color: black;
	text-decoration: none;
}
p.recherche button
{
	background: white;
	cursor: pointer;
	border: none;
	background-color: transparent;
	width: 40px;
	position: relative;
	top: 3px;
	/* Chipotons... */
}
p.recherche input#texte_recherche
{
	font-size: 0.8em;
	width: 120px;
}


p.identification
{
	position: absolute;
	top: 55px;
	left: 0;
	z-index: 2;
}

p.identification a, p.inscriptionLettre a
{
	color: black;
	text-decoration: none;
}


p.heure
{
	display: none;
}


/*+++ bas de page +++*/
.piedDePage
{
	position: absolute;
	left: 0;
	margin: 0;
	text-align: center;
	padding: 20px 0 10px;
	width: 100%;
}

.piedDePage a
{
	color: #666;
	text-decoration: none;
}
.piedDePage a:hover
{
	color: #2ad;
}


/* Le contenu entier pour placer le pied de page. */
div.c
{
	height: 620px;
	_height: 700px;
	background: url('images-site/h1-bleu.png') repeat-x 0 25px;
}
body.accueil div.c
{
	background: none;
}
div[class="c"]
{
	height: auto;
	min-height: 620px;
}





/************************************************************************************************
 *+++++++++++++++++++++++++++++++++ Petites classes diverses. ++++++++++++++++++++++++++++++++++*
 ************************************************************************************************/


.cache
{
	display: none;
}

.adroite
{
	text-align: right;
}

.petitFlottant, .flotte
{
	float: right;
}

.centre
{
	text-align: center;
	clear: both;
}



/* Les liens qui ressemblent à des boutons. */
a.lienBouton
{
	color: white;
	font-weight: bold;
	background-color: #2ad;
	padding: 5px;
	text-decoration: none;
	white-space: nowrap;
}
a.lienBouton:hover
{
	/* Réparation du background:none correction bug IE. */
}



/* Les boutons qui ressemblent à des liens. */
.styleLien
{
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	margin-right: 0;
}


/* Les boutons avec une image. */
button.b, .boutonPanierProduit
{
	background-color: #2ad;
	color: white;
	font-weight: bold;
	padding: 2px 7px;
	margin: 2px 0;
	border: none;
	cursor: pointer;
}

/* Les liens de retour sur les pages qui necessitent. */
.retour
{
	padding: 5px 0 6px 20px;
	background: url('images-site/retour.png') no-repeat left;
	float: right;
	margin-top: -1em;
}


/*++++++++++++++++++ Les formulaires ++++++++++++++++++++*/

.formulaire
{
	border: 1px solid silver;
	width: 80%;
	margin: auto;
}
.formulaire table
{
	width: 100%;
}

.fondForm
{
}

/* Les formulaires dans des tableaux. */
table.tableForm
{
	margin: auto;
}

.tableForm td
{
	text-align: right;
	padding: 5px;
}

.tableForm td.i, .variable td.d
{
	text-align: left;
}
.tableForm td.i textarea
{
	width: 100%;
}

/* Les images ? dans les formulaires. */
td.i img
{
	margin-bottom: -1px;
}
td.i #courriel, td.i #ami
{
	width: 80%;
}

/* Les trucs importants. <sup> ce sont les * des champs obligatoires. */
.important, sup
{
	color: red;
}

.valide
{
	color: green;
}


/* D'autres tableaux. */
table.variable
{
	margin: auto;
	width: 100%;
	text-align: center;
}



#bulle, #bulle1
{
	/* Ressemblant à une bulle d'aide. */
	position: absolute;
	font-size: small;
	font-style: normal;
	width: 30ex;
	padding: 3px;
	border: 1px outset gray;
	z-index: 5;
}

.bulle, #bulle, #bulle1
{
	background-color: #ffe;
	/* On peut pas mettre la couleur InfoBackground car Safari met du noir. */
}



/************************************************************************************************
 *+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Accueil AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+*
 ************************************************************************************************/

.blanc
{
	margin-top: -13px;
	border: 1px solid silver;
	border-top:none;
	background-color: white;
}

.blanc, p.actualités, p.conseils
{
	padding: 1%;
}

/* Les actus en bas de l'accueil. */
p.actualités
{
	margin-top: 2em;
	height: 190px;
	background: #FCFFE2 url('../images/suppl/picto-actu.png') no-repeat 95% 70%;
	border: 1px solid #360;
}
p.actualités img
{
	display: block;
	margin: auto;
}
p.actualités a, .conseils a
{
	font-weight: bold;
}
p.actualités small, .conseils small
{
	color: #666;
}

/* Les conseils d'achat, presque pareil. */
p.conseils
{
	margin-top: 1em;
	border: 1px solid #ed4;
	background: url('images-site/fond1.png') repeat-x;
}
p.conseils img
{
	display: block;
	margin: auto;
}

td.o, td.o a
{
	color: white;
}


/************************************************************************************************
 *+RARARARARARARARARARARARARARARARARARA Recherche et Accueil RARARARARARARARARARARARARARARARARA+*
 ************************************************************************************************/

/* Les rayons écrit sur l'accueil et recherche. */
.catAccueil
{
	/* Y'a plus. */
}




/************************************************************************************************
 *ARARARARARARARARARARARARARARARARARARARARA Accueil et Rayon ARARARARARARARARARARARARARARARARAR+*
 ************************************************************************************************/

/* Les produits sur l'accueil et tête de rayons. */
/*
.promosAccueil
{
	margin-top: 2em;
	margin-bottom: -2em;
}
.promosAccueil table
{
	width: 100%;
	margin: 0 auto 2em;
	border: 1px outset gray;
}
.promosAccueil table th
{
	display: none;
}

.promosAccueil table td
{
	width: 25%;
	vertical-align: top;
	text-align: center;
	font-weight: bold;
	padding: 10px;
	border: 1px solid silver;
	border-collapse: collapse;
}

.promosAccueil table td:hover
{
	background-color: #ffe;
}

.promosAccueil img
{
	display: block;
	margin: 0 auto 7px;
}

.promosAccueil table td .prix
{
	display: block;
	margin-top: 7px;
}
.promosAccueil table td span.prix small
{
	font-size: 1.2em;
}
*/

/************************************************************************************************
 *+RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR Rayon RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR+*
 ************************************************************************************************/


.texteRayon
{
	border: 1px solid black;
	padding: 1ex;
}


.sousRayons
{
	/* Yen a pas... */
}
.sousRayons h2
{
}
.sousRayons h2 img
{
}

p.hr
{
	clear: both;
}

td.cm
{
	vertical-align:top;
	width:85px
}

/* Le filtrage sur les rayons. */
.tri
{
	display: none;
	/*
	text-align: right;
	font-size: 1em;
	margin-bottom: 1em;
	color: #666;
	*/
}
/*
.tri select, .tri input
{
	font-size: 1em;
}
*/

/* Entêtes des tableaux, par ex page facture, rayons. */
th
{
	border: 1px solid silver;
	border-collapse: separate;
	height: 2em;
	padding: 0 2px;
}

/* La liste des produits du rayons, ou les produits associés. */
h3.fond1 
{
	background-color: #2ad;
	padding: 4px;
	margin: 3px 0;
}
h3.fond2
{
	background-color: #666;
	padding: 4px;
	margin-bottom: 3px;
}
h3.fond1 a, h3.fond2 a
{
	color: white;
	text-decoration: none;
}


table.produit
{
	border: 1px solid black;
	width: 100%;
	margin: 1px 0 10px;
}

table.produits
{
	width: 100%;
}

/* Les promotions dans les rayons ont la classe produit et la classe promotion. */
.promotion
{
	background-color: #eee;
}


.produits h4
{
	/* Pour équilibrer les navigateurs. */
	padding: 0;
	margin: 0;
	/* Pour mettre le texte au milieu de l'image. */
	padding-top: 30px;
}
/* L'image est en float pour éviter le soulignement du lien. */
.produits h4 a img
{
	border: 1px solid silver;
	float: left;
	margin-top: -37px;
	margin-right: 10px;
}


/* Les séparations entre 2 marques différentes. */
tr.sep th, table.ventesNouv th
{
	height: 1.5em;
	background-color: #2ad;
	border: none;
	color: white;
}

td.prix, td.dispo
{
	text-align: center;
	width: 130px;
}
td.dispo img
{
	margin-bottom: -1px;
}


/*
.produits tr:hover
{
	background-color: #F6F598;
}
tr.sep:hover
{
	background-color: inherit;
}
*/


/* Les liens page préc, suivante. */
a.préc, a.préc:hover
{
	padding: 6px 10px 6px 24px;
	background: url('images-site/f-precedent.png') no-repeat left;
}
a.suiv, a.suiv:hover
{
	padding: 6px 24px 6px 10px;
	background: url('images-site/f-suivant.png') no-repeat right;
}


.boutonPanierRayon
{
	background: transparent;
	cursor: pointer;
	border: none;
}


.légende
{
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	padding: 3px 0;
	margin-top: -12px;
	text-align: center;
}
.légende span
{
	white-space: nowrap;
	margin-left: 1ex;
}


/* Normalement on ne les voit jamais parce qu'il n'y a pas de rayons sans produits. */
table.ventesNouv
{
	margin-top: 5em;
}
table.ventesNouv td
{
	width: 50%;
	border: 1px solid silver;
}

.imageRayon
{
	display: none;
}



/************************************************************************************************
 *+RPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRP Rayon et Produit RPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRP+*
 ************************************************************************************************/

h2.arborescence
{
	font-size: 8pt;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

.prix, .dispo
{
	color: black;
	font-weight: bold;
}

.detail .prix
{
	color: black;
	padding-top: 10px;
	font-size: 1.1em;
}
.detail .prixht
{
	color: #999;
}
.detail .prixht, .produits .prixht
{
	font-size: 10pt;
	font-weight: normal;
}

/* Quand il y a une promo. */
.barré
{
	color: gray;
	text-decoration: line-through;
}




/************************************************************************************************
 *+PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP Produit PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP+*
 ************************************************************************************************/

div.detail
{
	position: relative;
	/* Correction bug IE encore. */
	padding: 1ex 1ex 1ex 175px;
	border: 1px solid black;
}

div.detail ul
{
	margin-top: 2em;
	list-style-type: square;
}

.référence small
{
	font-size: 8pt;
	color: #666;
}

p.chapo
{
	font-weight: bold;
	color: #2ad;
}

table.actionsProduit
{
	width: 300px;
	padding-bottom: 10px;
	margin-left: 1ex;
}
table.actionsProduit td p
{
	padding: 0;
	margin: 0;
}


/* L'image. */
.imageProduit
{
	position: absolute;
	top: 0;
	left: 0;
	width: 170px;
	text-align: center;
	margin: 0;
	cursor: pointer;
}
.imageProduit img.i
{
	width: 160px;
	height: 160px;
}
.imageProduit small, .référence small
{
	font-style: italic;
}

.imageZoom
{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;	
	border: 2px solid #2ad;
	z-index: 2;
	cursor: pointer;
}
.imageZoom img.i
{
	width: 400px;
	height: 400px;
}

p.desc
{
	position: absolute;
	top: 160px;
	left: 10px;
}

.textePromo
{
	color: black;
}


/* La marque, le prix, ajouter au panier... */
.infosProduit
{
	text-align: left;
	border-top: 1px solid silver;
	margin-left: 1ex;
}
.infosProduit form
{
	margin-top: -10px;
	margin-bottom: -10px;	
}
.infosProduit a
{
	color: #666;
}
.infosProduit img
{
	margin-bottom: -5px;
	margin-top: 2em;
}
.infosProduit p.prix
{

}

p.dispo img
{
	margin-bottom: -3px;
}

/* Dans les rayons, et les autres produits présentés dans la fiche d'un produit. */
.miniature
{
	width: 80px;
	height: 70px;
	padding-bottom: 10px;
	text-decoration: none;
}


.liensProduit
{
	/* Différent ici. */
}


/* Sur la page des images du produit. */
.imagesProduit img
{
	border: 3px outset #2ad;
	background-color: #2ad;
	padding: 5px;
}


/************************************************************************************************
 *+PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP Panier PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP+*
 ************************************************************************************************/

.produitsPanier
{
	/* border-collapse: collapse; */
}
.produitsPanier th, .produitsCompte th
{
	color: black;
}
.produitsPanier td
{
	border: 1px solid silver;
}
td.total
{
	border: 1px solid #666;
}
td.total strong
{
	font-size: 1.3em;
}

/* Les libéllés (réduc, total). */
.produitsPanier .l
{
	color: black;
	text-align: right;
	padding: 1em;
	border: none;
}
.produitsPanier .total
{
	text-align: right;
	padding-left: 1ex;
}

.produitsPanier td.montant
{
	text-align: right;
	font-size: 1.2em;
	white-space: nowrap;
}

td.blanc
{
	border: none;
}

td.b
{
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
	vertical-align: top;
	border: none;
}

.quantitePanier input
{
	font-size: 0.9em;
}
.quantitePanier
{
	font-size: 0.9em;
	color: gray;
	white-space: nowrap;
}

a.lienPanier
{
	font-size: 1.1em;
	font-weight: bold;
	color: #2ad;
	text-decoration: none;
}

a.retourPanier
{
	background-color: #666;
	padding: 5px;
}


p.etape
{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}


table.optionsPanier
{
	margin-top:30px;
}
table.optionsPanier td
{
	background-color:#ddd;
	width: 50%;
}

/************************************************************************************************
 *+CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC Contact CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC+*
 ************************************************************************************************/

h2.entr, h2.part
{
	display: inline;
	position: relative;
	top: -2px;
	left: 10%;
	padding: 4px 2%;
	-moz-border-radius-topleft: 1ex;
	-moz-border-radius-topright: 1ex;
	cursor: pointer;
	border: 1px solid silver;
	border-bottom: none;
}
.part
{
	background-color: #eee;
}
.entr
{
	background: #ccc;
}

#formContact
{
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	border: 1px solid silver;
	margin: auto 10%;
}


/************************************************************************************************
 *+RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR Recherche RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR+*
 *              et aussi les pages toutes les marques, promos, nouveautés, zoom-sur.            *
 ************************************************************************************************/


/* L'arborescence du résultat. */
.arboRech, .refPanier
{
	display: block;
	margin-top: 5px;
	font-size: 8pt;
	padding-left: 55px;
	color: gray;
}
.arboRech a, .arboRecherche a
{
	color: gray;
	text-decoration: none;
}
.arboRecherche
{
	font-size: 8pt;
	color: gray;
}

.miniMiniature
{
	width: 3em;
	height: 3em;
	text-decoration: none;
	background-color: inherit;
	float: left;
	margin: -0.3em 0.5em 0 0;
}

a:hover .miniMiniature
{
	width: 3.5em;
	height: 3.5em;
	margin: -0.75em 0.25em -0.25em -0.25em;
}

.resultat
{
	padding: 0.6em;
	border: 1px solid silver;
}




/************************************************************************************************
 *+PlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPl Plan PlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPlPl+*
 ************************************************************************************************/
.planSite
{
	list-style-type: square;
}




/************************************************************************************************
 *+IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII Identification IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII+*
 ************************************************************************************************/

.zoneIdentif
{
    margin: auto;
	padding: 2em;
	border: 1px solid black;
	width: 80%;
}

.zoneIdentif #id, .zoneIdentif #mdp
{
	width: 99%;
}


.zoneIdentif h3, .zoneNouveauClient h3
{
	text-transform: uppercase;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

.zoneNouveauClient
{
    margin: 2em auto;
	padding: 2em;
	border: 1px solid #666;
	width: 80%;
}




/************************************************************************************************
 *+IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII Livraison IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII+*
 ************************************************************************************************/

.zoneLivraison, .zonePaiement
{
    margin: auto;
	padding: 2em;
	border: 1px solid black;
	width: 80%;
}

div#livraison
{
	width: 92%;
	margin: auto;
}


/************************************************************************************************
 *+CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC Compte CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC+*
 ************************************************************************************************/

.zoneCoord, .zoneMenu
{
    margin: 1em;
	padding: 1em;
	border: 1px solid #666;
}
.zoneMenu
{
	border: 2px solid #666;
}


/* Le contenu des commandes dans compte.php. */
.contenu
{
	display: block;
	padding: 1em 2em;
	font-style: normal;	
	/* Parce qu'on est dans un <var> donc sinon italique. */
}

.produitsCompte th small
{
	font-weight: normal;
}

.alivraison
{
	width: 50%;
	margin: 1em auto;
	border: 1px solid black;
	padding: 1em;
}
.alivraison hr
{
	margin-left: 0;
	visibility: visible;
	border: none;
	border-bottom: 1px solid silver;
}
.alivraison a
{
	float: right;
	margin-top: 0.7em;
	text-decoration: none;
}
/* C'estoù?
.adresse
{
	border: 1px dashed #49d;
	padding: 1ex;
	width: 30ex;
}
*/


/************************************************************************************************
 *+FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF Facture FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF+*
 ************************************************************************************************/


table#facture
{
	width: 90%;
	border-collapse: collapse;
}



/************************************************************************************************
 *+HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH Les H1 avec un picto HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH+*
 ************************************************************************************************/
h1.h1
{
	/* Tous les h1 ont la m^ image. */
}


/* Les H2 avec picto. */
/*
h2.adresse
{
	margin-top: 4em;
	background: url('images-site/picto-enveloppe.png') no-repeat left;
	padding: 15px 0 9px 70px;
}

h2.tel
{
	background: url('images-site/picto-pacman.png') no-repeat left;
	padding: 20px 0 9px 70px;
}

/*- fin HHH -*/


input[type="text"], input[type="password"], select, textarea
{
	background-color: white;
	border: 1px solid black;
}
input:focus, select:focus, p.recherche input#texte_recherche:focus, textarea:focus
{
	border-color: #2ad;
}


/* Classes supplémentaires pour la déco. */
.supplementaire1
{
}
.supplementaire2
{
}
.supplementaire3
{
}

div.cadre
{
	border: 1px solid black;
	padding: 20px;
	margin-bottom: 10px;
}
div.cadre strong
{
	color: #2ad;
}
div.cadre h1
{
	padding: 0;
	margin: 0 0 0 5px;
}

p.im
{
	border: 1px solid black;
	text-align: center;
	padding: 14px 0;
	margin: 0 0 10px;
}

.bordure_bas {
	height:4em; 
	border-bottom: 1px solid black;
}


@media print
{
	.pasImpr
	{
		display: none;
	}

}