body, h1, h2, h3, p, li, label, blockquote, legend, a, a:link, a:visited, a:hover, header, #headerTitle, #headerSubtitle, main, footer, img, .caption, #welcome, .note, .note .header, .redBold, .quote, table, th, td, form {
   margin: 0;
   padding: 0;
   border-width: 0;
}

/* Sans-serif */
body, p, dt, dd, li, label, blockquote, a, main, footer, .note, .note .header, input, select, textarea, button, .quote {
   font: 100%/1.4 verdana, arial, helvetica, sans-serif;
}

* {
   box-sizing: border-box;
}

:root {
   scrollbar-color: #9aa6bc #ffffff;
}

html {
   scroll-behavior: smooth;
}

main {
   display: flow-root;
}

/* Label and forms! */
label {
   display: inline-block;
   color: #333;
   background-color: #eee;
   font-weight: bold;
   padding: 0.2em 0.5em;
   font-variant: small-caps;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.9em;
   border-top-right-radius: 0.1em;
   border: 1px solid #ddd;
}

.block {
   display: block;
   margin: 1.25em 0;
}

.block label + * {
   display: block;
}

input[type="checkbox"] {
   margin: 0;
   padding: 0;
   border-width: 0;
}

.tableWrapper {
   overflow: auto;
}

table {
   border-collapse: collapse;
   margin-bottom: 1em;
}

.toggleTable thead, .toggleTable tfoot {
   background: rgba(128,128,0, 0.1);
}

.toggleTable tbody tr:nth-child(2n + 1) {
   background: rgba(0,0,0, 0.05);
}

th {
   vertical-align: top;
   font-weight: bold;
   text-align: left;
}

th, td {
   margin: 0;
   padding: 0.5em;
}

button, a.buttonLink, input[type="submit"] {
   display: inline-block;
   color: black;
   background: #eee linear-gradient(#ccc, #eee, #ccc);

   text-decoration: none;
   text-align: center;
   justify-items: center;
   font-size: 1.2em;
   line-height: 1.1;
   font-weight: normal;
   font-family: verdana, arial, helvetica, sans-serif;

   margin: 0.1em;
   padding: 0.3em;
   min-width: 48px;
   cursor: pointer;

   border: 1px solid gray;
   border-radius: 0.2em;

   position: relative;
   overflow: hidden;
}

button::after, .buttonLink::after, input[type="submit"]::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: -50%;
   right: -50%;
   background: transparent linear-gradient(to bottom, rgba(128,128,128,0), rgba(255,255,255, 0.5), rgba(128,128,128,0));
   transform: translateX(-100%) rotateZ(-60deg);
}

button:hover::after, a.buttonLink:hover::after, input[type="submit"]:hover::after,
button:focus::after, a.buttonLink:focus::after, input[type="submit"]:focus::after {
      animation: sheen 0.5s forwards linear;
}

@supports (display: inline-grid) {
   button, a.buttonLink, input[type="submit"] {
      display: inline-grid;
   }
}

a.buttonLink:visited, a.buttonLink:hover, a.buttonLink:focus {
   color: black;
}

button > span, a.buttonLink > span, input[type="submit"] > span {
   font-size: 0.8em;
}

button > *, a.buttonLink > *, input[type="submit"] > * {
   display: block;
   margin: 0 auto;
}

button img, a.buttonLink img {
   margin: 0 auto;
}

button.selected, a.buttonLink.selected, input[type="submit"].selected, a.selected:link {
   color: #333;
   font-weight: bold;
   border-color: #666 !important;
   background: #ccf linear-gradient(#bbe, #e0e0ff, #bbe);
}

button:hover, a.buttonLink:hover, input[type="submit"]:hover, a.selected:hover {
   border-color: black !important;
   background: #ff8 linear-gradient(#dd8, #ffc, #dd8);
   text-decoration: underline;
   box-shadow: 0 0 0.2em black;
}

.buttonPanel {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: 0.5em 0;
}

.buttonPanel button, .buttonPanel a.buttonLink {
   margin: 0;
   padding: 0.2em;
   border-radius: 0;
   text-align: center;
}

@media all and (min-width: 30em) {
   button, a.buttonLink, input[type="submit"], .buttonPanel button, .buttonPanel a.buttonLink {
      grid-template-areas: ". .";
      justify-items: start;
      align-items: center;
      margin: 0.1em;
      border-radius: 0.2em;
      font-size: 1.2em;
   }
}

.go, .cancel, .preview, .edit, .save {
   display: inline-block !important;
   vertical-align: middle !important;
   font-size: 1.3em !important;
   font-weight: normal !important;
   padding: 0.5em 0.5em 0.5em 2.25em !important;

   background-position: 0.3em 50% !important;
   background-repeat: no-repeat !important;
   background-size: 1.5em, 100% !important;
   border: 1px outset gray !important;
}

.go:hover, .cancel:hover, .preview:hover, .edit:hover, .save:hover {
   background-position: 0.2em 50% !important;
   background-repeat: no-repeat !important;
   background-size: 2em, 100% !important;
}

.go {
   color: #3B7100 !important;
   background-image: url(/css/images/ok-icon.png) !important;
}

.go:hover {
   border-color: green !important;
}

.cancel {
   color: #B3310F !important;
   background-image: url(/css/images/cancel-icon.png) !important;
   text-decoration: none !important;
}

.cancel:hover {
   border-color: red !important;
   text-decoration: underline !important;
}

select {
   background-color:white; /* Needed for Opera to work correctly */
}

input:focus, select:hover {
   background-color:#eef;
}

/* Bold these items */
a, a:link, a:visited, a:hover, #header, #headerSubtitle, label, legend, .caption, .redBold {
   font-weight: bold;
}

#errorList {
   position: relative;
   margin: 1em 0;
   background: rgba(255,0,0, 0.1);
   border-radius: 0.1em;
   padding: 0.25em 0 0.5em 0.5em;
}

#errorList > div {
   display: table-cell;
   vertical-align: middle;
   padding-right: 0.5em;
}

#errorList ol.hide {
   list-style: none;
   margin: 0;
   padding: 0;
}

#errorList * {
   color: #333;
   background: transparent none;
   font-weight: normal;
   text-decoration: none;
   margin: 0.3em 0;
   border: none;
}

#errorList h2 {
	padding: 0;
	text-shadow: none;
	font-weight: bold;
}

#errorList a:hover, #errorList a:focus {
   text-decoration: underline;
}

.error {
   background: #fdd none;
   box-shadow: inset 0 0 0.1em 0.1em red;
}

.error+input, .error+textarea, .error+select, .error+div, .error+span+input, .error>legend {
   background: #fee none;
   box-shadow: 0 0 0.1em 0.1em #f99;
}

.redBold {
   color: red;
   font-weight: bold;
}

/* Non-content background color */
body {
   color:#036;
   text-shadow:1px 1px 1px white;
   background-color:#c84;
   clear:both;
}

/**** NEW MENU SETUP!!! *****/
nav.mainMenu {
   border-bottom: 1px black solid;
   z-index: 101;
}

nav.mainMenu ul {
   display: flex;
   flex-wrap: wrap;
   white-space: nowrap;
   list-style: none;
   padding: 0;
   margin: 0;
   z-index: 101;
}

nav.mainMenu ul li {
   flex: 1 0 50%;
}

@media all and (min-width:20em) {
   nav.mainMenu ul li {
      flex: 1 0 25%;
   }
}

nav.mainMenu a {
   padding: 0 1em 0.3em;
}

nav.mainMenu a, nav.mainMenu a:link, nav.mainMenu a:visited {
   color: white;
   text-shadow: 1px 1px 1px black;
   background: #522921 linear-gradient(#aa7c6c, #522921);
   background-repeat: repeat-x;
   display: block;
   text-align: center;
   width: 100%;
   height: 2em;
   font-weight: normal;
   text-decoration: none;
   font-size: 1em;
   line-height: 2em;
}

nav.mainMenu .highlight, nav.mainMenu .highlight a, nav.mainMenu .highlight a:link, nav.mainMenu .highlight a:visited {
   color: yellow;
   text-shadow: 1px 1px 1px black;
   background: #945a4a linear-gradient(#c48e78, #945a4a);
}

nav.mainMenu a:hover, nav.mainMenu .highlight a:hover {
   color: yellow;
   text-shadow: 1px 1px 1px black;
   background: #082910 linear-gradient(#187831, #082910);
   text-decoration: none;
}

