CSS for PointedEars' LCARS, version 2.054, stardate 200712.02

<?php header('Content-Type: text/css'); ?>
@CHARSET "UTF-8";

/*
 * <title>CSS for PointedEars' LCARS, version 2.054, stardate 200712.02</title>
 */

/* basic fonts */
@font-face {
  font-family: "Downloadable LCARS";
  font-style: normal;
  font-weight: normal;
  src: url(fonts/LCARS.ttf);
}

/* EOT font created with WEFT on 2002-03-23 */
@font-face {
  font-family: "Downloadable Haettenschweiler";
  font-style: normal;
  font-weight: normal;
  src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
}

/*
@font-face {
  font-family:Webdings;
  font-style:normal;
  font-weight:normal;
  src:url(WEBDING0.eot);
}
*/
@font-face {
  font-family: "Downloadable Zurich XCn BT";
  font-style: normal;
  font-weight: normal;
  src: url(fonts/ZurichXCn.pfr);
}

/* basic display */
* {
  font-family: LCARS, "Downloadable LCARS", Haettenschweiler,
    "Downloadable Haettenschweiler", "Zurich XCn BT",
    "Downloadable Zurich XCn BT", impact, Verdana, Geneva, Arial,
    Helvetica, sans-serif;
  font-weight: normal;
}

<?php
  $colors = array(
    'primary' => array(
      'elbo'     => '#f1df6f',
      'offline1' => '#300',
      'offline2' => '#f00',
      'n/a'      => '#39f',
      'primary'  => '#9cf',
      'color1'   => '#ff3',
      'color2'   => '#ffc'
    ),
    'secondary' => array(
      'elbo'     => '#b19f7a',
      'offline1' => '#300',
      'offline2' => '#f00',
      'n/a'      => '#5355de',
      'primary'  => '#9cf',
      'color1'   => '#fc0',
      'color2'   => '#ff9'
    ),
    'ancillary'  => array(
      'elbo'     => '#f1b1af',
      'offline1' => '#300',
      'offline2' => '#f00',
      'n/a'      => '#a27fa5',
      'primary'  => '#adacd8',
      'color1'   => '#ff3',
      'color2'   => '#e6b0d4'
    ),
    'database'  => array(
      'elbo'     => '#c66',
      'offline1' => '#300',
      'offline2' => '#f00',
      'n/a'      => '#ccf',
      'primary'  => '#9cf',
      'color1'   => '#f90',
      'text'     => '#99f',
      'old_text' => '#669',
      'new_text' => '#9cf',
      'link'     => '#fc9',
      'visited'  => '#c9c',
      'hover'    => '#f90',
      'active'   => '#fff'
    ),
    'red_alert'  => array(
      'elbo'     => '#f00',
      'offline1' => '#300',
      'offline2' => '#f00',
      'n/a'      => '#f00',
      'primary'  => '#f00',
      'color1'   => '#f00',
      'color2'   => '#f00'
    ),
    'multi-display'  => array(
      'upper_elbo' => '#9cf',
      'lower_elbo' => '#c66',
      'color1'     => '#f90',
      'color2'     => '#c9c',
      'text1'      => '#fff',
      'text2'      => '#f90',
    )
  );
?>

*[lang^="x-vulcan-latin"] {
  font-family: cursive;
}

body {
  margin: 0 10px;
  
  /* IE 5.5+ scrollbar colors */
  /* from Mozilla LCARS Theme (2D style) */
  scrollbar-3dlight-color: #000;
  scrollbar-arrow-color: #000;
  scrollbar-base-color: #000;
  scrollbar-darkshadow-color: #000;
  scrollbar-face-color: #99f;
  scrollbar-highlight-color: #99f;
  scrollbar-track-color: #000;
  scrollbar-shadow-color: #99f;
  
  background-color: #000;
  color: <?php echo $colors['database']['text']; ?>;
  font-size: 131%; /* 134% */
}

/* headings */
h1 {
  font-size: 120%; /* 191% */
  font-weight: normal;
  color: #fff; /* #c96 */
  background-color: black;
}

h2 {
  font-size: 120%; /* 129% */
  font-weight: normal;
  color: #fff; /* #fc6 */
  background-color: black;
  text-transform: uppercase;
}

h3 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 123%;
  font-weight: normal;
  color: #fff; /* #fc6 */
  background-color: black;
  text-transform: uppercase;
}

