let ryff title wrap (bug 664069)

let ryff title wrap (bug 664069)

@import 'lib';

#promos {
    height: 268px;
    max-height: 268px;
    margin-bottom: 30px;
    padding: 0;
    width: 100%;
    position: relative;
    div {
        overflow: hidden;
    }

    .control {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        color: #ccc;
        text-indent: -1000em;
        opacity: 0;
        z-index: 1;
        -moz-transition-property: background-color, color, opacity;
        -moz-transition-duration: .2s;
    }
    &:hover .control {
        opacity: 1;
    }
    .prev { left: -30px; }
    .next { right: -30px; }
    .control:after {
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 38px;
        height: 38px;
        border: 2px solid #ccc;
        font-family: Georgia;
        margin: auto;
        font-size: 44px;
        line-height: 30px;
        text-indent: 0;
        text-align: center;
        .border-radius(20px);
        .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.6) inset);
        -moz-transition-property: border-color, color, box-shadow, left, right;
        -moz-transition-duration: .2s;
    }
    .control:hover:after {
        border-color: #D16B00;
        color: #D16B00;
    }
    .prev:after {
        content: '\00ab';
        left: 10px;
    }
    .next:after {
        content: '\00bb';
        right: 10px;
    }

    .feature {
        height: 251px;
        padding: 10px 10%;
        position: relative;
        overflow: hidden;
        box-shadow: none;
    }

    /* @group Rock Your Firefox (RYFF) */
    .ryff h3,
    .promo h2 {
        font-size: 36px;
        font-weight: bold;
        line-height: 1.1em;
    }

    .ryff {
        position: relative;
        overflow: hidden;
        padding: 20px 10% 10px 270px;
        background: url(../../img/zamboni/discovery_pane/promos/ryff-bg.png) 0 0 no-repeat;
        color: #333;
        h2 {
            white-space: nowrap;
        }
        h3 {
            margin-bottom: 10px;
            a {
                color: #7e100a;
                text-decoration: none;
            }
            white-space: wrap;
        }
        img {
            width: 40%;
            float: right;
            margin: 0 0 .5em 10px;
        }
    }
    /* @end */

    /* @Collection *********/
    .collection {
        h2 {
            max-width: 650px;
            margin: 10px auto;
        }

        &.promo h2 {
            margin: 0;
            max-width: auto;
            a {
                color: inherit;
                text-decoration: none;
            }
        }
        .more {
            text-align: center;
        }
    }

    .promo hgroup,
    #monthly .wrap,
    #go-mobile .wrap {
        margin: 0 auto;
        max-width: 650px;
        width: 100%;
    }

    .promo {
        h2, h3 {
            margin-bottom: 0;
        }
        h2 {
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
            white-space: nowrap;
        }
        hgroup {
               margin: 10px auto 20px;
        }
    }

    #starter .more,
    #st-patricks .more,
    #fx4-collection .more {
        display: none;
    }

    /* @group Starter Pack */
    #starter.feature {
        background: none;
        background-image:
            url(../../img/zamboni/discovery_pane/promos/starter-bg-left.png),
            url(../../img/zamboni/discovery_pane/promos/starter-bg.png),
            url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png);
        background-position: -5% bottom, center top, 105% top;
        background-repeat: no-repeat, repeat-x, no-repeat;
    }

    #starter.feature hgroup:after {
        background: url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png) 100% 0 no-repeat;
        display: block;
        content: "";
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        width: 153px;
    }

    #starter h2 {
        color: #075f7a;
    }
    /* @end */

    /* @group St. Patrick's Day Personas */
    #st-patricks {
        background: url(../../img/zamboni/discovery_pane/promos/st-patricks-bg.png) 50% 0 no-repeat;
        h2 {
            color: #296215;
        }
    }
    /* @end */

    /* @group Monthly Pick */
    #monthly {
        background: url(../../img/zamboni/discovery_pane/promos/monthly-bg.png) 50% 0 no-repeat;
        .wrap > div {
            overflow: hidden;
            position: relative;
            max-height: 120px;
            padding: 20px;
            > div {
                > div {
                    float: left;
                    width: 50%;
                }
                > p {
                    padding-right: 20px;
                }
            }
        }
        h2 {
            color: #8b0101;
        }
        h3 {
            margin-bottom: 10px;
        }
        p.install-button {
            margin-bottom: 0;
        }
        img {
            display: block;
            float: right;
            max-width: 50%;
            max-height: 120px;
        }
    }
    /* @end */

    /* @group Go Mobile */
    #go-mobile {
        background: url(../../img/zamboni/discovery_pane/promos/go-mobile-bg.png) left top no-repeat;
        h2 {
            color: #485c65;
            width: 300px;
        }
        .wrap {
            width: 384px;
            margin: 0;
        }
        p {
            margin: 0;
        }
        .wrap > div {
            padding: 20px;
        }
        p.install-button {
            margin-bottom: 0;
        }
    }
    /* @end */

    /* @group Firefox 4 Collection */
    #fx4-collection {
        background: url(../../img/zamboni/discovery_pane/promos/fx4-collection-bg.png) 50% 0 no-repeat;
        h2 {
            color: #2c5c89;
        }
    }
    /* @end */

    #featured-addons {
        padding: 10px 9%;
    }

    /* @Addon @boxes *********/
    .addons ul,
    ul.addons {
        width: 100%;
        max-width: 650px;
        margin: 0 auto 1em;
    }

    .addons li {
        float: left;
        width: 30%;
        position: relative;
        margin-right: 5%;
        margin-bottom: 5%;
    }

    .html-rtl .addons li {
        float: right;
    }

    .addons li:nth-child(3n),
    .html-rtl .addons li:nth-child(3n + 1) {
        margin-right: 0;
    }
    .html-rtl .addons li:nth-child(3n) {
        margin-right: 5%;
    }

    .addons li > a,
    #monthly > div,
    #go-mobile > div {
        .gradient-two-color(#fff, #ecf1f7);
        border: 1px solid #b7c3d7;
        .border-radius(6px);
        .box-shadow(0 -2px 0 rgba(58,78,103,0.08) inset, 0 2px 0 rgba(190,210,230,0.5);
    }

    .addons li > a {
        display: block;
        position: relative;
        text-align: center;
        height: 120px;
        width: 84%;
        padding: 10px 8%;
        -moz-transition-property: border-color, box-shadow;
        -moz-transition-duration: 0.5s;
        -moz-transition-timing-function: ease-out;
    }

    .addons li > a:hover,
    .addons li > a:focus,
    .addons li > a:active {
        border-color: rgba(165,175,185,1);
        box-shadow: inset 0 -2px 0 rgba(58,78,103,0.1), 0 2px 0 rgba(190,210,230,0.85);
        -moz-transition-property: border-color, box-shadow;
        -moz-transition-duration: 0.1s;
        -moz-transition-timing-function: ease-out;
        text-decoration: none;
    }

    .addons h3 {
        font-size: 14px;
        line-height: 1.1;
        max-height: 1.1em;
        font-weight: bold;
        font-family: inherit;
        margin: .25em 0;
        text-align: center;
        overflow: hidden;
    }

    .addons li > a:hover h3,
    .addons li > a:focus h3,
    .addons li > a:active h3 {
        text-decoration: underline;
    }

    .addons p.desc {
        overflow: hidden;
        max-height: 5.6em;
        font-size: 11px;
        text-align: left;
        color: #373d48;
        margin: 0;
    }

    .html-rtl .addons p.desc {
        text-align: right;
    }

    .addons img {
        display: block;
        margin: 0 auto;
        max-width: 50px;
    }

    .promo:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}

@import 'lib';

#promos {
    height: 268px;
    max-height: 268px;
    margin-bottom: 30px;
    padding: 0;
    width: 100%;
    position: relative;
    div {
        overflow: hidden;
    }

    .control {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        color: #ccc;
        text-indent: -1000em;
        opacity: 0;
        z-index: 1;
        -moz-transition-property: background-color, color, opacity;
        -moz-transition-duration: .2s;
    }
    &:hover .control {
        opacity: 1;
    }
    .prev { left: -30px; }
    .next { right: -30px; }
    .control:after {
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 38px;
        height: 38px;
        border: 2px solid #ccc;
        font-family: Georgia;
        margin: auto;
        font-size: 44px;
        line-height: 30px;
        text-indent: 0;
        text-align: center;
        .border-radius(20px);
        .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.6) inset);
        -moz-transition-property: border-color, color, box-shadow, left, right;
        -moz-transition-duration: .2s;
    }
    .control:hover:after {
        border-color: #D16B00;
        color: #D16B00;
    }
    .prev:after {
        content: '\00ab';
        left: 10px;
    }
    .next:after {
        content: '\00bb';
        right: 10px;
    }

    .feature {
        height: 251px;
        padding: 10px 10%;
        position: relative;
        overflow: hidden;
        box-shadow: none;
    }

    /* @group Rock Your Firefox (RYFF) */
    .ryff {
        position: relative;
        overflow: hidden;
        padding: 20px 10% 10px 270px;
        background: url(../../img/zamboni/discovery_pane/promos/ryff-bg.png) 0 0 no-repeat;
        color: #333;
        h2 {
            white-space: nowrap;
        }
        h3 {
            margin-bottom: 10px;
            a {
                color: #7e100a;
                text-decoration: none;
            }
        }
        img {
            width: 40%;
            float: right;
            margin: 0 0 .5em 10px;
        }
    }

    .ryff h3,
    .promo h2 {
        font-size: 36px;
        font-weight: bold;
        line-height: 1.1em;
        white-space: nowrap;
    }
    /* @end */

    /* @Collection *********/
    .collection {
        h2 {
            max-width: 650px;
            margin: 10px auto;
        }

        &.promo h2 {
            margin: 0;
            max-width: auto;
            a {
                color: inherit;
                text-decoration: none;
            }
        }
        .more {
            text-align: center;
        }
    }

    .promo hgroup,
    #monthly .wrap,
    #go-mobile .wrap {
        margin: 0 auto;
        max-width: 650px;
        width: 100%;
    }

    .promo {
        h2, h3 {
            margin-bottom: 0;
        }
        h2 {
            text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }
        hgroup {
               margin: 10px auto 20px;
        }
    }

    #starter .more,
    #st-patricks .more,
    #fx4-collection .more {
        display: none;
    }

    /* @group Starter Pack */
    #starter.feature {
        background: none;
        background-image:
            url(../../img/zamboni/discovery_pane/promos/starter-bg-left.png),
            url(../../img/zamboni/discovery_pane/promos/starter-bg.png),
            url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png);
        background-position: -5% bottom, center top, 105% top;
        background-repeat: no-repeat, repeat-x, no-repeat;
    }

    #starter.feature hgroup:after {
        background: url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png) 100% 0 no-repeat;
        display: block;
        content: "";
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        width: 153px;
    }

    #starter h2 {
        color: #075f7a;
    }
    /* @end */

    /* @group St. Patrick's Day Personas */
    #st-patricks {
        background: url(../../img/zamboni/discovery_pane/promos/st-patricks-bg.png) 50% 0 no-repeat;
        h2 {
            color: #296215;
        }
    }
    /* @end */

    /* @group Monthly Pick */
    #monthly {
        background: url(../../img/zamboni/discovery_pane/promos/monthly-bg.png) 50% 0 no-repeat;
        .wrap > div {
            overflow: hidden;
            position: relative;
            max-height: 120px;
            padding: 20px;
            > div {
                > div {
                    float: left;
                    width: 50%;
                }
                > p {
                    padding-right: 20px;
                }
            }
        }
        h2 {
            color: #8b0101;
        }
        h3 {
            margin-bottom: 10px;
        }
        p.install-button {
            margin-bottom: 0;
        }
        img {
            display: block;
            float: right;
            max-width: 50%;
            max-height: 120px;
        }
    }
    /* @end */

    /* @group Go Mobile */
    #go-mobile {
        background: url(../../img/zamboni/discovery_pane/promos/go-mobile-bg.png) left top no-repeat;
        h2 {
            color: #485c65;
            width: 300px;
        }
        .wrap {
            width: 384px;
            margin: 0;
        }
        p {
            margin: 0;
        }
        .wrap > div {
            padding: 20px;
        }
        p.install-button {
            margin-bottom: 0;
        }
    }
    /* @end */

    /* @group Firefox 4 Collection */
    #fx4-collection {
        background: url(../../img/zamboni/discovery_pane/promos/fx4-collection-bg.png) 50% 0 no-repeat;
        h2 {
            color: #2c5c89;
        }
    }
    /* @end */

    #featured-addons {
        padding: 10px 9%;
    }

    /* @Addon @boxes *********/
    .addons ul,
    ul.addons {
        width: 100%;
        max-width: 650px;
        margin: 0 auto 1em;
    }

    .addons li {
        float: left;
        width: 30%;
        position: relative;
        margin-right: 5%;
        margin-bottom: 5%;
    }

    .html-rtl .addons li {
        float: right;
    }

    .addons li:nth-child(3n),
    .html-rtl .addons li:nth-child(3n + 1) {
        margin-right: 0;
    }
    .html-rtl .addons li:nth-child(3n) {
        margin-right: 5%;
    }

    .addons li > a,
    #monthly > div,
    #go-mobile > div {
        .gradient-two-color(#fff, #ecf1f7);
        border: 1px solid #b7c3d7;
        .border-radius(6px);
        .box-shadow(0 -2px 0 rgba(58,78,103,0.08) inset, 0 2px 0 rgba(190,210,230,0.5);
    }

    .addons li > a {
        display: block;
        position: relative;
        text-align: center;
        height: 120px;
        width: 84%;
        padding: 10px 8%;
        -moz-transition-property: border-color, box-shadow;
        -moz-transition-duration: 0.5s;
        -moz-transition-timing-function: ease-out;
    }

    .addons li > a:hover,
    .addons li > a:focus,
    .addons li > a:active {
        border-color: rgba(165,175,185,1);
        box-shadow: inset 0 -2px 0 rgba(58,78,103,0.1), 0 2px 0 rgba(190,210,230,0.85);
        -moz-transition-property: border-color, box-shadow;
        -moz-transition-duration: 0.1s;
        -moz-transition-timing-function: ease-out;
        text-decoration: none;
    }

    .addons h3 {
        font-size: 14px;
        line-height: 1.1;
        max-height: 1.1em;
        font-weight: bold;
        font-family: inherit;
        margin: .25em 0;
        text-align: center;
        overflow: hidden;
    }

    .addons li > a:hover h3,
    .addons li > a:focus h3,
    .addons li > a:active h3 {
        text-decoration: underline;
    }

    .addons p.desc {
        overflow: hidden;
        max-height: 5.6em;
        font-size: 11px;
        text-align: left;
        color: #373d48;
        margin: 0;
    }

    .html-rtl .addons p.desc {
        text-align: right;
    }

    .addons img {
        display: block;
        margin: 0 auto;
        max-width: 50px;
    }

    .promo:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}


added the borland stylesheet for syntax highlighting

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


fix(JobStreetHeader): Release JobStreet Header with working links

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/seekinternational/seek-asia-style-guide.git/'


added the SUBCLASSES section

added the SUBCLASSES section


Fade-in concept for reply panel

Fade-in concept for reply panel

Getting the transitions right on this one is interesting, since `display`
cannot be used here; instead, I decided to go with absolute positioning with
visibility, since that permits transitioning while at the same time not
taking up any visibile space on the page.

This will be abstracted before proceeding with the remainder of the
elements.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/mikegerwitz/agagh.git/'


Word wrap on menu items.

Word wrap on menu items.

@import 'lib';

.amo-header {
    font-family: @head-sans;
    margin-bottom: 35px;
}

.island {
    background: repeat scroll 0 0 transparent;
    .gradient-two-color(#FCFDFE, #F4F8FC);
    border: 1px solid #C9DDF2;
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
    display: block;
    float: left;
    margin-bottom: 15px;
    padding: 14px 14px 16px;
    > section {
        border-bottom: 1px solid #C9DDF2;
        border-top: 1px solid #FFFFFF;
        margin: 0 -14px;
        padding: 14px;
        float: left;
        width: 100%;
        &:first-child {
            border-top: 0;
            padding-top: 0;
        }
        &:last-child {
            border-bottom: 0;
        }
    }
}

#masthead {
    padding-top: 35px;
    max-width: 600px;
}

#aux-nav {
    float: right;
}
.html-rtl #aux-nav {
    float: left;
}

.site-title img {
    float: left;
    margin-right: 10px;
}
.html-rtl .site-title img {
    float: right;
    margin: 0 0 0 12px;
}

.site-title {
    margin-bottom: 7px;
    a {
        color: #333;
        text-decoration: none;
    }
    a:hover, a:focus {
        color: #043b84;
        text-shadow: 0 0 40px #fff,
                     0 0 20px #fff,
                     0 0 10px #fff;
    }
}

/** site navigation */

.menu-nav {
    font-size: 12px;
    margin-left: 64px;
    z-index: 50;

    > ul {
        > li {
            float: left;
            position: relative;
            > a {
                position: relative;
                font-weight: bold;
                z-index: 60;
                border-style: solid;
                .border-radius(3px 3px 0 0);
                border-color: transparent;
                border-width: 1px 1px 0;
            }
            &:hover {
                > a {
                    background: #fff;
                    border-color: #98B2C9 #98B2C9 #fff;
                    .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                }
                > ul {
                    display: block;
                }
                &:after {
                    content: "";
                    width: 160px;
                    z-index: 62;
                    height: 5px;
                    background: #fff;
                    position: absolute;
                    top: 18px;
                    left: 1px;
                }
            }
            > ul {
                width: 190px;
                position: absolute;
                top: 17px;
                z-index: 59;
                padding: 8px;
                display: none;
                background: #fff;
                border: 1px solid #98B2C9;
                .border-radius(0 3px 3px);
                .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                a {
                    text-decoration: none;
                    display: block;
                    padding: 6px 8px;
                    word-wrap: break-word;
                    &:hover {
                        background: #ebf4fe;
                    }
                }
                &.two-col {
                    .columns(2, 8px);
                    width: 340px;
                }
            }
        }
        em a:hover {
            background: #e1edfb;
        }
    }
    hr {
        border: 0;
        margin: 6px 8px;
        border-top: 1px dotted #ccc;
    }
    em {
        background: #F4F8FC;
        display: block;
        font-weight: bold;
    }
}

.html-rtl {
    .menu-nav > ul > li {
        border-left: 0;
        border-right: 1px solid #9FA7AF;
        float: right;
        left: auto;
        right: -9px;

        &:hover:after {
            left: auto;
            right: 1px;
        }
    }
}

#site-nav {
    > ul {
        > li {
            border-left: 1px solid #9FA7AF;
            left: -9px;
            &:first-child {
                border: 0;
            }
            > a {
                padding: 4px 8px;
                line-height: 12px;
                text-transform: uppercase;
            }
        }
    }
}

#aux-nav {
    > ul {
        > li:not(:first-child):before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -1px;
            width: 1px;
            height: 32px;
            background: -moz-linear-gradient(#9FA7AF, fadeout(#9FA7AF, 100%)) no-repeat left top;
            background-size: 1px 100%;
        }
        > li {
            margin-left: 1px;
            > a {
                display: block;
                line-height: 32px;
                height: 32px;
                padding: 0 1em;
                .border-radius(0);
                &:after {
                    display: inline-block;
                    vertical-align: middle;
                    top: 12px;
                    left: 4px;
                    margin: 0 0 0 4px;
                    content: "\00a0";
                    width: 0;
                    height: 0;
                    border: 4px solid transparent;
                    border-style: solid;
                    border-top-color: #666;
                }
            }
            &:after {
                top: 32px;
            }
            > ul {
                top: 31px;
            }
            &.nomenu {
                a {
                    display: inline-block;
                    &:after {
                        display: none;
                    }
                }
                &:hover {
                    a {
                        background: transparent;
                        .box-shadow(0 0);
                        border-color: transparent;
                    }
                    &:after {
                        content: none;
                    }
                }
            }
            &.logout {
                &:before {
                    background: 0;
                }
                a {
                    padding-left: 4px;
                    font-weight: normal;
                }
            }
        }
    }
}
/** search box */

.header-search {
    position: absolute;
    top: 63px;
    right: 0;
    background: #1B5898;
    .gradient-two-color(#2E89CA, #1B5898);
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(0, 0, 0, 0.5) inset, 0 2px 0 rgba(0, 0, 0, 0.1));
    padding: 5px 7px 7px;
    width: 280px;
}
.html-rtl .header-search {
    left: 0;
    right: auto;
}

button.search-button {
    background: #84C63C url("../../img/icons/go-arrow.png") center no-repeat;
    background-image: url("../../img/icons/go-arrow.png"),
                      -moz-linear-gradient(#84C63C, #489615);
    background-image: url("../../img/icons/go-arrow.png"),
                      -webkit-linear-gradient(#84C63C, #489615);
    border: 0;
    float: right;
    vertical-align: bottom;
    cursor: pointer;
    height: 30px;
    width: 36px;

    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
}
.html-rtl button.search-button {
    float: left;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.header-search input {
    background: url("../../img/icons/search.png") no-repeat scroll 8px center #FFFFFF;
    float: left;
    border: 0 none;
    .border-radius(4px);
    .box-shadow(0 0 2px rgba(0, 0, 0, 0.4) inset);
    font-family: Trebuchet MS;
    font-size: 14px;
    height: 30px;
    padding: 0 0 0 32px;
    width: 206px;
}
.html-rtl .header-search input {
    float: right;
    padding: 0 32px 0 0;
    background-position: 212px center;
}

.site-balloon {
    position: relative;
    margin-top: 22px;
    padding: 15px 45px 15px 15px;
    border: 2px solid #E3873B;
    background: #FCEFB7;
    font-family: Arial;
    font-size: 14px;
    color: #333;
    display: none;
    .border-radius(10px);
    h3, p {
        display: inline;
    }
    h3, strong {
        font-weight: bold;
    }
    &:before, &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-left: 18px solid #E3873B;
        border-top: 18px solid transparent;
    }
    &:before {
        left: 34px;
        top: -18px;
    }
    &:after {
        left: 36px;
        top: -13px;
        border-left-color: #FCEFB7;
    }
    p a {
        color: #c40000;
        font-weight: bold;
    }
}

.site-balloon, #lightbox, .modal {
    .close {
        position: absolute;
        overflow: hidden;
        right: 1em;
        top: 1em;
        width: 25px;
        height: 25px;
        margin: 0;
        .border-radius(4px);
        background: url(../../img/impala/banner-close.png) no-repeat 0 0;
        text-indent: -1000em;
        &:hover {
            background-color: #c40000;
            background-position: -25px 0;
        }
    }
}
.site-balloon .close {
    margin: auto;
    top: 0;
    bottom: 0;
}

.html-rtl {
    .site-balloon, #lightbox, .modal {
        padding: 15px 15px 15px 45px;
        &:before, &:after {
            border-color: transparent;
            border-right: 18px solid #E3873B;
            border-top: 18px solid transparent;
            left: auto;
        }
        &:before {
            right: 34px;
            top: -18px;
        }
        &:after {
            right: 36px;
            top: -13px;
            border-right-color: #FCEFB7;
        }
        .close {
            right: auto;
            left: 15px;
        }
    }
}

.firstvisit:not(.home) #site-welcome {
    display: block;
}
#mobile-banner {
    font-size: 1.3em;
}
@media (max-width: 500px) {
    #mobile-banner {
        display: inline-block;
    }
}
.badbrowser {
    #site-welcome, #mobile-banner {
        display: none;
    }
}

@import 'lib';

.amo-header {
    font-family: @head-sans;
    margin-bottom: 35px;
}

.island {
    background: repeat scroll 0 0 transparent;
    .gradient-two-color(#FCFDFE, #F4F8FC);
    border: 1px solid #C9DDF2;
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
    display: block;
    float: left;
    margin-bottom: 15px;
    padding: 14px 14px 16px;
    > section {
        border-bottom: 1px solid #C9DDF2;
        border-top: 1px solid #FFFFFF;
        margin: 0 -14px;
        padding: 14px;
        float: left;
        width: 100%;
        &:first-child {
            border-top: 0;
            padding-top: 0;
        }
        &:last-child {
            border-bottom: 0;
        }
    }
}

#masthead {
    padding-top: 35px;
    max-width: 600px;
}

#aux-nav {
    float: right;
}
.html-rtl #aux-nav {
    float: left;
}

.site-title img {
    float: left;
    margin-right: 10px;
}
.html-rtl .site-title img {
    float: right;
    margin: 0 0 0 12px;
}

.site-title {
    margin-bottom: 7px;
    a {
        color: #333;
        text-decoration: none;
    }
    a:hover, a:focus {
        color: #043b84;
        text-shadow: 0 0 40px #fff,
                     0 0 20px #fff,
                     0 0 10px #fff;
    }
}

/** site navigation */

.menu-nav {
    font-size: 12px;
    margin-left: 64px;
    z-index: 50;

    > ul {
        > li {
            float: left;
            position: relative;
            > a {
                position: relative;
                font-weight: bold;
                z-index: 60;
                border-style: solid;
                .border-radius(3px 3px 0 0);
                border-color: transparent;
                border-width: 1px 1px 0;
            }
            &:hover {
                > a {
                    background: #fff;
                    border-color: #98B2C9 #98B2C9 #fff;
                    .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                }
                > ul {
                    display: block;
                }
                &:after {
                    content: "";
                    width: 160px;
                    z-index: 62;
                    height: 5px;
                    background: #fff;
                    position: absolute;
                    top: 18px;
                    left: 1px;
                }
            }
            > ul {
                width: 190px;
                position: absolute;
                top: 17px;
                z-index: 59;
                padding: 8px;
                display: none;
                background: #fff;
                border: 1px solid #98B2C9;
                .border-radius(0 3px 3px);
                .box-shadow(0 0 4px rgba(0, 0, 0, 0.4));
                a {
                    text-decoration: none;
                    display: block;
                    padding: 6px 8px;
                    &:hover {
                        background: #ebf4fe;
                    }
                }
                &.two-col {
                    .columns(2, 8px);
                    width: 340px;
                }
            }
        }
        em a:hover {
            background: #e1edfb;
        }
    }
    hr {
        border: 0;
        margin: 6px 8px;
        border-top: 1px dotted #ccc;
    }
    em {
        background: #F4F8FC;
        display: block;
        font-weight: bold;
    }
}

.html-rtl {
    .menu-nav > ul > li {
        border-left: 0;
        border-right: 1px solid #9FA7AF;
        float: right;
        left: auto;
        right: -9px;

        &:hover:after {
            left: auto;
            right: 1px;
        }
    }
}

#site-nav {
    > ul {
        > li {
            border-left: 1px solid #9FA7AF;
            left: -9px;
            &:first-child {
                border: 0;
            }
            > a {
                padding: 4px 8px;
                line-height: 12px;
                text-transform: uppercase;
            }
        }
    }
}

#aux-nav {
    > ul {
        > li:not(:first-child):before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -1px;
            width: 1px;
            height: 32px;
            background: -moz-linear-gradient(#9FA7AF, fadeout(#9FA7AF, 100%)) no-repeat left top;
            background-size: 1px 100%;
        }
        > li {
            margin-left: 1px;
            > a {
                display: block;
                line-height: 32px;
                height: 32px;
                padding: 0 1em;
                .border-radius(0);
                &:after {
                    display: inline-block;
                    vertical-align: middle;
                    top: 12px;
                    left: 4px;
                    margin: 0 0 0 4px;
                    content: "\00a0";
                    width: 0;
                    height: 0;
                    border: 4px solid transparent;
                    border-style: solid;
                    border-top-color: #666;
                }
            }
            &:after {
                top: 32px;
            }
            > ul {
                top: 31px;
            }
            &.nomenu {
                a {
                    display: inline-block;
                    &:after {
                        display: none;
                    }
                }
                &:hover {
                    a {
                        background: transparent;
                        .box-shadow(0 0);
                        border-color: transparent;
                    }
                    &:after {
                        content: none;
                    }
                }
            }
            &.logout {
                &:before {
                    background: 0;
                }
                a {
                    padding-left: 4px;
                    font-weight: normal;
                }
            }
        }
    }
}
/** search box */

.header-search {
    position: absolute;
    top: 63px;
    right: 0;
    background: #1B5898;
    .gradient-two-color(#2E89CA, #1B5898);
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(0, 0, 0, 0.5) inset, 0 2px 0 rgba(0, 0, 0, 0.1));
    padding: 5px 7px 7px;
    width: 280px;
}
.html-rtl .header-search {
    left: 0;
    right: auto;
}

button.search-button {
    background: #84C63C url("../../img/icons/go-arrow.png") center no-repeat;
    background-image: url("../../img/icons/go-arrow.png"),
                      -moz-linear-gradient(#84C63C, #489615);
    background-image: url("../../img/icons/go-arrow.png"),
                      -webkit-linear-gradient(#84C63C, #489615);
    border: 0;
    float: right;
    vertical-align: bottom;
    cursor: pointer;
    height: 30px;
    width: 36px;

    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
}
.html-rtl button.search-button {
    float: left;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.header-search input {
    background: url("../../img/icons/search.png") no-repeat scroll 8px center #FFFFFF;
    float: left;
    border: 0 none;
    .border-radius(4px);
    .box-shadow(0 0 2px rgba(0, 0, 0, 0.4) inset);
    font-family: Trebuchet MS;
    font-size: 14px;
    height: 30px;
    padding: 0 0 0 32px;
    width: 206px;
}
.html-rtl .header-search input {
    float: right;
    padding: 0 32px 0 0;
    background-position: 212px center;
}

.site-balloon {
    position: relative;
    margin-top: 22px;
    padding: 15px 45px 15px 15px;
    border: 2px solid #E3873B;
    background: #FCEFB7;
    font-family: Arial;
    font-size: 14px;
    color: #333;
    display: none;
    .border-radius(10px);
    h3, p {
        display: inline;
    }
    h3, strong {
        font-weight: bold;
    }
    &:before, &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-left: 18px solid #E3873B;
        border-top: 18px solid transparent;
    }
    &:before {
        left: 34px;
        top: -18px;
    }
    &:after {
        left: 36px;
        top: -13px;
        border-left-color: #FCEFB7;
    }
    p a {
        color: #c40000;
        font-weight: bold;
    }
}

.site-balloon, #lightbox, .modal {
    .close {
        position: absolute;
        overflow: hidden;
        right: 1em;
        top: 1em;
        width: 25px;
        height: 25px;
        margin: 0;
        .border-radius(4px);
        background: url(../../img/impala/banner-close.png) no-repeat 0 0;
        text-indent: -1000em;
        &:hover {
            background-color: #c40000;
            background-position: -25px 0;
        }
    }
}
.site-balloon .close {
    margin: auto;
    top: 0;
    bottom: 0;
}

.html-rtl {
    .site-balloon, #lightbox, .modal {
        padding: 15px 15px 15px 45px;
        &:before, &:after {
            border-color: transparent;
            border-right: 18px solid #E3873B;
            border-top: 18px solid transparent;
            left: auto;
        }
        &:before {
            right: 34px;
            top: -18px;
        }
        &:after {
            right: 36px;
            top: -13px;
            border-right-color: #FCEFB7;
        }
        .close {
            right: auto;
            left: 15px;
        }
    }
}

.firstvisit:not(.home) #site-welcome {
    display: block;
}
#mobile-banner {
    font-size: 1.3em;
}
@media (max-width: 500px) {
    #mobile-banner {
        display: inline-block;
    }
}
.badbrowser {
    #site-welcome, #mobile-banner {
        display: none;
    }
}


kill stale css

kill stale css

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/zachgersh/atc.git/'


LESS animation function

LESS animation function

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/studiomotio/www1.git/'


Delays +200ms interactive colors

Delays +200ms interactive colors


cleaned up

cleaned up

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


uh something

uh something

fatal: unable to access 'https://github.com/demhydraz/til.git/': The requested URL returned error: 403


atom: ensure vim cursor is visible

atom: ensure vim cursor is visible

fatal: unable to access 'https://github.com/tobymackenzie/dotfiles.git/': The requested URL returned error: 403


OR-1763 rorateIn animation on Fab icon

OR-1763 rorateIn animation on Fab icon

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


use variables for height calculation

use variables for height calculation

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/torx-io/torx-dark-ui.git/'


feat(listitem): code tidy

feat(listitem): code tidy


updated color for sidebar menu items

updated color for sidebar menu items

fatal: unable to access 'https://github.com/amazingBastard/sva-accreditation.git/': The requested URL returned error: 403


added the menubar css

added the menubar css


Corrected yet another style glitch

Corrected yet another style glitch

@border-on-chart: #ddd;
@text-color-dark-lower-contrast: rgba(0, 0, 0, 0.33);

@red:   #C4434B;
@green: #66AC3F;
@blue:  #3098d8;

@gray-light:    #e5eaef;
@gray-lightest: #f6f8f9;

@selection-color: #EFBE2C;
@highlight-color: @green;

// ------------------------------------------
// Borrowed bootstrap mixins

.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

// End of mixins
// ------------------------------------------

.organogram {
  .chartContainer svg {
    display: block; // Remove odd whitespce
    background: @gray-lightest url('../images/grid-bg.svg') -3px -3px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  }

  .chartContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }

  // ------------------------------------------
  // SVG styles start here

  .chartArea {
    height: 100%;

    .element.html {
      rect {
        stroke-width: 1;
        stroke: #ccc;
        fill: white;
      }

      &.highlighted {
        outline: 0 solid @highlight-color;
      }

      &.highlighted rect {
        stroke: @highlight-color;
        stroke-width: 3;
      }

      &.highlighted.nolink rect {
        stroke: @red;
      }

      &.source-view rect {
        stroke: @highlight-color;
        stroke-width: 3;
      }

      &.source-view.nolink rect {
        stroke: @red;
      }

      &.selected rect {
        stroke: @selection-color;
        stroke-width: 2;
      }

      .remove-element .cross {
        stroke: black;
        stroke-width: 2;
        stroke-linecap: round;
      }

      .connection-port {
        cursor: crosshair;
      }

      .connection-port circle.outer {
        stroke-width: 2;
        stroke: black;
        fill: white;
      }

      .connection-port circle.inner {
        fill: black;
      }

      .remove-element {
        opacity: 0;
        transition: all linear 0.1s;
        cursor: pointer;
      }

      &:hover {
        .remove-element {
          opacity: 1;
          transition: all linear 0.1s;
        }
      }
    }

    .link {
      .connection {
        stroke: #AAAAAA;
        stroke-width: 1px;
      }

      .marker-target {
        stroke-width: 0;
        fill: #AAAAAA;
      }
    }

    .link.forbidden {
      .connection {
        stroke: @red;
        stroke-width: 3px;
      }

      .marker-target {
        stroke-width: 0;
        fill: @red;
      }
    }

    .link.allowed {
      .connection {
        stroke: @green;
        stroke-width: 3px;
      }

      .marker-target {
        stroke-width: 0;
        fill: @green;
      }
    }

    .link.selected {
      .connection {
        stroke: @selection-color;
        stroke-width: 2px;
      }

      .marker-target {
        fill: @selection-color;
      }

      .marker-vertices {
        opacity: 1;
      }

      .marker-vertex {
        fill: @selection-color;
      }

      .link-tools {
        opacity: 1.0;
      }

      .connection-wrap {
        cursor: default;
        opacity: 0;
      }
    }

    .link .label {
      rect {
        fill: @red;
        stroke: @red;
        stroke-width: 5;
      }

      text {
        fill: white;
        font-weight: normal;
      }
    }

    .connection-wrap {
      stroke-linecap: butt;
      stroke-width: 10;
      cursor: pointer;

      &:hover {
        opacity: 0.1;
      }
    }

    .marker-vertex {
      fill: #aaaaaa;
    }

    .tool-remove circle {
      fill: @red;
    }

    .marker-arrowheads {
      display: none;
    }
  }

  // End of SVG styles
  // ------------------------------------------
}

.graph-tools {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;

  & > * {
    min-width: 186px;
  }
}

.graph-tools .basic {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 1.0);
  border: 1px solid @border-on-chart;
  border-bottom: 0;
  flex-shrink: 0;
}

.graph-tools .switch {
  color: @text-color-dark-lower-contrast;
  font-style: italic;
  text-decoration: none;

  span {
    font-style: normal;
    opacity: 0.7;
    .pull-right();
  }

  span.down::before {
    content: '\25BC';
  }

  span.up::before {
    content: '\25B2';
  }
}

.graph-tools .extended {
  padding: 10px;
  background: rgba(255, 255, 255, 1.0);
  border: 1px solid @border-on-chart;
  border-top: 0;
  overflow-y: auto;
}

.graph-tools .switch-container {
  flex-shrink: 0;
  padding: 5px 20px;
  background: rgba(235, 235, 235, 1.0);
  border: 1px solid @border-on-chart;
  border-top: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  &:hover {
    background: rgba(230, 230, 230, 1.0);
  }
}

.graph-tools .switch-container[extended="true"] {
  border-bottom: 0;
}

.graph-tools .fabric {
  margin-top: 10px;

  .instance-template {
    margin-bottom: 6px;
    padding: 7px 5px;

    border: 1px dotted #bbb;

    cursor: move;

    // font-size: 11px;
    text-transform: uppercase;
    color: #555;

    i {
      .pull-left();
      width: 30px;
      text-align: center;
      font-size: 16px;
      color: #888;
    }

    .clearfix();
  }

  .instance-template:hover {
    border-color: @blue;
    color: @blue;
    background: white;

    i { color: @blue; }
  }
}

.graph-tools .intro {
  color: @text-color-dark-lower-contrast;
  font-style: italic;
}

.graph-tools .listing {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    padding: 5px 5px;
    border: 1px dotted transparent;
    margin-bottom: -3px;

    i {
      .pull-left();
      width: 20px;
      text-align: center;
      margin-top: 2px;
      color: @gray-light;
    }

    .text {
      margin-left: 20px;
    }

    .clearfix();
  }

  li:hover {
    cursor: move;
    border-color: @blue;
    background: white;
    color: @blue;

    i { color: @blue; }
  }
}

@border-on-chart: #ddd;
@text-color-dark-lower-contrast: rgba(0, 0, 0, 0.33);

@red:   #C4434B;
@green: #66AC3F;
@blue:  #3098d8;

@gray-light:    #e5eaef;
@gray-lightest: #f6f8f9;

@selection-color: #EFBE2C;
@highlight-color: @green;

// ------------------------------------------
// Borrowed bootstrap mixins

.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

// End of mixins
// ------------------------------------------

.organogram {
  .chartContainer svg {
    display: block; // Remove odd whitespce
    background: @gray-lightest url('../images/grid-bg.svg') -3px -3px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  }

  .chartContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }

  // ------------------------------------------
  // SVG styles start here

  .chartArea {
    height: 100%;

    .element.html {
      rect {
        stroke-width: 1;
        stroke: #ccc;
        fill: white;
      }

      &.highlighted {
        outline: 0 solid @highlight-color;
      }

      &.highlighted rect {
        stroke: @highlight-color;
        stroke-width: 3;
      }

      &.highlighted.nolink rect {
        stroke: @red;
      }

      &.source-view rect {
        stroke: @highlight-color;
        stroke-width: 3;
      }

      &.source-view.nolink rect {
        stroke: @red;
      }

      &.selected rect {
        stroke: @selection-color;
        stroke-width: 2;
      }

      .remove-element .cross {
        stroke: black;
        stroke-width: 2;
        stroke-linecap: round;
      }

      .connection-port {
        cursor: crosshair;
      }

      .connection-port circle.outer {
        stroke-width: 2;
        stroke: black;
        fill: white;
      }

      .connection-port circle.inner {
        fill: black;
      }

      .remove-element {
        opacity: 0;
        transition: all linear 0.1s;
        cursor: pointer;
      }

      &:hover {
        .remove-element {
          opacity: 1;
          transition: all linear 0.1s;
        }
      }
    }

    .link {
      .connection {
        stroke: #AAAAAA;
        stroke-width: 1px;
      }

      .marker-target {
        stroke-width: 0;
        fill: #AAAAAA;
      }
    }

    .link.forbidden {
      .connection {
        stroke: @red;
        stroke-width: 3px;
      }

      .marker-target {
        stroke-width: 0;
        fill: @red;
      }
    }

    .link.allowed {
      .connection {
        stroke: @green;
        stroke-width: 3px;
      }

      .marker-target {
        stroke-width: 0;
        fill: @green;
      }
    }

    .link.selected {
      .connection {
        stroke: @selection-color;
        stroke-width: 2px;
      }

      .marker-target {
        fill: @selection-color;
      }

      .marker-vertices {
        opacity: 1;
      }

      .marker-vertex {
        fill: @selection-color;
      }

      .link-tools {
        opacity: 1.0;
      }

      .connection-wrap {
        cursor: default;
        opacity: 0;
      }
    }

    .link .label {
      rect {
        fill: @red;
        stroke: @red;
        stroke-width: 5;
      }

      text {
        fill: white;
        font-weight: normal;
      }
    }

    .connection-wrap {
      stroke-linecap: butt;
      stroke-width: 10;
      cursor: pointer;

      &:hover {
        opacity: 0.1;
      }
    }

    .marker-vertex {
      fill: #aaaaaa;
    }

    .tool-remove circle {
      fill: @red;
    }

    .marker-arrowheads {
      display: none;
    }
  }

  // End of SVG styles
  // ------------------------------------------
}

.graph-tools {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;

  & > * {
    min-width: 186px;
  }
}

.graph-tools .basic {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 1.0);
  border: 1px solid @border-on-chart;
  border-bottom: 0;
  flex-shrink: 0;
}

.graph-tools .switch {
  color: @text-color-dark-lower-contrast;
  font-style: italic;
  text-decoration: none;

  span {
    font-style: normal;
    opacity: 0.7;
    .pull-right();
  }

  span.down::before {
    content: '\25BC';
  }

  span.up::before {
    content: '\25B2';
  }
}

.graph-tools .extended {
  padding: 10px;
  background: rgba(255, 255, 255, 1.0);
  border: 1px solid @border-on-chart;
  border-top: 0;
  overflow-y: auto;
}

.graph-tools .switch-container {
  flex-shrink: 0;
  padding: 5px 20px;
  background: rgba(235, 235, 235, 1.0);
  border: 1px solid @border-on-chart;
  border-top: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  &:hover {
    background: rgba(230, 230, 230, 1.0);
  }
}

.graph-tools .switch-container[extended="true"] {
  border-bottom: 0;
}

.graph-tools .fabric {
  margin-top: 10px;

  .instance-template {
    margin-bottom: 6px;
    padding: 7px 5px;

    border: 1px dotted #bbb;

    cursor: move;

    // font-size: 11px;
    text-transform: uppercase;
    color: #555;

    i {
      .pull-left();
      width: 30px;
      text-align: center;
      font-size: 16px;
      color: #888;
    }

    .clearfix();
  }

  .instance-template:hover {
    border-color: @blue;
    color: @blue;
    background: white;

    i { color: @blue; }
  }
}

.graph-tools .intro {
  color: @text-color-dark-lower-contrast;
  font-style: italic;
}

.graph-tools .listing {
  li {
    padding: 5px 5px;
    border: 1px dotted transparent;
    margin-bottom: -3px;

    i {
      .pull-left();
      width: 20px;
      text-align: center;
      margin-top: 2px;
      color: @gray-light;
    }

    .text {
      margin-left: 20px;
    }

    .clearfix();
  }

  li:hover {
    cursor: move;
    border-color: @blue;
    background: white;
    color: @blue;

    i { color: @blue; }
  }
}


Fabric Mixins re-add

Fabric Mixins re-add

// Border radius.
.border-radius (@ms-radius: 5px) {
  border-radius: @ms-radius;
  background-clip: padding-box;
}

// Drop shadow.
.drop-shadow(@ms-x-offset: 0, @ms-y-offset: 0, @ms-blur: 5px, @ms-spread: 0, @ms-alpha: 0.4) {
  box-shadow: @ms-x-offset @ms-y-offset @ms-blur @ms-spread rgba(0, 0, 0, @ms-alpha);
}

// Background gradient.
.background-gradient (@ms-origin: left, @ms-start: #000, @ms-start-location: 0%, @ms-stop: #FFF, @ms-stop-location: 100%) {
    background-color: @ms-start;
    background-image: linear-gradient(@ms-origin, @ms-start @ms-start-location, @ms-stop @ms-stop-location);
}

// Rotation.
.rotate (@ms-deg) {
  transform: rotate(@ms-deg);
}

// Reset button styles.
.button-reset() {
  background: none;
  border: 0;
  cursor: pointer;
}

.resetAnimation() {
    -webkit-animation: none;
    -moz-animation:  none;
    -ms-animation:  none;
    -o-animation:  none;
    animation:  none;
}

.resetBackface() {
   backface-visibility: visible;
}

.resetBackground() {
  background: 0;
  background-clip: border-box;
  background-origin: padding-box;
}

.resetBorder() {
  border: 0;
  border-collapse: separate;
  border-image: none;
  border-radius: 0;
  border-spacing: 0;
}

.resetBoxShadow() {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.resetBoxSizing() {
   box-sizing: content-box;
}

.resetColumns() {
  columns: auto;
  column-count: auto;
  column-fill: balance;
  column-gap: normal;
  column-rule: medium none currentColor;
  column-rule-color: currentColor;
  column-rule-style: none;
  column-rule-width: none;
  column-span: 1;
  column-width: auto;
}

// Fonts and Typography Resets
.resetFont() {
  font: normal;
  font-family: inherit;
  font-size: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}

.resetTextStyling() {
  text-align: inherit;
  text-align-last: auto;
  text-decoration: none;
  text-decoration-color: inherit;
  text-decoration-line: none;
  text-decoration-style: solid;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  line-height: normal;
  letter-spacing: normal;
  word-spacing: normal;
}

// Box Model Resets
.resetPadding() {
  padding: 0;
}

.resetMargins() {
  margin: 0;
}

.resetOverflow() {
  overflow: visible;
}

.resetMax() {
    max-height: none;
    max-width: none;
}

.resetMin() {
    min-height: 0;
    min-width: 0;
}

.resetPositioning() {
  bottom: auto;
  left: auto;
  top: auto;
  left: auto;
}

.resetFloat() {
  float: none;
}

.resetHeight(@ms-useMaxMin: false) {
    height: auto;
    & when (@ms-useMaxMin = true) {
        min-height: 0;
        max-height: 0;
    }
}

.resetWidth(@ms-useMaxMin: false) {
    width: auto;
    & when (@ms-useMaxMin = true) {
        min-width: 0;
        max-width: 0;
    }
}

.resetPosition() {
  position: static;
}

.resetPerspective() {
  -webkit-perspective: none;
  -webkit-perspective-origin: 50% 50%;
  perspective: none;
  perspective-origin: 50% 50%;

}

.resetTransition() {
  -webkit-transition: none;
  transition: none;
}

.resetListStyle() {
  list-style: none;
}

.resetTransform() {
  -ms-transform: none;
  -webkit-transform: none;
  -webkit-transform-style: flat;
  transform: none;
  transform-style: flat;
}

.resetOutline() {
  outline: 0;
}

.resetPageBreak() {
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
}

.resetDisplay() {
  display: block;
}

.resetVerticalAlign() {
    vertical-align: baseline;
}

// Prevents the text within a block element from wrapping to second line.
.noWrap() {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Input placehoder
.input-placeholder(@ms-rules) {
    &::-webkit-input-placeholder,
    &::-moz-placeholder,
    &:-moz-placeholder,
    &:-ms-input-placeholder {
        @ms-rules();
    }
}

error: pathspec 'src/less/_Fabric.Mixins.less' did not match any file(s) known to git


BAP-1553, BAP-1552, BAP-1551, BAP-1549: Css Fixes  - Increased header z-index  - Fix for simple search results

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/trustify/oroplatform.git/'


Fix bug 1180566 - position product icons for RTL

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import "../../sandstone/lib.less";

.mozid {
    color: #fff;

    #outer-wrapper {
        .aurora-bars();
        border-top: 4px solid #fff;
    }

    #wrapper {
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    h1, h2, h3, h4, h5, h6, .huge, .large {
        color: #fff;
        text-shadow: none;
    }
}

.content {
    .border-box();
    width: @widthDesktop;
    margin: 0 auto;

    @media only screen and (min-width: @breakDesktopWide) {
        width: @widthDesktopWide;
    }

    @media only screen and (max-width: @breakDesktop) {
        width: @widthTablet;
    }

    @media only screen and (max-width: @breakTablet) {
        width: @widthMobile;
    }

    @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
        width: @widthMobileLandscape;
    }
}

// Handy sprite mixin
.fxfamily-sprite(@posx, @posy) {
    // note: the tabzilla image in this sprite is no longer used
    background-image: url(/media/img/firefox/family/index/family-sprite.png);
    background-position: @posx @posy;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    display: block;
    content: '';
    .at2x('/media/img/firefox/family/index/family-sprite.png', 500px, 645px);
}

/*--------------------------------------------------------------------------*/
// Conditional download bar
#conditional-download-bar {
    background: #fff;
    color: @textColorPrimary;
    min-height: 1.5em;
    overflow: hidden;
    padding: 15px 0;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 10;
    .transition(all 0.25s ease);

    .message {
        display: none;
        padding: 0 (@gridGutterWidth * 3) 0 @gridGutterWidth;
    }

    .btn-download {
        .font-size(@smallFontSize);
        padding: .5em 30px;
        margin: 5px 10px 0;
        background-color: #6fbe4a;

        &:hover,
        &:focus,
        &:active {
            background-color: lighten(#6fbe4a, 5%);
        }

        @media only screen and (max-width: @breakTablet) {
            display: block;
        }
    }

    .btn-close {
        .image-replaced();
        border: 0;
        cursor: pointer;
        height: 30px;
        width: 30px;
        padding: 0;
        position: absolute;
        right: 30px;
        top: 10px;
        background: #efefef url(/media/img/firefox/family/index/closex.png) center center no-repeat;
        .at2x('/media/img/firefox/family/index/closex.png', 19px, 19px);

        &:hover {
            background-color: darken(#efefef, 5%);
        }
    }
}

#conditional-download-bar #dlbar-nonfx {
    display: block;
}

html.firefox-latest #conditional-download-bar  {
    display: none;
}

html.firefox-old #conditional-download-bar #dlbar-oldfx-desktop {
    display: block;
}

html.ios #conditional-download-bar #dlbar-ios {
    display: block;
}

html.android #conditional-download-bar #dlbar-nonfx-android {
    display: block;
}

html.firefox-old,
html.android,
html.ios {
    #conditional-download-bar #dlbar-nonfx {
        display: none;
    }
}

/*--------------------------------------------------------------------------*/
// Tabzillita (little tabzilla) customizations
#tabzilla {
    z-index: 3;

    &:before {
        background: @mozIDBlue;
    }
}

/*--------------------------------------------------------------------------*/
// Header
#header {
    position: relative;
    z-index: 2;
    height: 480px;
    margin-bottom: -8px;

    // Fox
    &:after {
        content: '';
        display: block;
        background: url(/media/img/firefox/family/index/fox.png) left bottom no-repeat;
        .background-size(1006px 598px);
        width: 1006px;
        height: 598px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: 30px;
        .at2x('/media/img/firefox/family/index/fox.png', 1184px, 704px);
    }

    .content {
        padding: 150px 0 0;
        position: relative;

        // Firefox logo
        &:before {
            .fxfamily-sprite(-380px, 0);
            width: 108px;
            height: 112px;
            top: 30px;
            left: 30px;
            z-index: 5;
        }
    }

    h1 {
        margin: @baseLine 0 @baseLine 30px;
        width: 420px;
        text-align: center;

        img {
            margin: 10px 5px 0;
            vertical-align: baseline;
            width: 248px;
            height: auto;
        }
    }

    @media only screen and (max-height: 600px) {
        height: 420px;
    }

}

// Fancy title for English
[lang~='en'] #header h1 {
    width: 390px;
    color: #bee1f5;
    .font-size(44px);
    text-align: right;
    margin-top: 0;

    span {
        display: block;
        text-align: left;
    }

    b {
        color: #fff;
        font-weight: normal;
        .font-size(72px);
        letter-spacing: -.05em;
    }

    img {
        float: right;
        vertical-align: top;
        margin: 15px 0 0 10px;
    }
}

// Adjust main heading style for RTL
html[dir="rtl"] #header h1 {
    float: left;
}

/*--------------------------------------------------------------------------*/
// Base styles for product groups
.product-list {
    .clearfix();
    .flexbox();
    margin: 0;
    list-style: none;

    .product {
        .border-box();
        float: left;
        margin: 0;
        width: 33.3%;
        overflow: hidden;
        position: relative;
    }

    h2 {
        .trailing-arrow();
        margin: 0 0 .15em;

        span {
            font-style: italic;
            font-size: .75em;
        }
    }

    a {
        text-decoration: none;
        display: block;

        &:hover,
        &:focus,
        &:active {
            text-decoration: none;

            h2, h3 {
                text-decoration: underline;
            }
        }
    }

}

/*--------------------------------------------------------------------------*/
// Primary tier - Desktop, Android, OS
#products-primary {
    background: #00a7e0;
    border-top: 1px solid rgba(0, 0, 0, .1);

    .product {
        padding: 40px @gridGutterWidth 130px;

        @media only screen and (min-width: @breakDesktopWide) {
            padding: 50px (@gridGutterWidth * 2) 180px;
        }

        @media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
            padding: 40px @gridGutterWidth 130px;
        }
    }

    li {
        text-align: center;
    }

    h2 {
        .font-size(28px);
        display: inline-block;

        @media only screen and (min-width: @breakDesktopWide) {
            .font-size(32px);
        }
    }

    p {
        .font-size(@largeFontSize);

        @media only screen and (min-width: @breakDesktopWide) {
            .font-size(18px);
        }
    }

    a {
        color: #fff;

        h2 {
            padding-bottom: 1px;
        }

        p {
            color: #bee1f5;
        }

        &:hover h2,
        &:focus h2,
        &:active h2 {
            text-decoration: none;
            padding-bottom: 0;
            border-bottom: 1px solid;
        }
    }

    // Highlighted product
    .highlight {
        background: #ffcd02 url(/media/img/firefox/family/index/promo-bg.png) center top no-repeat;
        color: #e14164;
        .at2x('/media/img/firefox/family/index/promo-bg.png', 600px, 450px);

        a {
            color: #e14164;

            h2, h3, p {
                color: #e14164;
            }
        }
    }
}

// Firefox for Desktop
#product-desktop:after {
    .fxfamily-sprite(0, 0);
    width: 378px;
    height: 220px;
    bottom: -90px;
    left: 50%;
    margin-left: -189px;

    @media only screen and (min-width: @breakDesktopWide) {
        bottom: -65px;
    }
}

// Firefox for Android
#product-android {
    &:after {
        .fxfamily-sprite(0, -225px);
        width: 470px;
        height: 176px;
        left: -270px;
        bottom: -45px;
    }

    // Android mascot
    &:before {
        .fxfamily-sprite(-225px, -405px);
        width: 115px;
        height: 125px;
        top: -50px;
        left: -50px;
    }

    // Google Play button
    .btn-google-play {
        position: absolute;
        right: 20px;
        bottom: 40px;
        z-index: 5;
    }

    @media only screen and (min-width: @breakDesktopWide) {
        &:after {
            left: -160px;
            bottom: 0;
        }

        &:before {
            top: -30px;
            left: -45px;
        }

        .btn-google-play {
            right: 30px;
            bottom: 60px;
        }
    }

    @media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
        &:after {
            left: 50%;
            bottom: -55px;
            margin-left: -235px;
        }

        &:before {
            top: -30px;
            left: -45px;
        }

        .btn-google-play {
            position: static;
        }
    }

    @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
        &:after {
            left: 50%;
            bottom: -55px;
            margin-left: -235px;
        }

        &:before {
            top: -30px;
        }

        .btn-google-play {
            position: static;
        }
    }
}

// Firefox OS
#product-fxos:after {
    .fxfamily-sprite(0, -405px);
    width: 224px;
    height: 146px;
    bottom: -20px;
    left: 50%;
    margin-left: -112px;

    @media only screen and (min-width: @breakDesktopWide) {
        bottom: 0;
    }
}

/*--------------------------------------------------------------------------*/
// Secondary tier - Hello, Marketplace, Sync
#products-secondary {
    background: #efefef;
    border-top: 1px solid rgba(0, 0, 0, .1);

    .product {
        padding: 50px 20px 50px 140px;
        min-height: 50px;
    }

    h2 {
        .font-size(24px);
        margin: 0 0 .15em;
    }

    p {
        margin: 0;
    }

    a {
        color: @linkBlue;

        h2 {
            color: @linkBlue;
        }

        p {
            color: #999;
        }

        &:hover,
        &:focus,
        &:active {
            color: darken(@linkBlue, 10%);

            h2, p {
                color: darken(@linkBlue, 10%);
            }
        }
    }
}

// Hello
#product-hello h2:before {
    .fxfamily-sprite(-380px, -115px);
    width: 84px;
    height: 80px;
    top: 40px;
    left: 40px;
}

html[dir='rtl'] {
    #product-hello h2:before {
        left: auto;
        right: 40px;
    }

    #product-sync h2:before {
        left: auto;
        right: 10px;
    }

    #product-marketplace h2:before {
        left: auto;
        right: 30px;
    }
}

// Sync
#product-sync h2:before {
    .fxfamily-sprite(-345px, -405px);
    width: 120px;
    height: 81px;
    top: 32px;
    left: 10px;
}

// Marketplace
#product-marketplace {
    h2:before {
        .fxfamily-sprite(0, -555px);
        width: 87px;
        height: 83px;
        top: 35px;
        left: 30px;
    }

    // New window icon
    h2:after {
        content: '';
        width: 14px;
        height: 14px;
        background: url(/media/img/firefox/family/index/family-sprite.png) -344px -515px no-repeat;
        display: inline-block;
        margin: 0 8px;
        .at2x('/media/img/firefox/family/index/family-sprite.png', 500px, 645px);
    }
}

html[dir='rtl'] {
    #products-secondary .product {
        padding: 50px 140px 50px 20px;
    }
}

@media only screen and (min-width: @breakDesktopWide) {
    #products-secondary .product {
        padding-left: 160px;
    }

    #product-hello h2:before {
        left: 60px;
    }

    #product-sync h2:before {
        left: 30px;
    }

    #product-marketplace h2:before {
        left: 55px;
    }

    html[dir='rtl'] {
        #products-secondary .product {
            padding-right: 160px;
        }

        #product-hello h2:before {
            left: auto;
            right: 60px;
        }

        #product-sync h2:before {
            left: auto;
            right: 30px;
        }

        #product-marketplace h2:before {
            left: auto;
            right: 55px;
        }
    }

}

/*--------------------------------------------------------------------------*/
// Footer
#footer {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .1);

    .content {
        padding: (@baseLine * 2) 0 (@baseLine * 3);
    }

    .mozlogo {
        .image-replaced();
        display: inline-block;
        margin: 0 auto @baseLine;
        background: url(/media/img/firefox/family/index/family-sprite.png) -345px -485px no-repeat;
        width: 94px;
        height: 25px;
        float: left;
        .at2x('/media/img/firefox/family/index/family-sprite.png', 500px, 645px);
    }

    ul {
        float: right;
        margin: 0;
        list-style: none;
        .font-size(@smallFontSize);

        li {
            display: inline;
            margin: 0 10px;

            &:after {
                content: '•';
                color: @textColorPrimary;
                margin: 0 -10px 0 10px;
            }

            &:last-child:after {
                content: '';
            }
        }
    }
}

/*--------------------------------------------------------------------------*/
// Wide desktop layout, 1400px
@media only screen and (min-width: @breakDesktopWide) {
    #header {
        height: 570px;

        &:after {
            .background-size(1184px 704px);
            width: 1184px;
            height: 704px;
            margin-left: -15px;
        }

        .content:before {
            left: 80px;
        }

        h1 {
            width: 520px;
            margin-left: 80px;

            img {
                width: 330px;
                height: auto;
            }
        }
    }

    [lang~='en'] #header h1 {
        width: 520px;
        .font-size(60px);

        b {
            .font-size(96px);
        }

        img {
            margin-left: 15px;
        }
    }
}

/*--------------------------------------------------------------------------*/
// Tablet layout, 760px
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

    #header {
        height: 400px;

        &:after {
            .background-size(888px 528px);
            width: 888px;
            height: 528px;
            margin-left: 120px;
        }

        .content:before {
            left: 30px;
        }

        h1 {
            margin-left: 30px;
        }
    }

    .product-list {
        display: block;

        .product {
            width: auto;
            float: none;
            display: block;
        }
    }

    #products-primary {
        .content {
            width: auto;
        }

        .highlight {
            background-position: left top;
        }
    }

    #products-secondary {
        .product {
            width: 33.3%;
            float: left;
            text-align: center;
            padding: 120px @gridGutterWidth @baseLine;
        }

        h2 {
            .font-size(20px);

            &:before {
                left: 50%;
            }
        }
    }

    #product-hello h2:before {
        top: @baseLine + 14;
        margin-left: -41px;
    }

    #product-sync h2:before {
        top: @baseLine + 4;
        margin-left: -60px;
    }

    #product-marketplace h2:before {
        top: @baseLine;
        margin-left: -43px;
    }

    html[dir='rtl'] {
        #products-secondary {
            .product {
                padding: 120px @gridGutterWidth @baseLine;
            }

            h2:before {
                left: 50%;
                right: auto;
            }
        }
    }

}

