html { font-size: 62.5%;
	height:100%;
	}
 
body { 
 font-size: 14px; font-size: 1.6rem; 
 font-family: Verdana, sans-serif;
 font-style: normal; 
 font-weight: normal; color:#000;
 width: 100%;
 height: 100%;
} 
 /* =14px */
h1   { font-size: 18px; font-size: 1.8rem; color:#587c24;} 
h2   { font-size: 12px; font-size: 1.4rem; color:#587c24;} 
h3  { font-size: 12px; font-size: 1.4rem; color:#587c24; text-align:center;} 
h4   { font-size: 24px; font-size: 2.4rem; color:#587c24;}
h5   { font-size: 20px; font-size: 2.0rem; text-align:center; color:#ff0000;}

table td{
	vertical-align:baseline;
	font-size: 1.2rem;
	}
table p{
	margin-bottom: 0;
}
a,
a:link,
a:visited {
  text-decoration:none;
  color: #00F;
}
a:hover {
    color: red;
}

.spptitle{ 
margin-top: 2rem;
font-size: 3rem;
font-weight:bold;
color:#fffef4;
text-align: center;
	
	}
a:active {
  text-decoration:none;
  color: 5f69f2;      /*dark Blue*/
}

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

/* hides from IE-mac */
*html .clearfix {height: 1%;}
.clearfix {display: block;}

.hidden {
  display: none;
}

#home { 
  background: url("images/garryoakbg2.jpg") no-repeat center center fixed;
  background-size:cover;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #F7FBFA;
  width= 100%;
    clear: both;
}

/*html {
  background: -webkit-linear-gradient(#587c24, #a7c876);  For Safari 5.1 to 6.0; 
  background: -o-linear-gradient(#587c24, #a7c876);  For Opera 11.1 to 12.0;
  background: -moz-linear-gradient(#587c24, #a7c876);  For Firefox 3.6 to 15;
  background: linear-gradient(#587c24, #a7c876) no-repeat center center fixed;  Standard syntax;  
}
*/

html { background: #587c24;
  background: -webkit-linear-gradient(top,  #587c24 0%,#a7c876 100%);  For Safari 5.1 to 6.0; 
 background: -o-linear-gradient(#587c24, #a7c876);  For Opera 11.1 to 12.0;
  background: -moz-linear-gradient(top,  #587c24 0%, #a7c876 100%);  For Firefox 3.6 to 15;
  background: linear-gradient(#587c24, #a7c876) no-repeat center center fixed;  Standard syntax; 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#587c24', endColorstr='#a7c876',GradientType=0 ); 
}

#fade{
	width: 100%;
	position: relative;
	margin: 0;
	height: auto;
	overflow: hidden;
	clear: both;	
	 }

header{ 
	height: 15rem;
	background-color: rgba(255,255,255,0);
/*	margin: 0.5rem auto;
*/	width: 100%;
	border-width: -1rem;
	clear: both;
	}

header img{
	display: block;
	width: 101.5rem;
	height: 15rem;
	border: 0.2rem;
	border-color: #FF0000;
	margin-left: auto;
    margin-right: auto;
	overflow: hidden;
	}
header.title img{
		width: 70%;
	}
#landing{
	width: 100%;
		height:auto;
	margin-top: 4rem;
	margin-left: auto;
	margin-right:auto;
	overflow: hidden;
background-color: rgba(252,252,252,0); 
}
.temp{
	font-style: italic;}	

.center {
    margin: auto;
    width: 100%;
}
	
.landingbox{ 
    width: 65%; 
	border: .2rem solid #587C24;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	behavior: (treesofvictoria/pie/PIE.htc);
	overflow: hidden; 
	margin: auto; 
	padding: 2rem;
/*background: -moz-linear-gradient(top, rgba(255,254,245,0.90) 0%, rgba(255,246,205,0.80) 100%);  FF3.6-15 
background: -webkit-linear-gradient(top, rgba(255,254,245,0.90) 0%,rgba(255,246,205,0.80) 100%);  Chrome10-25,Safari5.1-6 
background: linear-gradient(to bottom, rgba(255,254,245,0.90) 0%,rgba(255,246,205,0.80) 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
*/
    background: rgba(255,254,245,1); /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,254,245,0.90)) to(rgba(255,246,205,0.80) 100%))); /*old webkit*/
    background: -webkit-linear-gradient(top, rgba(255,254,245,0.90), rgba(255,246,205,0.80)); /*newer webkit*/
    background: -moz-linear-gradient(top, rgba(255,254,245,0.90), rgba(255,246,205,0.80)); /*old gecko*/
    background: -o-linear-gradient(top, rgba(255,254,245,0.90), rgba(255,246,205,0.80)); /*opera 11.10+*/
    background: linear-gradient(to bottom, rgba(255,254,245,0.90), rgba(255,246,205,0.80)); /*firefox 16+, chrome 26+, IE10+, opera 12.10+, future browsers*/
    -pie-background: linear-gradient(to bottom, rgba(255,254,245,0.90), rgba(255,246,205,0.80)); /*ie 6-9 via PIE*/
    behavior: url(PIE.htc);
}

	
.landingbox2{
	width: 65%; 
	border: .2rem solid #587C24;
	border-radius: 2rem;  
	overflow: hidden; 
	margin: auto; 
	padding: 2rem;
	background: url("images/fernsbg_s.jpg") no-repeat center center scroll;
	background-size:cover;
	opacity: 50%;
}
#contact{
	color: #ffffcc;}
	
	
.buttonbox{
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right:auto;
	margin-top: 1.5%;
}

.mapwrapper{
	clear:both;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right:auto;
	positon: fixed;
}
	
.sidebar1{ 
	width: 20%;
	background: -moz-linear-gradient(top, #fffef5 0%, #fff6cd 100%);
	background: linear-gradient(to bottom, #fffef5 0%, #fff6cd 100%);
	height: auto;
	border: 0.2rem solid #587C24;
	border-radius: 2rem; 
	padding: 2rem; 
	float: left; 
	overflow: hidden; 
	margin: 2% 1% 1% 13.5%;
	 z-index: -1;
}
.sidebar2{ 
	width: 20rem;
    background-color: rgba(252,252,252,0);
	background-repeat: no-repeat;
	height: 10rem;
	border: none;
	border-radius: 2rem; 
	padding:none; 
	float: left; 
	margin: 0 auto;
 z-index: -1;
}

#left, #middle, #right{
	 font-family: Segoe print;
	 font-size: 3rem;
 font-weight:bold;
  color:#6e1212;
 text-align: center;
	position: relative;
	width: 15.5%;
	height: auto;
	float: left;
}
#left {
	margin: 1% 1% 1% 24.5%;
			}
#middle{ 
	margin: 1% 1% 1% 1%;
		}

#right{ 
	margin: 1% 20% 1% 1%;
		}

