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(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(fonts/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",
    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; */
  position: fixed;
  left: 4px;
  top: 0;
  right: 4px;
}

.button {
  width: 100px;
  min-height: 40px;
  background-color: #c9c;
  color: #000;
  text-decoration: none;
  overflow: hidden;
}

#upper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 180px;
  
  /* Prevents body text above */
  /* padding-top: 4px; */
  background-color: #c00;  
  color: #fff;  
}

.elbo {
  position: relative;
  width: 100px;
  height: 62px;
  text-align: right;
}

.elbo-button {
  position: relative;
  margin-top: 4px;
  height: 40px;
  overflow: hidden;
}

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

@-webkit-keyframes swish-down-up {
  0% {
    height: 0;
    top: 84px;
  }

  100% {
  }
}

#upper .elbo-button {
  position: absolute;
  min-height: 0;
  height: 84px; 
  
  /* -webkit-animation-name: swish-down-up; */
  /* -webkit-animation-iteration-count: 1; */
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 1s;
}

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

#upper-elbo {
  position: absolute;
  top: 92px;
}

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

@-webkit-keyframes swish-right-left {
  0% {
    width: 0px;
    /* height: 0px; */
    left: 100px;
    /* top: 62px; */
  }

  100% {
  }
}

#upper-elbo .elbo.left {
  -moz-border-radius: 0 0 0 32px;
  -webkit-border-radius: 0 0 0 32px;
  border-radius: 0 0 0 32px;
  /* -webkit-animation-name: swish-right-left; */
  -webkit-animation-duration: 1s;
}

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

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

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

#upper-elbo .elbo.right .terminator {
  position: absolute;
  left: 82px;
  top: 44px;
  width: 18px;
  height: 18px;
  background-color: #f90;  
}

#lower {
  position: absolute;
  top: 158px;
}

#lower-elbo {
  position: absolute;
}

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

#lower-elbo .elbo.left {
  -moz-border-radius: 32px 0 0 0;
  -webkit-border-radius: 32px 0 0 0;
  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 .elbo.right {
  position: absolute;
  left: 100px;
  top: 0;
  width: 100px;
}

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

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

p:first-child {
  margin-top: 0;
}

#content {
  /* position: relative; */
}

#content a {
  text-decoration: none;
}

#content #heading1 {
  position: fixed;
  left: 204px;
  top: 180px;
  right: 4px;
  height: 42px;
  background-color: rgba(255, 0, 0, 0.5);
  color: white;
  text-align: right;
}

#content #heading1 h1 {
  position: absolute;
  bottom: 6px;
  right: 0;
  margin-bottom: 0;
  padding-right: 4px;
}

#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;
}