hide checkmarks for installed apps

hide checkmarks for installed apps

@import 'lib';

@text-gray: #424f5a;
@link: #2d87ca;

h1 .num {
    color: @orange;
    font-size: 16px;
    vertical-align: top;
}

.checkmark {
    display: block;
    color: @black;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    &:before {
        .border-radius(10px);
        background-color: @green;
        color: @white;
        content: "\2714";  /* checkmark */
        display: inline-block;
        font-weight: normal;
        height: 20px;
        line-height: 18px;
        margin-right: 7px;
        position: relative;
        text-align: center;
        width: 20px;
    }
    &.purchased {
        &:before {
            content: "$";
        }
    }
    &.installed {
        &:before {
            background: url(../../img/mkt/icons/disk.png) 50% 50% no-repeat;
            .border-radius(0);
            content: "\00a0";
        }
    }
}

.listing .purchased {
    margin-bottom: 10px;
}

.actions {
    .button {
        position: relative;
        z-index: 1;
    }
    .faked-purchase,
    .approval {
        .border-radius(0 0 5px 5px);
        color: @black;
        display: block;
        margin-top: -5px;
        padding: 15px 15px 10px;
        position: relative;
        z-index: 0;
    }
    .noApps {
        text-align: center;
        margin-top: 10px;
        a {
            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
            padding: 0 5px 0 30px;
        }
    }
    .faked-purchase.vitals {
        .border-radius(0 0 0 0);
        background: fadeOut(@red, 90%);
        font-size: 11px;
        font-weight: 600;
        float: none;
        margin-left: 0;
        text-align: center;
    }
    .approval {
        background: fadeOut(@green, 90%);
    }
    .faked-purchase + .approval {
        margin-top: -10px;
        padding-top: 10px;
    }
}

.product-details + #product-status {
    margin-top: 24px;
}

#upsell {
    background: @yellow;
    margin-top: 30px;
    h3 {
        color: darken(@yellow, 75%);
        margin-bottom: 10px;
    }
    .upsell, .prose, .vitals {
        padding-left: 86px;
        width: 75%;
    }
    .upsell {
        .ellipsis;
        display: block;
        float: left;
        font-weight: 200;
        font-size: 21px;
        min-height: 35px;
        line-height: 32px;
        position: relative;
    }
    .special {
        .border-box;
        display: block;
        float: right;
        max-width: 20%;
    }
    .icon {
        display: block;
        margin-right: 15px;
        position: absolute;
        left: 0;
        top: 0;
        vertical-align: top;
    }
    .prose {
        color: @medium-gray;
        margin-bottom: 10px;
    }
}

.html-rtl #upsell {
    h3, .upsell, .prose, .vitals {
        padding: 0 45px 0 0;
    }
    .upsell {
        float: right;
    }
    .special {
        float: left;
    }
    .icon {
        margin: 0 0 0 15px;
        right: 0;
        left: auto;
    }
}

.product-details {
    font-size: 14px;
    text-shadow: 0 1px 0 @white;
    .icon {
        .max-width(2);
    }
    .actions {
        .min-width(3);
        .max-width(4);
        clear: both;
        float: right;
        margin-bottom: 16px;
        .button {
            display: block;
        }
    }
    .vitals {
        float: left;
        margin-left: 22px;
        .max-width(9);
        h1 {
            font-size: 32px;
            font-weight: 100;
            margin: 0 0 0 -1px;
        }
        .authors {
            font-weight: normal;
            font-size: 14px;
            margin-top: 7px;
        }
        .pricetag, .cats {
            &:after {
                color: @note-gray;
                content: "\00B7";
                margin-left: 3px;
                padding-right: 3px;
            }
        }
        .price {
            text-shadow: 0 1px 0 @black;
            &:after {
                text-shadow: 0 1px 0 @white;
            }
        }
        p {
            display: inline-block;
            margin: 10px 0 5px;
        }
    }
    .visual {
        float: left;
        max-width: 128px;
        max-height: 128px;
        img {
            max-width: 128px;
            max-height: 128px;
        }
    }
}

.previews {
    ul {
        white-space: nowrap;
        padding: 0;
        text-align: center;
    }
    li {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        a {
            .border-box;
            background: @faint-gray;
            display: block;
            .border-radius(3px);
            .box-shadow(0 1px 2px @black);
            height: 166px;
            padding: 8px;
            position: relative;
            margin: 0 16px;
            width: 216px;
            .img {
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-size: contain;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 150px;
                max-width: 215px;
                text-align: center;
            }
            &.video {
                background: @black;
                position: relative;
                &:after,
                img {
                    .transition-property(~'opacity, visibility');
                    .transition-duration(.3s);
                }
                &:after {
                    background: url(../../img/mkt/icons/video.png) 50% 50% no-repeat;
                    content: "";
                    display: block;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }
                img {
                    opacity: .8;
                }
                &:hover {
                    img {
                        opacity: 1;
                    }
                    &:after {
                        opacity: 0;
                        visibility: hidden;
                    }
                }
            }
        }
    }
    &.slider {
        height: 195px;
        border-top: 1px solid #a0a4a7;
        border-bottom: 1px solid #babec0;
        .gradient-two-color(rgba(203, 210, 214, .33), rgba(216, 221, 223, .33))
    }
}

.description {
    clear: both;
    color: @text-gray;
    padding: 15px 30px 15px 0;
    p {
        .max-width(14);
        font-size: 14px;
    }
    .more {
        display: block;
        + h3 {
            margin-top: 15px;
        }
    }
    .collapse {
        display: none;
        &.show {
            display: block;
        }
    }
    a.collapse.wide {
        .transition(~'.2s opacity');
        background: url(../../img/mkt/arrows/collapse.png) no-repeat 100% 50%;
        display: block;
        float: right;
        height: 8px;
        margin-right: -30px;
        padding: 20px 0;
        opacity: .7;
        outline: none;
        text-indent: -9999px;
        width: 30px;
        &:hover,
        &.expanded {
            opacity: 1;
        }
        &.expanded {
            .transform(~'scaleY(-1)');
        }
    }
}

.support ul {
    margin-top: 47px;
    list-style-type: none;
    padding: 0;
    font-size: 14px;
    li {
        float: left;
        margin-bottom: 10px;
        min-height: 100px;
        .width(7);
        h3 {
            font-size: 22px;
        }
        p {
            margin: 0;
            a, time {
                display: inline-block;
                padding: 5px 20px 5px 0;
            }
            a {
                background: url(../../img/mkt/arrows/support.png) no-repeat 100% 50%;
            }
        }
    }
}

.html-rtl .support ul {
    a, time {
        padding: 5px 0 5px 20px;
    }
}

// This should go everywhere mozApps.install() is possible.
#install-error section {
    height: 20%;
    text-align: center;
    h3 {
        font-weight: bold;
    }
}

#preapproval-shortcut {
    margin: 0;
}

// Slider next/prev page controls are smaller here.
.alt-slider {
    .controls .next-page, .controls .prev-page {
        height: 166px;
    }
}

// 7 columns
@media (max-width: @7col) {
    .product-details {
        .actions {
        }
    }
    .support ul li {
        .width(2);
    }
}

