/* =============================================================================
   Base
   ========================================================================== */

html { overflow-y: scroll; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; min-width: 1000px; }
body, table { margin: 0; font-size: 11px; line-height: 15px; }
body, button, input, select, textarea { font-family: arial, sans-serif; color: #333; }
::-moz-selection { background: #CC00CC; color: #fff; text-shadow: none; } 
::selection { background: #CC00CC; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #333; text-decoration: none; }
a:hover { color: #999; }
a.underline, .underline { text-decoration: underline; }
a:hover, a:active, a:focus { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { margin: 0; }
h1 { font-size: 22px; font-family: "Helvetica Neue", Helvetica, Arial; }
.page-intro h1 { padding-bottom: 8px; font-size: 18px; line-height: 18px; font-weight: normal; }
.oldie .page-intro h1 { font-weight: bold; letter-spacing: -1px; } /* ie8 + below */
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 11px; }
p { margin: 0; }
b, strong { font-weight: bold; }
hr { display: block; margin: 0; padding: 0; line-height: 0; border: 0; }
.ie7 hr, .ie6 hr { margin: -7px 0; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
del, .strikethrough { text-decoration: line-through; }
span.pink { color: #CC00CC; }
span.free-pink { color: #DC3597; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol, dd, dl { margin: 0; padding: 0; }
ul, ol, li { list-style: none; }
ul.bullets li { list-style: disc; margin-left: 16px; } /* bullet list */


/* =============================================================================
   Embedded content
   ========================================================================== */

img { display: block; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } 


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0 0 10px; }
label { cursor: pointer; } 
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; outline: 0; -webkit-border-radius: 0; -webkit-appearance: none; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; } 

/* base text field style */
input[type="text"], input[type="password"], textarea { padding: 3px; height: 14px; border-top: 1px solid #858585; border-bottom: 1px solid #e2e2e2; border-left: 1px solid #c1c1c1; border-right: 1px solid #c1c1c1; background: #fff; }
input[type="text"], input[type="password"] { margin-right: 10px; }
input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover, input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-top: 1px solid #555; border-bottom: 1px solid #d7d7d7; border-left: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1); box-shadow: inset 0 2px 2px rgba(0,0,0,0.1); }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #333; }
input[type="text"].readonly { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; padding: 0; height: auto; margin: 0; cursor: default; }

/* normal selects */
select { line-height: 12px; height: 22px; padding: 2px 0 2px 2px; border-top: 1px solid #858585; border-bottom: 1px solid #e2e2e2; border-left: 1px solid #c1c1c1; border-right: 1px solid #c1c1c1; margin-right: 10px; }

/* labels */
label { display: block; padding-bottom: 4px; line-height: 11px; }
label.checkbox-label, label.radio-label { display: inline-block; padding: 0; }

/* radios + checkboxes */
input[type="radio"] { background: #fff; vertical-align: top; margin-right: 6px; -moz-appearance: none; padding: 0; }
.ie7 input[type="radio"] { margin-right: 1px; margin-top: -2px; }
input[type="checkbox"] { background: #fff; -moz-appearance: none; vertical-align: middle; margin-right: 6px; margin-top: -2px; padding: 0; }

/* webkit overrides */
.webkit select { cursor: pointer; height: auto; -webkit-appearance: none; padding: 4px 23px 4px 3px; border-radius: 0; background: url(images/icon-grey-down-arrow.png) no-repeat right 8px, #fff; }
.webkit input[type="radio"] { -webkit-appearance: none; width: 13px; height: 13px; cursor: pointer; background: url(images/radio.png) no-repeat; }
.webkit input[type="radio"]:hover, .webkit input[type="radio"]:focus { background-position: -35px 0; }
.webkit input[type="radio"]:checked { background-position: -70px 0; }
.webkit input[type="checkbox"] { -webkit-appearance: none; margin-right: 2px; border: 0; cursor: pointer; background: url(images/checkbox.png) no-repeat; width: 14px; height: 14px; margin-top: 0; }
.webkit input[type="checkbox"]:hover, .webkit input[type="checkbox"]:focus { background-position: -35px 0; }
.webkit input[type="checkbox"]:checked { background-position: -70px 0; margin-top: -3px; margin-bottom: 3px; }
.webkit input[type="checkbox"]:disabled { opacity: .4; }


/* =============================================================================
   Tables
   ========================================================================== */

table {border-spacing: 0; border-collapse: collapse; }
td { padding: 0; margin: 0;}


/* =============================================================================
   Jquery UI
   ========================================================================== */

/* layout helpers */
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* autocomplete */
ul.ui-autocomplete { position: absolute; background: #fff; border: 1px solid #999; -moz-border-radius: 0; -webkit-box-shadow: 1px 1px 9px #808080; -moz-box-shadow: 1px 1px 9px #808080; box-shadow: 1px 1px 9px #808080; z-index: 999999 !important; }
.ui-autocomplete .ui-menu-item a { cursor: pointer; color: #333; font-size: 11px; line-height: 18px; display: block; padding: 0 5px; }
.ui-autocomplete .ui-menu-item a.ui-state-active, .ui-autocomplete .ui-menu-item a.ui-state-hover, .ui-autocomplete .ui-menu-item a.ui-state-focus { background: #CC00CC; color: #fff; }


/* =============================================================================
   Error messaging
   ========================================================================== */
   
.error-message, .warning-message, .success-message, .field-error { line-height: 15px; color: #C0C; }
.error-message a, .warning-message a, .success-message a, .field-error a { color: #C0C; text-decoration: underline; }
.error-message a:hover, .warning-message a:hover, .success-message a:hover, .field-error a:hover { color: #333; }
input.error, select.error, textarea.error { border: 1px solid #C0C !important; }
.field-error { display: none; }


/* =============================================================================
   Page Components
   ========================================================================== */

.color1 { color: #588e1e; }
.upper { text-transform: uppercase; }

.copy-component,
.banner-component { margin-left: 17px; }

.copy-component td { vertical-align: top; }
.copy-component .product-item-holder, .copy-component .product-item { width: 135px; }
.copy-component .product-item { display: block; height: auto; margin: 0; float: none; }
.copy-component .product-item .product-image { height: 150px; }
.copy-component td.img-left img, .copy-component .product-item-holder.left { padding-right: 30px; }
.copy-component td.img-right img, .copy-component .product-item-holder.right { padding-left: 30px; }
.copy-component h3, .copy-component p, .copy-component ol, .copy-component ul { padding-bottom: 11px; }
.copy-component h3 { font-size: 11px; }
.copy-component p:last-child, .copy-component ol:last-child, .copy-component ul:last-child { padding-bottom: 0; }
.copy-component ul li, .copy-component ol li { margin-left: 16px; }
.copy-component ul li { list-style: disc; }
.copy-component ol li { list-style: decimal; }

.dotted1, .dotted2 { border: 0; color: #fff; height: 1px; }
.dotted1 { background: url(images/bg-dotted-line.png) 0 0 repeat-x; }
.dotted2 { background: url(images/bg-dotted-line-gray.gif) 0 0 repeat-x; }

/* solid rules */
.solid1, .solid2, .solid3, .solid4, .solid5, .solid6, .solid7, .solid8, .solid9 { border: 0; }
.solid1, .solid2, .solid6 { color: #e8e8e8; background: #e8e8e8; }
.solid3, .solid4, .solid8, .solid9 { background: #000; color: #000; }
.solid5, .solid7 { background: #ccc; color: #ccc; }
.solid1 { height: 8px; }
.solid2 { height: 6px; }
.solid3 { height: 5px; }
.solid4 { height: 3px; }
.solid5 { height: 2px; }
.solid6 { height: 2px; }
.solid7 { height: 1px; }
.solid8 { height: 10px; }
.solid9 { height: 15px; }

/* spacers */
.spacer1, .spacer2, .spacer3, .spacer4, .spacer5, .spacer6, .spacer7, .spacer8, .spacer9, .spacer10, .spacer11, .spacer12 { color: #fff; }
.spacer1 { height: 5px; }
.spacer2 { height: 10px; }
.spacer3 { height: 15px; }
.spacer4 { height: 20px; }
.spacer5 { height: 30px; }
.spacer6 { height: 40px; }
.spacer7 { height: 50px; }
.spacer8 { height: 60px; }
.spacer9 { height: 70px; }
.spacer10 { height: 80px; }
.spacer11 { height: 90px; }
.spacer12 { height: 100px; }

/* flush or indent overrides */
.flush { margin-left: 0; }
.indent { margin-left: 17px; }

.marquee-component { height: 30px; width:100%; overflow: hidden; cursor: default; border-bottom: 1px solid #b2b2b2; text-align: center; position:relative; }
.marquee-component .top-list { top: 0; left: 0; width:100%; position:absolute; }
.marquee-component p { font-size: 12px; line-height: 30px; text-transform: uppercase; }
.marquee-component a.view-all { margin-left: 7px; }
.marquee-component .special { color: #000; }
.marquee-component .label { color: #630231; margin-right: 5px; }

.slideshow.carousel { overflow: hidden; position: relative; }
.slideshow .carousel-next { height: 142px; top: 129px; background-color: rgba(255,255,255,.8); }
.slideshow .carousel-next:hover { background-color: rgba(255,255,255,.9); }
.slideshow .carousel-next .icon { margin-top: 32px; top: auto; position: relative; }
.slideshow .count { display: block; text-align: center; text-indent: 0; font-size: 10px; font-weight: bold; padding-top: 8px; }

.imageComponent {position: relative; display: block;}
.imageComponent img.hover { display: none; position: absolute; top: 0; left: 0;  }
.imageComponent:hover .hover { display: block; }

.row-component .section { float: left; }

.videoPopComponent img {cursor:pointer;}
.videoPopComponent div {display:none;}
.videoComponent h3{margin-bottom: 5px;}

.skuGridComponent {margin-left: 17px;}
.skuGridComponent li {margin:20px 0; float:left;}
.skuGridComponent .product-item.two {margin: 0 72px; width:220px;}
.skuGridComponent .product-item.three {margin: 0 29px; width:185px;}
.skuGridComponent .product-item.wide {width:325px;}
.skuGridComponent .product-item.wide > div {float:left;}
.skuGridComponent .product-item.wide .image-container {width: 145px; position:relative;}
.skuGridComponent .product-item.wide .copy {width: 170px; padding: 0 5px;}
.skuGridComponent .product-item.wide .product-info {width: 170px; padding: 0 5px;}
.skuGridComponent .product-info {margin-bottom:7px; text-align: center;}
.skuGridComponent .product-info .brand{display:block;}
.skuGridComponent .product-info .product-price{display:block;}
.skuGridComponent .product-info .separator{display:none;}
.skuGridComponent .product-info .stars {margin: 0 auto;}
.skuGridComponent.divider .container:first-child {border-top: none;}
.skuGridComponent.divider .container li:first-child {border-left: none;}
.skuGridComponent.divider .container {border-top: 1px solid #CCC;}
.skuGridComponent.divider .container li {border-left: 1px solid #CCC;}

/* =============================================================================
   Cufon font replacement
   ========================================================================== */
   
.didot, .helvetica-light, .matilda { text-indent: -9999em; }
.didot, .helvetica-light { color: #000; }
.didot { text-transform: uppercase; }
.cufon-ready .didot, .cufon-ready .helvetica-light, .cufon-ready .matilda { text-indent: 0; }


/* =============================================================================
   Icons, assign both classes, define position + size in context
   ========================================================================== */
   
.icon { background-image: url(images/sprite-icons.png); display: block; border: 0; overflow: hidden; text-indent: -9999em; }


/* =============================================================================
   Buttons
   ========================================================================== */

.btn, .btn-brd, .btn-arrows { cursor: pointer; margin: 0; padding: 0; display: inline-block; border: 0; font-weight: bold; }
a.btn-disabled { cursor: wait; }

/* standard buttons */
.btn { font-size: 10px; padding: 0 7px; background: #dcdcdc; color: #333; }
a.btn { line-height: 21px; }
button.btn { height: 22px; }
.btn:hover { color: #fff; background: #333; }

/* black buttons */
.btn.btn-black { color: #fff; background: #000; font-weight: normal; font-size: 11px; }
.btn.btn-black:hover { color: #fff; background: #666; }

/* bi buttons */
.btn-bi { background: #fc5167; color: #fff; text-transform: lowercase; font-size: 11px; }
.btn-bi:hover { color: #fff; background: #333; }

/* double arrow buttons */
.btn-arrows { background: transparent; text-align: left; font-size: 9px; line-height: 9px; text-transform: uppercase; color: #777; }
.ie7 .btn-arrows { line-height: 13px; }
.btn-arrows span { font-size: 13px; font-weight: normal; }
.btn-arrows:hover { color: #cb0000; }
.btn-arrows:disabled { cursor: default; color: #d6d6d6; }

/* border buttons */
.btn-brd { padding: 0 5px; font-size: 9px; background: #fff; border: 1px solid #999; color: #777; text-transform: uppercase; font-weight: 700; width: auto; }
a.btn-brd { line-height: 20px; }
button.btn-brd { height: 20px; }
.ie7 button.btn-brd { height: 21px; }
.btn-brd:hover { border: 1px solid #cb0000; color: #cb0000; }
.btn-brd:disabled { cursor: default; color: #d6d6d6; border: 1px solid #d6d6d6; }

/* big red buttons */
.btn-big-red { position: relative; display: inline-block; background: #C00; color: #fff; text-align: center; padding: 5px 9px; line-height: 13px; font-size: 13px; font-weight: normal; border-bottom: 1px solid #8D0000; border-right: 1px solid #8D0000; border-top: 1px solid #D83F3F; border-left: 1px solid #D83F3F; }
.ie7 button.btn-big-red { padding-top: 2px; padding-bottom: 3px; }
.btn-big-red:hover { background: #333; border-bottom: 1px solid #222; border-right: 1px solid #222; border-top: 1px solid #666; border-left: 1px solid #666; }
.btn-big-red:disabled { background: #e6e6e6; color: #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 1px solid #eee; border-left: 1px solid #eee; cursor: default; }
.btn-big-red.btn-add-to-basket, .btn-big-red.btn-buy-the-collection { width: 134px; padding-left: 0; padding-right: 0; }

/* floating buttons */
.buttons button { float: left; margin-right: 10px; }


/* =============================================================================
   Layout
   ========================================================================== */
   
.wrapper { margin: 0 auto; width: 980px; position: relative; padding: 0 10px; }
.flame { display: none; position: absolute; background: url(images/flame.png) no-repeat; width: 90px; height: 616px; }
.flame-top { top: 260px; left: -90px; }
.flame-bot { bottom: 40px; right: -90px; }
.ie7 .wrapper { background: #fff; }
.wrapper .cover { display: none; background: #fff; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9998; }
.wrapper.jcpenney { z-index: 9998; background: #fff; padding-top: 10px; }
.content { min-height: 370px; margin-top: 10px; padding: 0; z-index: 1; background: url("/images/bg-light-gray-line.png") repeat-y 195px 0; }
.content.no-sidebar { background: none; }
.maincontent { float: right; width: 777px; z-index: 2; }
.maincontent-content { width: 760px; margin-left: 17px; }
/* sidebar */
.sidebar { float: left; width: 203px; }
.sidebar.empty { height: 10px }
.sidebar-content { width: 183px }


/* =============================================================================
   Masthead
   ========================================================================== */

.masthead { margin-top: 34px; position: relative; height: 87px; }
.site-search { width: 210px; margin: 33px 0; float: left; }
.site-search .site-search-field { width: 166px; float: left; margin-right: 0; padding: 0 10px; height: 18px; line-height: 18px; color: #555; }
.site-search .site-search-field, .site-search .site-search-field:hover, .site-search .site-search-field:focus { border-right: 0; }
.site-search .site-search-field:hover, .site-search .site-search-field:focus { color: #000; }
.site-search .icon { background-position: -31px -24px; width: 22px; height: 20px; }
.site-search .icon:hover { background-position: -53px -24px; }
.logo { width: 560px; padding-top: 26px; float: left; text-align: center; }
.logo a { display: inline-block; }
.promo-area { width: 210px; height: 87px; line-height: 87px; float: right; text-align: right; }
.promo-area img { display: inline; max-width: 210px; max-height: 60px; }


/* =============================================================================
   Top Navigation
   ========================================================================== */
   
.nav-bar { position: relative; z-index: 998; padding-bottom: 7px; border-bottom: 1px solid #B2B2B2; }
.navigation { position: relative; margin-left: -7px; width: 987px; }
.navigation li { cursor: pointer; position: relative; float: left; display: block; margin-right: 4px; }
.navigation ul { -webkit-box-shadow: 2px 4px 6px rgba(0,0,0,.3); -moz-box-shadow: 2px 4px 6px rgba(0,0,0,.3); box-shadow: 2px 4px 6px rgba(0,0,0,.3); z-index: 9999; padding: 0 0 5px; position: absolute; top: 26px; left: 0; display: none; background-color: #fff\9; background-image: -webkit-gradient(linear, center top, center bottom, from(#fff), to(rgba(255,255,255,.91))); background-image: -webkit-linear-gradient(top, #fff, rgba(255,255,255,.91)); background-image: -moz-linear-gradient(top, #fff, rgba(255,255,255,.91)); }
.oldie .navigation ul { border: 1px solid #e2e2e2; border-top: 0; background: #fff; } /* ie8 + below */
.navigation ul li { position: relative; font-size: 11px; font-family: 'Helvetica Neue', Helvetica, Arial; margin: 0; padding: 0; float: none; }
.navigation ul li a { position: relative; display: block; padding: 4px 7px; color: #000; text-transform: uppercase; white-space:nowrap; }
.navigation ul li a:hover { background: #000; color: #fff; }
.navigation > li:hover { -webkit-box-shadow: 2px 3px 6px rgba(0,0,0,.3); -moz-box-shadow: 2px 3px 6px rgba(0,0,0,.3); box-shadow: 2px 3px 6px rgba(0,0,0,.3); }
.navigation > li > a { color: #fff; background-color: #fff; background-image: url(images/sprite-header-footer.png); height: 25px; border: 1px solid #fff; border-bottom: 0; }
.oldie .navigation > li.current > a, .oldie .navigation > li > a:hover { border-color: #e2e2e2; } /* ie8 + below */
.navigation .nav1 > a { background-position: 6px 2px; width: 58px; } /* makeup */
.navigation .nav2 > a { background-position: -56px 2px; width: 65px; } /* skincare */
.navigation .nav3 > a { background-position: -126px 2px; width: 75px; } /* fragrance */
.navigation .nav4 > a { background-position: -205px 2px; width: 79px; } /* bath & body */
.navigation .nav5 > a { background-position: -289px 2px; width: 37px; } /* hair */
.navigation .nav6 > a { background-position: -332px 2px; width: 126px; } /* tools & accessories */
.navigation .nav7 > a { background-position: -463px 2px; width: 36px; } /* men */
.navigation .nav8 > a { background-position: -504px 2px; width: 42px; } /* gifts */
.navigation .nav9 > a { background-position: -551px -18px; width: 70px; } /* solutions */
.navigation .nav9 > a:hover { background-position: -551px 2px; } 
.navigation .nav10 > a { background-position: -627px -18px; width: 69px; } /* favorites */
.navigation .nav10 > a:hover { background-position: -627px 2px; } 
.navigation .nav11 > a { background-position: -701px -18px; width: 53px; } /* trends */
.navigation .nav11 > a:hover { background-position: -701px 2px; } 
.navigation .nav12 > a { background-position: -759px -18px; width: 51px; } /* advice */
.navigation .nav12 > a:hover { background-position: -759px 2px; } 
.navigation .nav13 > a { background-position: -818px 0; width: 42px; height: 20px; margin-top: 3px; border: 0; } /* sephora tv */
.navigation .nav13 > a:hover { background-position: -818px -20px; }
.navigation .nav9:hover, .navigation .nav10:hover, .navigation .nav11:hover, .navigation .nav12:hover, .navigation .nav13:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }


/* =============================================================================
   Brand dropdown
   ========================================================================== */
   
.brand-dropdown { position: absolute; top: 3px; right: 0; width: 105px; }
.brand-dropdown .trigger { height: 18px; position: relative; cursor: pointer; padding-left: 9px; line-height: 18px; border-top: 1px solid #858585; border-bottom: 1px solid #E2E2E2; border-left: 1px solid #C1C1C1; border-right: 0; }
.brand-dropdown .trigger .icon { background-position: -31px -64px; width: 22px; height: 20px; position: absolute; right: 0; top: -1px; }
.brand-dropdown.active .trigger .icon, .brand-dropdown .trigger:hover .icon { background-position: -53px -64px; }
.brand-dropdown ul { width: 204px; overflow-x: hidden; -webkit-box-shadow: 2px 4px 6px rgba(0,0,0,.3); -moz-box-shadow: 2px 4px 6px rgba(0,0,0,.3); box-shadow: 2px 4px 6px rgba(0,0,0,.3); padding: 5px 0; border: 1px solid #e2e2e2; background: #fff; display: none; position: absolute; top: 20px; right: 0; height: 278px; overflow: auto; }
.brand-dropdown ul li a { white-space: nowrap; display: block; padding: 0 12px; }
.brand-dropdown ul li.rule { height: 1px; background: #888; padding: 0; margin: 5px 0 5px 12px; width: 144px; }
.brand-dropdown ul li a:hover { color: #fff; background: #000; }


/* =============================================================================
   My Sephora box
   ========================================================================== */
   
.my-sephora { position: fixed; top:0; width:100%; z-index: 9998; background: #000; color: #fff; line-height: 12px; padding: 10px 0; height: 14px; overflow: hidden; }
.my-sephora a { color: #fff; text-transform: uppercase; font-size: 10px; display: inline-block; }
.my-sephora a.underline { text-transform: lowercase; font-size: 11px; margin-left: 4px; }
.my-sephora a.underline:hover { text-decoration: none; }
.my-sephora ul { width: 980px; margin: 0 auto; padding: 0 10px; }
.my-sephora li { position: relative; float: left; display: inline; margin-right: 20px; }
.my-sephora li.right { float: right; }
.my-sephora .sign-in, .my-sephora .sign-in a { font-size: 12px; text-transform: lowercase; margin-left: 0; }
.my-sephora .sign-in span { margin: 0 2px; display: inline-block; }
.my-sephora .sign-in a { font-weight: 700; }
.my-sephora .greeting strong { font-size: 12px; text-transform: capitalize; }
.my-sephora .my-basket { font-size: 10px; font-weight: bold; }
.my-sephora .my-basket .icon { width: 14px; height: 11px; margin-right: 8px; float: left; margin-top: -1px; }
.ie7 .my-sephora .my-basket .icon { float: left; }
.my-sephora .checkout { margin-right: 0; font-weight: bold; }
.my-sephora .checkout a { color: #ff0000; font-size: 11px; display: block; }
.my-sephora .checkout a:hover { text-decoration: underline; }
.my-sephora .checkout .icon { width: 3px; height: 5px; background-position: -77px 0; display: inline-block; margin-left: 3px; }
.ie7 .my-sephora .checkout .icon { margin-top: -8px; }


/* =============================================================================
   Accessibility
   ========================================================================== */
   
.access-links a:focus, .access-links a:active { position: static; left: 0; width: auto; height: auto; overflow: visible; text-decoration: underline; }
.access-anchor { width: 1px; height: 0; font-size: 1px; line-height: 1px; display: block; }


/* =============================================================================
   Breadcrumb
   ========================================================================== */
   
.breadcrumb { margin-top: 10px; min-height: 15px; }
.breadcrumb ul { width: 980px; }
.breadcrumb li { float: left; color: #c00; text-transform: lowercase; padding-left: 13px; background: transparent url("/images/icon-breadcrumb-arrow.png") no-repeat 5px 5px; }
.breadcrumb li:first-child { padding-left: 0; background: none; }
.breadcrumb li a { font-weight: 400; display: block; color: #000; }
.breadcrumb li.current a { color: #000; background: none; padding-right: 0; }
.breadcrumb li a:hover { color: #999; text-decoration: none; }
.breadcrumb li.view-all { float: right; }
.breadcrumb li.view-all a { margin: 0; }


/* =============================================================================
   Carousels
   ========================================================================== */
   
.carousel, .tv-carousel { overflow: hidden; position: relative; left: 0; top: 0; zoom: 1; width: 100%; }
.carousel ul, .tv-carousel ul { width: 99999em; position: relative; z-index: 2; }
.carousel ul li, .tv-carousel ul li { float: left; }
.carousel-see-more { position: absolute; right: 0; top: 20px; z-index: 4; }
.carousel-see-more a { font-size: 10px; }
.carousel-next, .carousel-prev { text-indent: -9999em; display: block; width: 18px; height: 100%; overflow: hidden; position: absolute; z-index: 3; cursor: pointer; top: 0; background: #fff url("/images/btn-carousel-arrows.gif") 0 45% no-repeat; }
.carousel-next { right: 0; background-position: -10px 45%; }
.carousel-prev { left: 0; background-position: 0 45%; }
.carousel-next:hover { background-position: -50px 45% }
.carousel-prev:hover { background-position: -40px 45% }
.carousel-prev:hover { background-position: -40px 45% }
.carousel-prev.disabled, .carousel-next.disabled { cursor: default; }
.carousel-next.disabled { background-position: -90px 45% }
.carousel-prev { background-position: 0 45% }
.carousel-prev.disabled { background-position: -80px 45% }
.product-row a.view-all { position: absolute; top: 15px; right: 0;}
.product-row div.view-all { height: 20px }
.product-row div.view-all a { float:right; }


/* =============================================================================
   Product grid, product item
   ========================================================================== */

.product-grid, .product-row { position: relative; }
.product-grid .product-item { height: 312px; }
.product-row h2 { padding: 10px 0 10px 5px; color: #000; display: block; font-size: 13px; line-height: 13px; font-weight: normal; margin: 8px 0; position: relative;}
.product-row h2.matilda { text-transform: lowercase; }
.product-item {margin: 0 0 0 35px; font-size: 10px; line-height: 14px; float: left; display: inline; overflow-y: hidden; position: relative; width: 145px;}
.carousel .product-item { float: none; display: block; }
.product-item .product-image { position: relative; z-index: 1; display: block; text-align: center; }
.product-item .product-image img { display: inline; }
.new { text-align: center; display: block; font-size: 11px; line-height: 12px; letter-spacing: 1px; color: #7a2a81; }
.product-item .new { padding: 15px 0; }
.product-item .product-info { font-weight: 400; display: block; }
.separator { display: inline-block; margin: 0 2px; color: #ccc; }
.product-item a { display: block; color: #333; }
.product-item a:hover { text-decoration: none; cursor: pointer; }
.product-item a:hover .name { text-decoration: underline }
.product-item .brand { text-transform: uppercase }
.sku-price, .product-price { font-weight: 700; }
.product-item .product-price { margin-bottom: 11px; }
.sale .list-price, .product-price .prediscount-price { text-decoration: line-through; color: #666; margin-right: 2px; }
.sale-price, .product-price .discounted-price { color: #c00 }
.value-price { font-weight: normal; }
.stars, .stars span { display: block; width: 55px; height: 11px; overflow: hidden; text-indent: -9999em; background: url("/images/icon-star-sm.png") 0 -11px repeat-x; }
.stars span { background-position: 0 0 }
.product-item .flags { display: block; font-size: 9px; color: #999; font-weight: 700; }
.product-item .beautyinsider { position: absolute; text-indent: -9999em; overflow: hidden; top: 0; left: -16px; width: 12px; height: 70px; background: url("/images/logo-beautyinsider-product-grid.gif") no-repeat; }
.product-item .product-image img.seal { z-index: 2; position: absolute; top: 0; left: 5px; }
.product-item .stars, .product-item .flags { margin-top: 6px }


/* =============================================================================
   Pagination
   ========================================================================== */
   
.pagination { position: relative; padding: 0 0 30px 0; }
.pagination.bottom { clear: both; width: 757px; border-top: 2px solid #ebebeb; margin-left: 20px; padding: 14px 0 0; }
.pagination .page-numbers,
.pagination .sort-by,
.pagination .view { float: right; position: relative; margin-left: 20px; }
.pagination label { display: inline-block; text-align: right; margin-right: 3px; font-weight: 700; padding: 0; }
.pagination select { margin-top: -2px; margin-right: 0; }
.pagination .page-numbers { font-size: 11px; line-height: 11px; margin-top: 2px; cursor: default; }
.pagination .page-numbers a { font-weight: normal; padding: 0 5px; }
.pagination .page-numbers a:hover { text-decoration: none; color: #999; }
.pagination .page-numbers li { float: left; display: block; position: relative; }
.pagination .page-numbers li.selected { padding: 0 5px; color: #cc0000; font-weight: bold; }
.pagination .page-numbers .prev a,
.pagination .page-numbers .next a { display: block; margin-top: 1px; line-height: 8px; width: 4px; height: 8px; overflow: hidden; background: url("/images/icon-prev-next.png") no-repeat 4px 0; text-indent: -9999em; }
.webkit .pagination .page-numbers .prev a, 
.webkit .pagination .page-numbers .next a { margin-top: 2px; }
.pagination .page-numbers .next a { background-position: -9px 0; padding-right: 0; }
.pagination .page-numbers .next a:hover { background-position: -9px -8px; }
.pagination .page-numbers .prev a:hover { background-position: 4px -8px; }
.total-items { padding: 4px 0; text-align: right; }


/* =============================================================================
   Bottom banner
   ========================================================================== */
   
.bot-banner { width: 760px; padding: 0; margin: 0 0 0 17px; }
.bot-banner.three-column .inner,
.bot-banner.two-column .inner,
.bot-banner.one-column .inner { border-top: 6px solid #e8e8e8; color: #666; margin: 0; padding: 0; float: left; }
.bot-banner.three-column div.inner { width: 236px }
.bot-banner.two-column .inner { width: 367px }
.bot-banner.one-column .inner { width: 760px; height: 254px; }
.bot-banner p { margin: 0; letter-spacing: -0.025em; }
.bot-banner.three-column p,
.bot-banner.one-column p { margin: 4px 35px 0 0 }
.bot-banner.two-column p { margin: 4px 15px 0 0 }
.bot-banner a,
.bot-banner a:visited { font-weight: bold; color: #922e9b; text-transform: lowercase; background: url("/images/icon-arrow-purple.gif") no-repeat 100% 50%; padding: 0 7px 0 0; }
.bot-banner a:hover,
.bot-banner a:active { text-decoration: none; color: #999; outline: none; }
.bot-banner a.image { background-image: none; border: none; padding: 0; }
.bot-banner .column .inner { margin: 0 0 0 26px }
.bot-banner .first .inner { margin: 0 }


/* =============================================================================
   Product description + info rows
   ========================================================================== */
   
.product-description p { padding-top: 2px }
.info-row { color: #666; line-height: 13px; font-size: 9px; }
.info-row .label { display: inline-block; margin-right: 2px; text-transform: uppercase; margin-left: 6px; padding-left: 8px; border-left: 1px solid #ccc; }
.info-row .s-c .label, .info-row .s-c-f .label { display: none; }
.info-row span:first-child .label { margin-left: 0; padding: 0; border: 0; }
.info-row .units { font-size: 7px; text-transform: uppercase; }
.product-description .supp-info { padding-top: 10px; color: #000; }
.product-information .product-detail .supp-info h2 { font-size: 12px; font-weight: bold; color: #000; padding-bottom: 2px; }
.product-description .supp-info ul li { list-style: disc; margin-left: 18px; }


/* =============================================================================
   Sku selectors
   ========================================================================== */
   
.sku-selector { width: 446px; padding-bottom: 10px; }
.sku-selector-content { padding-top: 12px; width: 420px; }
.sku-selector.scrollable { height: 110px; overflow: auto; border: 1px solid #CCC; width: 440px; padding: 0; margin-top: 13px; }
.sku-selector.scrollable .sku-selector-content { margin: 0 auto; padding: 2px 0; }
.sku-selector.scrollable-rectangular { height: 110px; overflow: auto; border: 1px solid #CCC; width: 440px; padding: 0; margin-top: 13px; }
.sku-selector.scrollable-rectangular .sku-selector-content { margin: 0 auto; padding: 10px 0; width: 405px; }
.sku-selector a.product-thumb { float: left; display: block; padding: 1px; border: 2px solid #FFF; }
.sku-selector .product-thumb:hover { border: 2px solid #999; text-decoration: none; cursor: pointer; }
.sku-selector .product-thumb.current { border: 2px solid #000; text-decoration: none; cursor: text; }
.sku-selector a.product-thumb img { margin: 0 }
.sku-selector.border a.product-thumb img { border: 1px solid #d8d8d8 }
.sku-selector.text-selector a.product-thumb span.text-border,
.sku-selector.swatch-txt a.product-thumb span.text-border { display: block; padding: 4px 6px; color: #333; font-size: 11px; border: 1px solid #d8d8d8; text-align: center; }
.sku-selector.text-selector a.product-thumb span.text-border span,
.sku-selector.swatch-txt a.product-thumb span.text-border span { display: block; margin: 0; padding: 0; white-space: nowrap; }

/* value price collection */
.value-price .ancillary-products .ancillary-row h2,
.value-price .collection-products .collection-row h2 { padding-top: 2px }


/* =============================================================================
   Checkout basket -- on quick looks + product pages
   ========================================================================== */
   
.checkout-basket { font-size: 11px; line-height: 11px; }
.checkout-basket .not-avail-canada, .checkout-basket .out-of-stock, .checkout-basket .currently-on-your-list, .checkout-basket .qualify p { padding: 2px 0 6px; }
.checkout-basket .out-of-stock { padding-bottom: 10px; color: #C0C; font-weight: bold; }
.checkout-basket .btn-big-red { margin-bottom: 3px; }
.checkout-basket div { padding-bottom: 4px; }
.currently-on-your-list span, .checkout-basket .currently-on-your-list span { padding-left: 8px; background: url("/images/icon-red-check.png") no-repeat 0 2px; font-size: 9px; line-height: 9px; color: #666; font-weight: bold; text-transform: uppercase; }
.checkout-basket .bi-exclusive { color: #CC3399; position: absolute; top: -18px; left: 0; }
.checkout-basket .qualify a { font-weight: bold; color: #000; text-decoration: underline; }
.checkout-basket .qualify a:hover { color: #999 }
.checkout-basket .qualify { color: #666; display: block; line-height: 14px; }


/* =============================================================================
   Help links/icons
   ========================================================================== */
   
div.help-link { position: relative; float: left; }
div.help-link .info-pop { position: absolute; top: -40px !important; left: 20px !important; }
a.help-icon { background: url("/images/btn-help-icon.png") no-repeat 0 -16px; display: block; width: 16px; height: 16px; overflow: hidden; text-indent: -999em; border: none; cursor: pointer; }
a.help-icon:hover { background-position: 0 0; }
.column.with-help-link a.help-icon { float: left; }


/* =============================================================================
   Side navigation
   ========================================================================== */
.sidenav { padding-top: 4px; padding-bottom: 10px; border-bottom: 3px solid #000; border-top: 3px solid #000; position: relative; }
.sidenav h2 { font-size: 11px; line-height: 11px; padding: 5px 0 8px 0; display: block; font-weight: bold; text-transform: uppercase; }
.sidenav h3 { line-height: 19px; font-weight: bold; font-size: 11px; padding-top: 7px; background: url("/images/bg-dotted-line.png") repeat-x top left; margin-top: 7px; }
.sidenav.two { border-top: 0 }
.sidenav ul li { display: block; line-height: 19px; font-size: 11px; color: #c00; }
.sidenav ul.clear-list li span { display: inline-block; width: 150px; }
.sidenav ul a { color: #000; font-weight: normal; }
.sidenav ul a:hover { color: #999999; text-decoration: none; }
.sidenav ul ul { margin: 0 0 0 12px }
.sidenav li strong { color: #000 }
.sidenav li.title { padding-top: 5px }


/* =============================================================================
   Inline basket
   ========================================================================== */
   
.inline-basket-wrapper { visibility: hidden; position: fixed; right: 10px; top: 34px; z-index: 999; }
.inline-basket { position: relative; -webkit-box-shadow: 3px 3px 9px rgba(0,0,0,0.1); -moz-box-shadow: 3px 3px 9px rgba(0,0,0,0.1); box-shadow: 3px 3px 9px rgba(0,0,0,0.1); background: #fff; width: 338px; color: #666; font-size: 10px; }
.oldie .inline-basket { border: 1px solid #e2e2e2; border-top: 0; } /* ie8 + below */
.inline-basket-message { font-size: 11px; line-height: 15px; border-top: 1px solid #000; display: none; }
.inline-basket-message .message-content, .inline-basket-content, .inline-basket-message .error-message { padding: 12px 26px; }
.inline-basket-content { padding-top: 14px; }
.inline-basket h2 { font-size: 16px; margin-bottom: 9px; color: #333; font-weight: normal; }
.inline-basket-products, .inline-basket .product-row, .inline-basket .actions { background: url("/images/bg-dotted-line.png") repeat-x top left }
.inline-basket .product-row { padding: 12px 0; position: relative; }
.inline-basket .product-description { width: 180px; float: left; }
.inline-basket .product-image { float: left; width: 60px; }
.inline-basket h3, .inline-basket .product-price { font-weight: bold; font-size: 10px; line-height: 13px; padding-bottom: 1px; color: #333; display: block; }
.inline-basket h3 .brand { text-transform: uppercase }
.inline-basket .product-price { width: 70px; position: absolute; right: 0; top: 12px; text-align: right; }
.inline-basket .close { width: 9px; height: 9px; position: absolute; right: 12px; top: 12px; background-position: -64px -13px; cursor: pointer; }
.inline-basket .close:hover { background-position: -73px -13px }
.inline-basket-message h4 { color: #dc3597; font-size: 12px; font-weight: bold; }
.inline-basket .actions { padding: 12px 0 0; }
.inline-basket .actions a { float: left; display: inline-block; text-transform: uppercase; font-weight: bold; padding: 2px 6px; color: #fff; }
.inline-basket .actions .btn-checkout, .inline-basket .actions .btn-my-list { float: right; }
.inline-basket .btn-checkout .icon, .inline-basket .btn-my-list .icon { float: right; margin-top: 5px; margin-left: 3px; width: 3px; height: 5px; background-position: -65px 0; display: inline-block; }
.inline-basket .btn-checkout { background: #cc0000; border-bottom: 1px solid #8d0000; border-right: 1px solid #8d0000; }
.inline-basket .btn-my-list { background: #333; border-bottom: 1px solid #222; border-right: 1px solid #222; }
.inline-basket .btn-my-list:hover { background: #000; border-color: #000; }
.inline-basket .btn-continue-shopping { background: #a1a1a1; border-bottom: 1px solid #666; border-right: 1px solid #666; }
.inline-basket .btn-continue-shopping .icon { float: left; margin-top: 5px; margin-right: 3px; width: 3px; height: 5px; background-position: -68px 0; display: inline-block; }
.inline-basket .btn-continue-shopping:hover, .inline-basket .btn-checkout:hover { background: #333; border-color: #222; }
.ie7 .inline-basket .actions .icon { display: none; }


/* =============================================================================
   Popups/popovers/overlays, whatever...
   ========================================================================== */

#closeMask, #mask-white { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999998 } /* popup mask */
#mask-white { background: #fff; -ms-filter: alpha(opacity=75); filter: alpha(opacity=75); opacity: .75; }
.popup, .popup-small { display: none; background: #fff; z-index: 999999999; position: absolute; -webkit-box-shadow: 3px 3px 9px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 9px rgba(0,0,0,0.3); box-shadow: 3px 3px 9px rgba(0,0,0,0.3); }
.oldie .popup, .oldie .popup-small { border: 5px solid #e2e2e2; } /* ie8 + below */
.popup > .container { background: #fff; position: relative; }
.popup .popup-content { width: 520px; position: relative; top: 0; left: 0; background: #fff; padding: 24px; }
.popup.loading > .container { background: url("/images/loader_black_155_V2.gif") no-repeat center center #fff; }
.popup-small .popup-content { width: 230px }
#content-component .close { right: 7px; top: 7px; }
.popup .close { cursor: pointer; position: absolute; right: 24px; top: 24px; background-position: -75px -22px; width: 15px; height: 15px; }
.popup .close:hover { background-position: -75px -37px }
.popup h2 { border-bottom: 6px solid #E5E5E5; color: #000000; font-weight: normal; margin-bottom: 10px; padding: 0 35px 10px 0; }
.pop-scroll { margin-bottom: 10px; height: 490px; overflow-y: auto; overflow-x: hidden; position: relative; }
.popup-small .pop-scroll { height: 230px }
.popup h3 { font-size: 12px; font-weight: bold; line-height: 18px; }
.popup p, .popup ul { margin-bottom: 10px }
.popup p:last-child { margin-bottom: 0 }
.pop-scroll p { padding-right: 15px }
.pop-scroll table { margin-right: 15px }
.popup div.pink,
.popup dl.pink { background-color: #FFF6F7; padding: 10px; }
.popup span.requirements { display: block; position: absolute; right: 50px; top: 24px; color: #666; font-size: 11px; }


/* =============================================================================
   Fieldset columns/forms
   ========================================================================== */
   
fieldset.two-column .column { width: 250px; float: left; }
fieldset.two-column .column select, fieldset.two-column .column input[type="text"], fieldset.two-column .column input[type="password"] { width: 228px; }
.webkit fieldset.two-column .column select { width: 236px; }
fieldset.two-column .column.with-help-link select, fieldset.two-column .column.with-help-link input[type="text"], fieldset.two-column .column.with-help-link input[type="password"] { width: 205px; float: left; }
.webkit fieldset.two-column .column.with-help-link select { width: 213px; }
#email.readonly { width: 300px; }


/* =============================================================================
   Sign in, embedded and popover shared styles
   ========================================================================== */
   
div.signin h1 { background: url("/images/hd-signin.png") no-repeat 0 0; width: 118px; height: 46px; text-indent: -999px; overflow: hidden; margin: 40px 0; }
.signin input[type="text"], .signin input[type="password"] { width: 198px; float: left; }
.signin label { display: block; padding-bottom: 4px; }
.signin-returning { border-top: 2px solid #000; background: transparent url("/images/bg-dotted-line.png") repeat-x left bottom; padding-bottom: 10px; }
.signin-returning p { font-size: 10px; line-height: 10px; color: #666; line-height: 12px; padding-top: 3px; }
.signin a { font-size: 10px; color: #666; text-decoration: underline; }
.signin a:hover { color: #000 }
.signin h2, .signin h3 { font-weight: normal; font-size: 18px; line-height: 18px; margin: 0; padding: 15px 0 7px 0; }
.signin-returning .email, .signin-returning .password, .signin-returning .btn-sign-in { float: left; }
.signin-returning p, .signin-new p { clear: both; }
.signin-new { width: 492px }
.signin-new p { font-size: 10px; line-height: 12px; color: #333; padding-top: 3px; }
.signin-new .email-used { width: 400px; padding-bottom: 15px; }
.signin-new .email-used p { font-size: 11px; line-height: 13px; color: #000; padding-top: 3px; }
.signin-new .email-used p .not-you { display: inline-block; margin-left: 10px; }
.signin-new .birthdate { float: left; width: 240px; }
.signin-new .birthdate label { display: none }
.signin-new .birthdate h3 { float: left; font-size: 10px; line-height: 24px; color: #000; margin-right: 10px; font-weight: bold; }
.signin-new .birthdate select { width: 80px; color: #333; font-size: 10px; line-height: 12px; margin-left: 5px; margin-top: 3px; }
.signin-new .submit-birthdate { float: left; padding-top: 2px; }

/* sign in popup overrides */   
#signin-pop h2 { width: auto; height: 60px; margin: 0; padding: 0; border-bottom: 2px solid #000; background: url("/images/hd-signin.png") no-repeat scroll 0 0 transparent; overflow: hidden; text-indent: -999px; }
#signin-pop .signin-returning { border-top: 0; }


/* =============================================================================
   Psuedo sidebar, right sidebar
   ========================================================================== */
   
.with-pseudo-sidebar { background-image: url("/images/bg-both-column-lines.png") }
.with-pseudo-sidebar .maincontent-content { border-top: 8px solid #fff }
.with-right-sidebar .maincontent-content { width: 580px; padding-right: 19px; border-right: 1px solid #aaa; float: left; }
div.right-sidebar,
div.right-sidebar .sidebar-content,
.pseudo-sidebar { width: 160px }
.pseudo-column { width: 580px; float: left; position: relative; }
div.indent .pseudo-column { width: 570px }
.pseudo-sidebar,
.right-sidebar { float: right }
div.right-sidebar .block,
.pseudo-sidebar .promo { width: auto; float: none; margin: 0 0 0 17px; padding-bottom: 10px; }
div.right-sidebar .block { background: url("/images/bg-dotted-line.png") bottom left repeat-x; margin-bottom: 10px; }
#promo-area-3 { padding-top: 10px; }


/* =============================================================================
   Footer
   ========================================================================== */
   
.footer { padding-bottom: 25px; }
.footer a { text-decoration: none; font-size: 11px; }
.footer .btn-submit { background-position: -31px -44px; width: 22px; height: 20px; display: inline-block; }
.footer .btn-submit:hover { background-position: -53px -44px; }
.footer-banner { padding: 30px 0 0 0 }

/* email signups + store locator search */
.footer-actions { padding: 30px 0 3px 0 }
.footer-actions .email-signup { width: 480px; float: left; }
.footer-actions .store-locator { float: right; width: 361px; }
.footer-actions label { display: block; float: left; background-image: url(images/sprite-header-footer.png); padding-bottom: 0; margin-top: 4px; height: 24px; }
.footer-actions .email-signup label { background-position: 0 -24px; width: 187px; }
.footer-actions .store-locator label { background-position: -194px -24px; width: 174px; }
.footer-actions input[type="text"] { width: 152px; height: 13px; float: left; margin-right: 5px; color: #999; }
.footer-actions input[type="text"]:focus { color: #333; }

/* footer nav */
.footer-nav { padding-top: 10px; padding-bottom: 14px; border-top: 5px solid #000; border-bottom: 1px solid #ccc; position: relative; min-height: 75px }
ul.piano-keys { width: 32px; list-style: none; position: absolute; /* relative to footer-nav */ top: 11px; right: 0; }
ul.piano-keys li { display: block; width: 31px; height: 11px; overflow: hidden; font-size: 0; line-height: 0; padding: 0; margin: 0; }
ul.piano-keys li.black { background-color: #000 }
.footer-links ul { list-style: none; width: 244px; border-left: 1px solid #9D9D9D; float: left; margin: 0; padding: 0; min-height: 78px; height: auto !important; height: 78px; }
.footer-links ul li { margin: 0 10px; padding: 0 0 7px 0; line-height: 10px; }
.footer-links ul li a:hover { text-decoration: none; color: #999; }
.footer-links ul li.last { padding-bottom: 0 }

/* localization */
.footer .localization-social { border-bottom: 1px solid #cccccc }
.footer .localization { padding-top: 11px; float: left; }
.footer .localization li { float: left; display: block; font-size: 11px; line-height: 11px; text-transform: uppercase; }
.footer .localization li.separator.icon { background-position: -33px 0; width: 1px; height: 11px; margin: 0 12px; }
.footer .localization a { color: #666; }
.footer .localization a:hover { color: #000; }
.footer .localization a.selected { text-decoration: none; font-weight: bold; text-decoration: underline; color: #000; }
.footer .localization a .icon { float: left; margin-top: 1px; width: 19px; height: 11px; margin-right: 7px; }
.footer .localization li.us-site .icon { background-position: -14px 0; }
.footer .localization li.ca-site .icon { background-position: -34px 0; }

/* facebook like */
.footer .facebook-like { float: right; position: relative; width: 362px; height: 30px; margin-top: 6px; }

/* copyright */
.footer .copyright { font-size: 10px; text-align: center; padding: 12px 0; color: #666; }


/* =============================================================================
   Quick look
   ========================================================================== */
   
a.qlook { font-size: 9px; width: 100%; background: #000; color: #fff; text-transform: uppercase; font-weight: bold; text-align: center; padding: 3px 0; line-height: 10px; position: absolute; top: 119px; left: 0; z-index: 4; display: none; }
a.qlook:hover { background: #666; text-decoration: none; }
.ancillary-row a.qlook { top: 66px; width: 62px; }
.rewards a.qlook, .birthday a.qlook { top: 80px; width: 100%; left: 0; }
.quick-look { background: #fff; position: absolute; top: -9999em; left: -9999em; }
.quick-look > .container { width: 480px; min-height: 230px; }
.quick-look .product-description .units { font-size: 7px }
.quick-look .popup-content { display: none; width: auto; padding-left: 0; padding-right: 0; }
#ql-size-test .popup-content { display: block; }
.quick-look h2 { color: #000; font-size: 12px; line-height: 17px; width: 232px; border: 0; padding: 0 0 8px 0; font-weight: bold; margin: 0; }
.quick-look h2 a { color: #000; }
.quick-look h2 a:hover .product-name { text-decoration: underline; }
.quick-look h2 .brand { text-transform: uppercase }
.quick-look h2 .value { font-weight: normal; font-size: 11px; }
.quick-look .color { height: 30px }
.quick-look a:hover { text-decoration: none }
.quick-look h2 .separator { margin: 0 3px; }
.quick-look .beauty-insider { position: absolute; top: 28px; left: 17px; text-indent: -9999em; overflow: hidden; width: 12px; height: 70px; }
.quick-look .left-column { float: left; position: relative; display: inline; width: 135px; margin-left: 32px; }
.quick-look .left-column .hero-image { margin-bottom: 18px }
.quick-look .seal { position: absolute; top: 0; left: 0; }
.quick-look .messages { position: relative; height: 43px; font-size: 10px; line-height: 10px; margin-bottom: 10px; color: #666; font-weight: bold; }
.quick-look .messages p.flags { position: absolute; text-align: center; width: 100%; top: 22px; line-height: 13px; left: 0; }
.quick-look .more { line-height: 11px; text-align: center; }
.quick-look .more a { text-decoration: underline; color: #333; font-size: 10px; font-weight: bold; }
.quick-look .more a:hover { color: #999 }
.quick-look .see-more { display: inline-block; text-decoration: underline; font-weight: bold; font-size: 10px; }
.quick-look a.see-more:hover { color: #999 }
.quick-look .product-description { float: left; display: inline; position: relative; width: 256px; margin-left: 30px; color: #666; }
.quick-look .product-rating { padding: 0 0 9px }
.quick-look .product-rating a { font-size: 10px; font-weight: bold; display: inline-block; }
.quick-look .product-rating a .not-rated { color: #999; }
.quick-look .stars { margin: 1px 0 0; float: left; margin-right: 9px; }
.quick-look .product-text { color: #333; padding-bottom: 14px; border-bottom: 1px solid #000; margin-bottom: 13px; }
.quick-look .info-row { font-size: 11px; line-height: 13px; min-height: 30px; }
.quick-look .info-row .contains .label { padding-bottom: 2px }
.quick-look .info-row .contains { padding-bottom: 10px }
.quick-look .info-row .contains ul li { background: url("/images/icon-bullet.png") no-repeat left 5px; padding-left: 10px; margin-left: 6px; font-size: 10px; }
.quick-look .info-row .label { font-size: 9px; }
.quick-look .promo { font-size: 11px; line-height: 14px; padding-bottom: 10px; }
.quick-look .promo span { color: #CC00CC; display: block; font-weight: bold; font-size: 12px; }
.quick-look .promo a { color: #666; text-decoration: underline; }
.quick-look .promo a:hover { color: #000 }
.quick-look .sku-selector { padding: 0 0 15px 0; margin-top: 0; width: 255px; }
.quick-look .sku-selector-content { width: 243px; overflow: hidden; max-height: 74px; position: relative; padding: 0; }
.quick-look .sku-selector.swatch-txt .sku-selector-content { max-height: 66px; overflow: hidden; }
.quick-look .sku-selector.swatch-sq-sm .sku-selector-content { width: 255px; max-height: 86px; }
.quick-look .sku-selector.swatch-sq-lg .sku-selector-content { width: 210px; height: 68px; }
.quick-look .sku-selector.swatch-rect .sku-selector-content { max-height: 89px; }
.quick-look .sku-selector .more { font-weight: bold; text-decoration: underline; color: #333; float: right; margin-right: 2px; margin-top: 1px; }
.quick-look .sku-selector.swatch-sq-sm .more { margin-right: 5px }
.quick-look .sku-selector a.more:hover { color: #999 }
.quick-look .checkout-basket .bi-exclusive { position: relative; top: auto; }
.quick-look .checkout-basket .qualify { line-height: 14px; margin: 0; padding-bottom: 10px; }
.quick-look .checkout-basket .qualify a { text-decoration: underline; font-weight: bold; }
.quick-look .checkout-basket .qualify a:hover { color: #999 }
.quick-look .checkout-basket .reward { font-weight: bold; color: #cc0000; padding-bottom: 9px; }
.quick-look .checkout-basket .button-holder, .quick-look .checkout-basket .out-of-stock { float: left; }
.quick-look .checkout-basket .button-holder { margin-right: 10px; }
.quick-look .checkout-basket .out-of-stock { line-height: 24px; padding: 0; }


/* =============================================================================
   Shipping Details (rollover for header promo area)
   ========================================================================== */

.shipping-details { background: transparent; padding: 0; top: 65px; right: 10px; background-color: #fff\9; background-image: -webkit-gradient(linear, center top, center bottom, from(#fff), to(rgba(255,255,255,.95))); background-image: -webkit-linear-gradient(top, #fff, rgba(255,255,255,.95)); background-image: -moz-linear-gradient(top, #fff, rgba(255,255,255,.95)); }
.shipping-details p, .shipping-details table { font-size: 10px; line-height: 13px; }
.shipping-details .popup-content { width: 220px; padding: 10px; background: transparent; }
.shipping-details .close { top: 10px; right: 10px; }
.shipping-details h2 { padding-top: 2px; padding-bottom: 5px; }
.shipping-details table { width: 100%; line-height: 17px; }
.shipping-details th { width: 33%; text-align: left; text-transform: uppercase; border-bottom: 1px solid #9e9c9d; }
.shipping-details td { border-bottom: 1px solid #e1dfe0; }
.shipping-details p, .shipping-details table { margin-bottom: 6px; }


/* =============================================================================
   Global styles
   ========================================================================== */
   
.exact-match-result { border-bottom: 2px solid #E9E9E9; padding: 10px 0; }
.exact-match-result h2 { color: #000; font-weight: normal; }

/* sidebar blocks */
.block.canada-stores .url,
.block.international-stores li,
.block.more-ways-to-shop li { padding-top: 7px }
.block.canada-stores h3,
.block.international-stores h3,
.block.more-ways-to-shop h3 { padding-bottom: 6px }

/* banners */
.block.sidebar-banners .banner { border: 1px solid #ebebeb; margin-top: 15px; }
.sephora-stores-banner,
.store-banner { padding-bottom: 15px }
.sephora-stores-banner { margin-left: 17px; background: #fff; }
div.right-sidebar .block { padding-bottom: 20px; margin-bottom: 15px; }
div.right-sidebar .block.sidebar-banners { border-top: 3px solid #000; background: none; }

/* more ways to shop */
div.right-sidebar .block.more-ways-to-shop { background: none; margin-bottom: 0; }


/* =============================================================================
   Register popup
   ========================================================================== */
   
.pop-register .join-bi, .pop-register .stay-in-the-know { margin-top: 20px; padding: 0; }
.pop-register .join-bi h2, .pop-register .stay-in-the-know h2 { border: 0; padding: 0; margin-bottom: 6px; }
.join-bi label { display: inline-block; padding: 0; margin-right: 3px; }
.join-bi #birth-year { margin-right: 7px; }
.pop-register a.forgot { float: right; margin-right: 10px; font-size: 10px; color: #666; }
.pop-register p.question { margin: 0 }
.pop-register .birthday label { float: none; display: inline; }
#user-reg-bday-match-popup button { float: left; margin-right: 10px; }
.pop-register #user-reg-step3 { display: none }
#get_informed_zip, #zip { width: 48px; float: none; clear: both; }
.stay-in-the-know h2 { padding-bottom: 8px; }
.stay-in-the-know p { padding-right: 0; float: left; width: 180px; }
.zip-input { float: left; width: 56px; margin-top: -20px; position: relative; display: inline; }
.pop-register .join-bi img.right { margin-right: 0; }
.pop-register .bi-first .join-bi { margin-top: 7px; padding-bottom: 7px; }


/* =============================================================================
   Popup shipping table
   ========================================================================== */
   
.pop-shipping table { margin-bottom: 20px }
.pop-shipping table td,
.pop-shipping table th { border: 1px solid #8a8a8a; border-collapse: collapse; padding: 4px; vertical-align: top; }
.pop-shipping table th { background: #d5d5d5; border-bottom: none; font-weight: bold; }


/* =============================================================================
   BI register popup
   ========================================================================== */
   
.bi-reg-pop .join-bi { background: url("/images/bg-beauty-insider-join.gif") no-repeat scroll 415px -3px }
.bi-reg-pop .title { margin: 14px 0 22px 0 }
.bi-reg-pop .bi-info { float: left; margin-right: 48px; }
.bi-reg-pop .bi-form { float: left; position: relative; }
.bi-reg-pop .bi-form .btn-join-beauty-insider { margin-top: 16px }


/* =============================================================================
   Refill reminder, find in store, email when in stock
   ========================================================================== */
   
.find-in-store .product-row, #email-stock .product-row, .refill-reminder .product-row { padding: 5px 0 14px; width: 100%; border-bottom: 6px solid #E5E5E5; margin-bottom: 8px; margin-left: 0; }
.find-in-store .product-description, #email-stock .product-description, .refill-reminder .product-description { width: 220px; float: left; }
.find-in-store .product-image, #email-stock .product-image, .refill-reminder .product-image { float: left; width: 75px; }
.find-in-store .product-image img, #email-stock .product-image img, .refill-reminder .product-image img { margin-left: 12px }
.find-in-store h3, #email-stock h3, #email-stock .product-price, .refill-reminder h3, .refill-reminder .product-price { font-weight: bold; font-size: 13px; line-height: 18px; color: #000; padding-bottom: 2px; }
.find-in-store h3 .brand, #email-stock h3 .brand, .refill-reminder h3 .brand { text-transform: uppercase }
#email-stock .product-price, .refill-reminder .product-price { width: 65px; float: left; text-align: right; }
.find-in-store select, .find-in-store input, .refill-reminder .schedule input, .refill-reminder .schedule select { float: left }
.find-in-store input.text, .refill-reminder .schedule input.text { width: 225px; margin-right: 10px; }

/* email when in stock */
#email-stock .btn { float: left; margin-right: 10px; }
#email-stock .messages.notice { color: #CC33CC }
#email-stock .messages { padding-bottom: 10px; }
#email-stock .email-me input { float: left; width: 187px; margin-right: 10px; }


/* =============================================================================
   Sku promo popup
   ========================================================================== */
   
.sku-promo .popup-content { width: 738px }
.sku-promo h2 { float: left; margin: 0; border: 0; }
.sku-promo h3 { clear: both; font-size: 11px; color: #666; font-weight: normal; padding-bottom: 10px; }
.sku-promo .error-message { width: 275px; padding-top: 4px; float: left; }
.sku-promo .promo-items { padding-top: 20px; height: 340px; overflow: auto; border-top: 1px solid #d8d8d8; }
.sku-promo .promo-item { width: 177px; height: 210px; padding-bottom: 10px; float: left; }
.sku-promo .promo-item .promo-item-content { width: 157px; margin-left: 15px; }
.sku-promo .promo-item .promo-check { width: 22px; margin-top: 130px; float: left; }
.sku-promo .promo-item .promo-info { width: 135px; padding-bottom: 10px; float: left; position: relative; }
.sku-promo .promo-item .promo-image { width: 135px; padding-bottom: 10px; position: relative; }
.sku-promo .promo-item .promo-description { width: 135px; padding-bottom: 10px; font-size: 10px; line-height: 14px; font-weight: normal; color: #000; }
.sku-promo .promo-item .promo-description .sku { font-size: 10px; font-weight: normal; color: #999; }
.sku-promo .popup-foot { padding: 15px 0 0 0; width: 100%; border-top: 1px solid #d8d8d8; }
.sku-promo .popup-foot .cancel-promo { float: right; padding-top: 5px; }
.sku-promo .popup-foot .add-promo { float: right; /*width: 89px;*/ margin-left: 12px; }

/* sku promo + samples view larger */
.popup-foot button { float: right; }
.popup-foot .btn-no-samples, .popup-foot .btn-cancel { margin-right: 12px; height: 20px; }


/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats */ 
.clearfix:before, .clearfix:after, .container:before, .container:after { content: ""; display: table; }
.clearfix:after, .container:after { clear: both; }
.clearfix, .container { *zoom: 1; }

.clear { clear: both; padding: 0 !important; margin: 0 !important; }
.right { float: right; }
.left, .col { float: left; }


/* ==========================================================================
   iPad
   ========================================================================== */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .flame { display: none !important; }
  .my-sephora a { font-weight: bold; }
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster */
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}