/*------------------------------------------------------------------------------------------------- Author: Justin Herrera Author: Jen Rasmussen Version 2.14.1 Table of Contents: AWS 1.0 - Base Elements (i.e. single html elements) 1.1 - Utility Classes 1.2 - RTE Classes & Overrides 1.2.1 - Lists 1.2.2 - Links 1.3 - Tables 1.3.1 - Sortable Tables 1.3.2 - Specific Tables 1.4 - Forms 1.4.1 - Web Form For Marketers(wffm) Overrides 1.4.2 - Sitecore 9 Forms Overrides 1.5 - Blockquotes 1.6 - Languages AWS 2.0 - Foundation (i.e. wrappers, nav, footer etc) 2.1 - Header 2.2 - Navigations 2.2.1 - Main Navigation 2.2.1.1 - Mega Menu 2.2.2 - Sub Navigation 2.2.3 - Utility Navigation 2.2.4 - myHollister Navigation 2.3 - Footer 2.4 - Sidebar 2.5 - Breadcrumbs 2.6 - Site Message Bar AWS 3.0 - Reusable Components 3.1 - Aware Custom Components 3.1.1 - Modal Windows 3.1.2 - Carousel 3.1.3 - Tabs 3.1.4 - Custom Select 3.1.5 - Tooltip 3.2 - Modules (i.e. reusable design parts(e.g. lists, etc) 3.3 - Callouts 3.4 - Layouts (i.e. more complex designs, tend to hold one or more modules) 3.4.1 - Product Details 3.4.2 - Results Options 3.4.3 - Inception (mini modules/components/callouts w/i sidebar on myHollister) 3.4.4 - myHollister Quick Order 3.4.5 - Account Login/Creation 3.4.6 - SS Step 2 3.4.7 - SS Step 3 3.4.8 - Article Listing Carousel 3.4.9 - Hero 3.4.10 - Site Portals 3.4.11 - SS Login 3.4.12 - Testimonials Carousel 3.4.13 - Sample Order History 3.4.14 - Consultant AWS 4.0 - Buttons & Icons 4.1 - Buttons 4.2 - Icons 4.3 - Badges AWS 5.0 - Template Specific (i.e. override display of any design element on a specific template) 5.1 - Simple 5.1.1 - Product Details 5.1.2 - Full 5.1.3 - Reverse (left nav !sidebar) 5.2 - Results 5.2.1 - Results w/i Simple Template 5.3 - Full 5.3.1 - Campaign 5.4 - Secure Start Templates / Additions 5.4.1 - User Bar 5.4.2 - Simple Template Overrides 5.4.3 - Full Template Overrides 5.5 - Splash Page AWS 6.0 - 3rd Party Overrides 6.1 - Slider / Billboard 6.2 - jQuery Custom Scroll 6.3 - Pikaday 6.4 - Brightcove HTML5 Player Colors: Red: #bf1e39; nav, call-outs, buttons, hyperlinks Gray: #878785; top nav, callouts, body copy Light Gray: #ebe9e8; secondary housing elements Brown: #998f8c; footer, menus Off-White: #f5f3ef; Secondary color floods /*-----------------------------------------------------------------------------------------------*/ @font-face{ font-family:'HelveticaNeueW02-45Ligh'; src:url('../fonts/694015/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot'); src:url('../fonts/694015/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix') format('embedded-opentype'), url('../fonts/694015/9a2e4855-380f-477f-950e-d98e8db54eac.woff') format('woff'), url('../fonts/694015/fa82d0ee-4fbd-4cc9-bf9f-226ad1fcbae2.ttf') format('truetype'), url('../fonts/694015/48d599a6-92b5-4d43-a4ac-8959f6971853.svg#48d599a6-92b5-4d43-a4ac-8959f6971853') format('svg'); } @font-face{ font-family:'HelveticaNeueW02-55Roma'; src:url('../fonts/694021/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot'); src:url('../fonts/694021/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?#iefix') format('embedded-opentype'), url('../fonts/694021/d5af76d8-a90b-4527-b3a3-182207cc3250.woff') format('woff'), url('../fonts/694021/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf') format('truetype'), url('../fonts/694021/b68875cb-14a9-472e-8177-0247605124d7.svg#b68875cb-14a9-472e-8177-0247605124d7') format('svg'); } @font-face{ font-family:'HelveticaNeueW02-75Bold'; src:url('../fonts/694033/db853e0e-929b-4272-b420-c946c954cf3a.eot'); src:url('../fonts/694033/db853e0e-929b-4272-b420-c946c954cf3a.eot?#iefix') format('embedded-opentype'), url('../fonts/694033/4a9c62ab-b359-4081-8383-a0d1cdebd111.woff') format('woff'), url('../fonts/694033/db5f9ba6-05a4-433a-9461-0a6f257a0c3a.ttf') format('truetype'), url('../fonts/694033/25e09910-ffc3-4fc4-b0d1-db9a95dface8.svg#25e09910-ffc3-4fc4-b0d1-db9a95dface8') format('svg'); } @font-face{ font-family:'HelveticaNeueW02-57Cn'; src:url('../fonts/694054/abf5b6e2-74e5-446b-b924-22c9749b33b6.eot'); src:url('../fonts/694054/abf5b6e2-74e5-446b-b924-22c9749b33b6.eot?#iefix') format('embedded-opentype'), url('../fonts/694054/c6206d3d-1ef8-44ad-96fa-c25e22252eb0.woff') format('woff'), url('../fonts/694054/6fddd219-58f2-42d3-99d5-5abbfcfde1a1.ttf') format('truetype'), url('../fonts/694054/f620604b-846b-4517-95c0-aa8a60dbb16c.svg#f620604b-846b-4517-95c0-aa8a60dbb16c') format('svg'); } /* Helvetica Neue Light ---------------------------------------------------------------------*/ h1,h2,h3,h4,h6,h1>a,h2>a,h3>a,h4>a,h5>a,h6>a,legend,fieldset > p,fieldset > p > a,#footer .site_map .col > ul > li > a,#copyright > p,#utility_navigation > ul > .location h5,input[type="checkbox"] + label,input[type="radio"] + label,.select_btn,fieldset span.help,.mod-search_results .mod-listing.breadcrumbs > ul > li,.mod-search_results .mod-listing.breadcrumbs > ul > li > a,.mod-expandables .expandable > p,span.scfRequiredChkLabel,.btn.large,#header #logo > span,.mod-multicols.article_listing .tags a,.badge,blockquote.testimonial, blockquote.testimonial cite{font-family: 'HelveticaNeueW02-45Ligh', Helvetica, Arial, sans-serif;font-weight:normal;} /* Helvetica Neue Roman ---------------------------------------------------------------------*/ body,label,blockquote > *,a.arrow-link,p,table td,.mod-grid > .item > .content > h2 > .tag,.callout .news_events h3,.mod-grid.site_section .item > .image .header,.mod-grid.site_portals > .item > .content .link,.mod-listing.filter > ul > li > a,.mod-grid.search_listing > .content > .item > .content > h4 > a,.mod-pagination li > a,.mod-grid.site_map h6 > a,.mod-grid.site_map .item .content > ul li > a,.mod-listing.icons > ul > li > a,.mod-listing.links > ul > li > a,.mod-listing.sample_cart > ul > li > .content > .header > h4,.mod-errors > p,.mod-errors > ul > li,#template-results #content > .tabs > ul > li > a,ul.links-large > li > a,.mod-grid.ss-contacts h3,table.sortable td > a, .mod-grid > .item > .content > h2, .mod-grid > .item > .content > h2 > a,.modal-login .col > p > a,.mod-site_search.stock h5,#results > h5, .subnav > .content > ul > li > a,.table_container > h3 > .secondary_link,.table_container.vertical_breakdown tbody td .mod-expandables .expandable p > a,.mod-filtered_form fieldset > ul > li > div > label,.mod-results_options > ul > li > a, .wffm .scfRadioButtonListLabel, .wffm .scfDateSelectorLabel, .wffm .scfCheckBoxListLabel,.mod-filtered_form fieldset > ul > li > label > .help,.mod-listing.flags > h4,.layout.ss-step2 .mod-listing.filter > ul li a > span, .mod-filters > div > a,.mod-filter_selections > .header > h6,.mod-filter_selections > .content a,fieldset h6, .layout.ss-step3 h3.highlight_txt_color,.layout.ss-step3 .mod-cart_preview > ul > li > .content > h6 > span,.mod-support ul li h5,.mod-support ul li a > span, .mod-featured_products h2, .mod-multicols.ss-login-cta h3{font-family: 'HelveticaNeueW02-55Roma', Helvetica, Arial, sans-serif;font-weight:normal;} /* Helvetica Neue Bold ----------------------------------------------------------------------*/ h5,a,table th,button,button.btn,.wffm input[type="submit"],#sidebar .sidebar > h4,.callout.help > .header > h3, #footer .site_map h6 > a, #footer .callout h3,.mod-expandables .trigger_expandable,#template-simple.product_details #sidebar .callout h4,.carousel .slide > .content > h6> a,.btn2.bold:link,.mod-dropdown.select_list > ul > li > a,.mod-dropdown.select_list > ul > li > .content > ul > li > a,.mod-news_events > .item > .details .date,.mod-search_results > .item > h5 > a,.mod-listing.links.red > ul > li > a,#template-full.campaign .mod-listing.links > ul > li > a,.mod-listing.barred > ul > li,.mod-grid.ss-contacts .item > h6, .callout.third > .header > h3,.callout.fourth > .header > h3,.mod-grid.search_listing > .content > .item > .content > h4,.mod-grid.search_listing > .content > .item > .content > h4 > a,.mod-gallery > span,.mod-cart_preview > h4,.callout.second h6,.mod-news_events > .item > .content > h3,.subnav > h4,.mod-summary h6,.mod-summary h6 a,.table_container > h3,.mod-filtered_form input[type="radio"] + label, .ss h3,.mod-standalone_callout > h3,.mod-standalone_callout > h6,.layout.ss-step2 .mod-listing.filter > ul li,.layout.ss-step2 .mod-listing.filter > ul li a,.layout.ss-step2 .mod-grid.search_listing > .content > .item > .content h4,.mod-notice > p,.layout.inception > h3,.layout.ss-step3 .mod-cart_preview > ul > li > .content > h6,.mod-recommended li, .mod-featured_products > ul > li > h3,.mod-multicols.article_listing h5 a,.mod-featured_products > ul > li > h3 a, .falseLink{font-family: 'HelveticaNeueW02-75Bold', Helvetica, Arial, sans-serif;font-weight:normal;} /* Helvetica Neue Condensed -----------------------------------------------------------------*/ #navigation .nav > li > a,.mod-site_search > .field > input,#utility_navigation > ul > li > a, .megamenu ul > li > a, .megamenu h4 > a,.mod-ad > *,.mod-listing.cart > ul > li > .content > a,#utility_navigation > ul > .location .multicols li > a,#utility_navigation > ul > .location h5,.mod-listing.filter_selections > ul > li,.mod-listing.filter_selections > ul > li a,.btn2,.mod-dropdown > ul > li > .content > ul > li > a,.mod-listing.breadcrumbs > ul > li,.mod-listing.breadcrumbs > ul > li > a,#template-full.campaign .section.featured_image h3,#ss-user_bar > .inner_container > h5,#ss-user_bar .mod-dropdown > ul > li > a,.custom_select > .options > ul > li > a, #myh-user_bar, #myh-user_bar a, #myh-utility_nav a, #mobile-logout,body.splash p{font-family: 'HelveticaNeueW02-57Cn', Helvetica, Arial, sans-serif;font-weight:normal;} /*------------------------------------------------------------------------------------------------- AWS 1.0 - Base Elements /*-----------------------------------------------------------------------------------------------*/ body{background:#e9e9e9;color:#6e6259;font-size:14px;-webkit-text-size-adjust:none;} h1{color:#fff;font-size:53px;line-height:59px;} h2{color:#bf1e39;font-size:28px;line-height:36px;margin:0 0 5px;position: relative;} h3{font-size:20px;color:#878787;font-weight:normal;line-height:24px;margin:0 0 2px;} h3 > a:link, h3 > a:visited{color:#878787;border:none;} h3 > a:hover{color:#bf1e39;} h3 + p{margin-top:10px;} .ss h3{font-size:20px;color:#6e6259;} * + h3{margin-top:20px;} h4{font-size:16px;color:#bf1e39;margin:0 0 8px;line-height:19px;} h4 > a:link, h4 > a:visited{color:#bf1e39;border:none;} h4 > a:hover{border-bottom:1px solid #bf1e39;} * + h4{margin-top:15px;} h5{font-size:15px;color:#998f8c;margin:0 0 2px;} * + h5{margin-top:10px;} h6{font-size:12px;color:#fff;text-transform:uppercase;margin:0 0 7px;} h6 > a:link, h6 > a:visited{color:#fff;border:none;} h6 > a:hover{border-bottom:1px solid #fff;} p{color:#716F71;line-height:19px;margin:0 0 8px;} p.intro{width:77%;} ul{list-style:none;margin:9px 0;padding-left:20px;} ul > li{padding:0;margin:0;font-size:14px;line-height:19px;} ul > li + li{margin:15px 0 0;} ol{list-style-position:inside;margin:20px 0;padding-left:20px;} ol > li{font-size:14px;line-height:19px;} ol > li + li{margin:5px 0 0;} a:link, a:visited, .falseLink{color:#bf1e39;text-decoration:none;border-bottom:1px solid #bf1e39;cursor:pointer;} a:hover, .falseLink:hover{text-decoration:none;border:none;} a:active{color:#99908d;} a:focus{outline:none;} span[title]{cursor:help;} /* Secondary Links (generally used as links within headers) */ .secondary_link:link{ color: #bf1e39; font-size: 14px; display: inline-block; margin-left: 15px; border-bottom: 1px solid #bf1e39; line-height: 16px; } .secondary_link:hover{border-color:transparent;} .secondary_link.right{border:none;position:absolute;right:0;top:15px;} .secondary_link.right:hover{color: #878785;} /* Icons */ .secondary_link.right > .arrow-lg-left{margin-right: 5px;position:relative;top:1px;} .secondary_link.right:hover > .arrow-lg-left{background-position: -12px -42px;} hr{display: block;height: 1px;border: 0;background: url('../images/hr.jpg') no-repeat;margin: 30px 0;} .ss hr{background: #e0dddc;} .myHollister hr{background: #ebe9e8;margin: 20px 0;} blockquote{background: #e9e9e9;padding:7px 20px;margin:40px 0;clear:both;} blockquote > p{ margin:0; color:#bf1e39; font-size:25px; line-height:30px; quotes: "“" "”" "‘" "’"; } blockquote > p:before{content: open-quote;} blockquote > p:after{content: close-quote;} blockquote > p + p:after, blockquote > p + p:before{content: '';display: none;} blockquote > p > cite{ /* sitecore renders a p tag encasing the cite tag */ display:block; text-align:right; font-size: 16px; margin-bottom: 5px; } noscript.site_warning > p{ display:block; margin-bottom: 20px; background: #bf1e39; color:#fff; padding:20px; text-align: center; } /* AWS 1.1 - Utility Classes ----------------------------------------------------------------*/ .error{color:red;} .success{color:green;} .highlight_txt_color{color:#bf1e39 !important;} .gray_txt{color:#878785 !important;} .legal{margin:20px 0 0;font-size: 11px;line-height: 14px;} .spacer{width:100%;height:20px;} /* AWS 1.2 - RTE Classes & Overrides --------------------------------------------------------*/ .align_img_left{float:left;margin:0 20px 20px 0;} .align_img_right{float:right;margin:0 0 20px 20px;} .align_img_left + *, .align_img_right + *{margin-top:10px;} .align_img_center{display:block;margin: 10px auto;} .sitemap_header{margin-top:20px;} /* Images */ img.responsive{ width: 75% !important; display: block; margin: 15px auto; height: auto !important; } img.responsive_full{ width: 100% !important; display: block; margin: 20px auto; height: auto !important; } /* Base Element Overrides */ #content > .section > .inner_container > .content > h4{ font-size:18px; color:#bf1e39; text-transform: none; font-weight: bold; } /* AWS 1.2.1 - Lists --------------------------------------------------------------------*/ /* Bulelts */ h3 + .bullets{margin-top:20px;} ul.bullets{margin:10px 0;} ul.bullets > li{ font-size: 14px; padding:0 0 0 8px; background: url('../images/bullet-small.png') no-repeat 0 8px; } ul.bullets li + li{margin-top:7px;} ul.bullets li > ul{margin:9px 0;} ul.bullets li > ul li{ padding:0 0 0 15px; background: url('../images/bullet-open_circle.png') no-repeat 0 5px; } /* Indented Bullets */ ul.bullets-indented{margin:10px 0 10px 12px;} ul.bullets-indented li{ font-size: 14px; padding:0 0 0 8px; background: url('../images/bullet-small.png') no-repeat 0 8px; } ul.bullets-indented ul{margin:7px 0 7px 12px;} ul.bullets-indented li + li{margin-top:7px;} /* Info */ ul.info{margin:15px 0 30px;padding:0;} ul.info > li{font-size:14px;} ul.info li + li{margin-top:5px;} ul.info li > ul{margin:9px 0 9px 12px;} /* Large Bullets */ ul.bullets-large{margin:10px 0;} ul.bullets-large li + li{margin-top:8px;} ul.bullets-large li > ul{margin:7px 0;} ul.bullets-large li > ul li{ padding:0 0 0 8px; background: url('../images/bullet-small.png') no-repeat 0 8px; } ul.bullets-large li{ position: relative; } ul.bullets-large li:before { width: 6px; height: 6px; content: ""; background-color: #bf1f39; display: inline; position: absolute; top: 11px; left: -18px; transform: translateY(-50%); } /* Large Links */ ul.links-large{margin:9px 0 9px 15px;} ul.links-large > li{font-size: 16px;} ul.links-large > .header{border-bottom:1px solid #878787;} /* Numbered */ ul.numbered{list-style:decimal;margin:9px 0 9px 15px;} ul.numbered > li{font-size:13px;padding-right:15px;} ul.numbered li + li{margin-top:7px;} ul.numbered li > ul{margin:9px 0;} ul.numbered li > ul li{ padding:0 0 0 8px; background: url('../images/bullet-small.png') no-repeat 0 8px; } ul.numbered > li > p{margin:0;} ul.numbered > li > p + *, ul.numbered > li > label.visuallyhidden + input{margin-top:20px;} /* AWS 1.2.2 - Links --------------------------------------------------------------------*/ /* Arrow Link (arrow at end of link) */ a.arrow_link{padding:0 10px 0 0;border:none;display:inline-block;} * + a.arrow_link{margin-top:20px;} a.arrow_link:after{ content: ''; display: inline-block; background: url('../images/sprite.png') no-repeat -76px -43px; width:6px; height:9px; position: relative; right:-5px; } a.arrow_link:hover{color:#878785;} a.arrow_link:hover:after{background-position: -20px -81px;} /* Video Links (launch modals) */ a.video_link{ display:inline-block; font-size:12px; line-height: 15px; color:#fff; border-radius: 5px; background: #bf1e39; padding:10px 10px 10px 21px; text-align: center; border:none; min-width: 86px; position: relative; } a.video_link:hover{background: #878785;} a.video_link:after{ content: ''; display: inline-block; background: url('../images/sprite.png') no-repeat -202px 0; width:7px; height:10px; position: absolute; top:50%; left:10px; margin:-5px 0 0; } /* AWS 1.3 - Tables -------------------------------------------------------------------------*/ table{width:100%;} table th{ font-size:11px; color: #bf1e39; text-align: center; padding:2px 5px 6px; background: #fff; } table th > a:link{ border:none; position: relative; display: block; padding:0 17px 0 0; } table th > a.active, table th > a:hover{color:#878785;} table td{ font-size:12px; padding:12px 5px 10px; background: #fff; text-align: center; vertical-align: top; } table .alt td{background:#edecea;} table td + td, table th + th{border-left:1px solid #ddd;} table tfoot td{ font-size:12px; line-height:14px; background:#fff; padding:14px 0 10px; text-align: left; } /* Utility & Styles */ .table_container{width:100%;overflow:auto;margin:36px 0 0;} .myHollister .table_container{margin-top: 0;} .myHollister * + .table_container{margin-top: 36px;} .table_container > h3{font-size: 18px;color:#bf1e39;margin-bottom: 30px;} .table_container table td{vertical-align:middle;} .table_container table td input{width:80%;margin:0 auto;} /* Clickable Table Rows */ table.row_clickable > tbody > tr{cursor:pointer;} table.row_clickable > tbody > tr:hover td{background:#ddd;} /* Vertical Breakdown */ .table_container.vertical_breakdown tbody td a:hover{border-bottom:1px solid;} .table_container.vertical_breakdown tbody td .btn{min-width: auto;} .table_container.vertical_breakdown tbody td .btn:hover{border:none;} .table_container.vertical_breakdown tbody td .btn, .table_container.vertical_breakdown tbody td .hr{display: none;} .table_container.vertical_breakdown tbody td .mod-expandables{display: none;} .table_container.vertical_breakdown tbody td .btn.always_visible{display: block;margin-top:0;} .table_container.vertical_breakdown tbody td .btn.always_visible .txt{display: none;} .table_container.vertical_breakdown tbody td .btn .edit{position: relative;top:2px;left:2px;} /* AWS 1.3.1 - Sortable Tables ----------------------------------------------------------*/ table.sortable td > a{border:none;} table.sortable td > a:hover{border-bottom:1px solid #bf1e39;} table.sortable.row_clickable td > a:hover{color:#716F71;} /* Arrows */ table.sortable th > a:after{ content: ''; display: block; width: 11px; height: 11px; background: url('../images/sprite.png') no-repeat -49px -42px; position: absolute; right:2px; top:50%; margin-top:-5px; } table.sortable th > a:hover:after{background-position: 0 -42px;} /* Ascending */ table.sortable th > a.ascending:after{ height: 5px; background-position: -49px -42px; margin-top:-2px; } table.sortable th > a.active.ascending:after, table.sortable th > a.ascending:hover:after{background-position:0 -42px;} /* Descending */ table.sortable th > a.descending:after{ height: 5px; background-position: -49px -48px; margin-top:-2px; } table.sortable th > a.active.descending:after, table.sortable th > a.descending:hover:after{background-position:0 -48px;} /* AWS 1.3.2 - Specific Tables ----------------------------------------------------------*/ /* Order History */ table.order_history tbody td{padding:0 5px;} table.order_history tbody td:first-child{text-align:left;} table.order_history .mod-expandables{margin:0;} /* Striped Tables */ .table.striped > thead > tr > th, .table.striped > tbody > tr > td {text-align:left} .table.striped > tbody > tr:nth-of-type(2n+1) > td {background-color: #edecea} /* Search IFU Results */ .table.ifu {margin-bottom:40px} .table.ifu th {padding:0 20px 8px} .table.ifu td {padding:20px} .table.ifu > tbody > tr > td > a, .table.ifu > tbody > tr > td > small {display:block;} .table.ifu > tbody > tr > td > small {margin:10px 0 0 20px;font-size:12px} .table.ifu > tbody > tr > td > a {border-bottom:0;font-size:14px} .table.ifu > tbody > tr > td > a:hover, .table.ifu > tbody > tr > td > a:active, .table.ifu > tbody > tr > td > a:focus {text-decoration:underline} .table.ifu > tbody > tr > td > a:before { content: ''; display: inline-table; width: 14px; height: 18px; background-image: url('../images/sprite.png'); background-repeat:no-repeat; background-position: -52px -212px; transform:scale(0.8); -moz-transform:scale(0.8); transform-origin:0 0; -moz-transform-origin: 0 0; /*https://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite*/ float:left; position: relative; top:0; margin-right:5px; } /* AWS 1.4 - Forms --------------------------------------------------------------------------*/ button, input[type="date"], input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea{ font-family: Arial, Helvetica, sans-serif; border:1px solid #d9d5d4; border-radius: 5px; background: #fff; color:#878785; width: 100%; } input[type="date"]{-webkit-appearance: none;} select{height:31px;line-height:31px;padding:0 0 0 2px;} input[type="text"], input[type="date"], input[type="password"]{height:31px;line-height:100%;} button{width:auto;} input,textarea{padding:5px 7px;} textarea{height: 200px;} textarea.short{height: 100px;} input[type="text"].error, input[type="date"].error, input[type="password"].error, select.error, .error select, textarea.error{background:#fdf7f7;border-color:#de8b94;color:#878785;} input[type="submit"]{ display: inline-block; font-size: 12px; line-height: 15px; color: #fff; border-radius: 5px; background: #bf1e39; padding: 10px; text-align: center; border: none; min-width: 86px; } input[type="submit"]:hover{background: #878785;} /* Disabled */ /* Properly disabled - uneditable */ input[disabled="disabled"][type="text"], input[disabled="disabled"][type="date"], input[disabled="disabled"][type="password"], textarea[disabled="disabled"], select[disabled="disabled"]{ background:#d9d5d4; -webkit-text-fill-color:#878785; /* Override iOS / Android font color change */ -webkit-opacity:1; /* Override iOS opacity change affecting text & background color */ } input[type="checkbox"].disabled + label + input[type="text"], input[type="radio"].disabled + label + input[type="text"]{border: 1px solid #d9d5d4;padding:5px 7px;} input[type="checkbox"].disabled + label, input[type="radio"].disabled + label, input[type="checkbox"].not-editable + label, input[type="radio"].not-editable + label{cursor:default;} /* Staticly disabled - meaning uneditable and doens't look like a form field */ input[type="text"].disabled, input[type="password"].disabled, input[type="date"].disabled, textarea.disabled, select.disabled{ background:#fff; border: 1px solid #fff; padding:5px 0; } textarea.disabled{border-color:#ebe9e8;padding:5px 7px;} /* Checkboxes/Radios and Labels */ input[type="checkbox"] + label, input[type="radio"] + label, .scfRequiredChkLabel, .scfCheckBoxList label:not(.label-parent), .scfRadioButtonList label:not(.label-parent) { color:#878785; position:relative; padding:3px 5px 0 32px; font-size: 15px; cursor: pointer; } /*input[type="radio"] + label{padding-left:25px;}*/ input[type="checkbox"] + label:before, input[type="radio"] + label:before, .scfRequiredChkLabel:before, .scfCheckBoxList label:not(.label-parent):before, .scfRadioButtonList label:not(.label-parent):before { content: ''; display: block; width:24px; height: 23px; background: url('../images/sprite.png'); background-repeat:no-repeat; background-position:-159px -132px; position: absolute; top:0; left:0; } input[type="radio"] + label:before, .scfRadioButtonList label:not(.label-parent):before { width:18px; height:18px; background-position:-170px -113px; top:2px; } input[type="checkbox"].disabled + label:before, input[type="radio"].disabled + label:before, input[type="checkbox"].not-editable + label:before, input[type="radio"].not-editable + label:before{opacity:.35;} input[type="checkbox"]:checked + label:before, .scfRequiredChkLabel.checked:before, .scfCheckBoxList label.checked:before {background-position: -184px -132px;} input[type="radio"]:checked + label:before, .scfRadioButtonList label.checked:before {background-position: -190px -113px;} input[type="checkbox"] + label + input[type="text"], input[type="radio"] + label + input[type="text"]{width:50%;margin-left:2%;} input[type="checkbox"].disabled:checked + label:before{background-position: -134px -132px;opacity:1;} input[type="radio"].disabled:checked + label:before{background-position: -172px -156px;opacity:1;} /* Custom Toggle (looks like a button - secure start step 2) */ input[type="checkbox"] + label.custom-toggle{ padding: 7px 5px; font-size:12px; width: 70px; text-align: center; margin:0; overflow: hidden; border: 1px solid #e0dddc; border-radius: 5px; background: #fff; height: 33px; } input[type="checkbox"]:checked + label{border-color: #716f71;} input[type="checkbox"] + label.custom-toggle:before{display:none;} input[type="checkbox"] + label.custom-toggle.hasColor{padding-top:4px;} input[type="checkbox"] + label.custom-toggle.hasColor > span{ position: absolute; bottom:0; width:100%; height: 4px; left: 0; } /* Legend, Labels, Help and Fieldsets */ legend{ color: #bf1e39; font-size: 20px; line-height: 24px; margin:0 0 21px; } legend + p{margin:-19px 0 22px;font-size:16px;line-height:20px;} label, span.label{ cursor: pointer; font-size: 15px; color:#bf1e39; display: inline-block; font-weight: bold; } span.label{cursor:default;} label > .optional, span > .optional{color:#878785;} label.required{position: relative;} label.required:before{ content: '*'; position: absolute; left: -10px; font-size: 22px; font-weight: normal; } fieldset, .mod-errors + fieldset{border:none;margin:28px 0;} fieldset + fieldset{margin-top:48px;} fieldset label,fieldset span.label{margin-bottom:6px;} fieldset span.help{color:#878785;font-size:12px;display:block;margin:3px 0 -2px;line-height:12px;} fieldset span.icon.help{ display: inline-block; margin:0 0 0 5px; position: relative; top:1px; overflow: visible; } fieldset p.help{margin:3px 0 10px;} fieldset .mod-dropdown + span.help{margin-top:8px;} /* Headers */ fieldset h6{color:#6e6259;font-size:12px;text-transform:uppercase;} /* General Styles for Fieldsets and widths */ fieldset ul{padding: 0;} fieldset > ul, .fieldset{width:97%;} fieldset > ul + ul:not(.isOnlyBtn), fieldset .multicols + ul, .fieldset + ul{margin-top:30px;} fieldset > ul + ul.relatedFields, fieldset > .relatedFields + .relatedFields{margin-top:31px;} /* keep spacing the same as the spacer */ fieldset > ul > li, .fieldset > li{float:left;width:98%;margin:0 2% 11px 0;} fieldset ul > li > p, .fieldset > li > p{margin-bottom:20px;} fieldset > ul > li.half, .fieldset > li.half{width:48%;} fieldset > ul > li.quarter, .fieldset > li.quarter{width:23%;} fieldset > ul > li.new_line, .fieldset > li.new_line{clear:left;} fieldset h5{color: #bf1e39;text-transform:uppercase;margin:20px 0 7px;} fieldset .multicols + .multicols{margin-top:20px;} /* Further Options (checkboxes, radios etc) */ fieldset > ul > li > ul{margin-top:4px;} fieldset > ul > li > ul > li{float:left;margin:0 2% 11px 0;} fieldset > ul > li > ul.toggles > li{margin-bottom:4px;} fieldset > ul > li > ul > li > input[type="radio"] ~ input[type="text"], fieldset > ul > li > ul > li > input[type="checkbox"] ~ input[type="text"]{ display: inline-block; position: relative; width: auto; top: -1px; } fieldset > ul > li > ul > li > label[data-value]:after{content: ' (' attr(data-value) ')';} fieldset > ul > li > ul.stacked > li{float:none;margin:0 0 11px;} /* Overrides */ /* Full Width */ fieldset.full > ul, fieldset.full > ul > li{width:100%;margin:0 0 11px;} /* Unique Cases */ fieldset > ul > li > .units > li:first-child{width:10.5%;padding:0;} fieldset > ul > li > .units > li{padding:3px 0 0;} /* Dropdown Override */ fieldset .mod-dropdown{margin:0;} fieldset .mod-dropdown > ul{display:block;} fieldset .mod-dropdown > ul > li{float:none;border:none;} fieldset .mod-dropdown > ul > .open{border:none;-webkit-box-shadow: none;box-shadow: none;} fieldset .mod-dropdown > ul > li > .content{ top:30px; width: 100%; left:0; right: auto; -webkit-box-shadow: none; box-shadow: none; border-color: #d9d5d4; z-index: 10; } /* Button Override - Opened */ fieldset .mod-dropdown > ul > .open .select_btn{border-radius:5px 5px 0 0;} /* AWS 1.4.1 - Web Form For Marketers(wffm) Overrides -------------------------------------*/ .wffm{margin-bottom:20px;} /* Positions */ .wffm .scfSectionContent > div { position:relative; width:98%; margin: 11px 2% 0 0; /*float: left; we need for 2 column forms but messes up single column*/ } .wffm .scfSectionContent > .halfAvailableWidth{width:48%;} .wffm .scfSectionContent > .thirdAvailableWidth{width:31.33%;} .wffm .scfSubmitButtonBorder{margin-top:11px;} .wffm .scfRequired, .wffm .scfValidatorRequired{color:#bf1e39;position:absolute;left:-10px;top:2px;margin:0;} /* Errors / Validator / Summary */ .wffm .scfValidationSummary{margin:0;} .wffm .scfSubmitSummary > span, .wffm .scfError > ul, .wffm .scfValidationSummary > ul{ background: #fdf7f7; border: 1px solid #bf1e39; border-radius: 5px; padding: 15px 20px; margin:0 0 15px; width: 98%; } .wffm .scfSubmitSummary > span, .wffm .scfError > ul > li, .wffm .scfValidationSummary > ul > li{ font-size: 12px; font-weight: bold; color: #bf1e39; padding: 0 0 0 9px; background: url('../images/bullet-small_error.png') no-repeat 0 8px; } .wffm .scfSubmitSummary > span{padding:15px 20px;background:none;display:block;} .wffm .scfError > ul > li + li, .wffm .scfValidationSummary > ul > li + li{margin-top:3px;} .wffm .scfValidator{display:none !important;} .wffm .scfValidator[style*="inline"]{ /* instant feedback validator */ display:block !important; color:#bf1e39; font-size:12px; margin:2px 0 0; float: none; } /* Checkboxes / Radio Buttons (visually hidden class) */ .wffm .scfCheckbox, .wffm .scfCaptchaLabelText{width:100%;} .scfRequiredChkLabel{margin-bottom:20px;display:block;} input[type="checkbox"], input[type="radio"]{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .wffm .scfRadioButtonList td, .wffm .scfCheckBoxList td{text-align: left;border:none;background:none;} /* Datepicker */ .ui-datepicker{ width: 280px; background: #fff; border: 1px solid #878785; } .ui-datepicker .ui-datepicker-title{text-align:center;padding:10px 0;} .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{ cursor:pointer; position: absolute; top: 10px; left: 8px; } .ui-datepicker .ui-datepicker-next{left:auto;right:8px;} .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover{color:#bf1e39;} .ui-datepicker table th{padding:7px 0;border-top:1px solid #ddd;} .ui-datepicker table td{border-top:1px solid #ddd;padding:0;} .ui-datepicker table td > a{ display:block; padding:7px 0; border:none; color: #716F71; } .ui-datepicker table td > a.ui-state-active, .ui-datepicker table td > a:hover{color:#bf1e39;} /* Misc */ .wffm .scfSingleLineTextLabel, .wffm .scfMultipleLineTextLabel, .wffm .scfCheckBoxListLabel, .wffm .scfRadioButtonListLabel, .wffm .scfDateSelectorLabel, .wffm .scfDropListLabel {width:100%} .wffm div.hideTitle label, .wffm .scfTitleBorder, .wffm .scfCaptchaLabel{display:none;} .wffm .scfCaptchaGeneralPanel{width:100%;float:none;max-width:280px;} .wffm .scfSectionBorderAsFieldSet{border:none;margin:0;} .wffm .webformTextDisplay{margin:20px 0;display:inline-block;} .wffm .scfRadioButtonListLabel, .wffm .scfDateSelectorLabel, .wffm .scfCheckBoxListLabel{color: #bf1e39;font-weight:bold;font-size:15px;float:none;} .wffm .scfDateSelectorShortLabelDay, .wffm .scfDateSelectorShortLabelMonth, .wffm .scfDateSelectorShortLabelYear{color: #bf1e39; font-size:12px; margin:12px 0 7px;} .wffm .scfDateSelectorUsefulInfo{color:#878785;font-size:12px;} .wffm .scfDropListLabel, .wffm .scfEmailLabel, .wffm .scfMultipleLineTextLabel, .wffm .scfSingleLineTextLabel, .wffm .scfPasswordLabel, .wffm .scfNumberLabel, .wffm .scfDatePickerLabel, .wffm .scfDateLabel, .wffm .scfRadioButtonListLabel, .wffm .scfCheckBoxListLabel, .wffm .scfListBoxLabel, .wffm .scfFileUploadLabel, .wffm .scfDateSelectorLabel, .wffm .scfConfirmPasswordLabel, .wffm .scfCreditCardLabel, .wffm .scfTelephoneLabel, .wffm .scfSmsTelephoneLabel{margin-left:0;} .wffm .scfEmailGeneralPanel,.wffm .scfMultipleLineGeneralPanel,.wffm .scfSingleLineGeneralPanel,.wffm .scfPasswordGeneralPanel,.wffm .scfNumberGeneralPanel,.wffm .scfDatePickerGeneralPanel,.wffm .scfDateGeneralPanel,.wffm .scfRadioButtonListGeneralPanel,.wffm .scfCheckBoxListGeneralPanel,.wffm .scfFileUploadGeneralPanel,.wffm .scfDateSelectorGeneralPanel,.wffm .scfConfirmPasswordGeneralPanel,.wffm .scfCreditCardGeneralPanel,.wffm .scfTelephoneGeneralPanel,.wffm .scfSmsTelephoneGeneralPanel,.wffm .scfListBoxGeneralPanel,.wffm .scfDropListGeneralPanel{float:none;width:100%;margin:0;} /* AWS 1.4.2 - Sitecore 9 Forms Overrides -------------------------------------*/ input[type="submit"] { margin-top:11px; } .form_container label, .form_container span.label { margin-top:11px; margin-bottom:7px; width:100%; } .form_container > form > label:last-of-type { margin-top:20px; } label.required:before { top:-3px; } .form_container { margin-bottom:20px; padding: 22.5px; overflow: hidden; max-inline-size: 960px; margin: 0 auto; } .form_container > form > div { position:relative; width:98%; margin: 11px 2% 0 0; float:left; } /*is this the best way?*/ .form_container > form > div > input:not[type="submit"], .form_container > form > div > select, .form_container > form > div > textarea { width: 98%; } .form_container .privacy-link { margin-top:11px; margin-bottom:11px; float:none; } .form_container label.scfRequiredChkLabel { font-size: 15px; font-family:'HelveticaNeueW02-45Ligh', Helvetica, Arial, sans-serif; font-weight:normal; margin-bottom:0; } .form_container .scfRequiredChkLabel:before { left:0; margin-top:0; top:3px; } /*.mod-contact .form_container .scfRequiredChkLabel:before { margin-top:5px; }*/ .form_container label.scfRequiredChkLabel.required:before { content: ""; } .scfCheckBoxList .label-parent, .scfRadioButtonList .label-parent {display:inline-block} .scfCheckBoxList label:not(.label-parent), .scfRadioButtonList label:not(.label-parent) { width:auto; padding-left:25px; font-weight:normal; } .scfCheckBoxList label:not(.label-parent) { padding-left:35px } .form_container .scfMultipleLineTextUsefulInfo { color:silver; display:block; position:relative; /*top:-11px; margin-bottom:-11px;*/ } .form_container .scfShortText, .form_container .halfAvailableWidth, .form_container .thirdAvailableWidth { float:left; clear:none; margin: 11px 2% 0 0; } .form_container .scfShortText {width:60%} .form_container .halfAvailableWidth{width:48%} .form_container .thirdAvailableWidth{width:31.33%} .form_container input[type="hidden"] {padding:0} .form_container .margin-top {margin-top:11px} .no-margin {margin:0 !important} .form_container .recaptcha { margin-top:20px; } /*https://stackoverflow.com/questions/12155833/css-selector-id-contains-part-of-text*/ .form_container div[id$="__CaptchaValue_wrapper"] { margin-top:0; } .form_container .field-validation-error { color:#bf1e39; font-size:12px; display:block; } .form_container .float-left {float:left} .form_container ul.bullets-large{padding:0} .form_container .conference-info { margin:20px 0 20px 30px; } /* AWS 1.5 - Blockquotes --------------------------------------------------------------------*/ blockquote{background: #e9e9e9;padding:7px 20px;margin:40px 0;clear:both;} blockquote > p{ margin:0; color:#bf1e39; font-size:25px; line-height:30px; quotes: "“" "”" "‘" "’"; } blockquote > p:before{content: open-quote;} blockquote > p:after{content: close-quote;} blockquote > p + p:after, blockquote > p + p:before{content: '';display: none;} blockquote > p > cite{ /* sitecore renders a p tag encasing the cite tag */ display:block; text-align:right; font-size: 16px; margin-bottom: 5px; } /* Testimonial */ blockquote.testimonial{ background: #bf1e39; color: #fff; padding: 30px; } blockquote.testimonial > div{ display: flex; height: 200px; margin: 0 auto; margin-bottom: 30px; } blockquote.testimonial > p{font-size: 28px;font-style:italic;line-height:1.2;} blockquote.testimonial p + cite{margin-top:20px;} blockquote.testimonial cite{display:block;font-size: 36px;font-style:normal;} blockquote.testimonial cite + p{font-size: 22px;line-height:1.2;font-style:normal;} blockquote.testimonial cite + p:before, blockquote.testimonial cite + p:after{display: none;} blockquote.testimonial p, blockquote.testimonial li{color: inherit;font-family: inherit;} /* Source Image */ blockquote.testimonial > div > .media{ text-align: right; width: 35% } /* Source Content */ blockquote.testimonial > div > .content{ width:65%; align-self: center; padding-left:30px; } /* Footer */ blockquote.testimonial footer{margin-top:15px;} blockquote.testimonial footer ul{padding:0;} /* AWS 1.6 - Languages ----------------------------------------------------------------------*/ .lang-jp, .lang-jp *{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;} /*------------------------------------------------------------------------------------------------- AWS 2.0 - Foundation (i.e. wrappers, nav, footer etc) /*-----------------------------------------------------------------------------------------------*/ #html_templates,.html_templates{display:none;} .outer_wrapper{width:100%;/*min-width:1032px;*/max-width:1280px;margin:0 auto;} .inner_wrapper{ min-width:960px; max-width:1200px; background:#fff; -webkit-box-shadow: 0 0 6px 0 rgba(36,36,36,.27); box-shadow: 0 0 6px 0 rgba(36,36,36,.27); margin:0 auto; overflow: hidden; } .inner_container{width:996px;margin:0 auto;position:relative;} .disable_page{ position: fixed; top:0;left:0;right:0;bottom:0; background: #fff; opacity: .5; z-index: 1000; } /* AWS 2.1 - Header -------------------------------------------------------------------------*/ #header{height:153px;position:relative;z-index:200;} #header #logo{margin:21px 0 35px 25px;display:inline-block;border:none;position:relative;} #header #logo > span{ display:inline-block; width:300px; font-size:22px; position: absolute; left: 100%; top:5px; padding-left: 30px; } #header #logo > span:before{ content: ''; position:absolute; left:15px; top:0; bottom:0; width:2px; background: #ddd; } .no_nav #header{border-bottom:10px solid #bf1e39;height:106px;} /* Server Error - 500 */ .server_error #header{height:115px;border-bottom:10px solid #bf1e39;} .server_error #header #logo{margin-bottom:21px;} /* Site Search */ #header .mod-site_search{position:absolute;top:62px;right:25px;margin:0;width:241px;} /* myHollister Adjustments */ .myHollister #header{height:180px;} .myHollister #header #logo{margin: 50px 0 50px 25px;} /* Secure Start Adjustments */ .ss #header{ height:140px; background: #fff url('../images/bg-header-ss.jpg') no-repeat; } .ss #header #logo{margin:49px 0 22px 30px;} /* AWS 2.2 - Navigations --------------------------------------------------------------------*/ /* AWS 2.2.1 - Main Navigation */ #navigation{height:47px;background:#bf1e39;} #navigation .nav{ display:table; list-style:none; margin:0; border-left:1px solid #a8142f; height: 47px; width:100%; padding:0; } #navigation .nav > li{ display: table-cell; vertical-align: middle; margin:0; padding:0; position:relative; border-right:1px solid #d06176; } #navigation .nav > li:first-child{border-left:1px solid #d06176;} #navigation .nav > li > a{ color:#fff; display: table; width: 100%; height: 47px; line-height: 14px; padding:0 5px; text-align: center; border:none; border-right:1px solid #a8142f; text-transform: uppercase; } #navigation .nav > li.visible-phone{display: none !important;} #navigation .nav > li > a > span{display: table-cell;vertical-align: middle;position:relative;} #navigation .nav > li > a > span > .icon{position:relative;margin-right:5px;} #navigation .nav > li > a > span > .icon.secure_start{margin:0 5px -11px 0;top:-3px;} #navigation .nav > .hover > a, #navigation .nav > .active > a{color:#878785 !important;background:#fff !important;border-color:#fff;} #navigation .nav > .highlighted > a{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8d071f+0,b81432+100 */ background: #8d071f; /* Old browsers */ background: -moz-linear-gradient(top, #8d071f 0%, #b81432 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #8d071f 0%,#b81432 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #8d071f 0%,#b81432 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d071f', endColorstr='#b81432',GradientType=0 ); /* IE6-9 */ } /* Make White Icons turn Gray */ #navigation .nav > .hover > a > span > .icon.secure_start, #navigation .nav > .active > a > span > .icon.secure_start{background-position: -264px -111px;} /* Icon Hovers */ #navigation .nav > li .person{margin:-10px 0 0 -18px;} #navigation .nav > .hover .person, #navigation .nav > .active .person{background-position: -210px 0;} /* myHollister Adjustments */ .myHollister #navigation .nav > li:first-child{width:10%;} .myHollister #navigation .nav > li{width:18%;} .myHollister #navigation .nav > li:first-child > a{overflow:hidden;text-indent: -200px;position:relative;} .myHollister #navigation .nav > li:first-child > a:before{ content: ''; position: absolute; left:50%;top:50%; width:16px; height: 12px; background: url('../images/sprite.png') no-repeat -117px -176px; display: block; margin:-6px 0 0 -8px; } .myHollister #navigation .nav > li.hover:first-child > a:before, .myHollister #navigation .nav > li.active:first-child > a:before{background-position: -117px -159px;} /* Secure Start Adjustments */ .ss #navigation .nav{display:block;float:left;width:auto;} .ss #navigation .nav > li{display:block;width:auto;float:left;} .ss #navigation .nav:first-child > li > a > span{padding:0 15px;} .ss #navigation .nav:first-child > li > a > span{font-size:16px;text-transform:none;} .ss #navigation .nav:first-child > li:first-child > a > span{padding:0 15px 0 32px;} /* Right Nav */ .ss #navigation .nav.right{float:right;margin-right:12px;} .ss #navigation .nav.right, .ss #navigation .nav.right > li, .ss #navigation .nav.right > li > a{border:none;} .ss #navigation .nav.right > li > a > span{padding:0 8px;} .ss #navigation .nav.right > li:first-child > a{cursor:default;} .ss #navigation .nav.right > li:first-child > a:hover, .ss #navigation .nav.right > li:first-child > a:focus{background:#bf1e39;color:#fff;} .ss #navigation .nav.right > li:first-child > a > span{text-transform:none;} /* Icons */ .ss #navigation .nav > li > a > span > .icon.arrow-md-down{margin-left:5px;top:-1px;} .ss #navigation .nav > li.hover > a > span > .icon.arrow-md-down, .ss #navigation .nav > li.active > a > span > .icon.arrow-md-down{background-position: -209px -102px;} .ss #navigation .nav > li > a > span > .icon.cart{margin-top:-10px;top:3px;overflow:visible;} .ss #navigation .nav > li.hover > a > span > .icon.cart, .ss #navigation .nav > li.active > a > span > .icon.cart{background-position: -21px -54px;} /* Basket variation */ .ss #navigation .nav > li > a > span > .icon.cart{margin-top:-9px;} .ss #navigation .nav > li.hover > a > span > .icon.cart, .ss #navigation .nav > li.active > a > span > .icon.cart{ background-position: -269px -70px; width:24px; height:19px; } .ss #navigation .nav > li > a > span > .icon.cart > .icon{ position:absolute; top:-4px; right:-5px; color: #bf1e39; font-weight: bold; font-size:11px } .ss #navigation .nav > li.hover > a > span > .icon.cart > .icon, .ss #navigation .nav > li.active > a > span > .icon.cart > .icon{color:#fff;background-position:-211px -174px;} /* AWS 2.2.1.1 - Mega Menu */ .megamenu_container{ background: #fff; border-radius: 0 0 10px 10px; padding:20px; position:absolute; left:0; top:47px; display:none; } .nav_right .megamenu_container{left:auto;right:0;} /* Secure Start Adjustments */ #ssCart .multicols.megamenu{width:280px;} #ssCart .multicols.megamenu .col{width:100%;} /* Widths / General Styling */ .multicols.megamenu{width:220px;} .multicols.megamenu > .col{width: 210px;padding:10px;margin:0;} /* Column Changes / Line Position */ .multicols.megamenu.cols3{width:630px;} .multicols.megamenu.cols2{width:420px;} /* Nav List */ .megamenu .col > ul{list-style:none;margin:0 10px 0 0;padding:0;} .megamenu .col > ul > li{min-height:36px;} .megamenu .col > ul > li + li{margin-top:16px;} .megamenu .col > ul > li > a{ display:block; position: relative; font-size: 14px; color: #bf1e39; padding:2px 0 0 0; border:none; } .megamenu .col > ul > li > a:hover, .megamenu .col > ul > li > a:focus{color:#333;} .megamenu .col > ul > li > a.hasIcon{padding-left:45px;} .megamenu .col > ul > li > a > .icon_container{ position:absolute; left:0; top:0; width:36px; height:36px; overflow:hidden; } .megamenu .col > ul > li > a > .icon_container > img{position:relative;} .megamenu .col > ul > li > a:hover > .icon_container > img, .megamenu .col > ul > li > a:focus > .icon_container > img{top:-36px;} .megamenu .col > ul > li > a > .txt{ font-size:12px; color:#878785; display:block; margin-top:-3px; line-height: 14px; } .megamenu .col > ul > li > a > img{width:100%;max-width:205px;} /* Variants */ /* Alt(featured content) */ .megamenu .col > ul.alt > li{min-height: auto;} .megamenu .col > ul.alt > li + li{margin-top:5px;} /* Module: Support Overrides */ .megamenu_container .mod-support ul{display:block;} .megamenu_container .mod-support ul li{display: block;min-height:0;} .megamenu_container .mod-support ul li:first-child{padding:0;} .megamenu_container .mod-support ul li + li{margin:5px 0 0;} .megamenu_container .mod-support ul li h5{ font-size: 15px; line-height: 20px; color: #bf1e39; text-align: left; } .megamenu_container .mod-support ul li a{padding:10px 0 10px 45px;} .megamenu_container .mod-support ul li a{font-size:14px;line-height:14px;} .megamenu_container .mod-support ul li a span{font-size:12px;line-height:14px;color:#878785;} .megamenu_container .mod-support ul li a img{ left:-5px; -moz-transform: scale(.75); -webkit-transform: scale(.75); -o-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); } /* Secure Start Adjustments */ .megamenu_container.cart .megamenu > .col{padding:0;} .megamenu_container.cart .megamenu p{margin:0;} .megamenu_container.cart .megamenu p.more_items{margin-bottom:15px;} .megamenu_container.cart .megamenu ul{margin:0 0 10px;} .megamenu_container.cart .megamenu .btn{display:block;} /* AWS 2.2.2 - Sub Navigation */ .subnav{margin:0 0 30px;} .subnav > h4{ font-size: 15px; color: #fff; background: #bf1e39; padding: 9px 10px 10px; text-transform: none; margin: 0; } .subnav > .content{ border: 1px solid #ebe9e8; border-top: none; padding: 9px 15px 11px; } .subnav > .content > ul{padding: 0;} .subnav > .content > ul > li{font-size: 16px;} .subnav > .content > ul > li + li{margin-top:5px;} .subnav > .content > ul > li > a{color: #878787;border:none;} .subnav > .content > ul > li > a.active, .subnav > .content > ul > li > a:hover{color: #bf1e39;} /* AWS 2.2.3 - Utility Navigation */ #utility_navigation{position:absolute;top:20px;right:25px;margin:0;} #utility_navigation > ul{padding: 0;} #utility_navigation > ul > li > a{color:#878785;} #utility_navigation > ul > li > a:focus, #utility_navigation > ul > li > a:hover{color:#bf1e39;} #utility_navigation > ul > li > a > .icon, #utility_navigation > ul > li > a > img{position:absolute;overflow:visible;} #utility_navigation > ul > li > a > .icon.arrow-lg-down{position:relative;margin:0 0 0 7px;top:-2px;} #utility_navigation > ul > li > .content > .more_items{margin-bottom:-5px;} /* Secure Start Adjustments */ .ss #utility_navigation{top:auto;bottom:-1px;right:30px;} .ss #utility_navigation .icon{ position: relative; margin-right: 5px; } .ss #utility_navigation .icon.pdf{top:3px;} /* Speficic Menu Items */ /* Cart */ #utility_navigation > ul > .cart > a{padding-left: 47px;} #utility_navigation > ul > .cart > a > .icon.cart{left:8px;top:9px;} #utility_navigation > ul > .cart > a > .icon.cart_number{left:28px;top:9px;z-index:2;} #utility_navigation > ul > .cart > .content{width: 250px;} #utility_navigation > ul > .cart .empty{text-align:center;padding:10px 0 5px;} /* Buy */ #utility_navigation > ul > .buy > a{padding-left:26px;} #utility_navigation > ul > .buy > a > .icon.pin{left:8px;top:10px;} /* Location */ #utility_navigation > ul > .location > a{padding-left:30px;} #utility_navigation > ul > .location > a > .icon.globe{left:8px;top:10px;} #utility_navigation > ul > .location .multicols .col{margin:0;width:50%;} #utility_navigation > ul > .location .multicols ul{padding:0 1% 0 0;} #utility_navigation > ul > .location .multicols li{font-size:12px;line-height:14px;padding:0 15px 0 0;} #utility_navigation > ul > .location .multicols li + li{margin-top:6px;} #utility_navigation > ul > .location .multicols li > a{color:#878785;border:none;} #utility_navigation > ul > .location .multicols li > a:hover{color:#bf1e39;border-bottom:1px solid #bf1e39;} #utility_navigation > ul > .location > .content{width: 680px;} #utility_navigation > ul > .location > .content.singleCol{width:170px;} #utility_navigation > ul > .location > .content.singleCol .multicols .col{width:100%;} #utility_navigation > ul > .location > .content.doubleCol{width:340px;} #utility_navigation > ul > .location > .content.doubleCol .multicols .col{width:100%;} #utility_navigation > ul > .location > .content.doubleCol .multicols .col .col{width:50%;} #utility_navigation > ul > .location h5{ border-bottom:1px solid #e2e2e2; margin:0 0 14px; padding: 0 0 6px; font-size:14px; color:#bf1e39; } /* Social */ #utility_navigation > ul > .social > a{padding-left:25px;} #utility_navigation > ul > .social > a > .icon.connect{left:6px;top:11px;} #utility_navigation > ul > .social > .content{width: 140px;} #utility_navigation > ul > .social > .content > ul > li{border:none;} #utility_navigation > ul > .social > .content > ul > li > a > span{ position: relative; top:3px; margin-right:8px; display: inline-block; width: 16px; height: 16px; overflow: hidden; } #utility_navigation > ul > .social > .content > ul > li > a > span > img{position:relative;} #utility_navigation > ul > .social > .content > ul > li:hover > a > span > img{top:-17px;} /* MyHollister Variant */ .myHollister #utility_navigation{top:87px;right:0;} .myHollister #utility_navigation > ul > li + li{margin:0 0 0 5px;} .myHollister #utility_navigation > ul > li > a{font-size: 13px;} /* User not logged in(limited nav options) */ .myHollister #utility_navigation.no-login{top:26px;} /* AWS 2.2.4 - myHollister Navigation */ /* User Bar */ #myh-user_bar{ background: #f5f3ef; padding: 13px 20px 10px; position: absolute; top:0;right:0; color: #878785; text-transform: uppercase; } #myh-user_bar > ul > li{float:left;} #myh-user_bar > ul > li + li{margin:0 0 0 15px;} #myh-user_bar > ul > li > a{color: #878785;border:none;} #myh-user_bar > ul > li > a:hover{color: #bf1e39;} #myh-user_bar > ul > li > a:hover > .switchClient{background-position: -90px -176px;} #myh-user_bar > ul > li > a:hover > .logout{background-position: -104px -176px;} #myh-user_bar > ul > li > a > span{margin-right:5px;} /* Utility Navigatoin (legacy - remove once myhollister fully updates in April 2018) */ #myh-utility_nav{ position: absolute; top:59px;right:0; } #myh-utility_nav > ul > li{float:left;} #myh-utility_nav > ul > li + li{ margin:0; border-left: 1px solid #ebe9e8; } #myh-utility_nav > ul > li > a{ color: #878785; text-transform: uppercase; border:none; padding: 0 10px; } #myh-utility_nav > ul > li > a:hover{color: #bf1e39;} /* User not logged in(limited nav options) */ #myh-utility_nav.no-login{top:36px;} /* AWS 2.3 - Footer -------------------------------------------------------------------------*/ #footer{ background:#998f8c; border-bottom:15px solid #bf1e39; padding:50px 0; position: relative; } .ss #footer{background:#bf1e39;border-color:#73111f;} #footer > .inner_container{padding:0 30px;} /* Disclaimer */ #disclaimer > .inner_container{padding:10px 30px 20px;} #disclaimer p{font-size:11px;line-height:14px;} /* Upcomming Events */ #upcoming_events{background: #f3f1ed;padding: 30px 0;} #upcoming_events h2{margin-bottom: 20px;} #upcoming_events h4{margin-top:0;} #upcoming_events h4 a{color:#666;font-weight: bold;} #upcoming_events h4 a:hover{color:#bf1e39;border: none;} #upcoming_events ul{padding:0;} #upcoming_events .col{padding-left: 75px;position:relative;min-height: 64px;} #upcoming_events .col .icon{margin-right:5px;} #upcoming_events .btn_container{margin-top:20px;} /* Date */ #upcoming_events .date{ position: absolute; left:0;top:0; text-align: center; background: #fff; width: 56px; padding: 5px; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.5); box-shadow: 0 0 10px 0 rgba(0,0,0,.5); border: none; } #upcoming_events .date:hover{color:#000;} #upcoming_events .date:before{ position: absolute; content: ''; display: block; height: 4px; background: #bf1e39; width:100%; z-index: 1; top:0;left:0; } #upcoming_events .date span{display:block;} #upcoming_events .date span:nth-child(1){font-size: 14px;} #upcoming_events .date span:nth-child(2){font-size: 20px;} #upcoming_events .date span:nth-child(3){font-size: 11px;font-weight: normal;} /* Support Bar */ #support_bar{border-top:13px solid #e9e9e9;} #support_bar > .inner_container{padding:20px 0 20px;} /* Site Map */ #footer .site_map > .col1{width:284px;} #footer .site_map > .col2{width:592px;margin:0 0 0 24px;} /* Column 1 */ #footer .site_map .col1 .col{width:130px;} #footer .site_map .col1 .col2{margin:0 0 0 24px;} /* Column 2 */ #footer .site_map .col2 .col{width:130px;margin:0 0 0 24px;} #footer .site_map .col2 .col1{margin:0;} /* Content */ #footer .site_map .col > ul{list-style:none;margin:0;padding:0;} #footer .site_map .col > ul > li{background:none;padding:0;font-size:11px;} #footer .site_map .col > ul > li + li{margin:1px 0 0;} #footer .site_map .col > ul > li a{color:#fff;border:none;} #footer .site_map .col > ul > li a:hover{border-bottom: 1px solid #fff;} #footer .site_map .col > h6{margin:0 0 3px;} #footer .site_map .col > ul + h6, #footer .site_map .col > h6 + h6{margin-top:28px;} /* Copyright */ #copyright{margin:40px 0 0;display:block;} #copyright > a{float:right;border:none;margin:0 0 28px;border:none;} #copyright > p{float:right;color:#fff;line-height:11px;font-size:11px;margin:0;clear:right;} #copyright > p + p{margin-top:10px;} #copyright > p > a{color:#fff;border:none;} #copyright > p > a:hover{border-bottom:1px solid #fff;} /* CE Mark */ #copyright > p.ce_mark {font-size:13px;max-width:450px;text-align:right;} /* MyHollister & SS Adjustments */ .myHollister #copyright, .ss #copyright{margin:0;text-align:center;} .myHollister #copyright > a, .ss #copyright > a{display:inline-block;float:none;margin-bottom:10px;} .myHollister #copyright > p, .ss #copyright > p{float:none;} /* Social */ #footer .social{ float:right; clear: right; margin: 16px 0 16px 0; padding: 0; } #footer .social > li{ float:left; color: #fff; line-height: 24px; height: 24px; } #footer .social > li + li{margin:0 0 0 10px;} #footer .social > li > a{border:none;} #footer .social > li > a > span{ width: 24px; height: 24px; display: block; overflow: hidden; } #footer .social > li > a:hover > span > img{position:relative;top:-25px;} /* Back to Top Button */ #footer .back_to_top{direction: rtl;} #footer .btn-back_to_top{ position: absolute; top:-50px;float:right; direction: ltr; z-index: 500; } #footer .btn-back_to_top.sticky{ position: fixed; top:auto; bottom:0; } #footer .btn-back_to_top .icon{ position: absolute; left: 50%;top:50%; margin:-12px 0 0 -9px; } /* AWS 2.4 - Sidebar ------------------------------------------------------------------------*/ #sidebar{ position: absolute; width: 230px; left: 50%; margin: 0 0 0 220px!important; top: 26px; } .alt_sidebar #sidebar{z-index:10;} #sidebar > .inner_container{width:230px;} #sidebar > .inner_container > .mod-multicols > .cols{margin-top:0;} #sidebar .sidebar{ width:230px; margin:0; border:1px solid #f1f1f1; } #sidebar .sidebar > .btn{display:block;} #sidebar .sidebar > h4{ font-size: 15px; color: #fff; background: #bf1e39; padding:9px 10px 10px; text-transform: none; margin:0; } #sidebar .sidebar > h4 + .callout, #sidebar .sidebar .callout + .callout{margin:0;} /* Alt Sidebar */ .alt_sidebar #sidebar .sidebar{border:none;} .alt_sidebar #sidebar .sidebar > h2{text-align:right;} /* Mini-Menu */ #sidebar .sidebar > .links-large{margin:0 0 40px;} #sidebar .sidebar > .links-large > .header{margin: 0 0 10px;} #sidebar .sidebar > .links-large > li + li{margin-top:5px;} /* Banner */ #sidebar .callout.banner{width:228px;margin:0 0 0 -15px;padding:0;} /* AWS 2.5 - Breadcrumbs --------------------------------------------------------------------*/ .section.breadcrumbs{padding: 0 !important;margin:20px 0 10px;min-height:29px;} .section.breadcrumbs .inner_container{padding: 0 !important;} .section.breadcrumbs .content{padding:0 15px 0 30px;} .section.breadcrumbs + #content{border: none;padding-top:0 !important;} /* Template Overrides */ #template-full .section.breadcrumbs + #content > .section:first-child{padding-top:0;} #template-full .section.breadcrumbs .content{padding:0;} #template-results #search_tools:first-child, #template-results #search_tools:first-child + #content{margin-top:27px;} /* Secure Start Overrides */ .ss #tempalte-full .section.breadcrumbs + #content{padding-top:0;} /* AWS 2.6 - Site Message Bar ---------------------------------------------------------------*/ .section.site_message .inner_container { background: #ebe9e8; text-align: center; width: inherit !important; padding: 0 26px; } .section.site_message .inner_container h4 { font-size: 19px; color: #666; padding: 15px 0; margin: 0; font-family: 'HelveticaNeueW02-75Bold', Helvetica, Arial, sans-serif; font-weight: normal; } .section.site_message .inner_container h4 a { border-bottom: 1px solid #bf1e39 } .section.site_message .inner_container h4 a:focus, .section.site_message .inner_container h4 a:hover { color: #666; border-color: #666; } /* Times */ .section.site_message span.icon.times { position: absolute; top: calc(50% - 12.5px); right: 0; background-position: -182px -87px; width: 26px; height: 25px; transform: scale(0.75); cursor: pointer; } .section.site_message span.icon.times:hover { background-position-x: -157px; opacity: 0.5; } /*------------------------------------------------------------------------------------------------- AWS 3.0 - Reusable Components /*-----------------------------------------------------------------------------------------------*/ /* AWS 3.1 - Aware Custom Components --------------------------------------------------------*/ /* AWS 3.1.1 - Modal Windows ------------------------------------------------------------*/ .modal-overlay, .overlay-session{ opacity:.75; filter:alpha(opacity=75); background:#000; position:fixed; top:0; left:0; width:100%; height:100%; z-index: 999999; } .modal-header{ background: #000; color:#fff; padding: 14px 20px 16px; margin-bottom:24px; font-size: 23px; line-height: 35px; } .modal-container { top: 40%; /* Default Position if too large for browser window */ width: 740px; margin: 0 0 0 -370px; background: #fff; position:absolute;left:50%; z-index: 9999999; -webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,.3); box-shadow: 0 0 10px 5px rgba(0,0,0,.3); } .mod-thumbnail_gallery .modal-container { margin: 0 auto; left: 0; } .modal-content{position:relative;padding:40px;color:#878785;} .modal-content > div > *:last-child{margin-bottom: 0;} .modal-close{position:absolute;top:15px;right:15px;z-index:1000;} .modal-close > .icon{width:23px;height:23px;background-position:-159px -88px;border:none;} .modal-close > .icon:hover{background-position: -184px -88px;} /* AJAX */ .modal-content .ajax_loading{ height: 50px; background: url('../images/ajax-loader.gif') no-repeat center 30px; } .modal-content .ajax_loading > p{text-align:center;} /* Utility Classes */ .modal-container.modal-iframed{width:90%;margin:0 0 0 -45%;} .modal-container.modal-iframed .modal-header{margin:0;} /* Modals ---------------------------------------------------------------------------*/ .modal-content .btn:link{min-width:175px;} /* Alert */ .modal-container.alert{ position: fixed; top: 20px !important; left: auto !important; right: 20px !important; margin: 0 !important; background: #000; background: rgba(0,0,0,.8); width:300px !important; z-index: 10000; } .modal-container.alert.left{ left: 20px !important; right: auto !important; } .modal-container.alert .modal-content{padding: 20px;} .modal-container.alert p{color:#33cc33;margin:0;} .modal-container.alert .name{color:#fff;} .modal-container.alert p + p{margin-top:10px;} .modal-container.alert .modal-close{top: -4px;right: -4px;} .modal-container.alert.left .modal-close{right: auto;left:-4px;} .modal-container.alert .modal-close > .icon{ width:16px; height:16px; background-position: -192px -173px; } .modal-container.alert .modal-close > .icon:hover{background-position: -192px -156px;} /* Cookie Overrides */ .modal-container.cookie{ width: 570px; left:-570px; margin:0; -webkit-box-shadow:none; box-shadow:none; background: #878785; } /* Content */ .modal-container.cookie .modal-content{padding:12px 40px 15px 24px;} .modal-cookie > p{font-size:11px;color:#fff;line-height:14px;margin:0;} .modal-cookie > p + p{margin-top:5px;} /* Close Button */ .cookie .modal-close{top:-6px;right:-6px;} .cookie .modal-close > .icon{width: 35px;height: 35px;background-position:-86px -87px;} .cookie .modal-close > .icon:hover{background-position: -122px -87px} /* Button Group */ .modal-cookie > .modal-buttons{margin-top:6px;list-style:none;padding:0;} .modal-cookie > .modal-buttons > li{display:inline-block;margin:0 30px 0 0;font-size:11px;} .modal-cookie > .modal-buttons > li > a{color:#fff;border-bottom: 1px solid #fff;} .modal-cookie > .modal-buttons > li > a:hover{border:none;} #toggleText{display:none;border:2px solid;margin-top: 20px;} #toggleText a{line-height:20px;color: #fff;border-bottom: 1px solid #fff;} /* Confirmation Modal */ .modal-confirmation .modal-buttons{margin:23px 0 0;padding:0;} .modal-confirmation .modal-buttons > li{float:left;width:50%;} .modal-confirmation .modal-buttons > li + li{margin:0;} .modal-confirmation .modal-buttons > li + li > .btn{float:right;} /* Login */ .modal-container.login{width:440px;margin:0 0 0 -220px;} .modal-container.login .modal-content{padding:22px 30px;} .modal-container.login > .modal-content > .modal-close{top:30px;} .modal-login{width:90%;overflow:hidden;} .modal-login > .multicols{width:200%;position:relative;} .modal-login > .multicols.cols2 > .col{width:50%;margin:0;} .modal-login.reset > .multicols{left:-100%;} /* Media Overrides */ .modal-media h6{color:#bf1e39;text-transform:none;margin:0 0 11px;} .modal-media .multicols.cols2 .col1{width:43%;} .modal-media .multicols.cols2 .col1.fullWidth{width:100%;margin-top:15px;} .modal-media .multicols.cols2 .col2{width:100%;margin:0;} .modal-media .multicols.cols2 .col1 + .col2{width:53%;margin-left:4%;} .modal-media .multicols.cols2 .col2 > h2{margin-top:-8px;} .modal-media .additional_content{margin-top:30px;} /* 100% Width Video */ .modal-media.isVideo .multicols.cols2 .col1{width: 100%;float:none;} .modal-media.isVideo .multicols.cols2 .col2{margin:20px 0 0;width: 100%;float:none;} /* Media Container */ .modal-media .media_container{ width:100%; text-align:center; border:1px solid #dbdadb; border-radius: 5px; } .modal-media .media_container.video{border:none;} .modal-media .media_container > img{width:100%;} /* Button Group */ .modal-media .modal-buttons{margin:23px 0 0;text-align:center;} .modal-media .modal-buttons > .btn{margin:0 5px 10px;} /* Session Timeout Overrides */ .modal-session .modal-close{display:none;} /* Thumbnail Gallery */ .modal-container.thumbnail_gallery{ width: 960px; height: 660px; margin:0 0 0 -480px; background: none; } .modal-container.thumbnail_gallery > .modal-content{padding:0;} /* AWS 3.1.2 - Carousel -----------------------------------------------------------------*/ .carousel{margin:15px 0 0;position:relative;} .carousel .wrapper{overflow:hidden;position:relative;margin:0 auto;width:880px;} .carousel .wrapper > .slides{list-style:none;} .carousel ul{padding:0;} /* Slides */ .carousel .slides > .slide{ float:left; width:200px; height:350px; padding:20px 10px 0; margin: 0 10px; background: none; } /* Navigation */ .carousel .navigation{text-align:center;} .carousel .navigation > ul{list-style:none;display:inline-block;} .carousel .navigation > ul > li{float:left;width:22px;height:22px;} .carousel .navigation > ul > li + li{margin:0 0 0 5px;} .carousel .navigation > ul > li > a, .carousel .navigation > ul > li > a.disabled:hover{ display: block; width:22px; height: 22px; color: #998f8c; text-align: center; font-weight: bold; line-height: 22px; font-size: 8px; border:none; position: relative; background: url('../images/sprite.png') no-repeat -185px -61px; } .carousel .navigation > ul > li > a:hover, .carousel .navigation > ul > li > a.active{background-position: -185px -38px;color:#fff;} .carousel .navigation > ul > li > a.disabled{opacity:.5;cursor: default;} /* Previous / Next */ .carousel .navigation a > .icon{ position:absolute; left:50%; top:50%; margin:-3px 0 0 -2px; width:4px; height:6px; } .carousel .navigation a.prev > .icon, .carousel .navigation a.prev.disabled:hover > .icon{margin-left:-3px;background-position:-20px -102px;} .carousel .navigation a.prev:hover > .icon{background-position:-37px -107px;} .carousel .navigation a.next > .icon, .carousel .navigation a.next.disabled:hover > .icon{background-position:-26px -102px;} .carousel .navigation a.next:hover > .icon{background-position:-42px -107px;} /* Solo Buttons */ .carousel > .nav{position:absolute;top:70px;z-index:10;} .carousel > .prev{left:0;} .carousel > .next{right:0;} .carousel > .nav.disabled{opacity:.5;cursor: default;} /* Custom Content */ /* Feature */ .carousel.feature .slide{height:180px;padding-top:0;} .carousel.feature .slide > .image{ width:180px; height:180px; overflow: hidden; margin:0; } .carousel.feature .slide.selected > .image img{position:relative;top:-180px;} .carousel.feature > .nav{top:75px;} .carousel.feature .panels{margin:35px auto 0; width: 900px;} /* Bottom Aligned Featured Carousel */ .carousel.feature.bottom > .nav{top: auto; bottom: 75px;} .carousel.feature.bottom .panels{margin:0 auto 35px;} /* Video Varient */ .carousel.feature.video .slide > .image{height:auto;} .carousel.feature.video .slide > .image > a{border:3px solid #f5f3ef;} .carousel.feature.video .slide > .image > a:hover, .carousel.feature.video .slide.selected > .image > a{border-color: #bf1e39;} .carousel.feature.video .slide.selected > .image img{top:0;} /* Content */ .carousel.feature.video .slide > .content > h6{ padding:3px; color: #bf1e39; text-align: center; } /* Bottom Aligned */ .carousel.feature.bottom > .nav{bottom: 97px;} /* Video Within */ .carousel.feature .panel > .mod-video{margin:30px 0 10px;} /* Image */ .carousel .slide > .image{margin:0 0 25px;} .carousel .slide > .image > a{display:block;border:none;} .carousel .slide > .image img{display:block;margin:0 auto;width:100%;} /* Content */ .carousel .slide > .content > h6{font-size:14px;text-transform:none;} .carousel .slide > .content > h6 > a{color:#bf1e39;} .carousel .slide > .content > h6 > a:hover{color:#878785;} .carousel .slide > .content > a{border:none;} .carousel .slide > .content > a > .icon{position:relative;top:1px;} .carousel .slide > .content > a:hover{color:#878785;} .carousel .slide > .content > a:hover > .icon{background-position:-20px -81px;} /* Special Sizes */ /* Single Slide Dimentions */ .carousel.single{width:285px;} .carousel.single .wrapper{width:285px;height:285px;} .carousel.single .slides > .slide{width:285px;height:285px;padding:0;margin:0;} /* Tab Panels */ .tab_panels{ padding:20px 15px; background: #fff; border: 2px solid #bebfc0; position: relative; } .tab_panels > .panel{display:none;} .tab_panels > .panel.active{display:block;} .tab_panels > .panel > *:last-child{margin-bottom:0;} .tab_panels > .panel .inner_container{width: auto !important;} /* AWS 3.1.4 - Custom Select ------------------------------------------------------------*/ .custom_select{position:relative;} .custom_select + *{margin-top:10px !important;} /* Button Styles */ .custom_select > .toggle{ color: #878785; font-size: 13px; border: 1px solid #d9d5d4; padding:8px 48px 8px 10px; line-height: 100%; text-decoration: none; position: relative; cursor: pointer; width: 100%; background: #fff; text-align: left; text-transform: uppercase; height: 31px; } .custom_select > .toggle.autoHeight{ padding:8px 48px 6px 10px; line-height: 16px; height: auto; } /*.custom_select > .toggle:hover, .custom_select > .toggle:focus{color:#bf1e39;border-color:#bf1e39;}*/ /* Line */ .custom_select > .toggle:before{ content: ''; display: block; position: absolute; top:0;bottom:0; right: 37px; background: #d9d5d4; width: 1px; } /* Arrow */ .custom_select > .toggle:after{ content: ''; display: block; position: absolute; top:50%; right:12px; margin-top:-3px; width: 12px; height: 5px; background: url('../images/sprite.png') no-repeat 0 -48px; } /*.custom_select > .toggle:hover:after, .custom_select > .toggle:focus:after{background-position: -49px -48px;}*/ /* Not Editable */ .custom_select.not-editable > .toggle, .custom_select.not-editable > .toggle:hover, .custom_select.not-editable > .toggle:focus{ background:#d9d5d4; border-color:#d9d5d4; cursor:default; color:#878785; } /* Disabled */ .custom_select.disabled > .toggle, .custom_select.disabled > .toggle:hover, .custom_select.disabled > .toggle:focus{ background:#fff; border-color:#fff; cursor:default; color:#878785; padding-left: 0; } .custom_select.disabled > .toggle:after, .custom_select.disabled > .toggle:before, .custom_select.disabled > .toggle:hover:after, .custom_select.disabled > .toggle:focus:after, .custom_select.not-editable > .toggle:after, .custom_select.not-editable > .toggle:before, .custom_select.not-editable > .toggle:hover:after, .custom_select.not-editable > .toggle:focus:after{display: none;} /* Options */ .custom_select > .options{ border: 1px solid #d9d5d4; border-top:none; position: absolute; /*top:31px;*/ left: 0;right:0; height: 175px; overflow: auto; z-index: 100; display:none; background: #fff; text-align: left; } .custom_select.open > .options{display:block;} .custom_select > .options > ul{ padding: 0; list-style:none; position:relative; /* REQUIRED */ } .custom_select > .options > ul > li + li{margin-top:0;} .custom_select > .options > ul > li > a{ display: block; padding: 8px 15px; text-decoration: none; font-size:13px; color: #878785; border: none; } .custom_select > .options > ul > li.highlight > a, .custom_select > .options > ul > li > a:focus, .custom_select > .options > ul > li > a:hover{color:#bf1e39;} /* Disabled Options (corresponding select option requires disabled atribute) */ .custom_select > .options > ul > .disabled{position: relative;} .custom_select > .options > ul > .disabled:after{ content: ''; position: absolute; left:0;right:0; top:0;bottom:0; background: #fff; opacity: .5; } /* AWS 3.1.5 - Tooltip ------------------------------------------------------------------*/ .tooltip{position:absolute;border-radius:5px;display:none;z-index:1000;} .tooltip.visible{display:block;} /* Arrows */ .tooltip:before, .tooltip:after{content: '';position:absolute;width:0;height:0;border-style:solid;} .tooltip.noarrow:before, .ie8 .tooltip:before{display:none;} /* Border */ .tooltip.top:before{ bottom:-12px; left:50%; margin-left: -8px; border-width: 12px 8px 0 8px; border-color: #d3d3d3 transparent transparent transparent; } .tooltip.right:before{ left:-12px; top:50%; margin-top:-8px; border-width: 8px 12px 8px 0; border-color: transparent #d3d3d3 transparent transparent; } .tooltip.bottom:before{ top:-12px; left:50%; margin-left: -8px; border-width: 0 8px 12px 8px; border-color: transparent transparent #d3d3d3 transparent; } .tooltip.left:before{ right:-12px; top:50%; margin-top:-8px; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #d3d3d3; } /* Colored Arrow (change this if you wish the 'fill' of the arrow is not the same as color) */ .tooltip.top:after{ bottom:-10px; left:50%; margin-left: -6px; border-width: 10px 6px 0 6px; border-color: #fff transparent transparent transparent; } .tooltip.right:after{ left:-10px; top:50%; margin-top: -6px; border-width: 6px 10px 6px 0; border-color: transparent #fff transparent transparent; } .tooltip.bottom:after{ top:-10px; left:50%; margin-left: -6px; border-width: 0 6px 10px 6px; border-color: transparent transparent #fff transparent; } .tooltip.left:after{ right:-10px; top:50%; margin-top: -6px; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; } /* Simple Tooltip */ span.tooltip{ background: #000; /* IE */ color: #fff; padding: 6px 10px; font-size: 11px; min-width: 100px; max-width: 280px; } /* Advanced Tooltip */ div.tooltip{ background: #fff; padding: 20px; border: 1px solid #d3d3d3; width: 280px; } .loading > .tooltip{background:url('../images/ajax-loader.gif') no-repeat center center;} /* AWS 3.2 - Modules (i.e. reusable design parts(e.g. lists, etc) ---------------------------*/ .module{margin:0;} .module.mod-section{margin:20px 0;} * + .module{margin-top:10px;} .module + *{margin-top:30px;} /* Ad */ .mod-ad{text-align:center;} .mod-ad img{display:block;margin:0 auto 23px;} .mod-ad > p{font-size:15px;line-height:17px;margin:0 0 6px;} .mod-ad > a:link{text-transform:uppercase;border:none;} .mod-ad > a:hover{border-bottom:1px solid;} /* AJAX Loading */ .mod-ajax_loading{ padding:60px 20px 20px; text-align:center; background: url('../images/ajax-loader.gif') no-repeat center 20px; } .mod-ajax_loading.large{background: url('../images/ajax-loader2.gif') no-repeat center 10px;} .mod-ajax_loading > p{margin:0;} /* Alternating Content */ .mod-alternating{margin:30px 0;border:1px solid #dfe0e4;} .mod-alternating .row{ display:flex; border-bottom:1px solid #dfe0e4; height: 342px; background: #fff; } .mod-alternating .row:last-child{border:none;} .mod-alternating .row > div{ width:50%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .mod-alternating .row .content{ padding: 0 50px; border-right:1px solid #dfe0e4; } .mod-alternating .row:nth-child(even) > .content{ order:99; -webkit-order:99; border:none; border-left: 1px solid #dfe0e4; } .mod-alternating .row > .media{ overflow: hidden; position: relative; } .mod-alternating .row > .media > img{ position: absolute; top:50%;left:50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* Buttons */ .mod-buttons{margin:30px 0;} /* Cart Preview */ .mod-cart_preview{margin-top:65px;} .mod-cart_preview > h4{ background: #bf1e39; color:#fff; font-size: 14px; margin:0; padding: 5px 10px 6px; } .mod-cart_preview > h4 + p{margin-top:10px;} .mod-cart_preview > ul{border:1px solid #ebe9e8;border-top:0;margin:0;} .mod-cart_preview > ul > li{padding:10px;} .mod-cart_preview > ul > li + li{margin:0;} .mod-cart_preview > ul > li.alt{background: #ebe9e8;} .mod-cart_preview > ul > li > .content{position: relative;padding:0 28px 0 0;} .mod-cart_preview > ul > li > .content > h5{color:#bf1e39;font-size:12px;} .mod-cart_preview > ul > li > .content > p{font-size:12px;line-height:17px;margin:0;} .mod-cart_preview > ul > li > .content > .icon{position:absolute;top:10px;right:0;} .mod-cart_preview > ul > li > img{display:none;} .mod-cart_preview > ul > li > img.visible{display:block;width:60%;float:left;} .mod-cart_preview > ul > li > img.visible + .content{padding:34px 0 0 10px;width:40%;float:right;} /* Within Content Area */ .mod-cart_preview.alt{width:400px;margin:40px 0;} .mod-cart_preview.alt > ul > li > img{display:block;width:40px;float:left;} .mod-cart_preview.alt > ul > li > img + .content{ padding:0 20% 0 0; width:80%; float:right; min-height: 51px; } .mod-cart_preview.alt > ul > li > .content > .icon{top:50%;margin-top:-8px;} /* Clone Items */ .mod-clone .trigger-clone{margin-top:20px;} /* Variants */ /* Products */ .mod-clone.products .js-clone + .js-clone{margin-top:20px;} .mod-clone.products .js-clone:not(:first-child) label{display: none;} .mod-clone.products .trigger-remove{ position:relative; -moz-transform: scale(.8); -webkit-transform: scale(.8); -o-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); } .mod-clone.products .js-clone:first-child .trigger-remove{top:22px;} .mod-clone.products .js-clone:not(:first-child) .trigger-remove{top:-3px;} /* Contact */ .mod-contact{margin:40px 0 0;} .mod-contact > .form_container{float:left;width:60%;position:relative;} .mod-contact > .form_container:after{ content: ''; position: absolute; width: 1px; background: #ebebeb; top:0;right:-6.5%; bottom:60px; } .mod-contact > .form_container fieldset{margin-bottom:0;} .mod-contact > .form_container fieldset:first-child{margin-top:0;} .mod-contact > .details{width:30%;float:right;} .mod-contact > .details > p{line-height:20px;} .mod-contact > .details > p > a:link{border:none;} .mod-contact > .details > p > a:hover{color:#878785;} /* Divider Well */ .mod-divider_well{ margin: 30px 0; padding:20px 0; border-top: 1px solid #ebe9e8; border-bottom: 1px solid #ebe9e8; } .mod-divider_well > *:first-child{margin-top:0;} .mod-divider_well > *:last-child{margin-bottom:0;} /* Misc Components Within */ /* myHollister Account - Balance Info */ .mod-divider_well .myh-account.cols2 .col1{width:60%;} .mod-divider_well .myh-account.cols2 .col2{width:36%;} .mod-divider_well .myh-account h3{margin-top:7px;} .mod-divider_well .myh-account h3 > span{color: #878785;} .mod-divider_well .myh-account .btn{float:right;} /* Dropdown */ .mod-dropdown > ul{list-style:none;display:inline-block;padding:0;} .mod-dropdown select{display:none;} .mod-dropdown > ul > li{float:left;border:1px solid #fff;} .mod-dropdown > ul > .label{line-height:37px;} .mod-dropdown > ul > li + li{margin:0 0 0 15px;} .mod-dropdown > ul > .label + li{margin:0 0 0 5px;} .mod-dropdown > ul > li > a{ display:block; position: relative; padding:0 7px; border:none; height: 38px; line-height: 38px; color:#bf1e39; text-transform: uppercase; } .mod-dropdown > ul > li > .btn2{margin:0;color: #bf1e39;text-transform:uppercase;} .mod-dropdown > ul > li > .btn2 .icon{top: -2px;} /* Additional Content */ .mod-dropdown > ul > li > .content{ display:none; background: #fff; position: absolute; top:38px; right: -1px; border:1px solid #ebe9e8; border-radius: 0 0 10px 10px; padding: 18px; z-index:1; -webkit-box-shadow: 3px 1px 5px 0 rgba(0,0,0,.1); box-shadow: 3px 1px 5px 0 rgba(0,0,0,.1); width: 156px; } .mod-dropdown > ul > li > .content .btn{width:100%;margin:20px 0 0;} .mod-dropdown > ul > li > .content > ul{padding: 0;} .mod-dropdown > ul > li > .content > ul > li{ text-align: left; border-bottom: 1px solid #efefef; } .mod-dropdown > ul > li > .content > ul > li:first-child{border-top:1px solid #efefef;} .mod-dropdown > ul > li > .content > ul > li + li{margin:0;} .mod-dropdown > ul > li > .content > ul > li > a{ text-transform: uppercase; color: #878785; padding:12px 0 11px; border:none; display: block; } .mod-dropdown > ul > li > .content > ul > li > a:hover{color:#bf1e39;border:none;} /* Opened */ .mod-dropdown > ul > .open{ border-radius: 5px 5px 0 0; border:1px solid #ebe9e8; border-bottom-color:#fff; position: relative; -webkit-box-shadow: 3px 1px 5px 0 rgba(0,0,0,.1); box-shadow: 3px 1px 5px 0 rgba(0,0,0,.1); z-index: 2; } .mod-dropdown > ul > .open.closing{z-index:1;} .mod-dropdown > ul > .open > a{border-bottom:1px solid #fff;z-index:2;} .mod-dropdown > ul > .open > a > .icon.arrow-lg-down{background-position:-49px -48px;} /* Select List */ .mod-dropdown.select_list > ul{display:block;} .mod-dropdown.select_list > ul > li{float:none;border: 1px solid #d9d5d4;border-radius: 5px;} .mod-dropdown.select_list > ul > li + li{margin:16px 0 0;} .mod-dropdown.select_list > ul > li > a{ display: block; color: #bf1e39; margin:0; padding: 0 50px 0 17px; border-radius: 5px; } .mod-dropdown.select_list > ul > li > a:hover{background:#edecea;} .mod-dropdown.select_list > ul > li > a > .icon{position:absolute;right:18px;top:50%;margin:-3px 0 0;} /* Content */ .mod-dropdown.select_list > ul > li > .content{ right: auto; left:0; width: 100%; padding:0; border-radius:0 0 5px 5px; } .mod-dropdown.select_list > ul > li > .content > ul > li{border:none;} .mod-dropdown.select_list > ul > li > .content > ul > li + li{border-top:1px solid #efefef;} .mod-dropdown.select_list > ul > li > .content > ul > li > a{padding:10px 18px 9px;} /* Opened */ .mod-dropdown.select_list > ul > .open > a, .mod-dropdown.select_list > ul > .open > a:hover{background: #bf1e39;color:#fff;border-radius:5px 5px 0 0;} .mod-dropdown.select_list > ul > .open > a > .icon.arrow-lg-down{background-position:-24px -42px;} /* Errors */ .mod-errors{ background: #fdf7f7; border: 1px solid #bf1e39; border-radius: 5px; padding: 15px 20px; width: 95%; } .mod-errors > p{font-size:15px;color:#bf1e39;line-height:19px;font-weight:bold;margin:0;} .mod-errors > p + ul{margin-top:8px;} .mod-errors > ul{padding:0;} .mod-errors > ul > li{ font-size:14px; font-weight:bold; color:#bf1e39; padding: 0 0 0 9px; background: url('../images/bullet-small_error.png') no-repeat 0 8px; } .mod-errors > ul > li + li{margin-top:2px;} /* Global */ .mod-errors.global{ width:100%; margin:0 0 30px; border-radius: 0; text-align: center; } /* Expandables */ .mod-expandables{margin-top:30px;clear:both;} .mod-expandables + *{margin-top:30px;} .mod-expandables .expandable{ position:absolute; float:left; z-index:-1; visibility:hidden; padding:0 25px 25px 45px; left:-9999px; top: -9999px; } .mod-expandables .expandable > *:last-child{margin-bottom:0;} .mod-expandables .open .expandable{position:relative;float:none;visibility:visible;z-index:0;left:0;top:0;} .mod-expandables > ul{padding:0;} .mod-expandables > ul > li{border-bottom:1px solid #ebe9e8;} .mod-expandables > ul > li + li{margin-top:0;} .mod-expandables > ul > li:first-child{border-top:1px solid #ebe9e8;} .mod-expandables .trigger_expandable > h3 {margin-top: 0;} /* Link */ .mod-expandables .trigger_expandable{ border:none; color:#878785; padding:13px 0 15px 45px; position:relative; font-size: 16px; display: block; } .mod-expandables .trigger_expandable:hover{color:#bf1e39;} /* Icon State */ .mod-expandables .expandable_state{ background-position: -32px -26px; width:15px; height:15px; position: absolute; left:15px; top:15px; } .mod-expandables .open .expandable_state{background-position: -48px -37px;height:4px;top:21px;} /* myHollister Overrides */ .myHollister .mod-expandables > ul > li{border-bottom: none;} .myHollister .mod-expandables > ul > li + li{border-top: 1px solid #fff;} .myHollister .mod-expandables .expandable{padding:25px 15px;} .myHollister .mod-expandables .trigger_expandable{ background: none; padding: 13px 45px 15px 15px; } .myHollister .mod-expandables .expandable_state{left:auto;right:15px;} /* Additional Overrides */ .mod-expandables .expandable > h3{font-size:18px;margin:27px 0 14px;color:#bf1e39;} .mod-expandables .mod-grid{margin-left:-45px;} /* Technology */ .mod-expandables.technology{width:100%;margin:32px 0 0 0;} .mod-expandables.technology .multicols{margin:0 0 20px;} .mod-expandables.technology .multicols .col1{float:right;width:31%;margin:0;} .mod-expandables.technology .multicols .col1 img{width:100%;} .mod-expandables.technology .multicols .col2{float:none;width:100%;margin:0;} .mod-expandables.technology .multicols .col1 + .col2{float:left;width:66%;margin:0;} /* Featured Products */ .mod-featured_products{ background: #e9e9e9; padding:15px 10px; text-align: center; } .mod-featured_products h2{font-size:24px;} .mod-featured_products > ul{margin-bottom: 15px;padding:0;} .mod-featured_products > ul > li{ background: #fff; padding: 15px; } .mod-featured_products > ul > li + li{margin-top:10px;} .mod-featured_products > .btn.outline{background:#fff;} .mod-featured_products > .btn.outline:hover, .mod-featured_products > .btn.outline:focus{background:#bf1e39;} /* Content */ .mod-featured_products > ul > li > h3{font-size: 18px;margin:0;} .mod-featured_products > ul > li > h3 a{color: #bf1e39;} .mod-featured_products > ul > li > h3 a:hover, .mod-featured_products > ul > li > h3 a:focus{border-bottom: 1px solid #bf1e39;} .mod-featured_products > ul > li > p{margin-top:0;} .mod-featured_products > ul > li > .btn{margin:10px 0 8px;} /* Filtered Form */ .mod-filtered_form input[type="radio"] + label{color:#bf1e39;padding-top:2px;} .mod-filtered_form fieldset > ul > li{margin-bottom:15px;} .mod-filtered_form fieldset > ul > li:last-child{margin-bottom:0;} .mod-filtered_form fieldset > ul > li > label > .help{font-size: 16px;display: inline;} .mod-filtered_form fieldset > ul > li > div{padding-left:25px;} .mod-filtered_form fieldset > ul > li > div > input + label{margin-top:10px;} .mod-filtered_form fieldset > ul > li > div > label{color:#878785;} .mod-filtered_form fieldset > ul > li > div > label > .icon{ margin-right:5px; position:relative; top:3px; } .mod-filtered_form .fieldset{padding:20px 0 0;} .mod-filtered_form .fieldset p{margin-bottom: 0;} .mod-filtered_form .fieldset > li:last-child{margin-bottom:0;} /* Filters */ .mod-search_summary + .mod-filters{margin-top:3px;} .mod-filters{display:table;width:100%;} .mod-filters > div{display:table-cell;position:relative;} .mod-filters > div + div{border-left:3px solid #fff;} .mod-filters > div a{ display:block; padding:14px 0; background: #f5f4f3; color: #6e6259; border:none; text-align: center; } /* Link & States */ .mod-filters > div > a > .icon{margin-left:5px;} .mod-filters > div.open > a{background:#e0dddc;color:#bf1e39;} .mod-filters > div > a:hover, .mod-filters > div > a:focus{color:#bf1e39;} .mod-filters > div.open > a > .icon{background-position: -218px -58px;} .mod-filters > div > a:hover > .icon, .mod-filters > div > a:focus > .icon{color:#bf1e39;} /* Content & General Styles */ .mod-filters .content{ border:3px solid #e0dddc; background: #fff; padding:15px; position: absolute; left:0;top:45px; z-index: 100; width: 341px; display: none; } .mod-filters .right .content{left:auto;right:0;} .mod-filters .content fieldset{margin:0;} .mod-filters .content fieldset > ul, .mod-filters .content fieldset > ul > li{width:100%;margin-right:0;} .mod-filters .content .btn{display:block;} /* Specicifc Layouts */ /* Filter Selections */ .mod-filters + .mod-filter_selections{margin-top:3px;} .mod-filter_selections{display:table;width:100%;} .mod-filter_selections > div{display:table-cell;padding:8px 15px;vertical-align:middle;} .mod-filter_selections > .header{background: #e0dddc;width:125px;} .mod-filter_selections > .header > h6{color:#6e6259;font-size:10px;margin:0;} .mod-filter_selections > .content{background:#f5f4f3;} .mod-filter_selections > .content ul{padding:0;} .mod-filter_selections > .content li{float:left;margin:0 5px 0 0;} .mod-filter_selections > .content a{color:#6e6259;font-size:12px;padding:5px;border:none;} .mod-filter_selections > .content a .icon{ background-position: -229px -13px; width:12px; height:12px; margin-left: 5px; position: relative; top: 1px } .mod-filter_selections > .content a:hover, .mod-filter_selections > .content a:focus{color:#bf1e39;} .mod-filter_selections > .content a:hover .icon, .mod-filter_selections > .content a:focus .icon{background-position: -229px -26px;} /* Gallery */ .mod-gallery{ margin:30px 0; padding:40px 0; position:relative; min-height:180px; } .mod-gallery > a{position: absolute;top:50%;left:0;margin-top:-15px;} .mod-gallery > a + a{left:auto;right:0;} .mod-gallery > span{position:absolute;bottom:1px;right:6%;margin:0 5px 0 0;color:#ccc;font-size:14px;} .mod-gallery > span > span{color:#998f8c;} .mod-gallery > ul{display: block;width: 88%;margin:0 auto;padding: 0;} .mod-gallery > ul > li{ display: block; width: 19%; min-width:19%; min-height: 1px; float:left; margin:0 .5%; position: relative; z-index: 1; } .mod-gallery > ul > li > a{ display:block; border:none; padding:5px; background: #fff; border:1px solid #cbcbcb; -webkit-transition: box-shadow 250ms; transition: box-shadow 250ms; } .mod-gallery > ul > li > a > span{ background: #000; background: rgba(0,0,0,.75); color: #fff; text-align: center; font-size: 12px; padding:5px; position: absolute; bottom:5px;left:5px;right:5px; display: none; } .mod-gallery > ul > li > a > img{display:block;width:100%;} .mod-gallery > ul > .active{z-index:10;} .mod-gallery > ul > .active > a{ border:1px solid #bf1e39; width: 176%; position: absolute; left:50%; top:50%; margin:-25% 0 0 -88%; -webkit-box-shadow: 0 0 3px 3px rgba(191,30,57,.2); box-shadow: 0 0 3px 3px rgba(191,30,57,.2); } .mod-gallery > ul > .active > a > span{display:block;} .mod-gallery > ul > .shadow > a{ border-color: #aaa; -webkit-box-shadow: 0 0 3px 3px rgba(170,170,170,.35); box-shadow: 0 0 3px 3px rgba(170,170,170,.35); } /* Captions(always visible) Overrides */ .mod-gallery.captions > ul > li > a > span{display:block;} /* Gallery: Thumbnail */ .mod-thumbnail_gallery{padding: 0 0 30px;position:relative;} .mod-thumbnail_gallery.modal{padding: 0;} .mod-thumbnail_gallery .btn-zoom{ display: block; position: absolute; bottom:0; right:0; color: #716F71; border: none; } .mod-thumbnail_gallery .btn-zoom > .icon.zoom{position:relative;top:5px;} .mod-thumbnail_gallery .btn-zoom:focus, .mod-thumbnail_gallery .btn-zoom:hover{color: #bf1e39;} .mod-thumbnail_gallery .btn-zoom:focus > .icon.zoom, .mod-thumbnail_gallery .btn-zoom:hover > .icon.zoom{background-position: -210px -138px;} /* Thumbnails */ .mod-thumbnail_gallery .thumbnails{width: 100px;float: left;position:relative;} .mod-thumbnail_gallery .thumbnails .cycle{height:330px !important;} .mod-thumbnail_gallery .thumbnails .cycle .cycle-slide{ width: 100px; height: 115px; } .mod-thumbnail_gallery .thumbnails .cycle .cycle-slide > img{ display:block; width:100px; height:100px; border: 2px solid #bcbbba; } .mod-thumbnail_gallery .thumbnails .cycle .cycle-slide-active > img{border-color: #bf1e39;} /* Buttons */ .mod-thumbnail_gallery .thumbnails .btn-control{ left:0; margin:0; width: 100px; height: 100px; opacity: 0; } .mod-thumbnail_gallery .thumbnails .btn-control.prev{top:0;} .mod-thumbnail_gallery .thumbnails .btn-control.next{top:auto;bottom:0;} /* Images */ .mod-thumbnail_gallery .images{ width: 480px; height: 330px; float: right; /*background: #faf9f9;*/ border: 2px solid #bcbbba; position: relative; } .mod-thumbnail_gallery.noThumbnails .images{width:100%;} .mod-thumbnail_gallery .images .cycle{height:330px;overflow: hidden;} .mod-thumbnail_gallery .images .cycle .cycle-slide{cursor:pointer;} .mod-thumbnail_gallery .images .cycle > div{width: 100%;height: 326px;} .mod-thumbnail_gallery .images .cycle .wrapper{ display:table; width:100%; height:100%; padding: 0 50px; } .mod-thumbnail_gallery .images .cycle .wrapper > div{ display:table-cell; vertical-align:middle; width:100%; height:100%; } .mod-thumbnail_gallery .images .cycle img{ max-width: 100%; height: auto; display: block; margin:0 auto; max-height: 300px; } /* Full Sized Images */ .mod-thumbnail_gallery .images.full{ width: 100%; height: 660px; float:none; clear: both; background: #faf9f9; } .mod-thumbnail_gallery .images.full .cycle, .mod-thumbnail_gallery .images.full .cycle > div{height: 660px;} .mod-thumbnail_gallery .images.full .cycle .cycle-slide{cursor:default;} .mod-thumbnail_gallery .images.full .cycle img{max-height: 600px;} /* Buttons */ .mod-thumbnail_gallery .btn-control{ position: absolute; top:50%; left:0; display: block; width: 32px; height: 80px; margin-top: -40px; background: #e0dfdf; z-index: 100; border: none; } .mod-thumbnail_gallery .btn-control:hover{background: #bf1e39;} .mod-thumbnail_gallery .btn-control.next{left:auto;right:0;} .mod-thumbnail_gallery .btn-control > .icon{ background-position: -243px -27px; width: 15px; height: 26px; position: absolute; left: 50%; top:50%; margin:-13px 0 0 -7px; } .mod-thumbnail_gallery .btn-control.next > .icon{background-position: -243px 0;} /* Disabled */ .mod-thumbnail_gallery .btn-control.disabled{ background:#e0dfdf !important; cursor:default !important; } /* Grid */ /* Base */ .mod-grid > .item, .mod-grid > .clearfix > .item{float:left;} .mod-grid > .item + .item{margin:15px 0 0;} /* Image */ .mod-grid > .item > .image{width:100%;text-align:center;} .mod-grid > .item > .image a{display:block;border:none;position: relative;} .mod-grid > .item > .image img{display:block;width:100%;max-width:169px;margin:0 auto;} /* Content */ .mod-grid > .item > .content > h2{font-size:22px;margin:0 0 13px;line-height:24px;color:#99908d;word-wrap:break-word;} .mod-grid > .item > .content > h2 a{color:#99908d;border:none;} .mod-grid > .item > .content > h2 a:hover{border-bottom:1px solid #99908d;} .mod-grid > .item > .content > h2 .tag{color:#bf1e39;font-size:15px;display:block;margin:0;} .mod-grid > .item > .content > p{font-size:12px;line-height:15px;margin:0 0 14px;} /* Utility Classes */ .mod-grid.bordered > .item{ border-radius:10px; border:1px solid #efefef; padding:16px; } /* Images */ .mod-grid.images > .item{ border:1px solid #ccc; padding:10px 5px; border-radius: 5px; float:left; width:83px; margin:0 3px 3px 0; background: #fff; } .mod-grid.images > .item > a{display:block;border:none;} .mod-grid.images > .item > a > img{width:100%;} /* Locations */ h3 + .mod-grid.locations{margin-top:20px;} .mod-grid.locations + h3{margin-top:40px;} .mod-grid.locations > .row + .row{margin:20px 0 0;} .mod-grid.locations > .row > .item{float:left;width:48%;margin:0 2% 0 0;} .mod-grid.locations > .row > .item > p{margin:0;line-height:20px;} .mod-grid.locations > .row > .item > p > a:link{border:none;} .mod-grid.locations > .row > .item > p > a:hover{color:#878785;} /* Popular Products */ .mod-grid.popular_products > .item{ width:203px; height:357px; margin:0 5px 10px 0; position:relative; padding: 16px; } .mod-grid.popular_products > .item > .content > .btn{position:absolute;bottom:16px;margin-right:16px;} /* Additional Info */ .mod-grid.popular_products > .item.info{ border:none; width:100%; margin:0; padding:10px 17px; height:auto; } .mod-grid.popular_products > .item.info .content{position: static;} .mod-grid.popular_products > .item.info .content p{font-size:14px;line-height:19px;} .mod-grid.popular_products > .item.info > .content > .btn{position:static;margin-top:2px;} /* Small */ .mod-grid.popular_products.small > .item{height: 200px;} .mod-grid.popular_products.small > .item.info{height:auto;} /* Search Listing */ p + .mod-grid.search_listing{margin-top:28px;} .mod-grid.search_listing + hr{background-position:-35px 0;margin-bottom:35px;} .mod-grid.search_listing > .header{margin:0 0 15px;} .mod-grid.search_listing > .content{margin-left:-25px;} .mod-grid.search_listing > .content > .item{ width: 186px; height: 320px; margin: 0 0 5px 25px; float:left; } /* Image and base Link */ .mod-grid.search_listing > .content > .item > .image{position:relative;margin-bottom:5px;} .mod-grid.search_listing > .content > .item > .image > img{display:block;width:100%;} .mod-grid.search_listing > .content > .item > .image > a{display:block;border:none;} .mod-grid.search_listing > .content > .item > .image > a > img{display:block;width:100%;} .mod-grid.search_listing > .content > .item > .image > .add_cart{position:absolute;bottom:1px;right:1px;} /* Hover Effect */ .mod-grid.search_listing .item span.badge { transition: transform 250ms ease-out; } .mod-grid.search_listing .item:hover span.badge { transform: scale(0.5,0.5) translate(45px,-45px); } /* Content */ .mod-grid.search_listing > .content > .item > .content{padding:14px 15px 0;} .mod-grid.search_listing > .content > .item > .content > h4{font-size:14px;} .mod-grid.search_listing > .content > .item > .content > h4 > a{text-transform:none;font-weight:bold;} .mod-grid.search_listing > .content > .item > .content > p{font-size:12px;line-height:14px;} /* Site Map */ .mod-grid.site_map{ margin-top:28px; border: 1px solid #efefef; padding:21px 32px; border-radius:10px; } .mod-grid.site_map .item{width:33%;padding:0 2% 0 0;margin:0;} .mod-grid.site_map > div + div{margin-top:50px;} .mod-grid.site_map .item .content > h6{margin-bottom:10px;} .mod-grid.site_map .item .content > h6 > a:link, .mod-grid.site_map .item .content > h6 > a:visited{color:#bf1e39;font-weight:bold;} .mod-grid.site_map .item .content > h6 > a:hover{border-bottom: 1px solid;} .mod-grid.site_map .item .content > h6 + ul{margin-top:-8px;padding: 0;} .mod-grid.site_map .item .content > ul{margin-bottom:6px;} .mod-grid.site_map .item .content > ul li + li{margin-top:0;} .mod-grid.site_map .item .content > ul li ul{margin:3px 0 3px 15px;} .mod-grid.site_map .item .content > ul li > a:link, .mod-grid.site_map .item .content > ul li > a:visited{ font-size: 12px; color:#99908d; border:none; } .mod-grid.site_map .item .content > ul li > a:hover{border-bottom:1px solid #99908d;} /* Site Portals */ .mod-grid.site_portals > .item{width:48%;margin:0 2% 0 0;} .mod-grid.site_portals > .item + .item{margin:0 0 0 2%;} .mod-grid.site_portals > .item > .header{min-height:60px;margin:0 0 10px;} .mod-grid.site_portals > .item > .header > h3{font-size:28px;line-height:30px;} .mod-grid.site_portals > .item > .header > h3 > a{color:#bf1e39;} .mod-grid.site_portals > .item > .header > h3 > a:hover{border-bottom:1px solid #bf1e39;} .mod-grid.site_portals > .item > .content{min-height:147px;} .mod-grid.site_portals > .item > .content > p{font-size:14px;line-height:19px;} .mod-grid.site_portals > .item > .content .link{border:none;} .mod-grid.site_portals > .item > .content .link:hover{border-bottom:1px solid;} .mod-grid.site_portals > .item > .footer{margin:25px 0 0;} /* Site Section */ .mod-grid.site_section > .row{width:100%;} .mod-grid.site_section > .row > .item{width:48%;height:auto;border:none;float:left;} .mod-grid.site_section .row > .item + .item{margin:0 0 0 4%;} .mod-grid.site_section > .row > .item > .content{padding-left:70px;} /* Header & Image Container Properties */ .mod-grid.site_section > .row > .item > .image{position: relative;} .mod-grid.site_section > .row > .item > .image > a{ display: table; min-height: 60px; height: 1px; /* firefox needs height to work with min-height on table display */ border: none; } .mod-grid.site_section > .row > .item > .image .header{ display: table-cell; vertical-align: middle; text-align:left; font-size: 20px; color: #878787; font-weight: normal; line-height: 24px; padding-left: 70px; } .mod-grid.site_section > .row > .item > .image .image_container{ display: block; overflow: hidden; height: 70px; width: 70px; position: absolute; left: -10px; top: -5px; } .mod-grid.site_section > .row > .item > .image .image_container > img{width:100%;} .mod-grid.site_section > .row > .item > .image > .active .header, .mod-grid.site_section > .row > .item > .image > a:hover .header{color:#bf1e39;} .mod-grid.site_section > .row > .item > .image > .active .image_container > img, .mod-grid.site_section > .row > .item > .image > a:hover .image_container > img{ position:relative;top:-70px; } /* Secure Start Contacts */ .mod-grid.ss-contacts > h5{font-size:15px;color:#bf1e39;text-transform:none;margin:0 0 20px;} .mod-grid.ss-contacts .item{width:200px;margin:0 20px 20px 0;} .ss .mod-grid.ss-contacts .item{width:auto;} .mod-grid.ss-contacts .item > .image{text-align:left;margin:0 0 7px;} .mod-grid.ss-contacts .item > .image > img{display:inline-block;} .mod-grid.ss-contacts .item > h6{color:#878785;text-transform:none;font-size:14px;margin:0;} .mod-grid.ss-contacts .item > h3{margin:0 0 14px;line-height:21px;} .mod-grid.ss-contacts .item > p{font-size:12px;line-height:14px;} .mod-grid.ss-contacts .item > p > a{font-size:10px;} /* Header & Buttons */ .mod-header_btns > .multicols > .col1{width:60%;} .mod-header_btns > .multicols > .col2{width:38%;text-align: right;} .mod-header_btns .btn + .btn{margin-left:5px;} /* Listing */ .mod-listing > ul{padding:0;} .mod-listing > ul > li + li{margin:15px 0 0;} /* Barred */ .mod-listing.barred > ul > li{ font-size:18px; line-height:22px; border-left: 2px solid #bf1e39; padding:3px 0 7px 6px; } .mod-listing.barred > ul > li + li{margin:2px 0 0;} /* Breadcrumbs */ .mod-listing.breadcrumbs > ul > li{float:left;margin:0 33px 10px 0;font-size:14px;position:relative;} .mod-listing.breadcrumbs > ul > li:after{ /* disable hover on > */ content: ''; position: absolute; left:-25px; top:0; height:20px; width:20px; } .mod-listing.breadcrumbs > ul > li > a:before{ content: '>'; position: absolute; right:-20px; top:0; color: #878785; } .mod-listing.breadcrumbs > ul > li.last > a:before{display:none;} .mod-listing.breadcrumbs > ul > li > a{color: #878785;border:none;position:relative;} .mod-listing.breadcrumbs > ul > li > a:hover{color:#bf1e39;} /* Bullets */ .mod-listing.bullets > ul{padding-left:20px;} .mod-listing.bullets > ul > li{ font-size: 14px; line-height: 15px; position: relative; padding:0 0 0 6px; } .mod-listing.bullets > ul > li:before{ content: ''; position: absolute; display: block; width: 6px; height: 7px; left:-4px; top:4px; background: url('../images/bullet.png') no-repeat; } .mod-listing.bullets.red > ul > li:before{background-image: url('../images/bullet-red.png');} .mod-listing.bullets > ul > li + li{margin:10px 0 0;} /* Server Error */ .server_error .mod-listing.bullets{margin:20px;} .server_error .mod-listing.bullets > ul{list-style:disc;} .server_error .mod-listing.bullets > ul > li:before{display:none;} /* Cart */ .mod-listing.cart > ul > li{display:block;border-bottom: 1px solid #efefef;width:100%;padding:3px 0;} .mod-listing.cart > ul > li + li{margin:0;} .mod-listing.cart > ul > li:first-child{border-top: 1px solid #efefef;} .mod-listing.cart > ul > li > .image, .mod-listing.cart > ul > li > .content{display: table-cell;vertical-align: middle;} .mod-listing.cart > ul > li > .content > h5{font-size:14px;line-height:14px;margin:0 0 2px;} .mod-listing.cart > ul > li > .content > h5 > span{ display: inline-block; font-size: 36px; margin-right: 1px; position: relative; top: 7px; } .ss .mod-listing.cart > ul > li > .content{padding-left:18px;} .mod-listing.cart > ul > li > .image{width:36px;padding:7px 0;} .mod-listing.cart > ul > li > .image > img{width:36px;margin:0 auto;} .mod-listing.cart > ul > li > .content > a{ color:#878785; font-size:14px; border:none; display: block; padding:7px 0 7px 56px; width: 208px; position: relative; z-index: 2; margin: 0 0 0 -36px; } .mod-listing.cart > ul > li > .content > a:hover{color:#bf1e39;} /* Details (news/events or any other general list of detailed information potentially w/ icons) */ .mod-listing.details + *{margin-top:0;} .mod-listing.details + img{margin-top:30px;} .mod-listing.details ul > li{display: inline-block;margin: 0 10px 0 0;} /* Icons */ .mod-listing.details ul > li > .icon{margin-right:4px;position:relative;} /* Filter */ .mod-listing.filter + *{margin-top:13px;} .mod-listing.filter > h5{font-size:14px;margin:0 0 5px;} .mod-listing.filter > ul > li + li{margin:4px 0 0;} .mod-listing.filter > ul > li > a{ display: block; position:relative; padding:0 20px 0 0; font-size:16px; color:#878787; border:none; } .mod-listing.filter > ul > li > a:hover, .mod-listing.filter > ul > li > .active{color:#bf1e39;} .mod-listing.filter > ul > li > .active:hover{color:#878787;} .mod-listing.filter > ul > li > .active:after{ content: ''; display: block; width: 11px; height: 11px; position: absolute; top:4px; right:0; background: url('../images/sprite.png') no-repeat -27px -80px; } .mod-listing.filter > ul > li > .active:hover:after{background-position: -39px -80px;} /* Left Nav Version */ #left_nav .mod-listing.filter > ul > li > .active:after{display: none;} #left_nav .mod-listing.filter > ul > li > .active:hover{color: #bf1e39;} /* Filter Selections */ .mod-listing.filter_selections{background: #ebe9e8;padding:12px 25px 8px;} .mod-listing.filter_selections > ul > li{ margin:0 4px 5px 0; display: block; float:left; } .mod-listing.filter_selections > ul > li:first-child{margin:0 0 5px;width: 100%;} .mod-listing.filter_selections > ul > li:first-child > span{font-size:16px;} .mod-listing.filter_selections > ul > li a{color:#878787;border:none;position:relative;top:1px;} .mod-listing.filter_selections > ul > li a:hover{color:#bf1e39;} /* Icons */ .mod-listing.icons{margin:12px 0 2px;} .mod-listing.icons > ul > li{font-size:14px;line-height:15px;padding:0 0 0 26px;} .mod-listing.icons > ul > li + li{margin:8px 0 0;} .mod-listing.icons > ul > li > a{ position: relative; color: #878785; border:none; } .mod-listing.icons > ul > li > a:hover{border-bottom: 1px solid #878785;} .mod-listing.icons > ul > li > a > .icon{margin-right: 5px; inline-size: 14px; block-size: 14px;} /* Links (gray) */ .mod-listing.links > ul > li{font-size:12px;} .mod-listing.links > ul > li + li{margin:0;} .mod-listing.links > ul > li > a{color:#99908d;border:none;} .mod-listing.links > ul > li > a:hover{border-bottom: 1px solid #99908d;} /* Red */ .mod-listing.links.red{margin:10px 0 0;} .mod-listing.links.red > ul > li{font-size:14px;} .mod-listing.links.red > ul > li + li{margin:5px 0 0;} .mod-listing.links.red > ul > li > a{color:#bf1e39;border:none;} .mod-listing.links.red > ul > li > a:hover{color:#878785;} /* Sample Cart (full list) */ .mod-listing.sample_cart{margin-top:32px;} .mod-listing.sample_cart > ul > li{ border:1px solid #ccc; border-radius:10px; padding: 9px; width: 78%; position: relative; z-index: 1; } .mod-listing.sample_cart > ul > li + li{margin-top:9px;} .mod-listing.sample_cart > ul > li.selected{z-index:2;} .mod-listing.sample_cart > ul > li > .trigger-delete_cart_item{ position: absolute; top:0; right:-123px; } .recommended-product__cart .trigger-add_cart{ position: absolute; top:0; right:-140px; } .mod-listing.sample_cart > a{margin-top:40px;} /* Image */ .mod-listing.sample_cart > ul > li > .image{width:20%;float:left;padding:0 10px;} .mod-listing.sample_cart > ul > li > .image > img{width:100%;} /* Content */ .mod-listing.sample_cart > ul > li > .content{width:80%;float:left;} .mod-listing.sample_cart > ul > li > .content p{ margin:9px 0 0; font-size: 12px; line-height: 15px; } /* Header */ .mod-listing.sample_cart > ul > li > .content > .header{position: relative;border-bottom: 1px solid #ccc;} .mod-listing.sample_cart > ul > li > .content > .header > h4{ font-size:15px; text-transform:none; /*padding:0 120px 0 0;*/ word-break: break-word; } .mod-listing.sample_cart > ul > li > .content > .header > .mod-dropdown{ position: absolute; right:0; top: -5px; margin:0; z-index: 10; } .mod-listing.sample_cart > ul > li > .content > .header > .mod-dropdown .label{line-height:25px;} .mod-listing.sample_cart > ul > li > .content > .header > .mod-dropdown .btn2{ height: 27px; line-height: 27px; } .mod-listing.sample_cart > ul > li > .content > .header > .mod-dropdown .content{ top:26px; } /* myHollister Adjustments */ .myHollister .mod-listing.sample_cart > ul > li{width:100%;} .myHollister .mod-listing.sample_cart > ul > li > .content > .header > h4{ font-size: 16px; padding-right: 55px; margin:8px 0 16px; } .myHollister .mod-listing.sample_cart > ul > li > .trigger-delete_cart_item{ right: 11px;top:8px; min-width: inherit; width: 35px; } .myHollister .mod-listing.sample_cart > ul > li > .content{float:none;width:100%;} .myHollister .mod-listing.sample_cart > ul > li > .content > ul{padding: 0;} .myHollister .mod-listing.sample_cart > ul > li > .content > ul > li{ float: left; position: relative; margin:9px 15px 0 0; height: 31px; line-height: 31px; } .myHollister .mod-listing.sample_cart > ul > li > .content > ul > li > label{color: #716F71;font-size:14px;} .myHollister .mod-listing.sample_cart > ul > li > .content > ul > li > input[type="text"]{width:40px;} /* Multicols */ .mod-multicols{clear:both;} /* Images */ .mod-multicols .col > .media_container img{width:100%;display:block; object-fit: cover;} .mod-multicols .col > .media_container.full-height img{width:100%;display:block; object-fit: cover; block-size: 100%;} .mod-multicols .col > .media_container .notFullyResponsive{ width: auto; max-width:100%;margin:0 auto;} .mod-multicols .col > .media_container .notFullyResponsive.left{margin:0;} .mod-multicols .col > .media_container .notFullyResponsive.right{margin:0 0 0 auto;} /* Background Image */ .mod-multicols .cols.hasBackgroundImage, .mod-multicols .multicols.hasBackgroundImage{ background: none no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Columns(display:table version, multicols uses the version set in [/css/reset.css:175-190]) */ .mod-multicols .cols{ display:flex; width:100%; margin: 15px 0; } .mod-multicols .multicols{margin:15px 0;} .mod-multicols .cols .col{display:table-cell;vertical-align:top;} /* Various Layouts */ .mod-multicols .cols .col{width:100%;} .mod-multicols .cols.cols2 .col{width:50%;} .mod-multicols .cols.cols3 .col{width:33.3333%;} .mod-multicols .cols.cols4 .col{width:25%;} .mod-multicols .cols.cols5 .col{width:20%;} .mod-multicols .cols.cols6 .col{width:16.6666%;} /* Two Column Variants */ /* 75% by 25% & Reverse(i.e. r) */ .mod-multicols .cols.cols-75x25 .col:first-child{width:75%;} .mod-multicols .cols.cols-75x25 .col:last-child{width:25%;} .mod-multicols .cols.cols-75x25r .col:first-child{width:25%;} .mod-multicols .cols.cols-75x25r .col:last-child{width:75%;} /* Multicols Variant */ .mod-multicols .multicols.cols-75x25 .col:first-child{width:74%;} .mod-multicols .multicols.cols-75x25 .col:last-child{width:24%;} .mod-multicols .multicols.cols-75x25r .col:first-child{width:24%;} .mod-multicols .multicols.cols-75x25r .col:last-child{width:74%;} /* 66% by 33% & Reverse(i.e. r) */ .mod-multicols .cols.cols-66x33 .col:first-child{width:66.6666%;} .mod-multicols .cols.cols-66x33 .col:last-child{width:33.3333%;} .mod-multicols .cols.cols-66x33r .col:first-child{width:33.3333%;} .mod-multicols .cols.cols-66x33r .col:last-child{width:66.6666%;} /* Multicols Variant */ .mod-multicols .multicols.cols-66x33 .col:first-child{width:65.6666%;} .mod-multicols .multicols.cols-66x33 .col:last-child{width:32.3333%;} .mod-multicols .multicols.cols-66x33r .col:first-child{width:32.3333%;} .mod-multicols .multicols.cols-66x33r .col:last-child{width:65.6666%;} /* 60% by 40% & REverse(i.e. r) */ .mod-multicols .cols.cols-60x40 .col:first-child{width:60%;} .mod-multicols .cols.cols-60x40 .col:last-child{width:40%;} .mod-multicols .cols.cols-60x40r .col:first-child{width:40%;} .mod-multicols .cols.cols-60x40r .col:last-child{width:60%;} /* Multicols Variant */ .mod-multicols .multicols.cols-60x40 .col:first-child{width:59%;} .mod-multicols .multicols.cols-60x40 .col:last-child{width:39%;} .mod-multicols .multicols.cols-60x40r .col:first-child{width:39%;} .mod-multicols .multicols.cols-60x40r .col:last-child{width:59%;} /* Three Column Variants */ /* 50% x1 & 25% x2 */ .mod-multicols .cols.cols-50x25x25 .col{width:25%;} .mod-multicols .cols.cols-50x25x25 .col:first-child{width:50%;} .mod-multicols .cols.cols-50x25x25a .col{width:25%;} .mod-multicols .cols.cols-50x25x25a .col:first-child + .col{width:50%;} .mod-multicols .cols.cols-50x25x25r .col{width:25%;} .mod-multicols .cols.cols-50x25x25r .col:last-child{width:50%;} /* Multicols Variant */ .mod-multicols .multicols.cols-50x25x25 .col{width:23%;} .mod-multicols .multicols.cols-50x25x25 .col:first-child{width:48%;} .mod-multicols .multicols.cols-50x25x25a .col{width:23%;} .mod-multicols .multicols.cols-50x25x25a .col:first-child + .col{width:48%;} .mod-multicols .multicols.cols-50x25x25r .col{width:23%;} .mod-multicols .multicols.cols-50x25x25r .col:last-child{width:48%;} /* Spacing for columns */ .mod-multicols .col{padding:15px 0;} .mod-multicols .col > div{padding:0 15px;} .mod-multicols .col > a{padding:0 15px;display: block;border: 0;} .mod-multicols .col .content h5{color:#666;} .mod-multicols .col:hover .content h5{color:#bf1e39;} .mod-multicols .col > div > *:last-child{margin-bottom:0;} .mod-multicols .col > .no-padding{padding:0;} .mod-multicols .col.no-padding-top{padding-top:0;} .mod-multicols .col.no-padding-bottom{padding-bottom:0;} .mod-multicols .col.no-vertical-padding{padding-top:0;padding-bottom:0;} .mod-multicols .col.no-vertical-padding[class*="bg-"] > div:last-child{padding-bottom:15px;} .mod-multicols .col.no-vertical-padding[class*="bg-"] > .media_container:last-child{padding-bottom:0;} .mod-multicols .col.no-vertical-padding[class*="style"] > div:last-child{padding-bottom:15px;} .mod-multicols .col.no-vertical-padding[class*="style"] > .media_container:last-child{padding-bottom:0; block-size: 100%;} .mod-multicols .col > div + div{padding-top:15px;} .mod-multicols .col > div + a{padding-top:15px;} /* Background Colors & Text Colors */ .mod-multicols .col.no-bg{background: none;} /* Default(i.e. white, no class) */ .mod-multicols h6{color:#bf1e39;} .mod-multicols .col{background: #fff;position:relative;} .mod-multicols .col.semiTransparent{background: rgba(255,255,255,.9);} /* Red (class = higlight because dansac's = orange and want to maintain consistent classes) */ .mod-multicols .col.bg-highlight{background: #bf1e39;} .mod-multicols .col.bg-highlight.semiTransparent{background: rgba(191,30,57,.9);} .mod-multicols .col.bg-highlight > .header > *, .mod-multicols .col.bg-highlight > .content > *{color:#fff;} .mod-multicols .col.bg-highlight a:not(.btn){color:#fff;border-color:#fff;} .mod-multicols .col.bg-highlight .btn.outline{color: #fff;border-color:#fff;} .mod-multicols .col.bg-highlight .btn.outline:hover{ background: #878785; border-color: #878785; } /* Light Gray */ .mod-multicols .col.bg-gray-light{background: #ebe9e8;} .mod-multicols .col.bg-gray-light.semiTransparent{background: rgba(235,233,232,.9);} /* Dark Gray */ .mod-multicols .col.bg-gray-dark{background: #878785;} .mod-multicols .col.bg-gray-dark.semiTransparent{background: rgba(135,135,133,.9);} .mod-multicols .col.bg-gray-dark > .header > *, .mod-multicols .col.bg-gray-dark > .content > *{color:#fff;} .mod-multicols .col.bg-gray-dark .btn.outline{color: #fff;border-color: #fff;} .mod-multicols .col.bg-gray-dark .btn.outline:hover{ background: #bf1e39; border-color: #bf1e39; } /* Black */ .mod-multicols .col.bg-black{background: #000;} .mod-multicols .col.bg-black.semiTransparent{background: rgba(0,0,0,.9);} .mod-multicols .col.bg-black > .header > *, .mod-multicols .col.bg-black > .content > *{color:#fff;} /* Borders & Shadows */ .mod-multicols .col[class*="border"]{border:1px solid #efefef;} .mod-multicols .col.border-white{border-color:#fff;} .mod-multicols .col.border-highlight{border-color:#bf1e39;} .mod-multicols .col.border-gray-light{border-color:#ebe9e8;} .mod-multicols .col.border-gray-dark{border-color:#878785;} .mod-multicols .cols.border-rounded, .mod-multicols .multicols.border-rounded, .mod-multicols .col.border-rounded{border-radius: 5px;overflow:hidden;} .mod-multicols .cols.shadow, .mod-multicols .multicols.shadow, .mod-multicols .col.shadow{ -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.3); box-shadow: 0 0 10px 0 rgba(0,0,0,.3); } /* Various Layouts */ /* Article Listing */ .mod-multicols.article_listing h5 a{color:#666;border:none;} .mod-multicols.article_listing h5 a:hover, .mod-multicols.article_listing h5 a:focus{color:#bf1e39;} /* Multi Cols */ .mod-multicols.article_listing .col{ -webkit-transition: transform .5s, box-shadow .5s; transition: transform .5s, box-shadow .5s; padding-bottom: 45px; display: block; } .mod-multicols.article_listing .col:hover{ -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); z-index: 100; -webkit-box-shadow: 0 0 15px 4px rgba(0,0,0,.20); box-shadow: 0 0 15px 4px rgba(0,0,0,.20); } .mod-multicols.article_listing .mod-recommended{ position: absolute; width: 100%; bottom:12px; } /* Tags */ .mod-multicols.article_listing .tags{margin-top:10px;line-height:1.5;font-size:12px;position: relative;z-index: 2;} .mod-multicols.article_listing .tags .tag{border:none;cursor:pointer;display:inline-block;color:#bf1e39;} .mod-multicols.article_listing .tags .tag:hover, .mod-multicols.article_listing .tags .tag:focus{border-bottom: 1px solid #bf1e39;} .mod-multicols.article_listing .tags .icon{position:relative;top:2px;} /* Secure Start Login Dependant CTA */ .mod-multicols.ss-login-cta{padding:30px 0 40px;} .mod-multicols.ss-login-cta .cols{margin:0;} .mod-multicols.ss-login-cta h3{ color: #bf1e39; font-size: 24px; line-height: 32px; margin-top: 10px; } /* Multicols(non-module) Overrides */ /* Module Content */ .multicols.mod-content + .btn_container{margin-top:70px;} .multicols.mod-content > .col1{width:550px;} .multicols.mod-content > .col1 > h3{margin-bottom:19px;} .multicols.mod-content > .col2{ padding:8px 0 0; width:302px; text-align:right; float: right; } .multicols.mod-content > .col2 > img{display:block;width:100%;} .multicols.mod-content > .col2 > img + img{margin-top:7px;} /* Previous / Next Container */ .multicols.prev_next_container{margin-top:8px;} * + .multicols.prev_next_container{margin-top:20px;} .multicols.prev_next_container + *{margin-top:30px;} /* News + Events */ h2 + .mod-news_events, p + .mod-news_events, .mod-news_events + h2{margin-top:20px;} .mod-news_events > .item{position:relative;} .mod-news_events > .item + .item{margin-top:30px;} /* Structure - Image + Content */ .mod-news_events > .item > .image{ float: left; width: 20%; padding: 0 15px; } .mod-news_events > .item > .image > img{width:100%;} .mod-news_events > .item > .image + .content{ float: left; width:80%; padding-left: 15px; } /* Content */ .mod-news_events > .item > .content > h3{ font-size: 16px; color: #bf1e39; margin:0 0 3px; } .mod-news_events > .item > .content > a{border:none;} .mod-news_events > .item > .content > a:hover{border-bottom:1px solid #bf1e39;} .mod-news_events > .item > .content > a > .icon{top:0;margin-left:3px;} /* Notice */ .mod-notice{border:1px dotted #bf1e39;padding:15px;text-align:center;} .mod-notice > p{margin:0;line-height:16px;} .mod-notice > p > .help{margin-left:3px;position:relative;top:1px;} /* myH Form */ .mod-myh_form{padding: 25px 15px 25px 25px;background: #fdf7f7;} .mod-myh_form.plain{padding:0;background:none;} .mod-myh_form .mod-errors{width:98%;} .mod-myh_form fieldset:last-child{margin-bottom:0;} .mod-myh_form fieldset > ul{width:100%;} /* Order Details */ .mod-order_details .multicols.cols3 .col1{width: 25%;} .mod-order_details .multicols.cols3 .col2{width: 33%;} .mod-order_details .multicols.cols3 .col3{width: 38%;} /* Pagination */ .mod-pagination ul{padding:0;} .mod-pagination ul li{float:left;} .mod-pagination .spacer{margin:0 -5px 0 5px;width:auto;height:auto;} .mod-pagination li + li{margin:0 0 0 10px;} .mod-pagination li > a{color: #878785;border:none;padding:5px;} .mod-pagination li > a:hover{color:#bf1e39;} .mod-pagination .active > a{font-weight:bold;} .mod-pagination .active > a:hover{color:#878785;cursor:default;} /* Prev / Next links */ .mod-pagination .prev_next > a{color:#bf1e39;font-weight:bold;} .mod-pagination .prev_next > a:hover{color:#878785;} .mod-pagination .prev_next.disabled > a, .mod-pagination .prev_next.disabled > a:hover{color:#878785;cursor:default;} /* Utility */ .mod-pagination.centered{text-align: center;} .mod-pagination.centered > ul{display: inline-block;} /* Margins */ .table_container + .mod-pagination{margin-top:20px;} /* Pagination Container */ .mod-pagination_container{margin:25px 0;} .mod-pagination_container p{font-size:12px;} .mod-pagination_container .mod-pagination{float:right;} /* Related Articles */ .mod-related_articles > h3{margin-bottom:15px;} .mod-related_articles h3 > a{color:#bf1e39;} .mod-related_articles h3 > a:hover{color:#878787;} .mod-related_articles ul{padding:0;} .mod-related_articles ul > li > p{margin:0 0 3px;} /* Recommended */ .mod-recommended{ padding: 20px 20px 13px; background: #e9e9e9; border-bottom: 2px solid #ccc7c5; color: #bf1e39; font-size: 17px; margin:30px 0 0; } .mod-recommended > ul{text-align:right;padding:0;} .mod-recommended > ul > li{display: inline-block;margin:0 0 0 10px;} /* Text Sizing */ .mod-recommended li > a, .mod-recommended li > span{border:none;cursor:pointer;} .mod-recommended .txt-number{font-size:36px;} /* Tooltip Display */ .mod-recommended li > .template{display:none;} .mod-recommended .shareTooltip{width:168px;padding:10px;margin-top:-10px;} .mod-recommended .shareTooltip ul{padding:0;} .mod-recommended .shareTooltip ul li{float:left;line-height:29px;height:29px;} .mod-recommended .shareTooltip ul li + li{margin:0 0 0 10px;} .mod-recommended .shareTooltip .icon{margin:0;} /* Icons */ .mod-recommended .icon{margin-right:5px;} .mod-recommended .opened > .share, .mod-recommended span:hover > .share{background-position: -270px -158px;} .mod-recommended .js-recommend.isRecommended > .star, .mod-recommended .js-recommend:hover > .star{background-position: -300px -181px;} /* .mod-recommended .js-recommend.isRecommended:hover > .star{background-position: -270px -181px;} */ .mod-recommended .js-recommend{display: inline-block;} /* Small Variant */ .mod-recommended.small{background: none;border: none;} .mod-recommended.small > ul{text-align: left;} .mod-recommended.small > ul > li{margin:0 10px 0 0;} .mod-recommended.small .txt-number{font-size:16px;margin:0 3px 0 0;} .mod-recommended.small .icon{margin:0;} .mod-recommended.small .star{ position: relative; top: 7px; -moz-transform: scale(.6); -webkit-transform: scale(.6); -o-transform: scale(.6); -ms-transform: scale(.6); transform: scale(.6); } /* Results Options */ .mod-results_options.right{float:right;min-width:280px;} .mod-results_options > ul{padding:0;} .mod-results_options > ul > li{float:left;font-size:14px;line-height:19px;color:#878785;} .mod-results_options > ul > .label{padding:7px 0;} .mod-results_options > ul > .select{width:220px;} .mod-results_options > ul > li + li{margin:0 0 0 10px;} .mod-results_options > ul > li > a{ color:#878785; border: 1px solid #ddd; border-radius: 5px; display: block; padding:7px 8px; } .mod-results_options > ul > li > a.active, .mod-results_options > ul > li > a:hover{color: #bf1e39;} /* Utility Classes */ .mod-results_options.align-right{text-align:right;} .mod-results_options.align-right > ul{display: inline-block;} /* Clear ALl */ .mod-results_options .mod-filter_selections{ position: absolute; width:auto; top:-10px; right:-18px; margin: 0; } .mod-results_options .mod-filter_selections .content{background:none;} .mod-results_options .mod-filter_selections .content li{margin:0;} /* Search */ .mod-search{margin:8px 0 22px;} .mod-search > p{font-size:12px;line-height:14px;} .mod-search > input{margin:0 0 10px;} /* Search v2 */ .mod-search2{background:#fdf7f7;} .mod-search2 .multicols.cols2 > .col{padding:30px 15px;} .mod-search2 .multicols.cols2 > .col1{width:75%;margin:0;} .mod-search2 .multicols.cols2 > .col2{ width:25%; margin:0; text-align:center; position:relative; } .mod-search2 .multicols.cols2 > .col2:before{ content: ''; position:absolute; width:2px; top:0;bottom:0; left: -1px; background: #fff; } .mod-search2 .multicols.cols2 > .col2 h6{ text-transform: none; font-size: 14px; color:#716f71; margin-bottom: 10px; } .mod-search2 .search > input{ width:70%; max-width:400px; float:left; padding:7px; height: 35px; } .mod-search2 .search > button{float:left;margin-left:10px;} /* Search Summary */ .mod-search_summary{margin:13px 0 0;position:relative;z-index:2;} .mod-search_summary:after{ content: ''; background: #fcfbf9; position: absolute; top:-13px;right:-200px;bottom:-20px;left:-50px; z-index:-1; } .mod-search_summary > ul{padding:0;} .mod-search_summary > ul > li{float:left;margin:0;} .mod-search_summary .summary{width:65%;} /* Sort By */ .mod-search_summary .sortby{width:35%;text-align:right;} /* Drop Down */ .mod-search_summary .mod-dropdown{margin-top:-10px;} /* Search Results */ .mod-search_results{margin-top:20px;} .mod-search_results > .item > h5{font-size:14px;margin:0 0 5px;} .mod-search_results > .item > h5 > a{color:#bf1e39;border:none;} .mod-search_results > .item > h5 > a:hover{color:#878785;} .mod-search_results > .item + .item{margin-top:4px;} /* Breadcrumbs */ .mod-search_results .mod-listing.breadcrumbs{margin-top:-4px;} .mod-search_results .mod-listing.breadcrumbs > ul > li{font-size:14px;color: #bf1e39;} .mod-search_results .mod-listing.breadcrumbs > ul > li > a{color: #bf1e39;display:block;} .mod-search_results .mod-listing.breadcrumbs > ul > li > a:hover{color:#878785;} .mod-search_results .mod-listing.breadcrumbs > ul > li > a:before{top:-2px;color: #bf1e39;} /* Search IFU */ .mod-search_ifu {background:#edecea;padding:20px;} .mod-search_ifu label {padding-bottom:10px;} .mod-search_ifu input[type="text"], .mod-search_ifu select {height:34px;} .mod-search_ifu select, .mod-search_ifu select option {text-transform:uppercase;} .mod-search_ifu label.tip, .mod-search_ifu .mod-support {float:left;} .mod-search_ifu .mod-support a .icon-question { content: ''; display: block; width: 13px; height: 12px; background-image: url('../images/sprite.png'); background-repeat:no-repeat; background-position: -228px 0; position:relative; top:4px; left:6px; } .mod-search_ifu .mod-support a:hover .icon-question {background-position: -298px -121px;} .mod-search_ifu input[type="submit"]::before { content: ''; display: block; width: 13px; height: 14px; background-image: url('../images/sprite.png'); background-repeat:no-repeat; background-position: 0 -23px; } .mod-search_ifu .mod-search_summary {background:#fff;} .mod-search_ifu button { font-size:14px; min-width:127px; margin-top:25px; } .mod-search_ifu .icon-search::before { content: ''; display: inline-block; width: 13px; height: 13px; position:relative; top:2px; margin-right:6px; background-image: url('../images/sprite.png'); background-repeat:no-repeat; background-position: 0 -25px; color:#fff; } /* Signature */ .mod-signature{margin:20px 0;} .mod-signature .multicols{margin:40px 0 20px;} .mod-signature .multicols .col1{width:55%;} .mod-signature .multicols .col2{width:35%;} .mod-signature .multicols .col{border-bottom:1px solid #716F71;} .mod-signature .multicols .col span{ display: inline-block; padding:0 20px 0 0; background: #fff; position: relative; top:2px; } /* Site Search */ .mod-site_search{position:relative;} .mod-site_search.half{width:50%;} .mod-site_search > .field{margin:0 28px 0 0;} .mod-site_search > .field > input{ border:1px solid #cfcac9; border-right:0; border-bottom:1px solid #f5f3ef; border-radius:0; padding:2px 5px 0; text-transform: uppercase; outline: none; height: 28px; line-height: 28px; } .mod-site_search > button{ background: #bf1e39; width: 28px; height: 28px; border-radius: 0; border:none; padding: 0; position: absolute; top:0; right:0; } .mod-site_search > button > .icon{display: block;margin: 0 auto;} /* Disabled Loading */ .mod-site_search > button.loading{ background: url('../images/ajax-loader.gif') no-repeat center center !important; } .mod-site_search > button.loading > span{display:none !important;} /* Stock Number & Some 'Alt' Styles (more below) */ .mod-site_search.stock, .mod-site_search.alt{margin:30px 0;} .mod-site_search.stock h5{color:#bf1e39;font-size:14px;font-weight:bold;margin:0 0 20px;} .mod-site_search.stock > .field, .mod-site_search.alt > .field{width:40%;display:block;margin-right:5px;float:left;} .mod-site_search.alt > .field > input, .mod-site_search.stock > .field > input{ border:1px solid #ebe9e8; border-radius: 5px; height: 34px; line-height: 100%; padding:8px 10px; } .mod-site_search.alt > button, .mod-site_search.stock > button{ display: block; background: none; width: 36px; height: 34px; float:left; position: relative; right:auto; top:auto; } .mod-site_search.stock > .verification{ color: #bf1e39; display: none; height: 34px; line-height: 34px; margin:0 0 0 10px; float:left; } .mod-site_search.stock > .verification.visible{display:block;} /* Alternative Utility */ /* Alt Version */ .mod-site_search.alt > button{background:#bf1e39;border-radius:5px;} .mod-site_search.alt > button:hover, .mod-site_search.alt > button:focus{background:#878785;} /* Text - Lower Case */ .mod-site_search.txt-lower > .field > input{text-transform: none;} /* Button - Text */ .mod-site_search.btn-text > .field{margin-right: 80px !important;} .mod-site_search.btn-text > button{width: 80px !important;} /* myHollister Adjustments */ .myHollister .mod-site_search > .field{margin:0 31px 0 0;} .myHollister .mod-site_search > .field > input{ border:1px solid #d9d5d4; border-right:0; border-radius:5px 0 0 5px; padding: 5px 8px 7px; height: 31px; } .myHollister .mod-site_search > button{ width: 31px; height: 31px; border-radius: 0 5px 5px 0; } /* Search Tools */ .mod-search_tools > .mod-site_search{width:85%;max-width:320px;} .launch-search_filters > .icon.arrow-lg-right{background-position:-67px -42px;} .mod-search_tools.visible-phone + .module{margin-top:0;} /* Standalone Callout */ .mod-standalone_callout{ background: #f5f4f3; padding:35px 30px; text-align: center; } .mod-standalone_callout.small{padding:15px 25px;} .mod-standalone_callout > *:last-child{margin-bottom:0;} .mod-standalone_callout > h3{font-size: 20px;color: #6e6259;} .mod-standalone_callout > h6{font-size:14px;color:#6e6259;text-transform:none;} .mod-standalone_callout > p{color:#6e6259;margin-bottom:20px;} .mod-standalone_callout > .btn{width:80%;} /* Floated */ .mod-standalone_callout.float_right{width:38%;margin:0 0 20px 40px;} .mod-standalone_callout.float_right + *{margin-top:10px;} /* Steps (i.e. progress, part 1 of 4) */ .mod-steps{text-align: center;} .mod-steps > ul{display:inline-block;} .mod-steps > ul > li{ display: inline-block; text-align: center; font-size: 11px; color: #6e6259; text-transform: uppercase; position: relative; width:155px; margin:0; font-weight: bold; vertical-align: top; } .mod-steps > ul > li:hover{color:#bf1e39 !important;} .mod-steps > ul > li.noHover:hover{color:#6e6259 !important;} .mod-steps > ul > li.noHover.complete:hover{color:#878785 !important;} .mod-steps > ul > li + li:before{ /* dashed line between items */ content: ''; width: 70px; height: 1px; background: url('../images/ss-progress-bar.png') no-repeat 0 -2px; position: absolute; top:33px; left:-37px; } .mod-steps > ul > li.complete{color:#878785;} .mod-steps > ul > li.complete + li:before{background-position:0 0;} .mod-steps > ul > li.active{color:#bf1e39;} .mod-steps > ul > li > a{ position: absolute; left:0;right:0;top:0;bottom:0; border:none; } .mod-steps > ul > li > .image{ display:block; width: 65px; height: 65px; overflow: hidden; margin:0 auto 10px; } .mod-steps > ul > li > .image img{display:block;width:100%;position:relative;} .mod-steps > ul > li.active > .image img{top:-67px;} .mod-steps > ul > li.complete > .image img{top:-134px;} /* Summary */ .mod-summary{ background: #ebe9e8; padding:15px; position: relative; margin-top:10px; } .mod-summary:before{ content: ''; position: absolute; height: 1px; width: 100%; background: #ebe9e8; top:-5px; left:0; } .mod-summary .col + .col:before{ content: ''; position: absolute; width: 1px; top:-15px;bottom:-15px; margin-left:-15px; background: #fff; } .mod-summary h6{color:#bf1e39;text-transform: none;font-size:14px;} .mod-summary h6 a{color: #bf1e39;border-bottom: 1px solid #bf1e39;} .mod-summary h6 a:hover{border:none;} .mod-summary .icon{margin-right:7px;} /* Support */ .mod-support ul{ list-style:none; display:flex; justify-content: center; width:100%; padding:0; } .mod-support ul li{display: flex;align-items:center;position:relative;} .mod-support ul li + li{margin:0;} .mod-support ul li h5{ font-size:24px; line-height:28px; color:#666; text-align: center; } .mod-support ul li a{ font-size: 17px; line-height: 20px; display: block; padding: 10px 10px 10px 65px; border:none; } .mod-support ul li a:hover, .mod-support ul li a:focus{color: #222;} .mod-support ul li a > span{ display: block; font-size:14px; line-height:16px; color:#666; } .mod-support ul li a > img{position: absolute;left:10px;top:50%;margin-top:-22px;} /* Change Widths Based on Items */ .mod-support.items-4 ul li{width:25%;} .mod-support.items-3 ul li{width:33%;} .mod-support.items-2 ul li{width:50%;} /* Video */ .mod-video{ position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .mod-video iframe, .mod-video object, .mod-video embed, .mod-video video, .mod-video .video-js { /* brightcove class */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:none; } /* AWS 3.3 - Callouts -----------------------------------------------------------------------*/ .callout{padding:15px;} * + .callout,.callout + *{margin-top:20px;} /* Base Callout Styles */ .callout > .button{margin-top:17px;} .callout > .content > a{color:#fff;font-size: 10px;border-color:#fff;} .product_details .sidebar .callout > .content > a{ color:#878785; font-size:12px; display: inline-block; margin-top:7px; border:none; } .product_details .callout > .content > a .arrow-link{top:0;} .product_details .callout > .content > a:hover{color:#bf1e39;} .product_details .callout > .content > a:hover .arrow-link{background-position:-76px -43px;} /* Image */ .callout > .image{margin:0 0 5px -15px;} /* Banner */ .callout.banner{padding:0;} .callout.banner a{border:none;} .callout.banner a img{width:100%;} /* First */ .callout.first{background:#998f8c;padding:5px 15px 18px;} .callout.first > .header > h3{font-size:43px;color:#fff;line-height:45px;margin:0 0 5px;} .callout.first > .content > p{color:#fff;} .callout.first > .image{margin-top:-5px;} /* Second */ #sidebar .callout.second{padding:17px 10px 18px 15px;} .callout.second{background: #ebe9e8;} .callout.second > .header + .content{margin:11px 0 0;} .callout.second > .header.hidden-desktop + .content{margin:0;} .callout.second > .content{height:215px;} .callout.second.alt > .content{height:auto;} .callout.second > .header > h3 > a{border-bottom: 1px solid #878787;} .callout.second > .header > h3 > a:hover{border-color: #bf1e39;} .callout.second h6{ color: #998f8c; font-size:14px; line-height:14px; text-transform:none; margin-bottom:0; } .callout.second p{line-height:16px;} /* Listings */ .callout.second .mod-listing{padding:0 0 5px;} .callout.second .mod-listing li{font-size: 12px;line-height:14px;color:#878785;} .callout.second .mod-listing li + li{margin-top:17px;} /* Details */ .callout .mod-listing.details{padding:0;} .callout .mod-listing.details + h6{margin-top:5px;} .callout .mod-listing.details li{display:inline;padding-right:5px;margin-right:0;} /* Make Icons here use small varients */ .callout .mod-listing.details .icon.calendar{ top:1px; background-position: -134px -176px;width:11px;height:13px; } .callout .mod-listing.details .icon.clock{ background-position: -146px -178px;width:10px;height:11px; } .callout .mod-listing.details .icon.location{ background-position: -157px -178px;width:7px;height:11px; } /* Third/Fourth */ .callout.third,.callout.fourth{padding:20px 15px;text-align:center;background:#fff;} .callout.third > .header > h3, .callout.fourth > .header > h3{ color:#998f8c; text-transform:uppercase; font-size:18px; margin:0 0 10px; font-weight: bold; } .callout.third > .content > p, .callout.fourth > .content > p{font-size:12px;line-height:14px;color:#878785;} /* Site Portal */ .callout.site_portal{ border-radius: 10px; height: 250px; overflow: hidden; padding: 0; } .callout.site_portal.full{height:auto;} .callout.site_portal.full > .content{float:none;width:100%;height:auto;} .callout.site_portal.full > .content > .btn{position:static;margin-top:22px;} /* Content */ .callout.site_portal > .content{ float:left; background: #fff; width:300px; height: 248px; padding:20px; position: relative; } .callout.site_portal > .content:after{ content: ''; position: absolute; top:50%; right:-10px; margin:-7px 0 0 0; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #fff; z-index: 2; } .callout.site_portal > .content p{margin:0;font-size:12px;line-height:16px;} .callout.site_portal > .content > .btn{position:absolute;bottom:20px;border:none;width:230px;} /* Uitlity: Highlight Styles */ .callout.site_portal.highlight > .content{background: #bf1e39;} .callout.site_portal.highlight > .content:after{border-color: transparent transparent transparent #bf1e39;} .callout.site_portal.highlight > .content h2, .callout.site_portal.highlight > .content p{color:#fff;} .callout.site_portal.highlight > .content .btn{border:1px solid #fff;} /* Image */ .callout.site_portal > .image{ float:left; width:358px; height: 248px; overflow: hidden; position: relative; } .mod-grid > .item > .image a{display:block;border:0;} .callout.site_portal > .image img{ position: absolute; top:0;left:50%; margin:0 0 0 -240px; z-index: 0; max-width: inherit; } /* Video */ .callout.site_portal > .image.video{display:table;padding:15px 25px;} .callout.site_portal > .image.video > .mod-video{display:table-cell;position:static;} /* AWS 3.4 - Layouts (i.e. more complex designs, tend to hold one or more modules) ----------*/ /* AWS 3.4.1 - Product Details ----------------------------------------------------------*/ /* .layout.product_details{width:610px;} */ .layout.product_details .launch-sidebar{display:none;} /* Content */ .layout.product_details h5{color:#bf1e39;font-size:14px;} /* Features */ .layout.product_details > .features{margin:38px 0 0;} .layout.product_details > .features > .mod-listing{margin:8px 0 0;} .layout.product_details > .features > .btn_container{margin-top:30px;} .layout.product_details > .features > .btn_container > .btn{ display:inline-block; min-width: 240px; margin-bottom:10px; } /* Specs */ .layout.product_details > .specs{margin-top:39px;} /* Button */ .layout.product_details > .specs .button{width:134px;} .layout.product_details > .specs td.button{padding:0;} .layout.product_details > .specs .button > a{ display:block; width: 36px; height: 36px; line-height: 36px; text-indent: -999px; overflow: hidden; background: url('../images/sprite.png') no-repeat -51px 0; border:none; margin:3px auto; } .layout.product_details > .specs .button > a:hover{background-position:-88px 0;} /* Basket Varient */ .useBasketIcon .layout.product_details > .specs .button > a{background-position: -230px -174px;} .useBasketIcon .layout.product_details > .specs .button > a:hover{background-position: -230px -137px;} /* AWS 3.4.2 - Results Options ----------------------------------------------------------*/ .layout.results_options > .multicols + .multicols{margin-top:20px;} .layout.results_options.bg{background:#ebe9e8;padding:10px;} /* Summary */ .layout.results_options .summary{ background: #fdf7f7; padding:6px 20px 8px; display: table; width: 100%; } .layout.results_options .summary > div{ display: table-cell; vertical-align: middle; float: none; width: 75%; } .layout.results_options .summary > div + div{text-align: right;width:25%;} .layout.results_options .summary > div > p{margin:0;font-size:16px;} /* Layout for Three options */ .layout.results_options.three + *{margin-top:15px;} .layout.results_options.three .mod-results_options > ul > li{float:none;} .layout.results_options.three .mod-results_options > ul > li + li{margin:5px 0 0;} .layout.results_options.three .mod-results_options > ul > .label{padding: 0;} .layout.results_options.three .mod-results_options > ul > .select{width:100%;} /* AWS 3.4.3 - Inception (mini modules/components/callouts w/i sidebar on myHollister) --*/ .layout.inception + *{margin-top:30px;} .layout.inception > h3{ background: #ddd; padding:7px 15px; color: #6e6259; font-size: 14px; line-height: 26px; margin:0; } .layout.inception > h3 > .help{position:relative;top:1px;margin-left:2px;} .layout.inception > .content{padding: 16px 20px 20px;background: #ebe9e8;} /* Forms & Tables */ .layout.inception > .content label{color: #878785;font-weight: normal;margin-bottom: 9px;} .layout.inception > .content input + .btn{margin-top:10px;} .layout.inception > .content table td{ background: none; padding:7px 0; text-align: left; width:50%; vertical-align: bottom; } .layout.inception > .content table tr.total > td{ border-top: 1px solid #ccc; } .layout.inception > .content table tr:first-child > td{padding-top:0;} .layout.inception > .content table td + td, .layout.inception > .content table th + td{border:none;text-align: right;} /* Cols & Buttons */ .layout.inception > .content > * + .cols{ margin-top: 20px; padding-top:20px; border-top: 1px solid #ccc; } .layout.inception > .content > .cols{display: block;} .layout.inception > .content > .cols > div + div{margin-top:20px;} .layout.inception > .content .btn{display: block;width:100%;} .layout.inception > .content > .cols > div > .btn + .btn{margin-top:10px;} /* Loading */ .layout.inception > .content > .cols > div.loading{position: relative;} .layout.inception > .content > .cols > div.loading:after{ content: ''; background: url('../images/ajax-loader2.gif') no-repeat center center; position: absolute; left:0;right:0;bottom:0;top:0; } /* AWS 3.4.4 - myHollister Quick Order --------------------------------------------------*/ .layout.myh_quick_order{ margin: 30px 0; padding: 20px; background: #fdf7f7; } .layout.myh_quick_order > h3{margin:0;} .layout.myh_quick_order > .info{ background: #fff; padding: 10px; text-align: center; margin-top:15px; } .layout.myh_quick_order > .info > p{margin:0;} /* Fields */ .layout.myh_quick_order fieldset{margin:20px 0 5px;} .layout.myh_quick_order fieldset ul{width:100%;} .layout.myh_quick_order fieldset ul li{width: 45%;margin:0 0 11px;} .layout.myh_quick_order fieldset ul li.new_line{margin-left:0;} .layout.myh_quick_order fieldset ul li + li{margin-left:10%;} .layout.myh_quick_order fieldset .multicols.cols2 .col1{width: 73%;} .layout.myh_quick_order fieldset .multicols.cols2 .col2{width: 23%;} /* Buttons & Links */ .layout.myh_quick_order > .multicols.cols2 .col2 > a{ float:right; position: relative; top:8px; } /* AWS 3.4.5 - Account Login/Creation ---------------------------------------------------*/ .layout.login_creation > hr{ width:49%; margin:20px 0 30px; background: none; border-bottom:1px dotted #666; text-align: left; } .layout.login_creation .mod-errors, .layout.login_creation fieldset ul, .layout.login_creation fieldset ul li{width:100%;margin-right:0;} /* AWS 3.4.6 - SS Step 2 ----------------------------------------------------------------*/ .layout.ss-step2 hr{margin:20px 0;} .layout.ss-step2 .mod-pagination{margin-top:0;} /* Left Column (categories, search etc) */ .layout.ss-step2 .column-left{width:238px;float:left;} /* Form Updates */ .layout.ss-step2 .column-left label{color:#6e6259;} .layout.ss-step2 .column-left fieldset{margin:0;} .layout.ss-step2 .column-left fieldset > ul, .layout.ss-step2 .column-left fieldset > ul > li{width:100%;margin:0;} /* Right Column (products, filter selections, etc) */ .layout.ss-step2 .column-right{width:646px;float:right;} /* Site Search Overrides */ .layout.ss-step2 .mod-site_search > .field{margin-right:34px;} .layout.ss-step2 .mod-site_search > .field > input{ padding:0 5px; border-bottom: 1px solid #cfcac9; border-radius: 5px 0 0 5px; height: 34px; line-height: 34px; } .layout.ss-step2 .mod-site_search > button{width:34px;height:34px;border-radius:0 5px 5px 0;} /* Listing: Filter */ .layout.ss-step2 .mod-listing.filter > ul li, .layout.ss-step2 .mod-listing.filter > ul li a{ color: #6e6259; font-size: 14px; border:none; } .layout.ss-step2 .mod-listing.filter > ul li a.active, .layout.ss-step2 .mod-listing.filter > ul li a:hover{color:#bf1e39;} .layout.ss-step2 .mod-listing.filter > ul li a.active:after{display:none;} .layout.ss-step2 .mod-listing.filter > ul > li + li{margin-top:14px;} .layout.ss-step2 .mod-listing.filter > ul > li > ul{margin: 11px 0 0 7px;} .layout.ss-step2 .mod-listing.filter > ul > li > ul > li{ padding: 0 0 0 12px; background: url('../images/bullet-red.png') no-repeat 0 6px; } .layout.ss-step2 .mod-listing.filter > ul > li > ul > li + li{margin-top:11px;} /* Search Summary */ .layout.ss-step2 .mod-search_summary{background: #e0dddc;padding:10px;margin-top:0;} .layout.ss-step2 .mod-search_summary:after{display:none;} .layout.ss-step2 .mod-search_summary .summary{width:100%;text-align:center;} /* Search Listing */ .layout.ss-step2 .mod-grid.search_listing > .content{margin-left:-12px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item{ height: auto; width:207px; margin:0 0 50px 12px; padding-bottom: 35px; position: relative; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .content{ padding:10px 0 0;margin-bottom:10px; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .content h4{ font-size: 12px; color: #6e6259; line-height: 16px; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .content ul{padding:0} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .content ul > li{ font-size:12px; line-height:16px; padding-left: 10px; background: url('../images/bullet.png') no-repeat 0 4px; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .content ul > li + li{margin-top:1px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .footer{ position: absolute; left: 0; width: 100%; bottom: 0; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .footer .btn{display:block;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .footer .btn.outline{padding:9px 10px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .footer .btn.outline:hover .close{ background-position: -219px -109px; } /* Header */ .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header{display:table;min-height:80px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header > div{ display:table-cell;vertical-align:middle; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header > div + div{padding-left:10px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header h3{margin:0;font-size:18px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header p{margin:-3px 0 0;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header p > span{ display: inline-block; font-size:36px; margin-right: 1px; position: relative; top:7px; } /* Image & Link */ .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header .image{ width:80px; border:1px solid #ddd; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header .image > a{ position: relative;display:block;border:none; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header .image > a:after{ content: ''; display: block; width: 17px; height: 18px; background: url('../images/sprite.png') no-repeat -210px -119px; position: absolute; bottom:0; right:0; opacity: .5; } .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header .image > a:hover:after{background-position: -210px -138px;} .layout.ss-step2 .mod-grid.search_listing > .content > .item > .header .image > a > img{display:block;width:100%;} /* AWS 3.4.7 - SS Step 3 ----------------------------------------------------------------*/ .layout.ss-step3 .column-left{width:670px;float:left;} .layout.ss-step3 .column-right{width:220px;float:right;} /* Cart Preview (eventually this should be just the 'mod-cart_preview' styles) */ .layout.ss-step3 .mod-cart_preview{margin:0;} .layout.ss-step3 .mod-cart_preview > ul{border:none;padding:0;} .layout.ss-step3 .mod-cart_preview > ul > li{padding:15px;} .layout.ss-step3 .mod-cart_preview > ul > li > .image{width:80px;float:left;} .layout.ss-step3 .mod-cart_preview > ul > li > .image > img{display:block;width:100%;} .layout.ss-step3 .mod-cart_preview > ul > li > .content{padding-left:100px;} .layout.ss-step3 .mod-cart_preview > ul > li > .content > h6{ font-size: 12px; color: #6e6259; text-transform: none; } .layout.ss-step3 .mod-cart_preview > ul > li > .content > h6 > span > span{ display: inline-block; font-size: 28px; margin-right: 1px; position: relative; top: 5px; } .layout.ss-step3 .mod-cart_preview > ul > li > .content > ul{padding: 0;} .layout.ss-step3 .mod-cart_preview > ul > li > .content > ul > li{ font-size: 12px; line-height: 16px; padding-left: 10px; background: url(../images/bullet.png) no-repeat 0 4px; } .layout.ss-step3 .mod-cart_preview > ul > li > .content > ul > li + li{margin-top:4px;} /* AWS 3.4.8 - Article Listing Carousel -------------------------------------------------*/ .layout.article_listing_carousel{background:#ebe9e8;padding:20px;} /* Filters */ .layout.article_listing_carousel .results_options{ position: relative; padding:30px 100px 0; z-index: 100; } /* jQuery Cycle */ .layout.article_listing_carousel .cycle-article{padding:0 100px;position: relative;z-index:10;} .layout.article_listing_carousel .cycle-article .slide-container{padding-bottom: 15px;} /* account for margin */ .layout.article_listing_carousel .cycle-article .slide{width:100%;} .layout.article_listing_carousel .mod-multicols.article_listing .col{border: 0;} /* Controls (i.e. next/prev) */ .layout.article_listing_carousel .cycle-article .control{ position: absolute; top:50%; left:32px; margin-top: -65px; } .layout.article_listing_carousel .cycle-article .control.sliderAlt_next{left:auto;right:32px;} .layout.article_listing_carousel .cycle-article .control.disabled{display: none;} /* Pager */ .layout.article_listing_carousel .cycle-article .cycle-pager{margin:15px 0 0;padding:0;} .layout.article_listing_carousel .cycle-article .cart_number{background-position: -211px -157px;margin:0 3px;} .layout.article_listing_carousel .cycle-article .cart_number.active{background-position: -14px -25px;} /* AWS 3.4.9 - Hero ---------------------------------------------------------------------*/ .layout-hero{height: 650px;position:relative;} .layout-hero > .inner_container{height: 650px;} /* Multicolumn Overrides */ .layout-hero .mod-multicols{ display: table; width: 100%; height: 100%; } .layout-hero .mod-multicols > .multicols{ display: table-cell; vertical-align: middle; } .layout-hero .mod-multicols > .multicols > .col{padding:45px 30px;float: none;} .layout-hero.content-right .mod-multicols > .multicols > .col{margin:0 0 0 auto;} .layout-hero.content-center .mod-multicols > .multicols > .col{margin:0 auto;} /* Utilities */ /* Flexible */ .layout-hero.flexible, .layout-hero.flexible > .inner_container{height:auto;} .layout-hero.flexible .mod-multicols > .multicols > .col{padding:75px 30px 75px;} /* Variations */ /* Intro */ .layout-hero.intro:before{ content: ''; position: absolute; left:0;right:0;top:0;bottom:0; background: rgba(0,0,0,.4); } .layout-hero.intro .content > *{color:#fff;} .layout-hero.intro .content > h2{font-size:36px;margin-bottom:20px;} .layout-hero.intro .content > p{font-size:18px;line-height:1.3;margin-bottom:30px;} .layout-hero.intro .content > a:not(.btn){font-size:16px;border:none;} .layout-hero.intro .content > a:not(.btn):hover, .layout-hero.intro .content > a:not(.btn):focus{border-bottom: 1px solid #fff;} .layout-hero.intro .content > a:not(.btn) > .icon{margin-left: 10px;} .layout-hero.intro .content > a:not(.btn) + a{margin-left:20px;} /* AWS 3.4.10 - Site Portals ------------------------------------------------------------*/ .layout-site_portals{margin:20px 0;} .layout-site_portals > h3{margin-bottom:20px;} .layout-site_portals .multicols{display: flex;} .layout-site_portals .multicols + .multicols{margin-top:20px;} .layout-site_portals .callout.site_portal {display: flex;height: 100%; min-height: 250px;overflow: visible;} .layout-site_portals .callout.site_portal > .content{width: 52%;height: auto;display: flex;align-items: center;border-radius: 0 10px 10px 0;} .layout-site_portals .callout.site_portal > .content:after{display:none;} .layout-site_portals .callout.site_portal > .content h2{font-size: 26px;line-height:1.2;} .layout-site_portals .callout.site_portal > .content p{font-size: 14px;margin-top:15px;} .layout-site_portals .callout.site_portal > .content .btn{ width:auto; font-size:inherit; position:static; margin-top: 15px; } .layout-site_portals .callout.site_portal > .image{width:48%;height: auto;margin:0; border-radius: 10px 0 0 10px;} .layout-site_portals .callout.site_portal > .image img{height: 100%;margin:0;transform: translateX(-50%);} .layout-site_portals .multicols.single-col .callout.site_portal{min-height: 0;background: #bf1e39;} .layout-site_portals .multicols.single-col .callout.site_portal > .content{padding: 15px 20px 10px;width: 65%;} .layout-site_portals .multicols.single-col .callout.site_portal > .content h2{font-size: 20px;line-height:1.2;} .layout-site_portals .multicols.single-col .callout.site_portal > .image{border-radius: 10px;box-shadow: 0 5px 15px -5px #444;position: relative;z-index: 1;width: 35%;} /* AWS 3.4.12 - Testimonials Carousel ---------------------------------------------------*/ .layout-testimonials_carousel{margin:40px 0 30px;} .layout-testimonials_carousel .cycle-testimonials{position:relative;} .layout-testimonials_carousel .cycle-testimonials .slide-container{background: #bf1e39;} .layout-testimonials_carousel .cycle-testimonials .slide{ bottom: 0; width: 100%; /* Keep content vertically centered */ display: flex !important; align-items: center; } /* Blockquote Overrides */ .layout-testimonials_carousel blockquote{margin:0;padding:30px 80px;min-width:100%;} /* Controls (i.e. next/prev) */ .layout-testimonials_carousel .cycle-testimonials .control{ position: absolute; top:50%; left:10px; margin-top: -65px; z-index: 100; } .layout-testimonials_carousel .cycle-testimonials .control.sliderAlt_next{left:auto;right:10px;} .layout-testimonials_carousel .cycle-testimonials .control.sliderAlt_prev:hover{background-position: -429px 0;} .layout-testimonials_carousel .cycle-testimonials .control.sliderAlt_next:hover{background-position: -429px -102px;} .layout-testimonials_carousel .cycle-testimonials .control.disabled{display: none;} /* Pager */ .layout-testimonials_carousel .cycle-testimonials .cycle-pager{display: block;text-align:center;margin:5px 0 0;} .layout-testimonials_carousel .cycle-testimonials .cycle-pager li{ width:8px; height:8px; border-radius:4px; background: #666; display: inline-block; margin: 0 2px; } .layout-testimonials_carousel .cycle-testimonials .cycle-pager .active{background: #bf1e39;} /* AWS 3.4.13 - Sample Order History ----------------------------------------------------*/ .layout-sample_order_history{margin-top: 30px;} .layout-sample_order_history h6{color:#333;font-weight:bold;text-transform:none;} /* Expandable Overrides */ .layout-sample_order_history .mod-expandables{margin-top:5px;} .layout-sample_order_history .mod-expandables > ul > li{padding:15px 0 0;position:relative;border-color:#ccc;} .layout-sample_order_history .mod-expandables > ul > li:nth-child(even){background:#ebe9e8;} .layout-sample_order_history .mod-expandables .multicols p{font-size:18px;line-height:1.5;word-break:break-word;} .layout-sample_order_history .mod-expandables .trigger_expandable{ display: inline-block; padding: 0; font-size: 12px; width:32%; text-align: center; top:-10px; margin-bottom: -10px; } .layout-sample_order_history .mod-expandables .trigger_expandable > .toggle:last-child, .layout-sample_order_history .mod-expandables .open .trigger_expandable > .toggle:nth-child(2){display:none;} .layout-sample_order_history .mod-expandables .open .trigger_expandable > .toggle:last-child{display:inherit;} .layout-sample_order_history .mod-expandables .expandable_state{ position: relative; margin:0 5px 0 0; top:3px; left: 3px; -moz-transform: scale(.7); -webkit-transform: scale(.7); -o-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); } .layout-sample_order_history .mod-expandables .open .expandable_state{top:-2px;} /* Sample Cart Listing Overrides */ .layout-sample_order_history .mod-listing.sample_cart{margin:0;} .layout-sample_order_history .mod-listing.sample_cart > ul > li{background:#fff;} /* AWS 3.4.14 - Consultant --------------------------------------------------------------*/ .layout-consultant{margin:30px 0;} .layout-consultant .multicols .col1{width:31%;} .layout-consultant .multicols .col2{width:66%;} .layout-consultant .multicols .col1 h2 + h3{margin: 0 0 20px;} .layout-consultant .multicols .col1 img{width:auto;max-width:100%;} .layout-consultant .multicols .col2 fieldset:first-child{margin-top:0;} /*------------------------------------------------------------------------------------------------- AWS 4.0 - Buttons & Icons /*-----------------------------------------------------------------------------------------------*/ /* AWS 4.1 - Buttons ------------------------------------------------------------------------*/ .btn_container > .btn:link{display:block;} .btn_container.inline > .btn:link{display:inline-block;} * + .btn_container{ margin-top:15px; width: 100%; } .btn_container .btn + .btn { margin-top: 15px; } .btn_container + .btn{margin-top:50px;} /* Button Container Alt */ .btn_container.alt{ border: 2px dotted #ddd; padding:20px; text-align:center; flex-flow: column; } .btn_container.alt .btn + .btn { margin-block-start: 10px; } .btn_container.alt > .btn{display:inline-block;margin:0 10px;width:310px;} .btn, .btn:link, .btn:visited{ display:inline-block; font-size:16px; line-height: 16px; color:#fff; border-radius: 5px; background: #bf1e39; padding:10px 15px; text-align: center; border:none; min-width: 86px; } .btn:hover{background: #878785;} p > .btn{margin:0 20px 0 0;} .btn.isIconOnly{ min-width: inherit; padding: 10px; } /* Misc Icons */ .btn > .download, .btn > .print{margin-right:7px;position:relative;top:1px;} .btn .plus, .btn .close, .btn > .add_person{margin-right:5px;} .btn .minus.large{top:-4px;position:relative;} .btn .plus.large{margin: 0 10px -3px 0;} /* Link Arrows */ .btn > .arrow-lg-left, .btn > .link_arrow_prev, .btn > .link_arrow_next{display:inline-block;position:relative;top:1px;margin:0 0 0 8px;} .btn > .arrow-lg-left{margin:0 5px 0 0;} .btn > .link_arrow_prev{margin:0 8px 0 0;} .btn > .arrow-md-left{margin-right:5px;} .btn > .arrow-md-right{margin-left:5px;} /* Hover States */ .btn.outline:hover > .arrow-md-left{background-position:-212px -64px;} /* Alternate Types of Buttons */ .btn.block{display:block;} /* Large */ .btn.large{padding: 15px 30px;font-size: 18px;} /* Icon Positions */ .btn.large > .download, .btn.large > .print{top:0;} /* White */ .btn.white{background:#fff;color:#bf1e39;} .btn.white:hover{background:#878785;color:#fff;} /* Inverse */ .btn.inverse{background: #878785;} .btn.inverse:hover{background: #bf1e39;} /* Disabled */ .btn.disabled{ background: #bbb; color: #fff; cursor:default; } .btn.disabled:hover{background: #bbb;color: #fff;} /* Outline */ .btn.outline{ background: none; color: #bf1e39; border:1px solid #bf1e39; padding:9px 14px; } .btn.outline:hover{color:#fff;background:#bf1e39;} .btn.outline.large{padding: 14px 30px;} /* Colors */ .btn.outline.gray{border-color: #fff;background: #998f8c;color:#fff;} .btn.outline.gray:hover{background: #fff;color:#998f8c;} /* Buttons with Arrows and no Bg */ .btn2:link, .btn2:visited{ display: inline-block; border:none; font-size: 14px; margin:15px 0; color:#878785; } .btn2 > .icon{margin:0 0 0 5px;position:relative;top:1px;} .btn2:hover{color:#bf1e39;} /* Bold */ .btn2.bold > .arrow-link{top:0;} /* Select Button */ .select_btn:link, .select_btn:visited{ display: block; border:1px solid #d9d5d4; border-radius: 5px; background: #fff; color:#998f8c; width: 100%; position: relative; padding:7px 48px 7px 10px; font-size:14px; line-height: 16px; height: 31px; } .select_btn.disabled.not-editable:link, .select_btn.disabled.not-editable:visited{ background: #fff; border: none; padding: 5px 0; cursor: default; } .select_btn.not-editable{background:#d9d5d4;cursor:default;} li.error .select_btn, .select_btn.error{background:#fdf7f7;border-color:#de8b94;color:#878785;} /* Arrow Icon and border */ .select_btn > .icon{position: absolute;right:12px;top:50%;margin-top:-3px;} .select_btn:before{ content: ''; width: 1px; position: absolute; top:0;bottom:0;right:38px; background: #d9d5d4; } .select_btn.disabled > .icon, .select_btn.disabled:before{display:none;} /* Video Overlay */ .hasVideoOverlay{ display:block; border: none !important; position: relative; } .hasVideoOverlay:before{ content: ''; position: absolute; display: block; width: 80px; height: 80px; border-radius: 40px; background: #fff; left: 50%; top:50%; margin:-40px 0 0 -40px; opacity: .8; } .hasVideoOverlay:after{ content: ''; position: absolute; left:50%; top:50%; margin:-12px 0 0 -8px; width: 0; height: 0; border-style: solid; border-width: 12.5px 0 12.5px 21.7px; border-color: transparent transparent transparent #bf1e39; opacity: .8; } .hasVideoOverlay:hover:before, .hasVideoOverlay:hover:after{opacity: 1;} /* PDF Overlay */ .hasPDFOverlay{ display:block; border: none !important; position: relative; } .hasPDFOverlay:before{ content: ''; position: absolute; display: block; width: 80px; height: 80px; border-radius: 40px; background: #fff; left: 50%; top:50%; margin:-40px 0 0 -40px; opacity: .8s; } .hasPDFOverlay:after{ content: ''; position: absolute; left:50%; top:50%; display: block; width: 40px; height: 40px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzYyLjY2NyAzNjIuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjIuNjY3IDM2Mi42Njc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8cG9seWdvbiBmaWxsPSIjYmYxZTM5IiBwb2ludHM9IjMzMC42NjcsMTI4IDI0NS4zMzMsMTI4IDI0NS4zMzMsMCAxMTcuMzMzLDAgMTE3LjMzMywxMjggMzIsMTI4IDE4MS4zMzMsMjc3LjMzMyIvPg0KCTxyZWN0IGZpbGw9IiNiZjFlMzkiIHg9IjMyIiB5PSIzMjAiIHdpZHRoPSIyOTguNjY3IiBoZWlnaHQ9IjQyLjY2NyIvPg0KPC9zdmc+DQo="); background-repeat: no-repeat; background-size: contain; transform: translate(-50%, -50%); opacity: .8s; } .hasPDFOverlay:hover:before, .hasPDFOverlay:hover:after{opacity: 1;} /* download Overlay */ .downloadOverlay{ display:block; border: none !important; position: relative; } .downloadOverlay a:before{ content: ''; position: absolute; display: block; width: 80px; height: 80px; border-radius: 40px; background: #fff; left: 50%; top:50%; margin:-40px 0 0 -40px; opacity: 0; transition: .5s; } .downloadOverlay a:after{ content: ''; position: absolute; left:50%; top:50%; display: block; width: 40px; height: 40px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzYyLjY2NyAzNjIuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjIuNjY3IDM2Mi42Njc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8cG9seWdvbiBmaWxsPSIjYmYxZTM5IiBwb2ludHM9IjMzMC42NjcsMTI4IDI0NS4zMzMsMTI4IDI0NS4zMzMsMCAxMTcuMzMzLDAgMTE3LjMzMywxMjggMzIsMTI4IDE4MS4zMzMsMjc3LjMzMyIvPg0KCTxyZWN0IGZpbGw9IiNiZjFlMzkiIHg9IjMyIiB5PSIzMjAiIHdpZHRoPSIyOTguNjY3IiBoZWlnaHQ9IjQyLjY2NyIvPg0KPC9zdmc+DQo="); background-repeat: no-repeat; background-size: contain; transform: translate(-50%, -50%); transition: .5s; opacity: 0; } .downloadOverlay a:hover:before, .downloadOverlay a:hover:after{opacity: 1;} /* Specific Buttons */ /* Back to Top */ .btn-back_to_top{ width:50px; height: 50px; background: #bf1e39; border:none; border-radius: 0; } .btn-back_to_top:focus, .btn-back_to_top:hover{background: #222;border:none;} /* AWS 4.2 - Icons --------------------------------------------------------------------------*/ .icon{display:inline-block;overflow:hidden;background:url('../images/sprite.png') no-repeat;text-indent:-999px;} a.icon{border:none;} .icon.icon_container{ /* icon-ception! brahhhhmmm */ position: relative; width: 36px; height: 36px; background-position: -51px 0; text-indent: 0; } /* Arrows */ .icon.arrow-link{background-position:-76px -43px;width:6px;height:9px;margin:0 0 0 5px;position:relative;top:-1px;} .icon.arrow-link.gray{background-position:-20px -81px;} .icon.arrow-top{background-position: -248px -80px;width:19px;height:24px;} /* Large */ .icon.arrow-lg-up{background-position: 0 -42px;width:12px;height:5px;} .icon.arrow-lg-right{background-position: -18px -42px;width:5px;height:12px;} .icon.arrow-lg-down{background-position: 0 -48px;width:12px;height:5px;} .icon.arrow-lg-left{background-position: -12px -42px;width:5px;height:12px;} /* White */ .icon.arrow-lg-up.white{background-position: -24px -42px;} .icon.arrow-lg-right.white{background-position: -43px -42px;} .icon.arrow-lg-down.white{background-position: -24px -48px;} .icon.arrow-lg-left.white{background-position: -37px -42px;} /* Red */ .icon.arrow-lg-up.red{background-position: -49px -42px;} .icon.arrow-lg-right.red{background-position: -67px -42px;} .icon.arrow-lg-down.red{background-position: -49px -48px;} .icon.arrow-lg-left.red{background-position: -61px -42px;} /* Medium */ .icon.arrow-md-up{background-position:-218px -52px;width:9px;height:6px;} .icon.arrow-md-right{background-position:-76px -43px;width:6px;height:9px;} .icon.arrow-md-down{background-position:-218px -58px;width:9px;height:6px;} .icon.arrow-md-left{background-position:-210px -53px;width:6px;height:9px;} /* White */ .icon.arrow-md-up.white{background-position:-213px -74px;} .icon.arrow-md-right.white{background-position: -218px -64px;} .icon.arrow-md-down.white{background-position:-213px -80px;} .icon.arrow-md-left.white{background-position: -212px -64px;} /* Gray */ .icon.arrow-md-up.gray{background-position:-209px -96px;} .icon.arrow-md-right.gray{background-position: -21px -81px;} .icon.arrow-md-down.gray{background-position:-209px -102px;} .icon.arrow-md-left.gray{background-position: -211px -86px;} /* Small */ .icon.arrow-sm-up{background-position: -29px -109px;width:6px;height:4px;} .icon.arrow-sm-right{background-position: -26px -102px;width:4px;height:6px;} .icon.arrow-sm-down{background-position: -21px -109px;width:6px;height:4px;} .icon.arrow-sm-left{background-position: -20px -102px;width:4px;height:6px;} /* White */ .icon.arrow-sm-up.white{background-position: -39px -102px;} .icon.arrow-sm-right.white{background-position: -42px -107px;} .icon.arrow-sm-down.white{background-position: -32px -102px;} .icon.arrow-sm-left.white{background-position: -37px -107px;} /* Slider */ .icon.slider_prev, .icon.slider_prev.disabled:hover{background-position:0 -123px;width:31px;height:31px;border:none;} .icon.slider_prev:hover{background-position:-64px -123px;} .icon.slider_next, .icon.slider_next.disabled:hover{background-position:-32px -123px;width:31px;height:31px;border:none;} .icon.slider_next:hover{background-position:-96px -123px;} /* Alt */ .icon.sliderAlt_prev{background-position: -394px 0;width:35px;height:100px;} .icon.sliderAlt_prev:hover{background-position: -359px 0;} .icon.sliderAlt_next{background-position: -359px -102px;width:35px;height:100px;} .icon.sliderAlt_next:hover{background-position: -394px -102px;} /* Link Arrows */ .icon.link_arrow_prev{background-position: -198px -11px;width:10px;height:12px;} .icon.link_arrow_next{background-position: -198px -24px;width:10px;height:12px;} /* Close Icons */ .icon.close{background-position:-27px -80px;width:11px;height:11px;} .icon.close.orange{background-position:-39px -80px;} /* Small */ .icon.close.small{background-position: -20px -92px;width:6px;height:8px;} .icon.close.small.red{background-position: -27px -92px;} /* Extra Small */ .icon.close.xs{background-position:-219px -109px;width:9px;height:9px;} .icon.close.xs.red{background-position:-219px -98px;} /* Event Icons */ .icon.calendar{background-position: -134px -157px;width:13px;height:15px;} .icon.clock{background-position: -148px -157px;width:13px;height:13px;} .icon.location{background-position: -162px -157px;width:9px;height:13px;} .icon.tag{background-position: -174px -176px;width:16px;height:13px;} .icon.tag2{background-position: -331px -195px;width:19px;height:15px;} /* Small */ .icon.calendar{background-position: -134px -176px;width:11px;height:13px;} .icon.clock{background-position: -146px -178px;width:10px;height:11px;} .icon.location{background-position: -157px -178px;width:7px;height:11px;} .icon.location.highlight{background-position: -165px -178px;} /* File Types */ .icon.video{background-position: -52px -78px;width:14px;height:11px;} .icon.folder{background-position: -69px -92px;width:12px;height:11px;} .icon.write{background-position: -68px -78px;} /* Small */ .icon.video.small{background-position: -34px -92px;width:11px;height:8px;} .icon.folder.small{background-position: -46px -92px;width:10px;height:8px;} .icon.write.small{background-position: -47px -102px;width:11px;height:11px;} /* Social */ .icon.connect{background-position: -18px -196px;width:15px;height:14px;} .icon.twitter{background-position: -35px -194px;width:16px;height:16px;} .icon.twitter.highlight{background-position: -52px -194px;} .icon.facebook{background-position: -69px -194px;width:16px;height:16px;} .icon.facebook.highlight{background-position: -86px -194px;} .icon.linkedin{background-position: -103px -194px;width:16px;height:16px;} .icon.linkedin.highlight{background-position: -120px -194px;} .icon.instagram{background-position: -137px -194px;width:16px;height:16px;} .icon.instagram.highlight{background-position: -154px -194px;} .icon.share{background-position: -270px -136px;width:27px;height:21px;} .icon.star{background-position: -270px -181px;width:29px;height:28px;} /* Alt */ .icon.facebook2{background-position: -298px 0;width:29px;height:29px;} .icon.facebook2:focus, .icon.facebook2:hover{background-position: -328px 0;} .icon.linkedin2{background-position: -298px -30px;width:29px;height:29px;} .icon.linkedin2:focus, .icon.linkedin2:hover{background-position: -328px -30px;} .icon.mail2{background-position: -298px -60px;width:29px;height:29px;} .icon.mail2:focus, .icon.mail2:hover{background-position: -328px -60px;} .icon.twitter2{background-position: -298px -90px;width:29px;height:29px;} .icon.twitter2:focus, .icon.twitter2:hover{background-position: -328px -90px;} /* Cart Icons */ .icon.add_cart{background-position: 0 -156px;width:36px;height:34px;} .icon.add_cart.gray{background-position: -37px -156px;} .icon.cart{background-position: -21px -54px;width:26px;height:20px;} .icon.cart.white{background-position: -201px -190px;} .icon.cart.xsmall{background-position: 0 -101px;width:19px;height:14px;} .icon.cart.large{background-position: 0 0;width:33px;height:24px;} .icon.cart_number{ background-position:-14px -25px; width:17px; height:16px; text-indent:-1px; color:#fff; line-height: 16px; text-align: center; font-size:10px; font-family: Arial; } .icon.cart_number.white{background-position: -211px -157px;} .icon.cart_number.gray{background-position: -211px -174px;} /* Basket Varient */ .useBasketIcon .icon.add_cart{background-position: -260px 0;} .useBasketIcon .icon.add_cart.gray{background-position: -260px -35px;} .useBasketIcon .icon.cart{background-position: -269px -70px;width:24px;height:19px;} .useBasketIcon .icon.cart.white{background-position: -269px -90px;width:24px;height:19px;} .useBasketIcon .icon.cart.xsmall{background-position: -229px -80px;width:16px;height:13px;} .useBasketIcon .icon.cart.large{background-position: -232px -111px;width:31px;height:24px;} /* Misc Icons */ .icon.circle_delete{background-position: -192px -156px;width:16px;height:16px;} .icon.circle_delete.gray{background-position: -192px -173px;} .icon.globe{background-position:-50px -56px;width:18px;height:17px;} .icon.menu{background-position: -125px 0;width:34px;height:20px;} .icon.menu.white{background-position: -160px 0;} .icon.pin{background-position: -70px -56px;width:12px;height:17px;} .icon.pin.large{background-position: -34px 0;width:16px;height:26px;} .icon.search{background-position: 0 -25px;width:12px;height:12px;} .icon.plus{background-position: -32px -26px;width:15px;height:15px;} .icon.plus.small{background-position: -217px -86px;width:10px;height:10px;} .icon.plus.large{background-position: -15px -212px;width:17px;height:17px;} .icon.minus{background-position: -48px -37px;width:15px;height:4px;} .icon.minus.large{background-position: -34px -219px;width:17px;height:3px;} .icon.lock{background-position: -58px -92px;width:10px;height:13px;} .icon.warning{background-position: -66px -105px;width:18px;height:16px;} .icon.download{background-position: -155px -119px;width:13px;height:12px;} .icon.print{background-position: -187px -198px;width:13px;height:12px;} .icon.zoom{background-position: -210px -119px;width:17px;height:18px;} .icon.zoom.red{background-position: -210px -138px;} .icon.help{background-position: -228px 0;width:13px;height:12px;} .icon.checkmark{background-position: -229px -39px;width:12px;height:10px;} .icon.pdf{background-position: 0 -212px;width:14px;height:19px;} /* My Hollister Icons */ .icon.home{background-position:-117px -176px;width:16px;height:12px;} .icon.home.white{background-position:-117px -159px;} .icon.logout{background-position: -104px -159px;width:12px;height:10px;} .icon.logout.red{background-position: -104px -176px;} .icon.switchClient{background-position: -90px -159px;width:12px;height:12px;} .icon.switchClient.red{background-position: -90px -176px;} .icon.fax{background-position: -75px -159px;width:14px;height:14px;} .icon.phone{background-position: -75px -176px;width:11px;height:11px;} .icon.datepicker{background-position: 0 -191px;width:17px;height:19px;} .icon.edit{background-position: -171px -199px;width:14px;height:12px;} /* Secure Start Icons */ .icon.person{background-position: -210px 0;width:15px;height:16px;} .icon.person.white{background-position: -210px -17px;} .icon.add_person{background-position: -208px -35px;width:19px;height:14px;} .icon.secure_start{background-position: -281px -111px;width:17px;height:23px;} /* AWS 4.3 - Badges -------------------------------------------------------------------------*/ .badge{ width: 90px; height: 90px; border-radius: 45px; font-size: 14px; line-height: 1.1; display: table; background: rgba(191,30,57,.9); position: absolute; color: #fff; top:0;right:0; } .badge > span{display: table-cell;vertical-align:middle;text-align:center;padding:5px;} .badge-flag { padding: 0; display: inline-block; vertical-align: middle; position: relative; line-height: 20px; overflow: hidden; top:-1px; } .badge-flag:before, .badge-flag:after { transform-origin: top right; transform: skewX(-45deg); position: absolute; background: #be1e38; content: ''; left: -45px; height: 54%; z-index: 1; right: 0; top: 0; } .badge-flag:after { transform-origin: bottom right; transform: skewX(45deg); top: auto; bottom: 0; } .badge-flag > span { color:#fff; position:relative; z-index:2; padding:8px 20px 5px 8px; font-weight:bold; } /*------------------------------------------------------------------------------------------------- AWS 5.0 - Template Specific (i.e. override display of any design element on a specific template) /*-----------------------------------------------------------------------------------------------*/ #content{border-top:12px solid #ebe9e8;} .myHollister #content, .ss #content{border-top:none;} /* Utility */ /* Background Colors */ .section.bg-offwhite{background: #f4f4f4;} /* AWS 5.1 - Simple -------------------------------------------------------------------------*/ #template-simple #content{padding:19px 0 40px;position:relative;} #template-simple #related_content{padding:0 0 40px;} /* myHollister Adjustments */ .myHollister #template-simple{padding-bottom:40px;} .myHollister #template-simple #related_content{padding:0;} /* Grid: Site Section */ .myHollister .site_section{margin-bottom:30px;} .myHollister .site_section > .row + .row{margin:15px 0 0;} /* Section Widths/Paddings */ #template-simple .section + .section{margin:120px 0 0;} #template-simple #sidebar + .section{margin:0;} #template-simple .section > .inner_container > .content{width:680px;padding:0 0 0 30px;} #template-simple #related_content > .section + .section{padding:48px 0 15px;margin:0;} /* Utility / Specific Clases */ /* Breadcrumbs */ #template-simple #content > .section.breadcrumbs{padding:0;} /* Extended */ #template-simple .section.extended > .inner_container > .content{width:942px;} /* Full */ #template-simple .section.full > .inner_container{width:100%;} #template-simple .section.full > .inner_container > .content{width:960px;padding:0;margin:0 auto;} #template-simple .section.full.carousel_container:first-child > .inner_container{padding-top:50px;} /* Gray */ #template-simple .section.gray{background: #f5f3ef;} #template-simple .section.gray > .inner_container > .content{ background: url('../images/hr.jpg') no-repeat left top; padding:43px 0 60px; margin-bottom: -40px; } /* Dark */ #template-simple .section.dark_gray{background:#998f8c;} #template-simple .section.dark_gray > .inner_container > .content > h2{color:#fff;margin:0 0 3px;} #template-simple .section.dark_gray > .inner_container > .content > p{color:#fff;} #template-simple .section.dark_gray > .inner_container > .content > p > a{color:#fff;border:none;} #template-simple .section.dark_gray > .inner_container > .content > p > a:hover{border-bottom:1px solid #fff;} #template-simple .section.dark_gray > .inner_container > .content > p + .btn{margin-top:13px;} #template-simple .section.dark_gray > .inner_container > .content .btn:hover{border:none;} /* Image Container */ #template-simple .section.image_container{position:relative;} #template-simple .section.image_container > .inner_container{position:static;height:237px;} #template-simple .section.image_container > .inner_container > .content{ float:left; width: 530px; padding:25px 0 35px 30px; } #template-simple .section.image_container > .inner_container > .image{ position: absolute; top:0;right:0; width: 465px; overflow: hidden; height: 237px; text-align: center; } #template-simple .section.image_container > .inner_container > .image > img{ position: absolute; left: 50%; margin: 0 0 0 -233px; } /* Full */ #template-simple .section.image_container.full > .inner_container{width:960px;height:auto;} #template-simple .section.image_container.full > .inner_container > .content{ float:none; width: 100%; padding:21px 0; } /* Video Container */ #template-simple .section.video_container > .inner_container > .content{width:470px;padding-left:30px;} /* AWS 5.1.1 - Product Details ----------------------------------------------------------*/ /* Sidebar Overrides */ /* Callouts */ #template-simple.product_details #sidebar .callout{background:#fff;} #template-simple.product_details #sidebar .callout.alt{background:#ebe9e8;} #template-simple.product_details #sidebar .callout h4{ text-transform:none; font-size: 14px; word-wrap: break-word; } #template-simple.product_details #sidebar .callout p{line-height:15px;} /* Help Callout */ #template-simple.product_details #sidebar .callout.help{text-align:center;margin:0;} #template-simple.product_details #sidebar .callout.help h3{ color: #bf1e39; text-transform: uppercase; font-size: 18px; margin:0 0 10px; } /* Multicols */ #template-simple.product_details #sidebar .mod-multicols .col{background: none;} /* AWS 5.1.2 - Full ---------------------------------------------------------------------*/ #template-simple.full .section > .inner_container > .content > p.intro{width:100%;max-width:inherit;} /* AWS 5.1.3 - Reverse (left nav !sidebar) ----------------------------------------------*/ #template-simple.reverse{width:960px;margin:0 auto;} #template-simple.reverse > #left_nav{ width: 250px; float:left; padding: 0 15px 0 30px; } #template-simple.reverse > #content{ width: 710px; float:right; padding: 0 25px 30px 0; } /* AWS 5.2 - Results ------------------------------------------------------------------------*/ #template-results{width:960px;margin:0 auto;padding:0;} /* Search Tools */ #search_tools{width:275px;padding:0 15px 35px 25px;float:left;} #search_tools .mod-site_search{margin: 0 0 -12px;} /* Content */ #template-results #content{ position:relative; width:685px; padding:0 25px 0 50px; float:left; border:none; } #template-results #content .mod-search_summary + .inner_content{padding:8px 0 48px;} #template-results #content .inner_content{ margin:0; padding:32px 0 40px; background:#fcfbf9; position: relative; z-index: 1; } #template-results #content .inner_content:after{ content: ''; position: absolute; top:0; left:-50px; right:-200px; bottom:0; background: #fcfbf9; z-index: -1; } /* Filter Selection */ #template-results #content .mod-listing.filter_selections{ width: 685px; margin:0 0 0 -50px; padding-left:50px; position: relative; z-index: 1; } #template-results #content .mod-listing.filter_selections:after{ content: ''; position: absolute; left:0; top:0; bottom:0; right:-200px; background: #ebe9e8; z-index: -1; } #template-results #content .mod-listing.filter_selections + .mod-search_summary{margin-bottom:19px;} /* Site Section */ #template-results .site_section{margin-bottom:30px;} #template-results .site_section > .row + .row{margin:15px 0 0;} /* Dropdowns in Search Summary */ #template-results .mod-search_summary .mod-dropdown > ul > li{border-color:#fcfbf9;} #template-results .mod-search_summary .mod-dropdown > ul > .open{background:#fff;border-color:#ebe9e8;} /* Tabs */ #template-results #content > .tabs{height:29px;margin:0;} #template-results #content > .tabs > ul > li{margin:0 4px 0 0;} #template-results #content > .tabs > ul > li > a{ background: #bf1e39; color: #fff; border:none; height: 29px; line-height: 29px; } #template-results #content > .tabs > ul > li > a:hover, #template-results #content > .tabs > ul > li > a.active{background: #ebe9e8;color:#878787;} #template-results #content > .tab_panels{ padding:0; border:none; -webkit-box-shadow: none; box-shadow: none; } /* AWS 5.2.1 - Results w/i Simple Template ----------------------------------------------*/ #results{margin:5px 0 40px;} #results > h5{ color: #bf1e39; font-size: 14px; font-weight: bold; margin: 0 0 7px; } /* Search Tools */ #results #search_tools{width: 37%;padding:0 2% 0 0;} #results #search_tools .mod-listing.filter > h5{margin:0;} #results #search_tools .mod-listing.filter > ul > li > a{font-size:14px;} #results #search_tools .mod-listing.filter > ul > li + li{margin:-3px 0 0;} #results #search_tools .mod-listing.filter > ul > li > .active:after{ background-position: -20px -92px; width: 6px; height: 8px; top: 7px; right: 10px; } #results #search_tools .mod-listing.filter > ul > li > .active:hover:after{ background-position: -27px -92px; } /* Inner Content */ #results #inner_content{width:370px;float:left;} #results #inner_content .mod-grid.search_listing > .content{margin-left:-3%;} #results #inner_content .mod-grid.search_listing > .content > .item > .content{padding-top:10px;} #results #inner_content .mod-grid.search_listing > .content > .item{ width: 47%; margin: 0 0 5px 3%; } /* Misc Overrides */ #results .mod-search_summary{margin:20px 0 -20px;} #results .mod-search_summary:after{display:none;} #results .mod-search_summary .sortby{float:none;width:100%;text-align:left;margin:10px 0 0;} /* AWS 5.3 - Full ---------------------------------------------------------------------------*/ #template-full #content{padding:0;} #template-full .section{padding:22px 0 30px;} #template-full .section > .inner_container{width:900px;} /* myHollister Adjustments */ .myHollister #template-full{padding: 0 0 40px;} .myHollister #template-full #content:first-child{padding-top:19px;} .myHollister #template-full #related_content{padding:40px 0 0;} .myHollister #template-full .section{padding:0;} .myHollister #template-full .section + .section{margin-top:120px;} /* Secure Start Adjustments */ .ss #template-full #content{padding:40px 0;} .ss #template-full .section{padding:0;} .ss #template-full .section + .section{margin-top:120px;} /* AWS 5.3.1 - Campaign -----------------------------------------------------------------*/ #template-full.campaign .section{padding: 0;} #template-full.campaign .section > .inner_container{width:960px;padding:20px 0;} #template-full.campaign .section.border > .inner_container{border-bottom: 1px solid #585458;} #template-full.campaign #content{border:none;} #template-full.campaign #slider_container + #content{padding-top:0;} #template-full.campaign #content .section h2 + h4{ margin-top:-3px; font-size: 22px; line-height: 25px; } /* Section Types */ /* Base */ #template-full.campaign .multicols .col2 > img{display:block;margin:0 auto;} #template-full.campaign .mod-listing.links{margin:10px 0 0;} #template-full.campaign .mod-listing.links > ul > li{font-size:14px;} #template-full.campaign .mod-listing.links > ul > li + li{margin:5px 0 0;} #template-full.campaign .mod-listing.links > ul > li > a{color:#bf1e39;border:none;} #template-full.campaign .mod-listing.links > ul > li > a:hover{color:#878785;} /* Carousel */ #template-full.campaign .section.campaign_carousel > .inner_container > .content > .carousel{padding:0;margin:0;} #template-full.campaign .section.campaign_carousel > .inner_container > .content > * + .carousel{margin-top:40px;} #template-full.campaign .section.campaign_carousel .carousel.feature .panels{width:100%;} /* Featured Image */ #template-full.campaign .section.featured_image > .inner_container{text-align:right;} #template-full.campaign .section.featured_image > .inner_container > .content{ position:absolute; text-align:left; width: 300px; } #template-full.campaign .section.featured_image > .inner_container > img{ display:inline-block; margin:-40px 0 0; } /* Content */ #template-full.campaign .section.featured_image h2{font-size:35px;line-height:41px;} #template-full.campaign .section.featured_image h3{font-size:24px;line-height:28px;} #template-full.campaign .section.featured_image h2 + h3{margin-top:-6px;} #template-full.campaign .section.featured_image .mod-listing.barred{margin-top:35px;} /* Alt */ #template-full.campaign .section.featured_image.alt > .inner_container{text-align:left;} #template-full.campaign .section.featured_image.alt > .inner_container > .content{ position: static; width: 100%; } #template-full.campaign .section.featured_image.alt > .inner_container > img{ display: block; margin:30px auto 0; width: 80%; } /* Tabs (expandable overrides) */ #template-full.campaign .section.campaign_tabs .tabs{margin-top:30px;} #template-full.campaign .section.campaign_tabs .mod-expandables{margin:0;} #template-full.campaign .section.campaign_tabs .mod-expandables ul > li{border:none;} #template-full.campaign .section.campaign_tabs .mod-expandables .trigger_expandable{display: none;} #template-full.campaign .section.campaign_tabs .mod-expandables .expandable{ position: relative; float: none; z-index: 0; visibility: visible; left: auto; top: auto; padding: 0; } /* Video */ #template-full.campaign .section.video{background:#f5f3ef;} #template-full.campaign .section.video .mod-video{margin-top:25px;} /* AWS 5.4 - Secure Start Templates / Additions ---------------------------------------------*/ *.ss-locked:before{ content: ''; display:inline-block; width: 10px; height: 13px; margin:0 10px 0 0; background: url('../images/sprite.png') no-repeat -58px -92px; } /* Sidebar */ .sidebar .mod-grid.ss-contacts{padding:0 15px;margin:20px 0;} .sidebar .mod-grid.ss-contacts > h3{color:#bf1e39;} .sidebar .mod-grid.ss-contacts > p{font-size:12px;line-height:14px;} .sidebar .mod-grid.ss-contacts .item{width:100%;float:none;margin:0;} .sidebar .mod-grid.ss-contacts .item + .item{margin:20px 0 0;} /* AWS 5.4.1 - User Bar -----------------------------------------------------------------*/ #ss-user_bar{position:relative;z-index:100;} #ss-user_bar + #content{border-top:none;} #ss-user_bar{position: relative;padding:10px 20px 2px;background: #ebe9e8;} #ss-user_bar > .inner_container{text-align: right;width: 100%;} #ss-user_bar > .inner_container > h5{ font-size:14px; color:#bf1e39; display: inline-block; position: relative; top:-13px; } #ss-user_bar > .inner_container > .multicols{display:inline-block;} #ss-user_bar > .inner_container > .multicols .col{display:inline-block;margin:0;width:auto;} #ss-user_bar > .inner_container > .multicols .col1{margin:0 10px;} #ss-user_bar .btn:link{ font-size: 10px; line-height: 13px; min-width: inherit; display:block; padding:7px 10px; width: 100px; } /* Dropdown Overrides */ #ss-user_bar .mod-dropdown{height:27px;} #ss-user_bar .mod-dropdown > ul > li{border-color:#ebe9e8;} #ss-user_bar .mod-dropdown > ul > li > a{ height: 25px; line-height: 26px; padding: 0 10px; text-align:left; text-transform: none; } #ss-user_bar .mod-dropdown > ul > li > a > .icon.arrow-lg-down{margin:0 0 0 7px;top:-1px;position:relative;} .mod-dropdown > ul > li > .content{top:38px;width:240px;} /* Opened */ #ss-user_bar .mod-dropdown > ul > .open{background:#fff;} /* Not logged In */ #ss-user_bar .mod-errors{width:100%;padding:10px;} #ss-user_bar .mod-errors > p{font-size:13px;text-align:center;} #ss-user_bar fieldset{margin:10px 0;float:right;} #ss-user_bar fieldset ul{width:100%;} #ss-user_bar fieldset ul > li{width:auto;margin:0 0 0 20px;} #ss-user_bar fieldset ul > li > input{width: 150px;} #ss-user_bar fieldset ul > li > label{font-size:13px;margin:0 5px 0 0;color:#666;} #ss-user_bar fieldset ul > li > .btn{padding:8px 10px;} #ss-user_bar fieldset ul > li > p{margin:0;font-size:10px;} #ss-user_bar fieldset ul > li:last-child > p{line-height:14px;} /* Forgot Password */ #ss-user_bar #userbar_forgot ul > li > input{width: 200px;} /* AWS 5.4.2 - Simple Template Overrides ------------------------------------------------*/ #template-simple.secure_start .section > .inner_container > .content{width:680px;padding:0 30px;} #template-simple.secure_start .section.full > .inner_container > .content, #template-simple.secure_start #related_content .section > .inner_container > .content{width:960px;} /* Section Widths/Paddings */ #template-simple.secure_start .section + .section{margin:60px 0 0;} /* Secure Start Light Gray */ #template-simple .section.ss_gray > .inner_container > .content{ padding:30px; background:#f9f8f8; } #template-simple .section.ss_gray > .inner_container > .content > h2{margin:0 0 16px;} #template-simple .section.ss_gray > .inner_container > .content > h2 > a{border:none;} #template-simple .section.ss_gray > .inner_container > .content > h2 > a:hover{border-bottom:1px solid;} /* AWS 5.4.3 - Full Template Overrides --------------------------------------------------*/ #template-full.secure_start #content{padding:0;} /* AWS 5.5 - Splash Page --------------------------------------------------------------------*/ .splash h3{ font-size: 56px; line-height:1.25; font-weight: bold; color:#878785; border-bottom:3px solid #878785; display: inline-block; margin: 0 auto 60px; } .splash * + h3{margin-top: 150px;} .splash p{font-size: 34px;line-height: 1.5;} /* Structural Overrides */ .splash .outer_wrapper, .splash .inner_wrapper{ width:100%; -webkit-box-shadow: none; box-shadow: none; min-width: initial; max-width: 1920px; } .splash #header{height: 92px;} .splash #header #logo{margin-left: 0;} .splash .inner_container{width: 80%;} /* Template Overrides */ .splash #template-simple #content{border:none;padding-bottom: 200px;} .splash #template-simple .section > .inner_container > .content{width:100%;padding:0;} /* Specialized Components & Component Overrides */ /* Flags */ .mod-listing.flags + .mod-listing.flags{margin-top:110px;} .mod-listing.flags > h4{ font-size:40px; line-height: 1.2; text-transform:uppercase; margin-bottom:38px; } .mod-listing.flags > ul > li + li{margin-top:42px;} .mod-listing.flags > ul li > a{ font-size: 34px; line-height: 1.2; color: #878785; border: none; position: relative; padding:1px 0 0 63px; display: block; } .mod-listing.flags > ul li > ul{margin:42px 0 0 63px;} .mod-listing.flags > ul li > ul > li > a{padding-left: 0;} .mod-listing.flags > ul li > a:hover{color: #bf1e39;} .mod-listing.flags > ul li .flag{position: absolute;top:-2px;left:0;} /* Image Header */ .mod-image_header{ width: 100%; height: 809px; position:relative; margin-bottom:70px; overflow: hidden; } .mod-image_header img{ width: 1920px; position: absolute; left: 50%; margin-left: -960px; } .mod-image_header > .content{position:absolute;bottom:0;display:table;height:330px;width:100%;} .mod-image_header > .content > .inner{ display: table-cell; vertical-align: middle; padding: 0 10%; text-align: center; } .mod-image_header h1{font-size:80px;line-height:1.2;} .mod-image_header h2{font-size:46px;line-height:1.2;color:#fff;} .mod-image_header > .cta{ position:absolute; width: 100%; display: table; top:0; height: 480px; } .mod-image_header > .cta > .inner{ display: table-cell; text-align: center; vertical-align: middle; padding:0 15%; } .mod-image_header > .cta .btn{ border-radius: 0; padding: 20px 40px; font-size: 30px; width: 45%; height: 105px; line-height: 1.1; display: block; float: left; } .mod-image_header > .cta .btn + .btn{margin:0 0 0 20px;float:right;} .mod-image_header > .cta .btn > .subtext{font-size:24px;display:block;} /*------------------------------------------------------------------------------------------------- AWS 6.0 - 3rd Party Overrides /*-----------------------------------------------------------------------------------------------*/ /* AWS 6.1 - Slider / Billboard (Layerslider) -----------------------------------------------*/ #slider_container{height: 502px;} #slider_container > .ls-container{width: 100% !important;height:502px !important;} .custom_slider{position:relative;} .custom_slider .ls-slide .ls-l, .custom_slider .ls-slide .ls-bg{ margin: 0 !important; transform: none !important; } .custom_slider .ls-slide .ls-bg{width:auto !important;height:auto !important;} /* Content Container */ .custom_slider .ls-slide > .content{ position:absolute; display: table; top:auto !important; bottom:0; left:50% !important; margin:0 0 0 -476px !important; z-index:10; height: 148px; width: 960px; } .custom_slider .ls-slide > .content > .inner{ width:100%; height: 148px; margin:0 auto; padding:0 22px 0 25px; display: table-cell; vertical-align: middle; } /* Element Styling */ .custom_slider .content h1{color:#fff;font-size:34px;line-height:40px;margin:0 0 3px;} .custom_slider .content h2{color:#fff;font-size:21px;line-height:26px;margin:0;} .custom_slider .ls-link{border:0;} /* Control Overrides */ #slider_container .ls-bottom-nav-wrapper{ width: 890px; text-align: right; padding:0 35px; } #slider_container .ls-container .ls-bottom-nav-wrapper > .ls-bottom-slidebuttons > a{ border-radius: 8px; border:2px solid #fff; width: 6px; height: 6px; background: none; margin:0 2px; } #slider_container .ls-container .ls-bottom-nav-wrapper > .ls-bottom-slidebuttons > a.ls-nav-active{background:#fff;} #slider_container .ls-nav-prev, #slider_container .ls-nav-next{ top:160px; margin:0; width: 48px; height: 48px; background: url('../images/sprite.png') no-repeat; overflow: hidden; z-index: 100; } #slider_container .ls-nav-prev{left:40px;background-position: -86px -38px;} #slider_container .ls-nav-next{right:40px;background-position: -135px -38px;} /* Small */ #slider_container.small, #slider_container.small > .ls-container{height:363px !important;} /* Content Container */ .small .custom_slider .ls-slide > .content, .small .custom_slider .ls-slide > .content > .inner{height:48px;} /* Control Overrides */ #slider_container.small .ls-bottom-nav-wrapper{margin-top:-50px;} /* Element Styling */ .small .custom_slider .content h1{margin:0;} #slider_container.small .custom_slider .content h2{display:none !important;} /* AWS 6.2 - jQuery Custom Scroll -----------------------------------------------------------*/ /*.mCustomScrollbar{-ms-touch-action:none;touch-action:none;}*/ .mCustomScrollBox{ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: 0; } /* Scrollable Area Container */ .mCSB_inside>.mCSB_container{margin-right: 20px;} .mCSB_container{ overflow: hidden; width: auto; height: auto; } /* Scrollbar / Container */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; transition: opacity .2s ease-in-out,background-color .2s ease-in-out; } .mCSB_scrollTools{ position: absolute; width: 16px; height: auto; left:auto; top:0;right:0;bottom:0; } .mCSB_scrollTools .mCSB_draggerContainer{ position: absolute; height: auto; top: 0;left: 0;bottom: 0;right: 0; } .mCSB_scrollTools .mCSB_draggerRail{width: 1px;height: 100%;margin: 0 auto;background: #878787;} /* Dragger Container */ .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ position: relative; height: 100%; width: 16px; margin: 0 1px; -webkit-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; transition: opacity .2s ease-in-out,background-color .2s ease-in-out; } /* Dragger */ .mCSB_scrollTools .mCSB_dragger{ cursor: pointer; margin:0; width: 16px; height: 16px; background: url('../images/sprite.png') no-repeat 0 -64px; z-index: 1; } /* AWS 6.3 - Pikaday ------------------------------------------------------------------------*/ .pika-lendar{width:262px;} /* Table Cells */ .pika-table tr:first-child > td{border-top:1px solid #878785;} .pika-table tr > td{ border: 1px solid #878785; border-top:none; } /* Buttons */ .pika-button{ text-align:center; box-shadow: none; border: none; border-radius: 0; height: 36px; } .pika-button:hover{background: #878785;border-radius:0;} /* Utility */ .is-today .pika-button{color:#bf1e39;} .is-selected .pika-button{ background: #bf1e39; box-shadow: inset 0 1px 3px #bf1e39; border-radius: 0; } /* Arrows */ .pika-prev, .is-rtl .pika-next, .pika-next, .is-rtl .pika-prev{box-shadow: none;} .pika-prev:hover, .is-rtl .pika-next:hover{ background: none; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); } .pika-next:hover, .is-rtl .pika-prev:hover{ box-shadow: none; background: none; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); } /* AWS 6.4 - Brightcove HTML5 Player --------------------------------------------------------*/ .bc-iframe, .bc-iframe body, .bc-player-default_default, .bc-player-default_default .vjs-poster{background: #000;background-size: contain;background-repeat: no-repeat;background-position: center;} /* BigPlayButton */ .video-js.vjs-mouse .vjs-big-play-button{ color: #bf1e39; background: #fff; opacity: .7; height:52px; width: 78px; } .video-js.vjs-mouse .vjs-big-play-button:before{ color: #bf1e39; opacity: 1; margin: 13px auto; } .video-js.vjs-mouse:hover .vjs-big-play-button{opacity:1;} .video-js .vjs-big-play-button .vjs-icon-placeholder:before{font-size: 80px;} /* ControlBar (Inherited by icons in the ControlBar, but NOT the ProgressControl) */ .video-js .vjs-control-bar{color: #fff;background-color: #000;} /* PlayToggle */ .video-js .vjs-play-control{color: #fff;} /* VolumeBar */ .vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal{background: #fff;} /* VolumeLevel */ .video-js .vjs-volume-level{background: #bf1e39;} /* CurrentTimeDisplay */ .video-js .vjs-current-time{color: #fff} /* TimeDivider */ .video-js .vjs-time-divider{ color: #fff; font-weight: bold; font-size: 12px; position: relative; top: -3px } /* DurationDisplay */ .video-js .vjs-duration{text-decoration: italic;color: #fff;} /* SeekBar */ .video-js .vjs-play-progress{background: #bf1e39;} /* FullScreenToggle */ .video-js .vjs-fullscreen-control.vjs-control{color: #fff;font-weight: bold;} /* docktext background */ .video-js .vjs-dock-text{display: none;} .product_details { padding: 0 30px; }