html, body, p, a {
  margin:0;
  padding:0;
  border:0;
  font-family:Helvetica, Arial, sans-serif;
  text-align:center;
  color:white;
}
html {
  font-size:calc(15px + 0.390625vw);
  background-color:black; /* keep in sync with section1 background color */
  display:block;
}
header {
	justify-content:left;
  text-align:left;
  align-items:left;
  align-self:left;
}
p {
  margin-top:6pt;
}
.narrative {
  text-align:left;
  margin-top:.6rem;
}
.narrative2 {
  text-align:left;
  margin-top:.6rem;
}
.narrative3 {
  text-align:center;
  margin-top:.6rem;
}
/*-------------------------------------------*/
@media (orientation: portrait){
  .narrative2, .narrative3 {
    margin-left:1rem;
    margin-right:1rem;
  }
}
/*-------------------------------------------*/
@media (orientation: landscape){
  .narrative2, .narrative3 {
    margin-left:15%;
    margin-right:15%;
  }
}
#slide_details p {
  margin-bottom:10px;
}
#slide_details p {
  padding-top:0;
  margin-top:0;
}
h1 {
  margin:0;
  padding-top:6px;
  font-size:1.25rem;
  font-weight:bold;
}
h2 {
  margin:0;
  padding-top:6px;
  font-size:1.25rem;
  font-weight:bold;
}
#welcome {
  font-size:1.35rem;
  /* color:rgb(5, 90, 5);
  text-shadow: 1px 1px 2px white; */
}
.photo_grid_section_header {
  flex-basis:100%;
  background-color:olive;
  font-size:1.25rem;
  margin-top:16px;
  margin-bottom:6px;
}
.deemphasized {
  font-size:.75rem;
}
/*-------------------------------------------*/
.section1, .section2 {
  padding: .2rem 10px;
  margin:0;
  text-align:center;
}
.section0 {
  background-color:olive;
  margin-top:5.5px;
  padding-bottom:8px;
}
.section1 {
  background-color:black;
}
.section2 {
  background-color:rgb(78, 77, 77);
}
.section1_separation {
  margin-top:10px;
  border-top: 2px solid white;
}
.section1_separation_short {
  margin-top:1rem;
  margin-bottom:.5rem;
  border-top: 2px solid white;
  margin-left:25%;
  width:50%;
}
.section2_separation {
  margin-top:10px;
  border-top: 2px solid lightgray;
}
#contact_info_section {
 background-color:olive;
 color:white;
 font-size:.75rem;
 padding:5px;
}
#contact_info_section img {
  margin-top:6px;
  margin-bottom:6px;
  height:2rem;
  outline:3px solid white;
}
.featured_section {
  display:inline-block;
  line-height:150%;
  border: 4px solid orange;
  background-color:rgb(248, 197, 138);
  color:black;
  margin-top:8px;
  margin-bottom:8px;
  padding-top:12px;
  padding-bottom:12px;
  max-width:98%;
  overflow:hidden;
}
.gallery_choices {
  margin-right:20px;
  margin-left:20px;
  line-height:200%;
}

.gallery_title_section {
  display:inline-block;
  max-width: 1140px;
  width:90%;
  line-height:150%;
  font-size:1em;
  border: 4px solid orange;
  background-color:rgb(248, 197, 138);
  color:black;
  margin:24px;
  padding-top:.75rem;
  padding-bottom:1rem;
  text-align:center;
}


/* --------------------------------------------------------------------------------------- */
.gallery_narrative_container {
  display:inline-block;
  max-width: 1140px;
  margin-bottom:1rem;
}
.gallery_narrative_container p {
  margin-top:.75rem;
  text-align:left;
  padding-left:1rem;
  padding-right:1rem;
}

