div.codesexp, div.circleevalsexp, .editbox, .cm-s-scheme {
  width:      100%;
  margin:     0px 3px;
  padding:    0px;
  font-family:"Droid Sans Mono", Monaco, monospace;
  font-size:  10pt;
  color:      #666666;
  font-style: normal;
  clear:      both;
}

div.codesexp .expression {position: relative;}

/*******************************************
  PrettyPrint Structured Output
  - style using float: left, to allow text-alignment flow
  - everything has a left-padding of 10px, which provides spacing and indenting --delete 
  - if an expr is wrapped, every element clears left
*/

/* div.codesexp *, .replOutput > * {float: left; padding-left: 10px;} */
div.codesexp *, .replOutput > * {float: left; padding-left: 0px;}
.replOutput br{float: none;}
.wrapped > * {clear: left;}

/* Rationals, Parens, and first child after lParen NEVER have padding or clearing */
.Rational *, 
div.codesexp .lParen,   .replOutput .lParen,
div.codesexp .rParen,   .replOutput .rParen,
div.codesexp .lParen+*, .replOutput .lParen+*{
  padding-left: 0px; clear: none;
}


/* The rParen after a wrapped expression should be aligned to the bottom-right
   of that expression, pushed over by 1em */
.wrapped{padding-right: 1em;}
.wrapped .rParen{
 position: absolute;
 bottom: 0px;
 right: 0px;
 vertical-align: bottom;
}


/* for IE, in which Canvases actually have children */
canvas.replOutput * {padding-left: 0px; clear: none;}
/************************************************
Define coloring for basic WeScheme types, and re-use them for our CM instances 
*/
.wescheme-string,     .cm-scheme-string    {color: green;}
.wescheme-number,     .cm-scheme-number    {color: blue;}
.wescheme-boolean,    .cm-scheme-boolean   {color: darkred;}
.wescheme-character,  .cm-scheme-character {color: orange;}
.wescheme-symbol,     .cm-scheme-symbol    {color: steelblue;}
.wescheme-comment,    .cm-scheme-comment   {color: orange; }
.CodeMirror {font-family: "Droid Sans Mono", Monaco, monospace;}

/************************************************
Define coloring for basic Pyret types, and re-use them for our CM instances 
*/
.cm-s-default.CodeMirror      { color: black; }
.cm-comment     { color: #cd7054; }
.cm-boolean     { color: darkred; }
.cm-builtin     { color: #555; }
.cm-variable    { color: #4d5966; }
.cm-keyword     { color: black; font-weight: bold; }
.cm-number      { color: navy; }
.cm-roughnum    { color: blue; }
.cm-bad-number  { color: red; font-weight: bold; }
.cm-string      { color: forestgreen; }
.cm-type        { color: #374049; }
.cm-function-name { color: #374049; }
.cm-unterminated-string { color: red; font-weight: bold; }
.cptteach-fixed { line-height: 1.5; background: #ddd; }

/* CM-only stuff */
span.cm-scheme-punctuation                 {color: black;}
span.cm-scheme-rparen                      {color: black;}


/* Pyret Tables */
table.datatable {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    display: table!important;
    border:1px black solid;
    border-radius:1em;
    overflow:hidden;
    background:#eee;;
}
table.datatable tbody tr td {
    text-align: left;
    font-family: monospace;
    padding: 1em;
    width: auto;
    border-width: 0px;
    border-right: 1px white solid;
  }

}
table.datatable tbody{} /* for some reason this rule needs to be here for the next one to "take" */
table.datatable tbody tr:nth-child(odd){ background-color: #e3e3e3; }
table.datatable tbody tr:first-child {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  background: #ddd;
  font-weight: normal;
}

@media print {
  .wescheme-string,     .cm-scheme-string    {color: black;}
  .wescheme-number,     .cm-scheme-number    {color: black;}
  .wescheme-boolean,    .cm-scheme-boolean   {color: black;}
  .wescheme-character,  .cm-scheme-character {color: black;}
  .wescheme-symbol,     .cm-scheme-symbol    {color: black;}
  .wescheme-comment,    .cm-scheme-comment   {color: black;}
}