body {
    color: #333333;
    background-color: #ffffff;
    font-size: 10pt;
    font-family: sans-serif;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

#main, #footer_wrapper {
    max-width: 96vw;
    margin: 0 0.5em;
}

#header {
    width: 100%;
    max-height: 40vh;
    background-color: #cccccc;
    background-size: cover;
    text-align: left;
}

#header_start {
    /* This sets the aspect ratio (height/width) of the header. */
    /* Note this is overridden for the mobile (i.e. narrow) layout. */
    padding-top: 80%;
    float: left;
}

#footer {
    width: 100%;
    background-color: #666666;
    background-image: url("/images/footer.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    margin: 1em 0 0 0;
}

#footer_start {
    /* This sets the aspect ratio (height/width) of the footer. */
    padding-top: 24%;
    float: left;
}

#nav {
    width: 100%;
    margin-bottom: 1em;
}

#main img {
    max-width: 100%;
    height: auto;
}

a:link, a:visited, a:hover, a:active {
    color: inherit;
    font-family: inherit;
    font-variant: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    text-decoration: underline;
}

a:hover, a:active {
    text-decoration-color: #ff5c35;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bolder;
    font-style: inherit;
    font-size: inherit;
    text-decoration: inherit;
    text-align: inherit;
    text-transform: uppercase;
    margin: 0.75em 0 0 0;
    padding: 0;
}

h1, h2.likeH1 {
    border-bottom: solid #003a70 0.2em;
    padding-bottom: 0.6em;
    margin-bottom: 0.8em;
}

h1, h2 {font-size: 180%;}
h3 {font-size: 150%;}
h4 {font-size: 140%;}
h5 {font-size: 130%;}
h6 {font-size: 120%;}

/* Mobile display of tables - overridden in @media block for desktop. */
table, tr {display: flex; flex-direction: column;}
tr.headRow {display: none;}
td.titleCol {order: -1;}

table {
    border-collapse: collapse;
}

tr:nth-child(odd), thead + tbody > tr:nth-child(even) {
    background-color: #ffffff;
}

tr:nth-child(even), thead + tbody > tr:nth-child(odd) {
    background-color: #dddddd;
}

th, td {
    text-align: inherit;
    border: none;
    border-spacing: 0;
    margin: 0;
    padding: 0.5em;
}

th {
    border-bottom: solid 0.3em;
}

td.titleCol {
    font-weight: bolder;
}

textarea {
    resize: both;
}

td textarea, th textarea {
    width: 100%;
    height: 100%;
}

td input[type="text"], th input[type="text"],
td input[type="tel"], th input[type="tel"],
td input[type="email"], th input[type="email"] {
    width: 92%;
}

td input[type="text"].mediumInput, th input[type="text"].mediumInput,
td input[type="tel"].mediumInput, th input[type="tel"].mediumInput,
td input[type="email"].mediumInput, th input[type="email"].mediumInput {
    width: initial;
}

select {
    max-width: 90vw;
}

.horizontal_widget > * {
    margin: 0 0.5em 0 0;
    padding: 0;
}

.linkList, .linkMenu, .boxLinkMenu {
    list-style-type: none;
    padding: 0;
    font-size: 120%;
}

.linkMenu, .boxLinkMenu {
    display: flex;
    justify-content: center;
}

.linkMenu {
    flex-flow: row wrap;
}

.boxLinkMenu {
    flex-flow: column;
    margin: 0;
    gap: 1em;
}

.linkMenu li {
    padding: 0 1em;
}

.boxLinkMenu li {
    flex-basis: 1em;
    flex-grow: 1;
}

.boxLinkMenu a {
    text-align: center;
    display: block;
}

#topLogo img {
    width: 15%;
    min-width: 7.5em;
    height: auto;
    padding: 0.6em 0 0 0.5em;
    text-align: left;
}

a.topMyAccount, a.topLogin {
    color: #ffffff;
    background-color: #003a70;
    float: right;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bolder;
    font-size: smaller;
    align-items: center;
    justify-content: center;
    margin: 0 1.5em 0 0;
    padding: 8px 15px;
}

a.topMyAccount:hover, a.topMyAccount:active, a.topLogin:hover, a.topLogin:active {
    background-color: #ff5c35;
}

a.topMyAccount {
    display: flex;
}

a.topLogin {
    display: none;
}

a.topMyAccount > img, a.topLogin > img {
    margin: 0 1em 0 0;
}

.menuToggle, .menuToggleLabel, #siteMenuToggle, #siteMenuToggleLabel {
    cursor: pointer;
}

#siteMenuToggleLabel {
    display: block;
    padding: 0.5em;
    text-align: right;
}

.menuToggle, #siteMenuToggle {
    /* Do not use 'display: none' because we need it to stay in the tab order for keyboard users. */
    position: absolute;
    opacity: 0;
    z-index: -1;
}

#siteMenu {
    display: none;
    margin: 0;
    padding: 0;
}

#siteMenuToggle:checked ~ #siteMenu {
    display: block;
}

#siteMenu li {
    border-bottom: solid 1px #ffffff;
    margin: 0;
    padding: 0;
}

#siteMenu > li > a, #siteMenu > li > label {
    text-transform: uppercase;
}

#siteMenu a:link, #siteMenu a:visited, #siteMenu a:hover, #siteMenu a:active, #siteMenu label,
.toggledMenu a:link, .toggledMenu a:visited, .toggledMenu a:hover, .toggledMenu a:active {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5em;
    color: inherit;
    font-family: inherit;
    font-variant: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: bolder;
    text-decoration: inherit;
}

.toggledMenu {
    list-style-type: none;
    display: none;
    margin: 0;
    padding: 0;
}

