/*
	* Main stylesheet: contains CSS normalization, base styles, typography with a vertical rhythm and some mobile-first media queries

	* Credit is left inline
	* Much content and inspiration was taken from the normalize.css project:
	* http://necolas.github.com/normalize.css/ and https://github.com/jonathantneal/normalize.css

	* The media queries included in here are only placeholder. You should modify them as your content requires

	* Across this document we use safe CSS hacks to target IE6 and IE7
	* Selectors beggining with an underscore (_selector: property) target only IE6.
	* Selectors beggining with an asterisk (*selector: property) target only IE6 and IE7.
*/

/* ==========================================================================================> DEFAULT STYLES */

/* Styles for all viewport widths and print */

/* ============================================================> HTML5 ELEMENTS DISPLAY */

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

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

/* ============================================================> BASE STRUCTURE */

/*
	* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)

	* To add a background to the PAGE, set it in the 'html' element
	* To add a background to the WRAPPER, set it in the 'body' element
*/
html {

	font-size: 100%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Remove iOS text size adjust without disabling user zoom */
	background: #D6D7AE url(../img/leaf.png);
}

body {
	margin: 15px auto;
	width: 938px;
	padding: 15px 20px;
	background: #fff;
	border: 2px solid #C0C09D;
		-moz-border-radius: 15px;
	border-radius: 15px;
}

/*
	* Font settings

	* Based on the 100% Easy-2-Read standard and Relative readability:
	* http://www.informationarchitects.jp/en/100e2r/
	* http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
*/
body, button, input, select, textarea {
	font: 16px/1.625 'Varela', Helvetica, Arial, sans-serif;
	_font-size: 1em; /* IE6 can't resize px-based text and most mobiles don't default the text to 16px */
	color: #333; /* Black on white is too much contrast, #333 is a lot better */
}

/* Add more tags as your project needs */
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, img {
	margin: 0 0 1.625em;
}
section p {

}

/* ============================================================> HEADINGS AND SMALL */

/*
	* Font sizes are based on the golden ratio of 16
	* See this for the modular scale: ow.ly/5jGl6
	* Line-heights and margins are adjusted to keep a 26px (1.625em) vertical rhythm across elements 
*/

h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	font-weight: normal;
	color: #818068;
}


h1 {
	font-size: 4.25em; /* 68px */
	line-height: 1.1471em;
	margin: 0 0 1em 0;
}
header h1 {
	font-family: 'Architects Daughter', 'Monotype Corsiva', Georgia, cursive;
	color: #bebf9b;
	margin: 15px 0 0 0;
	padding-bottom: .25em;
}
h2 {
	font-size: 2.625em; /* 42px */
	line-height: 1.2381em;
	margin: 0 0 1em;
}

h3 {
	font-size: 1.625em; /* 26px */
	line-height: 1em;
	margin: 0 0 1em;
}

small {
	font-size: 0.625em; /* 10px */
	margin: 0 0 2.6em;
}

/* ============================================================> PREFORMATTED TEXT AND CODE */

/* Allows line wrapping of 'pre' */
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre, code, kbd, samp {
	font: 1em/1.625em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Courier New', Courier, monospace;
}

/* ============================================================> TABLES */

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

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.625em;
	border-bottom: 0 solid #333;
}

/* ============================================================> FORMS */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	*margin-left: -7px;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

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

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

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

/* ============================================================> QUOTES */

blockquote, q {
	quotes: none;
}

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

blockquote, q, cite {
	font-style: italic;
}

blockquote {
	padding-left: 1.625em;
	border-left: 3px solid #ccc;
}

blockquote > p {
	padding: 0;
}

/* ============================================================> LISTS */

ul, ol {
	list-style-position: inside;
	padding: 0;
}

li ul, li ol {
	margin: 0 1.625em;
}

dl dd {
	margin-left: 1.625em;
}

/* ============================================================> LINKS */

a {
	text-decoration: none;
	color: #6C568C;
}

a:visited {
	color: #6C568C;
}

a:hover {
	text-decoration: underline;
}

a:focus {
	outline: thin dotted;
}

/* Better CSS outline suppression: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
	outline: none;
}

.faq li a, .faq h2 a, .faq h3 a {
	color: #818068;
}
.faq h2 a:hover, .faq h3 a:hover {
	text-decoration:none;
}

/* ============================================================> VISUAL MEDIA */

figure {
	margin: 0;
}

img, object, embed, video {
	max-width: 100%; /* Consider this first: unstoppablerobotninja.com/entry/fluid-images/ */
	_width: 100%; /* IE6 doesn't support max-width, so we just use width: 100%. If the image/video is smaller than the container, change 100% to an absolute value */
}

img {
	border: 0;
	margin: 0;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
	border: 1px solid #818068;
}

figure {
	background: #FEFFCF url(../img/leaf-76-light.png);
	float: right;
	padding: 15px 20px 15px 20px;
	border: 1px solid #818068;
	border-right: 2px solid #818068;
	border-bottom: 2px solid #818068;
	margin-bottom: 15px;
	height: 297px;
	float: right;
	width: 177px;
	margin-left: 20px;
}