.gallery, .gallery_always_3_columns {
  background-color:black;
  display:inline-block;
  max-width: 1140px;
  margin-right:10px;
  margin-left:10px;
  column-gap:0;
}
.gallery img, .gallery_always_3_columns img {
  width:100%;
  height:auto;
}
.gallery figure, .gallery_always_3_columns figure {
  margin: 0px;
  padding: 10px;
  margin-bottom:15px;
  break-inside: avoid;
}
/*-------------------------------------------*/
@media (orientation: portrait){
  .gallery {
    column-count:1;
  }
  .gallery_always_3_columns {
    column-count:3;
  }
}
/*-------------------------------------------*/
@media (orientation: landscape){
  .gallery {
    column-count:3;
    width:95%;
  }
  .gallery_always_3_columns {
    column-count:3;
    width:70%;
  }
}
/* --------------------------------------------------------------------------------------- */
/* banner with logo and image at top of site */
/* --------------------------------------------------------------------------------------- */
nav{
  background-color:rgb(191, 199, 150);
}
.banner {
	display:inline-flex;
	flex-wrap:nowrap;
  margin-top:6px;
}
/*-------------------------------------------*/
@media (orientation: portrait){
  #logo_container img {
    height:4rem;
    padding-left:12px;
    padding-right:12px;
  }
  #banner_photo_container {
    height:4rem;
    width:70vw;
    overflow: hidden;
  }
  #banner_photo_container img {
    height:4rem;
  }
  #dropdown_menu {
    display:block;
  }
  #menu_bar {
    display:none;
  }
}
/*-------------------------------------------*/
@media (orientation: landscape){
  #logo_container img {
    height:6rem;
    padding-left:12px;
    padding-right:12px;
  }
  #banner_photo_container {
    height:6rem;
    width:70vw;
    overflow: hidden;
  }
  #banner_photo_container img {
    height:6rem;
  }
  #dropdown_menu {
    display:none;
  }
  #menu_bar {
    display:flex;
  }
}
/* --------------------------------------------------------------------------------------- */
/* split section (using 2 columms for right/left halves): */
/* --------------------------------------------------------------------------------------- */
.main_layout {
	display:flex;
  align-items:stretch;
}
/*-------------------------------------------*/
@media (orientation: portrait){
  .main_layout {
    flex-wrap:wrap;
  }
  .column_wider {
    width:100%;
  }
  .column_narrow {
    width:100%;
  }
  .column_separation {
    margin-top:12px;
    margin-bottom:12px;
    border-top: 2px solid white;
  }
}
/*-------------------------------------------*/
@media (orientation: landscape){
  .main_layout {
    flex-wrap:nowrap;
  }
  .column_wider {
    padding-bottom:12px;
    width:60%;
    border-right:1px solid white;
    margin-right:.75em;
  }
  .column_narrow {
    width:40%;
  }
  .column_separation {
    display:none;
  }
}
/* --------------------------------------------------------------------------------------- */
/* story with floating photos: */
/* --------------------------------------------------------------------------------------- */
.story_with_photo {
  margin-top:6px;
}
.floated_right {
  float:right;
  margin-left:8px;
}
.floated_left {
  float:left;
  margin-right:8px;
}
.floated_right img, .floated_left img  {
  margin-top:6px;
  max-width:10rem;
}
/* --------------------------------------------------------------------------------------- */
/* navigational menu option #1: menu bar (landscape orientation) */
/* --------------------------------------------------------------------------------------- */
nav ul {
  display:flex;
  flex-wrap:wrap;
  /* justify-content:center; */
  list-style:none;
  padding:0;
  margin:0;
}
nav li {
  padding-right:8px;
  padding-left:8px;
  background-color:rgb(191, 199, 150);
  color:black;
}
nav li:not(:last-child) {
  border-right:2px solid lightgray;
  }
