/*
#
# common.css
#
# This contains common css definitions
#
# The order of components is top right bottom left or top/bottom left/right
#
# Copyright 2013-24 Steve Lloyd
#
# Permission is hereby granted, free of charge, to any person obtaining a copy of this software
# and associated documentation files (the "Software"), to deal in the Software without restriction,
# including without limitation the rights to use, copy, modify, merge, publish, distribute,
# sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in all copies or 
# substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
# INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
# PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
# FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
# ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
#
#
#===========================================================================
*/
:root {
	--nav-color: #ffffff;
	--nav-bgcolor: #333333;
	--nav-hover-bgcolor: #4b545f;
	--nav-divider-color: #aaaaaa;
}

html,
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
	margin:0;
	padding:0;
	height:100%;
/*    background-color: #96a0b0; */
    background-color: #ffffff;
}
#logo{
	position: absolute;
	top: 5px;
	right: 5px;
}
#school{
    font-size: 12px;
    color: #ffffff;
	position: absolute;
	top: 60px;
	right: 5px;
}
#heading{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #96a0b0;
    color: #ffffff;
    height: 65px;
    font-size: 36px;
    padding-top: 15px;
}
#container {
    background-color: #96a0b0;
	background-color: #eeeeee;
	min-height:100%;
	position:relative;
	margin-left:20px;
	margin-right:20px;
}
#main {
	padding: 10px 10px 30px 10px;
}
#footer{
    background-color: #96a0b0;
	position: absolute;
	width: 100%;
    font-size: 11px;
	line-height: 28px;
	bottom: 0px;
    color: #ffffff;
    height: 30px;
}
#announce{
    display: inline-block;
    font-size: 11px;
	margin: 0px 0px 10px 0px;
	padding: 3px;
    border: 1px solid #000000;
}
#greeting{
    font-size: 11px;
    padding: 0px 0px 0px 0px;
}

table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
table a {
    text-decoration: none;
    color: #0000ff;
}
table a:hover, table a:active {
    background-color: #cccccc;
}

.plain-table{
    font-size: 13px;
	border-collapse: collapse;
	border: 0;
}
.plain-table td {
	padding: 5px 10px 5px 0px;
	border: 0;
}
.compact-table td {
	padding: 0px 10px 0px 0px;
}
.plain-table tr {
	height: 20px;
}

.view-table{
    font-size: 13px;
	border-collapse: collapse;
    border: 1px solid #000000;
}
.view-table td {
	padding: 5px 10px 5px 5px;
    border: 1px solid #aaaaaa;
}
.view-table tr {
	height: 20px;
}
.view-table td:nth-child(1) {
	background-color: #116abc;
    color: #ffffff;
	text-align: right;
	vertical-align: top;
}
.view-table td:nth-child(2) {
	width: 500px;
}

.edit-table tbody {
	display: block;
	margin -1px;
}
.edit-table{
    font-size: 13px;
	border-collapse: collapse;
    border: 1px solid #777777;
}
.edit-table td {
	padding: 5px 5px 5px 5px;
    border: 1px solid #aaaaaa;
	background-color: #cce6ff;
	background-color: #eeeeee;
    color: #000000;
}
.edit-table tr {
	background-color: #eeeeee;
	height: 25px;
	vertical-align: middle; 
}
.edit-table td:nth-child(1) {
	padding-top: 5px;
	background-color: #cce6ff;
	background-color: #eeeeee;
    color: #000000;
	text-align: left;
/*	vertical-align: middle; */
}
.edit-table td:nth-child(2) {
	padding-top: 5px;
	background-color: #ffffff;
    color: #000000;
	text-align: left;
}
.edit-table-required td:nth-child(2) {
	padding-top: 5px;
	background-color: #cce6ff;
	background-color: #eeeeee;
    color: #000000;
	text-align: center;
/*	vertical-align: top; */
}
.edit-table-header tr:nth-child(1) {
	background-color: #cce6ff;
    color: #000000;
    font-weight: normal;
}
/*
.edit-table td:nth-child(3) {
	width: 500px;
}
*/
.edit-table textarea {
	width: 100%;
}
.action-span {
	cursor: pointer;
}
.action-link {
	cursor: pointer;
    text-decoration: none;
    color: #0000ff;
}
.action-link:hover, .action-link a:active {
    background-color: #E3F2FD;
}
.action-disabled {
	color: #cccccc;
}

.button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
  display: inline-block;
	font-size: 11px;
    text-align: center;
  padding: 4px;
	min-width: 50px;
  background: #ffff;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #cccccc;
}
.button:hover {
  background: #dddddd;
}
.button-disabled{
    font-family: Verdana, Arial, Helvetica, sans-serif;
  display: inline-block;
	font-size: 11px;
    text-align: center;
  padding: 4px;
	min-width: 50px;
  background: #eeeeee;
	color: #aaaaaa;
  border-radius: 5px;
  border: 1px solid #cccccc;
}
.monospace {
	font-family: "Courier New", "Courier", monospace;
	font-size: 16px;
}

input[disabled]{
	color: #333333;
    background-color: #E0DEFF;
}


.rotate {
  transform: rotate(-90deg);
}

/* On page links */

a.linkbox:link, a.linkbox:visited {
    display: inline-block;
	font-size: 11px;
    color: #ffffff;
    color: #000000;
    background-color: #96a0b0;
    background-color: #ffffff;
    border-radius: 6px;
	min-width: 50px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    white-space:nowrap;
    border: 1px solid #000000;
    border: 1px solid #aaaaaa;
}

a.linkbox:hover, a.linkbox:active {
    background-color: #757575;
    background-color: #aaaaaa;
    border: 1px solid #000000;
    border: 1px solid #aaaaaa;
}

/* Navigation Bar */

nav {
	background-color: var(--nav-bgcolor);
	height: 30px;
	padding: 0px 0px 0px 0px
}
nav ul {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px; 
	background-color: var(--nav-bgcolor); 
	padding: 0 0px;
	border-radius: 0px;  
	list-style: none;
	position: relative;
	margin-top: 0px;
	display: inline-table;
	z-index: 1000;
}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}

nav ul li {
	float: left;
}

nav ul li a {
	display: block;
	padding: 7px 10px; 
	text-decoration: none;
	color: var(--nav-color); 
}
nav ul li:hover {
	background: var(--nav-hover-bgcolor);
}
nav ul li:hover > ul {
	display: block;
}
nav ul li:hover a {
	color: var(--nav-color);
}
nav ul ul {
	display: none;
	top: 30px;
}

nav ul ul {
	background-color: var(--nav-bgcolor); 
	border-radius: 0px;
	padding: 0;
	position: absolute; 
	top: 100%;
}
nav ul ul li {
	background-color: var(--nav-bgcolor); 
	float: none; 
	border-top: 0px;
	border-bottom: 0px;
	position: relative;
}
nav ul ul li a {
	padding: 10px 10px;
	color: var(--nav-color); 
}	
nav ul ul li a:hover {
	background-color: var(--nav-hover-bgcolor); 
}
nav ul ul ul {
	position: absolute; left: 100%; top: 0;
}
.nav-blank {
	background-color: var(--nav-bgcolor);
	color: var(--nav-bgcolor);
}
.nav-divider {
	border-top: 1px solid var(--nav-divider-color);
	min-width: 100px;
}

/* Google Map */

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}