update for layout change

app/style.css

@@ -1,3 +1,7 @@
+html {
+  box-sizing: border-box;
+}
+
 .widget {
   width: 600px;
   margin: 15px auto;
@@ -11,8 +15,32 @@
   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 {
@@ -32,9 +60,10 @@
   border: 1px solid black;
   max-width: 420px;
   min-width: 200px;
-  height: 290px;
+  height: 200px;
   font-family: monospace;
-  overflow: auto;
+  overflow-y: scroll;
+  overflow-x: auto;
   float: left;
   /* disable size handle */
 }
@@ -44,22 +73,26 @@
 }
 
 .debugger {
-  border: 1px black solid;
+  display: inline-block;
   margin-top: 6px;
   padding: 3px;
   padding-top: 8px;
-  height: 125px;
-  width: 152px;
+  height: 40px;
   text-align: center;
-  float: right;
 }
 
 .minidebugger {
   margin: 0;
   margin-top: 6px;
-  padding: 0;
+  margin-left: 10px;
+  padding: 0 10px;
   font-family: monospace;
   font-size: 11px;
+  font-weight: 400;
+}
+
+.left {
+  display: block;
 }
 
 .monitorControls {
@@ -73,15 +106,30 @@
   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: 587px;
+  width: 80%;
   height: 100px;
   overflow: auto;
-  display: none;
+}
+
+.monitor-range {
+  float: left;
+  display: inline-block;
+  padding: 20px;
+  height: 100px;
+  text-align: left;
+  width: 50px;
 }
 
 .monitor-invalid {