/**
 * CSS for Learners' Toolkit
 *
 * This file is in version control:
 * https://github.com/uofa/learners-toolkit
 *
 * Created 27 Jun 2015
 * Updated 11 Aug 2022
 *
 * Latest update: headings should not be transformed, CHD
 *
 * @author Allan A Beattie
 * @author Colin Denholm
 */


/* fonts
------------------------------------------------------------ */

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700';
@import '../../global/fonts/font-awesome-4.7.0/css/font-awesome.min.css';


/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}


/* common styles
------------------------------------------------------------ */

html {
    overflow-y: scroll;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

body {
    background-color: #454D50;
    --abdn-icon-font: "FontAwesome";
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 1em 0 0.3em;
    font-weight: 400;
}

p {
    margin: 0 0 1em;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    margin: 1em 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#a11y_links a:focus {
    display: block;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    padding: 1em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
    background: #e2edfc;
    text-decoration: underline;
    color: #444;
}

#page_header #a11y_links a:focus {
    opacity: 1;
}


/* containers
------------------------------------------------------------ */

.wrapper {
    position: relative;
    max-width: 66.666em;
    margin: 0 auto;
}

#page_header {
    overflow: hidden;
}

#page_header a:hover,
#page_header a:focus {
    opacity: 0.5;
}

#page_header a:active {
    opacity: 1;
}

main {
    padding: 1em 3% 2em;
    background: #f1f1f1;
}


/* header bar
------------------------------------------------------------ */

#header_bar {
    background: #454d50;
    padding: 1em 3%;
}

#uni_logo {
    display: block;
    width: 140px;
    margin: 0 auto 0.6em;
}

#home_link,
#header_links a {
    text-decoration: none;
    color: #fff;
}

#big_header {
    margin: 0;
    font-size: inherit;
    text-align: center;
}

#big_header b,
#big_header i {
    display: block;
    line-height: 0.9em;
    font-style: normal;
    font-weight: 400;
}

#big_header b {
    font-size: 1.8em;
}

#big_header i {
    font-size: 0.8em;
    text-transform: lowercase;
}

#tools_types_links {
    display: none;
}


/* tool bar
------------------------------------------------------------ */

#tool_bar {
    background: #373c3f;
    padding: 0 3% 1em;
}

#header_links {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

#header_links li {
    display: inline-block;
    padding: 0 1em;
}

#header_links li a {
    display: block;
    padding: 0.6em 1em;
}

#header_links {
    display: flex;
    justify-content: space-between;
}

#header_links li {
    padding: 0;
}


/* modal
------------------------------------------------------------ */

#modal_buttons_box {
    display: none;
}

#modal_buttons {
    font-size: 0;
}

#modal_buttons li {
    font-size: 1rem;
}

#hidden_data {
    display: block;
}

#hidden_data h2,
#modal h2 {
    text-transform: uppercase;
}

#modal h2 {
    margin-top: 0;
}

#modal h3 {
    font-weight: bold;
}

#modal h3 + .modal_document_list {
    margin-top: 0;
}

.modal_image_list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.modal_image_list li {
    display: inline;
}

.modal_document_list {
    padding: 0;
    list-style: none;
}

.modal_document_list li {
    font-size: 1.4em;
    margin-bottom: 0.2em;
    word-wrap: break-all;
}

.modal_document_list li a {
    text-decoration: none;
    color: #000;
}

.modal_document_list i {
    color: #fff;
    padding: 0.3em;
    margin-right: 0.2em;
    border-radius: 0.3em;
}

.modal_document_list a:hover,
.modal_document_list a:focus {
    opacity: 0.5;
}

.document_icon {
    padding: 0.2em;
    border: 0;
    border-radius: 0.2em;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
}

.last_modified {
    text-align: right;
    font-size: smaller;
}

/* search
------------------------------------------------------------ */

#search * {
    box-sizing: border-box;
}

#search fieldset {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