.sidetext{ 
padding-top: 1rem;
	}

.sidepic{
height: auto;
width:60%; 
margin-left: auto;
Margin-right: auto;
	} 
  
.figcaption {
	font-size: 1.3rem;
	text-align: center;
	font-style:italic;
	width: 70%;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	}
.rightbox{ width: 50%; 
	border: 0.2rem solid #587C24;
	border-radius: 2rem; 
	float: left;
	overflow: hidden; 
	margin: 2% auto; 
	padding: 2rem;
	background: -moz-linear-gradient(top, #fffef5 0%, #fff6cd 100%);
	background: linear-gradient(to bottom, #fffef5 0%, #fff6cd 100%);
}

.rightbox img{ float:left; 
	}

.mapbox{ 
	width:50%; 
    height: 90%;
	float: left;
	margin: 2rem auto;
	border: 0.2rem solid #090;
	border-radius: 2rem; 
	overflow:hidden;
	 z-index: -1;
  }


#map_canvas { 
    margin: auto;
    width: 100%;
    height: 100%;
	border: 0.15em solid #090;
	border-radius: 1em;  
  }


#checkboxes { 
	position: relative; 
	right: auto;
	height: auto;
	font-size: 1.4rem;
	font-family: 'arial', 'sans-serif'; 
	background-color: white;
	border: 0.1rem solid #587C24;
	border-radius: 1rem; 
	padding: 1rem 1.5rem;
	 z-index: 0;
	}

footer{ 
	height: 7rem;
    width: 60%;  
		margin-left: auto;
	margin-right:auto;
	overflow: hidden;
/*    z-index: -1;
*/	border: .2rem solid #587C24;
	border-radius: 2rem;  
	margin: 2rem auto; 
	}
	
#logo{ 
float:right;
margin-right: 0.7rem;
width: auto;
height: auto;
padding-top: .6rem;}


.donate{
	width: 80%;
	border: .2rem solid #587C24;
	border-radius: 2rem;  
	padding: 1.2rem;
	margin: auto;
	font-size: 1.2rem;
	font-style:italic;
	text-align: left;
	color: #CC0000;
	}

.donate2{
	width: 80%;
	border: .2rem solid #587C24;
	border-radius: 2rem;  
	padding: 1.2rem;
	margin: auto;
	font-size: 1.2rem;
		text-align: left;
	}

#ppal{
	margin-left:auto;
	margin-right:auto;
		}
/*       **********************  read more code  ***************************
*/
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
  padding-bottom: 0;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid red;
  border-radius: .25em;
}

/* Other style */ 
/*p {
  padding: 2%;
  background: #fff9c6;
  color: #c7b27e;
  border: 1px solid #fce29f;
  border-radius: .25em;
}
*/                   <!--******************************************* CSS MENU **************************************
#cssmenu {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
/*  font-size: 1.6rem;*/
  line-height: 1.1rem;
  text-transform: uppercase;
  text-align: center;
  z-index: +1;
  position: relative;
}

