#sitecontainer { /* dit is the container table for the index page */
      margin:0;
      padding:0;  /*margin and padding have to be zero to make it possible to get a full site */
      width: 100%;
  }

table td, tr {
      border-collapse: collapse;
      margin:0;
      padding:0;
}

#logo {
      float: left;
      width: 10%;
      height: auto;
      min-width: 74px;
      max-width:200px;
      display: block;
      padding: 1vmin;
}


.FlagImg {
        width:10%;
        min-width:25px;
        max-width:50px;
        float: left;
        margin-top: 10px;
        margin-bottom:0;
}

#numbjump {
      max-width: calc(1680px - 25vw);
      text-align: left;
      margin-left: .4vmin;
      margin-top: .3vmin;
      height: 31px;
      padding-left: .6vmin;
      margin-bottom: 1vmin;
    }

#top {
      font-family:URW Chancery L, cursive;
      font-size: calc(95% + .5vw);  /*calculated values may not work on mobile devices. Test it! */
      min-width:277px;
      text-align: center;
      margin-left: 12.3%;
      margin-right: 12.3%;
      padding: 1vmin;
}

#quotecontainer {
      margin-left: auto;
      margin-right: auto;
      max-width: calc(1680px - 25vw);
      margin-bottom: 1vw;
}


#quote {
      margin-top: 1vmax;
      max-width: calc(1680px - 25vw);

}

#performance-credit {
font-size: small;
}

#performance-credit br {
    display: none;
}

#table-title {
      border-collapse: collapse;
      font-family: URW Chancery L, cursive;
      font-size: calc(90% + .4vw);
      text-align: center;
      margin-top: 5%;
      margin-bottom: .7vmin;
      margin-left: 12.3%;
      margin-right: 12.3%;
}

#ulcontainer {
    width: 100%;
    margin: 0;
    padding: 0;
    align: left;
    max-width: calc(1680px - 25vw);

}

.menu {
  margin: 0;
  padding: 0;
}



.menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
}

.menu li {
      float: left; /* again forces the rest of the list items to float at to right in the top menu/button on the index page*/
      }

body {
      background-color: FloralWhite; /* general body settings for the index- and the play page */
      font-size: calc(75% + .3vw);   /*calculated values may not work on mobile devices. Test it! */
      padding: 0;
      margin: 0;
}

#textcontainer {
      width: 100%;
      margin: 0;
      max-width: calc(1680px - 25vw);

}

#text {       /* These are settings for the text area on the index page */
      width: 100%;
      margin: 0;
      padding-left: .5vmin;
      padding-right: .5vmin;
}

#status {		/* makes the setting for the status/progress table; to know how much scores are added to the site */
      width: 100%;
}


#container { 		 /* it is important to keep the width at 100%, otherwise the website cannot flexibly go to 100%  */
      width: 100%;
      margin: 0;
      padding: 0;
}


#chorale {				/* this are the settings for the chorale table on the index page */
      border-collapse: collapse;
      /*font-size: calc(60% + .4vw);*/
      font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
      width:100%;
      max-width: calc(1680px - 25vw);
      padding:0;
      margin:0;
}

#chorale a {
      display: block;
}

#chorale a:hover {
      background: WhiteSmoke;
}

#chorale td {
      border: 1px solid grey;
      text-align: center;
}


#chorale th {
      border: 1px solid grey;
      text-align: center;
      background-color: WhiteSmoke;
}


#chorale img {
      border:1px solid grey;
      width:100%;
      height: auto;
      max-width:200px;
      background: white;
}

.score-row {     			/* settings for the row of each table that contains no, title, BWV and Thumb */
      padding:0;
      margin:0;
}

.img-wrapper{ 			       /* these are the settings for just the wrapper of a Thumb image */
      max-height: 120px;
      min-height: 50px;
      margin:0;

}

.img-wrapper img{ 	/* this makes the settings for the actual thumb-image */
      max-width: 198px;
      max-height: 120px;
      min-height: 50px;
      margin-top:-1px;
      padding:0;
}

#alphabetic-table-index {   /* add the settings for the alphabetic table at the bottom right */
      position: fixed;
      right: 0;
      bottom: 0;
      background: OrangeRed; /* For browsers that do not support gradients */
      background: linear-gradient(Orange, DarkOrange, #ff7500, #FF7000, #FF3300);
      border: 2px solid Crimson;
      font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
      font-weight: bold;
      width: calc(100px + (5vw + 10vh));
      margin: 0;
      padding-left: .5vmax;
      padding-right: .5vmax;
}

#alphabetic-table-index a {
      display:inline-block;
      padding: .2vmin;
}

