/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 
for details on configuring this project to bundle and minify static web assets. */
body {
    background-color: #f1f1f1;
    font-family: Georgia, Helvetica, sans-serif;
}

article {
    max-width: 700px;
}


/*vvvvvvvvvvvvvvvvvvvvvvv---begin main menu---vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
/*mobile-first and non-screen-responsive rules*/
.navbar-nav .nav-item .nav-link {
    padding-left: 5px;
}
.navbar-nav > li > a {
    border-left: 8px solid transparent;
}
.navbar-nav > li > a.active {
    border-left: 8px solid orange;
    font-weight: 600;
}
.navbar-nav > li > a:hover {
    border-left: 8px solid lightgray;
}
button.navbar-toggler {
    background-color: white;
}
button.navbar-toggler:hover {
    background-color: orange;
}

/*laptops and larger*/
@media screen and (min-width: 992px) {
    .navbar-nav > li {
        padding-left: 0;
        margin-top: -8px;
        margin-bottom: -8px;
    }
    .navbar-nav > li > a {
        border-left-width: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    .navbar-nav > li > a.active {
        border-left-width: 0;
        border-bottom: 8px solid orange;
    }
    .navbar-nav > li > a:hover {
        border-left-width: 0;
        border-bottom: 8px solid lightgray;
    }
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^---end main menu---^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/*********************** begin general page content *******************************/
/* Set some basic padding to keep content from hitting the edges */
#bodyContent {
    padding: 70px 25px 0 73px;
}

#bodyContent p a {
    color: inherit;
    text-decoration: none;
    border-bottom-color: orange;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

#bodyContent p a:hover {
    background-color: orange;
    transition: box-shadow .15s ease-in-out;
}

.bannerImage {
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
}

@media screen and (min-width: 700px){
    #bodyContent {
        padding: 80px 35px 0 283px;
    }
}
/*********************** end general page content *********************************/


/* page menu bar */
#pageMenuBar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding-top: 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #3c3c3c;
    border-right: 1px solid #eee;
    width: 48px;
    cursor: pointer;
}

#pageMenuBar:hover {
    background-color: #666670;
    cursor: pointer;
}

#pageMenuBar hr {
    border-color: white;
    height: 2px;
}

#pageMenuBar .leftArrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
    margin: auto;
}

#pageMenuBar .rightArrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid white;
    margin: auto;
}

#pageMenuBar .collapseBarText {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    padding: 15px;
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
}


/*vvvvvvvvvvvvvvvvvvvvvvv---begin page menu---vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
/*mobile-first and non-screen-responsive rules*/
#pageMenu {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 48px;
    z-index: 1000;
    display: none; /*hide by default on small screens (< 700px)*/
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: white;
    border-right: 1px solid #eee;
    width: 200px;
    box-shadow: 150px 0 450px black;
}

#pageMenu .pageMenu-title {
    padding-top: 20px;
    font-weight: 600;
    color: darkslategrey;
    font-size: 1.25rem;
    padding-left: 15px;
}

#pageMenuBar .collapseBarText {
    padding: 3px 15px;
}

#pageMenuBar .rightArrow {
    display: block;
}

#pageMenuBar .leftArrow {
    display: none;
}


nav ol {
    padding-left: 20px;
}

nav ol li {
    list-style: none;
    font-size: 1.1rem;
    line-height: 1.3;
    border-width: 0 0 0 3px;
    border-style: solid;
    border-color: transparent;
    padding: 2px 0 2px 4px;
    margin-top: 4px;
    margin-right: 5px;
}

nav ol li:hover {
    border-left: 3px solid grey;
}

nav ol .active {
    border-left: 3px solid #007bff;
    font-weight: 600;
}

nav ol li a:hover {
    text-decoration: none;
}


@media screen and (min-width: 700px) {
    #pageMenu {
        display: block;
        box-shadow: initial;
    }

    #pageMenuBar .rightArrow {
        display: none;
    }

    #pageMenuBar .leftArrow {
        display: block;
    }

    
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^---end page menu---^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/* anchors credit: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */
h2.anchor {
    position: relative;
}

h2.anchor span {
    position: absolute;
    top: -70px;
}

/* footer */
footer {
    width: 100%;
    flex-shrink: 0;
    padding-bottom: 20px;
}