/* --------------- KERERUFARMSTAY.CO.NZ FRONT END // STYLESHEET ---------------*/

/* --------------- 1. RESET STYLES ---------------*/
/* --------------- 2. LAYOUT STYLES ---------------*/
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/
/* --------------- 4. FORM STYLES ---------------*/
/* --------------- 5. NAVIGATION STYLES ---------------*/



/* --------------- 1. RESET STYLES ---------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}



/*! normalize.css v1.0.1 | MIT License | git.io/normalize | HTML5 RESET */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block;}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html, button, input, select, textarea {font-family: sans-serif;}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {margin: 0;}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {outline: thin dotted;}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active, a:hover {outline: 0;}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {border-bottom: 1px dotted;}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b, strong {font-weight: bold;}

blockquote {margin: 1em 40px;}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {font-style: italic;}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
	background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p, pre {margin: 1em 0;}

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {quotes: none;}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before, q:after {
    content: '';
    content: none;
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {Font-size: 80%;}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {top: -0.5em;}

sub {bottom: -0.25em;}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl, menu, ol, ul {margin: 1em 0;}

dd {margin: 0 0 0 40px;}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu, ol, ul {padding: 0 0 0 0px;}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {overflow: hidden;}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {margin: 0;}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {margin: 0;}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button, input, select, textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button, input {line-height: normal;}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled], input[disabled] {cursor: default;}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}




/* --------------- 2. LAYOUT STYLES ---------------*/

/*-------- GENERIC --------*/

body {
	font-family:Verdana, Arial, sans-serif;
	font-size:62.5%;
	color:#1a1a1a;
	text-align:left;
	height:100%;
	}
		
div.clr {clear:both;}

img {
	display:block;
	max-width:100%;
	}

	
/*-------- CONTENT // HEADER --------*/
	
header {
	width:100%;
	display:block;
	}
	
	img#logo {
		position:relative;
		width:480px;
		margin:12px auto 10px auto;
		}
		
	a.call-now {
		position:relative;
		display:block;
		float:right;
		height:23px;
		width:270px;
		padding:14px 0 13px 0;
		margin:45px 5% 0px 30px;
		background-color:#a8d15f; /* Headache & Migraine Clinic GREEN */
		border-radius:6px;
		color:#000;
		text-decoration:none;
		text-align:center;
		font-size:1.9em;
		font-family:"FrutigerNeueW01-BookIt";
		border-bottom:none;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		opacity:0.9;
		}
		
		a.call-now:hover {
			border-bottom:none;
			opacity:1.0;
			transform: scale(0.9); 
			}
		
nav {
	background-color:#f0f0f0; /* pale grey */
	height:40px;
	width:90%;
	padding:0 5%;
	margin-bottom:2px;
	}
	
	@media only screen and (max-width: 1080px) {
		nav {height:35px; width:95%; padding:0 2.5%;}
	}
	
	@media only screen and (max-width: 950px) {
		nav {display:none;}
	}

	
/*-------- CONTENT // MAIN > GENERIC --------*/

div#content-wrapper {
	padding:0 0 50px 0;
	width:1480px;
	margin:0 auto;
	}
	
	div#content, div#sidebar {
		position:relative;
		display:inline;
		float:left;
		}
		
	div#content {width:900px; padding:0 30px 0 50px;}
	div#sidebar {width:450px; padding:0; margin:30px 50px 0 0;}
		
		@media only screen and (max-width: 1500px) {
			div#content-wrapper {width:1380px;}
			div#content {width:800px;}
		}
		
		@media only screen and (max-width: 1400px) {
			div#content-wrapper {width:1280px;}
			div#content {width:700px;}
		}
		
		@media only screen and (max-width: 1300px) {
			div#content-wrapper {width:1180px;}
			div#content {width:600px;}
		}
		
		@media only screen and (max-width: 1200px) {
			div#content-wrapper {width:1080px;}
			div#content {width:500px;}
		}
		
		@media only screen and (max-width: 1100px) {
			div#content-wrapper {width:100%;}
			div#content {width:90%; padding:0 5% 0 5%; float:none; display:block;}
			div#sidebar {margin:30px auto 0 auto; float:none; display:block;}
		}
		
		@media only screen and (max-width: 540px) {
			div#sidebar {width:90%; padding:0 5% 0 5%;}
		}
	
