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

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

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

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



/*  CSS for Data table ----*/
#data {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.5em;
  border-collapse: collapse;
  width: 50%;
  table-layout:fixed;
  	align-items:center;
	margin-left:auto;
	margin-right:auto;
}
#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;
}