body {
	-webkit-text-size-adjust: 100%;
	font-family: arial, helvetica, sans-serif;
	font-size: 100%;
	color: black;
	background-color: rgb(0, 165, 0);
	width:100%;
	margin:0px;
}

* {
	box-sizing: border-box;
}

/*****************************************************************/
/* General CSS. */
h1 {
	text-align: center;
}

p {
	font-size: 1em;
	margin: 30px;
}

img {
	margin: 0px;
	max-width: 100%;
	max-height: 100%;
}

a.dont-break-out {
	
	white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}


/*****************************************************************/
/* Masthead CSS. */
div.masthead {
	width:100%;
	max-width:2700px;
	/* margin: auto; */
	/* text-align: center; */
	padding:0px;
	margin:0px;
}

img.mastheadImg {
	width: 100%;
	max-width: 2700px;
	padding:0px;
	margin:0px;
	//margin-top: 48px; /* To make room for the fixed top-menu. Different menus now so not needed. */
}

/* End of Masthead CSS. */

img.newsImageFull {
	width:100%;
}

img.newsImageHalf {
	width:50%;
}

img.newsImage60 {
	width:60%;
}
img.newsImage80 {
	width:80%;
}

img.forestPlanImg {
	width: 100%;
	max-width: 2700px;
	padding:0px;
	margin:0px;
	margin-top: 18px; /* To make room for the fixed top-menu. */
}

.videoTourDiv {
	//max-width: 900px;
	margin: auto;
	padding:0px;
	text-align: center;
	background-color:#cccccc;
}

video {
  width: 100%;
  height: auto;
}

.howToDiv {
	//max-width: 900px;
	margin: auto;
	padding:0px;
	text-align: center;
}

.myTextBox {
	font-size: 1em;
	max-width: 700px;
	margin: auto;
	padding:20px;
	//text-align: center;
	background-color:#f1f1f1;
}

.myQuote {
	max-width: 500px;
	margin: auto;
	padding:20px;
	//text-align: center;
	background-color:#e5e5e5;
}

.myFooter {
	width:100%;
	padding: 20px;
	background-color:#000000;
	color:white;
}


.plantsContainer {
	max-width:1000px;
	background-color: #f1f1f1;
	padding:20px;
	margin: auto;
	margin-top:10px;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	font-size: 1em;
	padding:20px;
}

.flex-item-left {
	
	background-color: #f1f1f1;
	padding: 10px;
	flex: 62%;
}

.flex-item-right {
	background-color: #888888;
	padding: 10px;
	flex: 38%;
}


.flex-news-item-left {
	
	background-color: #cccccc;
	padding: 10px;
	flex: 30%;
}

.flex-news-item-right {
	background-color: #f1f1f1;
	padding: 10px;
	flex: 70%;
}

/* Footer */
.flex-footer-container {
	display: flex;
	flex-wrap: wrap;
	background-color:#000000;
	color:#f1f1f1;
	padding:0px;
}

.flex-footer-left {
	font-size: 1em;
	padding:20px;
	padding-left: 100px;
	flex: 33%;
}

.flex-footer-middle {
	font-size: 1em;
	padding: 20px;
	flex: 33%;
}

.flex-footer-right {
	font-size: 1em;
	padding: 20px;
	padding-top: 20px;
	flex: 34%;
}

.linkClass {
	color:#dddddd;
	text-decoration: none;
}

/* unvisited link */
.linkClass:link {
  color:#dddddd;
}

/* visited link */
.linkClass:visited {
  color:#dddddd;
}

/* mouse over link */
.linkClass:hover {
  color:#ffffff;
}

/* selected link */
.linkClass:active {
  color:#dddddd;
}

.adfree {
	width: 200px;
	margin-bottom: 10px;
}
/* End of Footer */

/* End of General CSS. */

/*****************************************************************/
/* Tabs Menu at the top of the screen. These are from the W3 schools examples. I added position:fixed;top:0;left:0; to .w3-bar so the tabs are fixed and do not scroll out of view. */
.w3-btn,.w3-button {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
}
.w3-bar {
	position:fixed;top:0;left:0;
	width:100%;
	overflow:hidden;
	z-index:90;
}
.w3-center .w3-bar {
	display:inline-block;
	width:auto;
}
.w3-bar .w3-bar-item {
	padding:13px 20px;
	float:left;
	width:auto;
	border:none;
	display:block;
	outline:0;
}
.w3-bar .w3-button {
	white-space:normal;
	font-size:1.2em;
}
.w3-button:hover {
	color:#000!important;
	background-color:#ccc!important;
}
.w3-black,.w3-hover-black:hover {
	color:#fff!important;
	background-color:#000!important;
}

