/********** STRUCTURE GENERALE ************************************************/ * { margin: 0; padding: 0; } BODY { font-family: Arial, sans-serif; font-size: 13px; color: #6C6C6C; background: #FFF; } #container { position: relative; background: #b0d8e0; } #global { position: relative; left: 50%; width: 836px; margin-left: -418px; background: #FFF url(../pics/charte/bg-global.png) left top repeat-y; } A { text-decoration: none; } A:hover { text-decoration: underline; } /********** EN-TETE ***********************************************************/ #header { position: relative; left: 50%; width: 836px; height: 90px; margin-left: -418px; background: #FFF; } #header H1 { position: absolute; top: 15px; width: 180px; height: 69px; font-size: 0px; text-indent: -5000px; background: url(../pics/charte/bg-h1.png) left top no-repeat; } #header H1 A { display: block; width: 100%; height: 100%; } #header Q { position: absolute; left: 190px; top: 25px; font-size: 12px; color: #A4A4A4; } #header P { position: absolute; top: 23px; right: 18px; padding: 1px 0 0 25px; text-align: right; font-size: 12px; color: #A4A4A4; background: url(../pics/charte/bg-panier.gif) left top no-repeat; } #header P A { color: #A4A4A4; } #header UL { position: absolute; left: 190px; top: 50px; width: 630px; padding-top: 15px; text-align: right; border-top: 1px solid #CCC; } #header LI { display: inline; padding-left: 10px; font-size: 12px; background: url(../pics/charte/bg-li.png) 4px center no-repeat; } #header LI.first { padding: 0; background: none; } #header LI A { color: #6D6D6D; } /********** COLONNE ET MENU ***************************************************/ #col { position: relative; float: left; width: 160px; padding-left: 20px; } #col A { outline: none; } #search { margin-bottom: 30px; padding-top: 25px; vertical-align: middle; } #search INPUT { width: 100px; height: 14px; padding: 1px 0 0 2px; font-family: Arial, sans-serif; font-size: 11px; color: #999; vertical-align: middle; border: 1px solid #999; } #search INPUT.bouton { width: 25px; height: 17px !important; padding: 0 !important; color: #FFF; background: #A6A5A5; border: none; cursor: pointer; } #col UL { position: relative; list-style: none; } #col LI { position: relative; height: 30px; font-size: 0px; text-indent: -5000px; } #col LI A { display: block; height: 30px; background-position: left top; background-repeat: no-repeat; } #col LI.active A, #col LI A:hover { background-position: 0px -30px; } #col UL UL { position: absolute; z-index: 1000; left: 160px; top: 0; width: 210px; padding: 3px 5px 0 15px; background: url(../pics/charte/bg-sousmenu.gif) left top no-repeat; } #col UL UL LI { height: 20px; margin-bottom: 3px; } #col UL UL A { height: 20px; padding-left: 20px; line-height: 20px; font-size: 11px; font-weight: bold; color: #000; vertical-align: middle; text-indent: 0px; background: url(../pics/charte/li-sousmenu.gif) 10px 6px no-repeat !important; } #col UL UL A:hover { color: #C33088; background-color: #BDBCCE !important; } #col LI.open { height: auto; } #col LI.open UL { position: static; display: block; width: auto; margin-bottom: 5px; padding: 0; background: none; } #col LI.open LI, #col LI.open LI A { height: auto !important; } #col LI.open UL A { margin-bottom: 5px; padding: 0 0 0 15px; line-height: 15px; font-weight: normal; color: #FFF; background: none !important; } #col LI.open UL A:hover { color: #FFF; background: none !important; } /********** Eléments de menu *********/ #femmes A { background-image: url(../pics/charte/li-femmes.png); } #hommes A { background-image: url(../pics/charte/li-hommes.png); } #enfants A { background-image: url(../pics/charte/li-enfants.png); } #juniorfille A { background-image: url(../pics/charte/li-juniorfille.png); } #juniorgarcon A { background-image: url(../pics/charte/li-juniorgarcon.png); } #accessoires A { background-image: url(../pics/charte/li-accessoires.png); } #finsdeserie A { background-image: url(../pics/charte/li-finsdeserie.png); } /********** CONTENU ***********************************************************/ #content { float: left; width: 656px; height: 500px; } *>#content { height: auto; min-height: 500px; } #content.texte { width: 576px; padding: 20px 60px 20px 20px; } #custom { margin-bottom: 10px; } /********** Listings *********/ A.item { display: block; float: left; width: 208px; height: 308px; margin: 0 0 10px 6px; color: #666 !important; border: 1px solid #D9D9D9; outline: none; } A.item:hover { text-decoration: none !important; border: 1px solid #999; } A.item IMG { margin: 0 0 5px 19px; } A.item SPAN { display: block; padding-left: 5px; font-size: 11px; text-transform: uppercase; } A.item SPAN.produit { height: 40px; } A.item STRONG { font-size: 12px; } A.item SPAN.prix { margin: 5px 0 5px 0; font-size: 12px; font-weight: bold; color: #B9006E; } A.item LABEL { font-size: 12px; font-weight: bold; text-transform: none; vertical-align: middle; } A.item SPAN IMG { margin: 0 0 0 5px; } /********** Textes *********/ #content H2 { margin-bottom: 15px; font-size: 24px; font-weight: normal; color: #6C6C6C; } #content H3 { margin: 15px 0 15px 0; font-size: 13px; font-weight: bold; color: #CA006B; } #content H4 { margin-bottom: 10px; font-size: 13px; text-decoration: underline; } #content P { margin-bottom: 10px; line-height: 17px; } #content A { color: #E90089; } .texte UL { margin: 20px 0 20px 30px; list-style: none; } .texte LI { margin-bottom: 5px; padding-left: 10px; line-height: 17px; background: url(../pics/charte/puce.gif) 0px 4px no-repeat; } TABLE.tailles { width: 350px; margin: 10px auto 20px auto; font-size: 11px; text-align: center; border: 1px solid #999; } .normal { margin-left: 5px !important; } .contenu P { margin-bottom: 0px !important; } DEL { color: #666; } /********** Formulaires *********/ #content FORM { width: 560px; margin: 20px 0 20px 0; padding: 15px 0 15px 0; border: 1px solid #E90089; } #content FORM.standard { width: auto !important; padding: 0 !important; border: none !important; } #content FORM P { clear: both; vertical-align: middle; } #content FORM P.nolabel { padding-left: 205px; } #content FORM P.details { padding-left: 205px; font-size: 11px; font-style: italic; } #content FORM H3, #content FORM H4 { margin-left: 5px; } #content FORM LABEL { float: left; width: 195px;padding-right: 10px; text-align: right; font-weight: bold; color: #E90089; } #content FORM LABEL.inline { float: none; width: auto; margin-left: 5px; text-align: left; font-weight: normal; color: #6C6C6C; vertical-align: middle; } #content FORM INPUT, #content FORM TEXTAREA { font-family: Arial, sans-serif; font-size: 11px; color: #333; border: 1px solid #CA006B; } #content FORM INPUT { width: 180px; padding: 2px; } #content FORM TEXTAREA { width: 260px; height: 115px; padding: 2px; } #content INPUT.bouton { width: auto; margin-right: 15px; padding: 0 !important; border: none; vertical-align: middle; } #content INPUT.standard { height: 20px; margin: 0!important; padding: 0 10px 0 10px !important; border: 1px solid #333; cursor: pointer; } #content INPUT.ok { float: left; width: 55px; height: 45px; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-ok.png) left top no-repeat; cursor: pointer; } #content INPUT.cancel { float: left; width: 60px; height: 45px; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-cancel.png) left top no-repeat; cursor: pointer; } #connexion { float: left; width: 55% !important; margin-left: 10px !important; border: none !important; } #connexion, #nouveauCompte { font-size: 11px; } #connexion H2, #nouveauCompte H2 { font-size: 16px; font-weight: bold; text-transform: uppercase; } #content H2 SPAN { color: #E90089; } #connexion LABEL { width: 80px !important; font-weight: normal !important; color: #7D8472 !important; } #connexion P.nolabel { padding-left: 90px !important; } #connexion A { color: #7D8472 !important; } #connexion INPUT.bouton { float:left; width: 127px; height: 28px; margin: 4px 0 10px 90px; font-size: 0; text-indent: -5000px; background: url(../pics/charte/btn-connexion.png) left top no-repeat; cursor: pointer; } #nouveauCompte { float: right; width: 42%; margin: 20px 0 0 0; padding-top: 15px; } #nouveauCompte A { display: block; width: 177px; height: 28px; font-size: 0; text-indent: -5000px; background: url(../pics/charte/btn-compte.png) left top no-repeat; } #paiement INPUT { width: auto !important; height: auto !important; } /********** Fiche produit ***********/ P.links { margin-left: 5px; font-size: 11px; } P.links STRONG { margin-right: 5px; } P.links A { color: #6C6C6C !important; } P.links A.active { text-decoration: underline !important; } #produit { float: right; width: 295px !important; margin: 0 5px 0 5px !important; padding: 0 !important; border: none !important; } #produit H2, #produit H3, #produit P.prix { font-size: 16px !important; font-weight: bold !important; color: #B8006D !important; } #produit H2 { margin: 0; text-transform: uppercase; } #produit H3 { margin: 0 0 10px 0; } #produit H5 { font-size: 12px; font-weight: bold; text-transform: uppercase; } #produit DIV.description { margin: 0px 5px 5px 5px; padding: 5px; border: 1px solid #D9D9D9; } #produit DIV.description P { clear: none; margin-bottom: 10px; font-size: 12px; text-transform: uppercase; color: #666; } #produit A.info { float: right; display: block; width: 93px; height: 19px; font-size: 0px; text-indent: -5000px; background: url(../pics/charte/btn-info.png) left top no-repeat; } #produit DIV.commande { width: 273px; margin: 5px; padding: 5px; border: 1px solid #D9D9D9; } #produit TABLE { width: 100%; font-size: 11px; } #produit TD { text-align: center; } #produit TD.coloris {width: 90px; text-align: left; vertical-align: middle !important; } #produit DIV.chk { display: block; width: 17px; height: 17px; margin: 0 auto 0 auto; background: url(../pics/charte/chk-ok.png) left top no-repeat; } #produit DIV.disabled { background-image: url(../pics/charte/chk-disabled.png) !important; } #produit DIV.wait { background-image: url(../pics/charte/chk-wait.png) !important; } #produit DIV.checked { background-image: url(../pics/charte/chk-checked.png) !important; } #dispos { height: 20px; margin-top: 10px; padding: 5px 0 5px 0; background: url(../pics/charte/bg-dispos.png) center center no-repeat; border-top: 1px dotted #999; border-bottom: 1px dotted #999; } #produit P.qte { float: left; } #produit P.qte LABEL { width: 75px !important; padding: 0 !important; font-weight: normal !important; text-align: left !important; color: #6C6C6C !important; text-transform: uppercase; } #produit P.qte INPUT { width: 18px !important; padding: 0 0 0 3px !important; } #produit #addCart { float: right; width: 160px; height: 25px; margin: 0 0 5px 0; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-cart.png) left top no-repeat; cursor: pointer; } #produit A.checkoutOn { float: right; width: 160px; height: 25px; margin: 0; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-checkout-on.png) left top no-repeat; } #produit A.checkoutOff { float: right; width: 160px; height: 25px; margin: 0; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-checkout-off.png) left top no-repeat; } #produit DIV.infos { margin: 5px; font-size: 11px; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; } UL.produitMenu { height: 29px; list-style: none; } UL.produitMenu LI { display: block; float: left; width: 93px; height: 29px; background: url(../pics/charte/btn-produit-off.png) left top no-repeat; } UL.produitMenu A { display: block; line-height: 29px; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; color: #999 !important; outline: none; } #informationsMenu { width: 92px !important; margin-right: 3px; background-position: -1px 0px !important; } #retourMenu { width: 92px !important; margin-left: 3px; } UL.produitMenu LI.on { background-image: url(../pics/charte/btn-produit-on.png) !important; } UL.produitMenu LI.on A { color: #666 !important; } #informations, #livraison, #retour { height: 200px; padding: 10px 5px 5px 5px; } *>#informations, *>#livraison, *>#retour { height: auto; min-height: 200px; } DIV.panel UL { margin: 0 0 15px 20px; padding-top: 5px; list-style: none; } DIV.panel LI { margin-bottom: 5px; padding-left: 10px; background: url(../pics/charte/puce.gif) 0px 3px no-repeat; } #middle { float: right; width: 270px; } #visu { border: 1px solid #D9D9D9; } #visu INPUT.switch { width: 104px; height: 22px; margin: 0 5px 5px 5px; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-switch.png) left top no-repeat; cursor: pointer; } #visu INPUT.zoom { width: 73px; height: 22px; margin: 0 5px 5px 0; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-zoom.png) left top no-repeat; cursor: pointer; } #visu INPUT.tailles { width: 61px; height: 22px; margin: 0 5px 5px 0; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-tailles.png) left top no-repeat; cursor: pointer; } #photo { margin: 0 0 5px 0 !important; border: none !important; } #middle H3 { margin: 20px 0 10px 0; font-size: 16px !important; font-weight: bold !important; color: #B8006D !important; } #photos { width: 70px; text-align: right; } #photos IMG { margin-bottom: 5px; border: 1px solid #D9D9D9; } #middle IMG { margin: 0 10px 10px 0; border: 1px solid #D9D9D9; } #middle A:hover IMG, #photos A:hover IMG { border: 1px solid #999; } #photos A, #middle A { outline: none; } /********** Popup produit **********/ #produitPopup #visu { float: left; width: 270px !important; } #produitPopup #produit { float: left !important; width: 500px !important; margin: 0 0 0 5px !important; } #produitPopup DIV.commande { width: 480px !important; } #produitPopup P.prix { float: right; } #produitPopup INPUT.bouton { margin: 10px 15px 0 0 !important; font-family: Arial, sans-serif; font-size: 11px; color: #333; border: none; vertical-align: middle; } /********** Panier **********/ #panier { width: 625px !important; margin: 30px 5px 0 0px !important; padding: 0 !important; border: none !important; } #panier TABLE { width: 100%; font-size: 11px; } #panier TR.titre TH { height: 40px; background: #ECEAEB url(../pics/charte/bg-th-panier.png) left center no-repeat; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; } #panier TR.entete TH { height: 30px; color: #FFF; background: #6E6E6E; border-top: 2px solid #FFF; text-transform: uppercase; } #panier TD.picto { width: 60px; text-align: center; } #panier TD.produit { width: 225px; height: 75px; padding-left: 15px; } #panier TD.prix { width: 90px; text-align: center; } #panier TD.qte { width: 90px; text-align: center; } #panier TD.total { width: 90px; text-align: center !important; font-weight: bold; } #panier TD.del { width: 45px; padding-left: 25px; } #panier TR.recapitulatif TD { height: 20px; color: #000; font-size: 12px; text-align: right; } #panier TD.produit A { font-weight: bold; color: #6C6C6C; text-transform: uppercase; } #panier TD INPUT { width: 20px !important; } #panier TD.del A { display: block; width: 23px; height: 24px; font-size: 0px; text-indent: -5000px; background: url(../pics/charte/btn-delete.png) left top no-repeat; } #actionsPanier { height: 62px; padding: 8px 0 0 20px; line-height: 70px; vertical-align: middle; background: #F0F0F0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; } #actionsPanier A { display: block; float: left; height: 55px; font-size: 0px; text-indent: -5000px; } A.continue { width: 75px; background: url(../pics/charte/btn-continue.png) left top no-repeat; } A.updateCart { width: 90px; margin-left: 20px; background: url(../pics/charte/btn-updateCart.png) left top no-repeat; } A.clearCart { width: 64px; margin-left: 20px; background: url(../pics/charte/btn-clearCart.png) left top no-repeat; } #total { float: right; width: 190px; height: 40px; margin: 10px 20px 0 0; line-height: 40px; font-size: 11px; background: #FFF; vertical-align: middle; } #total SPAN { padding: 0 10px 0 20px; font-weight: bold; color: #000; text-transform: uppercase; } *>#total { margin: 7px 35px 0 0 !important; } A.checkout { float: right; display: block; width: 160px; height: 25px; margin-top: 30px; font-size: 0px; line-height: 0px; text-indent: -5000px; background: url(../pics/charte/btn-checkout-on.png) left top no-repeat; } /********** Popup Panier **********/ #cart { position: absolute; z-index: 10; left:50%; top: 20px; width: 237px; height: 179px; margin-left: 168px; padding: 25px 8px 0 5px; background: url(../pics/charte/bg-cart.png) left top no-repeat; font-size: 12px; } #cart P.resume { position: absolute; right: 8px; top: 5px; padding-left: 25px; text-align: right; background: url(../pics/charte/bg-panier.gif) left top no-repeat; } #cart P { margin-left: 3px; } #cart DIV.resume { padding: 5px; background: #FFF; border: 1px solid #DADADA; } #cart SPAN { margin-left: 60px; } #cart A { display: block; width: 88px; height: 20px; font-size: 0px; text-indent: -5000px; } #cart A.cart { float: left; margin: 10px 0 0 15px; background: url(../pics/charte/btn-cart-small.png) left top no-repeat; } #cart A.checkout { float: right; margin: 10px 15px 0 0; background: url(../pics/charte/btn-checkout-small.png) left top no-repeat; } /********** Compte **********/ #menuCompte { float: right; margin: 0 0 15px 30px; } TABLE.adresse { float: left; width: 250px; margin-left: 20px; } TABLE.adresse TD { padding: 3px; } /********** PIED-DE-PAGE ******************************************************/ #footer { left: 50%; position: relative; width: 836px; height: 115px; margin-left: -418px; background: #FFF; } #footer Q { position: absolute; display: block; left: 10px; top: 10px; width: 165px; font-size: 11px; } #footer UL { position: absolute; left: 190px; top: 10px; width: 630px; padding-bottom: 12px; border-bottom: 1px solid #CCC; } #footer LI { display: inline; padding-left: 10px; font-size: 12px; color: #4C4D4D; background: url(../pics/charte/bg-li.png) 4px center no-repeat; } #footer LI.first { padding: 0; background: none; } #footer LI A { color: #4C4D4D; } #footer P { position: absolute; right: 14px; top: 70px; font-size: 10px; color: #999; } /********** REDEFINITIONS ET STYLES GENERIQUES ********************************/ IMG { vertical-align: middle; border: none; } Q:before, Q:after { content: none; } INPUT.chk { width: auto !important; background: transparent !important; border: none !important; vertical-align: middle; } .spacer { clear: both; height: 0px; font-size: 0px; } .clear { clear: both; } .left { text-align: left !important; } .center { text-align: center !important; } .right { text-align: right !important; } .justify { text-align: justify !important; } .l { float: left; } .r { float: right; } .red { color: #C00; } .s { text-decoration: underline; } /********** BOITE DE DIALOGUE DHTML *******************************************/ #MB_overlay { position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; z-index: 9999; background-color: #FFF !important; } #MB_overlay[id] { position: fixed; } #MB_window { position: absolute; top: 0; border: 0 solid; text-align: left; z-index: 10000; } #MB_window[id] { position: fixed!important; } #MB_frame { position: relative; height: 100%; background-color: #FFF; } #MB_header { margin: 0; padding: 0; } #MB_content { padding: 6px .75em; overflow: auto; } #MB_caption { margin: 0; padding: .5em 2em .5em .75em; font: bold 100% "Lucida Grande", Arial, sans-serif; text-shadow: #FFF 0 1px 0; text-align: left; } #MB_close { position: absolute; top: 4px; right: 5px; display: block; padding: 2px 3px; font-weight: bold; text-decoration: none; font-size: 13px; } #MB_close:hover { background: transparent; } #MB_loading { padding: 1.5em; text-indent: -10000px; background: transparent url(../spinner.gif) 50% 0 no-repeat; } #MB_frame { padding-bottom: 7px; } #MB_window { background-color: #FFF; color: #000; } #MB_content { border-top: 1px solid #F9F9F9; } #MB_header { background-color: #FEF6CB; border-bottom: 1px solid #CCC; } #MB_caption { color: #000; } #MB_close { color: #777; } #MB_close:hover { color: #000; } .MB_alert { margin: 10px 0; text-align: center; }