@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700');


/* Global */
body, html {
    height: 100%;
    min-height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #000;
}

a {
    color: #000;
    background-image: linear-gradient(180deg,transparent 60%, rgba(191, 191, 191, .5) 0);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    text-decoration: none;
}

a:hover {
    background-image: linear-gradient(180deg,transparent 90%, rgb(0, 0, 0) 0);
}


/* Header */
#header {
    background-image: url("../images/header-city.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    margin: 0;
    min-height: 489px;
}

.headerContainer {
    padding: 11em 6.2em 0 6.2em;
    width: 58%;
}

.headerContainer h1 {
    font-family: 'Work Sans', sans-serif;
    color: #333;
    font-size: 2.5em;
    font-weight: 700;
    background-color: #fff;
    display: inline-block;
    margin-bottom: 0.6em;
}

.subtitle {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    color: #333;
    width: 90%;
    font-size: 1.5em;
    text-indent: -0.2em;
    background-color: #fff;
    display: inline-block;
}

.quote {
    font-size: 0.8em;
}

#content {
    background-color: #fff;
    width: 100%;
}

#introContainer {
    background-color: #a7d3e9;
    padding: 4em 5.8em;
    margin: 0 auto;
    text-align: center;
}

.introduction {
    width: 70%;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #212121;
    font-size: 2em;
    display: inline-block;
}

.row {
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    padding: 2em 6.5em;
}

.contentBlock {
    padding: 0;
    min-width: 0;
    flex: 1 500px;
}

.contentBlock:first-child {
    padding-right: 1.75em;
}

.contentBlock:last-child {
    padding-left: 1.75em;
}

.row:last-child {
    background: #F2F2F2;
}

.contentBlock h2 {
    font-family: 'Work Sans', sans-serif;
    color: #212121;
    font-weight: 500;
    font-size: 1.5em;
}

.contentBlock p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #212121;
    font-size: 1.2em;
    line-height: 1.7em;
}

.contentBlock ol {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.9em;
    counter-reset: li;
}

.contentBlock ol > li {
    list-style: none;
}

.contentBlock ol > li:before {
    display: inline-block;
    font-weight: bold;
    content: counter(li);
    counter-increment: li;
    text-align: left;
    text-indent: -1.5em;
}

.img {
    margin: 0 auto;
    max-width: 900px;
}

.imageContainer {
    text-align: center;
}

#ideasContainer {
    background-color: #fff;
    padding: 0 6.5em 2em 6.5em;
}

.ideas h2 {
    font-family: 'Work Sans', sans-serif;
    color: #000;
    font-weight: 500;
    padding: 0 0;
    margin: 0;
    font-size: 2em;
}

.ideasBlock {
    padding: 1em 0;
}

.ideas p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    margin: 0.8em 0;
    font-size: 1.2em;
    line-height: 1.6em;
}

.ideasDate {
    text-transform: uppercase;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.2em;
    margin-top: 1em;
    margin-bottom: 0;
}

.ideasLink h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 1.6em;
    margin-top: 0.2em;
    margin-bottom: 1em;
}

.ideasDesc p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
}

#mailingListContainer {
    background-color: #a7d3e9;
}

.mailingList {
    padding: 4em 4em;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.mailingList h2 {
    font-family: 'Work Sans', sans-serif;
    color: #212121;
    padding: 0 0;
    margin: 0;
    font-size: 2em;
    font-weight: 500;
}

.mailingList p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #212121;
    margin: 0.8em 0;
    font-size: 1.2em;
    line-height: 1.6em;
    padding-bottom: 1.2em;
}

.mailingList .submit {
    border: solid 1px #7c7c7c;
    padding: 0.5em 0.8em;
    background-color: #fff;
    background-image: none;
    text-decoration: none;
    padding: 0.7em 1.2em;
    font-size: 1.2rem;
}

.mailingList .submit:active {
    vertical-align: top;
    padding: 8px 13px 6px;
}


/* Footer */
#footer {
    background: #f2f2f2;
    margin: 0 auto;
    padding: 2em 2em;
    text-align: center;
}

#footer p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 1em;
}

