more styling

frontend/styles/main.less

@@ -1,7 +1,10 @@
 @import "form.less";
 
+@default-font: "Open Sans";
+
 @color-black: #000000;
 @color-white: #eeeeee;
+@color-grey: #b3b2b2;
 @color-main: #097479;
 @color-main-light: #0eb8c0;
 @color-container: #333333;
@@ -18,6 +21,7 @@
 .sui {
     background: @color-black;
     color: @color-main-light;
+    font-family: @default-font;
     
     * {
         margin: 0;
@@ -31,11 +35,14 @@
         display: block;
     }
     
-    input,
-    button {
+    input {
         padding: .5em;
     }
     
+    button {
+        padding: .8em;
+    }
+    
     > .content {
         padding: @default-padding;
         .heading {
@@ -56,19 +63,22 @@
                         cursor: pointer;
                     }
                 }
-                .content {
+                > .content {
                     .hidden;
                 }
                 &.open {                
                     > .heading {
                         margin-bottom: @default-margin;
                     }
-                    .content {
+                    > .content {
                         .shown;
                     }
                 }
             }
         }
+        label {
+            color: @color-grey;
+        }
         input[type="text"], input[type="password"] {
             height: @input-text-height;
             background: transparent;
@@ -83,6 +93,9 @@
         input[type="checkbox"] {
             transform: scale(@input-checkbox-scale);
         }
+        input[type="range"] {
+            padding: 0;
+        }
         button {
            background: @color-main;
            color: white;
@@ -91,3 +104,8 @@
         
     }
 }
+
+.spiro-control {
+    .form-row .info {
+    }
+}