/* _________________________________________ PROJECT: Coke UI Kit CONTENT: Main HTML styles ____________________________________________ */ /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Mixins and Variables ____________________________________________ */ /* Imports from Bourbon for hi-dpi, etc */ /* Firefox animations */ html { -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(204, 0, 0, 0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:active { outline: none; } :focus { outline: none; -moz-outline-style: none; } a img { outline: none; border: none; } img { -ms-interpolation-mode: bicubic; } abbr[title] { border-bottom: 1px dotted; cursor: help; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } b, strong { font-weight: 700; } dfn { font-style: italic; } blockquote { padding-left: 24px; border-left: 1px solid #c8c8c8; font-style: italic; margin: 0 0 1.5em -24px; } blockquote:before, blockquote:after, q:before, q:after, q:before, q:after { content: none; } dl, dd { margin: 0 0 1.5em 0; } dt { font-weight: 400; } form { margin: 0; } fieldset { margin-bottom: 0; border-width: 0; padding: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } .ie7 img, .iem7 img { -ms-interpolation-mode: bicubic; } iframe { border: none; } input:-webkit-autofill { background-color: #e2e3df; background-image: none; color: #62696B; } ins { background-color: #f0f0f0; color: #000; text-decoration: none; } legend { margin-left: -7px; border-width: 0; padding: 0; } label { font-weight: 400; cursor: pointer; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } li ul, li ol { font-size: 1em; margin: 0; } mark { background-color: #f0f0f0; color: #000; font-style: italic; font-weight: 700; } ol { display: compact; list-style-type: none; } p, ol, ul, dl, address { margin-bottom: 0; font-size: 1em; } p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-align: justify; -webkit-hyphens: auto; -webkit-hyphenate-character: \2010; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: .875em; line-height: 1.5; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } .seo { text-indent: -9999px; visibility: collapse; display: none; } small { font-size: 1em; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } ul, ol { margin: 0; padding: 0; list-style: none; } li { list-style: none; } ::-moz-selection, ::-moz-selection, ::-webkit-selection { background: transparent; color: #999; text-shadow: none; } ::selection, ::-moz-selection, ::-webkit-selection { background: transparent; color: #999; text-shadow: none; } ::-webkit-input-placeholder, input:-moz-placeholder { font-size: .875em; line-height: 1.4; } /* chrome webfont bug fix - temporary */ body { -webkit-animation-duration: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0.2s; } @-webkit-keyframes fontfix { from { opacity: 1; } to { opacity: 1; } } /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Fontface embeds and global typography variables ____________________________________________ */ @font-face { font-family: 'ReCaptcha'; src: url("../fonts/ReCaptcha.eot?-mdtv9p"); src: url("../fonts/ReCaptcha.eot?#iefix-mdtv9p") format("embedded-opentype"), url("../fonts/ReCaptcha.woff?-mdtv9p") format("woff"), url("../fonts/ReCaptcha.ttf?-mdtv9p") format("truetype"), url("../fonts/ReCaptcha.svg?-mdtv9p#ReCaptcha") format("svg"); font-weight: normal; font-style: normal; } [class^="captcha-icon-"], [class*=" captcha-icon-"] { font-family: 'ReCaptcha' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .captcha-icon-text:before { content: "\e600"; } .captcha-icon-volume-high:before { content: "\e601"; } .captcha-icon-volume-medium:before { content: "\e602"; } .captcha-icon-loop:before { content: "\e603"; } .captcha-icon-help:before { content: "\e606"; } @font-face { font-family: 'Coke-FM'; src: url("../fonts/Coke-FM.eot?-iaxvub"); src: url("../fonts/Coke-FM.eot?#iefix-iaxvub") format("embedded-opentype"), url("../fonts/Coke-FM.woff?-iaxvub") format("woff"), url("../fonts/Coke-FM.ttf?-iaxvub") format("truetype"), url("../fonts/Coke-FM.svg?-iaxvub#Coke-FM") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'Coke-FM'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-twitter:before { content: "\e602"; } .icon-facebook:before { content: "\e603"; } @font-face { font-family: 'FM-Player'; src: url("../fonts/FM-Player.eot?-jv7yoa"); src: url("../fonts/FM-Player.eot?#iefix-jv7yoa") format("embedded-opentype"), url("../fonts/FM-Player.woff?-jv7yoa") format("woff"), url("../fonts/FM-Player.ttf?-jv7yoa") format("truetype"), url("../fonts/FM-Player.svg?-jv7yoa#FM-Player") format("svg"); font-weight: normal; font-style: normal; } [class^="fm-icon-"], [class*=" fm-icon-"] { font-family: 'FM-Player'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fm-icon-clock:before { content: "\e600"; } .fm-icon-download:before { content: "\e601"; } .fm-icon-embed:before { content: "\e602"; } .fm-icon-facebook:before { content: "\e603"; } .fm-icon-hd:before { content: "\e604"; } .fm-icon-play:before { content: "\e605"; } .fm-icon-popup:before { content: "\e606"; } .fm-icon-twitter:before { content: "\e607"; } .fm-icon-volume:before { content: "\e608"; } .fm-icon-thumbsDown:before { content: "\e609"; } .fm-icon-thumbsUp:before { content: "\e60b"; } .fm-icon-pause:before { content: "\e60d"; } .fm-icon-close:before { content: "\e60a"; } @font-face { font-family: 'cc-go'; src: url("../fonts/cc-go.eot?grb1kt"); src: url("../fonts/cc-go.eot?#iefixgrb1kt") format("embedded-opentype"), url("../fonts/cc-go.woff?grb1kt") format("woff"), url("../fonts/cc-go.ttf?grb1kt") format("truetype"), url("../fonts/cc-go.svg?grb1kt#cc-go") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-cc"] { font-family: 'cc-go'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-cc-close:before { content: "\e601"; } /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Root HTML styles are universal to all media types and contexts. ____________________________________________ */ /* WRAPPERS ======================================== */ html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; background: #000000; } body { position: relative; width: auto; padding: 0 10px 10px 10px; } /* TYPOGRAPHY ====================================== */ /* See also fonts.less */ body { *font-size: 1em; font-size: 16px; line-height: 20px; text-align: left; color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; color: #ffffff; text-align: center; line-height: 1.2em; margin: 0 auto 0 auto; padding: 0; } h1.alignleft, h2.alignleft, h3.alignleft, h4.alignleft, h5.alignleft, h6.alignleft { text-align: left; margin: 0 0 0 0; } h1, .h1 { font-size: 42px; letter-spacing: -0.06em; } h2, .h2 { font-size: 30px; letter-spacing: -0.04em; } h3, .h3 { font-size: 20px; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } h4, .h4 { font-size: 15px; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } h5, .h5 { font-size: 14px; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } h6, .h6 { font-size: 12px; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .brand-primary { color: #CDD500; } .section-background-toggle { margin-top: 10px; float: none; background: #000; color: #fff; padding: 0; } .section-background-toggle .main { left: auto; float: none; width: auto; margin-left: auto; } .section-background-toggle form.section-background-toggle-controls { background: #000; width: 100%; padding: 15px 10px 5px; height: 1em; } .section-background-toggle form.section-background-toggle-controls fieldset { display: inline; color: #fff; } .section-background-toggle form.section-background-toggle-controls fieldset label { color: #fff; } .section-background-toggle form.section-background-toggle-controls fieldset:first-child { float: left; } hr.spacer { border-top: 0; margin: 1.2em 0; } p { margin: 0 0 10px 0; font-size: 12px; line-height: 17px; } .item p { margin: 0; } a { position: relative; text-decoration: none; color: #ffffff; opacity: 1; transition: all 0.2s ease-out; } a:hover { color: #CDD500; transition: all 0.1s ease-in; } ul { list-style: none; } ul li, ul li a { list-style: none; } strong { font-weight: bold; } address, .address { font-style: normal; float: left; width: 100%; margin: 0 0 20px 0; } address h4, .address h4 { padding: 0 !important; float: left; width: 100%; } .centered { margin-left: auto; margin-right: auto; text-align: center; } .fleft { text-align: left; margin-left: 0; float: left; } .subpagewrap { padding-top: 230px; } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. j.mp/bestclearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { zoom: 1; } /* TABLES ======*/ table.datatable { border-collapse: collapse; width: 100%; max-width: 728px; margin: 0 auto 60px auto; } table.datatable th { border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 4px 8px; } table.datatable tr td { border-bottom: 2px solid #000; padding: 4px 8px; } table.datatable td a { font-weight: bold; } table.threecol tr td { width: 33%; } /* PROGRESS BARS =============*/ .loadbars { margin: 10px 0; height: 10px; } .loadbar-static { background: #ccc; height: 10px; float: left; width: 23%; margin: 0 1%; } .loadbar-static span { display: block; float: left; height: 10px; background-color: #161616; } .loadbar-static span.loadbar-demo-only-50 { width: 50%; } .loadbar-static span.loadbar-demo-only-25 { width: 25%; } .loadbar-static span.loadbar-demo-only-100 { width: 100%; } .loadbar-static span.loadbar-demo-only-0 { width: 0%; } .loadbar-static:hover > span { width: 100%; background-color: #CDD500; } /* FORMS ======================================== */ /* alerts */ .alert { border: 5px solid #666; color: #666; padding: 10px; margin: 10px 0; } .alert p { padding: 0; margin: 0; font-size: 13px; font-weight: bold; } .alert-error { border-color: #CDD500; color: #CDD500; } /* badges */ .badge { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; padding: 4px 0; width: 24px; text-align: center; display: inline-block; background: url(../img/btns/btn-badge.png) 0 0 no-repeat; color: #161616; } /* pagination */ .pagination { height: 40px; padding-top: 10px; } .pagination li { display: inline-block; min-width: 34px; text-align: center; background: url(../img/btns/btn-pagination-sprite.png) -1px -1px no-repeat; } .pagination li a { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; line-height: 1em; color: #ddd; font-size: 18px; display: block; padding: 7px 0; } .pagination li:hover { background-position: -198px 0px; } .pagination li:hover a { color: #161616; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .pagination li.pagination-current { background-position: -133px -1px; } .pagination li.pagination-current a { color: #161616; } .pagination li.pagination-current:hover { background-position: -198px -1px; } .pagination li.pagination-current:hover a { color: #161616; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .pagination li.pagination-inactive { background-position: -68px -1px; } .pagination li.pagination-inactive a { color: #161616; cursor: default; } .pagination li.pagination-inactive:hover a { color: #161616; } .pagination.light li { background-position: -68px -1px; } .pagination.light li a { color: #999; } .pagination.light li:hover { background-position: -198px -1px; } .pagination.light li:hover a { color: #161616; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .pagination.light li.pagination-current { background-position: -133px -1px; } .pagination.light li.pagination-current a { color: #161616; } .pagination.light li.pagination-current:hover { background-position: -198px -1px; } .pagination.light li.pagination-current:hover a { color: #161616; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .pagination.light li.pagination-inactive a { color: #f7f7f7; cursor: default; } .pagination.light li.pagination-inactive:hover { background-position: -68px -1px; } .pagination.light li.pagination-inactive:hover a { color: #f7f7f7; } form { /* causing too many issues .frm-select-arrow{pointer-events:none;position:absolute;right:10px;top:18px;z-index:2;width:17px;height:10px; background:url(../img/btns/btn-pulldown-arrow.gif);} */ } form input[type="text"], form input[type="password"], form input[type="email"], form input[type="tel"], form textarea { width: 100%; display: block; -webkit-appearance: none; -moz-appearance: none; border: none; background: #F7F7F7; padding: 10px 5%; font-size: 15px; color: #666; margin: 0 0 10px 0; } form textarea { width: 90%; } form select { width: 100%; border-radius: 0px; background-clip: padding-box; behavior: url(PIE.htc); font-size: 15px; color: #666; margin: 0 0 10px 0; } form .frm-select { position: relative; } form textarea { height: 200px; padding-top: 10px; } form input[type="checkbox"] { float: left; width: 20px; height: 20px; margin: 0 0.25em 0 0; padding: 0; vertical-align: text-top; cursor: pointer; background: #ffffff; -webkit-appearance: none; border-radius: 0px; background-clip: padding-box; behavior: url(PIE.htc); border: solid 5px #ccc; display: inline-block; font-size: 15px; line-height: 1em; } form input[type="radio"] { float: left; width: 20px; height: 20px; margin: 0 0.25em 0 0; padding: 0; vertical-align: text-top; cursor: pointer; font-size: 15px; line-height: 1em; } form input[type="checkbox"]:checked { background: url("../img/btns/form-check.gif") no-repeat -2px -5px; border: solid 5px rgba(0, 0, 0, 0.1); } form .form-labels { float: left; width: 100%; height: auto; margin: 0 0 10px 0; } form .form-labels label { width: auto; text-align: left; margin-left: 30px; display: block; } form .form-labels .right { float: right; text-align: right; width: auto; } form .form-labels-tight { float: left; width: 100%; height: auto; margin: 0 0 5px 0; } form .form-labels-tight label { float: left; width: auto; text-align: left; } .prel { position: relative; } /* 0px =========================== */ @media (min-width: 0) { .hide-mobile { display: none; } .hide-mobile-tablet { display: none; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .hide-mobile { display: block; } .hide-tablet, .hide-tablet-desktop { display: none; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .hide-tablet, .hide-mobile-tablet { display: block; } .hide-desktop { display: none; } } /* =============================== */ /* IE9 hack to hide form arrow */ @media screen and (min-width: 0\0) { select { background-image: none !important; background-color: #ffffff; } } /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Root Content - Common use and structural pieces ____________________________________________ */ /* STRUCTURAL ================= */ section { float: left; width: 100%; height: auto; overflow: hidden; padding: 35px 0; } section.no-top-pad { padding-top: 0; } .main { float: left; width: 100%; } .main p { text-align: center; } .main .shelf, .main .brands-shelf, .main .four-col-shelf, .main .three-col-shelf { width: 100%; float: left; display: none; } p.copy { float: left; width: 100%; margin: 5px 0; font-size: 16px; line-height: 1.5em; text-align: left; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; font-weight: normal; } .btn-shelf-wrap, .plus-shelf-wrap { display: block; margin: 0; text-align: center; clear: both; } .btn-shelf-offset { margin-top: 0; } /* SHARE THIS ========= */ .section-share .centered { padding-bottom: 10px; } /* BACKGROUNDS ================= */ .light-bg { background: #161616; float: left; width: 100%; height: auto; } .mild-bg { background: #000000; float: left; width: 100%; height: auto; } .dark-bg { background: #000000; float: left; width: 100%; height: auto; } .bg-override.light-bg { background: #fff; } .bg-override.mild-bg { background: #eee; } .bg-override.dark-bg { background: #ddd; } .bg-override h1, .bg-override h2, .bg-override h3, .bg-override h4, .bg-override h5, .bg-override h6, .bg-override p { color: #111; } .bg-override a { color: #CDD500; } /* control-bg takes on the background color of it's target via js */ .control-bg { float: left; width: 100%; height: auto; } .headline { margin: 0 auto 35px; width: 200px; line-height: 1.1em; font-weight: bold; } /* headline hard breaks is wider, use break tags to split headline */ .headline-hard-breaks { margin: 0 auto 28px; width: 400px; line-height: 1.1em; } .headline-with-sub { margin: 0 auto 18px; width: 200px; line-height: 1.1em; } .subheadline { margin-bottom: 28px; } p.subheadline { font-size: 15px; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 28px; } p.subheadlinesized { margin-bottom: 28px; font-size: 20px; font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } p.superheadline { font-size: 60px; line-height: 1em; letter-spacing: -0.06em; padding: 0 0 0.4em 0; font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } /* UTILS ================= */ #container { padding: 35px 35px 0; } .disabled { opacity: .4; } /* BUTTONS ================= */ .btn { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; color: #000000; min-width: 50px; background: #ffffff; display: inline-block; text-align: center; border-bottom: none; font-size: 16px; padding: 8px 11px 8px 11px; margin: 0 3px 10px 3px; transition: all 0.2s ease-out; } .btn:hover { transition: all 0.2s ease-in; background: #CDD500; color: #000000; } .btn.login, .btn.primary { border-bottom: 10px solid #CDD500; -webkit-appearance: none; border-radius: 0; border: none; } .btn.login:hover, .btn.primary:hover { border-bottom: 10px solid #bbb; border: none; } .btn.disabled, .btn.secondary { color: #666; } .btn.white { background: #161616; } .btn-plus, .btn-plus-dark, .btn-minus, .btn-minus-dark { background: url(../img/btns/btn-plus-sprite.png) 0 0 no-repeat; width: 32px; height: 32px; display: inline-block; *display: inline; zoom: 1; text-indent: -9999em; transition: none; } .btn-plus:hover, .btn-plus-dark:hover, .btn-minus:hover, .btn-minus-dark:hover { transition: none; background-position: 0 -100px; } .light-bg .btn-plus, .btn-plus-dark { background-position: -141px 0; } .light-bg .btn-plus:hover, .btn-plus-dark:hover { background-position: -141px -100px; } .btn-minus { background-position: -70px 0; } .btn-minus:hover { background-position: -70px -100px; } .light-bg .btn-minus, .btn-minus-dark { background-position: -210px 0px; } .light-bg .btn-minus:hover, .btn-minus-dark:hover { background-position: -210px -100px; } .btn-close, .btn-close-dark { background: url(../img/btns/btn-close-sprite.png) 0 0 no-repeat; width: 32px; height: 32px; display: inline-block; *display: inline; zoom: 1; text-indent: -9999em; transition: none; } .btn-close:hover, .btn-close-dark:hover { transition: none; background-position: 0 -100px; } .btn-close-dark { background-position: -70px 0; } .btn-close-dark:hover { transition: none; background-position: -70px -100px; } .item { float: left; width: 100%; margin: 0 auto; text-align: center; } .item a { display: block; position: relative; width: 100%; margin: 0 auto; opacity: 1; transition: all 0.2s ease-out; } .item a img { float: left; display: block; width: 100%; margin: 0 auto; opacity: 1; } .item a .bar { display: block; position: absolute; height: 10px; width: 100%; background: rgba(0, 0, 0, 0.2); content: ""; transition: all 0.2s ease-out; } .item a .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ padding: 10px; margin: 10px auto; text-align: center; transition: all 0.2s ease-out; } .item a .item-txt h1, .item a .item-txt h2, .item a .item-txt h3, .item a .item-txt h4, .item a .item-txt h5, .item a .item-txt h6, .item a .item-txt p { float: left; width: 100%; height: auto; } .item a .item-txt h3 { margin: 0 0 5px 0; } .item a .item-txt p { text-align: center; color: #ffffff; font-size: 13.6px; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; line-height: 17px; } .item:hover { color: #000000; } .item:hover .item-txt { background: #000000; transition: all 0.1s ease-in; } .item:hover .item-txt h1, .item:hover .item-txt h2, .item:hover .item-txt h3, .item:hover .item-txt h4, .item:hover .item-txt h5, .item:hover .item-txt h6, .item:hover .item-txt p { color: #CDD500; transition: all 0.2s ease-in; } .item:hover .bar { background: #CDD500; transition: all 0.1s ease-in; } .item:hover img { opacity: 1; } .elm-circle { width: 100%; text-align: center; position: relative; } .elm-circle .elm-body { float: left; width: 100%; padding: 1em 0 14px 0; margin: 10px auto; text-align: center; transition: all 0.2s ease-out; } .elm-circle h3 { margin: 0 0 5px 0; } .elm-circle p { text-align: center; color: #ffffff; font-size: 13.6px; line-height: 17px; float: left; width: 60%; margin: 0 20%; } .elm-circle a { display: block; position: relative; width: 90%; margin: 0 auto; transition: all 0.2s ease-out; } .elm-circle a .elm-img { background-repeat: none; background-position: center center; background-size: cover; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; position: relative; cursor: default; box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2); transition: all 0.2s ease-out; margin: 0 auto; cursor: pointer; opacity: 1; } .elm-circle a .elm-img:hover { opacity: 1; } .elm-circle a:hover { transition: all 0.2s ease-out; } .elm-circle a:hover .elm-body { background: transparent; transition: all 0.1s ease-in; } .elm-circle a:hover .elm-body h1, .elm-circle a:hover .elm-body h2, .elm-circle a:hover .elm-body h3, .elm-circle a:hover .elm-body h4, .elm-circle a:hover .elm-body h5, .elm-circle a:hover .elm-body h6, .elm-circle a:hover .elm-body p { color: #CDD500; transition: all 0.1s ease-in; } .elm-circle a:hover .elm-img { box-shadow: inset 0 0 0 10px #CDD500; transition: all 0.1s ease-in; } /*======== 404 ======== */ /* 0px =========================== */ @media (min-width: 0) { .item { float: left; width: 100%; margin: 0 auto; text-align: center; } .item a { display: block; position: relative; width: 100%; margin: 0 auto; opacity: 1; } .item a img { float: left; display: block; width: 100%; margin: 0 auto; opacity: 1; } .item a .bar { display: none; } .item a .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ padding: 10px; margin: 10px auto; text-align: center; } .item a .item-txt h1, .item a .item-txt h2, .item a .item-txt h3, .item a .item-txt h4, .item a .item-txt h5, .item a .item-txt h6, .item a .item-txt p { float: left; width: 100%; height: auto; } .item a .item-txt h3 { margin: 0 0 5px 0; } .item a .item-txt p { text-align: center; color: #ffffff; font-size: 13.6px; line-height: 17px; } h2.headline { width: auto; max-width: 320px; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .item { float: left; width: 100%; margin: 0 auto; text-align: center; } .item a { display: block; position: relative; width: 100%; margin: 0 auto; opacity: 1; transition: all 0.2s ease-out; } .item a img { float: left; display: block; width: 100%; margin: 0 auto; opacity: 1; } .item a .bar { display: block; position: absolute; height: 10px; width: 100%; background: rgba(0, 0, 0, 0.2); content: ""; transition: all 0.2s ease-out; } .item a .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ padding: 10px; margin: 10px auto; text-align: center; transition: all 0.2s ease-out; } .item a .item-txt h1, .item a .item-txt h2, .item a .item-txt h3, .item a .item-txt h4, .item a .item-txt h5, .item a .item-txt h6, .item a .item-txt p { float: left; width: 100%; height: auto; } .item a .item-txt h3 { margin: 0 0 5px 0; } .item a .item-txt p { text-align: center; color: #ffffff; font-size: 13.6px; line-height: 17px; } .item:hover { color: #CDD500; } .item:hover .item-txt { background: #ffffff; transition: all 0.1s ease-in; } .item:hover .item-txt h1, .item:hover .item-txt h2, .item:hover .item-txt h3, .item:hover .item-txt h4, .item:hover .item-txt h5, .item:hover .item-txt h6, .item:hover .item-txt p { color: #CDD500; transition: all 0.2s ease-in; } .item:hover .bar { background: #CDD500; transition: all 0.1s ease-in; } .item:hover img { opacity: 1; } } /* =============================== */ /* remove auto highlight on mobile sliders .flex-active-slide{ .elm-circle { .transition-out; .elm-body { background:$wt;.transition-in; h1,h2,h3,h4,h5,h6,p {color:$brand-primary;.transition-in;} } .elm-img{ box-shadow: inset 0 0 0 10px rgba(255,0,0,1); .transition-in; } } } */ /* 1024px ======================== */ @media (min-width: 1024px) { .main { position: relative; left: 50%; float: left; width: 1004px; margin-left: -502px; } p.superheadline { font-size: 120px; } } /* =============================== */ /* 0px + Hi Density ============== @media @size-mobile-portrait-hd { .btn-plus, .btn-plus-dark, .btn-minus, .btn-minus-dark { background:url(../img/btns/btn-plus-sprite@x2.png) 0 0 no-repeat; background-size: 300px; } }*/ /* =============================== */ /* PRINT ======================== */ @media print and (min-width: 0em) { img { display: block; width: auto; height: auto; } } /* =============================== */ /* _________________________________________________________ PROJECT: Coke UI Kit CONTENT: Flexslider is used for mobile on most sections and for galleries ____________________________________________________________ */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* FlexSlider Necessary Styles *********************************/ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme *********************************/ .flexslider { margin: 0; background: transparent; position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } /* Direction Nav */ .flex-direction-nav { *height: 0; } /* 480px ======================== */ @media (min-width: 481px) { .flex-direction-nav a { width: 28px; height: 42px; margin: -20px 0 0; display: block; background: url(../img/btns/bg_direction_nav.png?v=2) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; } .flex-direction-nav .flex-next { background-position: 100% 0; right: 0; } .flex-direction-nav .flex-prev { left: 0; } .flexslider:hover .flex-next { opacity: 1; right: 5px; } .flexslider:hover .flex-prev { opacity: 1; left: 5px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { display: none; opacity: 0 !important; filter: alpha(opacity=0); cursor: default; } } /* =============================== */ /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: black; cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; display: block; opacity: 1; cursor: pointer; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 0; } .flex-direction-nav .flex-next { opacity: 1; right: 0; } } /* Layout ***********************/ /* only show active slide's text on mobile */ @media screen and (max-width: 860px) { .item .item-text, .bb-msg-mobile-title, .bb-msg-mobile-sub { display: none; } .flex-active-slide .item .item-text, .flex-active-slide .bb-msg-mobile-title, .flex-active-slide .bb-msg-mobile-sub { display: block; } } .item.flex-active-slide, .flex-viewport .item { color: #ffffff; } .item.flex-active-slide .item-txt, .flex-viewport .item .item-txt { background: inherit; transition: all 0.1s ease-in; } .item.flex-active-slide .item-txt h1, .item.flex-active-slide .item-txt h2, .item.flex-active-slide .item-txt h3, .item.flex-active-slide .item-txt h4, .item.flex-active-slide .item-txt h5, .item.flex-active-slide .item-txt h6, .item.flex-active-slide .item-txt p, .flex-viewport .item .item-txt h1, .flex-viewport .item .item-txt h2, .flex-viewport .item .item-txt h3, .flex-viewport .item .item-txt h4, .flex-viewport .item .item-txt h5, .flex-viewport .item .item-txt h6, .flex-viewport .item .item-txt p { color: #ffffff; transition: all 0.2s ease-in; } .item.flex-active-slide .bar, .flex-viewport .item .bar { background: rgba(0, 0, 0, 0.2); } .item.flex-active-slide:hover .item-txt h1, .item.flex-active-slide:hover .item-txt h2, .item.flex-active-slide:hover .item-txt h3, .item.flex-active-slide:hover .item-txt h4, .item.flex-active-slide:hover .item-txt h5, .item.flex-active-slide:hover .item-txt h6, .item.flex-active-slide:hover .item-txt p, .flex-viewport .item:hover .item-txt h1, .flex-viewport .item:hover .item-txt h2, .flex-viewport .item:hover .item-txt h3, .flex-viewport .item:hover .item-txt h4, .flex-viewport .item:hover .item-txt h5, .flex-viewport .item:hover .item-txt h6, .flex-viewport .item:hover .item-txt p { color: #CDD500; transition: all 0.2s ease-in; } .item.flex-active-slide .item-txt h3, .item.flex-active-slide .item-txt p, .item.flex-active-slide:hover .item-txt h3, .item.flex-active-slide:hover .item-txt p { color: #CDD500; } #main { margin-left: 0; overflow: hidden; } /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Billboards - photo promo ____________________________________________ */ /* 0px =========================== */ @media (min-width: 0) { /*.billb-wrap { height: 330px; }*/ .billb-wrap { position: relative; width: 100%; overflow: hidden; display: block; margin: 0; padding: 0; } .billb-wrap:hover { cursor: pointer; } .billb-wrap:hover h1, .billb-wrap:hover p.billb-msg { transition: all 0.2s ease-out; } .billb-wrap:hover h2, .billb-wrap:hover h3, .billb-wrap:hover p.billb-text { color: #CDD500; transition: all 0.1s ease-in; } .billb-wrap:hover img { opacity: 1; transition: all 0.1s ease-in; } .billb-wrap:hover .btn { transition: all 0.2s ease-in; background: #CDD500; } .billb-msg-wrap { padding-top: 10px; width: 100%; z-index: 1; padding-bottom: 20px; } .bb-btn { display: none; } .billb-msg { text-align: center; font-size: 30px; line-height: 1.01em; color: #ffffff; letter-spacing: -0.03em; display: block; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .billb-msg { padding-top: 0; } .billb-logo-text, .billb-text { color: #CDD500; font-size: 18px; padding-top: 10px; margin: 0 0 5px 0; text-align: center; line-height: 1.01em; letter-spacing: -0.03em; display: block; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .billb-logo-text.black, .billb-text.black { color: #000000; } .billb-text-wrap span.btn { display: none; } /* don't display logos on mobile */ .slide-logo, .billb-slide-logo { display: none; } .billb-figure { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; padding: 0; margin: 0; width: 100%; height: 163px; position: relative; overflow: hidden; background-size: cover; background-position: 50% 0; -webkit-transform: translate3d(0, 0, 0); } .billb-msg-wrap.campaign .billb-text { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 20px; color: #CDD500; letter-spacing: 0.02em; text-transform: none; } .billb-msg-wrap.campaign .billb-msg { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; color: #000000; font-size: 25px; letter-spacing: 0.02em; text-transform: none; line-height: 30px; } } /* ======================== */ /* 768px ======================== */ @media (min-width: 768px) { .billb-msg-wrap { position: absolute; top: auto; padding-bottom: 0; height: 266px; bottom: 24px; } /* show the logo when not in mobile, hide the text version */ .billb-logo-text { display: none; } .billb-slide-logo { display: block; float: left; background-repeat: no-repeat; } .billb-text-wrap { float: left; position: absolute; bottom: 90px; text-align: center; } .billb-text-wrap span.btn { display: inline-block; margin-top: 10px; } .billb-text { color: #ffffff; } .billb-msg.white { color: #ffffff; } .billb-msg { color: #CDD500; } .billb-msg.black { color: #000000; } .billb-figure { width: 100%; height: 310px; } .bb-btn { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; color: #000000; /* min-width: 110px;*/ background: #CDD500; position: relative; display: inline-block; text-align: center; margin: 0 3px 10px 3px; padding: 10px 15px 10px 15px; font-size: 16px; transition: all 0.2s ease-out; } .bb-btn:hover { transition: all 0.2s ease-in; background: #ffffff; color: #000000; } /* overrides for dark billboards */ .billb-dark.billb-wrap { color: #ffffff; } .billb-dark.billb-wrap .billb-msg, .billb-dark.billb-wrap .billb-text, .billb-dark.billb-wrap .billb-logo-text { color: #ffffff; } .billb-dark.billb-wrap a:hover .billb-msg, .billb-dark.billb-wrap a:hover .billb-text, .billb-dark.billb-wrap a:hover .billb-logo-text { color: #CDD500; } .billb-msg-wrap.campaign .billb-text { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 20px; color: #ffffff; letter-spacing: 0.02em; text-transform: none; } .billb-msg-wrap.campaign .billb-msg { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; color: #ffffff; font-size: 35px; letter-spacing: 0.02em; text-transform: none; line-height: 40px; } .billb-msg-wrap.campaign .bb-btn { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 25px; letter-spacing: 0.02em; text-transform: uppercase; color: #CDD500; min-width: 110px; background: #f9f9f9; display: inline-block; position: relative; text-align: center; border-bottom: none !important; margin: 0 3px 10px 3px; padding: 15px 15px 15px 15px; } a:hover .campaign .billb-text { color: #000000; } a:hover .campaign .billb-msg { color: #000000; } a:hover .campaign .bb-btn { background-color: #000000; } /* a:hover { .billb-text { color:$wt; } .billb-msg { color:$wt; } }*/ .billb-wrap:hover .billb-msg.hoverwhite { color: #ffffff !important; } .billb-wrap:hover .billb-msg.hoverblack { color: #000000 !important; } .billb-wrap:hover .billb-msg.hoverbrand { color: #CDD500 !important; } .billb-wrap:hover .billb-text.hoverwhite { color: #ffffff; } .billb-wrap:hover .billb-text.hoverblack { color: #000000; } .billb-wrap:hover .bb-btn { background: #CDD500; } .billb-wrap:hover .bb-btn.white { background: #CDD500; color: #ffffff; } .billb-wrap:hover .bb-btn.black { background: #CDD500; } .billb-wrap:hover .billb-msg.white { color: #000000; } .billb-wrap:hover .billb-msg.black { color: #CDD500; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .billb-wrap, .billb-wrap figure { height: 330px; } .billb-wrap.billb-tall, .billb-wrap.billb-tall figure { height: 430px; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { .billb-figure { margin: 0 auto; background-size: cover; } } /* =============================== */ /* _________________________________________________________ PROJECT: Coke UI Kit CONTENT: Billboard Crops NOTES: These are the 4 cropping-scaling options for billboards ____________________________________________________________ */ /* 0px =========================== */ @media (min-width: 0) { /* STYLE 1 */ .bb-style-1 figure { background-size: cover; background-position: 50% 0; } /* STYLE 2 */ .bb-style-2 figure { background-size: cover; background-position: 75% 0; } /* STYLE 3 */ .bb-style-3 figure { background-size: cover; background-position: 25% 0; } /* STYLE 4 */ .bb-style-4 figure { background-size: cover; background-position: 50% 0; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { /* option 1 */ .bb-style-1 figure { background-size: cover; background-position: 50% 0; } /* option 2 */ .bb-style-2 figure { background-size: cover; background-position: 100% 0; } /* option 3 */ .bb-style-3 figure { background-size: cover; background-position: 0 0; } /* option 4 */ .bb-style-4 .bb-msg-wrap { left: 50%; } .bb-style-4 .bb-msg { text-align: center; left: 0; width: 100%; } .bb-style-4 figure { background-size: cover; background-position: 50% 0; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .billb-wrap { padding-top: 10px; } .is-Table { display: table; bottom: 0; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; float: none; position: relative; } .is-Table .Center-Block { width: 100%; margin: 0 auto; padding: 0 0 0 0; } .bb-style-1 .bb-msg-wrap { width: 50%; left: auto; right: 20px; height: 100%; } .billb-style-4 .billb-msg-wrap.billb-right { width: 50%; left: auto; right: 20px; height: 100%; } .billb-style-4 .billb-msg-wrap.billb-left { width: 50%; right: auto; left: 20px; height: 100%; } .billb-text-wrap { bottom: auto; } .billb-style-4 .billb-figure { background-size: cover; background-position: 50% 0; background-repeat: no-repeat; } } /* =============================== */ /* 1024px ======================== */ /* =============================== */ /* 1200px ======================== */ /* =============================== */ /*! * Bootstrap v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ /* * * This is a trimmed down version for Coca-Cola UI Kit * */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; -moz-box-sizing: border-box; box-sizing: border-box; } .nav-tabs { *zoom: 1; margin: 20px 0 0 0; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; line-height: 0; } .nav-tabs:after { clear: both; } .nav-tabs > li { display: inline-block; *display: inline; zoom: 1; font-size: 18px; height: 50px; } .nav-tabs > li > a { padding-right: 10px; padding-left: 10px; margin-right: 10px; line-height: 1em; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .nav-tabs > li > a { padding: 10px; line-height: 20px; background-color: #eee; text-align: center; display: block; } .tab-white .nav-tabs > li > a { background-color: #fff; } .nav-tabs > li > a:hover { color: #666; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #666; cursor: default; } .tab-wrapper { width: 280px; margin: 0 auto; text-align: left; } /* 768px ======================== */ @media (min-width: 768px) { .tab-wrapper { width: 80%; margin: 0 auto; text-align: left; } } /* =============================== */ .tabbable { *zoom: 1; } .tabbable:before, .tabbable:after { display: table; content: ""; line-height: 0; } .tabbable:after { clear: both; } .tab-content { overflow: auto; clear: left; text-align: left; background: #eee; padding: 10px; margin-bottom: 20px; } .tab-content p { text-align: left; } .tab-white .tab-content { background-color: #fff; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Hero element - large photo promo ____________________________________________ */ /* 0px =========================== */ @media (min-width: 0) { section.section-hero { padding: 20px 0 0 0; overflow: hidden; background: #000000; } section.section-hero .bb-wrap { position: relative; width: 100%; height: 300px; overflow: hidden; display: block; margin: 0; padding: 0; } section.section-hero .bb-msg-wrap { width: 100%; z-index: 1; background: #fff; padding-bottom: 20px; } section.section-hero .bb-msg-wrap .slide-logo { display: none; } section.section-hero .bb-msg-wrap .billb-text, section.section-hero .bb-msg-wrap .billb-msg { text-align: center; font-size: 48px; line-height: 1.01em; color: #222; letter-spacing: -0.03em; display: block; } section.section-hero .bb-msg-wrap .billb-msg { padding-top: 0; } section.section-hero .bb-msg-wrap .billb-text { font-size: 24px; color: #CDD500; padding-top: 10px; } section.section-hero .billb-dark .bb-msg-wrap .billb-text, section.section-hero .billb-dark .bb-msg-wrap .billb-msg { color: #ffffff; } /* don't display logos on mobile */ figure { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; padding: 0; margin: 0; width: 100%; height: 163px; position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } section.hero-large figure { height: 212px; } section.section-hero > .FeaturedCampaign.carousel .flex-direction-nav { display: none; } } /* ======================== */ /* 768px ======================== */ @media (min-width: 768px) { section.section-hero { /* show the logo when not in mobile, hide the text version */ /* tall billboard overrides */ } section.section-hero .billb-wrap a { position: static; } section.section-hero .logo-text { display: none; } section.section-hero .is-Table { display: table; bottom: 0; } section.section-hero .is-Table .Table-Cell { display: table-cell; vertical-align: middle; float: none; position: relative; } section.section-hero .is-Table .Center-Block { width: 325px; margin: 0 auto; padding: 0 0 0 0; } section.section-hero .billb-style-4 .billb-msg-wrap.billb-right { width: 50%; left: auto; right: 30px; height: 100%; } section.section-hero .billb-style-4 .billb-msg-wrap.billb-left { width: 50%; right: auto; left: 30px; height: 100%; } section.section-hero .billb-text-wrap { bottom: auto; position: relative; } section.section-hero .billb-style-4 .billb-figure { background-size: cover; background-position: 50% 0; background-repeat: no-repeat; } section.section-hero .billb-tall .billb-msg { font-size: 50px; } section.section-hero .billb-tall .billb-msg-wrap.billb-right { width: 50%; left: auto; right: 20px; height: 100%; } section.section-hero .billb-tall .billb-msg-wrap.billb-left { width: 50%; right: auto; left: 20px; height: 100%; } section.section-hero .billb-tall .is-Table .Center-Block { width: 100%; } section.section-hero .slide-logo { display: block; } section.section-hero .billb-wrap, section.section-hero .billb-wrap figure { max-width: 1175px; margin: 0 auto; background-size: cover; } section.hero-large .billb-wrap, section.hero-large .billb-wrap figure { height: 430px; max-width: 1175px; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { section.section-hero.section-slider .billb-wrap { padding-top: 0; } section.section-hero { padding-top: 0px; padding-bottom: 10px; } section.section-hero .headline { padding-top: 35px; } section.section-hero .is-Table .Center-Block { width: 325px; } section.section-hero .billb-style-4 .billb-msg-wrap.billb-right { width: 30%; } section.section-hero .billb-style-4 .billb-msg-wrap.billb-left { width: 30%; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { section.section-hero .billb-wrap, section.section-hero .billb-wrap figure { /* max-width:1175px;*/ margin: 0 auto; background-size: cover; } } /* =============================== */ /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Masthead without a slider, usually for sub-pages ____________________________________________ */ header, header.header-small { display: block; position: relative; z-index: 9999; background: #000000; float: left; width: 100%; height: 100px; border-top: 10px solid #000000; overflow: hidden; } header.header-small .logoMobileWrap { left: 50%; float: left; position: relative; } header.header-small .logoMobileWrap a img.logo { float: left; position: relative; top: 5px; height: auto; width: auto; display: inline-block; overflow: hidden; background: #000000; float: left; left: -50%; } header.header-wide, header.header-wide-subpage { display: none; } /* 0px =========================== */ /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { header.header-small { display: none; } header.header-wide { display: block; height: 198px; width: 100%; background: #000000; } header.header-wide .logoWrap { position: absolute; left: 0; width: 100%; cursor: pointer; } header.header-wide .logoWrap a { position: relative; text-indent: -9000em; float: left; margin: 0 0 0 -476px; width: 952px; height: 198px; left: 50%; cursor: default; background-color: transparent; background-size: 100%; } header.header-wide-subpage { display: block; height: 100px; width: 100%; } header.header-wide-subpage .logoSubWrap { position: absolute; left: 50%; margin-left: -200px; width: 400px; cursor: pointer; } header.header-wide-subpage .logoSubWrap a { position: relative; text-indent: -9000em; height: 100px; display: block; } .header-wrap { position: relative; float: left; width: 100%; height: 0px; z-index: 9999; } .header-center { position: absolute; z-index: 999; margin: 0px 10px 10px 0px; top: 0px; left: 0px; width: 100%; } } /* 1200px ======================== */ @media (min-width: 1200px) { header.header-wide .header-cap-left, header.header-wide .header-cap-right { width: 30%; } } /* =============================== */ /* _________________________________________ PROJECT: Coke UI Kit CONTENT: Navigation Bar and Search Form Styles ____________________________________________ */ /* 0px =========================== */ @media (min-width: 0) { .nav { float: left; width: 100%; height: auto; padding-top: 0px; } .level1 { height: 34px; } } @media screen and (min-width: 0) and (max-width: 480px) { #mobile-nav-wrap #mobile-nav-jump > a { position: relative; text-indent: -9999px; overflow: hidden; /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: all ease-out 0.1s; } #mobile-nav-wrap #mobile-nav-jump > a:before { content: ""; position: absolute; top: 13px; left: 50%; margin-left: -7px; width: 1em; height: 0.125em; width: 14px; border-top: 6px double #CDD500; border-bottom: 2px solid #CDD500; } } @media (min-width: 0) { /* Hide main nav menu and show the sitemap jumplink */ #nav-top-menu, #subnavs, .pushdown-search { display: none; } #mobile-nav-wrap { position: relative; z-index: 999; float: left; width: 100%; height: auto; padding: 10px 0; } #mobile-nav-jump { background: #ffffff; text-align: center; } #mobile-nav-jump a { line-height: 1.5em; width: 100%; display: block; font-size: 18px; padding: 4px 0; margin: 0; letter-spacing: -0.04em; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; color: #CDD500; background: #161616; } #mobile-nav-jump a:hover { color: #CDD500; } } @media only screen and (min-width: 0) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-width: 0) and (min--moz-device-pixel-ratio: 1.3), only screen and (min-width: 0) and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-width: 0) and (min-resolution: 125dpi), only screen and (min-width: 0) and (min-resolution: 1.3dppx) { #nav-search .search-btn { display: inline-block; margin: 0; padding: 8px; width: 18px; height: 18px; line-height: 1em; text-indent: -9999px; cursor: pointer; background: url(../img/btns/btn-search@x2.png) 50% 50% no-repeat transparent; background-size: 18px 18px; } #nav-search .search-btn:hover { background: url(../img/btns/btn-search-over@x2.png) 50% 50% no-repeat #CDD500; } #nav-search .search-btn-active { background: #ffffff url(../img/btns/btn-search-over@x2.png) 50% 50% no-repeat; background-size: 18px 18px; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { #mobile-nav-wrap { display: none; } #nav-top-menu { display: block; } #overflowbutton { display: auto; } section.nav { position: relative; float: left; width: 100%; padding: 10px 0 10px 0; /*common base styles for the nav's main and sub elements*/ /* ul.level2 li > ul.level2 {display:none;} */ } section.nav li { font-size: 18px; } section.nav li a { width: auto; padding: 7px 9px 7px 9px; letter-spacing: -0.04em; display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; color: #ffffff; transition: all 0.2s ease-out; } section.nav li a:hover { background: #CDD500; color: #000000; transition: all 0.1s ease-in; } section.nav ul.level3 li a, section.nav ul.level3b li a { text-transform: capitalize; } section.nav .active > a { background: #CDD500; color: #000000; } section.nav a.current { color: #000000; } section.nav ul.level1 { width: auto; text-align: center; position: relative; white-space: nowrap; } section.nav ul.level1 > li, section.nav #overflowbutton { display: inline; margin: 0 2px 0 2px; } section.nav ul.level1 > li > a, section.nav #overflowbutton > a { display: inline-block; } section.nav ul.level2, section.nav ul.level3, section.nav ul.level3b { float: left; position: absolute; white-space: normal; left: 0; top: 44px; width: 100%; text-align: center; background-color: #161616; list-style: none; padding: 6px 0px; } section.nav ul.level2 li, section.nav ul.level3 li, section.nav ul.level3b li { font-size: 16px; display: inline; background-color: transparent; color: #ffffff; } section.nav ul.level2 li a, section.nav ul.level3 li a, section.nav ul.level3b li a { display: inline; padding: 5px 10px; transition: all 0.2s ease-out; } section.nav ul.level2 li a:hover, section.nav ul.level3 li a:hover, section.nav ul.level3b li a:hover { color: #CDD500; background-color: transparent; transition: all 0.1s ease-in; } section.nav ul.level3 { background-color: #161616; } section.nav ul#overflowitems.level2 { display: inline; } section.nav ul#overflowitems.level2 li a:hover { color: #CDD500; background-color: none; transition: all 0.1s ease-in; } section.nav ul#overflowitems.level2 li .active > a { background: #CDD500; color: #ffffff; } section.nav ul.level2 { background: #161616 !important; padding: 6px; } section.nav ul.level2 .active > a { background-color: transparent !important; color: #CDD500; } section.nav ul.level3b { background: none !important; padding: 16px; } section.nav ul.level3b .active > a { background-color: transparent !important; color: #CDD500; } section.nav ul#overflowitems.level2 ul.level3 { top: 55px; } section.nav ul#overflowitems.level2 ul.level3 li a { display: inline; padding: 0 0px 0 0; } section.nav ul#overflowitems.level2 ul.level3 li a:hover { color: #CDD500; background-color: transparent; transition: all 0.1s ease-in; } section.nav ul.level2 li:after { content: " / "; } section.nav ul.level2 li:last-child:after { content: ""; } section.nav ul.noslash li:after { content: ""; } section.nav ul.noslash li ul li:after { content: " / "; } section.nav ul.noslash li ul li:last-child:after { content: ""; } section.nav #overflowitems { background: none !important; top: 30px; border-top: 0; } section.nav #overflowitems > li { line-height: 1em; font-size: 18px; } section.nav #overflowitems > li a { padding: 7px 9px 7px 9px; letter-spacing: -0.04em; } section.nav ul.level1 > li > ul { display: none; } section.nav ul.level1 > li:hover > ul { /* this would theoretically be for non-javascript hovers */ } section.nav #overflowitems > li > ul { display: none; } section.nav #nav-more { display: inline-block; border: 1px solid purple; } section.nav #nav-more .nav-btn { margin-right: 0; } #nav-search { display: inline; margin: 0; padding: 0; } #nav-search .search-btn { display: inline-block; margin: 0; padding: 8px; width: 18px; height: 18px; line-height: 1em; text-indent: -9999px; cursor: pointer; background: url(../img/btns/btn-search.png) 50% 50% no-repeat transparent; transition: all 0.2s ease-out; } #nav-search .search-btn:hover { transition: all 0.1s ease-in; background: url(../img/btns/btn-search-over.png) 50% 50% no-repeat #CDD500; } #nav-search .search-btn-active { background: #ffffff url(../img/btns/btn-search-over.png) 50% 50% no-repeat; } #nav-search .search-wrap { position: relative; float: left; } #navsearchform { float: right; width: 100%; margin: 0; padding: 0; overflow: hidden; background: transparent; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; color: #CDD500; } #navsearchform input[type="text"] { position: relative; display: block; z-index: 9999; width: 95%; height: 20px; text-align: center; overflow: hidden; border: 0; margin: 0 auto; padding: 0; text-transform: uppercase; font-size: 18px; line-height: 1em; color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; -webkit-appearance: none; background-color: #161616; } #navsearchform input[type="submit"] { display: none; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { #navsearchform input[type="text"] { width: 98%; } section.stuck { position: fixed !important; top: 0px; left: 0px; width: 100%; background-color: #000; display: block; } section.sticky ul.level3b { background-color: #000 !important; } } /* =============================== */ /* _________________________________________________________ PROJECT: Coke UI Kit CONTENT: Login Section ____________________________________________________________ */ /* 0px =========================== */ @media (min-width: 0) { .section-login { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; height: auto; padding: 10px; } .section-login .main { width: 100%; left: 0; margin: 0; } .section-login .main a.btn-fb-login { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; height: 60px; background: #37589B; color: #fff; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; font-size: 15px; text-align: center; padding: 20px 0 0 0; cursor: pointer; transition: all 0.2s ease-out; } .section-login .main a.btn-fb-login:hover { opacity: .8; transition: all 0.1s ease-in; } .section-login .main p.label { float: left; width: 100%; height: auto; text-align: center; color: #666666; font-size: 16px; margin: 10px 0; } .section-login .main .form-labels { float: left; width: 100%; height: auto; font-size: 13px; margin: 0 0 8px 0; } .section-login .main .form-labels input { float: left; width: 20px; text-indent: 4px; color: #000000; } .section-login .main .form-labels label { float: left; width: auto; padding-top: 2px; } .section-login .main .form-labels a.right { float: right; } .section-login .main .form-labels a.left { float: left; width: 100%; } .section-login .main .form-btns { float: left; width: 100%; height: auto; margin: 0 0 20px 0; } .section-login .main .form-btns .btn { padding: 2px 45px 0 45px; } } /* =============================== */ /* _________________________________________________________ PROJECT: Coke UI Kit CONTENT: Styles for creating forms ____________________________________________________________ */ .form-wrap { width: 280px; margin: 0 auto; } .form-wrap h4 { margin: 20px 0 10px 0; } .form-wrap p { font-size: 14px; } label, .form-label { font-size: 14px; } span.required { color: red; } fieldset.birthday { margin: 5px 0; padding: 0; } .frm-select-small { width: 85px; margin-right: 10px; float: left; } .frm-select-small-last { margin-right: 0; width: 90px; float: left; } .commenttext { margin: 10px 0; } .commenttext textarea { height: 90px; } input[type="text"], input[type="tel"], input[type="email"], select { /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ font-family: inherit; margin: 0; border-radius: 0; /* for Safari */ } select { border: 1px inset #ccc; background: #fff url(../../coca-cola/img/icons/downselectarrow.png) right center no-repeat; /* Necessary to customize dropdown arrow in WebKits*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01em; text-overflow: ""; line-height: 1; padding: 10px 5%; } #recaptcha_widget { width: 100%; /*background: $brand-primary;*/ color: #ffffff; padding: 10px 0; /*border: 2px solid $brand-primary;*/ border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; margin-bottom: 10px; position: relative; -moz-box-sizing: border-box; box-sizing: border-box; } #recaptcha_widget * { -moz-box-sizing: border-box; box-sizing: border-box; } #recaptcha_response_field { text-align: center; } #recaptcha_image, #recaptcha_challenge_image { width: 255px; height: 60px; } span.recaptcha_only_if_image, span.recaptcha_only_if_audio { text-align: center; padding: 8px 0 3px; display: block; font-size: 16px; } #recaptcha_submit_button { display: block; margin: 0 auto; background: #ffffff; border: none; cursor: pointer; } #recaptcha_submit_button:hover { background: #CDD500; /*color: $wt;*/ } div.captcha-options { width: 141px; float: right; position: absolute; top: 10px; left: 260px; } div.captcha-options .captcha-text { font-size: 9px; opacity: 0; margin-left: 3px; transition: opacity .2s ease-out; display: none; } div.captcha-options span { float: left; display: block; } div.captcha-options span.captcha-icon { padding: 3px 2px; width: 19px; height: 20px; background: #CDD500; color: #ffffff; font-size: 13px; transition: color .2s ease-out, background .2s ease-out, border .2s ease-out; } div.captcha-options span.captcha-icon:hover { background: #ffffff; color: #CDD500; } div.captcha-options span.captcha-icon-loop { border: 1px solid #ffffff; } div.captcha-options span.captcha-icon-help { border: 1px solid #ffffff; } div.captcha-options span.captcha-icon-volume-medium { padding: 4px 3px 3px; } div.captcha-options span.captcha-icon-text { padding: 4px 2px; } div.captcha-options > div { clear: both; } div.captcha-options > div:hover span.captcha-text { opacity: 1; } div.captcha-options div.recaptcha_only_if_image span.captcha-icon, div.captcha-options div.recaptcha_only_if_audio span.captcha-icon { border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; } div.captcha-options div.recaptcha_only_if_image span.captcha-icon:hover, div.captcha-options div.recaptcha_only_if_audio span.captcha-icon:hover { /*border-top: 1px solid $brand-primary; border-bottom: 1px solid $brand-primary;*/ } /* 0px =========================== */ @media (min-width: 0) { .section-form { -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; height: auto; padding: 10px; } .section-form .main { width: 100%; left: 0; margin: 0; } .section-form .main a.btn-fb-login { display: block; width: 100%; background: #37589B; color: #fff; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; font-size: 15px; text-align: center; padding: 20px 0 20px 0; margin-bottom: 5px; cursor: pointer; transition: all 0.2s ease-out; } .section-form .main a.btn-fb-login:hover { opacity: .8; transition: all 0.1s ease-in; } .section-form .main .label-top { float: left; width: 100%; height: auto; text-align: center; color: #666666; font-size: 16px; margin: 10px 0; } .section-form .main .form-inline-labels { float: left; width: 100%; height: auto; font-size: 13px; margin: 0 0 8px 0; } .section-form .main .form-inline-labels input, .section-form .main .form-inline-labels textarea { float: left; width: 20px; text-indent: 4px; color: #000000; } .section-form .main .form-inline-labels label { float: left; width: auto; padding-top: 2px; } .section-form .main .form-inline-labels a.right { float: right; } .section-form .main .form-inline-labels a.left { float: left; width: 100%; } .section-form .main .form-top-labels { float: left; width: 100%; height: auto; font-size: 13px; margin: 0 0 8px 0; } .section-form .main .form-top-labels input, .section-form .main .form-top-labels textarea { float: left; width: 100%; text-indent: 4px; color: #000000; } .section-form .main .form-top-labels label { float: left; width: 100%; text-align: left; padding-top: 2px; } .section-form .main .form-top-labels a.right { float: right; } .section-form .main .form-top-labels a.left { float: left; width: 100%; } .section-form .main .form-btns { float: left; width: 100%; height: auto; margin: 0 0 20px 0; } .section-form .main .form-btns .btn { width: 125px; float: left; padding: 2px 5px 0; } .section-form .main .form-btns .spine { margin-right: 10px; } } /* =============================== */ /* _________________________________________________________ PROJECT: Coke UI Kit CONTENT: Article Section Template ____________________________________________________________ */ .article-headline { font-size: 50px; text-transform: none; line-height: 1em; } .h-recipe .headline { text-transform: none; } .section-article .h-recipe p.recipe-intro { text-align: center; } .h-recipe h4, .h-recipe h2 { padding-top: 2em; } .h-recipe .p-ingredient { display: block; width: 100%; line-height: 1.4em; } .h-recipe .p-ingredient span { display: inline-block; text-align: right; width: 48%; font-weight: bold; padding-right: 2%; vertical-align: top; } .h-recipe .p-ingredient span:first-child + span { text-align: left; padding-right: 0; width: 50%; font-weight: normal; } .section-article .h-recipe ol li { font-weight: bold; list-style-type: decimal; list-style-position: inside; margin-bottom: 1.5em; } .section-article .h-recipe ol li p { font-weight: normal; display: inline; margin: 0; padding: 0; float: none; width: auto; } /* 0px =========================== */ @media (min-width: 0) { .section-article.bg-override { background-color: #fff; } .section-article.bg-override h1.headline { color: #000000; } .section-article.bg-override h2 { color: #000000; } .section-article.bg-override p { color: #000000; } .section-article.bg-override a { color: #000000; } .section-article.bg-override a:hover { color: #CDD500; } .section-article.bg-override .h-recipe h4, .section-article.bg-override .h-recipe h2, .section-article.bg-override .h-recipe .p-ingredient, .section-article.bg-override .section-article .h-recipe ol li { color: #000000; } .section-article { padding-top: 0; } .section-article .article { float: left; width: 92%; height: auto; margin: 4% 4%; padding: 0 0 24px; text-align: center; } .section-article .article img { max-width: 100%; } .section-article .article h1.headline { float: left; width: 100%; margin: 0; padding: 10px 0 0 0; font-size: 30px; line-height: 1em; text-transform: none; } .section-article .article h2 { float: left; width: 100%; margin: 12px auto 0; font-size: 15px; line-height: 20px; } .section-article .article p { float: left; width: 100%; margin: 5px 0; font-size: 16px; line-height: 1.5em; text-align: left; } .section-article .article a { font-weight: 700; } .section-article .article a:hover { color: #CDD500; } .section-article .article p.center { text-align: center; } .section-article .h-recipe h4, .section-article .h-recipe h2 { padding-top: 2em; margin-bottom: 20px; font-size: 20px; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-article .article { position: relative; left: 50%; width: 728px; margin: 27px 0 0 -374px; padding: 0 10px 24px 10px; } .section-article .article .headline { width: 90%; margin: 0; } .section-article .article h1.headline, .section-article .article h3.headline { float: left; width: 100%; margin: 0; font-size: 50px; padding: 30px 0 25px; text-align: center; } .section-article .article h3.headline { padding: 0 0 25px 0; text-transform: none; letter-spacing: -0.04em; } .section-article .article h2 { width: 100%; margin: 0 0 20px 0; font-size: 20px; line-height: 26px; } .section-article .article p.center { text-align: center; } .section-article .h-recipe h1.headline, .section-article .h-recipe p.recipe-intro { padding: 10px 15% 0 15%; width: 70%; } } /* =============================== */ /*================= Table / Table Saw styles =================*/ /* Much like the styles for .section-article .article h2 Abusing !important here so that we don't need to worry about stylesheet import order. */ table caption, .tablesaw caption { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; color: #ffffff !important; margin: 0 0 20px 0 !important; text-align: center !important; font-size: 20px; opacity: 1 !important; -webkit-filter: none !important; filter: none !important; width: 100%; } table caption.left, .tablesaw caption.left { text-align: left; } .bg-override table caption, .bg-override .tablesaw caption, .bg-override .tablesaw-cell-label { color: #000000 !important; } .article table { border-collapse: collapse; clear: both; margin: 5px 0 10px; line-height: inherit; /* Add class when even-width columns are desired. */ } .article table.even-cols { table-layout: fixed; } .article td, .article th, .article .tablesaw th { padding: 15px 20px; } .article td, .article .tablesaw td { background: #888888; vertical-align: top; } .article .tablesaw thead { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; vertical-align: middle; background: #444444; } .article .tablesaw thead, .article .tablesaw td, .article .tablesaw th, .article .tablesaw-cell-label { font-size: 16px; color: #ffffff; font-family: inherit; } .article .tablesaw { border: 1px solid #000000; } .article .tablesaw td, .article .tablesaw th, .article .tablesaw thead, .article .tablesaw thead tr:first-child th { border: 1px solid #000000; } .article .tablesaw td, .article .tablesaw th { line-height: 1.5; text-transform: none; } .article .tablesaw thead tr th, .article .tablesaw thead tr:first-child th { font-weight: bold; font-family: inherit; text-shadow: none; } .article .tablesaw .tablesaw-stack td .tablesaw-cell-label, .article .tablesaw .tablesaw-stack th .tablesaw-cell-label { display: block; text-transform: none; } .article .tablesaw tbody tr, .article .tablesaw-stack tbody tr { border-bottom: none; } .light-bg .tablesaw { border: 1px solid #161616; } .light-bg .tablesaw td, .light-bg .tablesaw th, .light-bg .tablesaw thead, .light-bg .tablesaw thead tr:first-child th { border: 1px solid #161616; } .light-bg .bg-override .tablesaw, .dark-bg .bg-override .tablesaw, .mild-bg .bg-override .tablesaw, .bg-override.light-bg .tablesaw, .bg-override.dark-bg .tablesaw, .bg-override.mild-bg .tablesaw { border: 1px solid #ffffff; color: #000000; } .light-bg .bg-override .tablesaw thead, .dark-bg .bg-override .tablesaw thead, .mild-bg .bg-override .tablesaw thead, .bg-override.light-bg .tablesaw thead, .bg-override.dark-bg .tablesaw thead, .bg-override.mild-bg .tablesaw thead { background: #dddddd; } .light-bg .bg-override .tablesaw td, .dark-bg .bg-override .tablesaw td, .mild-bg .bg-override .tablesaw td, .bg-override.light-bg .tablesaw td, .bg-override.dark-bg .tablesaw td, .bg-override.mild-bg .tablesaw td { background: #eeeeee; } .light-bg .bg-override td, .light-bg .bg-override th, .light-bg .bg-override thead, .light-bg .bg-override thead tr:first-child th, .dark-bg .bg-override td, .dark-bg .bg-override th, .dark-bg .bg-override thead, .dark-bg .bg-override thead tr:first-child th, .mild-bg .bg-override td, .mild-bg .bg-override th, .mild-bg .bg-override thead, .mild-bg .bg-override thead tr:first-child th, .bg-override.light-bg td, .bg-override.light-bg th, .bg-override.light-bg thead, .bg-override.light-bg thead tr:first-child th, .bg-override.dark-bg td, .bg-override.dark-bg th, .bg-override.dark-bg thead, .bg-override.dark-bg thead tr:first-child th, .bg-override.mild-bg td, .bg-override.mild-bg th, .bg-override.mild-bg thead, .bg-override.mild-bg thead tr:first-child th { border: 1px solid #ffffff; color: #000000; } .bg-override table caption, .bg-override .tablesaw caption, .bg-override .tablesaw-cell-label { color: #000000 !important; } @media only all { .article td, .article .tablesaw td { background: #444444; } .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: block !important; text-transform: none; } .tablesaw td, .tablesaw th { text-transform: none; } .article .tablesaw td.hacked-tablesaw-empty-cell { display: none; } } @media (min-width: 40em) { .article .tablesaw td.hacked-tablesaw-empty-cell { display: table-cell; } } /* ___________________________________________________________________________ PROJECT: Coke UI Kit CONTENT: media slideshow for mantle area NOTES: jQuery FlexSlider v2.0 http://www.woothemes.com/flexslider/ http://www.gnu.org/licenses/gpl-2.0.html ______________________________________________________________________________ */ .slider-ie-hack { display: none; } /* 0px =========================== */ @media (min-width: 0) { section.section-slider { padding: 0; overflow: hidden; } section.section-slider .homeslider-nav { display: none; } section.section-slider .bb-wrap { position: absolute; top: 0px; left: 0px; float: left; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 0 160px 0; } section.section-slider .flex-active-slide .bb-msg-wrap { display: block; } section.section-slider .bb-msg-wrap { position: absolute; top: 10px; left: auto; margin: 0 5%; width: 90%; height: 100%; z-index: 1; font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } section.section-slider .bb-msg { font-size: 16px; } section.section-slider .bb-msg-mobile-title, section.section-slider .bb-msg-mobile-sub { position: relative; top: 160px; width: 100%; max-width: 300px; margin: 0 auto 10px; height: auto; text-align: center; font-size: 30px; line-height: 1.01em; color: #222; z-index: 1; letter-spacing: -0.03em; } section.section-slider .bb-msg-mobile-title { padding-top: 0; color: #ffffff; } section.section-slider .bb-msg-mobile-sub { font-size: 20px; color: #CDD500; padding-top: 10px; } section.section-slider #mobile-homeslider .slide-logo { position: absolute; width: 100%; padding: 0; text-align: center; z-index: 2000; top: 60px; left: 0; /* logos hidden from mobile slider for now */ display: none; } section.section-slider #mobile-homeslider .slide-logo img { width: 45%; margin: 0 auto; } section.section-slider .bb-btn { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; color: #000000; /*min-width: 110px;*/ background: #CDD500; position: relative; display: inline-block; text-align: center; margin: 0 3px 10px 3px; padding: 10px 25px 10px 25px; font-size: 16px; transition: all 0.2s ease-out; } section.section-slider .bb-btn:hover { transition: all 0.2s ease-in; color: #000000; background: #ffffff; } section.section-slider .bb-btn.black { background: #000000; color: #ffffff; } section.section-slider .bb-btn.white { background: #ffffff; color: #000000; } .bb-msg-wrap.campaign .bb-msg { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 35px; letter-spacing: 0.02em; text-transform: none; line-height: 40px; } .bb-msg-wrap.campaign .bb-btn { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 25px; letter-spacing: 0.02em; text-transform: uppercase; color: #CDD500; min-width: 110px; background: #f9f9f9; display: inline-block; position: relative; text-align: center; border-bottom: none !important; margin: 0 3px 10px 3px; padding: 15px 15px 15px 15px; } .bb-msg-wrap.campaign .bb-msg-mobile-title { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 25px; letter-spacing: 0.02em; text-transform: none; line-height: 30px; } .bb-msg-wrap.campaign .bb-msg-mobile-sub { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 20px; letter-spacing: 0.02em; text-transform: none; line-height: 25px; } .bb-msg-wrap.campaign .bb-text { font-family: 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 20px; color: #000000; letter-spacing: 0.02em; text-transform: none; } #homeslider { display: none; } #mobile-homeslider { width: 100%; display: block; top: 0; float: left; width: 76.5625%; margin: 0 11.71875%; height: auto; } #mobile-homeslider li a { margin: 0 2%; width: 96%; } #mobile-homeslider .bb-wrap { position: relative; } #mobile-homeslider .slides { width: 300px; margin: 0 auto; } .flex-control-nav { display: none; } #mobile-homeslider .sliders { height: 240px; } /* FlexSlider Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flex-pauseplay span { text-transform: capitalize; } .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } .no-js .slides > li:first-child { display: block; } .flexslider { margin: 0; background: transparent; border: none; position: relative; zoom: 1; } .carousel li { margin-right: 5px; } #slider { display: block; position: relative; height: 160px; background: #ffffff; top: 0; padding-top: 0; padding-bottom: 0; /*overflow: hidden;*/ } #slider .slides { float: left; width: auto; overflow: hidden; zoom: 1; float: left; width: 290px; margin: 0; } #slider .slides img.center-slide { width: 668px; padding-bottom: 205px; margin-left: -140px; } #slider .slide-messages { float: left; height: 330px; text-align: center; margin: 0; width: 100%; position: relative; top: 200px; } #slider .slide-messages h2, #slider .slide-messages h3 { width: 100%; text-align: center; line-height: 1em; } #slider .slide-messages h2 { font-size: 20px; } #slider .slide-messages h3 { font-size: 50px; letter-spacing: -0.06em; } #slider .slide-messages .btn { margin-top: 20px; } #slider .slide-messages li { position: relative; display: none; height: 330px; margin-top: 10px; } } /* ======================== */ /* 768px ======================== */ @media (min-width: 768px) { /*