:root {
    --site-blue: #182034;
    --site-medium-blue: #29abe2;
    --site-light-blue: #abdddd;
    --site-green: #c7e198;
    --site-orange: #c44400;
    --site-red: #d94540;
    --site-red-orange: #f68b65;
    --site-grey: #eeeeef;
    --site-dark-grey: #d1d2d4;
    --site-dark-grey-2: #5a5b5e;
    --site-teal: #007d94;
    --site-turquoise: #cbe2e1;
    --site-yellow: #f2d17e;
    --site-font: "Work Sans";
    --site-serif-font: "Vollkorn";
}

body {
    font-family: var(--site-font), sans-serif;
    padding: 0;
}

h3:empty {
    display: none;
}

.sjrk-prefsEditor-container {
    background-color: #fff;
}

.flc-toc-tocContainer {
    background: var(--site-orange);
    color: #fff;
}

.flc-toc-tocContainer a {
    color: #fff;
}

.sjrk-st-page-header-container,
.sjrk-st-etiquette-container,
.sjrk-st-page-footer-container {
    display: block;
}

.sjrk-st-page-header-container, .sjrk-st-page-footer-container {
    color: var(--site-blue);
    background-color: #fff;
}

.sjrk-st-page-header-container {
    color: var(--site-light-blue);
}

.sjrk-st-page-header-container {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sjrk-st-page-header {
    display: inline-block;
    font-size: 2.5rem;
    margin: 0;
    line-height: 0.9;
}

.sjrk-st-page-header-main-title {
    font-weight: 600;
    color: var(--site-blue);
    text-transform: uppercase;
    text-decoration: none;
}

/* fixes UIO contrast theme related background issues */
:not(.fl-theme-default) .sjrk-st-page-header-main-title,
:not(.fl-theme-default) .sjrk-st-top-menu nav a,
:not(.fl-theme-default) .flc-toc-tocContainer a
{
    background: none !important;
}

.sjrk-st-top-menu {
    display: flex;
    justify-self: flex-end;
    align-self: flex-end;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    /* top: 1.75rem; */
    justify-content: flex-end;
}

.sjrk-st-top-menu nav {
    display: inline-block;
}

.sjrk-st-top-menu nav ul {
    margin: 0;
    padding: 0;
}

.sjrk-st-top-menu nav li {
    display: inline-block;
    margin-right: 2rem;
}

.sjrk-st-top-menu nav a,
.sjrk-st-edit-link,
.sjrk-st-author-greeting,
.sjrk-st-author-log-in,
.sjrk-st-author-log-out,
.sjrk-st-author-sign-up {
    color: var(--site-blue);
}

.sjrk-st-edit-link,
.sjrk-st-author-log-in {
    border: 2px solid var(--site-blue);
    border-radius: 1.5rem;
    background: #fff;
    white-space: nowrap;
}

.sjrk-st-edit-link {
    display: none;
    padding: 0.75rem 2rem;
    text-transform: uppercase;
}

.sjrk-st-author-log-in {
    padding: 0.5rem 1.75rem;
}

.sjrk-st-author-sign-up {
    white-space: nowrap;
}

.sjrk-st-page-content-container {
    color: var(--site-blue);
    padding: 0;
}

.sjrk-st-intro-links a
 {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--site-blue);
    padding: 0.5rem 2rem;
    border-radius: 1.5rem;
}

.sjrk-st-page-body {
    font-size: 1.5rem;
    line-height: 1.75;
}

.sjrk-st-page-body img {
    max-width: 100%
}

.sjrk-st-page-body h1 {
    font-size: 4rem;
    font-weight: bold;
    margin: 0 0 2rem 0;
    padding: 1rem 0;
    line-height: 1;
}

.sjrk-st-page-body h2 {
    color: var(--site-orange);
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
}

.sjrk-st-page-body h3 {
    margin: 0;
}

.sjrk-st-page-body p {
    margin: 0 0 .5rem 0;
}

.sjrk-st-page-body a {
    color: var(--site-blue);
}

.sjrk-st-page-body ul {
    padding-left: 0;
    margin-top: 0.5rem;
}

.sjrk-st-page-body li {
    list-style-position: inside;
    margin-bottom: 0.5rem;
}

.sjrk-st-page-body figure {
    margin: 0;
}

.sjrk-st-page-body figcaption {
    color: var(--site-teal);
    font-size: 2rem;
    font-family: var(--site-serif-font);
    font-weight: bold;
}

.sjrk-st-page-body section {
    margin: 0 0 2rem 0;
    padding: 0 4rem;
}

.sjrk-st-story-content {
    line-height: 1.5;
}

.sjrk-st-story-content ul {
    padding-left: 2.5rem;
}

.sjrk-st-page-body section.sjrk-st-lr-2column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 5rem;
    row-gap: 1rem;
}

