style.css

body {
  font-family: futura;
  font-size: 8pt;
}

/* ------------------------------------ */

#exampleButtons {
  padding: 4px;
}

a.exampleButton {
  font-size: 8pt;
  padding: 2px;
  margin: 4px;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #888;
  background: rgba(245, 245, 220, .35);
  color: #333;
  text-decoration: none;
}

a.exampleButton.selected {
  background: rgba(245, 245, 220, 1);
  box-shadow: 0px 0px 1px #aaa;
}

/* ------------------------------------ */

#macroVizDivContainer {
  overflow: scroll;
}

#macroVizDiv {
  white-space: nowrap;
}

macroViz {
  display: block;
}

macroVizNode {
  font-size: 7pt;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}

macroVizNode > label {
  display: block;
  font-family: futura;
  color: #555;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #888;
  padding: 2px;
  background: #efefef;
  margin: 1px;
}

/* ------------------------------------ */

#microVizDivContainer {
  overflow: scroll;
}

#microVizDiv {
  display: inline-block;
  white-space: nowrap;
  font-family: monospace;
  line-height: 1.4;
  margin: 10px 0;
}

#microVizDiv > program {
  display: inline-block;
  float: left;
}

#microVizDiv > program > line {
  display: block;
  padding-right: 10px;
}

#microVizDiv > program > line:nth-child(2n) {
  background: #fbfbfb;
}

#microVizDiv > program > line > text {
  white-space: pre;
}

#microVizDiv > program > line > number {
  display: inline-block;
  width: 20pt;
  text-align: right;
  padding-right: 10px;
  color: cornflowerblue;
}

/* top-level send, whose sourceloc is always the entire program */
#microVizDiv > send {
  display: inline-block;
  border-left: 1px dashed cornflowerblue;
}

#microVizDiv event,
#microVizDiv send,
#microVizDiv localEventGroup,
#microVizDiv remoteEventGroup,
#microVizDiv spacer,
#microVizDiv wrapper {
  display: inline-block;
  float: left;
}

#microVizDiv send[loopy="true"] {
  border-radius: 4px;
  background: rgba(100, 149, 237, .05);
  box-shadow: 1px 1px 2px #ddd;
  margin: 0 4pt;
}

#microVizDiv send[empty="true"] > remoteEventGroup > emptySendDot {
  color: hsl(0, 0%, 30%);
}

#microVizDiv event {
  margin: 0 10px;
}

#microVizDiv send {
  margin: 0;
}

#microVizDiv send[empty="true"].firstInLine {
  margin-left: 10px;
}

#microVizDiv send[empty="true"].lastInLine {
  margin-right: 10px;
}

#microVizDiv send[empty="true"] + event:not(.firstInLine) {
  margin-left: 0;
}

#microVizDiv event + send[empty="true"]:not(.firstInLine) {
  margin-left: -10px;
}

#microVizDiv localEventGroup:nth-child(1n+2),
#microVizDiv remoteEventGroup:nth-child(1n+2) {
  border-left: 1px dashed #aaa;
}

#microVizDiv event.remote {
  opacity: 0.5;
}

#microVizDiv event.remote::before {
  content: '(';
}

#microVizDiv event.remote::after {
  content: ')';
}

#microVizDiv .firstInLine,
#microVizDiv spacer {
  clear: left;
}

/* only debugging stuff past this point */

/*
#microVizDiv localEventGroup,
#microVizDiv remoteEventGroup,
#microVizDiv wrapper {
  border: 1px solid cornflowerblue;
  border-radius: 4px;
  padding: 1px;
}

#microVizDiv wrapper {
  border-color: red;
}

#microVizDiv send {
  border: 1px solid red;
  border-radius: 4px;
  padding: 1px;
}

#microVizDiv spacer::after {
  content: '(spacer)';
  color: hsl(0, 0%, 70%);
}
*/

/* ------------------------------------ */

#microVizDiv > model {
  display: block;
}

#microVizDiv > model send,
#microVizDiv > model localEventGroup,
#microVizDiv > model remoteEventGroup {
  display: block;
  vertical-align: top;
  margin: 4px;
}

#microVizDiv > model send,
#microVizDiv > model event {
  display: inline-block;
  float: left;
  clear: left;
}

#microVizDiv > model remoteEventGroup {
  opacity: 0.6;
}

#microVizDiv > model localEventGroup,
#microVizDiv > model remoteEventGroup {
  display: inline-block;
  border: 1px solid cornflowerblue;
  border-radius: 4px;
  margin-left: 8pt;
}

#microVizDiv > model event {
  background: #efefef;
  border-radius: 4px;
  padding: 4px;
  margin: 2px;
}

#microVizDiv > model send > label {
  display: block;
  margin: 2px;
}