body {
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    background-color: #000000;
    color: #00ff00;
}

a {
    color: #00aa00;
    text-decoration: none;
}

div.header a, div.footer a {
    color: #aa0000;
}

h1, h2, h3 {
    text-align: center;
}

a:hover {
    text-decoration: underline;
}

div.terminal {
    margin-bottom: 100px;
}

span.left {
    float:left;
    text-align: left;
    margin-right: auto;
    margin-left: 1px;
    width: 49%;
}

span.right {
    float: right;
    text-align: right;
    margin-left: auto;
    margin-right: 1px;
    width: 49%;
}

div.page {
    border: 1px solid #aaaaaa;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 1024px;
    min-height: 480px;
    overflow: auto;
    box-sizing: border-box;
    position: relative;
}

p.text {
    white-space: pre-wrap;
    margin-top: 10px;
}

div.unfinished, div.success, div.failure {
    border: none;
}

div.left img {
    margin-left: 0px;
    margin-right: auto;
    /*
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    */
}

div.right img {
    margin-right: 0px;
    margin-left: auto;
}

div.center img {
    margin-left: 0pt;
    margin-right: 0pt;
}

div.center img.img-landscape {
    width: 100%;
}

div.center img.img-portrait,
div.center img.img-no-orientation {
    height: 100%;
}

img.img-no-orientation,
img.img-portrait {
    width: 49%;
    margin-left: auto;
    margin-bottom: 16px;
    image-rendering: pixelated;
}

div.logon-container,
div.logoff-container {
}

div.no-orientation img, div.landscape img, div.portrait img
{
    display: block;
    clear: both;
    height: auto;
    width: 100%;
}

div.no-orientation img, div.portrait img
{
    height: 80%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

div.landscape img
{
    height: auto;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

div.no-orientation p, div.landscape p, div.portrait p
{
    display: block !important;
    clear: both !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 1pt !important;
    margin-left: 0pt !important;
    margin-right: 0pt !important;
    margin-bottom: 1pt !important;
    float: none !important;
    position: revert !important;
    bottom: revert !important;
    left: revert !important;
    transform: none !important;
}

/*
div.no-orientation, div.landscape, div.portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
*/

div.landscape {
    height: auto;
    width: 1022px;
    margin-left: auto;
    margin-right: auto;
}

div.portrait, div.no-orientation {
    height: 450px;
    width: auto;
    margin-top: 10px;
    margin-bottom: auto;
}

img.img-landscape {
    width: 49%;
    margin-bottom: 16px;
    image-rendering: pixelated;
}

div.information img {
    display: none;
}

div.static {
    background-image: url("../images/static.png")
}

div.left p.text,
div.checkpoint p.text {
    float: right;
    text-align: left;
    margin-left: auto;
    margin-right: 15px;
    margin-bottom: 24px;
    width: 49%;
}

div.checkpoint p.checkpoint {
    float: left;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

div.right p.text {
    float: left;
    text-align: left;
    margin-right: auto;
    margin-left: 15px;
    margin-bottom: 24px;
    width: 49%;
}

div.logon p.text, div.logoff p.text {
    text-align: center;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.information p.text {
    float: none;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

div.interlevel-teleport p.text, a.interlevel-teleport,
div.intralevel-teleport p.text,
div.tag p.text,
div.camera p.text,
div.track p.text,
div.movie p.text,
div.sound p.text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.header, div.footer {
    width: auto;
    display: block;
    height: 20px;
    background-color: #210000;
    color: #ff0000;
    padding: 1px;
}

div.header {
}

div.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1020px;
}

.fmt-invalid {
    text-decoration: line-through;
}

.fmt-bold {
    font-weight: bold;
}

.fmt-italic {
    font-style: italic;
}

.fmt-underline {
    text-decoration: underline;
}

.fmt-light-green {
    color: #00ff00;
}

.fmt-white {
    color: #ffffff;
}

.fmt-light-red {
    color: #ff0000;
}

.fmt-dark-green {
    color: #00aa00;
}

.fmt-light-blue {
    color: #00a6be;
}

.fmt-yellow {
    color: #ffff00;
}

.fmt-dark-red {
    color: #aa0000;
}

.fmt-dark-blue {
    color: #3333bb;
}

div.index {
    margin-left: auto;
    margin-right: auto;
    width: 40em;
}

ul.index {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 1.5em;
}

li.index-entry {
    display: block;
    clear: both;
}

ul.index h1.index-title {
    font-size: 2em;
}

span.index-number {
    float: left;
    text-align: right;
    margin-left: 0;
    margin-right: auto;
    width: 8%;
}

a.index-link {
    float: right;
    text-align: left;
    margin-left: auto;
    margin-right: 0;
    width: 90%;
}

img.chapter {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: auto;
    display: block;
    border: 1px solid #555555;
}

img.img-ref {
    margin-left: auto;
    margin-right: auto;
    display: block;
    clear: both;
    border: 1px #ffffff solid;
}

h1.img-name {
    margin-left: auto;
    margin-right: autod;
    display: block;
    text-align: center;
    clear: both;
    font-size: 2em;
}

ul.img-ref-levels {
    margin-left: auto;
    margin-right: auto;
    width: 25em;
}

ul.img-ref-pages {
}

li.img-ref-level {
}

li.img-ref-page {
}

div.links-to-levels, div.nav {
    margin-left: auto;
    margin-right: auto;
    display: block;
    clear: both;
    width: 25em;
    border: 1px #002200 solid;
    margin-bottom: 1em;
}

div.links-to-levels {
}

div.links-to-levels p.text {
    text-align: center;
}

li.link-to-level {
    margin-left: 6em;
}

div.nav {
    text-align: center;
}

div.nav a {
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
    text-align: center;
}

div.nav a.link-to-prev {
    float: left;
    text-align: left;
    margin-right: auto;
    margin-left: 1em;
}

div.nav a.link-to-next {
    float: right;
    text-align: right;
    margin-right: 1em;
    margin-left: auto;
}

div.inline-comment, div.floating-comment {
    display: block;
    font-size: 1em;
    color: #ffffff;
    font-family: "Arial", sans-serif;
    text-align: justify;
    padding: 1em;
    border-left: 1px dotted white;
}

div.inline-comment {
    margin-left: 1em;
    margin-right: 1em;
}

div.floating-comment {
    width: 50%;
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
}

div.floating-comment ~ div.floating-comment,
div.inline-comment ~ div.inline-comment {
    margin-top: 0em;
}

div.floating-comment a, div.floating-comment a:hover,
div.inline-comment a, div.inline-comment a:hover {
    color: #ffffff;
}

div.floating-comment a, div.floating-comment a {
    text-decoration: none;
}

div.floating-comment a:hover, div.floating-comment a:hover {
    text-decoration: underline
}