/*
Mecca Cosmetica CSS
Developed by: Christian Fagan
Born: 14/07/09
- chrome.css should only contain styles for:
- generic page/HTML elements (eg. random 's and headings -
, )
- structural elements (eg. #content, #sidebar, #header, #footer)
- main navigation
- Site-wide elements should be located in common.css
- an element is defined as a site-wide component if it is displayed in 2 or more of the main sections:
* Shopping Basket
* My Mecca
* Any stand-alone page is a section (miscellaneous)
- eg. If a component displays twice in the My Mecca section only, then the CSS would go in the "mm-content.css" file, whereas
if a component is displayed once on a stand-alone page (for example, the Contact Us page) and a Shopping Basket page, then
the relevant CSS for this component would be placed in the "common.css" file.
*/
/* importing all stylesheets - please do not change the order */
@import "reset.css"; /* summon reset stylesheet */
@import "common.css"; /* Common/site-wide elements */
@import "sb-content.css"; /* Shopping Basket content specific */
@import "mm-content.css"; /* My Mecca content specific */
@import "misc.css"; /* Static content > for stand alone pages like Contact Us, Product pages, Store Locator, etc. Created by James Myers & Christian Fagan */
@import "homepage.css"; /* Homepage content specific */
@import "promo-pages.css"; /* all promo pages */
/* standard colour palette */
.light-grey {color:#c8c8c8} /* light grey */
.mid-grey {color:#7c7c7c} /* medium level grey */
.dark-grey {color:#313131} /* dark grey */
.mecca-purple {color:#754c78} /* standard Mecca purple - used for most headings */
.mecca-mid-pink {color:#cd96cd} /* Mecca mid pink */
.mecca-light-pink {color:#f8e8f8} /* Mecca light pink - *use sparingly as is a very light and hardly readable colour */
/*
- body assigned footer colour and header repeating background image
- body also assigned position relative to allow white opaque overlay to span entire height of page (rather than just window height)
*/
body {margin:0; padding:0; background:#754c78 url('img/chrome-header-repeat-bg.jpg') repeat-x 50% 0; color:#8b668b; position:relative; zoom:1;_height:100%} /* height needed for IE6 */
/* Common (and important) classes */
.hidden {position:absolute; left:-999em; margin:0; padding:0} /* hides elements from page view */
.text-hidden {text-indent:-999em} /* hides text off the page to the left */
.width-960 {width:960px; margin:0 auto;} /* applied to content containing elements that need to have a width of 960 pixels and be centred */
/* content area is special case - needs left + right padding */
.content {clear:both;} /* content area needs left and right padding while keeping its 960 width */
.content-inner {width:97%; margin:0 auto;}
.w-sidebar .content {padding-right:0; background:#fff url('img/sidebar-bgs.gif') repeat-y 719px 0} /* search results page (with sidebar) need to have right padding removed and width adjusted */
.w-sidebar .content-inner {width:auto; margin-left:16px;}
.impersonate {border-left: 10px solid red; border-right: 10px solid red;} /* applied to the body tag when impersonating a customer as a staff member */
/* Generic styles */
ul, ol {margin-left:30px;}
ul {list-style-type:disc;}
h1 {margin-bottom:.3em}
p, ul, ol, dl, h2, h3, h4, h5, h6 {margin-bottom:.6em;}
p {line-height:1.4}
.content h1,.content h2,.content h3,.content h4,.content h5,.content h6 {color:#754c78}
body,p,ul,ol,dl,input,textarea{font-family:verdana,tahoma,Arial,sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:futura,calibri,candara,verdana,tahoma,helvetica}
legend span {position:absolute; left:-999em;font-family:futura,calibri,candara,verdana,tahoma,helvetica}
a {text-decoration:underline; color:#8b668b; cursor:pointer}
a:hover {text-decoration:none}
.content a {color:#cd96cd;}
p,ol,ul {line-height: 1.4em;}
table {width:100%}
/* Headings */
h1 {font-size:400%; font-weight:normal;}
h2 {font-size:220%}
h3 {font-size:180%}
h4 {font-size:150%}
h5 {font-size:130%}
h6 {font-size:110%}
/* Strucutral elements that need the "clear" attribute */
.content-wide, .content, .footer-wide, .footer, .footer-links {clear:both;}
/* Header */
.header-wide {zoom:1;} /* zoom needed for IE6 hasLayout bug - to display background image */
.MeccaAU .header-wide {background: url('img/chrome-header_AU.jpg') no-repeat 50% 0;}
.MeccaNZ .header-wide {background: url('img/chrome-header_NZ.jpg') no-repeat 50% 0;}
.header {height:160px; font-size:120%;}
.header a {outline:none}
.header .logo {margin:0 auto; height:95px; text-indent:-999em; position:relative;}
.header .logo a {display:block;position:relative; margin:0 auto;}
.MeccaAU .header .logo a {background:url('img/chrome-sprite_AU.gif') no-repeat -1px -1px;width:255px;height:64px;top:16px;}
.MeccaNZ .header .logo a {background:url('img/chrome-sprite_NZ.gif') no-repeat -1px -1px;width:212px;height:72px;top:14px;}
/* Main Navigation */
.nav {padding-left:0; margin:0; list-style-type:none; position:relative;zoom:1; z-index:14;height:35px;} /* z-index needed on container for IE6+7 z-index bug + zoom needed for IE6 peek-a-boo bug */
* html .nav {z-index:18;} /* IE6 */
*+ html .nav {z-index:18;} /* IE7 */
.nav li {display:block;float:left; position:relative; zoom:1;}
.nav a {display:block;height:33px; background:#f5ebf5 url('img/chrome-nav-sprite.gif') no-repeat 0 0; text-indent:-999em; text-decoration:none;border-top:1px solid #dad1da; border-bottom:1px solid #dad1da; position:relative; zoom:1;}
/* a:link */
.nav-brands a {background-position:0 0; width:97px;}
.nav-whats-new a {background-position:-97px 0; width:124px;}
.nav-makeup a {background-position:-221px 0; width:92px}
.nav-skin-care a {background-position:-313px 0; width:103px}
.nav-hair-care a {background-position:-416px 0; width:103px}
.nav-bath-body a {background-position:-519px 0; width:124px}
.nav-fragrance a {background-position:-643px 0; width:115px}
.nav-tools a {background-position:-758px 0; width:73px}
.nav-men a {background-position:-831px 0; width:60px}
.nav-gifts a {background-position:-891px 0; width:69px}
/* a:hover */
.nav-brands a:hover {background-position:0 -33px;}
.nav-whats-new a:hover {background-position:-97px -33px;}
.nav-makeup a:hover {background-position:-221px -33px; }
.nav-skin-care a:hover {background-position:-313px -33px;}
.nav-hair-care a:hover {background-position:-416px -33px;}
.nav-bath-body a:hover {background-position:-519px -33px;}
.nav-fragrance a:hover {background-position:-643px -33px;}
.nav-tools a:hover {background-position:-758px -33px;}
.nav-men a:hover {background-position:-831px -33px;}
.nav-gifts a:hover {background-position:-891px -33px;}
/* keep tab highlighted while on hover */
.sfHover .tab-brands {background-position:0 -33px;}
.sfHover .tab-whats-new {background-position:-97px -33px;}
.sfHover .tab-makeup {background-position:-221px -33px; }
.sfHover .tab-skin-care {background-position:-313px -33px;}
.sfHover .tab-hair-care {background-position:-416px -33px;}
.sfHover .tab-bath-body {background-position:-519px -33px;}
.sfHover .tab-fragrance {background-position:-643px -33px;}
.sfHover .tab-tools {background-position:-758px -33px;}
.sfHover .tab-men {background-position:-831px -33px;}
.sfHover .tab-gifts {background-position:-891px -33px;}
/*
OVERLAY BOXES (ie. hover menus)
All browsers *except* IE6 recognise the :hover on the
item.
IE6 uses the .sfHover class to show and hide the hover menus for each nav item
*/
/* hover box(es) - both nav and pop ups - General */
.overlay-box {width:975px; position:relative;_position:absolute;/*for IE6*/ font-family:Tahoma, verdana, Geneva, sans-serif;}
.nav-brands .overlay-box {font-size:90%;}
.box-top-left-container, .box-bottom-right-container, .bottom-left-corner,.top-right-corner{background:url('img/chrome-nav-hover-box.png') no-repeat 0 0;color:#8b668b;}
.box-bottom-right-container {background-position:100% 100%; position:relative; padding-bottom:19px; z-index:6;zoom:1} /* zoom VIP */
.box-top-left-container {position:relative; padding-left:19px; padding-top:2px; left:-19px; top:0;background-position:0 -17px; z-index:7;zoom:1} /* zoom VIP */
.bottom-left-corner {width:19px; height:19px; background-position:0 -1950px; position:absolute; left:-19px; bottom:0;}
.top-right-corner {width:2px; height:2px; background-position:-975px 0px; position:absolute; right:0; top:-17px;}
.box-content {background: url('img/chrome-nav-hover-inner-borders.gif') repeat-y 73px 0; padding:36px 18px 18px; clear:both; zoom:1; z-index:8;}
/* IE6 lightbox overlay overrides */
* html .box-top-left-container {background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 0 0!important; padding-left:2px; left:0!important;}
* html .box-bottom-right-container {background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 100% 100%!important; padding-left:0;padding-bottom:2px!important; padding-right:2px!important;}
* html .bottom-left-corner {width:2px;height:2px;background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 0 -1918px!important; padding-left:0; left:0; bottom:0; font-size:0; line-height:0;display:none;}
* html .top-right-corner {width:2px;height:2px;background:url('img/chrome-nav-hover-box-IE.gif') no-repeat -958px 0!important; padding-left:0;top:0;display:none;}
/*
- Below are IE7 box image overrides for the split second before the box completely fades in (to negate ugly black PNG showing through)
- only IE7 is assigned the "sf-shadow-off" class when the hover menu is fading in.
*/
.sf-shadow-off .box-bottom-right-container {background:url('img/chrome-nav-hover-box-IE.gif') no-repeat 100% 100%;padding:0 0 2px 0}
.sf-shadow-off .box-top-left-container {background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 2px 0;padding:2px 0 0 4px;left:-2px;}
.sf-shadow-off .top-right-corner {width:2px; height:2px;background: url('img/chrome-nav-hover-box-IE.gif') no-repeat -958px 0;}
.sf-shadow-off .bottom-left-corner {width:2px;height:2px;background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 0 -1918px; padding-left:0; left:0; bottom:0; font-size:0; line-height:0;}
.nav-brands .box-content {background-position:0 0;}
.nav-whats-new .box-content {background-position:50px 0;}
.nav-makeup .box-content, .nav-skin-care .box-content {background-position:64px 0;}
.nav-hair-care .box-content, .nav-hair-care .box-content, .nav-bath-body .box-content, .nav-fragrance .box-content {background-position:73px 0;}
.sub-nav .search .box-content {background-position:-739px 0}
.sub-nav .my-mecca .box-content {background-position:36px 0; text-align:left;}
.sub-nav .sub-nav-basket .box-content {background-position:1000px 0} /* position off screen to the right - 1000px is just a round figure */
/* opaque content overlay for when hovering over nav menus */
/* hide from non-javascript users */
.nav-content-hover-overlay, div.lightbox-overlay {height:100%; width:100%;filter: alpha(opacity=65);opacity:.65; -moz-opacity: 0.65;background-color:#fff;zoom:1;}
.nav-content-hover-overlay { position:absolute; top:160px; display:none;z-index:12;} /* display above everything except the hover menus themselves */
div.lightbox-overlay {z-index:30; position:absolute;top:0;}/* display above everything else */
/* allow for javascript enabled users */
.scriptable #nav-content-hover-overlay, .scriptable div.lightbox-overlay {display:block}
.lightbox {position:absolute;top:0;z-index:30;font-size:120%;zoom:1;}
.oops-error p {font-size:110%}
.oops-error .oops-reason {font-weight:bold;}
.oops-error .button {margin-top:2em}
.lightbox .overlay-box {width:660px; z-index:31;zoom:1}
.lightbox.oops-error .overlay-box { width:500px;}
.lightbox .box-content {background:url('img/chrome-nav-hover-inner-borders.gif') repeat-y -1698px 0; padding:0}
.lightbox .box-content .box-content-inner {background: url('img/chrome-nav-hover-inner-borders.gif') no-repeat -2656px 0;overflow:hidden;zoom:1; padding:3em 18px 20px 120px} /* default background position is with plus icon */
.lightbox.oops-error .box-content .box-content-inner {background-position:-3614px 0}
.lightbox.help-popup .box-content .box-content-inner, .lightbox.securitycode-popup .box-content .box-content-inner {background-position:-4572px 0; padding: 3em 50px 20px 140px}
.lightbox.help-popup .box-content .box-content-inner h2, .lightbox.securitycode-popup .box-content .box-content-inner h2 {margin-bottom: .2em; font-size: 2.5em}
.lightbox.help-popup .box-content .box-content-inner h3, .lightbox.securitycode-popup .box-content .box-content-inner h3{color: #CD96CD; margin-bottom: .2em}
.lightbox.help-popup .box-content .box-content-inner p {margin-bottom: 1.5em}
.lightbox .overlay-box .bottom-left-corner {bottom:0}
*html .lightbox .overlay-box .bottom-left-corner {bottom:-3px} /* IE6 */
.lightbox .basket {margin-bottom:2em}
.lightbox .basket .product-desc {width:43%}
.lightbox .basket .price {width:12%}
.lightbox .basket .qty {width:17%}
.lightbox h2 {text-transform:uppercase; font-size:350%; font-weight:normal;}
.lightbox .overlay-box.item-added .box-top-left-container {}
.lightbox .overlay-box .buttons {padding-left:0; overflow:hidden; margin-bottom:0;margin-left:0; float:right; zoom:1; background-color:#fff; color:#333;}
.lightbox .overlay-box .buttons li {float:left; display:inline; margin-right:5px;}
.lightbox .overlay-box .buttons .continue {width:292px}
.lightbox .overlay-box .buttons .checkout {width:183px}
.lightbox .overlay-box p.button a {margin-left:0}
/* IE7 lightbox overrides - to negate ugly black box */
*+ html .lightbox .box-bottom-right-container {background:url('img/chrome-nav-hover-box-IE.gif') no-repeat 100% 100%;padding:0 0 2px 0}
*+ html .lightbox .box-top-left-container {background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 2px 0;padding:2px 0 0 4px;left:-2px;}
*+ html .lightbox .top-right-corner {width:2px; height:2px;background: url('img/chrome-nav-hover-box-IE.gif') no-repeat -958px 0;top:17px;display:none;}
*+ html .lightbox .bottom-left-corner {width:2px;height:2px;background: url('img/chrome-nav-hover-box-IE.gif') no-repeat 0 -1918px; padding-left:0; left:0; bottom:0; font-size:0; line-height:0;display:none;}
.newsletter-popup .overlay-box {width: 470px;}
.newsletter-popup h2 {font-size: 2.5em; margin-bottom: .1em}
.newsletter-popup .box-content .box-content-inner {padding:3em 18px 20px 130px}
/* main nav */
.nav .overlay-box, .sub-nav .overlay-box {position:absolute; top:-999em; left:-999em; z-index:22; zoom:1; width:750px;} /* most standard width 750px is declared */
.nav-brands:hover .overlay-box {left:2px;top:34px;width:975px;}
.nav-whats-new:hover .overlay-box {left:-95px;top:34px;width:890px;}
.nav-makeup:hover .overlay-box {left:-191px;top:34px;}
.nav-skin-care:hover .overlay-box {left:-180px;top:34px;}
.nav-hair-care:hover .overlay-box {left:-189px;top:34px;}
.nav-bath-body:hover .overlay-box {left:-292px;top:34px;}
.nav-fragrance:hover .overlay-box {left:auto;right:-219px;top:34px;}
.nav-tools:hover .overlay-box {left:auto;right:-146px;top:34px;}
.nav-men:hover .overlay-box {left:auto;right:-86px;top:34px;}
.nav-gifts:hover .overlay-box {left:auto;right:-17px;top:34px;}
.scriptable .sub-nav .search:hover .overlay-box {left:-999em;top:28px;width:975px;}
.sub-nav .my-mecca:hover .overlay-box {left:2px;top:28px;width:561px;}
.sub-nav .sub-nav-basket:hover .overlay-box {left:-261px;top:28px;width:480px;}
/* IE6 styles box styles */
* html .nav .overlay-box {width:735px;}
* html .sub-nav .overlay-box {width:735px;}
* html .sfHover .overlay-brands {top:34px;left:0;width:960px!important;}
* html .sfHover .overlay-whats-new {top:34px;left:0;width:245px!important}
* html .sfHover .overlay-makeup {top:34px;left:0;width:453px!important;}
* html .sfHover .overlay-skin-care {top:34px;left:0;width:453px!important;}
* html .sfHover .overlay-hair-care {top:34px;left:0;width:453px!important;}
* html .sfHover .overlay-bath-body {top:34px;left:-13px;width:453px!important;}
* html .sfHover .overlay-fragrance {left:auto!important;right:-203px!important;top:34px;width:453px!important;}
* html .sfHover .overlay-tools {left:auto!important;right:-130px!important;top:34px;width:453px!important;}
* html .sfHover .overlay-men {left:auto!important;right:-69px!important;top:34px;width:453px!important;}
* html .sfHover .overlay-gifts {left:auto!important;right:-1px!important;top:34px;width:453px!important;}
* html .sfHover .overlay-search {left:-1px;top:28px;width:960px!important;}
* html .sfHover .overlay-my-mecca {left:0;top:28px;width:581px;}
* html .sfHover .overlay-sub-nav-basket {left:auto;right:0;top:28px;width:480px;}
/* IE7 fade in box styles */
.nav-brands .sf-shadow-off {width:960px!important;left:0!important;}
.nav-whats-new .sf-shadow-off {width:245px!important; left:0!important;}
.nav-makeup .sf-shadow-off {width:453px!important;left:0!important}
.nav-skin-care .sf-shadow-off {width:453px!important; left:0!important}
.nav-hair-care .sf-shadow-off {width:453px!important; left:0!important}
.nav-bath-body .sf-shadow-off {width:453px!important; left:-13px!important;}
.nav-fragrance .sf-shadow-off {width:453px!important; left:auto!important; right:-202px!important;}
.nav-tools .sf-shadow-off {width:453px!important; left:auto!important; right:-129px!important;}
.nav-men .sf-shadow-off {width:453px!important; left:auto!important; right:-69px!important;}
.nav-gifts .sf-shadow-off {width:453px!important; left:auto!important; right:0!important;}
/* sub nav IE7 */
.sub-nav .search:hover .sf-shadow-off {left:0;width:960px!important;}
.sub-nav .my-mecca:hover .sf-shadow-off {left:0!important;width:546px!important;} /* width:510px!important - style for logged in version of this tab */
.sub-nav .sub-nav-basket:hover .sf-shadow-off {left:-263px!important;width:465px!important;}
/*
Special case of hover: when search bar is active - as in, something has been typed into the search box - hide all
other overlay-boxes and keep the search overlay box active even when hovering away from the overlay-box area.
*/
.search-active #nav .overlay-box,
.search-active .sub-nav .my-mecca .overlay-box,
.search-active li:hover .sf-shadow-off,
.search-active li.sub-nav-basket .overlay-box,
.search-active li.sub-nav-basket:hover .sf-shadow-off {left:-999em!important;}
.search-active .sub-nav .search {background-color:#754c78;color:#dbb3db}
.search-active .sub-nav .search .overlay-box{left:2px!important; width:975px!important; display:block!important; visibility:visible!important}
* html .search-active .sub-nav .search .overlay-box {left:0!important; width:960px!important;} /* IE6 version */
* html .sfHover .overlay-search {left:-999em;}
.search-active .sub-nav .search {width:221px; margin-left:-1px; z-index:50!important;}
.search-active .sub-nav .search .h-search-small { background-position:-15px -147px!important}
.search-active .sub-nav .search input {border:1px solid #754c78; width:110px}
.search-active .sub-nav .search .overlay-box {z-index:51!important; visibility:visible!important}
.my-mecca-active #nav .overlay-box,
.my-mecca-active .sub-nav .search .overlay-box,
.my-mecca-active li:hover .sf-shadow-off,
.my-mecca-active li.sub-nav-basket .overlay-box,
.my-mecca-active li.sub-nav-basket:hover .sf-shadow-off {left:-999em!important;}
.my-mecca-active .sub-nav .my-mecca {background-color:#754c78;color:#dbb3db}
.my-mecca-active .sub-nav .my-mecca .overlay-box {left:2px!important; display:block!important; visibility:visible!important}
* html .my-mecca-active .sub-nav .my-mecca .overlay-box {left:0!important;} /* IE6 version */
* html .sfHover .overlay-my-mecca {left:-999em;}
.my-mecca-active .sub-nav .my-mecca .h-my-mecca-small { background-position:-205px -141px!important; background-color:#754C78; color:#dbb3db;}
.my-mecca-active .sub-nav .my-mecca .overlay-my-mecca {z-index:51!important; visibility:visible!important}
.my-mecca-active .nav-content-hover-overlay {display:block;}
/* Sub nav */
.sub-nav {text-align:center;padding-left:0; list-style-type:none; height:28px; background-color:#f1e2f1;color:#8b668b;margin:0;clear:both;font-size:90%;border-left:1px solid #dad1da;border-right:1px solid #dad1da; position:relative;zoom:1; z-index:13;} /* z-index needed on container element for IE6+7 z-index bug - otherwise hovers display under content */
.sub-nav p, .sub-nav ul, .sub-nav li, .sub-nav dl {font-family:Tahoma, Geneva, sans-serif}
.sub-nav .search {height:28px;width:223px; position:absolute; text-align:left;}
.sub-nav .search .overlay-box, .sub-nav .my-mecca .overlay-box, .sub-nav .sub-nav-basket .overlay-box {cursor:default}
.sub-nav .search {left:0; top:0;}
.sub-nav .search label {float:left; display:inline;margin:8px 11px 0 14px;}
.sub-nav .search input {display:inline; float:left; font-size:100%; border:1px solid #d9cdd9; padding:5px 6px 4px; background-color:#fff; color:#baa5bb; width:111px; font-family:Tahoma, Geneva, sans-serif;margin:2px 0 0 0;}
.sub-nav .search:hover, .sub-nav li:hover a{background-color:#754c78;color:#dbb3db} /* IE6 doesn't recognise this */
.sub-nav .my-mecca a:hover,.sub-nav .sfHover .h-my-mecca-small, .sub-nav .sub-nav-basket .basket-link:hover, .sub-nav .sfHover .basket-link {background-color:#754c78;color:#dbb3db}
.sub-nav li:hover .overlay-box a {background-color:#fff;color:#8b668b} /* IE6 doesn't recognise this */
.sub-nav .search:hover {width:221px; margin-left:-1px}
.sub-nav .search:hover input {border:1px solid #754c78; width:110px}
.sub-nav .search:hover .h-search-small { background-position:-15px -147px}
.sub-nav .my-mecca {min-width:23.5em;max-width:490px;height:28px;margin:0 auto;padding:0;_margin:0 30%;position:relative; text-align:left;_text-align:center;cursor:pointer; display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;}
.sub-nav .my-mecca .h-my-mecca-small {background: url('img/chrome-nav-sprite.gif') no-repeat -205px -84px; line-height:12px; min-width:13em; text-indent:0; text-align:left; padding:8px 11px 4px 106px; margin-bottom:0; text-decoration:none;}
.sub-nav .my-mecca .h-my-mecca-small span {text-decoration:underline;}
.sub-nav .my-mecca .h-my-mecca-small:hover span {text-decoration:none}
.sub-nav .my-mecca .h-my-mecca-small:hover {background-position:-205px -141px; background-color:#754c78}
.sub-nav .my-mecca.sfHover .h-my-mecca-small {background-position:-205px -141px; background-color:#754c78;}
.sub-nav .my-mecca .box-right a {text-decoration:underline;} /* for IE6 */
.sub-nav .my-mecca .box-left p {margin-bottom:1em}
.sub-nav .my-mecca-logged-in .list-column-container li {width:auto; float:none; display:block; font-size:110%;}
.sub-nav .sub-nav-basket {position:absolute; right:0; top:0; width:202px;}
.sub-nav .sub-nav-basket p {float:right; display:inline; margin-right:17px; margin-bottom:0;}
.sub-nav .sub-nav-basket:hover {margin-right:-1px;}
/* box-left & box-right */
.box-left {width:261px;float:left; display:inline; font-size:90%;}
.box-left h3 {margin-bottom:.5em;zoom:1;}
.box-left p {margin-right:12%; font-family:Tahoma, Geneva, sans-serif; clear:both; position:relative; zoom:1;}
.box-right {padding:1px;} /* padding very important for IE6+7 jumping content bug */
/* "box-right" variations for drop downs */
.nav-brands .box-right {width:76%; font-family:Tahoma, Geneva, sans-serif; padding-left:0}
.nav-makeup .box-right, .nav-skin-care .box-right {width:410px;}
.nav-hair-care .box-right,
.nav-bath-body .box-right,
.nav-fragrance .box-right,
.nav-tools .box-right,
.nav-men .box-right,
.nav-gifts .box-right {width:410px; float:none;}
.search .box-right {width:51%}
.my-mecca .box-right {width:241px; float:left; margin-left:14px}
.my-mecca .my-mecca-logged-in .box-right {width:254px}
.list-column-container {padding-left:0; margin-bottom:0;margin-left:0;zoom:1;}
.list-column-container li {list-style:none;width:48%; margin-right:15px; display:inline; margin-bottom:0; zoom:1;}
.nav .list-column-container .last {margin-right:0}
#nav .nav-whats-new .box-right {float:none; padding-left:0}
#nav .nav-whats-new .list-column-container li {margin-right:0; float:none;display:block;width:100%;}
#nav .nav-whats-new .list-column-container li li {width:auto;display:block;}
.list-column-container li h3 {margin-bottom:10px; margin-left:10px}
.list-column-container li ol {list-style:none; padding-left:0;margin-left:0; margin-bottom:0; zoom:1}
.list-column-container ol li {display:block; float:none; width:auto; margin-bottom:0; margin-right:0; padding-bottom:0; border-bottom:1px solid #e6cae6; position:relative; zoom:1;} /* zoom needed for IE6 hasLayout bug */
.list-column-container ol li a { background-color:#fff; padding:.3em 20px .3em 10px; margin:0; display:block; text-decoration:none;zoom:1;} /* zoom needed for IE6+7 hasLayout bug - produces unwanted top margin on elements */
.nav .list-column-container ol li a {position:relative;width:auto;background-image:none;text-indent:0;border:none;height:auto;text-decoration:none;} /* mostly overrides */
.nav .nav-brands .list-column-container ol li a {font-family:Tahoma, Geneva, sans-serif;}
.list-column-container ol li a span {display:block; text-indent:-999em;width:12px;height:14px;position:absolute;left:-999em; top:.3em;background:#f2e4f2 url('img/common-site-sprite.gif') no-repeat 100% 1px;}
.list-column-container ol li a:hover span {left:auto; right:5px}
.list-column-container ol li a:hover {background-color:#f2e4f2!important; zoom:1;}
.more-link {clear:both; padding-top:0; padding-top:1em; zoom:1;}
.more-link a {width:66%!important}
.sub-nav .box-left {font-size:100%}
.sub-nav .my-mecca .box-left {width:245px;}
.nav-brands .box-left {width:21%; font-size:100%;}
/* search drop down specific styles */
li.search .box-left {width:200px; margin-right:18px;}
li.search .box-right {float:left}
.search .box-right ol {list-style:none; overflow:hidden; margin-left:0; padding-left:0}
.search .box-right li {float:left; display:inline; margin-right:5px; margin-bottom:1px; width:229px; height:7.2em; zoom:1;}
.search .box-right li a.image {display:inline; float:left; margin-right:5px; border:none;width:74px;}
.search .box-right a img {display:block; padding:1px; border:1px solid #e3bee3; background-color:#fff; color:#dbb3db;width:70px; height:70px; max-height:70px; max-width:70px;}
.search .box-right li {}
.search .box-right li dt {margin-bottom:.5em;}
.search .box-right li a {text-decoration:none}
.search .box-right li a:hover {text-decoration:underline}
.search .box-right li a.image:hover {text-decoration:none;}
.search .box-right .search-buttons {clear:both; overflow:hidden; zoom:1; margin-left:0; margin-bottom:0}
.search .box-right .search-buttons li {float:left; height:auto!important; min-height:0;}
.search .box-right .search-buttons li.large {width:50%; margin-right:1px;}
.search .box-right .search-buttons li.small {width:37%; margin-right:0}
.search .box-right li:hover {background-color:#fff; color:inherit;}
.search .box-right p {clear:both}
.search .box-right p a {cursor:pointer}
.box-sidebar {width: 200px; float:right; display:inline;}
.box-sidebar dl {margin-bottom:3em;}
.box-sidebar dt {margin-bottom:.6em; margin-top:3em}
.box-sidebar dd {line-height:1.4}
.box-sidebar .first {margin-top:0}
.box-sidebar {background-color:#f6ecf6; color:#a94caf;}
.sub-nav .search .box-sidebar dd a {background-color:#f6ecf6; color:#a94caf; text-decoration:none}
.sub-nav .search .box-sidebar dd a:hover {text-decoration:underline}
/* My Mecca drop down specific styles */
.sub-nav .my-mecca-logged-in .box-left {width:235px;}
.sub-nav .my-mecca-logged-in .box-content {background-position:29px 0}
.sub-nav .my-mecca-logged-in .list-column-container a {text-decoration:none; font-family:Verdana, Arial;}
.sub-nav .my-mecca-logged-in .list-column-container a:hover {color:#8B668B;}
.sign-in-register legend span { position:relative;left:auto;}
* html .sign-in-register legend span {left:-6px} /* IE6 */
*+ html .sign-in-register legend span {left:-6px} /* IE7 */
.sign-in-register ol {list-style:none; padding:12px 0 0; font-family:Tahoma, verdana, Geneva, sans-serif; margin-left:0; overflow:hidden;zoom:1}
.sign-in-register li {clear:both;margin-bottom:.5em; float:none;}
.sign-in-register label {display:block; padding:4px; font-weight:bold;}
.sign-in-register label.optional {font-weight:normal;}
.sign-in-register input {padding:5px; background-color:#f8e8f8; color:#afa2aa; display:block; border:1px solid #e6cae6; font-size:110%; width:95%;}
.sign-in-register .checkbox {margin-bottom:20px}
.sign-in-register .checkbox label {padding-left:0;}
.sign-in-register .checkbox input {width:auto; padding:0; float:left; margin-right:4px;}
*html .sign-in-register .checkbox input {margin-right:0; margin-top:-2px; border:none; background-color:transparent} /* IE6 */
*+html .sign-in-register .checkbox input {margin-right:0; margin-top:-2px; border:none; background-color:transparent} /* IE7 */
.sign-in-register .submit {margin-top:0; zoom:1;}
.sign-in-register .submit label {position:absolute; left:-999em}
.sign-in-register .submit input {border:none; background-color:#754C78; color:#754C78; width:inherit; width:70px; text-indent:-999em;}
/* Your Basket drop down specific */
.box-content .h-your-basket { position:absolute; top:33px}
.sub-nav-basket .basket {width:100%;font-size:100%;color:#7c7c7c; position:relative;font-family:Tahoma, Geneva, sans-serif;vertical-align:top; display:block;margin: 0;padding:0;}
.sub-nav-basket .basket-link {background: url('img/chrome-nav-sprite.gif') no-repeat -724px -83px;width:112px; text-decoration:none; height:14px;display:block; text-align:left;padding-top:7px; height:22px; padding-left:90px;}
.sub-nav-basket .basket-link:hover {background-position:-724px -141px;width:112px;}
.sub-nav-basket.sfHover .basket-link {background-position:-724px -141px!important;}
.sub-nav-basket .basket-link em {font-style:normal;text-decoration:underline;}
.sub-nav-basket .basket-link:hover em {text-decoration:none;}
/* sub nav basket drop down overrides */
.sub-nav-basket .basket .product-desc, .sub-nav-basket .basket .qty, .sub-nav-basket .basket .price, .sub-nav-basket .basket .remove-col { padding-top:10px}
.sub-nav-basket .basket caption span { display:block; margin:0;}
.sub-nav-basket .basket thead th { vertical-align:bottom}
.sub-nav-basket .basket td {padding-top:5px; padding-bottom:5px; border:none;}
.sub-nav-basket .basket .product-image img {border:1px solid #e6c5e6; max-width:70px; max-height:70px}
.sub-nav-basket .basket .product-desc {width:60%;}
*html .sub-nav-basket .basket .product-desc {width:55%;} /* IE6 */
*+html .sub-nav-basket .basket .product-desc {width:55%;} /* IE7 */
.sub-nav-basket .basket .remove-col {text-indent:-999em; text-align:left; width:5%;}
* html .sub-nav-basket .basket .remove-col {width:10%}/* IE6 */
*+html>body .sub-nav-basket .basket .remove-col {width:10%} /* IE7 */
.sub-nav-basket .basket .remove-col a.remove {display:block; padding-right:0; width:12px; height:12px;}
.sub-nav-basket chrome-sprite.gif{width:10px; height:11px;}
.sub-nav-basket .basket .qty {width:21%;}
*html .sub-nav-basket .basket .qty {width:21%;} /* IE6 */
*+html .sub-nav-basket .basket .qty {width:21%;} /* IE7 */
.sub-nav-basket .basket .qty ul { width:100%; margin-right:0}
.sub-nav-basket .basket .price {width:12%}
/* .sub-nav-basket .basket .qty .ctrl-current-qty {margin:0 2px} */
.sub-nav-basket .basket chrome-sprite.gif{margin:0 auto}
.sub-nav-basket .total {border-top:1px solid #e6c5e6; border-bottom:1px solid #e6c5e6; padding:.3em; font-size:122%; overflow:hidden; margin:1em 0; zoom:1;} /* zoom needed for IE6 hasLayout overflow collapse bug */
.sub-nav-basket .total li {float:left; width:70%; display:inline;}
.sub-nav-basket .total .total-price {width:22.8%; text-align:right; font-weight:bold;}
* body .sub-nav-basket .total .total-price {width:26%} /* IE6 */
html>body .sub-nav-basket .total .total-price {width:26%} /* IE7 */
.sub-nav-basket .buttons {margin-top:10px; clear:both; padding-left:0;margin-left:0; overflow:hidden;zoom:1;}
.sub-nav-basket .buttons li {float:left; display:inline; padding-left:0;}
.sub-nav-basket .buttons li a {background-color:#aaa; width:100%;}
.sub-nav-basket .buttons .continue-shopping {width:36%; margin-right:5px}
.sub-nav-basket .buttons .continue-shopping a {background-color:#7c7c7c; width:auto;}
.sub-nav-basket .buttons .samples-checkout {width:62%;}
.nav-brands .list-column-container li {width:32.3%; margin-right:10px}
.nav-brands .list-column-container ol li {width:auto; margin-right:0}
.nav-brands .list-column-container ol li a:hover { background-position: 210px -877px; color:inherit}
/* END Nav hover box(es) - Specific */
/* Content area */
.content-wide {clear:both; background-color:#fff; color:#666;zoom:1;} /* zoom needed for IE6 hasLayout - VIP */
.content {padding:15px 0; background-color:#fff; color:#666; font-family:Verdana, Geneva, sans-serif; font-size:120%; zoom:1;min-height:21em;_height:21em}
.content p {font-family:Verdana, Geneva, sans-serif}
/* footer */
.footer-wide { background:#fff url('img/footer-repeat-bg.jpg') repeat-x 50% 0; color:#a88aaa; overflow:hidden; clear:both;}
.footer {padding:6px 15px; overflow:hidden; font-size:120%;}
.footer-header {margin:0 0 20px; height:31px; padding-left:0;margin-left:0; list-style-type:none; overflow:hidden; zoom:1;} /* zoom needed for IE6 hasLayout bug */
.footer-header li {float:left;}
.footer-header .h-mail-orders {padding-top:5px;}
.footer-header .email-signup {float:right;width:400px;}
.email-signup label {float:left; padding-top:5px; display:inline}
.email-signup input { background-color:#754c78;border:1px solid #3f1c3f; color:#fff; font-size:90%; font-family:Tahoma, helvetica, Arial, Verdana; padding:5px; width:228px; margin:0; float:right}
.footer .footer-links {clear:both; overflow:hidden;}
.footer .footer-links a {color:#a88aaa; text-decoration:none; font-family:Tahoma,arial,verdana, Geneva, sans-serif}
.footer .footer-links a:hover {text-decoration:underline; color:#fff;}
.footer .footer-links div {width:20%; float:left; margin:0 62px 0 0;_margin-right:59px; font-size:90%;}
.footer .footer-links h4 {margin-bottom:6px;}
.footer .footer-links ul {float:left; width:40%; list-style-type:none; margin-right:15px; margin-bottom:10px; padding-left:0;margin-left:0;}
.footer .footer-links li {margin-bottom:.5em}
.footer .footer-links .last {margin-right:0}
/* flash home page */
#flashContainer, #flashObject {outline:none}