﻿
:root[colour-mode="light"] { --background: #eeeeee; --background-highlight: #ffffff; --colour-highlight: #000000; --colour: #333333; --block-quote-background: #dddddd; }

:root[colour-mode="dark"] { --background: #333333; --background-highlight: #000000; --background-highlight: #ffffff; --colour: #b0b0b0; --block-quote-background: #111111; }

/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html { box-sizing: border-box }
*, *::before, *::after { box-sizing: inherit }
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }
body { margin: 0 }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { display: block }
summary { display: list-item }
audio, canvas, progress, video { display: inline-block }
progress { vertical-align: baseline }
audio:not([controls]) { display: none; height: 0 }
[hidden], template { display: none }
a { background-color: transparent; text-decoration: none; }
    a:active, a:hover { text-decoration: underline; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted }
b, strong { font-weight: bolder }
dfn { font-style: italic }
mark { background: #ff0; color: #000 }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: -0.25em }
sup { top: -0.5em }
figure { margin: 1em 40px }
img { border-style: none }
code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em }
hr { box-sizing: content-box; height: 0; overflow: visible }
button, input, select, textarea, optgroup { font: inherit; margin: 0 }
optgroup { font-weight: bold }
button, input { overflow: visible }
button, select { text-transform: none }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button }
    button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0 }
    button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em }
legend { color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal }
textarea { overflow: auto }
[type=checkbox], [type=radio] { padding: 0 }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px }
    [type=search]::-webkit-search-decoration { -webkit-appearance: none }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit }
/* End extract */

.qct-breadcrumb { background-color: var(--background); padding: 4px 8px; list-style: none; border-radius: 4px; border: #E6007E solid 2px; }
.pink { color: #E6007E; }
    .pink:hover { color: #EC5AAA; }

html, body { font-family: Verdana,sans-serif; font-size: 15px; line-height: 1.5 }
html { overflow-x: hidden }
/*h1 { font-size: 30px; }
h2 { font-size: 24px }
h3 { font-size: 20px }
h4 { font-size: 18px }
h5 { font-size: 14px }
h6 { font-size: 15px }*/
h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; margin: 10px 0 }
h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 10px 0 }
h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; margin: 10px 0 }
hr { border: 0; border-top: 1px solid #eee; margin: 20px 0 }
img { vertical-align: middle }
a { color: inherit }
blockquote { font-size: 1.2rem; background-color: var(--block-quote-background); margin: -0.5rem; padding: 2rem; }

.qct-btn, .qct-button { border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; color: inherit; background-color: inherit; text-align: center; cursor: pointer; white-space: nowrap }
    .qct-btn:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) }
