/* Set everything to have a margin, padding, and border of 0 so the display on all browsers will look the same. Different browsers tend to have different defaults. */
html, body, div, h1, h2, h3, h4, h5, h6, p, dl.wiki, .wiki dt, .wiki dd, li, label, blockquote, legend, nav.main, a, header, footer, figure, #headerBar, #headerTitle, #headerSubtitle, #copyright, img, #welcome, .quote, form, pre, hr {
   margin: 0;
   padding: 0;
   border-width: 0;
}

:root {
   --h-color: #262673;
   --h1-bg: transparent none;
   --h1-padding: 0;
   --body-color: black;
   --content-bg: white none;
   --content-bg-size: initial;
   --content-padding-bottom: 0;
   
   --img-filter: none;
   --a-color: #069;
   --a-visited-color: #09c;
   --a-hover-color: maroon;
   --a-hover-bg: rgba(128,128,128, 0.3) none;

   --logo-width: 154px;
   --logo-height: 200px;
   --logo-image: url(/css/normal/logo.webp);

   --header-color: white;
   --header-color-text-shadow: none;
   --header-color-bg: #28006a none;
   --header-a-color: yellow;
   --header-a-text-shadow: none;
   --header-a-bg: transparent none;
   --header-a-hover-color: yellow;
   --header-a-hover-text-shadow: var(--dark-text-shadow);
   --header-a-hover-bg: maroon none;
   --header-bg: var(--header-color-bg);
   --header-bg-size: auto;
   --header-padding: 0 0 0.75em;
   --header-bar-border-color: black;
   --header-bar-border-width: 1px 0;
   --header-bar-height: 63px;
   --header-bar-bg: #ddf none;
   --header-title-bg: #fffded none;
   --header-title-border: 1px solid black;
   --header-title-height: 54px;
   --header-subtitle-color: white;
   --header-subtitle-text-shadow: var(--dark-text-shadow);
   --header-subtitle-bg: transparent none;

   --nav-color: #a7ccf1;
   --nav-a-color: #00264d;
   --nav-a-text-shadow: var(--light-text-shadow);
   --nav-sub-bg: #fffff8 none;
   --nav-sub-a-color: var(--nav-a-color);
   --nav-sub-a-text-shadow: var(--nav-a-text-shadow);
   --nav-a-hover-color: yellow;
   --nav-a-hover-text-shadow: var(--dark-text-shadow);
   --nav-a-hover-bg-color: #3108ad;
   --nav-hr-width: 70%;
   --nav-hr-height: 1px;
   --nav-hr-bg: var(--darkest-color);
   --nav-hr-border-width: 0;
   --nav-hr-border-color: var(--nav-hr-bg);

   --scrollbar-color: #9aa6bc #ffffff;

   --light-text-shadow: 1px 1px 1px white;
   --dark-text-shadow: 1px 1px 1px black;

   --lighten-color: rgba(255,255,255, 0.05);
   --lighter-color: rgba(255,255,255, 0.1);
   --lightest-color: rgba(255,255,255, 0.2);
   --darken-color: rgba(0,0,0, 0.05);
   --darker-color: rgba(0,0,0, 0.1);
   --darkest-color: rgba(0,0,0, 0.2);
   --shade-bg: #eef none;
   --table-border-style: 1px dotted #444;

   --attemptHighColor: red;
   --attemptMidColor: hsl(50, 100%, 20%);
   --attemptLowColor: blue;
   --attemptZeroColor: black;
}

a {
   color: var(--a-color);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   background: transparent none;
   text-shadow: none;
   border-radius: 0.15em / 35%;
   padding: 0.05em;
   border: 1px solid transparent;
   display: inline;
}

a:visited {
   color: var(--a-visited-color);
   background: transparent none;
   text-shadow: none;
}

a:hover, a:focus {
   color: var(--a-hover-color);
   background: var(--a-hover-bg);
   text-decoration: underline;
   text-shadow: none;
   border: 1px solid rgba(0,0,0,0.5);
}

a[target="_blank"]::after {
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
   margin: 0 3px 0 5px;
}

* {
   max-width: 100%;
   box-sizing: border-box;
   hyphens: manual;
}

/* Apply sans-serif fonts to the elements that should have it. Everything else will default to a serif font. */
html, body, textarea {
   font: 100%/1.4 verdana, arial, helvetica, sans-serif;
}

