style/tricorder.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @font-face {
   6   font-family: DVSC; /* Original in Star Trek is Helvetica Ultra Condensed */
   7   src: url("DejaVuSansCondensed.ttf");
   8 }
   9
  10 @font-face {
  11   font-family: DVSC;
  12   src: url("DejaVuSansCondensed-Bold.ttf");
  13   font-weight: bold;
  14 }
  15
  16 html {
  17   background-color: #000000;
  18   height: 100%;
  19 }
  20
  21 body {
  22   border: 0px solid #9C9CFF;
  23   font-size: 16px;
  24   margin: 0px;
  25   height: 100%;
  26   background-color: #000000;
  27   color: #FF9F00;
  28   position: relative;
  29   font-family: DVSC,"DejaVu Sans",Arial,Helvetica,sans-serif;
  30 }
  31
  32 h1 {
  33   display: none;
  34 }
  35
  36 a:link { color: #FF9F00; }
  37 a:visited { color: #8050B0; }
  38 a:hover, a:active { color: #FFCF00; }
  39
  40 #sidebar {
  41   position: absolute;
  42   top: 3px;
  43   bottom: 3px;
  44   left: 3px;
  45   right: auto;
  46   width: 140px;
  47   height: auto;
  48   padding: 0px;
  49   margin: 0px 0px 0px 0px;
  50   border: 0px;
  51   overflow: hidden;
  52 }
  53
  54 #sideTop {
  55   background-color: #6080F0;
  56   color: #000000;
  57   width: 120px;
  58   height: 80px;
  59   margin-bottom: 3px;
  60 }
  61
  62 #stardate {
  63   background-color: #A06060;
  64   color: #000000;
  65   padding: 3px 3px 10px;
  66   font-weight: bold;
  67   text-align: right;
  68   border-bottom: 3px solid black;
  69 }
  70
  71 #sideSepTop {
  72   background-color: #808090;
  73   width: 140px;
  74   height: 20px;
  75   margin-bottom: 3px;
  76   padding-bottom: 10px;
  77   border-radius: 0px 0px 0px 15px;
  78 }
  79 #sideSepTopInsert {
  80   background-color: #000000;
  81   width: 20px;
  82   height: 100%;
  83   margin-left: 120px;
  84   border-radius: 0px 0px 0px 15px;
  85 }
  86 #sideSepBottom {
  87   background-color: #008484;
  88   width: 140px;
  89   height: 50px;
  90   margin-bottom: 3px;
  91   padding-top: 10px;
  92   border-radius: 15px 0px 0px 0px;
  93 }
  94 #sideSepBottomInsert {
  95   background-color: #000000;
  96   width: 20px;
  97   height: 100%;
  98   margin-left: 120px;
  99   border-radius: 15px 0px 0px 0px;
 100 }
 101
 102 #sideBottom {
 103   background-color: #9C9CFF;
 104   color: #000000;
 105   width: 120px;
 106   margin-bottom: 3px;
 107   position: absolute;
 108   top: 179px;
 109   bottom: 40px;
 110   height: auto;
 111 }
 112
 113 #navlist {
 114   list-style-type: none;
 115   margin: 0 0 1em;
 116   padding: 0 0 0.2em;
 117 }
 118 #navlist > li {
 119   margin: 0;
 120   padding: 0 0.2em 0;
 121   border-bottom: 3px solid #000000;
 122   font-weight: bold;
 123 }
 124 #navlist > li > a {
 125   display: block;
 126   text-decoration: none;
 127   width: 100%;
 128   padding: 0.3em 0;
 129 }
 130 #navlist > li:hover,
 131 #navlist > li:active,
 132 #navlist > li:hover > a,
 133 #navlist > li:active > a,
 134 #navlist > li > a:hover,
 135 #navlist > li > a:active {
 136   background-color: #FFCF00;
 137   color: #000000;
 138 }
 139
 140 #navlist > li.active,
 141 #navlist > li.active > a {
 142   background-color: #008484;
 143   color: #FFCF00;
 144 }
 145
 146 #navPos, #navPos > a {
 147   background-color: #FF9F00;
 148   color: #000000;
 149 }
 150 #navGrav, #navGrav > a {
 151   background-color: #C09070;
 152   color: #000000;
 153 }
 154 #navAcou, #navAcou > a {
 155   background-color: #6000CF;
 156   color: #000000;
 157 }
 158
 159 #sideRemark {
 160   background-color: #E7ADE7;
 161   color: #000000;
 162   width: 120px;
 163   font-size: 10px;
 164   text-align: center;
 165   position: absolute;
 166   bottom: 0px;
 167   height: 40px;
 168 }
 169 #sideRemark a:link, #sideRemark a:visited { color: #000000; }
 170 #sideRemark a:hover, #sideRemark a:active { color: #008484; }
 171
 172 #mainarea {
 173   position: absolute;
 174   top: 3px;
 175   bottom: 3px;
 176   left: 145px;
 177   right: 3px;
 178   width: auto;
 179   padding: 1px;
 180   min-height: 35em;
 181   overflow: none;
 182   border: none;
 183 }
 184
 185 #mainHeader {
 186   color: #FFCF00;
 187   font-size: 3em;
 188   font-weight: bold;
 189   line-height: .8em;
 190   height: 102px;
 191   text-align: center;
 192 }
 193
 194 #mainSepTop {
 195   background-color: #E7ADE7;
 196   font-size: 1px;
 197   height: 10px;
 198   margin-bottom: 3px;
 199 }
 200 #mainSepBottom {
 201   background-color: #A09090;
 202   font-size: 1px;
 203   height: 10px;
 204   margin-bottom: 3px;
 205 }
 206
 207 #mainContent {
 208   position: absolute;
 209   top: 129px;
 210   bottom: 0px;
 211   left: 0px;
 212   right: 1px;
 213   width: auto;
 214   padding: 1px;
 215   height: auto;
 216   overflow: auto;
 217   border: none;
 218   background: transparent url("tilexborder.png") center center no-repeat;
 219 }
 220
 221 section {
 222   display: none;
 223   background-color: rgba(0,0,0,0.8);
 224 }
 225
 226 section.active {
 227   display: block;
 228 }
 229
 230 .gravVal {
 231   text-align: right;
 232 }