/*  Gobal color and other values used within the site's style sheets. They are
    used to quickly adapt the color styling to different needs, so that the
    overall layout can be easily customized to other sites using the same
    style sheet. To do so, consider these as default values and override
    them by loading a customized style sheet with a :root section after
    loading in this CSS.
*/
:root {
    --app-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    --app-body-color: black;
    --app-text-color: rgba(77, 77, 77, 1.00);
    --app-text-color-darker: rgba(66, 66, 66, 1.00);
    --app-background-color: rgba(240, 240, 240, 1.00);
    --app-panel-color: #2a162d; 
    --app-panel-text-color: rgba(150, 150, 150, 1.00);

    --app-link-color: rgba(0, 140, 186, 1.00);
    --app-link-visited-color: rgba(0, 138, 184, 1.00);
    --app-navbar-height: 45px;

    --app-menu-divider-color: grey;
    --app-menu-gradient: linear-gradient(to bottom, rgba(63, 51, 60, 1.00), rgba(23, 11, 20, 1.00) 85%);
    --app-menu-color: rgba(150, 150, 150, 1.00);
    --app-menu-highlight-color: #c28dfc;
    --app-menu-background-color: rgba(23, 11, 20, 0.95);
    --app-menu-hover-color: white;
    --app-menu-hover-background: rgba(255, 255, 255, 0.2);

    /*  Media query widths. Unfortunately these cannot be used directly as
     *  @media parameters, so they are listed here for documentation purposes
     */
    --medium-screen: 40.063em;
    --large-screen: 62.563em;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: var(--app-font-family);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--app-text-color);
    background-color: var(--app-body-color);
    text-rendering: optimizeLegibility;

    cursor: auto;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.4;
}

h1 {
    font-size: 2.75rem;
}

h2 {
    font-size: 1.69rem;
}

h3 {
    font-size: 1.4rem;
}

a {
    color: var(--app-link-color);
}

a:visited {
    color: var(--app-link-visited-color);
}

img {
    width: 100%;
    height: auto;
    user-select: none;
}

/*  Global sticky responsive navigation bar.
    The navigation bar resides on top of the page providing a menu with links
    to other pages from the site. When the screen width drops below a certain
    value, the menu will be replaced with a hamburger icon. When clicked, the
    menu items will be shown in a vertical menu, each item spanning the entire
    app-outline width.

    As this works without JavaScript, the menu definition needs to follow some
    rules, as we need a hidden checkbox in order to pull out the vertical menu
    on small screens, when the hamburger gets clicked. Here is a sample menu,
    that you can just copy & paste and then adapt the <li> items/links according
    to your needs:

    <nav>
        <!-- Invisible checkbox needed to show/hide the vertical menu -->
        <input type="checkbox" id="menu-toggle-button">
        <!-- This is the hamburger icon (&#9776;) -->
        <label for="menu-toggle-button">
            MENÜ &#9776;
        </label>
        <-- Actual menu definition, no nesting for now
            Add class "nav-current" to actual page in order to outline the menu item -->
        <ul>
            <li><a class="nav-current" href="link_to_page_1">Item1</a></li>
            <li><a href="link_to_page_2">Item2</a></li>
            <li><a href="link_to_page_3">Item3</a></li>
        </ul>
    </nav>
*/
nav {
    color: var(--app-menu-color);
    background-image: var(--app-menu-gradient);
    height: var(--app-navbar-height);
    width: 100%;

    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    /* Stick to page top */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav ul {
    height: min-content;
    display: none;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;

    width: 100%;
    background: var(--app-menu-background-color);
    position: absolute;
    top: calc(var(--app-navbar-height) * 0.6);
}

nav ul a {
    color: var(--app-menu-color);
    height: 100%;
    width: 100%;

    font-size: 0.8125rem;

    display: flex;
    align-items: center;
    justify-content: left;
    text-decoration: none;

    padding: 20px 20px;
    border-bottom: solid 1px var(--app-menu-divider-color);
}

nav ul a:visited {
    color: var(--app-menu-color);
}

nav ul a:hover {
    color: var(--app-menu-hover-color);
    background-color: var(--app-menu-hover-background);
}

nav li {
    height: min-content;
    width: 100%;
    text-align: center;
    position: relative;
    border-left: none;
}

nav li:hover .dropdown {
    display: flex;
}

nav input[type="checkbox"] {
    display: none;
}

nav label {
    height: 100%;
    cursor: pointer;
    padding-right: 1rem;
    padding-left: 1rem;

    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-current {
    font-size: 1.0rem;
    font-weight: bold;
    color: var(--app-menu-highlight-color) !important;
}

#menu-toggle-button:checked ~ ul {
    display: block;
}

#menu-toggle-button:checked ~ nav {
    position: absolute;
}

@media(min-width: 642px) {
    nav label {
        display: none;
    }

    nav ul {
        height: 100%;
        width: auto;
        display: flex;
        background: none;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    nav ul a {
        border-bottom: none;
        justify-content: center;
    }

    nav li {
        height: 100%;
        width: 100px;
        border-left: solid 1px var(--app-menu-divider-color);
    }

    #menu-toggle-button:checked ~ ul {
        display: flex;
    }
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
}

/*  Global page outline.
    The outline contains the sticky, responsive menu at the top followed by the
    band image followed by the app-page-content div followed by the footer.
*/
.app-page-outline {
    background-color: var(--app-background-color);
    _padding-left: 0.94rem;
    _padding-right: 0.94rem;
    max-width: 1600px !important;
    margin: 0 auto;
}

.app-page-outline a {
    text-decoration: none;
}

/*  Global page content.
    The page content resides inside the page outline. The h2 is styled so thet the page
    title resides centered on top of the content separated with a line spanning the
    content width.
*/
.app-page-content {
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.6;
}

.app-page-content h2 {
    text-align: center;
    font-weight: 300;
    padding-bottom: 1.8rem;
    border-bottom: solid 1px var(--app-text-color-darker);
    margin-bottom: 1.5rem;
}

@media print, screen and (min-width: 40.063em) {
    .app-page-content {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/*  Global footer definitions
    The footer is a panel at the bottom of the page, containing some links to other
    band pages and the copyright.
*/
.app-footer {
    background-color: var(--app-panel-color);

    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.0rem;
    padding-bottom: 0.2rem;

    margin-top: 3rem;

    text-align: right;
    line-height: 1.6;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.0rem;
    /* letter-spacing: 3pt; */
}

.app-footer p {
    color: var(--app-panel-text-color);
    font-size: 0.9rem;
}

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

.text-right {
    text-align: right;
}

.text-justified {
    text-align: left;
}

@media(min-width: 642px) {
    .text-justified {
        text-align: justify;
    }
}

/***** end of file *****/