html { box-sizing: border-box; } .widget { width: 600px; margin: 15px auto; font-size: 12px; line-height: 1.5; } .banner { text-align: center; font-size: 16px; font-style: bold; } .button-container { text-align: center; } .buttons { display: inline-block; margin: 8px 0; margin-right: 20px; outline: none; } .buttons-right { display: inline; margin: 8px 0; margin-left: 20px; outline: none; } .active { color: #fff; background-color: #3272cc; outline: none; padding: 2px 8px 3px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:none; } .start, .length { width: 50px; } .widget pre { margin: 0; padding: 0; background: inherit; border: none; } .code { margin: 0 0 6px 0; padding: 6px; border: 1px solid black; max-width: 420px; min-width: 200px; height: 200px; font-family: monospace; overflow-y: scroll; overflow-x: auto; float: left; /* disable size handle */ } .screen { float: right; } .debugger { display: inline-block; margin-top: 6px; padding: 3px; padding-top: 8px; height: 40px; text-align: center; } .minidebugger { margin: 0; margin-top: 6px; margin-left: 10px; padding: 0 10px; font-family: monospace; font-size: 11px; font-weight: 400; } .left { display: block; } .monitorControls { width: 587px; clear: both; margin-bottom: 10px; padding: 0; } .monitorControls input { margin-right: 0.5em; } .monitor-container { text-align: right; display: none; height: 110px; } .monitor { display: inline-block; margin: 10px 0; padding: 6px; border: 1px solid #999; background-color: #ddd; width: 80%; height: 100px; overflow: auto; } .monitor-range { float: left; display: inline-block; padding: 20px; height: 100px; text-align: left; width: 50px; } .monitor-invalid { border: 1px inset #c00; padding: 2px 1px; } .messages { margin: 0; padding: 6px; border: 1px solid #999; background-color: #eee; overflow: auto; width: 587px; height: 100px; text-align: left; font-size: 12px; color: #444; } @media (min-width: 600) { } @media (max-width: 200) { }