table {
  color:                        black;   /* default for child cells */
  border-collapse:              collapse;
}

th, td {
  border-style:                 solid;
  border-width:                 1px;
  border-color:                 black;
}

th { /* most of these cells have vertical (rotated) text */
  padding-top:                  0.6em;
  padding-right:                0;
  padding-bottom:               0.6em;
  padding-left:                 0;
  margin:                       0;
  white-space:                  nowrap;
  background-color:             #FFCCCC; /* pink */
  vertical-align:               bottom;
}
    /* for cells with horizontal text, add left-right padding */
th.name, th.path, th.desc_m, th.desc_w {
  padding-right:                0.6em;
  padding-left:                 0.6em;
}
th.desc_m, th.desc_w {
  text-align:                   left;
}

td {
  padding:                      0.5em;
  background-color:             inherit; /* alternating rows */
  vertical-align:               top;
  text-align:                   center;
  max-height:                   1em; /* why ineffective? */
}
td p {
  max-height:                   1em; /* why ineffective? */
}

td.number, td.name {
  background-color:             #FFCCCC; /* override: pink */
  font-weight:                  bold;
}
td.name {
  font-size:                    80%;
  white-space:                  nowrap;
  text-align:                   right;
}
td.atd {
  font-weight:                  bold;
}
td.page_m, td.page_w {
  text-align:                   right;
}
td.desc_m, td.desc_w {
  text-align:                   left;
  white-space:                  nowrap; /* temporary I hope */
}

/* blocks of rotated cell header text */
th div {
  -webkit-transform-origin:     0% 100%; /* set centre of rotation to bottom left */
  -moz-transform-origin:        0% 100%; /* set centre of rotation to bottom left */
  -ms-transform-origin:         0% 100%; /* set centre of rotation to bottom left */
  -o-transform-origin:          0% 100%; /* set centre of rotation to bottom left */
  transform-origin:             0% 100%; /* set centre of rotation to bottom left */
  -webkit-transform:            rotate(-90deg) translate(0, 100%);
  -moz-transform:               rotate(-90deg) translate(0, 100%);
  -ms-transform:                rotate(-90deg) translate(0, 100%);
  -o-transform:                 rotate(-90deg) translate(0, 100%);
  transform:                    rotate(-90deg) translate(0, 100%);
  white-space:                  nowrap;
  display:                      inline-block;
  width:                        1em;  /* kludge! */
  height:                       16em; /* kludge! */
  margin:                       0;
  padding:                      0;
}
th.finger div { /* two lines of header text */
  width:                        2.5em;
}
th.knife { /* three lines of header text */
  width:                        4em;
  padding-right:                3em; /* kludge */
}

/* alternating row colours for clarity */
tr.odd {
  background-color:             #FFFFFF; /* white */
}
tr.even {
  background-color:             #EEEEEE; /* light grey */
}

/* thread paths by colour code */
td.path_o {
  color:                        #F08000; /* orange */
}
td.path_b {
  color:                        #0000FF; /* blue */
}
td.path_g {
  color:                        #00CC00; /* green */
}
td.path_r {
  color:                        #F00000; /* red */
}
td.path_w {
  color:                        #7F5217; /* brown */
}

td.path_o,
td.path_b,
td.path_g,
td.path_r,
td.path_w {
  padding:                      0;
  margin:                       0;
}

td.path_o div,
td.path_b div,
td.path_g div,
td.path_r div,
td.path_w div {
  justify-content:              center;
  padding:                      0;
  margin-top:                   0;
  margin-bottom:                0;
  margin-left:                  0.3em;
  margin-right:                 0.3em;
  height:                       4em;
}

td.path_o span,
td.path_b span,
td.path_g span,
td.path_r span,
td.path_w span {
  width:                        100%;
  display:                      block;
  padding:                      0;
  margin:                       0;
  line-height:                  100%; /* no-op */
}

/* Threading order, large digit */
td.path_o span:nth-child(1),
td.path_b span:nth-child(1),
td.path_g span:nth-child(1),
td.path_r span:nth-child(1),
td.path_w span:nth-child(1) {
  text-align:                   left;
  font-size:                    350%;
  font-style:                   italic;
  font-weight:                  bold;
  font-family:                  "Arial Black", sans-serif;
  opacity:                      0.15;
  z-index:                      -1; /* bottom/back of stack */
}

/* Needle or looper identification */
td.path_o span:nth-child(2),
td.path_b span:nth-child(2),
td.path_g span:nth-child(2),
td.path_r span:nth-child(2),
td.path_w span:nth-child(2) {
  text-align:                   right;
  margin-right:                 0.2em;
  font-size:                    50%;
  font-style:                   italic;
  position:                     relative;
  top:                          -2.0em; /* bottom */
}

/* Thread path description */
td.path_o span:nth-child(3),
td.path_b span:nth-child(3),
td.path_g span:nth-child(3),
td.path_r span:nth-child(3),
td.path_w span:nth-child(3) {
  text-align:                   center;
  margin-right:                 0.2em;
  font-size:                    50%;
  display:                      block;
  text-transform:               uppercase;
  position:                     relative;
  top:                          -1.3em; /* very bottom */
}