li img {
  height:1rem;
  padding-top:.4rem;
}
.large_menu_image {
  height:2rem;
}
nav li:hover, .inline_menu_image_link:hover {
  cursor:pointer;
}
@media (hover:hover) {
  li:hover {
    background-color:rgb(218, 224, 101);
  }
}
.selected_menu_item { 
  background-color:white;
  font-weight:bold;
}
.dropdown_selected_menu_item { 
  background-color:darkgray;
  color:white;
  font-weight:bold;
}
/* --------------------------------------------------------------------------------------- */
/* navigational menu option #2: dropdown menu (portrait orientation) */
/* --------------------------------------------------------------------------------------- */
.dropdown {
  position:static;
  display:inline-block;
  text-align:left;
}
#dropdown_menu_button {
  margin:6px;
  padding:6px;
  white-space:nowrap;
}
#dropdown_content {
  display:none;
  position:absolute;
  color:black;
  background-color:white;
  min-width:160px;
  z-index:1;
}
#dropdown_menu_button:hover {
  outline: 1px solid white;
}
#dropdown_content div {
  display: block;
  text-align:left;
  padding:6px;
  padding-left:12px;
}
#dropdown_content div:hover {
  background-color:rgb(218, 224, 101);
}



/* --------------------------------------------------------------------------------------- */
.small_menu_image {
  height:1rem;
  vertical-align:text-top;
}
.instruction_inline_menu_image_link {
  height:1rem;
  vertical-align:text-top;
  /* filter:invert(100%); */
  background-color:rgb(191, 199, 150);
}
.small_img_within_text {
  height:1rem;
  vertical-align:text-top;
}
/* --------------------------------------------------------------------------------------- */
.instructions p, .instructions a{
  color:rgb(191, 199, 150);
}
.instructions {
  margin-left:4px;
  margin-right:4px;
}
/* --------------------------------------------------------------------------------------- */
button {
  font-size:1rem;
  padding:2px 16px;
  margin-top:8px;
  margin-right:4px;
  border-radius:4px;
  background-color:rgb(138, 150, 78);
  box-shadow:2px 2px 5px gray;
  color:white;
  border:none;
}
button img {
  width :1rem;
  vertical-align:text-top;
  padding-top:2px;
}
button:hover {
  cursor:pointer;
}
button:disabled {
  pointer-events:none;
  opacity:40%;
}
button:disabled img {
  opacity:20%;
}
.padded_button {
  padding-left:24px;
  padding-right:24px;
  margin-bottom:6px;
}
.featured_section button {
  background-color:rgb(238, 154, 58);
  box-shadow:2px 2px 5px rgb(175, 105, 25);
  padding-left:12px;
  padding-right:12px;
}
/* --------------------------------------------------------------------------------------- */
#page_control_top { /* debug - why different from #species_page_control? */
 display:flex;
 justify-content:center;
}
#page_control_top button { /* debug - why different from #species_page_control? */
  margin-right:8px;
 }
 #button_previous_species, #button_next_species {
  background-color:rgb(168, 197, 21);
  margin-top:8px;
}
.species_label {
  font-size:1.25rem;
  font-weight:bold;
}
#species_header {
  font-size:1.25rem;
  margin-top:8px;
}
/* --------------------------------------------------------------------------------------- */
/* search criteria: */
/* --------------------------------------------------------------------------------------- */
.search_criteria_item {
  width:100%;
  text-align:left;
  padding-left: 8px;
  padding-right: 8px;
  font-size:.9rem;
}
#search_species_group_fields {
  line-height:125%;  /* looks better on phone when wraps */
}
.search_criteria_buttons {
  text-align: center;
  padding-top: 6px;
}
input, select, select option {
  font-size:.9rem;
}
.search_criteria_item select {
  padding-left:2px;
  padding-right:0px;
}
#search_criteria_section select option {
  font-size:.6rem !important;
}
#search_criteria_section select {
  font-size: .6rem;
  width:fit-content;
  height:1.2rem;
}
input[type="radio"]+label {
  margin-right:4px;
}
.search_field_label {
  font-weight:bold;
}
.value_label {
  font-weight:bold;
}
select {
  padding-left:8px;
  padding-right:8px;
}
/* --------------------------------------------------------------------------------------- */
/* photo grid: */
/* --------------------------------------------------------------------------------------- */
.photo_grid_container, .photo_grid_container_reduced {
	display:flex;
	flex-wrap:wrap;
  font-size:.7rem;
  align-items:stretch;
  justify-content:center;
  vertical-align: top;
  margin-top:6px;
}
.photo_grid_container div, .photo_grid_container_reduced div {
	padding:5px;
}
.photo_grid_container img, .photo_grid_container_reduced img {
  width:100%;
}

