protospace-lcars/frontend/public/css/main.css

@font-face {
    font-family: 'LCARS';
    src: url('./fonts/lcarsgtj3-webfont.eot');
	src: url('./fonts/lcars.ttf') format('embedded-opentype'), url('/fonts/lcars.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LCARS Lower';
    src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot');
	src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LCARS Block';
    src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot');
	src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root{
  --space1: 5px;
  --textpadding1: 5px 10px;
  --regText: 'Open Sans', sans-serif;
  --fancyText: 'LCARS', sans-serif;
  --hoverBack: #cdf;
  --hoverText: #821;
}

html, body{
  margin:0;
  padding:0;
  background:#111;
  color:#fff;
  font-family: var(--fancyText);
  font-weight: 500;
  font-size:1.4em;
  letter-spacing: 0.05em;
}

.mainContainer{
background:#111;
display: flex;
flex-direction: row;
height:100vh;
}

/* Left Side */

.leftColumn{
  flex:4;
  background:#333;
  display:flex;
  flex-direction: row;
}

/* Left Information Panel */

.infoLeft{
  display:flex;
  flex-direction: column;
  flex:6;
  background:#222;
}

.leftTop{
  flex:3;
  background:#111;
  text-align:center;
}

.logo{
  width:60%;
  padding-top:17%;
}

.leftInfo{
  display: flex;
  flex-direction: column;
  flex:7;
  background:#111;
}

.leftItem{
  flex:1;
  margin:var(--space1);
  text-align: left;
  border-radius: 10vh;
  padding:2vh;
  background: #9cf;
}

/* Left LCARS Panel (menu?) */

.lcarsLeft{
  background:#111;
  flex:4;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.lcarsLeft div{
  margin:var(--space1);
  padding:var(--textpadding1);
}


.lcarsLeftItem{
  flex:1;
  background:#99ccff;
}
.lcarsLeftItemBig{
  flex:4;
  background:#cc6699;
}
.lcarsLeftItemMed{
  flex:2;
  background:#ff9933;
}

/* Right Side */

.rightContainer{
  flex:10;
  background: #111;
  display:flex;
  flex-direction: column;
}

.rightTop{
  flex: 3;
  background:#222;
  display: flex;
  flex-direction: row;
}

.lcarsMiddleTop, .lcarsMiddleBottom{
  background:#111;
  flex:2;
  display: flex;
  flex-direction: column;
}

.lcarsMiddleItem{
  background:#069;
  margin:var(--space1);
  padding:var(--textpadding1);
  flex:2;
}

.lcarsMiddleElbow{
  margin:var(--space1);
  flex:2;

}

.dataTopRight{
  flex:7;
  background:#171717;
  display: flex;
  flex-direction: column;
}

.datatopRightUpper{
  flex:7;
}

.lcarsHorizontalTop{
  flex:1;
  background:#111;
}
/* LCARS HORIZONTAL LINES */

.lcarsHorizontalBottom{
  flex:1;
  background:#111;
}

.dataRightLower{
  flex:9;
}

.rightBottom{
  flex: 5;
  display: flex;
  flex-direction: row;
  background:#333;
}


.dataBottomRight{
  flex:7;
  background:#171717;
  display: flex;
  flex-direction: column;
}

/* LCARS Middle Elbow */

.lcarsElbow{
  width:100%;
}

/* LCARS General Hover */

.lcarsLeft div:hover, .leftItem:hover,.lcarsMiddleTop div:hover, .lcarsMiddleBottom div:hover{
  background:var(--hoverBack);
  color:var(--hoverText);
}