#kw {
    float: left;
    width: 100%;
    height: 2.5em;
    padding: 0.5em 2.6em 0.5em 0.5em;
    border: 0;
    border-radius: 0.5em;
    background: #fff;
    vertical-align: middle;
}

#search_go {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5em;
    height: 2.5em;
    padding: 0 0.5em;
    border: none;
    border-radius: 0 0.5em 0.5em 0;
    background: none;
    text-align: center;
}

#search_go i {
    font-size: 1.4em;
}

#search_go:focus {
    background: #111;
    color: #eee;
}

#kw:focus,
input[type=text]:focus,
input[type=search]:focus,
textarea:focus {
    background: #fdffce;
}


/* breadcrumb
------------------------------------------------------------ */

.breadcrumb ol {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

.breadcrumb li {
    display: inline-block;
}

.breadcrumb li:after {
    content: '\a0\203A\a0';
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb a {
    text-decoration: none;
    color: #373c3f;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    border-bottom: 1px dotted #373c3f;
}

.breadcrumb a:focus {
    background-color: #fff;
}


/* tooltips
------------------------------------------------------------ */

span.tooltips {
    position: relative;
    display: inline;
}

span.tooltips span {
    position: absolute;
    width: 10em;
    color: #fff;
    background: #000;
    text-align: center;
    left: -9999px;
    top: auto;
    padding: 0.5em;
    border-radius: 6px;
}

span.tooltips span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-bottom: 8px solid #000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

span:hover.tooltips span {
    visibility: visible;
    opacity: 1;
    top: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}

.restricted {
    float: right;
    cursor: help;
}

.restricted::after {
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 1.2em;
    content: '\f023';
}


/* toolkit tabcordion additions
------------------------------------------------------------ */

.tabcordion .tool_description[aria-hidden='true'] {
    display: block;
}

.tabcordion_wrapper > .tabcordion_nav {
    border-bottom: 0;
    text-align: right;
}

.tabcordion_mode_accordion > dd {
    border: 0;
    background: #454D50;
}

.tabcordion_wrapper > .tabcordion_nav > li a {
    margin-left: 0.3em;
    border-top-right-radius: 0.5em;
    border-top-left-radius: 0.5em;
    background: #373c3f;
    color: #fff;
}

.tabcordion_wrapper > .tabcordion_nav > li a[aria-selected='true'] {
    border-bottom: 0.3em solid #454d50;
    background: #454d50;
    box-shadow: none;
}

.tabcordion_wrapper > .tabcordion_nav > li a:focus {
    border-bottom: 0.3em solid #C80B6F;
    box-shadow: none;
}

.tabcordion_loaded.tabcordion > dt a {
    color: #000;
    background: #f8f8f8;
}

.tabcordion_loaded.tabcordion > dt a:hover,
.tabcordion_loaded.tabcordion > dt a:focus {
    color: #fff;
    background: #373C3F;
    box-shadow: none;
}

.tabcordion_loaded .tabcordion_loaded > dt a[aria-selected='true'] {
    color: #fff;
    background: #373C3F;
}

.tabcordion_wrapper dd > div {
    background: #454d50;
    border-radius: 0.5em 0 0.5em 0.5em;
}

.tabcordion_mode_accordion dd > div {
    border-radius: 0 0 0.5em 0.5em;
    border: 1px solid #373C3F;
    border-top: 0;
}

.tabcordion .tabcordion > dd {
    background: #454d50;
}


/* tab navigation and headings
------------------------------------------------------------ */

.toolkit h2 {
    clear: left;
    margin-bottom: 0.5em;
    color: #000;
}

.tabcordion_loaded .tab_heading,
.tabcordion_loaded h2 {
    color: #fff;
}

.tab_skip_links {
    padding: 0 0 1em;
    list-style: none;
    margin: 0;
}

.tabcordion_loaded .tab_skip_links,
.tab_heading {
    font-size: 80%;
}

.tabcordion_loaded h2,
.tabcordion_loaded button {
    font-size: 1em;
}

.tab_skip_links li {
    display: inline-block;
    margin-right: 0.5em;
    border-right: 1px solid #000;
    padding-right: 0.5em;
}

.tabcordion_loaded .tab_skip_links li {
    border-right: 1px solid #fff;
}

.tab_skip_links li:last-of-type {
    border-right: none;
    padding-right: 0;
}

.tab_skip_links li a {
    color: #000;
    text-decoration: none;
}

.tabcordion_loaded .tab_skip_links li a {
    color: #fff;
}

.tab_skip_links li a:hover{
    opacity: 0.5;
}

.tab_skip_links li a:focus {
    outline: 1px solid #c80b6f;
    background-color: #fff;
    color: #000;
}

.tabcordion > dt a {
    display: inline;
}

.tabcordion_loaded > dt a {
    display: block;
}

.tabcordion_loaded.tabcordion > dt a,
.tabcordion_wrapper > .tabcordion_nav > li a:focus,
.tabcordion_wrapper > .tabcordion_nav > li a[aria-selected='true'] {
    box-shadow: none;
}

/* tools
------------------------------------------------------------ */

.search_results {
    background-color: #454D50;
    padding: 1.5em 2%;
    border-radius: 0.5em;
}

.toolkit h1 {
    position: relative;
    margin: 0 0 0.75em;
    padding: 0.75em 3em;
    border-radius: 0.5em;
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    color: #fff;
}

.toolkit ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toolkit li {
    padding: 0;
    margin: 0 0 1em;
    border-radius: 0.6em;
    background: #fff;
}

.toolkit li a {
    padding: 0.8em;
}


/* ensure single feature on mobile
------------------------------------------------------------ */

.featured li:nth-child(2),
.featured li:nth-child(3),
.featured li:nth-child(4),
.featured li:nth-child(5),
.featured li:nth-child(6) {
    display: none;
}

.toolkit a {
    display: block;
    text-decoration: none;
    color: #000;
    height: 14em;
}

.toolkit a:hover,
.toolkit a:focus {
    opacity: 0.5;
}

.tool_icon {
    display: block;
    height: 8em;
    margin: 0 0 0.5em;
    border-radius: 0.5em;
    background-repeat: no-repeat;
    background-position: center;
}

.tool_name {
    font-size: 0.8em;
    font-weight: 700;
}

.tool_description {
    display: block;
    font-size: 0.7em;
}

button.toggle_tools {
    display: none;
    float: right;
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
    padding: 0 0 0 1em;
    margin-top: 1em;
}

.toggle_tools:hover,
.toggle_tools:focus {
    opacity: 0.5;
}


/* mosaic
------------------------------------------------------------ */

#video_box {
    margin-bottom: 1em;
}

.color_border {
    border-radius: 0.8em;
    padding: 2em;
    background-color: #373c3f;
}

.mosaic * {
    box-sizing: border-box;
}

h1 {
    position: relative;
    margin: 0 0 0.75em;
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    color: #fff;
}

h1.color_border {
    padding: 0.75em 3em;
}

.mosaic ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mosaic li {
    margin-bottom: 0.5em;
}

.mosaic a {
    display: block;
    padding: 0.5em;
    border-radius: 0.75rem;
    background-position: center top;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 2em;
    text-decoration: none;
    color: #fff;
}

.mosaic a b {
    font-size: 0.5em;
    display: block;
    margin-top: -0.4em;
}

.mosaic a:hover {
    opacity: 0.5;
}

.mosaic a:active {
    opacity: 1;
    background-color: transparent;
}

.mosaic a.mosaic_header_link {
    float: left;
    padding: 0.3525em 0 0;
    font-size: 1em;
}

.mosaic a.tool_header_link {
    position: absolute;
    top: 50%;
    right: 9.2em;
    margin-top: -1.2em;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
}

#web_text_box h2:first-of-type,
#web_text_box h3:first-of-type {
    margin-top: 0;
}

