body{
  margin: 0;
}

/*Flexboxes*/
/* [MODIFIED] CAPTAIN ANONYMOUS. "3-column CSS Flexbox layout." CodePen. Retrieved from https://codepen.io/anon/pen/RjpJBV*/

.wrapper{
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.header, .footer{
  height: 50px;
  background: #666;
  color: #fff;
}
.content{
  display: flex;
  flex: 1;
  background: #000;
  color: #000;
}
.columns{
  display: flex;
  flex:1;
}
.main{
  flex: 1;
  order: 2;
  background: #FFF;
  padding-left: 65px;
  padding-right: 65px;
}
.sidebar-first{
  width: 20%;
  order: 1;
  background: #F5F7F6;
}
.sidebar-second{
  width: 20%;
  order: 3;
  background: #000;
}

/*Navigation Bar*/
/* [MODIFIED] "CSS Navigation Bar." w3schools.com. Retrieved from https://www.w3schools.com/css/css_navbar.asp.*/

.sidenav {
  height: 100%;
  width: 20%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #F5F7F6;
  overflow-x: hidden;
  padding-top: 0px;
}
.sidenav::-webkit-scrollbar {
  width: .4em;
}
.sidenav::-webkit-scrollbar,
.sidenav::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.sidenav::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px 0px 0px 0px;
  width: 100%;
  background-color: #F5F7F6;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12pt;
  color: #818181;
}
.sub-list {
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 12px;
  width: 100%;
  background-color: #F5F7F6;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 10pt;
  color: #818181;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

li a:hover {
  background-color: #555;
  color: white;
}

.navigation-header-top {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 16pt;
  font-weight: 500;
  letter-spacing: 0.5pt;
  transform: scaleY(1.1);
  color: #FFF;
  padding: 6px 6px 6px 15px;
  margin-top: 0px;
  display: block;
  background-color: #000;
}

.navigation-header {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 16pt;
  font-weight: 500;
  letter-spacing: 0.5pt;
  transform: scaleY(1.1);
  color: #FFF;
  padding: 6px 6px 6px 15px;
  display: block;
  background-color: #000;
}

/*Info Bar*/
/* [MODIFIED] keegan lambert. "Fade in and out scroll bar on div hover." Code Pen. Retrieved from https://codepen.io/kqlambert/pen/tbJCD*/

.info-bar {
  height: 100%;
  width: 20%;
  position: fixed;
  z-index: 2;
  background-color: #F5F7F6;
  overflow-x: hidden;
  padding-top: 0px;
}
.info-bar::-webkit-scrollbar {
  width: .4em;
}
.info-bar::-webkit-scrollbar,
.info-bar::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}
.info-bar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
}

.info-bar-header {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 16pt;
  font-weight: 500;
  letter-spacing: 0.5pt;
  transform: scaleY(1.1);
  color: #FFF;
  padding: 6px 6px 6px 15px;
  margin-top: 0px;
  margin-bottom: 25px;
  background-color: #000;
  position: fixed;
  width: 20%;
}

.info-bar-heading {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 14pt;
  color: #000;
  text-align: center;
  padding: 12px 15px 0px 15px;
}

.info-bar-subheading {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12pt;
  color: #000;
  text-align: center;
  padding: 12px 15px 0px 15px;
}

.info-bar-subtext {
  font-family: "Palatino", "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 10pt;
  font-style: italic;
  color: #000;
  text-align:  center;
  padding: 0px 15px 0px 15px;
}

.info-bar-annotations {
  font-family: "Palatino", "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 12pt;
  font-style: italic;
  color: #000;
  text-align: center;
  padding: 0px 15px 0px 15px;
}

.info-bar-content {
  font-family: "Palatino", "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 12pt;
  color: #000;
  text-align: justify;
  padding: 0px 15px 15px 15px;
}

.reference {
  font-family: "Palatino", "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 10pt;
  color: #000;
  padding: 0px 15px 15px 15px;
}

img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  margin: auto;
  display: inline-block;
}

.figure {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  text-align: center;
}

.caption {
  font-size: 10pt;
  font-family: "Palatino", "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  text-align: center;
  font-style: italic;
}

.non-italic {
  font-style: normal;
}

/*Content*/
.chapterbreak {
  display: block;
  width: 33%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
}

h1 {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 28pt;
  color: black;
  letter-spacing: 2pt;
  transform: scaleY(1.55);
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
}

h2 {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 23pt;
  color: black;
  transform: scaleY(1.55);
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
}

h3 {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 16pt;
  color: black;
  letter-spacing: 3pt;
  transform: scaleY(1.2);
  text-align: center;
  margin-bottom: -8pt;
  margin-left: 15px;
  margin-right: 15px;
}

h4 {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 15pt;
  font-weight: 800;
  color: black;
  letter-spacing: 0.5pt;
  transform: scaleY(1.1);
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
}

h5 {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-weight: bolder;
  font-size: 13pt;
  color: black;
  letter-spacing: -0.5pt;
  transform: scaleY(1.05);
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
}

h6 {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 10pt;
  font-weight: 600;
  color: black;
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
}

.body {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 12pt;
  font-weight: 500;
  color: black;
  text-align: justify;
  margin-left: 15px;
  margin-right: 15px;
}

.break {
  display: block;
  width: 33%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-width: 1px;
}

.chapterdivider {
  display: block;
  width: 75px;
  margin: auto;
  }

.dropcap {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 32pt;
  color: black;
}

.small {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 12pt;
  font-variant: small-caps;
  color: black;
}

.edition {
  font-style: italic;
}

.chapterheading {
  letter-spacing: normal;
  transform: scaleY(1.5);
  margin-bottom: 24pt;
}

.chapter {
  font-family: "Century Schoolbook", "Bookman Old Style", serif;
  font-size: 9pt;
  font-weight: 600;
  color: black;
  text-align: center;
}