@font-face {
  font-family: 'Helvetica Ultra Compressed';
  src: url('/res/fonts/HelveticaUltraCompressed.otf') format('otf');
}
@font-face {
  font-family: 'Swiss 911';
  src: url('/res/fonts/Swiss911-UCm-BT.ttf') format('truetype');
}
@font-face {
  font-family: 'LCARS';
  src: url('/res/fonts/LCARSGTJ3.ttf') format('truetype');
}

#lcars {
  background: url("/src/css/images/zurich-blur.jpg") center fixed no-repeat black;
  background-size: cover;
  color: silver;
  font: 24px "LCARS","Helvetica Ultra Compressed","Swiss 911",Helvetica,verdana,arial,sans-serif;
  font-weight: 100;
  margin: 0;
  padding: 0;
}


#lcars header {
  background: url("images/bl.png") bottom left no-repeat rgba(0,0,0,0.75);
  background-size: 190px;
  border: none;
  border-bottom-left-radius: 50px;
  position: static;
  z-index: 1;
  margin: 0;
  padding: 0;
  height: 250px;
  overflow: hidden;
}
#lcars header h1 {
  margin: 0;
  padding: 10px 0 0 0;
  font: inherit;
  font-size: 250%;
  color: #F93;
  text-align: right;
  border-left: 117px solid #9CF;
  width: calc(100% - 130px);
  }

#lcars header section {
  float: left;
  background: #2180FF;
  color: black;
  margin: 10px 0 0 0;
  width: 107px;
  padding: 1ex 10px 0 0;
  text-align: right;
  height: 6ex;
  }
#lcars nav {
  color: black;
  font-size: 100%;
  border-bottom: 18px solid #59F;
  margin-left: 200px;
  display: block;
  background: url("/images/ufp.png") center left no-repeat;
  background-size: contain;
  height: calc(250px - 10px - 68px  - 18px);    /* header height - h1 padding - h1 height - border */
  }
#lcars nav ul {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 20em;
  float: right;
  }
#lcars nav li {
  text-align: right;
  padding: 0;
  margin: .5ex 1ex;
  background: #9CF;
  border-radius: 3ex;
  width: 7em;
  float: right;
  }
#lcars nav li:first-child { background: #F93; }
#lcars nav li:last-child { background: #B41; }
#lcars nav hr {
  border: none;
  height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  clear: right;
  }
#lcars nav li a:link,
#lcars nav li a:visited {
  padding: 1ex 1.5ex 0.5ex 0;
  display: block;
  height: 100%;
  text-decoration: none;
  transition: filter .5s ease;
  outline: none;
  color: inherit;
  background: transparent;
  }
#lcars nav li a:active,
#lcars nav li a:hover,
#lcars nav li a:focus { filter: drop-shadow(0 0 1ex white); transition: filter .75s ease; animation: blinker .15s 4 }
@keyframes blinker {
  50% { opacity: 0; }
  25%,75% { opacity: 0.5; }
}
#lcars nav li a[data-active] { color: white; text-shadow: 0 0 2px black; }
#lcars a[class^='lightcase'] { text-decoration: none!important; }

#lcars main {
  margin: 20px 0 0 0;
  padding: 0;
  min-height: unset;
  background: url("images/tl.png") top left no-repeat rgba(0,0,0,0.85);
  border-top-left-radius: 50px;
  }
#lcars main h2 {
  border-top: 18px solid #59F;
  font: inherit;
  font-size: 36px;
  line-height: 100%;
  margin: 0 0 0 200px;
  padding: 16px 10px 0 0;
  color: #F93;
  text-align: right;
  text-transform: uppercase;
  /* height total: 18 border + 36 font + 16 padding = 70px */
  }
#lcars main h3 { font-weight: 100; letter-spacing: 2px; text-align: center;}
#lcars main h4 { font-weight: 100; border-bottom: 1px solid; letter-spacing: 2px; }
#lcars main h5 { font-weight: 300; letter-spacing: 1px; font-size: inherit; font-style: italic; text-align: center;  }
#lcars main .shade h4 { border: none; text-align: center; }
#lcars main .flex {
  display: flex;
  margin: 0;
  padding: 0;
  border-left: 117px solid lightblue;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  }
#lcars main article.single { margin: 0 0 0 128px; }
#lcars main .flex section {
  padding: 0 10px;
  margin: 0;
  }
#lcars main section.has_border { margin: 0; }
#lcars .w20 { width: calc(20% - 40px); }
#lcars .w33 { width: calc(33% - 40px); }
#lcars .w50 { width: calc(50% - 40px); }
#lcars .w66 { width: calc(66% - 40px); }
#lcars .w100 { width: calc(100% - 40px); }
#lcars .fullheight { min-height: calc(100vh - 250px - 20px - 70px - 80px); overflow-y: scroll; overflow-x: hidden; }
/* SCROLLBARS ON FULLHEIGHT */
/* width */
.fullheight::-webkit-scrollbar { width: 20px; }
/* Track */
.fullheight::-webkit-scrollbar-track { border: none; }
/* Handle */
.fullheight::-webkit-scrollbar-thumb {
  background: #5497FB;
  border-radius: 10px;
}
/* Buttons */
.fullheight::-webkit-scrollbar-button { display: none; }
#lcars .single .fullheight { width: calc(100vw - 20px - 200px); overflow-x: auto; }

#lcars .has_border div {
  display: table;
  position: relative;
  left: -127px;
  border-collapse: collapse;
  width: calc(100% + 127px);
  margin: 0;
  padding: 0;
  }
#lcars .has_border div aside {
  display: table-cell;
  color: black;
  background: lightblue;
  width: 117px;
  vertical-align: bottom;
  text-align: right;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
  }
#lcars .has_border div:first-child aside { border-top-width: 10px; }
#lcars .has_border div:last-child aside { border-bottom-width: 10px; }

#lcars .has_border div aside h4 {
  color: black;
  font: inherit;
  padding-right: 10px;
  display: inline;
  }
#lcars .has_border div p { padding: 0 0 0 20px; margin: 5px 0 1ex 0; }
#lcars .has_border table { margin-left: 1em; border-collapse: collapse; width: 100%; }

#lcars img.adaptive { width: 80%; }

#lcars a:link,
#lcars a:visited { text-decoration: underline; color: inherit; }
#lcars a:active,
#lcars a:hover,
#lcars a:focus { color: #FC6; outline: none; }

#lcars a.button { padding: 1ex 2ex; margin: .5ex 1ex; border-radius: 2ex; text-decoration: none; display: inline-block; color: black; }
#lcars a.c1 { background: #069; }
#lcars a.c2 { background: #2180FF; }
#lcars a.c3 { background: #C80; }
#lcars a.button.actual_item { color: white; }

#lcars .flex .has_border .shade) aside { background: #68C; }
#lcars .flex .has_border .shade:nth-child(2n+1) aside { background: #36C; }
#lcars .flex .has_border .shade:nth-child(3n+1) aside { background: #069; }
#lcars .flex .has_border .alert aside { background: #B41; }
#lcars .flex .has_border .important aside { background: #FC6; }

#lcars hr { width: 100%; height: 10px; border: none; margin: 0; padding: 0; background: rgba(0,0,0,0.85); }

#lcars footer {
  color: black;
  background: url("images/bl.png") bottom left no-repeat rgba(0,0,0,0.85);
  border-bottom-left-radius: 50px;
  padding: 50px 0 0 200px;
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
  font: inherit;
  }
#lcars footer div {
  width: auto;
  background: #9CF;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 1px;
  padding: 0 1em;
  margin: 0 10px 0 0;
  }
#lcars footer #stardate { background: #F93; }
#lcars footer #jstime { background: #36C; }
#lcars footer::after {
  background: #59F;
  width: 100%;
  content: " ";
  }
#lcars footer a:link,
#lcars footer a:visited { }
#lcars footer a:active,
#lcars footer a:hover,
#lcars footer a:focus { color: #840; text-decoration: none; }
#lcars code {
  background: silver;
  color: black;
  font: bold .8em "courier new",courier,monospace;
  padding: 0 1ex;
  position: relative;
  top: -3px;
  }

#lcars img.flr { float: right; margin: 0 0 1ex 1em; }
#lcars img.fll { float: left; margin: 0 1em 1ex 0; }

kbd { font: inherit; position: relative; left: -1ex; background: #DA2; color: black; }