body {
  background-color: #EAEAEA;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin: 15px;
}

h5 {
  font-size: 15px;
  font-weight: bold;
}
.caption {
  background-color: #B8F8A8;
  height: 70px;
}
.captionsm {
  background-color: #B8F8A8;
  height: 30px;
}

code {
  color: #00A;
  font-size: 16px;
  font-weight: bold;
}



/* The "editor" (codemirror)  style is set in codemirror.css */

.codetext {
  color: #00A;
  font-size: 16px;
  font-weight: bold;
}

.codelines {
    font-family: 'Open Sans', sans-serif;
    color: #00A;
    font-size: 16px;
       line-height: 120%;
    background-color: #EAEAEA;
    border: none;
    resize: none;
 }

.editorframe {
    height: 260px;
    width: 450px;
    resize: both;
    overflow: hidden;

}

.codeinput {
    font-family: 'Open Sans', sans-serif;
    color: #00A;
    font-size: 16px;
    line-height: 120%;
    height: 120px;
    width: 450px;
 }
 .codesimple {
    font-family: 'Open Sans', sans-serif;
    color: #006;
    font-size: 16px;
    line-height: 120%;
    height: 18px;
    width: 250px;
 }


.pict {
     border: 1px solid #333;
     background-color: #FFFFFF;
}

.img {
   background-color: #FFFFFF;
}

.pictadjust {
     width:  98%;
     height: 98%;
     background-color: #FFFFFF;
}


.resizepict {
    resize: both;
    overflow: hidden;
    width: 30px;
    height: 30px;
     background-color: #FFFFFF;
     border: 1px solid #333;
     margin: 0px;
}

  .editor {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 120%;
    height: 250px;
    width: 450px;
 }


.input {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 120%;
    height: 150px;
    width: 450px;
 }
  .inputlarge {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 120%;
    height: 250px;
    width: 450px;
 }

 .prog2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    height: 120px;
    width: 400px;
 }
.whitekey {
   font-size: 17px;
}

.blackkey {
  font-size: 17px;
}

.drumkey {
   font-size: 17px;
}



.notecommand {

}
.stopButton {
  margin: 10px;
  background-color: #fcc;

}
.playButton {
  margin: 10px;
  background-color: #cfc;
}
.hintButton {
  margin: 10px;
  background-color: #ccf;
}

.applyButton {
  margin: 10px;
  font-size: 15px;
  background-color: #ddf;
}
.helpButton {
  margin: 10px;
  background-color: #ccf;
}

.label {
   border: 1px solid #AAA;
}

@font-face {
    font-family: music;
    src: url(res/fonts/Bravura.woff);
    unicode-range: U+E000-FFFF;
}

.musicLoad {
 font-family: music;
}