/* Site.css - Cub Scout Pack 3025 (Waterloo, Iowa) */

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Always show the vertical scroll bar so content doesn't shift right and left between long and short pages - Large Devices Only*/
@media only screen and (min-device-width : 900px) {
    html {
        overflow-y: scroll;
    }
}

/* ------------------------------------------------------
   Main Page Divisions
	 ------------------------------------------------------*/
body {
    background-color: #ffffff;
    font-size: 85%;
    line-height: 160%;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    color: #252525;
}

/* -------------------- Accessibility --------------------*/
.skip a {
    position: absolute;
    left: -999px;
    top: auto;
    padding: 8px 16px;
    background: #005A9C;
    color: #fff;
    z-index: 2000;
}

    .skip a:focus {
        left: 10px;
        top: 10px;
    }

/* -------------------- Page Header --------------------*/
header#page-header {
    max-width: 990px;
    width: 97%;
    padding: 10px 0 10px 0;
    margin: 0 auto 0 auto;
    position: relative;
}

#mobile-logo {
    float: left;
    display: none;
}

#site-name {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 30px;
    line-height: 100%;
    margin-top: 0;
    white-space: nowrap;
    padding-left: 3px;
}

    #site-name a, #site-name a:visited {
        text-decoration: none;
        color: #CE1126;
    }

        #site-name a:hover {
            color: #CE1126;
        }

#fleurdelis {
    float: left;
    width: 11.8181818%;
}

#brand {
    width: 47.27272727%;
}

#header-logo-link {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

#header-logo {
    height: 90px;
    width: auto;
}

/* -------------------- Page Navigation --------------------*/
.navbar {
    background-color: #005A9C;
    padding: 0.6em 0;
}

.navbar .nav-container {
    max-width: 990px;
    width: 97%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.navbar-brand {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 130%;
    color: #ffffff !important;
}

.navbar-brand-mobile {
    font-size: 110%;
    line-height: 1.15;
    white-space: normal;
    margin-right: 10px;
}

.navbar-nav .nav-link {
    color: #efefef !important;
}

    .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
        color: #ffffff !important;
        text-decoration: underline;
    }

/* -------------------- Content Wrapper --------------------*/
#wrapper {
    max-width: 990px;
    width: 97%;
    padding: 15px 0 10px 0;
    margin: 0 auto 0 auto;
}

.content-third {
    width: 32.323%;
    margin-left: 1.515%;
    float: left;
    overflow-x: hidden;
}

    .content-third:first-child {
        margin-left: 0%;
    }

#page-content { /* Need a margin from the two floating elements */
    width: 100%;
    padding: 15px 0 15px;
    overflow-y: auto;
}

#content-wide {
    width: 66%;
    margin: 0 1.5% 0 1.5%;
    float: left;
    overflow-x: hidden;
}

aside {
    width: 28%;
    margin: 0 1.5% 0 1.4%;
    float: right;
    overflow-x: hidden;
}

#content-full {
    width: 96.5%;
    margin: 0 1.75% 0 1.75%;
    overflow-x: hidden;
}

/* -------------------- Page Footer --------------------*/
footer {
    width: 96.5%;
    padding: 10px 1.75% 10px 1.75%;
    margin-top: 15px;
    background-color: #005A9C;
    color: #efefef;
    clear: both;
    font-size: 85%;
    overflow-x: hidden;
}

#credit {
    width: 99%;
    text-align: right;
    color: #aaa;
    font-size: 80%
}

footer div div div li {
    list-style-type: none;
    line-height: 125%;
    width: 66%;
}

/* -------------------- Front Page Only --------------------*/
#front-pic {
    width: 100%;
}

#front-bottom { /*The bottom must clear the top content. */
    width: 100%;
    clear: both;
    padding-top: 15px;
    overflow-y: auto;
}

/* ------------------------------------------------------
   Typography
	 ------------------------------------------------------*/

/* -------------------- Headings --------------------*/
h1 {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 190%;
    line-height: 130%;
    margin: 0 0 10px 0;
    color: #CE1126;
    font-weight: bold;
}

h2 {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 170%;
    line-height: 130%;
    margin: 0 0 10px 0;
    color: #003f87;
    font-weight: bold;
}

h3 {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 150%;
    line-height: 130%;
    margin: 0 0 10px 0;
    color: #005A9C;
    font-weight: bold;
}

h4 {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 130%;
    line-height: 130%;
    margin: 0 0 10px 0;
    color: #005A9C;
    font-weight: bold;
}

h5 {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 130%;
    line-height: 130%;
    margin: 0 0 7px 0;
    color: #CE1126;
}

h6 {
    font-family: marcellusregular, Marcellus, "Trajan Pro", serif;
    font-size: 110%;
    line-height: 130%;
    margin: 0 0 5px 0;
    color: #CE1126;
}

/* -------------------- Content --------------------*/
p {
    margin-top: 5px;
    margin-bottom: 15px;
}

footer p {
    margin: 0;
    line-height: 130%;
}

strong {
    font-weight: bold;
}

/* -------------------- Tables --------------------*/
table {
    margin: 10px 0 17px 0;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid #005A9C;
}

th {
    color: #fff;
    background-color: #005A9C;
}

td, th {
    padding: 5px;
}

/* -------------------- Blockquotes --------------------*/
blockquote {
    background-color: #F1EADA;
    color: #005A9C;
    margin: 15px 35px 17px 35px;
    border-left: 4px solid #CE1126;
    padding: 10px;
    font-size: 150%;
    line-height: 120%;
    font-family: Georgia, "Times New Roman", Times, "New York", serif;
    font-style: italic;
}

