@font-face {
    /*font-family: IBM_VGA_9x16;*/
    font-family: Cordata_PPC-21;
    /*src: url(fonts/Web437_IBM_VGA_9x16.woff); NOT aspect-corrected! */
    src: url(/fonts/AcPlus_Cordata_PPC-21.ttf);
    /* aspect-corrected */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: AmstradPCW-Narrow;
    src: url(/fonts/amstrad-pcw-narrow.ttf);
    /* aspect-corrected */
    font-weight: normal;
    font-style: normal;
}

/* debug frames
*{
 outline: 1px solid red;
}*/

html,
body {
    /*font-family: IBM_VGA_9x16 !important;*/
    font-family: Cordata_PPC-21 !important;
    font-size: 32px;
    background-color: #201000 !important;
    /* dark brown */
    margin: 0 0 0 0;
    color: darkorange;
    font-smooth: antialiased;
    -webkit-font-smoothing: antialiased;
}

div.container:before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to bottom,
            rgba(32, 16, 0, 0) 35%,
            rgba(0, 0, 0, 0.9) 90%);
    background-size: 100% 2px;
    z-index: 2;
    pointer-events: none;
}

div#title {
    position: relative;
    background-color: orange;
    color: #201000;
    line-height: 1em;
    margin-top: 0px;
    text-align: center;
}

div.navbar {
    /*white-space: pre;*/
    position: sticky;
    top: 0;
    display: block;
    z-index: 1;
    /* ugly hack */
    width: 100%;
}

div#menu {
    /*	background-color: #201000;
	min-width: 950px;
	max-width: 950px;*/
    position: relative;
    width: 100%;
    height: 1em;
}

div#left {
    float: left;
}

div#right {
    float: right;
}

#submitsettings {}

div#content {
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    white-space: no-wrap;
    line-height: 1.2em;
    overflow-y: auto;
    width: 100%;
}

div.post {
    display: block;
    vertical-align: top;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 1em;
}

blockquote {
    border-left: 3px dashed #ffbf00;
    padding-left: 0.5em;
    margin-top: 0em;
    margin-bottom: 0em;
}

div.postbody {
    clear: right;
}

div.headers {
    position: relative;
    float: right;
    margin-right: 1em;
    margin-bottom: 1em;
    display: block;
    text-align: left;
    max-width: 15em;
}

div.headers a {
    pointer-events: none;
    color: #ffbf00;
    background-color: #201000;
}

div.headers a:hover {
    color: orange;
    background-color: #201000;
}

#normalpointer {
    color: #201000;
    background-color: orange;
    pointer-events: auto;
}

.menubutton,
.menubutton-left,
span.menubutton-active,
.menubutton-right {
    float: left;
    border-left: 2px solid #201000;
    border-bottom: 1px solid #201000;
    line-height: 1em;
    display: inline-block;
    background-color: orange;
    cursor: pointer;
    color: orange;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.menubutton-form {
    padding: 0;
}

.submitsettings {
    line-height: 1em;
    align-items: normal;
    background-color: orange;
    border-style: none;
    border: 0;
    box-sizing: content-box;
    color: #201000;
    padding: 0;
    margin: 0;
    padding-left: 0.2em;
    padding-right: 0.2em;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    perspective-origin: 0 0;
    text-align: start;
    transform-origin: 0 0;
    -moz-appearance: none;
    -webkit-logical-height: 1em;
    /* Chrome ignores auto, so we have to use this hack to set the correct height  */
    -webkit-logical-width: auto;
    /* Chrome ignores auto, but here for completeness */
}

.menubutton:hover,
.menubutton-left:hover,
.menubutton-right:hover,
.menubottom-form:hover,
.submitsettings:hover {
    color: #201000;
    background-color: #ffd200;
    text-decoration: none;
}

.menubutton-left,
.menubutton-left-form {
    float: left;
    display: inline-block;
    line-height: 1em;
    border-right: 2px solid #201000;
    border-bottom: 1px solid #201000;
    background-color: orange;
}

.menubutton-right,
.menubutton-right-form {
    display: inline-block;
    line-height: 1em;
    background-color: orange;
    border-bottom: 1px solid #201000;
    border-left: 2px solid #201000;
}

span.menubutton-active {
    border-left: none;
    pointer-events: none;
    background-color: #201000;
    color: #ffbf00;
}

a:link {
    color: #201000;
    background-color: orange;
    text-decoration: none;
}

a:visited {
    color: #201000;
    background-color: orange;
    text-decoration: none;
}

a:hover,
#normalpointer:hover {
    color: #201000;
    background-color: #ffd200;
    text-decoration: none;
}

b {
    font-weight: normal;
    color: #ffbf00;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,
            rgba(32, 16, 0, 0) 35%,
            rgba(0, 0, 0, 0.9) 90%);
    background-size: 100% 2px;
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    width: 0.5em;
    background-color: orange;
}

::-webkit-scrollbar-thumb {
    width: 0.5em;
    background-color: #ffd200;
}