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

#editable-elements {

  .nav {
    display: block;
    width: 100%;
    height: 31px;

    border-bottom: 1px solid #ccced7;

    // padding: 5px 0px;

    @include border-top-radius(8px);
    @include background-image(linear-gradient(#ebedf4, #d7dbe7));

    a {
      float: left;
      display: block;

      // margin-left: 20px;

      line-height: 31px;
      padding: 0px 20px 0 20px;

      color: #8b8d9a;
      @include single-text-shadow(#fff, 1px, 1px, 1px);
      text-decoration: none;
      text-transform: capitalize;
      font-size: 13px;
      cursor: pointer;
      outline: none;

      &.on {
        @include background-image(linear-gradient(#d9dde9, #ebedf4));

        height: 32px;

        color: #1e1f26;
        font-weight: bold;

        border-right: 1px solid #f8f9fb;
        border-left: 1px solid #f8f9fb;

        @include box-shadow(rgba(193, 197, 207, 0.4) -1px 0px 0px 0px inset, rgba(193, 197, 207, 0.4) -1px 0px 0px 0px);
      }

      &:first-child {
        &.on {
          @include border-top-left-radius(8px);
          border-left: none;
          @include box-shadow(rgba(193, 197, 207, 0.4) -1px 0px 0px 0px inset);
        }
      }
    } // a
  } // .nav

  fieldset {
    ol {
      border-top: none;
    }
  } // fieldset

}