/* override width of code blocks; not ideal */
div.screen > pre.highlight {
  overflow-x: auto;
  width: 60em;
}
      
/* override default pre.highlight */      
div.input > pre.highlight {
  border: thin solid rgba(0, 0, 0, 0.4);
}

div.cells {
  margin-left: 1.5em;
}

div.screen + div.cells, div.cells + div.screen {
  padding-top: 1em;
}

div.input, div.output {
  margin-left: 1.5em;
}

/* space between cells (but not input/output) */
div.output {
  margin-bottom: 1em;
}

div.input + div.input {
  margin-top: 1em;
}

div.input::before, div.output::before {
  display: inline-block;
  margin-left: -3.5em;
  margin-top: 0.5em;
  padding: 0;
  width: 3em;
}

div.input::before {
  content: "In";
  text-align: center;
}

div.output::before {
  background: #99CC66;
  content: "Out";
  font-size: smaller;
  position: absolute;
  text-align: center;
}

div.output pre.highlight {
  border: none;
}

/* how to override the div.class + pre.highlight background? */
div.error > pre.highlight {
  background: #fdd;
}