@media speech {
    .toggledMenu {
        display: initial;
    }
}

.menuToggle:checked ~ .toggledMenu {
    display: flex;
    flex-direction: column;
}

.toggledMenu li, #siteMenu .toggledMenu li {
    color: #333333;
    background-color: #ffffff;
}

.toggledMenu li a, #siteMenu .toggledMenu li a {
    font-weight: normal;
}

#siteMenu a:hover, #siteMenu a:active, #siteMenu label:hover, #siteMenu label:active,
.toggledMenu li a:hover, .toggledMenu li a:active,
#siteMenu .toggledMenu li a:hover, #siteMenu .toggledMenu li a:active {
    color: #ffffff;
    background-color: #ff5c35;
}

.linkList a:link, .linkList a:visited, .linkList a:hover, .linkList a:active {
    color: inherit;
    font-family: inherit;
    font-variant: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    text-decoration: inherit;
}

#footer_wrapper_med {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#footer_wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#footer_main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#footer_sponsors img {
    height: 3.6em;
    margin: 0 0.6em 0.6em 0;
}

#footer_logo {
    flex-grow: 1;
    flex-basis: 0;
}

#footer_sponsors {
    order: 1;
    flex-grow: 2;
    flex-basis: 0;
}

#footer_menu {
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
}

#footer_copyright {
    font-size: smaller;
    text-align: center;
    padding: 1em 0;
}

#nav {
    background-color: #003a70;
    color: #ffffff;
}

.boxInvert, a.boxInvert {
    background-color: #003a70;
    color: #ffffff;
    padding: 1em;
    text-decoration: inherit;
}

.boxInvert .boxInvert, .boxInvert a.boxInvert {
    background-color: #ffffff;
    color: #003a70;
    text-decoration: inherit;
}

a.boxInvert {
    font-weight: bolder;
    text-transform: uppercase;
    min-width: 100px;
    padding: 8px 15px;
}

a.boxInvert:hover, a.boxInvert:active {
    background-color: #ff5c35;
    color: #ffffff;
}

.infoBox, .errorBox, .warningBox, .successBox {
    border-style: solid;
    border-width: 0.5em;
    padding: 0.1em 1em;
    margin: 0 0 1em 0;
}

.errorBox, .errorColour, tr:nth-child(odd).errorColour, tr:nth-child(even).errorColour {
    color: #000000;
    background-color: #ff9999;
}

.warningBox, .warningColour, tr:nth-child(odd).warningColour, tr:nth-child(even).warningColour {
    color: #000000;
    background-color: #ffff99;
}

.successBox, .successColour, tr:nth-child(odd).successColour, tr:nth-child(even).successColour {
    color: #000000;
    background-color: #ccffcc;
}

.midPageDropdown {
    position: absolute;
    z-index: 1;
    background: none;
}

.midPageDropdown li {
    margin: 0;
    min-width: 10em;
}

.midPageDropdown a:link, .midPageDropdown a:visited, .midPageDropdown a:hover, .midPageDropdown a:active {
    text-align: left; /* Makes *mobile* dropdowns go left-aligned. */
    padding: 0.5em 1em;
    background-color: #ffffff;
}

@media (min-width: 750px) {
    #main, #footer_wrapper {max-width: 75vw;}
    #main {width: 75vw;}
    #header_start {padding-top: 43%;}
    .boxLinkMenu {flex-flow: row wrap;}
    a.topLogin {display: flex;}
    .siteMenuLogin {display: none;}
    #siteMenu {display: flex;}
    #siteMenuToggle, #siteMenuToggleLabel {display: none;}
    #siteMenu li {border-bottom: none;}
    #siteMenu > li {padding: 0 1em 0 0; margin: 0;}
    #siteMenu > li > a:link, #siteMenu > li > a:visited, #siteMenu > li > a:hover, #siteMenu > li > a:active, #siteMenu > li > label {
        padding: 1em 0.5em;
    }
    #footer_main {flex-direction: row;}
    #footer_sponsors {order: initial;}
    #footer_copyright {text-align: left;}
    table {display: table;}
    tr, tr.headRow {display: table-row;}
    td.titleCol {order: initial;}
    select {max-width: 25vw;}
    .formTableLabel {vertical-align: top; max-width: 25em;}

    .toggledMenu {
        position: absolute;
        z-index: 1;
        background: none;
    }

    #siteMenu .toggledMenu {
        /* Negative top margin used to overlap the label to sustain the hover as the cursor moves down to the menu. */
        margin: -1.2em 0 0 0;
        padding: 1.2em 0 0 0;
    }

    #siteMenu .menuToggleLabel:hover ~ .toggledMenu.openOnHover, #siteMenu .menuToggle:hover ~ .toggledMenu.openOnHover, .toggledMenu.openOnHover:hover {
        display: flex;
        flex-direction: column;
    }

    .toggledMenu li, #siteMenu .toggledMenu li {
        margin: 0;
        min-width: 10em;
    }

    #siteMenu .toggledMenu li {
        color: #ffffff;
        background-color: #003a70;
    }

    .toggledMenu a, #siteMenu .toggledMenu a,
    .midPageDropdown a:link, .midPageDropdown a:visited, .midPageDropdown a:hover, .midPageDropdown a:active {
        text-align: left;
        padding: 0.5em 1em;
    }

    #siteMenu .toggledMenu a {
        background-color: #003a70;
    }

    /* Highlight the menu toggle whenever the menu that it toggles is open. */
    #siteMenu .menuToggle:checked ~ .menuToggleLabel, #siteMenu .toggledMenuWrapper:hover > .menuToggleLabel {
        background-color: #ff5c35;
    }
}