html {
   position: relative;
   hanging-punctuation: first last;
   /* color-scheme: dark light; */
}

@media (prefers-reduced-motion: no-preference) {
   html, :has(:target) {
      scroll-behavior: smooth;
   }
}

body {
   color: var(--body-color);
   background: var(--content-bg);
   text-shadow: none;
   letter-spacing: 0.02em;
   position: relative;
}

main {
   display: flow-root;
}

main * {
   filter: var(--img-filter);
}

body > header, body > footer {
   color: var(--header-color);
   background: var(--header-color-bg);
   text-shadow: var(--header-color-text-shadow);
   clear: both;
   padding: 0 0 0.75em;
}

body > header {
   padding: var(--header-padding);
   background: var(--header-bg);
   background-size: var(--header-bg-size);
}

body > header a, body > header a:visited,
body > footer a, body > footer a:visited {
   color: var(--header-a-color);
   text-shadow: var(--header-a-text-shadow);
   background: var(--header-a-bg);
   text-decoration: none;
   border-radius: 50% 20% 50% 20% / 50% 50% 50% 50%;
   padding: 0.25em 0.5em;
}

body > header a:hover, body > header a:visited:hover,
body > header a:focus, body > header a:visited:focus {
   color: var(--header-a-hover-color);
   text-shadow: var(--header-a-hover-text-shadow);
   background: var(--header-a-hover-bg);
   box-shadow: inset 0 0 0.2em gray, 1px 1px 1px  black;
}

body > footer a:hover, body > footer a:visited:hover,
body > footer a:focus, body > footer a:visited:focus {
   box-shadow: inset 0 0 0.2em gray, 1px 1px 1px  black;
}

::selection {
   color: black;
   background: yellow;
}

#mapCanvas * {
   max-width: initial;
}

#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;
   max-width: 60em;
}

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

#errorList .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;
}

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

del * {
   text-decoration: line-through !important;
}

#skipToContent a {
   position: absolute;
   top: 0;
   z-index: -99999999;
   color: white;
   text-shadow: 0 1px 1px black;
   font-weight: normal;
   background: #800000;
   border: 1px solid white;
   border-radius: 0 0 0.2em 0;
   padding: 0.5em;
}

#skipToContent a:focus {
   z-index: 999999;
}

/***************************************************************************/
/* Form formatting. The following section changes how various sections of  */
/* a form look and are displayed                                           */
/***************************************************************************/

label:not(.checkbox), legend {
   color: black;
   text-shadow: 0 0 1px white;
   background: transparent radial-gradient(ellipse at top right, rgba(255,255,255, 0), rgba(44,44,97, 0.25));
   font-size: 0.9rem;
   max-width: 90%;
   font-variant: small-caps;
   display: inline-block;
   white-space: nowrap;

   padding: 0.15em 1.8em 0.15em 0.5em;
   border: 1px solid #888;
   border-width: 1px 1px 0;
   border-radius: 0.25em 1em 0 0 / 0.25em 2em 0 0;
   border-top-right-radius: 1em 2em;
}

legend {
   border-width: 1px;
}

label:not(.checkbox)+span {
   font-style: italic;
   font-size: 0.9rem;
}

label:not(.checkbox)+input, label:not(.checkbox)+select, label:not(.checkbox)+textarea, label:not(.checkbox)+div,
label:not(.checkbox)+span+input, label:not(.checkbox)+span+select, label:not(.checkbox)+span+textarea, label:not(.checkbox)+span+div {
   display: block;
   margin: 0 0 0.2em;
   font-size: 1.1rem;
}

label:not(.checkbox)+div, label:not(.checkbox)+span+div {
   background: rgba(0,0,0, 0.1) none;
   border: 1px solid gray;
   padding: 0.2em;
   margin-bottom: 0.2em;
   border-radius: 0 0.1em 0.1em 0.1em;
}

.checkbox {
   background: transparent none;
   padding: 0.2em 0;
   display: block;
   cursor: pointer;

   border: 1px solid transparent;
   border-radius: 0.2em;
}

.checkbox:hover,
.checkbox:focus {
   background: rgba(255,255,128, 0.4) none !important;
   border: 1px solid gray;
}

.checkbox input {
   margin: 0.5em;
}

.checkbox > * {
   display: table-cell;
   vertical-align: middle;
   padding: 0.15em;
}

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

.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;
}

