/* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The primary SASS file that imports most of Coastal external and internal SCSS code. NOTE: From SCSS Generated. ----------------------------------------------------------------------- **/ /* ======== TABLE OF CONTENTS ======== 1. EXTERNAL CSS IMPORTS 2. THE COASTAL CONTACTS CSS 3. EXTERNAL STOREFRONT-SPECIFIC IMPORTS 4. INTERNAL STOREFRONT-SPECIFIC IMPORTS ==================================== **/ /* Required partials that provide global variables referenced in SCSS */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: Global reusable styles to ensure consistent layout across pages. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== i. SASS MIXINS 1. SASS GLOBAL VARIABLES 2. SASS GLOBAL MIXINS 2.1 GLOBAL TILE/BOX BORDER & BACKGROUND 2.2 MIXINS FOR COMMON UI REQUIREMENTS ==================================== */ /* _____________________________________________________________________________ 1. SASS GLOBAL VARIABLES _____________________________________________________________________________ */ /* The assets domain name as set in config.rb for each store */ /* Image references */ /* ------------------------------------------------------------------------------------------------------------------ Coastal Contacts * DESCRIPTION: A repository of image references used in SCSS during Compass compilation. NOTE: Please check if a variable for an image has been already created before creating a new one. This SASS partial is meant to be the central place for image references used in CSS. --------------------------------------------------------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. IMAGE FOLDERS MAPPINGS 1.1 Background Images with height and width 1.2 Buttons Paths 1.3 Coastal Paths 1.4 Icons Paths 1.5 Logos Paths 2. IMAGE REFERENCES 1.1 Background Images 1.2 Buttons Images 1.3 Coastal Images (/coastal-images) 1.4 Icon Images 1.5 Logo Images ==================================== */ /* _____________________________________________________________________________ 1. IMAGE FOLDERS MAPPINGS _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Paths ---------------------------------------------------------------------------- */ /* Images under /images/background/ */ /* ---------------------------------------------------------------------------- 1.2 Buttons Paths ---------------------------------------------------------------------------- */ /* Images under /images/buttons/ */ /* ---------------------------------------------------------------------------- 1.3 Coastal Paths ---------------------------------------------------------------------------- */ /* Images under /images/coastal-images/ */ /* Images under /images/coastal-images/account */ /* Images under /images/coastal-images/bml */ /* Images under /images/coastal-images/category */ /* Images under /images/coastal-images/coating */ /* Images under /images/coastal-images/ecp */ /* Images under /images/coastal-images/epay */ /* Images under /images/coastal-images/error */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/navigation */ /* Images under /images/coastal-images/payment */ /* Images under /images/coastal-images/popup */ /* Images under /images/coastal-images/popup/newsletter */ /* Images under /images/coastal-images/popup/style-wizard */ /* Images under /images/coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icons Paths ---------------------------------------------------------------------------- */ /* Images under /images/icons/ */ /* ---------------------------------------------------------------------------- 1.5 Logos Paths ---------------------------------------------------------------------------- */ /* Images under /images/logos/ */ /* _____________________________________________________________________________ 2. IMAGE REFERENCES _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Images with height and width ---------------------------------------------------------------------------- */ /* Weekly Deals background images */ /* ---------------------------------------------------------------------------- 1.2 Buttons Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.3 Coastal Images (/coastal-images) ---------------------------------------------------------------------------- */ /* Images under coastal-images/account/addressPayment */ /* Images under coastal-images/account/autoRefill */ /* Images under coastal-images/account/home */ /* Images under coastal-images/account/lnav */ /* Images under coastal-images/account/orderHistory */ /* Images under coastal-images/account/referFriend */ /* Images under coastal-images/account/registration */ /* Images under coastal-images/account/rx */ /* Images under coastal-images/category */ /* Images under coastal-images/ecp */ /* Images under coastal-images/epay */ /* Images under coastal-images/error */ /* Images under coastal-images/header */ /* Images under coastal-images/navigation */ /* Images under coastal-images/popup/newsletter */ /* Images under coastal-images/popup/style-wizard */ /* Images under coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icon Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.5 Logo Images ---------------------------------------------------------------------------- */ /* _____________________________________________________________________________ 2. SASS GLOBAL MIXINS _____________________________________________________________________________ */ /* Payment Page Color Specific Progress Bar */ /* ------------------------------------------------------------------------- 2.1 GLOBAL TILE/BOX BORDER & BACKGROUND ------------------------------------------------------------------------- */ /* For modern browsers that support box-shadow property & CSS3*/ /* Mainly for IE8 that doesn't support box-shadow property */ /* Mainly for IE7 that doesn't support box-shadow property */ /* ------------------------------------------------------------------------- 2.2 MIXINS FOR COMMON UI REQUIREMENTS ------------------------------------------------------------------------- */ /* Aligns an element vertically (middle). The parent container needs to have - position: relative; NOTE: Supported for IE8 and above. */ /* ------------------------------------------------------------------------------------------------------------------ Coastal Contacts * DESCRIPTION: A repository of image references used in SCSS during Compass compilation. NOTE: Please check if a variable for an image has been already created before creating a new one. This SASS partial is meant to be the central place for image references used in CSS. --------------------------------------------------------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. IMAGE FOLDERS MAPPINGS 1.1 Background Images with height and width 1.2 Buttons Paths 1.3 Coastal Paths 1.4 Icons Paths 1.5 Logos Paths 2. IMAGE REFERENCES 1.1 Background Images 1.2 Buttons Images 1.3 Coastal Images (/coastal-images) 1.4 Icon Images 1.5 Logo Images ==================================== */ /* _____________________________________________________________________________ 1. IMAGE FOLDERS MAPPINGS _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Paths ---------------------------------------------------------------------------- */ /* Images under /images/background/ */ /* ---------------------------------------------------------------------------- 1.2 Buttons Paths ---------------------------------------------------------------------------- */ /* Images under /images/buttons/ */ /* ---------------------------------------------------------------------------- 1.3 Coastal Paths ---------------------------------------------------------------------------- */ /* Images under /images/coastal-images/ */ /* Images under /images/coastal-images/account */ /* Images under /images/coastal-images/bml */ /* Images under /images/coastal-images/category */ /* Images under /images/coastal-images/coating */ /* Images under /images/coastal-images/ecp */ /* Images under /images/coastal-images/epay */ /* Images under /images/coastal-images/error */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/navigation */ /* Images under /images/coastal-images/payment */ /* Images under /images/coastal-images/popup */ /* Images under /images/coastal-images/popup/newsletter */ /* Images under /images/coastal-images/popup/style-wizard */ /* Images under /images/coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icons Paths ---------------------------------------------------------------------------- */ /* Images under /images/icons/ */ /* ---------------------------------------------------------------------------- 1.5 Logos Paths ---------------------------------------------------------------------------- */ /* Images under /images/logos/ */ /* _____________________________________________________________________________ 2. IMAGE REFERENCES _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Images with height and width ---------------------------------------------------------------------------- */ /* Weekly Deals background images */ /* ---------------------------------------------------------------------------- 1.2 Buttons Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.3 Coastal Images (/coastal-images) ---------------------------------------------------------------------------- */ /* Images under coastal-images/account/addressPayment */ /* Images under coastal-images/account/autoRefill */ /* Images under coastal-images/account/home */ /* Images under coastal-images/account/lnav */ /* Images under coastal-images/account/orderHistory */ /* Images under coastal-images/account/referFriend */ /* Images under coastal-images/account/registration */ /* Images under coastal-images/account/rx */ /* Images under coastal-images/category */ /* Images under coastal-images/ecp */ /* Images under coastal-images/epay */ /* Images under coastal-images/error */ /* Images under coastal-images/header */ /* Images under coastal-images/navigation */ /* Images under coastal-images/popup/newsletter */ /* Images under coastal-images/popup/style-wizard */ /* Images under coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icon Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.5 Logo Images ---------------------------------------------------------------------------- */ /* _____________________________________________________________________________ 1. EXTERNAL CSS IMPORTS _____________________________________________________________________________ **/ /* * jQuery UI CSS Framework * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { position: absolute; left: -99999999px; } .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; } /* required comment for clearfix to work in Opera \*/ * html .ui-helper-clearfix { height: 1%; } .ui-helper-clearfix { display: block; } /* end clearfix */ .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* * jQuery UI CSS Framework * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. * To view and modify this theme, visit http://jqueryui.com/themeroller/ */ /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana, Arial, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #aaaaaa; background: white url(../images/external/google/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(../images/external/google/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid lightgray; background: #e6e6e6 url(../images/external/google/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; outline: none; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; outline: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #dadada url(../images/external/google/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; outline: none; } .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; outline: none; } .ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa; background: white url(../images/external/google/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; outline: none; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; outline: none; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight { border: 1px solid #fcefa1; background: #fbf9ee url(../images/external/google/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url(../images/external/google/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; } .ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); background-image: none; } .ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); font-weight: normal; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url(../images/external/google/ui-icons_222222_256x240.png); } .ui-widget-content .ui-icon { background-image: url(../images/external/google/ui-icons_222222_256x240.png); } .ui-widget-header .ui-icon { background-image: url(../images/external/google/ui-icons_222222_256x240.png); } .ui-state-default .ui-icon { background-image: url(../images/external/google/ui-icons_888888_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(../images/external/google/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon { background-image: url(../images/external/google/ui-icons_454545_256x240.png); } .ui-state-highlight .ui-icon { background-image: url(../images/external/google/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(../images/external/google/ui-icons_cd0a0a_256x240.png); } /* positioning */ .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-off { background-position: -96px -144px; } .ui-icon-radio-on { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa url(../images/external/google/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(../images/external/google/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } /* Accordion ----------------------------------*/ .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } .ui-accordion .ui-accordion-li-fix { display: inline; } .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; } .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; } .ui-accordion .ui-accordion-content-active { display: block; } /* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { float: left; font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month-year { width: 100%; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; } .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float: right; } .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ .ui-datepicker-cover { display: none; /*sorry for IE5*/ display/**/: block; /*sorry for IE5*/ position: absolute; /*must have*/ z-index: -1; /*must have*/ filter: mask(); /*must have*/ top: -4px; /*must have*/ left: -4px; /*must have*/ width: 200px; /*must have*/ height: 200px; /*must have*/ } /* Dialog ----------------------------------*/ .ui-dialog { position: relative; padding: .2em; width: 300px; } .ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } .ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width: auto; overflow: visible; } .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } /* Progressbar ----------------------------------*/ .ui-progressbar { height: 2em; text-align: left; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } /* Resizable ----------------------------------*/ .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; z-index: 99999; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } /* Slider ----------------------------------*/ .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } /* Tabs ----------------------------------*/ .ui-tabs { padding: .2em; zoom: 1; } .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; } .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } /* * jQuery UI CSS Framework * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { position: absolute; left: -99999999px; } .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; } /* required comment for clearfix to work in Opera \*/ * html .ui-helper-clearfix { height: 1%; } .ui-helper-clearfix { display: block; } /* end clearfix */ .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Slider ----------------------------------*/ .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 0.3em; height: .75em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .4em; display: block; border: 0; } .ui-slider-horizontal { height: .1em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } /* * jQuery UI CSS Framework * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. * To view and modify this theme, visit http://jqueryui.com/themeroller/ */ /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana, Arial, sans-serif; font-size: 1em; } .ui-widget-content { /*{borderColorContent}*/ background: #ffffff; height: 11px; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default { height: 21px; margin-left: -6px; width: 10px; outline: none; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; outline: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #dadada url(../images/external/price-slider/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; outline: none; } .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; outline: none; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; outline: none; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight { border: 1px solid #fcefa1; background: #fbf9ee url(../images/external/price-slider/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url(../images/external/price-slider/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; } .ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); background-image: none; } .ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); font-weight: normal; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url(../images/external/price-slider/ui-icons_222222_256x240.png); } .ui-widget-content .ui-icon { background-image: url(../images/external/price-slider/ui-icons_222222_256x240.png); } .ui-widget-header .ui-icon { background-image: url(../images/external/price-slider/ui-icons_222222_256x240.png); } .ui-state-default .ui-icon { background-image: url(../images/external/price-slider/ui-icons_888888_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(../images/external/price-slider/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon { background-image: url(../images/external/price-slider/ui-icons_454545_256x240.png); } .ui-state-highlight .ui-icon { background-image: url(../images/external/price-slider/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(../images/external/price-slider/ui-icons_cd0a0a_256x240.png); } /* positioning */ .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-off { background-position: -96px -144px; } .ui-icon-radio-on { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa url(../images/external/price-slider/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(../images/external/price-slider/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } /* Layout -------------------------------- */ .layout-grid { width: 960px; } .layout-grid td { vertical-align: top; } .layout-grid td.left-nav { width: 140px; } .layout-grid td.normal { border-left: 1px solid #eee; padding: 20px 24px; font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; } .layout-grid td.demos { height: 337px; overflow: hidden; } /* Normal -------------------------------- */ .normal h3, .normal h4 { margin: 0; font-weight: normal; } .normal h3 { padding: 0 0 9px; font-size: 1.8em; } .normal h4 { padding-bottom: 21px; border-bottom: 1px dashed #999; font-size: 1.2em; font-weight: bold; } .normal p { font-size: 1.2em; } /* Demos */ .demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li { margin: 0; padding: 0; } .demos-nav { float: left; width: 170px; font-size: 1.3em; } .demos-nav dt, .demos-nav h4 { margin: 0; padding: 0; font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; color: #e87b10; } .demos-nav dt, .demos-nav h4 { margin-top: 1.5em; margin-bottom: 0; padding-left: 8px; padding-bottom: 5px; line-height: 1.2em; border-bottom: 1px solid #F4F4F4; } .demos-nav dd a, .demos-nav li a { border-bottom: 1px solid #F4F4F4; display: block; padding: 4px 3px 4px 8px; font-size: 90%; text-decoration: none; color: #555555; margin: 2px 0; height: 13px; } .demos-nav dd a:hover, .demos-nav dd a:focus, .demos-nav dd a:hover, .demos-nav dd a:focus { background: #f3f3f3; color: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .demos-nav dd a.selected { background: #555; color: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* new styles for demo pages, added by Filament 12.29.08 eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts */ .normal h3.demo-header { font-size: 32px; padding: 0 0 5px; border-bottom: 1px solid #eee; text-transform: capitalize; } .normal h4.demo-subheader { font-size: 10px; text-transform: uppercase; color: #999; padding: 8px 0 3px; border: 0; margin: 0; } .normal a:link, .normal a:visited { color: #1b75bb; text-decoration: none; } .normal a:hover, .normal a:active { color: #0b559b; } #demo-config { padding: 20px 0 0; } #demo-frame { float: left; width: 540px; height: 380px; border: 1px solid #ddd; overflow: auto; position: relative; } #demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; } #demo-config-menu { float: right; width: 180px; } #demo-config-menu h4 { font-size: 13px; color: #666; font-weight: normal; border: 0; padding-left: 18px; } #demo-config-menu ul { list-style: none; padding: 0; margin: 0; } #demo-config-menu li { font-size: 12px; padding: 0 0 0 10px; margin: 3px 0; zoom: 1; } #demo-config-menu li a:link, #demo-config-menu li a:visited { display: block; padding: 1px 8px 4px; border-bottom: 1px dotted #b3b3b3; } * html #demo-config-menu li a:link, * html #demo-config-menu li a:visited { padding: 1px 8px 2px; } #demo-config-menu li a:hover, #demo-config-menu li a:active { background-color: #f6f6f6; } #demo-source, #demo-notes { clear: both; padding: 20px 0 0; font-size: 1.3em; } #demo-notes { width: 520px; color: #333; font-size: 1em; } #demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; } #demo-source pre, #demo-source code { padding: 0; } code, pre { padding: 8px 0 8px 20px; font-size: 1.2em; line-height: 130%; } #demo-source a:link, #demo-source a:visited, #demo-source a:hover, #demo-source a:active { font-size: 12px; padding-left: 13px; background-position: left center; background-repeat: no-repeat; } div.demo { padding: 12px; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; } div.demo h3.docs { clear: left; font-size: 12px; font-weight: normal; padding: 0 0 1em; margin: 0; } div.demo-description { clear: both; padding: 12px; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; font-size: 1.3em; line-height: 1.4em; } .ui-draggable, .ui-droppable { background-position: top left; } .left-nav .demos-nav { padding-right: 10px; } #demo-link { font-size: 11px; padding-top: 6px; clear: both; overflow: hidden; } #demo-link a span.ui-icon { float: left; margin-right: 3px; } /* Component containers ----------------------------------*/ #widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } #widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } #widget-docs .ui-widget-header { border: 1px solid #ffffff; color: #ffffff; font-weight: bold; } #widget-docs .ui-widget-header a { color: #ffffff; } #widget-docs .ui-widget-content { border: 1px solid #ffffff; color: #222222; } #widget-docs .ui-widget-content a { color: #222222; } /* Interaction states ----------------------------------*/ #widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; font-weight: normal; color: #ffffff; outline: none; } #widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; } #widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; font-weight: normal; color: #ffffff; outline: none; } #widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; } #widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; font-weight: normal; color: #F6921E; outline: none; } #widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; } /* Interaction Cues ----------------------------------*/ #widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight { border: 1px solid #fcefa1; color: #363636; } #widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error { border: 1px solid #cd0a0a; color: #cd0a0a; } #widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; } #widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); background-image: none; } #widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; } #widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); font-weight: normal; } /* Icons ----------------------------------*/ /* states and images */ #demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ #widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } #widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } #widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } #widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } #widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } #widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } #widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } #widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } #widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Overlays */ #widget-docs .ui-widget-overlay { opacity: .30; filter: Alpha(Opacity=30); } #widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; opacity: .30; filter: Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } /* ----------------------------------*/ #widget-docs { margin: 20px 0 0; border: none; } #widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin: 0; padding: 0; } #widget-docs code { display: block; color: #444; font-size: .9em; margin: 0 0 1em; } #widget-docs code strong { color: #000; } #widget-docs p { margin: 0 3em 1.2em 0; } #widget-docs p.intro { font-size: 13px; color: #666; line-height: 1.3; } #widget-docs ul { list-style-type: none; } #widget-docs h2 { font-size: 16px; margin: 1.2em 0 .5em; } #widget-docs h3 { font-size: 14px; color: #e6820E; margin: 1.5em 0 .5em; } .normal #widget-docs h4 { font-size: 12px; color: #000; border: 0; margin: 0 0 .5em; } #docs-overview-main { width: 400px; } #docs-overview-sidebar { float: right; width: 200px; } #docs-overview-sidebar a span { color: #666; } #widget-docs #docs-overview-main p { margin-right: 0; } #widget-docs #docs-overview-sidebar h4 { padding-left: 0; } .docs-list-header { float: left; width: 100%; margin: 10px 0 0; border-bottom: 1px solid #eee; } #widget-docs .docs-list-header h2 { float: left; margin: 0; } #widget-docs .docs-list-header p { float: right; margin: 5px 0; font-size: 11px; } .docs-list { float: left; width: 100%; padding: 0 0 10px; } .docs-list .param-header { float: left; clear: left; width: 100%; padding: 8px 0; border-top: 1px solid #eee; } #widget-docs .param-header h3, #widget-docs .param-header p { margin: 0; float: left; } #widget-docs .param-header h3 { width: 50%; } #widget-docs .param-header h3 span { padding-left: 13px; } #widget-docs .param-header p { width: 24%; } #widget-docs .param-header p.param-type span { cursor: pointer; border-bottom: 1px dashed #ccc; padding-left: 15px; } .param-details { padding-left: 13px; } .param-args { margin: 0 0 1.5em; border-top: 1px dotted #ccc; } .param-args td { padding: 3px 30px 3px 5px; border-bottom: 1px dotted #ccc; } /* overrides for ui-tab styles */ #widget-docs ul.ui-tabs-nav { padding: 0 0 0 8px; } #widget-docs .ui-tabs-nav li { margin: 5px 5px 0 0; } #widget-docs .ui-tabs-nav li a:link, #widget-docs .ui-tabs-nav li a:visited, #widget-docs .ui-tabs-nav li a:hover, #widget-docs .ui-tabs-nav li a:active { font-size: 14px; padding: 4px 1.2em 3px; color: #fff; } #widget-docs .ui-tabs-nav li.ui-tabs-selected a:link, #widget-docs .ui-tabs-nav li.ui-tabs-selected a:visited, #widget-docs .ui-tabs-nav li.ui-tabs-selected a:hover, #widget-docs .ui-tabs-nav li.ui-tabs-selected a:active { color: #e6820E; } #widget-docs .ui-tabs-panel { padding: 20px 9px; font-size: 12px; line-height: 1.4; color: #000; } #widget-docs .ui-widget-content a:link, #widget-docs .ui-widget-content a:visited { color: #1b75bb; text-decoration: none; } #widget-docs .ui-widget-content a:hover, #widget-docs .ui-widget-content a:active { color: #0b559b; } #slider-range { margin-left: 5px; width: 145px; } #price-slider-right-amount, #price-slider-left-amount { line-height: 3.8; text-decoration: none; } #price-slider-left-amount { margin-left: -30px; text-align: right; } /* The jQuery Tools for Tabs implementation */ /* Required partials that provide global variables referenced in SCSS */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: Global reusable styles to ensure consistent layout across pages. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== i. SASS MIXINS 1. SASS GLOBAL VARIABLES 2. SASS GLOBAL MIXINS 2.1 GLOBAL TILE/BOX BORDER & BACKGROUND 2.2 MIXINS FOR COMMON UI REQUIREMENTS ==================================== */ /* _____________________________________________________________________________ 1. SASS GLOBAL VARIABLES _____________________________________________________________________________ */ /* The assets domain name as set in config.rb for each store */ /* Image references */ /* ------------------------------------------------------------------------------------------------------------------ Coastal Contacts * DESCRIPTION: A repository of image references used in SCSS during Compass compilation. NOTE: Please check if a variable for an image has been already created before creating a new one. This SASS partial is meant to be the central place for image references used in CSS. --------------------------------------------------------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. IMAGE FOLDERS MAPPINGS 1.1 Background Images with height and width 1.2 Buttons Paths 1.3 Coastal Paths 1.4 Icons Paths 1.5 Logos Paths 2. IMAGE REFERENCES 1.1 Background Images 1.2 Buttons Images 1.3 Coastal Images (/coastal-images) 1.4 Icon Images 1.5 Logo Images ==================================== */ /* _____________________________________________________________________________ 1. IMAGE FOLDERS MAPPINGS _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Paths ---------------------------------------------------------------------------- */ /* Images under /images/background/ */ /* ---------------------------------------------------------------------------- 1.2 Buttons Paths ---------------------------------------------------------------------------- */ /* Images under /images/buttons/ */ /* ---------------------------------------------------------------------------- 1.3 Coastal Paths ---------------------------------------------------------------------------- */ /* Images under /images/coastal-images/ */ /* Images under /images/coastal-images/account */ /* Images under /images/coastal-images/bml */ /* Images under /images/coastal-images/category */ /* Images under /images/coastal-images/coating */ /* Images under /images/coastal-images/ecp */ /* Images under /images/coastal-images/epay */ /* Images under /images/coastal-images/error */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/navigation */ /* Images under /images/coastal-images/payment */ /* Images under /images/coastal-images/popup */ /* Images under /images/coastal-images/popup/newsletter */ /* Images under /images/coastal-images/popup/style-wizard */ /* Images under /images/coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icons Paths ---------------------------------------------------------------------------- */ /* Images under /images/icons/ */ /* ---------------------------------------------------------------------------- 1.5 Logos Paths ---------------------------------------------------------------------------- */ /* Images under /images/logos/ */ /* _____________________________________________________________________________ 2. IMAGE REFERENCES _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Images with height and width ---------------------------------------------------------------------------- */ /* Weekly Deals background images */ /* ---------------------------------------------------------------------------- 1.2 Buttons Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.3 Coastal Images (/coastal-images) ---------------------------------------------------------------------------- */ /* Images under coastal-images/account/addressPayment */ /* Images under coastal-images/account/autoRefill */ /* Images under coastal-images/account/home */ /* Images under coastal-images/account/lnav */ /* Images under coastal-images/account/orderHistory */ /* Images under coastal-images/account/referFriend */ /* Images under coastal-images/account/registration */ /* Images under coastal-images/account/rx */ /* Images under coastal-images/category */ /* Images under coastal-images/ecp */ /* Images under coastal-images/epay */ /* Images under coastal-images/error */ /* Images under coastal-images/header */ /* Images under coastal-images/navigation */ /* Images under coastal-images/popup/newsletter */ /* Images under coastal-images/popup/style-wizard */ /* Images under coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icon Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.5 Logo Images ---------------------------------------------------------------------------- */ /* _____________________________________________________________________________ 2. SASS GLOBAL MIXINS _____________________________________________________________________________ */ /* Payment Page Color Specific Progress Bar */ /* ------------------------------------------------------------------------- 2.1 GLOBAL TILE/BOX BORDER & BACKGROUND ------------------------------------------------------------------------- */ /* For modern browsers that support box-shadow property & CSS3*/ /* Mainly for IE8 that doesn't support box-shadow property */ /* Mainly for IE7 that doesn't support box-shadow property */ /* ------------------------------------------------------------------------- 2.2 MIXINS FOR COMMON UI REQUIREMENTS ------------------------------------------------------------------------- */ /* Aligns an element vertically (middle). The parent container needs to have - position: relative; NOTE: Supported for IE8 and above. */ /* ------------------------------------------------------------------------------------------------------------------ Coastal Contacts * DESCRIPTION: A repository of image references used in SCSS during Compass compilation. NOTE: Please check if a variable for an image has been already created before creating a new one. This SASS partial is meant to be the central place for image references used in CSS. --------------------------------------------------------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. IMAGE FOLDERS MAPPINGS 1.1 Background Images with height and width 1.2 Buttons Paths 1.3 Coastal Paths 1.4 Icons Paths 1.5 Logos Paths 2. IMAGE REFERENCES 1.1 Background Images 1.2 Buttons Images 1.3 Coastal Images (/coastal-images) 1.4 Icon Images 1.5 Logo Images ==================================== */ /* _____________________________________________________________________________ 1. IMAGE FOLDERS MAPPINGS _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Paths ---------------------------------------------------------------------------- */ /* Images under /images/background/ */ /* ---------------------------------------------------------------------------- 1.2 Buttons Paths ---------------------------------------------------------------------------- */ /* Images under /images/buttons/ */ /* ---------------------------------------------------------------------------- 1.3 Coastal Paths ---------------------------------------------------------------------------- */ /* Images under /images/coastal-images/ */ /* Images under /images/coastal-images/account */ /* Images under /images/coastal-images/bml */ /* Images under /images/coastal-images/category */ /* Images under /images/coastal-images/coating */ /* Images under /images/coastal-images/ecp */ /* Images under /images/coastal-images/epay */ /* Images under /images/coastal-images/error */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/navigation */ /* Images under /images/coastal-images/payment */ /* Images under /images/coastal-images/popup */ /* Images under /images/coastal-images/popup/newsletter */ /* Images under /images/coastal-images/popup/style-wizard */ /* Images under /images/coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icons Paths ---------------------------------------------------------------------------- */ /* Images under /images/icons/ */ /* ---------------------------------------------------------------------------- 1.5 Logos Paths ---------------------------------------------------------------------------- */ /* Images under /images/logos/ */ /* _____________________________________________________________________________ 2. IMAGE REFERENCES _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Images with height and width ---------------------------------------------------------------------------- */ /* Weekly Deals background images */ /* ---------------------------------------------------------------------------- 1.2 Buttons Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.3 Coastal Images (/coastal-images) ---------------------------------------------------------------------------- */ /* Images under coastal-images/account/addressPayment */ /* Images under coastal-images/account/autoRefill */ /* Images under coastal-images/account/home */ /* Images under coastal-images/account/lnav */ /* Images under coastal-images/account/orderHistory */ /* Images under coastal-images/account/referFriend */ /* Images under coastal-images/account/registration */ /* Images under coastal-images/account/rx */ /* Images under coastal-images/category */ /* Images under coastal-images/ecp */ /* Images under coastal-images/epay */ /* Images under coastal-images/error */ /* Images under coastal-images/header */ /* Images under coastal-images/navigation */ /* Images under coastal-images/popup/newsletter */ /* Images under coastal-images/popup/style-wizard */ /* Images under coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icon Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.5 Logo Images ---------------------------------------------------------------------------- */ ul.tabs { border-bottom: 1px solid #CECECE; height: 30px; list-style: none outside none; margin: 0 !important; padding: 0; z-index: -1; } ul.tabs li { float: left; list-style-image: none !important; margin: 0 !important; padding: 0; text-indent: 0; } ul.tabs a { background: #ECECEC; color: #333333; display: block; font-family: Arial; font-size: 14px; height: 30px; line-height: 30px; margin-right: 5px; padding-left: 20px; padding-right: 20px; position: relative; text-align: center; text-decoration: none; -moz-border-radius: 2px 2px 0px 0px; -webkit-border-radius: 2px 2px 0px 0px; -khtml-border-radius: 2px 2px 0px 0px; border-radius: 2px 2px 0px 0px; } ul.tabs a:hover { background: #F8F8F8; color: #0069AA; } ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { background: #F8F8F8 !important; cursor: default !important; color: #0069AA !important; } .tab-arrow { background: url(../images/background/category_sprite.png) center -93px no-repeat; display: block; height: 42px; } .panes .pane { display: none; } .tab-content-wrapper { float: left; margin-top: 5px; width: 100%; } .top-left-corner-off, .top-right-corner-off, .top-left-corner-on, .top-right-corner-on { height: 29px; position: absolute; top: 0px; width: 3px; z-index: 1; } .top-left-corner-off { left: 0px; background-image: url(../images/background/tab_off_left.png); } .top-right-corner-off { right: 0px; background-image: url(../images/background/tab_off_right.png); } .top-left-corner-on { left: 0px; background-image: url(../images/background/tab_on_left.png); } .top-right-corner-on { right: 0px; background-image: url(../images/background/tab_on_right.png); } .tab-state-on { display: none; } .tab-product-info td { padding-right: 10px; } /* Global bxSlider used for carousels/sliders */ /** BxSlider v4.0 - Fully loaded, responsive content slider http://bxslider.com Written by: Steven Wanderski, 2012 http://stevenwanderski.com (while drinking Belgian ales and listening to jazz) CEO and founder of bxCreative, LTD http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 0 60px; padding: 0; *zoom: 1; } .bx-wrapper img { width: 100%; display: block; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: solid #fff 5px; left: -5px; background: #fff; } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; /* background: url(http://www.coastal.com/template-resources/stylesheet/images/bx_loader.gif) center center no-repeat; */ } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -999999px; display: block; width: 10px; height: 10px; margin: 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; /* background: url(http://www.coastal.com/template-resources/stylesheet/images/controls.png) no-repeat 0 -32px; */ } .bx-wrapper .bx-next { right: 10px; /* background: url(http://www.coastal.com/template-resources/stylesheet/images/controls.png) no-repeat -43px -32px; */ } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; text-indent: -999999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -999999px; width: 10px; height: 11px; /* background: url(http://www.coastal.com/template-resources/stylesheet/images/controls.png) -86px -11px no-repeat; */ margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -999999px; width: 9px; height: 11px; /* background: url(http://www.coastal.com/template-resources/stylesheet/images/controls.png) -86px -44px no-repeat; */ margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666666 \9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /* Fancybox Plugin for Dialogs, Virtual Mirror. */ /* FancyBox - jQuery Plugin Simple and fancy lightbox alternative Examples and documentation at: http://fancybox.net Copyright (c) 2008 - 2010 Janis Skarnelis That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated. Version: 1.3.4 (11/11/2010) Requires: jQuery v1.3+ Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html */ #fancybox-loading { position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; } #fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url("external/fancybox/fancybox.png"); } #fancybox-overlay { position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; display: none; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; top: 0; left: 0; padding: 20px; z-index: 1101; outline: none; display: none; } #fancybox-outer { position: relative; width: 100%; height: 100%; background: none repeat scroll 0 0 transparent; } #fancybox-content { width: 0; height: 0; padding: 0; outline: none; position: initial; overflow: hidden; z-index: 1102; border: 0px solid #fff; } #fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1101; } #fancybox-close { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background: transparent url("external/fancybox/fancybox.png") -40px 0px; cursor: pointer; z-index: 1103; display: none; } #fancybox-error { color: #444; font: normal 12px/20px Arial; padding: 14px; margin: 0; } #fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; } #fancybox-frame { width: 100%; height: 100%; border: none; display: block; } #fancybox-left, #fancybox-right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; outline: none; background: transparent url("external/fancybox/blank.gif"); z-index: 1102; display: none; } #fancybox-left { left: 0px; } #fancybox-right { right: 0px; } #fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 50%; left: -9999px; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 1102; display: block; } #fancybox-left-ico { background-image: url("external/fancybox/fancybox.png"); background-position: -40px -30px; } #fancybox-right-ico { background-image: url("external/fancybox/fancybox.png"); background-position: -40px -60px; } #fancybox-left:hover, #fancybox-right:hover { visibility: visible; /* IE6 */ } #fancybox-left:hover span { left: 20px; } #fancybox-right:hover span { left: auto; right: 20px; } .fancybox-bg { position: absolute; padding: 0; margin: 0; opacity: 0; filter: Alpha(opacity=0); border: 0; width: 20px; height: 20px; z-index: 1001; } #fancybox-bg-n { top: -20px; left: 0; width: 100%; background-image: url("external/fancybox/fancybox-x.png"); } #fancybox-bg-ne { top: -20px; right: -20px; background-image: url("external/fancybox/fancybox.png"); background-position: -40px -162px; } #fancybox-bg-e { top: 0; right: -20px; height: 100%; background-image: url("external/fancybox/fancybox-y.png"); background-position: -20px 0px; } #fancybox-bg-se { bottom: -20px; right: -20px; background-image: url("external/fancybox/fancybox.png"); background-position: -40px -182px; } #fancybox-bg-s { bottom: -20px; left: 0; width: 100%; background-image: url("external/fancybox/fancybox-x.png"); background-position: 0px -20px; } #fancybox-bg-sw { bottom: -20px; left: -20px; background-image: url("external/fancybox/fancybox.png"); background-position: -40px -142px; } #fancybox-bg-w { top: 0; left: -20px; height: 100%; background-image: url("external/fancybox/fancybox-y.png"); } #fancybox-bg-nw { top: -20px; left: -20px; background-image: url("external/fancybox/fancybox.png"); background-position: -40px -122px; } #fancybox-title { font-family: Helvetica; font-size: 12px; z-index: 1102; } .fancybox-title-inside { padding-bottom: 10px; text-align: center; color: #333; background: #fff; position: relative; } .fancybox-title-outside { padding-top: 10px; color: #fff; } .fancybox-title-over { position: absolute; bottom: 0; left: 0; color: #FFF; text-align: left; } #fancybox-title-over { padding: 10px; background-image: url("external/fancybox/fancy_title_over.png"); display: block; } .fancybox-title-float { position: absolute; left: 0; bottom: -20px; height: 32px; } #fancybox-title-float-wrap { border: none; border-collapse: collapse; width: auto; } #fancybox-title-float-wrap td { border: none; white-space: nowrap; } #fancybox-title-float-left { padding: 0 0 0 15px; background: url("external/fancybox/fancybox.png") -40px -90px no-repeat; } #fancybox-title-float-main { color: #FFF; line-height: 29px; font-weight: bold; padding: 0 0 3px 0; background: url("external/fancybox/fancybox-x.png") 0px -40px; } #fancybox-title-float-right { padding: 0 0 0 15px; background: url("external/fancybox/fancybox.png") -55px -90px no-repeat; } /* Global smart wizard */ /* SmartWizard 2.0 plugin jQuery Wizard control Plugin by Dipu http://www.techlaboratory.net http://tech-laboratory.blogspot.com */ .swMain { position: relative; display: block; margin: 0; padding: 0; border: 0px solid #CCC; overflow: visible; float: left; font: normal 12px arial; width: 966px; } .swMain .stepContainer { display: block; position: relative; margin: 0; padding: 0; border: 0px solid #CCC; overflow: hidden; clear: both; height: 300px; } .swMain .stepContainer div.content { display: block; position: absolute; float: left; margin: 0; color: #5A5655; height: 300px; text-align: left; overflow: visible; z-index: 88; clear: both; } .swMain div.actionBar { display: block; position: relative; clear: both; margin: 3px 0 0 0; padding: 0; color: #5A5655; height: 40px; text-align: left; overflow: auto; z-index: 88; left: 0; } .swMain .stepContainer .StepTitle { color: #0067A9; display: block; position: relative; margin: 20px; clear: both; font: bold 16px arial; text-align: left; z-index: 88; } .swMain ul.anchor { position: relative; display: block; float: left; list-style: none; padding: 0px; clear: both; border: 0px solid #CCCCCC; margin-left: 350px; } .swMain ul.anchor li { position: relative; display: block; margin: 0; padding: 0; padding-left: 3px; padding-right: 3px; border: 0px solid #E0E0E0; float: left; } /* Anchor Element Style */ .swMain ul.anchor li a { display: block; position: relative; float: left; margin: 0; padding: 3px; height: 20px; width: 20px; text-decoration: none; outline-style: none; z-index: 99; } .swMain ul.anchor li a .stepNumber { position: relative; float: left; width: 30px; text-align: center; padding: 5px; padding-top: 0; } .swMain ul.anchor li a .stepDesc { position: relative; display: block; float: left; text-align: left; padding: 5px; } .swMain ul.anchor li a .stepDesc small { font: normal 12px Verdana, Arial, Helvetica, sans-serif; } .swMain ul.anchor li a.selected { color: #F8F8F8; border: 1px solid #EA8511; cursor: text; } .swMain ul.anchor li a.selected:hover { color: #F8F8F8; } .swMain ul.anchor li a.done { position: relative; color: #FFF; z-index: 99; } .swMain ul.anchor li a.done:hover { color: #FFF; } .swMain ul.anchor li a.disabled { color: #CCCCCC; border: 1px solid #CCC; cursor: text; } .swMain ul.anchor li a.disabled:hover { color: #CCCCCC; } .swMain ul.anchor li a.error { color: #6c6c6c !important; background: #f08f75 !important; border: 1px solid #fb3500 !important; } .swMain ul.anchor li a.error:hover { color: #000 !important; } .swMain .buttonNext { display: block; float: right; margin: 5px 3px 0 3px; padding: 5px; text-decoration: underline; text-align: center; font: normal 13px Verdana, Arial, Helvetica, sans-serif; width: 100px; color: gray; outline-style: none; } .swMain .buttonDisabled { color: #F8F8F8 !important; background-color: #CCCCCC !important; border: 1px solid #CCCCCC !important; cursor: text; } .swMain .buttonPrevious { display: block; float: left; margin: 5px 3px 0 3px; padding: 5px; text-decoration: underline; text-align: center; font: normal 13px Verdana, Arial, Helvetica, sans-serif; width: 100px; color: gray; outline-style: none; } .swMain .buttonFinish { display: block; float: right; margin: 5px 10px 0 3px; padding: 5px; text-decoration: underline; text-align: center; font: normal 13px Verdana, Arial, Helvetica, sans-serif; width: 100px; color: gray; outline-style: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Form Styles */ .txtBox { border: 1px solid #CCCCCC; color: #5A5655; font: 13px Verdana,Arial,Helvetica,sans-serif; padding: 2px; width: 430px; } .txtBox:focus { border: 1px solid #EA8511; } .swMain .loader { position: relative; display: none; float: left; margin: 2px 0 0 2px; padding: 8px 10px 8px 40px; font: bold 13px Verdana, Arial, Helvetica, sans-serif; color: #5A5655; background: url("../images/icons/loader.gif") no-repeat 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 998; } .swMain .msgBox { position: relative; display: none; float: left; margin: 4px 0 0 5px; padding: 5px; border: 1px solid #FFD700; background-color: #FFFFDD; font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #5A5655; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 999; min-width: 200px; } .swMain .msgBox .content { font: normal 12px Verdana,Arial,Helvetica,sans-serif; padding: 0px; float: left; } .swMain .msgBox .close { border: 1px solid #CCC; border-radius: 3px; color: #CCC; display: block; float: right; margin: 0 0 0 5px; outline-style: none; padding: 0 2px 0 2px; position: relative; text-align: center; text-decoration: none; } .swMain .msgBox .close:hover { color: #EA8511; border: 1px solid #EA8511; } .br-found-heading { display: none; } .br-sf-widget, .br-quickview-pop { color: #787878; font: normal 12px arial; float: left; margin-right: 5px; text-decoration: none; width: 150px; } .br-sf-widget-merchant-title { float: left; margin-top: 70px; min-height: 50px; text-align: center; width: 100%; } .br-sf-widget-merchant-title a, .br-sf-widget-merchant-qv a { color: #787878; font: bold 12px arial; text-decoration: none; } .br-sf-widget-merchant-qv a { font-weight: normal; text-decoration: underline; } .br-sf-widget-merchant-img { margin: 0 auto; position: absolute; width: 100%; } .br-sf-widget-merchant-img img { height: 50px; margin-left: 25px; width: 100px; } .br-sf-widget-merchant-desc { float: left; margin-bottom: 10px; min-height: 120px; } .br-quickview-pop { -moz-box-shadow: 7px 7px 7px #7c7c7c; -webkit-box-shadow: 7px 7px 7px #7c7c7c; box-shadow: 7px 7px 7px #7c7c7c; background-color: #FFFFFF; border: 1px solid #787878; left: 0; min-height: 200px; padding: 10px; position: absolute; top: -10px; width: 300px; z-index: 1; } .br-sf-widget-merchant-popup-close { left: 10px; position: absolute; top: 90%; } .br-sf-widget-merchant-popup-title { font-weight: bold; position: absolute; top: 100px; } .br-sf-widget-merchant-popup-view { left: 70%; position: absolute; top: 15%; } .br-sf-widget-merchant-popup-cont img { padding: 10px; position: absolute; width: 100px; } .br-sf-widget-merchant-popup-desc { float: left; margin-top: 120px; } .br-related-heading { display: none; } .br-related-query { float: left; margin-right: 15px; } .br-sf-widget-merchant-qv { clear: both; } /* _____________________________________________________________________________ 2. THE COASTAL CONTACTS CSS (We need to have CC CSS after third party CSS so we can overwrite properties) _____________________________________________________________________________ **/ /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The main CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 0. GLOBAL CLASSES & DEFINITIONS 1. COASTAL CONTACTS CONTAINERS 1.00 COMMON CONTAINER PROPERTIES 1.01 COASTAL HEADER CONTAINER 1.02 FOOTER CONTAINER 1.03 FACEBOOK PLUGIN CONTAINER 1.04 MAIN BODY CONTAINER 2. COASTAL CONTACTS WIDGETS 2.01 GLOBAL (APP WIDE) BUTTONS 3. FAVORTIES ICONS 3.00 FAVORITE ICONS 4. FANCYBOX (LIGHTBOX) 4.01 FANCYBOX PLUGIN OVERWRITES 5. LIVE CHAT 5.01 LIVE CHAT 6. ERROR PAGE 6.01 ERROR PAGE 7. NEWSLETTER POPUP 7.01 NEWSLETTER POPUP 8. UNSUBSCRIBE 8.01 UNSUBSCRIBE CONTAINER 9. MOBIFY 10. UNAVAILABLE COUPON PRODUCTS 11. HOTSPOT CONTAINER 12. BOXES 12.01 INFORMATION MESSAGE BOX 13. REDIRECT TOP BANNER 14. Newsletter Subscription Page ==================================== */ /*____________________________________________________________________________ 0. GLOBAL CLASSES & DEFINITIONS _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 0.01 Default Properties for HTML Elements ------------------------------------------------------------------------- */ body { background-color: #F9F9F9; margin: 0; padding: 0; } div, span { text-align: left; } img { border: 0; } h4 { color: #2e2e2e; font: normal 18px Arial; margin-bottom: 20px; } ol, ul { list-style: none; } a { color: #0069aa; text-decoration: underline; } /* ------------------------------------------------------------------------- 0.02 Predefined/Reusable Selectors ------------------------------------------------------------------------- */ a.blue { color: #0069aa; text-decoration: none; } a.blue:hover { text-decoration: underline; } a.neutral { color: #656565 !important; text-decoration: underline !important; } a.plain { color: #585858 !important; text-decoration: underline !important; } span.blue { color: #0069aa; cursor: pointer; text-decoration: none; } span.blue:hover { text-decoration: underline; } .clear-left, .cc-clear-left { clear: left; } .clear-right, .cc-clear-right { clear: right; } .clear-both, .cc-clear-both { clear: both; } .left, .cc-left { float: left; } .right, .cc-right { float: right; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .display-none, .cc-display-none { display: none; } .display-block, .cc-display-block { display: block; } .display-inline, .cc-display-inline { display: inline; } .background-none { background: none !important; } .visibility-hidden, .cc-visibility-hidden { visibility: hidden; } .strong { font-weight: bold; } .cursor-pointer, .cc-cursor-pointer { cursor: pointer; } .cursor-cross-hair { cursor: cross-hair; } .font-black { color: #000000; } .margin-zero, .cc-margin-zero { margin-top: 0px; } .float-none, .cc-float-none { float: none !important; } .horizontal-divider, .cc-horizontal-divider { background: url(../images/background/category_sprite.png) 0px -121px no-repeat; background-repeat: repeat-x; float: left; height: 1px; width: 100%; } .copy { color: #585858; font-size: 12px; font-family: arial; } .question-img { background: url(../images/icons/icon_question.png) no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; margin-left: 5px; position: absolute; width: 14px; } .loader { background: url(//../images/icons/loader.gif) no-repeat scroll 0 0 transparent; background-position: center; } input[type="submit"], input[type="button"] { height: 30px; /* default height for submit input types */ } /* Compass variables specific for each store */ .btn-primary { background: #003366; background: -webkit-gradient(linear, left top, left bottom, from(#006AA8), to(#003366)); background: -webkit-linear-gradient(top, #006AA8, #003366); background: -moz-linear-gradient(top, #006AA8 0%, #003366); background: -ms-linear-gradient(top, #006AA8, #003366); background: -o-linear-gradient(top, #006AA8, #003366); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; } .btn-primary:hover { background: #006AA8; background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#006AA8)); background: -webkit-linear-gradient(top, #003366, #006AA8); background: -moz-linear-gradient(top, #003366 0%, #006AA8); background: -ms-linear-gradient(top, #003366, #006AA8); background: -o-linear-gradient(top, #003366, #006AA8); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; } .btn-primary-small, .cc-btn-primary-small { background: #003366; background: -webkit-gradient(linear, left top, left bottom, from(#006AA8), to(#003366)); background: -webkit-linear-gradient(top, #006AA8, #003366); background: -moz-linear-gradient(top, #006AA8 0%, #003366); background: -ms-linear-gradient(top, #006AA8, #003366); background: -o-linear-gradient(top, #006AA8, #003366); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 12px; line-height: 20px; text-transform: uppercase; } .btn-primary-small:hover, .cc-btn-primary-small:hover { background: #006AA8; background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#006AA8)); background: -webkit-linear-gradient(top, #003366, #006AA8); background: -moz-linear-gradient(top, #003366 0%, #006AA8); background: -ms-linear-gradient(top, #003366, #006AA8); background: -o-linear-gradient(top, #003366, #006AA8); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 12px; line-height: 20px; text-transform: uppercase; } .btn-transaction, .cc-btn-rxwizard, .swMain .buttonFinish { background: #d14e02; background: -webkit-gradient(linear, left top, left bottom, from(#ff6f00), to(#d14e02)); background: -webkit-linear-gradient(top, #ff6f00, #d14e02); background: -moz-linear-gradient(top, #ff6f00 0%, #d14e02); background: -ms-linear-gradient(top, #ff6f00, #d14e02); background: -o-linear-gradient(top, #ff6f00, #d14e02); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; } .btn-transaction:hover, .cc-btn-rxwizard:hover, .swMain .buttonFinish:hover { background: #ff6f00; background: -webkit-gradient(linear, left top, left bottom, from(#d14e02), to(#ff6f00)); background: -webkit-linear-gradient(top, #d14e02, #ff6f00); background: -moz-linear-gradient(top, #d14e02 0%, #ff6f00); background: -ms-linear-gradient(top, #d14e02, #ff6f00); background: -o-linear-gradient(top, #d14e02, #ff6f00); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; } .btn-neutral { background: #a7a7a7; background: -webkit-gradient(linear, left top, left bottom, from(lightgray), to(#a7a7a7)); background: -webkit-linear-gradient(top, lightgray, #a7a7a7); background: -moz-linear-gradient(top, lightgray 0%, #a7a7a7); background: -ms-linear-gradient(top, lightgray, #a7a7a7); background: -o-linear-gradient(top, lightgray, #a7a7a7); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #5B5B5B; } .btn-neutral:hover { background: lightgray; background: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(lightgray)); background: -webkit-linear-gradient(top, #a7a7a7, lightgray); background: -moz-linear-gradient(top, #a7a7a7 0%, lightgray); background: -ms-linear-gradient(top, #a7a7a7, lightgray); background: -o-linear-gradient(top, #a7a7a7, lightgray); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #5B5B5B; } .btn-disable { background: #d8d8d8; background: -webkit-gradient(linear, left top, left bottom, from(whitesmoke), to(#d8d8d8)); background: -webkit-linear-gradient(top, whitesmoke, #d8d8d8); background: -moz-linear-gradient(top, whitesmoke 0%, #d8d8d8); background: -ms-linear-gradient(top, whitesmoke, #d8d8d8); background: -o-linear-gradient(top, whitesmoke, #d8d8d8); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #C1BFBF; } .btn-disable:hover { background: #d8d8d8; background: -webkit-gradient(linear, left top, left bottom, from(whitesmoke), to(#d8d8d8)); background: -webkit-linear-gradient(top, whitesmoke, #d8d8d8); background: -moz-linear-gradient(top, whitesmoke 0%, #d8d8d8); background: -ms-linear-gradient(top, whitesmoke, #d8d8d8); background: -o-linear-gradient(top, whitesmoke, #d8d8d8); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #C1BFBF; cursor: default; } .btn-dialog { background: #e1e1e1; background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e1e1e1)); background: -webkit-linear-gradient(top, white, #e1e1e1); background: -moz-linear-gradient(top, white 0%, #e1e1e1); background: -ms-linear-gradient(top, white, #e1e1e1); background: -o-linear-gradient(top, white, #e1e1e1); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; color: #5C5C5C; font-size: 12px; line-height: 30px; border: 1px solid #acacac; } .btn-dialog:hover { background: white; background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(white)); background: -webkit-linear-gradient(top, #e1e1e1, white); background: -moz-linear-gradient(top, #e1e1e1 0%, white); background: -ms-linear-gradient(top, #e1e1e1, white); background: -o-linear-gradient(top, #e1e1e1, white); border: 0px solid #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); -webkit-box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); box-shadow: 0px 0px 0px transparent, inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 0px 0px 0px transparent, 0px 0px 0px rgba(255, 255, 255, 0); color: #ffffff; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: normal; padding: 0 12px; text-align: center; text-decoration: none; vertical-align: middle; color: #5C5C5C; font-size: 12px; line-height: 30px; border: 1px solid #acacac; } .btn-raquo, .btn-raquo-small, .cc-btn-raquo { display: inline-block; margin-left: 3px; vertical-align: middle; } .btn-raquo, .cc-btn-raquo { margin-top: -3px; } .btn-raquo-small { margin-top: -5px; } /* _____________________________________________________________________________ 1. COASTAL CONTACTS CONTAINERS _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 1.00 Common Container Properties ------------------------------------------------------------------------- */ #coastal-header-checkout-container, #footer-container { width: 100%; clear: both; } #coastal-header-checkout-container-wrapper, #footer-container-inner { margin: 20px auto 0; } #main-coastal-container-wrapper { min-width: 1066px; /* Important: Do NOT remove. It's needed to enforce min width when browser window is resized to very small size */ } #main-coastal-container { background: url(../images/background/horizontal_sliver.png) top repeat-x; height: 100%; width: 100%; } #footer-overlay-background-shadow, #footer-checkout-overlay-background-shadow { left: 50%; margin-left: -533px; position: absolute; width: 1066px; } #main-content-container { float: none; } #facebook-footer-container, #footer-overlay-container, #footer-checkout-overlay-container { background-color: #FFFFFF; float: none; margin: 0 auto; overflow: hidden; } .header-banner h3, .cc-header-banner h3 { background-color: #f0f0f0; color: #0069AA; font: 18px arial; height: 30px; line-height: 1.8; margin: -10px 0 10px 0; text-indent: 10px; text-align: left; } .header-banner a, .cc-header-banner a { color: #0069aa; font: 12px arial; text-decoration: underline; } /* ------------------------------------------------------------------------- 1.01 Coastal Header Container ------------------------------------------------------------------------- */ #coastal-header-checkout-container, #coastal-header-checkout-container-wrapper, #coastal-header-checkout-container-inner { height: 120px; } #coastal-header-checkout-container { margin-top: -15px; } #coastal-header-checkout-container, #footer-overlay { /* Important: Do NOT remove the float/position because it will affect header & footer when browser is resized to a smaller size with left/right scrolling*/ float: none; position: relative; } #coastal-header-checkout-container-wrapper { float: none; background: #fff; position: relative; /* needed to be defined explicitly to support layout on iPhone and other platforms */ } #coastal-header-checkout-container-inner { float: none; font: 14px Arial; top: 0px; right: 0px; position: absolute; /* needed to be defined explicitly to support layout on iPhone and other platforms */ } #coastal-header-checkout-left-background, #coastal-header-checkout-right-background { height: 370px; position: relative; top: 0; width: 50px; } #coastal-header-checkout-left-background { float: left; margin-left: -50px; } #coastal-header-checkout-right-background { float: right; margin-right: -50px; } #coastal-header-checkout-left-background { background: url(../images/background/page_frame_sprite.png) -1069px 1px no-repeat; } #coastal-header-checkout-right-background { background: url(../images/background/page_frame_sprite.png) -1120px 1px no-repeat; } #coastal-header-left-box, #coastal-header-checkout-right-box { height: 100px; font-family: Arial; font-size: 12px; float: left; position: absolute; text-align: right; top: 10px; z-index: 1; } #coastal-header-left-box { float: left; left: 0; text-align: left; top: 30px; width: 300px; } /* ------------------------------------------------------------------------- 1.02 Footer Container ------------------------------------------------------------------------- */ #footer-container, #footer-container-checkout { background-color: #d6d6d6; border-bottom: 5px solid #FFFFFF; overflow: hidden; } #footer-container-checkout { height: 90px; } #footer-container a { line-height: 1.5; text-decoration: none; } #footer-container a:hover { text-decoration: underline; } #footer-container-inner { color: #585858; float: none; font: 14px Arial; margin-bottom: 430px; } #footer-bg-color { position: absolute; width: 100%; } #info-box-container { float: left; width: 732px; } #info-box-checkout-container { float: left; width: 966px; } #info-box-checkout-container li { display: inline; font-size: 12px; } #info-box-checkout-container-left { float: left; text-align: left; width: 550px; } #info-box-checkout-container-right { float: right; text-align: right; } #info-box-checkout-container-right a { color: #585858; text-decoration: none; } #info-box-checkout-container-right li { border-left: 1px solid #585858; padding-left: 4px; } #info-box-checkout-container-right li:first-child { border-left: none; } .info-box { float: left; line-height: 1.5; padding: 0px; width: 234px; } .info-box h3 { color: #2e2e2e; font: normal 18px Arial; margin-bottom: 20px; } .info-box a { color: #585858; display: block; } #footer-truste { float: left; margin-left: 45px; margin-top: 20px; padding-bottom: 13px; width: 0; } #newsletter-container { background-color: #F0F0F0; float: right; width: 234px; } #newsletter-container input { color: #585858; height: 20px; margin-bottom: 10px; width: 186px; } #newsletter-unsubscription-container { clear: both; margin-bottom: 15px; } #newsletter-contact-info, #newsletter-unsubscription-content { color: #7d7d7d; font: 9px/10px Arial; } #newsletter-privacy-link { color: #0e2e2e; font: 9px Arial !important; text-decoration: underline !important; } div#newsletter-form-submit { float: right; margin-bottom: 15px; } .newsletter-box h3 { color: #2e2e2e; font: normal 18px Arial; line-height: 1.2; margin-bottom: 20px; } .info-box-inner { padding: 30px 10px 20px 10px !important; } .info-box-inner h4 { min-height: 20px; } .newsletter-box-inner { box-shadow: 0 4px 4px #b4b4b4; -moz-box-shadow: 0 4px 4px #b4b4b4; -webkit-box-shadow: 0 4px 4px #b4b4b4; float: left; padding: 20px !important; } .newsletter-box-inner h4 { margin-bottom: 15px; } #newsletter-header { margin-bottom: 10px; } #coastal-copyright { color: #585858; font: normal 10px Arial; margin: 15px 0 15px 0; text-align: center; } #coastal-copyright div { text-align: center; } .icon-link, .text-link { height: 20px; line-height: 1.5; margin-bottom: 7px; width: 100%; } .icon-link { text-indent: 25px; padding-left: 5px; } .info-box .text-link a { display: inline; } #icon-facebook { background: url(../images/background/footer_header_icons_sprite.png) 0px -76px no-repeat; } #icon-gplus { background: url(../images/background/footer_header_icons_sprite.png) 0px -52px no-repeat; } #icon-twitter { background: url(../images/background/footer_header_icons_sprite.png) 0px -27px no-repeat; } #icon-blog { background: url(../images/background/footer_header_icons_sprite.png) 0px -149px no-repeat; } #icon-video { background: url(../images/background/footer_header_icons_sprite.png) 0px -3px no-repeat; } #icon-deals { background: url(../images/background/footer_header_icons_sprite.png) 0px -101px no-repeat; } #icon-iphone { background: url(//http://www.coastal.com/template-resources/images/icons/icon_app.png) no-repeat scroll 0 0 transparent; } #icon-view-project { background: url(../images/background/footer_header_icons_sprite.png) 0px -190px no-repeat; } #img-trustee { background: url(../images/logos/logo_truste.png) no-repeat scroll 0 0 transparent; height: 48px; margin: 10px 0 10px 0; width: 143px; } #img-cc-cards { background: url(../images/logos/logo_cc_cards.png) no-repeat scroll 0 0 transparent; height: 51px; width: 156px; } #img-jp-cc-cards { background: url(../images/logos/logo_cc.png) no-repeat scroll 0 0 transparent; display: inline-block; height: 21px; margin: 5px 0 0 5px; width: 106px; } #img-service-badge { border: 0px; margin-top: 6px; margin-left: -6px; } #btn-signup { height: 25px; margin-left: 138px; width: 60px !important; } #footer-overlay { width: 100%; } #footer-overlay-wrapper { float: none; } #footer-overlay-container { height: 219px; } #footer-checkout-overlay-container { height: 50px; } #footer-overlay-background-shadow { height: 219px; } #footer-checkout-overlay-background-shadow { height: 65px; margin-top: -15px; } #ctc-footer-link { display: none; } .info-box-row-container { width: 100%; } .info-box-row-divider { background: url(../images/background/divider_dot.png) repeat-x; clear: both; height: 1px; width: 700px; } .info-box-column-top-divider { background: url(../images/background/divider_dot.png) repeat-y; float: left; height: 155px; margin: 35px 5px 0 5px; width: 1px; } .info-box-column-bottom-divider { background: url(../images/background/divider_dot.png) repeat-y; float: left; height: 185px; margin: 10px 5px 0 5px; width: 1px; } /* ------------------------------------------------------------------------- 1.03 Facebook Plugin Container ------------------------------------------------------------------------- */ #facebook-footer-container { height: 219px; } #facebook-footer-container-inner { padding-top: 20px; } /* ------------------------------------------------------------------------- 1.04 Main Body Container ------------------------------------------------------------------------- */ #top-skinny-banner { float: none; margin-bottom: 5px; overflow: hidden; position: relative; } #main-body-container { background: url(../images/background/bg_main_body.png) repeat-y scroll center center transparent; float: none; min-height: 180px; padding-bottom: 15px; overflow: hidden; width: 100%; z-index: 1; } #main-body-container-inner { background: #FFF; float: none; height: auto; margin: 20px auto 0; } .footer-overlay-left-background, .footer-overlay-right-background { float: none; height: 100%; position: absolute; top: 0; width: 100px; } .footer-overlay-left-background { background: url(../images/background/left_bg_filler.png) left center repeat-y; left: 0; margin-right: -10px; } .footer-overlay-right-background { background: url(../images/background/right_bg_filler.png) right center repeat-y; right: 0; margin-left: -10px; } #footer-left-bottom-shadow { background: url(../images/background/page_frame_sprite.png) -43px -53px no-repeat; float: left; height: 63px; margin: 157px 0 0 -1px; width: 31px; } #footer-checkout-left-bottom-shadow { background: url(../images/background/page_frame_sprite.png) -43px -53px no-repeat; float: left; height: 63px; margin: 3px 0 0 -1px; width: 31px; } #footer-right-bottom-shadow { background: url(../images/background/page_frame_sprite.png) -11px -53px no-repeat; height: 63px; float: right; margin: 157px -1px 0 0; width: 31px; } #footer-checkout-right-bottom-shadow { background: url(../images/background/page_frame_sprite.png) -11px -53px no-repeat; height: 63px; float: right; margin: 3px -1px 0 0; width: 31px; } #footer-overlay-3color-bg { background: url(../images/background/bg_3color.png) repeat-x scroll 0 0 transparent; height: 64px; margin-top: -63px; position: absolute; width: 100%; z-index: -1; } #footer-overlay-bottom-bg { background-color: #D6D6D6; width: 100%; } #footer-overlay-bottom-image { background: url(../images/background/page_frame_sprite.png) -1px 0px no-repeat; height: 40px; margin: 0 auto; width: 1066px; } /* _____________________________________________________________________________ 2. COASTAL CONTACTS WIDGETS _____________________________________________________________________________ */ /* _____________________________________________________________________________ 3. FAVORITE ICONS _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 3.00 Favorite Icons ------------------------------------------------------------------------- */ .favorite-added-top-nav, .favorite-added-to-product { background: url(../images/icons/favorites.png) no-repeat scroll -17px 0px transparent; cursor: pointer; height: 16px; float: left; margin-right: 3px; width: 16px; } .favorite-removed-top-nav, .favorite-removed-from-product { background: url(../images/icons/favorites.png) no-repeat scroll 0px 0px transparent; cursor: pointer; height: 16px; float: left; margin-right: 3px; width: 16px; } #favorites-toggle-group { margin-right: 6px; } #nav-menu-favorites-counter { color: #0069aa; cursor: pointer; } .nav-menu-fav-wrapper { font-size: 12px; line-height: 12px; margin-top: 2px; } .nav-menu-fav-wrapper a { color: #A5A5A5; } .nav-menu-fav-wrapper a:hover { color: #30659A; text-decoration: underline; } .nav-menu-favorites-counter-link { display: inline; } .add-to-favorites-link { color: #0069aa !important; float: left; font-family: Arial; font-size: 12px !important; font-weight: none !important; padding-left: 20px; text-decoration: underline !important; width: 160px; } /* _____________________________________________________________________________ 4. FANCYBOX (LIGHTBOX) _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 4.01 Fancybox Plugin Overwrites ------------------------------------------------------------------------- */ #fancybox-content { background-color: #fff; border-color: #828282; border-width: 5px !important; } #fancybox-close { background: url(../images/buttons/btn_close.png) -41px 0px no-repeat; height: 44px; right: -12px !important; top: -12px !important; width: 42px; } #fancybox-close:hover { background-position: -0px 0px; } #fancybox-wrap { margin: 0px auto !important; /* Always center the fancybox on the screen */ } #fancybox-overlay { position: fixed; /* Fixing the problem when lightbox dynamically changes its hight, it can show empty space if it goes beyond the max page height */ } /* _____________________________________________________________________________ 5. LIVE CHAT _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 5.01 LIVE CHAT ------------------------------------------------------------------------- */ .live-chat-footer { bottom: 0; height: 34px; cursor: pointer; position: fixed; right: 0; width: 198px; z-index: 9999; /* Needs to be above all containers */ } .live-chat-footer a { font: normal 12px arial; color: #000000; text-decoration: none; } .live-chat-footer a:hover { text-decoration: underline; } #live-chat-footer { display: none; } #live-chat { clear: both; margin-bottom: 10px; } /* _____________________________________________________________________________ 6. ERROR PAGE _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 6.01 ERROR PAGE ------------------------------------------------------------------------- */ #main-error-container { color: #585858; font-family: arial; margin: 30px auto 0; text-align: center; } #main-error-container h2 { font-size: 24px; } #baby-container { background: url(../images/coastal-images/error/baby.jpg) no-repeat scroll 0 0 transparent; height: 248px; margin: 0 auto; width: 375px; } #error-page-links-container { margin-top: 20px; } /* _____________________________________________________________________________ 7. NEWSLETTER POPUP _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 7.01 NEWSLETTER POPUP ------------------------------------------------------------------------- */ #pop-newsletter-container { margin-top: 70px; } #pop-newsletter-content { margin: 30px; } #pop-newsletter-banner { background: url(../images/coastal-images/popup/newsletter/bnr_bethefirst.png) no-repeat scroll 0 0 transparent; height: 51px; margin-top: -40px; width: 261px; } #pop-newsletter-insider-title { background: url(../images/coastal-images/popup/newsletter/txt_insider.png) no-repeat scroll 0 0 transparent; height: 27px; margin-top: 15px; width: 264px; } #pop-newsletter-txt { color: #0069aa; font-size: 14px; margin-top: 5px; } #pop-newsletter-form-container { width: 100%; } .newsletter-form { border: 1px solid #CCCCCC; color: #444444; font: normal 14px arial; height: 26px; margin-bottom: 10px; text-indent: 5px; width: 265px; } .newsletter-form-error { border: 1px solid #FF0000; color: #FF0000; } #pop-newsletter-lastname { float: left; } #pop-newsletter-submit { float: right; margin-right: 70px; } #pop-newsletter-footer { clear: both; font-style: italic; } #pop-newsletter-form-response, #pop-newsletter-form-subscripbed { color: #6c6c6c; font: normal 16px arial; margin-top: 30px; } #trigger-newsletter { display: none; padding-bottom: 5px; padding-top: 18px; } #pop-newsletter-privacy-link { color: #000000; font-family: inherit; font-size: 14px; font-style: inherit; } /* Quick Links styles */ .autocomplete-results { border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; background-color: white; border-left: 1px solid #4D4D4D; border-bottom: 1px solid #4D4D4D; border-right: 1px solid #4D4D4D; font-size: 12px; font-family: arial; padding-top: 10px; position: absolute; width: 327px !important; z-index: 1001; } .autocomplete-results a { color: #585858; font-size: 12px; font-family: arial; font-weight: bold; } .autocomplete-results div.autocomplete-first-line { color: #e8227E; font-size: 16px; font-weight: bold; margin-left: 10px; margin-bottom: 10px; } .autocomplete-results ul, .autocomplete-results ul li { margin: 0px; padding-right: 12px; padding-left: 12px; list-style: none; } .autocomplete-results ul li { background: url(../images/background/horizontal_divider.png) repeat-x scroll right bottom transparent; } .autocomplete-results .product-description { color: #222222; } .autocomplete-results .product { border: 0px solid red; clear: left; border-top: 1px solid white; border-bottom: 1px solid white; padding-bottom: 5px; } .autocomplete-results .product:hover { background-position: 35px 0px; background-repeat: repeat-y; border-top: 1px solid #dee8ec; border-bottom: 1px solid #dee8ec; cursor: pointer; } .autocomplete-results .product .product-image { float: left; padding-top: 10px; margin-right: 15px; border: 0px solid black; text-align: right; } .autocomplete-results .product .product-image img { display: inline; } .autocomplete-results .product .product-name { padding-top: 20px; } tr.autocomplete-even-row { background-color: #ffffff; } tr.autocomplete-odd-row { background-color: #ffffff; } td.autocomplete-row { padding-top: 10px; } div.autocomplete-last-line { margin-top: 10px; text-align: center; height: 30px; } div.autocomplete-last-line a { font-weight: normal; color: #585858; font-family: arial; } .seo-footer-underline { text-decoration: underline; } /* _____________________________________________________________________________ 8. UNSUBSCRIBE _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 8.01 UNSUBSCRIBE CONTAINER ------------------------------------------------------------------------- */ .unsubscribe-container { height: auto; margin: 0px auto; text-align: center; width: 700px; } .unsubscribe-main-container { border: 1px solid #cccccc; clear: both; float: left; width: 700px; } .unsubscribe-preferences-heading-container, .unsubscribe-email-heading-container { border-bottom: 1px solid #cccccc; float: left; width: 100%; } .unsubscribe-preferences-heading { color: #0069AA; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 10px 15px; } .unsubscribe-preferences-body-container { padding: 10px 15px; } .unsubscribe-preferences-email-info { float: left; border-bottom: 1px solid #cccccc; padding-bottom: 10px; width: 100%; } .unsubscribe-email-text-info { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; float: left; padding: 10px 0px; width: 100%; } .unsubscribe-preferences-email-heading, .unsubscribe-email-heading-text, .unsubscribe-email-text-box, .unsubscribe-email-address { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: left; padding: 10px 0px; } .unsubscribe-email-text-box-info { padding-left: 5px; margin-top: -2px; } .unsubscribe-preferences-email-id { float: left; font-family: Arial,Helvetica,Sans-serif; font-size: 13px; padding: 9px 5px; } .unsubscribe-preferences-wrapper { /*margin: 10px 0px;*/ } .unsubscribe-preferences-container { border-right: 1px solid #cccccc; float: left; margin: 15px 0px 80px; width: 323px; } .unsubscribe-modify-heading { color: #808080; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; } .unsubscribe-frequency, .unsubscribe-type { padding: 10px 0px; } .unsubscribe-frequency-heading, .unsubscribe-type-heading { font-family: arial,helvetica,sans-serif; font-size: 13px; font-weight: bold; margin-bottom: 5px; } .unsubscribe-frequency-info { color: #808080; font-family: Arial,Helvetica,Sans-serif; font-size: 13px; margin-left: -5px; } .unsubscribe-type-info { color: #808080; float: left; font-family: Arial,Helvetica,Sans-serif; font-size: 13px; margin-right: 10px; margin-left: -3px; } .unsubscribe-type-err-msg { background-color: #FFFFC3; border: 1px solid #808080; float: right; margin-right: 20px; width: 175px; display: none; } .unsubscribe-type-err-msg-content { color: #808080; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 5px; } .unsubscribe-email-err-msg { background-color: #FFFFC3; border: 1px solid #808080; float: left; margin-left: 120px; width: 250px; } .unsubscribe-email-err-msg-content { color: #808080; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 5px; } .update-preferences-button { clear: both; padding: 20px 20px 20px 0px; } .unsubscribe-or-divider { background-color: #ffffff; color: #626262; float: left; font-family: Arial,Helvetica,Sans-serif; font-size: 18px; margin-left: -14px; margin-top: 155px; text-shadow: 1px 1px 3px #B2B2B2; } .unsubscribe-all-container { float: right; margin-top: 15px; width: 323px; } .unsubscribe-all-content { color: #808080; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; padding-bottom: 20px; padding-left: 25px; } div.unsubscribe-all-button { margin: 20px 0 20px 25px; } .unsubscribe-preferences-changed-container, .unsubscribe-success-container { margin: 20px; } .unsubscribe-preferences-changed-wrapper, .unsubscribe-success-wrapper { width: 660px; } .unsubscribe-preferences-changed-heading, .unsubscribe-success-heading { font-family: Arial,Helvetica,Sans-serif; font-size: 24px; font-weight: bold; } .unsubscribe-preferences-changed-preferences, .unsubscribe-success-email { font-family: Arial,Helvetica,Sans-serif; font-size: 18px; padding: 10px 0; } .unsubscribe-preferences-changed-success-text, .unsubscribe-success-text { color: #808080; font-family: Arial,Helvetica,Sans-serif; font-size: 14px; padding: 5px 0; } .unsubscribe-preferences-changed-modify-wrapper { clear: both; width: 350px; } .unsubscribe-preferences-changed-modify-text { color: #808080; font-family: Arial,Helvetica,Sans-serif; font-size: 14px; margin: 10px 0; } .unsubscribe-preferences-modify-btn-container { padding-bottom: 150px; } .unsubscribe-preferences-changed-modify-btn { float: left; margin-top: 20px; } .unsubscribe-preferences-changed-back-to-home { float: left; margin-left: 50px; margin-top: 20px; text-decoration: none; } .unsubscribe-preferences-changed-back-link, .unsubscribe-success-back-btn-link { font-family: Arial,Helvetica,Sans-serif; font-size: 16px; font-weight: bold; text-decoration: none; vertical-align: middle; } .unsubscribe-success-back-btn-wrapper { clear: both; margin-bottom: 200px; } .unsubscribe-success-back-btn-container { margin-top: 20px; text-decoration: none; } .unsubscribe-email-text-box-info input { border: 1px solid #989898; padding-left: 5px; width: 160px; } /* _____________________________________________________________________________ 9. MOBIFY _____________________________________________________________________________ */ #mobify-button-container { margin: 0 auto; margin-top: 10px; width: 300px; display: none; } #mobify-button-group { padding: 0; width: 300px; height: 60px; position: absolute; } #mobify-button-group img { float: left; width: 150px; } /* _____________________________________________________________________________ 10. Unavailable Coupon Products _____________________________________________________________________________ */ .unavailable-products-container-border { border: 7px solid #000099; width: auto; } .unavailable-products-container { padding: 10px; } .unavailable-products-container p { color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 11px; line-height: 2; } .unavailable-products-container a { color: #0069aa; font-family: Arial,Helvetica,sans-serif; font-size: 11px; font-weight: normal; text-decoration: underline; } .unavailable-products-container h3 { color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 11px; font-style: italic; text-decoration: underline; } .unvailable-products-text { color: #0069aa; font-family: Arial,Helvetica,sans-serif; } /* _____________________________________________________________________________ 11. Hotspot Containers _____________________________________________________________________________ */ #top-header-hotspot-container { float: none; margin: 0 auto; } #lnav-hotspot-container { overflow: hidden; width: 100%; } /* _____________________________________________________________________________ 12. BOXES _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 12.01 Information Message Box ------------------------------------------------------------------------- */ .info-box-wrapper { background: #f6f6f6; border: solid 2px #939598; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; margin: 30px auto; text-align: center; width: 500px; } .info-box-wrapper h1 { color: #616163; font-size: 16px; font-weight: bold; margin-top: 15px; } .info-box-wrapper div { margin: 10px 30px; text-align: center; } /* ____________________________________________________________________________ 13. REDIRECT TOP BANNER _____________________________________________________________________________*/ #redirect-banner-container { background-color: #0068ad; display: none; height: 45px; margin-bottom: 25px; width: 100%; z-index: 1001; } .inner-redirect-container { color: #FFFFFF; font: normal 12px arial; margin: 0 auto; width: 966px; } .inner-redirect-container > div { float: left; } .inner-redirect-container .redirect-welcome-txt { font-size: 18px; line-height: 2.5; } .redirect-welcome-txt { margin-right: 50px; } .redirect-canada-flag { background: url(../images/icons/ca_us_flag.png) 0 0 no-repeat; float: right; height: 21px; margin: 12px 0 0 -20px; cursor: pointer; width: 40px; margin-right: 15px; } .redirect-us-flag { background: url(../images/icons/ca_us_flag.png) -41px 0 no-repeat; float: right; height: 21px; margin: 12px 0 0 -20px; cursor: pointer; width: 40px; } .redirect-link-txt { cursor: pointer; line-height: 4; margin-right: 25px; text-decoration: underline; } .inner-redirect-container .close-redirect-link { cursor: pointer; float: right; font-weight: bolder; text-decoration: none; } /* ____________________________________________________________________________ 14. Newsletter Subscription Page _____________________________________________________________________________*/ .newsletter-thankyou-confirm-container h1 { font-family: 'Lato', arial, 'sans-serif'; font-weight: 300; font-size: 36px; letter-spacing: .25pt; color: #0069aa; line-height: 120%; text-align: center; text-transform: uppercase; margin: 40px 0; } .newsletter-thankyou-confirm-container p { font-family: 'Lato', arial, 'sans-serif'; font-weight: 300; font-size: 14px; letter-spacing: .25pt; color: #2e2e2e; line-height: 120%; text-align: center; margin-bottom: 20px; text-align: center; } .newsletter-shop-now-btn-container { text-align: center; } .newsletter-shop-now-btn { margin-right: 20px; } .newsletter-shop-now-btn a { line-height: 2.5em; font-weight: 800; text-decoration: none; display: block; font-family: Arial,Verdana,Helvetica,sans-serif; text-align: center; font-size: 12px; color: #fff; text-transform: uppercase; } /* ------------------------------------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: The CSS file for refined search pages such as the Category, Sub-Category pages. -------------------------------------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. PRODUCT CATEGORY PAGE 1.0 PAGINATION 1.1 PRODUCT ATTRIBUTES 1.2 FAVORITES 2. SFX (Special Effects Lenses) 3. WEEKLY/DAILY DEALS ==================================== */ /* Global mixins import */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: Global reusable styles to ensure consistent layout across pages. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== i. SASS MIXINS 1. SASS GLOBAL VARIABLES 2. SASS GLOBAL MIXINS 2.1 GLOBAL TILE/BOX BORDER & BACKGROUND 2.2 MIXINS FOR COMMON UI REQUIREMENTS ==================================== */ /* _____________________________________________________________________________ 1. SASS GLOBAL VARIABLES _____________________________________________________________________________ */ /* The assets domain name as set in config.rb for each store */ /* Image references */ /* ------------------------------------------------------------------------------------------------------------------ Coastal Contacts * DESCRIPTION: A repository of image references used in SCSS during Compass compilation. NOTE: Please check if a variable for an image has been already created before creating a new one. This SASS partial is meant to be the central place for image references used in CSS. --------------------------------------------------------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. IMAGE FOLDERS MAPPINGS 1.1 Background Images with height and width 1.2 Buttons Paths 1.3 Coastal Paths 1.4 Icons Paths 1.5 Logos Paths 2. IMAGE REFERENCES 1.1 Background Images 1.2 Buttons Images 1.3 Coastal Images (/coastal-images) 1.4 Icon Images 1.5 Logo Images ==================================== */ /* _____________________________________________________________________________ 1. IMAGE FOLDERS MAPPINGS _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Paths ---------------------------------------------------------------------------- */ /* Images under /images/background/ */ /* ---------------------------------------------------------------------------- 1.2 Buttons Paths ---------------------------------------------------------------------------- */ /* Images under /images/buttons/ */ /* ---------------------------------------------------------------------------- 1.3 Coastal Paths ---------------------------------------------------------------------------- */ /* Images under /images/coastal-images/ */ /* Images under /images/coastal-images/account */ /* Images under /images/coastal-images/bml */ /* Images under /images/coastal-images/category */ /* Images under /images/coastal-images/coating */ /* Images under /images/coastal-images/ecp */ /* Images under /images/coastal-images/epay */ /* Images under /images/coastal-images/error */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/home */ /* Images under /images/coastal-images/navigation */ /* Images under /images/coastal-images/payment */ /* Images under /images/coastal-images/popup */ /* Images under /images/coastal-images/popup/newsletter */ /* Images under /images/coastal-images/popup/style-wizard */ /* Images under /images/coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icons Paths ---------------------------------------------------------------------------- */ /* Images under /images/icons/ */ /* ---------------------------------------------------------------------------- 1.5 Logos Paths ---------------------------------------------------------------------------- */ /* Images under /images/logos/ */ /* _____________________________________________________________________________ 2. IMAGE REFERENCES _____________________________________________________________________________ */ /* ---------------------------------------------------------------------------- 1.1 Background Images with height and width ---------------------------------------------------------------------------- */ /* Weekly Deals background images */ /* ---------------------------------------------------------------------------- 1.2 Buttons Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.3 Coastal Images (/coastal-images) ---------------------------------------------------------------------------- */ /* Images under coastal-images/account/addressPayment */ /* Images under coastal-images/account/autoRefill */ /* Images under coastal-images/account/home */ /* Images under coastal-images/account/lnav */ /* Images under coastal-images/account/orderHistory */ /* Images under coastal-images/account/referFriend */ /* Images under coastal-images/account/registration */ /* Images under coastal-images/account/rx */ /* Images under coastal-images/category */ /* Images under coastal-images/ecp */ /* Images under coastal-images/epay */ /* Images under coastal-images/error */ /* Images under coastal-images/header */ /* Images under coastal-images/navigation */ /* Images under coastal-images/popup/newsletter */ /* Images under coastal-images/popup/style-wizard */ /* Images under coastal-images/product */ /* ---------------------------------------------------------------------------- 1.4 Icon Images ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.5 Logo Images ---------------------------------------------------------------------------- */ /* _____________________________________________________________________________ 2. SASS GLOBAL MIXINS _____________________________________________________________________________ */ /* Payment Page Color Specific Progress Bar */ /* ------------------------------------------------------------------------- 2.1 GLOBAL TILE/BOX BORDER & BACKGROUND ------------------------------------------------------------------------- */ /* For modern browsers that support box-shadow property & CSS3*/ /* Mainly for IE8 that doesn't support box-shadow property */ /* Mainly for IE7 that doesn't support box-shadow property */ /* ------------------------------------------------------------------------- 2.2 MIXINS FOR COMMON UI REQUIREMENTS ------------------------------------------------------------------------- */ /* Aligns an element vertically (middle). The parent container needs to have - position: relative; NOTE: Supported for IE8 and above. */ /*CSS IMPORT*/ /*! * jQuery contextMenu - Plugin for simple contextMenu handling * * Version: git-master * * Authors: Rodney Rehm, Addy Osmani (patches for FF) * Web: http://medialize.github.com/jQuery-contextMenu/ * * Licensed under * MIT License http://www.opensource.org/licenses/mit-license * GPL v3 http://opensource.org/licenses/GPL-3.0 * */ .context-menu-list { margin: 0; padding: 0; min-width: 120px; max-width: 250px; display: inline-block; position: absolute; list-style-type: none; border: 1px solid #DDD; background: #EEE; -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } .context-menu-item { padding: 1px 7px; margin: 4px 0px; background-color: #EEE; position: relative; text-align: left; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; } .context-menu-separator { padding-bottom: 0; border-bottom: 1px solid #DDD; } .context-menu-item > label > input, .context-menu-item > label > textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .context-menu-item.hover { color: #fff; cursor: pointer; background-color: #39F; } .context-menu-item.disabled { color: #666; } .context-menu-input.hover, .context-menu-item.disabled.hover { cursor: default; background-color: #EEE; } .context-menu-submenu:after { content: ">"; color: #666; position: absolute; top: 0; right: 3px; z-index: 1; } /* vertically align inside labels */ .context-menu-input > label > * { vertical-align: top; } /* position checkboxes and radios as icons */ .context-menu-input > label > input[type="checkbox"], .context-menu-input > label > input[type="radio"] { margin-left: -17px; } .context-menu-input > label > span { margin-left: 5px; } .context-menu-input > label, .context-menu-input > label > input[type="text"], .context-menu-input > label > textarea, .context-menu-input > label > select { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .context-menu-input > label > textarea { height: 100px; } .context-menu-item > .context-menu-list { display: none; /* re-positioned by js */ right: -5px; top: 5px; } .context-menu-item.hover > .context-menu-list { display: block; } .context-menu-accesskey { text-decoration: underline; } /* _____________________________________________________________________________ 1 PRODUCT CATEGORY PAGE _____________________________________________________________________________*/ .tab-width-12 { font-size: 12px; } #browsed-product { background: url(../images/background/prod_bg.png) no-repeat; height: 346px; padding: 5px 0; width: 246px; } #browsed-product:hover { background: url(../images/background/prod_bg_hover.png) no-repeat; } #browsed-product-try-on-view { background: url(../images/background/prod_bg_virtual_mirror.png) no-repeat; height: 515px; float: left; padding: 5px 0; width: 246px; } #browsed-product-try-on-view:hover { background: url(../images/background/prod_bg_virtual_mirror_hover.png) no-repeat; } .product-container, .product-container-try-on-view { cursor: pointer; margin-bottom: 10px; margin-right: 10px; position: relative; width: 246px; z-index: 2; } .product-container { height: 346px; } .product-container-try-on-view { height: 515px; } .product-container-hover { background: url(../images/background/prod_bg_hover.png) no-repeat; } .product-grid-info-container { margin-left: 10px; text-align: center; width: 202px; } .product-grid-info-container-try-on-view { margin-left: 10px; text-align: center; width: 202px; margin-top: 280px; } .product-inner-grid-container { left: 13px; height: 280px; margin: 0px; position: absolute; padding: 0px; text-align: center; width: 220px; } img.face-image { margin-left: -2px; } .product-size-match, .product-size-match-placeholder { height: 20px; margin-top: 10px; } .product-size-match { background: url(../images/background/prod_size_match_divider.png) bottom no-repeat; color: #585858; display: inline-block; font: 10px Arial; } .product-size-score { display: inline-block; } .product-size-score .filled-bar, .product-size-score .empty-bar { height: 10px; float: left; margin-right: 3px; width: 6px; } .product-size-score .filled-bar { border: 1px solid #336699; background-color: #336699; } .product-size-score .empty-bar { border: 1px solid #ddd; } .seo-category-container { clear: both; color: #585858; font: normal 12px arial; line-height: 15px; padding-left: 8px; text-align: left; } /* ------------------------------------------------------------------------- 1.0 Pagination ------------------------------------------------------------------------- */ .pagination-nav { background-color: #d7eaf9; color: #2e2e2e; float: left; font: normal 12px Arial; line-height: 30px; margin-bottom: 10px; padding: 0px 10px 0px 10px; width: 738px; } .pagination-group { float: left; padding-right: 60px; } .pagination-sort-by { float: right; line-height: 30px; vertical-align: middle; } .pagination-internal { float: left; font-weight: bold; } .pagination-internal img { vertical-align: middle; } .pagination-internal a { color: #2e2e2e; font-weight: normal; margin: 0px 5px; text-decoration: none; } #pagination-nav-left, #pagination-nav-right { cursor: pointer; float: left; margin-top: 5px; height: 20px; width: 20px; } #pagination-nav-left { background: url(../images/background/pagination_and_slider_sprite.png) 0px 0px no-repeat; height: 20px; width: 20px; } #pagination-nav-left:hover { background: url(../images/background/pagination_and_slider_sprite.png) 0px -21px no-repeat; height: 20px; width: 20px; } #pagination-nav-right { background: url(../images/background/pagination_and_slider_sprite.png) -21px 0px no-repeat; height: 20px; width: 20px; } #pagination-nav-right:hover { background: url(../images/background/pagination_and_slider_sprite.png) -21px -21px no-repeat; height: 20px; width: 20px; } #pagination-nav-page-numbs { float: left; margin: 0px 3px; } .viewall { color: #2e2e2e; font-weight: normal; float: right; } .viewall a { color: #2e2e2e; font-weight: normal; text-decoration: none; } .viewall-separator { color: #2e2e2e; font-weight: normal; float: right; padding-left: 10px; padding-right: 10px; } .back-to-top a { color: #2e2e2e; float: right; text-decoration: none; } .filter-search { float: left; width: 100%; } .filter-search-container { background-color: #F0F0F0; color: #585858; float: left; font: bold 12px arial; margin: 0 10px 5px 0; padding: 5px; } .filter-search-container > div { float: left; margin-right: 5px; } .filter-search-close { background: url(../images/background/category_sprite.png) -51px -51px no-repeat; cursor: pointer; height: 15px; width: 15px; } /* ------------------------------------------------------------------------- 1.1 Product Attributes ------------------------------------------------------------------------- */ .product-attributes-container-generic, .product-attributes-container-glasses, .product-attributes-container-try-on-view { left: 22px; padding: 0px; position: relative; z-index: 10; width: 202px; } .product-attributes-container-generic, .product-attributes-container-glasses { top: -105px; } .product-attributes-container-try-on-view { top: -125px; } .product-attributes-header { height: 25px; padding: 0px; text-align: center; width: 100%; } .product-attributes-footer { height: 20px; margin-top: 5px; width: 100%; } .product-size { display: none; float: left; height: 25px; margin-left: 3px; padding-left: 1px; width: 14px; position: relative; } .product-gender-male-and-female, .product-gender-female, .product-gender-male, .product-gender-child { cursor: pointer; position: absolute; left: 0; height: 14px; z-index: 111; } .product-gender-size-small, .product-gender-size-medium, .product-gender-size-large, .product-gender-size-extra-large { position: absolute; left: 0; height: 14px; z-index: 111; } .product-gender-size-small, .product-gender-size-medium, .product-gender-size-large, .product-gender-size-extra-large { width: 14px; margin-left: 44px; } .product-gender-male-and-female { background: url(../images/background/category_sprite.png) -28px -69px no-repeat; width: 29px; } .product-review-margin { margin-left: 70px !important; } .product-gender-female, .product-gender-male { width: 14px; } .product-gender-female { background: url(../images/background/category_sprite.png) -44px -69px no-repeat; } .product-gender-male { background: url(../images/background/category_sprite.png) -28px -69px no-repeat; } .product-gender-child { background: url(../images/background/category_sprite.png) -57px -69px no-repeat; width: 16px; } .product-gender-size-small { background: url(../images/background/category_sprite.png) -28px -86px no-repeat; } .product-gender-size-medium { background: url(../images/background/category_sprite.png) -44px -86px no-repeat; } .product-gender-size-large { background: url(../images/background/category_sprite.png) -60px -86px no-repeat; } .product-gender-size-extra-large { background: url(../images/background/category_sprite.png) -76px -86px no-repeat; } .product-review { width: 100%; } .product-review div.coastal-tooltip div.coastal-tooltip-body-container-info > div { text-align: center; } .product-progressive-active, .product-see-more-colors { color: #585858; font-family: Arial; font-size: 9px; height: 20px; margin: 0px; padding: 0px; position: absolute; } .product-progressive-active { left: 0px; width: 130px; } .product-see-more-colors { cursor: pointer; left: 130px; text-decoration: underline; width: 90px; } #browsing-wrapper { float: none; margin: 10px auto 0; } .additional-browsing { float: left; padding-top: 10px; width: 966px; } /* ------------------------------------------------------------------------- 1.2 Favorites ------------------------------------------------------------------------- */ .favorite-added, .favorite-removed { cursor: pointer; height: 16px; right: 0px; top: 0px; position: absolute; width: 16px; z-index: 111; } .favorite-added { background: url(../images/icons/favorites.png) no-repeat scroll -17px 0px transparent; cursor: pointer; height: 16px; float: left; margin-right: 3px; width: 16px; } .favorite-removed { background: url(../images/icons/favorites.png) no-repeat scroll 0px 0px transparent; cursor: pointer; height: 16px; float: left; margin-right: 3px; width: 16px; } .no-favorites-added-container, .share-your-favorites-container { color: #000; font-family: Arial; font-style: normal; font-size: 12px; margin-top: 5px; padding: 0px; width: 100%; } .no-favorites-added-container a, .share-your-favorites-container a { color: #0069aa; font-weight: normal; } .no-favorites-added-container a { text-decoration: underline; } .share-your-favorites-container a { text-decoration: underline; text-decoration: none; } #no-favorites-left-msg { float: left; width: 400px; } #no-favorites-left-msg ul { list-style: none; } #no-favorites-left-msg li { padding-bottom: 20px; } #no-favorites-left-msg li:first-child { background: url(../images/icons/favorite_added.png) 0px 7px no-repeat; color: #0069AA; font-size: 18px; padding-left: 25px; } .share-on-facebook, .share-on-twitter { cursor: pointer; display: inline-block; height: 20px; width: 25px; } .share-on-facebook { background: url(../images/background/footer_header_icons_sprite.png) 0px -76px no-repeat; } .share-on-twitter { background: url(../images/background/footer_header_icons_sprite.png) 0px -27px no-repeat; } .no-favorites-register-sign-in, .share-your-favorites-txt { float: right; padding-left: 5px; } /* _____________________________________________________________________________ 2 SFX (Special Effects Lenses) _____________________________________________________________________________*/ .sfx-categories { text-align: center; margin-top: 30px; } .sfx-category-intro-header { position: relative; } .sfx-category { position: relative; float: left; margin-top: 32px; } .sfx-category-head-banner { background: url(../images/coastal-images/category/sfx_head_banner.png) no-repeat; float: right; height: 273px; width: 966px; } .sfx-spooky-left-banner { background: url(../images/background/sfx_spooky_banner_bg.png) no-repeat; float: left; height: 256px; margin-left: 10px; width: 592px; } .sfx-spooky-left-banner-title { color: #B1EB5E; font-family: 'Modern Antiqua', cursive; font-size: 24px; left: 0; margin: 88px 0px 0px 120px; position: absolute; } .sfx-spooky-left-banner-body { color: #C4C4BA; font-family: 'Modern Antiqua', cursive; font-size: 19px; left: 0; line-height: 25px; margin: 125px 0px 0px 70px; position: absolute; text-align: center; width: 450px; } .sfx-faq { background: url(../images/background/sfx_faq_bg.png) no-repeat; float: right; height: 179px; width: 362px; } .sfx-faq-content, .sfx-faq-note { margin-right: 25px; text-align: center; } .sfx-faq-content { color: #B1EB5E; font-family: 'Modern Antiqua', cursive; font-size: 16px; margin-top: 100px; margin-left: 20px; position: absolute; right: 0; width: 327px; } .sfx-faq-content a { color: #C4C4BA; display: block; font-family: Arial; font-size: 14px; text-decoration: underline; } .sfx-faq-note { line-height: 17px; margin-top: 180px; position: absolute; right: 0; width: 340px; } .sfx-faq-please-note, .sfx-faq-note-body { font-family: Arial; font-size: 14px; font-weight: bold; } .sfx-faq-please-note { color: #FF0000; } .sfx-faq-note-body { color: #585858; } .sfx-category-header { float: left; position: relative; } /* Do NOT change class name. This class is defined in The Core for the SFX (Halloween Contacts Special Effects Lenses) category. */ .LimelightEmbeddedPlayer { position: absolute; display: block; right: 40px; } .sfx-category-products { float: left; position: relative; } .sfx-product, .sfx-product-name, .sfx-product-price { text-align: center; width: 222px; } .sfx-product { float: left; min-height: 161px; padding: 0px 6px; position: relative; } .sfx-product-img { float: none; min-height: 101px; text-align: center; } .sfx-product-line { clear: both; float: left; margin: 0px 16px 40px 16px; width: 966px; } .sfx-product .last { margin-left: 0; } .sfx-product-name, .sfx-product-price { font-family: 'Modern Antiqua', cursive; line-height: 20px; } .sfx-product-name { color: #2E2E2E; font-size: 14px; padding: 0px 0px 5px 0px; } .sfx-product-price { color: #585858; font-size: 16px; padding: 3px 0px 3px 0px; } /* _____________________________________________________________________________ 3 WEEKLY/DAILY DEALS _____________________________________________________________________________*/ div#weeklydeal-container { border: 0px solid red; font-family: arial; margin: 0 auto; padding: 0; width: 966px; } div#weeklydeal-container a:hover { cursor: pointer; } div#weeklydeal-header { color: #fff; height: 240px; font-weight: bold; position: relative; width: 966px; } div#weeklydeal-header #counter { border: 0px solid #000; color: #000; font-size: 75px; left: 457px; position: absolute; top: 43px; } div#weeklydeal-header #max-saving { position: absolute; font-size: 24px; left: 370px; top: 144px; } div#weeklydeal-header .text3 { border: 0px solid #000; color: #fff; font-size: 14px; left: 370px; position: absolute; top: 184px; } div#weeklydeal-header .text3 a { color: #fff; font-size: 14px; margin: 0 10px; text-decoration: underline; } div#weeklydeal-featured { background: url(../images/background/weekly-daily-deals/weeklydeal-main.png) no-repeat; height: 257px; font-weight: bold; margin-top: 10px; position: relative; width: 966px; } div#weeklydeal-featured a { /* IE 6, 7 fixes */ display: block; height: 257px; width: 966px; } div#weeklydeal-featured #featured-text { border: 0px solid #000; color: #fff; font-size: 26px; left: 33px; line-height: 120%; position: absolute; top: 155px; width: 140px; } div#weeklydeal-featured .product-name { border: 0px solid #000; color: #fff; font-size: 40px; left: 22px; line-height: 120%; position: absolute; top: 15px; width: 470px; } div#weeklydeal-featured .product-list-price, div#weeklydeal-featured .product-saving { border: 0px solid red; color: #000; font-size: 20px; left: 239px; position: absolute; } div#weeklydeal-featured .product-list-price { top: 140px; } div#weeklydeal-featured .product-saving { top: 203px; } div#weeklydeal-featured .product-lowest-price { border: 0px solid red; color: #fff; font-size: 29px; left: 239px; position: absolute; top: 163px; } div#weeklydeal-featured .product-image { right: 1px; position: absolute; top: 3px; } div#weeklydeal-featured .brand-logo { border: 0px solid red; height: 80px; left: 566px; top: 210px; position: absolute; text-align: center; width: 400px; } div#weeklydeal-footer { background: url(../images/background/weekly-daily-deals/weeklydeal-footer.png) no-repeat; float: left; height: 49px; margin-top: 10px; position: relative; width: 966px; } div#weeklydeal-footer * { color: #fff; font-weight: bold; font-size: 20px; } div#weeklydeal-footer a { text-decoration: underline; } div#weeklydeal-footer #text { left: 320px; position: absolute; top: 12px; } div#weeklydeal-footer #shop-now { right: 60px; position: absolute; top: 12px; } div.weeklydeal-item { background: url(../images/background/weekly-daily-deals/weeklydeal-additional.png) no-repeat; height: 227px; font-weight: bold; float: left; margin-top: 10px; width: 478px; position: relative; } div.weeklydeal-item a { /* IE 6, 7 fixes */ display: block; max-width: 478px; min-width: 478px; height: 227px; } div.weeklydeal-item.right { float: right; } div.weeklydeal-item .product-image { position: absolute; right: 4px; top: 8px; } div.weeklydeal-item .brand-logo { border: 0px solid red; height: 50px; left: 227px; position: absolute; text-align: center; top: 150px; width: 250px; } div.weeklydeal-item .product-name { border: 0px solid red; color: #fff; font-size: 18px; line-height: 120%; left: 20px; top: 28px; position: absolute; width: 170px; word-wrap: break-word; } div.weeklydeal-item .product-list-price, div.weeklydeal-item .product-saving { border: 0px solid red; color: #000; left: 45px; font-size: 14px; position: absolute; } div.weeklydeal-item .product-list-price { top: 135px; } div.weeklydeal-item .product-saving { top: 180px; } div.weeklydeal-item .product-lowest-price { border: 0px solid red; color: #fff; font-size: 18px; left: 45px; position: absolute; top: 152px; } div.search-text { color: #2E2E2E; font: bold 16px arial; } span.search-keyword-text { color: #0069AA; font: bold 14px arial; } div.search-result-text { color: #585858; font: bold 14px arial; padding-bottom: 10px; padding-top: 10px; } a.search-keyword-link { padding: 0 10px !important; } /* The CSS for the Virtual Mirror */ #vm-carousel { float: right; width: 470px; } .vm-carousel-container { background: url(//http://www.coastal.com/template-resources/images/background/vm_carousel_sprite.png) 0px 0px no-repeat; clear: both; height: 73px; padding-left: 5px; padding-top: 8px; } .vm-carousel-container-pp { background: url(//http://www.coastal.com/template-resources/images/background/vm_carousel_sprite.png) -82px -81px no-repeat; clear: both; height: 80px; margin-left: 30px; margin-top: 350px; padding-left: 5px; padding-top: 8px; width: 296px; } .face-image-carousel { cursor: pointer; height: 54px; width: 44px; } .frame-size-pp { margin-top: 0px !important; width: 248px; } .face-image-container { /* Important: Careful when adding padding. It will misplace glasses on avatars. */ padding-top: 5px; position: absolute; z-index: 5; } #product-tryon-view { height: 494px; position: relative; text-align: center; width: 356px; } .product-image-container-try-on-view { margin-left: 0; margin-top: 0; position: absolute; z-index: 9; } .frame-image { margin-top: 5px; } .frame-image-avatar { position: relative; margin: 95px 0 0 34px; width: 155px; } .frame-image-avatar-pp { margin-top: 100px !important; margin-left: 38px; width: 170px; } .frame-image-container { margin-left: 0; margin-top: 0; position: absolute; z-index: 9; } .frame-image-container-avatar-pp, .frame-image-container-pp-reset { margin-left: 55px; margin-top: 20px; position: absolute; } .frame-image-container-pp { text-align: center; } .product-glasses { min-height: 430px; width: 246px; z-index: 9; } #slider1 div[style] { width: 44px; } .pager { border: 3px solid #FFFFFF; float: left; height: 54px; margin-right: 10px; padding: 2px; width: 44px; } .pager:hover { border: 3px solid #0069aa; } .pager-selected { border: 3px solid #0069aa; } #avatar-carousel-container, #customer-carousel-container { float: left; } .customer-face-divider { border: 2px #B4B4B4; border-right-style: dotted; float: left; height: 54px; margin-right: 10px; margin-top: 5px; vertical-align: middle; width: 1px; } #vm-upload-image, #try-in-3d-image { text-align: center; width: 100%; } #vm-tools { height: 160px; text-align: center; } .vm-tools-header { color: #0069aa; font: normal 18px arial; margin-bottom: 10px; } .vm-login-txt { clear: both; color: #252552; font: 12px arial; margin: 10px auto 0; width: 150px; } .vm-login-txt-pp { height: 15px; width: 100%; } .vm-login-txt a { text-decoration: underline; } #vm-upload-tools { cursor: pointer; float: left; width: 229px; } #vm-upload-tools-pp { cursor: pointer; height: 56px; margin: 0 auto; position: relative; text-align: center; width: 100%; } #vm-upload-tools input { display: block; margin: 0 auto; } .vm-tools-divider { background: url(//http://www.coastal.com/template-resources/images/background/vm_carousel_sprite.png) -62px -81px no-repeat; float: left; height: 110px; width: 19px; } .vm-bx-prev { background: url(//http://www.coastal.com/template-resources/images/background/vm_carousel_sprite.png) 0px -81px no-repeat; height: 80px; left: -33px; position: absolute; text-indent: -999999px; top: -8px; width: 30px; } .vm-bx-prev:hover { background-position: 0 -162px; } .vm-bx-next { background: url(//http://www.coastal.com/template-resources/images/background/vm_carousel_sprite.png) -32px -81px no-repeat; height: 80px; position: absolute; left: 435px; text-indent: -999999px; top: -8px; width: 30px; } .vm-bx-next:hover { background: url(//http://www.coastal.com/template-resources/images/background/vm_carousel_sprite.png) -32px -162px no-repeat; } .vm-bx-next-pp { margin-left: -145px; } #try-in-3d-btn-container { display: none; float: right; margin-right: 30px; } .try-in-3d-or-divider { margin-right: 20px; } .try-in-3d-btn-padding { padding-left: 25px; padding-right: 25px; } .try-in-3d-btn-padding:hover { padding-left: 25px; padding-right: 25px; } .delete_face_back { display: none; position: absolute; margin: 0px 30px; width: 14px !important; background-color: rgba(0, 0, 0, 0.5); } .delete_face { cursor: pointer; background: url(../images/icons/delete_face.png) no-repeat scroll 0 0 transparent; height: 14px; width: 14px; opacity: 0.7; filter: alpha(opacity=70); } .delete_face:hover { opacity: 1; filter: alpha(opacity=100); } .face-ajax { display: none; position: absolute; margin: 11px 6px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The bloomreach CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1 RECOMMENDED PRODUCTS, RECENTLY VIEWED ITEMS & RELATED SEARCHES ==================================== */ /* ------------------------------------------------------------------------- 1. Recommended Products, Recently Viewed & Related Searches ------------------------------------------------------------------------- */ .recommended-products-wrapper, .recommended-products-subhome-wrapper, .recently-viewed-items-wrapper, .related-searches-wrapper { float: left; position: relative; text-align: left; width: 100%; } .recommended-products-wrapper { margin-bottom: 20px; } .recommended-products-wrapper { height: 220px; } .recommended-products-subhome-wrapper { height: 215px; } .recently-viewed-items-wrapper { height: 154px; } .related-searches-wrapper { min-height: 50px; } .recently-viewed-item { height: 84px; float: left; margin: 10px 10px 30px 10px; position: relative; text-align: center; width: 141px; } .recommended-prod-item, .recommended-prod-item-subhome { float: left; height: 160px; line-height: 15px; margin: 10px 10px 30px 10px; position: relative; text-align: center; width: 141px; } .recommended-prod-item-image { cursor: pointer; display: block; margin: auto; } .recommended-prod-item-title { color: #2e2e2e; display: block; font-family: Arial; font-size: 12px; font-weight: bold; height: 45px; margin-top: 5px 0px 5px 0px; text-align: center; } .product-price-border { background: url(../images/background/category_sprite.png) 0px -121px no-repeat; background-repeat: repeat-x; display: block; height: 1px; width: 100%; } .recommended-prod-item-price, .recommended-prod-item-sale-price, .recommended-prod-item-old-price { display: inline-block; font-family: Arial; font-size: 16px; padding: 3px 0px; } .recommended-prod-item-price { color: #585858; display: block; font-weight: bold; padding: 3px 0px; text-align: center; } .recommended-prod-item-old-price { color: #585858; font-size: 14px; text-decoration: line-through; } .recommended-prod-item-sale-price { color: #FF0000; font-weight: bold; } #remove-product-x { cursor: pointer; background: url(../images/buttons/btn_prod_remove.png) center top no-repeat; height: 8px; margin-right: 10px; position: absolute; right: 0; top: 0; width: 8px; z-index: 1; } .related-searches { float: left; margin: 20px 10px; position: relative; width: 100%; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The carousel CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. CAROUSEL (SLIDER) 1.01 Slider Custom Styles ==================================== */ /* _____________________________________________________________________________ 1. CAROUSEL (SLIDER) _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 15.01 jQuery bxSlider Overwrites ------------------------------------------------------------------------- */ .bx-wrapper .bx-viewport { background: #fff; box-shadow: 0 0 0 white; -moz-box-shadow: 0 0 0 white; -webkit-box-shadow: 0 0 0 white; border: none; left: 28px; /* As per mockup specs */ } .bx-wrapper .bx-pager { display: none; } .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-next:hover { background-position: 0px -20px; } .bx-wrapper .bx-prev { background: url(../images/buttons/btn_carousel_arrow_left.png) no-repeat; } .bx-wrapper .bx-next { background: url(../images/buttons/btn_carousel_arrow_right.png) no-repeat; } .bx-wrapper .bx-controls-direction a { height: 20px; z-index: 1; } .bx-wrapper .bx-controls-direction a .bx-next { right: -65px !important; } .bx-wrapper .bx-loading { background: url(//../images/icons/loader.gif) center center no-repeat; } .bx-wrapper .bx-controls-auto .bx-start { background: none; } .bx-wrapper .bx-controls-auto .bx-stop { background: none; } /* ------------------------------------------------------------------------- 1.01 Slider Custom Styles ------------------------------------------------------------------------- */ .global-carousel-item-group { float: left; list-style: none outside none; min-height: 130px; /* Need to specify min-height due to IE cuting bottom brand images. */ } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The TOP NAV CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. IMPORTS 1.01.1 TOP NAV CONTAINER 1.01.2 TOP NAV MENU CONTAINER 1.01.3 MEGA MENU ==================================== */ /* ------------------------- 1. IMPORTS ---------------------------*/ /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The PCS CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. PERSONAL STYLE CONCULTANT (PSC) 1.01 PSC - SMART WIZARD OVERWRITES 1.02 PSC - CONTENT LAYOUT ==================================== */ /* _____________________________________________________________________________ 1. PERSONAL STYLE CONCULTANT (PSC) _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 1.01 PSC - SMART WIZARD OVERWRITES ------------------------------------------------------------------------- */ .swMain, .swMain .stepContainer div.content { width: 720px; } .swMain .stepContainer div.content { height: 320px; } .swMain .stepContainer .StepTitle { height: 20px; margin: 30px 0; text-align: center; } .swMain .psc-intro-title { color: #0067a9; font: bold 18px arial; float: left; line-height: 30px; width: 430px; } .swMain ul.anchor { clear: none; float: right; line-height: 30px; margin-left: 0; padding-top: 8px; width: 150px; } .swMain ul.anchor li a.selected, .swMain ul.anchor li a.selected:hover, .swMain ul.anchor li a.done, .swMain ul.anchor li a.done:hover, .swMain ul.anchor li a.disabled, .swMain ul.anchor li a.disabled:hover { background-image: url(../images/coastal-images/popup/style-wizard/progress_dots.png); height: 8px; width: 9px; } .swMain ul.anchor li a.selected, .swMain ul.anchor li a.selected:hover { background-position: 0px -15px; border: none; } .swMain ul.anchor li a.done, .swMain ul.anchor li a.done:hover { background-position: 0px -30px; border: none; } .swMain ul.anchor li a.disabled, .swMain ul.anchor li a.disabled:hover { background-position: 0px 0px; border: none; } .swMain div.actionBar { height: 60px; } .swMain .buttonPrevious, .swMain .buttonNext { margin: 5px 0px; padding: 5px 0px; } .swMain .buttonPrevious { text-align: left; } .swMain .buttonNext { text-align: right; } .swMain .buttonFinish { margin: 0 0 0 10px; /* We need margin-right and left to be set */ overflow: hidden; width: auto; /* The button width needs to change based on the text inside */ } .swMain .buttonSkipStepAndFinish { clear: both; float: right; margin-top: 5px; text-decoration: underline; text-align: right; outline-style: none; } /* ------------------------------------------------------------------------- 1.02 PSC - CONTENT LAYOUT ------------------------------------------------------------------------- */ #psc-wizard { position: relative; padding: 25px 30px; } .psc-intro-content { padding-top: 25px; } .psc-step-content-wrapper { float: right; margin: 0 auto; position: relative; width: 100%; } .psc-step-of { color: #0067a9; display: inline-block; float: left; font-weight: bold; line-height: 30px; text-align: right; width: 130px; } #psc-wizard #step-4 { height: 400px; } #psc-wizard #step-1 { height: 320px; } #psc-wizard #step-7 { height: 310px; } .psc-select-gender, .psc-glass-material, .psc-usage-type, .psc-fashion-statement, .psc-glass-frame-type, .psc-color-scheme, .psc-frame-size { cursor: pointer; text-align: center; float: left; } .psc-select-gender { -moz-box-shadow: 0px 2px 4px #bcbcbc; -webkit-box-shadow: 0px 2px 4px #bcbcbc; box-shadow: 0px 2px 4px #bcbcbc; margin: 0 4px; padding: 15px 0 30px 0; /* Top padding is different for tile images, so we can specify top and bottom padding separately */ width: 348px; } .psc-glass-material { -moz-box-shadow: 0px 2px 4px #bcbcbc; -webkit-box-shadow: 0px 2px 4px #bcbcbc; box-shadow: 0px 2px 4px #bcbcbc; margin: 0 4px; padding: 40px 0 30px 0; /* Top padding is different for tile images, so we can specify top and bottom padding separately */ width: 348px; } .psc-glass-frame-type { -moz-box-shadow: 0px 2px 4px #bcbcbc; -webkit-box-shadow: 0px 2px 4px #bcbcbc; box-shadow: 0px 2px 4px #bcbcbc; margin: 0 4px; padding: 67px 0 20px 0; /* Top padding is different for tile images, so we can specify top and bottom padding separately */ width: 225px; } .psc-color-scheme { -moz-box-shadow: 0px 2px 4px #bcbcbc; -webkit-box-shadow: 0px 2px 4px #bcbcbc; box-shadow: 0px 2px 4px #bcbcbc; margin: 0 4px; padding: 30px 0 30px 0; /* Top padding is different for tile images, so we can specify top and bottom padding separately */ width: 348px; } .psc-fashion-statement { -moz-box-shadow: 0px 2px 4px #bcbcbc; -webkit-box-shadow: 0px 2px 4px #bcbcbc; box-shadow: 0px 2px 4px #bcbcbc; margin: 0 4px; padding: 50px 0 20px 0; /* Top padding is different for tile images, so we can specify top and bottom padding separately */ width: 226px; } .psc-usage-type-wrapper { float: left; margin-left: 15px; } .psc-usage-type { background-position: center bottom; background-repeat: no-repeat; height: 15px; margin: 20px 7px 0px 7px; padding: 45px 0 30px 0; /* Top padding is different for tile images, so we can specify top and bottom padding separately */ width: 216px; } .psc-frame-size-container { background-color: #F1F1F1; padding: 20px 0; text-align: center; } .psc-frame-size-image { height: 40px; margin: 15px auto; width: 65px; } #psc-female-fashion-preference, #psc-male-fashion-preference { float: right; } .psc-select-gender:hover, .psc-glass-material:hover, .psc-color-scheme:hover { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: "none"; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .psc-glass-frame-type:hover { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: "none"; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .psc-fashion-statement:hover { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: "none"; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #psc-size-width-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px 0px; } #psc-size-height-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -50px; } #psc-size-length-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -100px; } #psc-size-diameter-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -150px; } .psc-frame-size { cursor: default; margin: 0 5px 20px 5px; width: 170px; } #psc-size-match-close-btn { background: url(../images/icons/tips_close.png) 0 -16px no-repeat; cursor: pointer; float: right; height: 14px; margin: 5px; width: 14px; } #psc-size-match-close-btn:hover { background-position: 0px 0px; } #psc-size-match { background-color: #fff; border: 3px solid #0069AA; margin: 15px 25px; } .psc-triple-tile-margin-spacer { margin-right: 6px; } .psc-caption { text-align: center; } .psc-skip-step { position: absolute; right: 0; margin-top: 20px; } .psc-selected-double-wide-tile { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: url(//www.coastal.com/template-resources/images/coastal-images/product/selected.png) top right no-repeat; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .psc-selected-triple-short-tile { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: url(//www.coastal.com/template-resources/images/coastal-images/product/selected.png) top right no-repeat; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .psc-selected-triple-tall-tile { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: url(//www.coastal.com/template-resources/images/coastal-images/product/selected.png) top right no-repeat; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .psc-selected-usage-type, .psc-usage-type:hover { outline: 3px solid #0069AA; } /* ------------------------- 1.01.1 TOP NAV CONTAINER ---------------------------*/ .look-italics { font-style: italic; text-transform: lowercase; } #coastal-header-container { position: relative; width: 100%; z-index: 20; } #coastal-header-container-wrapper { margin: 0 auto; width: 1010px; } #top-menu-container { clear: both; height: 50px; } #top-logo-container { height: 100px; margin-top: 1px; } #tabs-hotspot { height: 50px; float: left; overflow: hidden; text-align: center; vertical-align: middle; width: 450px; } #top-nav-divider { background-color: #CECECE; clear: both; height: 1px; position: absolute; top: 52px; width: 100%; } #left-logo-container { float: left; margin: 15px 0 0 10px; } #right-logo-container { height: 100px; float: right; overflow: hidden; width: 600px; text-align: center; vertical-align: middle; } #top-menu-navigation { margin-top: 22px; float: right; text-align: right; white-space: nowrap; width: 560px; } #top-menu-navigation ul li { color: #4D4D4D; display: inline; font: normal 12px arial; } #top-menu-navigation ul li:before { color: #686868; content: " | "; } #top-menu-navigation ul li:first-child:before { content: none; } #navigation-container { background-color: #F2F2F2; margin: 0 auto; width: 1010px; } #coastal-top-navigation-container { background-color: #F2F2F2; height: 40px; text-align: center; width: 100%; } #nav-right { float: right; margin: 6px 15px 0 0; width: 257px; } #search-container { float: left; width: 161px; } #search-container input { border: 1px #C0C0C0 solid; border-right: 0px; color: #4d4d4d; font: normal 12px arial; height: 22px; padding-left: 10px; vertical-align: middle; width: 123px; } #cc-search { background: url(../images/buttons/btn_magnify_glass.png) no-repeat scroll 0px 4px transparent; background-color: #FFFFFF; border: 1px #C0C0C0 solid; border-left: 0px; cursor: pointer; display: inline-block; height: 24px; vertical-align: middle; width: 25px; } #favorite-cart-ico-container { float: right; width: 96px; } .favorite-removed-top-nav, .favorite-removed-from-product { background: url(../images/icons/favorites.png) no-repeat scroll 0px 0px transparent; cursor: pointer; height: 16px; float: left; margin-right: 3px; width: 16px; } .cart-img { background: url(../images/background/footer_header_icons_sprite.png) 0px -172px no-repeat; cursor: pointer; float: left; height: 16px; width: 27px; } #checkout-facet-container { float: left; margin: 5px 5px 0 0; min-width: 50px; } #favorites-facet-container { float: right; margin-top: 6px; } #top-nav-divider { background-color: #CECECE; clear: both; height: 1px; width: 100%; } #locale-switch { height: 25px; } /*----------------------------------- 1.01.2 TOP NAV MENU CONTAINER -----------------------------------*/ .top-nav-content p, .top-nav-content h1, .top-nav-content h2, .top-nav-content h3, .top-nav-content .nav-content-heading { color: #000; font-family: Arial; margin: 0; padding: 0; text-align: left; } .top-nav-content p { font-size: 12px; line-height: 21px; margin-bottom: 18px; } .top-nav-content h1 { font-size: 26px; } .top-nav-content h2, .top-nav-content h3, .top-nav-content .nav-content-heading { color: #0069aa; font-size: 14px; font-style: normal; margin-bottom: 10px; } /* Lists */ .top-nav-content li ul { list-style: none; padding: 0; margin: 0 0 12px 0; } .top-nav-content li ul li { font-size: 12px; line-height: 20px; position: relative; padding: 0; margin: 0; float: none; text-align: left; } .top-nav-content li ul li:hover { background: none; border: none; } .top-nav-content ul.list, .top-nav-content ul.list2, .top-nav-content ol.num, .top-nav-content ol.num2 { margin: 0 0 18px 20px; padding: 0; } .top-nav-content ul.list li, .top-nav-content ul.list2 li, .top-nav-content ol.num li, .top-nav-content ol.num2 li { padding: 0 0 0 12px; line-height: 24px; } .top-nav-content .list li { list-style: disc; } .top-nav-content .list2 li { list-style: square; } .top-nav-content .num li { list-style: decimal; } .top-nav-content .num2 li { list-style: upper-latin; } .top-nav-content { margin: 15px 0px 0px 20px; padding-left: 20px; } /* COLUMNS GRID */ .top-nav-content .col_171, .top-nav-content .col_172, .top-nav-content .col_724 { float: left; margin-right: 10px; text-align: left; } .top-nav-content .col_161 { float: left; margin: 15px 10px 10px 10px; } .top-nav-content .col_161 { height: 60px; overflow: hidden; width: 161px; } .top-nav-content .col_171 { background: url(../images/background/vertical_divider.png) top left no-repeat; margin-left: -10px; padding-left: 10px; height: 155px; width: 171px; } .top-nav-content .col_172 { height: 230px; width: 172px; } .top-nav-content .col_724 { height: 60px; margin-top: 15px; margin-left: -10px; overflow: hidden; width: 724px; } .top-nav-content .col_161_group { left: 21px; position: absolute; top: 180px; } /* The last column in a row may need this class to remove margin appended to the right */ .top-nav-content .last { margin-right: 0; } /* END TOP NAV MENU CONTENT */ /* TOP NAV MENU STYLES & COLORS */ .top-nav-content li { margin-right: 15px; } .top-nav-content a { color: #585858; font: 12px Arial; line-height: 20px; padding: 0; text-decoration: none; } .top-nav-content a:hover { color: #585858; font: 12px Arial; line-height: 20px; padding: 0; text-decoration: underline; } #cc-sale { background: none; margin-left: -15px; z-index: 1; } #cc-sale a { cursor: pointer; display: inline-block; height: 10px; width: 35px; } #thelook-en, #thelook-lw, #thelook-jp { cursor: pointer; height: 40px; float: right; width: 80px; z-index: 1; } ul#brand-list li { cursor: pointer; } ul#brand-list li .top-nav-brands-container { height: 33px; overflow: hidden; position: relative; width: 142px; } ul#brand-list li .top-nav-brands-container img { left: 0; position: absolute; top: 0; } ul#brand-list li .top-nav-brands-container img:hover { left: -142px; } ul#shape-list li { height: 18px; margin-bottom: 5px; padding-left: 50px; width: 110px; } .top-nav-content ul.sunlgasses-view-all { margin-top: 25px; } .shop-by-shape-link { cursor: pointer; } /* Glasses Shape IDs */ li#shape-aviator { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) 0 0px no-repeat; } li#shape-wayfarer { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) 0 -77px no-repeat; } li#shape-rectangle { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) 0 -37px no-repeat; } li#shape-cateye { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) 0 -98px no-repeat; } li#shape-oval { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) 0 -18px no-repeat; } li#shape-round { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) 0 -59px no-repeat; } /* Sunglasses Shape IDs */ li#shape-aviatorsunglasses { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) 0 1px no-repeat; } li#shape-wayfarersunglasses { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) 0 -18px no-repeat; } li#shape-oversizedsunglasses { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) 0 -40px no-repeat; } li#shape-rectanglesunglasses { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) 0 -59px no-repeat; } li#shape-ovalsunglasses { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) 0 -78px no-repeat; } li#shape-cateyesunglasses { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) 0 -100px no-repeat; } /*--------------------------- * 1.01.3 MEGA MENU * * --------------------------*/ .mega-menu { background: #F2F2F2; color: #4D4D4D; font: normal 12px arial; height: 40px; margin: 0 auto; width: 1010px; } .mega-menu a { cursor: pointer; display: block; outline: none; text-decoration: none; } .mega-menu li { list-style: none; margin: 0; padding: 0; text-indent: 0; } .mega-menu ul { clear: both; float: left; margin: 0 0 0 2px; padding: 0; } .mega-menu > ul { margin: 0 0 0 2px; position: relative; width: 736px; } .mega-menu > ul > li { background: #F2F2F2; display: inline-block; float: left; height: 40px; margin: 0; padding: 0; zoom: 1; *display: inline; } .mega-menu > ul > li > a { color: #4D4D4D; height: 100%; padding: 0 15px; text-transform: uppercase; } .mega-menu > ul > li > a > ins { height: 100%; } .mega-menu > ul > li > a > ins, .mega-menu > ul > li > a > span, .mega-menu > ul > li > a > h2 { display: inline-block; vertical-align: middle; zoom: 1; *display: inline; } .mega-menu > ul > li > div { background-color: #FFFFFF; -webkit-box-shadow: 0px 1px 0px 0px #c2c0c2; -moz-box-shadow: 0px 1px 0px 0px #c2c0c2; box-shadow: 0px 1px 0px 0px #c2c0c2; border-top: 0; min-height: 292px; padding: 0; position: absolute; top: 40px; left: 0; transition: opacity 0s .3s,visibility 0s .3s; -webkit-transition: opacity 0s .3s, visibility 0s .3s; -moz-transition: opacity 0s .3s, visibility 0s .3s; -ms-transition: opacity 0s .3s, visibility 0s .3s; -o-transition: opacity 0s .3s, visibility 0s .3s; visibility: hidden; width: 1006px; z-index: 1000; } .mega-menu > ul > li:hover { background: #FFFFFF; -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -ms-transition-delay: .15s; -o-transition-delay: .15s; -transition-delay: .15s; } .mega-menu > ul > li:hover > div { position: absolute; opacity: 1; top: auto; transition: opacity .3s linear .15s,visibility .3s linear .15s; -webkit-transition: opacity .3s linear .15s,visibility .3s linear .15s; -moz-transition: opacity .3s linear .15s,visibility .3s linear .15s; -ms-transition: opacity .3s linear .15s,visibility .3s linear .15s; -o-transition: opacity .3s linear .15s,visibility .3s linear .15s; visibility: visible; white-space: nowrap; z-index: 1050; } .reset-background { background-color: #F2F2F2; } .reset-delay { background: #F2F2F2; transition: background 0s .3s; } .sale-red { color: #EA4A35; } .top-nav-selected { background: #FFFFFF; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The LNAV CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1 Left Navigation ==================================== */ /* ------------------------------------------------------------------------- 1 Left Navigation ------------------------------------------------------------------------- */ #lnav-container { background: url(../images/coastal-images/navigation/lnav_middleRight.png) repeat-y scroll right center white; float: left; width: 202px; } #lnav-content-container { float: left; font-family: Arial; font-size: 12px; } #lnav-content-container h2, #lnav-content-container #lnav-title { color: #2e2e2e; font: normal 20px arial; height: 40px; line-height: 2; padding-left: 10px; } #lnav-inner-container { float: right; width: 100%; } .lnav-category-container { clear: both; margin: 5px 0 10px 0; overflow: hidden; } .lnav-banner h3 { background-color: #F6F6F6; color: #0069AA; float: left; font: 14px arial; line-height: 1.4; margin-bottom: 10px; min-height: 20px; padding-left: 10px; width: 145px; } .expand-collapse-container { cursor: pointer; float: left; margin-left: 3px; } .lnav-collapse, .lnav-expand { height: 20px; width: 20px; } .lnav-collapse { background: url(../images/background/pagination_and_slider_sprite.png) -21px -42px no-repeat; height: 20px; width: 20px; } .lnav-expand { background: url(../images/background/pagination_and_slider_sprite.png) 0px -42px no-repeat; height: 20px; width: 20px; display: none; } .lnav-link-container { clear: both; color: #585858; padding-left: 15px; } .lnav-link-container a { color: #585858; text-decoration: none; } .lnav-link-container a:hover { text-decoration: underline; } .lnav-link-container ul { font: normal 12px arial; margin: 0 0 0 -3px; padding: 0; text-align: left; } .lnav-link-container ul li { clear: both; line-height: 20px; margin: 0; padding: 0; } .lnav-link-container ul li input { float: left; margin-top: 1px; } .lnav-link-container ul li input[type=checkbox] { border-style: none; margin-top: 3px; width: 13px; } .lnav-link-container ul ul li { list-style: disc inside none; margin-left: 5px; } .lnav-link-container .ui-slider .ui-slider-handle { height: 16px; width: 12px; } .lnav-tooltip { display: none; font: normal 10px arial; height: 24px; padding: 3px 0 0 8px; width: 66px; } .lnav-left-tooltip, .lnav-right-tooltip { height: 22px; width: 66px; } .lnav-left-tooltip { background: url(../images/background/category_sprite.png) -27px 0 no-repeat; } .lnav-right-tooltip { background: url(../images/background/category_sprite.png) -27px 25px no-repeat; } .lnav-horizontal-divider { background: url(../images/background/category_sprite.png) 0px -121px no-repeat; background-repeat: repeat-x; height: 1px; width: 178px; } .lnav-horizontal-divider-small { width: 110px; } .view-all-link { color: #585858; font: normal 12px arial; padding-left: 15px; } #lnav-bottom-box, #lnav-top-box { clear: both; float: right; height: 120px; margin-right: -14px; width: 13px; } #lnav-top-box, #lnav-bottom-box { height: 120px; width: 13px; } #lnav-top-box { background: url(../images/background/category_sprite.png) 0px 0px no-repeat; } #lnav-bottom-box { background: url(../images/background/category_sprite.png) -14px 0 no-repeat; margin-top: -100px; } #lnav-brand-container { width: 163px; } #lnav-alphabet-container { margin-left: -6px; font-size: 12px; } #lnav-alphabet-container div { cursor: pointer; float: left; height: 18px; margin: 0; padding: 0; text-align: center; width: 18px; } #lnav-alphabet-container > div.lnav-letter-available:hover { background-color: #016AAC; color: #FFFFFF; } #lnav-brand-name-container { height: 130px; float: left; margin-top: 14px; border: 1px solid #C6C6C6; overflow: auto; padding: 5px 0 5px 2px; width: 160px; } .lnav-brand-name-static-container ul { margin-left: 3px !important; } .lnav-letter-on { background-color: #0069AA; color: white; } .lnav-letter-off { color: #c6c6c6; } ul#lnav-link-shapes-list li div { cursor: pointer; } #lnav-link-shapes-list li div { float: left; height: 19px; width: 45px; } #lnav-link-shapes-list li input { float: left; } /* Glasses/Frames Lnav Images */ #lnav-list-bullet-aviator { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat scroll 0px 3px transparent; } #lnav-list-bullet-oval { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat 0px -17px transparent; } #lnav-list-bullet-oversized { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat 0px -76px; } #lnav-list-bullet-rectangle { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat 0px -38px; } #lnav-list-bullet-wayfarer { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat 0px -76px; } #lnav-list-bullet-round { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat 0px -58px; } #lnav-list-bullet-cateye { background: url(../images/coastal-images/navigation/lnav_glasses_shapes.png) no-repeat 0px -97px; } /* Sunglasses Lnav Images */ #lnav-list-sunglasses-aviator { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) no-repeat scroll -3px 0px transparent; } #lnav-list-sunglasses-oval { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) no-repeat -3px -81px transparent; } #lnav-list-sunglasses-oversized { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) no-repeat -3px -38px transparent; } #lnav-list-sunglasses-rectangle { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) no-repeat -3px -61px transparent; } #lnav-list-sunglasses-wayfarer { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) no-repeat -3px -18px transparent; } #lnav-list-sunglasses-cateye { background: url(../images/coastal-images/navigation/sunglasses_shapes.png) no-repeat -3px -100px transparent; } #lnav-color-container { margin-left: -10px; width: 100%; } .color-swatch { cursor: pointer; margin: 3px; } #lnav-color-container > div { float: left; height: 18px; margin: 0 0 2px 2px; overflow: hidden; padding: 0; width: 26px; } #lnav-color-container > div:hover { outline: 2px solid #0069AA; overflow: hidden; } .lnav-color-black { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) 0px 0px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-clear { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -21px 0px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-white { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -42px 0px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-silver { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -63px 0px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-grey { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -84px 0px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-green { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -105px 0px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-blue { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) 0px -13px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-orange { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -21px -13px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-red { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -42px -13px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-pink { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -63px -13px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-violet { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -84px -13px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-tortoise { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -105px -13px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-purple { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) 0px -26px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-gold { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -21px -26px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-yellow { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -43px -26px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-lightbrown { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -64px -26px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-brown { background: url(../images/coastal-images/navigation/lnav_glasses_colors_swatches.png) -85px -26px no-repeat; display: block; float: left; height: 12px; width: 20px; } .lnav-color-on { outline: 2px solid #0069AA; } #lnav-size-container, .lnav-size-sub-container { margin-bottom: 10px; overflow: hidden; width: 100%; } #lnav-size-container select { height: 18px; margin: 5px 0 0 10px; text-align: right; width: 50px; } .lnav-size-left-container { float: left; } .lnav-size-left-container h4 { font-size: 14px; margin-bottom: 0; } .lnav-size-right-container { float: right; height: 40px; margin: 7px 7px 0 0; width: 65px; } #lnav-size-frame-width-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -195px; } #lnav-size-width-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px 0px; } #lnav-size-height-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -50px; } #lnav-size-bridge-width-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -103px; } #lnav-size-temple-length-image { background: url(../images/coastal-images/navigation/lnav_glasses_fit_tool.png) no-repeat 0px -150px; } #lnav-bottom-link-container { clear: both; width: 100%; } .lnav-size-learn-link { float: left; } .lnav-size-go-link { float: left; margin-left: 80px; } .lnav-collapse-txt { cursor: pointer; } .lnav-show-more-less-txt { cursor: pointer; } #lnav-shape-container div ul li div { float: left; height: 19px; width: 45px; } #no-colors-avail { float: left; padding: 20px 0px 20px 7px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The Product Review CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1 Product Review ==================================== */ /* ____________________________________________________________________________ 1. POWER REVIEWS _____________________________________________________________________________*/ .product-review { margin-left: 59px; } .product-review div.coastal-tooltip div.coastal-tooltip-body-container-info > div { text-align: center; } .product-review-stars, .product-review-product-stars { height: 13px; width: 83px; } .product-review-product-stars { float: left; } .power-review-container { white-space: nowrap; width: 170px; } .power-review-star-0 { background: url(../images/external/power-reviews/stars.gif) 0px 0px no-repeat; } .power-review-star-0-5 { background: url(../images/external/power-reviews/stars.gif) 0px -17px no-repeat; } .power-review-star-1-0 { background: url(../images/external/power-reviews/stars.gif) 0px -36px no-repeat; } .power-review-star-1-5 { background: url(../images/external/power-reviews/stars.gif) 0px -54px no-repeat; } .power-review-star-2-0 { background: url(../images/external/power-reviews/stars.gif) 0px -72px no-repeat; } .power-review-star-2-5 { background: url(../images/external/power-reviews/stars.gif) 0px -90px no-repeat; } .power-review-star-3-0 { background: url(../images/external/power-reviews/stars.gif) 0px -108px no-repeat; } .power-review-star-3-5 { background: url(../images/external/power-reviews/stars.gif) 0px -126px no-repeat; } .power-review-star-4-0 { background: url(../images/external/power-reviews/stars.gif) 0px -144px no-repeat; } .power-review-star-4-5 { background: url(../images/external/power-reviews/stars.gif) 0px -162px no-repeat; } .power-review-star-5-0 { background: url(../images/external/power-reviews/stars.gif) 0px -180px no-repeat; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The TOP NAV CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. VIEW ALL PRODUCTS 1.01 MAIN CONTAINER 1.02 HEADER CONTAINER 1.03 FILTER CONTAINER 1.04 CONTENT CONTAINER ==================================== */ /* _____________________________________________________________________________ 1. VIEW ALL PRODUCTS _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 1.01 MAIN CONTAINER ------------------------------------------------------------------------- */ #view-all-product { border: 0px solid red; font: normal 12px Arial; margin: 10px auto 20px; margin-bottom: 20px; width: 966px; } #view-all-product * { color: #585858; font-size: 12px; } /* ------------------------------------------------------------------------- 1.02 HEADER CONTAINER ------------------------------------------------------------------------- */ #view-all-product-header { border: 0px solid red; padding-top: 20px; } #view-all-product-tab ul a { font-size: 14px; } #view-all-product-tab ul a:hover { color: #0069AA; } /* ------------------------------------------------------------------------- 1.03 FILTER CONTAINER ------------------------------------------------------------------------- */ #view-all-product-filter-container { padding-top: 20px; } #view-all-product-filter { background-color: #ececec; border: 1px solid #ddd; line-height: 40px; margin: 1px auto; padding: 1px 10px; } #view-all-product-filter a { font-weight: normal; text-decoration: none; } #view-all-product-filter a:hover { text-decoration: underline; } #view-all-product-filter select { vertical-align: middle; } #view-all-product-filter .divider { background-color: white; border: 1px solid #ddd; display: inline-block; height: 15px; margin: 0 8px; vertical-align: middle; width: 2px; } #view-all-product-filter .selected { background-color: white; border: 1px solid #ddd; margin: 0; padding: 1px 6px; } #view-all-product-filter span#letters { word-spacing: 7px; } /* ------------------------------------------------------------------------- 1.04 CONTENT CONTAINER ------------------------------------------------------------------------- */ #view-all-product-content { padding: 0px; padding-bottom: 10px; } #view-all-product-content a { font-weight: normal; text-decoration: none; } #view-all-product-content a:hover { text-decoration: underline; } #view-all-product-content h3 { font-weight: bold; margin-top: 13px; } #view-all-product-content h4 { font-weight: bold; margin: 10px 0; } #view-all-product-content #currSelectedProduct { margin: 0; padding-left: 20px; } #view-all-product-content .no-product { color: #CCCCCC; } #view-all-product-content-column1 { border-right: thin solid #ddd; float: left; padding-left: 20px; width: 300px; } #view-all-product-content-column2 { border-left: thin solid #ddd; border-right: thin solid #ddd; float: left; margin-left: -1px; margin-right: -1px; padding-left: 20px; width: 300px; } #view-all-product-content-column3 { border-left: thin solid #dddddd; float: left; padding-left: 20px; width: 300px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The TABS CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. TABS 1.01 Product & Virtual Mirror Tabs ==================================== */ /* _____________________________________________________________________________ 1. TABS _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 1.01 Product & Virtual Mirror Tabs ------------------------------------------------------------------------- */ .tab-name { float: left; padding-left: 4px; } #tab-prod-view-on, #tab-prod-view-off, #tab-try-on-view-on, #tab-try-on-view-off, #tab-color-view-on, #tab-color-view-off, #tab-video-view-on, #tab-video-view-off { background: url(../images/icons/product_tabs_sprite.png) no-repeat scroll 0 0 transparent; float: left; margin-top: 8px; margin-left: -4px; } #tab-prod-view-on, #tab-prod-view-off { height: 8px; width: 13px; padding-top: 5px; } #tab-prod-view-on { background-position: 0px -14px; } #tab-prod-view-off { background-position: 0px -1px; } #tab-try-on-view-on, #tab-try-on-view-off { height: 13px; width: 18px; } #tab-try-on-view-on { background-position: -14px -14px; } #tab-try-on-view-off { background-position: -14px -1px; } #tab-color-view-on, #tab-color-view-off { height: 13.5px; width: 13px; } #tab-color-view-on { background-position: -51px -13px; } #tab-color-view-off { background-position: -51px 0px; } #tab-video-view-on, #tab-video-view-off { height: 13.5px; width: 20px; } #tab-video-view-on { background-position: -32px -13px; } #tab-video-view-off { background-position: -32px 0px; } .small-loader { background: url(../images/external/magiczoom/loader.gif) no-repeat scroll 0 0 transparent; background-position: right; } .productImage { margin-top: 18px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The Star Burst CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. STAR BURST ==================================== */ /* ------------------------------------------------------------------------- 1. STAR BURST ------------------------------------------------------------------------- */ #cc-sale-star-container { float: left; margin-top: -10px; } .cc-sale-star-burst { background: url(../images/coastal-images/product/star_burst.png) no-repeat 0px 0px; color: #FFFFFF; font: bold 12px arial; height: 44px; width: 44px; padding-top: 3px; } .cc-sale-star-burst > div { line-height: 1; text-align: center; } .cc-sale-star-burst .cc-category-star-burst { display: table-cell; height: 40px; vertical-align: middle; width: 50px; } .cc-star-burst-lens-option { float: left; margin-left: 15px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The Size Match CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. Size Match ==================================== */ /* ------------------------------------------------------------------------- 1 Size Match Dialog (dialog reused throughout the app) ------------------------------------------------------------------------- */ #size-match-content { color: #585858; height: 390px; font-family: Arial; font-size: 12px; margin: 20px 30px; text-align: left; width: 600px; } #size-match-content .find-fit-header { clear: both; color: #0069AA; float: left; font-size: 18px; font-weight: normal; margin-bottom: 10px; text-align: left; } #size-match-content #size-match-left-tips { clear: both; } #size-match-left-container { height: 100%; float: left; padding-right: 30px; } #size-match-left-container .size-match-tip, #size-match-left-container h2 { font-weight: bold; } #size-match-left-container #size-match-left-tips li { line-height: 18px; padding-bottom: 20px; width: 596px; } #size-match-chart { border: 1px solid #F4F4F4; float: left; width: 596px; } #size-match-chart ul { float: left; width: 149px; /* #size-match-chart = (149px * 4) = 596px */ } #size-match-chart ul li { height: 30px; line-height: 30px; padding-bottom: 0px; text-align: center; } #size-match-chart ul li:first-child { font-weight: bold; } #size-match-chart .highlighted { background-color: #F4F4F4; } #size-match-chart #size-match-chart-measure-labels li { font-weight: bold; padding-left: 5px; text-align: left; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The Product TIels of Coastal external and internal SCSS code. NOTE: From SCSS Generated. ----------------------------------------------------------------------- **/ /* ======== TABLE OF CONTENTS ======== 1. PRODUCT TILES ==================================== **/ /* _____________________________________________________________________________ 1. PRODUCT TILES _____________________________________________________________________________ */ .product-image-container img { display: block; margin: 0px auto 0px auto; } .product-name, .product-name-try-on-view { color: #2e2e2e; font: bold 12px Arial; height: 28px; text-align: center; } .product-name-try-on-view { padding-top: 20px; } .product-price { color: #585858; font: bold 16px Arial; margin-top: 3px; width: 202px; } .product-retail-value { color: #585858; display: inline; font: 12px Arial; text-decoration: line-through; } .product-price-group { height: 24px; padding: 4px 0px 0px 0px; position: relative; text-align: center; } .product-low-value { display: inline; } .product-sale-price, .cc-product-sale-price { color: #ff0000; display: inline; font: 16px Arial; font-weight: bold; } .product-after-volume-discount, .product-after-volume-discount-and-rebate { color: #585858; display: inline-block; font-size: 8px; margin-left: 5px; text-align: left; } .product-after-volume-discount { width: 55px; } .product-after-volume-discount-and-rebate { width: 82px; } .product-image { cursor: pointer; height: 154px; display: block; margin: auto; width: 220px; } .try-on-view-unavail-prod { background: url(../images/coastal-images/product/unavailable_try_on_view.png) no-repeat scroll 0 0 transparent; display: block; position: absolute; height: 154px; width: 220px; z-index: 10; } .product-short-description { color: #252552; font: normal 12px Arial; height: 35px; overflow: hidden; text-align: left; width: 100%; } .product-corner-img-overlap { padding: 0px; position: absolute; right: -10px; top: -3px; z-index: 10; } .product-corner-star-img-overlap { padding: 0px; position: absolute; right: 3px; top: 22px; z-index: 10; } .product-price-txt, .cc-product-price-txt { font: normal 10px arial; color: #2e2e2e; } .price-slash, .cc-price-slash { text-decoration: line-through; } .suggested-price-container, .cc-suggested-price-container { float: left; margin-left: 10px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The breadcrumbs CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1 Breadcrumbs ==================================== */ /* _____________________________________________________________________________ 1. BREADCRUMBS ICONS _____________________________________________________________________________ */ /* ------------------------------------------------------------------------- 1.00 Breadcrumbs ------------------------------------------------------------------------- */ #breadcrumbs-container { margin-bottom: 10px; } #main-breadcrumbs-container { font-family: Arial; height: 22px; margin-top: 7px; } #main-breadcrumbs-container div { cursor: pointer; float: left; } #breadcrumbs-home { background: url(../images/background/category_sprite.png) -33px -50px no-repeat; height: 14px; width: 16px; } .breadcrumbs-arrow { background: url(../images/background/category_sprite.png) -28px -50px no-repeat; height: 17px; margin: 0 10px 0 10px; width: 5px; } .breadcrumbs-name { cursor: pointer; font-size: 12px; line-height: 1.5; } .breadcrumbs-name a { color: #000; font-weight: bold; text-decoration: none; } .breadcrumbs-name:hover { text-decoration: underline; } .breadcrumbs-prod-nav { float: right; font-size: 12px; height: 20px; margin-top: -3px; } .breadcrumbs-prod-nav li.next { background: url(../images/coastal-images/navigation/next_prod.png) right 5px no-repeat; padding-right: 15px; padding-left: 10px; text-align: right; } .breadcrumbs-prod-nav li.prev { background: url(../images/coastal-images/navigation/prev_prod.png) left 5px no-repeat; padding-left: 15px; padding-right: 10px; text-align: left; } .breadcrumbs-prod-nav li.nav-divider { background: url(../images/background/vertical_divider.png) 0px 0px no-repeat; display: inline-block; height: 20px; width: 1px; } .breadcrumbs-prod-nav li { float: left; display: inline-block; line-height: 25px; } .breadcrumbs-prod-nav li a { text-decoration: none; } .breadcrumbs-prod-nav li a:hover { text-decoration: underline; } .breadcrumbs-divider { background: url(../images/coastal-images/navigation/prev_prod.png) no-repeat scroll 0 0 transparent; clear: both; height: 1px; width: 538px; } .breadcrumbs-full-divider { background: url(../images/background/category_sprite.png) 0px -121px no-repeat; background-repeat: repeat-x; clear: both; float: none; height: 1px; width: 966px; } .search-filter-divider { clear: right; float: left; margin-bottom: 5px; width: 760px; } .extra-margin { margin: 29px 0 10px 0; } /* ------------------------------------------------------------------------- 1.01 Bread Crumbs ------------------------------------------------------------------------- */ #my-account-bread-crumb { margin: 0 0 5px 3px; font-size: 12px; } #my-account-bread-crumb a { font-weight: normal; font-size: 12px; text-decoration: none; } #my-account-bread-crumb > div { float: left; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The ToolTips CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1.00 Tooltips ==================================== */ /* ------------------------------------------------------------------------- 1.00 Tooltips ------------------------------------------------------------------------- */ .tooltip-width-200 { width: 200px; } .tooltip-width-300 { width: 300px; } .tooltip-width-145 { width: 145px; } .coastal-tooltip-pp { box-shadow: 2px 2px 2px #7c7c7c; -moz-box-shadow: 2px 2px 2px #7c7c7c; -webkit-box-shadow: 2px 2px 2px #7c7c7c; background-color: #fff; box-shadow: 2px 2px 2px #7c7c7c; display: none; border: 2px solid #999999; color: #000000; font: normal 12px arial; height: auto; left: auto !important; /* Need prop to overwrite 'left' positioning by the tooltip lib which causes issues when resizing browser */ padding: 5px; text-indent: 0; white-space: normal; /* Need to explicitly set it because some parent containers set it this property to 'nowrap' and affects the tooltip body wrap. */ z-index: 100; } .coastal-tooltip { box-shadow: 10px 10px 10px #7c7c7c; -moz-box-shadow: 10px 10px 10px #7c7c7c; -webkit-box-shadow: 10px 10px 10px #7c7c7c; background-color: #FFFFFF; display: none; border: 1px solid #999999; color: #000000; font: normal 12px arial; height: auto; padding: 5px; text-indent: 0; white-space: normal; /* Need to explicitly set it because some parent containers set it this property to 'nowrap' and affects the tooltip body wrap. */ z-index: 1000; } /* style the trigger elements */ .coastal-tooltip-container { margin: 10px 50px 10px 0; } .coastal-tooltip-container img { border: 0; cursor: pointer; margin: 0 8px; } .coastal-tooltip-right-container img { border: 0; cursor: pointer; margin: 0 8px; } .coastal-tooltip-arrow { background: url(../images/background/img_arrow_down.png) no-repeat; bottom: -33px; height: 33px; position: absolute; width: 50px; } .coastal-tooltip-arrow-center-tooltip-width-200 { float: left; left: 90px; } .coastal-tooltip-arrow-right-tooltip-width-200 { float: right; left: 156px; } .coastal-tooltip-arrow-center-tooltip-width-300 { float: left; left: 140px; } .coastal-tooltip-arrow-right-tooltip-width-300 { float: right; left: 256px; } .coastal-tooltip-body-container-question, .coastal-tooltip-body-container-info { padding: 0; margin: 0; } .coastal-tooltip-banner-question, .coastal-tooltip-banner-info { font-size: 12px; margin-bottom: 5px; padding: 3px 0 3px; text-align: center; width: 100%; } .coastal-tooltip-body-container-question { border: 1px solid #FBEEAA; } .coastal-tooltip-banner-question { background-color: #FBEEAA; } .coastal-tooltip-body-container-info { border: 1px solid #D7EAF9; } .coastal-tooltip-banner-info { background-color: #D7EAF9; } .coastal-tooltip-body { padding: 10px 15px 5px 10px; text-align: left; text-indent: 0; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The Size Match CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. Size Match ==================================== */ /* ------------------------------------------------------------------------- 1 Size Match Dialog (dialog reused throughout the app) ------------------------------------------------------------------------- */ #size-match-content { color: #585858; height: 390px; font-family: Arial; font-size: 12px; margin: 20px 30px; text-align: left; width: 600px; } #size-match-content .find-fit-header { clear: both; color: #0069AA; float: left; font-size: 18px; font-weight: normal; margin-bottom: 10px; text-align: left; } #size-match-content #size-match-left-tips { clear: both; } #size-match-left-container { height: 100%; float: left; padding-right: 30px; } #size-match-left-container .size-match-tip, #size-match-left-container h2 { font-weight: bold; } #size-match-left-container #size-match-left-tips li { line-height: 18px; padding-bottom: 20px; width: 596px; } #size-match-chart { border: 1px solid #F4F4F4; float: left; width: 596px; } #size-match-chart ul { float: left; width: 149px; /* #size-match-chart = (149px * 4) = 596px */ } #size-match-chart ul li { height: 30px; line-height: 30px; padding-bottom: 0px; text-align: center; } #size-match-chart ul li:first-child { font-weight: bold; } #size-match-chart .highlighted { background-color: #F4F4F4; } #size-match-chart #size-match-chart-measure-labels li { font-weight: bold; padding-left: 5px; text-align: left; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The forms CSS file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. FORMS ==================================== */ /* ------------------------------------------------------------------------- 1.FORMS ------------------------------------------------------------------------- */ .global-form-fields-error-box, #cc-correct-prod-params-warning-box, #cc-select-product-warning-box { height: auto; float: left; text-align: left; width: 485px !important; } .global-form-fields-error-box ul, #cc-correct-prod-params-warning-box ul, #cc-select-product-warning-box ul { padding: 15px 15px 15px 5px; } .global-form-fields-error-box li, #cc-correct-prod-params-warning-box li, #cc-select-product-warning-box li { line-height: 16px; padding-bottom: 5px; } .global-form-fields-error-box li { font-family: arial; font-size: 12px; font-weight: bold; padding: 0px; } #cc-empty-custom-frequency-error-box { height: auto; float: left; margin: 15px 0px 0px 0px !important; text-align: left; width: 196px !important; } #cc-empty-custom-frequency-error-box ul { padding: 15px 15px 15px 5px; } #cc-empty-custom-frequency-error-box li { line-height: 16px; padding-bottom: 5px; } .cc-zero-quantity-box-border-error { border: 2px solid #FF0000; } .cc-global-param-wrapper { margin: 0px 2px; /* Need to set the margin so that error styling for controls have small space between them */ padding: 5px 2px; } .cc-global-param-wrapper select { text-align: center; } .cc-param-error { background: #FFE5E5; border: 1px solid #FF0000; float: none; } .global-form-fields #correct-fields-warning-box, .global-form-fields-error-box, #cc-correct-prod-params-warning-box, #cc-correct-prod-params-error-box, .installment-error-box, #cc-select-product-warning-box, #cc-empty-custom-frequency-error-box { background: #ffe5e5 url(../images/icons/warning.png) 10px center no-repeat; border: 1px solid #FF0000; color: #FF0000; font-size: 12px; line-height: 16px; margin: 0px 8px 20px 0px; padding: 10px 10px 10px 40px; width: 246px; } .global-form-fields #correct-fields-warning-box, #cc-correct-prod-params-warning-box, #cc-correct-prod-params-error-box, .installment-error-box, #cc-select-product-warning-box, #cc-empty-custom-frequency-error-box { float: right; } .global-form-fields-error-box { float: left; margin-top: 20px; } .global-form-fields .field-error { color: #FF0000; border: 1px solid #FF0000; font-size: 12px; } #cc-correct-prod-params-error-box { font-family: arial; font-weight: bold; } .installment-error-box { background-color: #DFEBF7; background-image: none; border: 1px solid #0069A9; margin-right: 55px; padding-left: 10px; width: 270px; } #shipping-information #dialog-error { margin-left: -70px; overflow: hidden; } /* ------------------------------------------------------------------------- 5.01 Information Fill Out Forms ------------------------------------------------------------------------- */ .required-single-field { color: #0069AA; font-size: 15px; font-weight: bold; } .global-form-fields { float: left; position: relative; width: 400px; } .global-form-fields select.dob-date { float: left; width: 40px; } .global-form-fields select.dob-year { float: left; width: 55px; } .global-form-fields ul { width: 200px; } .global-form-fields li { color: #585858; float: right; margin-bottom: 5px; } .global-form-fields li input, .global-form-fields li select { border: 1px solid #989898; } .global-form-fields li .checkbox-field { border: 0; float: left; width: 30px; } .global-form-fields li.expiry-date select { height: 20px; width: 55px; } .global-form-fields li.cvv2 input { width: 50px; } .global-form-fields label { float: left; margin: 0px 10px 0px 0px; text-align: left; } .global-form-fields .form-field, .global-form-fields label { font-size: 13px; line-height: 25px; } .global-form-fields .form-field { float: left; width: 208px; } .global-form-fields li input, .global-form-fields li select, .global-form-fields .form-field label { margin: 3px; line-height: 20px; width: 200px; } .global-form-fields .day select { width: 50px; margin-left: 0; margin-right: 8px; } .global-form-fields .month select { width: 50px; } .global-form-fields .year select { width: 65px; } .global-form-fields .label-error { background: #FF0000; color: #FFF; min-height: 25px; left: 0; /* Need for IE */ line-height: 25px; margin-left: -20px; padding: 0px 0px 0px 9px; text-align: right; } .global-form-fields .label-error-arrow { background: url(../images/background/error_label_bg.png) top right no-repeat; float: right; height: 25px; width: 11px; } .global-form-fields .field-error { background: #FFE5E5; } .global-form-fields .form-field-padding { margin-right: 8px; } .global-form-fields .required-single-field, .global-form-fields .none-required-single-field { float: left; margin: 5px 0px 0px 2px; } .global-form-fields .none-required-single-field { width: 5px; } .global-form-fields .required-fields { color: #0069AA; font-size: 10px; padding: 0px 10px 10px 0px; text-align: right; width: 100%; } #student-care-form-container ul.global-form-fields li label { line-height: 17px; text-align: right; width: 165px; } .mice, .req-field-error { float: left; line-height: 16px; margin-bottom: 5px; padding: 0px 2px; /* Don't remove. Need padding for error messages */ } .mice { color: #888585; font-size: 11px; } .error-message-title { color: #FF0000; font-weight: bold; margin-bottom: 5px; } .error-message-item { margin-bottom: 3px; } #alert { background-color: #FFFFD7; border: thin solid #FF0000; color: #000000; margin: 10px 0px 30px 0px; padding: 5px; } .errors-alert-signin { width: 300px; } .req { color: #FF0000; float: right; background-image: url(../images/icons/ico-aro-req.png); background-repeat: no-repeat; padding: 4px 0 0 16px; } .red-alert { color: #FF0000 !important; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The Subscription Wizard file for Coastal Contacts. NOTE: From SCSS Generated. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1. Subscription Wizard 2. SKU Container 3. Subscription Edit ==================================== */ /* ------------------------------------------------------------------------- 1. Subscription Wizard ------------------------------------------------------------------------- */ .cc-subscription-prescription-option-content { position: relative; background: #FFFFFF; font-size: 12px; min-height: 110px; float: left; margin: 10px 0 10px 0; width: 100%; padding-left: 0; } .cc-subscription-prescription-option-content ul li { margin-bottom: 5px; font-size: 12px; font-weight: bold; padding: 0px; } .cc-subscription-prescription-slider-option { background: url(../images/icons/ecp_slider_on.png) 0px 0px no-repeat; cursor: pointer; font-weight: normal; margin-top: 5px; padding: 0px; position: relative; } .cc-subscription-prescription-slider-header { background: #D7EAF9; height: 30px; line-height: 30px; margin-left: 32px; } #cc-subscr-edit-container { clear: both; margin: 15px 0 15px 0; overflow: hidden; } #cc-subscr-edit-container #cc-select-month { margin-top: 35px; } #cc-contacts-wizard-container, #cc-subscr-edit-container { padding: 0 15px 0 15px; } #cc-contacts-wizard-container h2, #cc-subscr-edit-container h2 { color: #0069aa; font: bold 18px arial; } #cc-subscription-main-container { clear: both; margin-bottom: 20px; } #cc-subscription-main-container #cc-subscription-footer-container { overflow: hidden; } .cc-step-container > div { clear: both; } ul.cc-contacts-progress-bar { margin: 10px 0 10px 0; overflow: hidden; } ul.cc-contacts-progress-bar li { float: left; width: 271px; } ul.cc-contacts-progress-bar li > div { line-height: 2.2; width: 102%; } ul.cc-contacts-progress-bar li > div div { float: left; font-size: 15px; font-weight: bold; height: 34px; text-align: center; } .cc-number-not-selected { color: #A0A0A0; } .cc-on-blue { background-color: #0069aa; color: #FFFFFF; } .cc-selected-grey-check-box { background: url(../images/background/subscription_progress_sprite.png) -60px 5px no-repeat; height: 22px; width: 34px; } .cc-on-blue-box, .cc-on-blue-box-arrow, .cc-selected-grey-box { color: #0069aa; height: 34px; width: 43px; } .cc-selected-grey-box { background-color: #787878; } .cc-selected-grey { background-color: #787878; color: #FFFFFF; width: 180px !important; } .cc-off-grey { background-color: #F0F0F0; color: #B6B6B6; font-weight: normal !important; width: 180px !important; } .cc-off-grey-box { background: url(../images/background/subscription_progress_sprite.png) 0 -39px no-repeat; } .cc-on-blue-box { background: url(../images/background/subscription_progress_sprite.png) -45px -76px no-repeat; } .cc-off-grey-box-arrow, .cc-selected-grey-box-arrow, .cc-on-blue-box-arrow { height: 44px; padding-left: 9px; width: 34px; } .cc-off-grey-box-arrow { background: url(../images/background/subscription_progress_sprite.png) 0px -40px no-repeat; color: #cccccc; } .cc-selected-grey-box-arrow { background: url(../images/background/subscription_progress_sprite.png) 0px -76px no-repeat; } .cc-on-blue-box-arrow { background: url(../images/background/subscription_progress_sprite.png) -45px -39px no-repeat; } .cc-off-end-grey-arrow, .cc-on-end-blue-arrow, .cc-selected-end-grey-arrow { height: 34px; width: 13px; } .cc-off-end-grey-arrow { background: url(../images/background/subscription_progress_sprite.png) -92px -38px no-repeat; } .cc-on-end-blue-arrow { background: url(../images/background/subscription_progress_sprite.png) -40px 0 no-repeat; } .cc-selected-end-grey-arrow { background: url(../images/background/subscription_progress_sprite.png) -57px 0 no-repeat; } .cc-off-end-grey-flat, .cc-on-end-blue-flat { width: 10px; } .cc-off-end-grey-flat { background-color: #F0F0F0; } .cc-on-end-blue-flat { background-color: #0069aa; } .cc-selected-end-grey-flat { background-color: #787878; width: 10px; } .cc-steps-text { padding: 0 15px 0 15px; width: 180px; } .cc-subscription-container { width: 835px; /* needs to have container width defined */ } .cc-subscription-edit-container { width: 530px; /* needs to have container width defined */ } .cc-subscription-container, .cc-subscription-edit-container { font-family: arial; margin: 0 auto; } .cc-subscription-container #cc-product-btn-container, .cc-subscription-edit-container #cc-product-btn-container { float: right; margin-top: 10px; min-width: 500px; } .cc-subscription-container #cc-product-btn-container #cc-select-product-warning-box, .cc-subscription-edit-container #cc-product-btn-container #cc-select-product-warning-box { float: left; width: 300px !important; } .cc-subscription-container #cc-product-btn-container .cc-subscription-btn-container, .cc-subscription-edit-container #cc-product-btn-container .cc-subscription-btn-container { clear: none; float: right; } .cc-step-1-content-container { background-color: #F7F7F7; border: 1px solid #BEBEBE; margin-bottom: 30px; overflow: hidden; width: 821px; } .cc-step-2-content-container { background: none; border: none; height: auto; margin-bottom: 20px; } #cc-subscription-content-inner-container { height: 100%; padding: 9px; overflow: hidden; } #cc-subscription-step-container { margin: 30px 0 20px 15px; overflow: hidden; width: 821px; } #cc-subscription-header-container { margin-bottom: 25px; overflow: hidden; } #cc-subscription-brands-container, #cc-subscription-products-container { background-color: #F8F8F8; border: 1px solid #BEBEBE; height: 100%; overflow: hidden; } #cc-subscription-brands-container { float: left; width: 240px; } #cc-subscription-filter-header { background-color: #BEBEBE; color: #FFFFFF; font: bold 15px; font-weight: bold; height: 23px; line-height: 1.5; text-indent: 5px; width: 100%; } #cc-subscription-brands-list-container > div, #cc-subscription-products-list-container > div { border-bottom: 1px solid #BEBEBE; cursor: pointer; } #cc-subscription-brands-list-container > div:hover, #cc-subscription-products-list-container > div:hover { background-color: #D7EAF9; color: #0069aa; } #cc-subcription-product-info-box { width: 248px; } #cc-subscription-brands-list-container { color: #0069aa; font-size: 14px; height: 415px; line-height: 3.5; overflow-y: scroll; text-indent: 5px; } #cc-subscription-brands-list-container > div { height: 45px; width: 223px; } #cc-subscription-products-container { float: right; width: 551px; } #cc-subscription-products-list-container { height: 412px; font-weight: bold; overflow-x: hidden; overflow-y: scroll; } #cc-subscription-products-list-container > div { background-color: #FFFFFF; height: 89px; width: 536px; } #cc-subscription-products-list-container > div > div { margin-left: 10px; } #cc-subscription-products-list-container > div > div img { margin-top: 15px; } #cc-subscription-products-list-container > div div { color: #0069AA; float: left; font: bold 12px arial; height: 100%; line-height: 90px; text-decoration: underline; } .cc-subscription-selected { background-color: #D7EAF9 !important; color: #0069aa; } .cc-step-full-divider { /* TODO: We need to move this image reference to our SASS Image repository once ready for Test deployment. */ background: url(../images/background/category_sprite.png) repeat-x scroll 0 -121px transparent; clear: both; float: none; height: 1px; width: 100%; } .cc-subscription-btn-container { clear: both; margin-top: 20px; } /*step3*/ .fixed { position: fixed; top: 0; z-index: 99999; background-color: white; } #cc-subscription-step-3-left-container { float: left; width: 524px; } #cc-subscription-step-3-left-container .cc-bottom-box { clear: both; display: none; margin-bottom: 25px; } #cc-subscription-step-3-left-container .cc-bottom-box > div { margin: 0 13px 0 13px; } #cc-subscription-step-3-left-container .cc-bottom-box #cc-plan-msg { font-size: 14px; line-height: 1.1; margin-top: 20px; } #cc-subscription-step-3-left-container .cc-bottom-box #cc-plan-msg > div { margin-bottom: 13px; } #cc-subscription-step-3-right-container { float: right; width: 248px; } #cc-subscription-step-3-right-container .cc-bottom-box { clear: both; margin: 10px 0 10px 0; height: 190px; } #cc-subscription-step-3-right-container .cc-bottom-box p { color: #585858; font-size: 12px; } #cc-subscription-step-3-right-container .cc-bottom-box div.cc-blue-text { color: #0069AA; font-size: 14px; font-weight: bold; line-height: 3; text-align: center; width: 139px; } #cc-subscription-step-3-right-container .cc-bottom-box #cc-add-to-cart { margin-top: 30px; } #cc-subscription-step-3-right-container .cc-bottom-box > div { clear: both; margin: 0 16px 0 16px; } #cc-subscription-step-3-right-container .cc-bottom-box > div div { float: left; } .cc-top-box { border-bottom: 1px solid #DADADA; overflow: hidden; } .cc-top-box h3 { float: left; margin-bottom: 15px !important; } .cc-top-box .cc-expand { color: #0069AA; cursor: pointer; float: right; font-size: 25px; font-weight: 900; line-height: 2; margin-right: 20px; } .cc-top-box .cc-expand:before { content: "\2014"; } span.cc-expand { margin-left: 20px; cursor: pointer; } span.cc-expand:before { content: "\2D"; } .cc-payment-shipment-info { font-size: 12px; font-family: arial; color: #707070; margin: 10px 0px 10px 15px; } #cc-payment-shipment, #cc-payment-month, .cc-subscription-payment-text { font-size: 12px; font-family: arial; font-weight: bold; } .cc-subscription-payment-inline-text { font-size: 12px; font-family: arial; background-color: #f9f9f9; margin: 5px 25px 5px 25px; padding: 5px 5px 5px 5px; } .cc-subscription-payment-text { margin: 15px 0px 0px 15px; } #cc-add-to-cart { float: left; } .cc-expand-plus:before { content: "\2B" !important; } .cc-subscription-box { border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -webkit-box-shadow: 0px 8px 6px -6px #b0b0b0; -moz-box-shadow: 0px 8px 6px -6px #b0b0b0; box-shadow: 0px 8px 6px -6px #b0b0b0; border: 2px solid #dadada; width: 100%; } .cc-subscription-box h3 { display: inline-block; font-weight: bold; margin: 13px 0px 25px 13px; } .cc-subscription-box h1 { display: inline-block; font-weight: bold; font-family: arial; margin-top: 13px; } #cc-contacts-wizard-container .coastal-tooltip-body-container-question { width: 100%; } .cc-subscription-product-unit-info, .cc-subscription-product-unit-price, .cc-subscription-product-unit-packaging { font-size: 12px; font-family: arial; } .cc-subscription-product-unit-info { margin-bottom: 20px !important; } .cc-subscription-quick-summary-info { font-size: 12px; font-family: arial; color: #0069aa; line-height: 17.5px; } .cc-subscription-product-image { display: inline-block; margin-left: 20px; } .cc-step-3-product-details-top { display: inline-block; margin-left: 10px; } #cc-step-3-left-middle { margin-bottom: 22px; } #cc-contacts-wizard-container #cc-step-3-left-top { height: 100px; border-bottom: 1px; display: table; background-color: #f9f9f9; box-shadow: none; } #cc-frequency-container, #cc-payment-option-container { overflow: hidden; width: 100%; } #cc-subscr-edit-container #cc-payment-option-container { padding-bottom: 0px !important; } #cc-subscription-shipment-frequency-label { margin: 20px 0px 20px 0px; display: inline-block; width: 100%; text-align: center; font-family: arial; font-size: 11px; } #cc-payment-option-container { padding-bottom: 20px; } #cc-payment-option-container #cc-payment-msg { clear: both; margin: 0 0 20px 25px; } #cc-payment-option-container #cc-payment-msg div { color: #585858; font-size: 10px; } #cc-frequency-container { -webkit-box-shadow: 0px 3px 2px -2px #b0b0b0; -moz-box-shadow: 0px 3px 2px -2px #b0b0b0; box-shadow: 0px 3px 2px -2px #b0b0b0; } #cc-frequency-container .cc-tooltip-question { display: inline-block; float: none; vertical-align: middle; } #cc-frequency-container #cc-subscr-edit-msg-container { border: 1px solid #cccccc; background-color: #FBEEAA; clear: both; display: none; font-size: 11px; padding: 5px; width: 330px; } #cc-frequency-container #cc-subscr-edit-msg-container #cc-subscr-edit-msg-body { text-align: left; } h3.cc-custom-title { display: inherit; font: bold 11px arial; margin: 0; padding: 0; text-align: right; margin-right: 70px; } #cc-subscr-per-box-container { clear: both; font: bold 10px arial; } #cc-subscr-per-box-container > div { float: left; margin-right: 30px; width: 120px; } #cc-subscr-per-box-container > div span { font-size: 11px; } #cc-subscr-per-box-container #cc-subscr-3-months-price { margin: 0 0 0 30px; width: 145px !important; } .cc-payment-total { font: bold 14px arial; } .cc-payment-total .cc-subscription-blue { color: #0069AA; margin-top: 30px; } .cc-subscription-square-container { float: left; margin: 0 0 0 26px; } .cc-subscription-square-container div { text-align: center; } .cc-subscription-square-container .cc-divide-container { float: left; margin: 0 20px 0 -20px; } .cc-subscription-square-container .cc-divide-container .cc-vertical-divider { background-color: #dadada; height: 40px; margin-left: 10px; width: 1px; } .cc-subscription-square-container .cc-divide-container .cc-divide-txt { margin: 10px 0 10px; text-transform: uppercase; } .cc-subscription-square-container #cc-subscriptions-6-months:hover, .cc-subscription-square-container #cc-subscriptions-12-months:hover, .cc-subscription-square-container #cc-payment-month:hover, .cc-subscription-square-container #cc-payment-shipment:hover { border: 3px solid #cccccc !important; height: 114px !important; overflow: hidden !important; position: relative !important; width: 114px !important; -moz-box-shadow: 0px 0px 15px #4f91b5; -webkit-box-shadow: 0px 0px 15px #4f91b5; box-shadow: 0px 0px 15px #4f91b5; } .cc-subscription-square-container #cc-subscriptions-6-months:hover > div, .cc-subscription-square-container #cc-subscriptions-12-months:hover > div, .cc-subscription-square-container #cc-payment-month:hover > div, .cc-subscription-square-container #cc-payment-shipment:hover > div { padding: 6px !important; } .cc-subscription-square-container #cc-subscriptions-3-months { width: 150px; } .cc-subscription-square-container #cc-subscriptions-3-months:hover { border: 3px solid #cccccc !important; height: 114px !important; overflow: hidden !important; position: relative !important; width: 145px !important; -moz-box-shadow: 0px 0px 15px #4f91b5; -webkit-box-shadow: 0px 0px 15px #4f91b5; box-shadow: 0px 0px 15px #4f91b5; } .cc-subscription-square-container #cc-subscriptions-3-months:hover > div { padding: 6px !important; } .cc-subscription-square-container #cc-subscriptions-3-months div .cc-select-container { margin-left: -2px; width: 106px; } .cc-subscription-square-container #cc-subscriptions-3-months div .cc-select-container select { float: left; font-size: 11px; margin-left: 5px; width: 42px; } .cc-subscription-square-container #cc-subscriptions-3-months div .cc-select { margin: 5px 0 5px 0; width: 100%; } .cc-subscription-square-container #cc-subscriptions-3-months div .cc-month-txt { width: 40px; } .cc-subscription-square-container #cc-subscriptions-3-months div .cc-eye-unit-txt { width: 33px; } .cc-subscription-square-container #cc-subscriptions-3-months div div { float: left; font-size: 9px !important; font-weight: normal; line-height: 2; text-align: right; width: 45px; margin-top: 2px; } .cc-subscription-square-container .cc-squares-last { margin-right: 0px !important; } .cc-subscription-square-container .cc-squares { background: white; background: -moz-linear-gradient(top, white 0%, #f6f6f6 47%, #f1f1f1 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(47%, #f6f6f6), color-stop(100%, #f1f1f1)); background: -webkit-linear-gradient(top, white 0%, #f6f6f6 47%, #f1f1f1 100%); background: -o-linear-gradient(top, white 0%, #f6f6f6 47%, #f1f1f1 100%); background: -ms-linear-gradient(top, white 0%, #f6f6f6 47%, #f1f1f1 100%); background: linear-gradient(to bottom, white 0%, #f6f6f6 47%, #f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1', GradientType=0 ); border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border: 1px solid #dadada; cursor: pointer; float: left; height: 118px; margin-right: 30px; overflow: hidden; position: relative; width: 118px; white-space: nowrap; } .cc-subscription-square-container .cc-squares > div { font-size: 12px; font-weight: bold; padding: 8px; } .cc-subscription-square-container .cc-squares > div > div span { font-size: 16px; } .cc-subscription-square-container .cc-squares > div > div span.cc-subscription-blue { color: #0069AA; } #cc-subscr-edit-container .cc-subscription-square-container { margin-bottom: 50px !important; } #cc-subscr-edit-container #cc-payment-option-container h3 { display: block; } #cc-subscr-edit-container #cc-step-3-left-top { margin-bottom: 22px; } .cc-subscription-month-selected, .cc-subscription-payment-selected { border: 3px solid #0069aa !important; height: 114px !important; overflow: hidden !important; position: relative !important; width: 114px !important; } .cc-subscription-month-wider-selected { border: 3px solid #0069aa !important; height: 114px !important; overflow: hidden !important; position: relative !important; width: 145px !important; } .cc-subscription-month-inner-selected, .cc-subscription-payment-inner-selected { padding: 6px !important; } #cc-3-months, #cc-6-months, #cc-12-months { height: 45px; margin: 5px 0 0 29px; width: 51px; } #cc-3-months { background: url(../images/background/subscription_calendar_sprite.png) 0 0 no-repeat; } #cc-6-months { background: url(../images/background/subscription_calendar_sprite.png) -56px 0 no-repeat; } #cc-12-months { background: url(../images/background/subscription_calendar_sprite.png) -112px 0 no-repeat; } .cc-month-title { margin-top: 10px; } .cc-payment-option-title { margin-bottom: 25px; } #cc-subscription-timeline { overflow: hidden; position: relative; } #cc-subscription-timeline > div > div { float: left; } #cc-subscription-timeline > div > div div { color: #0069AA; font-size: 12px; font-weight: bold; text-align: center; } #cc-subscription-timeline .cc-margin-left-6 { margin-left: 38px; } #cc-subscription-timeline .cc-margin-left-4 { margin-left: 76px; } #cc-subscription-timeline .cc-margin-left-3 { margin-left: 114px; } #cc-subscription-timeline .cc-margin-left-2 { margin-left: 190px; } #cc-subscription-timeline .cc-margin-left-1 { margin-left: 417px; } #cc-subscription-timeline .cc-timeline-last { float: right; margin-right: 0; } #cc-subscription-timeline #cc-subscription-month-container { margin: 30px auto; width: 160px; } #cc-subscription-timeline #cc-subscription-month-container > div { clear: both; color: #0069AA; float: none; text-align: center; } #cc-subscription-timeline #cc-subscription-month-container #cc-subscription-one-month { background: url(../images/background/subscription_one_month.png) no-repeat; height: 88px; margin: 0 auto; width: 88px; } #cc-subscription-timeline .cc-timeline-img { background: white url(../images/background/subscription_delivery.png) no-repeat; height: 87px; margin-bottom: 4px; position: relative; width: 38px; z-index: 2; } #cc-subscription-timeline .cc-timeline-dash { border-top: 2px dashed #dadada; clear: both; height: 1px; position: absolute; top: 80px; width: 494px; z-index: 1; } .cc-payment-option-disable { color: #cccccc !important; cursor: auto !important; } .cc-select-disable { background-color: #cccccc; } /* ------------------------------------------------------------------------- 2. MAIN PRODUCT SKU CONTAINER ------------------------------------------------------------------------- */ .cc-prod-params-group { float: left; font-family: Arial; font-size: 12px; margin-left: 5px; padding: 15px 0px 10px 0px; position: relative; text-align: center; width: 100%; } table#cc-prod-params-table { float: left; font-family: arial; margin: 5px 0px 10px 7px; } tr.cc-prod-param-header-tr { height: 30px; } tr.cc-prod-param-line-tr { height: 28px; } td.cc-prod-param-horizon-header-td { font-weight: bold; padding: 0 5px; } td.cc-prod-param-header-td { font-weight: bold; text-align: center; } td.cc-prod-param-td { text-align: center; } #cc-apply-rebate { clear: both; margin-left: 8px; } .cc-prod-params-header { clear: both; float: left; margin-bottom: 5px; } .cc-prod-param-line { clear: both; float: left; width: 550px; /* Need to use something greater than 100% because sometimes we display products with large number of params which causes to wrap them to the next line */ } .cc-prod-params-header { float: left; font-size: 12px; } .cc-prod-param { float: left; } .cc-prod-param-title, .cc-prod-eye-param-title, .cc-prod-param-select-title, .cc-prod-param-item, .cc-prod-param-select-item, .cc-prod-eye-param-item { margin: 0px 1px; } .cc-prod-param-title, .cc-prod-param-item, .cc-prod-param-select-item, .cc-prod-param-select-title { min-width: 46px; /* Don't change value without good regression testing of params */ text-align: center; } .cc-prod-param-title, .cc-prod-eye-param-title, .cc-prod-param-select-title { float: left; font-weight: bold; text-align: center; } .cc-prod-param-item, .cc-prod-param-select-item, .cc-prod-eye-param-item { line-height: 28px; } .cc-prod-param-item { font-size: 14px; } .cc-prod-eye-param-item, .cc-prod-eye-param-title { font-size: 12px; font-weight: bold; width: 62px; /* Change value with caution. It may wrap large number of params on the next line for some browsers */ } .cc-rod-eye-param-item { text-align: left; } .cc-text-adjust { font-weight: bold; padding: 0px 3px; } .cc-prod-param-combo-box { font-family: Arial; font-size: 10pt; } .cc-rx-product-container { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; color: #5D6069; font-family: arial; height: auto; margin: 10px 0 -10px 50px; padding: 5px; position: relative; width: 540px; } #cc-link-reset { display: none; } .cc-rx-list-container, .cc-rx-list-container-on { margin-bottom: 10px; width: 100%; } .cc-rx-left-container { float: left; margin: 10px 0 0 10px; } .cc-rx-left-container-on { background-color: #CCCCCC; float: left; height: 45px; padding-right: 10px; width: 70px; } .cc-rx-right-container { float: left; margin: 9px 20px 0; white-space: nowrap; } .cc-rx-product-name { margin-bottom: 10px; } .cc-rx-divider { background-color: #CCCCCC; height: 1px; margin: 7px 0 5px 10px; width: 380px; } .cc-rx-url-link { float: left; } .cc-product-continue-btn-container { background-color: #D7EAF9; margin-bottom: 30px; margin-top: 30px; width: 100%; } .cc-link-return-to-search-results { text-align: center; width: 100%; } /* ------------------------------------------------------------------------- 3. Subscription Edit ------------------------------------------------------------------------- */ #subscr-edit-container { color: #000000; font: normal 14px Arial; width: 480px; } #subscr-edit-container h3 { float: left; font-weight: bold; margin-bottom: 26px; } #subscr-edit-container ul li { margin-bottom: 18px; } #subscr-edit-container ul li input { margin-right: 18px; } #subscr-edit-container ul li #month-select { color: #737373; font-size: 12px; margin-left: 40px; } #subscr-edit-container .whats-this { float: left; margin: 0 0 0 5px; } #subscr-edit-container #subscr-edit-content { height: 317px; width: 100%; } #subscr-edit-container #subscr-edit-content #ship-freq { margin-bottom: 45px; overflow: hidden; } #subscr-edit-container #subscr-edit-content #ship-freq #shipment-option-container { clear: both; } #subscr-edit-container #subscr-edit-content #ship-freq #shipment-option-container > div { float: left; } #subscr-edit-container #subscr-edit-content #pay-option { clear: both; margin-top: 20px; } #subscr-edit-container #subscr-edit-content #pay-option #payment-option-container { clear: both; } #subscr-edit-container #subscr-edit-content #pay-option #payment-option-container span.subscr-saving { color: #739FC6; } #subscr-edit-container #vertical-divider { margin: -10px 56px; } #subscr-edit-container #vertical-divider .vertical-txt { font-weight: bold; margin: 12px 0 12px 0; } #subscr-edit-container #vertical-divider .vertical-line { background-color: #b2b2b2; height: 20px; margin-left: 10px; width: 1px; } #subscr-edit-container .horiztonal-divider { background-color: #b2b2b2; clear: both; height: 1px; margin-top: 45px; width: 440px; } #subscr-edit-container #subscr-btn-container { margin: 0 auto; line-height: 2.2; overflow: hidden; padding-top: 10px; width: 200px; } #subscr-edit-container #subscr-btn-container #subscr-edit-confirm { background-color: #E1E1E1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid; border-color: #B2B2B2 #000000; cursor: pointer; float: left; height: 32px; margin-right: 40px; text-align: center; width: 85px; } #subscr-edit-container #subscr-btn-container #subscr-edit-cancel { cursor: pointer; } .cc-subscr-warning { clear: both; margin-top: 15px; } .display-table-row { display: table-row; } .error-message-both-eyes { display: none; } .error-message-both-eyes { width: 415px; margin-left: 35px; } .error-message-single-eye-container, .error-message-both-eyes-container { background-color: #fbeeaa; min-height: 16px; padding: 2px; } .error-message-single-eye-margin, .error-message-both-eyes-margin { margin-left: 5px; } .prescription-fields-disabled { opacity: 0.20; } .text-padding { padding: 0px 5px; } /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The CSS file that defines properties on the RXWizard pages. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1.00 COMMON CONTAINER PROPERTIES 1.01 STEP 1 SLIDER CONTAINER 2.00 STEP 2 LENSTYPE CONTAINER 3.00 STEP 3 LENSOPTION CONTAINER 3.01 CLEARLENSES OPTION CONTAINER 3.02 SUNGLASSESLENSES OPTION CONTAINER 3.03 TRANSITIONLENSES OPTION CONTAINER 3.04 TRANSITIONSLENSES SUNCLIPS OPTION CONTAINER 4.00 LENSCOATINGS OPTION CONTAINER 4.01 LENSCOATINGS BUNDLE OPTION CONTAINER 4.02 LENSCOATINGS SELECT BUNDLE OPTION CONTAINER ==================================== */ /* ----------------------------------------------------------------------- Coastal Contacts DESCRIPTION: The light CSS version that defines core properties for the RX Wizard. Will be used by i.e. Overstock and needs to be @import into the main CSS for RX Wizard. ----------------------------------------------------------------------- */ /* ======== TABLE OF CONTENTS ======== 1.0 PROGRESS BAR 2.0 CONTAINERS 3.0 STEP 0 - INTRO (SPLASH) 4.0 STEP 1 - PRESCRIPTION 5.0 STEP 2 - LENS TYPE 6.0 STEP 3 - LENS OPTIONS ==================================== */ /* ------------------------------------------------------------------------- 1.0 PROGRESS BAR ------------------------------------------------------------------------- */ #cc-intro-rx-screen-container, #cc-eyeglasses-lensType-container, #cc-eyeglasses-prescription-container, #cc-eyeglasses-lensOption-container, #cc-eyeglasses-lensCoatings-container { margin: 20px 30px; } .cc-eyeglasses-prescription-steps { background: url(../images/background/rxwizard_progress_sprite.png) no-repeat; height: 50px; width: 200px; } .cc-eyeglasses-prescription-steps-without-coating { background: url(../images/background/rxflow_sprite_three_step.png) no-repeat; height: 50px; width: 200px; } #cc-eyeglasses-prescription-step-active { background-position: 0px 0px; width: 181px; } #cc-eyeglasses-prescription-step-active-without-coating { background-position: 0px 0px; width: 240px; } #cc-eyeglasses-prescription-step-checked, #cc-eyeglasses-prescription-step-checked-disabled { background-position: 0px -98px; width: 181px; } #cc-eyeglasses-prescription-step-checked-without-coating, #cc-eyeglasses-prescription-step-checked-disabled-without-coating { background-position: 0px -98px; width: 240px; } #cc-eyeglasses-prescription-step-checked, #cc-eyeglasses-prescription-step-checked-without-coating { cursor: pointer; } #cc-eyeglasses-progress-bar-end-filler { background-position: -805px 0px; width: 165px; } #cc-eyeglasses-lenstype-step-active { background-position: -181px -49px; width: 181px; } #cc-eyeglasses-lenstype-step-active-without-coating { background-position: -240px -49px; width: 240px; } #cc-eyeglasses-lenstype-step-checked, #cc-eyeglasses-lenstype-step-checked-disabled { background-position: -182px -98px; width: 181px; } #cc-eyeglasses-lenstype-step-checked-without-coating, #cc-eyeglasses-lenstype-step-checked-disabled-without-coating { background-position: -239px -98px; width: 239px; } #cc-eyeglasses-lenstype-step-checked, #cc-eyeglasses-lenstype-step-checked-without-coating { cursor: pointer; } #cc-eyeglasses-lenstype-step-inactive { background-position: -183px 0px; width: 181px; } #cc-eyeglasses-lenstype-step-inactive-without-coating { background-position: -240px 0px; width: 240px; } #cc-eyeglasses-lensoption-step-active { background-position: -364px -98px; width: 181px; } #cc-eyeglasses-lensoption-step-active-without-coating { background-position: -478px -98px; width: 239px; } #cc-eyeglasses-lensoption-step-checked-without-coating { background-position: -478px -147px; width: 240px; cursor: pointer; } #cc-eyeglasses-lensoption-step-checked, #cc-eyeglasses-lensoption-step-checked-disabled { background-position: -363px -147px; width: 180px; } #cc-eyeglasses-lensoption-step-checked { cursor: pointer; } #cc-eyeglasses-lensoption-step-inactive { background-position: -363px 0px; width: 181px; } #cc-eyeglasses-lensoption-step-inactive-without-coating { background-position: -480px 0; width: 240px; } #cc-eyeglasses-coating-step-active { background-position: -543px -147px; width: 180px; } #cc-eyeglasses-coating-step-checked, #cc-eyeglasses-coating-step-checked-disabled { background-position: -543px -196px; width: 179px; } #cc-eyeglasses-coating-step-checked { cursor: pointer; } #cc-eyeglasses-coating-step-inactive { background-position: -543px 0px; width: 179px; } .cc-eyeglasses-progress-bar li { float: left; } /* RxWizard Tooltip */ .whats-pd, .whats-sphere, .whats-axis, .whats-add { background: url(../images/icons/icon_question.png) no-repeat scroll 0 0 transparent; cursor: pointer; float: left; height: 16px; margin: 4px 21px 0 5px; width: 14px; } .cc-prescription-note { width: 686px !important; } .cc-how-to-read-prescription { float: right; } #eyeglasses-pd-one, #eyeglasses-pd-two { flat: left; } #eyeglasses-single-pd-container { clear: both; float: left; margin-left: 20px; margin-top: 5px; } #eyeglasses-two-pd-container { float: left; margin-left: 20px; } #eyeglasses-pd-right-container { float: left; width: 80px; } #eyeglasses-pd-right-header, #eyeglasses-pd-left-header { float: left; margin-bottom: 3px; } #eyeglasses-pd-left-container { float: right; width: 80px; } .eyeglasses-pd { float: left; margin-left: 10px; margin-right: 10px; } #eyeglasses-pd-video-container { float: right; } .eyeglasses-pd-video { float: right; width: 112px; text-align: right; } #eyeglasses-pd-values-container { clear: both; } .prescription-tooltip-body { padding: 10px 10px 5px 10px; text-align: left; text-indent: 0; font-size: 10px; } .prescription-tooltip-text { margin-bottom: 10px; } .prescription-tooltip-link { font-size: 10px !important; } .cc-prescription-sku-holder-pd { margin-top: 15px; } .rx-file-os-container-pd { margin-top: -10px; } .cc-rx-file-pd-min-height { min-height: 25px; } #select-pd-warning-box { height: auto; text-align: left; border: 1px solid #FF0000; color: #FF0000; font-size: 12px; background: url(../images/icons/warning.png) no-repeat scroll 10px center #ffe5e5; line-height: 16px; margin-right: 30px; margin-top: 10px; padding: 10px 10px 10px 40px; } #select-pd-warning-box li { padding: 15px 15px 15px 5px; } /* ------------------------------------------------------------------------- 2.0 CONTAINERS ------------------------------------------------------------------------- */ #cc-prescription-option-content, #cc-step-holder-container, #cc-edit-prescription-container, #cc-rx-wizard-container { width: 782px; } #cc-prescription-detail-container, #cc-intro-rx-screen-detail-container { color: #2E2E2E; font-family: Arial; float: left; } .cc-prescription-header { clear: both; float: left; padding-top: 12px; width: 722px; } #cc-intro-rx-screen-header { background-color: #0069AA; color: #FFFFFF; font-weight: bold; line-height: 31px; margin: 9px 0; padding-left: 10px; } .cc-eyeglasses-prescription-slider { margin-bottom: 20px; text-align: left; width: 720px; } .cc-eyeglasses-prescription-option-content { position: relative; background: #FFFFFF; font-size: 12px; min-height: 300px; margin-bottom: 10px; width: 720px; padding-left: 20px; } .cc-eyeglasses-prescription-option-content ul li { margin-bottom: 5px; font-size: 12px; font-weight: bold; padding: 0px; } .cc-eyeglasses-usage-container { margin-top: 10px; margin-bottom: 10px; width: 702px; } .cc-eyeglasses-prescription-slider-option { background: url(../images/icons/ecp_slider_on.png) 0px 0px no-repeat; cursor: pointer; font-weight: normal; margin-top: 5px; padding: 0px; position: relative; } .cc-eyeglasses-prescription-slider-header { background: #D7EAF9; height: 30px; line-height: 30px; margin-left: 32px; } .cc-eyeglasses-prescription-help-container { float: right; margin-right: 5px; } .cc-eyeglasses-prescription-help { color: #0069AA; font-family: Arial; font-size: 18px; font-weight: bold; } .cc-rx-nav-prev { color: #0069aa; cursor: pointer; text-decoration: none; } .cc-rx-nav-prev:hover { text-decoration: underline; } /* Overwrite default outlines for tiles and options (not selected state). NOTE: Needs to be defined before the following .class for selected state. */ .cc-eyeglasses-lensType, .cc-eyeglasses-lensOption { outline: medium solid #E5E5E5 !important; } /* Overwrite outlines for tiles and options hover and selection states */ div.cc-eyeglasses-prescription:hover, div.cc-eyeglasses-prescription.selected, .cc-eyeglasses-lensType-border-selected, .cc-eyeglasses-lensOption:hover, .cc-eyeglasses-sunglasses-lensOption:hover, .cc-eyeglasses-transition-lensOption:hover, .cc-eyeglasses-lensType-notAvailable-hover:hover, .cc-eyeglasses-lensOption-border-selected, .cc-color-checked { outline: medium solid #0069AA !important; } /* ------------------------------------------------------------------------- 3.0 STEP 0 - INTRO (SPLASH) ------------------------------------------------------------------------- */ .cc-step0-container { display: none; height: 450px; } #cc-intro-rx-body { margin-bottom: 20px; float: left; width: 100%; } .cc-intro-rx-choices-wrapper { float: left; width: 100%; } .cc-intro-rx-step-choice { -moz-box-shadow: 0px 2px 4px #bcbcbc; -webkit-box-shadow: 0px 2px 4px #bcbcbc; box-shadow: 0px 2px 4px #bcbcbc; cursor: pointer; height: 230px; float: left; padding: 0 10px; width: 334px; } .cc-intro-rx-step-choice:hover { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: "none"; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .cc-intro-rx-choice-selected { /* Need to force outline overwrite because of Overstock partner where they have outline turned off by default for components i.e. * {outline: medium none !important;}. Don't remove !important unless Overstock Rx Wizard is tested. */ outline: 3px solid #0069aa !important; background: url(//www.coastal.com/template-resources/images/coastal-images/product/selected.png) top right no-repeat; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #cc-intro-rx-add-custom-lenses { margin-right: 5px; } #cc-intro-rx-add-frames-only { margin-left: 5px; } .cc-intro-rx-choice-title, .cc-intro-rx-choice-img, .cc-intro-rx-choice-caption { display: inline-block; text-align: center; width: 100%; } .cc-intro-rx-choice-title { font-size: 14px; font-weight: bold; line-height: 40px; } #cc-intro-rx-choice-add-custom-img, #cc-intro-rx-choice-frames-only-img { padding: 15px 0; margin: 10px 0; text-align: center; width: 100%; } .cc-intro-rx-choice-caption { font-size: 12px; height: 40px; } #cc-intro-rx-footer { clear: both; float: left; height: 60px; width: 720px; } /* ------------------------------------------------------------------------- 4.0 STEP 1 - PRESCRIPTION ------------------------------------------------------------------------- */ .cc-prescription-sku-select-container { float: left; padding-top: 10px; width: 720px; } .cc-prescription-labels { color: #2e2e2e; font-size: 12px; clear: left; width: 100%; } .cc-prescription-sku-holder, .cc-prescription-sku-holder-title { font-family: arial; font-size: 12px; float: left; line-height: 25px; text-align: center; } .cc-prescription-read-details { margin-top: 10px; width: 684px; min-height: 134px; padding-bottom: 20px; } .cc-prescription-read-shadow { -moz-box-shadow: 0px 0px 2px 4px #DCDCDC; -webkit-box-shadow: 0px 0px 6px 4px #DCDCDC; border-radius: 4px; box-shadow: 0px 0px 2px 4px #DCDCDC; background-color: #ffffff; margin-top: 10px; } .cc-measure-pd-video { padding-top: 10px; margin-left: 15px; text-align: center; vertical-align: middle; } div.cc-eyeglasses-prescription:hover, div.cc-eyeglasses-prescription.selected { outline: 3px solid #0069aa; } .cc-eyeglasses-prescription-helpno, .cc-eyeglasses-help-or { color: #0069AA; font-family: Arial; font-size: 18px; padding-left: 5px; } .cc-eyeglasses-usage { height: 90px; width: 216px; float: left; margin: 8px; } .cc-prescription-header-label { color: #0069AA; font-size: 18px; font-family: Arial; float: left; } .cc-prescription-btn-cnt { margin-bottom: 30px; } .cc-eyeglasses-help-chat { float: right; margin-top: 5px; margin-left: 5px; } .cc-rx-eye-side { float: left; margin-bottom: 10px; width: 100%; /* Need for IE7 */ } .cc-pd-prescription { color: #2e2e2e; float: left; font-family: Arial; font-size: 12px; font-weight: bold; margin-top: 10px; } .cc-rx-file-skkuoption-divider { background: url(../images/background/vertical_divider.png) no-repeat scroll 0 0 transparent; height: 30px; margin: 0 0; width: 1px; } .cc-prescription-link { color: #0069aa; font-family: Arial; font-size: 12px; text-decoration: underline; } .cc-prescription-sku-holder { min-width: 78px; } .cc-prescription-sku-holder-title { font-weight: bold; width: 78px; } .cc-prescription-sku-eyeside-holder { color: #2e2e2e; font-family: Arial; font-size: 12px; font-weight: bold; float: left; line-height: 25px; text-align: left; width: 65px; } .cc-sph-note { width: 160px; color: #858585; font-size: 12px; font-family: Arial; float: left; } .cc-cyl-axis-note { color: #858585; float: left; font-family: Arial; font-size: 12px; width: 200px; } .cc-pd-container { border-top: 1px solid #858585; padding-top: 15px; width: 686px; } .cc-pd { color: #2e2e2e; float: left; font-family: Arial; font-size: 12px; font-weight: bold; margin-top: 2px; } .cc-prescription-pd-checkbox { color: #2E2E2E; font-family: arial; font-size: 12px; margin: 2px 0px 0px 7px; } .cc-prescription-pd-checkbox span { margin-left: 5px; } .cc-pd-minwidth { min-width: 0px; } .cc-glassesAdd-margin { margin-left: 40px; } .cc-glassesAxis-margin { margin-right: 40px; } .cc-glassesCylinder-margin { margin-left: 40px; } .cc-glassesSphere-margin { margin-right: 40px; } #cc-how-to-read, #cc-how-to-measure-pd { margin-top: 10px; } .cc-eyeglasses-prescription-select-error { outline: 2px solid red; background: #FFE5E5; } .cc-add-note { color: #858585; float: left; font-family: Arial; font-size: 12px; margin-left: 35px; width: 220px; } #cc-correct-prod-params-error-box { height: auto; float: left; text-align: left; width: 640px !important; } #cc-correct-prod-params-error-box ul { padding: 15px 15px 15px 5px; } #cc-correct-prod-params-error-box li { line-height: 16px; padding-bottom: 0px; margin-bottom: 0px; vertical-align: middle; } .cc-eyeglasses-pd-confirm-messages-info { color: #585858; float: left; font-family: arial; font-size: 12px; font-weight: bold; } .cc-pdInfo { margin: 16px; } .cc-prescription-read-label { color: #2e2e2e; font-family: Arial; font-size: 12px; font-weight: bold; } .cc-prescription-pd-confirm-message { width: 96%; height: 50px; margin-bottom: 10px; margin-top: 5px; } .cc-prescription-selection-note { padding-left: 68px; float: left; margin-bottom: 10px; padding-left: 68px; } .cc-eyeglasses-pd-confirm-messages-image-arrow { background: url(//http://www.coastal.com/template-resources/images/background/arrow_up.png) no-repeat scroll 0 0 transparent; height: 5px; left: 50px; position: absolute; width: 9px; margin-top: -5px; } .cc-eyeglasses-pd-confirm-messages-container { background-color: #F0F0F0; height: 50px; margin-bottom: 10px; outline: 1px solid #A0A0A0; } .cc-eyeglasses-pd-confirm-message-wrapper { margin: 16px; } /* ------------------------------------------------------------------------- 5.0 STEP 2 - LENS TYPE ------------------------------------------------------------------------- */ .cc-eyeglasses-lensType { float: left; width: 230px; outline: solid #E5E5E5; margin-right: 10px; } .cc-eyeglasses-lensType-info { clear: left; margin-left: 15px; margin-right: 15px; min-height: 90px; padding-bottom: 20px; padding-top: 20px; } .cc-eyeglasses-lensType-border-selected { outline: solid 3px #0069aa; } .lensType-info-content { color: #2e2e2e; font-size: 12px; font-family: Arial; margin-bottom: 10px; } .cc-eyeglasses-lensType-info { clear: left; margin-left: 15px; margin-right: 15px; min-height: 90px; padding-bottom: 20px; padding-top: 20px; } .cc-eyeglasses-lensType-container-inner { clear: both; float: left; margin-left: 5px; width: 735px; } .cc-product-lensType-size-match-placeholder, .cc-lensOption-sunclips-selected-image, .cc-lensCoatings-selected-image, .cc-lensCoatings-recommended-bundle-selected-image, .cc-lensCoatings-bundle-selected-image, .cc-lensOptions-selected-image-holder { float: right; height: 1px; } .cc-eyeglasses-lensType-notAvailable-hover:hover { outline: solid 3px #0069aa; cursor: pointer; } #cc-eyeglasses-notAvailable-ClearStandard, #cc-eyeglasses-notAvailable-SunglassStandard, #cc-eyeglasses-notAvailable-TransitionStandard, #cc-eyeglasses-notAvailable-ClearProgressives, #cc-eyeglasses-notAvailable-SunglassProgressives, #cc-eyeglasses-notAvailable-TransitionProgressives { display: none; position: absolute; margin-top: 79px; z-index: 999; margin-left: 18px; } #cc-disable-ClearStandard, #cc-disable-SunglassStandard, #cc-disable-TransitionStandard { float: left; } .cc-disable-ClearStandard { background: url(../images/icons/clearLenses_notAvailable.png) no-repeat scroll 0 0 transparent; height: 200px; width: 180px; } .cc-disable-SunglassStandard { background: url(../images/icons/sunglassesLenses_notAvailble.png) no-repeat scroll 0 0 transparent; height: 200px; width: 180px; } .cc-disable-TransitionStandard { background: url(../images/icons/transitionLenses_notAvailable.png) no-repeat scroll 0 0 transparent; height: 200px; width: 180px; } #cc-select-lenstype-warning-box li, .cc-select-lensOption-warning-box li, #cc-select-lensCoatings-warning-box li { font-family: arial; font-size: 12px; font-weight: bold; } .cc-lensType-notAvailable, .cc-eyeglasses-lensType-opacity { background-color: #F8F8F8; opacity: 0.3; } .cc-rxwizard-lensType-image { height: 58px; width: 152px; } .cc-lensType-label, .cc-lensOption-label { color: #0069AA; font-size: 18px; font-family: Arial; font-weight: regular; } .cc-rx-select-one-txt, .cc-lensCoatings-select-label, .cc-lensOption-selectOne-text, .cc-lensCoatings-selectOne-text { color: #2e2e2e; font-size: 12pt; font-family: Arial; font-weight: bold; } #cc-select-lenstype-warning-box, .cc-select-lensOption-warning-box, #cc-select-lensCoatings-warning-box { height: auto; text-align: left; border: 1px solid #FF0000; color: #FF0000; font-size: 12px; background: url(../images/icons/warning.png) no-repeat scroll 10px center #ffe5e5; line-height: 16px; margin-right: 30px; margin-top: 10px; padding: 10px 10px 10px 40px; margin-bottom: 15px; } #cc-select-lenstype-warning-box li { padding: 15px 15px 15px 5px; } #cc-rx-prescription-footer, #cc-lensType-footer, #cc-lensOption-footer, #cc-lensCoatings-footer { margin-top: 30px; float: left; line-height: 30px; } #cc-lensType-footer, #cc-lensOption-footer, #cc-lensCoatings-footer { margin-bottom: 30px; width: 100%; } #cc-rx-prescription-footer { width: 690px; } .cc-lesnType-prev, .cc-lesnOption-prev, .cc-lesnCoatings-prev { background: url(../images/coastal-images/navigation/prev_prod.png) no-repeat scroll left center transparent; padding-left: 15px; float: left; font-family: arial; font-size: 13px; } #cc-lensType-continue-btn, #cc-lensOption-continue-btn, #cc-lensCoatings-continue-btn { float: right; margin-right: 5px; } .cc-product-size-match-placeholder-wrapper { height: 62px; } .cc-eyeglasses-lensType-img { text-align: center; } .cc-lensType-info-heading { color: #2e2e2e; font-size: 14px; font-family: Arial; font-weight: bold; } /** Hide Tooltip container and content by default. Overstock doesn't need tooltip classes **/ .cc-eyeglasses-lensType-link-tooltip, .cc-eyeglasses-lensOption-link-tooltip { display: none; /* Don't remove unless mitigate the risk */ } /* ------------------------------------------------------------------------- 6.0 STEP 3 - LENS OPTIONS ------------------------------------------------------------------------- */ .cc-eyeglasses-lensOption { float: left; cursor: pointer; outline: solid #E5E5E5; min-height: 330px; width: 351px; margin-bottom: 15px; margin-right: 10px; overflow: hidden; /*position: relative;*/ } .cc-eyeglasses-lensOption:hover { outline: solid 3px #0069aa; } .cc-eyeglasses-lensOption-heading-content { margin-top: 15px; min-height: 25px; } .cc-eyeglasses-lensOption-heading { background-color: #E5E5E5; } .cc-eyeglasses-lensOption-recommanded { font-size: 11px; font-family: Arial; font-weight: bold; color: #2e2e2e; margin-left: 10px; } .cc-eyeglasses-lensOption-info { float: left; color: #2e2e2e; font-size: 12px; font-family: Arial; font-weight: bold; margin: 10px 15px; width: 87%; } .cc-eyeglasses-lensesTypes-image { float: left; margin-top: 5px; margin-left: 5px; height: 16px; width: 46px; } #cc-lensOption-detail-container, #cc-lensCoatings-detail-container { float: left; width: 100%; } .cc-lensOption-clearLenses-info { clear: left; color: #585858; font-family: arial; font-size: 13px; min-height: 170px; margin-left: 15px; margin-right: 15px; } .cc-lensOption-clearLenses-prod-price, .cc-lensCoatings-prod-price { margin: 5px 15px 12px 15px; } .cc-eyeglasses-lensOption-border-selected, .cc-eyeglasses-sunclips-border-selected { outline: solid 3px #0069aa; } .cc-rx-wizard-option-selected { background-image: url(../images/coastal-images/product/selected.png); height: 61px; width: 61px; } /** Tooltip content **/ .cc-eyeglasses-lensType-tooltip { font-family: arial; font-size: 12px; color: #0069aa; text-decoration: underline; } .cc-eyeglasses-lensOption-tooltip { font-family: arial; font-size: 12px; color: #0069aa; text-decoration: underline; float: left; margin-left: 15px; margin-right: 15px; margin-top: 10px; min-height: 20px; } .cc-eyeglasses-lensType-link-tooltip, .cc-eyeglasses-lensOption-link-tooltip { background-color: #FFFFFF; border: 2px solid #CECECE; box-shadow: 10px 10px 10px #7C7C7C; color: #000000; font: 12px arial; height: 335px; width: 580px; padding: 5px; text-indent: 0; white-space: normal; z-index: 1200; } .cc-eyeglasses-lensType-tooltip-close-btn, .cc-eyeglasses-lensOption-tooltip-close-btn { background: url(../images/buttons/btn_close_sm.png) no-repeat scroll 0 0 transparent; cursor: pointer; height: 23px; left: 580px; position: absolute; top: -11px; width: 21px; } .cc-eyeglasses-lensType-tooltip-close-btn:hover, .cc-eyeglasses-lensOption-tooltip-close-btn:hover { background-position: -22px 0px; } /* ------------------------------------------------------------------------- 1.00 COMMON CONTAINER PROPERTIES ------------------------------------------------------------------------- */ #activity-wrapper { background-color: #FFFFFF; opacity: 0.5; position: absolute; top: 0px; width: 782px; filter: alpha(opacity=30); } #activity-loader-container { padding-bottom: 50px; padding-left: 50%; position: absolute; z-index: 1200; padding-top: 150px; } /* ------------------------------------------------------------------------- 1.01 STEP 1 SLIDER CONTAINER ------------------------------------------------------------------------- */ /* Eyeglasses prescription slider CSS */ .btn-reset-rx { background: url(../images/buttons/btn_reset_rx.png) no-repeat scroll right top transparent; border: medium none; cursor: pointer; height: 30px; width: 122px; float: right; } .btn-reset-rx:hover { background-position: right -31px; } .prod-item-price { color: #585858; font-weight: bold; font-family: Arial; font-size: 16px; } #cc-correct-prod-params-warning-box li, #cc-select-product-warning-box li, #cc-empty-custom-frequency-error-box li { font-family: arial; font-size: 12px; font-weight: bold; padding: 0px; } .cc-eyeglasses-prescription-option-wrapper { padding-top: 10px; } /* If it's not Rx Wizard on a partner site i.e. Overstock, then we want to hide the 'Back' button */ .cc-rx-nav-back { display: none; } .option-title, .cc-option-title { color: #2E2E2E; float: left; font-family: arial; font-size: 12px; font-weight: bold; margin-left: 10px; } .active-prod-slider-option { background: url(../images/icons/ecp_slider_off.png) 0px 0px no-repeat; } .prescription-progress-bar li { display: inline; float: left; } .prescription-step { background: url(../images/background/checkout_progress_bar.png) no-repeat; height: 55px; width: 200px; } .btn-cnt-container, .cc-btn-cnt-container { margin-bottom: 35px; } .rx-file-left-container, .cc-rx-file-left-container { float: left; margin-top: 18px; width: 100%; } #rx-file-os-container, #cc-rx-file-os-container { margin-bottom: 8px; width: 100%; } .rx-file-od-container, .cc-rx-file-od-container { float: left; width: 100%; } .cc-prescription-sku-holder-pd { margin-top: 15px; } .rx-file-os-container-pd { margin-top: -10px; } .cc-rx-file-pd-min-height { min-height: 25px; } .rx-file-skuoption-holder, .cc-rx-file-skuoption-holder { float: left; margin-left: 35px; margin-top: 8px; clear: left; } .rx-file-orderDate-container, .cc-rx-file-orderDate-container { clear: left; background-color: #E5E5E5; width: 430px; height: 25px; } .rx-file-orderDate-price, .cc-rx-file-orderDate-price { color: #2E2E2E; float: left; font-family: arial; font-size: 12px; font-weight: bold; margin-left: 10px; margin-top: 3px; } .rx-file-product-name, .cc-rx-file-product-name { color: #2e2e2e; float: left; font-family: Arial; font-size: 12px; font-weight: bold; } .rx-file-input-prescription, .cc-rx-file-input-prescription { margin-right: 15px; float: left; } .rx-file-prescriptions, .cc-rx-file-prescriptions { /* height: 230px;*/ margin-right: 30px; overflow-x: hidden; overflow-y: auto; } #view-all { margin-top: 15px; float: left; } .margin-right-30 { margin-right: 30px; } .glassesSphere-new { width: 70px; } .glassesCylinder-new { width: 70px; } .glassesAxis-new { width: 70px; } .glassesAdd-new { width: 70px; } #select-prescription-warning-box { height: auto; text-align: left; border: 1px solid #FF0000; color: #FF0000; font-size: 12px; background: url(../images/icons/warning.png) no-repeat scroll 10px center #ffe5e5; line-height: 16px; margin-right: 30px; margin-top: 10px; padding: 10px 10px 10px 40px; } #select-prescription-warning-box li { padding: 15px 15px 15px 5px; } #pd-avg-value-text { display: none; color: #585858; font-family: arial; font-size: 12px; font-weight: bold; margin-left: 15px; } .pd-avg-value { color: #585858; font-family: arial; font-size: 12px; font-weight: bold; } .whats-pd, .whats-sphere, .whats-axis, .whats-add { background: url(../images/icons/icon_question.png) no-repeat scroll 0 0 transparent; cursor: pointer; float: left; height: 16px; margin: 4px 21px 0 5px; width: 14px; } .cc-how-to-read-prescription { float: right; } #eyeglasses-single-pd-container { clear: both; float: left; margin-left: 20px; margin-top: 5px; } #eyeglasses-two-pd-container { float: left; margin-left: 20px; } #eyeglasses-pd-right-container { float: left; width: 80px; } #eyeglasses-pd-right-header, #eyeglasses-pd-left-header { float: left; margin-bottom: 3px; } #eyeglasses-pd-left-container { float: right; width: 80px; } .eyeglasses-pd { float: left; margin-left: 10px; margin-right: 10px; } #eyeglasses-pd-video-container { float: right; } .eyeglasses-pd-video { float: right; width: 112px; text-align: right; } #eyeglasses-pd-values-container { clear: both; } .prescription-tooltip-body { padding: 10px 10px 5px 10px; text-align: left; text-indent: 0; font-size: 10px; } .prescription-tooltip-text { margin-bottom: 10px; } .prescription-tooltip-link { font-size: 10px !important; } /* ------------------------------------------------------------------------- 2.00 STEP 2 LENSTYPE CONTAINER ------------------------------------------------------------------------- */ #cc-eyeglasses-prescription-step-inactive { background-position: 0 -49px; width: 181px; } .cc-eyeglasses-lensType-notAvailable-image { background: url(../images/icons/lensType_notAvailable.png) no-repeat scroll 0 0 transparent; float: left; height: 22px; margin-bottom: 20px; width: 230px; } .margin-left-25 { margin-left: 25px; } .lensType-info-footer { color: #0069aa; font-size: 12px; font-family: Arial; font-weight: regular; float: left; margin-top: 5px; margin-left: 39px; } /* ------------------------------------------------------------------------- 3.00 STEP 3 LENSOPTION CONTAINER ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 3.01 CLEARLENSES OPTION CONTAINER ------------------------------------------------------------------------- */ #lensOption-clearLenses { margin-right: 10px; margin-bottom: 10px; } #sunglasses-lensesType-image { background-position: -46px center; margin-left: 5px; margin-top: 5px; width: 45px; height: 16px; position: absolute; } #transitions-lensesType-image { background-position: -90px center; margin-left: 5px; margin-top: 5px; width: 45px; height: 16px; position: absolute; } .lensOption-label-lenses-image { margin: 0px 3px; } .lensOption-selectLenses-text { clear: both; padding-bottom: 15px; } .lensOption-choose-label { float: right; font-size: 12px; font-family: Arial; margin-right: 10px; } .lensOptions-thickness-heading-text { color: #2E2E2E; float: left; font-family: arial; font-size: 12px; font-weight: bold; margin-bottom: 10px; } .lensOption-thickness-close-option { color: #000FFF; float: right; font-family: arial; font-size: 12px; margin-right: 10px; margin-bottom: 10px; text-decoration: underline; cursor: pointer; } .cc-eyeglasses-lensOption-recommanded { font-size: 11px; font-family: Arial; font-weight: bold; color: #2e2e2e; margin-left: 10px; } .cc-eyeglasses-lensOption-prescription { font-size: 12px; font-family: Arial; color: #2e2e2e; margin-left: 5px; } .lensOption-clearLenses-bestUses { float: left; width: 160px; } .lensOption-clearLenses-recommandedRX { float: left; width: 163px; } .lensOption-info-heading { color: #585858; font-size: 12px; font-family: Arial; font-weight: bold; } .lensOption-clearLenses-bestUses ul li, .lensOption-clearLenses-recommandedRX ul li { color: #585858; font-size: 12px; font-family: Arial; margin-left: 13px; list-style: disc; } .lensOption-clearLenses-lenscrafters { clear: both; padding-top: 20px; margin-left: 15px; } .lensOption-clearLenses-lenscrafters-info { color: #585858; font-size: 10px; font-family: Arial; } .lensOption-clearLenses-price { color: #585858; font-size: 16px; font-family: Arial; font-weight: bold; } .lensOption-clearLenses-lenscrafters-price { color: #585858; font-weight: bold; font-size: 12px; font-family: arial; } .lensOption-thickness { display: none; width: 400px; height: 200px; } /* ------------------------------------------------------------------------- 3.02 SUNGLASSESLENSES OPTION CONTAINER ------------------------------------------------------------------------- */ .lensOption-transitionLenses-info { color: #585858; font-family: arial; font-size: 13px; margin-left: 15px; margin-right: 15px; min-height: 170px; } .lensOption-sunglasses-bestUses, .lensOption-sunglasses-recommandedRX { float: left; width: 100%; } .cc-eyeglasses-sunglasses-lensOption { float: left; outline: solid #E5E5E5; width: 351px; min-height: 235px; margin-bottom: 15px; margin-right: 10px; } .cc-eyeglasses-sunglasses-lensOption:hover { outline: solid 3px #0069aa; } .lensOption-sunglasses-bestUses ul li, .lensOption-sunglasses-recommandedRX ul li { color: #585858; font-size: 12px; font-family: Arial; margin-left: 13px; list-style: disc; } .lensOption-available-colors-info { clear: both; margin: 0px 15px 15px; } .lensOption-available-text { color: #2E2E2E; font-family: Arial; font-size: 12px; font-weight: bold; padding-right: 5px; } .padding-left-145 { padding-left: 140px; } .padding-left-45 { padding-left: 45px; } /* ------------------------------------------------------------------------- 3.03 TRANSITIONLENSES OPTION CONTAINER ------------------------------------------------------------------------- */ .cc-eyeglasses-transition-lensOption { float: left; outline: solid #E5E5E5; min-height: 280px; width: 351px; margin-right: 10px; margin-bottom: 15px; } .cc-eyeglasses-transition-lensOption:hover { outline: solid 3px #0069aa; } .margin-left-10 { margin-left: 10px; } .margin-10 { margin-left: 10px; margin-right: 10px; } .eyeglasses-transition-prescription { font-size: 12px; font-family: Arial; color: #2e2e2e; margin-left: 10px; } .eyeglasses-transitions-label-info { color: #0069AA; float: left; font-family: Arial; font-size: 20px; font-weight: bold; margin-left: 15px; margin-top: 10px; width: 87%; } .lensOption-thickness { clear: both; margin: 0px; } .lensOption-thickness-info { color: #2e2e2e; font-size: 12px; font-family: Arial; font-weight: bold; margin-left: 10px; } .lensOption-close-label { color: #0069aa; font-size: 10px; font-family: Arial; float: right; margin-right: 20px; } #lensOption-thickness-content { clear: both; margin-bottom: 20px; border-radius: 2px; box-shadow: 0px 0px 2px 4px #DCDCDC; background-color: #ffffff; -moz-box-shadow: 0px 0px 2px 4px #DCDCDC; -webkit-box-shadow: 0px 0px 2px 4px #DCDCDC; } .lensOption-thickness-data { min-height: 134px; } #close-btn { display: none; } #lensoption-thickness-label { cursor: pointer; } .lenses-colors { float: right; } #margin-left-5 { margin-left: 5px; } .cc-color-checked { outline: medium solid #0069aa; } .cc-lensOption-note-label { color: #0069AA; font-family: Arial; font-size: 12px; font-weight: bold; } /* ------------------------------------------------------------------------- 3.04 TRANSITIONSLENSES SUNCLIPS OPTION CONTAINER ------------------------------------------------------------------------- */ .lensOption-add-on-content { clear: both; cursor: pointer; } .lensOption-add-on-label { color: #2E2E2E; font-family: Arial; font-size: 12px; font-weight: bold; } .lensOption-sunclips-content { height: 165px; margin-top: 10px; outline: medium solid #E5E5E5; width: 712px; } .lensOption-sunclips-content:hover { outline: medium solid #0069aa; } .lensOption-sunclips-shadow-box { float: left; background: #E5E5E5; margin-left: 15px; margin-right: 15px; height: 165px; width: 105px; } .lensOption-sunclips-heading-text { color: #2E2E2E; float: left; font-family: Arial; font-size: 14px; font-weight: bold; margin-top: 70px; width: 105px; text-align: center; } .lensOption-sunclips-info { padding-top: 10px; } .lensOption-polaraised-text { color: #2e2e2e; font-family: arial; font-size: 12px; font-style: normal; font-weight: bold; margin-bottom: 5px; margin-top: 10px; } .lensOption-sunclips-image { background: url(../images/coastal-images/product/sunclips.png) repeat scroll 0 0 transparent; float: left; height: 31px; margin-right: 10px; margin-top: 15px; width: 128px; } .lensOption-sunclips-feature-content { float: left; } .lensOption-sunclips-feature-content ul { margin-right: 30px; padding: 0px; margin-bottom: 40px; } .lensOption-sunclips-feature-content ul li { color: #7C7C7C; font-family: arial; font-size: 14px; font-style: normal; margin-right: 20px; position: absolute; width: 430px; } .lensOption-sunclips-feature-heading { color: #585858; font-family: arial; font-size: 12px; font-weight: bold; } .lensOption-sunclips-add-checkbox { margin-left: 80px; } .lensOption-sunclips-add-clips-text, .lensCoatings-bundle-add-text { color: #2E2E2E; font-family: arial; font-size: 14px; font-weight: bold; } .lensOption-sunclips-price-content { float: left; width: 547px; margin-right: 30px; margin-top: 15px; } .cc-eyeglasses-lensOption-tooltip-link { float: left; font-family: arial; font-size: 12px; margin: 10px 15px; } /* ------------------------------------------------------------------------- 4.00 LENSCOATINGS OPTION CONTAINER ------------------------------------------------------------------------- */ .eyeglasses-lensCoatings { float: left; outline: solid #E5E5E5; /*height:260px;*/ width: 230px; margin-bottom: 15px; margin-right: 10px; cursor: pointer; position: relative; } .eyeglasses-lensCoatings:hover { outline: solid 3px #0069aa; } .eyeglasses-lensCoatings-border-selected { outline: solid 3px #0069aa; } .eyeglasses-lensCoatings-heading { margin: 15px; height: 40px; } .eyeglasses-lensCoatings-recommanded { color: #2E2E2E; display: inline-block; font-family: Arial; font-size: 13px; font-weight: bold; width: 175px; } #eyeglasses-lensCoatings-feature-content { margin-bottom: 10px; margin-left: 20px; margin-top: 10px; } .eyeglasses-lensCoatings-feature-heading { color: #585858; font-family: Arial; font-size: 12px; font-weight: bold; } .eyeglasses-lensCoatings-feature-list { color: #585858; font-family: Arial; font-size: 12px; } .eyeglasses-lensCoatings-add-checkbox-content { margin-top: 10px; margin-bottom: 10px; } .lensCoatings-add-checkbox { margin-left: 20px; margin-right: 10px; } .lensCoatings-add-coating-text { color: #2E2E2E; font-family: arial; font-size: 13px; font-weight: bold; } /* ------------------------------------------------------------------------- 4.01 LENSCOATINGS BUNDLE OPTION CONTAINER ------------------------------------------------------------------------- */ .lensCoatings-recommanded-bundle-label { color: #7C7C7C; font-family: Arial; font-size: 12px; font-weight: bold; } .lensCoatings-recommanded-bundle-content { height: 185px; margin-bottom: 15px; margin-top: 10px; outline: medium solid #E5E5E5; width: 722px; } .lensCoatings-recommanded-bundle-content:hover { outline: medium solid #0069AA; } .lensCoatings-recommanded-bundle-shadow-box { background: none repeat scroll 0 0 #E5E5E5; float: left; height: 100%; margin-left: 15px; margin-right: 15px; width: 110px; } .lensCoatings-recommanded-bundle-heading-text { color: #2E2E2E; float: left; font-family: Arial; font-size: 12px; font-weight: bold; margin-left: 10px; margin-top: 50px; } .lensCoatings-recommanded-bundle-heading-feature { color: #585858; font-family: arial; font-size: 12px; margin-left: 10px; margin-right: 10px; } .lensCoatings-recommanded-bundle-info { padding-top: 10px; } .lensCoatings-recommanded-bundle-supersaver-text { color: #2E2E2E; font-family: arial; font-size: 14px; font-weight: bold; } .lensCoatings-recommanded-bundle-supersaver-content ul { margin: 0px; padding: 0px; margin-bottom: 10px; } .lensCoatings-recommanded-bundle-supersaver-content ul li { color: #585858; font-family: arial; font-size: 12px; font-style: normal; list-style: disc inside none; margin-right: 20px; } .lensCoatings-recommanded-bundle-whyadd-heading { color: #585858; font-family: arial; font-size: 12px; font-weight: bold; } .lensCoatings-recommanded-bundle-save-text { color: #585858; font-family: arial; font-size: 12px; font-style: normal; } .lensCoatings-recommanded-bundle-save-price-text { color: #585858; font-family: arial; font-size: 12px; font-weight: bold; margin-left: 5px; } .lensCoatings-recommanded-bundle-price-content { float: left; width: 418px; } /* ------------------------------------------------------------------------- 4.02 LENSCOATINGS SELECT BUNDLE OPTION CONTAINER ------------------------------------------------------------------------- */ .lensCoatings-bundle-content { clear: both; width: 712px; outline: solid #E5E5E5; } .lensCoatings-bundle-content:hover { outline: solid 3px #0069aa; } .lensCoatings-bundle-image-content { /*margin-top:10px; margin-bottom:10px;*/ position: relative; } .lensCoatings-bundle-image { background-color: #0069AA; } #lensCoatings-bundle-image { padding-top: 10px; padding-bottom: 10px; } .lensCoating-bundle-price-content { clear: both; padding-bottom: 10px; } #cc-lensCoatings-bundle-selected-image-wrapper { padding-top: 10px; padding-bottom: 10px; } .lensCoatings-price-border { background: url(../images/background/prod_price_divider.png) repeat-x scroll center top transparent; display: block; height: 1px; margin: 6px 0; width: 150px; } .margin-left-250 { margin-left: 250px; } .lensCoatings-bundle-border-selected { outline: 3px solid #0069AA; } .margin-left-300 { margin-left: 300px; } .lensCoatings-bundle-save-info { color: #FFFFFF; font-family: arial; font-size: 14px; font-weight: bold; padding-top: 10px; text-align: center; } .lensCoatings-bundle-option-info { clear: left; color: #FFFFFF; font-family: arial; font-size: 12px; font-weight: bold; padding-bottom: 10px; text-align: center; } .lensCoatings-bundle-active-image { background: url(../images/buttons/checkmark_bundle.png) no-repeat scroll 0 0 transparent; float: left; height: 23px; margin-left: 220px; margin-top: -3px; position: relative; width: 23px; } .lensCoatings-bundle-coatings-text { text-align: center; } .lensCoatings-bundle-save-text { float: left; } .lensCoatings-bundle-save-price { margin-right: 150px; } .lensCoatings-select-bundle-btn { float: right; margin-right: 60px; } #select-pd-warning-box { height: auto; text-align: left; border: 1px solid #FF0000; color: #FF0000; font-size: 12px; background: url(../images/icons/warning.png) no-repeat scroll 10px center #ffe5e5; line-height: 16px; margin-right: 30px; margin-top: 10px; padding: 10px 10px 10px 40px; } #select-pd-warning-box li { padding: 15px 15px 15px 5px; } #invalid-pd-warning-box { height: auto; text-align: left; border: 1px solid #FF0000; color: #FF0000; font-size: 12px; background: url(../images/icons/warning.png) no-repeat scroll 10px center #ffe5e5; line-height: 16px; margin-right: 30px; margin-top: 10px; padding: 10px 10px 10px 40px; } .margin-bottom { margin-bottom: 10px; } .rxwizard-loader { padding-bottom: 50px; padding-left: 50%; padding-top: 50px; } /*Dialog box css */ /* reset every tag inside dialog */ .noTitleStuff .ui-dialog-titlebar { display: none; } .noTitleStuff .dialog-content { font-family: arial,verdana,sans-serif; font-size: 12px; font-style: normal; font-weight: normal; } .noTitleStuff .ui-dialog-buttonpane button { padding: 0px 20px; } .noTitleStuff .ui-widget-content, .noTitleStuff .ui-state-default { height: auto; } .noTitleStuff .ui-dialog-buttonpane { background-color: #E5E5E5; border-width: 0px; } .noTitleStuff .ui-widget input { font-size: 11px; } .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 11px; } .noTitleStuff #dialog-confirm { min-height: 35px !important; } /* end of dialog */ /* _____________________________________________________________________________ 3. EXTERNAL STOREFRONT-SPECIFIC IMPORTS _____________________________________________________________________________ **/ /* Store-specific css overwrites from tabs.scss */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: A CSS placeholder for storefronts that don't currently need store-specific styles overwritten from tabs.css. Do NOT put any CSS code here! ----------------------------------------------------------------------- */ /* _____________________________________________________________________________ 4. INTERNAL STOREFRONT-SPECIFIC IMPORTS _____________________________________________________________________________ **/ /* Store-specific css overwrites from master.scss */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: A CSS placeholder for storefronts that don't currently need store-specific styles overwritten from master.css. Do NOT put any CSS code here! ----------------------------------------------------------------------- */ /* Store-specific css overwrites from virtual_mirror.scss */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: A CSS placeholder for storefronts that don't currently need store-specific styles overwritten from virtual_mirror.css. ----------------------------------------------------------------------- */ /* Store-specific css overwrites from category.scss */ /* ----------------------------------------------------------------------- Coastal Contacts * DESCRIPTION: A CSS placeholder for storefronts that don't currently need store-specific styles overwritten from category.css. ----------------------------------------------------------------------- */