/* -------------------------------------------------- Desktop Large - Purple -------------------------------------------------- @media only screen and (min-width: 1401px) { /*body {background:indigo; max-width:1300px;} header {background:indigo!important;} /* HTML mob menu fix - restore spans nav ul li:not(.logo) a.adjust span {display:inline-block; font:bold 1em Helvetica, Arial, sans-serif;} /* Garage .intro-sub {min-height:40px;} } /* -------------------------------------------------- Desktop - Blue -------------------------------------------------- */ @media only screen and (min-width: 1026px) and (max-width: 1400px) { /*body {background:lightskyblue;}*/ header { } /* HTML mob menu fix - restore spans */ nav ul li:not(.logo) a.adjust span {display:inline-block; font:bold 1em Helvetica, Arial, sans-serif;} /* Garage */ .intro-sub {min-height:64px;} /* Store - show .accordion-content, to ensure products are visible */ /* .accordion-content {display:none;} P4L hide */ #servicing .accordion-content, #engine .accordion-content, #transmission .accordion-content, #suspension .accordion-content, #merchandise .accordion-content{ display:block!important; } .product-visual img {height:142px;} .featured .pp-addtocart, .premium .pp-addtocart {margin-top:0;} .sp-order-disclaimer {width:88.7%; margin:.75em auto 1.4em;} } /* -------------------------------------------------- Tablet Landscape - Green -------------------------------------------------- */ @media only screen and (min-width: 770px) and (max-width: 1025px) { /*721 (to rule out Galaxy 6) */ header {background: greenyellow; background-position:right top;} /* Typography */ body {font-size:98%;} h4 {margin-bottom:0.75em;} h5 {margin-bottom:0.8em;} p {margin-bottom:1.2em; line-height:1.45em;} /* HTML mob menu fix - restore spans */ nav ul li:not(.logo) a.adjust span {display:inline-block; font:bold 1em Helvetica, Arial, sans-serif;} nav ul li.logo {width:120px; height:80px;} nav ul li:not(.logo) a, nav ul li:not(.logo) a:visited { display:table-cell; padding:5px 20px 5px 5px; font:bold 0.9em Helvetica, Arial, sans-serif; } header .contact-info li:first-child {margin:-6px 0 0 0;} header .contact-info li a {line-height:0.85em;} li.tel a, li.tel a:visited { font-size:1.5em; } header .contact-info li.p4l-header {display:none;} div.garage-topic:nth-child(odd) {margin-left:0!important;} /* Homepage --------------------------------- */ img.stockist {margin-bottom:2em;} #col-garage {margin-top:.5em;} #store-latest {display:inline-block; margin-top:0.1em; margin-bottom:2.75em; margin-left:0; vertical-align:top} #store-latest a.fr {float:left; font-size:0.95em;} #rx8oc-offer {display:inline-block; padding-top:1.25em; } #rx8oc-offer h4 {position:relative; font-size:1em} #rx8oc-offer h4 img {width:30%; margin:0.5em -0.25em 1em 1em; float:right;} /* Store --------------------------------- */ .tabs .tab {min-height:34px; padding:16px 22px 3px; vertical-align:top;} .tabs .tab h2 {margin-bottom:0; font-size:1em; text-align:center;} /* Store - show .accordion-content, to ensure products are visible .accordion-content {display:block;} #servicing .accordion-content, #engine .accordion-content, #transmission .accordion-content, #suspension .accordion-content, #merchandise .accordion-content{ display:block!important; } */ .product-row div {padding:5px; } .product-row .product-visual {height:auto;} .product-row h4 {font-size:0.9em; margin-bottom:10px; min-height:43px;} .product-row p {font-size:0.7em; margin-bottom:1.5em; padding-left:2px;} .product-row p:first-of-type {margin-top:0;} .product-row span.rrp, .product-row span.rrp span {font-size:0.9em;} .product-row input.pp-addtocart {position:relative; float:left; margin:2px 0 0 11px; font-size:0.8em;} .product-row select {margin-top:0;} .product-row div:hover .product-overlay, .product-overlay {display:none!important} .product-visual {height:auto;} /* >>> Premium & Featured Product 'Tag' Headings --- */ h5.tag-premium, h5.tag-featured { top:2px; z-index:55!important; padding-bottom:3px; font-size:0.6em; } h5.tag-premium {background:#B99A2F!important; padding-left:4px!important;} h5.tag-premium i {display:inline-block!important; position:relative; margin-right:0; opacity:1!important; visibility:visible!important; } .product-overlay h6.tag-premium, .product-overlay h6.tag-featured {display:none;} #cart-widget-container {width:100%; left:0;} #cart-widget {z-index:2000; margin:180px 3.4% 0 0; padding:0;} /*270*/ #cart-widget li {font-size:.9em;} #cart-widget li a {width:60px; padding:3px;} #cart-widget li#cart-icon, #cart-widget li#cart-quantity {margin-bottom:4px;} #cart-widget li#cart-icon a, #cart-widget li#cart-quantity a {min-height:42px; padding:9px 1px 6px 0; font-size:2.75em;} #cart-widget li#cart-icon a {} #cart-widget li#cart-quantity a {color:#bbb; padding:14px 0 1px;} #cart-widget li#elevator {margin-bottom:0; border-width-top:3px;} #cart-widget li#elevator a {padding:3px 0 2px;} table#basket {width:99%; font-size:0.9em;} table#basket th {font-size:1em;} table#basket #controls {background:#fff!important;} #coupon_code {margin-bottom:1.2em;} #apply_code {font-size:1.05em;} a#ppCheckout {margin-right:0.5em} a#ppCheckout {margin-right:0.6em;} #pmt-options #p4l-calculator-container {padding-left:0.5em;} .added .product-visual i.fa-shopping-cart {top:51%; left:49.5%; font-size:4.25em;} .added .product-visual i.fa-check {margin-top:-22px; font-size:1.6em;} #p4lFinanceControls div:nth-child(2) a {margin-right:0; margin-top:-15px; margin-bottom:23px;} #p4lCalculator button {width:100%; padding-top:0.6em;} /* Garage --------------------------------- */ .intro-sub {min-height:65px;} /* About --------------------------------- */ #community-and-future div:first-child img {margin:0.5em 0.5em 1em 2em;} .img-row {margin:0.4em 0 2.2em 0;} .img-row .w-50 {margin-bottom:0!important;} .figwrap-r {margin:0 0 1.4em 1.8em!important;} .figwrap-l {margin:0 1.8em 1.4em 0!important;} figure img {margin-bottom:0!important;} figcaption {font-size:0.9em; line-height:1.4em;} /* Contact Us --------------------------------- */ img.large-premises {min-height:auto;} #how-to-find-us div.accordion-content ul li.blank-li {margin-left:-.8em;} #contact-form {margin-top:2em;} #contact-form input#name,#contact-form input#tel,#contact-form input#email {width:94.5%; margin:0.25em auto; padding:9px 10px;} #contact-form fieldset div label { padding:3px 0 4px 40px; background:url('../img/ico-rotor.png') 7px 2px no-repeat; } #contact-form fieldset:nth-child(2) div {max-width:162px;} #contact-form fieldset div label.qm {background:url('../img/ico-rotor.png') 6px 2px no-repeat;} #contact-form fieldset div input[type=radio] {top:12px; left:-17px;} #contact-form fieldset div input[type=radio]:checked+label {background:url('../img/ico-rotor-red.png') 7px 2px no-repeat;} #contact-form fieldset div input[type=radio]:checked+label.qm {background:url('../img/ico-rotor-red.png') 6px 2px no-repeat;} #contact-form fieldset div input#quick-message {left:-18px;} #contact-form button {margin:1em auto; padding:9px 18px 6px 12px;} #contact-form button img {margin-top:-3px;} /* Login --------------------------------- */ #controls {padding:1.5em 2em 6em;} #controls h1 {font-size:2.2em} #controls form#login {margin-top:2em; font-size:95%;} form#login input, form#login input[type=password] {width:auto; min-width:72%;} form#login button {margin:1.5em auto 1em;} } /* -------------------------------------------------- Tablet Portrait - Yellow -------------------------------------------------- */ @media only screen and (min-width: 669px) and (max-width: 769px) { /*669 (for iPhone 6 Plus support) */ header {background-position:center top;} /* Typography */ body {font-size:92%;} h1 {font-size:1.5em;} h4 {margin-bottom:0.5em;} p {margin-bottom:1.5em; line-height:1.5em;} /* 1. Layout -------------------------------------------------- */ header {margin-bottom:400px;} header nav {height:auto; margin:0 auto; padding:0 0 10px 0;} header nav ul {width:100%; margin:0 auto; padding:0;} header nav ul li { width:auto; margin:0; padding:0; } nav ul li:not(.logo) a, nav ul li:not(.logo) a:visited { display:table-cell; width:100%; height:22px; padding:5px 30px 5px 10px; font:bold 1em Helvetica, Arial, sans-serif; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } nav ul li:not(.logo) a.adjust span {display:inline-block; font:bold 1em Helvetica, Arial, sans-serif;} nav ul li:not(.logo) a:focus {background:#efefef; border-radius:3px;} nav ul li:last-child a {border:none;} /* logo */ nav ul li.logo { display:block; width:120px; height:auto; margin:-5px 0 10px -15px; background:none; box-shadow:none; } nav ul li.logo:hover, nav ul li.logo:focus {background:none; opacity:0.5;} /* contact-info */ header ul#contact-info {top:50px; bottom:80px;} header ul#contact-info li { display:inline-block; padding:0 10px; border-right:1px solid #cfcfcf; } header ul.contact-info li.tel {margin:7px 0 0 0; font-size:0.95em;} header ul.contact-info li:last-child {padding:0 0 0 10px; border:none;} header ul.contact-info li.p4l-header {display:none;} /* touch-contact */ header #touch-contact {display:none;} /* footer */ footer {padding-top:1em; background-position:bottom; background-color:#151515;} #foot-site-map li:first-child {display:block; margin-bottom:0.5em; padding-bottom:0.5em; border-bottom:1px solid #444;} #foot-site-map li {display:inline-block; margin:0 20px 0 0;} #foot-site-map .divider {display:none;} #footcode {width:22%;} #footcode p {margin-bottom:0;} #footcode p a {padding-bottom:1px;} #footcode p a:hover, #footcode p a:focus {padding:0;} #validation li {display:inline-block;} #validation li a {margin-bottom:0;} #hh { position:absolute; bottom:1.5em; right:1.5em; width:140px; margin:0; } /* 2. Homepage -------------------------------------------------- */ .main-srv.srv-store {margin:0;} .main-srv.srv-garage { width:50%!important; border-radius:0 0 0 5px; } .main-srv.srv-help { width:50%!important; border-radius:0 0 5px 0; } #col-garage {margin-top:.6em;} #store-latest {display:inline-block; margin-top:-0.5em; margin-bottom:2.75em; margin-left:0; vertical-align:top} #store-latest a.fr {float:left; font-size:0.95em;} #rx8oc-offer {display:inline-block; padding-top:1.25em; } #rx8oc-offer h4 {position:relative; font-size:1em} #rx8oc-offer h4 img {width:30%; margin:0.5em -0.25em 1em 1em; float:right;} /* Store ------------------------------------------------- */ .tabs .tab {min-height:30px; padding:14px 20px 0; vertical-align:top;} .tabs .tab h2 {margin-bottom:0; font-size:0.9em; text-align:center;} /* Store - show .accordion-content, to ensure products are visible */ .accordion-content {display:none;} /* P4L hide */ #servicing .accordion-content, #engine .accordion-content, #transmission .accordion-content, #suspension .accordion-content, #merchandise .accordion-content {display:block!important;} .product-row div {padding:5px;} .product-row div.product {min-height:215px;} .product-row .product-visual {height:auto;} .product-row h4 {font-size:0.75em; margin-bottom:4px;} .product-row select {margin:0 0 15px; padding:1px 0; font-size:0.9em!important} .product-row p {font-size:0.7em; padding-left:2px;} .product-row p:first-of-type {margin-top:0;} .product-row span.rrp, .product-row span.rrp span {font-size:0.9em;} .product-row input.pp-addtocart {float:left; position:relative; top:0; left:0; right:0; margin:6px 0 0 0; font-size:0.75em;} .product-row div:hover .product-overlay, .product-overlay {display:none!important} .added .product-visual i.fa-shopping-cart {top:53%; left:53%; font-size:4em;} .added .product-visual i.fa-check {margin-top:-23px; font-size:1.6em;} /* >>> Premium & Featured Product 'Tag' Headings --- */ h5.tag-premium, h5.tag-featured { top:1px; z-index:55!important; padding:1px 6px 3px; font-size:0.6em; } h5.tag-premium span, h5.tag-featured span {display:none;} h5.tag-premium {background:#B99A2F!important; padding-left:4px!important;} h5.tag-premium i {display:inline-block!important; position:relative; margin-right:0; opacity:1!important; visibility:visible!important; } .product-overlay h6.tag-premium, .product-overlay h6.tag-featured {display:none;} #cart-widget-container {width:100%; top:1495px; left:0;} #cart-widget {z-index:2000; margin:286px 4% 0 0; padding:0;} /* 326px */ #cart-widget li {font-size:.7em;} #cart-widget li a {width:40px; padding:2px;} #cart-widget li#cart-icon, #cart-widget li#cart-quantity {margin-bottom:4px;} #cart-widget li#cart-icon a, #cart-widget li#cart-quantity a {min-height:27px; padding:7px 1px 5px 0; font-size:2.6em;} #cart-widget li#cart-icon a {} #cart-widget li#cart-quantity a {padding:6px 0; color:#bbb;} #cart-widget li#cart-quantity a strong {font-size:0.8em;} #cart-widget li#elevator {margin-bottom:0; border-width-top:3px;} #cart-widget li#elevator a {padding:2px 0;} /* Tablet Landscape cart widget css (little bigger and chunkier) #cart-widget-container {width:100%; left:0;} #cart-widget {z-index:2000; margin:301px 3% 0 0; padding:0;} #cart-widget li {font-size:.9em;} #cart-widget li a {width:60px; padding:3px;} #cart-widget li#cart-icon, #cart-widget li#cart-quantity {margin-bottom:4px;} #cart-widget li#cart-icon a, #cart-widget li#cart-quantity a {min-height:42px; padding:9px 1px 6px 0; font-size:2.75em;} #cart-widget li#cart-icon a {} #cart-widget li#cart-quantity a {color:#bbb; padding:14px 0 1px;} #cart-widget li#elevator {margin-bottom:0; border-width-top:3px;} #cart-widget li#elevator a {padding:3px 0 2px;} */ table#basket {width:99%; font-size:0.9em;} table#basket th {font-size:1em;} table#basket th span {display:none;} table#basket #controls {background:#fff!important;} #coupon_code {margin-bottom:1.2em;} #apply_code {font-size:1.05em;} a#ppCheckout {margin-right:0.6em;} #pmt-options #p4l-calculator-container {padding-left:0.5em;} #p4lFinanceControls div:nth-child(2) a {position:absolute; top:23px; right:0;} #p4lCalculator button {width:100%;} /* About ------------------------------------------------- */ /* adjust headshot size */ #team-container img { width:100%; height:100%; } .flip-container, .front, .back { width:100px; height:100px; } /* add margin before dynamic duo para */ #team-container #duo-1, #team-container #duo-2 {margin-bottom:3em;} /* Community & Future */ #community-and-future div:first-child img {margin:0.5em 0.5em 2em 1.75em;} #story h4 {margin-bottom:1.2em;} .img-row {margin-top:0.2em;} .img-row .w-50 {margin-bottom:0!important;} .figwrap-r {margin:0 0 1.4em 1.6em!important;} .figwrap-l {margin:0 1.6em 1.4em 0!important;} figure img {margin-bottom:0!important;} figcaption {font-size:0.9em; line-height:1.5em;} /* Garage ------------------------- */ div.garage-topic:nth-child(odd) {margin-left:0!important;} .garage-option:first-child {margin-left:10%!important;} .intro-sub {height:70px;} .garage-topic {display:block; min-height:280px!important; padding:4px; border-bottom:1px solid #ccc;} #topic-compression, #topic-ignition, #topic-common-faults {margin-left:-15px!important;} /* Contact Us -------------------------- */ img.large-premises {min-height:auto;} #rotor-problems {margin-left:-0.5em;} #general-contact i.bg-icon {left:1.5em;} #how-to-find-us div.accordion-content ul {margin-left:2em;} #how-to-find-us div.accordion-content ul li {margin-left:2em; padding-left:5px;} #how-to-find-us div.accordion-content ul li.blank-li {margin-left:-.6em;} #contact-form fieldset div label { padding:7px 0 5px 50px; background:url('../img/ico-rotor.png') 15px 5px no-repeat; } #contact-form fieldset:nth-child(2) div {max-width:170px;} #contact-form fieldset div label.qm {background:url('../img/ico-rotor.png') 14px 5px no-repeat;} #contact-form fieldset div input[type=radio] {left:-9px;} #contact-form fieldset div input[type=radio]:checked+label {background:url('../img/ico-rotor-red.png') 15px 5px no-repeat; color:#a00; font-weight:bold; text-shadow:0 1px 0 #fff;} #contact-form fieldset div input[type=radio]:checked+label.qm {background:url('../img/ico-rotor-red.png') 14px 5px no-repeat; color:#a00; font-weight:bold; text-shadow:0 1px 0 #fff;} #contact-form fieldset div input#quick-message {left:-10px;} #contact-form button {margin:1em 0; padding:9px 18px 6px 12px;} #contact-form button img {margin-top:-3px;} /* Login --------------------------------- */ #controls {margin:3em -20px 10.5em -20px; padding:2em 3.5em 4em;} #controls h1 {font-size:2em} #controls form#login {font-size:95%;} form#login {margin:2.5em 12% 0;} form#login input, form#login input[type=password], form#login button {margin:0 auto .75em; font-size:1em;} form#login input, form#login input[type=password] {width:auto; min-width:75%;} form#login button {margin-top:1.5em;} } /* -------------------------------------------------- Mobile Landscape - Pink -------------------------------------------------- */ @media only screen and (min-width: 482px) and (max-width: 668px) { /*470 (for footer) to 668 / 600 */ html, body {background:#777;} .page {margin:0; background:#777;} .container {margin:0;} .content {margin:0 2%; padding-top:20px; padding-bottom:10px;} header {background:pink;} /* Typography */ body {font-size:84.6%;} h1 {font-size:1.3em;} h2 {font-size:1.2em;} h3 {font-size:1.2em;} h4 {font-size:1em; line-height:1.4em;} h5 {font-size:1em; margin-bottom:1.2em;} p {margin-bottom:1.45em; line-height:1.45em;} /* 1. Layout -------------------------------------------------- */ header { margin:0 10% 6em 10%; padding:0; border-top:4px solid #a00; } header nav {height:auto; margin:0 auto; padding-bottom:10px;} header nav ul {margin:0 auto; text-align:center;} header nav ul li { width:20%; margin:0; padding:0; text-align:center; } nav ul li span {display:none} nav ul li:not(.logo) a, nav ul li:not(.logo) a:visited { display:inline-block; width:100%; height:22px; padding:0.75em 0 0 0; color:#666; font:bold 0.95em Helvetica, Arial, sans-serif; text-shadow:0 1px 0 #cfcfcf; text-decoration:none; vertical-align:bottom; border:none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } nav ul li:not(.logo) a:focus {background:#efefef; border-radius:3px;} /* logos */ header nav ul li.logo {display:none;} header nav ul li.logo-mob { display:block; width:80%; height:36px; max-width:300px; margin:1em auto 0.5em auto; } header nav ul li.logo-mob img {margin:-2px auto 0 auto; width:75%; max-width:260px;} nav ul li.logo-mob:hover, nav ul li.logo-mob:focus {background:none; opacity:0.5;} /* contact-info */ header ul.contact-info {top:10px; display:none;} header ul#contact-info { width:95%; height:40px; top:10px; left:-5px; margin:0; border:1px dashed blue; } header ul#contact-info li { display:inline-block; width:33.3%; margin:0 -4px 0 0; } header ul#contact-info li:first-child {text-align:left; text-indent:20px;} header ul#contact-info li:nth-child(2) {text-align:center;} header ul#contact-info li:last-child {text-indent:20px;} /* Enable #touch-contact */ #touch-contact {display:inline;} #touch-contact a, #touch-contact a:visited { display:block; padding:0; color:#777; font-size:1.4em; border:none; } #touch-contact a i { margin-left:0; padding:6px 4px; background:#ccc; border:none; border-radius:20px; } #touch-contact a i.fa-map-marker {position:absolute; top:1em; left:1.15em;} #touch-contact a i.fa-phone {position:absolute; top:1em; right:1.15em;} #touch-contact a i:hover, #touch-contact a i:focus {background:#c00; color:#eee;} /* footer */ footer {padding:0.5em 7.5% 0 7.5%; text-align:center; background-position:bottom; background-color:#151515;} footer div:first-child { float:none!important; width:100%!important; margin-left:auto!important; margin-right:auto!important; } #foot-site-map {width:100%; margin:0 auto 0.3em auto;} #foot-site-map li {display:inline-block; margin:10px; font-size:0.85em; text-align:center;} #foot-site-map li:first-child {margin:0; padding-bottom:0px; border-bottom:0px solid #444;} #foot-site-map li:first-child strong {font-weight:normal} #foot-site-map li.divider {margin:0 0 0 10px;} #footinfo {width:100%; margin-bottom:0;} #footinfo p {margin-bottom:0.5em;} #footcode { position:relative; display:block; width:100%; height:4em; margin-top:1em; padding:0; } #footcode #validation { position:absolute; bottom:0; left:0; width:68px; height:28px; margin:0 0 1em 0; padding:6px 6px 2px 6px; font-size:0.9em; background:rgba(0,0,0, 0.4); } #footcode #validation li {display:inline-block; float:left; font-size:0.8em;} #footcode #validation li i.fa-css3 {margin-top:2px; font-size:1.8em;} #footcode p {margin-bottom:0;} #footcode p small {line-height:1.3em} #footcode p a {padding-bottom:1px;} #footcode p a:hover, #footcode p a:focus {padding:0;} #hh {position:absolute; bottom:0.85em; right:0;} /* Homepage ------------------------------------------------- */ ul#supersized, ul#slide-list, #progress-back, #progress-bar {display:none; visibility:hidden;} .main-srvs { width:86%; margin:-2.5em auto 0em auto; padding:0; background:none; box-shadow:none; border:0px dotted #ccc; border-radius:5px; } .main-srv { display:inline-block; width:33%!important; min-height:100px; margin-bottom:0!important; padding:0; text-align:center; vertical-align:middle; background:none; border:0px dashed lime; /* 1px to see containers */ } .main-srv a {text-decoration:none; border:0;} .main-srv a:hover, .main-srv a:focus {text-decoration:none; border:0;} .main-srv div { width:100%; opacity:0.8; margin:0; /* add top/bottom '20px 0' to separate containers */ vertical-align:bottom; box-shadow:inset 0 0 25px rgba(0,0,0, 0.25), inset 0 45px 50px rgba(0,0,0, 0.2); transition:box-shadow 1.3s ease-out; } .main-srv div:hover, .main-srv div:focus, .main-srv div:active { opacity:1; box-shadow:inset 0 0 15px rgba(0,0,0, 0.1), inset 0 40px 50px rgba(0,0,0, 0.1), inset 0 40px 120px rgba(0,0,0, 0.5), inset 0 -20px 30px rgba(0,0,0, 0.5); transition:box-shadow 0.3s ease; } .bg-blk, .bg-blk-store {background:none;} /* #fff for clarity testing */ .bg-blk:first-child {} .bg-blk:last-child {} .bg-blk-store {margin-top:-10px;} .main-srv div.srv-garage, .main-srv div.srv-store, .main-srv div.srv-help { display:inline-block; min-height:100px; height:100px; margin-bottom:0!important; border:1px solid #333; border-bottom-color:#333; } .main-srv div.srv-garage { background:url(../img/home-bg-services.jpg) -20px 0 no-repeat #111; border-radius:7px 0 0 0; } .main-srv div.srv-store { height:111px; background:url(../img/home-bg-store.jpg) -70px -7px no-repeat #111; border-top:0; } .main-srv div.srv-help { background:url(../img/home-bg-help.jpg) left no-repeat #111; border-radius:0 7px 0 0; } #store-mobile {display:none; margin:0;} .main-srv div h2 { margin-bottom:0!; padding-top:12%; color:#eee; font-size:1.1em; text-shadow:0 0 3px rgba(0,0,0, 1), 0 0 12px rgba(0,0,0, 0.75); transition:all 0.5s 0.1s linear; } .main-srv div:hover h2, .main-srv div:focus h2, .main-srv div:active h2 { color:#fff; text-shadow:0 0 3px rgba(0,0,0, 1), 0 0 9px rgba(0,0,0, 1), 0 0 14px rgba(0,0,0, 0.1), 0 0 22px rgba(0,0,0, 0.75); transition:all 0.3s 0.3s linear; } #col-garage {margin-left:0;} #col-garage h4.sub {margin-bottom:1em;} #col-store {margin-bottom:0; margin-left:0;} #store-latest {display:inline-block; margin-top:0; margin-bottom:2.75em; margin-left:0; vertical-align:top} #store-latest a.fr {float:right; font-size:0.9em;} #rx8oc-offer {display:inline-block; margin-left:8%; padding-top:2.25em; border:0;} #rx8oc-offer h4 {position:relative; font-size:1em} #rx8oc-offer h4 img {width:50%; margin:0.5em -1em 1em 1em; float:right;} img.stockist {margin-bottom:2em;} /* Store ------------------------------------------------- */ #store-container {margin-top:0;} #store-container .tab-content {display:block!important;} .intro p small {color:#777;} .sp-order {margin-bottom:1em; font-size:0.9em;} .sp-order h5, .sp-order-disclaimer h5 {margin-bottom:0.65em;} /* Hides desktop view Tabs for mobile display. (.accordion-title) used for mobile store categroy display */ .tabs .tab {display:none;} .tabs .tab-content {padding:0.5em!important; border-radius:0; border-color:#ccc;} /* Correct curved corners and borders on accordion-titles */ .tabs #servicing.tab-content {margin-top:2em; border-bottom:0!important; border-radius:5px 5px 0 0;} .tabs #engine.tab-content, .tabs #transmission.tab-content, .tabs #suspension.tab-content {border-bottom:0!important;} .tabs #merchandise.tab-content {margin-bottom:3em; border-radius:0 0 5px 5px;} /* Style accordion titles */ .accordion-title {display:block!important; text-align:center;} .accordion-title h2 { display:block; margin:0!important; padding:.5em 0!important; font-size:1.25em; color:#BA2115; } .accordion-title:hover h2 {color:#EF6465;} /* Style accordion content */ .accordion-content {display:none; margin:0; padding-top:1em;} .accordion-content h3 {margin-top:0.5em;} .accordion-content h4 {font-size:1.2em;} .accordion-content h4, .accordion-content p {text-align:center;} /* Responsive products */ .product-row div {height:auto; padding:5px;} .product-row div.product {min-height:229px;} /* was: 219px */ .product-row h4, .product-row p {padding:0 2px; text-align:left;} .product-row h4 {min-height:48px; margin-bottom:0.5em; font-size:0.9em;} .product-row select {margin:0 0 80px 0; padding:1px 0;} /* margin-bottom: was 60px; */ .product-row p {font-size:0.7em;} .product-row p.base {margin:-24px 0 25px 0;} /* .product-row p:first-of-type {margin-top:0;} */ .product-row p:first-of-type {position:absolute; bottom:5px; margin-bottom:34px;} .product-row span.rrp {position:absolute; bottom:5px; margin-bottom:50px; font-size:0.95em;} .product-row input.pp-addtocart {position:absolute; bottom:7px; left:5px; margin:12px 0 0 0; font-size:0.8em;} .product-row div:hover .product-overlay, .product-overlay {display:none!important} /* >>> Premium & Featured Product 'Tag' Headings --- */ h5.tag-premium, h5.tag-featured { top:0; z-index:55!important; padding:1px 6px 2px; font-size:0.7em; color:#fff; } h5.tag-premium span, h5.tag-featured span {display:none;} h5.tag-premium {background:#B99A2F!important; padding-left:4px!important;} h5.tag-premium i {display:inline-block!important; position:relative; margin-right:0; opacity:1!important; visibility:visible!important; } .product-overlay h6.tag-premium, .product-overlay h6.tag-featured {display:none;} /* desktop version widget */ #cart-widget-container {width:100%; top:850px; left:0;} #cart-widget {z-index:2000; margin:4% 4% 0 0; padding:0;} #cart-widget li {font-size:.7em;} #cart-widget li a {width:40px; padding:2px;} #cart-widget li#cart-icon, #cart-widget li#cart-quantity {margin-bottom:4px;} #cart-widget li#cart-icon a, #cart-widget li#cart-quantity a {min-height:27px; padding:7px 1px 5px 0; font-size:2.6em;} #cart-widget li#cart-icon a {} #cart-widget li#cart-quantity a {padding:6px 0; color:#bbb;} #cart-widget li#cart-quantity a strong {font-size:0.8em;} #cart-widget li#elevator {margin-bottom:0; border-width-top:3px;} #cart-widget li#elevator a {padding:2px 0;} #cart-summary-container h3 {margin-top:1em;} table#basket {width:99%; font-size:0.9em;} table#basket th {font-size:0.85em;} table#basket #controls {background:#fff!important;} #apply_code {margin-top:1em; font-size:1em;} #cart-summary-container p {padding:0 0.45em;} a#ppCheckout {margin-right:0.6em; margin:1em auto;} #pmt-options #p4l-calculator-container {padding-left:0;} #p4l-toggle.accordion-title {padding:0 .95em 0 0.7em!important; text-align:right;} #p4l-calculator-container #p4l-toggle {margin-top:2.72em;} #p4l-calculator-container #p4l-toggle h2 {text-align:right; font-size:1.3em;} #p4l-toggle i {margin:2px 8px 0 -6px;} #p4lCalculator {padding-top:1em!important;} #pp-container.pp-container {text-align:center!important;} #p4lFinanceControls h4, #p4lFinanceControls p {text-align:left!important;} #p4lFinanceControls div:nth-child(2) {margin-top:0.8em; margin-bottom:0; text-align:left;} #p4lFinanceControls div:nth-child(2) a {position:absolute; top:2em; right:0.1em;} #p4lFinanceControls div:nth-child(2) a i {margin:4px 8px 0 -8px!important;} #p4lFinanceControls div:nth-child(2) select#p4lPlanOptions {margin-left:0!important;} input#p4Value {width:75%;} select#p4lPlanOptions {margin-left:auto; margin-right:auto;} #p4lCalculator button {width:100%;} /* Garage ------------------------------------------------- */ /* About ------------------------------------------------- */ #team-container {margin-bottom:1em;} /* adjust headshot size */ #team-container img { width:100%; height:100%; } .flip-container, .front, .back { width:100px; height:100px; } .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform:none; } /* 2 per row (duo) */ #duo-container {width:47%; margin-right:3%} /* adjust margin before dup para */ #team-container #duo-1, #team-container #duo-2 { margin-bottom:1.5em; } #team-container #duo-2 p {padding:0 5px;} /* centre Ben */ #duo-container .txt-l {text-align:center;} #staff-1 {margin-left:auto;} /* 2 per row (remainder) */ #team-container .w-25 {width:22.5%;} #staff-3 {margin-left:0;} #story h4 {margin-bottom:1.2em; font-weight:bold;} /* image alignment correction */ #story .figwrap-r, #story .figwrap-l {min-width:33%;} #story .figwrap-r {margin-left:4%;} #story .figwrap-l {margin-right:4%;} figcaption {line-height:1.45em;} .img-row {margin-top:0.75em!important;} .img-row .row {margin-bottom:0.65em;} section .figwrap-r { clear:both; display:inline-block; width:47%; margin-bottom:1.5em; } /* 14. Contact Us -------------------------------------------------- */ #rotor-problems {margin-left:0;} img.large-premises {min-height:auto;} #how-to-find-us div.accordion-content ul {margin-left:0.75em;} #how-to-find-us div.accordion-content ul li {margin-left:1em; padding-left:5px;} #how-to-find-us div.accordion-content ul li.blank-li {margin-left:-0.5em;} #contact-form {margin-top:2em;} #contact-form input, #contact-form select, #contact-form textarea, #contact-form button { width:100%; box-sizing:border-box; } #contact-form {box-shadow:0 2px 8px rgba(0, 0, 0, 0.5);} #contact-form input#name, #contact-form input#email, #contact-form input#tel {width:100%; margin:0.25em 0 0.25em 0; padding:9px 10px;} #contact-form input#name {margin-right:0;} #contact-form input#email {width:100%!important;} #contact-form fieldset:nth-child(2) {padding-left:0.15em;} #contact-form fieldset:nth-child(2) div.mp-70 {margin:0 auto .5em 0; padding:0;} #contact-form fieldset div input[type=radio] { position:absolute; top:10px; left:-62px; margin:0; cursor:pointer; } #contact-form fieldset div input[type=radio]:checked+label {background:url('../img/ico-rotor-red.png') 5px 5px no-repeat; color:#a00; font-weight:bold; text-shadow:0 1px 0 #fff;} #contact-form fieldset div input[type=radio]:checked+label.qm {background:url('../img/ico-rotor-red.png') 4px 5px no-repeat; color:#a00; font-weight:bold; text-shadow:0 1px 0 #fff;} #contact-form fieldset div input#quick-message {left:-63px;} #contact-form textarea {width:96%; margin:0 2% 0.5em 2%; min-height:160px;} #contact-form button {width:75%; margin:1.2em auto; padding:8px 10px 7px 7px; font-size:1.1em} #contact-form button img {display:none;} /* Login --------------------------------- */ #controls {margin:2em 0 0 0; padding:1em .5em 3em;} #controls h1 {font-size:2em} #controls form#login {margin:2em 18%; padding:2em 1em;} form#login p {max-width:80%; margin:0 auto 1.4em;} form#login input, form#login input[type=password], form#login button {margin:0 auto .75em; font-size:1em;} form#login input, form#login input[type=password] {width:auto; min-width:88%;} form#login button {margin-top:1.5em;} } /* -------------------------------------------------- Mobile Portrait - Red -------------------------------------------------- */ @media only screen and (max-width: 481px) { /*469 (for footer) */ html, body {background:#777;} .page {margin:0;} header {background:#c55;} /* Typography */ body {font-size:84.6%;} h1 {font-size:1.3em;} h2 {font-size:1.2em;} h3 {font-size:1.2em;} h4 {line-height:1.4em;} h5 {font-size:1em; bottom-margin:1.2em;} p {margin-bottom:1em; line-height:1.4em;} /* 1. Layout -------------------------------------------------- */ header { margin:0 20px 30px 20px; padding:0; border-top:4px solid #a00; } header ul.contact-info {top:10px; display:none;} header nav {height:auto; margin:0 auto; padding-bottom:10px;} header nav ul {margin:0 auto; text-align:center;} header nav ul li { width:20%; margin:0; padding:0; text-align:center; } nav ul li span {display:none} nav ul li:not(.logo) a, nav ul li:not(.logo) a:visited { display:inline-block; width:100%; height:22px; padding:0.75em 0 0 0; color:#666; font:bold 0.85em Helvetica, Arial, sans-serif; text-shadow:0 1px 0 #cfcfcf; text-decoration:none; vertical-align:bottom; border:none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } nav ul li:not(.logo) a:first-child, nav ul li:not(.logo) a:visited:first-child {margin-left:-0.5em;} nav ul li:not(.logo) a:focus {background:#efefef; border-radius:3px;} /* logos */ header nav ul li.logo {display:none;} header nav ul li.logo-mob { display:block; width:80%; height:26px; max-width:200px; margin:1em auto 1.5em auto; padding-bottom:0!important; } nav ul li.logo-mob:hover, nav ul li.logo-mob:focus {background:none; opacity:0.5;} header nav ul li.logo-mob img {margin:-2px auto 0 auto; width:80%; max-width:260px;} /* contact-info */ header ul#contact-info { width:95%; height:40px; top:10px; left:-5px; margin:0; border:1px dashed blue; } header ul#contact-info li { display:inline-block; width:33.3%; margin:0 -4px 0 0; } header ul#contact-info li:first-child {text-align:left; text-indent:20px;} header ul#contact-info li:nth-child(2) {text-align:center;} header ul#contact-info li:last-child {text-indent:20px;} /* Enable #touch-contact */ #touch-contact {display:inline;} #touch-contact a, #touch-contact a:visited { display:block; padding:0; color:#777; font-size:1.2em; border:none; } #touch-contact a i { margin-left:0; padding:6px 4px; background:#ccc; border-radius:20px; border:none; } #touch-contact a i.fa-map-marker {position:absolute; top:0.9em; left:1.1em;} #touch-contact a i.fa-phone {position:absolute; top:0.9em; right:1.1em;} #touch-contact a i:hover, #touch-contact a i:focus {background:#c00; color:#eee;} /* container */ .content {padding-top:20px; padding-bottom:10px; border-radius:0;} .m-only {display:block; margin:-10px 0 0 0; padding:0;} /* footer */ footer {margin-bottom:0; padding-top:0.5em; font-size:0.95em; text-align:right; background-position:left bottom; background-color:#121212;} footer ul {width:100%; margin:0.75em auto 1.25em auto; font-size:0.9em;} footer ul li {display:inline-block; margin:2px 5px; text-align:center;} footer ul li span {display:none;} footer ul li:first-child {display:inline-block; margin:0; padding-bottom:0px;} footer ul li.divider {display:inline-block;} #footinfo {width:100%;} #footcode { position:relative; display:block; width:100%; height:4em; padding:0; } #footcode #validation { position:absolute; bottom:0; left:0; width:75px; height:30px; margin:0 0 1em 0; padding:6px 6px 2px 6px; font-size:0.9em; background:rgba(0,0,0, 0.4); } #footcode #validation li {display:inline-block; float:left;} #footcode #validation li i.fa-css3 {margin-top:2px; font-size:1.85em;} #footcode p {margin-bottom:0;} #footcode p small {line-height:1.3em;} #footcode p a {padding-bottom:1px;} #footcode p a:hover, #footcode p a:focus {padding:0;} #hh {position:absolute; bottom:1.2em; right:0;} /* Homepage -------------------------------------------------- */ ul#supersized, ul#slide-list, #progress-back, #progress-bar {display:none; visibility:hidden;} .main-srvs { margin:-0.4em 3em 2.5em 3em; background:none; box-shadow:0 2px 4px rgba(0,0,0, 0.25); border:0; border-radius:5px; } .main-srv { min-height:50px; margin:20px 0; text-align:center; background:none; vertical-align:middle; border:0px solid fuchsia; /* 1px to see containers */ } .main-srv div { opacity:0.8; min-height:60px; margin:0; /* add top/bottom '20px 0' to separate containers */ vertical-align:bottom; box-shadow:inset 0 0 25px rgba(0,0,0, 0.25), inset 0 45px 50px rgba(0,0,0, 0.2); transition:box-shadow 1.3s ease-out; } .main-srv div:hover, .main-srv div:focus, .main-srv div:active { opacity:1; box-shadow:inset 0 0 15px rgba(0,0,0, 0.1), inset 0 40px 50px rgba(0,0,0, 0.1), inset 0 40px 120px rgba(0,0,0, 0.5), inset 0 -20px 30px rgba(0,0,0, 0.5); transition:box-shadow 0.3s ease; } .bg-blk, .bg-blk-store {background:none;} /* #fff for clarity testing */ .main-srv div.srv-garage, .main-srv div.srv-store, .main-srv div.srv-help { min-height:30px; height:50px; border-radius:0; /* margin-bottom:0; */ } .main-srv div.srv-garage { background:url(../img/home-bg-services.jpg) right no-repeat #111; border:1px solid #444; border-left-color:#222; border-top:0; } .main-srv div.srv-store { background:url(../img/home-bg-store.jpg) -50px 1px no-repeat #111; border:1px solid #333; border-top:0; border-radius:5px 5px 0 0; } .main-srv div.srv-help { background:url(../img/home-bg-help.jpg) left no-repeat #111; border:1px solid #333; border-left-color:#555; border-top:0; border-radius:0 0 5px 5px; } #store-mobile {display:none; margin:0;} .main-srv div h2 { margin-bottom:0!; padding-top:13px; color:#eee; font-size:1.1em; text-shadow:0 0 3px rgba(0,0,0, 1), 0 0 12px rgba(0,0,0, 0.75); transition:all 0.5s 0.1s linear; } .main-srv div:hover h2, .main-srv div:focus h2, .main-srv div:active h2 { color:#fff; text-shadow:0 0 3px rgba(0,0,0, 1), 0 0 9px rgba(0,0,0, 1), 0 0 14px rgba(0,0,0, 0.1), 0 0 22px rgba(0,0,0, 0.75); transition:all 0.3s 0.3s linear; } img.stockist {margin-bottom:3em;} #store-latest {margin-top:1.2em;} #rx8oc-offer h4 img {margin-bottom:2em;} #rx8oc-offer p:last-child {text-align:center;} /* Store ------------------------------------------------- */ #featured-product-row div:hover div.product-overlay, .product-row div:hover div.product-overlay {display:none;} /* raise product overlay above all else */ .product-row div.premium::after {border-width:1.4em; /* triangle depth */ } #store-container {margin-top:0;} .sp-order {margin-bottom:1em; font-size:.9em;} #store-container .tab-content {display:block!important;} .intro p small {color:#777;} /* Hides desktop view Tabs for mobile display. (.accordion-title) used for mobile store categroy display */ .tabs .tab {display:none;} .tabs .tab-content {padding:0.65em; border-radius:0; border-color:#ccc;} /* Correct curved corners and borders on accordion-titles */ .tabs #servicing.tab-content {margin-top:2em; border-bottom:0!important; border-radius:5px 5px 0 0;} .tabs #engine.tab-content, .tabs #transmission.tab-content, .tabs #suspension.tab-content {border-bottom:0!important;} .tabs .tab-content:last-child {margin-bottom:3em; border-radius:0 0 5px 5px;} /* Style accordion titles */ .accordion-title {display:block!important; text-align:center;} .accordion-title h2 { display:block; margin:0!important; padding:.25em 0!important; font-size:1.35em; color:#BA2115; } .accordion-title:hover h2 {color:#EF6465;} /* Style accordion content */ .accordion-content {display:none; padding-top:1em;} .accordion-content h3 {margin-top:0.35em;} .accordion-content h4 {font-size:1em;} .accordion-content h4, .accordion-content p {text-align:center;} /* Responsive products */ .product-row div.w-25 {margin-bottom:1.5em;} .product-row div {height:auto; padding:5px;} .product-row div.product, .product-row .product {min-height:195px;} .product-row div.product:nth-child(3n+3), .product-row .product:nth-child(3n+3) {clear:both;} .product-row h4, .product-row p {padding:0 2px; text-align:left;} .product-row h4 {min-height:45px; margin-bottom:1em; font-size:0.9em;} .product-row p {font-size:0.7em;} .product-row p.base {margin-top:14px;} /* matches main stylesheet top margin */ .product-row p:first-of-type {margin-bottom:34px;} .product-row input {/*float:none; position:relative;*/ bottom:0; left:5px; right:0; width:auto; max-width:70%; margin:8px 0 4px 0px;} .product-row select {margin:-5px 0 5px 0;} /* >>> Premium & Featured Product 'Tag' Headings --- */ h5.tag-premium, h5.tag-featured { top:0; z-index:55!important; padding:1px 6px 2px; font-size:0.7em; color:#fff; } h5.tag-premium span, h5.tag-featured span {display:none;} h5.tag-premium {background:#B99A2F!important; padding-left:4px!important;} h5.tag-premium i {display:inline-block!important; position:relative; margin-right:0; opacity:1!important; visibility:visible!important; } .product-overlay h6.tag-premium, .product-overlay h6.tag-featured {display:none;} #cart-widget-container { position:fixed; top:910px; width:100%; min-height:10px; margin:0 -20px 0; padding:0; text-align:center; font-size:1em; } #cart-widget { position:relative; width:100%; margin:0 0 -80px 0; padding:0; background:#555; border:0; border-radius:0px; box-shadow:0 3px 8px rgba(0,0,0, 0.25); } #cart-widget ul {display:block; min-height:35px; margin:0; padding:0; list-style:none;} #cart-widget li {display:inline-block!important; vertical-align:top;} #cart-widget li#cart-icon, #cart-widget li#cart-quantity, #cart-widget li#elevator { width:30%; min-height:100%; margin:0 0.25%; border:0; border-radius:0; } #cart-widget li#cart-quantity {background:#444;} #cart-widget li a { display:block; width:100%; min-height:25px!important; margin:0; padding:8px 0; font-size:1em; text-align:center; border-bottom:0; border-radius:0; } #cart-widget li#cart-icon a, #cart-widget li#cart-quantity a, #cart-widget li#elevator a { margin-bottom:0!important; padding:6px 0; font-size:0.8em; background:0; border-radius:0; } /* corrections */ #cart-widget li a i {vertical-align:top;} #cart-widget li a span { display:inline-block; margin:0!important; padding:2px 0 0 0; border:0px dotted blue; vertical-align:top; } /* individual corrections */ #cart-widget li#cart-quantity a strong, #cart-widget li#cart-icon a i { display:inline-block; min-width:25%; margin:0!important; padding:0; font-size:2em; border:0px dotted fuchsia; vertical-align:top; } #cart-widget li#cart-icon a span, #cart-widget li#cart-quantity a span, {padding-top:2px;} #cart-widget li#cart-icon a i {margin-left:-3px!important; margin-right:4px!important; font-size:2.2em;} #cart-widget li#cart-quantity a strong {margin-left:-4px!important; padding-top:1px!important;} #cart-widget li#cart-quantity a span {margin-left:-4px!important;} #cart-widget li#cart-quantity a:hover {color:#eee; background:#333;} #cart-widget li#elevator a {margin-top:0px; padding:8px 0 4px;} #cart-widget li#elevator a strong {margin-left:-3px;} /* Basket summary */ table#basket {width:99%; margin-top:2em; font-size:0.9em;} table#basket th {font-size:0.85em;} table#basket th span {display:none;} table#basket #controls {background:#fff!important;} #controls td label strong span {display:none;} #coupon_code {max-width:70px; margin-bottom:0.65em;} #apply_code {font-size:1em;} #cart-summary-container p {padding:0 0.45em;} a#ppCheckout {margin-right:0.6em; float:none; margin:1em auto;} #pmt-options #p4l-calculator-container {padding-left:0;} #p4l-toggle.accordion-title {padding:0 .95em 0 0.7em!important; text-align:right;} #p4l-calculator-container #p4l-toggle h2 {text-align:right;} #p4l-toggle i {margin:2px 8px 0 -6px;} #p4lCalculator {padding-top:1em!important;} #pp-container.pp-container {text-align:center!important;} #p4lFinanceControls h4, #p4lFinanceControls p {text-align:left!important;} #p4lFinanceControls div:nth-child(2) {text-align:left;} #p4lFinanceControls div:nth-child(2) a {position:absolute; top:2em; right:0.1em;} #p4lFinanceControls div:nth-child(2) a i {margin:4px 8px 0 -8px!important;} #p4lFinanceControls div:nth-child(2) select#p4lPlanOptions {margin-left:0!important;} input#p4Value {width:75%;} select#p4lPlanOptions {margin-left:auto; margin-right:auto;} #p4lCalculator button {margin:0 auto 1em auto!important; width:100%;} /* Garage ------------------------------------------------- */ /* About ------------------------------------------------- */ #team-container {margin-bottom:1em;} /* adjust headshot size */ #team-container img { width:100%; height:100%; } .flip-container, .front, .back { width:100px; height:100px; } .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform:none; } /* 2 per row (duo) */ #duo-container {width:100%;} /* adjust margin before dup para */ #team-container #duo-1, #team-container #duo-2 { margin-bottom:1.5em; } /* centre Ben */ #duo-container .txt-l {text-align:center;} #staff-1 {margin-left:auto;} /* 2 per row (remainder) */ #team-container .w-25 {width:48%;} #staff-3 {margin-left:0;} /* Community & Future */ #community-and-future div {width:100%; margin-left:0;} #community-and-future div:first-child {margin-bottom:2em;} #community-and-future div:first-child img {margin:0.5em 0 1.5em 1.25em;} #story h4 {margin-bottom:1.2em; font-weight:bold;} /* image alignment correction */ #story .figwrap-r, #story .figwrap-l {min-width:100%;} #story .figwrap-r {margin-left:8%; margin-right:0;} #story .figwrap-l {margin-right:8%; margin-left:0;} figcaption {line-height:1.45em;} .img-row .row {margin-bottom:0.65em;} .img-row img {min-width:48%; margin-bottom:0.65em; border-radius:0;} .img-row img:nth-child(3) {clear:both; margin-left:0;} .img-row .w-50 {width:100%; text-align:center;} .img-row .w-50 img {width:47%; margin:0 1.2% 0 1.2%;} section .figwrap-r { clear:both; display:inline-block; min-width:47%!important; margin:0 0 1em 0; } section .figwrap-r:first-child {margin-top:2.5em;} #story-original-logo {float:right; clear:both;} /* Contact Us -------------------------------------------------- */ img.large-premises {display:none;} #how-to-find-us div.accordion-content ul {margin-left:0.75em;} #how-to-find-us div.accordion-content ul li.blank-li {margin-left:-0.5em;} #general-contact {margin-bottom:0;} address {margin-bottom:1em;} #contact-form {margin-top:2em;} #contact-form input, #contact-form select, #contact-form textarea, #contact-form button { width:100%; box-sizing:border-box; } #contact-form {box-shadow:0 2px 8px rgba(0,0,0, 0.5);} #contact-form input#name,#contact-form input#tel,#contact-form input#email {width:100%; margin:0.25em 0;} #contact-form input#name {margin-right:0;} #contact-form fieldset:nth-child(2) {padding-left:0.15em;} #contact-form fieldset:nth-child(2) div.mp-70 {margin:0 auto .5em 0; padding:0;} #contact-form fieldset div input[type=radio] { display:block; position:absolute; top:10px; left:-62px; margin:0; cursor:pointer; } #contact-form fieldset div {background:#ececec; border:none;} #contact-form fieldset div:hover, #contact-form fieldset div:focus {background:#fdfdfd;} .shade {background:#fdfdfd; box-shadow:inset 0 1px 4px rgba(0,0,0, 0.35);} .shade:hover, .shade:focus, .shade:active {background:#fdfdfd;} #contact-form fieldset div label {padding:2px auto 0 10px;} #contact-form fieldset div input[type=radio]:checked+label, #contact-form fieldset div input[type=radio]:checked+label.qm {color:#a00; font-weight:bold; text-shadow:0 1px 0 #fff;} #contact-form fieldset div input#quick-message {left:-63px;} .shade label {margin:3px 2px 1px 10px!important;} #contact-form textarea {width:98%; margin:0 1% 1.5em 1%;} .ppref label {line-height:1.4em;} .ppref label a {white-space:nowrap;} input#gdpr_consent {width:auto!important; float:left!important; display:inline-block; margin:0 10px 15px 4px;} #contact-form button {width:65%; margin:1.25em auto; padding:8px 10px 10px 7px; font-size:1.1em} #contact-form button img {display:none;} /* Discount Terms and Conditions */ #terms { margin-left:20px; margin-right:20px; } #terms li {padding-left:5px;} /* Login --------------------------------- */ #controls {margin:2em 0 0 0; padding:2em 0 3em;} #controls h1 {font-size:1.5em} #controls form#login {margin:2em 18%; padding:1.5em 1em; font-size:90%;} form#login input, form#login input[type=password], form#login button {font-size:1em;} form#login input, form#login input[type=password] {width:auto; min-width:86%;} form#login button {margin-top:1.5em;} } /* -------------------------------------------------- Force Headers (disable responsive colouring) -------------------------------------------------- */ @media only screen and (max-width:3440px) { header {background:#fafafa!important;} } /* -------------------------------------------------- Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4. ----------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body {} }