select {
   display: inline-block;
   font-size: 1.1rem;
}

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;
   border-radius: 0 0.2em 0.2em 0.2em;
   font-size: 1.3rem;
   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: 35em;
}

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

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

input[type="color"] {
   width: 8em;
   height: 2em;
}

.inline {
   display: inline-block;
   vertical-align: middle;
   margin: 0.5em 1em 0.3em 0;
   max-width: 100%;
}

.inline.top {
   vertical-align: top;
}

.inline.bottom {
   vertical-align: bottom;
}

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

.table {
   display: table;
   margin: 1em 0;
}

.table > div {
   display: table-row;
}

.table > div > * {
   display: table-cell;
   padding: 0.4em 0;
}

.table > div:not(:last-child) > * {
   border-bottom: var(--table-border-style);
}

.table > div > * + * {
   padding-left: 1em;
}

.columnList {
   column-width: 15em;
   gap: 3em;
   margin: 1em 0;
}

.columnList > div {
   display: grid;
   grid-template-columns: auto 1fr;
   justify-items: end;

   margin: 0.2em 0;
   border-bottom: 1px dotted #666;
}

.columnList > div > *:first-child {
   justify-self: start;
}

.largeTable {
   display: block;
}

.largeTable > div {
   border-bottom: var(--table-border-style);
}

.largeTable > div:only-child {
   border-width: 0;
}

.largeTable .label { 
   display: block;
}

.largeTable > div > span {
   display: inline-block;
}

.label, .table > div > *:first-child {
   font-variant: small-caps;
   font-size: 0.95rem;
   font-weight: 500;
   padding-right: 0.4em !important;
}

.tableCell {
   display: table-cell;
   padding: 0.1em 0.25em;
   vertical-align: middle;
}

.dragControl:hover, .dragControl:focus {
   background: rgba(0,0,0, 0.05);
   border-color: rgba(0,0,0, 0.2);
}
 
.dragging, .draggable.dragging {
   opacity: 0.6;
   border-color: rgba(255, 127, 0, 0.5);
}

.draggable.tab {
   padding: 0.3em 0.5em 0.4em;
   border: 1px solid rgba(0,0,0, 0.1);
}

.draggable.tab::after {
   content: "⠿";
   color: #888;
   position: absolute;
   right: 0;
   width: 1em;
   height: 50%;
   padding-right: 0.3em;
}

.help {
   cursor: help;
}

.noGap {
   margin-top: 0;
}

wassa {
   color: white;
   background: #D5C6A7 linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #f0f);
   text-shadow: 0 1px 1px black, 0 -1px 1px black;

   border: 1px solid #191409;
   border-radius: 0.5em;

   display: inline-block;
   vertical-align: middle;
   font-weight: bold;
   padding: 0.1em 0.3em;

   transition: all 0.5s;
}

wassa:hover, wassa:focus {
   font-size: 2rem;
   line-height: 1.2;
   padding: 1em;
   transform: rotate(10deg);
}

spoiler {
   display: inline-block;
   color: #aaa;
   background: currentColor;
   border: 1px dashed #000;
   transition: 0.2s ease-in;
}

spoiler a:link, spoiler a:visited {
   color: inherit;
}

spoiler::before {
   color: white;
   background: #aaa none;
   text-shadow: 0px 1px 1px black, 0 -1px 1px black;
   content: 'Spoiler: ';
}

spoiler:hover, spoiler:active, spoiler:focus {
   color: inherit;
   background: transparent none;
   border: 1px dotted black;
}

input, progress {
   accent-color: var(--nav-color);
}

/* This formats a checkbox. It's not included at the line at the top of the page because IE6 does not allow this syntax to specify just a checkbox, and therefore it will ignore the *entire* line, which is bad. So I needed input type selectors on a line of their own. */
input[type="checkbox"] {
   margin: 0;
   padding: 0;
   border-width: 0;
}

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

input:focus, textarea:focus, select:focus {
   background: #ffb none;
}

.tableWrapper {
   max-width: 100%;
   overflow: auto;
   margin: 0 0 1em;
}

table {
   border-collapse: collapse;
   border: none;
   padding: 0;
   margin: 0 0 1em;
}

.tableWrapper table {
   margin: 0;
}

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

th, td {
   padding: 0.3em;
}

.icon, .buttonLink img { /* Chrome seems to shrink icons in a table if the table isn't wide enough--even when we explicitly set the width and height of the image. So we force the images wider here. */
   max-width: initial;
}

