/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: url(/images/bg3.png) repeat center left fixed; 
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #1e6e50;
  color: white;
  font-family: arial, serif;
  font-size: 18px;
  
}

bottombuttons{
  display: inline-block;
  
}

table.a{
  float:left;
  border: 0px;
  
  }
table.a img{
  width: 88px;
  height: 31px;
  }
  
  table.b{
    border: 1px;
    }
    
    table.b img{
      float: right;
      width: 10vw;
    }
    

.imgs img{
  width: 32vw;
  float: right;
  margin: 0vw 5vw 0vw 5vw;
  
}

.biosimgs img{
  float: right;
  height: 30vw;
  margin: 0vw 15vw 0vw 5vw;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.columnright {
  float: right;
  margin-right: 5%;
}

/* Clear floats after image containers */
.rowright::after {
  content: "";
  clear: both;
  display: table;
}
 a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
  
}
.topnav {
  overflow: hidden;
  background-color: #0b291e;
}


/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 15px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

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

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

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

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: grid;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

  .topnav.responsive a {
    float: none;
    display: grid;
    text-align: left;
  }

  .textbody {
    max-width: 800px;
    min-width: 100px;
    }
  
  /*@media screen and (max-width: 10px) {
  /*.topnav a:not(:first-child) {display: none;}
  /*.topnav a.icon {
    /*float: right;
    /*display: block;
  }
}

@media screen and (max-width: 10px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }


[name=archive] {
  display: none;
}

[name=gallery] {
  max-width: 100%;
  padding: 1em 1em 0 1em;
  padding: 1em 0 0 0;
  box-sizing: border-box;
}

img,
video,
iframe {
  display: block;
}

/* this is for the image gallery*/
/*=========== GRID ===========*/

.grid {
  margin: 1em auto;
  padding: 0 1em;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
}

.grid .card {
  position: relative;
  text-align: center;
  padding: 0 0em;
  margin: 0 1em;
}

.grid .permalink {
  margin: auto;
  max-width: 100%;
  text-align: center;
  position: relative;
}
.grid .permalink:after {
  content:'';
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
}



.grid .permalink.title {
  display: block;
  margin: .5em 0 0 0;
  color:  #337287;
  font-weight: bold;
  text-decoration: none;
}
.grid .permalink.title:focus,
.grid .permalink.title:hover {
  text-decoration: underline;
}

.grid .taglist {
  text-align: center;
}

/* nomasonry */

.grid.nomasonry {
  justify-content: space-around;
}

.grid.nomasonry img,
.grid.nomasonry video,
.grid.nomasonry iframe {
  max-width: 100%;
}

.nomasonry .card {
  justify-content: center;
  justify-items: center;
  align-items: start;
}

.nomasonry .permalink.title {
  display: inline-block;
  min-height: 0;
}



/*=========== FORM ===========*/

.search-form {
  box-sizing: border-box;
  line-height: 1.5;
  width: fit-content;
  max-width: 100%;
  margin: auto 1em;
}
.search-form label{
  display: inline-block;
  margin: .125em;
}

.search-form input {
  font: inherit;
  border-radius: .25em;
}

.results {
  margin: 1em;
}




/*=========== NAV ===========*/


.navigation,
.pagination {
  text-align: center;
  margin: 1em auto;
  padding: 0 1em;
}

.pagination:not(:first-of-type) {
  margin-top: 3em;
}

.all-tags {
  text-align: left;
}

.pagination label,
.navigation a,
.pagination a {
  color: #337287;
  border: .125em solid transparent;
  display: inline-block;
  padding: .5em;
  line-height: 1;
  text-decoration: none;
  border-radius: .25em;
  vertical-align: middle;
  margin: .125em 0;
  font-weight: bold;
}
.pagination a[aria-current] {
  text-decoration: underline double;
  font-weight: bold;
}
.navigation a:hover,
.navigation a:focus,
.pagination a:focus,
.pagination a:hover {
  border-color: black;
}








/*=========== VIEW ===========*/

.view .card {
  position: relative;
  border-radius: .25em;
  margin: 1em auto;
  padding: 0 1em;
}
.download {
  display: block;
  width: fit-content;
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}
.view img,
.view video,
.view iframe {
  display: block;
  margin: 1em auto;
}

.view iframe {
  width: 100vh;
  height: 75vh;
}

@media (min-height: calc(100vw - 2em)) {
  .view iframe {
    width: 100%;
    height: 75vw;
  }
}






/*=========== TAGS ===========*/

.taglist {
  display: block;
  list-style-type: none;
  margin: 0;
  padding:0;
  text-align: left;
  font-size: smaller;
  position: relative;
}
.taglist:before {
  content: 'in ';
}
.tag {
  display: inline-block;
}

.tag a {
  color: #3B5A4A;
  border-radius: .25em;
  margin: 0 .125em;
  padding: .125em;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color .25s,
    color .25s;
}
.tag:not(:last-child) a:after {
  content: ','
}

.tag a:focus, 
.tag a:hover {
  text-decoration: underline;
}
}