.grid_img_parent {
  position: relative;
  top: 0;
  left: 0;
}
.best_grid_image { /* used when displaying single species grid */
  position: relative;
  top: 0;
  left: 0;
}
.best_img_flag {
  height:auto;
  max-width:8%;
  position: absolute;
  top: 4px;
  left: 4px;
  object-position:right bottom;
}

.linked_species_name {
  text-decoration:underline;
  font-stretch:condensed;
}
.unlinked_species_name {
  font-stretch:condensed;
}
.photo_details {
  font-stretch:condensed;
}
/*-------------------------------------------*/
@media (orientation: portrait){
  .photo_grid_container div {
    width:42vw;
  }
  .photo_grid_container_reduced div {
    width:100px;
  }
}
/*-------------------------------------------*/
@media (orientation: landscape){
  .photo_grid_container div {
    width:250px;
  }
  .photo_grid_container_reduced div {
    width:150px;
  }
}
.photo_grid_container:hover, .photo_grid_container_reduced img:hover {
  cursor:pointer;
}
.species_link:hover {
  cursor:pointer;
}

#grid_paging_container {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
  margin-bottom:10px;
}
#grid_paging_container div {
  padding-left:10px;
  padding-right:10px;
  margin-right:2px;
  border:1px solid white;
  border-radius:4px;
}
.grid_page_num {
  font-weight:normal;
}
.grid_page_num_current {
  color:white;
  background-color:darkgray;
  font-weight:bold;
  pointer-events:none;
}
.grid_paging_item_disabled {
  opacity:40%;
  pointer-events:none;
}
.grid_paging_item:hover {
  cursor:pointer;
}
#grid_paging_container_species_groups{
  padding-bottom:16px;
}
.species_group_page_list {
  display:flex;
  flex-wrap:wrap;
  justify-content:left;
  margin-top:6px;
  font-size:.85rem;
  font-weight:100;
}
.species_group_page_list div {
  padding-left:8px;
  padding-right:8px;
  text-decoration:underline;
  font-stretch:condensed;
  color:lightgray;
}
.page_label {
  color:rgb(191, 199, 150);
  font-weight:500;
  font-stretch:condensed;
}
.emphasized_species_group {
  color:white;
  font-weight:bold;
}
/* --------------------------------------------------------------------------------------- */
/* slideshow: */
/* --------------------------------------------------------------------------------------- */
.slideshow_control, .slideshow_control_disabled {
  border-radius:5%;
}
.slideshow_control_disabled {
  opacity:20%;
  pointer-events:none;
}
.slideshow_container {
  margin-top:6px;
}
.slide_image_container {
  display:block;
}
.captioned_img_container {
  margin-top:10px;
  padding:15px;
}
.captioned_img_container img {
  outline:8px solid black;
}
/*-------------------------------------------*/
@media (orientation: portrait){
  .slideshow_container {
    display:flex;
  }
  #container_slideshow_control_above {
    display:inline-flex;
    justify-content:center;
    width:100%;
  }
  #container_left_of_slide, #container_right_of_slide {
    display:none;
  }
  #img_slide {
    width:95%;
    border:5px solid black;
  }
  .captioned_img_container img {
    height:35vh;
  }
 .slideshow_control, .slideshow_control_disabled {
    margin-top:5px;
    height:40px;
  }
}
/*-------------------------------------------*/
@media (orientation: landscape){
  .slideshow_container {
    display:flex;
    justify-content:center;
  }
  #slide_container {
    display:flex;
  }
  #img_slide {
    height:70vh;
    border:5px solid black;
    margin-left:15px;
    margin-right:15px;
  }
  .captioned_img_container img {
    width:300px;
    max-width:70vh;
  }
  #container_left_of_slide, #container_right_of_slide {
    display:block;
  }
  .slideshow_control, .slideshow_control_disabled {
    margin-top: 5px;
    height:50px;
  }
  #previous_above_slide, #next_above_slide {
    display:none;
  }
}
/*-------------------------------------------*/
.slideshow_control:hover {
  cursor:pointer;
};