body { display: block; width: 916px; margin: 0 auto; padding: 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 12pt Tahoma, Helvetica, sans-serif; } h1 { border-bottom: 1px solid #ccc; } .CodeMirror { border: 1px solid #ccc; } pre { display: block; overflow: auto; width: 100%; border: 1px solid #ccc; background: #eee; padding: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #toolbar { border: 1px solid #ccc; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)); background: -webkit-linear-gradient(#eee, #fff); background: -moz-linear-gradient(#eee, #fff); background: -o-linear-gradient(#eee, #fff); background: linear-gradient(#eee, #fff); border-top: none; } #toolbar button { margin: -1px 0 -1px -1px; } button { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); background: -webkit-linear-gradient(#fff, #eee); background: -moz-linear-gradient(#fff, #eee); background: -o-linear-gradient(#fff, #eee); background: linear-gradient(#fff, #eee); font: inherit; padding: 4px 8px; border: 1px solid #ccc; cursor: pointer; color: #000; } button[type=submit] { background: -webkit-gradient(linear, left top, left bottom, from(#efe), to(#cec)); background: -webkit-linear-gradient(#efe, #cec); background: -moz-linear-gradient(#efe, #cec); background: -o-linear-gradient(#efe, #cec); background: linear-gradient(#efe, #cec); border-color: #9c9; } button:hover { background: -webkit-gradient(linear, left top, left bottom, from(#ffe), to(#eec)); background: -webkit-linear-gradient(#ffe, #eec); background: -moz-linear-gradient(#ffe, #eec); background: -o-linear-gradient(#ffe, #eec); background: linear-gradient(#ffe, #eec); border-color: #cc9; } button:active { background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ddd)); background: -webkit-linear-gradient(#ccc, #ddd); background: -moz-linear-gradient(#ccc, #ddd); background: -o-linear-gradient(#ccc, #ddd); background: linear-gradient(#ccc, #ddd); border-color: #aaa; } #loader { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(255, 255, 255, 0.75); z-index: 999; } #spinner { width: 64px; height: 64px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 12px solid #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-top-color: transparent; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -o-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } #output { border: 1px solid #ccc; padding: 8px; margin-top: 8px; } #output h4 { margin: 0; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }