* {
  box-sizing: border-box;
}

body {
  font-size: 1em;
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
}


#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;
}
/* Original Horizontal Menus */
#ohmenu {
  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: #33ffff;
}
#ohmenu ul {
  margin: 0em;
  padding: 0;
  list-style-type: none;
  float: right;
}
#ohmenu li {
  border: 1px solid black;
  color: white;
  background-color: lightblue;
  float: left;
  width: 90px;
}
#ohmenu a {
  color: white;
  background-color: #555555;
  display: block;
  text-decoration: none;
}
#ohmenu a:hover {
  background-color: blue;
}

/* New hmenu class */
.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: lightblue;
}
.hmenu ul {
  margin: 0em;
  padding: 0;
  list-style-type: none;
  /* float: right; */
}
.hmenu li {
  border: 1px solid black;
  color: white;
  background-color: lightblue;
  float: left;
  width: 90px;
}
.hmenu a {
  color: white;
  background-color: #555555;
  display: block;
  text-decoration: none;
}
.hmenu a:hover {
  background-color: blue;
}
.hmenu a:active {
  background-color: green;
}
.hmenu  ul>li ul {
/*    background-color: rgb(0,40,10);
    list-style: none;*/
    display: none;
    position: relative;
    left: -1;
    z-index: 5;
}

.hmenu  ul>li:hover ul {
    display: inline;
    /* IE7 vertical location bug: must offset top by height of....*/
    /* top: 1em; /*....1st level list item +....*/
    margin-top: 0px;
}

.hmenu  ul>li ul>li {
    display: inline;
    white-space: nowrap;
    /* min-width: 7.5em;  Big enough for most items, will self-expand */
}
/* End Class hmenu */

/* Class for scrollable lists */

/*  TabBar class
/* End TabBar class */

.green { color: green }
.red { color: red }


/* Styles for all forms. */

.form input[type="text"] {
  padding: 2px;
  border: solid 1px lightblue;
  font-size: 14px;
  /* border-bottom: solid 2px white; */
}
.form textarea {
  padding: 2px;
  border: none;
  font-size: 14px;
  border-bottom: solid 2px white; 
}
.form input[type="text"]:focus, input[type="text"].focus {
  border-bottom: solid 2px #969696;
}
.form input[type="password"] {
  padding: 2px;
  border: none;
  font-size: 14px;
  border-bottom: solid 2px white; 
}
.form input[type="password"]:focus, input[type="text"].focus {
  border-bottom: solid 2px #969696;
}
.form input[type="checkbox"] {
    transform: scale(1.4);
}
.form input[readonly] {
  border-bottom: solid 2px lightgrey;
}
.form select {
  padding: 2px;
  border: solid 1px lightblue;
  font-size: 14px;
}
.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: 12px;
}
.form button[type="submit"]:hover {
  padding: 2px;
  border: solid 1px black;
  border-radius: 6px;
  font-size: 12px;
  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: green;
}


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

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