#web_text_box a {
    border-bottom: 1px solid;
    color: #373c3f;
    text-decoration: none;
}

#web_text_box a:hover {
    border-bottom: 1px dashed;
}

#web_text_box a:focus {
    background-color: #fff;
}

.mosaic .webtext a {
    padding: 3em;
    font-size: 3.5em;
}


/* footer
------------------------------------------------------------ */

footer {
    background: #454d50;
    text-align: center;
    font-size: 0.9em;
    color: #eee;
}

footer ul {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

footer li {
    display: inline-block;
}

footer a {
    display: block;
    margin: 0 1em 0 0;
    text-decoration: none;
    color: #fff;
}

footer a:hover,
footer a:focus {
    opacity: 0.5;
}

footer a:visited {
    color: #fff;
}

.footer_info a[target $="_blank"]::after {
    display: inline-block;
    padding: 0 0.5em;
    font-family: 'FontAwesome';
    font-size: 0.9em;
    text-decoration: none;
    content: '\f08e';
}

.awards {
    max-width: 66.666em;
    margin: 0 auto 1em;
    padding: 2em 3%;
}

.awards ul {
    margin: 0;
}

.awards li {
    display: block;
    margin-bottom: 2em;
}

.awards a {
    margin: 0;
}

.footer_info {
    padding: 0 3%;
}


/* misc
------------------------------------------------------------ */

.offscreen {
    position: absolute;
    top: auto;
    left: -9999em;
    background: #fff;
    font-size: 1em;
    color: #111;
    outline: none;
}

.hidden {
    display: none;
}

.clearfix:before,
.clearfix:after {
    content: ' ';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/* for embedding videos
------------------------------------------------------------ */

.video_container {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
}

.video_container iframe,
.video_container object,
.video_container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* slick carousel overrides
------------------------------------------------------------ */

.slick-dots {
    width: 70%;
    width: calc(100% - 6rem);
    margin: 0 auto;
}

.slick-dots li button {
    color: #fff;
}

.slick-dots li button::before {
    color: #f8f8f8;
    opacity: 0.5;
}

.slick-dots li button:hover::before,
.slick-dots li button:focus::before {
    color: #f8f8f8;
}

.slick-prev,
.slick-next {
    top: auto;
    bottom: 0;
}

.slick-initialized .slick-slide {
    border: 1em solid #373C3F;
}

.slick_carousel a {
    text-decoration: none;
}

.slick_carousel figure figcaption {
    position: relative;
    bottom: 0;
    padding-bottom: 1em;
}

.slider figcaption {
    background: #373C3F;
    font-size: 90%;
    padding: 0;
}

.slick_carousel figure {
    background: #373C3F;
    color: #fff;
}

.slick-list {
    margin: 0;
}


/* modal dialog
------------------------------------------------------------ */

#modal {
    z-index: 1100;
}

#modal_fade {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 1, 0.7);
}