/*--------------------------------------------------------------------------*/
// Mobile layout, 320px
@media only screen and (max-width: @breakTablet) {

    #header {
        height: auto;

        &:after {
            background-image: none;
            display: none;
        }

        .content {
            padding: 160px 0 40px;

            &:before {
                top: 45px;
                left: 50%;
                margin-left: -52px;
            }
        }

        h1 {
            width: auto;
            margin: 0 @gridGutterWidth @baseLine;
            .font-size(30px);

            b {
                .font-size(40px);
            }
        }
    }

    [lang~='en'] #header h1 {
        .font-size(30px);
        width: 250px;
        margin: 0 auto @baseLine;

        b {
            .font-size(40px);
        }

        img {
            width: 165px;
            height: 48px;
            margin: 6px 0 0 10px;
        }
    }

    .product-list {
        display: block;

        .product {
            width: 100%;
            float: none;
            min-width: @widthMobile;
        }
    }

    #products-primary {
        .content {
            width: auto;
        }

        .highlight {
            background-position: left top;
        }
    }

    #products-secondary {
        padding: @baseLine 0;

        .product {
            padding: @baseLine @gridGutterWidth @baseLine 120px;
            min-height: 50px;
        }

        // Shrink icons by 25%
        h2:before {
            .background-size(375px 484px);
        }
    }

    #product-hello h2:before {
        width: 63px;
        height: 60px;
        background-position: -286px -87px;
        top: @baseLine - 5;
        left: 30px;
    }

    #product-sync h2:before {
        width: 90px;
        height: 60px;
        background-position: -258px -303px;
        top: @baseLine - 5;
        left: 15px;
    }

    #product-marketplace h2:before {
        width: 68px;
        height: 68px;
        background-position: 0 -417px;
        top: @baseLine - 5;
        left: 30px;
    }

    html[dir='rtl'] {
        #products-secondary .product {
            padding: @baseLine 120px @baseLine @gridGutterWidth;
        }

        #product-hello h2:before,
        #product-marketplace h2:before {
            left: auto;
            right: 30px;
        }

        #product-sync h2:before {
            left: auto;
            right: 15px;
        }
    }

    #footer {
        .content {
            padding: @baseLine 0;
            text-align: center;
        }

        .mozlogo {
            float: none;
        }

        ul {
            float: none;

            li {
                display: block;
                margin: 0 0 .25em;

                &:after {
                    content: '';
                }
            }
        }
    }

}

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import "../../sandstone/lib.less";

.mozid {
    color: #fff;

    #outer-wrapper {
        .aurora-bars();
        border-top: 4px solid #fff;
    }

    #wrapper {
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    h1, h2, h3, h4, h5, h6, .huge, .large {
        color: #fff;
        text-shadow: none;
    }
}

.content {
    .border-box();
    width: @widthDesktop;
    margin: 0 auto;

    @media only screen and (min-width: @breakDesktopWide) {
        width: @widthDesktopWide;
    }

    @media only screen and (max-width: @breakDesktop) {
        width: @widthTablet;
    }

    @media only screen and (max-width: @breakTablet) {
        width: @widthMobile;
    }

    @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
        width: @widthMobileLandscape;
    }
}

// Handy sprite mixin
.fxfamily-sprite(@posx, @posy) {
    // note: the tabzilla image in this sprite is no longer used
    background-image: url(/media/img/firefox/family/index/family-sprite.png);
    background-position: @posx @posy;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    display: block;
    content: '';
    .at2x('/media/img/firefox/family/index/family-sprite.png', 500px, 645px);
}

/*--------------------------------------------------------------------------*/
// Conditional download bar
#conditional-download-bar {
    background: #fff;
    color: @textColorPrimary;
    min-height: 1.5em;
    overflow: hidden;
    padding: 15px 0;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 10;
    .transition(all 0.25s ease);

    .message {
        display: none;
        padding: 0 (@gridGutterWidth * 3) 0 @gridGutterWidth;
    }

    .btn-download {
        .font-size(@smallFontSize);
        padding: .5em 30px;
        margin: 5px 10px 0;
        background-color: #6fbe4a;

        &:hover,
        &:focus,
        &:active {
            background-color: lighten(#6fbe4a, 5%);
        }

        @media only screen and (max-width: @breakTablet) {
            display: block;
        }
    }

    .btn-close {
        .image-replaced();
        border: 0;
        cursor: pointer;
        height: 30px;
        width: 30px;
        padding: 0;
        position: absolute;
        right: 30px;
        top: 10px;
        background: #efefef url(/media/img/firefox/family/index/closex.png) center center no-repeat;
        .at2x('/media/img/firefox/family/index/closex.png', 19px, 19px);

        &:hover {
            background-color: darken(#efefef, 5%);
        }
    }
}

#conditional-download-bar #dlbar-nonfx {
    display: block;
}

html.firefox-latest #conditional-download-bar  {
    display: none;
}

html.firefox-old #conditional-download-bar #dlbar-oldfx-desktop {
    display: block;
}

html.ios #conditional-download-bar #dlbar-ios {
    display: block;
}

html.android #conditional-download-bar #dlbar-nonfx-android {
    display: block;
}

html.firefox-old,
html.android,
html.ios {
    #conditional-download-bar #dlbar-nonfx {
        display: none;
    }
}

/*--------------------------------------------------------------------------*/
// Tabzillita (little tabzilla) customizations
#tabzilla {
    z-index: 3;

    &:before {
        background: @mozIDBlue;
    }
}

/*--------------------------------------------------------------------------*/
// Header
#header {
    position: relative;
    z-index: 2;
    height: 480px;
    margin-bottom: -8px;

    // Fox
    &:after {
        content: '';
        display: block;
        background: url(/media/img/firefox/family/index/fox.png) left bottom no-repeat;
        .background-size(1006px 598px);
        width: 1006px;
        height: 598px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: 30px;
        .at2x('/media/img/firefox/family/index/fox.png', 1184px, 704px);
    }

    .content {
        padding: 150px 0 0;
        position: relative;

        // Firefox logo
        &:before {
            .fxfamily-sprite(-380px, 0);
            width: 108px;
            height: 112px;
            top: 30px;
            left: 30px;
            z-index: 5;
        }
    }

    h1 {
        margin: @baseLine 0 @baseLine 30px;
        width: 420px;
        text-align: center;

        img {
            margin: 10px 5px 0;
            vertical-align: baseline;
            width: 248px;
            height: auto;
        }
    }

    @media only screen and (max-height: 600px) {
        height: 420px;
    }

}

// Fancy title for English
[lang~='en'] #header h1 {
    width: 390px;
    color: #bee1f5;
    .font-size(44px);
    text-align: right;
    margin-top: 0;

    span {
        display: block;
        text-align: left;
    }

    b {
        color: #fff;
        font-weight: normal;
        .font-size(72px);
        letter-spacing: -.05em;
    }

    img {
        float: right;
        vertical-align: top;
        margin: 15px 0 0 10px;
    }
}

// Adjust main heading style for RTL
html[dir="rtl"] #header h1 {
    float: left;
}

/*--------------------------------------------------------------------------*/
// Base styles for product groups
.product-list {
    .clearfix();
    .flexbox();
    margin: 0;
    list-style: none;

    .product {
        .border-box();
        float: left;
        margin: 0;
        width: 33.3%;
        overflow: hidden;
        position: relative;
    }

    h2 {
        .trailing-arrow();
        margin: 0 0 .15em;

        span {
            font-style: italic;
            font-size: .75em;
        }
    }

    a {
        text-decoration: none;
        display: block;

        &:hover,
        &:focus,
        &:active {
            text-decoration: none;

            h2, h3 {
                text-decoration: underline;
            }
        }
    }

}

/*--------------------------------------------------------------------------*/
// Primary tier - Desktop, Android, OS
#products-primary {
    background: #00a7e0;
    border-top: 1px solid rgba(0, 0, 0, .1);

    .product {
        padding: 40px @gridGutterWidth 130px;

        @media only screen and (min-width: @breakDesktopWide) {
            padding: 50px (@gridGutterWidth * 2) 180px;
        }

        @media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
            padding: 40px @gridGutterWidth 130px;
        }
    }

    li {
        text-align: center;
    }

    h2 {
        .font-size(28px);
        display: inline-block;

        @media only screen and (min-width: @breakDesktopWide) {
            .font-size(32px);
        }
    }

    p {
        .font-size(@largeFontSize);

        @media only screen and (min-width: @breakDesktopWide) {
            .font-size(18px);
        }
    }

    a {
        color: #fff;

        h2 {
            padding-bottom: 1px;
        }

        p {
            color: #bee1f5;
        }

        &:hover h2,
        &:focus h2,
        &:active h2 {
            text-decoration: none;
            padding-bottom: 0;
            border-bottom: 1px solid;
        }
    }

    // Highlighted product
    .highlight {
        background: #ffcd02 url(/media/img/firefox/family/index/promo-bg.png) center top no-repeat;
        color: #e14164;
        .at2x('/media/img/firefox/family/index/promo-bg.png', 600px, 450px);

        a {
            color: #e14164;

            h2, h3, p {
                color: #e14164;
            }
        }
    }
}

// Firefox for Desktop
#product-desktop:after {
    .fxfamily-sprite(0, 0);
    width: 378px;
    height: 220px;
    bottom: -90px;
    left: 50%;
    margin-left: -189px;

    @media only screen and (min-width: @breakDesktopWide) {
        bottom: -65px;
    }
}

// Firefox for Android
#product-android {
    &:after {
        .fxfamily-sprite(0, -225px);
        width: 470px;
        height: 176px;
        left: -270px;
        bottom: -45px;
    }

    // Android mascot
    &:before {
        .fxfamily-sprite(-225px, -405px);
        width: 115px;
        height: 125px;
        top: -50px;
        left: -50px;
    }

    // Google Play button
    .btn-google-play {
        position: absolute;
        right: 20px;
        bottom: 40px;
        z-index: 5;
    }

    @media only screen and (min-width: @breakDesktopWide) {
        &:after {
            left: -160px;
            bottom: 0;
        }

        &:before {
            top: -30px;
            left: -45px;
        }

        .btn-google-play {
            right: 30px;
            bottom: 60px;
        }
    }

    @media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
        &:after {
            left: 50%;
            bottom: -55px;
            margin-left: -235px;
        }

        &:before {
            top: -30px;
            left: -45px;
        }

        .btn-google-play {
            position: static;
        }
    }

    @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
        &:after {
            left: 50%;
            bottom: -55px;
            margin-left: -235px;
        }

        &:before {
            top: -30px;
        }

        .btn-google-play {
            position: static;
        }
    }
}

// Firefox OS
#product-fxos:after {
    .fxfamily-sprite(0, -405px);
    width: 224px;
    height: 146px;
    bottom: -20px;
    left: 50%;
    margin-left: -112px;

    @media only screen and (min-width: @breakDesktopWide) {
        bottom: 0;
    }
}

/*--------------------------------------------------------------------------*/
// Secondary tier - Hello, Marketplace, Sync
#products-secondary {
    background: #efefef;
    border-top: 1px solid rgba(0, 0, 0, .1);

    .product {
        padding: 50px 20px 50px 140px;
        min-height: 50px;
    }

    h2 {
        .font-size(24px);
        margin: 0 0 .15em;
    }

    p {
        margin: 0;
    }

    a {
        color: @linkBlue;

        h2 {
            color: @linkBlue;
        }

        p {
            color: #999;
        }

        &:hover,
        &:focus,
        &:active {
            color: darken(@linkBlue, 10%);

            h2, p {
                color: darken(@linkBlue, 10%);
            }
        }
    }
}

// Hello
#product-hello h2:before {
    .fxfamily-sprite(-380px, -115px);
    width: 84px;
    height: 80px;
    top: 40px;
    left: 40px;
}

// Sync
#product-sync h2:before {
    .fxfamily-sprite(-345px, -405px);
    width: 120px;
    height: 81px;
    top: 32px;
    left: 10px;
}

// Marketplace
#product-marketplace {
    h2:before {
        .fxfamily-sprite(0, -555px);
        width: 87px;
        height: 83px;
        top: 35px;
        left: 30px;
    }

    // New window icon
    h2:after {
        content: '';
        width: 14px;
        height: 14px;
        background: url(/media/img/firefox/family/index/family-sprite.png) -344px -515px no-repeat;
        display: inline-block;
        margin-left: 8px;
        .at2x('/media/img/firefox/family/index/family-sprite.png', 500px, 645px);
    }
}

@media only screen and (min-width: @breakDesktopWide) {
    #products-secondary .product {
        padding-left: 160px;
    }

    #product-hello h2:before {
        left: 60px;
    }

    #product-sync h2:before {
        left: 30px;
    }

    #product-marketplace h2:before {
        left: 55px;
    }
}

/*--------------------------------------------------------------------------*/
// Footer
#footer {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .1);

    .content {
        padding: (@baseLine * 2) 0 (@baseLine * 3);
    }

    .mozlogo {
        .image-replaced();
        display: inline-block;
        margin: 0 auto @baseLine;
        background: url(/media/img/firefox/family/index/family-sprite.png) -345px -485px no-repeat;
        width: 94px;
        height: 25px;
        float: left;
        .at2x('/media/img/firefox/family/index/family-sprite.png', 500px, 645px);
    }

    ul {
        float: right;
        margin: 0;
        list-style: none;
        .font-size(@smallFontSize);

        li {
            display: inline;
            margin: 0 10px;

            &:after {
                content: '•';
                color: @textColorPrimary;
                margin: 0 -10px 0 10px;
            }

            &:last-child:after {
                content: '';
            }
        }
    }
}

/*--------------------------------------------------------------------------*/
// Wide desktop layout, 1400px
@media only screen and (min-width: @breakDesktopWide) {
    #header {
        height: 570px;

        &:after {
            .background-size(1184px 704px);
            width: 1184px;
            height: 704px;
            margin-left: -15px;
        }

        .content:before {
            left: 80px;
        }

        h1 {
            width: 520px;
            margin-left: 80px;

            img {
                width: 330px;
                height: auto;
            }
        }
    }

    [lang~='en'] #header h1 {
        width: 520px;
        .font-size(60px);

        b {
            .font-size(96px);
        }

        img {
            margin-left: 15px;
        }
    }
}

/*--------------------------------------------------------------------------*/
// Tablet layout, 760px
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

    #header {
        height: 400px;

        &:after {
            .background-size(888px 528px);
            width: 888px;
            height: 528px;
            margin-left: 120px;
        }

        .content:before {
            left: 30px;
        }

        h1 {
            margin-left: 30px;
        }
    }

    .product-list {
        display: block;

        .product {
            width: auto;
            float: none;
            display: block;
        }
    }

    #products-primary {
        .content {
            width: auto;
        }

        .highlight {
            background-position: left top;
        }
    }

    #products-secondary {
        .product {
            width: 33.3%;
            float: left;
            text-align: center;
            padding: 120px @gridGutterWidth @baseLine;
        }

        h2 {
            .font-size(20px);

            &:before {
                left: 50%;
            }
        }
    }

    #product-hello h2:before {
        top: @baseLine + 14;
        margin-left: -41px;
    }

    #product-sync h2:before {
        top: @baseLine + 4;
        margin-left: -60px;
    }

    #product-marketplace h2:before {
        top: @baseLine;
        margin-left: -43px;
    }
}

/*--------------------------------------------------------------------------*/
// Mobile layout, 320px
@media only screen and (max-width: @breakTablet) {

    #header {
        height: auto;

        &:after {
            background-image: none;
            display: none;
        }

        .content {
            padding: 160px 0 40px;

            &:before {
                top: 45px;
                left: 50%;
                margin-left: -52px;
            }
        }

        h1 {
            width: auto;
            margin: 0 @gridGutterWidth @baseLine;
            .font-size(30px);

            b {
                .font-size(40px);
            }
        }
    }

    [lang~='en'] #header h1 {
        .font-size(30px);
        width: 250px;
        margin: 0 auto @baseLine;

        b {
            .font-size(40px);
        }

        img {
            width: 165px;
            height: 48px;
            margin: 6px 0 0 10px;
        }
    }

    .product-list {
        display: block;

        .product {
            width: 100%;
            float: none;
            min-width: @widthMobile;
        }
    }

    #products-primary {
        .content {
            width: auto;
        }

        .highlight {
            background-position: left top;
        }
    }

    #products-secondary {
        padding: @baseLine 0;

        .product {
            padding: @baseLine @gridGutterWidth @baseLine 120px;
            min-height: 50px;
        }

        // Shrink icons by 25%
        h2:before {
            .background-size(375px 484px);
        }
    }

    #product-hello h2:before {
        width: 63px;
        height: 60px;
        background-position: -286px -87px;
        top: @baseLine - 5;
        left: 30px;
    }

    #product-sync h2:before {
        width: 90px;
        height: 60px;
        background-position: -258px -303px;
        top: @baseLine - 5;
        left: 15px;
    }

    #product-marketplace h2:before {
        width: 68px;
        height: 68px;
        background-position: 0 -417px;
        top: @baseLine - 5;
        left: 30px;
    }

    #footer {
        .content {
            padding: @baseLine 0;
            text-align: center;
        }

        .mozlogo {
            float: none;
        }

        ul {
            float: none;

            li {
                display: block;
                margin: 0 0 .25em;

                &:after {
                    content: '';
                }
            }
        }
    }

}


Decr md-errors-spacer height to 10px

Decr md-errors-spacer height to 10px

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/eleme/banshee.git/'


fix errors when @cvan's code blows up

fix errors when @cvan's code blows up

@import 'lib';

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 2000;
    opacity: 0;
    overflow: hidden;
    color: #000;
    background: rgba(0,0,0,.5);
    pointer-events: none;
    -moz-transition: .5s opacity ease;
    -webkit-transition: .5s opacity ease;
    &.show {
        pointer-events: auto;
        opacity: 1;
        display: block;
    }
    > section {
        .box-shadow(0 2px 2px fadeOut(#000, 50%));
        border: 2px solid @text;
        .border-radius(5px);
        .gradient-two-color(#dee3e6, #fff);
        .transform(~'translate(-50%, -50%)');
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        height: auto;
        width: auto;
        min-width: 300px;
        max-width: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -moz-transition: .5s all ease;
        -webkit-transition: .5s all ease;
        color: @text;
        footer {
            margin-top: 10px;
            backround-color: #ccc;
            width: 100%;
            display: block;
            button {
                margin: 10px 0 0;
                float: right;
            }
        }
        &.bare {
            .border-radius(0);
            border: 0;
            padding: 0;
            .header-button {
                display: block;
            }
        }
    }
    header .dismiss {
        width: 50px;
    }
    form {
        margin: 0;
    }
    h2, .char-count {
        margin-bottom: 10px;
    }
    .req-error {
        float: left;
        font-size: 13px;
        line-height: 18px;
        margin-top: 5px;
    }
    .dismiss {
        display: block;
        width: 100%;
    }
}

@media (max-width: @4col) {
    .overlay > section {
        padding: 10px;
        form {
            margin: 0;
        }
    }
}

#msg-overlay {
    text-align: center;
}

@import 'lib';

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 2000;
    opacity: 0;
    overflow: hidden;
    color: #000;
    background: rgba(0,0,0,.5);
    pointer-events: none;
    -moz-transition: .5s opacity ease;
    -webkit-transition: .5s opacity ease;
    &.show {
        pointer-events: auto;
        opacity: 1;
        display: block;
    }
    > section {
        .box-shadow(0 2px 2px fadeOut(#000, 50%));
        border: 2px solid @text;
        .border-radius(5px);
        .gradient-two-color(#dee3e6, #fff);
        .transform(~'translate(-50%, -50%)');
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        height: auto;
        width: auto;
        min-width: 300px;
        max-width: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -moz-transition: .5s all ease;
        -webkit-transition: .5s all ease;
        color: @text;
        footer {
            margin-top: 10px;
            backround-color: #ccc;
            width: 100%;
            display: block;
            button {
                margin: 10px 0 0;
                float: right;
            }
        }
        > &.bare {
            .border-radius(0);
            border: 0;
            padding: 0;
            .header-button {
                display: block;
            }
        }
    }
    header .dismiss {
        width: 50px;
    }
    form {
        margin: 0;
    }
    h2, .char-count {
        margin-bottom: 10px;
    }
    .req-error {
        float: left;
        font-size: 13px;
        line-height: 18px;
        margin-top: 5px;
    }
    .dismiss {
        display: block;
        width: 100%;
    }
}

@media (max-width: @4col) {
    .overlay > section {
        padding: 10px;
        form {
            margin: 0;
        }
    }
}

#msg-overlay {
    text-align: center;
}


fix ratings margin on detail page

fix ratings margin on detail page

fatal: unable to access 'https://github.com/Jobava/zamboni.git/': The requested URL returned error: 403


Fix alignment bug with shop button in shoppable magazine

fatal: unable to access 'https://github.com/hevnly/asset-bazaar.git/': The requested URL returned error: 403


Add css to remove border-left of cursor to close #1. thx for the idea @hced

.editor .cursor {
  border-left: none;

  .vim-mode.insert-mode& {
    border-left: 1px solid;
  }
}

error: pathspec 'stylesheets/cute-cursor.less' did not match any file(s) known to git


Se cambió el hover del texto de los íconos a un subrayado

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/mxabierto/dgm.git/'