body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

/* Content
----------------------------------------------------------------- */

h1 {
  font-size: 28px;
  margin-bottom: 0.8em;
  color: #2a3848;
}

h2 {
  color: #2BABD3;
}

a {
  color: #109AC5;
  text-decoration: none;
}

p {
  line-height: 1.5em;
}

figure {
  margin-left: 0px;
  margin-right: 0px;
}

pre[data-type="programlisting"] {
  background-color: #F5F5F5;
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 10px;
  white-space: pre-wrap;
}

img {
  max-width: 100%;
}

table {
  background-color: #E1F4FC;
  border-radius: 5px;
  padding: 10px 20px;
}

section[data-type="chapter"] {
  display: block;
  width: 60%;
  margin-left: 20%;
}

/* Codemirror runners. We have body in here to override default styles from plugin
----------------------------------------------------------------- */

body .processingjs {
  background-color: #E1F4FC;
  border: none;
  padding-bottom: 5px;
}

body .processingjs .control-area a.switch {
  background-color: #2A8EAD;
  color: white;
  border: none;
}

/* Codemirror theme
----------------------------------------------------------------- */

.cm-s-3024-day.CodeMirror {background: #E1F4FC; color: #3a3432;}
.cm-s-3024-day div.CodeMirror-selected {background: #d6d5d4 !important;}

.cm-s-3024-day .CodeMirror-gutters {background: #E1F4FC; border-right: 0px;}
.cm-s-3024-day .CodeMirror-guttermarker { color: #db2d20; }
.cm-s-3024-day .CodeMirror-guttermarker-subtle { color: #807d7c; }
.cm-s-3024-day .CodeMirror-linenumber {color: #A6C3CF;}

.cm-s-3024-day .CodeMirror-cursor {border-left: 1px solid #5c5855 !important;}

.cm-s-3024-day span.cm-comment {color: #9DAAAF;}
.cm-s-3024-day span.cm-atom {color: #a16a94;}
.cm-s-3024-day span.cm-number {color: #a16a94;}

.cm-s-3024-day span.cm-property, .cm-s-3024-day span.cm-attribute {color: #1F9BB2;}
.cm-s-3024-day span.cm-keyword {color: #db2d20;}
.cm-s-3024-day span.cm-string {color: #AA9D57;}

.cm-s-3024-day span.cm-variable {color: #1F9BB2;}
.cm-s-3024-day span.cm-variable-2 {color: #01a0e4;}
.cm-s-3024-day span.cm-def {color: #e8bbd0;}
.cm-s-3024-day span.cm-bracket {color: #3a3432;}
.cm-s-3024-day span.cm-tag {color: #db2d20;}
.cm-s-3024-day span.cm-link {color: #a16a94;}
.cm-s-3024-day span.cm-error {background: #db2d20; color: #5c5855;}

.cm-s-3024-day .CodeMirror-activeline-background {background: #e8f2ff !important;}
.cm-s-3024-day .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}