﻿body {
    background-color:rgb(52,152,219);
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 12px;
    font: 12px arial,verdana;
}
.divBody {
    border: 0px solid red; /* Remove this (make 0px) when all formatting is done - just to show the area we are working within */
    max-width:1060px;
    margin:auto; /* Does the centering */
}
.top-outer-banner {
    width: 100%;
    background-color: white;
}
.top-banner {
    max-width:1060px;
    margin:auto; /* Does the centering */
    height: 80px;
    text-align:left;
    margin-bottom: 20px;
    padding: 10px;
    box-sizing:content-box; /* override bootstrap - border-box */
}
.bottom-outer-banner {
    width: 100%;
    background-color: rgb(52,152,219);
}
.bottom-banner {
    max-width:1060px;
    margin-left:auto; /* Does the centering */
    margin-right:auto; /* Does the centering */
    margin-top: 50px;
    border-top: 1px solid white;
    text-align:left;
    padding: 10px;
    font-size: 1.2em;
    color: white;
    line-height: 1.3;
}
.bottom-banner a:visited {
    color:white;
    text-decoration: underline;
}
.bottom-banner a:link {
    color:white;
    text-decoration: underline;
}

.white-link {
    color:white;
    text-decoration: underline;
}

.divMainTitle {
    font-size: 24pt;
    width: 250px;
    float: left;
    color: #808080;
    border: 0px solid red;
}
.divlogo {
    float:left;
    border: 0px solid red;
}
.divwhoami {
    position: relative;
    right: 10px;
    float:right;
    text-align:  right;
    vertical-align:text-bottom;  
    border: 0px solid red;
    height: 100%;
    padding-right: 0px;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis; /* Not IE */ 
}
.divLoginBox {
    width: 450px;
    position:relative;
    left:50%;
    margin-left:-225px;
    border: 1px solid black;
    padding: 20px 20px 20px 50px;
    background-color: #eee;
}
.lblLogin {
    width:120px;
}
.txtEmail {
    width: 200px;
}
.lblError {
    color: red;
    font-weight: bold;
}

.divForgot {
    display:none;
    width: 400px;
    left: 50%; /* Centre on screen */
    top: 30%;
    margin-left: -200px; /* 1/2 of the width */
    border: 1px solid black;
    padding: 0px 0px 20px 50px;
    background-color: #eee;
    position: fixed;
    z-index:100; /* On top of shadow mask */
}
.divShadowMask {
    display:none;
    position: fixed;
    top: 100px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index:99; /* Just below forgot div */
    background-color: #444;
    opacity: 0.8;
}
.divPageTitle {
    font-size: 18pt;
    color: white;
    padding-bottom:20px;
}

table {
    background-color: #eee;
    border-collapse: separate; /* override bootstrap -> collapse */
}
.tblGrid {
    width: 1060px;
}
.tblForgot td {
    padding-bottom:5px;
}
th {
    border: 0px;
    padding:5px;
    font-size: 1.2em;
}
td {
    padding: 5px;
}
td.not-editable {
    border: 0px;
    background-color: white;
}
td.editable {
    border: 1px solid #ffbb00;
    background-color:lightgoldenrodyellow;
    padding: 0px;
}
td.totalcol {
    border: 0px;
    background-color: oldlace;
    color:blue;
}
.totalcol_header {
    color: blue;
}

td.error {
    border: 0px;
    background-color: #ff5050;
}
input.not-editable {
    border: 0px solid;
    background-color:transparent;
    width: 100%;
    padding: 0px;
}
input.editable {
    border: 0px solid #ffbb00;
    background-color:lightgoldenrodyellow;
    width: 100%;
    padding: 0px 5px 0px 5px;
}
input.error {
    border: 0px solid #ffbb00;
    background-color: #ff5050;
    width: 100%;
    padding: 0px 5px 0px 5px;
}
.divForm { /* Main form for entering user accounts and reporting periods */
    padding: 10px;
    background-color: white;
    color: black;
}
.panelInfo {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    line-height: 20px;
    font-size: 1.2em;
    background-color: lightgoldenrodyellow;
}
.btnPanel { /* Fixed to bottom of browser */
    position: fixed;
    bottom: 10px;
    width: 1060px;
    margin: auto;
    height: 50px;
    padding-top: 10px;
    padding-left: 20px;
    background-color:darkgray;
}
.btnPanelPadding { /* Fixed to bottom of browser */
    position: fixed;
    bottom: 0px;
    width: 1060px;
    height: 10px;
    background-color:rgb(52,152,219);
}
.btnPanelFloat {
    width: 100%;
    margin: auto;
    height: 50px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color:lightgray;
}
.trBold {
    font-weight: bold;
}
.tdSection {
    background-color: lightgrey;
}
.tdCurrYear {
    border: 0px solid #ffbb00;
    background-color:lightgoldenrodyellow;
    padding: 1px 8px 1px 5px;
}
#timer {
    color: white;
    background-color: #f22;
}
.btn:hover {
    text-decoration: underline;
    filter: brightness(130%);
}
.btn-float-right {
    float: right;
    margin-left: 10px;
}
.fixedHeader th {
	background-color:#eee;
	position: sticky;
	top: 0px;
}