#selectedTLM{
  background: #006600;
  border-color: #c47700;
}

#selectedNavMenu{
  background: #006600;
  border-color: #c47700;
}	

.nav-container{
	 display: flex;
	 flex-direction: column;
}	


.vessel{
  position: relative;
  margin: 50% auto 0 auto;
  width:25.0vh;
  height:8.5vh;
  background:#0c5dd0; 
  overflow:hidden; 
  position:relative;
  box-shadow: 0 1.9vh 3.8vh rgba(0,0,0,0.30), 0 1.6vh 1.2vh rgba(0,0,0,0.22);
	border: solid 0.5vh #7a4a00;
	border-top: none;
  border-radius: 0.5vh 0.5vh 5.0vh 5.0vh;
}

  #main {
    display: flex;
    min-height: calc(100vh - 40vh);
  }
	
  #main > nav {
    flex: 0 0 25%;
    order: -1;
  }

.text{
  position:relative;
  margin: 6.5vh 0 0 12.0vh;
  transform:translate(-50%,-50%);
	font-size:3.0vh;
  text-align:center;
  color:#583400;
  text-shadow: rgba(0, 0, 0, 0.05) 0vh 0.2vh 0.1vh, rgba(0, 0, 0, 0.1) 0vh 0.4vh 0.2vh, rgba(0, 0, 0, 0.15) 0vh 0.8vh 0.4vh, rgba(0, 0, 0, 0.2) 0vh 1.6vh 0.8vh, rgba(0, 0, 0, 0.25) 0vh 3.2vh 1.6vh;;
	padding: 1.0vh 0 6.0vh 0;
}
	
.liquid{
    width:120%;
    height:1.0vh;
    position: absolute;
    left:-10%;
    background:#d6a67c;
 	  animation: liquid 30s infinite;
    }
	

@keyframes liquid{
    0% { height: 60; }
    5% { height: 50; }
    10% { height: 40; }
    15% { height: 35; }
    20% { height: 30; }
    25% { height: 25; }
    30% { height: 20; }
    35% { height: 15; }
    40% { height: 10; }
    45% { height: 5; }
    50% { height: 2; }
    55% { height: 1; }
    60% { height: 0.5; }
    65% { height: 1; }
    70% { height: 2; }
    75% { height: 10; }
    80% { height: 20; }
    85% { height: 30; }
    90% { height: 40; }
    95% { height: 50; }
    100% { height: 60; }
}

.preference{
  position: relative;
  margin: -23vh auto 0 auto;
}

.preference {
    margin-top: 0;
}


nav h3{  /* Select Search Preference, Text */
   margin-top: 1.5vh;
   margin-bottom: 0;
   width: 100%;
   font-family: Calibri;
	 font-style: italic;
	 text-align: center;
	 font-size: 2.3vh;
	 color: #003400;
	 overflow: wrap;
}

.nav-menu{
	 left: 18.50vh;
   margin: auto;
   width: 25.0vh;
   padding: 0.5vh;
	 text-align: center;
   list-style: none
}

.nav-menu a
{
  background: #a4d1ec;
  display: block;
  border: ridge 0.7vh #609f60; /* 4d804d Sets the border color to a shade of green  */
	border-radius: 1.0vh; /*	 Puts an equal radius on all four border corners*/
	padding:0.2vh;			
	margin: 1.0vh;
}


.nav-menu a:hover {
  background: #bfad13;
  border: ridge 0.7vh #c47700; /* 4d804d Sets the border color to a shade of green  */
	border-radius: 1.0vh; /*	 Puts an equal radius on all four border corners*/			
	padding:0.2vh;			
	margin: 1.0vh;
	text-decoration: none;
}

#moisture-level-icon {
    width: 9.0vh;
		height: 4.5vh;
}
	
  #main > article {
   flex: 0 0 60%;
  }
 
  #main > aside {
    flex: 0 0 15%;
  }

  .container-1{
    width: 100%;
	}
		
  .container-1 img {
    width: 95%;
		margin-left: 2.5%;
		margin-top: 5.0vh;
  }

/* The class attributes of the 'photo-grid-container' in relationship to the page...Contains the 'photo-grid, which contains the 'photo-grid-items' */
.photo-grid-container {
  display: flex;
  justify-content: center;
}
	
/* The class attributes of the 'photo-grid' in relationship to the photo-grid-container...Contains the 'photo-grid-items'...The grid layout for the photos */
.photo-grid {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  justify-content: center;
	flex-direction: row;
	align-items: center;
  background-image: url("Tan Background.png");
}

/* The class attributes of the 'photo-grid-items': The item, or items, within each 'cell' of the grid...In this case, an image */
.photo-grid-item {
  justify-content: center;
  width: 30.5vh;
  height: 40.5vh;
  padding: 0.3vh;
  border: 0.8vh double #939393;
	border-radius: 2.5vh 2.5vh 6.5vh 6.5vh;
	margin: 1.0vh;
}

/* The class attributes for the buttons inside of the photo-grid-container */
.button1 {
  display: inline-block;
  width: 28.0vh;
	height: 4.7vh;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(125,125,125,1));
  border: 0.2vh solid #b3b3b3;
  color: #144e14;
  text-decoration: none;
	font-family: Angsana New;
	font-size: 2.2vh;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
	border-radius: 1.5vh;
	margin-top: 0.5vh;
}

/* The class attributes for the buttons inside of the photo-grid-container cedad0*/
article h2 {
  display: inline-block;
  width: 28vh;
	height: 2.5vh;
	font-family: LilyUPC;
	font-size: 1.7vh;
  letter-spacing: 0.2vh;
  background: transparent;
  color: #545454;
  border-radius: 2.5vh;
	padding-left: 0.3vh;
	padding-right: 0.3vh;
	margin-top: 0.5vh;
	margin-bottom: -0.2vh;
  text-decoration: none;
  cursor: pointer;
}

/* The class attributes that create the 'Hover' effects for the button inside of 'footer-Item1' */
.button1:hover {
  color: #008000;
  text-shadow: 0.1vh 0.1vh #00ff00;
  border-color: #006000;
}

article h2.pointer:hover {
  text-decoration: none;
	cursor: default;
}


hr.greenline {
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
  border-top: 0.1vh solid #008000;
}


  #slideshow img {
    position: absolute;
		height:auto;
		left: 2.5%;
		width:20%;
  min-width: 26.0vh;
		border: ridge 1.0vh #004400;
		border-radius: 2.5vh;
  }

  #slideshow img:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 10s;
    animation-duration: 10s;
    z-index: 20;
  }
	
  #slideshow img:nth-of-type(2) {
    z-index: 10;
  }
	
  #slideshow img:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

.rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 1.5vh;
  height: 12.0vh;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(130vh);
  }
  100% {
    transform: translateY(1305vh);
  }
}

.stem {
  width: 0.25vh;
  height: 100%;
  margin-left: 0.7vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.splat {
  width: 1.5vh;
  height: 1.0vh;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
  display: none;
}

article.splat-toggle .splat {
  display: block;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.flashit{
    animation-delay: 4s;
    -webkit-animation: flash ease-out 10s infinite;
    -moz-animation: flash ease-out 10s infinite;
    animation: flash ease-out 10s infinite;
}

.flashit img{
  width: 100%;
	index: 1;
}

@-webkit-keyframes flash {
	from { opacity: 0; } 
    83% { opacity: 0; }
	84% { opacity: 0.6; }
    85% { opacity: 0.5; }
    87% { opacity: 0.8; } 
	to { opacity: 0; }
}
@keyframes flash {
	from { opacity: 0; } 
    83% { opacity: 0; }
	84% { opacity: 0.6; }
    85% { opacity: 0.5; }
    87% { opacity: 0.8; } 
	to { opacity: 0; }
}
	

.searchTable{
  height: 9.0vh;
  border-collapse: separate;
  border-radius: 1.5vh; 
  background-image: linear-gradient(to right, #00aa00, #004400);
  border: solid 0.2vh #fff;
  color: #fff;
}

.dropup {
  position: relative;
  margin-top: 1.0vh;
  margin-right: 2.0vh;
	display: inline-block;
	width: 30.0vh;
	z-index: 1;
}

.dropup-content {
  display: none;
  position: absolute;
}

#myInput {
  background-repeat: no-repeat;
  background-color: #e6ffe6;
  width: 30vh;
  height: 3.0vh;
  font-size: 2.0vh;
  color: #000;
  border-radius: 0.5vh;
  margin-left: 0.8vh;
}


#myUL {
  position: absolute;
  width: 29.5vh;
  list-style-type: none;
  padding: 0;
  margin-left: 1.0vh;
  height: 25.0vh;
  overflow-y:scroll;
  bottom: 2.8vh;
}

#myUL li {
  display: none;
  text-align: left;
}

#myUL li a {
  border: .1vh solid #006400;
  border-radius: .5vh;
  background-color: #f0f8ff; /*  AliceBlue  */
  text-decoration: none;
  text-indent: 0.5em;
  font-size: 1.6vh;
  color:  #555;
  display: block;
  height: 2.75vh;
  padding-top: 0.4vh;
}

#myUL li a:hover:not(.header) {
	color: #e6ffe6;
  background-color: #006400;
}

.radioButton{
  filter: saturate(75%) hue-rotate(240deg) brightness(100%) contrast(100%);    
}

label{
	margin-left: -0.75vh;
	padding: 1.5vh 1.75vh 0 0.5vh;
  vertical-align: 0.25em;
	font-size: 1.3vh;
}

.listTable{
  height: 9.0vh;
  border-collapse: separate;
	border: solid 0.2vh #fff;
  border-radius: 1.5vh; 
  background-image: linear-gradient(to right, #00aa00, #006600);
}

.listTable th{
	border: none;
  font-size: 1.7vh;
	text-align: center;
  color: #d8f6d9;
}

.listTable td{
	padding-left: 1.0vh;
	padding-right: 1.0vh;
}

.listTable a{
	color: #fff;
	line-height: 1.4vh;
}