/* New Crabbie's green: #288C3D */ /* Reset */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; } html { overflow-y: scroll; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } article, aside, details, figcaption,figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } del { color: #333; } ins { background: #fff9c0; text-decoration: none; } hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; padding: 0; color: #ccc; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } small { font-size: smaller; } img { border: 0; -ms-interpolation-mode: bicubic; } html, body { height: 100%; background: url(../images/pageBack.jpg) repeat 0 0; } body, input, select, textarea { font-family: "brandon-grotesque"; color: #212121; font-size: 1em; } #page { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -260px; min-width: 960px; overflow: hidden; } #page:after { content: ''; display: block; height: 260px; } footer { height: 260px; } #main { } #content { width: 960px; margin: 0 auto; padding-bottom: 50px; } #content:after { content: ' '; display: block; clear: both; } a { outline: 0; } .maxWidth { width: 960px; margin-left: auto; margin-right: auto; } /* Site Wide */ h2 { font-size: 3em; text-transform: uppercase; font-weight: bold; text-align: center; margin: 40px 0; position: relative; line-height: 0.9em; } h2.bordered { margin: 80px 0; } h2.bordered:before, h2.bordered:after { content: ' '; display: block; width: 300px; height: 7px; background-color: #212121; position: absolute; left: 50%; margin-left: -150px; top: -20px; } h2.bordered:after { top: auto; bottom: -20px; } .button { display: inline-block; background-color: #eb2b0e; padding: 10px 15px; color: #fff; font-weight: bold; text-transform: uppercase; color: #fff; text-decoration: none; border-width: 0; /*border-radius: 5px; border-bottom: 3px solid #b5172a; */ cursor: pointer; } /*.button:hover { border-bottom-width: 0; position: relative; top: 3px; }*/ .backBar { margin: 30px 0 } .backBar a { background-color: #eb2b0e; padding: 5px 20px; color: #fff; font-weight: bold; text-transform: uppercase; text-decoration: none; border-radius: 20px; position: relative; margin-left: 15px; } .backBar a:before { position: absolute; top: 50%; left: -15px; content: ' '; width: 0; height: 0; border: 5px inset transparent; border-right: 15px solid #eb2b0e; margin-top: -5px; } .avp-open { /*overflow: hidden;*/ } /* Header */ header { height: 135px; background: #000000;position: relative; z-index: 10; } header:after { content: ' '; display: block; width: 489px; height: 5px; position: absolute; top: 100%; left: 50%; margin-left: -245px; background: url(../images/headerShadow.png) no-repeat 0 0; } header .inner { max-width: 960px; height: 100%; margin: 0 auto; position: relative; } header h1 { width: 186px;height: 98px;float: left;margin-top: 17px; } header h1 a { display: block; width: 100%; height: 100%; background: url(../images/headerLogo.png) no-repeat center; text-indent: 200%; overflow: hidden; white-space: nowrap; } header #navGroup a:hover, header #navGroup a.on { color: #eb2b0e; } header #topLinks { position: absolute; top: 10px; right: 30px; } header #topLinks a { font-weight: bold; color: #ffffff; text-decoration: none; float: left; line-height: 23px; padding: 0 15px 0 40px; position: relative; } header #topLinks a:after { content: ' '; display: block; width: 3px; height: 23px; background: url(../images/topLinksSeperator.png) no-repeat 0 0; position: absolute; top: 0px; right: -2px; } header #topLinks a:before { content: ' '; display: block; width: 17px; height: 17px; background: url(../images/topLinkIcons.png) no-repeat 0 0; position: absolute; top: 3px; left: 14px; } header #topLinks a.jtc:before { background-position: 0 0; } header #topLinks a.find:before { background-position: -17px 0; } header #topLinks a.contact:before { background-position: -34px 0; } header #topLinks a.int:before { background-position: -51px 0; } header #topLinks a:last-child:after { content: none; display: none; } header nav { height: 44px; float: right; position: relative; font-size: 0.85em; margin: 70px 0 0; } /*header nav:before { width: 21px; height: 44px; content: ' '; background: url(../images/headerNavBack.png) no-repeat 0 0; position: absolute; left: -21px; top: 0; }*/ header nav a { line-height: 44px; padding: 0 20px; text-decoration: none; color: #ffffff; display: block; float: left; font-weight: bold; text-transform: uppercase; position:relative; transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; } header nav a:before { content: ' '; display: block; width: 8px; height: 8px; background: url(../images/navSeperator.png) no-repeat 0 0; position: absolute; top: 18px; left: -4px; } header nav a:first-child:before { content: none; display: none; } /*header nav a:last-child { position: absolute; right: 0; text-indent: 200%;overflow: hidden;white-space: nowrap;background: #FC890B;height: 74px;width: 94px;background: url("../images/ct-arrow.png") no-repeat;margin-top: -20px; }*/ /*header nav a:last-child:before { background: none }*/ header nav a.on:after { content: ' '; display: block; width: 26px; height: 31px; position: absolute; top: -15px; left: 50%; margin-left: -13px; background: url(../images/navOnArrow.png) no-repeat 0 0; } /* General Grid Stuff */ .gridLayout { margin: 30px auto; } .gridBox { width: 300px; position: relative; margin-bottom: 30px; } .gridBox>img { display: block; width: 300px; } .gridBox.double { width: 630px; } .gridBox.shadowed:after { content: ' '; display: block; width: 278px; height: 25px; background: url(../images/gridBoxShadow.png) no-repeat 0 0; position: absolute; bottom: -25px; left: 50%; margin-left: -139px; } .contentGrid .gridBox { background-color: #fff; border-radius: 10px; overflow: hidden; } .contentGrid .gridBox .inner { padding: 25px; font-size: 1.2em; line-height: 1.4em; } .contentGrid .gridBox img+.inner { padding-top: 10px; } .contentGrid .gridBox>img { border-radius: 10px 10px 0 0; } .contentGrid .gridBox a { color: #d3d229; text-decoration: none; font-weight: bold; } .contentGrid .gridBox>.viewLink { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-color: #D3D229; background-color: rgba(179, 37, 0, 0.8); color: #fff; font-weight: bold; text-decoration: none; text-align: center; text-transform: uppercase; font-size: 1.3em; line-height: 1em; transition: top 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out; -webkit-transition: top 0.2s ease-in-out; } .contentGrid .gridBox>.viewLink>span { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; margin-top: -0.7em; } .contentGrid .gridBox>.viewLink span span { border-bottom: 4px solid #eb2b0e; } .contentGrid .gridBox:hover a.viewLink { top: 0; } .touch .contentGrid .gridBox a.viewLink { top: 0; background-color: transparent; position: static; } .touch .contentGrid .gridBox a.viewLink span { display: block; position: static; border-width: 0; } .touch .contentGrid .gridBox a.viewLink span span { display: inline-block; background-color: #eb2b0e; padding: 5px 15px; color: #fff; font-size: 0.9em; margin: 5px auto 10px; border-radius: 5px; border-bottom: 3px solid #b5172a; } .gridBox.latestTweet { height: 310px; font-size: 1.7em; color: #fff; line-height: 1.2em; text-align: left; padding: 30px; width: 240px; border-color: #db480f; background: #db480f; margin-bottom: 60px; border-radius: 10px; box-shadow: 0 15px 20px -20px #000; } .gridBox.latestTweet:before { content: ' '; display: block; position: absolute; width: 117px; height: 118px; top: -18px; right: -20px; background: url(../images/latestTweetIcons.png) no-repeat 0 0; } .gridBox.latestTweet:after { content: ' '; display: block; width: 0; height: 0; position: absolute; left: 30px; bottom: -60px; border: 30px solid transparent; border-top-color: inherit; } .gridBox.latestTweet .inner { position: relative; z-index: 10; } .gridBox.latestTweet .inner:before { content: ' '; display: block; float: right; width: 60px; height: 55px; } .gridBox.latestTweet strong { color: #000; } .gridBox.latestTweet .inner a { color: #fff; text-decoration: none; opacity: 0.5; word-wrap: break-word; } .gridBox.latestTweet .links { position: absolute; bottom: -30px; right: 0; } .gridBox.latestTweet .links a { background: url(../images/latestTweetIcons.png) no-repeat -120px 0; margin-left: -25px; float: left; width: 87px; height: 86px; text-indent: 200%; overflow: hidden; white-space: nowrap; } .gridBox.latestTweet .links a.twitter { background-position: -210px 0; z-index: 1; position: relative; } .gridBox.latestTweet:before { z-index: 20; } .gridBox.latestTweet { height: auto; padding-bottom: 60px; min-height: 250px; } .gridBox.latestTweet img { margin: -30px -30px 20px -30px; border-radius: 10px 10px 0 0; max-width: 300px; display: none } .gridBox#crabbiesTime { margin-bottom: 60px; } .gridBox.default a { text-indent: 200%;overflow: hidden;white-space: nowrap; } .gridBox#winChristmas a { text-indent: 200%;overflow: hidden;white-space: nowrap;display: block;background: url("../images/win-adventure-christmas.png") no-repeat top center;height: 100%; } @-webkit-keyframes ANIM_SPIN { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-moz-keyframes ANIM_SPIN { 0% { transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -moz-transform: rotate(360deg); } } @keyframes ANIM_SPIN { 0% { transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .loadingIcon { width: 63px; height: 61px; margin: 20px auto; background: url(../images/clockface.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; position: relative; display: none; } .loadingIcon:before, .loadingIcon:after { content: ' '; display: block; width: 4px; height: 15px; position: absolute; bottom: 50%; left: 50%; margin-left: -1px; background-color: #808080; opacity: 0.5; border-radius: 2px; transform-origin: 50% 100%; } .loadingIcon:before { height: 20px; animation: ANIM_SPIN linear 0.5s infinite; -moz-animation: ANIM_SPIN linear 0.5s infinite; -webkit-animation: ANIM_SPIN linear 0.5s infinite; } .loadingIcon:after { animation: ANIM_SPIN linear 10s infinite; -moz-animation: ANIM_SPIN linear 10s infinite; -webkit-animation: ANIM_SPIN linear 10s infinite; } .contentGrid.loading+.loadingIcon { display: block; } a.scrollNav { display: block; width: 68px; height: 68px; position: absolute; top: 50%; margin-top: -34px; background: url(../images/flavourNavArrows.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; opacity: 0.5; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } .scrollNav.prev:hover, .scrollNav.next:hover { opacity: 1; } .scrollNav.prev { left: 10px; } .scrollNav.next { right: 10px; background-position: -70px 0; } /* Flavour Defaults */ .original .button { background-color: #288C3D; border-bottom-color: #B6AC00; } .citrus .button { background-color: #288C3D; border-bottom-color: #288C3D; } .strawberry-and-lime .button { background-color: #EF563F; border-bottom-color: #9A1F00; } .spiced-orange .button { background-color: #FD9A2C; border-bottom-color: #CB6D00; } .scottish-raspberry .button { background-color: #CA6F98; border-bottom-color: #910048; } .black .button { background-color: #E5D989; border-bottom-color: #CEB721; color: #000; } .crabbies-light .button { background-color: #9fc6d7; border-bottom-color: #2e6d98; color: #fff; } .original.flatBG, .original .flatBG, .gridBox.original { background-color: #288C3D; border-color: #288C3D; } .gridBox.latestInstagram.original .arrow { background: url("../images/instagramarrows.png") no-repeat -458px 0; width: 146px; } .gridBox.latestInstagram.scottish-raspberry .arrow { width: 148px; } .strawberry-and-lime.flatBG, .strawberry-and-lime .flatBG, .gridBox.strawberry-and-lime { background-color: #ce1f00; border-color: #ce1f00; } .citrus.flatBG, .strawberry-and-lime .flatBG, .gridBox.strawberry-and-lime { background-color: #288C3D; border-color: #288C3D; } .spiced-orange.flatBG, .spiced-orange .flatBG, .gridBox.spiced-orange { background-color: #f3770a; border-color: #f3770a; } .scottish-raspberry.flatBG, .scottish-raspberry .flatBG, .gridBox.scottish-raspberry { background-color: #AE2261; border-color: #AE2261; } .black.flatBG, .black .flatBG, .gridBox.black { background-color: #171717; border-color: #171717; } .crabbies-light.flatBG, .crabbies-light .flatBG, .gridBox.crabbies-light { background-color: #0071cf; border-color: #0071cf; } .original .flatTransBG { background-color: rgba(40,140,61, 0.8); } .strawberry-and-lime .flatTransBG { background-color: rgb(216,39,13); background-color: rgba(216,39,13,0.8); } .spiced-orange .flatTransBG { background-color: rgb(243,119,10); background-color: rgba(243,119,10,0.8); } .scottish-raspberry .flatTransBG { background-color: rgb(167,32,91); background-color: rgba(167,32,91,0.8); } .black .flatTransBG { background-color: rgb(23,23,23); background-color: rgba(23,23,23,0.8); } .crabbies-light .flatTransBG { background-color: rgb(0,113,207); background-color: rgba(0,113,207,0.8); } /* Popup Content */ #popupBack { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; text-align: center; background-color: #27140f; background-color: rgba(39,20,15,0.9); background: -moz-radial-gradient(center, ellipse cover, rgba(53,34,28,0.9) 0%, rgba(36,16,13,0.9) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,34,28,0.9)), color-stop(100%,rgba(36,16,13,0.9))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(53,34,28,0.9) 0%,rgba(36,16,13,0.9) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(53,34,28,0.9) 0%,rgba(36,16,13,0.9) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(53,34,28,0.9) 0%,rgba(36,16,13,0.9) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(53,34,28,0.9) 0%,rgba(36,16,13,0.9) 100%); /* W3C */ } #popupContent { display: none; position: absolute; width: 100%; top: 0; left: 0; z-index: 2000; -webkit-transform: translate3d(0,0,0); } /* Transform in the for strange iPad behaviour */ #popupContent .close { position: absolute; top: 20px; right: 50%; margin-right: -480px; height: 2em; padding: 0 15px; text-align: center; line-height: 2em; color: #e2e170; background-color: #eb2b0e; text-decoration: none; border-radius: 15px; } #popupContent .close:after { content: '\00D7'; font-size: 2em; vertical-align: middle; margin-left: 10px; color: #fff; } #popupContent .inner { margin: 50px auto ; } /* Homebanners */ #homeBanners { width: 100%; position: relative; height: 640px; overflow: hidden; } #homeBanners .panel { background-size: auto 100%; width: 100%; position: absolute;top:0px;right:0px;bottom:0px;left:0px; } #homeBanners .panel a { display: block;width: 100%;height: 100%; } @media only screen and (max-width: 1400px) { #homeBanners { height: 550px; } } #homeBanners .sticker { background: url("../images/homebanners/home-banner-1-sticker.png") no-repeat center; height: 202px;width: 245px;position: absolute;left: 59%;bottom: 39.5%; } #homeBanners .panel img { width: 100%;max-width: 1200px;display: block;border: none;margin: 0 auto; } #homeBannerTry { background: #f4901e url(../images/homebanners/crabbies_time_banner.png) no-repeat center; } #homeBannerTry h3 { text-indent: 200%; white-space: nowrap; overflow: hidden; margin-top: -17px; } #homeBannerTry a { text-indent: 200%; white-space: nowrap; overflow: hidden; } #homeBannerTry .eye, #homeBannerTry .rocket { display: none; } #homeBannerTry {display:none !important} #homeBannerBuyCrabbies { background: url(../images/homebanners/crabbies-buy-crabbies.jpg) center; } #homeBannerBuyCrabbies h3 { text-indent: 200%; white-space: nowrap; overflow: hidden; margin-top: -17px; } #homeBannerBuyCrabbies a { text-indent: 200%; white-space: nowrap; overflow: hidden; } #homeBannerBuyCrabbies .shops {position: absolute; bottom:18%; max-width: 703px; left: 50%; transform: translate(-50%, 0);} #homeBannerBuyCrabbies .shops ul {display: flex;} #homeBannerBuyCrabbies .shops ul li {float: left;} @media only screen and (min-width: 750px) and (max-width: 960px) { #homeBannerBuyCrabbies .shops {bottom:2%; left: 55%;} #homeBannerBuyCrabbies .shops ul {flex-wrap:wrap;justify-content:center;} #homeBannerBuyCrabbies .shops ul li {max-width: 33%;} } @media only screen and (min-width: 630px) and (max-width: 749px) { #homeBannerBuyCrabbies .shops {bottom:6%; left: 55%;} #homeBannerBuyCrabbies .shops ul {flex-wrap:wrap;justify-content:center;} #homeBannerBuyCrabbies .shops ul li {max-width: 33%;} } @media only screen and (max-width: 630px) { #homeBannerBuyCrabbies .shops {bottom: 6%; left: 0; transform: translate(-50%, 0);left: 50%;} #homeBannerBuyCrabbies .shops ul {flex-wrap: wrap; justify-content: center; max-width: 100%;} #homeBannerBuyCrabbies .shops ul li {width:33.3%;} } @media only screen and (max-width: 395px) { #homeBannerBuyCrabbies .shops { bottom: 5%; transform: translate(-12%, 0); left: 15%;} #homeBannerBuyCrabbies .shops ul {flex-wrap:wrap;justify-content:center;} #homeBannerBuyCrabbies .shops ul li {width:33.3%;} } #buy-crabbies-online .shops ul li:nth-of-type(1) {width:100%;} #lightBanner { background: #0071cf url(../images/homebanners/lightBanner.jpg) no-repeat center; } #lightBanner a { text-indent: 150%; overflow: hidden; white-space: nowrap; } #rugbyPrizes { background: #ffcf00 url(../images/homebanners/rugbyPrizes.jpg) no-repeat center; } #rugbyPrizes a { text-indent: 150%; overflow: hidden; white-space: nowrap; } #rugbyPrizes2017 { background: #ffcf00 url(../images/homebanners/crabbies-rugby-prizes.jpg) center; background-size: cover!important; } #rugbyPrizes2017 a { text-indent: 150%; overflow: hidden; white-space: nowrap; } /* Home Boxes */ #buy-crabbies-online { margin-top: -20px; } #buy-crabbies-online .shops ul { } #buy-crabbies-online .shops ul li { float: left; width: 150px } #buy-crabbies-online .shops ul li img { width: 100%; } #flavourScroller { height: 340px; } #flavourScroller .panel { background-repeat: no-repeat; position: absolute; top: 0; left: -20px; width: 665px; height: 356px; } #flavourScroller .panel h3 { width: 214px; height: 541px; position: absolute; bottom: 15px; left: 65px; text-indent: 200%; overflow: hidden; white-space: nowrap; pointer-events: none; } #flavourScroller .panel .link { position: absolute; left: 305px; bottom: 60px; } #flavourScroller .panel { display: none; } #flavourScroller .panel:first-child { display: block; } #appAd, #appAdFooter { height: 340px; background: url(../images/appAd.png) no-repeat 0 0; } #appAd h4, #appAdFooter h4 { text-align: left; text-transform: uppercase; font-weight: bold; font-size: 2.2em; padding: 15px 12px; width: 110px; color: #288C3D; } #appAd h4 { margin-top: 118px; } #appAd .downloadLinks, #appadfooter {position: absolute;top: 247px;right: 80px;width: 280px;height: 68px; } #appAd h4:first-line, #appAdFooter h4:first-line { font-size: 0.9em; } #appAd h4 span, #appAdFooter h4 span { color: #DB4E00 } #appAd.default h4 span, #appAdFooter h4 span { opacity: 1; color: #B6908F; } #appAd .downloadLinks, #appAdFooter .downloadLinks { position: absolute; top: 247px; right: 350px; width: 280px; height: 68px; } #appAd .downloadLinks a, #appAdFooter .downloadLinks a { display: block; position: absolute; top: 0; background: url(../images/appAdnew.png) no-repeat; color: #fff; line-height: 65px; height: 68px; text-decoration: none; font-size: 1.3em; font-weight: bold; text-align: center; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } #appAd .downloadLinks a.android, #appAdFooter .downloadLinks a.android{ left: 0; background-position: -300px 0; width:132px; padding-left: 20px; } #appAd .downloadLinks a.iphone, #appAdFooter .downloadLinks a.iphone { right: 0; background-position: -460px 0; width:118px; padding-right: 20px; } #appAd .downloadLinks a:hover, #appAdFooter .downloadLinks a:hover { opacity: 0.7; } .strawberry-and-lime #appAd h4 { color: #d8270d; } .strawberry-and-lime #appAd .downloadLinks a.android { background-position: -300px -70px; } .strawberry-and-lime #appAd .downloadLinks a.iphone { background-position: -460px -70px; } .spiced-orange #appAd h4 { color: #f3770a; } .spiced-orange #appAd .downloadLinks a.android { background-position: -300px -140px; } .spiced-orange #appAd .downloadLinks a.iphone { background-position: -460px -140px; } .scottish-raspberry #appAd h4 { color: #a7205b; } .scottish-raspberry #appAd .downloadLinks a.android { background-position: -300px -210px; } .scottish-raspberry #appAd .downloadLinks a.iphone { background-position: -460px -210px; } #countdown { height: 200px; } #countdown .countdown { margin: 10px 6px 0; width: 288px; padding-bottom: 5px; overflow: auto; } #countdown .unit { margin: 0 10px; width: 76px; float: left; text-align: center; text-transform: uppercase; font-weight: bold; } #countdown .unit .num { width: 76px; height: 77px; line-height: 77px; color: #eee; display: block; font-size: 3em; margin-bottom: 5px; position: relative; background: url(../images/countdownDigitBack.png) no-repeat 0 0; } #countdown .unit .num:after { display: block; content: ' '; width: 76px; height: 2px; background-color: #000; position: absolute; top: 50%; left: 0; margin-top: -1px; } #countdown .eventLogo { display: block; width: 255px; height: 100px; margin: 0 auto; background-repeat: no-repeat; background-position: center; text-indent: 200%; overflow: hidden; white-space: nowrap; } #nextStop { height: 310px; } #nextStop .inner { display:block; position: absolute; left: 0; bottom: 0; width: 313px; height: 332px; background: url(../images/nextStopBack.png) no-repeat 0 0; } #nextStop .title { width: 107px; height: 30px; background: url(../images/textNextStop.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; position: absolute; left: 20px;top: 240px; } #nextStop .title.comingSoon { width: 156px; height: 28px; background-image: url(../images/textComingSoon.png); top: 280px; } #nextStop .destination { position: absolute; top: 250px; left: 20px; width: 260px; color: #fff; font-weight: bold; font-style: italic; font-size: 1.6em; text-transform: uppercase;} #homeGrid #nextStop { } #homeGrid #appAd { margin-top: -30px !important; } body.home #homeGrid { margin: 30px auto 0 auto } body.home #content { padding-bottom: 0 } .latestInstagram { border-radius: 10px; } .latestInstagram a { display: block; } .gridBox.latestInstagram img { border-radius: 10px; overflow: hidden; display: block; } .gridBox.latestInstagram .arrow { display: block; width: 149px; height: 68px; background: url(../images/instagramarrows.png) no-repeat -456px 0px; line-height: 63px; position: absolute; bottom: -10px; left: -15px; color: #fff; font-weight: bold; text-decoration: none; z-index: 1; font-size: 1.5em; text-align: center; } .strawberry-and-lime .gridBox.latestInstagram .arrow { background-position: 0 -70px; background: url("../images/instagramGreenBackground.png") no-repeat; width: 235px; } .spiced-orange .gridBox.latestInstagram .arrow { background-position: 0 -140px; } #secretRecipe a { display: block; width: 300px; height: 290px; background: url(../images/gridBoxRecipe.png) no-repeat center; text-indent: 200%; overflow: hidden; white-space: nowrap; } #grandNationalAd a { display: block; } #grandNationalAd img { margin-top: -20px; display: block; } #crabbiesTime a { display: block; width: 300px; height: 145px; background: url(../images/gridBoxCrabbiesTime.png) no-repeat center; text-indent: 200%; overflow: hidden; white-space: nowrap; } #homeAdGif a, #homeAdGif a img { display: block; border-radius: 10px; } #homeAdGif img { border-radius: 10px; } /* Story */ #content.story { width: 100%; padding-bottom: 0; } .story h2 { margin: 0; line-height: 0.9em; } #content.story .inner { position: relative; } #content.story .content { font-family: "futura-pt-condensed"; color: #000000; font-size: 3em; } .story section.pioneer-of-taste { width:100%; height: 820px; position: relative; background: url(../images/originalbottle.png) no-repeat center 120px; background-attachment: static; } .story section.pioneer-of-taste h2 { width: 450px; position: absolute; top: 80px; left: 10px; font-size: 6em; text-align: left; } .story section.pioneer-of-taste h2:first-line { color: #b32500; } .story section.pioneer-of-taste .content { position: absolute; top: 290px; left: 10px; width: 660px; } .story section.pioneer-of-taste .asset { background: url("../images/story-climbers.png") no-repeat bottom;height: 820px;width: 770px;float: right; display: none } .story section.distinctively-refreshing { text-align: center; padding: 80px 0; background: url(../images/storyMidBack.jpg) repeat 0 0; position: relative; } .story section.distinctively-refreshing:before { position: absolute; left: 0; width: 100%; height: 35px; background: url(../images/storyMidBorders.png) repeat-x 0 0; content: ' '; display: block; } .story section.distinctively-refreshing:after { position: absolute; left: 0; width: 100%; height: 35px; background: url(../images/storyMidBorders.png) repeat-x 0 0; content: ' '; display: block; } .story section.distinctively-refreshing .inner-wrapper { position: relative; } .story section.distinctively-refreshing .maxWidth { width: 960px;padding: 20px 0;margin-left: auto; margin-right: auto; } #content.story section.distinctively-refreshing .content { font-family: "futura-pt-condensed"; color: #671716; font-size: 3em; width: 410px; margin: 0 auto; } .story section.distinctively-refreshing h2 { width: 410px; border-top: 10px solid #212121; border-bottom: 10px solid #212121; margin: 0 auto 40px; font-size: 4.1em; padding: 20px 0; } .story section.distinctively-refreshing h2:first-line { font-size: 0.9em; } .story section.distinctively-refreshing .content { width: 100%;margin: 0 auto;padding: 0 20px;box-sizing: border-box; } .story section.distinctively-refreshing:before { position: absolute; left: 0; width: 100%; height: 35px; content: ' '; display: block; } .story section.distinctively-refreshing:after { position: absolute; left: 0; width: 100%; height: 35px; content: ' '; display: block; } .story section.distinctively-refreshing:before { top: -35px; } .story section.distinctively-refreshing:after { bottom: -35px; background-position: 50% -35px; } .story section.fruit-for-flavour { text-align: right; padding: 130px 0 200px; background: url(../images/storyBottomBottlesNewOrig.png) no-repeat 0 center; background-attachment: fixed; } .story section.fruit-for-flavour h2 { width: 450px; color: #EB2B0E; font-size: 6em; margin: 0 0 30px auto; line-height: 0.8em; text-align: right; } .story section.fruit-for-flavour h2:first-line { color: #212121; font-size: 0.9em; } .story section.fruit-for-flavour .content { width: 650px; margin: 0 0 0 auto; } /* Drinks Landing Page */ #flavourSideScroller { height: 500px; max-width: 1560px; margin: 0 auto; position: relative; overflow: hidden; } /* Max-width = 5 x .panel width */ /*#flavourSideScroller { height: 500px; max-width: 2600px; margin: 0 auto; position: relative; overflow: hidden; } *//* Max-width = 5 x .panel width */ #flavourSideScroller .inner { width: 520px; margin: 0 auto; position: relative; height: 100%; } #flavourSideScroller .slider { position: absolute; top: 0; left: 0; height: 100%; } #flavourSideScroller .panel { width: 520px;height: 500px; float: left; text-align: center; background-image: url(../images/whiteRadialGradient.png); background-position: center; background-repeat: no-repeat; } #flavourSideScroller .panel h3 { height: 200px; background-repeat: no-repeat; background-position: center; margin: 80px auto 50px; text-indent: 200%; overflow: hidden; white-space: nowrap; } #flavourSideScroller .panel .button { margin: 0 auto; } #cocktailGrid .gridBox { background-color: transparent; text-align: center; } #cocktailGrid .gridBox .image { height:360px; } #cocktailGrid .gridBox .image img { margin: 0 auto; } #cocktailGrid .gridBox .title { font-weight: bold; font-size: 1.5em; padding-bottom: 10px; text-transform: uppercase; padding: 0 70px 20px; min-height: 3em; } #cocktailGrid .gridBox > .viewLink { width: 260px; left: 30px; border-radius: 10px; } /* Drinks Pages */ #content.flavour { text-align: center; width: 100%; } #content.flavour section { position: relative; } .gridBox.adventurous-christmas a { background: url("../images/adventurous-christmas.png") no-repeat;display: block;height: 520px;; text-indent: 200%; overflow: hidden; white-space: nowrap} .citrus .bg-wrapper #flavourCocktails { display: none } .citrus .bg-wrapper #flavourSubtitle { padding-bottom: 90px } .citrus .bg-wrapper #flavourSubtitle h3 { top: 57%; } /*#content.strawberry-and-lime .bg-wrapper #flavourSubtitle,*/ /*#content.strawberry-and-lime .bg-wrapper #flavourCocktails { background: none }*/ /*#content.original .bg-wrapper #flavourSubtitle,*/ /*#content.original .bg-wrapper #flavourCocktails { background: none }*/ /*#content.scottish-raspberry .bg-wrapper #flavourSubtitle,*/ /*#content.scottish-raspberry .bg-wrapper #flavourCocktails { background: none }*/ .original #flavourHeader { background-repeat: repeat !important; background-size: auto; } #flavourHeader { height: 510px; background-size: cover; background-repeat: no-repeat; background-position: center; } #flavourHeader h2 { width: 550px; height: 200px; background-position: center; background-repeat: no-repeat; position: absolute; top: 40%; left: 50%; margin: -100px 0 0 -255px; text-indent: 100%; overflow: hidden; white-space: nowrap; } /*.scottish-raspberry #flavourHeader h2 {left: 50%;margin: -50px 0 0 -475px; }*/ /*.scottish-raspberry #flavourSubtitle h3 { margin-top: -80px }*/ /*.original #flavourHeader h2 {left: 50%;margin: -70px 0 0 -455px; }*/ /*.citrus #flavourHeader h2 {left: 50%; margin: -100px 0 0 -447px;}*/ /*.strawberry-and-lime #flavourHeader h2 {left: 50%; margin: -50px 0 0 -455px;}*/ /*.strawberry-and-lime #flavourSubtitle h3 {margin-top: -60px;}*/ #flavourSubtitle { height: 440px; } #flavourSubtitle img.bottle { position: absolute;z-index: 10;left: 53%;top: -518px;margin-left: 80px;max-width: 500px;height: auto;} #flavourSubtitle h3 { position: absolute; left: 50%; top: 50%; margin-top: -130px; margin-left: -450px; width: 500px; height: 260px; background-repeat: no-repeat; background-position: left center; text-indent: 100%; overflow: hidden; white-space: nowrap; } #flavourCocktails { height: 530px; background-repeat: repeat; color: #fff; padding: 100px 0; } .original #flavourCocktails { background-image: url(../images/originalBubbleBG.png); } .scottish-raspberry #flavourCocktails { background-image: url(../images/raspberryBubbleBG.jpg); } .spiced-orange #flavourCocktails { background-image: url(../images/orangeBubbleBG.jpg); } .strawberry-and-lime #flavourCocktails { background-image: url(../images/strawberryBubbleBG.jpg); } .crabbies-light #flavourCocktails { background-image: url(../images/lightBubbleBG.jpg); } #flavourCocktails h3 { text-transform: uppercase; margin-bottom: 20px; font-size: 2.2em; letter-spacing: 0.2em; color: #000000} #cocktailSlider { position: relative; height: 430px; } #flavourCocktails .panel { display: none; position: absolute; top: 0; left: 50%; margin-left: -315px; border: 15px solid #fff; width: 600px; height: 400px; box-shadow: 0 20px 20px -20px #000; } #flavourCocktails .panel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #flavourCocktails .panel:first-child { display: block; } #flavourCocktails .panel .title { position: absolute; bottom: 0; left: 0; padding: 15px 25px 20px 25px; width: 100%; text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #flavourCocktails .panel .title p { font-size: 2em; float: left; } #flavourCocktails .panel .button { float: right; margin-bottom: -0.5em; } #flavourCocktails .prev { left: 30px; } #flavourCocktails .next { right: 30px; } #content.flavour.basic { padding-bottom: 0; } #content.flavour.basic #flavourSubtitle { min-height: 600px; } #content.flavour.basic #flavourSubtitle img.bottle { margin-left: 200px; } #content.flavour.basic #flavourSubtitle h3 { text-indent: 0; white-space: normal; color: #e5d989; text-align: right; font-size: 2.4em; line-height: 1.5em; font-weight: 300; width: 520px; margin: 0; top: -170px; height: auto; left: auto; right: 50%; margin-right: -110px; } /* Cocktail */ #content.cocktail { width: 100%; } .singleCocktail { text-align: center; } .singleCocktail .headerImg { height: 420px; width: 100%; background-size: cover; background-position: center; } .singleCocktail h2 { text-transform: none; font-size: 2.2em; margin-bottom: 20px; } .singleCocktail .method, .singleCocktail .serve { line-height: 1.8em; font-size: 1.2em; } .singleCocktail hr { width: 100px; height: 2px; margin: 20px auto; color: #; background-color: #b5172a; } #popupContent .singleCocktail { width: 630px; background: url(../images/pageBack.jpg) repeat 0 0; padding-bottom: 30px; border-radius: 10px; overflow: hidden; margin: 0 auto; } /* Crabbie's Time */ #crabbiesTimeTitle { width: 387px; height: 200px; background: url(../images/hashtag-crabbiestime.png) no-repeat center; text-indent: 200%; overflow: hidden; white-space: nowrap; margin: 40px auto; } #crabbiesTimeGrid .gridBox.hasFlavour { color: #fff; font-size: 1.5em; line-height: 1.3em; background-image: url(../images/whiteRadialGradient.png); background-position: center 120%; } #crabbiesTimeGrid .gridBox.hasFlavour .inner { padding: 25px 30px 60px; word-wrap: break-word; } #crabbiesTimeGrid .gridBox.hasFlavour a {color: #fff; opacity: 0.5; } #crabbiesTimeNav { text-align: center; margin: 20px auto 50px; } #crabbiesTimeNav a { width: 100px; margin: 0 5px; background-color: #eb2b0e; color: #f7aa9f; font-weight: bold; text-align: center; display: inline-block; border-radius: 20px; line-height: 2em; text-decoration: none; text-transform: uppercase; position: relative; } #crabbiesTimeNav a:hover, #crabbiesTimeNav a.on { color: #fff; } #crabbiesTimeNav a.on:after { display: block; content: ' '; width: 0; height: 0; position: absolute; bottom: -10px; left: 50%; border: 5px solid rgba(235,43,14,0); border-top-color: #eb2b0e; margin-left: -5px; } #content.stats { width: 100%; } #mostPopular { padding: 50px 0; text-align: center; background: #271a13 url(../images/brownBG.png) repeat; } #mostPopular .flavour { width: 180px; display: inline-block; color: #cccb28; font-size: 4.5em; font-weight: bold; } #mostPopular .flavour.raspberry { color: #a7225d; } #mostPopular .flavour.strawberry { color: #df290d; } #mostPopular .flavour.orange { color: #fb890b; } #mostPopular .flavour .bottle { display: block; width: 77px; height: 250px; margin: 0 auto 30px; background-color: #cccb28; position: relative; overflow: hidden; } #mostPopular .flavour .bottle:after { content: ' '; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/bottleMask.png) no-repeat 0 0; } #mostPopular .flavour.raspberry .bottle { background-color: #a7225d; } #mostPopular .flavour.strawberry .bottle { background-color: #df290d; } #mostPopular .flavour.orange .bottle { background-color: #fb890b; } #mostPopular .flavour .bottle .level { position: absolute; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.4); border-bottom: 4px solid #271a13; border-radius: 10px; } /* Events */ #eventsHeader { width: 100%; height: 520px; background-size: cover; background-position: center; text-align: center; } #eventsHeader.white { color: #fff; } #eventsHeader .countdown { margin: 0 auto 20px; padding: 40px 0 5px; clear: both; width: 730px; } #eventsHeader .countdown.white { color: #fff; } #eventsHeader .unit { margin: 0 10px; float: left; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 2em; } #eventsHeader .unit .num { width: 158px; height: 160px; line-height: 160px; color: #eee; display: block; font-size: 3em; margin-bottom: 5px; position: relative; background: url(../images/countdownDigitBigBack.png) no-repeat 0 0; padding: 0 4px 4px 0; } #eventsHeader .unit .num:after { display: block; content: ' '; width: 158px; height: 5px; background-color: #151618; position: absolute; top: 50%; left: 0; margin-top: -3px; } #eventsHeader .countdown:after { content: ' '; display: block; clear: both; } #eventsHeader .eventLogo { display: block; width: 550px; height: 200px; margin: 0 auto; background-repeat: no-repeat; background-position: center; text-indent: 200%; overflow: hidden; white-space: nowrap; } #eventsHeader .cta { width: auto; margin: -20px auto 0; } .eventBanner { width: 700px; height: 175px; margin: 20px auto; background-position: center; border-radius: 10px; padding: 40px 40px 0 40px; font-weight: bold; } .eventBanner.White { color: #fff; } .eventBanner .title { font-size: 3em; } .eventBanner .date { font-size: 2.3em; margin-bottom: 15px; } .eventPin { display: block; width: 50px; height: 89px; background: url(../images/eventsMarkers.png) no-repeat 0 0; } .eventPin.horse-racing { background-position: -50px 0; } .eventPin.btcc { background-position: -100px 0; } .eventPin.grand-national { background-position: -150px 0; } .eventPin.other { background-image: url(../images/eventsMarkerOther.png); } #content.events { margin: 60px auto; position: relative; padding-top: 30px; } #content.events h2 { display: block; height: 143px; background: url(../images/eventsTitle.png) no-repeat 0 0; text-indent: 150%; overflow: hidden; white-space: nowrap; border-bottom: 7px solid #171719; margin: 0 0 18px 0; padding-bottom: 18px; } #content.events p { font-size: 1.5em; font-weight: bold; line-height: 1.3em; } #content.events .header { position: absolute; top: 0; left: 0; width: 300px; z-index: 10; } #eventsFilter { position: absolute; left: 50%; top: -20px; } #eventsFilter span { position: relative; left: -50%; background-color: #EB2B0E; display: block; float: left; padding: 0 25px; color: #f7ada1; text-transform: uppercase; font-weight: bold; border-radius: 20px; margin: 0 5px; line-height: 1.5em; cursor: pointer; position: relative; } #eventsFilter span:hover, #eventsFilter span.on { color: #fff; } #eventsFilter span.on:after { content: ' '; display: block; height: 0; width: 0; position: absolute; bottom: -10px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #EB2B0E; } #eventsKey { position: absolute; top: 30px; right: 0; width: 210px; padding: 30px; background-color: #fff; border-radius: 10px; z-index: 10; } #eventsKey li { clear: both; font-weight: bold; font-size: 1.2em; padding-top: 20px; height: 90px; } #eventsKey figure { float: left; margin-top: -20px; margin-right: 10px; } #content.events #eventsKey p { text-align: center; margin: 0; clear: both; font-size: 1em; } #eventsMap { width: 705px; height: 675px; background: url(../images/eventsMap.png) no-repeat center; position: relative; left: -30px;} #eventsMap .eventPin { display: block; position: absolute; margin: -89px 0 0 -25px; color: #000; } #eventsMap .eventPin .popup { background-color: #fff; position: absolute; bottom: 110px; padding: 10px 15px; width: 120px; left: -50px; text-align: center; font-weight: bold; display: none; z-index: 100; } #eventsMap .eventPin .popup .title { font-size: 1.2em; line-height: 1em; display: block; } #eventsMap .eventPin .popup .date { color: #EB2B0E; display: block; } #eventsMap .eventPin .popup:after { content: ' '; display: block; width: 0; height: 0; border: 15px solid transparent; border-color: rgba(255,255,255,0); border-top-color: #fff; position: absolute; bottom: -30px; left: 50%; margin-left: -15px; } #eventsMap .eventPin:hover .popup { display: block; } #eventsListView { max-width: 820px; margin: 0 auto; } #eventsListView li { background-color: #fff; border-radius: 10px; padding: 15px 75px 15px 15px; clear: both; min-height: 90px; margin-bottom: 15px; color: #65370f; position: relative; overflow: auto; } #eventsListView li .eventPin { float: left; margin-right: 20px; } #eventsListView li .title { float: left; font-size: 2.2em; max-width: 60%; padding-top: 15px; } #eventsListView li .details { float: right; text-align: right; max-width: 35%; font-size: 1.3em; font-weight: bold; padding-top: 10px; } #eventsListView li .date { color: #EB2B0E; margin-bottom: 0.2em; } #eventsListView li .more { display: block; width: 22px; height: 34px; background: url(../images/eventsArrow.png) no-repeat 0 0; position: absolute; right: 25px; top: 50%; margin-top: -17px; text-indent: 200%; overflow: hidden; white-space: nowrap; } #eventsMapView { display: block; } #eventsListView { display: none; } #eventsListView .prev { float: left; } #eventsListView .next { float: right; } #content.events.listView #eventsMapView { display: none; } #content.events.listView #eventsListView { display: block; } #previousEvents { background-color: #288C3D; text-align: center; padding: 60px 0 90px; } #previousEvents h3 { text-transform: uppercase; color: #24110a; font-size: 2em; letter-spacing: 0.2em; margin-bottom: 1em; font-weight: bold; } #previousEvents .slider { width: 600px; height: 400px; margin: 0 auto; border: 15px solid #fff; position: relative; box-shadow: 0 20px 20px -20px #000; } #previousEvents li { width: 600px; height: 400px; position: relative; margin: 0 auto; } #previousEvents .bx-controls-direction a { position: absolute; top: 50%; margin-left: 10px; margin-right: 10px; } #previousEvents .bx-controls-direction a.disabled { display: none; } #previousEvents li .prev-event-details{ width: 100%; height: 50px; position:absolute; bottom: 0; left: 0; background-color: #fff; background-color: rgba(255, 255, 255, 0.2); -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF); } #previousEvents li .prev-event-details p{ padding: 0 20px; line-height: 50px; text-align: left; color: #fff; float: left; font-size: 1.6em; font-weight: bold; } #previousEvents li .prev-event-details a{ margin:10px; float:right; color: #fff; text-decoration: none; } #previousEvents li .prev-event-details p, #previousEvents li .prev-event-details a{ display:block; } #eventSubhead .inner .content .links{ height: 50px; } /* Single Event */ #eventSubhead { min-height: 500px; background-position: center; background-size: cover; margin:0 0 80px; } #eventSubhead .inner { height: 100%; position: relative; } #eventSubhead .image { position: absolute; top: 1em; right: -50px; } #eventSubhead .image img { display: block; } #eventSubhead .content { padding: 50px 0 0 10px; width: 450px; color: #fff; } #eventSubhead h3 { text-transform: uppercase; font-size: 2.8em; position: relative; padding-bottom: 60px; } #eventSubhead h3:after { content: ' '; display: block; width: 300px; height: 7px; background-color: #212121; position: absolute; left: 0; bottom: 30px; } #eventSubhead .description { line-height: 1.5em; margin-bottom: 20px; font-size: 1.5em; min-height: 400px } #eventSubhead .description p{margin-bottom: 10px;} #eventSubhead .description p a{ color: #eb2b0e;} /** #eventSubhead .links a { color: #fff; font-size: 1.5em; margin-left: 15px; padding-left: 15px; border-left: 1px solid #fff; } #eventSubhead .links a:first-child { padding-left: 0; margin-left: 0; border-left-width: 0; } **/ #content.event .featured { padding: 0 0 100px; text-align: center; } #content.event .featured img { margin: 0 auto; border: 10px solid #fff; box-shadow: 0 20px 20px -20px #000; display: block; } #eventsHeader.past { position: relative; } #eventsHeader.past h1 { position: absolute; top: 50%; left: 50%; width: 80%; color: #fff; font-weight: 900; text-transform: uppercase; font-size: 5em; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #eventSubhead.past .image { width: 400px; border: 20px solid #fff; top: 3em; right: 0px; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); box-shadow: 0 20px 50px -20px #000; } #eventSubhead.past .image img { display: block; width: 100%; height: auto; } /* News */ #newsGrid h3 { font-size: 1.4em; font-weight: bold; text-transform: uppercase; line-height: 1.1em; } #newsGrid .double h3 { font-size: 2em; } #newsGrid .subtitle { color: #671716; font-size: 1.4em; margin-top: 20px; } #newsGrid.contentGrid .gridBox > .viewLink { background-color: rgba(40,140,61, 0.8); } #newsItem { padding: 0 0 0 240px; margin: 70px auto 40px; position: relative; line-height: 1.5em; } #newsItem .date { position: absolute; top: 0; left: 0; font-weight: bold; text-transform: uppercase; font-size: 2em; line-height: 1.3em; text-align: center; } #newsItem .date .day { display: block; font-size: 2em; } #newsItem .date .year { position: absolute; top: 0; left: 100%; margin-top: -0.9em; font-size: 1.2em; transform: rotate(90deg); transform-origin: 0 100%; -moz-transform: rotate(90deg); -moz-transform-origin: 0 100%; -webkit-transform: rotate(90deg); -webkit-transform-origin: 0 100%; -ms-transform: rotate(90deg); -ms-transform-origin: 0 100%; } #newsItem h2 { text-align: left; font-size: 2em; line-height: 1.2em; } #newsItem .subtitle { color: #671716; font-size: 2.5em; margin-bottom: 30px; line-height: 1.2em; font-weight: 300; } #newsItem .textContent { font-size: 1.5em; line-height: 1.5em; } #newsItem .textContent p { margin-bottom: 1em; } #newsItem .textContent .alignleft { float: left; margin: 0 1.5em 1.5em 0; } #newsItem .textContent .alignright { float: right; margin: 0 0 1.5em 1.5em; } #newsItem:before { content: ' '; display: block; width: 60px; height: 10px; background-color: #eb2b0e; position: absolute; top: -30px; left: 240px; border-radius: 3px; } #content.newsItem.media { text-align: center; } #content.newsItem.media iframe { margin: 50px auto; } #popupContent #youtubePopup { margin: 0 auto; width: 560px; height: 315px; position: fixed; top: 50%; left: 50%; margin: -160px auto auto -280px; } /* Tour */ #content.tour.comingSoon h2 { display: block; width: 920px; height: 689px; background: url(../images/tourComingSoon.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; margin: 80px auto 0; } #tourHeader { width: 860px; height: 600px; background-color: #fff; border-radius: 10px; margin: 50px 0; position: relative; padding: 50px; } #tourHeader h2 { width: 414px; height: 179px; margin: 0 0 10px; background: url(../images/tourTitle.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; border-bottom: 6px solid #212121; padding-bottom: 30px; } #tourHeader .subtitle { text-transform: uppercase; color: #65370F; width: 425px; font-size: 1.5em; line-height: 1.3em; margin-bottom: 20px; } #tourHeader .arrow { width: 330px; height: 64px; line-height: 60px; background: url(../images/tourArrow.png) no-repeat 0 0; color: #fff; text-transform: uppercase; text-align: center; font-size: 1.2em; padding-right: 14px; } #tourHeader:after { content: ' '; display: block; width: 261px; height: 290px; background: url(../images/tourBus.png) no-repeat 0 0; position: absolute; left: -30px; bottom: -30px; } #tourHeader #tourMap { width: 697px; height: 667px; background: url(../images/tourMap.png) no-repeat 0 0; position: absolute; top: 30px; right: -50px; } /* Find Crabbie's */ #content.findCrabbies { width: 100%; margin: 0; height: 100%; padding: 0; position: relative; } #findForm { height: 100%; background-color: #fff; width: 320px; float: left; min-height: 580px; padding: 30px 20px; } #findForm h2 { color: #65370f; font-size: 3em; text-align: left; margin-top: 0; padding: 0 10px; } #findForm input[type=text] { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; padding: 0 15px; background-color: #e6e6e6; color: #222; border-width: 0; font-size: 1.1em; line-height: 2em; height: 2em; border-radius: 10px; } #findForm .buttons { padding: 30px 0; overflow: auto; text-align: center; } #findForm .buttons a { width: 100px; margin: 0; background-color: #eb2b0e; color: #f7aa9f; font-weight: bold; text-align: center; display: inline-block; border-radius: 20px; line-height: 2em; text-decoration: none; text-transform: uppercase; } #findForm .buttons a:hover, #findForm .buttons a.on { color: #fff; } #findMap { background-color: #b3d1ff; position: absolute; height: 100%; top: 0; left: 360px; right: 0; } #locationsScroll { height: 400px; position: relative; padding-right: 10px; } #locationsList li { padding: 10px 0 15px; border-bottom: 1px solid #d7d7d7; color: #808080; position: relative; font-size: 1.1em; } #locationsList li .details { padding-right: 110px; } #locationsList li .details p { margin-bottom: 3px; } #locationsList li .directions { position: absolute; bottom: 15px; right: 0; color: #eb2b0e; border-bottom: 2px solid #000; padding-bottom: 5px; text-decoration: none; } #locationsScroll .viewport { width: 100%; height: 400px; overflow: hidden; position: relative; } #locationsScroll .overview { list-style: none; position: absolute; left: 0; top: 0; } #locationsScroll .scrollbar { position: absolute; top: 0; right: -15px; width: 10px; } #locationsScroll .track { height: 100%; width:10px; position: relative; padding: 0; } #locationsScroll .thumb { height: 35px; width: 10px; cursor: pointer; overflow: hidden; position: absolute; top: 0; background-color: #288C3D; } #locationsScroll .thumb .end { overflow: hidden; height: 5px; width: 10px; } #locationsScroll .disable{ display: none; } .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } .mapInfo { padding: 10px; line-height: 1.5em; } .mapInfo .title { font-weight: bold; } /* Standard Page */ #content.default { line-height: 1.5em; } #content.default a { color: #b6202d; } #content.default p, #content.default li, #content.default ul { margin: 1em 0; } #content.default ol { list-style-type: decimal; margin-left: 30px; } /* Crabbie's International */ #socialMap { width: 1100px; height: 524px; background: url(../images/socialMap.png) no-repeat 0 0; margin: 0 -70px; position: relative; background-size:contain;} #socialMap p { position: absolute; } #socialMap p:after { content: ' '; display: block; width: 0; height: 0; border: 10px solid transparent; border-color: rgba(255,255,255,0); border-top-color: #fff; position: absolute; bottom: -20px; left: -10px; } #socialMap p.canada { left: 24%; bottom: 86.1%; } #socialMap p.usa { left: 20.8%; bottom: 75.5%; } #socialMap p.taiwan { left: 70.3%; bottom: 68.7%; } #socialMap p.singapore { left: 70%; bottom: 60%; } #socialMap p.australia { left: 80%; bottom: 43%; } #socialMap p.newzealand { left: 90%; bottom: 33%; } #socialMap p a { display: block; background-color: #fff; padding: 0 45px 0 10px; position: relative; left: -50%; color: #65370F; text-decoration: none; font-weight: bold; height: 34px; line-height: 34px; white-space:nowrap;} #socialMap p a:after { content: ' '; display: block; position: absolute; top: 3px; right: 10px; width: 28px; height: 28px; background: url(../images/internationalFBLogo.png) no-repeat 0 0; } /* Footer */ footer { position: relative; background-color: #24110a; background: -moz-linear-gradient(top, #461410 0%, #24110a 40%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#461410), color-stop(40%,#24110a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #461410 0%,#24110a 40%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #461410 0%,#24110a 40%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #461410 0%,#24110a 40%); /* IE10+ */ background: linear-gradient(to bottom, #461410 0%,#24110a 40%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#461410', endColorstr='#24110a',GradientType=0 ); /* IE6-9 */ } footer:before { position: absolute; top: -27px; left: 0; width: 100%; height: 27px; background: url(../images/footerTopStripe.png) repeat-x center; content: ' '; display: block; } footer .inner { max-width: 960px; height: 100%; margin: 0 auto; position: relative; } footer #jtcFooterForm { float: left; margin-top: 50px; position: relative; } footer #jtcFooterForm h4 { color: #b6908f; text-transform: uppercase; font-size: 1.7em; font-weight: 300; margin-bottom: 10px; } footer #jtcFooterForm label { display: none; } footer #jtcFooterForm .field { float: left; } footer #jtcFooterForm input[type=text] { width: 330px; padding: 0 20px; font-size: 1.5em; text-transform: uppercase; border-width: 0; height: 1.6em; } footer #jtcFooterForm input[type=text]::-webkit-input-placeholder { text-align: center; } footer #jtcFooterForm input[type=text]:-moz-placeholder { text-align: center; } footer #jtcFooterForm input[type=text]::-moz-placeholder { text-align: center; } footer #jtcFooterForm input[type=text]:-ms-input-placeholder { text-align: center; } footer #jtcFooterForm .wpcf7-response-output { position: absolute; color: #fff; border-width: 0; font-size: 1.3em; top: 100%; left: 0; margin: 0; padding: 15px 0 0; } footer #jtcFooterForm .wpcf7-not-valid-tip { display: none; } footer #jtcFooterForm p { float: left; } footer #jtcFooterForm .button, .prev-event-details a { padding: 0.3em 15px; margin-left: 10px; background-color: #288C3D; border-bottom-color: #cba200; } /* Ammended For Popup */ footer #jtcFooterForm { font-size: 1.1em; } footer #jtcFooterForm { max-width: 350px; } footer #jtcFooterForm p { color: #fff; font-size: 1.2em; line-height: 1.3em; } footer #jtcFooterForm .button { margin: 1em 0 0 0; background-color: #f7931e; border-bottom-color: #f15a24; padding: 0.5em 3em; white-space: nowrap; float: none; } footer #socialLinks { position: absolute; right: 0; top: 70px; } footer #socialLinks a { display: block; width: 30px; height: 30px; float: left; text-indent: 200%; overflow: hidden; white-space: nowrap; background: url(../images/socialIcons.png) no-repeat 0 0; margin: 5px; opacity: 1; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } footer #socialLinks a:hover { opacity: 0.5; } footer #socialLinks a.twitter { background-position: 0px 0px; } footer #socialLinks a.facebook { background-position: -30px 0px; } footer #socialLinks a.pintrest { background-position: -60px 0px; } footer #socialLinks a.instagram { background-position: -90px 0px; } footer #socialLinks a.youtube { background-position: -120px 0px; } footer #socialIntLinks { position: absolute; right: 0; top: 120px; color: #fff; font-size: 1em; } footer #socialIntLinks span.label { display: block; float: left; width: 200px; } footer #socialIntLinks a { display: block; float: left; width: 35px; height: 35px; background: url(../images/flags.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; margin-left: 5px; } footer #socialIntLinks a.fbAustralia { background-position: -35px 0; } footer #socialIntLinks a.fbCanada { background-position: -70px 0; } footer #drinkAwareFooter { color: #fff; position: absolute; bottom: 10px; left: 0; width: 100%; text-align: left; font-family: arial, helvetica, sans-serif; line-height: 54px; font-size: 0.7em; } footer #drinkAwareFooter .logo { background: url(../images/drinkAware.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; } footer #drinkAwareFooter .drinkaware-app { background: url(../images/withtext-white.png) no-repeat 0 0;text-indent: 200%;overflow: hidden;white-space: nowrap;height: 38px;display: block;position: absolute;width: 225px; } footer #drinkAwareFooter .logo { display: block; float: right; width: 110px; height: 35px; } footer #legalLinks { position: absolute; bottom: 15px; left: 50%; width: 300px; margin-left: -150px; font-size: 0.9em; text-align: center; } footer #legalLinks a { color: #B6908F; padding: 0 15px; border-left: 1px solid #B6908F; } footer #legalLinks a:first-child { border-left-width: 0; } #contactForm { width: 620px; margin: 50px auto; position: relative; } #contactForm h3 { font-size: 3em; line-height: 1.2em; color: #b6908f; padding-left: 20px; text-transform: uppercase; font-weight: bold; } #contactForm input[type=text], #contactForm input[type=email], #contactForm textarea, #contactForm label { font-size: 2.5em; line-height: 1.2em; color: #e2e170; font-weight: 300; margin-bottom: 0.2em; } #contactForm label { display: none; } #contactForm input[type=text], #contactForm input[type=email], #contactForm textarea { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; padding: 0 20px; color: #fff; border-width: 0; border-bottom: 1px solid #b6908f; background-color: transparent; } #contactForm textarea { height: 3.8em; resize: none; overflow: hidden; } #contactForm ::-webkit-input-placeholder { color: #FC890B; opacity: 1; } #contactForm :-moz-placeholder { color: #FC890B; opacity: 1; } #contactForm ::-moz-placeholder { color: #FC890B; opacity: 1; } #contactForm :-ms-input-placeholder { color: #FC890B; opacity: 1; } #contactForm p.submit { float: right; margin-top: 15px; } #contactForm input[type=submit] { background-color: #ca6f98; border-bottom-color: #910048; } #contactForm .wpcf7-response-output { float: left; color: #fff; border-width: 0; font-size: 1.3em; margin-top: 1em; } #contactForm .wpcf7-not-valid-tip { display: none; } /* 404 */ #content.error404 p { font-size: 3em; width: 50%; margin: 0 auto; text-align: center; line-height: 1.5em; } /* AVP */ body.avp { overflow: hidden; background: #cccf40; } body.avp #page, body.avp footer { display: none; } #avpOuter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e58b1e+0,e58b1e+20,8c1011+80,8c1011+100 */ background: #e58b1e; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #e58b1e 0%, #e58b1e 20%, #8c1011 80%, #8c1011 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#e58b1e), color-stop(20%,#e58b1e), color-stop(80%,#8c1011), color-stop(100%,#8c1011)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #e58b1e 0%,#e58b1e 20%,#8c1011 80%,#8c1011 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #e58b1e 0%,#e58b1e 20%,#8c1011 80%,#8c1011 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #e58b1e 0%,#e58b1e 20%,#8c1011 80%,#8c1011 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #e58b1e 0%,#e58b1e 20%,#8c1011 80%,#8c1011 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e58b1e', endColorstr='#8c1011',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #avpInner { width: 550px; height: 500px; position: absolute; top: 50%; left: 50%; margin: -250px auto auto -275px; color: #754C28; text-align: center; } #avpInner h1 { width: 257px; height: 142px; margin: 0 auto 23px; background: url(../images/new-avp-logo.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; } #avpInner .message { font-size: 1.8em; font-weight: bold; line-height: 1.2em; height: 3.6em; color:#fff; } #avpInner span.select { display: inline-block; width: 144px; height: 124px; background: #9B2C18 url(../images/avpBits.png) 0 -120px; overflow: hidden; margin: 0 6px; border-radius:5px; position: relative; } #avpInner span.select .value { display: block; position: absolute; top: 0; left: 0; width: 144px; height: 124px; text-align: center; font-size: 4em; font-weight: bold; line-height: 124px; color: #fff; } #avpInner select { width: 144px; height: 124px; border-width: 0; background-color: #9B2C18; opacity: 0; position: absolute; top: 0; left: 0; font-size: 2em; color:#fff; } #avpInner .submit { margin: 15px 0; height: 3em; } #avpInner .submit input { display: inline-block; background-color: #F2E72A; padding: 10px 15px; text-transform: uppercase; color: #333; text-decoration: none; border-width: 0; cursor: pointer; border-radius: 3px; border-bottom: 2px solid #A8991A; letter-spacing: 2px; font-weight: bold; } #avpInner p.footer, #avpInner a { color: #fff; } /*@media (max-height: 400px) {*/ /*#avpInner { top: 0 !important; margin-top: 0 !important; }*/ /*#avpInner h1 { margin: 0; margin: 0 auto; height: 50px; }*/ /*#avpInner .message { font-size: 1em !important; margin: 0 auto 5px !important; }*/ /*}*/ /* Simply Dreadful IE Spoilsports */ .ie8 #avpInner select { filter: alpha(opacity=0); ZOOM: 1; } .ie8 .contentGrid .gridBox>.viewLink { background: transparent url(../images/ie8/lime90.png) repeat; } .ie8 #newsItem .date .year { position: static; margin-top: 0; } /* #CrabbiesPrizeTime */ #cptHeader { height: 360px; background: url(../images/cptBack.jpg) no-repeat center; background-size: cover; position: relative; margin-bottom: 70px; border-bottom: 10px solid #000; } #cptHeader figure { display: block; position: absolute; left: 50%; } #cptHeader .sprite { background-image: url(../images/cptHeaderSprites.png); background-repeat: no-repeat; display: block; text-indent: 150%; overflow: hidden; white-space: nowrap; } #cptHeader .bottles { width: 299px; height: 229px; background-position: -44px -5px; bottom: 0; margin-left: 200px; } #cptHeader .elephant { width: 463px; height: 237px; background-position: -5px -244px; bottom: 0; margin-left: -560px; } #cptHeader .facebook { width: 77px; height: 78px; background-position: -353px -5px; } #cptHeader .gnLogo { width: 113px; height: 128px; background-position: -353px -93px; top: 20px; margin-left: -460px; } #cptHeader .hashtag { width: 464px; height: 64px; background-position: -440px -5px; position: absolute; top: 60px; left: 50%; margin-left: -232px; } #cptHeader .twitter { width: 77px; height: 77px; background-position: -476px -79px; } #cptSocial { position: absolute; top: 15px; left: 50%; margin-left: 360px; } #cptSocial a { float: left; } #cptSocial a:first-child { margin-right: -24px; position: relative; z-index: 1; } #cptHeader h2 { width: 340px; position: absolute; top: 120px; left: 50%; margin-left: -170px; text-transform: uppercase; color: #000; font-size: 2.3em; line-height: 1em; } #cptHeader h2:after { content: ''; display: block; margin: 20px auto 0; width: 29px; height: 31px; background: url(../images/cptHeaderSprites.png) no-repeat -5px -5px; } #cptTweetBox { margin: 2em auto 1em; max-width: 770px; font-size: 1.5em; text-align: center; line-height: 1.5em; font-weight: 600; } #cptTweetBox em { font-style: normal; color: #AE2361; } #cptTweetBox strong { color: #D71F00; font-weight: 600; } #cptTweetBox a { color: #38A8E0; text-decoration: none; } #cptTweetLink { margin: 1em auto; font-size: 1.2em; text-align: center; } #cptTweetLink a { background-color: #38a8e0; border-bottom: 3px solid #1588b5; border-radius: 5px; color: #fff; text-decoration: none; font-weight: bold; display: inline-block; margin: 0 auto; text-transform: uppercase; line-height: 40px; padding: 0 15px; } #cptTweetLink a:before { content: ''; display: block; float: left; width: 21px; height: 18px; background: url(../images/cpt_sprites.png) no-repeat -846px 0px; margin: 11px 10px 0 0; } #cptTerms { margin: 2em 0; text-align: center; font-size: 1.2em; font-weight: 500; } #cptTerms a { color: #000; } #cptHeader figure { position: absolute; left: 50%; background: url(../images/cpt_sprites.png) no-repeat; } #cptHeader #cptLeftDeco { width: 210px; height: 326px; background-position: -551px 0; margin-left: -380px; bottom: -15px; } #cptHeader #cptRightDeco { width: 183px; height: 318px; background-position: 0 -326px; margin-left: 180px; bottom: -20px; } #cptHeader #cptBottomLeftDeco { width: 85px; height: 82px; background-position: -761px 0; margin-left: -250px; bottom: -15px; z-index: 10; } #content.crabbiesprizetime .headerText { text-align: center; font-size: 1.5em; line-height: 1.5em; max-width: 750px; margin: 40px auto; } #content.crabbiesprizetime .headerText em { font-style: normal; font-weight: bold; color: #ae2361; } #content.crabbiesprizetime .headerText a { color: #000; } #content.crabbiesprizetime .headerText strong a { color: #38a8e0; font-weight: bold; text-decoration: none; } #content.crabbiesprizetime .headerText p+p { font-size: 0.8em; margin-top: 1em; } #cptCountdown { text-align: center; margin: 4em 0; } #cptCountdown .unit { margin: 0 10px; width: 221px; text-align: center; text-transform: uppercase; font-weight: bold; display: inline-block; font-size: 3em; } #cptCountdown .unit .num { width: 221px; height: 223px; line-height: 223px; color: #eee; display: block; font-size: 3em; margin-bottom: 5px; position: relative; background: url(../images/cpt_sprites.png) no-repeat -331px 0; } #cptCountdown .unit .num:after { display: block; content: ' '; width: 213px; height: 7px; background-color: #171719; position: absolute; top: 50%; left: 1px; margin-top: -9px; } #cptCountdown .foot { text-transform: uppercase; line-height: 3em; font-size: 2em; font-weight: bold; margin: 0.5em 0 2em; } #cptCountdown .foot strong { color: #FD8A0B; font-size: 1.5em; position: relative; top: 0.1em; margin-left: 0.2em; } #cptCountdown .foot strong:after { content: ''; display: block; position: absolute; left: 50%; top: 100%; width: 403px; height: 37px; margin-left: -202px; background: url(../images/cptUnderline.png) no-repeat 0 0; line-height: 1em; margin-top: -0.25em; } #cptWinnersList h3 { margin: 2em 0; text-align: center; font-size: 2em; } #cptWinnersList article { width: 850px; height: 224px; background: url(../images/cpt_sprites.png) no-repeat -891px 0; margin: 20px auto 50px; padding: 35px; position: relative; } #cptWinnersList article .user { line-height: 60px; margin-bottom: 1em; font-size: 1.5em; } #cptWinnersList article .user img { width: 50px; height: 50px; border: 5px solid #000; display: block; float: left; margin-right: 1em; } #cptWinnersList article .tweet { font-size: 2em; line-height: 1.2em; } #cptWinnersList article .winTime { position: absolute; top: 25px; right: -50px; display: block; width: 196px; height: 60px; color: #fff; padding-top: 7px; background: url(../images/cpt_sprites.png) no-repeat -353px -326px; text-align: center; text-transform: uppercase; font-size: 1.5em; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } #cptWinnersList article .winTime span { display: block; font-weight: bold; } #cptWinnersList .prize { width: 100px; height: 100px; border-radius: 50px; background: #fff url(../images/cpt_sprites.png) no-repeat -776px -97px; box-shadow: 0 0 8px 0 rgba(0,0,0,0.4); position: absolute; right: -30px; top: 170px; } #cptWinnersList .prize span { width: 100px; background-color: #fff; font-weight: bold; position: absolute; left: -10px; text-align: center; top: 80px; padding: 5px 10px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.4); text-transform: uppercase; color: #eb2b0e; transform: rotate(-2deg); -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); } #cptWinnersList .prize span:first-line { color: #000; } /* BTCC and Sub events */ #btccSection, .sub-events { background: url(../images/btccBack.jpg) no-repeat center; background-size: cover; margin: 50px 0 100px; padding: 10px 0 40px; } #btccEvents .gridBox, .sub-events .gridBox { display: block; height: 300px; background-color: rgba(255,255,255,0.3); border-radius: 10px; margin-bottom: 30px; background-position: center; background-repeat: no-repeat; position: relative; font-size: 1.5em; } #btccEvents .gridBox .date, .sub-events .gridBox .date { position: absolute; top: 20px; left: 25px; } #btccEvents .gridBox .location, .sub-events .gridBox .location { position: absolute; bottom: 20px; left: 25px; color: #eb2b0e; text-transform: uppercase; } #bccLinkBox { text-align: center; } #bccLinkBox .label { margin: 70px 0 30px; font-size: 2.5em; } .sub-events a.gridBox{ text-decoration: none; } .sub-events a.gridBox .date{ color: #000;} /* Easter Thing */ #easterEgg { width: 58px; height: 82px; background: url(../images/easterEgg.png) no-repeat 0 0; position: absolute; z-index: 100; left: 50%; } #easterEgg a { display: block; width: 100%; height: 100%; } #easterEgg.pos0 { top: 1810px; margin-left: -60px; } #easterEgg.pos1 { top: 540px; margin-left: 340px; } #easterEgg.pos2 { top: 780px; margin-left: 170px; } #easterEgg.pos3 { top: 150px; left: 280px; } #easterEgg.pos4 { top: 1140px; margin-left: -470px; } #content.secretPage { margin-top: 40px; } #content.secretPage h2 { width: 700px; height: 142px; margin: 0 auto 30px; background: url(../images/easterTitle.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; } #content.secretPage h3 { font-family: "futura-pt-condensed"; color: #671716; text-align: center; font-size: 2.1em; line-height: 1.1em; margin-bottom: 0.5em; } #content.secretPage a { color: #212121; } #content.secretPage .field { margin-bottom: 12px; } #content.secretPage .field br { display: none; } #content.secretPage .field span { display: block; } #content.secretPage label { display: none; } #content.secretPage input[type=text] { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; padding: 5px 20px; font-size: 1.7em; border-width: 0; background-color: #fff; text-transform: uppercase; font-weight: bold; text-align: center; } #content.secretPage .checkbox label { display: block; line-height: 30px; text-transform: uppercase; font-size: 1.1em; } #content.secretPage .checkbox label:before { content: ' '; display: block; float: left; width: 30px; height: 30px; background-color: #fff; margin-right: 15px; cursor: pointer; } #content.secretPage .checkbox label.checked:before { background: #fff url(../images/tick.png) no-repeat center; } #content.secretPage .checkbox input { float: left; display: none; } #content.secretPage ::-webkit-input-placeholder { color: #888; opacity: 0.6; } #content.secretPage :-moz-placeholder { color: #888; opacity: 0.6; } #content.secretPage ::-moz-placeholder { color: #888; opacity: 0.6; } #content.secretPage :-ms-input-placeholder { color: #888; opacity: 0.6; } #content.secretPage p.submit { margin-top: 15px; text-align: center; height: 3.5em; } #content.secretPage input[type=submit] { background-color: #eb2b0e; border-bottom-color: #b5172a; margin: 0 auto; } #content.secretPage .wpcf7-response-output { border-width: 0; font-size: 1.3em; margin-top: 1em; } #content.secretPage .wpcf7-not-valid-tip { display: none !important; } #content.secretPage .form { min-height: 650px; padding-left: 470px; background: url(../images/easterEggs.png) no-repeat 0 0; } #content.secretPage form.sent .field, #content.secretPage form.sent .submit { display: none; } #content.secretPage .wpcf7-mail-sent-ok { font-size: 3em; text-align: center; } /* 2014 Grand National Page */ #content.gn21014 { width: 100%; text-align: center; font- size: 1.4em; line-height: 1.8em; } #content.gn21014 .maxWidth { width: 730px; } #content.gn21014 .top { padding: 70px 0; } #content.gn21014 .top h2 { display: block; width: 222px; height: 251px; text-indent: 200%; overflow: hidden; white-space: nowrap; background: url(../images/gnPage-logo.png) no-repeat 0 0; margin: 0 auto 1em; } #content.gn21014 .top p { margin: 0 auto; } #content.gn21014 .top p strong { text-transform: uppercase; } #content.gn21014 .top p em { color: #cbc500; font-size : 1.5em; font-weight: bold; font-style: normal; } #content.gn21014 .middle { background: #000 url(../images/gnPage-back.jpg) no-repeat center; background-size: cover; color: #fff; padding: 90px 0; font-size: 1.25em; line-height: 1.6em; text-align: center; } #content.gn21014 .middle p { margin: 0 auto; } #content.gn21014 .middle strong, #content.gn21014 .middle em { font-weight: normal; font-style: normal; font-size: 1.5em; } #content.gn21014 .middle strong { color: #fd8a0b; } #content.gn21014 .middle em { color: #eb2b0e; } #content.gn21014 .bottom { padding: 80px 0; text-align: left; } #content.gn21014 .bottom p { margin-bottom: 1em; } #content.gn21014 .bottom p:last-child { clear: both; color: #eb2b0e; font-weight: bold; text-transform: uppercase; font-size: 1.6em; width: 80%; margin: 0 auto; text-align: center; } #content.gn21014 .bottom strong { font-size: 1.6em; color: #fd8a0b; line-height: 0.8em; } #content.gn21014 .bottom img { float: right; margin: -35px -170px 0 10px; } #content.gn21014 .bottom .link { text-align: center; margin: 1em auto; } #content.gn21014 .bottom .link a { color: #000; } #h4hFooter { width: 250px; position: absolute; top: 30px; left: 53%; margin-left: -150px; color: #fff; text-align: center; font-size: 1.1em; } #h4hFooter h5 { width: 152px; height: 90px; background: url(../images/h4hFooter.png); text-indent: 150%; overflow: hidden; white-space: nowrap; margin: 1em auto 0; } .single-event #appAd .downloadLinks a { text-indent: 0; overflow: visible; white-space: normal; } .single-event #appAd .downloadLinks { position: absolute;top: 277px;right: 30px;width: 280px;height: 68px; } /* Festival Competition */ body.page-id-46368 {background: #cccf40 url('../images/pattern-bg.jpg') repeat;height:auto;} #fc-page-entry label {display:block;} #festival-comp {text-align:center;} #festival-comp h2 {text-transform:none;} #festival-comp h2 span {width:159px;height:71px;background:url(../images/fc-win.png);display:inline-block;text-indent:110%;overflow:hidden;position:relative;top:20px;left:0;vertical-align:bottom;} #festival-comp h3 {font-size:1.5em;line-height:1.2;width:400px;margin:0 auto 20px;} #festival-comp input[type=password], #festival-comp input[type=email], #festival-comp input[type=text] {padding:1em;border:2px solid #fff;border-radius:3px;text-align:center;font-family:"brandon-grotesque",Arial;font-weight:bold;color:#333;-webkit-appearance:none;} #festival-comp input.wpcf7-not-valid {border-color:#c00;margin-bottom:10px;} #festival-comp .wpcf7-not-valid-tip {top:80%;left:50%;} #festival-comp .field {position:relative;margin:0 auto 10px;} #festival-comp .field label {display:none;} #festival-comp p.smallprint {width:400px;margin:10px auto;padding-top:10px;} #festival-comp .checkbox input {margin-right:10px;} .js #fc-terms {display:none;} #festival-comp div.wpcf7-mail-sent-ok {display:none;visibility:hidden;} #festival-comp .wpcf7-response-output {margin:0;padding:1em;background:#fff;} #fc-thanks {width:400px;margin:0 auto;padding:80px 0;} #fc-thanks h3 {color:#c00;text-transform:uppercase;font-size:1.8em;font-weight:bold;} #fc-thanks p {font-size:1.7em;line-height:1.2;} #festival-comp input[type=submit], #content #fc-thanks a, #fc-page-entry button {display:inline-block;color:#fff;width:170px;height:40px;line-height:40px;text-decoration:none;letter-spacing:2px;border:0;border-bottom:3px solid #A51617;text-transform:uppercase;font-weight:bold;font-weight:900;border-radius:3px;background:#CD1818;font-family:"brandon-grotesque",Arial;font-size:14px;-webkit-appearance:none;} /* Curry Competition */ body.page-id-49398 {background: #cccf40 url('../images/pattern-bg.jpg') repeat;height:auto;} #fc-page-entry label {display:block;} #curry-comp {text-align:center;} #curry-comp * { -webkit-box-sizing: border-box; box-sizing: border-box; } #curry-comp h2 {text-transform:none; font-size: 2.3em; max-width: 600px; margin: 40px auto; text-align: left; } #curry-comp h2 span {width:159px;height:71px;background:url(../images/fc-win.png);display:inline-block;text-indent:110%;overflow:hidden;position:relative;top:-5px;margin-right:10px;vertical-align:bottom;float:left;} #curry-comp h3 {font-size:1.5em;line-height:1.2;max-width:400px;margin:0 auto 20px;} #curry-comp input[type=password], #curry-comp input[type=email], #curry-comp input[type=text] {padding:1em;border:2px solid #fff;border-radius:3px;text-align:center;font-family:"brandon-grotesque",Arial;font-weight:bold;color:#333;-webkit-appearance:none;max-width: 100%;} #curry-comp input[type=submit] { cursor: pointer; } #curry-comp input.wpcf7-not-valid {border-color:#c00;margin-bottom:10px;} #curry-comp .wpcf7-not-valid-tip {top:80%;left:50%;} #curry-comp .field {position:relative;margin:0 auto 10px;} #curry-comp .field label {display:none;} #curry-comp p.smallprint {max-width:400px;margin:10px auto;padding-top:10px;} #curry-comp .checkbox input {margin-right:10px;} #curry-comp #fc-terms { text-align: left; } .js #fc-terms {display:none;} #curry-comp div.wpcf7-mail-sent-ok {visibility:visible;} #curry-comp .wpcf7-response-output { margin: 1em auto; max-width: 600px; padding: 1em; line-height: 1em; border-width: 0; font-size: 1.8em; line-height: 1.3em; } #fc-thanks { max-width:400px;margin:0 auto;padding:80px 0;} #fc-thanks h3 {color:#c00;text-transform:uppercase;font-size:1.8em;font-weight:bold;} #fc-thanks p {font-size:1.7em;line-height:1.2;} #curry-comp input[type=submit], #content #fc-thanks a, #curry-comp a.back, #fc-page-entry button {display:inline-block;color:#fff;width:170px;height:40px;line-height:40px;text-decoration:none;letter-spacing:2px;border:0;border-bottom:3px solid #A51617;text-transform:uppercase;font-weight:bold;font-weight:900;border-radius:3px;background:#CD1818;font-family:"brandon-grotesque",Arial;font-size:14px;-webkit-appearance:none;} #curry-comp form.sent .field, #curry-comp form.sent .smallprint, #curry-comp form.sent .checkbox, #curry-comp form.sent #fc-terms, #curry-comp form.sent input, #curry-comp form.sent h3 { display: none; } #curry-comp .wpcf7-response-output h3 { display: block !important; color: #B21526; font-size: 1em; text-transform: uppercase;} #curry-comp a.back { margin-top: 2em; } .tfi section.top { height: 100%; background: url("../images/tfi/gradiant-new.png") repeat-x; position: relative; } .tfi section.top .inner { padding-bottom: 60px; padding-left: 20px; padding-right: 20px; } .tfi section.top .inner p { background: url("../images/tfi/gisg.png") no-repeat top center; padding-top: 440px; padding-bottom: 140px; position: relative; z-index: 999999; } .tfi .inner { padding: 20px; } .tfi .man { position: absolute; right: 0; bottom: 0; } .tfi section.top .inner { padding: 20px; overflow: hidden; } .tfi .inner .content { max-width: 1200px; margin: 0 auto; width: 100%; } .tfi .inner .content p { text-align: center; color: #ffffff; font-size: 21px; max-width: 530px; margin: 0 auto; padding: 0; line-height: 34px; } .tfi .inner .content .logo { max-width: 190px; text-align: center; margin-bottom: -110px; } .tfi .inner .content .logo span { font-size: 30px; font-weight: bold; display: block; margin: 35px 0 5px; color: #fff; } .tfi .inner .content .logo img { max-width: 200px } .tfi .inner .content .give-it-some-ginger img { max-width: 1000px; margin: 0 0 0 auto; width: 100%; } .tfi .gallery { background-color: #791310; padding: 40px 0 } .tfi .competition { padding: 40px 0 30px 0; } .tfi .competition .wrapper { max-width: 1000px; margin: 0 auto; width: 100%; } .tfi .competition .main-content { float: left; max-width: 450px; text-align: center; } .tfi .competition .main-content p { color: #909090; line-height: 25px; font-size: 16px; } .tfi .competition .main-content h2 { text-align: center; font-size: 27px; line-height: 32px; color: #ed8c00; text-transform: uppercase; margin-bottom: 25px } .tfi .competition .main-content a.enter { display: block; background-color: #FFC600; color: #1A1A1A; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-transform: uppercase; text-decoration: none; padding: 12px 20px; width: 140px; text-align: center; margin: 25px auto; font-weight: 900; font-size: 13px; border-bottom: 2px solid rgba(0,0,0, 0.5); } .tfi .competition .image { float: none; max-width: 400px; margin: 0 auto 25px auto; } .tfi .competition .main-content.find-crabbies { float: right; } .tfi .competition .main-content.find-crabbies .image img { margin: 0 auto; } .tfi .competition .social-footer , .tfi .competition .social ul { clear: both } .tfi .competition .social-footer { padding: 60px 10px; overflow:hidden; } .tfi .competition .social-footer li { float: left; max-width: 450px; width: 100%; border-radius: 5px; box-shadow: 0 0 12px #929292; } .tfi .competition .social-footer li.social { width: 100%; background-color: #791310; padding: 15px 0 25px 0; } .tfi .competition .social-footer li.tfi-friday { position: relative; background-color: #ffffff; padding: 13px 20px; box-sizing: border-box; float: right; } .tfi .competition .social-footer li.tfi-friday .logo { float: left; } .tfi .competition .social-footer li.tfi-friday p { padding: 35px 0 35px 60px; line-height: 25px; float: left; } .tfi .competition .social-footer li.social p { text-align: center; color: #ed8c00; font-size: 23px; text-transform: uppercase; padding: 20px; } .tfi a.full-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-indent: 200%; overflow: hidden; white-space: nowrap; } .tfi #socialLinks { position: relative; overflow: hidden; text-align: center; } .tfi #socialLinks a { display: inline-block; width: 30px; height: 30px; float: none; text-indent: 200%; overflow: hidden; white-space: nowrap; background: url(../images/socialIcons.png) no-repeat 0 0; margin: 5px; opacity: 1; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } .tfi #socialLinks a:hover { opacity: 0.5; } .tfi #socialLinks a.twitter { background-position: 0 0px; } .tfi #socialLinks a.facebook { background-position: -30px 0px; } .tfi #socialLinks a.pintrest { background-position: -60px 0px; } .tfi #socialLinks a.instagram { background-position: -90px 0px; } .tfi #socialLinks a.youtube { background-position: -120px 0px; } .tfi .gallery p { text-align: center; padding: 20px 0 50px 0; color: #ed8c00; text-transform: uppercase; font-size: 20px; } .tfi .gallery .bx-wrapper { margin: 0 auto; } .tfi .gallery .bx-wrapper .bx-pager { display: none; } .tfi .gallery .bx-wrapper .bx-controls-direction { text-align: center; margin-top: 25px; position: relative; } .tfi .gallery .bx-wrapper .bx-controls-direction span { position: absolute; left: 0; right: 0; text-align: center; padding: 28px; color: #ffffff; } .tfi .gallery .bx-wrapper .bx-controls-direction .bx-next{ background: url(../images/flavourNavArrows.png) no-repeat -70px 0; text-indent: 200%; overflow: hidden; white-space: nowrap; display: inline-block; height: 68px; width: 68px; position: relative; z-index: 99999; } .tfi .gallery .bx-wrapper .bx-controls-direction .bx-prev{ background: url(../images/flavourNavArrows.png) no-repeat 0 0; text-indent: 200%; overflow: hidden; white-space: nowrap; display: inline-block; height: 68px; width: 68px; position: relative; z-index: 99999; } .bx-prev , .bx-next { margin: 0 70px; opacity: 0.5; } .tfi .gallery .video .play-button { position: absolute; top: 50%; left: 50%; margin-left: -44px; margin-top: -34px; } .tfi .gallery .video a { position: relative; display: block; background-color: rgba(255, 255, 255, 0.09); box-sizing: border-box; padding: 22px; border-radius: 8px; } #tfiBanner { background: #961100 url("../images/crabbies-tfi-banner.png") no-repeat center; background-size: contain; } #tfiBanner a { text-indent: 200%; white-space: nowrap; overflow: hidden; } #gisg { background: #961100 url("../images/homebanners/turn-it-ginger-header.jpg") no-repeat center; background-size: contain; } #gisg a { text-indent: 200%; white-space: nowrap; overflow: hidden; } #homeBanners #xmasAppAd2015 { width: 100%; height: 100%; background: #CC5700 url(../images/homebanners/ginger_xmas.png) no-repeat center; background-size: auto 100%; } #homeBanners #xmasAppAd2015 h3 { display: none; } #homeBanners #xmasAppAd2015 a { width: 50%; height: 25%; text-indent: 150%; overflow: hidden; position: absolute; bottom: 0; } #homeBanners #xmasAppAd2015 a.ios { right: 50%; } #homeBanners #xmasAppAd2015 a.android { left: 50%; } @media only screen and (max-width: 629px) { #homeBanners #xmasAppAd2015 { background-image: url(../images/homebanners/ginger_xmas_mob.png); background-color: #cc5700; } #tfiBanner { background: #DC6D00 url("../images/homebanners/CrabbiesBannerMobile.png") no-repeat center !important; background-size: contain !important; } #gisg { background: #DC6D00 url("../images/homebanners/gisgmobile.png") no-repeat center; background-size: contain; } } @media only screen and (max-width: 1050px) { .tfi .inner .content .logo { margin-bottom: 35px; } .man { display: none; } .tfi section.top .inner p { background-size: contain; padding-top: 480px; } } @media only screen and (max-width: 960px) { .tfi .competition .social-footer li , .tfi .competition .social-footer li.tfi-friday { float: none; margin: 0 auto 30px auto; overflow: hidden; } .tfi .competition .image { float: none; margin: 0 auto; } .tfi .competition .main-content , .tfi .competition .main-content.find-crabbies { float: none; text-align: center; margin: 0 auto 35px auto; } .tfi .competition .main-content.find-crabbies { margin-bottom: 0; } .tfi .competition .main-content h2 { text-align: center; margin-top: 5px; margin-bottom: 8px; } .tfi .competition .main-content a.enter { margin: 20px auto; } .tfi .competition .social-footer { padding-bottom: 0; } } @media only screen and (max-width: 600px) { .tfi .inner .content .logo { max-width: 100%; } .tfi .inner .content .logo img { margin: 0 auto; } .bx-next , .bx-prev { margin: 0 40px; } .tfi section.top .inner p { padding-top: 90%; padding-bottom: 36px; } } @media only screen and (max-width: 500px) { .tfi .competition .social-footer li.tfi-friday .logo { float: none; } .tfi .competition .social-footer li.tfi-friday .logo img { margin: 0 auto; } .tfi .competition .main-content { float: none; text-align: center; margin: 0 auto 40px auto; } .tfi .competition .social-footer li.tfi-friday p { float: none; padding: 15px 0; text-align: center; } }