body, html {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #272727;
}

h1, h2, h3, h4, h5, h6 {
    color: #D43D0A;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.5em;
}


@media (max-width: 575px) { 
    body {
        font-size: 1em;
    }

    h1 {
        font-size: 1.7em;
    }

    h2 {
        font-size: inherit;
    }

}

@media (min-width: 576px) { 

    body {
        font-size: 1.4em;
    }

    h1 {
        font-size: 2.6rem;
    }

    h2 {
        font-size: 2.25rem;
    }
}

hr {
    margin-top: 1em;
    margin-bottom: 1em;
}

ul {
    padding: 0px;
    list-style-position: inside;
}

.btn {
    border-radius: 25px;
    padding-top: 0.4em;
    padding-bottom: 0.6em;
    min-width: 10em;
    font-size: 1.2rem;
}

@media (max-width: 575px) { 
    .btn {
        font-size: 0.8rem;
        min-width: 6rem;
    }
}


.btn-primary {
    background-color: #D43D0A;
    border-color: #D43D0A;
    font-weight:bold;
}
.btn-primary:hover {
    background-color: #DD6E46;
    border-color: #DD6E46;
}

.btn-secondary {
    background-color: #F17D3A;
    border-color: #F17D3A;
    font-weight:bold;
}
.btn-secondary:hover {
    background-color: #F49D41;
    border-color: #F49D41;
    font-weight:bold;
}

.breadcrumb {
    padding: 0.5em 1rem 0.7em 1rem;
    background-color: #E5E6E7;
    /*margin-bottom: 1.7em;*/
}

main p a,
main label a {
    color: #D43D0A;
    text-decoration: underline;
}

@media (min-width: 992px) {
    .navbar.container,
    main.container {
        max-width: 1110px;
    }
}

@media (min-width: 768px) {
    main.container {
        padding-left: 95px;
        padding-right: 95px;
    }
}


#main_wrap {
    min-height: 60vh;
}

main {
    margin-top: 2em;
    background-color: rgba(255, 255, 255, 0.8);
}

body #footer_wrap {
    background-color: #1765BE;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

body > #footer_wrap footer {
    color: white;
    font-size: 0.8rem;
}

body > #footer_wrap footer a {
    color: white;
}
body > #footer_wrap footer h1 {
    color: white;
}

body > #footer_wrap footer .resource-links {
    font-size: 1rem;
    margin-bottom: 1rem;
}

body > #footer_wrap footer .resource-links a,
body > #footer_wrap footer .contact-links a {
    font-weight: normal;
    white-space: nowrap;
}

body > #footer_wrap footer h1 {
    font-size: 1.1rem;
}


.pagenav_backforward {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5em 0 0.5em 0;
    flex-wrap: wrap;
}

.pagenav_backforward .btn-module-back {
    background-image: url('/static/theme/images/module_nav_back.jpg');
    color: white;
}

.pagenav_backforward .btn-module-next {
    background-image: url('/static/theme/images/module_nav_next.jpg');
    color: white;
}

.pagenav_backforward .btn-module-back:hover {
    box-shadow: inset 0 0 0 100px rgba(73, 142, 200, 0.6);
}

.pagenav_backforward .btn-module-next:hover {
    box-shadow: inset 0 0 0 100px rgba(212, 61, 10, 0.6);
}


/* When the navigation collapses to two stacked buttons, separate them */
@media (max-width: 575px) { 
    .pagenav_backforward a, 
    .pagenav_backforward .btn{
        margin-bottom: 0.5em;
    }
}

.breadcrumb,
.module-nav {
    font-size: 0.9rem;
    margin-bottom: 1.2em;
}

.breadcrumb a {
    color: #D43D0A;
}

.modulelist {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-basis: 50%;
    padding-left: 10%;
    padding-right: 10%;
    margin-top: 1rem;
}


a.module_button {
    width: 12.5rem;
    height: 9.5rem;

    margin-bottom: 1em;

    padding: 0.25em;

    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    text-align: center;

    border-radius: 1em;

    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 1.5rem;
}


@media (max-width: 575px) { 
    .modulelist {
        padding-left: 0%;
        padding-right: 0%;
    }

    a.module_button {
        width: 100%;
        height: 3em;
    }
}

/** Change text on hover if there are multiple spans in the module button.
 *
 * If a .module_button has two spans then we'll use normally hide the second
 * one, and use :hover to show it.
 *
 * If the button doesn't have spans, then there's no impact.
 **/
/*
a.module_button span {
    display: none;
}
a.module_button span:first-of-type {
    display: inherit;
}
a.module_button:hover span {
    display: inherit;
}
a.module_button:hover span:first-of-type {
    display: none;
}
*/



a.module_button_assess {
    background-image: url('/static/theme/images/navigation_module_buttons_resized.jpg');
    background-position: 485px 133px;
}

a.module_button_act {
    background-image: url('/static/theme/images/navigation_module_buttons_resized.jpg');
    background-position: 485px 282px;
}

a.module_button_heal {
    background-image: url('/static/theme/images/navigation_module_buttons_resized.jpg');
    background-position: 485px 370px;
}

.module_button,  /* default to not started */
.module_button_notstarted {
    box-shadow: inset 0 0 0 1000px rgba(212, 61, 10, 0.7);
}
.module_button:hover,  /* default to not started */
.module_button_notstarted:hover {
    box-shadow: inset 0 0 0 1000px #DF6E47b3;
}