table.allRules th, table.allRules td {
   border: 1px solid black;
}

hr {
   border-top: 1px dotted gray;
   width: 90%;
   margin: 1em auto;
}

sup {
   font-size: 0.5rem;
}

/* Bold these items */
a, #headerBar, .wiki dt {
   font-weight: bold;
   text-shadow: none;
}

details {
   padding: 0;
}

details.selected {
   background: #fdf none;
}

details summary {
   cursor: pointer;
   padding: 0.3em;
}

details summary:hover,
details summary:focus {
   background: #ffa radial-gradient(#ff8, #ffa);
}

.footnote {
   font-size: 0.85rem;
   line-height: 1.25;
}

.wiki dd { /* Formatting for the answers in the help pages */
   margin-bottom: 1em;
}

.columnized {
   column-width: 20em;
}

figure {
   margin: 1em 0;
}

li, .noBreaks, figure, .caption, .googleAd, .adsbygoogle, .checkbox {
   page-break-inside: avoid;
   break-inside: avoid;
}

.tt {
   font-family: monospace;
}

.announcements {
   display: flex;
   flex-direction: column;
   border-top: 1px solid #666;
}

.announcements > div {
   color: maroon;
   background-color: #ffd;
   border-bottom: 1px solid #666;
   text-align: center;
   padding: 0.5em;
}

#newMessages a:hover,
#newMessages a:focus {
   background: #ffb;
   box-shadow: 0.1em 0.1em 0.4em #888;
   text-decoration: underline;
}

/***********************************/
/* Menubar formatting              */
/***********************************/
nav.main {
   width: 100%;
   border-top: 1px solid #444;
   background: var(--nav-color) linear-gradient(to bottom, rgba(255,255,255, 0.3), rgba(255,255,255, 0.1), transparent, transparent, transparent);
}

nav.main ul {
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
}

nav.main ul li a, nav.main ul li a:link, nav.main ul li a:visited {
   color: var(--nav-a-color);
   text-shadow: var(--nav-a-text-shadow);
}

nav.main ul ul a, nav.main ul ul a:link, nav.main ul ul a:visited {
   color: var(--nav-sub-a-color);
   text-shadow: var(--nav-sub-a-text-shadow);
}

nav.main ul li a:hover {
   color: var(--nav-a-hover-color);
   text-shadow: var(--nav-a-hover-text-shadow);
   /* background: #3108ad linear-gradient(#317BF7, #3108AD); */
   background: var(--nav-a-hover-bg-color) linear-gradient(var(--lightest-color), transparent, transparent);
}

nav.main.topMenu > ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
}

nav.main.bottomMenu > ul {
   display: flex;
   overflow: auto;
}

nav.main li {
   margin: 0;
   padding: 0;
   position: relative;
}

nav.main > ul > li:hover > a,
nav.main > ul > li:focus > a {
   border: 1px solid #111;
}

nav.main.topMenu > ul > li {
   flex: 1 1 auto;
   max-width: 15em;
}

nav.main.bottomMenu > ul > li {
   width: calc(100% / 7);
   min-width: 9em;
}

nav.main.bottomMenu > ul > li+li {
   border-left: 1px solid rgba(198,198,198, 0.8);
}

nav.main a {
   display: block;
   font-weight: normal;
   font-size: 1.1rem;
   font-family: serif;
   line-height: 1.2;
   text-align: center;
   text-decoration: none;
   border: 1px solid transparent;
   border-radius: 0;
   margin: 0;
   padding: 0.35em 0.3em 0.5em;
   background: transparent none;
}

nav.main ul ul {
   flex-direction: column;
   z-index: 1000;
   background: var(--nav-sub-bg);
}

nav.main.topMenu ul ul {
   display: none;
   position: absolute;
   top: 2.35em; /* In the "nav.main a", set to line-height + padding-top + padding-bottom */
   border: 1px solid rgba(0,0,0, 0.5);
   border-top: none;
   border-radius: 0 0 0.2em 0.2em;
   min-width: 8em;
}

nav.main.bottomMenu ul ul {
   height: calc(100% - 2.4em); /* Subtract the height of the main menu bar (equal to the "top" of nav.main.topMenu ul ul */
}

nav.main.topMenu ul li:hover ul,
nav.main.topMenu ul li:focus ul {
   display: block;
}

