html { height: 100%; } body { font-family: 'Lato', sans-serif; font-weight: 300; overflow: hidden; padding: 0; margin: 0; /*position: relative;*/ font-size: 14px; /*height: 100%;*/ display: block; } #container { height: 100%; } .playground-container { position: absolute; top: 48px; bottom: 0; left: 0; right: 0; /*background: #DFDFD5;*/ } #header { height: 48px; /*background: #4679bd;*/ background: #222; } #header-title { color: #00d8ff; font-size: 24px; line-height: 48px; /*height: 50px;*/ padding-left: 10px; vertical-align: middle; display: inline-block; } .title-link { float: left; margin-top: -3px; margin-right: 5px; } .title-link, .title-link:hover, .title-link:visited { text-decoration: none; color: #00d8ff; } #buttons-bar { padding-left: 40px; display: inline-block; } #buttons-bar button { font-weight: 400; } #buttons-bar button, #buttons-bar div { margin-right: 10px; } .toolbar-dropdown { display: inline-block; } .button-icon { margin-right: 5px; } .nav-site { position: absolute; top: 0; right: 0; } .nav-site li { margin: 0; display: inline-block; } .nav-site a { padding: 0 8px; text-transform: uppercase; letter-spacing: 1px; line-height: 50px; display: inline-block; height: 50px; color: #aaa } .nav-site a:hover { color: #fafafa } .nav-site a.active { color: #fafafa; border-bottom: 3px solid #cc7a6f; background: #333 } .fiddle { height: 100%; } .CodeMirror { height: 100%; /*border: 1px solid black;*/ } .large-text-area { width: 100%; height: 100%; /*height: 300px;*/ /*display: block;*/ /*margin: 10px;*/ border: 1px solid #ddd; border-radius: 4px 4px 4px 4px; /*height: 400px;*/ /*min-height: 100px;*/ /*height: 100%;*/ /*margin: 10px;*/ } .sample-view { height: 100%; border: 1px solid #ddd; background-color: #f8f8f5; } .sample-view button { margin: 5px; } .sample-view input[type=checkbox] { margin-right: 5px; } .playground { height: 100%; width: 100%; } .CodeMirror-wrap { border: 1px solid #ddd; /*border-radius: 4px 4px 4px 4px;*/ /*height: 400px;*/ /*min-height: 100px;*/ /*height: 100%;*/ /*margin: 10px;*/ } .fiddle-row { overflow: hidden; } .code-area { width: 50%; float: left; position: relative; padding: 5px; } .result-area-form { padding: 5px; margin: 10px 20px; } .error-panel { /*padding: 4px; */ padding-left: 20px; /* position: static; */ color: red; background: #f7f7f7; border-bottom: 1px solid #000; } .message { position: absolute; bottom: 500px; left: 200px; z-index: 30; background-color: aliceblue; opacity: 0.9; } /*position: relative; min-height: 100%;*/ .code-area::after { content: ''; position: absolute; top: 5px; right: 5px; font-size: 11px; padding: 2px 5px; border: 1px solid #ddd; color: #b4b4b4; background: rgba(255, 255, 255, 0.5); pointer-events: none; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; } /*.code-area:hover::after{ opacity:0.2; }*/ #area-rt::after { content: 'Template'; } #area-code::after { content: 'Class'; } #area-generated::after { content: 'Generated Code'; } #area-result::after { content: 'Result'; }