.table-blue {
  font-family     : "Trebuchet MS", Arial, Helvetica, sans-serif;
  width           : 100%;
  border-collapse : collapse;
  box-shadow      : 5px 5px 6px #888888;
}
.table-blue-hh {
  font-family     : "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size       : 1em;
  font-style      : italic;
  text-align      : center;
  vertical-align  : middle;
  border          : 1px solid #488090;
  padding         : 5px 9px 4px 9px;
  background-color: #5d9bd0;
  color           : #ffffff;
  white-space     : nowrap;
}
.table-blue-vh {
  font-family     : "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size       : 1em;
  font-style      : italic;
  text-align      : left;
  vertical-align  : middle;
  border          : 1px solid #488090;
  padding         : 5px 9px 4px 9px;
  background-color: #5d9bd0;
  color           : #ffffff;
  white-space     : nowrap;
}
.table-blue-td, .table-blue td {
  font-size       : 1em;
  font-family     : "Courier";
  text-decoration : none;
  font-weight     : normal;
  font-style      : normal;
  text-align      : right;
  vertical-align  : middle;
  border          : 1px solid #488090;
  padding         : 3px 9px 2px 9px;
}
.table-blue-alt {
  font-size       : 1em;
  font-family     : "Courier";
  text-decoration : none;
  font-weight     : normal;
  font-style      : normal;
  text-align      : right;
  vertical-align  : middle;
  border          : 1px solid #488090;
  padding         : 5px 9px 4px 9px;
  background-color: #EAF2D3;
}


.label-blue-vh {
  font-family     : "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size       : 1em;
  font-style      : italic;
  text-align      : left;
  vertical-align  : middle;
  /*border          : 1px solid #488090;
  padding         : 5px 9px 4px 9px;*/
  background-color: #5d9bd0;
  color           : #ffffff;
  white-space     : nowrap;
}


.scrollingtable {
  box-sizing     : border-box;
  display        : inline-block;
  vertical-align : middle;
  overflow       : hidden;
  width          : auto; /*if you want a fixed width, set it here, else set to auto*/
  min-width      : 0; /*100%*/; /*if you want a % width, set it here, else set to 0*/
  height         : 188px; /*100%*/; /*set table height here; can be fixed value or %*/
  min-height     : 0; /*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
  font-family    : "Trebuchet MS", Arial, Helvetica, sans-serif;  /*Verdana, Tahoma, sans-serif;*/
  /*font-size      : 15px;*/
  line-height    : 20px;
  padding        : 20px 0 20px 0; /*need enough padding to make room for caption*/
  text-align     : left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
  position    : relative;
  border-top  : 1px solid black;
  height      : 100%;
  padding-top : 20px; /*this determines column header height*/
  background  : #5d9bd0; /*header row background color*/
}
.scrollingtable > div:before {
  top : 0;
  /*background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content  : "";
  position : absolute;
  z-index  : -1;
  width    : 100%;
  height   : 100%;
  left     : 0;
}
.scrollingtable > div > div {
  min-height : 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
  max-height : 100%;
  overflow   : scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/
  overflow-x : hidden;
  border     : 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
  width          : 100%;
  border-spacing : 0;
  margin-top     : -20px; /*inverse of column header height*/
  /*margin-right: 17px;*/ /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
  position       : absolute;
  top            : -20px; /*inverse of caption height*/
  margin-top     : -1px; /*inverse of border-width*/
  width          : 100%;
  font-weight    : bold;
  text-align     : center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
  vertical-align : bottom;
  white-space    : nowrap;
  text-align     : center;
  color          : white;
  font-style     : italic;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display : inline-block;
  padding : 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
  content     : "";
  position    : absolute;
  top         : 0;
  left        : 0;
  height      : 20px; /*match column header height*/
  border-left : 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
  position    : absolute;
  top         : 0;
  white-space : pre-wrap;
  /*background: cornflowerblue; /*header row background color*/
  /*color: white; /*header row font color*/
  /*   delete: background: blue; /*match page background color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
  content     : "";
  display     : block;
  min-height  : 20px; /*match column header height*/
  padding-top : 1px;
  border-left : 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
  position : absolute;
  width    : 100px;
  top      : -1px; /*inverse border-width*/
  /*background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
  content    : "";
  display    : table-cell;
  position   : relative;
  padding    : 0;
  border-top : 1px solid black;
  top        : -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom : 1px solid black;
  padding       : 0 6px 0 6px;
  height        : 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/