.logoContainer {
    width: 250px;
    height: 65px;
    background-image: url("../images/idrc-logo-black.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    position: relative;
    margin-top: 0;
    resize: both;
    margin: 0 auto;
}


/* Ideas in Progress */
#ideasHeader {
    width: 100%;
    margin: 0 auto;
    background-color: transparent;
    display: block;
}

.ideasHeaderContainer {
    padding: 2em 0 2em 6.5em;
    display: flex;
    justify-content: space-between;
}

.ideasHeaders {
    margin: 1em 0;
}

.ideasHeaders a {
    font-family: 'Work Sans', sans-serif;
    color: #000;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
}

#ideasContent {
    width: 100%;
}

.ideasContentContainer {
    width: 80%;
    padding: 3em 5em 4em 6.5em;
}

.ideasContentBlock {
    padding: 0;
    margin: 0;
}

.ideasContentBlock h1 {
    font-family: 'Work Sans', sans-serif;
    color: #212121;
    font-size: 2.2em;
    font-weight: 400;
}

.ideasContentBlock h2 {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.6em;
    font-weight: 500;
}

.ideasContentBlock h3 {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.3em;
    font-weight: 500;
}

.ideasContentBlock p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #212121;
    font-size: 1.1em;
    line-height: 1.6em;
}

.ideasContentBlock blockquote {
    line-height: 1.6em;
    font-style: italic;
    font-family: 'Work Sans', sans-serif;
}

.ideasContentBlock ol, .ideasContentBlock ul {
    line-height: 1.5em;
    font-size: 1.1em;
    font-family: 'Work Sans', sans-serif;
}

.home {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

/* Skip to content link */

#skipToContent {
    float: left;
    height: 0rem;
}

#skipToContent a,
#skipToContent a:hover,
#skipToContent a:visited {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: #fff;
    background: #000;
    font-size: 1.2em;
}

#skipToContent a:active,
#skipToContent a:focus {
    left: auto;
    width: auto;
    height: auto;
    padding: 0.9em;
    z-index: 1;
}

/* Navbar */

nav {
    background: #333333;
    padding: 1.2em 0 1em 6.5em;
}

nav ul {
    margin: 0;
    padding: 0;
}

li.navbarEntry {
    display: inline-block;
    padding: 0 0 0.2em 0;
    margin: 0 1.4em 0 0;
}

li.navbarEntryCurrent {
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: #f2f2f2;
}

li.navbarEntry a {
    font-size: 1.4em;
    background-image: none;
    color: #f2f2f2;
}

li.navbarEntry a:hover {
    background-image: none;
    color: #f2f2f2;
}

/* H1 */

.h1Container {
    margin: 0;
    padding: 0 0 0 6.5em;
}

.h1Container h1 {
    margin: 1.25em 0 0 0;
    padding: 0;
    font-size: 2.2em;
}

/* Resources list page */

.resourcesListContainer {
    padding: 0 6.5em 3em 6.5em;
}

.resourcesListContainer h2 {
    font-size: 1.2em;
    margin-top: 2em;
}

.resourcesIntroSection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5em;
}

.resourcesIntroText {
    flex: 1 0 350px;
    font-size: 1.1em;
    line-height: 1.6em;
    margin: 1.5em 3em 1.5em 0;
}

.resourcesIntroText h2 {
    margin-top: 0;
}

.resourcesCoDesignTemplateImgCol {
    flex: 0 0 auto;
    margin: 1.5em 0;
}

.resourcesCoDesignTemplateImg a {
    background-image: none;
}

.resourcesCoDesignTemplateImg a:hover {
    text-decoration: none;
}

.resourcesCoDesignTemplateDownloadLinks {
    margin-top: 1em;
    max-width: 550px;
    font-size: 1.1em;
    line-height: 1.6em;
}

.resourcesCardListIntro {
    margin-top: 2em;
    font-size: 1.1em;
    line-height: 1.6em;
    max-width: 50em;
}

.resourcesLegend {
    display: inline-block;
    background: #f2f2f2;
    margin: 0;
    padding: 0.5em 0.7em 0.7em 0.7em;
}

.resourcesLegend li {
    display: inline-block;
    margin: 0 0.5em;
    padding: 0 0 0.2em 0;
    border-width: 0 0 3px 0;
    border-style: solid;
}

.resourcesLegend li svg {
    width: 18px;
    height: 18px;
}