a.make-an-enquiry {
	position:relative;
	display:block;
	width:200px;
	height:34px;
	background:transparent url('../images/make-an-enquiry-button-background.png') no-repeat 0 0;
	padding:11px 0 0 0px;
	margin-top:15px;
	font-family:TrueNorth-Regular;
	font-size:1.8em;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
		
	a.make-an-enquiry:hover {
		background:transparent url('../images/make-an-enquiry-button-background-hover.png') no-repeat 0 0px;
		transform: scale(0.90); 
		}
		
article.testimonial {
	border-bottom:1px solid #e6e6e6;
	padding:12px 0 6px 0;
	}
	
div.content-column {
	position:relative;
	display:inline;
	float:left;
	width:33%;
	}

	@media only screen and (max-width: 1400px) {
		div.content-column {width:50%;}
	}

	@media only screen and (max-width: 1200px) {
		div.content-column {width:100%;}
	}

	@media only screen and (max-width: 1100px) {
		div.content-column {width:33%;}
	}

	@media only screen and (max-width: 900px) {
		div.content-column {width:50%;}
	}

	@media only screen and (max-width: 600px) {
		div.content-column {width:100%;}
	}
		
	
/*-------- CONTENT // SIDEBAR --------*/

div#nz-map {
	position:relative;
	border-left:1px solid #e6e6e6;
	margin-bottom:20px;
	}
	
	@media only screen and (max-width: 1100px) {
		div#nz-map {border-right:1px solid #e6e6e6;}
	}
		
	img#nz-map-hover {
		position:absolute;
		width:100%;
		z-index:10;
		opacity:0;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		}
		
		img#nz-map-hover:hover {opacity:1.0;}
		
div#facebook-page-plugin, div#airbnb-listing-plugin {
	position:relative;
	width:100%;
	border:1px solid #f0f0f0;
	background-color:#f0f0f0;
	margin-bottom:20px;
	}
	
	div#airbnb-listing-plugin div.airbnb-embed-frame {padding:0; top:-15px;}
	
	@media only screen and (max-width: 540px) {
		div#nz-map {border-left:none; border-right:none;}
		div#airbnb-listing-plugin {display:none;}
	}
	
	div.fb-page {width:100%; margin:0 auto;}
	
/*-------- CONTENT // HOME --------*/

div#slideshow-wrapper {visibility: hidden;}

div#tripadvisor-rating  {
	position:relative;
	display:inline;
	float:left;
	border:1px solid #ccc;
	/* width:240px; */
	/* height:220px; */
	width:240px;
	height:150px;
	overflow:hidden;
	margin-top:20px;
	}

div#airbnb-rating {
	position:relative;
	display:inline;
	float:left;
	border:1px solid #ccc;
	/* width:240px; */
	/* height:220px; */
	width:440px;
	height:465px;
	overflow:hidden;
	margin-top:20px;
}
	
div#tripadvisor-rating, div#airbnb-rating {margin-right:20px;}

	/* Airbnb widget - custom styling */

	
img.rating-logo {margin:0 auto; border-bottom:1px solid #ccc;}
img.rating {margin:0 auto;}
	
/*-------- CONTENT // FACILITIES --------*/

div.facility {clear:both;}
div.facility img, div.facility p {position:relative; display:inline; float:left;}
div.facility p {margin:0; padding:18px 0 0 10px;}

/*-------- CONTENT // LOCATION --------*/

div#googlemap {
	background-color:#f6f6f6;
	height:500px;
	margin-top:20px;
	width:100%;
	}
	
/*-------- CONTENT // PRICE & AVAILABILITY --------*/

.label, .detail {
	position:relative;
	display:inline;
	float:left;
	}
	
#price-wrapper .label {width:200px;}
#price-wrapper .detail {width:300px;}

	@media only screen and (max-width: 600px) {
		#price-wrapper .label, #price-wrapper .detail {
			display:block;
			float:none;
			}
		#price-wrapper .label {margin-bottom:0px;}
		#price-wrapper .detail {margin-bottom:15px;}
	}
	