//4 columns
@media (max-width: @4col) {
    #page > .description {
        border-width: 1px 0;
        padding: 10px;
        .summary {
            max-width: 100%;
            width: 100%;
        }
        a.collapse.narrow {
            .transition(none);
            display: block;
            font-size: 13px;
            font-weight: bold;
            opacity: .9;
            text-align: right;
            &:hover,
            &.expanded {
                opacity: 1;
            }
            &.expanded {
                display: none;
                .transform(none);
            }
        }
    }
    #upsell.narrow {
        .fat-button;
        margin: 20px 10px 0;
        padding: 10px 33px 10px 52px;
        position: relative;
        &:after {
            background: @arrow-src 100% 50% no-repeat;
            content: "";
            display: block;
            height: 14px;
            opacity: .8;
            position: absolute;
            top: 20px;
            right: 10px;
            width: 13px;
        }
        .avail, .name, .icon {
            opacity: .85;
        }
        &:hover {
            border-color: @bg-gray;
            text-decoration: none;
            &:after, .avail, .name, .icon {
                opacity: 1;
            }
        }
        .avail, .name {
            .ellipsis;
            display: block;
        }
        .avail {
            color: @green;
            font-weight: 400;
            line-height: 12px;
            margin-bottom: -4px;
            padding-bottom: 5px;
        }
        .name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: -4px;
            padding-bottom: 0;
        }
        .icon {
            top: 10px;
            left: 10px;
            max-height: 32px;
            max-width: 32px;
        }
    }
    #reviews {
        display: none;
    }
    .downloads {
        font-size: 12px;
    }
    .product-details {
        .visual {
            margin: 0 10px 10px 0;
        }
        .vitals,
        .actions {
            float: none;
            width: 100%;
        }
        .actions {
            clear: both;
            margin: 10px auto;
            max-width: 100%;
            width: 100%;
            .button {
                .border-box;
                .border-radius(4px);
                font-size: 14px;
                width: 50%;
                &.product {
                    height: 38px;
                    line-height: 37px;
                    &:hover {
                        line-height: 33px;
                    }
                    &:active, &.purchasing, &.installing {
                        line-height: 39px;
                    }
                }
            }
            .purchased {
                display: none;
            }
            .checkmark {
                .border-box;
                background: none;
                margin-top: -45px;
                pointer-events: none;
                z-index: 1;
                width: 50%;
                &:before {
                    background-color: lighten(@green, 10%);
                    .box-shadow(0 1px 1px @btn-b-dark,
                                inset 0 1px 1px rgba(0,0,0,.7));
                }
                b {
                    display: block;
                    .hidetext;
                }
            }
            .install, .disabled {
                + .checkmark {
                    display: none;
                }
            }
        }
        .vitals {
            margin: 0;
            height: 64px;
            max-width: 100%;
            position: relative;
            h1, .authors, .downloads {
                .ellipsis;
            }
            h1 {
                font-size: 21px;
                font-weight: 400;
                line-height: 24px;
                padding-bottom: 4px;
            }
            .authors {
                color: @medium-gray;
                font-weight: 400;
                margin: 0;
                padding-bottom: 2px;
            }
            .device-list {
                position: absolute;
                right: 0;
                bottom: -47px;
                width: 105px;
            }
            .pricetag {
                display: none;
            }
            p {
                display: block;
                float: left;
                margin: 0;
            }
        }
    }
    .support ul {
        li {
            margin-bottom: 15px;
            min-height: inherit;
        }
    }
    .support {
        a {
            .fat-button;
            color: lighten(@text, 10%);
            display: block;
            font-size: 14px;
            font-weight: 600;
            padding: 10px;
            text-align: center;
            &:hover {
                background: rgba(255,255,255,.5);
                border-color: @bg-gray;
                color: @text;
                text-decoration: none;
            }
        }
        .overall-reviews {
            text-align: left;
            margin: 25px 0 0;
            + ul {
                margin: 0;
            }
        }
        ul {
            margin: 15px 0 0;
            li {
                .border-box;
                float: left;
                margin: 10px 0 0;
                padding-right: 5px;
                width: 50%;
                &:nth-child(2n) {
                    padding: 0 0 0 5px;
                }
            }
        }
        dl {
            margin: 20px 0 15px;
            dt, dd {
                color: @text;
                display: inline-block;
            }
            dt {
                margin-right: 5px;
            }
        }
    }
    .previews.slider {
        background: @grain-src darken(@light-gray, 0%);
        .box-shadow(inset 0 2px 4px rgba(0,0,0,.2));
        border-top-color: @note-gray;
        border-bottom-color: @barely-gray;
    }
}

// 3 columns
@media (max-width: @3col) {
}

@import 'lib';

@text-gray: #424f5a;
@link: #2d87ca;

h1 .num {
    color: @orange;
    font-size: 16px;
    vertical-align: top;
}

.checkmark {
    display: block;
    color: @black;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    &:before {
        .border-radius(10px);
        background-color: @green;
        color: @white;
        content: "\2714";  /* checkmark */
        display: inline-block;
        font-weight: normal;
        height: 20px;
        line-height: 18px;
        margin-right: 7px;
        position: relative;
        text-align: center;
        width: 20px;
    }
    &.purchased {
        &:before {
            content: "$";
        }
    }
    &.installed {
        &:before {
            background: url(../../img/mkt/icons/disk.png) 50% 50% no-repeat;
            .border-radius(0);
            content: "\00a0";
        }
    }
}

.listing .purchased {
    margin-bottom: 10px;
}

.actions {
    .button {
        position: relative;
        z-index: 1;
    }
    .faked-purchase,
    .approval {
        .border-radius(0 0 5px 5px);
        color: @black;
        display: block;
        margin-top: -5px;
        padding: 15px 15px 10px;
        position: relative;
        z-index: 0;
    }
    .noApps {
        text-align: center;
        margin-top: 10px;
        a {
            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
            padding: 0 5px 0 30px;
        }
    }
    .faked-purchase.vitals {
        .border-radius(0 0 0 0);
        background: fadeOut(@red, 90%);
        font-size: 11px;
        font-weight: 600;
        float: none;
        margin-left: 0;
        text-align: center;
    }
    .approval {
        background: fadeOut(@green, 90%);
    }
    .faked-purchase + .approval {
        margin-top: -10px;
        padding-top: 10px;
    }
}

.product-details + #product-status {
    margin-top: 24px;
}

#upsell {
    background: @yellow;
    margin-top: 30px;
    h3 {
        color: darken(@yellow, 75%);
        margin-bottom: 10px;
    }
    .upsell, .prose, .vitals {
        padding-left: 86px;
        width: 75%;
    }
    .upsell {
        .ellipsis;
        display: block;
        float: left;
        font-weight: 200;
        font-size: 21px;
        min-height: 35px;
        line-height: 32px;
        position: relative;
    }
    .special {
        .border-box;
        display: block;
        float: right;
        max-width: 20%;
    }
    .icon {
        display: block;
        margin-right: 15px;
        position: absolute;
        left: 0;
        top: 0;
        vertical-align: top;
    }
    .prose {
        color: @medium-gray;
        margin-bottom: 10px;
    }
}

.html-rtl #upsell {
    h3, .upsell, .prose, .vitals {
        padding: 0 45px 0 0;
    }
    .upsell {
        float: right;
    }
    .special {
        float: left;
    }
    .icon {
        margin: 0 0 0 15px;
        right: 0;
        left: auto;
    }
}

.product-details {
    font-size: 14px;
    text-shadow: 0 1px 0 @white;
    .icon {
        .max-width(2);
    }
    .actions {
        .min-width(3);
        .max-width(4);
        clear: both;
        float: right;
        margin-bottom: 16px;
        .button {
            display: block;
        }
    }
    .vitals {
        float: left;
        margin-left: 22px;
        .max-width(9);
        h1 {
            font-size: 32px;
            font-weight: 100;
            margin: 0 0 0 -1px;
        }
        .authors {
            font-weight: normal;
            font-size: 14px;
            margin-top: 7px;
        }
        .pricetag, .cats {
            &:after {
                color: @note-gray;
                content: "\00B7";
                margin-left: 3px;
                padding-right: 3px;
            }
        }
        .price {
            text-shadow: 0 1px 0 @black;
            &:after {
                text-shadow: 0 1px 0 @white;
            }
        }
        p {
            display: inline-block;
            margin: 10px 0 5px;
        }
    }
    .visual {
        float: left;
        max-width: 128px;
        max-height: 128px;
        img {
            max-width: 128px;
            max-height: 128px;
        }
    }
}

