draft styles for problem type header closer, need design consistency/standards review to proceed

cms/static/sass/_unit.scss

@@ -4,9 +4,9 @@
 }
 
 //Problem selector requirements - TO DO: Marco -determine placement, integration for this
-//.js .tabs .tab {
-// display: none;
-//}
+.js .tabs .tab {
+ display: none;
+}
 //end problem selector reqs
 
 .main-column {
@@ -149,8 +149,8 @@
 
           a {
             position: relative;            
-            border: 1px solid $lightBluishGrey2;
-            background: tint($mediumGrey,20%);
+            border: 1px solid $mediumGrey;
+            background: tint($lightBluishGrey2,20%);
             color: #fff;            
             @include transition(background-color .15s);
 
@@ -164,27 +164,36 @@
           list-style-type: none;
           display: inline-block;
           width: 100%;
-          margin: 5px;
+          border-bottom: 1px solid $mediumGrey;
+          margin-bottom: 20px;
+          padding-bottom: 10px;
+          background:none;
 
           .problem-type-label {
-            font-size: 16px;
+            font-size: 14px;
+            font-style: italic;
+            color:#B0B6C2;
           }
 
           li {
             display:inline-block;
             margin: 5px;
+            width: 150px;
             text-align:center;
+            border: 1px $mediumGrey;
+            @include border-radius(5px 0 0 5px);
+
+            &.current {
+              background: #fff;
+
+            }
           }
           a{
-            width: 100px;
-            height: 60px;
-            margin-right: 10px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            font-size: 13px;
-            line-height: 14px;
+            padding: 4px 10px;
+            border-radius: 3px;
+            font-size: 16px;
+            line-height: 16px;
             text-align: center;
-            @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
           }
         }
 
@@ -258,10 +267,10 @@
             margin-bottom: 10px;
 
             a {
-              border-bottom: 1px solid $lightBluishGrey2;
+              border-bottom: 1px solid $mediumGrey;
               border-radius: 3px;
               font-weight: 500;
-              background: tint($mediumGrey,20%);
+              background: tint($lightBluishGrey2,20%);
 
               &:hover {
               background: $brightGreen;

cms/templates/unit.html

@@ -78,7 +78,6 @@
                       <div class="tabs">
                         <div class="tab current" id="tab1">
                           <ul class="new-component-template">
-                              <span> Tab 1 </span>
                               % for name, location, has_markdown, is_empty in templates:
 
                                  % if is_empty:
@@ -103,7 +102,6 @@
                         </div>
                         <div class="tab" id="tab2">
                           <ul class="new-component-template" id="tab2">
-                          <span> Tab 2 </span>
                               % for name, location, has_markdown, is_empty in templates:
 
                                  % if is_empty: