@charset "UTF-8";

audio {
  width: 200px;
}

table.voiceparts {
  border-collapse: collapse;
  border-color: blue;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}
table.voiceparts thead tr th {
  border-collapse: collapse;
  border-color: blue;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  height: auto;
  text-align: center;
  vertical-align: middle;
}
table.voiceparts thead tr th div {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  font-weight: bold;
  font-size: larger;
}
table.voiceparts td { 
  border-collapse: collapse;
  border-color: blue;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}

table.voiceparts thead tr th {
  height: 140px;
  width: 205px;
}
table.voiceparts thead tr th:hover {
  background-color: black;
  color: white;
}
th.rotated div { 
  display: block;
  -webkit-transform: translateX(25%) translateY(25%) rotate(-90deg);
  -moz-transform: translateX(25%) translateY(25%) rotate(-90deg);
  -o-transform: translateX(25%) translateY(25%) rotate(-90deg);
  -ms-transform: translateX(25%) translateY(25%) rotate(-90deg);
  transform: translateX(25%) translateY(25%) rotate(-90deg);
  text-align: center
  vertical-align: middle;
  width: 20px;
}

td.shrunk {
  width: 50px;
}

td.shrunk audio {
  display:none;
}