body { font:16px Calibri;}
        table { border-collapse:separate; border-top: 0px solid lightgrey; }
        td, th {
            margin:0;
            border:3px solid lightgrey; 
            border-top-width:0px; 
            white-space:nowrap;
        }
        div.fixedtable { 
            width: 500px; 
            overflow-x:scroll;  
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }
        div.w8 { margin-left:8em; }
        .w8 {width:8em;}
        div.w5 { margin-left:5em; }
        .w5 {width:5em;}

        .long { background:yellow; letter-spacing:1em; }
tr.space {border-bottom-color: black; border-bottom-width: 1px; border-bottom-style: solid;border-top-color: black; border-top-width: 1px; border-top-style: solid;height:6px;}

th.rotate {
  /* Something you can count on */
  height: 70px;
  white-space: nowrap;
border:0px solid lightgrey;
vertical-align:top;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 20px;
margin-left:-15px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
}