.qct-btn, .qct-button { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.qct-bar-block .qct-dropdown-hover .qct-dropdown-content, .qct-bar-block .qct-dropdown-click .qct-dropdown-content { min-width: 100% }
.qct-bar-block .qct-dropdown-hover .qct-button, .qct-bar-block .qct-dropdown-click .qct-button { width: 100%; text-align: left; padding: 8px 16px }
.qct-main, #main { transition: margin-left .4s }
.qct-bar { width: 100%; overflow: hidden }
.qct-center .qct-bar { display: inline-block; width: auto }
.qct-left-align { text-align: left !important }
.qct-right-align { text-align: right !important }
.qct-justify { text-align: justify !important }
.qct-center { text-align: center !important }

.qct-bar .qct-bar-item { padding: 8px 16px; float: left; width: auto; border: none; display: block; outline: 0 }
.qct-bar .qct-dropdown-hover, .qct-bar .qct-dropdown-click { position: static; float: left }
.qct-bar .qct-button { white-space: normal }
.qct-bar-block .qct-bar-item { width: 100%; display: block; padding: 8px 16px; text-align: left; border: none; white-space: normal; float: none; outline: 0 }
.qct-bar-block.qct-center .qct-bar-item { text-align: center }
.qct-block { display: block; width: 100% }
.qct-container::after, .qct-container::before, .qct-panel::after, .qct-panel::before, .qct-row::after, .qct-row::before, .qct-row-padding::after, .qct-row-padding::before,
.qct-cell-row::before, .qct-cell-row::after, .qct-clear::after, .qct-clear::before, .qct-bar::before, .qct-bar::after { content: ""; display: table; clear: both }
.qct-col, .qct-half, .qct-third, .qct-twothird, .qct-threequarter, .qct-quarter { float: left; width: 100% }

@media (min-width:601px) {
    .qct-third { width: 33.33333% }
}

.qct-hide { display: none !important }
.qct-show { display: block !important }

@media (min-width:993px) {
    .qct-hide-large { display: none !important }
}

@media (max-width:992px) and (min-width:601px) {
    .qct-hide-medium { display: none !important }
}

.qct-top { top: 0; position: fixed; width: 100%; z-index: 1 }
.qct-row-padding > .qct-third { padding: 0 8px }
.qct-center { text-align: center !important }
.qct-container { padding: 0.01em 16px }
.qct-card { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) }
.qct-card-4 { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19) }
.qct-hide-small { display: none !important }
.qct-large { font-size: 18px !important }
.qct-xlarge { font-size: 24px !important }
.qct-margin-bottom { margin-bottom: 16px !important }
.qct-padding { padding: 8px 16px !important }
.qct-padding-24 { padding-top: 24px !important; padding-bottom: 24px !important }
.qct-padding-32 { padding-top: 32px !important; padding-bottom: 32px !important }
.qct-padding-top-64 { padding-top: 64px !important; margin-top: -64px; }
.qct-padding-top-32 { padding-top: 32px !important; }
.qct-right { float: right !important }
.qct-tooltip, .qct-display-container { position: relative }
    .qct-tooltip .qct-text { display: none }
    .qct-tooltip:hover .qct-text { display: inline-block }
