Landing ants latest inspector style branch

lib/views/juju-inspector.less

 @inspector-background-color: #333;
 @inspector-region-background-color: #282828;
+@inspector-divider-bottom: rgba(0, 0, 0, 0.3);
+@inspector-divider-top: rgba(255, 255, 255, 0.05);
+@inspector-status-border-color: #E2E2E2;
+@inspector-subtitle-color: #555555;
+
 
 .yui3-juju-inspector {
     position: absolute;
     top: 20px;
     right: 35px;
     width: 292px;
     min-height: 250px;
     background-color: @inspector-background-color;
     color: #fff;
     margin: 0; /* can be removed once the old inspector styles are removed*/
@@ skipping 33 matching lines @@
             float: left;
             margin-right: 1em;
             background: transparent url(/juju-ui/assets/images/charm_64.png) left top no-repeat;
         }
 
         .service-name {
             font-size: 16pt;
         }
     }
 
-    .status-unit-content {
-        transition: 1s, max-height 1s;
-        -webkit-transition: 1s, max-height 1s;
-        overflow: hidden;
-        /* max height is being set inline in views/service.js.
-        It is calculated on the number of units in the list.  */
-
-        &.close-unit {
-            max-height: 0px !important;
-        }
-
-        a {
-            cursor: pointer;
-        }
-    }
-
     .view-container {
         overflow: auto;
         padding: 15px;
 
         &.settings-config {
 
             .settings-wrapper {
                 position: relative;
 
                 label {
@@ skipping 223 matching lines @@
 
     .left-breakout {
         position: absolute;
         top: 0px;
         right: 292px;
         width: 500px;
         color: rgb(80, 80, 80);
         background-color: rgb(255, 255, 255);
     }
 
+
+    .viewlet-wrapper{
+        h3 {
+            border-bottom: 1px solid @inspector-divider-bottom;
+            border-top: 1px solid @inspector-divider-top;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 1.5;
+            padding: 10px 20px;
+        }
+
+        .content {
+            border-bottom: 1px solid @inspector-divider-bottom;
+            margin: 0;
+            padding: 10px;
+        }
+
+        .service-charm {
+            span {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 1.5;
+                color: @inspector-subtitle-color;
+            }
+
+            .service-name {
+                font-size: 20px;
+                font-weight: 300;
+                line-height: 1.2;
+                color: @charm-panel-background-color;
+            }
+        }
+    }
+
+    .overview-unit-list {
+        margin-left: 0;
+
+        .status-unit-header {
+            background-color: @inspector-region-background-color;
+            padding: 15px;
+            font-size: 16px;
+            cursor: pointer;
+            border-bottom: 1px solid @inspector-divider-bottom;
+            border-top: 1px solid @inspector-divider-top;
+
+            span {
+                margin-right: 5px;
+            }
+
+            ul {
+                background: white;
+            }
+        }
+
+        .status-unit-content {
+            -moz-transition: .5s, max-height .5s;
+            -webkit-transition: .5s, max-height .5s;
+            transition: .5s, max-height .5s;
+            overflow: hidden;
+            background: @charm-panel-background-color;
+            /* max height is being set inline in views/service.js.
+            It is calculated on the number of units in the list.  */
+
+            &.close-unit {
+                max-height: 0px !important;
+            }
+
+            a {
+                cursor: pointer;
+                color: @text-colour;
+                text-decoration: underline;
+            }
+
+            ul {
+                margin-left: 0;
+                border-bottom: 1px solid @charm-panel-border-color;
+            }
+
+            li {
+                list-style-type: none;
+                padding: 7px 0 7px 10px;
+                border-top: 1px solid @inspector-status-border-color;
+            }
+
+            input[type="checkbox"] {
+                margin-right: 10px;
+            }
+
+            button.unit-action-button,
+            input[type="checkbox"] {
+                .create-border-radius(@border-radius);
+                .create-box-shadow(0 2px 2px -2px #777 inset);
+                background: @charm-panel-series-color;
+            }
+
+            button.unit-action-button {
+                border: 0;
+                padding: 5px;
+                width: 70px;
+                text-align: center;
+                margin: 20px 3px 0;
+            }
+            button.resolve {
+                margin-left: 25px;
+            }
+        }
+    }
+
 }