html,body{ /* HH added */
  margin:0;top:0;left:0;padding:0;
}
body.page {
  background-color: #ffe6cc;
}
table, tr {
    border:1px solid black;
    width:100%;
    border-collapse: collapse;
    table-layout: fixed;
}
table tr td {
  padding:0.1em 0.3em;
}
table.venues {
    /* width:450px;*/
    max-width: 450px;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
    margin:auto; /* HH added */
}
table.venues tr:nth-child(odd) {
    background-color: rgb(135,245,160);
}
table.venues tr:nth-child(even) {
    background-color: rgb(185,249,200);
}
table.recurring {
   /*width:900px;*/
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse
}
table.recurring tr:nth-child(odd) {
    background-color: rgb(135,245,160);
}
table.recurring tr:nth-child(even) {
    background-color: rgb(185,249,200);
}
div#text {
  float: right ;
  width: 50% ;
}
div#image {
  float: right ;
  width: 50%;
}
table.legend {
    border:1px solid black;
    /* HH changed below*/
    max-width:570px; 
    table-layout: auto;
}
tr.lightgrey {
    background-color: rgb(198,202,204);
}
tr#lightgreen {
    background-color: rgb(135,245,160);
}
tr#lightblue {
    background-color: rgb(144,195,212);
}
tr#lightred {
    background-color: rgb(240,190,210);
}
tr#hotred {
    background-color: rgb(235,61,104);
}
div.specialMissedArtist {
  background-color: rgb(144,195,212);
}
td.leftpaddingd {
    padding-left: 5mm;
}
th.leftpaddingh {
    padding-left: 5mm;
}
h5#dictionaryEntry {
    /*align: left;
    padding-left: 20mm;*/
    padding:0 1em; /* HH changed */
}
hr.special {
  border-color: rgb(0,0,0);
}
h6#dictionaryCitation {
    /*align: left;
    padding-left: 40mm;*/
    padding-left:3em; /* HH changed */
}
img.interviews {
  display: inline-block;
  margin: 10px 10px;
  float: right;
}
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE"
}
table.sortable tr:nth-child(odd) {
    background-color: rgb(135,245,160);
}
table.sortable tr:nth-child(even) {
    background-color: rgb(185,249,200);
}

/* -----------------------HH additions----------------------- */
/* look of cover image */
table.coverimagetable {
  width:100%;height:370px;margin-top:57px;
  padding:5px;border-spacing:0;
  border:0!important;
}
table.coverimagetable tr{border:0!important;}
table.coverimagetable tr td{vertical-align: top;}

/* look of the main container */
.container{
  width:1000px;
  max-width:100%;
  margin:auto;
  padding:1.5em;padding-top:0.3em;
}

/* look of dictionary entry */
.dictionary{margin-bottom:2.5em;} 

/* look of navigation bar */
#headercontainer{margin:auto;width:1000px;max-width:100%;max-width:100vw;}
 header{
    height:57px;
    position:fixed;
    width:100%;
    width:100vw;
    background-color:#ffe6cc;
    z-index:3;
    top:0;
    border-bottom:1px solid black;
    -webkit-box-shadow: 0px 13px 20px -13px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 13px 20px -13px rgba(0,0,0,0.75);
    box-shadow: 0px 13px 20px -13px rgba(0,0,0,0.75);
  }
u{text-decoration:none;}
.navbar-menu{
  width:75px;text-align:center;
  height:2em;margin:10px 0 10px 10px;
  float:left;cursor:pointer!important;
  font-size:1.4em;color:black;padding:0.3em;
  border:1px solid black;border-radius:5px;
}
.navbar-menu:hover,.navbar-menu:focus{background-color: #eee;}
.navbar-menu span{display:table-cell;vertical-align:middle;padding:10px 0 7px 7px;}
.name{width:100%;position:relative;}
.name img {display:block;padding:0.5em;width:70%;max-width:450px;float:left;margin-left:2em;}


/* look of the drop-down nav menu */
.smallnavlinks{
  display:none;
  line-height:2.4em;
  position:fixed;
  width:250px;
  text-align:center;
  background-color:#ffe6cc;
  border:1px solid black;
  margin-bottom:2px;
  margin-top:57px!important;
}
.smallnavlinks ul {list-style:none;margin:0px;padding:0px;}
.smallnavlinks li {border-bottom:1px solid black;text-align: center!important;}
.smallnavlinks li:hover{background-color:#eee;}
.smallnavlinks a:hover{text-decoration: none;color:black;}
.smallnavlinks a li.current{font-size:1.1em;color:black;font-weight:bold;}
.overlay{
  position:fixed;display:none;
  cursor:pointer;z-index:1;
  width:100%;width:100vw;
  height:100%;
  top:0;left:0;right:0;bottom:0;
  background-color:rgba(0,0,0,0.5);
}

/* ---------for varying sizes of small screens---------- */
/* for medium-small screens, make some things smaller and centered */
@media only screen and (max-width:750px){
  .name img {margin-right:1em;}
  table.coverimagetable{height:270px;margin-top:-10;}
  h5#dictionaryEntry{text-align:center;}
  img.interviews{float:none;display:block;margin:auto;max-width:100%;}
}
/* for small screens,
push site title a little toward vertical middle of menu bar and let nav dropdown fill width*/
@media only screen and (max-width:500px){
  .smallnavlinks{width:100%;width:100vw;}
  .name img {margin:0.5em;}
}
/* for very small screens, hide site title - to do: figure out alternate solution for this */
@media only screen and (max-width:350px){
  .name{display: none;}
}
/* for short (height) but wide screens, keep the tab navigation but shorten the height of the picture */
@media (max-height:500px) and (min-width:751px) {
  table.coverimagetable{height:200px;}
}