html, body {
	font-family: Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
body > * {
	padding-inline: 10px;
}

.maintenance {
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	background-color: #C00;
	padding: 20px 10px;
	display: flex;
	align-items: center;
	justify-content:center;
}

/* Style the header with a dark background and some padding */
.header {
  background-color: #4B0082;
  padding: 20px 10px;
  display: flex;
  align-items: center;
}

.first-start {
	flex: 1;
	text-align: start;
}
.between-center {
	flex: 1;
	text-align: center;
}
.last-end {
	flex: 1;
	text-align: end;
}


/* Style the header links */
.header a {
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Style the links that appear as buttons */
.buttonLink {
	background-color: dodgerblue;
	color: white;
}
.buttonLink.red {
	background-color: red;
}

/* Change the background color on mouse-over */
.buttonLink:hover {
  background-color: #ddd;
  color: black;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
  margin-bottom: 0;
}

.underTitle {
  text-align: center;
  margin-top: 2px;
  margin-bottom: 20px;
}

table, th, td {
	word-wrap: break-word;
	padding-inline-start: 15px;
	text-align: start;
}
th {
	vertical-align: bottom;
}
td.season {
	word-wrap: normal;
	white-space: nowrap;
}
th.date, th.count {
	text-align: end;
}
td.date, td.count {
	word-wrap: normal;
	white-space: nowrap;
	text-align: end;
}

div.seasons {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	border: 1px outset black;
	margin: 10px;
}
div.season {
	/*
	Columns will begin this wide, and then, after fitting as many as possible,
	they will be stretched to fill the available space.
	*/
	flex: 1 0 340px;
	border: 1px inset black;
	padding: 5px 5px 5px 15px;
}

.season-row-header > th {
	/*19px line-height, 1px default padding, (21px of the spacing row),
	 then 2px border-spacing and 1px of padding that we replace.*/
	padding-block-start: 24px;
}

.mainlinks div {
   margin-bottom: 10px;
}
.mainlinks a {
    font-weight: bold;
}

.mainFormInput {
    font-size: 20px;
    width: 300px;
    margin-bottom: 10px;
    border-color: black; /* Safari bug */
}

.mainFormSelect {
    font-size: 22px;
    width: 308px;
    margin-bottom: 10px;
    margin-top: 1px;
    border-color: black; /* Safari bug */
}

.mainFormInputButton {
    font-size: 20px;
    margin-bottom: 10px;
    border-color: black; /* Safari bug */
    background-color: #f2f2f2; /* Safari bug */
    color: black;  /* Apple tablet bug */
}

.mainFormInputButtonForSelect {
    font-size: 20px;
    margin-bottom: 10px;
    border-color: black; /* Safari bug */
    background-color: #f2f2f2; /* Safari bug */
    color: black;  /* Apple tablet bug */
}

.cu-form {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	align-items:stretch;
}
.cu-form-actions {
	width:150px;
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
.cu-form-actions input {
	box-sizing:border-box;
	width:100%;
}
.cu-form-actions > iframe[name="response"] {
	border:none;
}
.cu-form-field-tall {
	display:flex;
	flex-direction:column;
}
.cu-form-field-tall > select[size],
.cu-form-field-tall > textarea {
	flex-grow:1;
}
.cu-form-fields-column {
	width:200px;
}
.cu-form-fields-column > * {
	display:block;
	margin-block-end:20px;
}
.cu-form-fields-column input {
	box-sizing:border-box;
	width:100%;
}
.cu-form-update {
	display:none;
}
.cu-form-updating > .cu-form-create {
	display:none;
}
.cu-form-updating > .cu-form-update {
	display:initial;
}

.section h4 {
    margin-bottom: 2px;
}

.section {
    margin-bottom: 20px;
}

.tile-container {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

.tile {
	margin-inline-end: 10px;
	margin-block-end: 10px;
}

.tile-link {
	display: block;
}
.tile-image {
    display: block;
    height: 375px;
    width: 300px;
    object-fit: contain;
    object-position: left top;
}

.tile-headshot {
    display: block;
    height: 200px;
    width: 160px;
    object-fit: contain;
    object-position: left top;
}

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