@liteBlue: #e7e7ff;
    @midBlue: #ccccff;
    @darkBlue: #15145f;

    .rounded-corners (@radius: 5px) {
        border-radius: @radius;
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
    }

    .box-shadow (@x: 3px, @y: 3px, @blur: 8px, @color: #aaa) {
        box-shadow: @arguments;
        -moz-box-shadow: @arguments;
        -webkit-box-shadow: @arguments;
    }

    .text-shadow (@color: #888){
        text-shadow: 1px 1px 2px @color;
    }

    @stepWidth: 217px;
    @stepHeight: 50px;
    @stepGrowBy: 5px;

    #step {

        .grow {
            height: @stepHeight + @stepGrowBy;
            margin-top: 0;
            padding-top: 4px + @stepGrowBy;
        }

    }

/* rules */

.steps {

    margin-top: 10px;
    overflow: hidden;

    li {
        display: block;
        float: left;
        position: relative;
        width: @stepWidth;
        padding: 0 10px 10px 0;
    }

    .step {
        color: @darkBlue;
        background-color: white;
        border: 1px solid @liteBlue;
        .rounded-corners();

        display: block;
        outline: none;
        text-decoration: none;
        height: @stepHeight;
        margin-top: @stepGrowBy;
        width: @stepWidth - 20px;
        padding: 4px 5px 5px 1em;
        font: normal 1.5em Verdana, Arial, Helvetica, sans-serif;

        .number {
            .text-shadow();
            color: @midBlue;
            float: left;
            font-size: 40px;
            font-weight: bold;
            padding: 0 8px 5px 0;
        }

        .description {
            font-weight: bold;
            padding-top: 7px;
            float: left;
            width: 90px;
        }

        &:hover {
            #step > .grow;
            border: 1px solid @darkBlue;
            text-decoration: none;
        }

        &.current {
            #step > .grow;
            .box-shadow();
            color: @darkBlue;
            background-color: @liteBlue;
            cursor: default;
            border: 1px solid @darkBlue;
            &.has-next{
               background: @liteBlue url("/image/public/buyersbuddy/next-dark.gif") 90% 50% no-repeat;
            }

            .number {
                .text-shadow(white);
            }

        }

    }
}