.previews {
    ul {
        white-space: nowrap;
        padding: 0;
        text-align: center;
    }
    li {
        list-style-type: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        a {
            .border-box;
            background: @faint-gray;
            display: block;
            .border-radius(3px);
            .box-shadow(0 1px 2px @black);
            height: 166px;
            padding: 8px;
            position: relative;
            margin: 0 16px;
            width: 216px;
            .img {
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-size: contain;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 150px;
                max-width: 215px;
                text-align: center;
            }
            &.video {
                background: @black;
                position: relative;
                &:after,
                img {
                    .transition-property(~'opacity, visibility');
                    .transition-duration(.3s);
                }
                &:after {
                    background: url(../../img/mkt/icons/video.png) 50% 50% no-repeat;
                    content: "";
                    display: block;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }
                img {
                    opacity: .8;
                }
                &:hover {
                    img {
                        opacity: 1;
                    }
                    &:after {
                        opacity: 0;
                        visibility: hidden;
                    }
                }
            }
        }
    }
    &.slider {
        height: 195px;
        border-top: 1px solid #a0a4a7;
        border-bottom: 1px solid #babec0;
        .gradient-two-color(rgba(203, 210, 214, .33), rgba(216, 221, 223, .33))
    }
}

.description {
    clear: both;
    color: @text-gray;
    padding: 15px 30px 15px 0;
    p {
        .max-width(14);
        font-size: 14px;
    }
    .more {
        display: block;
        + h3 {
            margin-top: 15px;
        }
    }
    .collapse {
        display: none;
        &.show {
            display: block;
        }
    }
    a.collapse.wide {
        .transition(~'.2s opacity');
        background: url(../../img/mkt/arrows/collapse.png) no-repeat 100% 50%;
        display: block;
        float: right;
        height: 8px;
        margin-right: -30px;
        padding: 20px 0;
        opacity: .7;
        outline: none;
        text-indent: -9999px;
        width: 30px;
        &:hover,
        &.expanded {
            opacity: 1;
        }
        &.expanded {
            .transform(~'scaleY(-1)');
        }
    }
}

.support ul {
    margin-top: 47px;
    list-style-type: none;
    padding: 0;
    font-size: 14px;
    li {
        float: left;
        margin-bottom: 10px;
        min-height: 100px;
        .width(7);
        h3 {
            font-size: 22px;
        }
        p {
            margin: 0;
            a, time {
                display: inline-block;
                padding: 5px 20px 5px 0;
            }
            a {
                background: url(../../img/mkt/arrows/support.png) no-repeat 100% 50%;
            }
        }
    }
}

.html-rtl .support ul {
    a, time {
        padding: 5px 0 5px 20px;
    }
}

// This should go everywhere mozApps.install() is possible.
#install-error section {
    height: 20%;
    text-align: center;
    h3 {
        font-weight: bold;
    }
}

#preapproval-shortcut {
    margin: 0;
}

// Slider next/prev page controls are smaller here.
.alt-slider {
    .controls .next-page, .controls .prev-page {
        height: 166px;
    }
}

// 7 columns
@media (max-width: @7col) {
    .product-details {
        .actions {
        }
    }
    .support ul li {
        .width(2);
    }
}

//4 columns
@media (max-width: @4col) {
    #page > .description {
        border-width: 1px 0;
        padding: 10px;
        .summary {
            max-width: 100%;
            width: 100%;
        }
        a.collapse.narrow {
            .transition(none);
            display: block;
            font-size: 13px;
            font-weight: bold;
            opacity: .9;
            text-align: right;
            &:hover,
            &.expanded {
                opacity: 1;
            }
            &.expanded {
                display: none;
                .transform(none);
            }
        }
    }
    #upsell.narrow {
        .fat-button;
        margin: 20px 10px 0;
        padding: 10px 33px 10px 52px;
        position: relative;
        &:after {
            background: @arrow-src 100% 50% no-repeat;
            content: "";
            display: block;
            height: 14px;
            opacity: .8;
            position: absolute;
            top: 20px;
            right: 10px;
            width: 13px;
        }
        .avail, .name, .icon {
            opacity: .85;
        }
        &:hover {
            border-color: @bg-gray;
            text-decoration: none;
            &:after, .avail, .name, .icon {
                opacity: 1;
            }
        }
        .avail, .name {
            .ellipsis;
            display: block;
        }
        .avail {
            color: @green;
            font-weight: 400;
            line-height: 12px;
            margin-bottom: -4px;
            padding-bottom: 5px;
        }
        .name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: -4px;
            padding-bottom: 0;
        }
        .icon {
            top: 10px;
            left: 10px;
            max-height: 32px;
            max-width: 32px;
        }
    }
    #reviews {
        display: none;
    }
    .downloads {
        font-size: 12px;
    }
    .product-details {
        .visual {
            margin: 0 10px 10px 0;
        }
        .vitals,
        .actions {
            float: none;
            width: 100%;
        }
        .actions {
            clear: both;
            margin: 10px auto;
            max-width: 100%;
            width: 100%;
            .button {
                .border-box;
                .border-radius(4px);
                font-size: 14px;
                width: 50%;
                &.product {
                    height: 38px;
                    line-height: 37px;
                    &:hover {
                        line-height: 33px;
                    }
                    &:active, &.purchasing, &.installing {
                        line-height: 39px;
                    }
                }
            }
            .purchased {
                display: none;
            }
            .checkmark {
                .border-box;
                background: none;
                margin-top: -45px;
                pointer-events: none;
                z-index: 1;
                width: 50%;
                &:before {
                    background-color: lighten(@green, 10%);
                    .box-shadow(0 1px 1px @btn-b-dark,
                                inset 0 1px 1px rgba(0,0,0,.7));
                }
                b {
                    display: block;
                    .hidetext;
                }
            }
            .install, .disabled {
                .checkmark {
                    display: none;
                }
            }
        }
        .vitals {
            margin: 0;
            height: 64px;
            max-width: 100%;
            position: relative;
            h1, .authors, .downloads {
                .ellipsis;
            }
            h1 {
                font-size: 21px;
                font-weight: 400;
                line-height: 24px;
                padding-bottom: 4px;
            }
            .authors {
                color: @medium-gray;
                font-weight: 400;
                margin: 0;
                padding-bottom: 2px;
            }
            .device-list {
                position: absolute;
                right: 0;
                bottom: -47px;
                width: 105px;
            }
            .pricetag {
                display: none;
            }
            p {
                display: block;
                float: left;
                margin: 0;
            }
        }
    }
    .support ul {
        li {
            margin-bottom: 15px;
            min-height: inherit;
        }
    }
    .support {
        a {
            .fat-button;
            color: lighten(@text, 10%);
            display: block;
            font-size: 14px;
            font-weight: 600;
            padding: 10px;
            text-align: center;
            &:hover {
                background: rgba(255,255,255,.5);
                border-color: @bg-gray;
                color: @text;
                text-decoration: none;
            }
        }
        .overall-reviews {
            text-align: left;
            margin: 25px 0 0;
            + ul {
                margin: 0;
            }
        }
        ul {
            margin: 15px 0 0;
            li {
                .border-box;
                float: left;
                margin: 10px 0 0;
                padding-right: 5px;
                width: 50%;
                &:nth-child(2n) {
                    padding: 0 0 0 5px;
                }
            }
        }
        dl {
            margin: 20px 0 15px;
            dt, dd {
                color: @text;
                display: inline-block;
            }
            dt {
                margin-right: 5px;
            }
        }
    }
    .previews.slider {
        background: @grain-src darken(@light-gray, 0%);
        .box-shadow(inset 0 2px 4px rgba(0,0,0,.2));
        border-top-color: @note-gray;
        border-bottom-color: @barely-gray;
    }
}

// 3 columns
@media (max-width: @3col) {
}


Fix missing lock icon on questions

Fix missing lock icon on questions

