.CodeMirror {
  font-size: 16px;
  line-height: 22px;
  border: 1px solid #eee;
  overflow-y: hidden;
  height: auto;
}
.CodeMirror-scroll {
  height: auto;
  min-height: 100px;
  overflow-y: hidden;
  overflow-x: auto;
  box-sizing: border-box;
}
div.CodeMirror-cursors {
  z-index: 3;
}
.before-diff-line {
  color: #0A0;
}

.diff-line {
  color: red;
  font-weight: bold;
}


#description {
}

#container {
}

.tempAlert {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    line-height: 20px;
}

#results div {
    padding: 3px;
    background-color: #F6F6F6;
    border-bottom: 1px solid #DDD;
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
    }
#results div:first-child {
    border-top: 1px solid #DDD;
    }

#results pre { /* for long outputs */
   max-height: 18em;
   overflow-y: auto;
}

div#epilogue {
    text-align: center;
    font-style: italic;
    padding: 5px 0px;
}

@media print {
    .noprint, .noprint * { display: none; } 
    .CodeMirror, .CodeMirror * {font-size: 14px; line-height: 16px}
    .CodeMirror {margin-left, margin-right: -1em}
    .cm-comment {color: #444 !important}
    .inline:not(.inlineL):not(.inlineR) {border-bottom: 1px dotted black}
}

@media screen {.printonly, .printonly * { display: none; } }

#page.passed {
    background-color: #EFE;
}
#page.passed #results div {
    border-color: #9E9;
    background-color: #EFE;
}
@media screen {
 #page.ever-passed .exercise-header {
     background-color: #AFA;
 }
 /* goes after the problem name */
 #page.ever-passed .exercise-header code:after {
     content: " [\002713]"
 }
}
#results pre {
    background-color: rgba(240, 240, 240, 0.5);
}

html {
  max-width: 880px;
  max-width: 110ch;
  margin: 0px auto;
  background-color: #DDD;
  padding: 0px;
}

body {
  margin: 0px;
  padding: 0px;
  box-shadow: gray 0px 0px 5px 0px;
}

#page {
  background-color: white;
  margin: 0px auto;
  min-height: 100%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#page > p:first-child {
  margin-top: 0px;
}

#submitButton {
    font-size: 110%;
    font-weight: bold;
    width: 500px;
    max-width: 100%;

}

code, pre, tt, #submitButton, .CodeMirror {
    font-family: 'Source Code Pro', monospace;
}

.exercise-header {
    font-size: 125%;
    font-weight: bold;
    margin: 10px 0px 5px 0px;
    text-align: center;
    background: #DDF;
}

p, pre {
    margin: 5px 0px;
}

#results div.testcase-desc,
#results div.no-bottom-line
 {
    border-bottom: none;
}

#results div.pass-test,
#results div.no-top-line
 {
    border-top: none;
}

/*** background colors of user input areas ***/
.inline {background-color: #FF9}
pre.block {background-color: #FF9}
pre.block span {background-color: #FF9}

.inlineL {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 49%, #ffff99 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(49%,#ffffff), color-stop(51%,#ffff99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 49%,#ffff99 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 49%,#ffff99 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 49%,#ffff99 51%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 49%,#ffff99 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffff99',GradientType=1 ); /* IE6-9 */
}

.inlineR {
background: #ffff99; /* Old browsers */
background: -moz-linear-gradient(left,  #ffff99 49%, #ffffff 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(49%,#ffff99), color-stop(51%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffff99 49%,#ffffff 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffff99 49%,#ffffff 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffff99 49%,#ffffff 51%); /* IE10+ */
background: linear-gradient(to right,  #ffff99 49%,#ffffff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff99', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

/*** background colors when selected ***/
.CodeMirror-selectedtext {background-color: #AAF;}

.CodeMirror-selectedtext.inline {background-color: #AAF;}
pre.block span.CodeMirror-selectedtext.block {background-color: #AAF;}

.CodeMirror-selectedtext.inlineL {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 49%, #ccccff 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(49%,#ffffff), color-stop(51%,#ccccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 49%,#ccccff 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 49%,#ccccff 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 49%,#ccccff 51%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 49%,#ccccff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ccccff',GradientType=1 ); /* IE6-9 */
}

.CodeMirror-selectedtext.inlineR {
background: #ccccff; /* Old browsers */
background: -moz-linear-gradient(left,  #ccccff 49%, #ffffff 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(49%,#ccccff), color-stop(51%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ccccff 49%,#ffffff 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ccccff 49%,#ffffff 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ccccff 49%,#ffffff 51%); /* IE10+ */
background: linear-gradient(to right,  #ccccff 49%,#ffffff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccccff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

/*** background colors when loking at reference solution ***/
.viewing-ref .inline {background-color: #FCE}
.viewing-ref pre.block {background-color: #FCE}
.viewing-ref pre.block span {background-color: #FCE}

.viewing-ref .inlineL {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left,  #ffffff 49%, #ffccee 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(49%,#ffffff), color-stop(51%,#ffccee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffffff 49%,#ffccee 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffffff 49%,#ffccee 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffffff 49%,#ffccee 51%); /* IE10+ */
background: linear-gradient(to right,  #ffffff 49%,#ffccee 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffccee',GradientType=1 ); /* IE6-9 */
}

.viewing-ref .inlineR {
background: #ffccee; /* Old browsers */
background: -moz-linear-gradient(left,  #ffccee 49%, #ffffff 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(49%,#ffccee), color-stop(51%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffccee 49%,#ffffff 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffccee 49%,#ffffff 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffccee 49%,#ffffff 51%); /* IE10+ */
background: linear-gradient(to right,  #ffccee 49%,#ffffff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccee', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}