.qct-button.pink  { background-color: #e32085 !important; }
.qct-button:hover { color: #000 !important; background-color: #E32085 !important }
.qct-txpink, .qct-hover-txpink:hover { color: #fff !important; background-color: #E32085 !important }
.qct-white, .qct-hover-white:hover { color: #000 !important; background-color: #fff !important }

.landing h2 { background-color: #e32085 !important; padding: 0.5em 1em; color: #ffffff; text-align: center; margin: 0; }
.landing { text-align: center;}
.qct-theme-l1 { color: var(--colour) !important; background-color: var(--background) !important }
.qct-theme-d2 { color: #fff !important; background-color: #000000 !important }
.qct-theme-d1 { color: #fff !important; background-color: #000000 !important }
.qct-theme { color: var(--colour-highlight) !important; background-color: var(--background-highlight) !important }
.ml-theme-date { color: var(--colour) !important; text-align: right !important }
.card.category { min-height: 6rem; }
    .card.category a img { min-height: 5rem; }
    .card.category a p.large { font-size: 1.5rem; margin: 1rem; }

.card.body { background-color: #ffffff; text-align: center; height: 100%; margin: 0; }
.card.header { background-color: #000000; color: #ffffff; text-align: center; padding: 1rem; font-size: 1.5rem; }
.card.nomargin { margin: 0; overflow-x: auto; }

.card.beginningBorder, .card.communityBorder, .card.excellenceBorder, .card.innovationBorder, .card.leadershipBorder, .card.outstandingBorder { background-color: #000000; overflow: hidden; }

.beginningBorder a div span { color: #fc7c1f; }
.beginningBorder { border: 2px solid #fc7c1f; }

.communityBorder a div span { color: #10abe1; }
.communityBorder { border: 2px solid #10abe1; }

.excellenceBorder a div span { color: #fab63d; }
.excellenceBorder { border: 2px solid #fab63d; }

.innovationBorder a div span { color: #8860a5; }
.innovationBorder { border: 2px solid #8860a5; }

.leadershipBorder a div span { color: #898785; }
.leadershipBorder { border: 2px solid #898785; }

.outstandingBorder a div span { color: #92c12e; }
.outstandingBorder { border: 2px solid #92c12e; }

/*.card.header.nomargin::before { border-left: 5px solid #fc7c1f; left: calc(100% + 3px); top: 50%; transform: translateY(-50%); z-index: 1; }
.card.header.nomargin::after { border-left: 5px solid #fc7c1f; left: 100%; top: 50%; transform: translateY(-50%); z-index: 1; }
*/


/*body { background: hsl(0, 0%, 90%); }
*/
/*--------------------------------------------------------------
        Typography
        --------------------------------------------------------------*/
html, body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5 }
/*body, button, input, select, textarea { color: #b0b0b0; background-color: #333333; }*/
body, button, input, select, textarea { color: var(--colour); background-color: var(--background); }
h1, h2, h3, h4, h5, h6 { clear: both; }
h1 { font-size: 2rem; font-weight: 900; margin: 2rem; color: var(--colour); }
h2 { font-size: 1.5rem; /* color: #007489; */}
h3 { font-size: 1rem; }
p { margin-bottom: 1.5em; color: var(--colour); }
strong { font-weight: bold; }
em { font-style: italic; }
blockquote { margin: 0 1.5rem 1.5rem; }
address { margin: 0 0 1.5em; }
sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }
sup { bottom: 1ex; }
sub { top: .5ex; }
small { font-size: 75%; }
big { font-size: 125%; }
.masthead { background-color: #005b75; }
    .masthead p, .masthead p a { color: white; }
.site-title { color: white; }
img { display: block; border: 0; width: 100%; height: auto; }
.card { background: white; margin-bottom: 2em; }
    .card a { color: black; text-decoration: none; }
        .card a:hover { box-shadow: 3px 3px 8px hsl(0, 0%, 80%); }
.card-content { padding: 1.4em; }
    .card-content h2 { margin-top: 0; margin-bottom: .5em; font-weight: bold; }
    .card-content p { font-size: 80%; }
.right-align { text-align: right; }
.margin-bottom { margin-bottom: 1rem; }
pre { color: #00ff00; background-color: #000000; border-radius: 1em; padding: 1em; }


/* Flexbox stuff */
.container { max-width: 100%; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; }
.card { flex: 0 0 17%; margin: 0.5em; }
.winner { border: #E6007E solid 4px; padding: 2px; }
div.card-body { padding: 10px; }
@media (max-width:992px) {
    .card { flex: 0 0 47%; }
}
@media (max-width:500px) {
    .card { flex: 0 0 100%; }
}
@media (min-width:1500px) {
    .container { max-width: 100%; }
    .card { flex: 0 0 17%; }
}

.card-footer { display: flex; flex-direction: row; justify-content: space-between; }
    .card-footer div { max-width: 45%; margin: 0 0.5rem; }



/*        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
        }
*/

.toggle { cursor: pointer; display: inline-block; }

.toggle-switch { display: inline-block; background: #ccc; border-radius: 16px; width: 58px; height: 32px; position: relative; vertical-align: middle; transition: background 0.25s; float: right; }
.toggle-switch::before, .toggle-switch::after { content: ""; }
.toggle-switch::before { display: block; background: linear-gradient(to bottom, #fff 0%, #eee 100%); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); width: 24px; height: 24px; position: absolute; top: 4px; left: 4px; transition: left 0.25s; }
.toggle:hover .toggle-switch::before { background: linear-gradient(to bottom, #fff 0%, #fff 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.toggle-checkbox:checked + .toggle-switch { background: #E6007E; /*#56c080;*/ }
.toggle-checkbox:checked + .toggle-switch::before { left: 30px; }

.toggle-checkbox { position: absolute; visibility: hidden; }

.toggle-label { margin-left: 5px; position: relative; top: 2px; }
