/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ /* The original LCARS font in Star Trek is Helvetica Ultra Condensed. * We try to use open stuff here, so we use OSP-DIN from * http://openfontlibrary.org/en/font/osp-din, which is licensed under the * SIL OFL - http://scripts.sil.org/OFL */ @font-face { font-family: OSPDIN; src: url('OSPDIN.ttf') format('truetype'); font-weight: normal; font-style: normal; } html { background-color: #000000; height: 100%; } body { border: 0px solid #9C9CFF; font-size: 16px; margin: 0px; height: 100%; background-color: #000000; color: #FF9F00; position: relative; font-family: OSPDIN,sans-serif; } h1 { display: none; } a:link { color: #FF9F00; } a:visited { color: #8050B0; } a:hover, a:active { color: #FFCF00; } #sidebar { position: absolute; top: 3px; bottom: 3px; left: 3px; right: auto; width: 90px; height: auto; padding: 0px; margin: 0px 0px 0px 0px; border: 0px; overflow: hidden; } #sideTop { background-color: #6080F0; color: #000000; width: 70px; height: 60px; margin-bottom: 3px; } #stardate { background-color: #A06060; color: #000000; padding: 3px 3px 10px; text-align: right; border-bottom: 3px solid black; } #sideSepTop { background-color: #808090; width: 90px; height: 20px; margin-bottom: 3px; padding-bottom: 10px; border-radius: 0px 0px 0px 15px; } #sideSepTopInsert { background-color: #000000; width: 20px; height: 100%; margin-left: 70px; border-radius: 0px 0px 0px 15px; } #sideSepBottom { background-color: #6080F0; width: 90px; height: 50px; margin-bottom: 3px; padding-top: 10px; border-radius: 15px 0px 0px 0px; } #sideSepBottomInsert { background-color: #000000; width: 20px; height: 100%; margin-left: 70px; border-radius: 15px 0px 0px 0px; } #sideBottom { background-color: #9C9CFF; color: #000000; width: 70px; margin-bottom: 3px; position: absolute; top: 159px; bottom: 2em; height: auto; } #navlist { list-style-type: none; margin: 0 0 1em; padding: 0 0 0.2em; } #navlist > li { margin: 0; padding: 0.2em; border-bottom: 3px solid #000000; text-transform: uppercase; } #navlist > li:hover, #navlist > li:active { background-color: #FFCF00; color: #000000; } #navlist > li.active { background-color: #008484; color: #FFCF00; outline: none; } #navPos { background-color: #FF9F00; color: #000000; } #navGrav { background-color: #C09070; color: #000000; } #navSound { background-color: #E7ADE7; color: #000000; } #navDev { background-color: #A09090; color: #000000; } #navOther { background-color: #6000CF; color: #000000; } #sideRemark { background-color: #E7ADE7; color: #000000; width: 70px; position: absolute; bottom: 0px; height: 2em; margin: 0; padding: 0; list-style-type: none; } #sideRemark > li { text-transform: uppercase; padding-top: .25em; padding-left: .2em; height: 1.75em; margin: 0; } #sideRemark > li:hover, #sideRemark > li:active { background-color: #FFCF00; color: #000000; } #mainarea { position: absolute; top: 3px; bottom: 3px; left: 95px; right: 3px; width: auto; padding: 1px; min-height: 20em; overflow: hidden; border: none; } #mainHeader { color: #FFCF00; font-size: 3em; font-weight: bold; line-height: .8em; height: 82px; text-align: center; } #mainSepTop { background-color: #E7ADE7; font-size: 1px; height: 10px; margin-bottom: 3px; } #mainSepBottom { background-color: #A09090; font-size: 1px; height: 10px; margin-bottom: 3px; } #mainContent { position: absolute; top: 109px; bottom: 0px; left: 0px; right: 1px; width: auto; padding: 1px; height: auto; overflow: auto; border: none; background: transparent url("tilexborder.png") center center no-repeat; } section { display: none; background-color: rgba(0,0,0,0.8); height: 100%; } section.active { display: block; } section > p:first-child { margin-top: 0; padding-top: 1em; } .posVal, .gravVal { text-align: right; } .posVal { width: 24ch; } .gravVal { width: 10ch; } .note { font-size: .667em; } #soundavail { height: 100%; } @media screen and (min-width: 500px) { body { font-size: 24px; } #sidebar { width: 140px; } #sideTop { width: 120px; height: 80px; } #sideSepTop { width: 140px; } #sideSepTopInsert { margin-left: 120px; } #sideSepBottom { width: 140px; } #sideSepBottomInsert { margin-left: 120px; } #sideBottom { width: 120px; top: 179px; bottom: 40px; } #sideRemark { width: 120px; height: 40px; } #mainarea { left: 145px; } #mainHeader { height: 102px; } #mainContent { top: 129px; } }