Drastically improved build page layout

app/less/app.less

@@ -29,12 +29,6 @@ body {
   margin: 0;
   padding: 0;
   font-family: @fStandard;
-  overflow-x: hidden;
-  background-image: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: scroll;
-  background-size: cover;
 }
 
 #main {

app/less/list.less

@@ -2,20 +2,30 @@
   overflow: hidden;
   padding: 5px;
   cursor: default;
-  position: relative;
   font-size: 0.8em;
+  min-width: 21em;
+  text-align: left;
+
 
   .header {
-    position: absolute;
     width: 100%;
-    height: 1.6em;
+    margin-bottom: 0.4em;
     font-family: @fTitle;
-    color: @primary;
+    color: @bgBlack;
+    background-color: @primary-disabled;
     text-transform: uppercase;
+    text-align: center;
+  }
+
+  table {
+    width: 100%;
+    text-align: right;
+    td {
+      padding-right: 0.5em;
+    }
   }
 
   .items {
-    margin-top: 25px;
     margin-bottom: 10px;
     clear: both;
     overflow: hidden;
@@ -52,20 +62,4 @@
     }
   }
 
-  .summary {
-    font-family: @fStandard;
-    overflow: hidden;
-    text-align: right;
-
-    .item {
-      float:right;
-      width: 25%
-    }
-    .lbl {
-      font-family: @fTitle;
-      color: @primary;
-      text-transform: uppercase;
-    }
-  }
-
 }

app/less/modal.less

@@ -42,8 +42,8 @@ textarea {
 
   &.json {
     display:block;
-    width:40em;
-    height: 10em;
+    width:50em;
+    height: 25em;
     resize: vertical;
     margin:2em 0;
   }

app/less/outfit.less

@@ -1,7 +1,7 @@
 
 #outfit {
-  //width: 62em;
-  //margin: 0 auto;
+  width: 64em;
+  margin: 0 auto;
 }
 
 #overview {
@@ -9,11 +9,25 @@
     margin: 0;
     float: left;
   }
+  overflow: hidden;
+}
+
+#summary {
+  .user-select-none();
+  width: 100%;
+  margin-top: 1em;
+  font-size: 0.8em;
+  border-collapse: collapse;
+
+  tbody td {
+    padding: 0 0.5em;
+  }
 }
 
 #build {
   float: right;
   line-height: 2em;
+  font-size: 0.8em;
 
   input {
     background: none;
@@ -38,6 +52,7 @@
 }
 
 #standard {
+  margin-right: 0.3em;
   .slot {
     clear: left;
   }
@@ -47,20 +62,4 @@
  .slot {
     clear: left;
   }
-}
-
-
-#summary {
-  .user-select-none();
-  margin: 0;
-  border-collapse: collapse;
-
-  tbody td {
-    padding: 0 0.5em;
-  }
-}
-
-.toggle {
-  cursor: pointer;
-}
-
+}

app/less/slot.less

@@ -1,7 +1,6 @@
 
 .slot-group {
-  float: left;
-  margin: 0.25em;
+  margin: 1em 0;
   .user-select-none();
   cursor: default;
 
@@ -13,13 +12,15 @@
     margin: 0.1em 0;
     font-size: 0.8em;
     padding-left: 0.5em;
+    font-weight: normal;
   }
 }
 
 .slot {
   float: left;
   text-align: left;
-  width: 20.5em;
+  width: 21em;
+  min-height: 2.75em;
   font-size: 0.75em;
   margin-top: 0.5em;
   position: relative;
@@ -64,7 +65,7 @@
     color: lighten(@primary-bg, 12%);
     text-align: center;
     letter-spacing: 0.1em;
-    line-height: 1.8em;
+    line-height: 1.7em;
   }
 
   &:hover{

app/less/table.less

@@ -1,9 +1,7 @@
 
 table {
-  margin: 0 auto;
   background-color: @primary-bg;
   border-spacing: 0;
-  font-size: 0.8em;
   cursor: default;
 
   a, a:visited {

app/less/utilities.less

@@ -29,19 +29,3 @@
   -ms-user-select: none;
   user-select: none;
 }
-
-.vertical {
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-
-  -webkit-transform-origin: 50% 50%;
-  -moz-transform-origin: 50% 50%;
-  -ms-transform-origin: 50% 50%;
-  -o-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-}