h4 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 116%;
  font-weight: normal;
  color: #fc6;
  background-color: black;
}

table+h4 {
  margin-top: 1em;
}

/*
a.h4:link:hover,a.h4:visited:hover {
  color: #fc6;
  background-color: black;
}

a.h4:link:active,a.h4:visited:active {
  color: #fff;
  background-color: black;
}
*/

h5 {
  margin-top: 2em;
  margin-bottom: 1em;
  background-color: black;
  color: <?php echo $colors['multi-display']['text1']; ?>; /* #fc6 */
  font-size: 111%;
  font-weight: normal;
}

h6 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 104%;
  font-weight: normal;
  color: #fc6;
  background-color: black;
}

div.body { /* width:95%; */
  
}

span.alt { /* span with alternative text color */
  color: #f93;
  background-color: #000;
}

/* for JavaScript processing messages */
.standby {
  font-size: 166%;
  background-color: #000;
  color: #99f;
}

div.standby {
  position: absolute;
  top: 0;
  visibility: hidden;
}

/* font styles  */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

div,p,li,th,td {
  max-width: 60ex;
}

small {
  font-size: 100%;
}

b, strong {
  color: <?php echo $colors['multi-display']['text1']; ?>; /* #f93 */
  background-color: #000;
  font-weight: normal;
}

i, cite, blockquote, em {
  background-color: #000;
  color: <?php echo $colors['multi-display']['text1']; ?>; /* #f93 */
  font-style: normal;
}

abbr {
  white-space: nowrap;
}

abbr, acronym {
  border-bottom: 1px dotted;
  cursor: help;
}

del {
  background-color: #000;
  color: <?php echo $colors['database']['old_text']; ?>;
  text-decoration: line-through;
}

ins {
  background-color: #000;
  color: <?php echo $colors['database']['new_text']; ?>;
  text-decoration: none;
}

span.cap {
  font-variant: small-caps;
}

ul.filelist li  {
  background-color: #000;
  color: <?php echo $colors['database']['n/a']; ?>;
  cursor: not-allowed;
}

/* LCARS specific anchors */

/* order is important to buggy IE;
   TODO: [IE] links focus color, visited links hover color */
a:link:hover,
a:link:active,
a:link:focus
{
  background-color: #000;
  color: <?php echo $colors['database']['hover']; ?>; /* #fc0 */
  text-decoration: none;
}

a:link {
  background-color: #000;
  color: <?php echo $colors['database']['link']; ?>; /* white */
  text-decoration: none;
}

a:visited:hover {
  background-color: #000;
  color: <?php echo $colors['database']['hover']; ?>; /* #fc3 */
  text-decoration: none;
}

a:visited:active {
  background-color: #000;
  color: <?php echo $colors['database']['active']; ?>; /* #fff */
  text-decoration: none;
}

a:visited:focus {
  background-color: #000;
  color: <?php echo $colors['database']['hover']; ?>; /* #fc3; */
  text-decoration: none;
}

a:visited {
  background-color: #000;
  color: <?php echo $colors['database']['visited']; ?>; /* #fc9 */
  text-decoration: none;
}

/* buttons */
a.button:link:focus,a.button:visited:focus,a.button:link:hover,a.button:visited:hover
  {
  color: #000;
  background-color: #c9c;
  text-decoration: none;
}

a.button:link:active,a.button:visited:active {
  color: #000;
  background-color: #fff;
  cursor: default;
  text-decoration: none;
}

a.button:link,a.button:visited {
  background-color: #969;
  color: #000;
  padding-left: 1px;
  vertical-align: middle;
  font-size: 110%;
  text-decoration: none;
}

a.stop:link,a.stop:visited {
  background-color: #c66;
  color: #000;
  padding-left: 1px;
  vertical-align: middle;
  font-size: 110%;
  text-decoration: none;
}

a.stop:link:hover,a.stop:visited:hover {
  background-color: #f66;
  color: #000;
  text-decoration: none;
}

