body {
    background-color: #555555;
    color: white;
    font-family: 'Dosis'; text-align: justify;
}
/* ======================================================================= */
/* Fonts ----------------------------------------------------------------- */
/* ======================================================================= */
@font-face {
    font-family: 'StarTitleItalic';
    src: url('../fonts/DINTrek.ttf');
}
@font-face {
    font-family: 'Bajoran';
    src: url('../fonts/Bajoran.TTF');
}
@font-face {
    font-family: 'FinalOld';
    src: url('../fonts/FinalOld.TTF');
}
@font-face {
    font-family: 'Strategycide';
    src: url('../fonts/FTY_Strategycide.ttf');
}
h1 {
    font-family: FinalOld;
    font-size: 36pt;
    font-weight: normal;
    margin-bottom: 3px;
}

a { color: cyan; transition-duration: 0.25s; }
a:hover { color: red; }

.grad {
  text-transform: uppercase;
  font-size: 72px;
  font-family: 'Bajoran';
  text-align: center;
  background: linear-gradient(#eee, #4F4F4F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ======================================================================= */
/* Start Inferface Colors ------------------------------------------------ */
/* ======================================================================= */
#TopCorner {
    -webkit-border-top-left-radius: 50px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 50px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 60px;                   width: 240px;               background-color: #FFD734;
}
#RedBox {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    height: 60px;                   min-width: 100px;           width: 100%;
    background-color: #A30000;
}
#orangeBox {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    height: 60px;                   min-width: 100px;           width: 100%;
    background-color: #ff9966;
}
#greenBox {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    height: 60px;                   min-width: 100px;           width: 100%;
    background-color: #009933;
}
#yellowBox {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    height: 60px;                   min-width: 100px;           width: 100%;
    background-color: #FFD734;
}
/* ======================================================================= */
/* Layout ---------------------------------------------------------------- */
/* ======================================================================= */
#mainImage {  /* Used to position the main logo */
    position: absolute; top: 10px; left: 20px; max-height: 200px; z-index: 999;
}
#container {  /* The Main Container */
    width: 95%;                     margin-top: 10px;           margin: 0 auto;
    border: 1px solid #fff;         min-height: 500px;          background-color: #000;
    overflow: auto;                 position: relative;
}
#topbar {  /* The top of the interface */
    width: 100%;  min-height: 66px;
}
/* ======================================================================= */
/* Sidebar + Menu -------------------------------------------------------- */
/* ======================================================================= */
#sidebar { position: absolute; float: left; height: calc(100% - 70px); }
#spacerBox {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    height: 110px;                  width: 240px;               background-color: #FFD734;
    font-family: 'PT Sans Narrow', sans-serif;                  color: #000;
    font-size: 18pt;                float: left;
}
#spacerGrow {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    margin-left: 3px;               margin-top: 3px;
    background-color: #FFD734;
    width: 237px;
}
#mainContent {
    margin-left: 260px;             margin-right: 10px;         margin-top: 5px;
    min-height: 600px;              margin-bottom: 10px;
}
#mainMenu {
    -webkit-border-radius: 10px;    -moz-border-radius: 10px;   border-radius: 10px;
    min-height: 240px;              width: 227px;               max-width: 227px;
    background-color: #FFD734;      font-family: 'PT Sans Narrow', sans-serif;
    color: #000;                    font-size: 12pt;            margin-top: 2px;            
    padding: 5px;
}
#mainMenu li { list-style-type:none; }
#mainMenu a { text-decoration: none; }
#mainMenu strong {
    font-weight: bold;
    color: blue;
    font-size: 14pt;
    text-transform: 
}
#mainMenu li.orange_button {
    border-radius: 5px;             background-color: #ffa434;  color: white;
    padding: 3px;                   border: 1px solid #c77e25;  transition-duration: 0.35s;
    margin-bottom: 1px;
}
#mainMenu li.orange_button:hover {
    background-color: #009933;      border: 1px solid black;
}
#mainMenu li.salmon_button {
    border-radius: 5px;             background-color: #ff8b51;  color: white;
    padding: 3px;                   border: 1px solid #c77e25;  transition-duration: 0.35s;
    margin-bottom: 1px;
}
#mainMenu li.salmon_button:hover {
    background-color: #66ccff;      border: 1px solid black;    color: black;
}
#mainMenu li.green_button {
    border-radius: 5px;             background-color: #009933;  color: white;
    padding: 3px;                   border: 1px solid #c77e25;  transition-duration: 0.35s;
    margin-bottom: 1px;
}
#mainMenu li.green_button:hover {
    background-color: #A30000;      border: 1px solid black;    color: white;
}
#mainMenu li.red_button {
    border-radius: 5px;             background-color: #A30000;  color: white;
    padding: 3px;                   border: 1px solid #c77e25;  transition-duration: 0.35s;
    margin-bottom: 1px;
}
#mainMenu li.red_button:hover {
    background-color: #a3a300;      border: 1px solid black;    color: white;
}
/* ======================================================================= */
/* Table Design ---------------------------------------------------------- */
/* ======================================================================= */
#timelines {
    border: 1px solid gray;
    border-collapse: collapse;
}
#timelines tr:hover {
    background-color: #efefef; color: black;
}
.popOut { max-height: 10px; float: right; margin: 3px; }

.big { font-size: 16pt; color: cyan; text-transform: uppercase; }