.CodeMirror {
    line-height:1em;
    font-family:monospace;
    position:relative;
    overflow:hidden}
.CodeMirror-scroll {
    overflow-x:auto;
    overflow-y:hidden;
    height:300px;
    position:relative;
    outline:0}
.CodeMirror-scrollbar {
    float:right;
    overflow-x:hidden;
    overflow-y:scroll;
    margin-left:-1px}
.CodeMirror-scrollbar-inner {
    width:1px}
.CodeMirror-scrollbar.cm-sb-overlap {
    position:absolute;
    z-index:1;
    float:none;
    right:0;
    min-width:12px}
.CodeMirror-scrollbar.cm-sb-nonoverlap {
    min-width:12px}
.CodeMirror-scrollbar.cm-sb-ie7 {
    min-width:18px}
.CodeMirror-gutter {
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    background-color:#f7f7f7;
    border-right:1px solid #eee;
    min-width:2em;
    height:100%}
.CodeMirror-gutter-text {
    color:#aaa;
    text-align:right;
    padding:.4em .2em .4em .4em;
    white-space:pre!important}
.CodeMirror-lines {
    padding:.4em;
    white-space:pre;
    cursor:text}
.CodeMirror-lines * {
    pointer-events:none}
.CodeMirror pre {
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
    border-radius:0;
    border-width:0;
    margin:0;
    padding:0;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    padding:0;
    margin:0;
    white-space:pre;
    word-wrap:normal;
    line-height:inherit;
    color:inherit}
.CodeMirror-wrap pre {
    word-wrap:break-word;
    white-space:pre-wrap;
    word-break:normal}
.CodeMirror-wrap .CodeMirror-scroll {
    overflow-x:hidden}
.CodeMirror textarea {
    outline:none!important}
.CodeMirror pre.CodeMirror-cursor {
    z-index:10;
    position:absolute;
    visibility:hidden;
    border-left:1px solid black;
    border-right:0;
    width:0}
