/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ html {background:#192730; font-family: 'PT Sans', sans-serif; color:#fff; } body {font-size:12px; } body a {text-decoration:none; } body a:hover {text-decoration:underline; } hr {margin:10px 0 20px 0;} #nav ul, h2, h3 {font-family: 'Fjalla One', sans-serif; } .more {float:right; margin:-5px 8px 13px 10px; font-family: "Fjalla One",sans-serif; } .more a {color:#2e4a5a!important;} p .more::before {content: " \003e\003e";} .smallertext {font-size:0.8em; } .smalltext {font-size:0.9em; } .bigtext {font-size:1.1em; } .biggertext {font-size:1.25em; } .photoleft {margin:0 14px 16px 0; float:left; max-width:50%; height:auto;} .photoright {margin:0 0 16px 14px; float:right; max-width:50%; height:auto;} .on-road .scaled {width:20%;} .social a {border-radius:10.5px; background-color:#95d4f8; display:block; height:21px; width:21px; margin:0 2px 0 2px;} .twitter {background:url(twitter-logo.png) center center no-repeat;} .facebook {background:url(facebook-logo.png) center center no-repeat;} .google {background:url(google-logo.png) center center no-repeat;} .phonenumber {cursor:pointer;} .nomargin {margin-top:-10px;} #header {background:url(tararuas-top-bg.png) center bottom repeat-x #648ea6; position:relative; height:173px;} #header .container {padding:22px 0 0 0;} #header .contact {float:right; font-family: 'Fjalla One', sans-serif; text-transform:uppercase; } #header .contact p {float:left; color:#95d4f8; margin-left:12px;text-shadow: 0px 0px 5px rgba(38, 62, 75, 0.75);} #header .contact p a {color:#fff; } #header .contact p:first-child a:hover {text-decoration:none; /*cursor:default;*/} #header .social {float:right; margin-left: 10px;} #header .social a {float:left; } #header .social span {display:none;} #header .columns {position:relative;} #logo {float:left; display:block; height:65px; width:250px; margin:; background:url(logo-bg.png) center center no-repeat; background-size:100%; margin:65px 0 0; } #logo span {display:none;} #map-logo {position:absolute; display:block; height:147px; width:209px; right:-20px; bottom:-180px; background:url(wairarapa-map.png) center center no-repeat; background-size:100%;} #nav {background:#192730; padding:0; font-size:1.9em; } #nav ul {margin:0;} #mainmenu ul { padding: 0; margin: 0; list-style: none; } #mainmenu li {background:url(nav-separator-bg.png) right center no-repeat; float: left; position: relative; margin:0; padding:0 8px 0 0; text-transform:uppercase;} #mainmenu li:last-child {background-image:none; padding:0;} #mainmenu li li {width: 8em; padding:0; color:#fff; background:#648EA6; font-size:0.85em; } #mainmenu li a {text-decoration:none; padding:0; display:block; padding:14px; } #mainmenu li a:hover, #mainmenu li.selected a{color:#EBC51A; background:; } #mainmenu li.selected li a{color:#fff; background:; } #mainmenu li.selected li a:hover{color:#EBC51A; background:; } #mainmenu li li a {background:; padding:9px 14px;} #mainmenu li li a:hover {color:; background:; } #mainmenu li ul {background:; z-index:999; display: none; position: absolute; top: 1em; left: 0; -webkit-box-shadow: 0 8px 6px -4px rgba(0,0,0,0.25); -moz-box-shadow: 0 8px 6px -4px rgba(0,0,0,0.25); box-shadow: 0 8px 6px -4px rgba(0,0,0,0.25);} #mainmenu li > ul { top: auto; left: auto; } #mainmenu li:hover ul { display: block; } #back {background:#0e0e0e; } #back.slideshow {color:#fff; background:url(../images/generic.jpg) center 10% no-repeat; background-size:cover;} .homepage #back.slideshow {background-image:url(../images/homepage.jpg);} .homepage #back.slideshow {background-position:center center; } .about #back.slideshow {background-image:url(../images/about-slide.jpg);} .why-bike #back.slideshow {background-image:url(../images/why-bike-slide.jpg);} .starting-out #back.slideshow {background-image:url(../images/starting-out-slide.jpg);} .ride #back.slideshow {background-image:url(../images/ride-slide.jpg);} .tour-buy-hire #back.slideshow {background-image:url(../images/tour-buy-hire-slide.jpg);} .contacts #back.slideshow {background-image:url(../images/contacts-slide.jpg);} .profiles #back.slideshow {background-image:url(../images/profiles-slide.jpg);} #back.slideshow .container {position:relative; min-height:177px;} .homepage #back.slideshow .container {position:relative; min-height:643px;} .background {height:;} #back.background .container {position:relative; min-height:177px; } #overlay {background:url(overlay-bg.png) repeat rgba(25,39,48,.7); position:absolute; width:450px; height:auto; margin:0 auto; bottom:175px; right:30px; } #overlay h1 {text-shadow: 0px 0px 5px rgba(38, 62, 75, 0.75); padding:25px 30px 0 30px; color:#fff; font-size:2.6em;} #overlay p {padding:0 38px; margin:0 0 10px 0;} #overlay p a {color:#ffd61c;} #overlay p:last-child {padding:15px 30px; background:#ebc51a; text-shadow: 0px 0px 5px rgba(135, 128, 35, 1); color:#fff; font-family: 'Fjalla One', sans-serif; margin:18px 0 0 0; } #overlay p:last-child a {color:#fff; text-decoration:underline;} #tabs {background:transparent; margin: -116px 0 0 0; } #tabs .four.columns {height:auto; margin:0; width:25%; } .homepage #tabs .four.columns {height:116px; } #tabs h2 {margin-bottom:0;} #tabs h2 a{color:#fff; text-transform:uppercase; padding:18px 20px 12px 20px; display:block; margin:0; } .homepage #tabs h2 a{padding:28px 20px 0 20px; } #tabs .four.columns p {font-size:1.1em; margin:2px 0 0 0; padding:0 20px; font-family: 'Fjalla One', sans-serif; color:#fff; } #tabs .four.selected div + div{box-shadow: inset 16px 0px 12px -8px rgba(145,123,19,.95);} #tabs .four.selected {box-shadow:0 0 0 0;} .darkblue {background:#2e4a5a; text-shadow: 0px 0px 5px rgba(38, 62, 75, 0.75); /*box-shadow: inset 16px 0px 12px -8px rgba(34,54,56,0.75);*/} .lightblue {background:#648ea6; text-shadow: 0px 0px 5px rgba(86, 121, 142, 0.75); box-shadow: inset -16px 0px 12px -8px rgba(58,83,97,1);} .green {background:#84993c; text-shadow: 0px 0px 5px rgba(108, 125, 49, 0.75); box-shadow: inset -16px 0px 12px -8px rgba(66,76,30,.75);} .yellow {background:#e9c51e; text-shadow: 0px 0px 5px rgba(135, 128, 35, 1); box-shadow: inset -16px 0px 12px -8px rgba(145,123,19,.95);} #tab-content {border-bottom:7px solid #192730; } .ride #tab-content, #tab-content.lightblue.selected {border-bottom:7px solid #648ea6; } .why-bike #tab-content, #tab-content.yellow.selected {border-bottom:7px solid #e9c51e; } .starting-out #tab-content, #tab-content.green.selected {border-bottom:7px solid #84993C; } .tour-buy-hire #tab-content, #tab-content.darkblue.selected {border-bottom:7px solid #2e4a5a; } .ride #tabs #ride{box-shadow: 0 0 0 0;} .ride #tabs #ride +div{box-shadow: inset 16px 0px 12px -8px rgba(34,54,56,0.75);} .why-bike #tabs #why-bike{box-shadow: 0 0 0 0;} .why-bike #tabs #why-bike + div{box-shadow: inset 16px 0px 12px -8px rgba(66,76,30,.75), inset -16px 0px 12px -8px rgba(66,76,30,.75);} .starting-out #tabs #starting-out{box-shadow: 0 0 0 0;} .starting-out #tabs #starting-out + div{box-shadow: inset 16px 0px 12px -8px rgba(58,83,97,1), inset -16px 0px 12px -8px rgba(58,83,97,1);} .tour-buy-hire #tabs #tour-buy-hire {box-shadow: 0 0 0 0; } .ride #main h1, .ride #main h2, .ride #main h2 a, .ride #main h3 {color:#527487!important;} .why-bike #main h1, .why-bike #main h2, .why-bike #main h2 a, .why-bike #main h3 {color:#a58b15!important;} .starting-out #main h1, .starting-out #main h2, .starting-out #main h2 a, .starting-out #main h3 a {color:#5f6d2b!important;} .tour-buy-hire #main h1, .tour-buy-hire #main h2, .tour-buy-hire #main h2 a, .tour-buy-hire #main h3 {color:#273f4c!important; } #tab-content .container {display:none; padding:25px 0; color:#fff;} #tab-content .container p:first-child{font-family:'Fjalla One', sans-serif; font-size:1.35em;} #tab-content .container p:last-child{margin:0;} #tab-content, #tab-content .container {box-shadow:0 0 0 0;} #tab-content .container.selected {display:block; box-shadow:0 0 0 0;} #tab-content .four {position:relative;} #tab-content .four a {font-size:1.4em; font-family: 'Fjalla One', sans-serif; text-transform:uppercase; background:rgba(0, 0, 0, 0.4); padding:10px 32px 8px 16px; bottom: 0; height: 22px; left: 20px; margin: auto 0; position: absolute; top: 0;} #tab-content .four a::before {content: "\003e\003e"; } #tab-content .four a:hover {text-decoration:none; opacity:1;} #main {background:#FDFDFD; color:#2e4a5a; font-size:1.15em; } #main ul {padding:0 0 0 15px;} #main li{list-style:disc; margin:0 0 5px 0;} #main a {color:#2272a8; } #main .container {padding:30px 0 45px 0; background:url(treads-bg.png) center top no-repeat;} #main h1 {font-size:2.4em; font-family: 'Fjalla One', sans-serif; font-weight:normal;} #main h3 {font-size:1.8em; color:#2e4a5a; } .homepage #main h3+p {font-size:1.2em; color:#586568; font-family: 'Fjalla One', sans-serif; } .homepage #main p:last-child a:hover {background:#c1a217; color:#eee;} #main h1+p {font-size:1.2em; color:#586568; font-family: 'Fjalla One', sans-serif; } #main h3 a, #main h2 a {color:#2e4a5a; text-decoration:none; } #trails::after, #mountain-biking::after, #on-road::after, #cycle-touring::after {content: " \003e\003e"; } .tour-buy-hire .item p{margin:5px 0;} .tour-buy-hire .item .address{} .tour-buy-hire .item .contact-info{margin-bottom:15px;} .ride-item {float:left; width:160px; height:160px; margin:0 16px 25px 0; font-size:1.25em; color:#586568; font-family: 'Fjalla One', sans-serif; position:relative; overflow:hidden;} .ride-item.more span { display:none; } .ride-item.more, .ride-item.item4 {margin-right:0; } .ride-item span { position:absolute; left:0; bottom:0; display:block; text-align:left; color:#fff; background-color:rgba(98, 142, 167, 0.8); padding:8px 18px 9px 18px; width:124px;} .ride-item:hover span {background-color:rgba(78, 122, 147, 0.9);} .ride h2 {clear:both; text-transform:uppercase;} .ride .twelve iframe{margin-bottom:25px; border-bottom:1px solid #000000; width:100%;} .button{font-size:1.4em; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } .button::before {content: "\003e\003e"; } .button:hover {background:;} .contacts .more {float:right; margin:-20px 10px 15px 10px; font-weight:bold;} #ajax-events p span, #ajax-news p span {font-family: 'Fjalla One', sans-serif; color:#586568; font-size:1.25em;} #ajax-events p.button, #ajax-news p.button, #ajax-profiles p.button {padding:10px 10px 7px 10px; text-decoration:none!important; color:#fff;} #ajax-events p.button a, #ajax-news p.button a, #ajax-profiles p.button a {color:#fff; text-decoration:none;} .homepage #main p.button a:hover {background:transparent; } #ajax-events p, #ajax-news p , #ajax-profiles p {margin-bottom:10px;} #ajax-events h3, #ajax-news h3 , #ajax-profiles h3 {margin-top:17px;} #ajax-events h3:first-child, #ajax-news h3:first-child {margin-top:0px;} #ajax-events, #ajax-news {margin-bottom:17px;} #ajax-events .four img, #ajax-news .four img , #ajax-profiles .four img {width:100%; height:auto;} .homepage #ajax-events, .homepage #ajax-news, .homepage #ajax-profiles {margin-bottom:0;} .addthis_sharing_toolbox {margin-top:12px; float:right;} #base {height:230px; background:url(tararuas-bottom-bg.png) center bottom repeat-x #ebc51a; } #base .social {float:left; clear:left; margin-top:-10px;} #base .social a {float:left; } #base .social span {display:none;} #base .contact {float:left; font-family: 'Fjalla One', sans-serif; text-transform:uppercase; font-size:2.1em; margin-top:74px;} /*#base .contact span {display:none;}*/ #base .contact p {float:left; color:#95d4f8; margin-right:35px; text-shadow: 0px 0px 5px rgba(38, 62, 75, 0.75);} #base .contact p a {color:#fff; } #base .contact p:first-child a:hover {text-decoration:none; /*cursor:default;*/} #base input, #base label {} #base .mc-field-group, #base #mc-embedded-subscribe {float:left; width:auto; margin-top: 25px; border:0; position:relative; text-transform: uppercase;} #base #mc-embedded-subscribe {background:#2e4a5a; color:#fff;} #base #mc-embedded-subscribe:hover {background:#192730; color:#eee;} #base #mce-EMAIL {height:41px; border:0; width:460px; margin-right:23px; padding:0 4px; color:#999;} #base .mc-field-group label {font-family: 'Fjalla One', sans-serif; text-transform:uppercase; font-size:2.1em; color:#2e4a5a; position:relative; top: 4px; margin-right:15px; } #wwd {background:url(wwd.png) center center no-repeat; display:block; width:185px; height:67px; float:right; margin: 57px 0 0; background-size:100%; } #wwd span {display:none;} #gwrc {background:url(gwrc.png) center center no-repeat; display:block; width:172px; height:66px; float:right; margin: 41px 0 0;} #gwrc span {display:none;} #footer {background:#192730; } #footer .container{padding:18px 0; color:#fff;} #footer .container div:last-child{text-align:right;} #footer ul {padding:0; } #footer li {padding:0 7px; border-right:1px solid #fff; display:inline; } #footer li:first-child {padding:0 5px 0 0px; } #footer li:last-child {padding:0 0 0 5px; border-right:0; } #footer a {text-decoration:none; } #footer a:hover {text-decoration:underline; } /* ---------------------- Contact Form ---------------------- */ #sck-form { width:100%; clear:both; } #sck-form p { clear:both; padding-bottom:15px; } #sck-form label { width:32.5%; float:left; margin-top:4px; text-align:right; font-weight:bold; } #sck-form input.field { width:64.5%; float:right; } #sck-form textarea { width:64.6%; float:right; } #sck-form select { width:65%; float:right; } #sck-form input { float:right; } #sck-form span.other { width:65%; float:right; } #sck-form span.other input { float:none; } #sck-form span.other input.field { width:98.5%; float:right; } #sck-form span.other select { width:auto; float:none; } #sck-form div.other { width:65%; float:right; } #sck-form div.other input { float:none; } #sck-form div.other select { width:auto; float:none; } .solve {margin:5px 0 20px 0;} .privacy {text-align:center; padding-top:20px; font-style:italic;} #sck-form span.other-p { width:65%; float:right; margin-bottom:5px; } #sck-form span.other-p input { float:none; } /* Extra bits for the contact form */ #sck-form label.wide { width:100%; text-align:left; } /* Used for full width labels */ #sck-form p.text-right input { float:none; } /* ? */ p.sck-p { clear:both; margin-top:5px; margin-bottom:5px; width:65.5%; float:right; } /* Used for lines and other text */ /* #Page Styles ================================================== */ /* #Media Queries ================================================== */ @media only screen and (min-height: 901px) and (min-aspect-ratio: 4/5) { .homepage #back.slideshow .container {min-height:643px; } } @media only screen and (max-height: 900px) and (min-aspect-ratio: 4/5){ .homepage #back.slideshow .container {min-height:550px; } .homepage #back.slideshow {background-position:center top;} #overlay {bottom:135px; width:400px; } #overlay h1 {font-size:1.9em; padding:20px 28px 0;} #overlay p {padding:0 28px;} } @media only screen and (max-height: 700px) and (min-aspect-ratio: 4/5){ .homepage #back.slideshow .container {min-height:450px; } .homepage #back.slideshow {background-position:center top;} #overlay {bottom:135px; width:365px; } #overlay h1 {font-size:1.7em; padding:15px 18px 0;} #overlay p {padding:0 18px;} } @media only screen and (max-width: 1043px) { #mainmenu {font-size:0.9em} #map-logo {right:-30px;} } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { #tabs .four.columns {height:80px!important; } #tabs .four.columns h2 {font-size:1.65em} #tabs .four.columns p {display:none; } #map-logo {right:-80px; top:28px; height:120px; width:171px;} .ride-item img {width:100%; height:auto;} .ride-item.more span {display:block; width:100%; background-color: transparent; font-size: 2.5em; top: 0.5em;} .ride-item.more span span {display:block; width:100%; font-size: 0.6em; line-height: 3.1em;} #overlay h1 {/*font-size:2.4em;*/ padding:20px 25px 0;} #overlay p {padding:0 25px;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { #base #mce-EMAIL {height:30px; width:350px; } #base .mc-field-group label {font-size:1.7em;} #base #mc-embedded-subscribe {padding: 6px 10px; } .ride-item {width:260px; height:195px;} .ride-item img {width:100%; height:auto;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #tabs .four.columns h2 {font-size:1.45em; line-height:1.3em} #tabs .four.columns h2 a {padding:18px 12px 0;} #overlay {width:100%; right:0; } #overlay h1{font-size:1.8em;} #overlay p{font-size:0.9em;} #logo {margin:45px 0 0;} #map-logo {display:none;} #mainmenu {padding:8px 0; display:none;} #mainmenu li {background-image:none; float: none; margin:0 auto; padding:5px 0; } #mainmenu li li {width:; padding:0; color:; background:; } #mainmenu li a {padding:0; display:block; padding:4px 0; } #mainmenu li li a {background:; } #mainmenu li ul {position: relative;} #base #mce-EMAIL {height:30px; width:268px;} #base .mc-field-group {margin-top:15px; width:300px;} .ride-item {width:100%; height:200px;} .photoleft, .photoright {margin:0 0 10px 0; float:none; width:100%; height:auto; max-width:none;} .fb-like-box {width:100%!important; float:none;} .fb-like-box span, .fb-like-box span iframe {width:100%!important; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #tabs .four.columns {height:60px!important; } #tabs .four.columns h2 {font-size:1.1em; line-height:1.1em} #tabs .four.columns h2 a {padding:12px 8px 0;} #logo {margin:38px 0 0; width:210px;} #header .social {margin-top:-26px;} #base #mce-EMAIL {height:25px; width:190px; margin-right:0;} #base .mc-field-group {margin-top:15px; width:300px;} #base .mc-field-group label {float:left;} .mc-field-group span {display:none;} #base #mc-embedded-subscribe {margin:10px auto 0 auto; } #base .contact {font-size:1.5em; margin-top:25px!important;} } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */