/* Star Trek New Horizons LCARS stylesheet */

  /* LCARS Colors
  --LOWER DECKS THEME---
  Base blue: #5588ee
  Aqua: #88ffff
  Darkest blue: #344470
  Darker blue: #455580
  Dark blue: #7799dd
  Light blue: #66ccff
  Blue-grey: #99ccff
  Red: #ff3500

  --NEMESIS THEME--
  Evening blue: #2255ff
  Midnight blue: #1111ee
  Galaxy blue: #444a77
  Ghost blue: #88bbff
  Cool blue: #5588ff
  Moonbeam white: #ccdeff
  Moonshine white: #ddeeff
  Text blue: #2266ff

  Wheat: #ccaa88
  Honey: #ffcc99
  Pumpkin: #ff7744
  Tangerine: #ff8833
  Roseblush: #cc6666
  Cardinal red: #cc2233
  Martian green: #99dd66
  
  --CAMPAIGN THEME--
  Text: #9cdcfe
  */

  ul.square {
    list-style-type: square;
  }

  li.specs { 
    white-space: nowrap; 
    font-size: 14pt; 
    font-family: Arial, Helvetica, sans-serif; 
    font-stretch: condensed;
  }

  p.specs { 
    font-size: 14pt; 
    font-family: Arial, Helvetica, sans-serif; 
    font-stretch: condensed;
  }

  li.decks { 
    font-size: 14pt; 
    font-family: Arial, Helvetica, sans-serif; 
    font-stretch: condensed;
  }

  li.lcars { 
    font-size: 14pt; 
    font-family: Arial, Helvetica, sans-serif; 
    font-stretch: condensed;
  }

  a.lcars-a {
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;
    color: #0000FF;
    text-decoration: none;
  }

  a.lcars-a:link {
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;
    color: #00FFFF;
    text-decoration: none;
  }

  a.lcars-a:visited {
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;
    color: #ffcc99;
    text-decoration: none;
  }

  a.lcars-a:hover {
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;
    color: #FF0000;
    text-decoration: none;
  }

  img.starfleet { width: 100%; height: auto; }

  h1.lcars-h1 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed; 
    font-weight: bold;
    font-size: 30pt; 
    color: #ffcc99;
  }

  h2.lcars-h2 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed; 
    font-weight: bold;
    font-size: 24pt; 
    color: #ffcc99;
  }

  p.LCARS-p { font-size: 14pt; font-family: Arial, Helvetica, sans-serif; font-stretch: condensed; }

  /* Base LCARS layout */
  .consolecanvas {
    padding: 5px;
  }

  /* Top bar */
  .lcars-top {
    border-top: 50px solid #5588ee; 
    border-top-left-radius: 50px; 
    border-top-right-radius: 25px; 
    border-bottom-right-radius: 25px; 
    width: 100%;
  }

  /* Top bar title text */
  .lcars-title {
    position: absolute; 
    top: 13px; 
    right: 50px; 
    background-color: black; 
    height: 50px; 
    padding-left: 10px; 
    padding-right: 10px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-stretch: condensed; 
    font-size: 36pt; 
    color: #ffcc99;
  }

  /* Main content frame with sidebar */
  .lcars-content {
    border-left: 100px solid #5588ee; 
    background-color: #5588ee;
  }

  /* Content display */
  .lcars-inner {
    border-top: 25px solid black; 
    border-top-left-radius: 25px; 
    border-bottom: 25px solid black; 
    border-bottom-left-radius: 25px; 
    min-height: 500px; 
    padding: 5px 25px 5px 20px;
    background-color: black; 

    color: #9cdcfe;
  }

  .lcars-bottom {
    border-bottom: 20px solid #5588ee; 
    border-bottom-left-radius: 20px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    width: 100%;
    margin-bottom: 40px;
  }

  .lcars-divider {
    border-bottom: 10px solid #66ccff; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    width: 100%;
    margin-top: 20px;
  }

  /* Navigation menu */
  .lcars-nav {
    width: 100px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 100; /* Stay at the top */
    left: 13;
    background-color: #5588ee;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 10px;
  }

  /* The navigation buttons */
  .lcars-nav a {
    border-top: 3px solid black;
    padding: 15px 10px 15px 0px;
    
    text-align: right;
    text-decoration: none;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;
    font-weight: bold;
    color: black;
    display: block;
  }

  a.lcars-nav-A {
    background-color: #66ccff;
  }

  a:hover.lcars-nav-A {
    background-color: #88ffff;
  }

  a.lcars-nav-B {
    background-color: #cc6666;
  }

  a:hover.lcars-nav-B {
    background-color: #ff8833;
  }

  a.lcars-nav-C {
    background-color: plum;
  }

  a:hover.lcars-nav-C {
    background-color: mediumorchid;
  }

  a.lcars-nav-D {
    background-color: #66cdaa;
  }

  a:hover.lcars-nav-D {
    background-color: #99dd66;
  }

  /* Centered LCARS navigation buttons */
  .btn-nav { text-align: center; }

  a.btn-nav-left {
    border: 1px solid black;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 15px 15px 15px 0px;
    margin-left: 3px;
    display: inline-block;
    
    width: 150px;

    text-align: right;
    text-decoration: none;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-stretch: condensed;
    color: black;
    
  }

  a.btn-nav-right {
    border: 1px solid black;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 15px 0px 15px 15px;
    margin-left: 3px;
    display: inline-block;
    
    width: 150px;

    text-align: left;
    text-decoration: none;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-stretch: condensed;
    color: black;
    
  }

  a.lcars-mission {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 360px;
    background-color: #66ccff;
    border-left: 40px solid #66ccff;
    border-right: 40px solid #66ccff;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black;
    display: block;
  }

  a:hover.lcars-mission {
    background-color: #99ccff;
    border-color: #99ccff;
  }

  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .lcars-top {
      border-top: 30px solid #5588ee; 
      border-top-left-radius: 30px; 
      border-top-right-radius: 15px; 
      border-bottom-right-radius: 15px; 
      width: 100%;
    }

    .lcars-title {
      position: absolute; 
      top: 13px; 
      right: 50px; 
      background-color: black; 
      height: 30px; 
      padding-left: 10px; 
      padding-right: 10px; 
      font-family: Arial, Helvetica, sans-serif; 
      font-stretch: condensed; 
      font-size: 20pt; 
      color: #ffcc99;
    }

    .lcars-content {
      border-left: 25px solid #5588ee;
    }

    .lcars-bottom { margin-bottom: 100px; }

    .lcars-nav {
      bottom: 50px;
      width: 100%;
      background-color: black;
      /* override the old position */
      z-index: 1;
      top: auto; 
      left: 0;
    }

    .lcars-nav a {
      border: 1px solid black;
      border-radius: 10px;
      padding: 15px 0px 15px 5px;
      margin-left: 3px;
      display: block;
      float: left;
      width: 90px;

      text-align: center;
      text-decoration: none;
      font-size: 14px;
      color: black;
      
    }

    a.lcars-mission {
      width: 250px;
      font-size: 12pt; 
    }

    h1.lcars-h1 {
      font-size: 24pt;
    }

    h2.lcars-h2 {
      font-size: 16pt;
    }
  

  }