.cm-keymap-fat-cursor pre.CodeMirror-cursor {
    width:auto;
    border:0;
    background:transparent;
    background:rgba(0,200,0,.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800,endColorstr=#4c00c800)}
.cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id) {
    filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.CodeMirror-focused pre.CodeMirror-cursor {
    visibility:visible}
div.CodeMirror-selected {
    background:#d9d9d9}
.CodeMirror-focused div.CodeMirror-selected {
    background:#d7d4f0}
.CodeMirror-searching {
    background:#ffa;
    background:rgba(255,255,0,.4)}
.cm-s-default span.cm-keyword {
    color:#708}
.cm-s-default span.cm-atom {
    color:#219}
.cm-s-default span.cm-number {
    color:#164}
.cm-s-default span.cm-def {
    color:#00f}
.cm-s-default span.cm-variable {
    color:black}
.cm-s-default span.cm-variable-2 {
    color:#05a}
.cm-s-default span.cm-variable-3 {
    color:#085}
.cm-s-default span.cm-property {
    color:black}
.cm-s-default span.cm-operator {
    color:black}
.cm-s-default span.cm-comment {
    color:#a50}
.cm-s-default span.cm-string {
    color:#a11}
.cm-s-default span.cm-string-2 {
    color:#f50}
.cm-s-default span.cm-meta {
    color:#555}
.cm-s-default span.cm-error {
    color:#f00}
.cm-s-default span.cm-qualifier {
    color:#555}
.cm-s-default span.cm-builtin {
    color:#30a}
.cm-s-default span.cm-bracket {
    color:#cc7}
.cm-s-default span.cm-tag {
    color:#170}
.cm-s-default span.cm-attribute {
    color:#00c}
.cm-s-default span.cm-header {
    color:blue}
.cm-s-default span.cm-quote {
    color:#090}
.cm-s-default span.cm-hr {
    color:#999}
.cm-s-default span.cm-link {
    color:#00c}
span.cm-header,span.cm-strong {
    font-weight:bold}
span.cm-em {
    font-style:italic}
span.cm-emstrong {
    font-style:italic;
    font-weight:bold}
span.cm-link {
    text-decoration:underline}
div.CodeMirror span.CodeMirror-matchingbracket {
    color:#0f0}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color:#f22}
.speech-bubble-green {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#000;
    background:#1c3;
    background:-webkit-gradient(linear,0 0,0 100%,from(#f0eaf2),to(#a286c4));
    background:-moz-linear-gradient(#f0eaf2,#a286c4);
    background:-o-linear-gradient(#f0eaf2,#a286c4);
    background:linear-gradient(#f0eaf2,#a286c4);
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px}
.speech-bubble-green:before {
    content:"";
    position:absolute;
    bottom:-30px;
    left:50px;
    border-width:0 0 30px 50px;
    border-style:solid;
    border-color:transparent #a286c4;
    display:block;
    width:0}
.speech-bubble-green:after {
    content:"";
    position:absolute;
    bottom:-30px;
    left:50px;
    border-width:0 0 30px 20px;
    border-style:solid;
    border-color:transparent #fff;
    display:block;
    width:0}
.speech-bubble-red {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#000;
    background:#f59;
    background:-webkit-gradient(linear,0 0,0 100%,from(#4dd),to(#d59));
    background:-moz-linear-gradient(#4dd,#d59);
    background:-o-linear-gradient(#fdd,#f59);
    background:linear-gradient(#4dd,#d59);
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px}
.speech-bubble-red:before {
    content:"";
    position:absolute;
    bottom:-30px;
    left:50px;
    border-width:0 0 30px 50px;
    border-style:solid;
    border-color:transparent #f59;
    display:block;
    width:0}
.speech-bubble-red:after {
    content:"";
    position:absolute;
    bottom:-30px;
    left:50px;
    border-width:0 0 30px 20px;
    border-style:solid;
    border-color:transparent #fff;
    display:block;
    width:0}
body {
    font-family:Arial,sans-serif;
    line-height:1.5;
    width:810px;
    margin:10px auto;
    padding:0 1em}
iframe {
    width:400px;
    float:left;
    height:300px;
    border:1px solid black;
    border-left:0}
.CodeMirror {
    float:left;
    width:400px;
    height:300px;
    border:1px solid black;
    font-size:12px}
.button {
    text-align:center;
    font-size:10px;
    line-height:1;
    font-weight:700;
    padding:4px 6px;
    position:relative;
    display:inline-block;
    text-decoration:none;
    background-color:#f5f5f5;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e7e7e7));
    background-image:-webkit-linear-gradient(top,#f5f5f5,#e7e7e7);
    background-image:-moz-linear-gradient(top,#f5f5f5,#e7e7e7);
    background-image:-ms-linear-gradient(top,#f5f5f5,#e7e7e7);
    background-image:-o-linear-gradient(top,#f5f5f5,#e7e7e7);
    color:#888;
    border-radius:3px;
    box-shadow:0 2px 4px #aaa,inset 0 2px 4px #fff;
    cursor:pointer}
.button:hover {
    color:#555}
.button:active {
    color:#333;
    background:#f5f5f5;
    box-shadow:0 1px 2px #aaa,inset 0 1px 2px #fff}
.errorLine {
    background:#e8f2ff!important}
.not-selectable {
    -moz-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    user-select:none}
#lesson-section {
    font-size:12px;
    color:#777;
    font-weight:700}
#lesson-number {
    font-size:10px;
    line-height:1;
    margin:10px;
    color:#555}
#tutor {
    width:100%;
    height:200px}
#tutor-avatar {
    width:200px;
    float:left;
    cursor:pointer}
#tutor-talk {
    width:600px;
    float:left;
    cursor:pointer;
    font-size:16px}
.tutor-code {
    font-family:monospace;
    cursor:pointer;
    font-size:14px}
#code-errors {
    display:none;
    font-size:14px;
    color:#f37}
#info-links {
    display:block;
    text-align:center;
    margin:20px;
    font-size:11px;
    color:#888;
    cursor:default}
.info-link {
    cursor:pointer}
.info-link:hover {
    color:#555}
.info-link:active {
    color:#222}
#simplemodal-overlay {
    background-color:#fff;
    opacity:.85}
#simplemodal-container {
    border:7px solid #aaa;
    border-radius:4px;
    padding:12px;
    background-color:#fff;
    opacity:1;
    font-size:12px;
    cursor:pointer}
#simplemodal-container h3 {
    font-size:14px;
    font-weight:bold}
.simplemodal-closex {
    position:absolute;
    top:-6px;
    right:-6px;
    z-index:3200;
    cursor:pointer;
    color:#999;
    border:4px solid #aaa;
    border-radius:30px;
    background:#fff;
    font-size:14px;
    font-weight:bold;
    line-height:1em;
    padding:0 3px;
    cursor:pointer}
.simplemodal-closex:hover {
    color:#777}
.simplemodal-closex:active {
    color:#555}