/* 888 888 888 888 8888b. 88888888 888 888 .d88b. 888d888 8888b. .d8888b .d88b. 888 "88b d88P 888 888 d88P"88b 888P" "88b d88P" d8P Y8b 888 .d888888 d88P 888 888 888 888 888 .d888888 888 88888888 888 888 888 d88P Y88b 888 Y88b 888 888 888 888 Y88b. Y8b. 888 "Y888888 88888888 "Y88888 "Y88888 888 "Y888888 "Y8888P "Y8888 888 888 Y8b d88P Y8b d88P "Y88P" "Y88P" */ /* - Common CSS File - Fentimans - */ /* - Copyright 2015 Lazy Grace Ltd - */ /* - August 2015 - */ /* Common Elements */ body{ margin: 0; padding: 0; height: 100%; width: 100%; position: absolute; font-family: 'mailart_rubberstampregular'; font-weight: 400; background: #d1bb88 url(../images/bgMainBig.jpg) top center repeat-y; } img{ margin: 0; padding: 0; border: 0; } @font-face { font-family: 'mailart_rubberstampregular'; src: url('../fonts/mailr___0-webfont.eot'); src: url('../fonts/mailr___0-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/mailr___0-webfont.woff2') format('woff2'), url('../fonts/mailr___0-webfont.woff') format('woff'), url('../fonts/mailr___0-webfont.ttf') format('truetype'), url('../fonts/mailr___0-webfont.svg#mailart_rubberstampregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_reg'; src: url ('../fonts/playfairdisplay-regular-webfont.eot') format('embedded-opentype'), url('../fonts/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../fonts/playfairdisplay-regular-webfont.woff') format('woff'), url('../fonts/playfairdisplay-regular-webfont.ttf') format('truetype'), url('../fonts/playfairdisplay-regular-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_black'; src: url ('../fonts/playfairdisplay-black-webfont.eot') format('embedded-opentype'), url('../fonts/playfairdisplay-black-webfont.woff2') format('woff2'), url('../fonts/playfairdisplay-black-webfont.woff') format('woff'), url('../fonts/playfairdisplay-black-webfont.ttf') format('truetype'), url('../fonts/playfairdisplay-black-webfont.svg') format('svg'); } /* TEXT & TABLE */ .carousel > figure:focus::before, [tabindex]:focus, a:focus, area:focus, button:focus, input:focus, object:focus, select:focus, textarea:focus{ outline: 0px; } p { margin: 0; padding: 0 0 15px 0; font-size: 0.9em; color: #000000; line-height: 1.5em; font-weight: 400; } p.error{ color: #FF0000; font-weight: bold; } p.red, p.alert, #content #right p.red, #content #content_area p.alert, p.alert_msg { background: url("../images/iconAlert.png") no-repeat scroll 5px 10px #F4EFE6; border: 1px solid #FF0000; clear: both; color: #FF0000; display: block; font-family: 'Open Sans',Arial,Helvetica,sans-serif; font-size: 12px; line-height: 40px !important; margin: 0px 0 15px; min-height: 40px !important; padding: 0 0 0 30px !important; text-align: left; width: auto; } p.red a, p.alert a, #content #right p.red a, #content #content_area p.alert a { color:#FF0000; } p.msg,p.orange, #content #right p.msg, #content #content_area p.orange, .main .contentPanel #tabLayout .ui-tabs-panel p.orange{ margin: 5px 0; padding: 0 0 0 30px !important; width: auto; min-height: 40px !important; line-height: 40px !important; font-size: 12px; border: 1px #f39322 solid; color: #a56d2c; background: #f4efe6 url(../images/iconAlertPending.png) 5px 10px no-repeat; display: block; clear: both; text-align: left; font-family: 'Open Sans', Arial, Helvetica, sans-serif; } .notification_ok, p.green_msg, p.ok, p.green_alert, p.green, #content #right p.green_msg, #content #content_area p.green_alert, #content #content_area p.green, .main .contentPanel #tabLayout .ui-tabs-panel p.green{ margin: 5px 0; padding: 0 0 0 30px !important; width: auto; min-height: 40px !important; line-height: 40px !important; font-size: 18px; color: #000000; display: block; clear: both; text-align: left; } #note > p.alert { display: none;} .clear{ clear: both; display: block;} a { color:#6a1c1f; text-decoration: underline; } a:hover { color: #ca3a4a; text-decoration: none; } .button, .buttGen, button.buttGen, input[type="button"].buttGen, input[type="reset"].buttGen, input[type="submit"].buttGen{ margin: 15px; padding: 5px 20px; text-align: center; width: auto; display: inline-block; background: #ac1727; border:0px; color: #ffffff; font-family: 'Droid Serif'; line-height: 30px; font-weight: 100; text-transform: uppercase; font-size: .95em; } .button:hover, .buttGen:hover, button.buttGen:hover, input[type="button"].buttGen:hover, input[type="reset"].buttGen:hover, input[type="submit"].buttGen:hover{ opacity: .85; color: #ffffff; } .nextStep{ float: right; } .prevStep{ float: left; } h1, h2.title{ margin: 0 auto; clear: both; text-align: center; width: auto; height: auto; font-weight: bold; font-size: 2.6em; color: #003366; } h2{ font-weight: 100; font-size: 1.8em; color: #3d3d3d; } h3{ font-weight: 100; font-size: 24px; color: #3d3d3d; } h4{ font-weight: 100; font-size: 24px; color: #3d3d3d; } .main { position: relative;} .main h4 { background-image: url(../images/divider.png); background-repeat:no-repeat; text-transform: uppercase; margin: 50px 0 20px 0; padding-top: 50px;} p{ font-weight: 100; font-size: 18px; color: #3d3d3d; } .fa-facebook { color: #3b5998!important;} .fa-instagram {color: #517fa4!important;} .fa-twitter { color: #00aced!important;} .fa-youtube-play { color: #bb0000!important;} #mainWrapper{ margin: 0px auto; width: 100%; height: 100%; display: block; } #botanical{ margin: 0 auto; padding: 20px 0 0 0; text-align: center;} #botanical h2{ margin: 0; padding: 20px 0 0 0; font-size: 1.75em; color: #6c1f21; text-transform: uppercase; font-family: 'mailart_rubberstampregular';} #botanical p{ margin: 0; padding: 10px 0; font-size: 1.4em; color: #403733; line-height: 1.5em; } .buttRed{ font-family: 'mailart_rubberstampregular'; margin: 10px 10px 0 10px; padding: 0 30px; height: 42px; line-height: 42px; color: #ffffff; text-transform: uppercase; background-image: url(../images/bgButtRed.png); display: inline-block; text-decoration: none;} #slideshow{ min-height: 350px; margin: 0; padding: 0; position: relative; top: -7px; overflow: hidden;} #slideshow figure{ min-height: 350px; text-align: center; } #slideshow figure img{ min-height: 350px !important; width: auto; } #slideshow figure img#drinksPointer{ min-height: 0 !important; width: 70px; height: auto; left: 50%; top: 50%; margin-top: -40px; margin-left: -115px; position: absolute; z-index:2; display: block; } #slideshow figure img#mixerPointer{ min-height: 0 !important; width: 70px; height: auto; left: 50%; top: 50%; margin-top: -40px; margin-left: -115px; position: absolute; z-index:2; display: block; } #slideshow figure img#toggle1{ min-height: 0 !important; width: 20px; left: 50%; top: 0; margin-top: 0px; margin-left: -371px; position: absolute; z-index:0; display: block; } #slideshow figure img#toggle2{ min-height: 0 !important; width: 20px; left: 50%; top: 0; margin-top: 0px; margin-left: 350px; position: absolute; z-index:0; display: block; } #slideshow figure img#chandiler{ min-height: 0 !important; width: 220px; left: 50%; top: 0; margin-top: 0px; margin-left: 320px; position: absolute; z-index:0; display: block; } #slideshow figure img#beware{ transition: all 3s ease-in-out; min-height: 0 !important; width: 100px; left: 50%; top: 222px; margin-top: 0px; margin-left: 440px; position: absolute; z-index:0; display: block; } #slideshow figure img#beware.animate{ transform: scale(1.1); } #slideshow figure.favourites { background-image: url(../images/newSlides/favourites.jpg);} #slideshow figure.explore { background-image: url(../images/newSlides/explore.jpg);} #slideshow figure.mixers { background-image: url(../images/newSlides/mixers.jpg);} #slideshow figure.history { background-image: url(../images/newSlides/history.jpg);} #slideshow figure.hollows { background-image: url(../images/newSlides/hollows.jpg);} #slideshow figure.botanical { background-image: url(../images/newSlides/botanical.jpg);} #slideshow figure { background-position: 50% 50%;} #slideshow figure { background-size: cover;} .jiggle { -webkit-animation: jiggle 0.9s infinite; -moz-animation-duration: 0.9s; -moz-animation-name: jiggle; -moz-animation-iteration-count: infinite; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); } @-moz-keyframes jiggle { 0% { -moz-transform: rotate(-1deg); } 50% { -moz-transform: rotate(1deg); } } @-webkit-keyframes jiggle { 0% { -webkit-transform: rotate(-1deg); } 50% { -webkit-transform: rotate(1deg); } } #slideshow button{ background: url(../images/buttBigLeft.png) 0 0 no-repeat; margin: 0 20px; padding: 0; width: 65px; height: 65px; display: block;} #slideshow button:hover{ background: url(../images/buttBigLeft.png) 0 -65px no-repeat; margin: 0 20px; padding: 0; width: 65px; height: 65px; display: block;} #slideshow button.forward{ background: url(../images/buttBigRight.png) 0 0 no-repeat; } #slideshow button.forward:hover{ background: url(../images/buttBigRight.png) 0 -65px no-repeat; } #slideshow button.backWhite{ background: url(../images/galPrevWhite.png) 0 0 no-repeat; margin: 0; padding: 0; width: 35px; height: 35px; display: block;} #slideshow button.forwardWhite{ background: url(../images/galNextWhite.png) 0 0 no-repeat; position: absolute; left: 94%; width: 35px; height: 35px; } .topNavAltHolder{ margin: -6px 0 0 0; padding: 0; height: auto; text-align: center; overflow: hidden; } .topNavAltHolder ul{margin: 30px 0 0px 0; padding: 0 0 0 0; height: 100%; line-height: 0; text-align: center; } .topNavAltHolder ul li{ float: none; display: inline-block; margin: 0; padding-top: 6px; border:0px; height: auto; line-height: 26px; text-align: left; font-weight: 600; text-transform: uppercase; font-family: 'Playfair Display'; font-size: 1.35em; color: #630d12; background: transparent; -o-transition:background 1s ease-in; -ms-transition:background 1s ease-in; -moz-transition:background 1s ease-in; -webkit-transition:background 1s ease-in; transition:background 1s ease-in; } .topNavAltHolder ul li.active .thumbOver{ display: inline-block;} .topNavAltHolder ul li.active .thumbStatic{ display: none;} .topNavAltHolder ul li.active{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9915c+0,000000+75,000000+75,000000+80&1+0,0+69 */ background: -moz-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%, rgba(14,12,7,0) 69%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 80%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(169,145,92,1)), color-stop(69%,rgba(14,12,7,0)), color-stop(75%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9915c', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .thumbStatic{ display: inline-block; } .thumbOver{ display: none; } .topNavAltHolder ul li:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9915c+0,000000+75,000000+75,000000+80&1+0,0+69 */ background: -moz-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%, rgba(14,12,7,0) 69%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 80%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(169,145,92,1)), color-stop(69%,rgba(14,12,7,0)), color-stop(75%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(169,145,92,1) 0%,rgba(14,12,7,0) 69%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 80%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9915c', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .topNavAltHolder ul li:hover .thumbOver{ display: inline-block;} .topNavAltHolder ul li:hover .thumbStatic{ display: none;} .topNavAltHolder ul li:last-child{ margin: 0;} .topNavAltHolder ul li a.title{ font-family: 'mailart_rubberstampregular'; color: #630d12; font-size: 1.4em; margin-top: -40px; text-transform: capitalize; display: block; /* background-image: url(../images/bgDrinksTitle.png); background-size: contain; */ line-height: 1.5em; height: 75px; background-repeat: no-repeat; text-transform: lowercase; } .topNavAltHolder ul li a.title span{ line-height: 20px ; margin-bottom: -15px; font-size: 14px; text-transform: capitalize; display: block;} .topNavAltHolder ul li.active a{ color: #000000; font-weight: 800; } .topNavAltHolder .subBox { height: auto; font-family: 'playfair_reg'; overflow: hidden; padding:0; text-align: center;} .topNavAltHolder .subBox .col-m-6 {position: relative;} .topNavAltHolder .subBox .subIntro {text-transform: initial; font-size: 14px; line-height: 16px; margin: 10px 0;} .topNavAltHolder ul li .view-range { color: #ffffff; background-color: #6a1c1f; font-size: 12px; text-decoration: none; width: 100%; text-align:center;} .topNavAltHolder ul li.active .view-range { color: #ffffff; text-decoration: none;} .fa-thumbs-o-up { padding-right: 5px;} /*.graphic { padding: 20px;}*/ .littleListings{ } .littleListings li{ margin-top: 8px; margin-bottom: 8px; font-family: 'Playfair Display'; min-height: 280px; background-image: url(../images/drinks_line.png); background-repeat: repeat-x; background-position: 0% 100%;} /*.littleListings li{ margin-top: 8px; margin-bottom: 8px; font-family: 'Playfair Display'; min-height: 280px; background-image: url(../images/drinksDivider.png); background-repeat: repeat-x; background-position: 0% 100%;}*/ .littleListings li:nth-child(2n+2){ background-position: 105% 100%;} .littleListings li:nth-last-child(2){ background-image: none; } .littleListings li:last-child{ background-image: none; } .littleListings li .details{ padding: 30px 0 0 0; } .littleListings li h3{ margin: 0; padding: 5px 0; color: #630d12; font-size: 1.5em;} .littleListings li p{ margin: 0; padding: 5px 0; font-size: .9em;} .littleListings li .buttons{ padding: 10px 0; } .buttLike{ display: block; margin: 0 5px 0 0; padding: 0; height: 54px; width: 110px; background-image: url(../images/buttLike.png); background-repeat: no-repeat; } .littleListings li .buttons .buttRed{ margin: 0 5px 0 0; padding: 0 10px; height: 20px; line-height: 20px; text-transform: none; font-weight: 100; font-size: .7em; font-family: 'Playfair Display'; background: #6a1c1f;} .littleListings li .buttons .buttRed:hover{ color: #ffffff; opacity: .5;} .littleListings li .imageHolder{ text-align: center; padding: 15px 0; } .littleListings li #nutritional, .littleListings li #ingredients{ display: none; } .littleListings li .ingredients { display: none;} .littleListings li.centered{ text-align: center; padding: 10px 0; min-height: 225px;} .littleListings li.ginger{ text-align: center; padding: 10px 0; min-height: 288px;} .littleListings li.centered img{ } .hiddenGallery{ display: none; } .fancybox-skin { padding: 0!important;} a.fancybox-nav.fancybox-next > span { right: -10px; background-position: 0 0px; background-image: url(../images/fancybox/buttFancyRight.png)!important; width: 65px; height: 62px; } a.fancybox-nav.fancybox-next > span:hover { background-position: 0 -65px;} a.fancybox-nav.fancybox-prev > span { left: -10px; background-position: 0 0px; background-image: url(../images/fancybox/buttFancyLeft.png)!important; width: 65px; height: 62px;} a.fancybox-nav.fancybox-prev > span:hover { background-position: 0 -65px;} .fancybox-close { top: -9px; right: -7px;background-image: url(../images/fancybox/buttClose.png)!important; background-position: 0 0px;} .fancybox-close:hover { background-image: url(../images/fancybox/buttClose.png)!important; background-position: 0 -34px;} .ingredients { height: 555px; background-image: url(../images/ingBG.jpg); background-repeat: no-repeat; background-size: 100% 100%; padding:20px;} .ingredients h3 { margin-top: 0;} .ingredients #scroll { background-image: url(../images/fancyScroll.png); background-repeat:no-repeat; background-position: top center; background-size:cover; height: 445px; padding: 70px 25px;} .ingredients #scroll p { font-size: 13px;} .ingredients .lrgImg { width: auto; height: auto; margin-top: 15px;} .littleListings .smallImg { width: auto; } .ingredients .bottle { padding: 0;} .ingredients .information {padding: 20px 0 0 0; } .ingredients .botanical { padding: 35px 0px 0 0; height: 100%; perspective: 1000;} /*.ingredients .botanical.hover .flipper { transform: rotateY(180deg); } .ingredients .botanical .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .ingredients .botanical .front, .ingredients .botanical .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; } .ingredients .botanical .front { z-index: 2; transform: rotateY(0deg); } .ingredients .botanical .back { transform: rotateY(180deg); } .ingredients .botanical.hover .back { transform: rotateY(180deg); }*/ .ingredients .botanical .turnArrow { position: relative; display: block; clear: both; margin: 435px 0 0 50px; z-index: 10; } .ingredients .botanical .botanicalImg { display: none;} .videoSlides { text-align: center; margin-bottom: 0px; background-image: url(../images/exploreFrame2.png); background-repeat: no-repeat; background-size: 100% 100%; padding:134px 157px 80px 115px;} .videoSlides.offset-m-1 { left: 6.3333%!important;} .videoSlides #slideshow iframe { width: 90%; height: 350px;} .videoSlides #slideshow { margin: 0 0 0 3%;} .galleryHolder { background-image: url(../images/galleryBG.png); background-repeat: no-repeat;} .galleryHolder .galleryHome { list-style-type: none; padding: 0; margin-top: 40px;} .galleryHolder .galleryHome .galleryImage { float: left; width: 23%; margin: 0 1px 15px 0; background-image:url(../images/pgallBG.png); background-repeat: no-repeat; padding: 8px 10px 30px 8px;} .galleryHolder .col-m-9 { position: relative;} .galleryHolder .col-m-9 .galleryMan { position: absolute; right: -60px; top: 150px;} #instansive_5c14db3df2 {display: none;} .galleryHolder #page_navigation .page_link { display: none;} .galleryHolder #page_navigation .previous_link { position: absolute; left: -30px; top: 200px; background-image: url(../images/galPrev.png); background-repeat: no-repeat; text-indent: -9999px; height: 24px; width: 24px;} .galleryHolder #page_navigation .next_link { position: absolute; right: 30px; top: 200px; background-image: url(../images/galNext.png); background-repeat: no-repeat; text-indent: -9999px; height: 24px; width: 24px;} .galleryInfo { margin-right: 2%;} .galleryInfo p { font-family: 'playfair_reg';} .galleryInfo .click { float: right; padding-right: 35px; padding-top: 10px; background-image: url(../images/binoculars.png); background-repeat: no-repeat; background-position: top right;} .widgetFacebook { text-align: center; background-image: url(../images/widgetFacebookBg.png); background-repeat: no-repeat; background-position: top center; padding-top: 30px; padding-bottom: 30px; } .widgetTwitter { text-align: center; background-image: url(../images/widgetTwitterBg.png); background-repeat: no-repeat; background-position: top center; padding-top: 30px; padding-bottom: 30px; } /*_+_+_+_+_+_+_+_map styles_+_+_+_+_+_+_+_+*/ .map-info { font-family: 'playfair_reg'; font-size: 14px; } .map-info .details { padding: 5px 5px 0 5px;} .map-info .details .fa { padding-right: 5px;} .map-info .map-title { color: #6a1c1f; font-weight: 700;} .map-info .map-postcode { border-bottom: 1px solid #766f6d;} /*_+_+_+_+_+_+_+_contact page_+_+_+_+_+_+_+_+*/ .content-contact { font-family: 'playfair_reg'; background-image: url(../images/contactFormMan.gif); background-repeat: no-repeat; background-position: top right; height: 400px;} .content-contact .info h2 { font-family: 'playfair_black'; margin-top: 0; font-size: 24px; line-height: 26px;} .content-contact .info span { font-weight: 700; } .content-contact .info p {font-size: 16px; line-height: 18px;} .content-contact .info a {} /*.main { overflow: hidden;}*/ .main #fields { position: absolute; right: 0; width: 48%; height: 450px; padding:45px; background-image: url(../images/contactFormBG.png); background-repeat:no-repeat; background-size: 100% 100%; } .main #fields #ajax-contact-form .label { float:left; clear:left; text-transform: uppercase; font-size: 16px; height: 23px; padding-top: 5px;} .main #fields #ajax-contact-form input {border:none; background-color: transparent; float: right; width: 78%; height: 23px;} .main #fields #ajax-contact-form textarea {border:none; background-color: transparent; float: right; width: 78%; height: 190px;} .main #fields #ajax-contact-form #submit { background-color: #6a1c1f; color: #ffffff; background-image: url(../images/submitBorder.png); background-position: top center; background-repeat: no-repeat; background-size:contain; float: left; width: auto; clear: right; position: absolute; bottom: 40px; left: 50px;} h1{ margin: 30px auto 0 auto; padding: 0; background: url(../images/bgH1.png) top center no-repeat; width: 100%; text-align: center; color: #231f20; line-height: 192px;} h1.smallTitle { background: url(../images/bgH1small.png) top center no-repeat; background-size: 100% 100%; } h1.largeTitle { background: url(../images/bgH1.png) top center no-repeat; background-size: 100% 100%;} h2.largeTitle { background: url(../images/drinks_banner2.png) top center no-repeat; width: 974px; height: 134px; text-align: center; font-size: 2.5em; line-height: 100px; color: #000000; display: block; margin: 0px auto 0 auto; clear: both; } #stockistMap{ margin: 0 auto; padding: 39px; width: 100%; max-width: 1145px; height: 504px; background: url(../images/bgMap.png) 0 0 no-repeat; background-size: 100% 100%; display: block;} #googleMap{ width: 100%; height: 426px;} .googleMapFrame{ background: url(../images/bgContactMap.png) top center no-repeat; background-size: 100% 100%; padding: 25px;} #googleMap2{ width: 100%; height: 310px; border: 1px rgba(0,0,0,.9) solid;} #stockistLeft{ text-align: right; padding: 10px 0; font-family: 'Playfair Display'; } #stockistSearch{ padding: 10px 0; font-family: 'Playfair Display'; } #stockistForm{} #stockistForm #stockistLocation{ font-family: 'Playfair Display'; width: 90%; float: left; background: #e3d4b5; border: 1px #9d8152 solid; border-right: 0px; padding: 0 10px; color: #000000; font-style: italic; } #stockistForm #stockistSubmit{ font-family: 'Playfair Display'; width: 10%; float: left; background: #0b0a0c; border: 1px #0b0a0c solid; color: #e3d4b5;} .scroll-pane { width: 100%; height: 90%; overflow: auto; } /* Stockist Enquiry */ #stockEnq { right: 0; width: 100%; height: 365px; padding: 20px 45px; background-image: url(../images/stockEnqBg.gif); background-repeat:no-repeat; background-size: 100% 100%; } #stockEnq #ajax-contact-form .label { float:left; clear:left; text-transform: uppercase; font-size: 16px; height: 23px; padding-top: 5px;} #stockEnq #ajax-contact-form input {border: 1px solid #5d5442; background-color: transparent; float: right; width: 78%; height: 26px; padding: 2px;} #stockEnq #ajax-contact-form textarea {border: 1px solid #5d5442; background-color: transparent; float: right; width: 78%; height: 85px;} #stockEnq #ajax-contact-form #submit { background-color: #6a1c1f; color: #ffffff; background-image: url(../images/submitBorder.png); background-position: top center; background-repeat: no-repeat; background-size:contain; float: left; width: auto; clear: right; position: relative; bottom: 0px; left: 107px; border: none;} #onlineStock { right: 0; width: 100%; height: 365px; padding: 30px 40px 0px 45px; background-image: url(../images/onlineStockBg.png); background-repeat:no-repeat; background-size: 100% 100%; } #onlineStock p em { font-style: normal !important; font-size: 0.9em; } #onlineStock p { border-bottom: 1px solid #333028; margin-bottom: 10px; padding-bottom: 10px; margin-right: 10px;} /* Time Capsule */ .timeCapsuleHidden { display: none; } .timeCapsule { background-image: url(../images/timeCapsuleBg.png); background-position: top center; background-repeat: no-repeat; text-align: center; margin-top: -40px; } .timeCapsuleTitle { margin: 0 auto; padding: 0; position: relative; } .timeCapsuleBox { margin: -90px auto 0 auto; padding: 0 0 100px 0; position: relative; } #ex3 > img.zoomImg { cursor: pointer; } header{ margin: 0 auto !important; padding: 0; width: 100%; text-align: center; position: relative; z-index: 2;} header #navCont{ margin: 0; padding: 0;} header #navCont ul{ margin: 0; padding: 0; list-style: none; background-image: url(../images/bgNav.png); background-position: top center; background-repeat: no-repeat; line-height: 47px; } header #navCont ul li{ margin: 0 10px 0 0; padding: 0 30px 0 0;display: inline-block; text-transform: uppercase; line-height: 52px; font-size: 1.4em; font-family: 'Playfair Display'; background-image: url(../images/bgNavDot.png); background-repeat: no-repeat; background-position: 100% 50%; } header #navCont ul li:last-child{ margin:0; padding: 0; background-image: none;} header #navCont ul li a{ color: #ffffff; text-decoration: none;} header #navCont ul li a.active{ text-decoration: underline;} header #navCont ul li a:hover{ color: #e3d2aa;} header #logo { margin: 0 auto; display: inline-block;} /*_+_+_+_+_+_+_+_+_+_+_+SUB CONTENT STYLES+_+_+_+_+_+_+_+_+_+_+_+_+_+*/ #subContent{ margin: 20px auto 0px auto !important; padding: 20px 0; height: auto; width: 100%; display: block; color: #ffffff; position: relative; clear: both; bottom: 0; text-align: center; font-size: .75em; background-image: url(../images/bgSeperator.png); background-repeat: no-repeat; } #subContent .box{ margin: 0; padding: 0 15px; color: #b7b7b7; } #subContent .box h4{ margin: 0; padding: 0; text-align: center; text-transform: uppercase; font-size: 2em; color: #6a1c1e; font-family: 'mailart_rubberstampregular';} #subContent .box .fa{ color: #6a1c1e; font-size: 2em; } #subContent .box p{ margin: 0; padding: 0; text-align: center; font-size: 1.6em; font-weight: 100; color: #403733; } #subContent .box.mailing p{ padding: 10px 0 0 0; font-size: 1.3em; line-height: 1.6em;} #subContent .box.mailing form{ margin: 10px auto; display: block; padding: 0; width: 90%;} #subContent .box.mailing form #mlEmail{ margin: 0; padding: 0 10px; width: 90%; display: block; float: left; border: 1px #b0965f solid; border-right: 0px; font-size: 1.1em;} #subContent .box.mailing form button{ margin: 0; padding: 0; width: 10%; display: block; float: left; border: 1px #b0965f solid; border-left: 0px; background: #ffffff;} #subContent .box.mailing form button .fa{ color: #000000; font-size: 1.2em; } #subContent .box.twitter p{ color: #000000; font-size: 1.2em; } #subContent .box.twitter em{ padding: 5px 0; display: block; clear: both; font-size: 1em; font-family: 'mailart_rubberstampregular'; font-style: normal; color: #000000; } /*_+_+_+_+_+_+_+_+_+_+_+FOOTER STYLES+_+_+_+_+_+_+_+_+_+_+_+_+_+*/ footer{ margin: 0px auto 0 auto !important; padding-top: 10px; width: 100%; display: block; color: #ffffff; position: relative; clear: both; bottom: 0; text-align: left; font-size: .75em; } footer ul#footerNav{ margin: 0; padding: 0; list-style: none; text-align: center; background-image: url(../images/bgNav.png); background-position: top center; background-repeat: no-repeat; line-height: 52px; } footer ul#footerNav li{ margin: 0 10px 0 0; padding: 0 30px 0 0;display: inline-block; text-transform: uppercase; line-height: 52px; font-size: 1.4em; background-image: url(../images/bgNavDot.png); background-repeat: no-repeat; background-position: 100% 50%; } footer ul#footerNav li.contact{ margin:0 40px 0 0; padding: 0; background-image: none;} footer ul#footerNav li.noDot{ margin:0 5px 0 0; padding: 0; background-image: none;} footer ul#footerNav li.noDot img{ margin: -10px 2px 0 2px;} footer ul#footerNav li a{ color: #ffffff; text-decoration: none;} footer ul#footerNav li a:hover{ color: #e3d2aa;} footer p#info{ font-weight: 500; text-align: center; text-transform: uppercase; font-size: 1.2em; } footer p#info a{ color: #3d3d3d; text-decoration: none; } footer p#info a:hover{ color: #3d3d3d; text-decoration: underline; } footer em, footer span{ font-style: normal; margin: 0 20px 0 0; padding: 0 0 0 25px; } footer .madein { background-image: url(../images/bgFooterSep.png); background-repeat: no-repeat; background-position: center left;} footer span i{ font-style: normal; font-size: .8em; vertical-align: super; margin-top: 3px;} footer { text-align: center; } footer ul#translation-links { margin: 0 0 20px 0; padding: 0; list-style: none; display: inline-block; } footer ul#translation-links li { margin: 0 5px 0 0; padding: 0; display: inline-block; } footer ul#translation-links li a:hover { opacity: 0.5; } /* Restriced */ #overlayRestricted{ background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.75) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.75) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.75) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.75) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ width: 100%; height: 100%; display: block; z-index: 999; position: fixed; top: 0; left: 0; } #overlayRestricted .message{ margin: 5% auto; background-image: url(../images/bgRestricted.gif); background-size: cover; max-width: 407px; max-height: 555px; width: 90%; height: 90%; display: block; z-index: 999;} #overlayRestricted .message p{ color: #000000; margin: 0 auto; padding: 3px 0; position: relative; top: 56%; font-size: 1em; text-transform: uppercase; line-height: 1.3em; text-align: center; display: block; width: 70%; } #overlayRestricted .message p em{ color: #6a1c1f; font-style: normal; font-size: 1.7em; line-height: 1.4em; display: block;} #overlayRestricted .message #ageConfirm{ font-size: .7em; margin: 5px auto 5px auto; padding: 3px; display: block; text-align: center; color: #ffffff; background-color: #6a1c1f; font-style: normal; display: block;} #overlayRestricted .message #ageNope{ font-size: .7em; margin: 0 auto 5px auto; padding: 3px; display: block; text-align: center; text-align: center;color: #ffffff; background-color: #000000; font-style: normal; display: block;} /* Cookies */ #cookies{ position: fixed; bottom: 0; width: 100%; min-height: 40px; height: auto; line-height: 40px; display: block; text-align: center; background: #5f5f5f; color: #f5f5f5; left: 0; z-index: 999; font-size: .7em; } #cookies a{ color: #f5f5f5; } #cookies #butt_cookies{ display: inline-block; padding: 0 10px; text-align: center; background: #7b7a7a; color: #ffffff; line-height: 30px; height: 30px; margin: 0 10px; text-transform: uppercase; } #cookies #butt_cookies:hover{ text-decoration: none; opacity: .8; } /* Site Message */ .closedMsg{ margin: 0 auto; padding: 10px 0; line-height: 1.7em; font-size: 1.1em; background: rgba(0,0,0,.8); width: 100%; height: 100%; display: block; position: fixed; color: #ffffff; top: 0px; z-index: 1000; text-align: center; } .closedMsg .textCont{ color: #000000 !important; top: 50%; margin-top: -100px; left: 50%; margin-left: -16%; height: 200px; display: block; padding: 0 2%; text-align: center !important; position: absolute; width: 30%; background: rgba(225,225,225,.99); } .closedMsg .textCont .buttOk{ display: inline-block; background: #5d5737; color: #ffffff; border-bottom: 3px #a59c64 solid; padding: 0 10px; height: 40px; line-height: 40px; text-align: center; font-size: .9em; text-transform: uppercase; } /* Common Elements */ .botanicalSlideshow { margin: 0; width: 1147px; height: 534px; background: url(../images/botanicalSlideshow/slideBotanicalBg.png) 0 0 no-repeat; position: relative; } .botanicalSlideshow .frontRow{ margin: 0; width: 1147px; height: 528px; background: url(../images/botanicalSlideshow/frontRow.png) 0 0 no-repeat; position: absolute; z-index: 99; } .botanicalSlideshow .gramaphone{ margin: 0; width: 259px; height: 235px; right: 50px; top: 255px; background: url(../images/botanicalSlideshow/gramaphone.gif) 0 0 no-repeat; position: absolute; z-index: 4; opacity: 0.7; } .botanicalSlideshow .hotAirBalloon{ margin: 0; width: 74px; height: 125px; right: 120px; top: 155px; background: url(../images/botanicalSlideshow/hotAirBalloon.gif) 0 0 no-repeat; position: absolute; z-index: 5; } .botanicalSlideshow .alarmClock{ margin: 0; width: 205px; height: 293px; left: 355px; top: 212px; background: url(../images/botanicalSlideshow/alarmClock.gif) 0 0 no-repeat; position: absolute; z-index: 6; } .botanicalSlideshow .leftPointer{ margin: 0; width: 62px; height: 53px; left: 430px; top: 137px; background: url(../images/botanicalSlideshow/leftPointer.gif) 0 0 no-repeat; position: absolute; z-index: 5; } .botanicalSlideshow .rightPointer{ margin: 0; width: 58px; height: 47px; left: 675px; top: 142px; background: url(../images/botanicalSlideshow/rightPointer.gif) 0 0 no-repeat; position: absolute; z-index: 5; } .mixerSlideshow{ margin: 0; width: 1147px; height: 534px; background: url(../images/mixerSlideshow/slideMixerBg.png) 0 0 no-repeat; position: relative; } .mixerSlideshow .pointerFinger{ margin: 0; width: 87px; height: 87px; left: 760px; top: 212px; background: url(../images/mixerSlideshow/animHandPointer.gif) 0 0 no-repeat; position: relative; } .softdrinkSlideshow{ margin: 0; width: 100%; height: 534px; background: url(../images/softdrinkSlideshow/slideSoftDrinksBg.png) top center no-repeat; position: relative; } .softdrinkSlideshow .pointerFinger{ margin: 0; width: 87px; height: 87px; left: 760px; top: 212px; background: url(../images/softdrinkSlideshow/animHandPointer.gif) 0 0 no-repeat; position: relative; } .exploreSlideshow{ margin: 0; width: 1147px; height: 534px; background: url(../images/exploreSlideshow/exploreBg.png) 0 0 no-repeat; position: relative; } .exploreSlideshow .pictureShowLady{ margin: 0; width: 213px; height: 347px; left: 217px; top: 85px; background: url(../images/exploreSlideshow/pictureShowLady.gif) 0 0 no-repeat; position: relative; } /* Brewing - Checkout the one line css mwhhaha! */ #brewingIntro{ margin: 0 auto; padding: 10px 0; position: relative; overflow: hidden; } #brewingIntro .introText { padding: 0 20px;} #brewingIntro .introText p{ font-family: 'Playfair Display'; font-size: 1.3em; line-height: 1.5em; text-align: center;} #brewingIntro .introImg { padding: 0 20px; } #brewingStages{ margin: 0 auto; position: relative; overflow: hidden; background-image: url(../images/brewing/bgVertical.png); background-repeat: no-repeat; background-position: 50% 5px; } #brewingStages .stage{ background-image: url(../images/bgSeperator.png); background-position: 0 0; background-repeat: repeat-x; padding: 20px 0; display: block; clear: both;} #brewingStages .stage .paper { background-position: 0 0; background-repeat: no-repeat; display: block; padding: 20px; } #brewingStages .stage1 .stageText .paper { background-image: url(../images/brewing/paper1.png); width: 412px; height: 94px; } #brewingStages .stage2 .stageText .paper { background-image: url(../images/brewing/paper2.png); width: 412px; height: 168px; float: right; text-align: right; } #brewingStages .stage2 .stageText h3 { text-align: right; } #brewingStages .stage3 .stageText .paper { background-image: url(../images/brewing/paper3.png); width: 412px; height: 168px; } #brewingStages .stage4 .stageText .paper { background-image: url(../images/brewing/paper4.png); width: 412px; height: 168px; float: right; text-align: right; } #brewingStages .stage4 .stageText h3 { text-align: right; } #brewingStages .stage4 .mousePopup { position: relative; top: 157px; left: 300px; width: 108px; height: 74px; } #brewingStages .stage5 .stageText .paper { background-image: url(../images/brewing/paper5.png); width: 412px; height: 206px; } #brewingStages .stage6 .stageText .paper { background-image: url(../images/brewing/paper6.png); width: 412px; height: 168px; float: right; text-align: right; } #brewingStages .stage6 .stageText h3 { text-align: right; } #brewingStages .stage .stageText { padding: 0 20px; } #brewingStages .stage .stageText h3{ color: #000000; font-size: 2.2em; line-height: 1.4em; padding: 0; margin: 0; } #brewingStages .stage .stageText p{ font-family: 'Playfair Display'; font-size: .85em; font-weight: 600; line-height: 1.7em; padding: 0 0 5px 0; } #brewingStages .stage .stageImg{ text-align: center; } #brewingStages .stage .stageImg img{ } #brewingStages #pointer{ position: absolute; top: 20px; left: 50%; margin-left: -20px;} #brewingEnd { background-image: url(../images/bgSeperator.png); background-position: 0 0; background-repeat: repeat-x; padding: 20px 0; clear: both;} #brewingEnd h3 { marign: 0 auto; padding: 0; width: auto; text-align: center; height: 67px; line-height: 67px; font-size: 2em; color: #000000; background-image: url(../images/brewing/h3Bg.png); background-position: 50% 0; background-repeat: no-repeat; } #brewingEnd #videoCont { margin: 0 auto; padding: 93px 0 0 130px; width: 1060px; height: 669px; background-image: url(../images/brewing/brewingFrame.gif); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } span.hash{ font-family: 'Times New Roman' !important; font-weight: 400;} #google_translate_element{ display: none !important;} .fancybox-skin { background-color: transparent !important; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } #historyHeader{ position: relative; display: block; } #historyHeader #lights{ position: absolute; right: 178px; width: 200px; margin-right: -135px; top: 0px;}