body { font-family: 'Source Sans Pro', sans-serif; font-size: 13pt; color: black; margin: 0; }
#header, #main, #footer { padding: 1em; }
#footer { text-align: center; }
#footer p { font-size: 0.9em; color: #666666; margin: 0; }

#menu { padding: 0 1em; font-family: 'Montserrat', sans-serif; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li { display: inline-block; margin: 0 1em 1em; background-color: #870000; color: #ffffff; padding: 0.5em; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-image: linear-gradient(to bottom, #B00000, #870000); }
#menu li:hover { background-image: linear-gradient(to bottom, #870000, #540000); }
#menu a { text-decoration: none; font-weight: bold; color: #ffffff; }

#main { border-bottom: 2px solid #870000; border-top: 2px solid #870000; }

h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }
h1 { font-size: 3.3em; margin: 0; }
h2 { font-size: 2.1em; margin: 0 0 0.4em 0; }
h3 { font-size: 1.7em; margin: 0 0 0.4em 0; }
h4 { font-size: 1.4em; margin: 0 0 0.4em 0; }
h5 { font-size: 1.2em; margin: 0 0 0.4em 0; }
h6 { font-size: 1.1em; margin: 0 0 0.4em 0; }

div.leftindent { margin-left: 2em; }

table { width: 100%; border-spacing: 0px; }
th { text-align: left; }
th.right { text-align: right; }
tbody > tr:nth-child(odd) { background-color: #dddddd; }
td, th { padding: 0.3em 0.6em; }
tfoot > tr > td { text-align: center; font-weight: bold; }
thead > tr, tfoot > tr { background-color: #870000; color: #ffffff; }
thead > tr { text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-image: linear-gradient(to bottom, #B00000, #870000); }
tfoot > tr { text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-image: linear-gradient(to bottom, #870000, #B00000); }
tr.unpaid td { color: red; font-weight: bold; }
tr.overpaid td { color: blue; font-weight: bold; }

.error { color: #870000; font-weight: bold; }
.error input[type="text"], .error textarea, .error input[type="password"] { outline: 2px #870000 solid; }
.overflow { overflow-x: auto; margin-bottom: 1em; }

form { margin-bottom: 1em; }

select.ui-datepicker-month, select.ui-datepicker-year, #main input[type="text"], #main input[type="password"], #main textarea, #main select { border: 1px black solid; font-size: 1em; padding: 7px; margin: 0px; }
input:focus, textarea:focus, select:focus { outline: 2px #870000 solid; }
#main input[type="text"], #main input[type="password"] { width: 30%; }
input[type="checkbox"], input[type="radio"] { transform: scale(1.5) !important; margin-right: 0.5em; margin-bottom: 0.8em; }
#main textarea { width: 80%; }
#main input[type="submit"], #main input[type="image"] { padding: 0px; border: 0px; background-color: #fff; }
#main input[type="submit"], #main input[type="image"], #main button, #systems-header1-img img, #systems-header2-img img, #systems-header3-img img { max-width: 100%; }
#main button { padding: 0.5em; border: none; font-family: 'Montserrat', sans-serif; font-size: 1em; font-weight: bold; color: #ffffff; background-color: #870000; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-image: linear-gradient(to bottom, #B00000, #870000); }
#main button:hover { background-image: linear-gradient(to bottom, #870000, #540000); }
#main label { font-weight: bold; }

.comment { font-size: 0.9em; color: #870000; padding-top: 0.1em; }

.ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar thead { display: none; }
div.ui-datepicker { background-color: #fff; padding: 5px; margin-bottom: 0; border: 2px solid #870000; }
.ui-datepicker div { border: none; padding: 0 0 2px 0; margin-bottom: 0; text-align: center; }
.ui-datepicker-calendar td { text-align: right; }

div#main a { text-decoration: underline; font-weight: bold; color: #870000; }

@media only screen and (max-width: 420px) {
    #main input[type="text"], #main input[type="password"] { width: 90%; }
    #main input[type="submit"], #main input[type="image"], #main button { max-width: 90%; }
}
@media only screen and (max-width: 799px) {
    #main textarea { width: 90%; }
}