.tab-control {
    .tabs {
        .unstyled;
        .clearfix;
        .no-margin;

        & > li {
            background-color: @white;
            display: block;
            float: left;
            margin-left: 5px;
            position: relative;

            & > a {
                border: 1px @grayLighter solid;
                display: block;
                float: left;
                padding: 5px 10px;
                z-index: 10;
                top: 0;
                left: 0;
                color: inherit;
                background-color: @grayLighter;
            }

            &.active {
                a {
                    border-bottom-color: @white ;
                    background-color: @white ;
                    border-top: 2px @red solid;
                }

                &:hover {
                    a {
                        background-color: @white ;
                        color: @dark;
                    }
                }
            }

            &:hover {
                a {
                    background-color: darken(@grayLighter, 10%);
                    color: @white;
                }
            }

            &.place-right {
                float: right;
                margin-right: 5px;
                margin-left: auto;
            }
        }

        &.no-spaces {
            & > li {
                margin-left: 0;
            }
        }
        z-index: 2;
    }

    .frames {
        z-index: 1;
        border: 1px @grayLighter solid;
        margin-top: -1px;

        .frame {
            display: none;

            &:first-child {
                display: block;
            }
        }
    }
    .frame {
        padding: @unitSize;
    }
}