/* Site Name: Site name Site URI: http://www.site.com Version: 1.0 Author: Obi Creative Author URI: http://www.obicreative.co.uk */ /* =========================== CONTENTS: 01 Sensible defaults 02 Fonts / type 03 Alignment 04 Forms 04 Grid 05 Tables 06 Useful classes 07 Breakpoints =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 SENSIBLE DEFAULTS ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/normalize.css"; div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; font-family: 'Roboto', sans-serif; font-size:16px; color:#444444; line-height:1.6em; font-weight: 100 } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } p, pre { margin: .5em 0;} img { border:none; padding:0; margin:0; max-width:100%;height:auto;} a {text-decoration:none;border:0;color:#4fabd4;} a:hover {text-decoration:underline;} .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} .clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} * html .clearfix,*:first-child+html .clearfix{zoom:1} nav ul { padding:0; margin:0;} nav a {display: block; padding:.25em;} /* ---------------------------------------------------------------------------------------------------------- 02 FONTS / TYPE ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight:600; line-height:1.3em; margin:.85em 0 .85em 0;color:#202020; } h1 { font-size:2.4em; } h2 { font-size:2em; } h3 { font-size:1.8em; } h4 { font-size:1.6em; margin:.5em 0 .5em 0; } h5 { font-size:1.4em; margin:.5em 0 .5em 0; } h6 { font-size:1.2em; margin:.5em 0 0em 0;} code { background-color: #e8e8e8; color:#2f79ba; font-family:"Courier New", Courier, monospace; display: block; padding:1em; border:solid 1px #ccc; margin: .5em 0; } blockquote { font-size:1.2em; font-style:italic; } /* ---------------------------------------------------------------------------------------------------------- 03 FORMS ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ form { margin:1em 0;} label { font-size: .86em; color:#666666; display: inline-block; padding:.5em 0 .25em 0;} input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="password"] { width:100%; padding:.5em 2.5%; background-color:#fff; border:solid 1px #cccccc; display: inline-block; } input[type="submit"] { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;background-color:#4fabd4; color:#ffffff; display: inline-block; border:0; padding:.8em 2em; margin-top:.86em; font-weight: 700; -webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all; } input[type="submit"]:hover { text-decoration: none; background-color:#4a717a; } input[name="name"] { background:url(images/icons/name.jpg) no-repeat 5% center #ffffff; padding-left: 20%; width:77.5%; } input[name="email"] { background:url(images/icons/mail.jpg) no-repeat 5% center #ffffff; padding-left: 20%; width:77.5%; } input[name="address"] { background:url(images/icons/location.jpg) no-repeat 5% center #ffffff; padding-left: 15%; width:82.5%;} textarea { width:100%; padding:1em 2.5%; background-color:#fafafa; border:solid 1px #cccccc; display: inline-block; } select { background-color: white; border: thin solid #999999; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 7px!important; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%), linear-gradient(135deg, #ffffff 50%, transparent 50%), linear-gradient(to right, #999999, #999999); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; width:100%; } /* ---------------------------------------------------------------------------------------------------------- 03 ALIGNMENT ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .textright {text-align:right;} .textleft {text-align:left;} .textcenter {text-align:center;} .textjustify {text-align:justify;} .alignnone { float:none;} .aligncenter { display:block; margin:0 auto } .alignleft { float:left } .alignright { float:right } img.alignleft { margin: .4em 1em .4em 0;} img.alignright { margin:.4em 0 .4em 1em;} /* ---------------------------------------------------------------------------------------------------------- 04 GRID ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row:after { content: ""; display: table; clear: both; } .grid_1 { width: 8.3333333%; } .grid_2 { width: 16.666666%; } .grid_3 { width: 24.999999%; } .grid_4 { width: 33.333332%; } .grid_5 { width: 41.666665%; } .grid_6 { width: 50%; } .grid_7 { width: 58.333331%; } .grid_8 { width: 66.666664%; } .grid_9 { width: 74.999997%; } .grid_10 { width: 83.33333%; } .grid_11 { width: 91.666663%; } .grid_12 { width: 100%; } [class*='grid_'] { float: left; display: block; min-height: 1px; } /* Gutter grid */ [class*='g_grid_'] { margin: 0 2% 1% 0; } [class*='g_grid_']:last-of-type { margin-right: 0; } .g_grid_1 { width: 6.5%; } .g_grid_2 { width: 15%; } .g_grid_3 { width: 23.5%; } .g_grid_4 { width: 32%; } .g_grid_5 { width: 40.5%; } .g_grid_6 { width: 49%; } .g_grid_7 { width: 57.5%; } .g_grid_8 { width: 66%; } .g_grid_9 { width: 74.5%; } .g_grid_10 { width: 83%; } .g_grid_11 { width: 91.5%; } .g_grid_12 { width: 100%; } /* Container */ .container{ width: 90%; max-width: 980px; margin: auto; } .omega { margin-right:0;} /* ---------------------------------------------------------------------------------------------------------- 05 TABLES ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ table { width:100%; } table th { background:#999999; color:#ffffff; padding:.3em; border:solid 1px #ccc; } table td { padding:.3em; border:solid 1px #ccc; } table tr.alt { background: #f3f2f2 } table a { text-decoration: underline; } /* ---------------------------------------------------------------------------------------------------------- 06 USEFUL CLASSES -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0;margin-bottom: .5em} .videoWrapper iframe { position: absolute;top: 0;left: 0; width: 100%;height: 100%;background:transparent;} .wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:1em; margin:1em } .rounded { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .lead { font-size: 1.2em; line-height: 1.4em } .error {color:#f00;} .textshadow { -webkit-text-shadow:1px 1px 1px #333; -moz-text-shadow:1px 1px 1px #333; text-shadow:1px 1px 1px #333;} .blueBg { background-color:#f4f7fb;} .white { color:#fff;} .blue { color:#4fabd4;} .ctaImg .button { font-size:1.2em;padding:1em 2em;} .button { -webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all;font-size:.86em;display: inline-block; margin-top: 1em; padding:.5em 1em; color:#fff; background-color:#5aafd5; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .button:hover { text-decoration: none; background-color: #3680a1} .mb10 { margin-bottom: 10px; } .mt10 { margin-top: 10px; } .warning { background:rgba(254,100,118,0.5); text-align: center; padding: 10px; font-weight: bold;} /* ---------------------------------------------------------------------------------------------------------- HEADER -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .logo { text-align:left; text-indent:-9999px;width:169px; height: 100px; display: block; background:url(images/global/whitegates-camping-logo-head.svg) no-repeat; background-image:url(images/global/whitegates-camping-logo-head.svg)} .header { border-bottom:solid 1px #e8e8e8; position: fixed;width:100%; left:0; top:0;z-index: 100; background:#fff;} .mainNav ul { text-align: right;} .mainNav ul li { margin-left:-4px;display: inline-block;border-right:solid 1px #e8e8e8; -webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all;} .mainNav ul li:first-child { border-left:solid 1px #e8e8e8;} .mainNav ul li a { display: block; padding:1.8em 1em .8em 1em; margin:2em 1em 1em 1em; color:#000 } .mainNav ul li.home-link a { background:url(images/icons/home.svg) no-repeat top center;} .mainNav ul li.campsite-link a { background:url(images/icons/tent.svg) no-repeat top center;background-size: 35px} .mainNav ul li.book-link a { background:url(images/icons/date_range.svg) no-repeat top center;} .mainNav ul li.explore-link a { background:url(images/icons/compass.svg) no-repeat top center;background-size: 25px} .mainNav ul li.contact-link a { background:url(images/icons/contact.svg) no-repeat top center;background-size: 25px} .mainNav ul li:hover { background:#d2eafa;} .mainNav ul li:hover a { text-decoration: none} .banner h1 { font-size:56px; color: #fff; margin-bottom: 0} .banner p { color:#fff; font-size: 1.2em; } /* ---------------------------------------------------------------------------------------------------------- BANNER -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .banner-logo {width:289px; height: 190px; display: block;text-align: left; text-indent: -9999px; background:url(images/global/whitegates-camping-logo.svg) no-repeat; background-size: 100%; margin:auto;} .banner-content { padding:5em 0;} .banner ul { list-style-type: none; padding:0; margin:0; text-align: center;} .banner ul li { display: inline-block;width: 120px} .banner ul li a {background: #fff; -webkit-transition:.5s all; -moz-transition:.5s all; transition:.5s all;-webkit-box-shadow: 1px 1px 1px #333; -moz-box-shadow: 1px 1px 1px #333; box-shadow: 1px 1px 1px #333;padding:2.6em 1em .5em 1em;display: block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;color: #000} .banner ul li.home-link a { background:url(images/icons/home.svg) no-repeat center 10px #fff;} .banner ul li.campsite-link a { background:url(images/icons/tent.svg) no-repeat center 10px #fff;background-size: 35px} .banner ul li.book-link a { background:url(images/icons/date_range.svg) no-repeat center 10px #fff;} .banner ul li.explore-link a { background:url(images/icons/compass.svg) no-repeat center 10px #fff;background-size: 25px;} .banner ul li.contact-link a { background:url(images/icons/contact.svg) no-repeat center 10px #fff;background-size: 25px;} .homebanner { background:url(images/home/whitegates-camping-view.jpg) no-repeat bottom center; background-size: cover;min-height:100vh } ul.home-menu { margin-top:20px } /* ---------------------------------------------------------------------------------------------------------- HOME -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .homepage .header { top:-150px; } .boat-image { margin-top: 50px; padding-right: 40px; } /* ---------------------------------------------------------------------------------------------------------- CONTENT -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .page { margin-top:120px;} .article { padding:3em 0;} .content { font-size: 1.3em; line-height: 1.8em} .ctaImg { background:url(images/facilities/little-haven-camping-view.png) no-repeat center center; background-size: cover; padding:8em 0;} .explore-page .ctaImg { background:url(images/explore/little-haven-camping-view.png) no-repeat center center;} .message.success { border:solid 2px #08b63d; color:#08b63d; text-align: center; padding:5px; margin-top: .5em} .sidebar { padding-top:2em;} .sidebar ul { list-style-type: none; padding:0; margin:0;} .sidebar ul li a { display: block; border-bottom:solid 1px #333; padding:10px 5px; text-align: center;} .gallery { display: flex;flex-wrap: wrap; justify-content: space-between;} .gallery > div { width: 49%; margin-bottom: 2%;} /* ---------------------------------------------------------------------------------------------------------- FACILITIES -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .facilities { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc} .facilities-icons { padding: 2em 0 0 0} .facilities-icon { width:25%; float: left; border-bottom:solid 1px #e8e8e8; border-left:solid 1px #e8e8e8;padding: 1em} .facilities-icon h3 { font-size: 1.1em; margin:0; padding:0;} .facilities-icon.first { border-left: 0} .facilities-icon.lastrow { border-bottom: 0} .facilities-icon:hover { animation: blinker 1s linear ; } @keyframes blinker { 50% { background:#fff; } } /* ---------------------------------------------------------------------------------------------------------- BOOK -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .tariff { overflow:hidden;margin:3em 0 1em 0;text-align: left; border:solid 2px #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .tariff-group { padding:1em;border-bottom:solid 1px #ccc;} .tariff-title { background-color:#3680a1; padding:.5em 1em;text-align: center;color:#fff; font-weight: 600; font-size: 1.4em} .tariff .grid_8 { border-right:solid 1px #ccc;} /* ---------------------------------------------------------------------------------------------------------- FOOTER-------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .footer { background:#4d4d4e; color:#ffffff; padding:2em 0;} .footer h3 { margin:0 0 .5em 0; font-size: 1.2em} .footer p { margin:0;} .footer a { color:#fff;} .copyright { padding:.5em; color:#fff; text-align: center; font-size: .86em; background:#202020;} .copyright a { color:#fff; } /* ---------------------------------------------------------------------------------------------------------- 07 BREAKPOINTS -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @media screen and (max-width :767px) { [class*='grid_']:not(.fixgrid) { width:100%; margin-right:0; } .logo { margin:auto;width:100px; height: 59px; background-size: 100%; margin-top: 5px} .mainNav ul li { border-right:0;} .mainNav ul li:first-child { border-left:0;} .mainNav ul li a { padding:1em .5em; margin:1em 1em 0 1em; font-size: .86em;} .mainNav ul li.home-link a { background-size: 20px} .mainNav ul li.campsite-link a { background-size: 20px} .mainNav ul li.book-link a { background-size: 20px} .mainNav ul li.explore-link a { background-size: 15px;} .article { padding:5em 0;} .banner-logo {width:200px; height: 132px; background-size: 100%} .banner h1 { font-size:44px; } h1 { font-size:1.6em; } h2 { font-size:1.6em; } h3 { font-size:1.4em; } h4 { font-size:1.2em; } h5 { font-size:1.1em; } h6 { font-size:1em;} .content { font-size: 1.2em; } .boat-image { margin-top: 0px; padding-right: 0px; } .page { margin-top:70px;} .facilities-icon img { max-width: 60%; margin:auto;} .tariff { text-align: center;} } @media screen and (max-width :600px) { .mainNav ul li a { padding:15px 9px ; margin:1em 0 0 0; } .banner h1 { font-size:36px; } h1 { font-size:1.4em; } h2 { font-size:1.4em; } h3 { font-size:1.2em; } h4 { font-size:1em; } h5 { font-size:1em; } .content { font-size: 1.1em; } .facilities-icon { width:50%; border:0} .facilities-icon h3 { font-size: .86em; } } @media screen and (max-width:520px) { .header .g_grid_4.fixgrid, .header .g_grid_8.fixgrid { width:100% } .mainNav ul { text-align: center; } .banner-logo {width:150px; height: 99px; } .banner h1 { font-size:32px; } .banner p { font-size: 1em; } .banner-content { padding:3em 0;} h1 { font-size:1.4em; } h2 { font-size:1.2em; } h3 { font-size:1em; } .banner ul li a { } .banner ul li { width:48%; margin-bottom: 1%; } .page { margin-top:60px;} .content { } } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { /* Place your styles here for all 'Retina' screens */ }