body {
        background: #463f28;
        background: #314628;
        color: #d3b14d;
        margin: 0;
}

a {
        color: #ffb500;
}

div.site-header {
        background: #2a2100;
        height: 50px;
        margin: 0;
        margin-top: 10px;
}

div.site-header-img {
        background-image: url("/../img/site_header.png");
        width: 700px;
        height: 200px;
}

div.banner {
        width: 100%;
        text-align: center;
        height: 148px;
}

div.banner td.center {
        width: 100%;
}

.container {
        position: relative;
        text-align: center;
}

.banner-descr {
        position: absolute;
        top: calc(80% - 7px);
        left: calc(50% + 10px);
        transform: translate(-50%, -50%);
        background: linear-gradient(180deg, lime, #36aade);

        -webkit-text-fill-color: transparent; 
        -webkit-background-clip: text; 


        font-size: 20px;
        font-weight: bold;
}

img.banner {
        height: 148px;
        position: relative;
        top: -10px;
}


@media screen

div.site-header h1 {
        margin: 0;
        margin-left: 20%;
}

div.header {
        display: block;
}

nav.quicklinks {
        border: 1px solid black;
        line-height: 18px;
}

nav.quicklinks ul {
        list-style: none;
        display: flex;
        background: #302703;
        height: 20px;
        margin: 0;
        justify-content: right;
        padding-right: 10%;
}

nav.quicklinks li {
}

ul.nav li {
        list-style: none;
}

ul.nav li a {
        text-decoration: none;
}

ul.nav {
        padding-left: 20px;
}

img.banner-creature {
        display: flex;
        flex-direction: row;
/*        position: absolute; 
        width: 170px;*/
        height: 148px;
        margin-top: 31px;
}

p.nav-header {
        border: 1px solid black;
        font-size: 16px;

        margin-top: 0px;
        background: linear-gradient(180deg, #696f26, #3c3900);
        text-align: center;
        padding: 4px 0;
        border-top: 1px solid #000;
        border-top-width: 1px;
        border-bottom: 1px solid #000;
        font-size: 15px;
        font-weight: 900;
        color: #ec950e;
        text-shadow: 0 0 3px #000;
}

/* li:not(:last-child):not(:nth-last-child(2))::after */

nav.quicklinks li:not(:last-child):not(:nth-last-child(2))::after {
        content: '/';
        margin: 0 4px;
}

nav.quicklinks li a.recover {
        margin: 0 4px;
        padding-left: 20px;
}

div.site-content {
        display: flex;
}

div.selection {
        width: 200px;
        margin: 10px;
        background: #615c41;
        border: 2px black solid;
        height: 100%;
}

div.selection2 {
        width: 200px;
        margin: 10px;
        background: #615c41;
        border: 2px black solid;
        height: 500px;
}

div.subject {
        background: #282828;
        width: 100%;

        border: 1px black solid;
}

div.subject h1, div.subject h2 {
        text-align: center;
}

input {
/*        background: #4c4713;*/
        background: #d5c295;

}

@media only screen and (max-width: 500px) {
        img.banner-creature {
                display: none;
        }
}

@media only screen and (max-width: 800px) {
        img.pr2 {
                display: none;
        }
}

@media only screen and (max-width: 1150px) {
        img.pr3 {
                display: none;
        }
}

p.intro-text {
        font-size: 20px;
        text-align: center;
}

div.original-post {
        background: #161616;
        border: 1px solid black;
        width: 100%;
        min-height: 200px;
        margin-bottom: 70px;
}

a.delete-post {
        margin-left: 50px;
}

.post {
        margin: 20px;
        display: flex;
        justify-content: center;
}

.news-post {
        margin: 60px;
}

div.news-post a {
        margin-left: 80%;
}

div.user-input {
        max-width: 600px;
        margin-left: calc(50% - 300px);
}

img.avatar {
        width: 96px;
        height: 96px;
        border: 1px solid black;
/*        background: #241e00;*/
        background: #34311e;
}

div.post-content {
        min-width: 500px;
        min-height: 120px;
        max-width: 1200px;
        padding: 10px;
        background: #4c4713;
        border: 1px solid black;
}

button.start-thread {
        width: 200px;
        margin: 20px;
}

button.post {
        /*
        width: 100px;
        height: 50px;
        */
        display: block;
}

div.post-header {
        height: 25px;
        padding-left: 100px;
        background: #2a2100;
        max-width: 1200px;
        color: #de9f06;
        border: 1px solid black;
        line-height: 25px;
}

textarea.post, textarea.start-thread {
        background: #4c4713;
        width: 100%;
        min-height: 120px;
        margin: 0;
        padding: 0;
        border: 0;
        resize: none;
        color: #d3b14d;
}

textarea.start-thread {
        border: 2px solid black;
}

input.thread-name {
        width: 400px;
        height: 30px;
        background: #4c4713;
        margin: 20px;
        margin-left: 0px;
        display: table;
        color: #d3b14d;
        border: 2px solid black;
}

div.user {
        margin: 10px;
}

div.user-details {
        background: #363208;
        padding: 2px;
        margin-left: -5px;
        border: 1px solid black;
}

p.username {
        font-size: 16px;
        text-align: center;
        font-weight: bold;
}

p.joined {
        font-size: 12px;
        text-align: center;
}

/*
div.subject {
        box-sizing: border-box;
}
*/

.border-top {
        border-top: 2px solid #024702;
}

div.thread {
        margin: 20px;
}

div.thread-list {
        width: 100%;

        display: table;
}

div.thread-cell {
        display: table-cell;
        box-sizing: border-box;
        padding: 10px 8px;
/*        border-left: 2px solid green;*/
}

div.descr {
        width: 400px;
}

div.meta {
        width: 135px;
}

div.metaw {
        width: 235px;
}

div.title {
        font-size: 17px;
        font-weight: 400;
}

div.detail {
        font-size: 12px;
}

div.detail a {
        text-decoration: none;
        color: inherit;
}

div.title a.thread {
        text-decoration: none;
}

p.reply_count {
}

p.last_reply {
}

img.orig_poster {
        width: 36px;
        height: 36px;

        vertical-align: middle;
}

p.thread-name {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        text-shadow: 0 0 3px #000;
        border-bottom: 2px solid green;
}

pre {
        white-space: pre-line;
}

@media only screen and (max-width: 1010px) {
        div.selection {
                display: none;
        }

        div.selection2 {
                display: none;
        }
}

.footer {
        margin: 20px;
        width: 60%;
        margin-left: 20%;
        text-align: center;
}

p.hint {
        font-size: 14px;
        text-align: center;
}

p.alert {
        font-weight: bold;
        text-align: center;
        color: yellow;
}