/* Main CSS */
html {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    height: 100vh;
    background-color: black;
    color: #d2cfcd;
    font-family: "Native", "Lucida Console", "Liberation Mono", Monaco, monospace;
    /*font-family: "Roboto Mono", "Lucida Console", "Liberation Mono", Monaco, monospace;*/
    /*font-family: "Source Code Pro", "Lucida Console", "Liberation Mono", Monaco, monospace;*/
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    /*line-height: 1.2;*/
    margin: 0px;
}
body.js-disabled .js-only, body.js-enabled .html-only {
    display: none !important;
    opacity: 0 !important;
}
a {
    color: #298be6;
    text-decoration: none;
}
a:focus {
    outline: none;
}
a.selector.image {
    display: inline-block;
    margin-right: 4px;
}
div {
    border: none;
    padding: 0px;
    margin: 0px;
}
div.noborder {
    border: none;
    padding: 0px;
    margin-top: 0px;
}
div.nopadding {
    border: none;
    padding: 0px;
    margin: 0px;
}
div.nopadblock {
    border: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
div.nothing {
    display: none !important;
    border: none;
}
div.overlay {
    margin: 0px;
    padding: 0px;
    z-index: 1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
div.popup {
    position: absolute;
    left: 0px;
    right: 0px;
    -webkit-transition-property: left, right, top, bottom, opacity;
    -webkit-transition-duration: 400ms;
    -moz-transition-property: left, right, top, bottom, opacity;
    -moz-transition-duration: 400ms;
    -o-transition-property: left, right, top, bottom, opacity;
    -o-transition-duration: 400ms;
    transition-property: left, right, top, bottom, opacity;
    transition-duration: 400ms;
    will-change: left, right, top, bottom, opacity;
}
body.intro-sequence.inactive-x div.popup {
    left: 50%;
    right: 50%;
    overflow: hidden;
}
body.intro-sequence.inactive-x #output {
    padding-left: 0px;
    padding-right: 0px;
}
body.intro-sequence.inactive-y div.popup {
    top: 50%;
    bottom: 50%;
    overflow: hidden;
}
body.intro-sequence.inactive-y #output {
    padding-top: 0px;
    /*padding-bottom: 0px;*/
}
div.status {
    left: 0px;
    right: 0px;
    position: absolute;
    margin: 0px 4px;
}
div.column {
    position: relative;
    float: left;
    border: none;
    padding: 0px;
    margin: 0px;
}
div.bannerbox {
    text-align: center;
    border: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
div.bannerbox img {
    max-width: 95.55556%;
    max-height: 95.55556%;
    vertical-align: middle;
}
div.textbox {
    border: none;
    padding: 0px 4px;
}
div.sectionbox, div.textbox p, div.textbox pre {
    padding: 0px 0px 19px;
    margin: 0px;
}
div.textbox pre {
    overflow-x: auto;
    overflow-y: hidden;
}
div.pic {
    display: inline-block;
    vertical-align: top;
    padding: 0px;
}
div.pic.profile {
    height: 144px;
    width: 144px;
}
div.pic.tweetprofile {
    height: 48px;
    width: 48px;
    padding: 4px 0px 4px;
}
div.pic > img {
    display: inline-block;
    vertical-align: top;
    border-style: none;
    width: 100%;
}
div.profilebox {
    display: inline-block;
    width: calc(100% - 144px);
    padding: 0px 4px 4px;
}
@media all and (min-width: 961px) {
    #container {
        margin-left: calc(50% - 480px);
        margin-right: calc(50% - 480px);
    }
}
@media all and (max-width: 960px) {
    #container {
        margin-left: 0px;
        margin-right: 0px;
    }
}
@media all and (min-width: 728px) {
    .popup {
        top: 19px;
        bottom: 19px;
    }
    .small {
        font-size: 12px;
        line-height: 17px;
    }
}
@media all and (max-width: 727px) and (min-width: 549px) {
    body {
        font-size: 2.06044vw;
        line-height: 2.60989vw;
    }
    div.sectionbox, div.textbox p, div.textbox pre {
        padding-bottom: 2.60989vw;
    }
    #output {
        padding-top: 2.60989vw;
        /*padding-bottom: 2.60989vw;*/
    }
    .popup {
        top: 2.60989vw;
        bottom: 2.60989vw;
    }
    .small {
        font-size: 1.64835vw;
        line-height: 2.33516vw;
    }
    .indent {
        margin-left: 2.06044vw;
    }
}
@media all and (max-width: 548px) {
    body {
        font-size: 11px;
        line-height: 14px;
    }
    div.sectionbox, div.textbox p, div.textbox pre {
        padding-bottom: 14px;
    }
    #output {
        padding-top: 14px;
        /*padding-bottom: 14px;*/
    }
    .popup {
        top: 14px;
        bottom: 14px;
    }
    .small {
        font-size: 9px;
        line-height: 12px;
    }
    .indent {
        margin-left: 11px;
    }
}
@media all and (min-height: 756px) {
    #container {
        padding-top: 18px;
        padding-bottom: 18px;
    }
    #main {
        height: calc(100% - 18px);
    }
}
@media all and (max-height: 755px) {
    #container {
        padding-top: 2.38095vh;
        padding-bottom: 2.38095vh;
    }
    #main {
        height: 100%;
    }
}
p {
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0px;
}
p.ralignlink {
    padding-right: 2em;
    text-align: right;
}
sup {
    color: #298be6;
}
#container {
    border: none;
    overflow-x: hidden;
    position: relative;
    height: 100vh;
    padding-left: 12px;
    padding-right: 12px;
}
#main {
    background-color: black;
    position: relative;
    left: 0;
    right: 0;
}
#topbanner {
    padding: 4px;
    text-align: center;
}
#output {
    overflow-x: hidden;
    overflow-y: auto;
    border-color: #298be6;
    border-style: solid;
    border-width: 1px 0px;
    padding-top: 19px;
    /*padding-bottom: 19px;*/
}
#output:focus {
    outline: none;
}
#status {
    top: 0px;
}
#command {
    bottom: 0px;
    white-space: nowrap;
}
body.intro-sequence #output > * {
    display: none;
}
body.intro-sequence #status, body.intro-sequence #command {
    opacity: 0;
}
.imgbox {
    padding: 0px;
    margin: 0px;
}
.imgbox img {
    border: none;
}
.imgbox a > img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    padding: 1px;
}
.imgbox a:focus > img, .imgbox a:hover > img {
    -webkit-box-shadow: 0 0 10px #19c119;
    -moz-box-shadow: 0 0 10px #19c119;
    box-shadow: 0 0 10px #19c119;
    border-width: 1px;
    border-color: #19c119;
    border-style: solid;
    padding: 0px;
}
.visible {
    opacity: 1;
}
.loading {
    opacity: 0.6;
}
.dimmed {
    opacity: 0.06;
}
.hidden {
    opacity: 0;
}
.noshow {
    display: none !important;
    opacity: 0 !important;
}
.dimmer {
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    -o-transition: opacity 400ms;
    transition: opacity 400ms;
    will-change: opacity;
}
.big {
    font-size: 21px;
    /*line-height: 22px;*/
}
.bold {
    font-weight: bold;
}
.underline {
    text-decoration: underline;
}
.italic {
    font-style: italic;
}
.indent {
    margin-left: 15px;
}
.indent-lg {
    margin-left: 30px;
}
.chunk {
    display: inline-block;
    vertical-align: top;
    padding-right: 8em;
}
.bright {
    color: black !important;
    background-color: #D4D2CF !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
.centered {
    text-align: center;
}
.floatright {
    float: right;
}
.blackbox {
    border-color: #171616;
    border-style: solid;
    border-width: 1px;
}
.blue {
    color: #298be6;
}
.blueneg, .blue.selector:focus, .blue.selector:hover {
    color: black;
    background-color: #298be6;
    border-color: #298be6;
}
.bluebox {
    border-color: #298be6;
    border-style: solid;
    border-width: 1px;
}
.red, .err {
    color: #dd1111;
}
.redneg, .errneg {
    color: black;
    background-color: #dd1111;
    border-color: #dd1111;
}
.redbox, .errbox {
    border-color: #dd1111;
    border-style: solid;
    border-width: 1px;
}
.green {
    color: #19c119;
}
.greenneg, .green.selector:focus, .green.selector:hover {
    color: black;
    background-color: #19c119;
    border-color: #19c119;
}
.greenbox {
    border-color: #19c119;
    border-style: solid;
    border-width: 1px;
}
.purple {
    color: #A67CCF;
}
.purpleneg, .purple.selector:focus, .purple.selector:hover {
    color: black;
    background-color: #A67CCF;
    border-color: #A67CCF;
}
.purplebox {
    border-color: #A67CCF;
    border-style: solid;
    border-width: 1px;
}
.orange {
    color: #E65C00;
}
.orangeneg, .orange.selector:focus, .orange.selector:hover {
    color: black;
    background-color: #E65C00;
    border-color: #E65C00;
}
.orangebox {
    border-color: #E65C00;
    border-style: solid;
    border-width: 1px;
}
.yellow {
    color: #EEDE22;
}
.yellowneg, .yellow.selector:focus, .yellow.selector:hover {
    color: black;
    background-color: #EEDE22;
    border-color: #EEDE22;
}
.pink {
    color: #F92672;
}
.pinkbox {
    border-color: #F92672;
    border-style: solid;
    border-width: 1px;
}
.highlight {
    background-color: #343333;
}