/*COLORS:
Dark purple 4C0F14
Eggplant 7E2B45
Lightest text FDC587
header text FF9A2F
Link  FFBC4C
header orange
*/
@font-face {
  font-family: cabinsketch;
  src: url(CabinSketch.ttf);
}

.jslink {
  color:#FFBC4C;
  font-size:24px;
  cursor:pointer;
  font-family:cabinsketch;
}

body {
  background-color: #4C0F14;
  color: #FDC587;
  font-family: Verdana;
  font-size:14px;
}

#mastercontainer {
  background-color: #4C0F14;
  border-style: solid;
  border-color: #7E2B45;
  border-width:15px; 
  width:760px;
  margin:auto;
  padding:5px;
}
/*800 wide -15 on each side for border - 5 on each side for padding means 760px remaining for inside
I will divide that into 5px padding, 5px border, 5px pad, 165px navbar, 5px border, 5px padding, 5px border, then 570px main, 5px border, 5px padding*/

header, footer, #navbar, #mainouter {
  border-style:solid;
  border-color: #7E2B45;
  border-width:5px;
}

header {
  margin-bottom:5px;
  text-align:center;
  padding:10px;
}

#navandmain {
 height:510px;
}

#navbar {
  width:145px;
  float:left;
  height:480px;
  text-align:right;
  padding:10px
}

#mainouter {
  width:570px;
  float:right;
  height:500px;
  overflow:hidden;
}

#maininner {
  width:567px;
  height:497px;
  padding:10px;
  overflow:scroll;
}

footer {
  text-align:center;
  margin-top:5px;
  padding:10px;
  font-size:12px;
}

h1, h2, h3 {
  font-family:cabinsketch;
  margin:0px;
}

h1 {
  font-size:54px;
}

h2 {
  font-size:30px;
}

h3 {
  font-size:18px;
}

table, th, td {
  border: 1px solid #7E2B45;
  border-collapse: collapse;
}

th, td{
  padding:5px;
}