.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #111;
  text-align: center;
  height: 3.5em;
  padding-top: 0.2em;
  border-top: 1px solid #222;
  @include linear-gradient(#444, #333);
  @include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2));
  li {
    display: inline-block;
    width: 49.2%;
    height: 3.0em;
    a {
      border-radius: 0.3em;
      font-size: 0.7em;
      height: 100%;
      padding: 0.5em 0.4em 0.3em;
      color: rgba(255, 255, 255, 0.6);
      display: block;
      position: relative;
      top: -0.1em;
      &.selected {
        top: 0;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
        border: 1px solid black;
        color: white;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 255, 255, 0.3);
        @include linear-gradient(#222, #333);
        @include box-shadow(0 1px 1px rgba(255, 255, 255, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4));
      }
      &:before {
        display: block;
        font-size: 1.7em;
        margin: 0.1em 0 0.2em;
      }
    }
  }
}

@mixin tabbar {
  @extend .tabbar;
}