body {
    position: absolute ; top: 0 ; left: 0 ; bottom: 0 ; right: 0 ;
    overflow: hidden ;
    display: flex ; background: #f0f0f0 ;
}
ul, ol { margin-top: 0.25em ; }
.quote { font-style: italic ; color: #666 ; }

#left { flex: 1 ; margin-right: 1em ; }
#qa { margin-top: 0.5em ; overflow: auto ; background: white ; }
#right { display: flex ; flex-direction: column ; flex: 1 ; }
#html-preview { flex: 1 ; }
#json-preview { height: 15em ; min-height: 15em ; }

#qa { border: 1px solid #444 ; }
#qa .rules { height: 1.8em ; padding: 2px 5px ; border: 1px solid #666 ;  }
#qa .qa { margin: 0.5em ; padding: 0.5em ; border: 1px dotted #666 ; background: #ffffe0 ; }
#qa .qa textarea { display: block ; width: calc(100% - 1em) ; resize: vertical ; min-height: 3em ; padding: 2px 5px ; }
#qa .qa textarea.question { height: 8em ; }

#html-preview { border: 1px solid #444 ; margin-bottom: 1em ; padding: 0.5em ; overflow: auto ; background: white ; }
#html-preview .question { clear: both ; }
#html-preview .answer { clear: both ; margin-top: 0.5em ; }
#html-preview img { float: left ; margin: 0 0.5em 0.5em 0 ; }

#json-preview { border: 1px solid #444 ; padding: 0.5em ; overflow: auto ; background: white ; }
#json-preview { font-family: monospace ; white-space: pre-wrap ; }

button#copy-json { position: absolute ; bottom: 5px ; right: 5px ; z-index: 10 ; }
button#add-qa { margin-left: 0.5em ; padding: 0 ; }
