Refactoring of just about everything, interface beginning to come together

app/less/list.less

@@ -1,61 +1,84 @@
 .list {
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  float: left;
+  overflow: hidden;
+  padding: 5px;
+  cursor: default;
+  position: relative;
+  font-size: 0.8em;
 
-  .list-item {
+  .header {
+    position: absolute;
+    width: 100%;
+    height: 1.6em;
+    font-family: @fTitle;
+    color: @primary;
+    text-transform: uppercase;
+  }
 
+  .items {
+    margin-top: 25px;
+    margin-bottom: 10px;
     clear: both;
     overflow: hidden;
-    margin: 3px 0px;
+
+    .item {
+      clear: both;
+      margin: 1px 0 0;
+      overflow: hidden;
+
+      .val {
+        float:right;
+        text-align: right;
+      }
+
+      .lbl {
+        float: left;
+      }
+      color: @disabled;
+      cursor: pointer;
+
+      &:hover {
+        color: @warning-disabled;
+      }
+
+      &.enabled {
+        color: @fg;
+        &:hover {
+          color: @warning;
+        }
+      }
+
+      &.consumer {
+        .val:before {
+          content: "-";
+        }
+      }
+
+      &.untoggleable {
+        cursor: default;
+      }
+    }
   }
 
-  .val {
-    float:right;
+  .summary {
+    font-family: @fStandard;
+    overflow: hidden;
     text-align: right;
+
+    .item {
+      float:right;
+      width: 25%
+    }
+    .lbl {
+      font-family: @fTitle;
+      color: @primary;
+      text-transform: uppercase;
+    }
   }
 
-  .lbl {
-    float: left;
+  &:nth-child(n+2) {
+    border-top: 1px solid @primary;
   }
 
 }
 
 
-#cost-list {
-  color: grey;
-  width: 300px;
-
-  .list-item {
-    cursor: pointer;
-  }
-
-  .enabled {
-    color: #FFF;
-  }
-}
-
-
-#power-list {
-  color: grey;
-  width: 300px;
-
-  .enabled {
-    color: #FFF;
-  }
-
-  .consumer {
-    cursor: pointer;
-  }
-
-  .consumer.enabled {
-    color: @fg;
-  }
-
-  .common, .internal, .hardpoints {
-
-  }
-
-}