@import 'variables.less';
@import 'vendors.less';
@import 'includes/editor-tools.less';
@import 'includes/for-contributors-hot-topics.less';
@import 'includes/search-result.less';

h1 {
  font-size: 46px;
  margin-top: 0;
}

h2 {
  font-size: 28px;
}

.answers {
  .answer-tools {
    margin: 0 0 20px 130px;
    padding: 0 20px;

    > a {
      float: right;
      margin: 1px 0;
    }

    > form {
      float: left;
      text-transform: uppercase;

      .btn {
        text-transform: none;
      }
    }
  }

  .avatar {
    margin-bottom: 10px;

    img {
      border: 6px solid #fff;
    }
  }

  .helpful-count {
    &:before {
      content: '\2665';
      font-size: 20px;
      margin-right: 2px;
    }
  }

  .is-helpful {
    color: @textOrange;
  }

  .is-owner {
    color: @textBlue;
  }

  .is-solution {
    color: @textGreen;
  }

  .main-content {
    background: #fff;
    margin: 0 0 20px 130px;
    padding: 20px 30px;
    position: relative;

    &:before {
      border-color: transparent #fff;
      border-style: solid;
      border-width: 11px 11px 11px 0;
      height: 0;
      content: '';
      left: -11px;
      position: absolute;
      top: 20px;
      width: 0;
    }

    h3 {
      margin-top: 0;
    }

    .read-more {
      margin-right: 30px;
    }

    .other-helpful,
    .solution {
      border-top: 1px dotted @borderLightGrey;
      margin-top: 30px;
      padding-top: 30px;
    }

    .other-helpful {
      h3 {
        color: @textOrange;
      }
    }

    .solution {
      h3 {
        color: @textGreen;
        display: inline;
      }
    }
  }

  .notice {
    background: url('../img/warning-stripes.png') top left repeat-x #ffe;
    border: 1px solid #fffbe7;
    margin: 0 0 20px 0;
    padding: 20px 30px;
  }

  .question-meta {
    font-size: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        float: left;
        margin-right: 20px;
      }
    }

    span.last-answer-date {
      margin-left: 10px;
    }
  }

  .summary {
    margin: 0 0 10px 0;
  }

  .user-meta {
    float: left;
    font-size: 12px;
    margin: 0 20px 20px 0;
    width: 110px;

    .asked-by {
      margin-bottom: 25px;

      .answers,
      .points,
      .solutions {
        display: block;
      }

      .solutions {
        font-weight: bold;
      }

      .karma-titles {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          background: #fff;
          text-transform: uppercase;
          margin: 10px 0;
          padding: 5px;
        }
      }
    }
  }

  .question-tools {
    margin: 0 0 20px 130px;
    text-align: right;

    .btn {
      margin: 10px 0;
    }

    .me-too {
      float: left;

      .btn {
        margin: 0;
      }
    }
  }

  .report {
    margin-bottom: 20px;

    input,
    select {
      display: none;
    }

    .link-btn,
    .link-btn:visited,
    .link-btn:hover {
      color: @textLightGrey;
      display: block;
      float: right;
      font-size: 12px;
      text-transform: uppercase;
    }
  }

  .sidebar-nav {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  .sidebox {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  #question-reply {
    &:before {
      display: none;
    }

    textarea {
      margin-top: 10px;
      width: 510px;
    }

    .editor-tools {
      background: transparent;
    }
  }

  .system-details {
    text-transform: uppercase;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin-bottom: 2px;
      }
    }
  }

  #tags {
    text-transform: uppercase;

    button {
      background: transparent;
      border: 0;
      color: @textDarkOrange;
      cursor: pointer;
      margin: 0 0 0 5px;
      outline: none;
      padding: 0;
    }

    ul {
      list-style: none;
      margin: 0 0 12px 0;
      padding: 0;

      li {
        float: left;
        margin-right: 12px;

        a,
        a:visited,
        a:hover {
          color: @textGrey;
        }
      }

      &.immutable {
        button {
          display: none;
        }
      }
    }

    .btn {
      float: right;
    }

    .searchbox {
      display: block;
      margin-bottom: 12px;
      width: 140px;
    }
  }

  #vote-thanks-kbox {
    text-align: left;

    input#id_email {
      width: 230px;
    }
  }

  #more-system-details-kbox {
    margin-left: -115px;
    width: 720px;

    h1 {
      display: none;
    }

    h2 {
      font-size: 20px;
      font-weight: normal;
      margin: 15px 0 5px;
    }

    p,
    li {
      color: #898378;
      list-style: none;
      margin: 0;
    }

    div.about-support {
      ul {
        padding-left: 60px;
        li {
          list-style: disc;

          &.inactive {
            opacity: 0.5;
          }

          .key {
            font-weight: bold;
          }
        }
      }
    }

    div.plugins {
      li {
        background: transparent url(../img/questions/icon.plugin.gif) no-repeat 0 4px;
        padding: 2px 0 2px 25px;
      }
    }

    .bottom-close {
      margin: 10px 0 0;
      text-align: right;
    }
  }

  #email-subscribe-kbox {
    left: -150px;
    text-transform: none;
    top: 20px;
    width: 330px;

    ul.errorlist {
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;
      }
    }

    a {
      padding: 0;
    }

    input#id_email {
      width: 270px;
    }

    form {
      ul {
        list-style: none;
        margin: 0;
        padding: 10px 0;
      }
    }
  }

  #report-abuse {
    margin-bottom: 20px;
  }
}

.highlight-box {
  h2 {
    margin: 0;
  }

  .select-one {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      font-family: @OpenSansLight;
      font-size: 20px;
      margin: 10px 0;
    }
  }
}

.logo-sprite {
  background-image: url('../img/logos.large.sprite.png');
  background-repeat: no-repeat;
  height: 110px;
  width: 110px;

  &.logo-desktop {
    background-position: -20px -20px;
  }

  &.logo-mobile {
    background-position: -20px -470px;
  }

  &.logo-home {
    background-position: -20px -620px;
  }

  &.logo-sync {
    background-position: -20px -320px;
  }

  &.logo-other {
    background-position: -20px -170px;
  }
}

.questions {
  list-style: none;
  margin: 0;
  padding: 0;

  > section {
    background: #fff;
    padding: 20px 30px;
    position: relative;

    h2 {
      font-size: 22px;
      margin: 4px 0;
    }

    .content {
      border-right: 1px dotted @borderLightGrey;
      margin: 0 190px 0 0;
      min-height: 130px;
      padding: 0 20px 0 0;
    }

    .thread-meta {
      background: #fff;
      left: 0;
      overflow: hidden;
      padding: 0 6px;
      position: absolute;
      top: 0;
      width: 18px;

      &:hover {
        border-bottom: 1px solid @borderLightGrey;
        border-right: 1px solid @borderLightGrey;
        width: auto;
      }

      > div {
        background: @iconsSprite 0 0 no-repeat;
        color: #ccc;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        margin: 6px 0;
        padding: 0 0 0 24px;
        text-transform: uppercase;

        &.highlighted {
          color: @textGrey;
        }

        &.thread-contributed {
          background-position: -48px -977px;

          &.highlighted {
            background-position: -48px -1093px;
          }
        }

        &.thread-locked {
          background-position: -49px -1325px;
        }

        &.thread-solved {
          background-position: -49px -746px;

          &.highlighted {
            background-position: -49px -862px;
          }
        }
      }
    }

    .question-meta {
      float: right;
      font-size: 11px;
      padding: 0 0 0 20px;
      text-align: center;
      text-transform: uppercase;
      width: 170px;

      > div {
        width: 70px;

        &.have-problem-this-week {
          float: right;
          font-size: 13px;
          margin-top: 16px;
          width: 80px;

          h4 {
            font-size: 40px;
          }
        }
      }

      h4 {
        font-size: 30px;
        margin: 0;
      }

      &.urgent {
        h4 {
          color: #fe9300;
        }
      }
    }
  }

  > aside {
    font-size: 13px;
    margin: 10px 30px 30px 30px;

    .tag-list {
      display: inline;
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        display: inline;
        font-style: italic;
        margin: 0 0 0 10px;
      }
    }

    .user-meta {
      float: right;
    }
  }

  #filters {
    h3 {
      margin: 5px 0;
    }

    > section {
      border-top: 1px dotted @borderLightGrey;
      margin: 10px 0;
      padding: 10px 0;
    }

    p {
      font-size: 12px;
      margin-top: 0;
    }

    .grid_2 {
      margin-left: 0;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        a {
          color: @textLightGrey;
        }

        &.active {
          a {
            color: @textGrey;
            font-weight: bold;
          }
        }
      }
    }

    input[type=text] {
      margin: 0 0 10px;
      width: 130px;
    }
  }

  #top-contributors {
    ol {
      display: inline-block;
      width: 35%;

      li {
        margin: 5px 0;
      }
    }

    .inner-wrap {
      display: none;
    }

    &:hover {
      position: relative;

      .inner-wrap {
        display:block;
      }

      .feature-box {
        background: #fff;
        position: absolute;
        width: 318px;
      }
    }
  }
}

