diff --git a/STARTERKIT/css/tabs.css b/STARTERKIT/css/tabs.css
index bb6fa86..05d4a79 100644
--- a/STARTERKIT/css/tabs.css
+++ b/STARTERKIT/css/tabs.css
@@ -9,74 +9,93 @@
  */
 
 
-div.tabs {
-  margin: 0 0 5px 0;
-}
-
 ul.primary {
-  margin: 0;
-  padding: 0 0 0 10px; /* LTR */
-  border-width: 0;
-  list-style: none;
-  white-space: nowrap;
-  line-height: normal;
-  background: url(../images/tab-bar.png) repeat-x left bottom;
+  border-bottom: 1px solid #BBB;
+  height: 26px;
+  padding: 0 0 0 4px;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  overflow: visible;
+  font-size: 90%;
 }
-
 ul.primary li {
-  float: left; /* LTR */
-  margin: 0;
-  padding: 0;
-}
-
-ul.primary li a {
-  display: block;
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -o-border-top-left-radius: 4px;
+  -ms-border-top-left-radius: 4px;
+  -khtml-border-top-left-radius: 4px;
+  border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+  -o-border-top-right-radius: 4px;
+  -ms-border-top-right-radius: 4px;
+  -khtml-border-top-right-radius: 4px;
+  border-top-right-radius: 4px;
+  text-shadow: white 1px 1px 0;
+  float: left;
+  margin: 0 3px 0 0;
+  border: 1px solid #bbb;
+  border-bottom: 0px;
+  position: relative;
+  z-index: 1;
+}
+ul.primary li.active {
+  z-index: 3;
+}
+ul.primary li a:link, ul.primary li a:visited {
+  color: #333;
+  border-color: #EFEFEF;
+  -moz-transition: background-color 0.3s;
+  -webkit-transition: background-color 0.3s;
+  -o-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -o-border-top-left-radius: 4px;
+  -ms-border-top-left-radius: 4px;
+  -khtml-border-top-left-radius: 4px;
+  border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+  -o-border-top-right-radius: 4px;
+  -ms-border-top-right-radius: 4px;
+  -khtml-border-top-right-radius: 4px;
+  border-top-right-radius: 4px;
+  background: #dfdfdf;
+  float: left;
   height: 24px;
-  margin: 0;
-  padding: 0 0 0 5px; /* width of tab-left.png */
-  border-width: 0;
-  font-weight: bold;
+  letter-spacing: 1px;
+  line-height: 24px;
+  margin-right: 0;
+  outline: none;
+  text-align: center;
   text-decoration: none;
-  color: #777;
-  background-color: transparent;
-  background: url(../images/tab-left.png) no-repeat left -38px;
 }
