got truncating tabs all figured still need to work on dropdown

h/css/base.scss

@@ -144,22 +144,6 @@ $em: 14 / 1em !default;
   }
 }
 
-@mixin tabbox {
-  @include box-shadow(2px -10px 13px -8px hsla(0, 0%, 0%, .1) inset);
-  background: hsla(0, 0%, 99%, 1);
-  border-top-right-radius: 2em 5em;
-  border-top-left-radius: 2em 5em;
-  color: #999;
-  border: 1px solid $grayLighter;
-  border-bottom: none;
-  &:hover {
-    background: white;
-  }
-  &:active {
-    @include box-shadow( none );
-  }
-}
-
 
 
 //ICON IMAGES////////////////////////////////

h/css/common.scss

@@ -353,99 +353,106 @@ blockquote {
 
 
 //TABS////////////////////////////////
-// .nav-tabs {
-//   @include pie-clearfix;
-//   margin: 0 .5em;
-
-//   & > li > a {
-//     cursor: pointer;
-//     float: left;
-//     line-height: 1;
-//     padding: .5em 1em;
-//     padding-top: .25em;
-//     margin-right: -.5em;
-//     margin-bottom: 0px;
-//     position: relative;
-//     text-decoration: none;
-//     @include tabbox;
-//   }
-
-//   & > .active > a {
-//     @include box-shadow(none);
-//     color: #333;
-//     font-weight: bold;
-//     background: hsla(0, 0%, 100%, 1);
-//     z-index: 90;
-//   }
-// }
-
-.tab-pane {
-  background: $bodyBackground;
-  border: solid thin $grayLighter;
-  display: none;
-  margin-top: -1px;  // Pull up and under tabs
-  padding: 1em;
-  position: relative;
-
-  &.active {
-    display: inherit !important;
-  }
-}
-
-
-
 .nav-tabs {
-  @include pie-clearfix;
   width: 100%;
   font-family: sans-serif;
   & > li {
-
-    float: left;
-    overflow: hidden;
     position: relative;
-    @include tabbox;
+    display: inline-block;
+    overflow: hidden;
     margin-right: -.5em;
-    padding-top: .25em;
-    padding-bottom: .5em;
-    &::after {
+    background: hsla(0, 0%, 99%, 1);
+    border-top-right-radius: 2em 5em;
+    border-top-left-radius: 2em 5em;
+    border: 1px solid $grayLighter;
+    border-bottom: none;
+    & > a {
+      overflow: hidden;
+      display: inline-block;
+      white-space: nowrap;
+      padding: .5em 1em;
+      color: #999;
+      text-decoration: none;
+    }
+    &::before {
       content: "";
-      background-image: -webkit-linear-gradient(right, white, white, rgba(255, 255, 255, 0));
+      @include background( linear-gradient(right, hsla(0, 0%, 99%, 1), hsla(0, 0%, 99%, 1), hsla(0, 0%, 99%, 0)) );
       width: 1em;
       height: 100%;
       position: absolute;
       right: 0;
       top: 0;
       border-top-right-radius: 2em 5em;
+    }
+    &::after {
+      content: "";
+      @include box-shadow(0px -10px 13px -8px hsla(0, 0%, 0%, .1) inset);
+      border-top-right-radius: 2em 5em;
       border-top-left-radius: 2em 5em;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    &:hover {
+      background: white;
     }
     &.active {
-      color: #333;
-      font-weight: bold;
       background: hsla(0, 0%, 100%, 1);
       z-index: 90;
+      & > a {
+        color: #333;
+        font-weight: bold;
+      }
+      &::before {
+        @include background( linear-gradient(right, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)) );
+      }
+      &::after {
+        @include box-shadow( none );
+      }
+    }
+    .tabs-below & {
+      border: 1px solid $grayLighter;
+      border-top: none;
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-right-radius: 2em 5em;
+      border-bottom-left-radius: 2em 5em;
+      &::before {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 2em 5em;
+      }
+      &::after {
+        @include box-shadow(0px 10px 13px -8px hsla(0, 0%, 0%, .1) inset);
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: 2em 5em;
+        border-bottom-left-radius: 2em 5em;
+      }
+      &.active {
+        &::after {
+          @include box-shadow( none );
+        }
+      }
     }
   }
+}
 
-  & > li > a {
-    display: inline-block;
-    white-space: nowrap;
-    padding: .5em 1em;
+.tab-pane {
+  background: $bodyBackground;
+  border: solid thin $grayLighter;
+  display: none;
+  margin-top: -1px;  // Pull up and under tabs
+  padding: 1em;
+  position: relative;
+  &.active {
+    display: inherit !important;
   }
 }
 
 
 
-
-
-
-
-
-
-
-
-
-
-
 //PAPER////////////////////////////////
 //Provides the white background upon which items sit
 .paper {

h/js/directives.coffee

@@ -129,16 +129,18 @@ tabReveal = ['$parse', ($parse) ->
   require: ['ngModel', 'tabbable']
 ]
 
+
 tabTruncate = ->
   link: (scope, iElement) ->
+    angular.element(iElement).addClass("truncate")
     tabs = angular.element(iElement.children()[0].childNodes)
     percentage = 100 / tabs.length + "%"
     for i in [0..tabs.length-1]
-      angular.element(tabs[i]).css "width", percentage 
-      # Brittle- <a> containing label must be first element in tab <li>. 
+      angular.element(tabs[i]).css "width", percentage
       a_width = tabs[i].childNodes[0].clientWidth
       angular.element(tabs[i]).css "max-width", a_width
 
+
 thread = ->
   link: (scope, iElement, iAttrs, controller) ->
     scope.collapsed = false