console.css

* { margin: 0; padding: 0; }
html { height: 100%; background: #fff; }
body { height: 100%; overflow: hidden; border: 0; margin: 0; padding: 0; font-family: "helvetica neue", arial, helvetica;  }
input, textarea { margin: 0; padding: 0; position: relative; font-size: 18px; padding: 2px; }

#console { position: absolute; left: 0; right: 0; width: 100%; bottom: 0; overflow: auto; border-bottom: 1px solid #5B5C5B; }
#console span.gutter { float: left; display: block; width: 5px; }

#output { font-family: monospace; list-style: none; }
#output li { margin: 5px 0; padding: 10px; border-top: 1px solid #EEEFEE; white-space: pre-wrap; }
#output li:last-child { border-bottom: 0;}
#output > li > div { margin-left: 20px; line-height: 20px; }

/* log types */
#output .echo span.gutter:before { content: '> '; color: #3583FC; font-size: 18px; font-weight: bold; }
#output .info span.gutter:before { content: 'i '; color: #27A700; font-size: 18px; font-weight: bold; }
#output .error span.gutter:before { content: '\0000D7 '; color: #E81D20; font-size: 28px; font-weight: bold; margin-right: -10px; line-height: 24px; }
#output .response span.gutter:before { content: '« '; color: #BDC3CD; font-size: 18px; font-weight: normal; margin-right: -10px; line-height: 18px; }

/* if response is directly next to echo, don't give it a line - only consoles get lines */
#output li.echo + li.response { border-width: 0px; }

/* hard line on new echo */
#output li.response + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.error + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.log + li.echo { border-width: 2px; border-color: #DFDFDF; }
#output li.info + li.echo { border-width: 2px; border-color: #DFDFDF; }

#output li.echo:first-child { border-width: 0;}

iframe { display: none; }

/* input style */
#exec { resize: none; font-family: monospace; position: absolute; left: 0; right: 0; border: 0; padding: 5px; outline: 0; background: #eee; -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,.3); background: #E6E8F2; color: #000; border-bottom: 1px solid #AAABB8; height: 24px; line-height: 24px; overflow: hidden; }

/* footer, credit, etc */
#footer { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; background: #000; background-color: rgba(158, 158, 158, 0.8); color: #9E9F9E; color: rgba(158, 158, 158, 0.5); width: 100%; padding: 5px; color: #fff;  text-shadow: 1px 1px 0 #000; line-height: 24px; border-top: 1px solid #CED1CE; -webkit-transition: background-color ease-out 100ms; -moz-transition: background-color ease-out 100ms; -o-transition: background-color ease-out 100ms; transition: background-color ease-out 100ms; }
#footer:hover { background: #9E9F9E; }
#footer a { text-transform: lowercase; margin: 0 5px; color: #fff; text-decoration: none; text-shadow: 1px 1px 0 #000; }

/* font size control */
#console { top: 35px; bottom: 35px; }
#output li, #exec { min-height: 24px; font-size: 18px; padding: 5px; }

/* code complete visual tweaks */
#cursor { display: inline-block; height: 24px; min-width: 1px; outline: 0; top: 0; left: 0; z-index: 999;}
#exec { cursor: text; }
#exec .suggest { color: #999; }

/* large command input */
body.large #console { top: 0; right: 400px; width: auto; }
body.large form { right: 0; width: 400px; bottom: 0; }
body.large #exec { width: 390px; border-bottom: 0; top: 0; bottom: 0; height: 100%; z-index: 10; background: #E6E8F2; color: #000; -webkit-box-shadow: none; border-left: 1px solid #AAABB8; left: auto; }

/* syntax highlighting */
/** Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
.error .str { color: #E81D20;}

/* difference display types */

/* iPhone type display */
@media screen and (max-device-width: 480px) {
/*@media screen and (max-width: 480px) {  */
  html, body { height: auto; overflow: visible; }
  #console { overflow: visible; bottom: 0; border-bottom: 0;  }
  input,textarea { -webkit-border-radius: 0; } /* webkit-mobile adds rounded corners :( */
  #footer { display: none; }

  #exec { font-weight: bold; padding-right: 10px; }

  #output li { min-height: 20px; font-size: 14px; padding: 0 5px; }
  #output > li > div { margin-left: 10px; line-height: 18px; }
  
  #output > li:last-child { padding-bottom: 0; margin-bottom: 0; }
  
  #output .echo { padding-top: 5px; }
  #output .echo span.gutter:before,
  #output .info span.gutter:before,
  #output .response span.gutter:before { font-size: 14px; line-height: 18px; height: 14px; }
  #output .error span.gutter:before { font-size: 18px; line-height: 18px; }
}

/* allow the debug to be printed */
@media print {
  body { overflow: auto; }
  #console { overflow: visible; }
}

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}