css3 primary tabs for drupal

tabs.scss

@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/css3/transition";
@import "compass/css3/images";

$tabs-color: #dedede;
$page-bg: white;
$tabs-text-color: #333333;

ul.primary {
  border-bottom: 1px solid darken($tabs-color, 14%);
  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(lighten($tabs-color, 30%), 1px, 1px, 0);
      float: left;
      margin: 0 3px 0 0;
      border: 1px solid darken($tabs-color, 14%);
      border-bottom: 0px;
      position: relative;
      z-index: 1;
    &.active {
      z-index: 3; }
    a {
      &:link, &:visited {
        color: $tabs-text-color;
        border-color: lighten($tabs-color, 8%);
        @include transition(background-color 0.3s);
        @include border-top-radius(4px);
        background: adjust-color($tabs-color, $lightness: 0, $saturation: -10);
        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: lighten($tabs-color, 4%);
        border-color: lighten($tabs-color, 8%);
        }
      &:focus {
        background-color: lighten($tabs-color, 8%);
        }
      }
    &.active a {
      &:link, &:visited {
        @include transition(background-color 0.3s);
        @include background-image(linear-gradient(lighten($tabs-color, 2), $page-bg));
        background-color: $page-bg;
        border: solid 1px $page-bg;
        }
    }
    }
}

.ie6 ul.primary li {
    top: 1px;
}