#aaq_progress {
  margin: 30px 78px 40px 78px;

  .legend {
    color: @textGrey;
    font-size: 14px;
    font-weight: normal;
    list-style: none;
    margin: 10px -78px;
    padding: 0;
    position: relative;
    z-index: 0;

    li {
      float: left;
      margin: 0 10px;
      position: relative;
      text-align: center;
      width: 136px;

      &.current {
        font-weight: bold;
      }

      &:before {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        content: '';
        height: 24px;
        left: 50%;
        margin-left: -1px;
        position: absolute;
        top: -34px;
        width: 0;
      }

      &:first-of-type,
      &:last-of-type {
        &:before {
          display: none;
        }
      }
    }
  }

  .progress-bar {
    > div {
      min-width: 12px;
      padding-right: 12px;
    }
  }
}

#ask-search-form {
  .btn {
    float: right;
  }

  .searchbox {
    float: left;
    font-size: 24px;
    height: 36px;
    margin: 0 0 0 12px;
    padding: 4px 20px 8px 20px;
    padding-bottom: 8px;
    padding-top: 4px;
    width: 746px;
  }

  &.has-searched {
    .searchbox {
      width: 876px;
    }

    .btn {
      display: none;
    }
  }
}

#recent-stats {
  font-size: 13px;
  margin: 0 0 40px 0;

  .no_reply {
    margin: 0 6px;
  }

  .progress-bar {
    margin-top: 10px;
  }

  .complete {
    > div {
      background: #489615;
      background: -moz-linear-gradient(#84C63C, #489615) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, left bottom, from(#84C63C), to(#489615));
    }
  }

  .total {
    float: right;
    margin: 0 6px;
  }
}

#register-form,
#login-form {
  .border-box();
  background: #fff;
  margin-bottom: 60px;
  padding: 0 60px 30px;

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
    margin: 10px 0;
    padding: 0;

    input {
      float: left;
      width: 300px;
    }

    label {
      float: left;
      padding-right: 12px;
      text-align: right;
      width: 130px;
    }

    li {
      display: block;
      margin: 10px 0;
    }
  }

  .submit {
    .btn {
      margin-left: 141px;
    }
  }
}

#show-login {
  text-align: center;
}

#login-form {
  display: none;
}

#login-help {
  margin-top: 10px;
}

#username-rules, #password-rules {
  font-size: 85%;
  margin: 5px 0 0 140px;
  text-align: left;
  width: 300px;
  clear: both;
}

#product-picker {
  > li {
    > a,
    > a:visited,
    > a:hover {
      color: @textGrey;

      > img {
        float: left;
      }

      > span {
        display: block;
        margin-left: 130px;

        &.title {
          font-family: @OpenSansLight;
          font-size: 18px;
        }
      }
    }
  }
}

#question-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;

    input {
      width: 700px;
    }

    label {
      float: left;
      width: 120px;
      padding-right: 20px;
      text-align: right;

      + input,
      + textarea,
      + div {
        float: left;
      }
    }

    li {
      padding: 10px 0;

      p {
        clear: both;
        margin: 0 0 0 140px;
      }

      &.details {
        display: none;

        input {
          width: auto;
        }
      }

      &.hide {
        .show {
          display: none;
        }
      }

      &.show {
        .hide {
          display: none;
        }
      }
    }

    &.show-details {
      li {
        &.details {
          display: block;
        }
      }
    }

    textarea {
      width: 710px;
    }

    .editor-tools {
      display: none;
    }

    .submit {
      .btn {
        margin-left: 140px;
      }
    }
  }

  ol#troubleshooting-help {
    display: none;
    list-style: decimal;
    margin-left: 170px;

    li {
      padding: 5px 0;

      ul {
        margin: 0 0 0 10px;
        padding: 0px;
      }
    }
  }

  #troubleshooting-explanation {
    display: none;
  }
}

#selected-category,
#selected-product {
  font-size: 14px;
  margin-bottom: 10px;

  a {
    font-size: 12px;
  }

  label {
    font-family: @OpenSansLight;
  }

  span {
    font-weight: bold;
  }
}

#selected-category {
  float: right;
}

#selected-product {
  float: left;
}

#try-an-article {
  margin-top: 20px;
}

