/* =========== VARIABLES =========== */

:root {
    --borderClr: rgba(119, 119, 119, 0.377);
    --imgSize: 30em;
    --textColor: rgb(200, 200, 200);
    --linkColor: rgb(170, 213, 248);
    --hoverColor: rgb(170, 213, 248);
    --textColorHeadlines: white;
    --textColorSpecialFields: rgb(235, 235, 235);
    --sidebarWidth: 13em;
}

/* =========== BODY =========== */

body {
    font-family: "Lato", sans-serif;
    background:  rgb(24, 24, 24);
    padding: 0;
    margin: 0;
    color: var(--textColor);
    line-height: 1.5em;
}

/* =========== LINKS =========== */

a {
    color: var(--linkColor);
    text-decoration: none;
}

a:visited {
    color: var(--linkColor);
}

a[class=reading_link] {
    color: var(--linkColor);
}

a[class=menu_link] {
    color: var(--textColor);
    font-size: 0.8em;
    padding-left: 1em;
    line-height: 1.8em;
}

span[class=menu_subh] {
    color:var(--textColorHeadlines);
    font-size: 0.8em;
    padding-left: 1em;
    line-height: 1.8em;
}

a[class=menu_law] {
    color: var(--textColor);
    font-size: 0.8em;
    line-height: 1.8em;
}

a[class=footer_link] {
    color: var(--textColor);
    font-size: 0.8em;
}

a:hover {
    color: var(--linkColor);
}

/* =========== LISTS =========== */

ul {
    padding-left: 2em;
}

li {
    list-style-type: square;
    margin-top: 0.4em;
}

/* =========== HEADINGS =========== */

h1 {
    margin-top: 0.8em;
    font-size: 1.8em;
    color: var(--textColorHeadlines);
    margin-bottom: 0.1em;
}

h2 {
    font-size: 2em;

    color: var(--textColorHeadlines);
    margin-bottom: .8em;
}

h3 {
    font-size: 1.5em;
    color: var(--textColorHeadlines);
    margin-top: 2em;
}

h4 {
    color: var(--textColorHeadlines);
    margin-top: 0em;
    margin-bottom: .5em;
}

h5 {
    color: var(--textColorHeadlines);
    font-size: 1em;
    margin-bottom: 0.3em;
}

h6 {
    color: var(--textColorHeadlines);
    font-size: 1em;
    margin-bottom: 0.5em;
}

/* =========== MAIN BODY LAYOUT =========== */

#master {
    display: table;
    width: 100%;
}

.sidenav {
    display: table-cell;
    vertical-align:top;
    min-width: var(--sidebarWidth);
    width: var(--sidebarWidth);
    z-index: 1;
    overflow-x: hidden;
    background-color: rgb(24, 24, 24);
}

.sidenav_content {
    padding-left: 1.2em;
    padding-bottom:10em;
}

.sidenav_footer {
    position: fixed;
    width: var(--sidebarWidth);
    z-index: 3;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(255, 0, 0, 0), rgba(24, 24, 24, 0.842), rgb(24, 24, 24));
}

.sidenav_footer_content {
    margin-top: 3em;
    padding-left: 1.2em;
    padding-top: 0.5em;
    padding-bottom:0.5em;
}

.sidenav_lawstuff {
    margin-top: 5em;
}

.content {
    vertical-align:top;
    display: table-cell;
    margin-left: var(--sidebarWidth);
    padding-left: 3em;
    padding-right: 3em;
    background-color: rgb(44, 44, 44);
    overflow-x: hidden;
    box-shadow: inset 1.0em 0 1.5em -1em #00000079;
}

#article {
    margin: auto;
    padding-top:1em;
    padding-bottom:3em;
    max-width: 60em;
    text-align: justify;
}

.updated {
    font-size: 0.8em;
    float: left;
    margin-top: 1em;
    margin-bottom: 1em;
}

.mobilemenu {
    position:absolute;
    top: 1em;
    left: 1em;
    visibility: hidden;
}