.sjrk-st-introduction .sjrk-st-page-body section:not(.sjrk-st-lr-knockout),
.sjrk-st-workshops .sjrk-st-page-body section:not(.sjrk-st-lr-knockout),
.sjrk-st-resources .sjrk-st-page-body section:not(.sjrk-st-lr-knockout) {
    max-width: 1087px !important;
    margin: 0 auto 2rem auto !important;
}

.sjrk-st-page-body section.sjrk-st-lr-2column>*:nth-child(odd) {
    grid-column-end: span 2;
}

.sjrk-st-lr-serif {
    font-family: var(--site-serif-font);
}

.sjrk-st-lr-knockout  {
    background: var(--site-orange);
    color: #fff;
}

/* Used to maintain padding above page headers */
section.sjrk-st-lr-knockout,
.sjrk-st-lr-knockout section {
    padding-top: 2rem;
}

.sjrk-st-intro-collection {
    max-height: 60rem;
}

.sjrk-st-intro-links a {
    border: 0;
    background: var(--site-blue);
    color: #fff;
    margin-bottom: 1.25rem;
}

.sjrk-st-intro-caret {
    width: 4.3rem;
    height: 2.4rem;
    display: block;
    margin-bottom: 5rem;
    background: url("../fonts/caret.svg") no-repeat;
}

.sjrk-st-intro-share {
    max-width: 50rem !important;
    margin-top: 3rem;
}

.sjrk-st-browser-story-container {
    background-color: var(--site-medium-grey);
}

.sjrk-st-browser-story-thumbnail-placeholder {
    background: #ffffff url("../fonts/Book.svg") no-repeat;
    background-position: 0.75rem .5rem;
    background-size: calc(100% - 1.5rem) calc(100% - 1rem);
}

.sjrk-st-browser-stories.grid .sjrk-st-browser-story-thumbnail-placeholder {
    width: auto;
    height: 15.75rem;
}

.sjrk-st-story-editor .sjrk-st-lr-padding,
.sjrk-st-story-editor+.sjrk-st-story-viewer .sjrk-st-lr-padding {
    padding: 0 !important;
    margin: 4rem 7rem;
    position: relative;
}

.sjrk-st-story-editor,
.sjrk-st-story-viewer {
    color: var(--site-blue);
}

.sjrk-st-story-editor-form, .sjrk-st-story-previewer {
    border: 1px dashed;
    padding: 1.5rem !important;
    position: relative;
    background: #fff;
}

.sjrk-st-story-editor .sjrk-st-block {
    background: #fff;
}