nav.main.bottomMenu ul li:hover ul,
nav.main.bottomMenu ul li:focus ul {
   background: rgba(255,255,255, 0.9);
}

nav.main > ul > li:hover > a:not(:hover),
nav.main > ul > li:focus > a:not(:focus) {
   background: #ffffff1a;
   border-color: #00000080;
}

nav.main ul ul a {
   padding: 0.3em;
   font-variant: normal;
   border: none;
}

nav.main hr {
   margin: 0.2em auto;
   border-width: var(--nav-hr-border-width);
   border-style: solid;
   border-color: var(--nav-hr-border-color);
   width: var(--nav-hr-width);
   height: var(--nav-hr-height);
   background: var(--nav-hr-bg);
}

/************* END OF MENU FORMATTING ********/

h1, h2, h3 {
   color: var(--h-color);
   font-family: "Times New Roman", Times, serif;
   font-weight: normal;
   text-shadow: none;
   text-wrap: balanced;
   clear: left;
   line-height: 1.2;
   background: transparent none;
}

h1 {
   background: var(--h1-bg);
   padding: var(--h1-padding);
   margin: 0 0 0.1em;
   font-size: 2.5rem;
   font-family: "Tempus Sans ITC", "Sylfaen", "Bradley Hand ITC", "Times New Roman", serif;
}

h2 {
   margin: 2em 0 0.2em;
   font-size: 2rem;
}

h2:first-child {
   margin-top: 0;
}

.border {
   border: 1px solid rgba(0,0,0, 0.25);
}

.frame h2 {
   margin: 0 0 0.25em;
}

.note > h2, .note > header {
   color: var(--h-color);
   font-variant: small-caps;
   border-top-right-radius: 0.25em;
   border-top-left-radius: 0.25em;
}

h3 {
   font-size: 1.5rem;
}

.widget {
   position: relative;
   overflow: auto;
   border: 1px solid var(--darkest-color);
   box-shadow: -0.1em 0.1em 0.1em var(--darkest-color);
}

.widget header {
   display: grid;
   grid-template-areas: "widgetTitle widgetControls";
}

.widget header h2 {
   grid-area: widgetTitle;
   justify-self: start;
   align-self: center;
   padding: 0.1em;
   font-variant: small-caps;
   font-weight: bold;
}

.widget header nav {
   grid-area: widgetControls;
   justify-self: end;
   align-self: center;
   white-space: nowrap;
}

.note .body {
   padding: 0.5em;
}

p, dt, li {
   margin: 0 0 1em;
   max-width: 80em;
   text-wrap: pretty;
}

dd {
   margin: 0 0 1.4em 3em;
   text-indent: 0;
}

blockquote {
   margin: 1em 3em;
   max-width: 80em;
}

.ellipse {
   width: 100%;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.pages {
   display: flex;
   flex-wrap: wrap;
   margin: 1em 0;
}

.pages a {
   padding: 0.5em 1em;
   text-decoration: none;
   font-size: 1.1rem;
   background: rgba(0,0,0, 0.1) none;
   transition: background-color 0.2s;
   border: 1px solid rgba(0,0,0, 0.3);
   border-radius: 0;
}

.pages a:first-child {
   border-radius: 0.2em 0 0 0;
}

.pages a:last-child {
   border-radius: 0 0 0.2em 0;
}

.pages a.active {
   color: white;
   background-color: #38803A;
   text-shadow: -1px 2px 1px black;
}

.pages a:hover:not(.active),
.pages a:focus:not(.active) {
   background-color: rgba(0,0,0, 0.2);
}

.pages a[disabled] {
   color: black;
   background-color: rgba(0,0,0, 0.01);
   border: 1px solid rgba(0,0,0, 0.2);
}

.logoBg { /* Formatting for a logo using JPG images */
   display: none;
   margin: 0 0.5em 0.5em;
   width: var(--logo-width);
   height: var(--logo-height);
   background-image: var(--logo-image);
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   border-radius: 0.5em;
}

@media screen and (min-width: 500px) {
   .logoBg {
      display: block;
   }
}

main { /* Formatting for the content section of a page */
   padding: 0.55em 0.25em var(--content-padding-bottom);
   border-width: 0;
   margin: 0;
   max-width: 100%;
   z-index: 0;
   position: relative;
   background: var(--content-bg);
   background-size: var(--content-bg-size);
}

@media all and (min-width: 30em) {
   main {
      padding: 0.5em 1em var(--content-padding-bottom);
   }
}

li > div:first-child > a:link {
   font-size: 1.1rem;
   line-height: 1.5;
   padding: 0.2em 0;
   text-decoration: none;
   display: inline;
}

.note:target {
   box-shadow: 0 0 0.3em 0.3em #848;
   margin-top: 1em;
   margin-bottom: 1em;
}

/* Links that are meant to look like buttons */
@keyframes sheen {
   100% {
      transform: translateX(100%) rotateZ(-60deg);
   }
}

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.2rem;
   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;
   overflow-wrap: normal;
}

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.9rem;
}

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

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,
button:focus, a.buttonLink:focus, input[type="submit"]:focus, a.selected:focus {
   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: 1em 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.2rem;
   }
}

