/*
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
*/
.tooltip {
  position: relative;
  display: inline-block;
  }
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #000099;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

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

article {
	font-family: Verdana, Tahoma, Geneva, sans-serif;
	color: #000066;
}

/*Syntax < * class="center"> */
/*Text alignment elements */
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.indent {
 	padding-left: 30px;
}
/* Font settings */
.typeset {
	font-family: Verdana, Tahoma, Geneva, sans-serif;
	color: #000099;
}
.typeset2 {
	font-family: Georgia, serif;
	color: #000066;
}
.footnote {
	font-style: italic;
	font-size: 14px;
	color: #000066;
}
.small {
	font-style: italic;
	font-size: 14px;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.
/*Newspaper columns <DIV CLASS="newspaper"> */
.newspaper {
	column-count: 3;
	column-gap: 40px;
	column-rule-style: solid;
	column-rule-width: 1px;
	column-rule-color: lightblue;
}

/*Image alignment elements */
.top {
	vertical-align: text-top;
}

.bottom {
	vertical-align: text-bottom;
}

.menu > ul {
	float: center
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000066;
}

.menu li {
	float: left;
	border-right:1px solid #bbb;
}

.menu li:last-child {
	border-right: none;
}

.menu li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.menu li a:hover:not(.active) {
	background-color: white;
	color: #000066;
}

.active {
	background-color: #4CAF50;
}
.container {
	position: center;
	width: 80%;
}

.topright {
	position: absolute;
	top: 8px;
	left: 16px;
	font-size: 18px;
}

fieldset { 
  display: block;
  margin: auto;
  width: 80%;
  border-style: groove;
  border-color: #000099;
  border-width: 2px;
  border-radius: 8px;
}

header {
  margin: auto;
  width: 80%;
}

nav {
  margin: auto;
  width: 80%;
  background-color: #000066;
}

footer {
  margin: auto;
  width: 80%;
  background-color: #000066;
  color:white;
}
a.footer {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 11px;
  text-decoration: none;
  color:white;
}
a:hover.footer {
  font-weight: bold;
}
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/*Reserve styles 
IMG {
 	 display: block;
 	 margin-left: auto;
 	 margin-right: auto;
	 z-index: -1;
}

HEADER { 
  background-image: url('/images/island.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
}
*/

/* Create equal columns that float next to each other */
.columneven {
  float: left;
  width: 50%;
}
.columnthree {
  float: left;
  width: 33.33%
}
.columnfour {
  float: left;
  width: 25%
}
.columnfive {
  float: left;
  width: 20%
}
/* Left and right column */
.column {
  float: left;
}
.column.side {
  width: 20%;
}

/* Middle column */
.column.middle {	
  width: 60%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
  width: 100%;
  }
}
table#caltop {
  width: 80%;
  margin: auto;
}
table#inner {
  width: 100%;
  background-color: white;
}
tr.mainday {
  vertical-align: top; 
  height: 110px;
  border: 1px solid #000099;
}
td.faq {
  width: 20%;
  text-align: center;
}
td.calday {
  vertical-align: top;
  width: 14%;
  border: 1px solid #000099;
}
td.head {
  width: 14%;
  text-align: center;
  background-color: #000099;
  font-style: italic;
  font-size: 16px;
  color: white;
  border: 1px solid white;
}
td.daynumber {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 15px;
  color: #000099;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
}
td.innercell {
  text-align: center;
  width: 100%;
  background-color: white;
  color: #008000;
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 13px;
}
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

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

</style>