/*  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 -- */


html,body 	{
	width:100%;
	margin:auto;
	min-width:600px;
	max-width:2000px;
	background-color: #F5FFFA;
	background-image:url('/images/marble-tan.jpg');
	touch-action: manipulation;
	}

.centertitle {
	text-align:center;
  margin-left: auto;
	margin-right:auto;
  padding: 10px;
}	
.center {
	margin-left:auto;
	margin-right:auto;
	width:70%;
	}

.centerPetal {
	margin-left:auto;
	margin-right:auto;
	width:100%;
	}
	
img.photo {
	width:80%;
	height:90%;
	}
img.icon {
	width:16px;
	height:16px;
	}
img.iconL {
	width:125px;
	height:125px;
	}


hr {
	border: 7px solid #660066;
	border-radius: 5px;
	width:80%;
	margin-left:auto;
	}
table {
	width:100%;
	border-collapse:separate;
	bottom:5px;
	}

td {
	font-weight:600;
	color:#222222;
	padding-bottom:10px;
	}
th {
	color: white;
	background-color:#000066;

	}
/* 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:black;
	}
.linklabel:visited {
	color:#996633;
	}

p {
	font-size:0.9em;
	}

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


/* 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;
}

/* Styles for the tooltips */	
/*  Ref: https://www.w3schools.blog/css-tooltips */
.tooltip {
  position: relative;
  display: inline-block;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  font-size:16px;
  font-weight:600;
	font-family: "Times New Roman", Times, serif;
  width: 300px;
  background-color:#90EE90;
  color: #000000;
  text-align: justify;
  padding: 10px;
 
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
}

 
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*-----CSS for the buttons------------------------- */

button {
	color:#fff;
	background-color:#006400;
    font-size:1.0em;
	text-align:center;
	width:10%;
	margin-left:5%;
	min-height:30px; 
    min-width: 120px;
	}


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

/* CSS for select element */
.mySelect{
    background-color:#006400;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.2em;
}
.mySelect option{
	color: #fff;
	background-color: #000;
    padding-left: 20px;
    padding-right: 20px;
    text-align-last:center;
    font-size: 1.2em;
}