/* ------------- Grid definitions ------------- */

.container {
   display: grid;
   width: 95%;
   height: 95%;
   grid-template-columns:225px 1fr 225px;
   grid-template-rows: 95px 1fr 1fr 50px;
   grid-gap: 1rem;
   position: absolute;
   top: 2.5%;
   bottom: 2.5%;
   left: 2.5%;
   right: 2.5%;
   overflow: hidden;
   z-index:-1;
}

.header {
   grid-row: 1 / 2;
   grid-column: 1 / 4;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.sidebar-left {
   grid-row: 2 / 4;
   grid-column: 1 / 2
}

.content {
   grid-row: 2 / 4;
   grid-column: 2 / 3;
}

.sidebar-right {
   grid-row: 2 / 4;
   grid-column: 3 / 4;
}

.footer {
   grid-row: 4 / 5;
   grid-column: 1 / 4;
}

/* ------------- Element customizations ------------- */

body {
   background: #000000;
   display: flex;
   justify-content: center;
   padding: 20px;
   font-family: Courier, monospace;
}

h1, h2, h3, h4 {
   line-height: 0.65em;
}

iframe {
   margin: 0;
   padding: 0;
   border: 0;
   width: 100%;
   height: 100%;
}

ul { 
   width: 14em;
   margin: 15px 0px 15px -40px;
}

ul li {
   list-style: none;
   border-left: solid 2px #ffb000;
   border-top: solid 2pt #ffb000;
   text-align: left;
   margin: 0;
} 

ul li a {
   display: block;
   color: #ffb000;
   text-decoration: none;
   padding: .25em;
   border-bottom: solid 1px #ffb000;
   border-right: solid 2px #ffb000;
}

input[type=text] {
   border: 2px solid #ffb000;
   border-radius: 0px;
   background-color: #000;
   color: white;
   font-weight: bold;
   padding: 5px;
}

/* ------------- Class definitions ------------- */

.header-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   overflow-y: hidden;
}

.header-wrapper h1 {
   width:40%;
   padding-left: 20px;
   padding-right: 10px;
   line-height: 1em;
}

.header-wrapper p {
   width: 65%;
   padding-left: 10px;
   padding-right: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.sidebar-wrapper {
   overflow-y: auto;
   overflow-x: hidden;
   border: 0;
   left: 10px;
   height: 100%;
}

.sidebar-wrapper a:link {
    color: #fff;
}

.sidebar-wrapper a:visited {
    color: #fff;
}

.sidebar-wrapper a:hover { 
   background-color: #993000; 
}

.sidebar-wrapper h1 {
   font-size: 20px;
}

.footer-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   overflow-y: hidden;
}

.footer-wrapper a:link {
   color: #fff;
   text-decoration: none;  
}

.footer-wrapper a:visited {
   color: #fff;
}

.footer-wrapper a:hover { 
   background-color: #000;
   color: #fff;
}

.item {
   color: #ffb000;
   border: 2px solid #ffb000;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 14px;
   font-weight: bold;
   overflow-y: hidden;
   padding-left: 5px;
}

.epi-hilite {
   color: white;
   font-size: 18px;
}

.iframe-sidebar {
	color: white;
}