#cssmenu > ul {
  list-style-type: none;
  padding: 0;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.8rem;
  width: 50%;
  height: auto;
 background: url("images/menubar.png");
 background-repeat:repeat-x; 
  border: 0.1rem solid #587C24;
  border-bottom: 0.3rem solid #587C24;
  border-left-width: 0.1rem;
    border-right-width: 0.1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -o-border-radius: 1rem;
  border-radius: 1rem;
 
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 18rem;
  font-size: 1.2rem;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #fff;
  border: 0.2rem solid #587C24;
  border-bottom: 0.3 rem solid #587C24;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: +1;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
   background-repeat:no-repeat;
   background: url("images/menubutton.png");
   z-index: +1;
   box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
 background-repeat: no-repeat; 
 background-position: 90% -95%;
 z-index: 1;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #587C24 url('images/caret.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 1rem 1.5rem 1rem 1.5rem;      /*spacing in the menubar*/
  text-decoration: none;
  color: #587C24;
  text-shadow: 0 0.2rem 0 #fff6cd;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
 background: url("images/menubutton.png");
 background-repeat: repeat; 
 border-radius: 0.6rem;
  color: #fff6cd;
  text-shadow: 0 0.2rem 0 #000;
}



  /********************************************* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 46rem) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}

 
 /*   *****************  max width 600 43rem  ************************************************************************/

@media (max-width: 47.5rem) {   
 
.title img{
	width: 100%;
	margin-bottom: 2rem;
}

#cssmenu{font-size: 1.4rem;
position: relative;
min-height: 5rem;
}

#cssmenu > ul {
  background: rgba(255,255,255,0.9);
  width: 45%;
  float: left;
  margin-left: 3rem;
  margin-right: auto;
}
#cssmenu > ul li {       /*  this hides the individual menu headers when collapsed*/
    display: none;
  }
#cssmenu > ul li#responsive-tab {
    display: block;
  }
#cssmenu > ul li#responsive-tab a {              /* this is the 3 line menu icon*/
    background: url('images/menu.png') no-repeat;
    background-position: 95% -40%;
  }
#cssmenu > ul li#responsive-tab a:hover {
    background-color: #587C24;
    background-position: 95% 130%;
	margin: auto;
  } 
#cssmenu > ul li.right {
    float: none;
}
     
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}

#cssmenu > ul li.has-sub ul {       /*this code controls the vertical menu*/
  display: none;
  position: absolute;
  margin: -4rem 8rem;         /*this is the offset of the dropdown sub-menus*/
  padding: 0;
  list-style-type: none;
  background: #fff;                 /*this color is the drop down sub menu background*/
  border: 0.2rem solid #587C24;
  border-bottom: 0.2rem solid #587C24;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 0 none;
}
  
#cssmenu > ul li a {
  padding: 1rem 1.5rem 1rem 1.5rem;      /*spacing in the sub-menubar*/
}
#cssmenu > ul li.has-sub ul li {
    display: block !important;
 }
#cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 2rem;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');          
  background-repeat: no-repeat;
  background-position:90% -60%;
}

#fade{
	top: 1%;
}

.landingbox{ width: 80%; 
margin: auto;
	border: .2rem solid #587C24;
	padding: 1rem;
}

.mapwrapper{
	width: 100%;
	margin: auto;
	height: auto;
}
.sidebar1{ 
	width: 75%;
	float: none;
	line-height: 1.8rem;
	margin: 0.3rem auto;
}
#checkboxes{
	overflow: hidden;
	font-size: 1.2rem;
	top: 0.5rem; 
	width: 60%;
	font-size: 1.2rem;
	padding: 0.5rem;
	margin: auto;
}
.mapbox{ 
	width:85%; 
    height: 60%;
	float: none;
	margin: auto;
	border: 0.2rem solid #090;
	border-radius: 2rem; 
	overflow:hidden;
  }
 .rightbox{
	 	width:85%; 
    height: 60%;
	 }

.cb1{
	float: left;
	padding-left: 1rem;}

.sidetext{ padding-top: 0.5rem;
	}

header img{
	width: 90%;
	}


/*#map_canvas{ 
    height:60%;
	float:none;
	margin: auto;
	width: 85%;
}
*/

h1 {font-size: 1.8rem;}
p{ font-size: 1.2rem; }
h4 {font-size: 2.1rem;}

}              ********************* end 43 rem responsive ***************************************


@media (max-width: 37rem) {   
#left, #middle, #right {
	 font-size: 1.5rem;
}
}


@media (max-width: 28rem) {   

header{ 
margin-bottom: 1rem;
	}
	
header img{
	width: 75%;
	}

	
#landing{
	margin-top: 2rem;
	}
#cssmenu > ul{
  float:left;
  margin-left: 2rem;
  margin-right: auto;
  width: 40%;
  font-size: 1.2rem;
}

#cssmenu > ul li.has-sub ul li a span{
  font-size: 1.2rem;
   padding-left: 1rem;
   width: auto;
  }
  
  #fade{
	top: 10%;
	 }
	 
#checkboxes{ font-size: 1rem;
	top: 0.2rem; 
	width: 60%;
	font-size: 1rem;
	padding: 0.1rem;
	margin: auto;
	float:left;
}
.sidetext{ padding-top: 0.2rem;
	}

h1{ font-size: 1.2rem;}

h4{ font-size: 1.6rem;}

#left, #middle, #right {
	 float:none;
	 margin: 2rem;
	}


}