/* -------------------- Lists --------------------*/
#wrapper ol {
    margin-left: 30px;
    line-height: 130%;
    margin-bottom: 10px;
    list-style-type: decimal;
}

#wrapper ul {
    margin-left: 30px;
    line-height: 130%;
    margin-bottom: 10px;
    list-style-type: square;
}

#wrapper li ul {
    list-style-type: circle;
}

#wrapper li li ul {
    list-style-type: disc;
}

#wrapper li ol {
    list-style-type: lower-alpha;
}

#wrapper li li ol {
    list-style-type: lower-roman;
}

/* -------------------- Less Common Markup --------------------*/
.underline {
    text-decoration: underline;
}

#wrapper dl {
    margin: 10px 0 17px 0;
}

#wrapper dt {
    font-weight: bold;
}

#wrapper dd {
    margin: 5px 0 17px 15px;
    line-height: 140%;
    margin-bottom: 15px;
}

#wrapper strong, #wrapper b {
    font-weight: bold;
}

#wrapper em {
    font-style: italic;
}

#wrapper sup {
    font-size: 75%;
    vertical-align: super;
}

#wrapper sub {
    font-size: 75%;
    vertical-align: sub;
}

#wrapper cite, #wrapper i {
    font-style: italic;
}

#wrapper abbr {
    border-bottom: 1px dotted #CE1126;
}

#wrapper del {
    text-decoration: line-through;
}

#wrapper ins {
    color: #CE1126;
    text-decoration: underline;
}

#wrapper pre {
    font-family: monospace;
    font-size: 100%;
    margin: 10px 0 10px 0;
    line-height: 100%;
}

#wrapper code {
    background-color: #F1EADA;
    font-family: monospace;
    font-size: 100%;
    white-space: pre;
    display: block;
    margin: 10px;
    padding: 5px;
    border-left: 4px solid #CE1126;
    line-height: 100%;
}

#wrapper var {
    font-weight: bold;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}

hr {
    height: 1px;
    color: #005A9C;
    background-color: #005A9C;
    margin: 15px 0 15px 0;
    border: 0;
}

/* ------------------------------------------------------
   Images
	 ------------------------------------------------------*/
#footer-prepared {
    float: right;
    max-width: 30%;
}

img.alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
}

img.alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img {
    max-width: 100%;
}

/* ------------------------------------------------------
   Links
	 ------------------------------------------------------*/
#wrapper a, #wrapper a:visited {
    color: #005A9C;
    text-decoration: underline;
}

    #wrapper a:hover, #wrapper a:active {
        color: #CE1126;
    }

#wrapper footer a, #wrapper footer a:visited {
    text-decoration: none;
    color: #efefef;
}

    #wrapper footer a:hover, #wrapper footer a:active {
        text-decoration: underline;
        color: #efefef;
    }

#wrapper div#credit a, #wrapper div#credit a:visited {
    color: #aaa;
    text-decoration: none;
}

    #wrapper div#credit a:hover, #wrapper div#credit a:active {
        text-decoration: underline;
    }

/* ------------------------------------------------------
   Media Queries
	 ------------------------------------------------------*/
/* Hide the page header once the nav collapses to the hamburger menu (matches Bootstrap's navbar-expand-lg breakpoint) */
@media screen and (max-width: 991.98px) {
    header#page-header {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    header#page-header {
        height: 95px;
        padding: 10px 0 10px 0;
        margin: 0 auto 0 auto;
    }

    #fleurdelis {
        float: left;
        width: 10%
    }

    #brand {
        width: 40%;
    }

    #header-logo {
        height: 80px;
    }

    #wrapper {
        width: 100%;
    }

    .content-third:first-child {
        width: 47.375%;
        float: left;
        margin: 0 1.75% 0 1.75%;
    }

    .content-third:nth-child(2) {
        width: 47.375%;
        float: left;
        margin: 0 1.75% 0 0;
    }

    .content-third:last-child {
        width: 96.5%;
        float: none;
        clear: both;
    }
}

/* smaller than ipad in portrait */
@media only screen and (max-width : 767px) {
    #site-name {
        line-height: 100px;
        vertical-align: middle;
        display: block;
    }

        #site-name a, #site-name a:visited {
            text-decoration: none;
            color: #005A9C;
        }

            #site-name a:hover {
                color: #005A9C;
            }

    #fleurdelis, #brand, #logo {
        display: none;
    }

    #mobile-logo {
        display: block;
        float: left;
    }

    #wrapper {
        padding: 0 0 10px 0;
        font-size: 130%;
    }

    #header-logo-link {
        display: none;
    }

    header#page-header {
        height: 55px;
    }

    #site-name {
        font-size: 30px;
        line-height: 50px;
    }

    #content-full, aside, #content-wide, .content-third:last-child, .content-third:first-child,
    .content-third:nth-child(2) {
        width: 90%;
        padding: 0;
        float: none;
        clear: both;
        margin: 0 auto 0 auto;
    }

    #content-wide, .content-third:first-child, .content-third:nth-child(2) {
        border-bottom: 1px dotted #005A9C;
        padding-bottom: 4px;
        margin-bottom: 15px;
    }

    #front-bottom {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    h1, h2 {
        font-size: 160%;
    }

    footer, #credit {
        font-size: 70%;
    }

    footer {
        width: 100%;
        padding: 10px 0 10px 0;
        margin-top: 15px;
        background-color: #005A9C;
        color: #efefef;
        clear: both;
        text-align: center;
    }

    #footer-prepared {
        float: none;
        margin: 0 auto 10px auto;
        width: 80%;
        max-width: 80%;
    }

    footer div div div li {
        list-style-type: none;
        line-height: 125%;
        width: 100%;
        clear: both;
    }
}