@import url("http://fonts.googleapis.com/css?family=Pinyon+Script");
@import url("http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica");
@import url("http://fonts.googleapis.com/css?family=Averia+Serif+Libre");
@import url('http://weloveiconfonts.com/api/?family=entypo');



/*<link href='http://fonts.googleapis.com/css?family=Averia+Serif+Libre' rel='stylesheet' type='text/css'>
/*<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'> */

/*1. BLANKING --------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
header, hgroup, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, time, figure,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, button, select,
table, caption, tbody, tfoot, thead, tr, th, td,
section, article, canvas, nav, footer, aside {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; }
  
  /*2. Layout. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* 2.1 A few little normalize bits (see above) for various browsers*/
section, article, aside, footer, nav, header, hgroup, details, figcaption, summary {
  display: block; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

main {
	min-height: 520px;
}

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

/*3 Colour schemes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*these are all little hacks :) means the main colour can be as light or saturated as you like*/
/*White is main colour but with 98% lightness */
/*Grey is main colour but with 5% saturation*/
/*Black is main colour but with 5% brightness*/

html {
  background-color: #E6F5EB;
  color: #133926; 
  }

 nav {
/* 	background-color: #CFDCD4 */
	}

h1 {  color: #1B4A33; }
h2 {  color: #1B4A33; }
h3 {  color: #1B4A33; }

a  {  color: #339966;  }
a:hover, a:active { color: #40bf80; }


[hidden] { display: none; }

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

/* VARIABLES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/*very simple spacing---------------------------------*/
body > .wrapper {
  width: 90%;
  max-width: 1000px;
  margin: 0px auto; }

/* NESTING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*typography ----------------------------------------*/
/*CSS properties*/
body {
  font-family: 'Averia Serif Libre', cursive;
  font-size: 1em;
  font-weight: normal;
  color: #405F50;
  }

/*Elements: can reference parent*/
nav > a {
  text-decoration: none;
  font-size: 1.2em;
  padding: 10px;
  color: #1B4A33;  }

nav > a:hover {
    color: #07A859; }

/* MIXINS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*button styles*/
html input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
  display: inline-block;
  text-decoration: none;
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* background-color: #663399; */
  /*border: 4px solid #4c2673; */
  padding: 8px 10px;
/*  color: #f4fbf7; */
  font-size: 1.2em; }

html input[type="button"],
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
  cursor: pointer; }

/*no pointer on disabled buttons*/
button[disabled], input[disabled] {
  cursor: default; }

/*@MEDIA~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*@EXTEND ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.article h2, .promo h2 {
  color: #339966; }

.promo h2 {
  color: #663399; }

/*headers*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 20px 0px;
	}

h1 {
  font-size: 1.9em;
  font-family: 'IM Fell DW Pica', serif;  
  text-align: left;
}
header > h1 {
	text-align: center;
	font-family: 'IM Fell DW Pica', serif;  
	font-size: 2.2em;
	}
	
h2 {
	font-size: 1.7em;   
	font-family: 'IM Fell DW Pica', serif;  
	text-align: center;
}

h3 {
	font-size: 1.5em;   
	font-family: 'IM Fell DW Pica', serif;  
	text-align: left;
}

h4 {
	font-size: 1.3em; 
	font-family: 'IM Fell DW Pica', serif;  
	text-align: left;
}

h5 {
	font-size: 1.2em;   
	font-family: 'IM Fell DW Pica', serif;  
	text-align: left;
}

h6 {
	font-size: 1.2em;
    font-family: 'IM Fell DW Pica', serif;  
	text-align: left;
	color: #99cc66; }

/*text styling*/
p {
  line-height: 1.3;
  font-size: 1.2em;
  margin: 20px 0px;
  text-align: left;
  }

.lede, p.lede {
  font-size: 110%; }

.feature-text {
  font-weight: bold;
  font-style: italic; }

strong, b {
  font-weight: bold; }

em, i, dfn, var {
  font-style: italic;
  color: #1D4F73; }

dfn, abbr, abbr[title] {
  border-bottom: 1px dotted #616b66; }

ins {
  border: 1px dotted #616b66;
  border-width: 0px 1px;
  padding: 0px 3px;
  text-decoration: none;
  background-color: rgba(97, 107, 102, 0.15); }

small {
  font-size: 0.8em; }

del {
  text-decoration: line-through; }

mark {
  background-color: yellow;
  padding: 0px 3px; }

kbd, code, samp, pre {
  font-family: monospace;
  font-size: 1em; }

code {
  background-color: rgba(51, 153, 102, 0.15);
  padding: 0px 3px; }

pre code {
  background: none; }

/*Prevents `sub` and `sup` affecting `line-height` in all browsers.*/
sub, sup {
  font-size: 0.8em;
  line-height: 0;
  vertical-align: baseline;
  position: relative; }

sub {
  top: -0.5em; }

sup {
  bottom: -0.25em; }

address, time {
  font-size: 1em;
  display: block;
  margin: 20px 0px; }

ul {
  list-style: inside; }
  ul li {
    font-size: 1.1em;
    padding-bottom: 10px;
	text-align: left;	}

dl dt, dl dd {
  font-size: 1.2em; }
dl dd {
  margin-bottom: 10px;
  text-indent: 20px; }

blockquote {
  background: rgba(153, 204, 102, 0.15);
  padding: 20px 20px 20px 80px;
  overflow: auto;
  border-radius: 2px;
  box-shadow: 0px 0px 1px 0px rgba(50, 50, 50, 0.8);
  font-style: italic; }
 
 blockquote:before {
    content: '❝';
    float: left;
    font-size: 200%;
    margin-left: -40px; }
 
 blockquote:after {
    content: attr(cite);
    display: block;
    text-align: right;
    font-size: 72%; }

form {
  width: 100%;
  margin: 0px auto; }

  form .form-field label, form .form-field input, form .form-field textarea {
    display: block;
	font-family: 'IM Fell DW Pica', serif;
	color: #339966;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1.2em; }

form .form-field input, form .form-field textarea {
    border: 4px solid rgba(97, 107, 102, 0.5); }

form .form-field textarea {
    min-height: 200px; }
	
form label {
	/*font-family: 'IM Fell DW Pica', serif; */
	color: #1B4A33;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1.2em; }

form input {
	color: #1B4A33;
    box-sizing: border-box;
    padding: 2px;
    font-size: 1.2em; }
  
form input[type="submit"] {
	color: #1B4A33;	
    float: left; }

/*links*/
  
a {
  font-weight: normal;
  font-size: 1em; }
a:focus {
    outline: thin dotted; }

h1 a {
  text-decoration: none; }

address a, ul a, ol a, dl a, menu a {
  font-size: 0.8em; }

/*code blocks*/
pre {
  background-color: #133926;
  margin: 20px 20px;
  padding: 20px 20px;
  color: #f4fbf7;
  text-shadow: none;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

.wrapper > footer {
  padding-top: 10px;
	}
	
footer p {
	display: inline-block; 
	text-align: center;
	font-size: 1em;
	line-height: 1em;
	
	}
  
  .logoimage {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 16%;
  }
  
 
figure {
  display:inline-block;
  /* width:40%; */
  padding:0%;
  height:400px;
  overflow:hidden;
  border: 25px;
  border-color: white;
 /* float:auto; this causes an error! */
}
figure.featurePic {
	float:right;
	height: 500px;
	margin-left: 20px;
	}
figure.selectorPic {
	height: 390px;
	width: 260px;
	margin-top: 50px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 50px;
	font-size: 1.2em;
	}
	
figure.selectorPic > caption {
left: -30px;
}
	
figure.home {
	border: 25px solid;
	border-color: white;
	margin-top: 50px;
	}
	
img {
  height:100%;
  border: 25px;
  border-color: white;

  }
  
img.featurePic {
    padding: 0px;
    border: 30px solid white;
    margin: 0;
	height: 400px;
    /* margin-left: 50px;
    margin-right: 50px; */
}
img.selectorPic {
    padding: 0px;
    border: 20px solid white;
    margin: 0;
	width: 80%;
	height: auto;
}

span.legend {
    display: inline-block;
	text-align: left;
	font-style: italic;
    vertical-align: top;
    width: 80px;
}

/* entypo */
[class*="entypo-"]:before {   font-family: 'entypo', sans-serif; }

[class*="entypo-"] {
  width: 30px;
  height: 30px;
  font-family: Entypo;
  font-size: 1.2em;
  text-align: center;
  color: #1B4A33;
  overflow: hidden;
  transition: color .3s;
}

[class*="entypo-"]:hover {
  color: #07A859;
  cursor: pointer;
}

/* add red * to labels for required fields */
input[required] + label::after { 
     color: red;
     content: "*";
}

article.response ul, form ul {
	text-align:left;
	margin-left: 30px;
}

article.response li, form li {
	font-size: 11pt; 
	/* font-family: 'IM Fell DW Pica', serif; */
	color: #1B4A33;
}

section.recommendation {
	width: 80%;
	text-align: center;
}
section.recommendation q {
	font-style: italic;
	font-size: 1em;
}
	
section.recommendation em {
	font-style: normal;
	color: #1B4A33;

}