a.stop:link:active,a.stop:visited:active {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

a.go:link,a.go:visited {
  background-color: #6c6;
  color: #000;
  padding-left: 1px;
  vertical-align: middle;
  font-size: 110%;
  text-decoration: none;
}

a.go:link:hover,a.go:visited:hover {
  background-color: #6f6;
  color: #000;
  text-decoration: none;
}

a.go:link:active,a.go:visited:active {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

span.symbol {
  font-family: Webdings, fantasy;
  font-style: normal;
  font-weight: normal;
  font-size: 110%;
}

/* form elements */
input {
  background-color: black;
  font-size: 104%;
  color: white;
}

input.button { /* offset-width:auto; */
  border-style: none;
  border-width: 0px;
  color: #000;
  background-color: #969;
  font-size: 123%;
  cursor: pointer;
}

textarea {
  background-color: #000;
  font-size: 104%;
  color: white;
}

select {
  color: white;
  background-color: #000;
  border-color: white;
  font-size: 104%;
  cursor: pointer;
}

option {
  cursor: pointer;
}

/* table elements */
table {
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 1em;
}

/*
 * Not for IE 6 and below.
 * Bugfix for IE 7 is provided by lcars-ie7.css which should be
 * included as follows:
  
   <link rel="stylesheet" href="/styles/lcars.css" type="text/css">
   <!--[if IE 7]>
     <link rel="stylesheet" href="/styles/lcars-ie7.css" type="text/css">
   <![endif]-->
 */
table>tbody.scroll {
  height: 11em;
  overflow: auto;
  /*
   * In current implementations, the scrollbar is displayed within
   * the tbody area, so we disable horizontal scrolling for that ...
   */
  overflow-x: hidden !important;
}

table>tbody.scroll tr {
  height: auto;
}

/*
 * ... and make enough room so that the text won't flow under the
 * vertical scrollbar.  However, that is still a dirty hack as we
 * assume that the vertical scrollbar is not wider than 20px.  
 */
table>tbody.scroll td:last-child {
  padding-right: 20px;
}

tr {
  vertical-align: top;
  vertical-align: baseline;
}

th {
  padding-left: 3px;
  /* border-right:2px solid black; */
  text-align: left;
  background-color: #c66;
  color: #000;
  font-size: 133%;
  font-weight: normal;
}

thead th:first-child {
  padding-left: 12px;
  border-radius: 12px 0 0 0;
  -moz-border-radius: 12px 0 0 0;
  -webkit-border-radius: 12px 0 0 0;
}

table.left th,thead.left th,tbody.left th,th.left {
  background-color: inherit;
  color: inherit;
  text-transform: uppercase;
  text-align: right;
}

th,td {
  padding-right: 3px;
}

td {
  padding-left: 4px;
  background-color: inherit;
  color: inherit;
  font-size: 133%;
}

/* hover table */
table.hover thead th:hover,thead.hover th:hover,tbody.hover th:hover,table.hover tbody tr:hover th,tbody.hover tr:hover th
  {
  background-color: #f99;
  color: #000;
}

table.hover tbody tr:hover,tbody.hover tr:hover {
  color: #fc3;
}

table.hover tbody tr:hover a,tbody.hover tr:hover a {
  background-color: inherit;
}

/* Lowlight all rows except that with the active/focused element */
table.hover tbody:active,table.hover tbody:focus,tbody.hover:active,tbody.hover:focus
  {
  background-color: #000;
  color: #99c;
}

table.hover tbody tr:active,tbody.hover tr:active,table.hover tbody tr:focus,tbody.hover tr:focus
  {
  background-color: #000;
  color: #fff;
}

/* This to invert display on hover does not seem proper LCARS design */
/*
table.hover tbody tr:hover a:link,
tbody.hover tr:hover a:link {
  color:#fff;
}

table.hover tbody tr:hover a:visited,
tbody.hover tr:hover a:visited {
  background-color:inherit;
  color:#963;
}

table.hover tbody tr:hover a:link:focus,
table.hover tbody tr:hover a:visited:focus,
table.hover tbody tr:hover a:link:hover,
table.hover tbody tr:hover a:visited:hover,
table.hover tbody tr:hover a:link:active,
tbody.hover tr:hover a:link:focus,
tbody.hover tr:hover a:visited:focus,
tbody.hover tr:hover a:link:hover,
tbody.hover tr:hover a:visited:hover,
tbody.hover tr:hover a:link:active {
  background-color:inherit;
  color:#960;
}

table.hover tbody tr:hover a:visited:active,
tbody.hover tr:hover a:visited:active {
  background-color:inherit;
  color:#c63;
}
*/