body {
  background-color: #fff;
  font-family: sans-serif;
  margin-top: 0;
}
h1 {
  font-size: 130%;
  font-weight: normal;
  margin: 10px 0;
}
a:hover {
  color: #f00;
}
.farSide {
  text-align: right;
}

#fileInput {
  display: none;
}

/* Tabs */
#tabarea {
  position: fixed !important;
}

.tab {
  background: #fff;
  border: 1px solid #ddd;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #333;
  cursor: default;
  padding: 4px 8px;
  position: relative;
  user-select: none;
}

.tab-bar>.tab {
  border-bottom: 0;
  float: left;
  margin: 1px 4px 0 0;
}

/* State: Hover */
.tab:hover {
  background: #eee;
}

/* State: Disabled */
.tab-disabled {
  background: #fff;
  border-color: #ccc;
  color: #ccc;
}

/* State: Selected */
.tab-selected {
  background: #ddd !important; /* Selected trumps hover. */
}

/*
 * Shift selected tabs 1px towards the contents (and compensate via margin and
 * padding) to visually merge the borders of the tab with the borders of the
 * content area.
 */
.tab-bar>.tab-selected {
  margin-top: 0;
  padding-bottom: 5px;
  top: 1px;
}

.tab-bar {
  border: 0;
  cursor: default;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
}

.tab-bar-clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

/* Buttons */
button {
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #000;
  font-size: large;
  margin: 5px;
  padding: 10px;
  user-select: none;
}
button.primary {
  background-color: #dd4b39;
  border: 1px solid #dd4b39;
  color: #fff;
}
button.secondary {
  background-color: #4d90fe;
  border: 1px solid #4d90fe;
  color: #fff;
}
button:disabled {
  opacity: 0.5;
}
button.primary>img,
button.secondary>img {
  opacity: 1;
}
button>img {
  opacity: 0.6;
  vertical-align: text-bottom;
}
button:hover:not(:disabled)>img {
  opacity: 1;
}
button:active:not(:disabled) {
  border: 1px solid #888 !important;
}
button:hover:not(:disabled) {
  box-shadow: 2px 2px 5px #888;
}

/* Dialogs */
#dialog {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #888;
  color: #000;
  padding: 10px;
  position: absolute;
  visibility: hidden;
}
#dialogBorder {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: 5px 5px 5px #888;
  color: #000;
  position: absolute;
  visibility: hidden;
}
#dialogShadow {
  background-color: #000;
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
}
.dialogAnimate {
  transition-property: width height left top opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
.dialogHiddenContent {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#dialogHeader {
  background-color: #ddd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: move;
  height: 25px;
  margin: -10px -10px 15px;
}
#dialog button {
  min-width: 4em;
}

.readonly .blocklyMainBackground {
  stroke: none;
}

button.primary {
  /* Can't use "text-align: start" due to IE. */
  text-align: left;
}

#editor {
  border: 1px solid #ddd;
  bottom: 10px;
  font-size: 16pt;
  height: auto !important;
  position: fixed !important;
}

#blockly {
  position: fixed;
  bottom: 10px;
}

#paddingBox {
  height: 400px;
  width: 400px;
}

#staveBox {
  height: 400px;
  width: 400px;
  border: 1px solid #ccc;
  position: absolute;
}

.stave {
  height: 69px;
  width: 400px;
  position: absolute;
}

.stave-15 {
  background-image: url(icons.png);
  background-position: -48px -24px;
  height: 11px;
  width: 14px;
  position: absolute;
}

.note-low,
.note-high {
  height: 37px;
  position: absolute;
}

.rest {
  height: 31px;
  position: absolute;
}

.flat {
  height: 19px;
  position: absolute;
}

.splash {
  transition-property: height, opacity, width, margin;
  transition-duration: 0.3s;
  opacity: 0;
}

.splash.note-low {
  margin-left: -10px;
  margin-top: -30px;
  height: 74px;
}

.splash.note-high {
  margin-left: -8px;
  margin-top: -6px;
  height: 74px;
}

.splash.rest {
  margin-left: -8px;
  margin-top: -6px;
  height: 62px;
}

.ledgerLine {
  height: 1px;
  width: 20px;
  position: absolute;
}

.ledgerLineWide {
  height: 1px;
  width: 27px;
  position: absolute;
}

.barLine {
  height:36px;
  width: 1px;
  position: absolute;
}

#musicBox {
  height: 400px;
  width: 365px;
  margin-left: 36px;
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
}

#notePicker {
  background-image: url(notes.png);
  border: 1px solid #ccc;
  height: 124px;
  width: 46px;
}

.sampleNote {
  float: left;
  height: 37px;
  margin: 10px;
}

#sampleHelp2 {
  height: 150px;
  width: 250px;
}

#sampleHelp6, #sampleHelp7 {
  height: 50px;
  width: 250px;
}

#spinner {
  height: 40px;
  width: 40px;
  margin-top: 8px;
  opacity: .6;
}

#livestreamButton {
  margin-left: 20px;
  visibility: hidden;
}

#submitButton {
  margin-left: 10px;
}

/* Slider. */
.sliderTrack {
  stroke: #aaa;
  stroke-width: 6px;
  stroke-linecap: round;
}
.sliderKnob {
  fill: #ddd;
  stroke: #bbc;
  stroke-width: 1px;
  stroke-linejoin: round;
}
.sliderKnob:hover {
  fill: #eee;
}

/* Sprited icons. */
.icon21 {
  background-image: url(icons.png);
  height: 21px;
  width: 21px;
}
.music {
  background-position: 0 0;
}
.stop {
  background-position: -21px 0;
}
.run {
  background-position: -42px 0;
}
.link {
  background-position: -63px 0;
}
.upload {
  background-position: -63px -21px;
}