.modal_dialog {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 5%;
}

.modal_outer {
    position: relative;
    max-width: 42em;
    height: 100%;
    margin: 0 auto;
}

.modal_inner {
    box-sizing: border-box;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5em;
    border-radius: 0.75em;
    background: #f5f5f5;
}

.modal_close {
    display: block;
    position: absolute;
    width: 2em;
    height: 2em;
    right: -1em;
    top: -1em;
    padding: 0.3em;
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 1.2em;
    text-align: center;
    box-shadow: 0 0 0.1em 0.01em rgba(1, 1, 1, 0.8);
    cursor: pointer;
}

.modal_close::after {
    display: inline-block;
    font-family: 'FontAwesome';
    line-height: 1;
    content: '\f00d';
}

.modal_close:hover,
.modal_close:focus {
    color: #fff;
}

.modal_trap:focus {
    display: block;
    outline: 2px solid #36f;
}


/* media queries
------------------------------------------------------------ */

@media screen and (min-width: 300px) {
    .mosaic li {
        display: inline-block;
        margin-right: 2%;
        margin-bottom: 0;
        padding: 0;
    }

    .mosaic li:last-child {
        margin-right: 0;
    }

    /* two items */
    .mosaic li:first-child:nth-last-child(2),
    .mosaic li:first-child:nth-last-child(2) ~ li {
        width: 49%;
    }

    /* three items */
    .mosaic li:first-child:nth-last-child(3),
    .mosaic li:first-child:nth-last-child(3) ~ li {
        width: 32%;
    }
}