-
-ul.primary li a .tab {
-  display: block;
-  height: 20px; /* 24px (parent) - 4px (padding) */
-  margin: 0;
-  padding: 4px 13px 0 6px;
-  border-width: 0;
-  line-height: 20px;
-  background: url(../images/tab-right.png) no-repeat right -38px;
+ul.primary li a:hover {
+  background-color: #e8e8e8;
+  border-color: #f2f2f2;
 }
-
-ul.primary li a:hover,
 ul.primary li a:focus {
-  border-width: 0;
-  background-color: transparent;
-  background: url(../images/tab-left.png) no-repeat left -76px;
-}
-
-ul.primary li a:hover .tab,
-ul.primary li a:focus .tab {
-  background: url(../images/tab-right.png) no-repeat right -76px;
+  background-color: #efefef;
 }
-
-ul.primary li.active a,
-ul.primary li.active a:hover,
-ul.primary li.active a:focus {
-  border-width: 0;
-  color: #000;
-  background-color: transparent;
-  background: url(../images/tab-left.png) no-repeat left 0;
+ul.primary li.active a:link, ul.primary li.active a:visited {
+  -moz-transition: background-color 0.3s;
+  -webkit-transition: background-color 0.3s;
+  -o-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(100%, #ffffff));
+  background-image: -webkit-linear-gradient(#e0e0e0, #ffffff);
+  background-image: -moz-linear-gradient(#e0e0e0, #ffffff);
+  background-image: -o-linear-gradient(#e0e0e0, #ffffff);
+  background-image: -ms-linear-gradient(#e0e0e0, #ffffff);
+  background-image: linear-gradient(#e0e0e0, #ffffff);
+  background-color: #fff;
+  border: solid 1px #fff;
 }
 
-ul.primary li.active a .tab,
-ul.primary li.active a:hover .tab,
-ul.primary li.active a:focus .tab {
-  background: url(../images/tab-right.png) no-repeat right 0;
+.ie6 ul.primary li {
+  top: 1px;
 }
 
 ul.secondary {
@@ -126,51 +145,3 @@ ul.secondary a.active:focus {
   color: #000;
   background: url(../images/tab-secondary.png) repeat-x left top;
 }
-
-/*
- * IE6 doesn't support PNGs with alpha transparency.
- */
-
-.ie6 ul.primary li a,
-.ie6 ul.primary li a .tab,
-.ie6 ul.secondary li a,
-.ie6 ul.secondary li a .tab {
-  display: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */
-}
-
-.ie6 ul.primary li a {
-  background-image: url(../images/tab-left-ie6.png);
-}
-
-.ie6 ul.primary li a .tab {
-  background-image: url(../images/tab-right-ie6.png);
-}
-
-.ie6 ul.primary li a:hover,
-.ie6 ul.primary li a:focus {
-  background-image: url(../images/tab-left-ie6.png);
-}
-
-.ie6 ul.primary li a:hover .tab,
-.ie6 ul.primary li a:focus .tab {
-  background-image: url(../images/tab-right-ie6.png);
-}
-
-.ie6 ul.primary li.active a,
-.ie6 ul.primary li.active a:hover,
-.ie6 ul.primary li.active a:focus {
-  background-image: url(../images/tab-left-ie6.png);
-}
-
-.ie6 ul.primary li.active a .tab,
-.ie6 ul.primary li.active a:hover .tab,
-.ie6 ul.primary li.active a:focus .tab {
-  background-image: url(../images/tab-right-ie6.png);
-}
-
-.ie6-7 ul.primary li a,
-.ie6-7 ul.primary li a .tab,
-.ie6-7 ul.secondary li a,
-.ie6-7 ul.secondary li a .tab {
-  cursor: pointer;
-}
diff --git a/STARTERKIT/sass/tabs.scss b/STARTERKIT/sass/tabs.scss
index d7afa85..b57c48d 100644
--- a/STARTERKIT/sass/tabs.scss
+++ b/STARTERKIT/sass/tabs.scss
@@ -8,103 +8,69 @@
 //
 
 @import "base";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/transition";
+@import "compass/css3/images";
 
 
-div.tabs {
-  margin: 0 0 5px 0;
-}
-
 ul.primary {
-  margin: 0;
-  padding: 0 0 0 10px; // LTR
-  border-width: 0;
-  list-style: none;
-  white-space: nowrap;
-  line-height: normal;
-  background: url(../images/tab-bar.png) repeat-x left bottom;
-
-  li {
-    float: left; // LTR
-    margin: 0;
-    padding: 0;
-
+  border-bottom: 1px solid #BBB;
+  height: 26px;
+  padding: 0 0 0 4px;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  overflow: visible;
+  font-size: 90%;
+    li {
+      @include border-top-radius(4px);
+      @include single-text-shadow(#fff, 1px, 1px, 0);
+      float: left;
+      margin: 0 3px 0 0;
+      border: 1px solid #bbb;
+      border-bottom: 0px;
+      position: relative;
+      z-index: 1;
+    &.active {
+      z-index: 3; }
     a {
-      display: block;
-      height: 24px;
-      margin: 0;
-      padding: 0 0 0 5px; // width of tab-left.png
-      border-width: 0;
-      font-weight: bold;
-      text-decoration: none;
-      color: #777;
-      background-color: transparent;
-      background: url(../images/tab-left.png) no-repeat left -38px;
-      @if $legacy-support-for-ie6 {
-        .ie6 & {
-          background-image: url(../images/tab-left-ie6.png);
-        }
-      }
-
-      .tab {
-        display: block;
-        height: 20px; // 24px (parent) - 4px (padding)
-        margin: 0;
-        padding: 4px 13px 0 6px;
-        border-width: 0;
-        line-height: 20px;
-        background: url(../images/tab-right.png) no-repeat right -38px;
-        @if $legacy-support-for-ie6 {
-          .ie6 & {
-            background-image: url(../images/tab-right-ie6.png);
-          }
+      &:link, &:visited {
+        color: #333;
+        border-color: #EFEFEF;
+        @include transition(background-color 0.3s);
+        @include border-top-radius(4px);
+        background: #dfdfdf;
+        float: left;
+        height: 24px;
+        letter-spacing: 1px;
+        line-height: 24px;
+        margin-right: 0; // override drupal default margin
+        outline: none;
+        text-align: center;
+        text-decoration: none;
+       }
+      &:hover {
+        background-color: #e8e8e8;
+        border-color: #f2f2f2;
         }
-      }
-
-      &:hover,
       &:focus {
-        border-width: 0;
-        background-color: transparent;
-        background: url(../images/tab-left.png) no-repeat left -76px;
-        @if $legacy-support-for-ie6 {
-          .ie6 & {
-            background-image: url(../images/tab-left-ie6.png);
-          }
-        }
-
-        .tab {
-          background: url(../images/tab-right.png) no-repeat right -76px;
-          @if $legacy-support-for-ie6 {
-            .ie6 & {
-              background-image: url(../images/tab-right-ie6.png);
-            }
-          }
-        }
-      }
-    }
-
-    &.active a,
-    &.active a:hover,
-    &.active a:focus {
-      border-width: 0;
-      color: #000;
-      background-color: transparent;
-      background: url(../images/tab-left.png) no-repeat left 0;
-      @if $legacy-support-for-ie6 {
-        .ie6 & {
-          background-image: url(../images/tab-left-ie6.png);
+        background-color: #efefef;
         }
       }
-
-      .tab {
-        background: url(../images/tab-right.png) no-repeat right 0;
-        @if $legacy-support-for-ie6 {
-          .ie6 & {
-            background-image: url(../images/tab-right-ie6.png);
-          }
+    &.active a {
+      &:link, &:visited {
+        @include transition(background-color 0.3s);
+        @include background-image(linear-gradient(#e0e0e0, white));
+        background-color: #fff;
+        border: solid 1px #fff;
         }
-      }
     }
-  }
+    }
+}
+
+.ie6 ul.primary li {
+    top: 1px;
 }
 
 ul.secondary {
@@ -155,8 +121,7 @@ ul.secondary {
   }
 }
 
-ul.primary li a,
-ul.primary li a .tab,
+
 ul.secondary li a,
 ul.secondary li a .tab {
   @if $legacy-support-for-ie6 {