/* writableBlockStyles.css */

p.writable {
  margin-block-start: 0;
}

p.header {
  color: #aaaaaa;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 0;
}

p.nodisp {
  display: none;
}

.rowI {
  margin-top: 2em;
}

div.control {
  float: left;
  display: grid;
  grid-template-columns: 30px 30px 30px 30px;
  margin-right: 20px;
  position: relative;
  z-index: 2;
}

div.control > button.loading {
  background: url(../images/loading.gif) 50% no-repeat;
}

div.control > button.ready , div.control > button.paused {
  background: url(../images/playIcon.svg) 50% no-repeat;
}

div.control > button.complete {
  background: url(../images/playIconGray.svg) 50% no-repeat;
}

div.control > button.running {
  background: url(../images/pauseIcon.svg) 50% no-repeat;
}

div.control > button.play {
  width: 30px;
  height: 30px;
  grid-row: 1;
  grid-column: 1;
}

div.control > button.settings {
  background: url(../images/gearIcon.svg);
  width: 30px;
  height: 30px;
  grid-row: 1;
  grid-column: 2;
}

div.control > button.back {
  background: url(../images/returnToStart.svg);
  width: 30px;
  height: 30px;
  grid-row: 1;
  grid-column: 3;
}

div.control > button.forward {
  background: url(../images/jumpToEnd.svg);
  width: 30px;
  height: 30px;
  grid-row: 1;
  grid-column: 4;
}

div.control > div.speedLabel {
  background: url(../images/speedIcon.svg);
  width: 30px;
  height: 30px;
  grid-row: 2;
  grid-column: 1;
}

div.control > div.speedLabel.closed {
  display: none;
}

div.control > .speedSlider {
  grid-row: 2;
  grid-column: 2/5;
}

div.control > .speedSlider.closed {
  display: none;
}

div.control > div.sizeLabel {
  background: url(../images/sizeIcon.svg);
  width: 30px;
  height: 30px;
  grid-row: 3;
  grid-column: 1;
}

div.control > div.sizeLabel.closed {
  display: none;
}

div.control > .sizeSlider {
  grid-row: 3;
  grid-column: 2/5;
}

div.control > .sizeSlider.closed {
  display: none;
}

div.control > .audioControls {
  grid-row: 4;
  grid-column: 1/2;
  //display: grid;
  //grid-template-columns: 30px 30px;
}

div.control > .audioControls > .audioRow {
  display: grid;
  grid-template-columns: 30px 30px;
  height: 30px;
}

div.control > .audioControls.closed {
  display: none;
}

div.control > .audioControls > .audioRow > .mute {
  background: url(../images/muteIcon.svg);
}

div.control > .audioControls > .audioRow > .audioOn {
  background: url(../images/audioIcon.svg);
}

div.control > .audioControls > .audioRow > .pausable {
  background: url(../images/pauseIcon.svg);
}

div.control > .audioControls > .audioRow > .playable {
  background: url(../images/playIcon.svg);
}

div.control > .audioControls > .audioRow > .resetable {
  background: url(../images/returnToStart.svg);
}

div.control > .audioControls > .audioRow > .hide {
  display: none;
}

div.control > .grow {
  grid-row: 5;
  grid-column: 1;
  text-align: center;
  padding: 0;
}

div.control > .shrink {
  grid-row: 5;
  grid-column: 2;
  text-align: center;
  padding: 0;
  font-size: 80%;
}

div.control > .grow.closed {
  display: none;
}

div.control > .shrink.closed {
  display: none;
}

div.whiteBoard {
  width: 100%;
}

div.whiteBoard.empty {
  height: 0;
}