/*-------- CONTENT // GALLERY --------*/

div.gallery a {
	position:relative;
	display:inline;
	float:left;
	margin:1%;
	width:31%;
}

	@media only screen and (max-width: 1300px) {
		div.gallery a {margin:1%; width:48%;}
	}
	
	@media only screen and (max-width: 1100px) {
		div.gallery a {margin:1%; width:31%;}
	}
	
	@media only screen and (max-width: 700px) {
		div.gallery a {margin:1%; width:48%;}
	}
	
	@media only screen and (max-width: 450px) {
		div.gallery {width:300px; margin:0 auto;}
		div.gallery a {margin:10px 0; width:100%;}
	}
	
	@media only screen and (max-width: 350px) {
		div.gallery {width:100%;}
	}
	
/*-------- CONTENT // CONTACT US --------*/
			
#contact-wrapper {margin:20px 0;}
#contact-wrapper .label {width:100px;}
#contact-wrapper .detail {width:250px;}

@media only screen and (max-width: 430px) {
		#contact-wrapper .label, #contact-wrapper .detail {
			display:block;
			float:none;
			}
		#contact-wrapper .label {margin-bottom:0px;}
		#contact-wrapper .detail {margin-bottom:15px;}
	}


		
/*-------- CONTENT // FOOTER --------*/
	
footer {
	display:block;
	background-color:#95d469; /* pale green */
	}
	
	div#footer-col-wrapper {
		width:80%;
		padding:20px 10% 20px 10%;
		}
		
		@media only screen and (max-width: 1200px) {
			div#footer-col-wrapper {
				width:90%;
				padding:20px 5% 20px 5%;
				}
		}
		
		@media only screen and (max-width: 1000px) {
			div#footer-col-wrapper {
				width:100%;
				padding:20px 0% 20px 0%;
				}
		}
	
div.footer-col {
	position:relative;
	display:inline;
	float:left;
	width:33%;
	text-align:center;
	}
	
	@media only screen and (max-width: 740px) {
		div.footer-col {
			display:block;
			float:none;
			width:90%;
			padding:0 5%;
			margin-bottom:20px;
			}
	}
	
	a#enquiry-button-footer {
		display:block;
		width:200px;
		height:31px;
		margin:8px auto;
		padding-top:9px;
		background-color:#fff;
		border-radius:7px;
		font-family:TrueNorth-Regular;
		font-size:1.8em;
		color:#000;
		text-transform:uppercase;
		text-decoration:none;
		text-align:center;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		opacity:0.8;
		}
		
	a#enquiry-button-footer:hover {
		opacity:1.0;
		transform: scale(0.90); 
		}
		
	div#icon-wrapper {width:160px; margin:15px auto;}
		
	a.airbnb-icon, a.holidayhouses-icon, a.facebook-icon, a.tripadvisor-icon {
		display:block;
		position:relative;
		float:left;
		width:64px;
		height:64px;
		margin:8px;
		text-indent:-9999px;
		opacity:0.8;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		}
		
	a.airbnb-icon {background:transparent url('../images/listing-icon-sprite.png') 0 0 no-repeat;}
	a.holidayhouses-icon {background:transparent url('../images/listing-icon-sprite.png') 0 -100px no-repeat;}
	a.facebook-icon {background:transparent url('../images/listing-icon-sprite.png') 0 -200px no-repeat;}
	a.tripadvisor-icon {background:transparent url('../images/listing-icon-sprite.png') 0 -300px no-repeat;}
	
	a.airbnb-icon:hover, a.holidayhouses-icon:hover, a.facebook-icon:hover, a.tripadvisor-icon:hover {opacity:1.0; transform: scale(0.90);}
	
	a#map-icon {
		display:block;
		width:64px;
		height:64px;
		margin:8px auto;
		background-color:#fff;
		border-radius:7px;
		text-align:center;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		opacity:0.8;
		}
		
	a#map-icon:hover {
		opacity:1.0;
		transform: scale(0.90); 
		}
		
		a#map-icon img {margin:0 auto; padding-top:1px;}
	
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/

