/* TODO: replace with local copy */
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,700');

body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}


@media (min-width: 576px) {
    .content {
        max-width: 600px;
    }
}

/*
@media (min-width: 768px) {
}
*/

@media (min-width: 992px) {
    .content {
        max-width: 1200px;
    }
}


.masthead {
    margin-top: 0;
    margin-bottom: 3rem;
    background-color: #07070F;
    -webkit-box-shadow: inset 0 -.1rem .25rem #888888;
            box-shadow: inset 0 -.1rem .25rem #888888;
}

.masthead > .container {
}


.nav li {
    font-weight: bold;
    text-transform: lowercase;
}

.nav-link {
    padding: 0.5rem 2rem 0.5rem 2rem;
}


.footer {
    margin-top: 3rem;
    margin-bottom: 0;
    background-color: #07070F;
    -webkit-box-shadow: inset 0 .1rem .25rem #888888;
            box-shadow: inset 0 .1rem .25rem #888888;
}

.footer-item {
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0;
}

.footer-item-left {
    text-align: left;
}

.footer-item-right {
    text-align: right;
    color: #AAAAAA;
    text-transform: lowercase;
}


li p {
    margin-top: 0;
    margin-bottom: 0;
}

b, strong {
    font-weight: bold;
}


.img-thumbnail {
    max-width: 240px;
}


h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

h1 {
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3, h4, h5, h6 {
    font-size: 1.1em;
}

/* from: https://gist.github.com/joshbode/491ad0e678d456ea8ddc */
/* automatic heading numbering */
body { counter-reset: h2counter; }
h2 { counter-reset: h3counter; }
h3 { counter-reset: h4counter; }
h4 { counter-reset: h5counter; }
h5 { counter-reset: h6counter; }
h6 { }

h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ".\0000a0\0000a0";
}

h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "."
                counter(h3counter) ".\0000a0\0000a0";
}

h4:before {
    counter-increment: h4counter;
    content: counter(h2counter) "."
                counter(h3counter) "."
                counter(h4counter) ".\0000a0\0000a0";
}

h5:before {
    counter-increment: h5counter;
    content: counter(h2counter) "."
                counter(h3counter) "."
                counter(h4counter) "."
                counter(h5counter) ".\0000a0\0000a0";
}

h6:before {
    counter-increment: h6counter;
    content: counter(h2counter) "."
                counter(h3counter) "."
                counter(h4counter) "."
                counter(h5counter) "."
                counter(h6counter) ".\0000a0\0000a0";
}

.nocounter, .modal-title { counter-reset: none }
.nocounter:before, .modal-title:before {
    counter-increment: none;
    content: none;
}

.sidebar h2 {
    font-size: 1.2rem;
    font-weight: bold;
    font-variant: small-caps;
}


/* from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters */
.table-of-contents ol {
    counter-reset: section;
    list-style-type: none;
}

.table-of-contents li::before {
    counter-increment: section;
    content: counters(section, ".") ". ";
}


.notes-mc-botbar-left {
    text-align: left;
}

.notes-mc-botbar-right {
    text-align: right;
}

.notes-preview-break-continued {
    color: #AAAAAA;
}


/* from: https://www.quora.com/What-is-the-best-way-to-center-an-iframe */
/* center iframes and add some margin below them */
iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}