/* There are several strategies for creating tabs.  We use this selectedTab class to show the selected tab by using in the html a copy of the tabs in each page corresponding to a tab.  This is extra coding in the html.  Another strategy is to only have one copy of the tabs in the html and instead use javascript to change the highlighted selected tab by changing the class for the tab.  W3 Schools shows an example of this.  This seems like a bit of a hack to me since they go into a class and replace part of the text in the class name to change the color:  tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); */
 
.selectedTab {
	color:#ffffff;
	background-color:#800000;
}

#myMenuTabs {
	display:inline-block;
}

#myPhoneMenuButton {
	display:none;
}

.menuImg {
	float:right;
	width:45px;
}
/* End of Tabs Menu at the top of the screen. */




/* Add a black background color to the top navigation */
.topnav {
  background-color: #000;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #800000;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
	font-size: 19px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}




/*****************************************************************/
/* Menu at the left of the News page. */
.news-button {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:left;
	cursor:pointer;
	white-space:normal;
	font-size:0.9em;
}
.news-button:hover {
	color:#ffffff!important;
	background-color:#000000!important;
}

 /* This changes the colors when clicked but only while it is the focus. We change to the class below when it is clicked to keep the selected color even ehen it loses focus. */
 /*
.news-button:focus {
	color:#ffffff!important;
	background-color:#000000!important;
}
*/
 
.selectedNewsButton {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:left;
	cursor:pointer;
	white-space:normal;
	font-size:0.9em;
	
	color:#ffffff;
	background-color:#800000;
}

/* End of Tabs Menu at the top of the screen. */



/*****************************************************************/

/*****************************************************************/
/* Tabs Menu at the top of the Plants page. These are from the W3 schools examples. I added position:fixed;top:0;left:0; to .w3-bar so the tabs are fixed and do not scroll out of view. */
.plantCategory-button {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
}

/*
.plantCategory-bar-item {
	padding:6px 16px;
	//float:left;
	width:auto;
	border:none;
	display:block;
	outline:0;
}
*/

.plantCategory-button:hover {
	color:#000!important;
	background-color:#ccc!important;
}
 
.selectedPlantCategoryTab {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	
	color:#ffffff;
	background-color:#800000;
}





.plantCategory-bar {
	position:relative;
	width:100%;
	overflow:hidden;
}

/*
.plantCategory-center .plantCategory-bar {
	display:inline-block;
	width:auto;
}
*/

.plantCategory-bar .plantCategory-bar-item {
	padding:6px 16px;
	float:left;
	width:auto;
	border:none;
	display:block;
	outline:0;
}
/*
.plantCategory-bar .plantCategory-button {
	white-space:normal;
	font-size:1.2em;
}

.plantCategory-button:hover {
	color:#000!important;
	background-color:#ccc!important;
}
*/
.plantCategory-black,.plantCategory-hover-black:hover {
	color:#fff!important;
	background-color:#000!important;
}

.searchDiv {
	margin-top:20px;
}
/* End of Tabs Menu at the top of the plants page. */


/*****************************************************************/

/*****************************************************************/
/* Tabs Menu at the top of the Food Is Free page. These are from the W3 schools examples. I added position:fixed;top:0;left:0; to .w3-bar so the tabs are fixed and do not scroll out of view. */
.foodIsFree-button {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	font-size:1.1em;
}

/*
.foodIsFree-bar-item {
	padding:6px 16px;
	//float:left;
	width:auto;
	border:none;
	display:block;
	outline:0;
}
*/

.foodIsFree-button:hover {
	color:#000!important;
	background-color:#ccc!important;
}
 
.selectedfoodIsFreeTab {
	border:none;
	display:inline-block;
	padding:6px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	font-size:1.1em;
	
	color:#ffffff;
	background-color:#800000;
}





