@charset "UTF-8";
/* CSS Document */


.tooltip {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.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;
}



/* The body tag style applies to all elements on the page */

body {
	margin:0;
	background-color: lightgray;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 6px;
  text-decoration: none;
  font: 16px;
}

/* background when hovering over links in header */
li a:hover:not(.active) {
  background-color: #DAA520;
}

.active {
  background-color: #111;   /* background on Home link 4caf50 is green, 111 and 333 are dark grays*/
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: white;
   text-align: center;
   vertical-align: middle;
}

/* Next stmts for the tables */
#FoodList {
  font-family: "Comic Sans MS", Arial, Helvetica, sans-serif; 
  border-collapse: collapse;
  width: 100%;
}

#FoodList td, #FoodList th {
  border: 1px solid #ddd;     /* #ddd is a light shade of gray  */
  padding: 8px;
}

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

#FoodList tr:hover {background-color: #ddd;}

#FoodList th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #DAA520;    /* gold goldenrod is DAA520 */
  color: white;
}
/* End of Stmts for Tables  */  

.ui-mobile .ui-page .ui-header { height: 60px;}
.ui-mobile .ui-page .ui-footer { height: 60px;}
#contentstyle {background-color: lightgray}

* {
  font-family: "Comic Sans MS", Times, serif;
}

.buttonbase {
  background-color: goldenrod;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  /* cu2rsor: pointer; */
  
}

button:focus {outline:0;}

.button1 {border-radius: 12px;}
.button5 {border-radius: 50%;}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}

/* h3#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden;  } */

/* Next enables the fade in if the select answer*/
h3 {      
            animation: fadeInAnimation ease 3s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
        } 
        @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 

/* h3
    {
    -webkit-animation-delay: 5s; 
     animation-delay: 5s;
    } */

/* Next is animate fadein  */
#fadein p {
    margin-top: 25px;
    font-size: 16px;
    text-align: left;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* next is media query for screens > 500  */
@media (min-width: 501px)  {
	li a {
	font-size: 16px;
	}
}

/* next is media query for screens < 501  */
@media (max-width: 500px)  {
	li a {
	font-size: 12px;
	}
}