CSS for PointedEars' LCARS, version 2.1, stardate 201012.30

<?php \header('Content-Type: text/css; charset=UTF-8'); ?>
/*
 * <title>CSS for PointedEars' LCARS, version 2.1, stardate 201012.30</title>
 */

/* basic fonts */

@font-face {
  font-family: "LCARS";
  font-style: normal;
  font-weight: normal;
  src: local("LCARS"), url(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(HAETTEN0.eot), url(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(ZurichXCn.pfr);
}

/* basic display */

* {
  font-family: "LCARS",
    Haettenschweiler, "Downloadable Haettenschweiler",
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
}
        
body {
  position: absolute;
  left: 204px;
  top: 216px;
  right: 0px;
  bottom: 0;
  
  /* 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: #99f;
  font-size: 131%; /* 134% */
}

h1, h2 {
  margin-top: 0;
  font-size: 120%;
  font-weight: normal;
}

#LCARS {
  position: relative;
}

.button {
  display: block;
  width: 100px;
  min-height: 40px;
  background-color: #c9c;
  color: #000;
  text-decoration: none;
}
     
.elbo {
  position: relative;
  width: 100px;
  height: 62px;
  text-align: right;
}

.elbo .terminator {
  position: absolute;
  width: 100px;
  height: 18px;
}

.elbo .terminator.left {
  left: 0;
  border-right: 4px solid #000;
}

.elbo .terminator.right {
  right: 0;
  border-left: 4px solid #000;
}

.elbo span {
  position: relative;
  right: 4px;
}

.elbo-button {
  float: left;
  clear: left;
  position: relative;
  height: 40px;
  margin-right: 4px;
  margin-bottom: 0;
  border-bottom: 4px solid black;
}

#upper {
  position: fixed;
  z-index: 3;
  left: 4px;
  top: 0;
  right: 4px;
  padding-top: 4px;
  background-color: #000;
  color: #fff;
}

#upper .elbo-button {
  height: 84px;
}

#upper .elbo-button span {
  position: absolute;
  right: 4px;
  bottom: 4px;
}

#caption-container {
  /*position: relative; */
  position: absolute;
  /*float: right; */
  
  /* Corresponds with negative margin for elbo-button */
  /* margin-left: 104px; */
  
  margin-top: 0;
  left: 204px;
  right: 0;
  height: 100px;
  text-align: right;
  font-weight: normal;
  font-size: 40px;
  text-transform: uppercase;
  z-index: 3;
  overflow: auto;
}

#caption {
  position: relative;
  margin-top: 0;
  text-align: right;
}

#upper-elbo {
  position: relative;
  clear: left;
  margin-bottom: 4px;
}

#upper-elbo .elbo {
  height: 62px;
  background-color: #9cf;
  color: #000;
}

.red-alert .elbo-button,
.red-alert #upper-elbo .elbo,
.red-alert #lower-elbo .elbo,
.red-alert #lower .elbo-button
{
  background-color: #f00;
}

.database #upper-elbo .elbo,
.database #lower-elbo .elbo
{
  background-color: #f1df6f;
  color: #000;
}

#upper-elbo .elbo.left {
  border-radius: 0 0 0 32px;
  -moz-border-radius: 0 0 0 32px;
  -webkit-border-radius: 0 0 0 32px;
}

#upper-elbo .elbo.left span {
  top: 4px;
}

#upper-elbo .elbo.right {
  position: absolute;
  left: 100px;
  top: 0;
  width: auto;
  right: 0;
}

#upper-elbo .elbo.right .black {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  background-color: #000;
  border-radius: 0 0 0 16px;
  -moz-border-radius: 0 0 0 16px;
  -webkit-border-radius: 0 0 0 16px;
}

#upper-elbo .elbo.right .terminator {
  top: 44px;
}

#lower {
  position: fixed;
  left: 4px;
  top: 158px;
  right: 4px;
  bottom: 4px;
}