#alphabetic-table-index p {
      margin: 0;
      padding-bottom: .7vh;
      font-size: calc(12px + (23 - 12) * ((100vmax - 300px) / (1600 - 300)));
}


button::-moz-focus-inner {
  border: 0;
}

#numeric-play-index {
  position: fixed;
  bottom: 0;
  left: 9%;
  right: 9%;
  overflow: auto;
  max-height: 33vh;
  background: OrangeRed; /* For browsers that do not support gradients */
  background: linear-gradient(Orange, DarkOrange, #ff7500, #FF7000, #FF3300);
  border: 2px solid Crimson;
  font-size: calc(12px + (16 - 12) * ((100vmax - 300px) / (1600 - 300)));
  font-weight: bold;
  width: 82%;

}

#numeric-play-index a {
      display:inline-block;
      margin: .6vmin;
      padding: 0;

}


      							/*Beneath this line is the CSS for the play page */
/*-------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------*/

#PlayContainer {		/*This is about the play page and the settings for the one one cell table container of the play page */
      border-style: none;
      width: 100%;
}

#playscore {				/*This makes the settings for the 4 row, 1 column table that has 4 <td>'s; a div with buttons,
      a div with playbutton and player object, and a div with download buttons and a div with alphabetic play index */
      border-collapse: collapse;
      font-size: calc(80% + .2vw);
      max-width: calc(1680px - 25vw);
      margin-bottom:5px;
      padding:5px;
      width: 100%;
}

#buttondiv {				/*This concerns the buttons at the top of the play page */
      /* margin-bottom: 1.2vmin; */
      margin-bottom: clamp(40px, 6vmin, 70px);
      margin-top: 1vmin;
}

/* Now the settings for the actual buttons are mad */

.button{	/*font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); 14px is the minimum size at the smallest viewport width of 300px,
											26px is the maximum size at the largest viewport width of 1600px*/
      font-size: calc(15px + (17 - 15) * ((100vw - 300px) / (1600 - 300)));
      font-weight: bold;
      color: black;
      width: auto;
      margin-left: 0;
      margin-bottom: 1vmin;
      min-width: 2vmin;
      text-decoration: none;
      padding: .4vmin  .8vmin .4vmin .8vmin; /* top right bottom left */
      border-top: 2px solid  #e1e1e1;
      border-right: 2px solid  #808080;
      border-bottom: 2px solid #808080;
      border-left: 2px solid  #e1e1e1;
      box-shadow: 5px 5px 5px  #343434;
      border-radius: 25px;
      background: linear-gradient( #FF9A00, Orange, DarkOrange, #FF7000, #FF3300);
      text-align: center;
      display: inline-block;
}

a:hover, a:active, a:focus {
      outline:none !important;
}

.button:hover {
      color: black;
      background: linear-gradient(Orange, DarkOrange, #ff4736, #ff2626);
}

.button a, active, focus {
      text-decoration: none;
      color: black;
      outline:none !important;
}
.button a:hover {
      text-decoration: none;
      color: black;
}

.button a:visited {
      text-decoration: none;
      color: black;
}

#infofont {

      font-size: calc(9px + (15 - 9) * ((100vw - 300px) / (1600 - 300)));
      width: 100%;
      align: left;
}

#playerframe {
      width: 100%;
      height: 88vh;
      border: 1px solid grey;
      margin-bottom: -1.9vh;
      padding: 0;
      margin:0;
      background-color: white;
}

#alphabetic-play-index {
      display: none;
      position: fixed;
      right: 0;
      bottom: 0;
      background: OrangeRed; /* For browsers that do not support gradients */
      background: linear-gradient(Orange, DarkOrange, #ff7500, #FF7000, #FF3300);
      border: 2px solid Crimson;
      font-size: calc(14px + (24 - 14) * ((100vmax - 300px) / (1600 - 300)));
      font-weight: bold;
      width: calc(100px + (5vw + 10vh));
      margin: 0;
      padding-left: .5vmax;
      padding-right: .5vmax;
}

#alphabetic-play-index a {
      display:inline-block;
      padding: .2vmin;
}

#alphabetic-play-index p {
      margin: 0;
      padding-bottom: .7vh;
      font-size: calc(12px + (22 - 12) * ((100vmax - 300px) / (1600 - 300)));
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
      content: " \25B4\25BE"
}



.goog-logo-link {
      display:none !important;
}

.goog-te-banner-frame {
  display:none !important;
}

.goog-te-banner-frame skiptranslate{
    display: none !important;
    }

body {
    top: 0px !important;
    }

.goog-te-gadget{
  color: transparent !important;
 }

.goog-te-gadget {line-height: 2px !important;color: transparent;}