.module_button_incomplete {
    box-shadow: inset 0 0 0 1000px #F9C647b3;
}
.module_button_incomplete:hover {
    box-shadow: inset 0 0 0 1000px #FFD450b3;
}

.module_button_complete {
    box-shadow: inset 0 0 0 1000px #E6E6E6b3;
}
.module_button_complete:hover {
    box-shadow: inset 0 0 0 1000px #aaaaaab3;
}



a.submodule_button {
    width: 9.5rem;
    height: 9.5rem;

    margin-bottom: 1em;

    padding: 0.25em;

    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    text-align: center;

    border-radius: 1em;

    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 1.5rem;

    background-image: url('/static/theme/images/navigation_module_buttons_resized.jpg');
    background-position: 485px 282px;
}


.modulelist a.module_button:visited {
}

.modulelist a.submodule_button:visited {
}

.modulelist a:visited {
}


@media (max-width: 575px) { 
    a.submodule_button {
        width: 100%;
        height: 3em;
        font-size: 1em;
        font-weight: normal;
        padding: 0.6em;
    }
}


.submodule_button,  /* default to not started */
.submodule_button_notstarted {
    box-shadow: inset 0 0 0 1000px #D43D0Ab3;
    border-collapse: separate;
}

.submodule_button:hover,  /* default to not started */
.submodule_button_notstarted:hover {
    box-shadow: inset 0 0 0 1000px #DF6E47b3;
}

.submodule_button_incomplete {
    box-shadow: inset 0 0 0 1000px #F9C647b3;
}
.submodule_button_incomplete:hover {
    box-shadow: inset 0 0 0 1000px #FFD450b3;
}

.submodule_button_complete {
    box-shadow: inset 0 0 0 1000px #E6E6E6b3;
}
.submodule_button_complete:hover {
    box-shadow: inset 0 0 0 1000px #aaaaaab3;
}



a.subsubmodule_button {
    width: 17rem;
    height: 17rem;

    margin-bottom: 1em;

    padding: 0.25em;

    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    text-align: center;

    border-radius: 1em;

    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 1.5rem;

    /* background-image: url(...); */
    /* background-position: 485px 282px; */
}

@media (max-width: 575px) { 
    a.subsubmodule_button {
        font-size: 1em;
        /*font-weight: normal;*/
        padding: 0.6em;
    }
}


a.subsubmodule_button:hover {
    box-shadow: inset 0 0 0 1000px #DF6E47b3;
}


/** Bootstrap side by side button bar radio select **/
.button_radio_select.btn-group {
    margin-bottom: 1em;
    width: 100%;
}

@media (min-width: 576px) { 
    .button_radio_select.btn-group {
        width: 90%;
    }

    .button_radio_select.btn-group .btn {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

.button_radio_select.btn-group .btn {
    background-color: #47B9F8;
    border-color: #A0DDFB;

    font-size: 0.6em;
    color: #FDF7FF;
    font-weight: bold;
    text-transform: uppercase;

    min-width: inherit; 
    padding-top: 0.4em;
    padding-bottom: 0.6em;
    padding-right: 0.4rem;
    padding-left: 0.4rem;

    white-space: normal; /* TODO make window size dependant */

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Round the outer corners of the button group, but not every button */
.button_radio_select.btn-group .btn:first-of-type {
    border-radius: 5px 0px 0px 5px;
}
.button_radio_select.btn-group .btn:last-of-type {
    border-radius: 0px 5px 5px 0px;
}

.button_radio_select.btn-group .btn:hover {
    color: #fff;
    background-color: #A0DCFB;
}

.button_radio_select.btn-group .btn:not(:disabled):not(.disabled).active:not(active) {
    /*color: red;*/
}
.button_radio_select.btn-group .btn:not(:disabled):not(.disabled).active,
.button_radio_select.btn-group .btn:not(:disabled):not(.disabled):active,
.button_radio_select.btn-group .show > .btn.dropdown-toggle {
    color: #47B9F8;
    background-color: #CEEDFD;
    border-color: #47B9F8;

}

/* (optional) legend before and after the bar
 * Very similar styling to the buttons */
.button_radio_select label.button_radio_select_legend {
    background-color: #c6e8f9;
    border-color: #47B9F8;
    border: 1px solid;


    color: #47B9F8;
    font-size: 0.5em;
    font-weight: bold;
    text-transform: uppercase;

    min-width: inherit; 
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.4em;
    padding-bottom: 0.6em;
    margin: 0px;

    white-space: normal; /* TODO make window size dependant */


    display: flex;
    align-items: center;
    justify-content: center;
}
.button_radio_select label.button_radio_select_legend:first-of-type {
    border-radius: 5px 0px 0px 5px;
    border-right: none;
}
.button_radio_select label.button_radio_select_legend:last-of-type {
    border-radius: 0px 5px 5px 0px;
    border-left: none;
}


/** End Bootstrap side by side button bar radio select **/



/* Make bootstrap progress bar but with our artwork that shows a colourful
 * progress image over a greyscale background image */
.burndawan-progress {
    background: url("/static/theme/images/progressbar_fullpainting_greyscale.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15px;
}
.burndawan-progress-bar {
    background: url("/static/theme/images/progressbar_fullpainting_colour.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15px;
    border-right: 2px #F17D3A solid;
}


/** Django form errors **/
.errorlist {
    color: #F17D3A;
    font-size: 0.6em;
}

/* Hack to vertically centre vimeo iframes on small screens so that
 * it lines up with our pre/post text */
@media (max-width: 575px) { 
    iframe {
        padding-bottom: 25vw;
    }
}