/*
html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
Richard Clark (http://richclarkdesign.com)
http://cssreset.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;kingouk: 1px;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/*fix font weight */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
Funkywormhole v1 Stylesheet - main.css
Last Updated - March 2014
*/
/* ========== Web fonts ========== */
@font-face {
font-family: 'DroidSansRegular';
src: url('../fonts/DroidSans-webfont.eot');
src: url('../fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/DroidSans-webfont.woff') format('woff'),
url('../fonts/DroidSans-webfont.ttf') format('truetype'),
url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OswaldBook';
src: url('../fonts/Oswald-Regular-webfont.eot');
src: url('../fonts/Oswald-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Oswald-Regular-webfont.woff') format('woff'),
url('../fonts/Oswald-Regular-webfont.ttf') format('truetype'),
url('../fonts/Oswald-Regular-webfont.svg#OswaldBook') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OswaldBold';
src: url('../fonts/Oswald-Bold-webfont.eot');
src: url('../fonts/Oswald-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Oswald-Bold-webfont.woff') format('woff'),
url('../fonts/Oswald-Bold-webfont.ttf') format('truetype'),
url('../fonts/Oswald-Bold-webfont.svg#OswaldBold') format('svg');
font-weight: normal;
font-style: normal;
}
/* ========== Basics ========== */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html {
background: white;
}
body {
font-family:'DroidSansRegular', Arial, sans-serif;
line-height: 1.5em;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
strong {
font-weight:bold;
}
/* ===clears*/
.section_wrap:after, section:after, .aside_wrap:after, aside:after, .pic_wrap:after, .social_links:after, .photo_grid:after {
content: ".";
visibility: hidden;
display: block;
clear: both;
height: 0;
font-size: 0;
}
/* ========== Boxes ========== */
.section_wrap{
color:white;
background:#39713f;
}
.aside_wrap{
color:#39713f;
background: #fed574;
}
.pic_wrap{
clear:both;
padding-top: 0.75em;
}
/* === Media Queries for Boxes */
@media screen and (min-width:47.6em){
/* make twin cols on wider displays */
.col1, .col2 {
display: block;
float: left;
width: 48.28304%;
}
.col2{
margin-left: 3.4339%;
}
/* outer wrappers on larger screens */
.section_wrap, .aside_wrap{
padding: 0 0.5em; /* bring 2 col text in off the viewport edge */
}
.fix_wrap{
position: absolute;
width: 48.28304%;
bottom:0;
}
#intro article{
padding-bottom: 50%;
}
}
/* ========== Sections ========== */
section{
padding:1.5em 4% 0 4%;
margin-bottom: 3em;
}
#intro{
padding:0 4%;
position: relative;
}
#photos{
margin-bottom: 1em;
}
/* === Media Queries for Sections */
@media screen and (min-width:47.6em){
section{
margin: 0 auto 3em auto;
max-width: 60em; /* max-width 60em = 960px */
padding: 1.5em 0 0 0;
}
#intro{
padding: 0;
}
}
/* ========== Articles ========== */
article {
padding-top: 1.5em;
}
#photos article, #contact article{
padding-top: 0;
}
/* ========== Asides ========== */
aside{
padding:0 4% 3em 4%;
}
/* === Media Queries for Asides */
@media screen and (min-width:47.6em){
aside{
margin: 0 auto;
max-width: 60em; /* max-width 60em = 960px */
padding:0 0 3em 0;
}
}
/* ========== Headers ========== */
header{
padding-top: 1.5em;
text-align: center;
}
/*=== Media Queries For headers */
@media screen and (min-width:37em) {
header{
padding-top: 3em;
}
}
/* ========== Navs ========== */
nav{
font-family:'OswaldBook', Arial, sans-serif;
font-size: 1.125em;
text-transform: uppercase;
font-weight: normal;
margin: 0 ;
}
/*=== Media Queries For Navs */
@media screen and (min-width:37em) {
/*more padding on larger screens */
nav{
margin: 1.2em 0 2.4em 0
}
}
/*========== Lists ==========*/
/* main navigaton */
#main_nav ul{
display: none;
opacity: 0;
background: #333333;
padding: 1em;
position: relative;
border-bottom: 2px white solid;
margin-top: 2em;
}
#main_nav ul:before { /* pointer */
content: '';
border-color: transparent transparent #333333 transparent ;
border-style: solid;
border-width: 0 1.2em 1.2em 1.2em;
display:block;
height: 0px;
left: 50%;
margin: 0 auto 0 -1.2em;
position: absolute;
top:-1.1em;
width: 0px;
border-top: 0 inset;
}
#main_nav li+li{
margin-top: 0.7em;
}
#toggle{
display: none;
}
#toggle:checked + #main_nav ul{
display: block;
opacity: 1;
}
.toggle{
display: block;
margin:0.9em auto;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
width: 9em;
}
.toggle:after{
content: attr(data-open);
display: block;
width: 9em;
padding: 0.7em 0 0.5em 0;
background:#333333;
border-radius: 0.250em;
text-align: center;
color: #FFFFFF;
}
.toggle:hover:after{
background: #444444;
}
#toggle:checked + nav .toggle:after{
content: attr(data-close);
}
/* map */
#map ul{
list-style: none;
color: #333333;
}
/* Photo Grid */
.photo_grid{
list-style: none;
margin: 1em 0 2em -6.45161%;
}
.lt-ie9 .photo_grid{
margin-bottom: 0;
}
.photo_grid li{
width: 43.54839% ;
margin: 0 0 6.45161% 6.45161%;
display: block;
float: left;
}
.photo_grid li:nth-last-child(-n+2){
margin: 0 0 0 6.45161%
}
/* Social Links */
.social_links{
list-style: none;
padding-top: 0;
margin-top:1.5em;
}
.social_links li{
width:22.5%;
float: left;
}
.social_links li + li{
margin-left: 3.33333%;
}
/* article lists */
article ul, article ol{
list-style-position: inside;
padding-top: 0.45em;
margin:0.75em 0 -0.45em 0;
}
/*=== Media Queries For Lists */
@media screen and (min-width:37em) {
/* Main Nav - full size main navigation on larger screens */
#main_nav ul{
display: inline-block;
opacity: 1;
background: transparent;
padding: 0;
position: relative;
border:none;
margin-top: 0;
}
.toggle{
display: none;
}
#main_nav ul:before, .toggle:after {
content: none;
}
#main_nav li{
display: inline-block ;
}
#main_nav li+li{
margin-top: 0;
}
#main_nav li + li:before{
content: "/";
color: red;
padding: 0 0.4em;
}
/* Photo Grid - expand photo grid to 4 col on wider screens */
.photo_grid{
margin: 1em 0 2em -3.22581%;
}
.lt-ie9 .photo_grid{
margin-bottom: 0;
}
.photo_grid li{
width: 21.77419% ;
margin: 0 0 3.22581% 3.22581% ;
}
.photo_grid li:nth-last-child(-n+4){
margin: 0 0 0 3.22581%
}
}
/*========== Anchors ==========*/
/* main navigation */
#main_nav a{
text-decoration: none;
color: #346639;
display: block;
background: #fed574;
padding: 1.2em 0 1em 0;
}
#main_nav a:hover{
color: #ff0000;
}
/* read more */
.more{
text-transform: uppercase;
text-decoration: none;
color: #fed574;
font-weight: normal;
display:block;
height: 2em;
width: 7.5em;
border-radius: 0.250em;
background: #346639 url(../images/more_pointer.png);
background-repeat: no-repeat;
background-position: 90% center ;
padding:0.4em 0 0 0.5em;
float: right;
margin: 1em 0;
}
.more:hover{
background-color: #2e5b33;
}
/* map */
.map_marker {
font-family:'OswaldBook', Arial, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
font-weight: normal;
color: #333333;
word-spacing: 0.05em;
border-top: 1px white solid;
display: block;
padding: 1.5em 0 1.5em 2.625em;
margin-top: 1.188em;
background: url(../images/marker.svg);
background-repeat: no-repeat;
background-position: 0 1.2em;
}
.no-svg .map_marker, .no-js .map_marker{
background: url(../images/marker.png);
background-repeat: no-repeat;
background-position: 0 1.2em;
}
.map_marker:hover{
color: #346639;
}
/* photo grid */
.photo_grid a{
cursor:zoom-in;
}
#news article img{
height:11.3em;
position: relative;
top:-0.25em;
float: left;
margin: 0.5em 1em 0 0;
border: 4px white solid;
}
p a{
color: white;
text-decoration: none;
border-bottom: 1px white dotted;
}
p a:hover{
color: #fed574;
border-bottom: 1px #fed574 dotted;
}
aside p a{
color: #333333;
border-bottom: 1px #333333 dotted;
}
aside p a:hover{
color: #39713f;
border-bottom: 1px #39713f dotted;
}
/*=== Media Queries For Anchors */
@media screen and (min-width:37em) {
/* main navigation - full sizes nav on larger screens */
#main_nav a{
text-decoration: none;
color: #39713f;
padding: 0;
background: transparent;
display: inline;
}
#main_nav a:hover{
color: #ff0000;
}
}
/* ========== Headings ==========*/
header h1 {
display: inline-block;
background: url(../images/logo.svg);
background-repeat: no-repeat;
overflow:hidden;
text-indent:-9999px;
background-size: 100% auto;
width: 286px;
height: 34px;
}
.no-svg header h1, .no-js header h1{
background: url(../images/logo.png);
}
section h1, aside h1 {
font-family:'OswaldBold', Arial, sans-serif;
font-size: 1.125em;
font-weight: normal;
word-spacing: 0.15em;
text-transform: uppercase;
position: relative;
top: 0.25em;
}
.pip{
background: url(../images/pip.png);
background-repeat: no-repeat;
background-position: 0 0.2em;
padding-left: 1.1em;
}
h2{
font-family:'OswaldBook', Arial, sans-serif;
font-size: 1em;
text-transform: uppercase;
font-weight: normal;
color: #fed574;
position: relative;
top: 0.3em;
}
/*=== Media Queries For Headings */
/* header h1 - more space = bigger logo */
@media screen and (min-width:37em) {
header h1 {
width: 386px;
height: 47px;
}
}
/*========== Paragraphs ==========*/
article p {
padding-top: 0.45em;
margin:0.75em 0 -0.45em 0;
}
#intro article p {
margin-top:1.5em;
}
aside p{
color: #333333;
}
/*========== Images ==========*/
#intro img{
border: 4px white solid;
display: block;
float:left;
width: 30.3370%;
}
#intro img + img{
margin-left: 4.49438% ;
}
#map img{
width: 100%;
}
.social_links img, .photo_grid img{
width: 100%;
border: 4px white solid;
display: block;
}
/*=== Media Queries For Images */
@media screen and (min-width:47.6em){
/* photos in Photo Grid have wider border on larger screens */
.photo_grid img{
border: 6px white solid;
}
}
/*========== Forms ==========*/
form{
margin-top: 2em;
}
form input, textarea{
border:0;
color: #333333;
display:block;
font-family:'DroidSansRegular', Arial, sans-serif;
font-size: 1em;
}
form input{
height: 2.250em;
border:0;
width: 100%;
margin: 0.25em 0 1.25em 0;
padding: 0.2em 0.4em 0 0.4em;
}
.lt-ie9 form input{
padding-top: 0.7em;
}
form label{
color:#fed574;
display:block;
text-transform: capitalize;
}
textarea{
margin: 0.25em 0 1.5em 0;
height:15.7em;
width: 100%;
padding: 0.5em;
line-height: 1.5em;
}
input:focus, textarea:focus {
outline: 0;
}
/*========== Buttons ==========*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
padding:0;
border:0;
}
form button {
display:block;
padding: 0.1em 1em 0 1em;
color:#333333;
font-family:'OswaldBook', Arial, sans-serif;
text-transform:uppercase;
background:white;
margin: 0;
border: 0;
font-size: 1.1em;
line-height: 1.1em;
height: 2.1em;
}
form button:hover {
cursor:pointer;
}
/*========== Tables ==========*/
table{
width:100%;
margin: 1.2em 0 -0.4em 0;
border-collapse: separate;
text-transform: capitalize;
}
thead{
font-weight: bold;
color: #fed574;
}
tr{
height:1.5em;
}
td{
text-align:center;
}
.item{
text-align: left;
}
/*========== Ketchup validation styles ==========*/
.invalid{
border:1px #ff0000 dotted;
}
.ketchup-custom {
display: none;
}
.ketchup-custom li {
border: 0;
color:white;
margin: 0.25em 0 1.5em 0;
list-style: none;
}
.ketchup-custom li:before {
content: '';
display:inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0.4em 0.4em 0.4em;
border-color: transparent transparent white transparent;
border-top: 0 inset;
margin: 0.3em 0.4em 0.2em 0.2em;
}
#infobox{
font-weight:normal;
margin-top: 2.2em;
padding: 2em 0 1.8em 0;
text-align:center;
background: #346639;
}