/*-------- TYPOGRAPHY > GENERIC --------*/


h1, h2, h3, h4 {
	font-weight:normal;
	font-style:normal;
	}
	
h1 {
	font-family:TrueNorth-Regular;
	color:#000;
	font-size:2.8em;
	line-height:1.1em;
	margin:15px 0 18px 0;
	padding:5px 0 5px 0;
	text-transform:uppercase;
	}
	
	@media only screen and (max-width: 500px) {
		h1 {font-size:2.6em;}
	}
	
	@media only screen and (max-width: 400px) {
		h1 {font-size:2.5em;}
	}
		
h2 {
	font-family:TrueNorth-Regular;
	color:#000;
	font-size:2.3em;
	line-height:1.1em;
	margin:28px 0 15px 0;
	padding:0 0 7px 0;
	text-transform:uppercase;
	border-bottom:1px solid #ccc; /* grey */
	}
	
	@media only screen and (max-width: 500px) {
		h2 {font-size:2.1em;}
	}
	
	@media only screen and (max-width: 400px) {
		h2 {font-size:2.0em;}
	}
	
h3 {
	font-family:TrueNorth-Regular;
	color:#000;
	font-size:1.7em;
	line-height:1.1em;
	text-align:center;
	margin:0px 0 15px 0;
	padding:10px 0 0 0;
	text-transform:uppercase;
	}
		

p {
	font-size:1.4em;
	line-height:1.6em;
	text-align:left;
	margin:0 0 10px 0;
	}

p strong {color:#000; font-family:"Frutiger Neue W01 Book"; font-weight:normal;}
p em {font-family:"FrutigerNeueW01-LightIt"; font-style:normal;}
	
	@media only screen and (max-width: 400px) {
		p {font-size:1.4em;}
		}
		

a {
	color:#000; 
	font-size:1.0em; 
	outline:0; 
	text-decoration:underline;
	}
	
a:hover, a:active {
	outline:0; 
	color:#000;
	}
		
/*-------- TYPOGRAPHY > CONTENT --------*/

p.guest {font-style:italic;}

p.note {font-size:1.3em; color:#666;}

div#content ul {margin:0px 0 0px 25px; padding:0;}

div#content ul > li {
	font-size:1.4em;
	line-height:1.6em;
	margin:0 0 10px 15px;
	}

/* Prevent nested li's from getting messed up */
div#content ul > li::before {
    content: "\2026\2002"; /* ... + space - see https://css-tricks.com/css-content/ */
    margin-left: -15px;
}

div#content ul.widSSPReadReview, div#content ul.widSSPWriteReview, div#content ul.widSSPReadReview > li, div#content ul.widSSPWriteReview > li {margin:0;}
div#content ul.widSSPReadReview li::before, div#content ul.widSSPWriteReview li::before {
	content: "";
    margin: 0px;
	}
	
div.ui-datepicker {font-size:1.4em;}

/*-------- TYPOGRAPHY > SIDEBAR --------*/

h3 a {text-decoration:none;}

/*-------- TYPOGRAPHY > FOOTER --------*/

footer p, footer ul li {
	color:#1a1a1a; /* grey */
	font-size:1.3em;
	line-height:1.6em;
	margin:0 0 10px 0;
	text-align:center;
	}
	
