.red { color: red; }
.gray { color: gray; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
.tiny { font-size: 0.6em; }
.smallers { font-size: 0.7em; }
.small { font-size: 0.8em; }
.littleSmaller { font-size: 0.9em; }
.normal {font-size: 1em; }
.large { font-size: 1.1em; }
.highlight { color: blue; font-size: 1.4em; }
.highlightRed { color: red; font-size: 1.4em; }
.highlightColor { color: red; }
.larger { font-size: 1.2em; }
.huge { font-size: 1.5em; }
.center { text-align: center; }

.box-black {
  background-color: black;
  padding-left: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  text-align: center;
}
.box-white {
  background-color: white;
  padding-left: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  text-align: center;
}


.left-code {
  color: #777;
  width: 38%;
  height: 92%;
  float: left;
}
.right-plot {
  width: 60%;
  float: right;
  padding-left: 1%;
}
.left-code-large {
  color: #777;
  width: 60%;
  height: 92%;
  float: left;
}
.right-result-narrow {
  width: 38%;
  float: right;
  padding-left: 1%;
}
.left-large {
  color: #777;
  width: 60%;
  height: 92%;
  float: left;
}
.right-narrow {
  width: 38%;
  float: right;
  padding-left: 1%;
}
.plot-callout {
  height: 225px;
  width: 450px;
  bottom: 25%;
  right: 5%;
  position: absolute;
  padding: 0px;
  z-index: 100;
}
.plot-callout img {
  width: 100%;
  border: 4px solid #23373B;
}