* {
box-sizing: border-box;
}
header ul{
padding-inline-start: 0px;
}
header, footer, nav, aside {
background-image: url("Green Background.png");
padding: 1.0vh;
}
header{ /*Beginning of the header menu items: Sun Expose, Moisture Level...*/
width: 100%;
min-width: 101.2vh;
height: 16.0vh;
padding-bottom: 1.0vh;
}
header img {
height: 14.0vh;
background: #96c899;
border: ridge 1.5vh #6ba569; /* 8fbc8f Sets the border color to a shade of green */
border-radius: 0.5vh; Puts an equal radius on all four border corners*/
padding: 0.5vh;
}
header img:hover {
background: #bfad13;
border: ridge 1.5vh #c47700; /* 8fbc8f Sets the border color to a shade of green */
border-radius: 0.5vh; /* Puts an equal radius on all four border corners*/
}
.header-menu
{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 0 1.0vh;
}
#main{
min-width: 95.0vh;
}
article{
min-width: 55.0vh;
}
nav {
min-width: 30.0vh;
}
aside {
min-width: 10.0vh;
}
a.homeButton, a.aboutButton {
display: inline-block;
width: 8.0vh;
height: 3.2vh;
font-family: Angsana New;
font-size: 2.3vh;
background: transparent;
background-image: linear-gradient(to right, #cdcdcd, #5d5d5d);
border: solid 0.2vh #fff;
color: #fff;
text-decoration: none;
border-radius: 1.5vh;
line-height: 2.6vh;
margin-top: 3.0vh;
color: white
}
a.navigationButton {
display: inline-block;
margin-top: 0.7vh;
width: 8.0vh;
height: 3.2vh;
font-family: Angsana New;
font-size: 2.3vh;
background: transparent;
background-image: linear-gradient(to right, #cdcdcd, #5d5d5d);
border: solid 0.2vh #fff;
color: #fff;
text-decoration: none;
border-radius: 1.5vh;
line-height: 2.6vh;
color: white
}
a.navigationButton:hover {
text-decoration: none;
color: #263e0f;
border: solid 0.2vh #263e0f;
}
a.homeButton:visited, a.aboutButton:visited, a.navigationButton:visited {
text-decoration: none;
}
a.homeButton:hover, a.aboutButton:hover {
background-image: linear-gradient(to right, #004400, #004400);
color: #fff;
text-decoration: none;
}
a.homeButton:active, a.aboutButton:active, {
text-decoration: none;
}
.navdropup {
position: relative;
display: inline-block;
height: 4.0vh;
margin-top: 2.5vh;
}
.navdropup_list {
display: none;
position: absolute;
height: 3.5vh;
width: 12.5vh;
bottom: 9.8vh;
text-align: center;
font-size: 2.0vh;
}
.navdropup_list a {
display: block;
color: #263e0f;
background-color: #fff2d5;
padding: 0.1vh;
text-decoration: none;
border: 0.1vh solid #263e0f;
border-radius: 1.0vh;
}
.navdropup:hover .navdropup_list {
display: block;
height: 3.2vh;
z-index: 10;
}
.navdropup_list a:hover {
color: #fff2d5;
height: 3.5vh;
text-decoration: none;
background-color: #263e0f;
border: 0.1vh solid #fff2d5;
border-radius: 1.0vh;
}
a.botanicalNameButton, a.commonNameButton {
display: inline-block;
background-image: linear-gradient(to right, #cdcdcd, #5d5d5d);
text-decoration: none;
font-family: Angsana New;
font-size: 1.6vh;
border: 0.2vh solid #fff;
height: 3.2vh;
padding: 0.7vh;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border-radius: 1.5vh;
}
a.botanicalNameButton:hover, a.commonNameButton:hover {
background-image: linear-gradient(to right, #004400, #004400);
color: white;
text-decoration: none;
}
.fbook img{
margin-top: 2.5vh;
width: 4.0vh;
background: #003d9c;
border-radius: 1.0vh;
}
.fbook img:hover {
opacity: 0.7;
background: #3086c4;
}
#selectedTLM{
background: #006600;
border-color: #c47700;
}
#selectedNavMenu{
color: #fff;
background: #006600;
border-color: #c47700;
}
.nav-container{
display: flex;
flex-direction: column;
}
#main {
display: flex;
min-height: calc(100vh - 40vh);
}
#main > nav {
flex: 0 0 25%;
order: -1;
}
#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;
}
.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; }
}
/* 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.7vh;
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;
}
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; }
}
.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;
}
.animated-box:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.5vh;
background: linear-gradient(160deg, #335214,#588d23, #8ad143, #335214, #588d23, #335214, #8ad143);
background-size: 300% 300%;
clip-path: polygon(0% 100%, 0.5vh 100%, 0.5vh 0.5vh, calc(100% - 0.5vh) 0.5vh, calc(100% - 0.5vh) calc(100% - 0.5vh), 0.5vh calc(100% - 0.5vh), 0.5vh 100%, 100% 100%, 100% 0%, 0% 0%);
}
.animated-box.in:after {
animation: frame-enter 0.01s forwards ease-in-out reverse, gradient-animation 5s ease-in-out infinite;
}
/* motion */
@keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
@keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) calc(100% - 0.7vh), 0.7vh calc(100% - 0.7vh), 0.7vh 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) calc(100% - 0.7vh), calc(100% - 0.7vh) calc(100% - 0.7vh), calc(100% - 0.7vh) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, calc(100% - 0.7vh) 0.7vh, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0.7vh, 0.7vh 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0.7vh 100%, 0% 100%);
}
}