* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background: white;
    letter-spacing: 2px;
}

ul {
    margin: 5px 0 5px 25px;
}

a {
    color: #007AB7;
}

hr {
    border: dashed 0 #dcdcdc;
    border-width: 1px 0 0;
    margin: 20px 0;
}

pre code {
    padding: 15px;
    display: block;
}

table {
    width: 100%;
}
th {
    text-align: left;
}

#sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    
    padding: 15px 0 30px 15px;
    border-right: 1px solid #BBB;

    font-size: 14px;

    background: #f7fcfe;
}

#sidebar h1 {
    font-family: 'Arial';
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
    text-shadow: 0 0 1px #999;
}

#footer a {
    margin: 5px;
    font-size: 12px;
}

#index {

}

#index h2 {
    margin-top: 20px;
    font-size: 14px;
}

#index ul {
    list-style-type: circle;
}

#index li {
    line-height: 20px;
}

#index span {
    margin-left: 5px;
    font-weight: normal;
}

#main {
    width: 700px;
    margin: 40px 0 50px 245px;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
}

#main h1 {
    color: #666;
    padding-bottom: 8px;
    margin-bottom: 0;
    font-family: 'Arial';
    font-size: 32px;
    font-weight: normal;
    text-shadow: 0 0 1px #ccc;
    border: solid 0 #E1E1E8;
    border-width: 0 0 1px 0;
}

#main h1 + p {
    line-height: 20px;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 15px;
}

#main h1 + p .label {
    float: right;
}

#main h1:nth-of-type(n+2) {
    margin-top: 50px;
}

#main h2 {
    font-size: 16px;
    font-weight: normal;
    margin: 40px 0 15px;

    letter-spacing: 8px;
}

#main h3 {
    margin: 10px 0 0px;
    font-size: 14px;
}

#main h4 {
    font-size: 12px;
}

#main h5 {
    
}

#main h2 ~ p {
    margin-left: 5px;
}

#main pre + p {
    margin-top: 15px;
}

#main canvas {
    border: solid 1px #E1E1E8;
    margin-left: 25px;
    float: right;
    margin-bottom: 10px;
}

#main ul {
    margin: 0;
    list-style-type: none;
    line-height: 20px;
}

#main ul ul {
    margin: 0 0 10px 15px;
    list-style-type: none;
}

#main code {
    color: #028760;
    font-family: 'Courier', monospace;
}

#main a code {
    color: #007AB7;
}

#main em {
    color: #666;
    font-size: 12px;
}

.label {
    margin: 5px 0 0 5px;
    font-style: normal;
    font-size: 12px;
    background: #a0a0a0;
}

.ar {
    background: #E38692;
}

.kr {
    background: #6EB7DB;
}

.editor {
    clear: both;    
    margin: 15px 0;
}

.CodeMirror {
    border: solid 1px #c0c0c0;
    font-family: 'Courier', monospace;
    font-size: 12.025px;
    background: #ededed;
    line-height: 18px;
}

.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

.codemirror button {
    margin-top: 2px;
    float: right;
}

.label {
    color: white;
    padding: 0 4px;
    font-size: 8px;
    font-weight: bold;
    border-radius: 3px;
}
.play-button {
    width:80px;
}