figcaption {
	text-align: center;
	color: #818068;
}

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
	overflow: hidden;
}

/* ============================================================> ABBREVIATIONS */

abbr[title], dfn[title] {
	border-bottom: 1px dotted #333;
	cursor: help;
}

/* ============================================================> MARKED/INSERTED/DELETED TEXT */

ins, mark {
	text-decoration: none;
}

mark {
	background: #ff0;
}

ins {
	background: #ff9;
}

del {
	text-decoration: line-through;
}

/* ============================================================> OTHERS */

strong, b, dt {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

var, address {
	font-style: normal;
}

/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 0.625em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* ============================================================> HELPER CLASSES */

/*
	* Micro clearfix hack
	* More semantically titled with the class name 'group'

	* Source: nicolasgallagher.com/micro-clearfix-hack/
*/
.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	*zoom: 1;
}

.container:after
{ 
 content: ".";  
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}

/* ============================================================> PRIMARY STYLES */

.main{
	list-style: none;
	width: 940px;
	border-bottom: 2px solid #C0C09D;
	border-top: 2px solid #C0C09D;
	height: 44px;
	margin: 0 -20px 15px -20px;
	padding: 12px 20px 0 20px;

}
.main li {
	float: left;
	margin-right: 60px;


}
.main a {
	color: #818068;
		font-size: 1.625em; /* 26px */
	line-height: 1em;
}
.main a:hover {
	text-decoration: none;
	color: #C0C09D;
}
.side {
	float: right;
	list-style: none;
	margin-left: 0px;
}


.side a {
	text-decoration: none;
	font-family: 'Architects Daughter', 'Monotype Corsiva', Georgia, cursive;
	color: #818068;
		font-size: 1.625em; /* 26px */
	line-height: 1em;
		display: block;
	height: 66px;
	width: 208px;
	text-align: center;
	background: #D6D7AE url(../img/side-nav.png) bottom right;
	border: 1px solid #A6A686;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-bottom: 15px;
	padding: 37px 15px 0 15px;
}
.tall a {
	height: 86px;
	padding-top: 17px;
}
.side a:hover {
	background: #feffcf url(../img/side-nav-hover.png) bottom right;
}
section {
	width: 620px;
	float: left;
}


footer {
	clear: both;
	border-top: 2px solid #C0C09D;
	width: 940px;
	margin: 0 -20px 0 -20px;
	padding: 15px 20px 0 20px;
}
footer .fn {
	display: none;
}
footer p {
	text-align: right;
	float: right;
}
footer .vard {
	float: left;
}

.contact .vcard, .contact form, .thankyou {
	width: 266px;
	float: left;
	border: 2px solid #818068;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 15px;
	min-height: 375px;
	margin-bottom: 15px;
}
.contact .vcard {
	margin-right: 20px;
}
.contact ol {
	list-style: none;
	margin: 0;
}
.contact ul {
	list-style: none;
	margin: 0;
}
.contact input, .contact textarea {
	width: 100%;
	border: 1px solid #C0C09D;
}
.contact button {
	float: right;
}
.contact label {
	color: #818068;
}
li.input {
	margin-bottom: 1.625em;
}
.iferror {
	margin-top: -1.625em;
	margin-bottom: 1.625em;
	color: #6C568C;
	display:none;
}
.error .iferror {
	display:block;
}
.error INPUT, .error TEXTAREA {
	border-width:2px;
	border-style:solid;
	border-color:#6C568C;
	}
.contact p {
	margin-bottom: 30px;
}

.map {
	clear: both;
	width: 576px;
	min-height: 386px;
	padding: 15px 20px;
	border: 2px solid #818068;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-bottom: 15px;
}
.map iframe {
	 width: 580px;
	height: 600px;  
}
.stage, article {
	width: 576px;
	padding: 15px 20px;
	border: 2px solid #818068;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-bottom: 15px;
}


article:after
{ 
 content: ".";  
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}

a.webmuggle {
	color: #818068;
}

.video {
	width: 460px;
	padding: 15px 20px;
	margin-left: 60px;
	background: #818068 url(../img/leaf-76-light.png);
	margin-bottom: 30px;
	border: 1px solid #818068;
	border-right: 2px solid #818068;
	border-bottom: 2px solid #818068;
}
ul {
	list-style-position: outside;
	margin-left: 20px;
}

/* ==========================================================================================> SCREEN-ONLY WIDE MOBILE (480px+) STYLES */

@media only screen and (min-width: 480px) {
	body {
		
	}
}

/* ==========================================================================================> SCREEN-ONLY TABLETS/NETBOOKS (768px+) STYLES */

@media only screen and (min-width: 768px) { 
	body {
		
	}
}

/* ==========================================================================================> SCREEN-ONLY DESKTOPS (1024px+) STYLES */

@media only screen and (min-width: 1024px) { 
	body {

	}
}

/* ==========================================================================================> PRINT-ONLY STYLES */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""; 
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}
	


	h2, h3 {
		page-break-after: avoid;
	}
	

}