@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,600i,700");

:root {
    --site-blue: #1f2b43;
    --site-medium-blue: #29abe2;
    --site-light-blue: #a7d3e9;
    --site-orange: #c44400;
    --site-red: #d94540;
    --site-red-orange: #f68b65;
    --site-grey: #eeeeef;
    --site-dark-grey: #d1d2d4;
    --site-dark-grey-2: #5a5b5e;
    --site-dark-grey-3: #333333;
    --site-teal: #007d94;
    --site-turquoise: #cbe2e1;
    --site-yellow: #f2d17e;
    --site-font: "Source Sans Pro";
    --site-serif-font: "Vollkorn";
}

body {
    font-family: var(--site-font), sans-serif;
    background: url("../images/background.png");
    padding: 0;
}

h3:empty {
    display: none;
}

.flc-toc-tocContainer {
    background: var(--site-blue);
    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);
}

.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-decoration: none;
    background: url(../fonts/sjrk-logo.svg) no-repeat;
    display: block;
    height: 7rem;
    max-height: 7rem;
    width: 5.25rem;
    align-self: center;
}

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

.sjrk-st-top-menu.authoring-enabled {
    top: 1.75rem;
}

.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 {
    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 {
    background: none;
    color: var(--site-blue);
    padding: 0;
}

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

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

.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-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;
    background: #fff;
}

.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;
    color: #fff;
}

.sjrk-st-menu-story-builder-title-background {
    background: var(--site-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-dark-grey-3);
}

.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-dark-grey-3);
}

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

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

.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-blue) url(../fonts/background.svg) 0 0/cover no-repeat;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

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

.sjrk-st-page-footer-text-container a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.sjrk-st-page-footer-logo-container {
    background: var(--site-blue);
    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_white.svg) no-repeat;
}

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

.sjrk-st-page-footer-idrc-logo {
    width: 12rem;
    background: url(../fonts/logo_idrc_white.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 {
        justify-content: center;
    }

    .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-page-footer-container,
.fl-theme-wb .sjrk-st-page-footer-container,
.fl-theme-by .sjrk-st-page-footer-container,
.fl-theme-yb .sjrk-st-page-footer-container,
.fl-theme-lgdg .sjrk-st-page-footer-container,
.fl-theme-gw .sjrk-st-page-footer-container,
.fl-theme-gd .sjrk-st-page-footer-container,
.fl-theme-bbr .sjrk-st-page-footer-container {
    background: none;
}

.fl-theme-bw .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-black.svg"); }
.fl-theme-wb .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-white.svg"); }
.fl-theme-by .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-black.svg"); }
.fl-theme-yb .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-yellow.svg"); }
.fl-theme-lgdg .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-grey-light.svg"); }
.fl-theme-gw .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-grey-dark.svg"); }
.fl-theme-gd .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-grey.svg"); }
.fl-theme-bbr .sjrk-st-page-header-main-title { background-image: url("../fonts/sjrk-logo-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"); }

.fl-orator-controller,
.sjrk-st-browser-view-control-container,
.sjrk-prefsEditor-container {
    display: none;
}