/* reset */
section, article, aside, footer, header, nav, hgroup, canvas{display: block}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, img,
blockquote, pre, form, label, /*legend, table, caption, tbody, tfoot, thead,
tr, th, td, dl, dt, dd,  details, figure, figcaption, embed, 
  menu,  output,  summary, audio, video */{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1em; 
    vertical-align: baseline;
    background: transparent;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 14, 2015 */
@font-face {
    font-family: 'armataregular';
    src: url('fonts/Armata-Regular-webfont.eot');
    src: url('fonts/Armata-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Armata-Regular-webfont.woff2') format('woff2'),
         url('fonts/Armata-Regular-webfont.woff') format('woff'),
         url('fonts/Armata-Regular-webfont.ttf') format('truetype'),
         url('fonts/Armata-Regular-webfont.svg#armataregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* colour scheme used - thanks to Lynda.com for so much help in this my first really project
#8c3614		RGB (140, 54, 20)	- h1
#933815		RGB (147, 56, 21)	- h2
#60270d		RGB (96, 39, 13)	- h3, Navbar
#fcfdf4		RGB (252, 253, 244) - outer background,
#FFF(white)	RGB (255,255,255)	- navbar link text, 
#ccc(grey)	RGB (204, 204, 204)	- footer text, 
#f7fff8							- logo background

 */

/* - - setup body - - */
body{
background-image: url(../_images/greenMarks.jpg); 
background-image-opacity: 0.3; 
}

body, p, input {
    line-height: 1.4em; /* em = current specified point size = 16pt */
    font-family: 'armataregular', verdana, sans-serif;
    font-size: 1em;  
}

/* - - starting margins - - */

h1, h2, h3, h4, h5, h6, ol, ul, li { margin: .1em 0em; } 


p { 
	margin: .5em 3.5em; 
}

li { margin-left: 3em; } 

/* - - setup headings - - */
h1, h2, h3, h4, h5, h6 {
    line-height: 1;
    font-family: georgia, serif;
    font-weight: bold; 
}

.sectionHead {
	margin-left: 15%;
}

h1 { 
	font-size: 225%;
	margin: 0.5em 0 1em 1em;
	color: #9e2200;
	text-shadow: 2px 2px #ddd3cf;
} /*page name*/
	
h2 { 
	font-size: 150%; 
	margin: 1.5em 0 0 1em;
	color:  #9e2200;
	/*color: #933815;*/
} 
	
h3 {
	font-size: 125%; 
	margin: 0.8em 0 0.5em 1.1em;
	color: #9b4015;
}

h4 { font-size: 100%; }
h5 { font-size: 100%; }
h6 { font-size: 100%; }

/* - - setup page style - - */
#outer {
   	width: 70%;
    margin: 0 auto;
    padding: .6em 0 1em 0;
    /*background: #fbfdea;
    background: #f7fcce;
   background: #f7fbd2; */
  background: #f8fbdb;
    border: 0.5px solid #8AC007;
    opacity: 0.8;
    filter: Alpha(opacity=80); /* IE8 and earlier */
    box-shadow: 0px 0px 10px 4px #b2aaa7;
}	

img{
	display: block;
	margin: 1em auto;
}

/* - - setup banner - - */
#top { 
	padding: 0.5em 0 0 0;
	margin-bottom: 1em;
}

#banner{
	margin: 0 20%;
}

#logo{
	float: left;
	width: 15%;
	margin-bottom: 0.2em;
	border: 1px solid #8AC007;
	padding-left: 0.5em;
	border-radius: 15px; 
	background-color: #f7fff8;
	box-shadow: 0px 0px 8px #2a3f2c;
}

#name{
	width: 100%;
	margin-left: 5em;
}

/* - - setup navigation bar - - */
/* ----- hidding text -this allows the nav bar to have a title in an outline
#mainNav h1{
	position: absolute;
	left: -2000em;
}*/
	
ul.navbar {
	height: 2em;
	/*background: #60270d;*/
	background: #587b03;
	border-radius: 15px;
    border: 2px solid #bb5f06; /*a6bc71 */
    list-style-type: none;
    padding: .6em 0 0 0;
    text-align: center; 
    box-shadow: 0px 0px 8px #bb5f06 inset;
    margin-top: 0.5em;
}

