/* Code boxes */

.CodeMirror {
   height: auto!important;
}

pre {
   border: none;
   background-color: #fff;
   white-space: pre-wrap;
}

.CodeMirror, .resultDiv {
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: .5em;
   background-color: #fafafa;
   margin-bottom: .5em;
   font-size: 13px;
   font-family: monospace;
}

.resultDiv {
   display: none;
   max-height: 500px;
   overflow: scroll;
   margin-top: .5em;
}

.drawCanvas {
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: .5em;
   margin-bottom: .5em;
   margin-right: .5em;
   margin-top: .5em;
}

p code, li code {
   color: #333;
   background-color: #fafafa;
   border: 1px solid #dcdcdc;
   border-radius: 4px;
   padding: 1px;
   padding-left: 3px;
   padding-right: 3px;
}


/* Editor */

div#editorBlocks {
   margin-top: 5em;
}

div#editorControls {
   margin-top: 30px;
   width: 100%;
   text-align: right;
}

div#editorButtons {
   margin-top: 1em;
   display: block;
   text-align: right;
}

div#editorControls div#fileSelector {
   float: left;
}

div#editorControls button {
   margin-left: 5px
}

div#fileSelector span {
   margin-right: 5px;
}

div#fileSelector select {
   margin-right: 5px;
}

div.editorBlock {
   position: relative;
}

button.removeBlock, button.moveUp, button.moveDown {
   position: absolute;
   opacity: 0.3;
   left: -30px;
   font-size: 10px;
   width: 30px;
   height: 17px;
}

.codeBlock button.removeBlock {
   top: 10px;
}
.codeBlock button.moveUp {
   top: 25px;
}
.codeBlock button.moveDown {
   top: 40px;
}

.markdownBlock button.removeBlock {
   top: 0px;
}
.markdownBlock button.moveUp {
   top: 15px;
}
.markdownBlock button.moveDown {
   top: 30px;
}

div.currentBlock button.removeBlock,
   div.currentBlock button.moveUp,
      div.currentBlock button.moveDown {
         opacity: 1;
      }

.editorBlock textarea {
   display: block;
   border: none;
   border-left: 2px dotted #ccc;
   margin: 9.5px;
   padding-left: .5em;
   background-color: #fff;
   margin-bottom: .5em;
   width: 100%;
}

textarea#editorMarkdown {
   background-color: #fff;
   width: 90%;
   font-family: monospace;
   font-size: 13px;
   padding: .5em;
   border: 1px solid #ccc;
   margin: 4em;
}

.markdownBlock textarea {
   opacity: 0;
   position: absolute;
   z-index: -10;
}

.markdownBlock .preview {
   opacity: 1;
   margin: 9.5px;
   position: relative;
   z-index: 10;
   min-height: 40px;
}

.markdownBlock.currentBlock .preview {
   opacity: 0;
   position: absolute;
   z-index: -10;
}

.markdownBlock.currentBlock textarea {
   opacity: 1;
   position: relative;
   z-index: 10;
}


/* CPS and addressing live-updating forms */

div#cpsTransform textarea, div#namingTransform textarea {
   width: 100%;
   min-height: 50px;
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: .5em;
   background-color: #fafafa;
   margin: 0.5em 0.5em 0.5em 0;
   font-size: 13px;
   font-family: monospace;
}


/* Bar chart */

svg.barChart {
   display: block;
   background-color: #fff;
   border: 1px solid #ccc;
   margin: 1em auto;
   width: 590px;
   height: 340px;
}

rect.dimple-bar {
   fill: #357594;
   stroke: #224E61;
}