.attachments-upload {
  margin: 1.5em 0 1.5em 128px;

  label {
    display: block;
    margin: .5em 0;
  }

  .adding-attachment {
    display: none;
    line-height: 4em;
  }

  .empty,
  .upload-progress {
    display: none;
  }

  .attachments {
    a:hover {
      img {
        border: 1px solid #eee;
      }
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  .upload-progress {
    background: url('../img/wait-trans.gif') no-repeat center;
    border: 1px solid #ccc;
    margin: 5px;
    text-align: center;
    vertical-align: top;

    &.show {
      display: inline-block;
    }
  }

  .add-attachment {
    noscript {
      input {
        margin-left: 1em;
      }
    }
  }

  input.image-delete {
    margin-top: 1em;
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

div.ans-attachments {
  padding: 10px 15px 0 10px;

  a:hover {
    img {
      border: 1px solid #eee;
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

#image-attachment-kbox {
  img {
    max-width: 100%;

    &.loading {
      background: transparent url(../img/wait-trans.gif) no-repeat center center;
      display: block;
      height: 32px;
      margin: auto;
      width: 32px;
    }
  }
}

.feature-box {
  padding: 13px 30px 15px;

  h2 {
    font-size: 21px;
  }
}

.edit-answer {
  .form-widget {
    width: 600px;
  }

  .form-widget,
  .info,
  .submit {
    margin: 20px 0 20px 128px;
  }

  textarea {
    width: 592px;
  }
}

#product-selector,
#topic-selector {
  float: right;
  font-size: 14px;
  margin-left: 10px;

  > select {
    padding: 2px;
    width:  200px;
  }
}

.edit-question {
  #troubleshooting-install,
  #troubleshooting-manual {
    display: none;
  }

  li.system-details-info {
    display: none;
  }

  #question-form {
    li.details {
      display: block;
    }
  }
}

@import 'variables.less';
@import 'vendors.less';
@import 'includes/editor-tools.less';
@import 'includes/for-contributors-hot-topics.less';
@import 'includes/search-result.less';

h1 {
  font-size: 46px;
  margin-top: 0;
}

h2 {
  font-size: 28px;
}

.answers {
  .answer-tools {
    margin: 0 0 20px 130px;
    padding: 0 20px;

    > a {
      float: right;
      margin: 1px 0;
    }

    > form {
      float: left;
      text-transform: uppercase;

      .btn {
        text-transform: none;
      }
    }
  }

  .avatar {
    margin-bottom: 10px;

    img {
      border: 6px solid #fff;
    }
  }

  .helpful-count {
    &:before {
      content: '\2665';
      font-size: 20px;
      margin-right: 2px;
    }
  }

  .is-helpful {
    color: @textOrange;
  }

  .is-owner {
    color: @textBlue;
  }

  .is-solution {
    color: @textGreen;
  }

  .main-content {
    background: #fff;
    margin: 0 0 20px 130px;
    padding: 20px 30px;
    position: relative;

    &:before {
      border-color: transparent #fff;
      border-style: solid;
      border-width: 11px 11px 11px 0;
      height: 0;
      content: '';
      left: -11px;
      position: absolute;
      top: 20px;
      width: 0;
    }

    h3 {
      margin-top: 0;
    }

    .read-more {
      margin-right: 30px;
    }

    .other-helpful,
    .solution {
      border-top: 1px dotted @borderLightGrey;
      margin-top: 30px;
      padding-top: 30px;
    }

    .other-helpful {
      h3 {
        color: @textOrange;
      }
    }

    .solution {
      h3 {
        color: @textGreen;
        display: inline;
      }
    }
  }

  .notice {
    background: url('../img/warning-stripes.png') top left repeat-x #ffe;
    border: 1px solid #fffbe7;
    margin: 0 0 20px 0;
    padding: 20px 30px;
  }

  .question-meta {
    font-size: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        float: left;
        margin-right: 20px;
      }
    }

    span.last-answer-date {
      margin-left: 10px;
    }
  }

  .summary {
    margin: 0 0 10px 0;
  }

  .user-meta {
    float: left;
    font-size: 12px;
    margin: 0 20px 20px 0;
    width: 110px;

    .asked-by {
      margin-bottom: 25px;

      .answers,
      .points,
      .solutions {
        display: block;
      }

      .solutions {
        font-weight: bold;
      }

      .karma-titles {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          background: #fff;
          text-transform: uppercase;
          margin: 10px 0;
          padding: 5px;
        }
      }
    }
  }

  .question-tools {
    margin: 0 0 20px 130px;
    text-align: right;

    .btn {
      margin: 10px 0;
    }

    .me-too {
      float: left;

      .btn {
        margin: 0;
      }
    }
  }

  .report {
    margin-bottom: 20px;

    input,
    select {
      display: none;
    }

    .link-btn,
    .link-btn:visited,
    .link-btn:hover {
      color: @textLightGrey;
      display: block;
      float: right;
      font-size: 12px;
      text-transform: uppercase;
    }
  }

  .sidebar-nav {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  .sidebox {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  #question-reply {
    &:before {
      display: none;
    }

    textarea {
      margin-top: 10px;
      width: 510px;
    }

    .editor-tools {
      background: transparent;
    }
  }

  .system-details {
    text-transform: uppercase;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin-bottom: 2px;
      }
    }
  }

  #tags {
    text-transform: uppercase;

    button {
      background: transparent;
      border: 0;
      color: @textDarkOrange;
      cursor: pointer;
      margin: 0 0 0 5px;
      outline: none;
      padding: 0;
    }

    ul {
      list-style: none;
      margin: 0 0 12px 0;
      padding: 0;

      li {
        float: left;
        margin-right: 12px;

        a,
        a:visited,
        a:hover {
          color: @textGrey;
        }
      }

      &.immutable {
        button {
          display: none;
        }
      }
    }

    .btn {
      float: right;
    }

    .searchbox {
      display: block;
      margin-bottom: 12px;
      width: 140px;
    }
  }

  #vote-thanks-kbox {
    text-align: left;

    input#id_email {
      width: 230px;
    }
  }

  #more-system-details-kbox {
    margin-left: -115px;
    width: 720px;

    h1 {
      display: none;
    }

    h2 {
      font-size: 20px;
      font-weight: normal;
      margin: 15px 0 5px;
    }

    p,
    li {
      color: #898378;
      list-style: none;
      margin: 0;
    }

    div.about-support {
      ul {
        padding-left: 60px;
        li {
          list-style: disc;

          &.inactive {
            opacity: 0.5;
          }

          .key {
            font-weight: bold;
          }
        }
      }
    }

    div.plugins {
      li {
        background: transparent url(../img/questions/icon.plugin.gif) no-repeat 0 4px;
        padding: 2px 0 2px 25px;
      }
    }

    .bottom-close {
      margin: 10px 0 0;
      text-align: right;
    }
  }

  #email-subscribe-kbox {
    left: -150px;
    text-transform: none;
    top: 20px;
    width: 330px;

    ul.errorlist {
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;
      }
    }

    a {
      padding: 0;
    }

    input#id_email {
      width: 270px;
    }

    form {
      ul {
        list-style: none;
        margin: 0;
        padding: 10px 0;
      }
    }
  }

  #report-abuse {
    margin-bottom: 20px;
  }
}

.highlight-box {
  h2 {
    margin: 0;
  }

  .select-one {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      font-family: @OpenSansLight;
      font-size: 20px;
      margin: 10px 0;
    }
  }
}

.logo-sprite {
  background-image: url('../img/logos.large.sprite.png');
  background-repeat: no-repeat;
  height: 110px;
  width: 110px;

  &.logo-desktop {
    background-position: -20px -20px;
  }

  &.logo-mobile {
    background-position: -20px -470px;
  }

  &.logo-home {
    background-position: -20px -620px;
  }

  &.logo-sync {
    background-position: -20px -320px;
  }

  &.logo-other {
    background-position: -20px -170px;
  }
}

.questions {
  list-style: none;
  margin: 0;
  padding: 0;

  > section {
    background: #fff;
    padding: 20px 30px;
    position: relative;

    h2 {
      font-size: 22px;
      margin: 4px 0;
    }

    .content {
      border-right: 1px dotted @borderLightGrey;
      margin: 0 190px 0 0;
      min-height: 130px;
      padding: 0 20px 0 0;
    }

    .thread-meta {
      background: #fff;
      left: 0;
      overflow: hidden;
      padding: 0 6px;
      position: absolute;
      top: 0;
      width: 18px;

      &:hover {
        border-bottom: 1px solid @borderLightGrey;
        border-right: 1px solid @borderLightGrey;
        width: auto;
      }

      > div {
        background: @iconsSprite 0 0 no-repeat;
        color: #ccc;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        margin: 6px 0;
        padding: 0 0 0 24px;
        text-transform: uppercase;

        &.highlighted {
          color: @textGrey;
        }

        &.thread-contributed {
          background-position: -48px -977px;

          &.highlighted {
            background-position: -48px -1093px;
          }
        }

        &.thread-solved {
          background-position: -49px -746px;

          &.highlighted {
            background-position: -49px -862px;
          }
        }
      }
    }

    .question-meta {
      float: right;
      font-size: 11px;
      padding: 0 0 0 20px;
      text-align: center;
      text-transform: uppercase;
      width: 170px;

      > div {
        width: 70px;

        &.have-problem-this-week {
          float: right;
          font-size: 13px;
          margin-top: 16px;
          width: 80px;

          h4 {
            font-size: 40px;
          }
        }
      }

      h4 {
        font-size: 30px;
        margin: 0;
      }

      &.urgent {
        h4 {
          color: #fe9300;
        }
      }
    }
  }

  > aside {
    font-size: 13px;
    margin: 10px 30px 30px 30px;

    .tag-list {
      display: inline;
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        display: inline;
        font-style: italic;
        margin: 0 0 0 10px;
      }
    }

    .user-meta {
      float: right;
    }
  }

  #filters {
    h3 {
      margin: 5px 0;
    }

    > section {
      border-top: 1px dotted @borderLightGrey;
      margin: 10px 0;
      padding: 10px 0;
    }

    p {
      font-size: 12px;
      margin-top: 0;
    }

    .grid_2 {
      margin-left: 0;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        a {
          color: @textLightGrey;
        }

        &.active {
          a {
            color: @textGrey;
            font-weight: bold;
          }
        }
      }
    }

    input[type=text] {
      margin: 0 0 10px;
      width: 130px;
    }
  }

  #top-contributors {
    ol {
      display: inline-block;
      width: 35%;

      li {
        margin: 5px 0;
      }
    }

    .inner-wrap {
      display: none;
    }

    &:hover {
      position: relative;

      .inner-wrap {
        display:block;
      }

      .feature-box {
        background: #fff;
        position: absolute;
        width: 318px;
      }
    }
  }
}