ul.navbar li {
    display: inline-block;  /*single line display of list */
}

ul.navbar li a { 
    font-size: 1em;
    text-decoration: none;
    color: #FFF;
}
    
ul.navbar li a:hover { 
	color: #c9c9c9;
	border-bottom: #600 solid .1em; 
	border-color: #FFF;
}

 #hide h1{
	position: absolute;
	left: -2000em;
}
heading p{
	margin: 2em 2em 2em 3em; 
}
/* - - home page columns - - */
.col-group{
	float: left;
	width: 100%;
	margin-top: 1em;
}

.col-1-2 {
	float: left;
	width: 50%;
}

.ca {
	width: 40%;
	margin: 0 0.8em 0 1.5em;
	border-right: #8AC007 solid .08em;
}

.message {
	font-size: 88%;
	font-style: italic;
	padding-right: 20%;

}

.opS {
	padding-right: 20%;
}


.cb{
	/*font-style: italic;*/
	font-size: 88%;
	padding: 0 0 0 0.3em;
}

.cb h1{
	position: absolute;
	left: -2000em;
}
.cb p{
	margin: .5em 1em; 
}

#mapCanvas {
   width: 100%;
   border: 0;
}

a {
	font-size: 90%;
	text-decoration: none;
	color: #8c3614;
}

/* clear floats */
.clear { 
	clear: both; 
} 

	/* footer */
hr {
    display: block;
    border: 0;
    border-top: .08em solid #ccc;
    margin: 0;
    padding: 0;
}

ul.footnavbar li {
    display: inline-block;  /*single line display of list */
}
 #foot {
	color: #606060;
	padding: 0;
	font-size: 70%;
	text-align: center;
}

footer p {
	line-height: 1em;
}

/*- - - - - - - 
 * The following pages may need to be designed differently to each other in the future
 * the different names are to support this.
 - - - - - - - - - - Partners page columns  - - - - - - - - - - - */



section#partners {
   width:60%;
   margin-left: 25%;
   font-size: 99.4%;
}

section#partners h1{
   position: absolute;
	left: -2000em;
}
.mission {
	font-size: 80%;
	font-style: italic;
	margin-top: 0.5em;
}
.support {
 	font-size: 185%;
 	margin:  0; 
 	margin-top: 1em;

}

/* - - - - - - - - - - Op-Shop page columns  - - - - - - - - - - - */
	
article#story {
   width:60%;
   margin-left: 25%;
}

article#story h1{
   position: absolute;
	left: -2000em;
}

/* - - - - - - - - - - about page columns  - - - - - - - - - - - */


.b {
	font-weight: bold;
}

article#vision {
	float: left;
	width:45%;
	margin-left: 15%;
}

.aboutLink{
	font-size: 100%;
}

aside.photos {
	width: 20%;
	float: right;
	margin-right: 13%;
	margin-top: 5em;
}

.Extralogos{
	margin-top: 2em;
}

.Willylogos{
	margin-top: 3em;
}




/*------------------------------------------------------------------------*/
/* screens between 320px to 480px */
/*------------------------------------------------------------------------*/

@media only screen and  (min-width: 320px) and (max-width: 479px) {
#outer {
   	width: 100%;
}
img {
	width: 90%;
}
.sectionHead {
	margin-left: 3%;
}

h1 { 
	margin-left: 3%;
	font-size: 190%;
	margin-bottom: 0.5em;
}
	
h2 { 
	margin-left: 0;
}

h3 { 
	margin: 0.5em 0;
	font-size: 120%;
}
	
p { margin-left: 0;
	margin-right: 0;
	font-size: 1em;
}	

#top {
	margin-left: 0; 
}

#banner{
	margin: 0 0;
}

#logo{
	width: 25%;
	margin-left: 0.5em;
}

#name{
	width: 69%;
	margin-left: 0;
}

/* nav bar */
ul.navbar {
	height: auto;
	border-radius: 10px;
	padding: .3em 0;
}

ul.navbar li {
	margin: 0;
}

