@charset "utf-8";

    /* These styles apply to the whole document in all views.*/

body {
    font-size: 100%;
	padding: 0;
	margin: 0;
}
.screen-reader-text { 
   border:0;   
   clip: rect(1px, 1px, 1px, 1px); 
   clip-path: inset(50%);
   height: 1px; 
   margin: -1px;
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
   word-wrap:normal !important;
}

img {
  width: 100%;
  max-width: 835;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

.imageCenter {
  width: 100%;
  max-width: 835;
  /* just in case, to force correct aspect ratio */
  
  height: auto !important;
	float: none;

}

.figcaption {
	font-size: 0.75em;
	text-align: center;
}

.figcaptionCenter {
	font-size: 0.75em;
	text-align: left;
}
.figureRight {
	float: right;
	width: 40%;
	height: auto;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.figcaptionRight {
	font-size: 0.75em;
	text-align: left;
}


	.figureLeft {
	float: left;
	width: 40%;
	height: auto;
	margin-left: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-top: 10px;
	position: relative;
	z-index: 10;
	background-color: #ffffff
}


.figcaptionleft {
	font-size: 0.75em;
	text-align: left;
}

.imageRight {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #000000;
}

.imageCenter {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #000000;
}
.imageLeft {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #000000;
}
.sectionRight a {
	font-size: 1em;
	color: #000000;
	text-decoration: underline;
}
.sectionRight a:visited {
    color: #000000
	}
ul .rightSectionLeftImageListIndent {position: relative;
	left: 1em;
	padding-bottom: 0.75em;
	padding-right: 1em;}
.toneboxLeft {float: left;
	width: 40%;
	height: auto;
	background-color: #F5F5F5;
	border: 1px solid black;
	font-size: 1em;
	text-indent: 10px;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 4px;
	line-height: .75em;
	margin-right: 10px;}
.toneboxRight {float: right;
	width: 40%;
	height: auto;
	background-color: #F5F5F5;
	border: 1px solid black;
	font-size: 1em;
	text-indent: 10px;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 4px;
	line-height: .75em;
	margin-left: 10px;}
.toneboxtextleft {font-size: .82em;
	text-align: center;
	line-height: 1.2em;
	padding-right: 10px}
.toneboxtextFootnote {font-size: .75em;
	text-align: left;
	line-height: .75em;
	padding-left: 0px;
	margin-left: 0px;
	}

.toneboxList {font-size: 0.75em;
	padding-bottom: 0em;
	padding-left: 10px;
	text-indent: 7px;
	list-style-position: inside;
	list-style-type: disc;}
.toneboxCenter {	
	margin: auto;
	width: 80%;
	height: auto;
	background-color: #Ffffff;
	border: 1;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	-webkit-column-gap: 10%; /* Chrome, Safari, Opera */
    -moz-column-gap: 10%; /* Firefox */
    column-gap: 10%;
	column-fill: balance|auto|initial|inherit;}
.toneboxCenter ul li {
line-height: 1em;
margin-top: 1em;
margin-bottom: -1em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin-left: 0
}
.toneboxCenter ul {
line-height: 1em;
margin: -1em;
}
.tableofcontents {	
	margin-top: 1em;
	padding-top: .5em;
	width: 100%;
	height: auto;
	background-color: #f5f5f5;
	border: 1px solid black;
	font-size: .75em;
    font-weight: bold;
	text-align: center;
	padding-bottom: .5em;
	border-radius:6px;
	}
.sectionRight h2 a {
	font-size: 1em;
	
}
.GradientLine {
    border: 0;
    height: 1px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);

	}

button.accordion {
	background-color: #e8e8e8;
    cursor: pointer;
    padding-bottom: .5em;
	padding-top: .5em;
    width: 100%;
    text-align: left;
    border: none;
    font-size: 1em;
    transition: 0.4s;
	font-family: "Times New Roman", Times, serif;
	box-sizing: border-box;
	padding-left: 2%;
		outline: none;

}
button.accordionSecond {
	background-color: #e8e8e8;
    cursor: pointer;
    padding-bottom: .5em;
	padding-top: .5em;
    width: 100%;
    text-align: left;
    border: none;
    font-size: 1em;
    transition: 0.4s;
	box-sizing: border-box;
	padding-left: 5%;
	font-family: "Times New Roman", Times, serif;
		outline: none;
}

button.accordion.active, button.accordion:hover {
    background-color: #e2e2e2;
}
button.accordionSecond.active, button.accordionSecond:hover {
    background-color: #e2e2e2;
}

button.accordion:after {

	content: '\002B';
    color: #000000;
    font-weight: bold;
    float: right;
    margin-right: 19%;
	border: none;
	box-sizing: border-box;
}
button.accordionSecond:after {

	content: '\002B';
    color: #000000;
    font-weight: bold;
    float: right;
    margin-right: 20%;
	border: none;
	box-sizing: border-box;
}
button.accordion.active:after, button.accordionSecond.active:after {
    content: "\2212";
	border: none;
}

div.panel {
	margin-top: .5em;
	width: 100%;
    background-color: #ffffff;
	color: #000000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-family: "Times New Roman", Times, serif;
}
div.panel.notransition {
  transition: none !important;
}
div.panel ul li {
	color: #000000;
    font-family: "Times New Roman", Times, serif;
	padding-right: 4px;
	line-height: 1.5em;
	}
div.panel ul li a {
	color: #000000;
    font-family: "Times New Roman", Times, serif;
	padding-right: 4px;
	line-height: 1.5em;
	}


div.noexpandFirst {
	background-color: #e8e8e8;
    padding-bottom: .5em;
	padding-top: .5em;
	padding-left: 2%;
	margin-top: 0px;
	margin-bottom: .5em;
	margin-right: 0px;
	margin-left: 0px;
    width: 100%;
    text-align: left;
    border: none;
    font-size: 1em;
    font-family: "Times New Roman", Times, serif;
	box-sizing: border-box;

}

div.noexpandSecond {
	background-color: #e8e8e8;
	padding-left: 5%;
    padding-bottom: .5em;
	padding-top: .5em;
	margin-top: 0px;
	margin-bottom: .5em;
	margin-right: 0px;
	margin-left: 0px;
    width: 100%;
    text-align: left;
    border: none;
    font-size: 1em;
    font-family: "Times New Roman", Times, serif;
	box-sizing: border-box;
}
div.noexpandFirst ul li a {
	color: #000000;
	font-size: 1em;
    font-family: "Times New Roman", Times, serif;
	}
div.noexpandFirst h2 a {
	color: #000000;
	font-size: 1em;
	}
div.noexpandFirst a {
	color: #000000;
	font-size: 1em;
	}
div.noexpandSecond ul li a {
	color: #000000;
	font-size: 1em;
	margin-left: 1em;
	}
div.noexpandSecond h2 a {
	color: #000000;
	font-size: 1em;
	}
div.noexpandSecond a {
	color: #000000;
	font-size: 1em;
	}
		/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #000;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 4px;
	font-size: 14px; 

    /* Position the tooltip text */
    position: absolute;
    z-index: 100;
    bottom: 100%;
    left: 50%; 
    margin-left: -100px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip img {
  float:left;
  margin:0px 8px 8px 0;
  width: 200px;
	border-radius: 4px;
}
    /* These styles set up the structure of the mobile document and define the styles in each part of the document */
	
body { 
	width: 100%; 
	height: 100%; 
	padding: 0;
	margin: 0;
}


.container {
  width: 100%;
  margin: 0 auto;
}

    /* These styles set up and style the header. */

header {
	width: 100%;
	font-style: normal;
	font-weight: bold;
	font-size: large;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	min-height: 250px;
	height: 19.479%;
	background-image: url(images/Hooded-Merganser-and-Ducklings-25-June-2015-smaller.jpg);
	margin: 0 auto;
	position: relative;
}

body header h1 {
	
    text-shadow: 1px 1px 33px white, 0 0 65px white, 0 0 55px white;
	text-align: center;
	font-size: 2em;
	background-image: -webkit-linear-gradient(90deg,rgba(223,223,223,0.04) 0%,rgba(248,248,248,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(223,223,223,0.04) 0%,rgba(248,248,248,1.00) 100%);
}


.Name {
	font-size: 1.2em;
}

.ForeverWild {
	font-size: 1.5em;
}

.logo {
	width: 100%;
	height: auto;
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 320px;
	min-width: 220px;
	background-image: none, -webkit-linear-gradient(91deg,rgba(255,255,255,0.00) 0%,rgba(251,251,251,0.37) 100%,rgba(253,253,253,0.72) 100%,rgba(247,245,245,0.32) 100%);
	background-image: none, linear-gradient(359deg,rgba(255,255,255,0.00) 0%,rgba(251,251,251,0.37) 100%,rgba(253,253,253,0.72) 100%,rgba(247,245,245,0.32) 100%)
}

.LogoHolder {
	width: 100%;
	margin: 0 auto;
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 2.07%,rgba(255,253,253,0.32) 26.94%,rgba(255,251,251,0.66) 50.79%,rgba(255,255,255,1.00) 99.48%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 2.07%,rgba(255,253,253,0.32) 26.94%,rgba(255,251,251,0.66) 50.79%,rgba(255,255,255,1.00) 99.48%);
	padding-bottom: 20px;
}

body header h3 {
	font-size: large;
	text-align: center;
	top: 0px;
	bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

    /* These styles set up and style the navigation bar. */

nav {
	width: 100%;
	text-align: center;
	background-color: #FFFFFF;
	opacity: 0.7;
    position: absolute;
    bottom: 0;
	margin: 0 auto;
}

header nav a {
	color: #000000;
	text-decoration: none;	
}	
header nav a:hover {
    color: #FFFFFF;
	background-color: #000000;
	-webkit-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
	transition: background-color .1s ease-in-out;

}


    /* These styles set up and style the main section, between the header and the footer. */
.Main {
	width: 100%;
}

    /* These styles set up and style the aside, which will appear below the main article in the mobile version and to the left of the main article in the desktop version. */

.asideLeft {
	float: right;
    background: #f5f5f5;
	width: 100%;

}
.asideLeft h2 {
	font-size: 1.5em;
	text-align: left;

}
.asideLeft h6 {
	font-size: .02em;
	color: #f5f5f5;
	line-height: .02em;
	margin-top: 1em;
    margin-bottom: 1em;

}
aside ul li {
	font-weight: bold;
}

.asideLeft .searchSection {
	margin: auto;
	padding-top: 10%;
	min-height: 50px;
	padding-left: 20%;
}

aside ul li a {
	color: #000000;

}

aside h2 a {
	color: #000000;
	text-decoration: none;	
}	
aside h2 a:hover {
    color: #FFFFFF;
	background-color: #000000;
	-webkit-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
	transition: background-color .1s ease-in-out;

}

    /* These styles set up and style the meat of the page. It appears right after the header on the mobile version and to the left of the aside on the desktop version.*/
	
.sectionRight {
	width: 98%;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	text-align: left;
	font-size: 1.2em;
}
.sectionRight h1 {
	font-size: 1.4em;
	text-align: center;
}

.sectionRight h1 a {
	font-size: 1em;
	text-align: center;
	color: #000000;
}

.sectionRight h2 {
	font-size: 1.1em;
	
}

.sectionRight h2 a {
	font-size: 1.1em;
	
}
.sectionRight h3 {
	font-size: 1em;
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	display: inline
}

.sectionRight h4 {
	text-align: center;
	font-size: 1.1em;
}
.sectionRight li {
	font-size: 1em;
	padding-bottom: 0.75em;
	padding-left: 0px;
	text-indent: 0px;
	list-style-position: outside;
	
}

.sectionRight figure .imageCenter {
	border-radius: 8px;
	width: 100%;
	height: auto;
}

.sectionRightList {
	padding-bottom: 0.75em;
	padding-left: 0px;
	text-indent: 0px;
	list-style-position: outside;
}

.sectionRightListLeftImage {
	padding-bottom: 0.75em;
	padding-left: 0px;
	text-indent: 10px;
	list-style-position: outside;
}
.sectionRight ul .rightSectionLeftImageList {
	position: relative;
	left: 1em;
	padding-bottom: 0.75em;
	padding-right: 1em;
}

    /* These styles set up and style the footer for the mobile version..  */
	
footer {
	width: 100%;
	background-color: rgba(0,0,0,1.00);
	float: left;
	margin: 0 auto;

}
footerNester {
	width: 100%;

}
footer section {
	width: 100%;
	font-size: 1.5em;
	color: rgba(255,255,255,1.00);
	float: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-align: left;
}


.BelowFooter {
	width: 100%;
	float: left;
	margin-left: 0%;
	margin-right: 0%;
	text-align: center;
	font-size: .75em;
	margin-top: 3px;
	margin-bottom: 3px;
}
footer h3 a {
	color: #FFFFFF;
	text-decoration: none;	
}	
footer h3 a:hover {
    color: #000000;
	background-color: #ffffff;
	-webkit-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
	transition: background-color .1s ease-in-out;

}
footer a {
	color: #FFFFFF;
}

.BelowFooter h6 {
	color: #000000;
	font-size: 1em;
	margin-top: .5em;
    margin-bottom: .5em;
}






    /* These styles set up and style the media queries for desktop and tablet versions.  */
	
@media (min-width: 551px) and (max-width: 800px){
	
		/* These style determine how the tablet version will look.  */
		
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.container {
	width: 100%;
	margin: 0 auto;
}
header {
	width: 100%;
	height: 19.479%;
	color: #000000;
	font-style: normal;
	font-weight: bold;
	font-size: large;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 0%;
	min-height: 200px;
	background-image: url(images/Hooded-Merganser-and-Ducklings-25-June-2015-21.jpg);
	margin: 0 auto;
}
nav {
	width: 100%;
	text-align: center;
	background-color: #FFFFFF;
	opacity: 0.7;
    position: absolute;
    bottom: 0;
	margin: 0 auto;
}

footer {
	width: 100%;
	background-color: rgba(0,0,0,1.00);
	float: left;
	margin: 0 auto;
}


footer section {
	width: 95%;
	font-size: 1.5em;
	color: rgba(255,255,255,1.00);
	float: left;

}
.asideLeft {
	float: right;
background: #f5f5f5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(245,245,244,1.00),rgba(245,245,245,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Fx 3.6-15*/
background: linear-gradient(rgba(245,245,245,1.00), rgba(245,245,245,0)); /*Standard*/ 
	width: 95%;
	font-size: 1.5em;
	margin-right: 0px;

}

.asideLeft h2 {
	font-size: 1.3em;
	text-align: left;
	top: 0px;
	bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.sectionRight {
	width: 98%;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	text-align: left;
	font-size: 1.2em;
}
}


@media (min-width: 801px){

	/* These style determine how the page will look on a desktop with a viewing window from 801 to 1200 pixels wide.  */
		
.container {
  width: 100%;
  margin: 0 auto;

}
.asideLeft {
	float: left;
background: #f5f5f5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(245,245,244,1.00),rgba(245,245,245,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Fx 3.6-15*/
background: linear-gradient(rgba(245,245,245,1.00), rgba(245,245,245,0)); /*Standard*/ 
	margin-left: 5%;
	width: 25%;
	margin-right: 0px;
	font-size: 1em;
}

.sectionRight {
	width: 63%;
	float: right;
	margin-left: 2%;
	text-align: left;
	font-size: 1.2em;
	margin-right: 5%;
}

footer {
	width: 100%;
	background-color: rgba(0,0,0,1.00);
	float: left;
	margin: 0 auto;
	margin-bottom: 10px;
}
footerNester {
	width: 100%;

}
footer section {
	width: 16.66667%;
	font-size: 1em;
	color: rgba(255,255,255,1.00);
	float: left;
	text-align: left;
	box-sizing: border-box;
	padding:10px;
}

footer section h3 {
	font-size: 1.2em;
	text-align: center;
}
}

@media (min-width: 1200px){

	/* These style determine how the page will look on a desktop with a viewing window from 1200 to 1400 pixels wide.  */
		
.container {
  width: 100%;
  margin: 0 auto;

}
.Main {
	width: 80%;
}
.asideLeft {
	float: left;
background: #f5f5f5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(245,245,244,1.00),rgba(245,245,245,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Fx 3.6-15*/
background: linear-gradient(rgba(245,245,245,1.00), rgba(245,245,245,0)); /*Standard*/ 
	margin-left: 10%;
	width: 25%;
	margin-right: 0px;
	font-size: 1em;
}

.sectionRight {
	width: 53%;
	float: right;
	margin-left: 2%;
	text-align: left;
	font-size: 1.2em;
	margin-right: 10%;
}
footer {
	width: 100%;
	background-color: rgba(0,0,0,1.00);
	float: left;
	margin: 0 auto;
	margin-bottom: 10px;
}
footerNester {
	width: 100%;

}
footer section {
	width: 16.66667%;
	font-size: 1em;
	color: rgba(255,255,255,1.00);
	float: left;
	text-align: left;
	box-sizing: border-box;
	padding:10px;
}

footer section h3 {
	font-size: 1.2em;
	text-align: center;
}
}
@media (min-width: 1400px){

	/* These style determine how the page will look on a desktop with a viewing window larger than 1400 pixels wide.  */
		
.container {
  width: 100%;
  margin: 0 auto;

}
.Main {
	width: 80%;
}
.asideLeft {
	float: left;
background: #f5f5f5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(245,245,244,1.00),rgba(245,245,245,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(245,245,245,1.00),rgba(245,245,245,0)); /*Fx 3.6-15*/
background: linear-gradient(rgba(245,245,245,1.00), rgba(245,245,245,0)); /*Standard*/ 
	margin-left: 12.5%;
	width: 25%;
	margin-right: 0px;
	font-size: 1em;
}

.sectionRight {
	width: 47%;
	float: right;
	margin-left: 2%;
	text-align: left;
	font-size: 1.2em;
	margin-right: 12.5%;
}
footer {
	width: 100%;
	background-color: rgba(0,0,0,1.00);
	float: left;
	margin: 0 auto;
	margin-bottom: 10px;
}
footerNester {
	width: 100%;

}
footer section {
	width: 16.66667%;
	font-size: 1em;
	color: rgba(255,255,255,1.00);
	float: left;
	text-align: left;
	box-sizing: border-box;
	padding:10px;
}

footer section h3 {
	font-size: 1.2em;
	text-align: center;
}


}