.foodIsFree-bar {
	position:relative;
	width:100%;
	overflow:hidden;
	font-size:1.1em;
}

/*
.plantCategory-center .plantCategory-bar {
	display:inline-block;
	width:auto;
}
*/

.foodIsFree-bar .foodIsFree-bar-item {
	padding:6px 16px;
	float:left;
	width:auto;
	border:none;
	display:block;
	outline:0;
	font-size:1.1em;
}
/*
.plantCategory-bar .plantCategory-button {
	white-space:normal;
	font-size:1.2em;
}

.plantCategory-button:hover {
	color:#000!important;
	background-color:#ccc!important;
}
*/
.foodIsFree-black,.foodIsFree-hover-black:hover {
	color:#fff!important;
	background-color:#000!important;
}


/* End of Tabs Menu at the top of the Food is Free page. */

/*****************************************************************/

/*****************************************************************/  

.fifHeading {
	background: #fff204;
	padding:10px;
	margin: 0px;
	border: 3px solid black;
}

.signClass {
	background-color: rgb(255, 255, 255);
	border: 4px solid black;
}


/*****************************************************************/

/*****************************************************************/ 
/* Contact Page CSS. */

.row {
	
}

.onedivcontact{
	margin: auto;
	width: 100%;
	text-align: center;
	height:1200px;
	padding:15px;
	//background:#73C2FB; /* Light Blue */
	background-color: rgb(14, 184, 74);
}

div.contactDiv {
	max-width: 1400px;
	margin: auto;
	//text-align: center;
	display: block;
}

.contactForm {
	margin:30px;
}

.codeBox {
	padding:2px;
	border:1px solid #CCCCCC;
	width:70px;
	height:18px;
	font-size:1.2em;
}

.submitButton {
	border: 2px solid black;
	border-radius: 4px;
	font-size:1.2em;
}

.textareaMessage {
	width:100%;
	max-width: 500px;
	height: 75px;
}
/* End of Contact Page CSS. */

.myLinks {
	width:100%;
	margin:20px;
}

/* Plants page */
/*****************************************************************/
/*****************************************************************/

		.centered {
			text-align: center;
		}
		
		span.centered { 
			display: flex; 
   			justify-content: center
		}
		
		.plantTitle {
			margin-bottom:20px;
		}
		
		.myfloatRight {
			font-size: 0.7em;
			color: black;
			float: right;
			border-radius: 0px;
			padding-bottom: 5px;
		}
		button.myButton {
			color: black;
			float: right;
			border-radius: 0px;
			width: 80px;
			height: 25px;
			background-color: #FFFFFF;

		}
		button.myButton:hover {
			color: black;
			background-color: #FFFFFF;
		}
		img.plant {
		  	border: 1px solid #ddd; /* Gray border */
		  	border-radius: 4px;  /* Rounded border */
		  	padding: 5px; /* Some padding */
			width:100%;
		  	max-width:400px; /* Set a small width */
		}

		/* Add a hover effect (blue shadow) */
		img.plant:hover {
		  	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
		}
		
		img.plantFullsize {
		  	padding: 5px; /* Some padding */
		  	width: 684px; /* Set width */
			margin: auto;
		}
		
		.thumbnailGrid {
			display: grid;
			grid-template-columns: 50% 50%;
			//grid-template-columns: 320px 320px;
			//grid-template-rows: 55px 60px 60px 65px;    
		}

		.thumbnailGrid-item {
			padding: 0px;
			margin:auto;
			align-items: center;
			justify-items: center;
			font-weight:bold;
		}
		
		#plantDetails {
			width:100%;
			max-width: 700px;
			background-color: rgb(255, 255, 255);
			overflow: auto;
			z-index: 998;
			border: 4px solid black;
			margin: auto;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		.infoGrid {
			display: grid;
			grid-template-columns: 360px 240px;
		}

		.infoGrid-itemLeft {
			padding-left: 180px;
			font-weight:bold;
		}
		.infoGrid-itemRight {
			//padding: 0px;
			font-weight:normal;
		}

		.plantCategoryChoice {
			font-weight:bold;
			font-size: 1em;
			margin-left: 5px;
		}

/* End of Plants page */
/*****************************************************************/
/*****************************************************************/
		.dateText {
			font-size: 0.7em;
		}
		
		.newsPostH2 {
			margin-left:30px;
		}