.resourcesCardRow {
    background: #f2f2f2;
    padding: 0.5em;
}

.resourcesCard {
    display: inline-block;
    vertical-align: top;
    margin: 0.5em;
    border: 1px solid #bbb;
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
}

.resourcesCardHeader {
    padding: 0.2em 0.5em;
}

.resourcesCardHeader svg {
    width: 22px;
    height: 22px;
    fill: #FFF;
}

.resourcesCardTitle {
    padding: 1.7em 2em;
    width: 9em;
    line-height: 1.4em;
    min-height: 4.2em; /* line-height * 3 */
    font-weight: 600;
}

.resourcesCardTitle a {
    background-image: none;
}

.resourcesCardTitle a:hover {
    text-decoration: underline;
}

.resourcesCardDescriptionToggleContainer {
    text-align: center;
}

.resourcesCardDescriptionToggle {
    cursor: pointer;
    display: inline-block;
    background-image: url("../images/arrow_up.svg");
    width: 80px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.resourcesCard.descriptionCollapsed .resourcesCardDescriptionToggle {
    background-image: url("../images/arrow_down.svg");
}

.resourcesCard.descriptionCollapsed .resourcesCardDescription {
    display: none;
}

.resourcesCardDescription {
    padding: 1em 2em;
    width: 9em;
    line-height: 1.4em;
    min-height: 12.6em; /* line-height * 9 */
    font-weight: 300;
    color: #000;
    background: #E6E6E6;
}

.resourcesCardDescription a {
    background-image: none;
    text-decoration: underline;
}

.resourcesCardDescription a:hover {
    text-decoration: underline;
}

/* Resource format colours */

.resourcesCard.perspective .resourcesCardHeader,
.resourcePageTitleSection.perspective {
    background: #303d47;
}

.resourcesCard.reflection .resourcesCardHeader,
.resourcePageTitleSection.reflection {
    background: #A5660A;
}

.resourcesCard.tool .resourcesCardHeader,
.resourcePageTitleSection.tool {
    background: #D14637;
}

.resourcesLegend li.perspective {
    border-color: #303d47;
}

.resourcesLegend li.reflection {
    border-color: #A5660A;
}

.resourcesLegend li.tool {
    border-color: #D14637;
}

.resourcesLegend li.perspective svg {
    fill: #303d47;
}

.resourcesLegend li.reflection svg {
    fill: #A5660A;
}

.resourcesLegend li.tool svg {
    fill: #D14637;
}

/* Resource detail pages */

.resourcePageTitleSection {
    padding: 2.5em 6.5em 2em 6.5em;
    color: #fff;
}

.resourcePageTitleSection > * {
    vertical-align: top;
}

.resourcePageFormatIcon {
    display: inline-block;
}

.resourcePageFormatIcon svg {
    width: 60px;
    height: 60px;
    fill: #FFF;
}

.resourcePageTitleAndDescription {
    display: inline-block;
    padding: 0 0 0 2em;
}

.resourcePageTitleAndDescription h1 {
    font-size: 2em;
    font-weight: 500;
    margin: 0;
}

.resourcePageFormatName,
.resourcePageDescription {
    font-size: 1.1em;
    font-weight: 300;
    max-width: 38em;
    line-height: 1.4em;
}

.resourcePageDescription {
    margin: 1.1em 0 0 0;
}

.resourcePageContentContainer {
    padding: 2em 6.5em 2em 6.5em;
}

.resourcePageContent {
    font-size: 1.1em;
    line-height: 1.6em;
    max-width: 45em;
}

.resourcePageContent ul {
    padding-left: 1em;
}

.resourcePageContent ul ul {
    padding-left: 3em;
}

.resourcePageContent h2 {
    font-size: 1.2em;
    margin-top: 2.5em;
}

.resourcePageRelatedResources {
    padding: 0.5em;
    margin: 0 6.5em 3em 6.5em;
    background: #f2f2f2;
}

.resourcePageRelatedResources h2 {
    font-size: 1.2em;
    margin: 0.5em;
    padding: 0;
}

/* Turn off parallax on smaller screens */
@media only screen and (max-device-width: 1366px) {

    body, html {
        background-attachment: scroll;
    }

}

@media only screen and (max-width: 79.5em) {
    .img {
        display: none;
    }
}

/* Extra small devices */
@media only screen and (max-width: 40em) {

    #header {
        background-image: none;
        padding: 1.4em 0.5em;
        min-height: 0;
    }

    .headerContainer {
        width: 80%;
        padding: 2em;
    }

    .headerContainer h1 {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1em;
    }

    .quote {
        font-size: 0.9em;
    }

    .introduction {
        font-size: 1.5em;
        width: 80%;
    }

    #ideasContainer {
        padding-left: 2em;
        padding-right: 2em;
    }

    .ideas {
        width: 90%;
    }

    .mailingList {
        width: 80%;
        padding: 2em;
    }

    .row {
        padding: 2em;
    }

    .contentBlock:first-child {
        padding-right: 0;
        padding-left: 0;
    }

    .contentBlock:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .ideasContentContainer {
        width: 80%;
        padding: 2em;
    }

    .ideasHeaderContainer {
        padding: 2em;
    }

    nav {
        padding-left: 2em;
    }

    .h1Container {
        padding-left: 2em;
    }

    .resourcesListContainer {
        padding-left: 2em;
        padding-right: 2em;
    }

    .resourcePageTitleSection {
        padding: 2em;
    }

    .resourcePageContentContainer {
        padding-left: 2em;
        padding-right: 2em;
    }

    .resourcePageRelatedResources {
        margin-left: 2em;
        margin-right: 2em;
    }

}

