/******************** STRUCTURE GLOBALE ********************/
* { margin: 0; padding: 0; font-family: "Tahoma", Verdana, sans-serif; font-size: 12px; }
HTML { height: 100%; }
BODY { height: 100%; background: url(../pics/interface/bg.jpg); color: #666; }
#conteneur { position: relative; left: 50%; top: 10px; width: 700px; margin: 0 0 5px -385px; padding: 0 30px 0 30px; background: #FFF url(../pics/interface/bg-contenu.gif) repeat-y; border: 5px solid #D9DDE0; text-align: left; }

/******************** EN-TETE ********************/
#header { width: 100%; height: 85px; background: #FFF; }
#logo { float: left; width: 395px; padding: 0 0 0 5px; background: url(../pics/interface/logo.jpg) no-repeat; font: bold 14px Arial, Helvetica, sans-serif; color: #999; text-transform: uppercase; }
#panier { float: left; width: 120px; height: 75px; background: url(../pics/interface/bg-panier.gif) no-repeat; }
#panier H3 { margin-top: 25px; }
#panier H3, #panier A { margin-left: 25px; }
#panier A { color: #C00; text-decoration: none; }
#panier A:hover { text-decoration: underline !important; }
#authentification { float: right; width: 175px; padding-top: 15px; }
#authentification P { height: 18px; text-align: right; }
#authentification LABEL { margin-right: 5px; font-size: 11px; font-weight: bold; }
#authentification INPUT { width: 80px; }
#authentification INPUT.bouton { float: right; width: 25px; }
#authentification A { float: left; clear: left; font-size: 11px; color: #636363; }
#authentification A.in { float: none; clear: none; }
#authentification A:hover { color: #999; }

/******************** BANDEAU ********************/
#bandeau { height: 140px; background: url(../pics/interface/bg-bandeau.gif) repeat-x bottom; }
#menu { float: left; width: 200px; height: 125px; padding-top: 4px; background: url(../pics/interface/bg-menu.gif) no-repeat; list-style: none; }
#menu LI { margin: 0 10px 0 38px; border-bottom: 1px solid #FFF; }
#menu LI.actif { padding-left: 10px; }
#menu LI.dernier { border: none; }
#menu A { display: block; padding: 4px 0 4px 1px; font-weight: bold; color: #FFF; text-decoration: none; background: none; }
#menu A:hover { background: url(../pics/interface/puce-menu.gif) no-repeat right center !important; }
#banniere { float: left; margin-left: 5px; }

/******************** CONTENU ********************/
#colonne { float: left; width: 200px; padding-bottom: 100px; background: url(../pics/interface/cartes.gif) no-repeat right bottom; }
#colonne H3 { height: 20px; margin-bottom: 10px; padding-left: 5px; background: #C00; line-height: 20px; font-weight: bold; color: #FFF; }
#colonne H4 { margin-left: 10px; }
#colonne DIV { padding: 0 5px 0 5px; }
#recherche-rapide { margin-bottom: 20px; font-size: 11px; }
#recherche-rapide P { margin-bottom: 5px; padding-right: 5px; text-align: right; }
#recherche-rapide INPUT { width: 90px; margin-left: 5px; }
#recherche-rapide INPUT.bouton { width: 25px; height: 16px; }
#recherche-rapide A { color: #666; }
#recherche-rapide A:hover { color: #C00 !important; }
UL.sousmenu { width: 180px; margin: 10px 0 20px 20px; list-style: none;  }
UL.sousmenu LI { padding: 0 0 3px 0; margin-top: 5px; border-bottom: 1px solid #CCC; }
UL.sousmenu LI.actif { font-weight: bold; }
UL.sousmenu A { padding-left: 10px; background: url(../pics/interface/puce-sousmenu.gif) no-repeat 0 4px; color: #666; text-decoration: none; }
UL.sousmenu A:hover { color: #C00; }

#article { float: left; width: 492px; height: 300px; padding: 0 0 15px 5px; }
HTML>BODY>#conteneur>#contenu #article { min-height: 300px; height: auto; }
#article H1 { margin-bottom: 8px; padding: 0 5px 0 5px; font-size: 15px; color: #C00; }
H1 .grise { font-size: 15px; color: #CCC; }
#article H2 { margin-bottom: 5px; padding: 0 5px 0 5px; font-size: 13px; color: #3358C1; }
#article H3 { padding: 0 5px 0 5px; }
#article P { margin-bottom: 5px; padding: 0 5px 0 5px; text-align: justify; }
#article P.alerte { font-weight: bold; text-align: center; }
#article P.adresse { margin-top: 5px; padding-left: 30px; background: url(../pics/interface/enveloppe.gif) no-repeat 12px 18px; }
P.pages { text-align: right !important; }
#article A { color: #C00; text-decoration: none; }
#article A:hover { text-decoration: underline !important; }
#article .pointilles { border-top: 1px dashed #999; border-bottom: 1px dashed #999; }
#article .encadre { margin-left: 5px; padding-right: 5px; border: 1px solid #3358C1; }
#article UL { margin: 10px 0 10px 20px; }
#article LI { margin-bottom: 5px; }

#article FORM { width: 95%; margin: 10px 0 10px 10px; padding-top: 5px; }
#article FORM P { margin-bottom: 10px; }
#article FORM H3 { margin: 10px 0 10px 0; color: #3358C1; text-decoration: underline; }
#article INPUT { width: 200px; padding: 1px; font-size: 11px; }
#article INPUT.petit { width: 120px; }
#article INPUT.chk { width: auto; border: none; background: none; vertical-align: middle; }
#article P.bouton { margin-top: 20px; text-align: right; }
#article INPUT.bouton { width: 130px; background: #CCC; }
#article LABEL.legende { float: left; display: inline; width: 120px; font-weight: bold; }
#article SELECT { width: 205px; }
#article SELECT.qte { width: auto; }
#article TEXTAREA { width: 325px; overflow: auto; }
#article INPUT.error { background: #FF8080 !important; color: #FFF !important; }

DIV.produit { float: left; width: 245px; height: 275px; padding: 10px 0 0 0; }
DIV.b { border-bottom: 1px solid #CCC; }
DIV.g { border-left: 1px solid #CCC; }
DIV.d { border-right: 1px solid #CCC; }
DIV.produit H3, DIV.produit P { padding: 0 10px 0 10px !important; }
DIV.produit H3 { font-size: 14px; color: #3358C1; margin-bottom: 5px; }
DIV.produit H3 A { color: #3358C1 !important; }
DIV.produit P.description { text-align: left !important; }
DIV.prix { float: left; margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #3358C1; }
DIV.prix .detail { font-size: 11px; }
P.prix { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #3358C1; }
A.prix { float: right; display: block; width: 90px; height: 17px; margin: 17px 0 0 0; padding-left: 20px; line-height: 17px; background: #C00 url(../pics/interface/bg-fiche.gif) no-repeat; font-weight: normal; color: #FFF !important; font-size: 11px; text-align: center; }
A.detailcat { float: right; display: block; width: 100px; height: 17px; margin: 17px 0 0 0; padding: 0 0 0 20px; line-height: 17px; background: #C00 url(../pics/interface/bg-fiche.gif) no-repeat; font-weight: normal; color: #FFF !important; font-size: 11px; text-align: center; }
DIV.fiche2 P.prix A { background: #C00 url(../pics/interface/bg-cart.gif) no-repeat; }
#prixarticle { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #3358C1; }
DIV.fiche { width: 250px; height: 215px; margin: 15px 0 30px 0; padding: 0 5px 0 5px; }
HTML>BODY>#conteneur>#contenu>#article DIV.fiche { height: auto; min-height: 215px; }
DIV.fiche2 { float: right; width: 225px; margin: 15px 0 30px 0; text-align: center; }
P.photos { margin: 20px 0 10px 0 !important; }
P.miniatures { padding-top: 5px!important; border-top: 1px solid #CCC; }

DIV.moduleProduits { clear: both; margin-top: 40px; padding-top: 5px; border-top: 1px solid #CCC; }
DIV.miniProduit { float: left; width: 150px; margin: 15px 10px 0 5px ; border-right: 1px solid #CCC; }
DIV.dernier { margin-right: 0; border: none; }
DIV.miniProduit H3, DIV.miniProduit P { text-align: center !important; }
DIV.miniProduit H3 { font-size: 11px; color: #3358C1; }
DIV.miniProduit H3 A { font-size: 11px !important; color: #3358C1 !important; }
DIV.miniProduit P.prix { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #C00; }

FORM.qte { width: auto !important; margin: 0 !important; padding: 0 !important; }
TD.entete { background: #3358C1; color: #FFF; }
TD.d { border-right: 1px solid #3358C1; }
TD P { text-align: inherit !important; }
#paiement { text-align: center; }

TR.alt { background: #F2F2F2; }
TD.enteteRes { border-bottom: 2px solid #999; }
TD.res { border-bottom: 1px solid #999; }
TR.actif { background: #EEEEDF !important; cursor: pointer; }

/******************** PIED-DE-PAGE ********************/
#footer { clear: both; height: 20px; padding: 5px 0 5px 0; border-top: 6px solid #999; background: #FFF; }
#footer P { font-size: 10px; text-align: right; }
#footer A { font-size: 10px; color: #666; text-decoration: none; }
#footer A:hover { text-decoration: underline !important; }

/******************** GENERAL ********************/
TABLE { width: 99%; margin: 10px 5px 10px 5px; border: none; }
TD { padding: 2px; }
IMG { border: 0; vertical-align:middle; }
INPUT, TEXTAREA { padding-left: 2px; border: 1px solid #636363; font-size: 11px; color: #C00; }
INPUT.bouton { padding: 0; background: #FFF; color: #666; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.justify { text-align: justify !important; }
.gauche { float: left !important; margin: 2px 5px 2px 0; }
.droite { float: right !important; margin: 2px 0 2px 5px; }
.clear { clear: both !important; }