footer a {color:#1a1a1a; /* grey */}

	footer a:hover, footer a:active {color:#000;}

footer ul {margin:0;}

	footer li.selected a {text-decoration:none;}

p#copyright {
	font-size:0.9em;
	text-align:center; 
	padding:30px 20px 20px 20px;
	margin:0;
	}

	
/* --------------- 4. FORM STYLES ---------------*/

/*---------- FORM // GENERAL ----------*/

form#directions-form {margin-bottom:10px;}
form#contact-form {width:520px; margin-bottom:40px;}

span.asterisk, p.user-advice {color:#c41230; /*-- dark red --*/}

div.field-label, div.field-input, div.field-textarea {
	position:relative;
	display:inline;
}

div.field-label {float:left; width:120px; padding-top:10px;}
div.long-label {width:160px;}
div.field-input, div.field-textarea {float:right; width:400px;}
div.short-input {width:360px;}

div.field-label label {
	font-size:1.4em;
	line-height:1.2em;
	}
	
	div.field-input input, div.field-input select, div.field-input select option, div.field-textarea textarea, input#start-address  {
		border:none;
		font-size:1.4em;
		line-height:1.2em;
		margin-bottom:12px;
		background-color:#f2f2f2;
		font-family:Verdana, Arial, sans-serif;
		}
		
	div.field-input input, input#start-address {
		width:380px;
		height:30px;
		padding:5px 10px;
		}

	@media only screen and (max-width: 1200px) {	
		input#start-address {width:300px;}
	}

	@media only screen and (max-width: 1100px) {	
		input#start-address {width:380px;}
	}
		
	div.field-input select {
		width:400px;
		height:40px;
		padding:10px;
		font-family:Verdana, Arial, sans-serif;
		}
		
	div.short-input input {width:340px;}
	
	div.field-textarea textarea {
		width:380px;
		padding:10px;
		height:150px;
		}
			
div.subscribe-checkbox {width:25px;}
div.subscribe-label {width:275px;}
div.required {width:150px; position:relative; display:inline; float:left;}
		
input.noSpam {
	display:none;
	visibility:hidden;
	}	
		
input.send, input#get-directions {
	position:relative; 
	display:inline; 
	border:none;
	font-family:TrueNorth-Regular;
	font-size:1.7em;
	height:42px;
	padding:8px 15px 14px 15px;
	border-radius:6px;
	color:#000;
	text-align:center;
	background-color:#ffd3b6; /* very pale orange */
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	top:2px;
	}
	
	input.send {float:right;}
	input#get-directions {margin:2px 0 0 5px;}
		
	input.send:hover, input.send:active, input#get-directions:hover, input#get-directions:active {
		background-color:#ffb585; /* pale orange */
		text-decoration:none;
		transform: scale(0.9);
		}

@media only screen and (max-width: 650px) {
	input#start-address {padding:5px 2%; width:96%; margin-bottom:8px;} 
	input#get-directions {float:right; margin:0px 0 20px 0px;}
	}
	
@media only screen and (max-width: 600px) {
	form#contact-form {width:100%;}
	div.field-input, div.field-textarea {width:100%}
	div.field-textarea textarea, div.field-input input {padding:5px 2%; width:96%; margin-top:3px;}
	div.field-input select {padding:5px 2%; width:100%; margin-top:0px;}
	}
	
@media only screen and (max-width: 380px) {
	input.send, input#get-directions {
		font-size:1.7em;
		height:40px;
		padding:8px 15px 14px 15px;
		}
	}


	

/* --------------- 5. NAVIGATION STYLES ---------------*/

.slicknav_menu {
	display:none;
}

@media only screen and (max-width: 950px) {
	ul#menu {
		display:none;
		}
	
	.slicknav_menu {
		display:block;
		}
}

header nav {
	text-align:center;
	}

header nav ul {
	margin:0px auto; 
	padding-top:10px;
	} 

header nav li {
	font-family:TrueNorth-Regular;
	position:relative;
	display:inline;
	margin:0 -4px 0 0; /* negative margin needed to remove gap between links */
	}
		
header nav li a {
	padding:8px 17px 12px 17px;
	font-size:1.6em;
	color:#000;
	text-decoration:none;
	background-color:none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	}
	
	@media only screen and (max-width: 1180px) {
		header nav li a {padding:8px 15px 13px 15px;font-size:1.5em;}
	}
	
	@media only screen and (max-width: 1080px) {
		header nav li a {padding:8px 13px 9px 13px;font-size:1.4em;}
	}
	
	header nav li a:hover {
		text-decoration:none;
		}
		
	header nav li.selected a, header nav li.selected:hover a {
		background-color:#fff;
		}
		
	header nav li:hover a {
		background-color:#bfe5a5; /* pale green */
		}

header nav li.call-to-action a {
	border-left:3px solid #fff; 
	border-right:3px solid #fff;
	background-color:#ffd3b6; /* very pale orange */
	}
	
	header nav li.call-to-action a:hover {
		background-color:#ffb585; /* pale orange */
		}