ul.navbar li a { 
    font-size: .8em;
	padding: 0 1.5em;
}

/*--home / index page */
.col-group{
	margin-top: 0;
}

.col-1-2 {
	width: 100%;
}

.ca {
	text-align: center;
	margin:0;
}

.message {
	font-size: 88%;
	font-style: italic;
	padding-right: 2%;
	padding-left: 2%;

}

.opS {
	padding-right: 5%;
	padding-left: 2%;
}

.cb {
	padding: 0 0.3em;
	border-left: none;
}

#mapCanvas {
   width: 95%;
   margin-left: 0.8em;
   border: 0;
}


/* footer nav bar */
ul.footnavbar {
	height: auto;
	border-radius: 10px;
	padding: .3em 0;
}

ul.footnavbar li {
	margin: 0;
}

ul.footnavbar li a { 
    font-size: 1em;
	padding: 0 1em;
}

/* other pages */
article#story {
   width:80%;
   margin-left: 10%;
   font-size: 88%;
}

section#partners {
   width:80%;
   margin-left: 10%;
   font-size: 88%;
}

article#vision {
   width:83%;
   margin-left: 10%;
   font-size: 88%;
}

/*aside.photos {
	width: 100%;
	margin: 0 1em;
	
}*/
.Extralogos{
	width: 30%;
	margin: 0.5em 0 0 15%;
	float: left;
}

.Willylogos{
	width: 30%;
	margin: 2em 13% 0 0;
	float: right;
}

}

/*------------------------------------------------------------------------*/
/* screens between 480px to 679px*/
/*------------------------------------------------------------------------*/
@media only screen and  (min-width: 480px) and (max-width: 679px) {
#outer {
   	width: 100%;
    padding: 0;
}	
img {
	width: 90%;
}
.sectionHead {
	margin-left: 5%;
}

h1 { 
	margin-top: 0.5em;
	margin-right: 0;
	margin-bottom: 0.3em;
	margin-left: 5%;
	font-size: 190%;
}
	
h2 { 
	margin-left: 3%;
	margin-top: 1em;
} 
	
h3 { 
	margin-left: 3%;
	font-size: 120%;
}

p { margin-left: 1em;
	margin-right: 1em;
	font-size: 1em;
	font-size: 90%;
}	

#banner{
	margin: 0 5%;
}

#logo{
	width: 25%;
}

#name{
	width: 70%;
	margin-left: 0;
	margin-top: 0.5em;
}

a {
	font-size: 90%;
}

ul.navbar {
	height: auto;
	border-radius: 10px;
	padding: .3em 0;
}

ul.navbar li {
    margin: 0em .5em;
}
 
ul.navbar li a { 
    font-size: 1em;
} 

.col-group{
	margin-top: 0;
} 
.message {
	font-size: 80%;
	font-style: italic;
	padding-right: 0;
	padding-left: 0;
	line-height: 0;

}

.opS {
	padding-right: 0.1em;
	padding-left: 0;
}

.cb{
	padding: 0 0 0 0.5em;
}

#mapCanvas {
   width: 85%;
    margin-left: 0.8em;
}

article#story {
	width:65%;
   font-size: 90%;
}

section#partners {
   width:65%;
   font-size: 90%;
}

article#vision {
   width:65%;
   font-size: 90%;
}
aside.photos {
	width: 100%;
	margin: 0 1em;
	
}
.Extralogos{
	width: 20%;
	margin: 0.5em 0 0 20%;
	float: left;
}

.Willylogos{
	width: 20%;
	margin: 2em 20% 0 0;
	float: right;
}

}
/*_____________________________________________
 * 
 may help with creating columns of the photos
 * .group:before,
.group:after {
  content: "";  /* clear floats before the group
  display: table; /* set up as a table
}
.group:after { /* clear floats within the element after the group
  clear: both;
}
.group {
  clear: both; /* clears floats above left and right
  *zoom: 1; 	/* tricks older browsers
}
 ______________________________*/


/*------------------------------------------------------------------------*/
/* screens between 680px to 768px*/
/*------------------------------------------------------------------------*/
@media only screen and  (min-width: 680px) and (max-width: 767px) {
#outer {
   	width: 90%;
    padding: 0;
}