/*****************************************************************/
/*****************************************************************/
/* Small screen media. */
@media only screen and (max-width: 1180px) { /* 1180 is the landscape width of an Ipad air. */
	body {
		max-width:100vw;
	}
	
	div.masthead {
		padding:0px;
		margin:0px;
		/* margin-top:-4px; */ /* I don't know why, but the masthead is dropped down 4 px when @media 1180 takes effect so we move it back up.  */
		/* The above problem is fixed by adding position:relative; to both mastheadImg and  w3-bar below (this puts the content into the center and seems to gelete the extra height).  Both had extra space in the container div.  */
	}
	
	img.mastheadImg { /* Was width: 100% and max-width: 1200px; */
		vertical-align: middle; /*  Images in divs add 4 pixels at the top and bottom.  This eliminates the 4 extra pixels.  */
		padding:0px;
		margin:0px;		
	}
	
	img.newsImageHalf {
		width:100%;
	}
	img.newsImage60 {
		width:100%;
	}
	img.newsImage80 {
		width:100%;
	}
		
	.w3-bar {
		position:relative; /* Unfix the top menu so we save space on small devices. */
		vertical-align: middle; /*  Images in divs add 4 pixels at the top and bottom.  This eliminates the 4 extra pixels.  It seems this happens for buttons in divs too.  */
		width:100%;
		max-width:100vw;
		overflow:hidden;
		margin:0px;
	}
	
	.w3-bar .w3-bar-item { /* Top and bottom padding changes from 13px to 3px to save space on small devices. */
		padding:3px 20px;
	}
	
	.textareaMessage { /* Make the textarea for the Contact message have less width. */
		//width: 300px;
	}
	
	

}

@media only screen and (max-width: 700px) {	
	p {
		margin: 5px;
	}
	figure {
	    //border: 1px solid red;
		margin:0px;
		margin-top:15px;
	}
		
	.w3-bar .w3-bar-item { /* Remove float:left and width:auto so that the menu shows vertically on very small devices. */
		padding:3px 20px;
		/* float:left; */
		/* width:auto; */
		width:100%;
		text-align: left;
		border:none;
		display:block;
		outline:0;
	}
	
	.plantCategory-bar .plantCategory-bar-item { /* Remove float:left and width:auto so that the menu shows vertically on very small devices. */
		padding:3px 20px;
		/* float:left; */
		/* width:auto; */
		width:100%;
		text-align: left;
		border:none;
		display:block;
		outline:0;
		font-size:1.2em;
	}
	
	.foodIsFree-bar .foodIsFree-bar-item { /* Remove float:left and width:auto so that the menu shows vertically on very small devices. */
			padding:3px 20px;
			/* float:left; */
			/* width:auto; */
			width:100%;
			text-align: left;
			border:none;
			display:block;
			outline:0;
			font-size:1.2em;
		}
	
	.flex-item-right, .flex-item-left {
	    flex: 100%;
	}
	
	.flex-news-item-left {
	    flex: 100%;
		height:214px;
		overflow-y:scroll;
	}

	.flex-news-item-right {
	    flex: 100%;
	}
	
	.myTextBox {
		padding:5px;
	}

	.myQuote {
		padding:5px;
	}
	
	.myLinks {
		margin:5px;
	}
	
	.thumbnailGrid {
		display: grid;
		grid-template-columns: 100%;
	}
	
	#myMenuTabs {
		display:none;
	}

	#myPhoneMenuButton {
		display:inline-block;
	}
	
	img.plant {
	  	padding: 0px; /* Some padding */
		width:100%;
	  	max-width:300px; /* Set a small width */
	}
	
	.infoGrid {
		grid-template-columns: 135px 130px;
	}
	.infoGrid-itemLeft {
		padding-left: 10px;
	}
	
	#plantDetails {
		width:100%;
		max-width: 700px;
		background-color: rgb(255, 255, 255);
		overflow: auto;
		z-index: 998;
		border: 4px solid black;
		margin: auto;
		padding-left: 4px;
		padding-right: 4px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
}

@media only screen and (max-width: 600px) {				
	.flex-container { /* Get rid of padding margins on the edge of the pages for phones.  */
		padding:0px;
	}
	
	
	
}