/* Theme Name: AMS Scotland Theme URI: http://ramsaymacfarlane.com Description: Custom theme based on Starkers by Viewport Industries Version: 1.0 Author: Ramsay MacFarlane Author URI: http://ramsaymacfarlane.com */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.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; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#cc0033; color:#fff; } ::selection { background:#cc0033; color:#fff; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ body, input, textarea {font-family: "ff-din-web";font-size: 100%;color: #666; } h1, h2, h3, h4, h5, h6 {font-weight:bold; text-transform:uppercase; margin-bottom: 0.6em; color: #333; line-height:1.6em; } /* H Sizes */ h1 {font-size:1.325em;} h2 {font-size:1.125em;} h3 {font-size:1em;} h4 {font-size:1em;} p, ul, ol {margin-bottom: 1em; line-height:1.6em; } a:link, a:visited {color: #000; text-decoration:underline; } a:hover, a:active {color: #cc0033; text-decoration: underline;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ img.aligncenter.size-large {width: 100%; height: auto; } .container {padding: 20px; overflow: hidden; max-width: 960px; margin: 0 auto;} .container.content {margin-top: 10px;} article ul, .content ul {margin: 20px; font-size: 0.8em;} article ul li, .content ul li {margin-bottom: 0.625em;} header {height:180px; background-image:url(images/head_small.jpg); background-repeat: no-repeat; background-position: top center; text-align: center;} .site-title {width: 150px; height: 63px; text-indent: -9999px; background-image: url(images/AMS.png); background-repeat: no-repeat; margin: 15px auto 5px; } .site-location {color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); font-weight: normal; letter-spacing: 0.2em; font-size: 0.875em; margin-bottom: 0px;} .site-description {color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); letter-spacing: 0.1em; font-size: 1.5em; } #main-nav {font-size: 0.8em; font-weight: bold; line-height: 2em; text-align: center; text-transform: uppercase; background: #cc0033; padding: 10px} #main-nav .container {padding: 10px;} ul.menu li {display: inline-block;} #main-nav a:link, #main-nav a:visited {margin:0 10px; color: #fff; text-decoration: none;} #main-nav a:hover, #main-nav a:active, .current-menu-item a:link, .current-menu-item a:hover, .current_page_item a:link, .current_page_item a:hover, .current-page-ancestor a:link, .current-page-ancestor a:hover {color: #fff; border-bottom: 2px solid #fff; text-decoration: none; } .footnav {background: #111;} .footnav .container {padding: 20px;} .footnav .container ul li {color: #fff; margin-bottom: 20px; padding: 15px; background-color: #cc0033; } .footnav .container ul li:last-child {margin-bottom: 0px;} .foot-book {background-image: url(images/footer-booking.gif);} .foot-map {background-image: url(images/footer-map.gif);} .foot-news {background-image: url(images/footer-news.gif);} .foot-tweet {background-image: url(images/footer-tweet.gif);} .foot-facebook {background-image: url(images/footer-facebook.gif);} .footnav h4 {color: #fff; border-bottom: 2px #fff solid; background-repeat: no-repeat; background-position: right 3px; background-size:16px 16px;} .footnav a {background: #fff; padding: 5px 10px; border-radius: 4px; font-weight: bold; text-transform:uppercase; margin-bottom: 20px; font-size: 0.8em; text-decoration: none;} .footnav a:hover {background: #000; color: #fff; text-decoration: none;} footer {text-align: center; font-size: 0.75em;} footer a:link {text-decoration: none;} .site-credit {margin: 10px auto; width: 66px; height: 22px; } .site-credit-link {float: left; width: 66px; height: 22px; text-indent:-9999px; background: url(images/ramsaymacfarlane.jpg); background-repeat: no-repeat; background-position: 0 0;} .site-credit-link:hover {background-position: 0 -23px;} .chromeframe {border: 5px dashed #cc0033;} .chromeframe p {margin-bottom: 0px; font-size: 1.4em;} .alignright {float: right; margin: 0 0 1em 1em;} .alignleft {float: left; margin: 0 1em 1em 0;} .wp-caption {background: #cc0033; padding: 2px; border-radius: 4px;} .wp-caption p {color: #fff; font-size: 0.875em; font-weight: bold; margin: 5px;} .wp-caption img {margin: 5px;} .cta-button:link, .cta-button:visited{color: #fff; background: #cc0033; padding: 5px 10px; border-radius: 4px; font-weight: bold; text-transform:uppercase; font-size: 0.8em; text-decoration: none; margin-top: 0.8em; display: inline-block;} .cta-button:hover {background: #111; color: #fff;} /* HOME */ .headshow {background: #1b1b1b;} .map-container {position: relative; padding-bottom: 75%; /* 16/9 ratio */padding-top: 30px; /* IE6 workaround*/ height: 0;overflow: hidden; margin-bottom: 30px; border: 3px solid #cc0033;} .map-container iframe, .map-container object, .map-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .video-container {position: relative; padding-bottom: 56.5%; /* 16/9 ratio */padding-top: 30px; /* IE6 workaround*/ height: 0;overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} ul.additional-services {margin: 0 0 20px 0; text-align: center;} ul.additional-services li {border: 1px #999 solid; padding: 20px; } ul.additional-services li img {margin: 10px;} ul.additional-services li p, ul.additional-services li h3 {margin-bottom: 0px;} .season-dates {background: #cc0033; color: #fff; font-weight: bold; font-size: 1.4em; padding: 2em; text-align: center; margin: 1em; border-radius: 4px; display: block; } /* Booking - ContactForm7 */ .content .wpcf7 {border: 1px solid #cc0033; padding: 20px; color: #000;} .content .wpcf7 input, .content .wpcf7 textarea {padding: 3px; } .content .wpcf7 .watermark {color: #000;} .content .wpcf7 .wpcf7-captchac {border: 2px dashed #cc0033;} .content .wpcf7 .wpcf7-submit:disabled {cursor: default; opacity: 0.2;} .content .wpcf7 .wpcf7-submit {background: #cc0033; color: #fff; border: none; box-shadow: none; padding: 10px 12px; text-transform: uppercase; font-weight: bold; border-radius: 4px;} .content .wpcf7 .wpcf7-submit:hover {background: #000;} .content .wpcf7 .dates {width: 100px;} .content .wpcf7 .accommodations {width: 200px;} .content .wpcf7 .submit-area {clear: both; width: 100%; text-align: center; padding-top: 20px;} /* News */ .news-thumb img {border: 5px solid #cc0033; width: 100%;} .news-title {margin-bottom: 0px;} .news-title a {text-decoration: none;} time {color: #cc0033; padding-bottom: 1em;} .article-top {margin: 0.6em 0 1em 0;} article {border-bottom: 1px #ccc dashed; margin-bottom: 2em; padding-bottom: 1em;} article img{width: 100%; height:auto; border: 2px solid #cc0033;} article img:hover{opacity: 0.9;} blockquote {padding-left: 40px; border-left: 1px solid #cc0033; background-image: url(images/quotes.jpg); background-repeat: no-repeat; background-position: 10px 3px; font-style:italic;} /* FAQs */ .faqs .content h4 a {text-decoration: none; text-transform: none;} .wp-super-faq-answer {margin-bottom: 20px;} /* WooCommerce Edits */ tr.cart-subtotal, .wc_payment_methods, .woocommerce-billing-fields h3, .woocommerce-additional-fields h3, .woocommerce-ordering, .woocommerce-result-count {display: none; } .woocommerce-checkout .cart_item {font-weight: normal;} .woocommerce .input-text {padding: 3px 5px; } .woocommerce article img {border: none;} .woocommerce-additional-fields .wooaccommodation {width: 65%; float: left; } .woocommerce-additional-fields .woodate {width: 30%; float: right; } .woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { clear: none;} @media screen and (min-width:500px) { .footnav .container ul li {width: 45%; margin: 0 2% 20px 0; float: left; padding: 2%;} .mid-last {margin: 0;} .footnav .container ul li.no-bottom-margin {margin-bottom: 0px;} .footnav .container ul li:last-child, .footnav .container ul li.mid-last {margin-right: 0px;} ul.additional-services li {display: inline-block; width: 26%; margin-right: 3%; padding: 2%;} ul.additional-services li:last-child {margin-right: 0px;} /* Listing mod hacks for p's */ .west-highland-way-walking-packages p, .milngavie .content p, .croftamie .content p, .drymen .content p, .milton-of-buchanan .content p, .balmaha .content p, .rowardennan .content p, .inversnaid .content p, .inverarnan .content p, .crianlarich .content p, .tyndrum .content p, .bridge-of-orchy-inveroran .content p, .glencoe-kingshouse .content p, .kinlochleven .content p, .fort-william .content p {width: 30%; display: inline-block; margin: 0 3% 40px 0; vertical-align: top;} .west-highland-way-walking-packages p strong, .milngavie .content p strong, .croftamie .content p strong, .drymen .content p strong, .milton-of-buchanan .content p strong, .balmaha .content p strong, .rowardennan .content p strong, .inversnaid .content p strong, .inverarnan .content p strong, .crianlarich .content p strong, .tyndrum .content p strong, .bridge-of-orchy-inveroran .content p strong, .glencoe-kingshouse .content p strong, .kinlochleven .content p strong, .fort-william .content p strong {color: #cc0033;} } @media screen and (min-width:1000px) { /* H Sizes */ h1 {font-size:1.875em;} h2 {font-size:1.5em;} h3 {font-size:1.325em;} h4 {font-size:1.125em;} h5 {font-size:1em;} p {font-size: 1em;} .container {max-width: 960px; margin: 0 auto; padding: 20px; } article ul, .content ul {font-size: 1em;} header {height:360px; background-image:url(images/head_large.jpg);} .site-title {width: 300px; height: 127px; text-indent: -9999px; background-image: url(images/AMS-large.png); background-repeat: no-repeat; margin: 60px auto 10px; } .site-location {font-size: 1.5em;} .site-description {font-size: 3.5em;} #main-nav {font-size: 1.25em; } .footnav .container ul {display: block;} .footnav .container ul li {width: 195px; margin: 0 20px 0 0; float: left; padding: 15px;} .footnav .container ul li:last-child {margin: 0;} .footnav h4 {font-size: 1.325em; background-size: 20px 20px;} .footnav .container ul li.mid-last {margin-right: 20px;} footer {text-align: left; font-size: 0.9em;} .site-supplementary {float: left;} .site-supplementary p {margin-bottom: 0px;} .site-credit {float: right; width: 66px; height: 22px; } .site-credit-link {float: right;} /* HOME */ ul.additional-services li {display: inline-block; width: 255px; margin-right: 30px; } ul.additional-services li:last-child {margin-right: 0px;} .additional-heading {background: #fff; display: inline; line-height: 1em; padding: 0 10px;} h1.additional-heading { line-height: 0.8em;} .additional-heading-bg {background: #cc0033; text-align: center; margin: 0 0 25px 0;} /* Booking - ContactForm7 */ .content .wpcf7 {overflow: hidden;} .content .wpcf7 .form-part-1 {width: 46%; float: left; border-right: 1px dashed #ccc; } .content .wpcf7 .form-part-2 {width: 50%; float: right;} }