@media only screen and (max-width:599px) { 
    .sidenav_content {
        min-width: 0;
        width: 0;
        visibility: hidden;
        padding: 0;
    }
    .sidenav {
        min-width: 0;
        visibility: hidden;
        width: 0;
    }
    .content {
        margin-left: 0;
        padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
    .mobilemenu {
        visibility: visible;
    }
}


/* =========== MOBILE NAV MENU =========== */

.sidenavmobile {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 10; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-y: visible; /* Disable horizontal scroll */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.2s; /* 0.5 second transition effect */
}

/* Position and style the close button (top right corner) */
.sidenavmobile .closebtn {
    position: absolute;
    top: 1em;
    right: 0.5em;
    font-size: 3em;
}

.mobilemenu {
    position: absolute;
    top: .3em;
    left: .3em;
    font-size: 2em;
    cursor:pointer;
}


/* =========== BUBBLE ELEMENTS =========== */

.warning {
    border-radius: .8em;
    padding: 1em;
    padding-left: 5.5em;
    color: var(--textColorSpecialFields);
    background-image: url("icons/warning_white_thin.png");
    background-repeat: no-repeat, repeat;
    background-color: #535353;
    background-size: 4em;
    background-position-x: .75em;
    background-position-y: center;
    box-shadow: .3em .3em .5em .1em #00000021;
    margin-top: 2em;
    margin-bottom: 2em;
    min-height: 3.5em;
}

.quote {
    border-radius: .8em;
    padding: 1em;
    padding-left: 5.5em;
    color: var(--textColorSpecialFields);
    background-image: url("articons/quote_white.png");
    background-repeat: no-repeat, repeat;
    background-color: #535353;
    background-size: 4em;
    background-position-x: .75em;
    background-position-y: center;
    box-shadow: .3em .3em .5em .1em #00000021;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: left;
}

.additionalreading {
    border-radius: .8em;
    padding: 1em;
    padding-left: 5.5em;
    color: var(--textColorSpecialFields);
    background-image: url("icons/person_reading_white.png");
    background-repeat: no-repeat, repeat;
    background-color: #2c4153;
    background-size: 4em;
    background-position-x: .75em;
    background-position-y: center;
    box-shadow: .3em .3em .5em .1em #00000021;
    margin-top: 2em;
    margin-bottom: 2em;
}

/* =========== IMAGE ALIGNMENT =========== */

img {
    border-radius: .6em .6em 0 0;
    max-width:100%;
}

.itemMid {
    background-color: rgb(24, 24, 24);
    border-radius: .6em .6em .6em .6em;
    display:inline-block;
    margin: 0.5em;
    border: .1em solid var(--borderClr);
    box-shadow: .3em .3em .5em .1em #00000044;
    max-width: 100%;
}

.itemLeft {
    background-color: rgb(24, 24, 24);
    border-radius: .6em .6em .6em .6em;
    margin: 0em 1.3em 1em 0;
    float: left;
    border: .1em solid var(--borderClr);
    box-shadow: .3em .3em .5em .1em #00000044;
}

.itemRight {
    background-color: rgb(24, 24, 24);
    border-radius: .6em .6em .6em .6em;
    margin: 0em 0 1em 1.3em;
    float: right;
    border: .1em solid var(--borderClr);
    box-shadow: .3em .3em .5em .1em #00000044;
}

.imgContainer {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    border-bottom: .1em solid var(--borderClr);
    max-width: 100%;
}

.descriptionText {
    font-style: italic;
    vertical-align: middle; 
    text-align: center;
    margin: 0.3em;
    font-size: 0.75em;
}

.thumbnail {
    max-width: var(--imgSize);
    max-height: var(--imgSize);
}


.indexcard {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    max-width: 25em;
}

@media only screen and (max-width: 73em) { 
    .indexcard {
        max-width: 100%;
    }
} 

.articleheader {
    max-width: 100%;
    border: .1em solid var(--borderClr);
    box-shadow: .3em .3em .5em .1em #00000044;
}

.downloadbutton {
    background-color: rgb(168, 20, 0);
    font-weight: bold;
    color: white;
    font-size: 1.5em;
    border-radius: .6em;
    padding: 1em;
    float: left;
    border: .05em solid white;
    box-shadow: .3em .3em .5em .1em #00000044;
}

.downloadbutton a {
    color: white;
}

/* =========== OBSOLETE? =========== */


.changelog {
    margin-top:1em;
    padding: .6em 1em .1em 1em;
    background-color: #535353;
    color: var(--textColorSpecialFields);

    border-radius: .8em;
    box-shadow: .3em .3em .5em .1em #00000021;
}