.go, .cancel, .preview, .edit, .save {
   display: inline-block !important;
   vertical-align: middle !important;
   font-size: 1.3rem !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,
.go:focus, .cancel:focus, .preview:focus, .edit:focus, .save:focus {
   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, .go:focus {
   border-color: green !important;
}

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

.cancel:hover, .cancel:focus {
   border-color: red !important;
}

.preview {
   color: #0F31B3 !important;
   background-image: url(/css/images/preview-icon.png) !important;
}

.preview:hover {
   border-color: blue !important;
}

.edit {
   color: #808000 !important;
   background-image: url(/css/images/edit-icon.png) !important;
}

.edit:hover, .edit:focus {
   border-color: #585600 !important;
}

.save {
   color: #6B6B00 !important;
   background-image: url(/css/images/save-icon.png) !important;
}

.save:hover, .save:focus {
   border-color: #885600 !important;
}

#headerBar { /* Formatting for the main AQ header at the top of every page */
   color: #33c;
   background: var(--header-bar-bg);
   background-size: auto 100%;
   border-color: var(--header-bar-border-color);
   border-style: solid;
   border-width: var(--header-bar-border-width);
   text-align: center;
   height: var(--header-bar-height);
   vertical-align: middle;
   padding: 4px 0 6px;
   margin: 0.3em 0 0;
}

#headerTitle { /* Formatting for the box that displays the words "Atlas Quest" at the top of every page */
   background: var(--header-title-bg);
   border: var(--header-title-border);
   border-radius: 0.15em;
   min-width: 180px;
   max-width: 5.3em;
   margin: 0 auto;
   padding: 2px 0 0;
   line-height: 1em;
   height: var(--header-title-height);
   font-size: 40px;
   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;
   opacity: 0.85;
}

#headerTitle img {
   margin: 0;
   padding: 0;
}

#headerSubtitle {
   color: var(--header-subtitle-color);
   text-shadow: var(--header-subtitle-text-shadow);
   background: var(--header-subtitle-bg);
   visibility: hidden;
   font-family: "Times New Roman", Times, serif;
   font-variant: small-caps;
   font-size: 1.4rem;
   margin: 0;
   padding-right: 1em;
   letter-spacing: 1px;
   word-spacing: 0.25em;
}

@media screen and (min-width:45em) {
   #headerSubtitle {
      visibility: visible;
      width: calc(100% - 15em);
      text-align: center;
   }
}

@media screen and (min-width:60em) {
   #headerSubtitle {
      width: 100%;
   }
}

@media screen and (min-width: 60em) {
   #headerSubtitle {
      padding-left: 0;
      text-align: center;
   }
}

ul, ol {
   margin-top: 0;
   margin-bottom: 1em;
}

/* Formatting for lists where each item in the list should have whitespace between them */
ul > li, ol > li {
   margin-bottom: 0.5em;
}

ul.paragraph, ol.paragraph {
   margin-top: 0;
   margin-bottom: 1.5em;
}

ul.paragraph > li, ol.paragraph > li {
   margin-top: 0;
   margin-bottom: 1em;
}

li > ul, li > ol {
   margin-top: 0.5em;
}

.counter {
   counter-reset: listCounter; 
   list-style-type: none;
   padding: 0;
}

.counter > *::before {
   counter-increment: listCounter;
   content: counter(listCounter) "."; 
   display: inline-block;
   vertical-align: middle;
   padding: 0.2em;
   grid-area: counter;
   align-self: center;
}