@media screen and (min-width: 360px) {
    .toolkit li {
        float: left;
        width: 48%;
        margin-right: 4%;
    }

    .toolkit li:nth-child(2n) {
        margin-right: 0;
    }

    .featured li:nth-child(2) {
        display: block;
    }

    .awards {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}


@media screen and (min-width: 520px) {
    #uni_logo {
        float: left;
        margin: 0;
    }

    #home_link {
        float: right;
    }

    #big_header {
        font-size: 1.2em;
        text-align: right;
    }

    #big_header i {
        font-size: 0.75em;
    }

    .tabcordion_loaded .tab_skip_links,
    .tab_heading {
        font-size: 90%;
    }

    .tabcordion_loaded h2,
    .tabcordion_loaded button {
        font-size: 1.2em;
    }

    .toolkit li {
        width: 30.666%;
    }

    .toolkit li:nth-child(2n) {
        margin-right: 4%;
    }

    .toolkit li:nth-child(3n) {
        margin-right: 0;
    }

    .featured li:nth-child(3) {
        display: block;
    }
}


@media screen and (min-width: 640px) {
    #uni_logo {
        margin-top: 0.2em;
    }

    #big_header {
        font-size: 1.5em;
    }

    #big_header i {
        font-size: 0.5em;
    }

    #tool_bar {
        padding: 1em 3%;
    }

    #header_links {
        float: left;
        margin-left: -1em;
    }

    #header_links li {
        margin: 0 1em 0 0;
    }

    #search {
        float: right;
        width: 22.8em;
    }

    .toolkit li {
        width: 22.75%;
        margin-right: 3%;
    }

    .toolkit li:nth-child(2n),
    .toolkit li:nth-child(3n) {
        margin-right: 3%;
    }

    .toolkit li:nth-child(4n) {
        margin-right: 0;
    }

    .featured li:nth-child(4) {
        display: block;
    }
}


@media screen and (min-width: 720px) {
    #grid_wrapper {
        display: flex;
        align-items: stretch;
    }

    .text_buttons_wrapper {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    #video_box {
        margin-bottom: 0;
    }

    #video_box + .text_buttons_wrapper {
        margin-left: 2%;
    }

    #video_box,
    .text_buttons_wrapper {
        float: left;
        width: 49%;
        box-sizing: border-box;
    }

    #grid_wrapper .text_buttons_wrapper:first-child {
        float: none;
        width: 100%;
        display: block;
    }

    #grid_wrapper .text_buttons_wrapper:first-child #web_text_box {
        float: left;
        width: 49%;
        margin-right: 2%;
    }

    #grid_wrapper .text_buttons_wrapper:first-child #modal_buttons_box {
        width: 49%;
        float: left;
    }

    .awards {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media screen and (min-width: 800px) {
    .toolkit li {
        width: 17.5%;
    }

    .toolkit li:nth-child(4n) {
        margin-right: 3%;
    }

    .toolkit li:nth-child(5n) {
        margin-right: 0;
    }

    .featured li:nth-child(5) {
        display: block;
    }
}


@media screen and (min-width: 800px) {
    .mosaic a {
        font-size: 3em;
    }
}


@media screen and (min-width: 960px) {
    #web_test_box {
        font-size: 18px;
    }

    .toolkit li {
        width: 15%;
        margin-right: 2%;
    }

    .toolkit li:nth-child(2n),
    .toolkit li:nth-child(3n),
    .toolkit li:nth-child(4n),
    .toolkit li:nth-child(5n) {
        margin-right: 2%;
    }

    .toolkit li:nth-child(6n) {
        margin-right: 0;
    }

    .featured li:nth-child(6) {
        display: block;
    }
}