/*  Special List CSS */

/*  Browser Specific code   */
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
selector { 
property:value; 
}
}}

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
selector { 
property:value; 
}
}}

/* Safari 6.1-10.0 (but not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
@media {
selector { 
property:value;
}
}}

@-moz-document url-prefix() {
selector {
property:value;
}
}

@supports (-ms-ime-align:auto) {
selector {
property: value;
}
}

/* --  END BROWSER SPECIFIC CODE -- */
* {
  box-sizing: border-box;
}
html,body 	{
	width:100%;
	height:100%;
	margin:auto;
	min-width:600px;
	max-width:2000px;
	background-color: #F5FFFA;
	background-image:url('/images/marble-tan.jpg');
	touch-action: manipulation;
}
.headerbar {
	background: #175e4c;
	}

img.photo {
	width:70%;
	height:80%;
	}
img.icon {
	width:16px;
	height:16px;
	}
img.iconL {
	width:125px;
	height:125px;
	} 
/* CSS for back to top arrow */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-image:url('/images/marble-tan.jpg');
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}
/* CSS for top of page button */
#myBtn:hover {
  background-color: #555;
}

.btn {
  -webkit-border-radius: 20;
  -moz-border-radius: 20;
  border-radius: 20px;
  text-shadow: 1px 1px 3px #014464;
  font: bold 11px Verdana;
   /*text-transform: uppercase;*/
  letter-spacing: 2px;
  height:25px;
  background: #014464; 
  color: #ffffff;
  padding: 10px 20px 25px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #111;
  color: #fff;
  
  text-decoration: none;
}
@font-face {
  font-family:tangerine;
  font-style: normal;
  src: local( 'tangerine-bold'), url('/fonts/tangerine-bold.ttf');
  }
.fruit {
        font-family:"tangerine";
        font-size:3em;
        font-weight: 600;
        text-align:center;
        color:#000066;
        margin-left:5px;
}

/* CSS for back to top arrow */
#scroll {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#scroll:hover {
  background-color: #555;
}
.center {
	margin-left:auto;
	margin:right;
	width:80%;
	}
	

.centertitle {
	display:flex;
	align-items:center;
	width:30%;
	margin-left:auto;
	margin-right:auto;
}
hr {
	border: 7px solid #660066;
	border-radius: 5px;
	width:90%;
	margin:auto;
	}

/* CSS for a href links in thumbs--can't do general a:link as affect menu styling */
.linklabel {
	display:block;
	font-size:1.0em;
	font-weight:bold;
	color:darkblue;
	width:120px;
	text-align:center;
	text-decoration:none;
	}


.linklabel:hover{
	color:red;
	}
.linklabel:visited {
	color:#996633;
	}

/* Styles for the tooltips on plant page */	
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;  -- note, this caused the underline on the i icon*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #00ff55; /*#339933; dark green*/
  border-style:solid;
  border-color:black;
  color: #000;
  text-align: left;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  padding: 10px 10px;
  position: absolute;
  z-index: 99999;
  bottom: 125%;
  left: 50%;
  margin-top:10%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

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

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/*-----CSS for the button menu-------------------------- */
.vertical-menu {
  width: 300px;
  margin-left:40%;
 justify-content: center;

 padding-bottom:15px;
}

.vertical-menu a {
	font-size:18px;
  text-align:center;

  background-color: #444422; /* Green background */
  color: #fffff0;
  display: block;
  padding: 12px;
 text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #aaaa55;
}

.vertical-menu a.active {
  background-color: #aaaa55;
  color: white;
}
/*  CSS for Data table ----*/
#data {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.5em;
  border-collapse: collapse;
  width: 80%;
  table-layout:fixed;

}
#data thead {
	position: sticky;
    top: 50px;   /*note  that the top value keeps the header below the navbar*/
    z-index: 2;
    }
#data td, #data th {
  border: 1px solid #ddd;
  padding: 8px;
}

#data tr:nth-child(even){background-color: #f2f2f2;}
#data tr:nth-child(odd){background-color: #f8f8f8;}

#data tr:hover {background-color: #FFFFE0;}

#data th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

button {
	color:#fff;
	background-color:#006400;
	line-height:2;
	font-size:1em;
	text-align:center;
	width:10%;
	margin-left:1%;
	min-height:30px; 
    min-width:60px;
	}

button:hover {
  background-color: #7CFC00;
  color:#000;
}

@media print {

button,header {display:none !important};
td {
	padding-right:20px;
}
}