/* Formatting for the footer and copyright text at the bottom of every page */
body > footer {
   text-align: center;
   padding: 1em 0.5em;
   clear: both;
}

body > footer > * {
   margin: 0 1em 1em;
}

body > footer a {
   font-size: 1.1rem;
   font-weight: normal;
   font-variant: small-caps;
   line-height: 1.3em;
   padding: 0.4em 0.75em;
   text-decoration: none;
   display: inline-block;
   border-radius: 0.5em 0.5em / 2em 0.5em;
}

body > footer a:hover, body > footer a:visited:hover,
body > footer a:focus, body > footer a:visited:focus {
   color: yellow;
   text-decoration: none;
   background: maroon none;
}

footer #socialMedia a img {
   filter: saturate(0%);
}

footer #socialMedia a {
   background: transparent none;
   box-shadow: none;
   border-width: 0;
   border-radius: 0;
}

footer #socialMedia a:hover img,
footer #socialMedia a:focus img {
   filter: saturate(100%) drop-shadow(0 0 0.8em yellow);
}

#copyright {
   font-variant: small-caps;
   text-align: center;
   margin: 1em 0.5em;
   clear: both;
}

/* The default format that "error" messages use. Should be red in most cases. */
.redBold, *[role="alert"] {
   color: #9E0000;
   font-weight: bold;
   margin: 0 0 1em;
}

/* The formatting to be used on captions by an image */
figcaption, .caption {
   font-size: 0.9rem;
   color: #333;
}

/* Formatting for the welcome message in the upper-right corner of every page */
#welcome {
   position: absolute;
   right: 1em;
   top: 0.1em;
}

#welcomeStats {
   position: absolute;
   left: 1em;
   top: 0.1em;
   font-size: 0.8rem;
}

#themeInfo {
   position: absolute;
   right: 1em;
   top: 2em;
   text-align: center;
}

#themeInfo a {
   font-size: 0.8rem;
}

/* A "note" is usually user-generated content such as a post on a message board or AQ mail messages. The "bgLight" is what AQ uses to make things easier to read like the alternating colors on a table's rows. Anywhere a normal background color *would* work, but a slightly off-color helps with readability. */
.bgLight, .note, .frame, legend, details, .toggleTable {
   background: var(--shade-bg);
}

/* The formatting for the footer in a note */
.bgMid, .note footer, details summary, .toggleTable tbody tr:nth-child(odd), .toggleTable > tr:nth-child(odd), .toggleTable > li:nth-child(odd), .toggleTable > div:nth-child(odd) {
   background: var(--darken-color) none;
}

.bgDark, table.toggleTable thead, table.toggleTable tfoot, .note > h2, .note > header {
   background: var(--darker-color) linear-gradient(45deg, rgba(0,0,0, 0.03), rgba(0,0,0, 0.01));
}

.note header > * {
   display: inline-block;
   vertical-align: middle;
}

table caption {
   font-size: 1.2rem;
   line-height: 1.4;
   padding: 0.2em;
}

input.hoverHighlight:hover, table.hoverHighlight tbody tr:hover,
input.hoverHighlight:focus, table.hoverHighlight tbody tr:focus {
   box-shadow: 0 0 0.2em black;
   background: #ffd none !important;
}

.note {
   margin: 0 0.5em 1em;
   max-width: 50em;
   border: 1px solid var(--darker-color);
   box-shadow: -0.1em 0.1em 0.1em var(--darkest-color);
   overflow: auto;
}

.note > h2, .note > header, .note > footer {
   padding: 0.25em;
}

.note h2 {
   font-size: 1.3rem;
   margin: 0;
}

.note h3 {
   font-size: 1.2rem;
}

.note .body {
   padding: 0.5em;
}

.quote { /* Formatting for quoted messages in a note */
   background: var(--darker-color) none;
   padding: 0.25em;
   margin: 1em 0.5em 0;
   width: 100%;
   max-width: 50em;
}

.quote, .thinBorder, .frame { /* Formatting for anything that needs a thin border around it */
   border: 1px solid var(--darkest-color);
   margin: 0.5em 0;
   padding: 0.5em;
}

.icon { /* Default formatting for icons */
   border: none;
   margin: -2px 0 -1px;
   padding: 0 1px;
   vertical-align: middle;
}

#pageStats { /* For webmasters only--you don't need this. ;o) */
   color: black;
   background: #fed none;
   border: 2px red solid;
   margin: 1em;
   padding: 1em;
   text-shadow: none;
   text-align: left;
}

