* {
  box-sizing: border-box;
}

#header {
  border-top: 1px none black;
  border-left: 1px none black;
  border-right: 1px none black;
  background-color: #33ffff;
  color: black;
  font-size: 1.5em;
}
#hmenu {
  border:  none;
  font-weight: bold;
  text-align: center;
  height: 2.4em;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.8em;
  line-height: 2.5em;
  background-color: #90EE90;
}
#hmenu ul {
  margin: 0em;
  padding: 0;
  list-style-type: none;
  float: right;
  background-color: #90EE90;
}
#hmenu li {
  border: 0px solid black;
  color: white;
  background-color: green;
  float: left;
  width: 90px;
}
#hmenu a {
  color: white;
  background-color: #555555;
  display: block;
  text-decoration: none;
}
#hmenu a:hover {
  background-color: green;
}

#amenu {
  border:  none;
  font-weight: bold;
  text-align: center;
  height: 2.4em;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.8em;
  line-height: 2.5em;
  background-color: #90EE90;
}
#amenu ul {
  margin: 0em;
  padding: 0;
  list-style-type: none;
  float: left;
  background-color: #90EE90;
}
#amenu li {
  border: 0px solid black;
  color: white;
  background-color: green;
  float: left;
  width: 20px;
}
#amenu a {
  color: white;
  background-color: #555555;
  display: block;
  text-decoration: none;
}
#amenu a:hover {
  background-color: green;
}

body {
  font-size: 1em;
  font-family: sans-serif;
}
#listnav {
  border:  none;
  font-weight: bold;
  text-align: center;
  font-family: Arial,Helvetica,sans-serif;
  background-color: #90EE90;
}

/* Buttons that look like links. */
.linkbutton {
	overflow:visible; /* Shrinkwrap the text in IE7- */
	margin:0;
	padding:0;
	border:0;
	color:#8f1f08; /* Match your link colour */
	background:transparent;
	font:inherit; /* Inherit font settings (doesn’t work in IE7-) */
	line-height:normal; /* Override line-height to avoid spacing issues */
	text-decoration:underline; /* Make it look linky */
	cursor:pointer; /* Buttons don’t make the cursor change in all browsers */
	-moz-user-select:text; /* Make button text selectable in Gecko */
}
/* Make sure keyboard users get visual feedback */
.linkbutton:hover,
.linkbutton:focus {
	color:#800000;
	background-color:#e3e0d1;
}
/* Remove mystery padding in Gecko browsers.
 * See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
 */
.linkbutton::-moz-focus-inner {
	padding:0;
	border:0;
}

/* Styles for all forms. */

.form input[type="text"] {
  padding: 2px;
  border: solid 1px blue;
  font-size: 16px;
}
.form textarea {
  padding: 2px;
  border: solid 1px blue;
  font-size: 16px;
}
.form input[type="text"]:focus, input[type="text"].focus {
  border-bottom: solid 2px black;
}
.form input[type="password"] {
  padding: 2px;
  border: solid 1px blue;
  font-size: 16px;
}
.form input[type="password"]:focus, input[type="password"].focus {
  border-bottom: solid 2px black;
}
.form input[type="checkbox"] {
    transform: scale(1.4);
}
.form input[readonly] {
  border: solid 1px lightgrey;
}
.form select {
  padding: 2px;
  border: solid 1px blue;
  font-size: 16px;
}
.form input[type="submit"] {
  padding: 2px;
  border: solid 1px black; 
  border-radius: 6px;
  font-size: 14px;
}
.form input[type="submit"]:hover {
  padding: 2px;
  border: solid 1px black;
  border-radius: 6px;
  font-size: 14px;
  color: white;
  background-color: green;
}
.form button[type="submit"] {
  padding: 2px;
  border: solid 1px black; 
  border-radius: 6px;
  font-size: 14px;
}
.form button[type="submit"]:hover {
  padding: 2px;
  border: solid 1px black;
  border-radius: 6px;
  font-size: 14px;
  color: white;
  background-color: green;
}
input[type="image"] {
  padding: 2px;
  border: solid 1px black; 
  border-radius: 6px;
}
input[type="image"]:hover {
  padding: 2px;
  border: solid 1px black;
  border-radius: 6px;
  color: white;
  background-color: white;
}


/* Tooltip (Hover Hints) */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip. Above and right of the element. */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 105%;
    margin-left: 0px;
}

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

.tooltip .tooltipleft {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip. Above and left of the element. */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: -450%;
    margin-left: 0px;
}

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

.tooltip .tooltipbelowleft {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip. Below and left of the element. */
    position: absolute;
    z-index: 2;
    bottom: -200%;
    left: -450%;
    margin-left: 0px;
}

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