#aaq_progress {
  margin: 30px 78px 40px 78px;

  .legend {
    color: @textGrey;
    font-size: 14px;
    font-weight: normal;
    list-style: none;
    margin: 10px -78px;
    padding: 0;
    position: relative;
    z-index: 0;

    li {
      float: left;
      margin: 0 10px;
      position: relative;
      text-align: center;
      width: 136px;

      &.current {
        font-weight: bold;
      }

      &:before {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        content: '';
        height: 24px;
        left: 50%;
        margin-left: -1px;
        position: absolute;
        top: -34px;
        width: 0;
      }

      &:first-of-type,
      &:last-of-type {
        &:before {
          display: none;
        }
      }
    }
  }

  .progress-bar {
    > div {
      min-width: 12px;
      padding-right: 12px;
    }
  }
}

#ask-search-form {
  .btn {
    float: right;
  }

  .searchbox {
    float: left;
    font-size: 24px;
    height: 36px;
    margin: 0 0 0 12px;
    padding: 4px 20px 8px 20px;
    padding-bottom: 8px;
    padding-top: 4px;
    width: 746px;
  }

  &.has-searched {
    .searchbox {
      width: 876px;
    }

    .btn {
      display: none;
    }
  }
}

#recent-stats {
  font-size: 13px;
  margin: 0 0 40px 0;

  .no_reply {
    margin: 0 6px;
  }

  .progress-bar {
    margin-top: 10px;
  }

  .complete {
    > div {
      background: #489615;
      background: -moz-linear-gradient(#84C63C, #489615) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, left bottom, from(#84C63C), to(#489615));
    }
  }

  .total {
    float: right;
    margin: 0 6px;
  }
}

#register-form,
#login-form {
  .border-box();
  background: #fff;
  margin-bottom: 60px;
  padding: 0 60px 30px;

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
    margin: 10px 0;
    padding: 0;

    input {
      float: left;
      width: 300px;
    }

    label {
      float: left;
      padding-right: 12px;
      text-align: right;
      width: 130px;
    }

    li {
      display: block;
      margin: 10px 0;
    }
  }

  .submit {
    .btn {
      margin-left: 141px;
    }
  }
}

#show-login {
  text-align: center;
}

#login-form {
  display: none;
}

#login-help {
  margin-top: 10px;
}

#username-rules, #password-rules {
  font-size: 85%;
  margin: 5px 0 0 140px;
  text-align: left;
  width: 300px;
  clear: both;
}

#product-picker {
  > li {
    > a,
    > a:visited,
    > a:hover {
      color: @textGrey;

      > img {
        float: left;
      }

      > span {
        display: block;
        margin-left: 130px;

        &.title {
          font-family: @OpenSansLight;
          font-size: 18px;
        }
      }
    }
  }
}

#question-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;

    input {
      width: 700px;
    }

    label {
      float: left;
      width: 120px;
      padding-right: 20px;
      text-align: right;

      + input,
      + textarea,
      + div {
        float: left;
      }
    }

    li {
      padding: 10px 0;

      p {
        clear: both;
        margin: 0 0 0 140px;
      }

      &.details {
        display: none;

        input {
          width: auto;
        }
      }

      &.hide {
        .show {
          display: none;
        }
      }

      &.show {
        .hide {
          display: none;
        }
      }
    }

    &.show-details {
      li {
        &.details {
          display: block;
        }
      }
    }

    textarea {
      width: 710px;
    }

    .editor-tools {
      display: none;
    }

    .submit {
      .btn {
        margin-left: 140px;
      }
    }
  }

  ol#troubleshooting-help {
    display: none;
    list-style: decimal;
    margin-left: 170px;

    li {
      padding: 5px 0;

      ul {
        margin: 0 0 0 10px;
        padding: 0px;
      }
    }
  }

  #troubleshooting-explanation {
    display: none;
  }
}

#selected-category,
#selected-product {
  font-size: 14px;
  margin-bottom: 10px;

  a {
    font-size: 12px;
  }

  label {
    font-family: @OpenSansLight;
  }

  span {
    font-weight: bold;
  }
}

#selected-category {
  float: right;
}

#selected-product {
  float: left;
}

#try-an-article {
  margin-top: 20px;
}

