body {
  margin-left: 4em;
  max-width: 60em;
  margin-bottom: 5em;
}

h1, h2 {
  margin-top: 1.5em;
  font-family: tahoma, sans-serif;
}

h1 {font-size: 2.2em;}
h2 {font-size: 1.3em;}

pre {
  background: #f4f4ff;
  padding: .5em 1em;
  position: relative;
}

#warning {
  color: #a00;
  display: none;
}

#console {
  z-index: 100;
  border: 1px solid #aaa;
  background: #ddd;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  padding: 10px;
  right: -1030px;
  position: fixed;
  top: 10px;
  width: 1040px;
  -webkit-transition: right .8s ease;
  -moz-transition: right .8s ease;
  transition: right .8s ease;
  -webkit-box-shadow: inset 5px 5px 5px #eee, 5px 5px 5px rgba(0,0,0,.1);
  -moz-box-shadow: inset 5px 5px 5px #eee, 5px 5px 5px rgba(0,0,0,.1);
  box-shadow: inset 5px 5px 5px #eee, 5px 5px 5px rgba(0,0,0,.1);
}

#console.open {
  right: -90px;
}

.CodeMirror-wrapping {
  border: 1px solid #aaa;
  float: left;
  margin-right: .3em;
  background: white;
}

.CodeMirror-line-numbers {
  width: 1.6em;
  color: #aaa;
  background: #eee;
  text-align: right;
  padding-right: .3em;
  font-size: 10pt;
  font-family: monospace;
  padding-top: .4em;
  line-height: normal;
}

span.load {
  color: #00c;
  position: absolute;
  left: -1.2em;
  top: 0px;
  cursor: pointer;
}

span.load:hover {
  color: #00f;
}

#tabs {
  float: left;
  margin-right: -1px;
  position: relative;
  z-index: 120;
}

#tabs div {
  width: 1em;
  height: 6em;
  padding: 1em 0 0 3px;
  -webkit-border-top-left-radius: 1em;
  -webkit-border-bottom-left-radius: 1em;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomleft: 1em;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  font-family: tahoma, sans-serif;
  font-size: 80%;
  border: 1px solid #aaa;
  background: white;
  -webkit-box-shadow: inset -10px 0px 10px #eee;
  -moz-box-shadow: inset -10px 0px 10px #eee;
  box-shadow: inset -10px 0px 10px #eee;
  margin-bottom: 3px;
  cursor: pointer;
}

#tabs div.content {
  background: #efe;
  -webkit-box-shadow: inset -10px 0px 10px #cec;
  -moz-box-shadow: inset -10px 0px 10px #cec;
  box-shadow: inset -10px 0px 10px #cec;
}

#tabs div.selected {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: white;
  border-right: 1px solid white;
}

#tabs span {
  display: block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#output {
  float: left;
  background: white;
  border: 1px solid #aaa;
  z-index: 10;
  width: 600px;
  height: 600px;
  overflow: auto;
  position: relative;
  padding: 0;
  margin: 0;
  position: relative;
}

#output canvas {
  position: absolute;
}

#output pre {
  background: white;
  white-space: pre-wrap;
}

#edit {
  position: relative;
}

#run {
  position: absolute;
  background-color: #00a;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00e), to(#009));
  background: -moz-linear-gradient(100% 100% 90deg, #00e, #009);
  color: white;
  text-align: center;
  padding: .3em .5em .4em .6em;
  display: table-cell;
  font-size: 16px;
  vertical-align: middle;
  border-radius: 1em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  top: 560px;
  left: 290px;
  z-index: 150;
  cursor: pointer;
}

#run:hover {
  background-color: #22f;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#55f), to(#00a));
  background: -moz-linear-gradient(100% 100% 90deg, #55f, #00a);
}

#run.running {
  background-color: #f22;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f55), to(#a00));
  background: -moz-linear-gradient(100% 100% 90deg, #f55, #a00);
}

div.preface {
  font-size: 90%;
}

div.picture {
  text-align: center;
}

div.picture img {
  border: 1px solid #888;
  -webkit-box-shadow: 2px 2px 2px #ccc;
  -moz-box-shadow: 2px 2px 2px #ccc;
  box-shadow: 2px 2px 2px #ccc;
}

p.showsolution span {
  cursor: pointer;
  color: #00a;
}