﻿:root {
    /*Deal with problem of white space under footer when little content 
        but also want footer at end of page with long content.*/
    /*Declare variable*/
    --footer-height: 6em;
    --base-font-size: 0.9rem;
    --bmt-blue: #337ab7;
    --navbar-height: 50px;
}

.navbar-format {
    background-color: white;
    border-bottom: 1px solid #e7e7e7;
}

.navbar-light .navbar-nav .nav-link {
    color: #212529;
}

.nav-link:hover {
    text-decoration: underline;
}

.zero-padding {
    padding: 0;
}

.zero-margin {
    margin: 0;
}

.defaultList {
    /*Override default to left align bullet with paragraph */
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.header {
    margin-bottom: 1px;
}

.headerLogo {
    margin-right: 10px;
}

.headerLogoImage {
    height: var(--navbar-height);
}

html {
    /*Deal with problem of white space under footer when little content 
        but also want footer at end of page with long content.*/
    position: relative;
    min-height: 100%;
}

.bodyContainer {
    /*Deal with problem of white space under footer when little content 
        but also want footer at end of page with long content.*/
    margin-bottom: var(--footer-height);
}

.footerContainerShell {
    background-color: #f2f2f2;
    margin-top: 1em;
    padding: 1em;
    /*Deal with problem of white space under footer when little content 
        but also want footer at end of page with long content.*/
    position: absolute;
    width: 100%;
    bottom: 0;
    height: var(--footer-height);
}

.footerContainer {
    margin-top: 10px;
    padding-left: 0;
    padding-right: 0;
}

    .footerContainer p {
        margin-bottom: 0;
    }

    .footerContainer a {
        color: var(--bmt-blue);
    }

.footerNav ul {
    list-style-type: none;
}

.chapter {
    /* Keep padding at top so that spyscroll activates in correct place*/
    padding-top: var(--navbar-height);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0px;
}

.not-link-format {
}

.chapterContent {
    padding-top: 20px;
    padding-bottom: 20px;
}

    .chapterContent h2 {
        margin-top: 1em;
        font-size: 1.5rem;
    }

    .chapterContent h4 {
        font-size: 1.1rem;
    }

    .chapterContent p {
        font-size: var(--base-font-size);
        margin-bottom: 0.5rem;
    }

    .chapterContent a:not(.not-link-format) {
        font-weight: 500;
        font-size: var(--base-font-size);
        color: var(--bmt-blue);
    }

    .chapterContent li {
        font-size: var(--base-font-size);
    }


.chapterHeadline {
    height: 80px;
    background-size: 100%;
    /*Slight left offset because otherwise band appears to extend beyond border*/
    padding-left: 0.04em;
    padding-right: 0.02em;
    /*Hack- add border to change background-origin propoert,
      so that background image background image painted within (clipped to) border-box,
      not default padding-box (which is affected by negative margin and container padding)*/
    border: 1px solid white;
}

.chapterHeadline-band {
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    /* To center text block*/
    display: flex;
    justify-content: center;
    padding-top: 0.4em;
    padding-bottom: 0.3em;
}

    .chapterHeadline-band h1 {
        font-size: 1.2em;
        font-weight: bold;
        /*remove margin bottom so not big space before following text*/
        margin-bottom: 0;
        margin-top: 0;
        letter-spacing: 2px;
    }

    .chapterHeadline-band p {
        font-size: 0.8em;
        letter-spacing: 0.04em;
        margin-bottom: 0;
    }


.btn-bmt {
    background-color: var(--bmt-blue);
    border-color: #2e6da4;
}

.bg-bmt {
    background-color: var(--bmt-blue);
}

.text-bmt {
    color: var(--bmt-blue);
}

    .text-bmt li a {
        color: var(--bmt-blue);
    }

h4 label {
    margin-bottom: 0;
}


.form-group {
    margin-bottom: 1.5rem;
}

.double-side-padding {
    padding-left: 2rem;
    padding-right: 2rem;
}

.full-screen {
    height: 100vh;
}

.center-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-fit {
    /*height: 100%;
    width: 100%;*/
    object-fit: contain;
}

#cookieConsent {
    color: white;
}

/*Solves problem of jumping to sections on same page.
    Without this, the section appears at top of page under nav bar.
    Note: this makes links in the padding area non-clickable, 
*/
.anchor {
    padding-top: calc(var(--navbar-height)*1.1);
    margin-top: calc(var(--navbar-height)*-1.1);
}

/*
####################################################
M E D I A  Q U E R I E S
####################################################

::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints

Min Width:
BS3 >0px >481px >768px >992px  >1200px
BS4 >0px >576px >768px >992px  >1200px
     0.4    0.6    0.8    1.0      1.0

Default max-width px:
            540   720   960     1140
    
*/

/* Landscape phones and portrait tablets */
@media only screen and (min-width: 576px) {

    .chapterHeadline {
        height: 140px;
    }

    .chapterHeadline-band {
        margin-top: 30px;
        padding-top: 0.5em;
        padding-bottom: 0.4em;
    }

        .chapterHeadline-band h1 {
            font-size: 1.5em;
        }

        .chapterHeadline-band p {
            font-size: 1.3em;
        }
}

/* Portrait tablets and small desktops */
@media only screen and (min-width:768px) {

    .navbar-expand-md .ml-auto .nav-link {
        padding-right: 0.1rem;
    }

    .chapterHeadline {
        height: 180px;
    }

    .chapterHeadline-band {
        margin-top: 40px;
        padding-top: 0.5em;
        padding-bottom: 0.4em;
    }

        .chapterHeadline-band h1 {
            font-size: 2.1em;
        }

        .chapterHeadline-band p {
            font-size: 1.7em;
        }
}

/* Landscape tablets and medium desktops */
@media only screen and (min-width: 992px) {

    .chapterHeadline {
        height: 250px;
    }

    .chapterHeadline-band {
        margin-top: 50px;
        padding-top: 1em;
        padding-bottom: 1em;
    }

        .chapterHeadline-band h1 {
            font-size: 3em;
        }

        .chapterHeadline-band p {
            font-size: 2em;
        }
}


/* Large desktops and laptops */
@media only screen and (min-width: 1200px) {
    .narrow-form {
        max-width: 600px;
    }
}
