body {font-family: Arial, Helvetica, sans-serif; background: #303030; margin: 0}
/*#header {margin: 0 auto; width: 1000px; background:#80afc7; overflow:auto}
#header hr {margin:1px}*/

/*ol li {padding-right:20px}*/
#container {min-height: 800px; margin: 0px auto; max-width: 1000px; overflow:auto; background-color: #f0eacd; background-image: url("corrugation.png");}
#content {max-width:100%; padding:10px 20px}

/* ---- Login/Logout styles ----*/
#hellogoodbye {margin: 0px auto; margin-top:50px; background: #FFF; border-style: solid; border-width: 5px; border-color: #80afc7; padding:20px; text-align: center}
.login {background: #2b83b0; border-radius: 5px; color: white; font-weight: bold; text-decoration: none; margin:auto; padding: 10px}

/* ---- text styles ---- */
/* p, h1, h2, h3, h4 {padding:0 20px}
td {padding:0 20px 0 0; font-size:120%}
table {margin-left:20px}*/
h1 {font-weight: bold; text-align:center; /*text-decoration: underline; */color:blue; padding:20px 0}
h2 {font: italic}
hr {border-top: 3px solid blue}

/* ---- Navbar styles ----- */
.nav-item {font-size:16px}
#nb {background-color: #80afc7; border-top: 1px solid white; border-bottom: 1px solid white}
.dropdown-menu {background-color: #80afc7; padding:10px}
.dropdown-item {padding: 0 0 0 20px; color:white}
.dropdown-item:hover {background-color: #0d6efd}
.dropdown-divider {border: 1px solid white}
.menu-section-head {font-style: italic; color:blue}

/* --- Component styles ---*/
.figure-img {box-shadow: 10px 10px 5px #888888; margin-top:10px}
.maxwidth100 { max-width: 100%; height:auto}
.video40, .video50 {width: 100%}
@media screen and (min-width: 768px) {
  .width20 { /* max-width: 20%; */width: 20%; height:auto}
  .width20 { /* max-width: 30%; */width: 30%; height:auto}
  .width40 { /* max-width: 40%; */width: 40%; height:auto}
  .width45 { /* max-width: 70%; */width: 45%; height:auto}
  .width50 { /* max-width: 50%; */width: 50%; height:auto}
  .width55 { /* max-width: 70%; */width: 55%; height:auto}
  .width60 { /* max-width: 60%; */width: 60%; height:auto}
  .width70 { /* max-width: 70%; */width: 70%; height:auto}

  .float-start {margin-right:20px}
  .float-end {margin-left:20px}
  .video40 {max-width: 40%}
  .video50 {max-width: 50%}
}

/*
.text-centre {display:block; margin:0 auto; padding:10px 20px}
.photo-centre {display:block; margin:0 auto; padding-top:20px; width:960px}
.photo-right {float:right; padding:10px 20px 10px 0px; display:block}
.photo-left {float:left; padding: 10px 0px 10px 20px; display:block}
.text-right {float:right; padding:10px 20px; display:block}
.text-left {float:left; padding: 10px 20px; display:block}
.caption {font-style:italic; text-align:center; display:block; padding-top:5px}
.photo-right img, .photo-left img, .photo-centre img, .vid  {box-shadow: 10px 10px 5px #888888}*/
/*#container p, .text-centre p, .text-right p, .text-left p {text-align:justify; font-size:120%}*/


/* --- Video & photo sidepanel styles ---*/
#sidepanel {background: #80afc7; overflow:scroll; overflow-x: hidden; padding:0 20px;}
/*#sidepanel p {color:black; text-align:center; font-size: 1em; margin-top:0px}*/
#sidepanel h5 {text-align:center; color:white}
#sidepanel img {width:90%; margin:0px auto; text-align:center; display:block; border: 5px solid #80afc7 }
#imageshow, #sidepanel {max-height:80vh}
.yearlabel {width: 100%; text-align: center; border-bottom: 1px solid white; line-height: 0.1em; margin: 10px 0 20px; } 
.yearlabel span {background:#80afc7; padding:0 10px; color:white }
.yeartab {background-color:#0b5ed7; padding:10px; cursor:pointer; margin-bottom:1px; border-radius:5px}
.yeartab:hover {background-color:blue}
.yeartab span {color:white}

/*
.midnav ul {  list-style-type: none;  margin:0; padding: 0;  overflow: hidden;  background-color: white;}
.midnavbar li {float: left;}
.midnavbar li a {display: inline-block;  color: white;  text-align: center;  padding: 4px 16px; text-decoration: none; background-color: #80afc7; border-radius: 10px;}
.midnavbar li a:hover {  background-color: #2b83b0; border-radius: 10px;}
.select {display: inline-block;  color: white;  text-align: center;  padding: 4px 16px; text-decoration: none; background-color: #80afc7; border-radius: 10px;}
.select:hover {  background-color: #2b83b0; border-radius: 10px;}*/
/*
.vid {display: block; margin: auto; width: 700px; height:540px}
img {width:100%}

#loggedin {float: right; color: #fff; font-family: Arial, Helvetica, sans-serif; padding-right: 50px; padding-top: 0px; padding-bottom: 0px; border: 0; font-size: 1em;}
#content h2 { color: #464646; }*/

/*p#centred {text-align: center}
p#err_msg { color:#F00; font-weight:bold}
*/
.fancy {  line-height: 0.5;  text-align: center;}
.fancy span {  display: inline-block;  position: relative;  }
.fancy span:before,.fancy span:after {  content: "";  position: absolute;  height: 5px;  border-bottom: 1px solid black;  border-top: 1px solid black;  top: 0;  width: 600px;}
.fancy span:before {  right: 100%;  margin-right: 15px;}
.fancy span:after {  left: 100%;  margin-left: 15px;}

.audiobars {text-align: center; box-shadow: 10px 10px 5px rgba(31, 31, 31, 0.5); border: 3px solid #aaa; border-radius: 10px;}
/*
u { text-decoration: underline}

.myPopup {position: fixed; box-shadow: 10px 10px 5px rgba(31, 31, 31, 0.5); border: 3px solid #aaa; border-radius: 10px;
  padding: 30px; margin: 0 0 0 -160px;  z-index: 1; left: 50%; top: 100px; width: 320px; background-color:white;
  background-color: #f5f2e2; background-image: url("corrugation.png")}
.myPopup audio {text-align: center}

.centreindiv {margin: 0 auto; display: block; background-color:#80afc7}

* {font-family: Arial;}
.dropdown-content {overflow:hidden}*/