.sectionHead {
	margin-left: 3%;
}	

h1 { 
	margin-left: 3%;
	margin-bottom: 0.3em;
}
	
h2 { 
	margin-left: .3em;
	margin-top: 1em;
} 
	
h3 { 
	margin-left: .1em;
	font-size: 120%;
}

p { margin-left: 1.5em;
	margin-right: 1.5em;
	font-size: 1em;
	font-size: 100%;
}	

#banner{
	margin: 0 5%;
}

#logo{
	width: 25%;
}

#name{
	width: 65%;
	margin-left: 0;
}

a {
	font-size: 90%;
}

ul.navbar li {
    margin: 0em .8em;
}
 
ul.navbar li a { 
    font-size: 1em;
} 

.col-group{
	margin-top: 0;
}  
  
.cb{
	padding: 0 0 0 0.5em;
}

#mapCanvas {
    margin-left: 0.5em;
}

}


/*------------------------------------------------------------------------*/
/* screens between 768px to 980px */
/*------------------------------------------------------------------------*/
 @media only screen and (min-width: 768px) and (max-width: 978px) {
#outer {
   	width: 90%;
    padding: 0;
}	

.sectionHead {
	margin-left: 5%;
}

h1 { 
	margin-left: 5%;
	margin-bottom: 0.5em;
}

h2 { 
	margin-left: 8%;
	margin-top: 1em;
} 
	
h3 { 
	margin-left: 8%;
	font-size: 120%;
}

p { margin-left: 10%;
	margin-right: 1.5em;
	font-size: 1em;
	font-size: 95%;
}	

#banner{
	margin: 0 5%;
}

#logo{
	width: 25%;
}

#name{
	width: 65%;
	margin-left: 0;
}

a {
	font-size: 90%;
}
 
ul.navbar li {
    margin: 0em .8em;
}
 
ul.navbar li a { 
    font-size: 1em;
} 
 
 .col-group{
	margin-top: 0;
}
   
.cb{
	padding: 0 0 0 0.5em;
}

#mapCanvas {
    margin-left: 0.5em;
}
aside.photos {
	width: 25%;
}

.Extralogos{
	margin-top: 2em;
	margin-bottom: 4em;
}

.Willylogos{
	margin-top: 4em;
	margin-bottom: 4em;
}

}

/*------------------------------------------------------------------------*/ 	
/* screens over 980px to 1900px*/
/*------------------------------------------------------------------------*/

@media only screen and  (min-width: 980px) and (max-width: 1899px) {
#outer {
   	width: 80%; 
}

.sectionHead {
	margin-left: 5%;
}

h1 { 
	margin-left: 5%;
	margin-bottom: 0.5em;
}

h2 { 
	margin-left: 8%;
	margin-top: 1em;
} 
	
h3 { 
	margin-left: 8%;
	font-size: 120%;
}

p { margin-left: 10%;
	margin-right: 1.5em;
	font-size: 1em;
	font-size: 100%;
}	

#banner{
	margin: 0 10%;
}

#logo{
	width: 25%;
}

#name{
	width: 65%;
	margin-left: 0%;
}

ul.navbar li {
    margin: 0 auto;
    padding: 0 auto;
}

 ul.navbar li a { 
 	padding: 0em 1em;
} 
 
.col-group{
	margin-top: 0;
}
	
.cb{
	padding: 0 0 0 0.8em;
}

article#vision {
   width: 40%;
}

aside.photos {
	width: 25%;
	margin-right: 10%;
}

.Extralogos{
	margin-top: 0;
	margin-bottom: 7em;
}

.Willylogos{
	margin-top: 0em;
	margin-bottom: 8em;
}
}

/*------------------------------------------------------------------------*/
/* screens over 1900x */
/*------------------------------------------------------------------------*/

@media only screen and  (min-width: 1900px){
#outer {
	width: 80%;
}

h1 {
	margin-bottom: 0.5em;
}

.col-group{
	margin-top: 0;
}
	
.cb{
	padding: 0 0 0 0.8em;
}
}