/* Small devices */
@media only screen and (min-width: 40em) {

    #header {
        background-image: none;
        padding: 1.4em 0.5em;
    }

    .headerContainer {
        width: 80%;
        padding: 2em;
    }

    .headerContainer h1 {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1.2em;
    }

    .quote {
        font-size: 0.9em;
    }

    .introduction {
        font-size: 1.5em;
        width: 80%;
    }

    #ideasContainer {
        width: 80%;
        padding-left: 2em;
        padding-right: 2em;
    }

    .ideas {
        width: 90%;
    }

    .mailingList {
        width: 90%;
        padding: 2em;
    }

    .row {
        padding-left: 6.5em;
        padding-right: 6.5em;
    }

    .contentBlock:first-child {
        padding-right: 0;
        padding-left: 0;
    }

    .contentBlock:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .ideasContentContainer {
        width: 80%;
        padding: 2em;
    }

    .ideasHeaderContainer {
        padding: 2em;
    }

    nav {
        padding-left: 2em;
    }

    .h1Container {
        padding-left: 2em;
    }

    .resourcesListContainer {
        padding-left: 2em;
        padding-right: 2em;
    }

    .resourcePageTitleSection {
        padding: 2em;
    }

    .resourcePageContentContainer {
        padding-left: 2em;
        padding-right: 2em;
    }

    .resourcePageRelatedResources {
        margin-left: 2em;
        margin-right: 2em;
    }

}

/* Medium devices */
@media only screen and (min-width: 48em) {

    #header {
        background-image: url("../images/header-city.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: contain;
        padding: 1.4em 0.5em;
    }

    .headerContainer {
        width: 58%;
    }

    .headerContainer h1 {
        font-size: 2.1em;
    }

    .subtitle {
        font-size: 1.3em;
    }

    .quote {
        font-size: 0.9em;
    }

    .introduction {
        font-size: 1.6em;
    }

    #ideasContainer {
        padding-left: 6.5em;
        padding-right: 6.5em;
    }

    .ideas {
        width: 70%;
    }

    .mailingList {
        width: 70%;
    }

    .img {
        visibility: visible;
    }

    .contentBlock:first-child {
        padding-right: 2.5em;
    }

    .contentBlock:last-child {
        padding-left: 0;
    }

    .ideasContentContainer {
        width: 70%;
        padding: 3em 5em 4em 6.5em;
    }

    .ideasHeaderContainer {
        padding: 2em 0 2em 6.5em;
    }

    nav {
        padding-left: 6.5em;
    }

    .h1Container {
        padding-left: 6.5em;
    }

    .resourcesListContainer {
        padding-left: 6.5em;
        padding-right: 6.5em;
    }

    .resourcePageTitleSection {
        padding: 2.5em 6.5em 2em 6.5em;
    }

    .resourcePageContentContainer {
        padding-left: 6.5em;
        padding-right: 6.5em;
    }

    .resourcePageRelatedResources {
        margin-left: 6.5em;
        margin-right: 6.5em;
    }

}