#lower-elbo {
  position: relative;
  z-index: 3;
  margin-bottom: 4px;
}

#lower-elbo .elbo {
  background-color: #c66;
  color: #000;
}

#lower-elbo .elbo.left {
  border-radius: 32px 0 0 0;
  -moz-border-radius: 32px 0 0 0;
  -webkit-border-radius: 32px 0 0 0;
}

#lower-elbo .elbo.left span {
  position: absolute;
  bottom: 4px;
}

#lower-elbo h2.elbo.left  {
  margin-bottom: 0;
}

#lower-elbo h2.elbo.left span {
  bottom: 0;
}

#lower-elbo .elbo.right {
  position: absolute;
  left: 100px;
  top: 0;
  width: auto;
  right: 0;
}

#lower-elbo .elbo.right .black {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 100%;
  height: 45px;
  background-color: #000;
  border-radius: 16px 0 0 0;
  -moz-border-radius: 16px 0 0 0;
  -webkit-border-radius: 16px 0 0 0;
}

#lower-elbo .elbo.right .terminator {
  top: 0;
  background-color: #f90;
}

#lower-elbo .elbo.right .terminator.left {
  background-color: transparent;
}

#menu {
  /*
  float: left;
  margin-right: -104px;
  */
  position: absolute;
  top: 66px;
  width: 119px;
  bottom: 0;
  overflow-y: auto;
}

ul.elbo {
  clear: left;
  margin: 0;
  height: auto;
  padding: 0;
  list-style-type: none;
}

ul.elbo li {
  clear: left;
  margin: 0;
}

ul.elbo li.half {
  display: block;
  float: left;
  text-align: center;
}

ul.elbo li.half .elbo-button {
  margin-right: 0;
  width: 48px;
}

ul.elbo li.half .elbo-button span {
  right: auto;
}

ul.elbo li.half.left {
  border-right: 2px solid black;
}

ul.elbo li.half.right {
  clear: right;
  border-left: 2px solid black;
}

#lower .elbo-button {
  height: auto;
  min-height: 40px;
  background-color: #c66;
}

#lower .elbo-button span {
  bottom: 0;
  line-height: 40px;
}

#lower h2.elbo-button {
  /* min-height: 31px; */
}

#lower h2.elbo-button span {
  position: absolute;
  right: 4px;
  bottom: 0;
  line-height: normal;
}

#lower .elbo-button.button2 {
  min-height: 1em;
  background-color: #c9c;
}

#lower .elbo-button.button2:focus,
#lower .elbo-button.button2:hover
{
  background-color: #f90;
}

#lower .elbo-button.button2:active {
  background-color: #fff;
}

#lower .elbo-button.button2 span {
  line-height: 1;
}

#lower .elbo-button.button2 span abbr {
  border-bottom: none;
}

#glue {
  position: absolute;
  left: 0px;
  top: 66px;
  bottom: 0;
  border-bottom: none;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
  text-align: justify;
}

p:last-child {
  margin-bottom: 0;
}

/*
p:focus,
p:active
{
  color: #fff;
}
*/

#content {
  position: relative;
}

#heading1 {
  position: fixed;
  right: 8px;
  top: 179px;
  height: 40px;
  left: 208px;
  z-index: 3;
}

#heading1 h1 {
  position: absolute;
  margin-bottom: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  color: white;
}

#content a {
  text-decoration: none;
}

#content a:link:hover,
#content a:link:focus
{
  background-color:#000;
  color: #f90;
}

#content a:link:active {
  background-color:#000;
  color: #fff;
}

#content a:link {
  background-color:#000;
  color:#fc9;
}

#content a:visited:hover,
#content a:visited:focus
{
  background-color:#000;
  color:#f90;
}

#content a:visited:active {
  background-color:black;
  color:#fff;
}


#content a:visited {
  background-color:black;
  color:#c9c;
}