Restructured API demo

openflexure_microscope/api/static/style_v1.css

@@ -0,0 +1,65 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    font-family: sans-serif;
+    font-size: 14px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+/* Preview sizing */
+img {  
+    width: 100%;
+    height: 100%;
+    object-fit: contain
+}
+
+/* Create columns that float next to each other */
+.column {
+    padding: 10px;
+    height: 100%;
+}
+
+.left, .right {
+  background-color: #f4f4f4;
+}
+
+.left{
+    width: 250px;
+    float: left;
+}
+
+.Right{
+    width: 250px;
+    float: right;
+}
+
+.middle {
+  margin-left: 250px;
+  margin-right: 250px;
+  background-color: #d3d3d3;
+}
+
+/* Clear floats after the columns */
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* Columns within panels */
+
+.left-col {
+    float:left;
+}
+.right-col {
+    float:right;
+}
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+