.attachments-upload {
  margin: 1.5em 0 1.5em 128px;

  label {
    display: block;
    margin: .5em 0;
  }

  .adding-attachment {
    display: none;
    line-height: 4em;
  }

  .empty,
  .upload-progress {
    display: none;
  }

  .attachments {
    a:hover {
      img {
        border: 1px solid #eee;
      }
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  .upload-progress {
    background: url('../img/wait-trans.gif') no-repeat center;
    border: 1px solid #ccc;
    margin: 5px;
    text-align: center;
    vertical-align: top;

    &.show {
      display: inline-block;
    }
  }

  .add-attachment {
    noscript {
      input {
        margin-left: 1em;
      }
    }
  }

  input.image-delete {
    margin-top: 1em;
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

div.ans-attachments {
  padding: 10px 15px 0 10px;

  a:hover {
    img {
      border: 1px solid #eee;
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

#image-attachment-kbox {
  img {
    max-width: 100%;

    &.loading {
      background: transparent url(../img/wait-trans.gif) no-repeat center center;
      display: block;
      height: 32px;
      margin: auto;
      width: 32px;
    }
  }
}

.feature-box {
  padding: 13px 30px 15px;

  h2 {
    font-size: 21px;
  }
}

.edit-answer {
  .form-widget {
    width: 600px;
  }

  .form-widget,
  .info,
  .submit {
    margin: 20px 0 20px 128px;
  }

  textarea {
    width: 592px;
  }
}

#product-selector,
#topic-selector {
  float: right;
  font-size: 14px;
  margin-left: 10px;

  > select {
    padding: 2px;
    width:  200px;
  }
}

.edit-question {
  #troubleshooting-install,
  #troubleshooting-manual {
    display: none;
  }

  li.system-details-info {
    display: none;
  }

  #question-form {
    li.details {
      display: block;
    }
  }
}


add space and speed button with level text

.dy-home {
  padding-top: 20px;
  .dy-game-title {
    font-size: 60px;
    line-height: 65px;
    font-weight: bold;
    color: rgb(119, 110, 101);
  }
  button {
    background: #8f7a66;
    .border-radius(3px);
    text-decoration: none;
    line-height: 42px;
    cursor: pointer;
    text-align: center;
    color: #f9f6f2;
    padding: 0 20px;
    border: none;
    float: right;
  }
  .dy-score {
    .score-button-mixin();
    margin-bottom: 5px;
    &:after {
      content: 'score';
      .score-text-mixin();
    }
  }
  .dy-best-score {
    .score-button-mixin();
    margin-bottom: 5px;
    &:after {
      content: 'best';
      .score-text-mixin();
    }
  }
  .dy-speed-role {
    .score-button-mixin();
    padding-right: 10px;
    padding-left: 10px;
    font-size: 17px;
    &:after {
      content: 'level';
      .score-text-mixin();
    }
  }
  .dy-instructions {
    color: rgb(119, 110, 101);
    line-height: 65px;
  }
  .dy-game-container {
    margin-top: 10px;
  }
  .dy-score-container {
    padding-bottom: 10px;
  }
  .dy-how-to-pause {
    margin-top: 10px;
    font-weight: bold;
    font-size: 19px;
    text-align: right;
    color: #776e65;
  }
  .dy-game-control {
    position: relative;
    display: inline-block;
  }
  .dy-game-start-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .dy-new-game-btn {
    font-weight: bold;
    width: 100%;
    margin-top: 100px;
  }
  .dy-game-start {
    width: 100%;
    height: 100%;
    background: rgba(238, 228, 218, 0.5);
  }
  .dy-game-over {
    width: 100%;
    height: 100%;
    color: #776e65;
    background: rgba(238, 228, 218, 0.73);
    text-align: center;
    padding-top: 40px;
    p {
      font-size: 60px;
      font-weight: bold;
      line-height: 60px;
      margin-top: 150px;
    }
    .dy-new-game-btn {
      margin-top: 30px;
    }
  }
  .dy-new-record {
    position: absolute;
    top: 80px;
    width: 100%;
    font-size: 40px;
    color: #d79936;
    font-weight: bold;
  }
}

.dy-home {
  padding-top: 20px;
  .dy-game-title {
    font-size: 60px;
    line-height: 65px;
    font-weight: bold;
    color: rgb(119, 110, 101);
  }
  button {
    background: #8f7a66;
    .border-radius(3px);
    text-decoration: none;
    line-height: 42px;
    cursor: pointer;
    text-align: center;
    color: #f9f6f2;
    padding: 0 20px;
    border: none;
    float: right;
  }
  .dy-score {
    .score-button-mixin();
    &:after {
      content: 'score';
      .score-text-mixin();
    }
  }
  .dy-best-score {
    .score-button-mixin();
    &:after {
      content: 'best';
      .score-text-mixin();
    }
  }
  .dy-instructions {
    color: rgb(119, 110, 101);
    line-height: 65px;
  }
  .dy-game-container {
    margin-top: 10px;
  }
  .dy-score-container {
    padding-bottom: 10px;
  }
  .dy-how-to-pause {
    margin-top: 10px;
    font-weight: bold;
    font-size: 19px;
    text-align: right;
    color: #776e65;
  }
  .dy-game-control {
    position: relative;
    display: inline-block;
  }
  .dy-game-start-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .dy-new-game-btn {
    font-weight: bold;
    width: 100%;
    margin-top: 100px;
  }
  .dy-game-start {
    width: 100%;
    height: 100%;
    background: rgba(238, 228, 218, 0.5);
  }
  .dy-game-over {
    width: 100%;
    height: 100%;
    color: #776e65;
    background: rgba(238, 228, 218, 0.73);
    text-align: center;
    padding-top: 40px;
    p {
      font-size: 60px;
      font-weight: bold;
      line-height: 60px;
      margin-top: 150px;
    }
    .dy-new-game-btn {
      margin-top: 30px;
    }
  }
  .dy-new-record {
    position: absolute;
    top: 80px;
    width: 100%;
    font-size: 40px;
    color: #d79936;
    font-weight: bold;
  }
}


Containers now left-align

Containers now left-align

The default bootstrap UI still calls for a centered container,
which makes less sense with a left-locked menu. This change
overrides the bootstrap container margin from auto, and sets it
to the grid's gutter size.

Change-Id: Ibd9701887d0a4d5276413221314b40becf3d529f

/*
 * Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License. You may obtain
 * a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 */
/**
 * Styles specific to the overall application.
 */

body {

}

.container {
    margin-right: (@grid-gutter-width / 2);
    margin-left: (@grid-gutter-width / 2);
}

@media (max-width: @screen-xs-max) {
    body {
        margin-left: @navbar-fixed-left-width-xs;
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    body {
        margin-left: @navbar-fixed-left-width-sm;
    }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    body {
        margin-left: @navbar-fixed-left-width-md;
    }
}

@media (min-width: @screen-lg-min) {
    body {
        margin-left: @navbar-fixed-left-width-lg;
    }
}

i.icon {
    line-height: .5em;
}

/*
 * Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License. You may obtain
 * a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 */
/**
 * Styles specific to the overall application.
 */

body {

}

@media (max-width: @screen-xs-max) {
    body {
        margin-left: @navbar-fixed-left-width-xs;
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    body {
        margin-left: @navbar-fixed-left-width-sm;
    }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    body {
        margin-left: @navbar-fixed-left-width-md;
    }
}

@media (min-width: @screen-lg-min) {
    body {
        margin-left: @navbar-fixed-left-width-lg;
    }
}

i.icon {
    line-height: .5em;
}


Add bootstrap-progressbar support

Add bootstrap-progressbar support

@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

@import "bootstrap/less/normalize.less";
@import "bootstrap/less/print.less";

@import "bootstrap/less/scaffolding.less";
@import "bootstrap/less/type.less";
@import "bootstrap/less/grid.less";
@import "bootstrap/less/tables.less";
@import "bootstrap/less/forms.less";
@import "bootstrap/less/buttons.less";

@import "bootstrap/less/component-animations.less";
@import "bootstrap/less/dropdowns.less";
@import "bootstrap/less/navs.less";
@import "bootstrap/less/navbar.less";
@import "bootstrap/less/jumbotron.less";
@import "bootstrap/less/alerts.less";
@import "bootstrap/less/close.less";
@import "bootstrap/less/progress-bars.less";

@import "bootstrap/less/utilities.less";
@import "bootstrap/less/responsive-utilities.less";

body {
  padding-top: 70px;
}

.table-responsive {
  font-size: 20px;
}

.table-responsive tbody>tr>td {
  vertical-align: middle;
}
.table-pulled tr td {
  &:last-child, &:nth-last-child(2) {
    white-space: nowrap;
    width: 1%;
  }
}

.progress {
  position: relative;
  vertical-align: middle !important;
  height: @line-height-computed * 1.3;

  .progress-bar {
    line-height: @headings-line-height;
  }

  span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
    font-size: @font-size-h3;
    text-shadow: 0 0 4px #fff;
  }
}

@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

@import "bootstrap/less/normalize.less";
@import "bootstrap/less/print.less";

@import "bootstrap/less/scaffolding.less";
@import "bootstrap/less/type.less";
@import "bootstrap/less/grid.less";
@import "bootstrap/less/tables.less";
@import "bootstrap/less/forms.less";
@import "bootstrap/less/buttons.less";

@import "bootstrap/less/component-animations.less";
@import "bootstrap/less/dropdowns.less";
@import "bootstrap/less/navs.less";
@import "bootstrap/less/navbar.less";
@import "bootstrap/less/jumbotron.less";
@import "bootstrap/less/alerts.less";
@import "bootstrap/less/close.less";

@import "bootstrap/less/utilities.less";
@import "bootstrap/less/responsive-utilities.less";

body {
  padding-top: 70px;
//  color: red;
}

.table-responsive {
  font-size: 20px;
}

.table-responsive tbody>tr>td {
  vertical-align: middle;
}
.table-pulled tr td {
  &:last-child, &:nth-last-child(2) {
    white-space: nowrap;
    width: 1%;
  }
}


make table cells relative instead of static

// variables
@newRowButtonFontSize: 12px;

// mixins

// apply to all tables
.booty-header-table, .booty-body-table, .booty-footer-table {
  // set margin-bottom to zero, bootstrap has this set to 20px
  table {
    margin-bottom: 0px;
  }
}

// header table
.booty-header-table {
  // sorting
  .sorted-ascending {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
  }

  .sorted-descending {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-top: 5px solid black;
  }

  th.sortable {
    cursor: pointer;
  }
}

// body table
.booty-body-table {
  overflow-y: auto;

  table.table-hover {
    tr {
      cursor: pointer;
    }
  }
}

// footer table
.booty-footer-table {
  button.new-row {
    font-size: @newRowButtonFontSize;
  }
}

// enforce bootstrap cell not to be static - made change for error bubble
table td[class*=col-], table th[class*=col-] {
  position: relative !important;
}