/* ----------------------------- CSS File: Beauty Bay Map Author: Dan Perkins @ Digicution Author URI: http://www.digicution.com/ Version: 1.0 ----------------------------- */ /* 1. Fonts */ @font-face { font-family: "BebasNeue"; src:url(//a1.bb-cdn.com/assets/core/fonts/bebasneue.eot); /* IE9 Compat Modes */ src:url(//a1.bb-cdn.com/assets/core/fonts/bebasneue.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */ url(//a1.bb-cdn.com/assets/core/fonts/bebasneue.woff2) format("woff2"), /* Modern Browsers */ url(//a1.bb-cdn.com/assets/core/fonts/bebasneue.woff) format("woff"), /* Modern Browsers */ url(//a1.bb-cdn.com/assets/core/fonts/bebasneue.ttf) format("truetype"), /* Safari, Android, iOS */ url(//a1.bb-cdn.com/assets/core/fonts/bebasneue.svg#bebasneue) format("svg"); /* Legacy iOS */ } @font-face { font-family: "Didot"; src:url(//a1.bb-cdn.com/assets/core/fonts/didot.woff2) format("woff2"), url(//a1.bb-cdn.com/assets/core/fonts/didot.woff) format("woff"); } /* 2. Main Styles */ html, body { margin:0; padding:0; width:100%; height:100%; font-family:'Droid Sans',sans-serif; } a, img { outline:none; } /* Main Desktop Setup */ #desktop-container { width:1142px; display:block; margin-left:auto; margin-right:auto; } #mobile-container { display:none; } #column-text { z-index:3; position:relative; width:367px; min-height:690px; height:auto; float:left; } #column-map { position:relative; width:368px; min-height:690px; height:auto; margin-left:20px; margin-right:20px; float:left; } #column-products { position:relative; width:367px; min-height:690px; height:auto; float:left; } /*#column-map:hover .bottom-section /* Main Map */ .map-container { width:100%; margin-left:20px; } #main-map-watercolour { width:498px; height:568px; position:absolute; z-index:1; margin-left:-75px; margin-top:70px; background-image:url('../img/main/map-watercolour.jpg'); background-position:top center; background-size:100% auto; background-repeat:no-repeat; } #main-map { width:292px; height:568px; margin-left:53px; display:block; position:relative; z-index:2; background-image:url('../img/main/main-map.png'); background-position:top center; background-size:100% auto; background-repeat:no-repeat; } /* Product Maps */ #main-map.foundation { background-image:url('../img/main/map-foundation.png'); } #main-map.eyeshadow { background-image:url('../img/main/map-eyeshadow.png'); } #main-map.nailpolish { background-image:url('../img/main/map-nailpolish.png'); } #main-map.mascara { background-image:url('../img/main/map-mascara.png'); } #main-map.shaping { background-image:url('../img/main/map-shaping.png'); } #main-map.lipstick { background-image:url('../img/main/map-lipstick.png'); } #main-map.eyeliner { background-image:url('../img/main/map-eyeliner.png'); } #main-map.selftan { background-image:url('../img/main/map-selftan.png'); } #main-map.brushes { background-image:url('../img/main/map-brushes.png'); } #main-map.blushers { background-image:url('../img/main/map-blushers.png'); } /* Text Section */ #main-text-watercolour { width:569px; height:579px; position:absolute; z-index:1; margin-left:-130px; margin-top:-20px; background-image:url('../img/main/text-watercolour.png'); background-position:center 100px; background-size:100% auto; background-repeat:no-repeat; } #main-text { padding-top:163px; width:83%; margin-left:60px; } #main-text h2.main-title { font-family:'BebasNeue','Arial','Times'; text-transform:uppercase; color:#000; font-size:27px; line-height:29px; text-align:center; } /*#main-text p.main-text { font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#000; font-size:16px; line-height:22px; text-align:center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }*/ #main-text p.main-text { font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#000; font-size:16px; line-height:22px; text-align:center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } #main-text p.main-text.left { padding-left:20px; text-align:left !important; } #default-text { display:none; } #county-text { display:none; } /* 7. Clearing */ .clear { clear:both; } .polygon { outline:none; } /* 9. Broswe Happy */ div.browsehappy { position:absolute; margin:0; padding:0; width:100%; height:100%; background:#fff; text-align:center; z-index:999; } div.browsehappy p { font-size:18px; line-height:22px; font-weight:bold; color:#999; padding-top:100px; padding-left:25%; padding-right:25%; } /* Bottom Sections */ .bottom-section { z-index:3; display:block; position:absolute; bottom:0; width:100%; } .bottom-section h3 { width:100%; text-align:center; font-family:'BebasNeue','Arial','Times'; height:45px; line-height:45px; text-transform:uppercase; color:#7f7f7f; font-size:20px; text-align:center; } #column-map .bottom-section h3 { height:43px; line-height:43px; margin-top:1px; padding-top:3px;} #column-products .bottom-section h3 { height:45px; line-height:45px; padding-top:3px; } #column-map .bottom-section h3.active { color:#000; background-image:url('../img/main/browse-bg-county.png'); background-position:center center; background-size:198px 43px; background-repeat:no-repeat; } #column-products .bottom-section h3.active { color:#000; background-image:url('../img/main/browse-bg-product.png'); background-position:center center; background-size:185px 45px; background-repeat:no-repeat; } /* Bottom Product Shaders */ #bottom-shader { z-index:3; display:none; position:absolute; bottom:90px; width:270px; height:10px; margin-left:49px; background-position:center center; background-size:270px 10px; background-repeat:no-repeat; } #bottom-shader.foundation { background-image:url('../img/main/shader-foundation.png'); } #bottom-shader.eyeshadow { background-image:url('../img/main/shader-eyeshadow.png'); } #bottom-shader.nailpolish { background-image:url('../img/main/shader-nailpolish.png'); } #bottom-shader.mascara { background-image:url('../img/main/shader-mascara.png'); } #bottom-shader.shaping { background-image:url('../img/main/shader-shaping.png'); } #bottom-shader.lipstick { background-image:url('../img/main/shader-lipstick.png'); } #bottom-shader.eyeliner { background-image:url('../img/main/shader-eyeliner.png'); } #bottom-shader.selftan { background-image:url('../img/main/shader-selftan.png'); } #bottom-shader.brushes { background-image:url('../img/main/shader-brushes.png'); } #bottom-shader.blushers { background-image:url('../img/main/shader-blushers.png'); } /*#bottom-shader .lefty { margin:0; padding:0; font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#7f7f7f; font-size:12px; padding-top:15px; float:left; margin-left:-30px; } #bottom-shader .righty { margin:0; padding:0; font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#7f7f7f; font-size:12px; padding-top:15px; float:right; margin-right:-30px; }*/ #bottom-shader .lefty { margin:0; padding:0; font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#7f7f7f; font-size:12px; padding-top:15px; float:left; margin-left:-30px; } #bottom-shader .righty { margin:0; padding:0; font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#7f7f7f; font-size:12px; padding-top:15px; float:right; margin-right:-30px; } /* Products Section */ .products-section { z-index:3; position:relative; width:240px; margin-left:73px; padding-top:60px; } .product { width:100px; height:100px; float:left; margin-right:20px; background-position:top center; background-size:100% auto; background-repeat:no-repeat; cursor:hand; cursor:pointer; text-align:center; } /*.product p { margin:0; padding:0; font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#7f7f7f; font-size:12px; padding-top:80px; }*/ .product p { margin:0; padding:0; font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#7f7f7f; font-size:12px; padding-top:80px; } .product.lipstick { background-image:url('../img/main/product-lipstick.png'); } .product.nailpolish { background-image:url('../img/main/product-nailpolish.png'); } .product.foundation { background-image:url('../img/main/product-foundation.png'); } .product.eyeliner { background-image:url('../img/main/product-eyeliner.png'); } .product.shaping { background-image:url('../img/main/product-eyebrow.png'); } .product.eyeshadow { background-image:url('../img/main/product-eyeshadow.png'); } .product.selftan { background-image:url('../img/main/product-selftan.png'); } .product.brushes { background-image:url('../img/main/product-makeupbrushes.png'); } .product.mascara { background-image:url('../img/main/product-mascara.png'); } .product.blushers { background-image:url('../img/main/product-blushers.png'); } .product .text { display:none; } .product.fade { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; filter: alpha(opacity=35); -moz-opacity: 0.35; -khtml-opacity: 0.35; opacity: 0.35; } .product.freeze { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } /* Text Amends As Design A Bit Off Center */ .product.nailpolish p { margin-left:-20px; } .product.eyeliner p { margin-left:-20px; } .product.shaping p { margin-top:-14px; } .product.eyeshadow p { margin-top:-14px; margin-left:-20px; } .product.selftan p { margin-left:-10px; } .product.brushes p { margin-left:-20px; } .product.blushers p { margin-left:-20px; } /* ================================================== */ /* == *. Media Queries == */ /* ================================================== */ /* #Mobile Specific Design ================================================== */ @media only screen and (max-width: 1141px) { /* Display Mobile */ #desktop-container { display:none; } #mobile-container { display:block; width:100%; overflow:hidden; } /* Mobile Header */ #mobile-container .header { margin:0; padding:0; height:55px; width:100%; display:block; } #mobile-container .header .product-button { margin:0; padding:0; display:block; float:left; width:48%; width:-moz-calc(50% - 0.5px); width:-webkit-calc(50% - 0.5px); width:-o-calc(50% - 0.5px); width:calc(50% - 0.5px); font-family:'BebasNeue'; height:55px; font-size:34px; line-height:55px; text-transform:uppercase; color:#a3a3a3; text-align:center; text-decoration:none; border-right:1px solid #a3a3a3; } #mobile-container .header .county-button { margin:0; padding:0; display:block; float:left; width:48%; width:-moz-calc(50% - 0.5px); width:-webkit-calc(50% - 0.5px); width:-o-calc(50% - 0.5px); width:calc(50% - 0.5px); font-family:'BebasNeue'; height:55px; font-size:34px; line-height:55px; text-transform:uppercase; color:#a3a3a3; text-align:center; text-decoration:none; } #mobile-container .header .product-button:hover, #mobile-container .header .product-button.active { color:#000; background-image:url('../img/main/header-bg-product.jpg'); background-size:150px; background-position:center 5px; background-repeat:no-repeat; } #mobile-container .header .county-button:hover, #mobile-container .header .county-button.active { color:#000; background-image:url('../img/main/header-bg-county.jpg'); background-size:150px; background-position:center 5px; background-repeat:no-repeat; } /* Mobile Text */ #mobile-main .main-text-container { position:absolute; z-index:3; padding-top:30px; width:72%; margin-left:14%; text-align:center; font-family:'Times'; } /*#mobile-main .main-text-container p.main-text { font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#000; font-size:16px; line-height:22px; text-align:center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }*/ #mobile-main .main-text-container p.main-text { font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#000; font-size:16px; line-height:22px; text-align:center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } /* County List */ #mobile-main .county-container { display:none; position:absolute; padding-top:30px; z-index:3; width:72%; margin-left:14%; } /*#mobile-main .county-container a.county-click { display:block; width:100%; font-family:'Times','Arial'; font-style:italic; color:#a3a3a3; font-size:22px; line-height:22px; text-align:left; font-weight:normal; text-transform:none; text-decoration:none; padding-top:7px; padding-bottom:7px; }*/ #mobile-main .county-container a.county-click { display:block; width:50%; float:left; font-family:'Didot','Times','Arial'; font-style:normal; color:#a3a3a3; font-size:12px; line-height:26px; text-align:center; font-weight:normal; text-transform:none; text-decoration:none; /*padding-top:7px; padding-bottom:7px;*/ } #mobile-main .county-container a.county-click:hover { color:#000; } /* Mobile Map */ #mobile-map { position:fixed; width:100%; height:560px; margin-top:10px; left:-moz-calc(50% - 288px); left:-webkit-calc(50% - 288px); left:-o-calc(50% - 288px); left:calc(50% - 288px); /*left:45%; margin-right:-50%; transform:translate(-50%,0%);*/ } #mobile-map.active { position:relative; } #mobile-map .map-container { width:100%; } #mobile-map-watercolour { position:relative; width:100%; height:560px; margin-top:10px; margin-left:0px; /*left:50%; margin-right:-50%; transform:translate(-50%,0%);*/ width:498px; height:568px; position:absolute; z-index:1; /*margin-left:-75px;*/ /*margin-left:-128px;*/ margin-left:-8px; margin-top:70px; background-image:url('../img/main/map-watercolour.jpg'); background-position:top center; background-size:100% auto; background-repeat:no-repeat; } #mobile-mapper { position:relative; width:100%; height:560px; margin-top:10px; margin-left:120px; /*left:50%; margin-right:-50%; transform:translate(-50%,0%);*/ width:292px; height:568px; /*margin-left:53px;*/ display:block; position:relative; z-index:2; background-image:url('../img/main/main-map.png'); background-position:top center; background-size:100% auto; background-repeat:no-repeat; } /* Product Maps */ #mobile-mapper.foundation { background-image:url('../img/main/map-foundation.png'); } #mobile-mapper.eyeshadow { background-image:url('../img/main/map-eyeshadow.png'); } #mobile-mapper.nailpolish { background-image:url('../img/main/map-nailpolish.png'); } #mobile-mapper.mascara { background-image:url('../img/main/map-mascara.png'); } #mobile-mapper.shaping { background-image:url('../img/main/map-shaping.png'); } #mobile-mapper.lipstick { background-image:url('../img/main/map-lipstick.png'); } #mobile-mapper.eyeliner { background-image:url('../img/main/map-eyeliner.png'); } #mobile-mapper.selftan { background-image:url('../img/main/map-selftan.png'); } #mobile-mapper.brushes { background-image:url('../img/main/map-brushes.png'); } #mobile-mapper.blushers { background-image:url('../img/main/map-blushers.png'); } /* Products Section */ #mobile-products { display:none; } #mobile-products .products-section { z-index:3; position:relative; width:100%; max-width:450px; margin-left:auto; margin-right:auto; padding-top:40px; height:auto; } #mobile-products .product { position:relative; width:-moz-calc(50% - 50px); width:-webkit-calc(50% - 50px); width:-o-calc(50% - 50px); width:calc(50% - 50px); height:auto; float:left; margin-left:30px; margin-right:20px; } #mobile-products .product p { width:100%; position:absolute; padding-top:0px; bottom:20px; font-size:18px; } #mobile-products .product img.spacer { width:100%; height:auto; } /* Mobile Product Images */ .product.lipstick { background-image:url('../img/main/mobile-product-lipstick.jpg'); } .product.nailpolish { background-image:url('../img/main/mobile-product-nailpolish.jpg'); } .product.foundation { background-image:url('../img/main/mobile-product-foundation.jpg'); } .product.eyeliner { background-image:url('../img/main/mobile-product-eyeliner.jpg'); } .product.shaping { background-image:url('../img/main/mobile-product-eyebrow.jpg'); } .product.eyeshadow { background-image:url('../img/main/mobile-product-eyeshadow.jpg'); } .product.selftan { background-image:url('../img/main/mobile-product-selftan.jpg'); } .product.brushes { background-image:url('../img/main/mobile-product-makeupbrushes.jpg'); } .product.mascara { background-image:url('../img/main/mobile-product-mascara.jpg'); } .product.blushers { background-image:url('../img/main/mobile-product-blushers.jpg'); } /* Mobile Content */ #mobile-texter { display:none; } #mobile-texter .main-text-container { position:relative; z-index:3; padding-top:0px; width:72%; margin-left:14%; text-align:center; font-family:'Times'; padding-bottom:40px; } #mobile-texter .main-text-container h2.main-title { font-family:'BebasNeue','Arial','Times'; text-transform:uppercase; color:#000; font-size:27px; line-height:29px; text-align:center; } /*#mobile-texter .main-text-container p.main-text { font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#000; font-size:16px; line-height:22px; text-align:center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }*/ #mobile-texter .main-text-container p.main-text { font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#000; font-size:16px; line-height:22px; text-align:center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } /* Mobile Shaders #mobile-shader { z-index:4; display:none; position:absolute; top:80px; width:10px; height:270px; right:20%; background-position:center center; background-size:10px 270px; background-repeat:no-repeat; } #mobile-shader.foundation { background-image:url('../img/main/mobile-shader-foundation.png'); } #mobile-shader.eyeshadow { background-image:url('../img/main/mobile-shader-eyeshadow.png'); } #mobile-shader.nailpolish { background-image:url('../img/main/mobile-shader-nailpolish.png'); } #mobile-shader.mascara { background-image:url('../img/main/mobile-shader-mascara.png'); } #mobile-shader.shaping { background-image:url('../img/main/mobile-shader-shaping.png'); } #mobile-shader.lipstick { background-image:url('../img/main/mobile-shader-lipstick.png'); } #mobile-shader.eyeliner { background-image:url('../img/main/mobile-shader-eyeliner.png'); } #mobile-shader.selftan { background-image:url('../img/main/mobile-shader-selftan.png'); } #mobile-shader.brushes { background-image:url('../img/main/mobile-shader-brushes.png'); } #mobile-shader.blushers { background-image:url('../img/main/mobile-shader-blushers.png'); }*/ /* Bottom Product Shaders */ #mobile-shader { z-index:3; display:none; position:relative; width:270px; height:10px; background-position:center center; background-size:270px 10px; background-repeat:no-repeat; margin-top:50px; margin-bottom:60px; margin-left:-moz-calc(50% - 135px); margin-left:-webkit-calc(50% - 135px); margin-left:-o-calc(50% - 135px); margin-left:calc(50% - 135px); } #mobile-shader.foundation { background-image:url('../img/main/shader-foundation.png'); } #mobile-shader.eyeshadow { background-image:url('../img/main/shader-eyeshadow.png'); } #mobile-shader.nailpolish { background-image:url('../img/main/shader-nailpolish.png'); } #mobile-shader.mascara { background-image:url('../img/main/shader-mascara.png'); } #mobile-shader.shaping { background-image:url('../img/main/shader-shaping.png'); } #mobile-shader.lipstick { background-image:url('../img/main/shader-lipstick.png'); } #mobile-shader.eyeliner { background-image:url('../img/main/shader-eyeliner.png'); } #mobile-shader.selftan { background-image:url('../img/main/shader-selftan.png'); } #mobile-shader.brushes { background-image:url('../img/main/shader-brushes.png'); } #mobile-shader.blushers { background-image:url('../img/main/shader-blushers.png'); } /*#mobile-shader .lefty { margin:0; padding:0; font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#7f7f7f; font-size:12px; padding-top:15px; float:left; margin-left:0px; } #mobile-shader .righty { margin:0; padding:0; font-family:'Times','Arial'; letter-spacing:-0.2px; font-style:italic; color:#7f7f7f; font-size:12px; padding-top:15px; float:right; margin-right:0px; }*/ #mobile-shader .lefty { margin:0; padding:0; font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#7f7f7f; font-size:12px; padding-top:15px; float:left; margin-left:0px; } #mobile-shader .righty { margin:0; padding:0; font-family:'Didot','Times','Arial'; letter-spacing:-0.2px; font-style:normal; color:#7f7f7f; font-size:12px; padding-top:15px; float:right; margin-right:0px; } /* End Mobile Specific CSS */ } /* Very Mobile Specific */ @media only screen and (max-width: 400px) { #mobile-products .product p { bottom:10px; font-size:12px; } /* End Very Mobile Specific */ }