.sjrk-st-story-editor .sjrk-st-block input,
.sjrk-st-block-alternative-content input,
.sjrk-st-block-media-description,
.sjrk-st-block-media-alt-text {
    font-family: var(--site-font);
    font-size: 1rem;
    padding: 0.25rem;
    border: 1px solid var(--site-dark-grey);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.sjrk-st-block-media-upload-button {
    border: none;
    font-size: 1rem;
    font-weight: bold;
}

.sjrk-st-top-menu,
.sjrk-st-top-menu a,
.sjrk-st-story-editor-next,
.sjrk-st-story-editor-previous,
.sjrk-st-story-viewer-previous,
.sjrk-st-story-submit,
.sjrk-st-story-share,
.sjrk-st-intro-links a,
.sjrk-st-edit-link,
.sjrk-st-author-log-in,
.sjrk-st-author-log-out,
.sjrk-st-author-sign-up {
    position: relative;
    text-decoration: none;
    font-family: var(--site-font);
    font-weight: 800;
    font-size: 1rem;
}

.sjrk-st-author-sign-up {
    text-decoration: underline;
}

.sjrk-st-menu {
    display: none;
}

.sjrk-st-story-viewer .sjrk-st-lr-padding,
.sjrk-st-story-editor .sjrk-st-lr-padding,
.sjrk-st-story-notFoundNotice .sjrk-st-lr-padding {
    max-width: 765px;
    margin: 0 auto 2rem auto !important;
}

.sjrk-st-lr-padding {
    line-height: 1rem;
    font-size: 1rem;
    padding: 2rem 4rem !important;
}

.sjrk-st-lr-padding h3 {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.sjrk-st-lr-padding h3,
.sjrk-st-browser-story-container a {
    color: var(--site-blue);
}

.sjrk-st-browser-view-control-list,
.sjrk-st-browser-view-control-grid {
    position: relative;
    text-decoration: none;
    font-family: var(--site-font);
    color: var(--site-blue);
}

/* .sjrk-st-browser-stories .sjrk-st-browser-view-control-list, */
.sjrk-st-browser-view-control-container.grid .sjrk-st-browser-view-control-grid,
.sjrk-st-browser-view-control-list,
.sjrk-st-browser-view-control-list:hover,
.sjrk-st-browser-view-control-grid:hover {
    font-weight: 800;
    border-bottom: 3px solid var(--site-green);
}

.sjrk-st-browser-view-control-container.grid .sjrk-st-browser-view-control-list {
    font-weight: 400;
    border: none;
}

.sjrk-st-menu-story-builder-title span {
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 2;
}

.sjrk-st-menu-story-builder-title-background {
    background: var(--site-light-blue);
    border-radius: 1rem;
    padding: 1rem;
    position: absolute;
    left: -0.85rem;
    width: 10rem;
    height: 8rem;
}

.sjrk-st-story-editor-no-content {
    min-height: 20rem;
    background-color: var(--site-grey);
    margin: .5rem 0 1rem 0;
    border: none;
    padding: 1.5rem;
}

.sjrk-st-story-editor-content:empty {
    display: none;
}

.sjrk-st-story-editor-content + .sjrk-st-story-editor-no-content {
    display: none;
}

.sjrk-st-story-editor-content:empty + .sjrk-st-story-editor-no-content {
    display: grid;
    grid-template-rows: auto max-content;
}

.sjrk-st-story-editor-instructions {
    align-self: center;
    width: 50%;
    justify-self: center;
    text-align: center;
    color: var(--site-dark-grey-2);
}

.sjrk-st-story-editor-notice {
    align-self: end;
    color: var(--site-orange);
}

.sjrk-st-story-editor-previous img,
.sjrk-st-story-viewer-previous img {
    margin-right: 0.25rem;
}

.sjrk-st-story-submit,
.sjrk-st-story-share {
    background: var(--site-light-blue);
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 1.5rem;
}

.sjrk-st-important-notes {
    font-size: 1rem;
}

.sjrk-st-important-notes h2 {
    font-size: 1.25rem;
    color: var(--site-red-orange);
}

.sjrk-st-menu-languages-container a {
    text-transform: none;
}

.sjrk-st-etiquette {
    color: var(--site-blue);
    padding: 1rem 2rem;
    font-size: 1rem;
}

.sjrk-st-etiquette p {
    font-weight: 800;
    margin-top: 0;
}

.sjrk-st-etiquette ul {
    padding-inline-start: 1.25rem;
    margin-bottom: 0;
}

.sjrk-st-page-footer-container {
    padding: 2.5rem 2rem;
    background: var(--site-light-blue);
    color: var(--site-blue);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.sjrk-st-page-footer-container a {
    color: var(--site-blue);
}

.sjrk-st-page-footer-text-container {
    border-right: 1px solid var(--site-blue);
    padding-right: 2rem;
    margin-right: 2rem;
    flex: 1 40%;
}

.sjrk-st-page-footer-logo-container {
    align-self: flex-end;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    margin-top: 1.5rem;
    max-width: 100%;
}

.sjrk-st-page-footer-oak-logo,
.sjrk-st-page-footer-hewlett-logo,
.sjrk-st-page-footer-idrc-logo {
    margin: 0 1.5rem;
    display: block;
    height: 3.25rem;
}

.sjrk-st-page-footer-oak-logo {
    width: 6rem;
    background: url(../fonts/logo_oak.svg) no-repeat;
}

.sjrk-st-page-footer-hewlett-logo {
    width: 15rem;
    background: url(../fonts/logo_hewlett.svg) no-repeat;
}

.sjrk-st-page-footer-idrc-logo {
    width: 12rem;
    background: url(../fonts/logo_idrc.svg) no-repeat;
}

@media only screen and (max-width: 50em) {
    .sjrk-st-story-content {
        padding: 1.5rem;
        margin: 1.5rem 0 1rem 0;
    }

    .sjrkc-st-story-content ul,
    .sjrkc-st-story-content ol {
        padding-left: 0.5rem;
    }

    .sjrk-st-top-menu {
        display: block;
        justify-self: auto;
        align-self: auto;
        top: 0;
        text-align: center;
        width: 100%;
    }

    .sjrk-st-top-menu nav {
        display: block;
    }

    .sjrk-st-top-menu nav li {
        display: block;
        margin: 1rem 0;
    }

    .sjrk-st-top-menu nav li a {
        margin: 0 auto;
    }

    .sjrk-st-top-menu .sjrk-st-edit-link {
        display: inline-block;
    }

    .sjrk-st-lr-padding {
        padding: 0 1rem !important;
    }

    .sjrk-st-story-editor .sjrk-st-lr-padding,
    .sjrk-st-story-editor+.sjrk-st-story-viewer .sjrk-st-lr-padding {
        margin: 0 0.5rem;
    }

    .sjrk-st-story-notFound-notice {
        max-width: 100%;
    }

    .sjrk-st-story-notFound-notice .sjrk-st-story-notFound-notice-content {
        padding-left: 0;
    }

    .sjrk-st-page-body section {
        margin: 0 0 1rem 0;
        padding: 0 1rem;
    }

    .sjrk-st-page-body h1 {
        font-size: 2.5rem;
    }

    .sjrk-st-page-body figcaption {
        display: none;
    }

    .sjrk-st-page-header-container, .sjrk-st-etiquette {
        padding: 1rem;
    }

    .sjrk-st-page-header {
        font-size: 1.5rem;
    }

    .sjrk-st-browser-stories.grid .sjrk-st-browser-story-thumbnail-placeholder {
        height: 100%;
    }

    .sjrk-st-browser-stories.grid .sjrk-st-browser-story-thumbnail-container {
        margin: .5rem;
        height: 6rem;
    }

    .sjrk-st-page-content-container {
        grid-template-columns: repeat(1, minmax(250px, 1fr));
    }

    .sjrk-st-menu-story-builder-title {
        display: none;
    }

    .sjrk-st-page-footer-container {
        grid-template-columns: repeat(1, 1fr);
        margin-left: auto;
        margin-right: auto;
        padding: 1rem;
    }

    .sjrk-st-page-footer-text-container {
        flex-basis: auto;
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 1rem;
        max-height: none;
    }

    .sjrk-st-page-footer-logo-container {
        margin-top: 0;
        display: block;
    }

    .sjrk-st-page-footer-oak-logo,
    .sjrk-st-page-footer-hewlett-logo,
    .sjrk-st-page-footer-idrc-logo {
        display: block;
        text-align: center;
        padding-bottom: 1rem;
        margin: 0 auto;
        max-width: 100%;
    }
}

/* ********* UIO rules ********* */
.fl-theme-bw .sjrk-st-intro-caret { background-image: url("../fonts/caret_black.svg"); }
.fl-theme-wb .sjrk-st-intro-caret { background-image: url("../fonts/caret_white.svg"); }
.fl-theme-by .sjrk-st-intro-caret { background-image: url("../fonts/caret_black.svg"); }
.fl-theme-yb .sjrk-st-intro-caret { background-image: url("../fonts/caret_yellow.svg"); }
.fl-theme-lgdg .sjrk-st-intro-caret { background-image: url("../fonts/caret_grey_light.svg"); }
.fl-theme-gw .sjrk-st-intro-caret { background-image: url("../fonts/caret_grey_dark.svg"); }
.fl-theme-gd .sjrk-st-intro-caret { background-image: url("../fonts/caret_grey.svg"); }
.fl-theme-bbr .sjrk-st-intro-caret { background-image: url("../fonts/caret_black.svg"); }

.fl-theme-bw .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_black.svg"); }
.fl-theme-wb .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_white.svg"); }
.fl-theme-by .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_black.svg"); }
.fl-theme-yb .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_yellow.svg"); }
.fl-theme-lgdg .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_grey_light.svg"); }
.fl-theme-gw .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_grey_dark.svg"); }
.fl-theme-gd .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_grey.svg"); }
.fl-theme-bbr .sjrk-st-browser-story-thumbnail { background-image: url("../fonts/Book_black.svg"); }

.fl-theme-bw .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_black.svg"); }
.fl-theme-wb .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_white.svg"); }
.fl-theme-by .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_black.svg"); }
.fl-theme-yb .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_yellow.svg"); }
.fl-theme-lgdg .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_grey_light.svg"); }
.fl-theme-gw .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_grey_dark.svg"); }
.fl-theme-gd .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_grey.svg"); }
.fl-theme-bbr .sjrk-st-page-footer-oak-logo { background-image: url("../fonts/logo_oak_black.svg"); }

.fl-theme-bw .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_black.svg"); }
.fl-theme-wb .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_white.svg"); }
.fl-theme-by .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_black.svg"); }
.fl-theme-yb .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_yellow.svg"); }
.fl-theme-lgdg .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_grey_light.svg"); }
.fl-theme-gw .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_grey_dark.svg"); }
.fl-theme-gd .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_grey.svg"); }
.fl-theme-bbr .sjrk-st-page-footer-idrc-logo { background-image: url("../fonts/logo_idrc_black.svg"); }

.fl-theme-bw .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_black.svg"); }
.fl-theme-wb .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_white.svg"); }
.fl-theme-by .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_black.svg"); }
.fl-theme-yb .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_yellow.svg"); }
.fl-theme-lgdg .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_grey_light.svg"); }
.fl-theme-gw .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_grey_dark.svg"); }
.fl-theme-gd .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_grey.svg"); }
.fl-theme-bbr .sjrk-st-page-footer-hewlett-logo { background-image: url("../fonts/logo_hewlett_black.svg"); }