@media screen and (min-width: 64em) {

    #header {
        background-image: url("../images/header-city.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: contain;
        padding: 1.4em 0.5em;
    }

    .headerContainer {
        width: 58%;
    }

    .headerContainer h1 {
        font-size: 2.5em;
    }

    .subtitle {
        font-size: 1.5em;
    }

    .quote {
        font-size: 0.9em;
    }

    .introduction {
        font-size: 2em;
    }

    #ideasContainer {
        padding-left: 6.5em;
        padding-right: 6.5em;
    }

    .img {
        visibility: visible;
    }

    .contentBlock {
        padding: 0 6.5em;
    }

    .contentBlock:first-child {
        padding-right: 2.5em;
    }

    .contentBlock:last-child {
        padding-left: 0;
    }

    .ideasContentContainer {
        width: 70%;
        padding: 3em 5em 4em 6.5em;
    }

    .ideasHeaderContainer {
        padding: 2em 0 2em 6.5em;
    }

}

/* UIO Customization */
.flc-toc-tocContainer {
    width: 85%;
    margin: 0 auto;
    font-size: 1.5em;
}

.fl-prefsEditor-separatedPanel .fl-panelBar {
    background-color: transparent;
    color: #000;
    border-bottom: none;
    box-shadow: none;
}

.fl-prefsEditor-separatedPanel .fl-panelBar .fl-prefsEditor-buttons {
    background-color: transparent;
    color: #000;
    box-shadow: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    margin-right: 10em;
}

.fl-prefsEditor-separatedPanel .fl-prefsEditor-reset {
    background-color: transparent;
    color: #000;
    box-shadow: none;
}

.fl-prefsEditor-separatedPanel .fl-prefsEditor-showHide, .fl-prefsEditor-separatedPanel .fl-prefsEditor-reset {
    background-color: transparent;
    color: #000;
    box-shadow: none;
}

.fl-theme-by body,
.fl-theme-yb body,
.fl-theme-wb body,
.fl-theme-bw body,
.fl-theme-lgdg body,
.fl-theme-by html,
.fl-theme-yb html,
.fl-theme-wb html,
.fl-theme-bw html,
.fl-theme-lgdg html {
    background: none;
}

.fl-theme-by #header,
.fl-theme-yb #header,
.fl-theme-wb #header,
.fl-theme-bw #header,
.fl-theme-lgdg #header {
    background: none;
}

.fl-theme-wb .logoContainer {
    background-image: url("../images/idrc-logo.svg");
}

.fl-theme-bw .logoContainer {
    background-image: url("../images/idrc-logo-black.svg");
}

.fl-theme-by .logoContainer {
    background-image: url("../images/idrc-logo-black.svg");
}

.fl-theme-yb .logoContainer {
    background-image: url("../images/idrc-logo-yellow.svg");
}

.fl-theme-lgdg .logoContainer {
    background-image: url("../images/idrc-logo-grey.svg");
}

.fl-theme-bw .resourcesLegend li svg,
.fl-theme-bw .resourcesCardHeader svg,
.fl-theme-bw .resourcePageFormatIcon svg,
.fl-theme-by .resourcesLegend li svg,
.fl-theme-by .resourcesCardHeader svg,
.fl-theme-by .resourcePageFormatIcon svg {
    fill: #000;
}

.fl-theme-wb .resourcesLegend li svg,
.fl-theme-wb .resourcesCardHeader svg,
.fl-theme-wb .resourcePageFormatIcon svg {
    fill: #FFF;
}

.fl-theme-yb .resourcesLegend li svg,
.fl-theme-yb .resourcesCardHeader svg,
.fl-theme-yb .resourcePageFormatIcon svg {
    fill: #FF0;
}

.fl-theme-lgdg .resourcesLegend li svg,
.fl-theme-lgdg .resourcesCardHeader svg,
.fl-theme-lgdg .resourcePageFormatIcon svg {
    fill: #BDBDBB;
}

/* Transition setting for all elements to avoid the "flash" effect when switching contrast themes via alanharnum.ca */
* {
    transition-property: color, background-color;
    transition-duration: 1s;
}