.tabs-left {
  border-bottom: none;
  padding-top: 2px;
  border-right: 1px solid #ddd;

  > li {
    float: none;
    margin-bottom: 2px;
    margin-right: -1px;

    &.active > a,
    &.active > a:hover,
    &.active > a:focus {
      border-bottom-color: #ddd;
      border-right-color: transparent;
    }

    > a {
      border-radius: 4px 0 0 4px;
      margin-right: 0;
      display: block;
    }
  }
}

.tabs-right {
  border-bottom: none;
  padding-top: 2px;
  border-left: 1px solid #ddd;

  > li {
    float: none;
    margin-bottom: 2px;
    margin-left: -1px;

    &.active > a,
    &.active > a:hover,
    &.active > a:focus {
      border-bottom: 1px solid #ddd;
      border-left-color: transparent;
    }

    > a {
      border-radius: 0 4px 4px 0;
      margin-right: 0;
    }
  }
}

.sideways {
  margin-top: 50px;
  border: none;
  position: relative;

  > li {
    height: 20px;
    width: 120px;
    margin-bottom: 100px;

    &.active > a,
    &.active > a:hover,
    &.active > a:focus {
      border-bottom-color: transparent;
      border-right-color: #ddd;
      border-left-color: #ddd;
    }

    > a {
      border-bottom: 1px solid #ddd;
      border-right-color: transparent;
      text-align: center;
      border-radius: 4px 4px 0px 0px;
    }
  }

  &.tabs-left {
    left: -50px;
    > li {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
  }
  &.tabs-right {
    right: -50px;
    > li {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }
}