.code { /* Formatting for code-like snippets of material */
   background: rgba(0,0,0, 0.1) linear-gradient(90deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.0));
   border: 1px dotted black;
   border-width: 1px 0;
   margin: 0 0.5em 0.5em;
   padding: 0.5em;
   white-space: pre;
   overflow: auto;
}

.frame {
   padding: 0.5em;
   margin: 0 1em 1em 0;
   display: block;
   overflow: hidden;
   box-shadow: -0.1em 0.1em 0.1em var(--darkest-color);
}

.isMobile {
   display: none;
}

.bold {
   font-weight: bold !important;
}

.frame, .thinBorder, .quote, fieldset {
   border-radius: 0.25em;
}

fieldset {
   background-color: rgba(0,0,0, 0.1);
   margin: 1em 0;
   max-width: 95vw;
}

.note, .note .header {
   border-top-left-radius: 0.25em;
   border-top-right-radius: 0.25em;
}

.note, .note .footer {
   border-bottom-left-radius: 0.25em;
   border-bottom-right-radius: 0.25em;
}

.center {
   margin-left: auto !important;
   margin-right: auto !important;
   text-align: center;
}

img.center { /* Only blocks can be centered by using auto-margins, and we often want to center an image, but it's not a block! */
   display: block !important;
}

.clear {
   height: 1px;
   clear: both;
}

.identifier {
   font-size: 1.5rem;
   font-weight: bold;
   color: #444;
   padding: 0.2em;
   float: right;
   text-align: center;
}

:disabled, [disabled], .disabled {
   cursor: not-allowed !important;
}

*:disabled img, [disabled] img, .disabled img, img.disabled {
   filter: grayscale(100%) !important;
}

.iconLink, a.iconLink, a.iconLink, a:link.iconLink, a:visited.iconLink, a:hover.iconLink, a:focus.iconLink {
   display: inline-block;
   border: 1px solid transparent;
   text-decoration: none;
   padding: 0;
}

a:hover.iconLink, a:focus.iconLink {
   background: none;
}

a img {
   margin: 0;
   padding: 0.1em;
}

a:hover img, a:focus img {
   filter: saturate(200%) brightness(110%) drop-shadow(-0.2em 0.2em 0.5em #880);
   outline: 1px dotted #333;
}

#waiver {
   padding: 1em;
}

.fSummary .planter {
   font-weight: bold;
   font-size: 120%;
}

.fSummary .find {
   color: green;
}

.fSummary .attempt {
   color: var(--attemptHighColor);
}

.fSummary .high {
   font-size: 120%;
   color: var(--attemptHighColor);
}

.fSummary .mid {
   color: var(--attemptMidColor);
}

.fSummary .low {
   font-size: 80%;
   color: var(--attemptLowColor);
}

.fSummary .zero {
   color: var(--attemptZeroColor);
}

img {
   display: inline-block;
   max-width: 100%;
   height: auto;
   font-style: italic;
   background-repeat: no-repeat; /* The background properties can be used as a way of incremental loading */
   background-size: cover;
   shape-margin: 0.75rem;
   filter: var(--img-filter);
}

.gm-style img { /* This line is necessary for Google Map controls to work correctly--setting a max-width to 100% would break it! */
   max-width: none;
}

.billboardTimestamp {
   font-size: 0.9rem;
   font-weight: bold;
   text-shadow: var(--light-text-shadow);
}

nav.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 99999;
   margin-top: 3em;

   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   background: var(--shade-bg);
   border: 1px solid #bbb;
   border-width: 1px 0;
}

nav.sticky a {
   flex: 0 1 auto;
   color: var(--a-color);
   font-weight: normal;
   font-size: 1.1rem;
   text-decoration: none;
   text-align: center;
   padding: 0.1em 1em;
   border-bottom: 2px solid transparent;
}

nav.sticky a:focus, nav.sticky a:hover {
   border: 1px solid transparent;
   border-bottom: 2px solid var(--a-hover-color);
   border-radius: 0;
}

nav.sticky ~ section:target {
   padding-top: 1px; /* I have no idea why this is needed to make sure the element the sticky element targets actually sits BELOW the sticky element */
}

@media all and (min-width:30em) {
   nav.sticky a {
      font-size: 1.2rem;
      padding: 0.3em 1em;
   }
}