h1, h2, h3 {
   font-family:Times New Roman, Times, serif;
   font-weight:900;
   color:maroon;
   text-wrap: balance;
}

h1 {
   margin:0 0 4mm;
   font-size:2em;
   line-height:1em;
   border-bottom:1px #ccb solid;
}

h2 {
   margin:0 0 2mm;
   padding:2px;
   font-size:1.7em;
   line-height:1em;
   background:#f6f6f6 linear-gradient(to right, #c4babbff, #c4babb00);
}

h3 {
   margin:0px 0px 5px;
   font-size:1.5em;
   line-height:1em;
}

p {
   margin:0px 0px 1.4em;
}

blockquote {
   padding:0 2em 2em;
}

fieldset {
   padding:0 1em 1em;
   margin:0 0 1em;
}

legend {
   font-size:1em;
   margin:0 0 0.9em;
}

a, a:link {
   color:#630;
   text-decoration:underline;
}

a:visited {
   color:#a60;
}

a:hover {
   background-color:#eee;
   text-decoration:underline;
}

input[type="text"], input[type="email"], input[type="url"], input[type="file"], input[type="search"], input[type="password"], textarea, 
input[type="date"], input[type="time"], input[type="datetime"], input[type="number"], select {
   background-color: #e0e0e0;
   border: 1px solid  #888;
   font-size: 1.1em;
   margin: 0;
   padding: 0.2em 0.3em 0.3em;
}

input[type="text"], input[type="email"], input[type="url"], input[type="file"], input[type="search"], input[type="password"] {
   width: 100%;
   max-width: 40em;
}

textarea {
   width: 40em;
   max-width: 100%;
   height: 8em;
   max-height: 40vh;
}

@media all and (min-width: 40em) {
   textarea {
      height: 16em;
   }
}

.logoJpg, .logoGif {
   width:174px;
   height:184px;
   background:transparent url(/css/asskickin.jpg);
}

.logoGif {
   background:transparent url(/css/asskickin.gif);
}

header {
   border: 1px solid #333;
   border-width: 1px 0;
   color: maroon;
   font-size: 1.5em;
   line-height: 1;
   font-family: "Lucida Blackletter", "Harrington", "Tempus Sans ITC", "Monotype Corsiva", "Blackadder ITC", "Mistral", "French Script MT", "Brush Script MT", "Curlz MT", "Bradley Hand ITC", "Times New Roman", serif;
   margin: 5px 0 10px;
   padding: 13px 0 10px;
   text-align: center;
   background: #edc url(/css/titlebar.jpg);
   height: 63px;
}

@media all and (min-width:25em) {
   header {
      font-size: 2em;
   }
}

#headerTitle {
   background-color: #fffded;
   border: 1px black solid;
   padding: 0.1em 0.51em;
   border-radius: 0.25em;
}

#headerSubtitle {
   line-height:1em;
   font-size:1.4em;
   font-family:Times New Roman, Times, serif;
   color:white;
   text-shadow:1px 1px 1px black;
   text-align:center;
   margin:3px 0 0;
   letter-spacing:1px;
   word-spacing:3px;
}

main {
   padding:20px 20px 0;
   margin:0;
   background-color:white;
}

footer > * {
   clear: both;
   margin: 2em;
   text-align: center;
   color: black;
}

footer > nav {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 3em;
}

ul, ol, ul.paragraph li, ol.paragraph li {
   margin-top:0;
   margin-bottom:10px;
}

.redBold {
   color:red;
   font-weight:900;
   margin:0 0 10px;
}

.caption {
   margin:5px;
   text-align:center;
   page-break-inside:avoid;
}

#welcome {
   color:#ccffff;
   position:absolute;
   right:5px;
   top:5px;
}

.bgLight, .alternateBgColor { /* TODO: Remove .alternateBgColor when it's removed from all code */
   background-color:#eed;
}

.bgMid {
   background-color:#ddc;
}

.bgDark {
   background-color:#ccb;
}

.thinBorder {
   border:1px black solid;
}

.icon {
   border:none;
   padding-left:2px;
   padding-right:2px;
}

.floater {
   float:left;
   margin-right:1em;
}