/* */ button {border: 0;padding: 0;cursor: pointer;overflow: visible; /* removes extra side padding in IE */} button::-moz-focus-inner {border: none;} button span {position: relative; display: block; white-space: nowrap; } button.addToBagLarge {background:url(/images/theFaceSkin/BTN_addToBagLarge.png) 0px 0px no-repeat; height:50px; width:186px;} button.addToBagLarge:hover {background-position:0px -64px;} button.addToBagLarge:active {background-position:0px -128px;} /* subNav */ ul#subNav {font-size:1.4em;} ul#subNav li {padding-bottom:8px;} ul#subNav a {color:#6a737b;} ul#subNav a:hover {color:#5992ce} ul#subNav a.active, #subNav ul a.active:hover {color:#2a333a;} /* Promos (appear under sub navigation) */ #promos {/*width:197px; display:block; background-color:#00C; position:absolute; margin-left:-15px; margin-top:30px; */} #promos ul li {padding-bottom:20px; display:block; height:197px;} #promos a {width:197px; margin-bottom:15px;} #promos a#deliveryPromo {background:url(/images/theFaceSkin/promos/delivery.png) 0 0 no-repeat; padding-top:197px} #promos a#bizPromo {background:url(/images/theFaceSkin/promos/biz-messages-leftCol.png) 0 0 no-repeat; padding-top:197px} #promos a#daily-microfoliant-promo {background:url(/images/theFaceSkin/promos/daily-microfoliant-box-set-small.jpg) 0 0 no-repeat; padding-top:287px} #promos a#skin-smoothing-promo {background:url(/images/theFaceSkin/promos/skin-smoothing_multiVit-powerfirm_bundle_small.jpg) 0 0 no-repeat; padding-top:272px} #promos a#skin-booster-promo {background:url(/images/theFaceSkin/promos/skin-booster-travel-kit-small.jpg) 0 0 no-repeat; padding-top:272px} /* product list - MARKED TO BE DELETED .prodList {text-align:center;} .prodList dl {width:90px; padding:0px 13px; height:160px; float:left; outline:1px solid red;} .prodList dl dt {padding-bottom:8px;} .prodList dl dd li {line-height:1.25em;} .prodList dl dd li.price {color:#2a333a;} .prodList dl a {position:absolute; display:block; z-index:2; outline:1px solid red; height:100px;} .prodList dl img {position:} */ /* home page */ #homeBanner {height:220px;} #homePromo {position:relative; display:block; height:200px; width:700px; float:left; margin-right:20px;} #homePromo a {display:none; height:0; width:700px; padding-top:200px; overflow:hidden;} /* #homePromo #homeone {display:block; position:absolute; background:url("/images/promoBanners/daily-microfoliant.jpg") no-repeat;} */ #homePromo #homeone {display:block; position:absolute; background:url("/images/promoBanners/daily-microfoliant-box-set.jpg") no-repeat;} #homePromo #hometwo {position:absolute; background:url("/images/promoBanners/skin-booster-travel-kit-9-99.jpg") no-repeat;} #homePromo #homethree {position:absolute; background:url("/images/promoBanners/skin-smoothing_multiVit-powefirm_bundle.jpg") no-repeat;} /*#homePromo #homefour {position:absolute; background:url("/images/promoBanners/active-moist.jpg") no-repeat;}*/ /* ul#usps {float:left; width:190px; height:137px; padding:63px 0 0 10px; background:url(/images/theFaceSkin/theFaceUSP_bg.png) 10px 10px no-repeat #f0f0f0;} ul#usps li {font-size:1.1em; line-height:1.5em;} */ a#usps {background:url("/images/theFaceSkin/promos/biz-messages-home.png") 0px 0px no-repeat; padding-top:200px;} ul.tabs {background-color:#e2e4e5; font-size:1.5em; padding:8px 0 0 15px; margin-bottom:35px;} ul.tabs li {float:left; width:auto; padding:10px;} ul.tabs li .active {background-color:#fff;} ul.tabs li.activeli {background-color:#fff;} ul.tabs li a {color:#5992ce;} ul.tabs li a:hover {} ul.tabs li.active a, ul.tabs li.active a:hover, ul.tabs li.activeli a, ul.tabs li.activeli a:hover {color:#2a333a} /* Catergory list - homepage*/ #dearmalogica-catlist {clear:both; text-transform:lowercase;} #dearmalogica-catlist .dermalogica-catbox {float:left; position:relative; text-align:center;padding:0 7px; width:139px; height:146px;} #dearmalogica-catlist .dermalogica-catbox a {display:block; position:absolute; width:139px; font-size:1.3em; padding-top:110px; top:0px; left:7px; line-height:1.3em; background:url(/images/theFaceSkin/blank.gif);} #dearmalogica-catlist .dermalogica-catbox a:hover {color:#5992ce} #dearmalogica-catlist .dermalogica-catbox img {padding:2px; background-color:#fff; margin-bottom:4px;} #dearmalogica-catlist .dermalogica-catbox img.hoverImg {background-color:#5992ce;} /* Catergory List - Catergory Listings Page */ #cat_list {} #cat_list .prodbox {width:155px; margin-right:20px; float:left; padding-bottom:20px;} html>body #cat_list .prodbox {margin-right:24px;} #cat_list .end, html>body #cat_list .end {margin-right:0;} #cat_list img {margin-bottom:5px; padding:2px;} #cat_list img:hover {background-color:#5992ce; } #cat_list p {padding-bottom:0; text-align:center; font-size:1.4em;} #cat_list p.price {font-size:1.1em;} #cat_list a {} #cat_list a:hover {color:#5992ce;} /* product listing productListing */ #cat_description {padding-bottom:20px; padding-top:15px; padding-left:10px; width:420px; height:205px; margin-bottom:20px;} #cat_description p {padding-bottom:20px;} #cat_description h2 {font-size:2em; line-height:1.3em} #cat_description h2 strong {font-weight:normal;} .category-1 {background:url("/images/theFaceSkin/cat-bg/cat-01-dermalogica.jpg") 0px 60px no-repeat #fff;} .category-2 {background:url("/images/theFaceSkin/cat-bg/cat-02-cleansers.jpg") 0px 60px no-repeat #fff;} .category-3 {background:url("/images/theFaceSkin/cat-bg/cat-03-concentrated-boosters.jpg") 0px 60px no-repeat #fff;} .category-4 {background:url("/images/theFaceSkin/cat-bg/cat-04-daily-groomers.jpg") 0px 60px no-repeat #fff;} .category-5 {background:url("/images/theFaceSkin/cat-bg/cat-05-toners.jpg") 0px 60px no-repeat #fff;} .category-6 {background:url("/images/theFaceSkin/cat-bg/cat-06-targeted.jpg") 0px 60px no-repeat #fff;} .category-7 {background:url("/images/theFaceSkin/cat-bg/cat-07-body-therapy.jpg") 0px 60px no-repeat #fff;} .category-8 {background:url("/images/theFaceSkin/cat-bg/cat-08-exfoliants.jpg") 0px 60px no-repeat #fff;} .category-9 {background:url("/images/theFaceSkin/cat-bg/cat-09-treatment-foundation.jpg") 0px 60px no-repeat #fff;} .category-10 {background:url("/images/theFaceSkin/cat-bg/cat-10-eye-treaments.jpg") 0px 60px no-repeat #fff;} .category-11 {background:url("/images/theFaceSkin/cat-bg/cat-11-mosturisers.jpg") 0px 60px no-repeat #fff;} .category-12 {background:url("/images/theFaceSkin/cat-bg/cat-12-daylight-defense.jpg") 0px 60px no-repeat #fff;} .category-13 {background:url("/images/theFaceSkin/cat-bg/cat-13-masques.jpg") 0px 60px no-repeat #fff;} .category-14 {background:url("/images/theFaceSkin/cat-bg/shave.jpg") 0px 60px no-repeat #fff;} .category-15 {background:url("/images/theFaceSkin/cat-bg/cat-15-skin-kits.jpg") 0px 60px no-repeat #fff;} .category-16 {background:url("/images/theFaceSkin/cat-bg/cat-16-acc-2.jpg") 0px 60px no-repeat #fff;} .category-17 {background:url("/images/theFaceSkin/cat-bg/cat-17-age-smart.jpg") 0px 60px no-repeat #fff;} .category-18 {background:url("/images/theFaceSkin/cat-bg/cat-18-medibac.jpg") 0px 60px no-repeat #fff;} .category-19 {background:url("/images/theFaceSkin/cat-bg/cat-19-chromawhite.jpg") 0px 60px no-repeat #fff;} /* also used on: related items on product page + home page popular products*/ #prodListDeliveryPromo {background:url(/images/theFaceSkin/promos/productListingBannerPromo.png) 0px 0px no-repeat; padding-top:91px;} #productListing {clear:both; margin-bottom:30px;} #productListing dl {display:block; float:left; width:174px; position:relative; padding:15px 0px 0px 0px; height:250px; } #productListing dl dt {text-align:center;} #productListing dl dd {text-align:center; padding-top:43px;} #productListing dl a {position:absolute; color:#2a333a; width:154px; padding:0 10px; padding-top:150px; display:block; font-size:1.4em; border:1px solid #fff; line-height:1.2em; top:0px; left:0; height:115px; background:url(/images/theFaceSkin/blank.gif); } #productListing dl a:hover {border:1px solid #5992ce; color:#5992ce;} #productListing dl p {line-height:1.3em; padding:0 10px;} #productListing dl p.short-description {font-size:1.1em; height:40px; padding-bottom:5px;} #productListing dl span {} /* Featured Dermalogica Products - homepage */ /* #featured-dermalogica-products {clear:both;} #featured-dermalogica-products .prodbox {width:208px; position:relative; float:left; margin:0 11px; padding:20px 0px 0 0px; height:265px; margin-bottom:5px;} #featured-dermalogica-products .prodboxhover {-moz-box-shadow:0px 1px 10px #ccc; -webkit-box-shadow:0px 1px 10px #ccc; box-shadow:0px 1px 10px #ccc; top:-2px;} #featured-dermalogica-products .prodbox a {display:block; padding-top:225px; width:208px; position:absolute; padding-bottom:45px; text-align:center; border:1px solid #fff; top:0px; left:0; background:url(/images/theFaceSkin/blank.gif); font-size:1.5em;} #featured-dermalogica-products .prodbox a:hover {color:#5992ce; border-color:#ddd;} #featured-dermalogica-products .prodbox p {text-align:center; position:relative; top:25px;} */ /* delivery costs */ .delivery p.leadingCopy {padding-bottom:20px;} .delivery ul#nextWorkingDayCharges {padding:20px;margin-bottom:20px; background:url(/images/theFaceSkin/apc-logo-2.png) no-repeat 595px 15px #f1f1f1 } .delivery ul#nextWorkingDayCharges li {padding-bottom:5px; font-size:1.2em;} .delivery ul#exceptions {margin-bottom:15px; width:33%; overflow:hidden;} .delivery ul#exceptions li {padding-bottom:5px; float:left; width:50%;} .delivery ul#exceptions li a {color:#5992ce; text-decoration:underline; } table.deliveryCosts {margin-bottom:10px; width:100%;} table.deliveryCosts td, table.deliveryCosts th {text-align:left; font-weight:normal; border:1px solid #eee; padding:5px; font-size:1.3em; line-height:1.3em; vertical-align:middle;} table.deliveryCosts th { background-color:#ddd;} table.deliveryCosts tr.alt td {background-color:#f1f1f1;} table#deliveryCosts th span {display:block; font-weight:bold;} p.backtotop {padding-bottom:20px;} p.backtotop a {text-decoration:underline; color:#5992ce;} p.backtotop a:hover {text-decoration:none; } /* the face beauty salon */ #content.dermalogica-salon {padding:20px 0 0 0;} #content.dermalogica-salon #mainContent {background:url(/images/theFaceSkin/thesalon-mainCont-bg.png) bottom repeat-x; padding:20px 20px 40px 20px;} #content.dermalogica-salon img.shadow {padding:5px; background-color:#Fff;-moz-box-shadow:2px 2px 2px #CCC; -webkit-box-shadow:2px 2px 2px #CCC; box-shadow:2px 2px 2px #CCC;} #theFaceSalonBanner {} #theFaceSalonBanner img {} #content.dermalogica-salon .col1, #content.dermalogica-salon .col2 {width:450px; float:left;} #content.dermalogica-salon .col1 {padding-right:10px;} #content.dermalogica-salon .col1 p {font-size:1.4em; padding-bottom:30px;} #content.dermalogica-salon .col1 p.leadingCopy {font-size:2.3em; padding-bottom:25px; line-height:1.2em;} #content.dermalogica-salon .col1 img {margin:0 7px; position:relative; left:-10px;} #content.dermalogica-salon .col2 {padding-left:10px; padding-top:255px;} #content.dermalogica-salon .col2 img {position:absolute; margin-top:-325px; margin-left:35px} #content.dermalogica-salon .col2 a#priceList {background:url(/images/theFaceSkin/theface-price-list-download-bg.png) 0 0 no-repeat; position:absolute; font-size:3.2em; display:block; width:311px; margin-left:10px; padding:25px 20px 0px 130px; height:117px; color:#fff;} #content.dermalogica-salon .col2 a#priceList:hover {text-decoration:underline;} #content.dermalogica-salon .col2 a#priceList span {display:block; font-size:0.6em; padding-bottom:7px;} /* dermalogica advice */ #content.dermalogica-advice {background:url(/images/theFaceSkin/dermalogica_advice-bg.jpg) 550px 15px no-repeat #fff; padding-bottom:40px} #content.dermalogica-advice h1 {padding-bottom:25px;} #content.dermalogica-advice h2 {font-size:1.7em; padding-bottom:20px;} #content.dermalogica-advice ul {padding-left:15px;} #content.dermalogica-advice ul li {line-height:1.5em; list-style:disc;} #content.dermalogica-advice ul#crumbtrail {padding-left:0} #content.dermalogica-advice a#local {display:block; background:url(/images/theFaceSkin/find-your-local.jpg) 0 0 no-repeat; padding-top:20px; padding-left:110px; font-size:1.4em; height:65px; color:#5992ce; text-decoration:underline; } #content.dermalogica-advice a#local:hover {text-decoration:none;} #content.dermalogica-advice #intro {width:55%;} #content.dermalogica-advice #intro p {padding-bottom:55px;} #content.dermalogica-advice #intro p.leadingCopy {font-size:1.8em; line-height:1.4em; padding-bottom:25px;} #content.dermalogica-advice p#book {background-color:#f8f8fa; position:relative; margin-bottom:35px; white-space:nowrap; margin-left:-20px; display:block; width:860px; padding:20px 50px; text-align:center; text-shadow:1px 1px #e2e2e4; font-size:2.8em; line-height:1.2em;} #content.dermalogica-advice p#book span {display:block; color:#da7c03;} /* products */ #content.product #mainContent {padding-bottom:50px;} #content.product #mainContent h1 {padding-bottom:10px;} #content.product #mainContent h2 {padding-bottom:10px;} #content.product #mainContent p {padding-bottom:10px;} #content.product #mainContent p#short-description {padding-bottom:30px;} #content.product #mainContent #product-image img {margin-bottom:15px;} #content.product #mainContent #alerts {} #content.product #mainContent #alerts a {background:url(/images/theFaceSkin/send-me-email-promotions.png) no-repeat; width:311px; padding-top:95px} #content.product #mainContent #alerts a:hover {background-position:0px -95px;} #content.product #mainContent ul {padding-bottom:15px;} #product-image {display:block; width:350px; overflow:hidden;} #product-description {float:right; width:320px; font-size:1em;} #product-description ul {margin:0px 0px 10px 15px;} #product-description li {line-height:1.3em; margin-bottom:5px; list-style-type:disc;} /* price panel */ #pricePanel p.price {color:#e79326; font-size:2.4em; padding-bottom:10px;} #pricePanel p.price span {color:#6a737b; padding-right:15px;} #pricePanel p.rrp {font-size:1.4em; color:#b5b9bd; padding-bottom:0px;} #pricePanel p.rrp span {padding-right:46px;} #pricePanel ul {padding-bottom:15px;} #pricePanel ul li {padding-bottom:8px;} #pricePanel ul li span, #pricePanel ul li label {display:-moz-inline-block; display:inline-block; width:75px} #pricePanel ul li em {font-style:normal;} #pricePanel ul li em.in {background:url(/images/theFaceSkin/in-stock-tick-ico.gif) right no-repeat; padding-right:17px;} #pricePanel ul li em.out {} #pricePanel ul li input {width:15px; text-align:center;} #pricePanel ul li.quantity {padding-top:10px;} /* size */ #pricePanel ul#size {padding-bottom:18px;} #pricePanel ul#size li {display:inline;} #pricePanel ul#size input {width:auto; margin-right:5px;} #pricePanel ul#size label {width:35px;} #pricePanel ul#size label:hover {background-color:#f8f8fa} #pricePanel ul#size li.active label, #pricePanel ul.size li.active label:hover {background:#fae9d1;} /* Related products */ #related {margin-top:20px;} #related ul {padding:10px 0px; border-bottom:1px solid #f1f1f1} #related ul li {float:left;} #related ul li ul {width:112px; padding:2px 5px 0 5px; border:none;} #related ul li ul li {display:list-item; float:none; font-size:0.8em; line-height:1.1em;} #related ul li.image {width:35px;} #related ul li.name {padding-bottom:5px;} #related ul li.price {} #related ul li a {} #related ul li a:hover {text-decoration:underline; color:#5992ce;} #related ul li.qty {padding-top:2px;} #related ul li.qty input {width:15px !important; text-align:center;} /* Other Products you may like - extends on #productListing */ #content.product #productListing {border-top:7px solid #e2e4e5; width:940px; padding-left:20px; white-space:nowrap; position:relative; left:-20px;} #content.product #productListing h3 {font-size:1.2em; padding-botom:0;color:#b5b9bd; position:relative; top:-25px;} #productListing.fiveCols dl {width:184px;} #productListing.fiveCols dl.end {} #productListing.fiveCols dl a {width:164px; white-space:normal;} #productListing.fiveCols dl.end a {} /* contact us */ #content.contact-us {} #content.contact-us h1 {padding-bottom:30px;} #content.contact-us .col1 ul {padding-bottom:30px;} #content.contact-us .col1 ul li {font-size:1.3em; line-height:1.4em;} #content.contact-us .col1 ul li span {clear:both; float:left; display:block; width:120px;} #content.contact-us p {padding-bottom:30px;} #content.contact-us form {background-color:#f1f1f1; padding:20px;} #content.contact-us form label {clear:both; float:left; width:100px; font-size:1.3em;} #content.contact-us form input {width:200px; border:1px solid #CCC; padding:2px; font-size:1.2em;} #content.contact-us form textarea {width:200px; border:1px solid #CCC; height:100px; padding:3px; font-family:Helvetica, Arial, sans-serif} #content.contact-us form p {padding-bottom:15px;} #content.contact-us form p.submit input {width:auto; border:none;} #content.contact-us div.col2 img {margin-bottom:20px} /* create account */ #content.createAcc {} #content.createAcc form {width:500px; background-color:#f1f1f1; padding:20px; border:1px solid #ddd;} #content.createAcc h2 {padding-top:10px;} #content.createAcc p {clear:both;} #content.createAcc p.req {text-align:right; padding-right:10px; padding-bottom:0px;} #content.createAcc p label {display:block; float:left; width:150px; position:relative; top:2px;}