body {
  background-image: url("img/theot_background.png");
  font-family: "Times New Roman", Times, serif;
}

.navbar-nav .nav-link {
	margin-right: 25px;
	margin-left: 25px;
  font-size:150%;
}

nav.masthead {
  position: absolute;
  top: 0; right: 0; left: 0;

  background-image: url('img/theot_masthead.png'); 
  background-repeat: repeat-x;
  max-width: 100%; 
  margin: auto; 
  height:200px;
}
div.theot-header {
  position:absolute; 
  left:10px; 
  top: 10px;
}

div.front-welcome-text {
  width:75%; 
  margin:auto; 
  position:relative; 
  top:250px;
}

div.front-bands {
  width:75%; 
  margin:auto; 
  position:relative; 
  top:300px;
}

div.front-manuscript-examples {
  margin:auto; 
  width:75%; 
  position:relative; 
  top: 325px;
}

div.secondary-page-body {
  display: flex; 
  position:relative; 
  top: 200px;

}



ul.header-images {
  display: flex;
  flex-wrap: wrap;
  gap:0%;
  padding-left:0px;
}

li.header-img {
  
  flex-grow: 1;
  list-style-type: none
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}


.hdr-img-container {
  position: relative;
}

.hdr-img-center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

.hdr-img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

h1.overlay { color: white; }
h3.overlay { color: white; }
p.overlay { color: white; }

div.theot-body {
  margin-left:30px;
  width: 75%
}

a.decorated {
  text-decoration: none;
  color: rgb(5, 135, 75);
  padding:5px;
}
a.decorated:hover {
  text-decoration: none;
  color: rgb(61, 111, 88);
  background-color: #D4D2CC;
}



a.decorated-header {
  text-decoration: none;
  color: #FFFFFF;
  padding:15px;
}

a.decorated-header:hover {
  text-decoration: none;
  color: #D4D2CC;
  background-color: rgb(61, 111, 88);
}

a.active2 {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #ADA384;
}



p.juicy-quote { 
  font-family: "Apple Chancery", "American Typewriter", "Georgia", serif;
  font-size:150%;
 }

.reports-type1-charts-container {
  display: flex;
  flex-wrap: nowrap;
}

.reports-type1-charts-container > div {
  width: 150;
  margin: 10px;
  text-align: center;
  margin-top:auto;
  margin-bottom: auto;
}

.reports-type2-charts-container {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
}

.reports-type2-charts-container > div {
  width: 150;
  margin: 10px;
  text-align: center;
  margin-top:auto;
  margin-bottom: auto;
}