[fix bug 1154786] Mozilla wordmark in footer repeating

// 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";
@import "home-grid.less";

@font-face {
    font-family: 'FA-Icons-Home';
    src: url('/media/fonts/icons-home.eot?12-2014#iefix') format('embedded-opentype'),
         url('/media/fonts/icons-home.woff?12-2014') format('woff'),
         url('/media/fonts/icons-home.ttf?12-2014') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    .open-sans-light;
    color: #fff;
    text-shadow: none;
}

#outer-wrapper {
    width: 100%;
    background: #fff;
}

#wrapper {
    width: 100%;
    padding-bottom: 0;
}

.main-header {
    width: 100%;
    padding: 0;
    background: #c13832;

    h1 {
        display: block;
        float: left;
        width: 100%;
        margin: 50px auto @baseLine auto;
        padding: 0;
        text-align: center;
        img {
            width: 313px;
            height: 82px;
        }
    }
}

#masthead {
    width: 100%;
    background: #c13832;
    padding: 0;
    nav li {
        a:link,
        a:visited {
            color: #fff;
        }
    }

    .container {
        width: @widthSquareGrid_6 - (@gridGutterWidth * 2);
        margin: 0 auto;
        padding: 0 10px;
    }
}

.main-header .container,
.module .container {
    width: @widthSquareGrid_6 - (@gridGutterWidth * 2);
    margin: 0 auto;
    padding: 0;
}

.module .more-large {
    display: inline-block;
    min-width: 200px;
    margin: @baseLine auto;
    padding: 15px (@baseLine * 2);
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    background: #f6f4ec;
    border: 2px solid #e3e1d9;
    border-radius: 10px;
    .transition(all .2s ease-in-out);

    &:link,
    &:visited {
        color: #0095dd;
    }

    &:hover,
    &:active,
    &:focus {
        border: 2px solid #0095dd;
        cursor: pointer;
        text-decoration: none;
    }
}

#firefox-download-section {
    position: relative;
    margin: 0;
    padding: 20px 0;
    border: 0;
    background: #565a5c;

    header {
        position: relative;
        float: left;
        padding: 0 20px 0 0;
        width: auto;
        vertical-align: middle;

        a {
            display: block;
            width: 100%;

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

        h3, h4 {
            float: left;
            vertical-align: middle;
        }

        h3 {
            width: 300px;
            margin: 0;

            img {
                width: 100%;
                vertical-align: top;
            }
        }

        h4 {
            display: block;
            width: 320px;
            margin: @baseLine 0 0 (@baseLine * 2);
            padding-bottom: @baseLine;
            .font-size(30px);
            line-height: 1.1;
            font-weight: normal;
            letter-spacing: -1px;
            color: #fff;
            .open-sans-light;

            strong {
                .open-sans;
                font-weight: normal;
            }
        }
    }

    .download-button-simple {
        float: right;
        margin: (@baseLine * 1.5) 0 @baseLine 0;

        .unsupported-download,
        .download-other,
        .download-other a {
            color: #fff;
        }

        .download-subtitle {
            text-shadow: none;
            text-transform: uppercase;
            .font-size(18px);
        }

        .unsupported-download {
            a:link,
            a:visited {
                color: #43c2ff;
            }

            a:hover,
            a:active,
            a:focus {
                color: lighten(#43c2ff, 10%);
            }
        }

        .os_android .download-subtitle {
            .font-size(@largeFontSize);
            margin-right: 0px;
            text-align: center;
        }

        .download-link {
            background: #689f2a;
            filter: none;
            box-shadow: none;

            &:hover,
            &:focus {
                background: lighten(#689f2a, 3%);
            }
        }
    }
}

.html-rtl {
    #firefox-download-section {
        header {
            float: right;
            padding: 0 0 0 @baseLine;

            h3 {
                float: right;
            }

            h4 {
                float: right;
                margin: @baseLine (@baseLine * 2) 0 0;
            }
        }

        .download-button-simple {
            float: left;
            margin: 30px 0 @baseLine 0;
        }
    }
}

#community {
    background: #c0413c;
    color: #fff;
    text-align: center;

    ul {
        position: relative;
        list-style-type: none;
        margin: 0 auto;
        width: 100%;
        padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        .clearfix();

        li {
            float: left;
            margin: 0;
            padding: 0;
            width: 33.3%;

            .stat {
                position: relative;
                display: inline-block;
                font-style: normal;
                .font-size(42px);
                line-height: 1.3;
                padding: 0 @baseLine 0 62px;
                .open-sans-light;

                &:before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 52px;
                    height: 42px;
                    color: #dfa09d;
                    font-family: 'FA-Icons-Home';
                }

                &.organizations:before {
                    content: '\f004'; // heart
                }

                &.contributors:before {
                    height: 49px;
                    content: '\f0c0'; // group
                }

                &.countries:before {
                    content: '\f0ac'; // globe
                    left: 10px;
                }
            }

            span {
                display: block;
                font-style: italic;
                .font-size(20px);
                padding: 0 @baseLine;
                .open-sans;
            }
        }
    }

    .contribute-btn {
        display: inline-block;
        margin: 0 auto (@baseLine * 2) auto;
        padding: @baseLine (@baseLine * 3);
        line-height: 1.3;
        text-align: center;
        .font-size(18px);
        background: #0095dd;
        border-radius: 10px;
        text-transform: uppercase;
        .transition(all .2s ease-in-out);

        &:link,
        &:visited {
            color: #fff;
        }

        &:hover,
        &:active,
        &:focus {
            background: #fff;
            color: #0095dd;
            text-decoration: none;
            cursor: pointer;
        }
    }
}

#upcoming-events {
    background: #f6f4ec;

    .container {
        position: relative;
        padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        text-align: center;

        h2 {
            .font-size(54px);
            color: @textColorSecondary;
            text-align: center;
            margin-bottom: @baseLine * 4;
            letter-spacing: -1px;
        }

        h4 {
            .open-sans;
        }
    }

    .inner-container {
        .clearfix();
        margin-bottom: @baseLine;
    }

    .date-large {
        display: block;
        float: left;
        margin: 0 @baseLine 0 0;
        .clearfix();

        time {
            display: block;
            width: 170px;
            height: 170px;
            background: #c13832;
            border: 5px solid #c13832;
            color: #fff;
            text-align: center;
            line-height: 1.1;
            border-radius: 100%;
            .open-sans-light;
            .transition(background .1s ease-in-out);

            .date-month {
                display: block;
                .font-size(32px);
                padding-top: 45px;
            }

            .date-day {
                display: block;
                .font-size(44px);
            }
        }

        &:hover,
        &:focus {
            time {
                background: #cd453f;
            }
        }
    }

    .event-info:before {
        display: inline-block;
        font-family: 'FA-Icons-Home';
        width: 1.5em;
        text-align: center;
        color: #b1b1ad;
    }

    .event-info.location {
        display: block;
        position: relative;
        margin-top: 5px;
        .clearfix();

        &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '\f041\00a0'; // pin space
        }

        p {
            float: left;
            margin: 0 0 0 20px;
        }
    }

    time.event-info:before {
        content: '\f073\00a0'; // calendar space
    }

    .featured-event {
        display: block;
        width: 100%;
        margin-right: 0;
        text-align: left;
        .clearfix();

        .event-detail {
            float: left;
            width: 740px;

            a {
                display: block;
            }

            h3.next {
                color: #c13832;
                .font-size(@largeFontSize);
                font-style: italic;

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

            h4 {
                .font-size(28px);
                color: #565a5c;
                line-height: 1.2;
            }

            time,
            p {
                .open-sans-light;
                color: #b1b1ad;
                .font-size(20px);
            }

            .event-info.location {
                &:before {
                    .font-size(20px);
                }
                p {
                    margin-left: 29px;
                }
            }
        }

        a:hover,
        a:active,
        a:focus {
            text-decoration: none;
            h4 {
                text-decoration: underline;
            }
        }
    }

    .events-list {
        list-style-type: none;
        width: 60%;
        margin: (@baseLine * 2) auto 0 auto;
        padding: 0;
        text-align: left;

        li {
            margin: 0;
            padding: 0;

            time {
                display: block;
                float: left;
                width: 50px;
                height: 40px;
                padding: 10px 5px;
                border: 2px solid #c13832;
                color: #565a5c;
                text-align: center;
                line-height: 1.1;
                border-radius: 100%;
                .open-sans-light;

                .date-month {
                    display: block;
                    .font-size(@baseFontSize);
                }

                .date-day {
                    display: block;
                    .font-size(24px);
                }
            }

            a {
                display: block;
                position: relative;
                margin-bottom: @baseLine;
                .clearfix();
            }

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

                h3 {
                    text-decoration: underline;
                }
            }
        }

        .event-detail {
            padding: 0 @baseLine 0 80px;
            margin: 0;

            h3 {
                display: block;
                margin: 0;
                padding: 0;
                color: #565a5c;
                .font-size(22px);
                line-height: 1.1;
            }

            p {
                color: #b1b1ad;
            }

        }
    }
}

.html-rtl {
    #upcoming-events {
        .featured-event {
            text-align: right;
            margin-left: @baseLine * 2;
            margin-right: 0;

            .date-large {
                float: right;
                margin: 0 0 0 @baseLine;
            }

            .event-detail {
                float: right;
            }

            .event-info.location {
                p {
                    margin-left: 0;
                    margin-right: 29px;
                }
            }
        }

        .events-list {
            text-align: right;

            .event-detail {
                padding: 0 80px 0 20px;
            }

            li time {
                float: right;
            }
        }

        .event-info.location {

            &:before {
                left: auto;
                right: 0;
            }

            p {
                float: right;
                margin-left: 0;
                margin-right: 20px;
            }
        }
    }

}

#secondary-links {
    background: #fff;

    ul {
        position: relative;
        list-style-type: none;
        width: 100%;
        margin: 0 auto;
        padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        .clearfix();

        li {
            float: left;
            margin: 0;
            padding: 0;
            width: 33.3%;
        }
    }

    h2 {
        position: relative;
        .font-size(24px);
        color: @textColorSecondary;
        padding-top: 100px;

        &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 84px;
            background: url(/media/img/home/voices/secondary-icon-sprite.png) no-repeat center top;
        }
    }

    a {
        display: block;
        padding: 0 50px;
        text-align: center;

        &.add-ons h2:before {
            background-position: center 0;
        }
        &.careers h2:before {
            background-position: center -86px;
        }
        &.help h2:before {
            background-position: center -172px;
        }

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

            h2 {
                text-decoration: underline;
            }
        }
    }

    p {
        color: @textColorSecondary;
        .font-size(@largeFontSize);
        margin-top: @baseLine;
    }
}

#newsletter-signup {
    background: #f6f4ec;
}

#mozorg-newsletter-form,
#newsletter-form {
    width: @widthSquareGrid_8 / 2;
    margin: 0 auto;
    padding: 0 0 (@baseLine * 2) 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;

    h3 {
        display: block;
        float: none;
        width: auto;
        padding: (@baseLine * 2) 0;
        color: @textColorSecondary;
        .font-size(46px);
        text-align: center;
        margin: 0;
        letter-spacing: -1px;
    }

    .form-contents {
        width: 50%;
        margin: 0;

        input[type="email"] {
            height: 32px;
            padding: 5px 10px;
            background: #fbf9f4;
            border: 2px solid #e1ddd3;
            border-radius: 7px;
            -webkit-appearance: none;
        }

        ::-webkit-input-placeholder {
           color: #e1ddd3;
           .open-sans;
           font-weight: bold;
           opacity: 1;
        }

        ::-moz-placeholder {
           color: #e1ddd3;
           .open-sans;
           font-weight: bold;
           opacity: 1;
        }

        :-ms-input-placeholder {
           color: #e1ddd3;
           .open-sans;
           font-weight: bold;
           opacity: 1;
        }
    }

    .form-submit {
        width: 50%;
        margin: 0;

        input[type="submit"] {
            width: 100%;
            min-height: 45px;
            background: #0095dd;
            .font-size(18px);
            font-weight: normal;
            text-shadow: none;
            text-transform: uppercase;
            box-shadow: none;
            border-radius: 7px;
            -webkit-appearance: none;

            &:hover,
            &:focus {
                background: lighten(#0095dd, 5%);
            }
        }
    }

    .privacy-check-label .title {
        padding: 0 20px 0 25px;
    }
}

.newsletter-form.thank {
    width: @widthSquareGrid_8 / 2;
    margin: 0 auto;
    padding: @baseLine 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

/*!
  cache buster 04/23/2015 (bug 1154786)
*/

#colophon {
    margin: 0;
    background: #565a5c;
    color: @textColorLight;

    a:link,
    a:visited {
        color: #43c2ff;
    }

    a:hover,
    a:active,
    a:focus {
        color: lighten(#43c2ff, 10%);
    }

    .logo a {
        .at2x('/media/img/sandstone/footer-mozilla-white.png', 93px, 24px);
    }
}

#scroll-prompt {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #fff;
    .font-size(18px);
    background: #56555b;
    border: none;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;

    &:before {
        font-family: 'FA-Icons-Home';
        content: '\f055\00a0'; // plus-circle space
    }
}

/****************************************************************************/
// @Widescreen styles
// Reduce header height at smaller viewport sizes
@media only screen and (min-width: (@widthSquareGrid_8)) {

    .module .container,
    .main-header .container, {
        width: @widthSquareGrid_8 - (@gridGutterWidth * 2);
    }

    .main-header h1 {
        margin: 50px auto;
    }

    #firefox-download-section {
        header {
            h3 {
                width: 380px;
            }

            h4 {
                width: 450px;
                margin: @baseLine 0 @baseLine (@baseLine * 5);
                .font-size(34px);
            }
        }
    }

    .html-rtl #firefox-download-section {
        header h4 {
            margin: @baseLine (@baseLine * 5) @baseLine 0;
        }
    }

    #upcoming-events {
        .featured-event {
            float: left;
            width: 760px;
            margin-right: @baseLine * 2;

            .event-detail {
                width: 560px;
            }
        }

        .events-list {
            float: left;
            width: 460px;
            margin: 0;
        }
    }

    .html-rtl {
        #upcoming-events {
            .featured-event {
                float: right;
            }
            .events-list {
                float: right;
            }
        }
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        h3 {
            width: 100%;
            padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        }
    }
}

/****************************************************************************/
// @Smallscreen styles
// One extra column of faces either side of the main content grid
@media only screen and (min-width: @widthSquareGrid_7) and (max-width: (@widthSquareGrid_8 - 1)) {

    .module .container,
    .main-header .container, {
        width: @widthSquareGrid_7 - (@gridGutterWidth * 2);
    }

    #firefox-download-section {
        header h4 {
            width: 370px;
            margin-left: @gridGutterWidth * 4;
        }
    }

    .html-rtl #firefox-download-section {
        header h4 {
            margin-left: 0;
            margin-right: @gridGutterWidth * 4;
        }
    }

    #upcoming-events {
        .featured-event {
            float: left;
            width: 670px;

            .event-detail {
                width: 450px;
            }
        }

        .events-list {
            float: left;
            width: 390px;
            margin: 0;
        }
    }

    .html-rtl {
        #upcoming-events {
            .featured-event {
                float: right;
            }
            .events-list {
                float: right;
            }
        }
    }
}

@media only screen and (min-width: @widthSquareGrid_5) and (max-width: (@widthSquareGrid_6 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: auto;
            margin: 0 @baseLine;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_5 - (@gridGutterWidth * 2);
    }

    #firefox-download-section {
        header {
            h3 {
                width: 300px;
            }

            h4 {
                display: none;
            }
        }

        .download-button-simple {
            margin: @baseLine 0;
        }
    }

    #upcoming-events {
        .featured-event {
            width: 100%;
            margin-right: 0;

            .event-detail {
                width: 580px;
            }
        }

        .events-list {
            width: 70%;
            margin-top: @baseLine * 2;
        }
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        h3 {
            float: none;
            width: auto;
            padding: (@baseLine * 2) 0;
        }

        .form-contents,
        .form-submit {
            width: 50%;
            margin: 0;
        }
    }
}

@media only screen and (max-width: (@widthSquareGrid_5 - 1)) {

    #firefox-download-section,
    .html-rtl #firefox-download-section {
        header {
            h3 {
                width: 300px;
            }

            h4 {
                display: none;
            }
        }

        .download-button-simple {
            margin: @baseLine 0;
        }
    }

    #secondary-links,
    #community {
        ul {
            width: 100%;
            padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
            li {
                float: none;
                width: 100%;
                margin: 0 auto (@baseLine * 2) auto;
            }
        }

        .contribute {
            width: auto;
        }
    }

    #secondary-links a {
        padding: 0;
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        width: 100%;

        .form-contents {
            width: 100%;

            input[type="email"] {
                .border-box();
                height: 44px;
                width: 100%;
            }
        }

        .form-submit {
            width: 100%;

            input[type="submit"] {
                width: 100%;
            }
        }
    }

    .newsletter-form.thank {
        width: 100%;
    }
}

@media only screen and (min-width: @widthSquareGrid_4) and (max-width: (@widthSquareGrid_5 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: auto;
            margin: 0 @baseLine;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_4 - (@gridGutterWidth * 2);
    }

    #upcoming-events {

        .container h2 {
            margin-bottom: @baseLine * 2;
        }

        .featured-event {
            width: 100%;
            margin-right: 0;

            .event-detail {
                width: 420px;
            }
        }

        .events-list {
            width: 100%;
            margin-top: @baseLine * 2;
        }
    }
}

@media only screen and (min-width: @widthSquareGrid_3) and (max-width: (@widthSquareGrid_4 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: @widthSquareGrid_3 - (@gridGutterWidth * 2);
            margin: 0 auto;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_3 - (@gridGutterWidth * 2);
    }

    .main-header h1 img {
        width: 260px;
        height: auto;
    }

    #firefox-download-section,
    .html-rtl #firefox-download-section  {
        text-align: center;

        header {
            float: none;
            padding: 0;

            h3 {
                float: none;
                display: inline-block;
                width: 300px;
            }
        }

        .download-button {
            float: none;
            margin: @baseLine auto;
        }
    }

    #community .contribute-btn {
        width: 320px;
        padding: @baseLine;
    }

    #upcoming-events {

        .container h2 {
            margin-bottom: @baseLine * 2;
        }

        .featured-event {
            width: 100%;
            margin-right: 0;

            .date-large {
                display: none;
            }

            .event-detail {
                width: 100%;
                float: none;
                margin-top: @baseLine;
            }
        }

        .events-list {
            width: 100%;
            margin-top: @baseLine * 2;
        }
    }
}

@media only screen and (max-width: (@widthSquareGrid_3 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: @widthSquareGrid_2 - (@gridGutterWidth * 2);
            margin: 0 auto;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_2 - (@gridGutterWidth * 2);
    }

    .main-header h1 img {
        width: 260px;
        height: 68px;
    }

    #firefox-download-section,
    .html-rtl #firefox-download-section {
        text-align: center;

        header {
            float: none;
            padding: 0;

            h3 {
                float: none;
                display: inline-block;
                width: 280px;
            }
        }

        .download-button {
            float: none;
            margin: @baseLine auto;
        }
    }

    #community .contribute-btn {
        width: 200px;
        padding: @baseLine (@baseLine / 2);
    }

    #upcoming-events {

        .container h2 {
            .font-size(42px);
            margin-bottom: @baseLine * 2;
        }

        .featured-event {
            width: 100%;
            margin-right: 0;

            .date-large {
                display: none;
            }

            .event-detail {
                width: 100%;
                float: none;
                margin-top: @baseLine;

                h4 {
                    .font-size(24px);
                }

                time,
                .event-info p {
                    .font-size(18px);
                }
            }
        }

        .events-list {
            width: 100%;
            margin-top: @baseLine * 2;
        }

        .all-events {
            width: auto;
        }
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        h3 {
            .font-size(42px);
        }
    }
}

/****************************************************************************/
// @Wide @mobile layout: 480px
@media only screen and (max-width: @breakTablet) {
    #masthead nav li {
        a:link,
        a:visited {
            color: #484848;
        }
    }
}

// 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";
@import "home-grid.less";

@font-face {
    font-family: 'FA-Icons-Home';
    src: url('/media/fonts/icons-home.eot?12-2014#iefix') format('embedded-opentype'),
         url('/media/fonts/icons-home.woff?12-2014') format('woff'),
         url('/media/fonts/icons-home.ttf?12-2014') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    .open-sans-light;
    color: #fff;
    text-shadow: none;
}

#outer-wrapper {
    width: 100%;
    background: #fff;
}

#wrapper {
    width: 100%;
    padding-bottom: 0;
}

.main-header {
    width: 100%;
    padding: 0;
    background: #c13832;

    h1 {
        display: block;
        float: left;
        width: 100%;
        margin: 50px auto @baseLine auto;
        padding: 0;
        text-align: center;
        img {
            width: 313px;
            height: 82px;
        }
    }
}

#masthead {
    width: 100%;
    background: #c13832;
    padding: 0;
    nav li {
        a:link,
        a:visited {
            color: #fff;
        }
    }

    .container {
        width: @widthSquareGrid_6 - (@gridGutterWidth * 2);
        margin: 0 auto;
        padding: 0 10px;
    }
}

.main-header .container,
.module .container {
    width: @widthSquareGrid_6 - (@gridGutterWidth * 2);
    margin: 0 auto;
    padding: 0;
}

.module .more-large {
    display: inline-block;
    min-width: 200px;
    margin: @baseLine auto;
    padding: 15px (@baseLine * 2);
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    background: #f6f4ec;
    border: 2px solid #e3e1d9;
    border-radius: 10px;
    .transition(all .2s ease-in-out);

    &:link,
    &:visited {
        color: #0095dd;
    }

    &:hover,
    &:active,
    &:focus {
        border: 2px solid #0095dd;
        cursor: pointer;
        text-decoration: none;
    }
}

#firefox-download-section {
    position: relative;
    margin: 0;
    padding: 20px 0;
    border: 0;
    background: #565a5c;

    header {
        position: relative;
        float: left;
        padding: 0 20px 0 0;
        width: auto;
        vertical-align: middle;

        a {
            display: block;
            width: 100%;

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

        h3, h4 {
            float: left;
            vertical-align: middle;
        }

        h3 {
            width: 300px;
            margin: 0;

            img {
                width: 100%;
                vertical-align: top;
            }
        }

        h4 {
            display: block;
            width: 320px;
            margin: @baseLine 0 0 (@baseLine * 2);
            padding-bottom: @baseLine;
            .font-size(30px);
            line-height: 1.1;
            font-weight: normal;
            letter-spacing: -1px;
            color: #fff;
            .open-sans-light;

            strong {
                .open-sans;
                font-weight: normal;
            }
        }
    }

    .download-button-simple {
        float: right;
        margin: (@baseLine * 1.5) 0 @baseLine 0;

        .unsupported-download,
        .download-other,
        .download-other a {
            color: #fff;
        }

        .download-subtitle {
            text-shadow: none;
            text-transform: uppercase;
            .font-size(18px);
        }

        .unsupported-download {
            a:link,
            a:visited {
                color: #43c2ff;
            }

            a:hover,
            a:active,
            a:focus {
                color: lighten(#43c2ff, 10%);
            }
        }

        .os_android .download-subtitle {
            .font-size(@largeFontSize);
            margin-right: 0px;
            text-align: center;
        }

        .download-link {
            background: #689f2a;
            filter: none;
            box-shadow: none;

            &:hover,
            &:focus {
                background: lighten(#689f2a, 3%);
            }
        }
    }
}

.html-rtl {
    #firefox-download-section {
        header {
            float: right;
            padding: 0 0 0 @baseLine;

            h3 {
                float: right;
            }

            h4 {
                float: right;
                margin: @baseLine (@baseLine * 2) 0 0;
            }
        }

        .download-button-simple {
            float: left;
            margin: 30px 0 @baseLine 0;
        }
    }
}

#community {
    background: #c0413c;
    color: #fff;
    text-align: center;

    ul {
        position: relative;
        list-style-type: none;
        margin: 0 auto;
        width: 100%;
        padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        .clearfix();

        li {
            float: left;
            margin: 0;
            padding: 0;
            width: 33.3%;

            .stat {
                position: relative;
                display: inline-block;
                font-style: normal;
                .font-size(42px);
                line-height: 1.3;
                padding: 0 @baseLine 0 62px;
                .open-sans-light;

                &:before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 52px;
                    height: 42px;
                    color: #dfa09d;
                    font-family: 'FA-Icons-Home';
                }

                &.organizations:before {
                    content: '\f004'; // heart
                }

                &.contributors:before {
                    height: 49px;
                    content: '\f0c0'; // group
                }

                &.countries:before {
                    content: '\f0ac'; // globe
                    left: 10px;
                }
            }

            span {
                display: block;
                font-style: italic;
                .font-size(20px);
                padding: 0 @baseLine;
                .open-sans;
            }
        }
    }

    .contribute-btn {
        display: inline-block;
        margin: 0 auto (@baseLine * 2) auto;
        padding: @baseLine (@baseLine * 3);
        line-height: 1.3;
        text-align: center;
        .font-size(18px);
        background: #0095dd;
        border-radius: 10px;
        text-transform: uppercase;
        .transition(all .2s ease-in-out);

        &:link,
        &:visited {
            color: #fff;
        }

        &:hover,
        &:active,
        &:focus {
            background: #fff;
            color: #0095dd;
            text-decoration: none;
            cursor: pointer;
        }
    }
}

#upcoming-events {
    background: #f6f4ec;

    .container {
        position: relative;
        padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        text-align: center;

        h2 {
            .font-size(54px);
            color: @textColorSecondary;
            text-align: center;
            margin-bottom: @baseLine * 4;
            letter-spacing: -1px;
        }

        h4 {
            .open-sans;
        }
    }

    .inner-container {
        .clearfix();
        margin-bottom: @baseLine;
    }

    .date-large {
        display: block;
        float: left;
        margin: 0 @baseLine 0 0;
        .clearfix();

        time {
            display: block;
            width: 170px;
            height: 170px;
            background: #c13832;
            border: 5px solid #c13832;
            color: #fff;
            text-align: center;
            line-height: 1.1;
            border-radius: 100%;
            .open-sans-light;
            .transition(background .1s ease-in-out);

            .date-month {
                display: block;
                .font-size(32px);
                padding-top: 45px;
            }

            .date-day {
                display: block;
                .font-size(44px);
            }
        }

        &:hover,
        &:focus {
            time {
                background: #cd453f;
            }
        }
    }

    .event-info:before {
        display: inline-block;
        font-family: 'FA-Icons-Home';
        width: 1.5em;
        text-align: center;
        color: #b1b1ad;
    }

    .event-info.location {
        display: block;
        position: relative;
        margin-top: 5px;
        .clearfix();

        &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '\f041\00a0'; // pin space
        }

        p {
            float: left;
            margin: 0 0 0 20px;
        }
    }

    time.event-info:before {
        content: '\f073\00a0'; // calendar space
    }

    .featured-event {
        display: block;
        width: 100%;
        margin-right: 0;
        text-align: left;
        .clearfix();

        .event-detail {
            float: left;
            width: 740px;

            a {
                display: block;
            }

            h3.next {
                color: #c13832;
                .font-size(@largeFontSize);
                font-style: italic;

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

            h4 {
                .font-size(28px);
                color: #565a5c;
                line-height: 1.2;
            }

            time,
            p {
                .open-sans-light;
                color: #b1b1ad;
                .font-size(20px);
            }

            .event-info.location {
                &:before {
                    .font-size(20px);
                }
                p {
                    margin-left: 29px;
                }
            }
        }

        a:hover,
        a:active,
        a:focus {
            text-decoration: none;
            h4 {
                text-decoration: underline;
            }
        }
    }

    .events-list {
        list-style-type: none;
        width: 60%;
        margin: (@baseLine * 2) auto 0 auto;
        padding: 0;
        text-align: left;

        li {
            margin: 0;
            padding: 0;

            time {
                display: block;
                float: left;
                width: 50px;
                height: 40px;
                padding: 10px 5px;
                border: 2px solid #c13832;
                color: #565a5c;
                text-align: center;
                line-height: 1.1;
                border-radius: 100%;
                .open-sans-light;

                .date-month {
                    display: block;
                    .font-size(@baseFontSize);
                }

                .date-day {
                    display: block;
                    .font-size(24px);
                }
            }

            a {
                display: block;
                position: relative;
                margin-bottom: @baseLine;
                .clearfix();
            }

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

                h3 {
                    text-decoration: underline;
                }
            }
        }

        .event-detail {
            padding: 0 @baseLine 0 80px;
            margin: 0;

            h3 {
                display: block;
                margin: 0;
                padding: 0;
                color: #565a5c;
                .font-size(22px);
                line-height: 1.1;
            }

            p {
                color: #b1b1ad;
            }

        }
    }
}

.html-rtl {
    #upcoming-events {
        .featured-event {
            text-align: right;
            margin-left: @baseLine * 2;
            margin-right: 0;

            .date-large {
                float: right;
                margin: 0 0 0 @baseLine;
            }

            .event-detail {
                float: right;
            }

            .event-info.location {
                p {
                    margin-left: 0;
                    margin-right: 29px;
                }
            }
        }

        .events-list {
            text-align: right;

            .event-detail {
                padding: 0 80px 0 20px;
            }

            li time {
                float: right;
            }
        }

        .event-info.location {

            &:before {
                left: auto;
                right: 0;
            }

            p {
                float: right;
                margin-left: 0;
                margin-right: 20px;
            }
        }
    }

}

#secondary-links {
    background: #fff;

    ul {
        position: relative;
        list-style-type: none;
        width: 100%;
        margin: 0 auto;
        padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        .clearfix();

        li {
            float: left;
            margin: 0;
            padding: 0;
            width: 33.3%;
        }
    }

    h2 {
        position: relative;
        .font-size(24px);
        color: @textColorSecondary;
        padding-top: 100px;

        &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 84px;
            background: url(/media/img/home/voices/secondary-icon-sprite.png) no-repeat center top;
        }
    }

    a {
        display: block;
        padding: 0 50px;
        text-align: center;

        &.add-ons h2:before {
            background-position: center 0;
        }
        &.careers h2:before {
            background-position: center -86px;
        }
        &.help h2:before {
            background-position: center -172px;
        }

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

            h2 {
                text-decoration: underline;
            }
        }
    }

    p {
        color: @textColorSecondary;
        .font-size(@largeFontSize);
        margin-top: @baseLine;
    }
}

#newsletter-signup {
    background: #f6f4ec;
}

#mozorg-newsletter-form,
#newsletter-form {
    width: @widthSquareGrid_8 / 2;
    margin: 0 auto;
    padding: 0 0 (@baseLine * 2) 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;

    h3 {
        display: block;
        float: none;
        width: auto;
        padding: (@baseLine * 2) 0;
        color: @textColorSecondary;
        .font-size(46px);
        text-align: center;
        margin: 0;
        letter-spacing: -1px;
    }

    .form-contents {
        width: 50%;
        margin: 0;

        input[type="email"] {
            height: 32px;
            padding: 5px 10px;
            background: #fbf9f4;
            border: 2px solid #e1ddd3;
            border-radius: 7px;
            -webkit-appearance: none;
        }

        ::-webkit-input-placeholder {
           color: #e1ddd3;
           .open-sans;
           font-weight: bold;
           opacity: 1;
        }

        ::-moz-placeholder {
           color: #e1ddd3;
           .open-sans;
           font-weight: bold;
           opacity: 1;
        }

        :-ms-input-placeholder {
           color: #e1ddd3;
           .open-sans;
           font-weight: bold;
           opacity: 1;
        }
    }

    .form-submit {
        width: 50%;
        margin: 0;

        input[type="submit"] {
            width: 100%;
            min-height: 45px;
            background: #0095dd;
            .font-size(18px);
            font-weight: normal;
            text-shadow: none;
            text-transform: uppercase;
            box-shadow: none;
            border-radius: 7px;
            -webkit-appearance: none;

            &:hover,
            &:focus {
                background: lighten(#0095dd, 5%);
            }
        }
    }

    .privacy-check-label .title {
        padding: 0 20px 0 25px;
    }
}

.newsletter-form.thank {
    width: @widthSquareGrid_8 / 2;
    margin: 0 auto;
    padding: @baseLine 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

#colophon {
    margin: 0;
    background: #565a5c;
    color: @textColorLight;

    a:link,
    a:visited {
        color: #43c2ff;
    }

    a:hover,
    a:active,
    a:focus {
        color: lighten(#43c2ff, 10%);
    }

    .logo a {
        .at2x('/media/img/sandstone/footer-mozilla-white.png', 93px, 24px);
    }
}

#scroll-prompt {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #fff;
    .font-size(18px);
    background: #56555b;
    border: none;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;

    &:before {
        font-family: 'FA-Icons-Home';
        content: '\f055\00a0'; // plus-circle space
    }
}

/****************************************************************************/
// @Widescreen styles
// Reduce header height at smaller viewport sizes
@media only screen and (min-width: (@widthSquareGrid_8)) {

    .module .container,
    .main-header .container, {
        width: @widthSquareGrid_8 - (@gridGutterWidth * 2);
    }

    .main-header h1 {
        margin: 50px auto;
    }

    #firefox-download-section {
        header {
            h3 {
                width: 380px;
            }

            h4 {
                width: 450px;
                margin: @baseLine 0 @baseLine (@baseLine * 5);
                .font-size(34px);
            }
        }
    }

    .html-rtl #firefox-download-section {
        header h4 {
            margin: @baseLine (@baseLine * 5) @baseLine 0;
        }
    }

    #upcoming-events {
        .featured-event {
            float: left;
            width: 760px;
            margin-right: @baseLine * 2;

            .event-detail {
                width: 560px;
            }
        }

        .events-list {
            float: left;
            width: 460px;
            margin: 0;
        }
    }

    .html-rtl {
        #upcoming-events {
            .featured-event {
                float: right;
            }
            .events-list {
                float: right;
            }
        }
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        h3 {
            width: 100%;
            padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
        }
    }
}

/****************************************************************************/
// @Smallscreen styles
// One extra column of faces either side of the main content grid
@media only screen and (min-width: @widthSquareGrid_7) and (max-width: (@widthSquareGrid_8 - 1)) {

    .module .container,
    .main-header .container, {
        width: @widthSquareGrid_7 - (@gridGutterWidth * 2);
    }

    #firefox-download-section {
        header h4 {
            width: 370px;
            margin-left: @gridGutterWidth * 4;
        }
    }

    .html-rtl #firefox-download-section {
        header h4 {
            margin-left: 0;
            margin-right: @gridGutterWidth * 4;
        }
    }

    #upcoming-events {
        .featured-event {
            float: left;
            width: 670px;

            .event-detail {
                width: 450px;
            }
        }

        .events-list {
            float: left;
            width: 390px;
            margin: 0;
        }
    }

    .html-rtl {
        #upcoming-events {
            .featured-event {
                float: right;
            }
            .events-list {
                float: right;
            }
        }
    }
}

@media only screen and (min-width: @widthSquareGrid_5) and (max-width: (@widthSquareGrid_6 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: auto;
            margin: 0 @baseLine;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_5 - (@gridGutterWidth * 2);
    }

    #firefox-download-section {
        header {
            h3 {
                width: 300px;
            }

            h4 {
                display: none;
            }
        }

        .download-button-simple {
            margin: @baseLine 0;
        }
    }

    #upcoming-events {
        .featured-event {
            width: 100%;
            margin-right: 0;

            .event-detail {
                width: 580px;
            }
        }

        .events-list {
            width: 70%;
            margin-top: @baseLine * 2;
        }
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        h3 {
            float: none;
            width: auto;
            padding: (@baseLine * 2) 0;
        }

        .form-contents,
        .form-submit {
            width: 50%;
            margin: 0;
        }
    }
}

@media only screen and (max-width: (@widthSquareGrid_5 - 1)) {

    #firefox-download-section,
    .html-rtl #firefox-download-section {
        header {
            h3 {
                width: 300px;
            }

            h4 {
                display: none;
            }
        }

        .download-button-simple {
            margin: @baseLine 0;
        }
    }

    #secondary-links,
    #community {
        ul {
            width: 100%;
            padding: (@baseLine * 3) 0 (@baseLine * 2) 0;
            li {
                float: none;
                width: 100%;
                margin: 0 auto (@baseLine * 2) auto;
            }
        }

        .contribute {
            width: auto;
        }
    }

    #secondary-links a {
        padding: 0;
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        width: 100%;

        .form-contents {
            width: 100%;

            input[type="email"] {
                .border-box();
                height: 44px;
                width: 100%;
            }
        }

        .form-submit {
            width: 100%;

            input[type="submit"] {
                width: 100%;
            }
        }
    }

    .newsletter-form.thank {
        width: 100%;
    }
}

@media only screen and (min-width: @widthSquareGrid_4) and (max-width: (@widthSquareGrid_5 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: auto;
            margin: 0 @baseLine;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_4 - (@gridGutterWidth * 2);
    }

    #upcoming-events {

        .container h2 {
            margin-bottom: @baseLine * 2;
        }

        .featured-event {
            width: 100%;
            margin-right: 0;

            .event-detail {
                width: 420px;
            }
        }

        .events-list {
            width: 100%;
            margin-top: @baseLine * 2;
        }
    }
}

@media only screen and (min-width: @widthSquareGrid_3) and (max-width: (@widthSquareGrid_4 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: @widthSquareGrid_3 - (@gridGutterWidth * 2);
            margin: 0 auto;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_3 - (@gridGutterWidth * 2);
    }

    .main-header h1 img {
        width: 260px;
        height: auto;
    }

    #firefox-download-section,
    .html-rtl #firefox-download-section  {
        text-align: center;

        header {
            float: none;
            padding: 0;

            h3 {
                float: none;
                display: inline-block;
                width: 300px;
            }
        }

        .download-button {
            float: none;
            margin: @baseLine auto;
        }
    }

    #community .contribute-btn {
        width: 320px;
        padding: @baseLine;
    }

    #upcoming-events {

        .container h2 {
            margin-bottom: @baseLine * 2;
        }

        .featured-event {
            width: 100%;
            margin-right: 0;

            .date-large {
                display: none;
            }

            .event-detail {
                width: 100%;
                float: none;
                margin-top: @baseLine;
            }
        }

        .events-list {
            width: 100%;
            margin-top: @baseLine * 2;
        }
    }
}

@media only screen and (max-width: (@widthSquareGrid_3 - 1)) {

    #masthead {
        padding: 0;

        .container {
            width: @widthSquareGrid_2 - (@gridGutterWidth * 2);
            margin: 0 auto;
        }
    }

    .module .container,
    .main-header .container,
    #colophon .row {
        width: @widthSquareGrid_2 - (@gridGutterWidth * 2);
    }

    .main-header h1 img {
        width: 260px;
        height: 68px;
    }

    #firefox-download-section,
    .html-rtl #firefox-download-section {
        text-align: center;

        header {
            float: none;
            padding: 0;

            h3 {
                float: none;
                display: inline-block;
                width: 280px;
            }
        }

        .download-button {
            float: none;
            margin: @baseLine auto;
        }
    }

    #community .contribute-btn {
        width: 200px;
        padding: @baseLine (@baseLine / 2);
    }

    #upcoming-events {

        .container h2 {
            .font-size(42px);
            margin-bottom: @baseLine * 2;
        }

        .featured-event {
            width: 100%;
            margin-right: 0;

            .date-large {
                display: none;
            }

            .event-detail {
                width: 100%;
                float: none;
                margin-top: @baseLine;

                h4 {
                    .font-size(24px);
                }

                time,
                .event-info p {
                    .font-size(18px);
                }
            }
        }

        .events-list {
            width: 100%;
            margin-top: @baseLine * 2;
        }

        .all-events {
            width: auto;
        }
    }

    #mozorg-newsletter-form,
    #newsletter-form {
        h3 {
            .font-size(42px);
        }
    }
}

/****************************************************************************/
// @Wide @mobile layout: 480px
@media only screen and (max-width: @breakTablet) {
    #masthead nav li {
        a:link,
        a:visited {
            color: #484848;
        }
    }
}


Fix aside nav fixed bug

Fix aside nav fixed bug

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/shine-js/shine-react.git/'


fixed event line color in xs and smwq

fixed event line color in xs and smwq

fatal: unable to access 'https://github.com/DellGDC/dell-ui-components.git/': The requested URL returned error: 403


Update checkbox/radio inline style

Update checkbox/radio inline style

fatal: unable to access 'https://github.com/logindave41/sonatra-theme-gluon.git/': The requested URL returned error: 403


just  a little css modif

just  a little css modif

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/siegfried1e/perso.git/'


fix(styles): LGCY-16 remove break all from notify

Closes LGCY-16

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/NCI-GDC/portal-ui-legacy.git/'


[dark theme] added colors

[dark theme] added colors

// Brand colors
// -------------------------

@brand-primary:         #428bca;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;

// Background
// -------------------------
@background-normal: #fff;
@background-toolbar: #f1f1f1;
@background-toolbar-additional: #f1f1f1;
@background-primary-dialog-button: #7d858c;
@background-tab-underline: #444;
@background-scrim: fade(black, 20%);
@background-loader: fade(black, 65%);

// Highlight
// -------------------------
@highlight-button-hover: #d8dadc;
@highlight-button-pressed: #7d858c;
@highlight-button-pressed-hover: #7d858c;
@highlight-primary-dialog-button-hover: #7d858c;
@highlight-header-button-hover: fade(white, 20%);
@highlight-toolbar-tab-underline: #444;
@highlight-text-select: #3494fb;

// Border
// -------------------------
@border-toolbar: #cbcbcb;
@border-divider: #cbcbcb;
@border-regular-control: #cfcfcf;
@border-toolbar-button-hover: #d8dadc;
@border-preview-select: #848484;
@border-control-focus: #848484;
@border-color-shading: fade(black, 20%);
@border-error: #d9534f;

// Text
// -------------------------
@text-normal: #444;
@text-secondary: #a5a5a5;
@text-tertiary: #a5a5a5;
@text-inverse: #fff;
@text-toolbar-header: #fff;
@text-contrast-background: #fff;

// Icon
// -------------------------
@icon-normal: #444;
@icon-inverse: #fff;
@icon-toolbar-header: #fff;
@icon-contrast-popover: #fff;

// Toolbar header
// -------------------------
@toolbar-header-document: #446995;
@toolbar-header-spreadsheet: #40865c;
@toolbar-header-presentation: #aa5252;

// Canvas
// -------------------------
@canvas-background: #e2e2e2;
@canvas-content-background: #fff;
@canvas-ruler-background: #fff;
@canvas-ruler-margins-background: #cfcfcf;
@canvas-ruler-marks-border: #585b5e;
@canvas-high-contrast: #000;
@canvas-cell-border: fade(black, 10%);
@canvas-cell-title-border: fade(black, 10%);
@canvas-cell-title-hover: #dfdfdf;
@canvas-cell-title-selected: #cfcfcf;
@canvas-dark-cell-title: #444;
@canvas-dark-cell-title-hover: #666 ;
@canvas-dark-cell-title-selected: #111;
@canvas-scroll-controls: #f1f1f1;
@canvas-scroll-controls-hover: #cfcfcf;

error: pathspec 'apps/common/main/resources/less/colors-table.less' did not match any file(s) known to git


applications styles in their own folder

applications styles in their own folder

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/jpraetorius/wp_theme_raw.git/'


Update

Update

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/Didichaoren/Didichaoren.github.io.git/'


Responsive Mixin [ADD]

Responsive Mixin [ADD]

/**
 * Media query mixin
 * --------------------------------------------------------------------------- */

.lui_screens_lower_than(@size; @rules) {
    @media only screen and (max-width: @size) {
        @rules();
    }
}
.lui_screens_larger_than(@size; @rules) {
    @media only screen and (min-width: @size) {
        @rules();
    }
}

error: pathspec 'less2/src/utilities/_responsive.less' did not match any file(s) known to git


feat(Textarea): Standardize with normal text input font-size

CE-750  Update Seekasia Styleguide Textarea font size to 16px (#297)

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/'


limit video size on large screens

limit video size on large screens

@import "variables.less";

.view-details-associations .section,  .view-details-informations, #document-informations, .name-icon,
.view-details-associations .associated-documents {
  .flex();
  flex-flow: wrap row;
}

.view-details-title {
  margin-top: 60px;
  margin-bottom: 5px;

  @media @phone {
    margin-top: 55px;
    margin-bottom: 0;
  }
  @media @tablet {
    margin-top: 50px;
  }
  &.image {
    margin-bottom: 30px;
  }
  .outing-date {
    font-size: 2.2em;
    color: darkgray;
    text-align: center;
    @media @phone {
      font-size: 1.5em;
    }
  }
  >h1 {
    .flex();
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    transition: 0.4s;
    margin-top: -5px;
    font-size: 2.5em;

    @media @phone {
      font-size: 2em;
      margin: 10px 0 5px 10px;
    }
    @media @tablet {
      font-size: 2em;
      line-height: 35px;
    }

    &.routes {
      .flex();
      align-items: center;
      justify-content: center;
      width: 99%;
      .title {
        max-width: 70%;
        margin-right: 10px;
        @media @phone {
          max-width: none;
        }
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
        }
      }
    }

    .waypoint-type {
      margin-right: 10px;
      font-size: 1.3em;
      color: @C2C-orange;
    }
    .badge {
      font-size: 0.5em;
      margin-right: 10px;
      margin-left: 10px;
      padding-bottom: 6px;
      margin-top: 5px;
      cursor: pointer;

      a {
        color: white;
        cursor: pointer;
        text-decoration: none;
      }

      @media @phone {
        display: none;
      }

      .glyphicon {
        color: white;
      }

      &.article {
        background-color: @darkcyan;
      }
      &.book {
        background-color: @plum;
      }
      &.image {
        background-color: @darkolivegreen;
      }
      &.outing {
        background-color: @indigo;
      }
      &.route {
        background-color: @brand-info;
      }
      &.xreport {
        background-color: @tomato;
      }
      &.waypoint {
        background-color: @bright-green;
      }
    }
  }
  .icons-header {
    margin-right: 30px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    font-size: 4em;
    .route-activity, .waypoint-type {
      color: @C2C-orange;
    }
    @media @big {
      font-size: 4.5em;
    }
    @media @phone {
      font-size: 2em;
      margin-right: 5px;
    }
  }
}

.view-details-not-authorised {
  height: 100px;
  padding-top: 15px;
  margin-top: 10px;
  width: 100% !important;
}

.view-details-section {
  display: inline-block;
  margin-left: 3%;
  width: 91%;
  padding-bottom: 200px;
  font-size: .9em;

  @media @phone {
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images, &.articles, &.books {
    margin-top: 0;
  }

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    height: 170px;
    @media @phone {
      width: 88% !important;
      margin-right: 6%;
    }
    .photos {
      img {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 5px;
        margin-right: 5px;
      }
      app-slide-info {
        display: none;
      }
    }
    .slick-prev, .slick-next {
      width: 40px;
      height: 100%;
      &:before {
        font-size: 30px;
        color: @C2C-orange;
      }
    }
    .slick-prev {
      left: -40px;
      @media @phone {
        left: -35px;
      }
    }
    .slick-next {
      right: -40px;
      @media @phone {
        right: -35px;
      }
    }
  }
  .view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos,
  .view-details-comments, .view-details-not-authorised {
    padding-left: 0;
    padding-right: 0;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    border: 1px solid #eee;

    @media @phone {
      border-width: 2px;
    }

    @media @big {
      width: 71.5%;
      margin-left: 2.5%;
    }

    h2 {
      text-align: left;
    }
    .heading {
      margin-top: 0;
    }
    .lead {
      width: 100%;
      word-break: break-word;
      float: left;
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 1.2em;

      @media (max-width: @screen-xs-max) {
        padding: 10px;
      }
    }
    .conditions-levels {
      font-size: .9em;
      th {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }

      @media @phone {
        thead {
          display: none;
        }
        tbody,
        tr,
        th,
        td {
          display: block;
          padding: 0;
          text-align: left;
          white-space: normal;
        }
        tr {
          overflow: hidden;
          margin-bottom: 30px;
          background-color: inherit;
        }
        td {
          border-top: 0;
          padding-left: 10px;
        }
        td[data-title]:before {
          content: attr(data-title);
          display: block;
          color: #8D8D8D;
          padding: 3px 10px;
          margin-left: -10px;
          font-variant: small-caps;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
        }
      }
    }
  }

  .view-details-associations {
    background: white;
    width: 100%;
    border: 1px solid #eee;

    @media @big {
      section article {
        min-width:  48%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        flex-grow: 1;
      }
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }

    .associated-documents {
      margin-bottom: 5px;
      padding-left: 10px;
    }
  }

  .view-details-informations {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;

    @media (max-width: 1400px) {
      width: 100%;
    }
    @media @big {
      width: 26%;
    }
    .value, .value-title {
      font-size: 1em;
    }
    .rating-block {
      float: left;
      margin-right: 6px;
      .flex();
      label {
        margin: 0;
        color: @bright-green;
      }
    }
    .route-activity {
      font-size: 2.5em;
      color: @bright-green;
    }

    #document-informations {
      overflow: hidden;
      width: 100%;
      @media @phone {
        display: block;
        border: 2px solid @C2C-orange;
      }
    }
    >.heading {
      margin-top:0;

      .glyphicon {
        font-size: .8em;
      }
    }
    .glyphicon-sort-by-attributes{
      transform: rotateZ(180deg);
    }
    .glyphicon {
      font-size: 2.5em;
      @media @phone {
        font-size: 1em;
      }
    }
    .glyphicon-duplicate {
      color: @bright-green;
      @media @desktop {
        margin-left: 10px;
      }
      @media @phone {
        font-size: 2em;
      }
      /*red strike through*/
      &:after {
        content: "";
        border-top: 3px solid #ea3636;
        position: absolute;
        left: -25%;
        top: 50%;
        width: 150%;
      }
    }
    a.creative-commons {
      font-size: 1em;
      &:hover, &:focus {
        text-decoration: none;
      }
    }

    app-track-download {
      white-space: nowrap;
    }

    .icon-glacier {
      font-size: 3.3em;
      color: @C2C-orange;
    }

    .detail-text {
      width: 80%;
      margin: auto;
      text-align: left;
      line-height: 17px;
      font-size: 1.1em;

      @media @phone {
        width: 200%;
        font-size: 1em;
      }
      @media @tablet {
        font-size: 1em;
      }
      ul {
        padding-left: 15px;
        width: 90%;
        li {
          margin-bottom: 5px;
        }
      }
      >p, >article {
        margin-top: 3px;
        margin-bottom: 3px;
      }
      &.ratings .value {
        cursor: pointer;
        transition: .2s;
        &:hover {
          color: gold;
          transition: .2s;
        }
      }
    }

    .name-icon-value {
      .flex();
      padding: 0;
      flex-grow: 1;
      min-height: 80px;
      background-color: white;
      border-bottom: 1px solid #dfd6c5;
      transition: 0.3s;

      @media @big {
        min-width: 100%;
        min-height: 0;
        height: auto;
      }

      @media (max-width : @screen-sm-max) {
        min-width:  50%;
        padding: 0;
      }
      @media @phone {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        &:not(:first-of-type) {
          border-top: 1px solid #dfd6c5;
        }
      }
      .activities {
        font-size: 1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

      &.location {
        display: none;
        @media @phone {
          .flex();
        }
        .areas {
          @media (min-width: @phone-max) {
            display: none;
          }
        }
      }
      &.maps {
        order: 10;
      }
    }

    .orientation-svg {
      height: 110px;
      width: auto;
      margin-left: 10%;
    }

    .accordion {
      padding: 5px;
      @media (min-width: @phone-max) {
        display: block !important;
      }
      @media @phone {
        padding-top: 1%;
      }
      @media @tablet {
        font-size: 14px;
      }
      ul {
        margin: 0;
      }
    }
    h4 {
      display: none;
      width: 100%;
      text-align: center;

      span {
        margin-right: 5px;
        transition: 0.3s;
      }
      @media @phone {
        display: block;
        font-size: 1em;
        margin-left: 10px;
        text-align: left;
      }
    }

    .name-icon {
      width: 67px;
      text-align: center;
      transition: 0.3s;
      justify-content: center;
      align-items: center;
      align-content: center;
      margin: 5px 3px 5px 10px;

      @media @phone {
        display: none;
      }
      .icon-user {
        font-size: 3em;
      }
      p {
        font-weight: bold;
        font-variant: small-caps;
      }
    }
    .coordinates-table {
      width: 180px;
      td {
        text-align: center;
        vertical-align: middle;
        padding: 1%;
      }
    }
  }
  .view-details-comments {
    @media @big {
      width: 100%;
    }

    #discourse-comments {
      text-align: center;
      padding: 20px;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        padding: 5px;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
  .area-associations {
    padding: 10px 10px 20px 10px;
    [class^="icon-"] {
      font-size: 2em;
      color: @C2C-orange
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 15px;
  display: block;
  background-color: rgba(164, 164, 166, 0.24);

  @media @tablet {
    height: 200px !important;
  }
  @media @phone {
    height: 150px !important;
    margin-bottom: 0;
  }
  .map {
    height: 100%;
  }
}

.view-details-other {
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.document-summary{
  color: #626262;
  border: 1px solid #D8D8D8;
  border-left: 0.5em solid @bright-green;
  padding: 5px 15px 5px 15px;
  background-color: rgba(168, 168, 168, 0.07);
  margin: 10px 0 10px 0;
  .shadow(0, 0, 2px, rgba(0,0,0,0.2));
  font-style: italic;

  label {
    font-style: normal;
  }
}

app-add-association {

  app-simple-search {
    margin-bottom: 20px;
    width: 346px;

    @media @phone {
      width: 100%;
    }
    @media @tablet {
      width: 100%;
    }
    .search {
      width: 100%;

    }
    .glyphicon-search {
      margin-top: 4px;
      font-size: 1.5em;
    }
    .tt-suggestion {
      border-radius: 0;
      padding: 5px !important;
    }
    p {
      margin: 0 !important;
    }
  }

}

.view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos, .view-details-informations {
  will-change: height;
  ul li {
    list-style: none;
    &:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -17px;
      color: @bright-green;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin: 0 calc(~"50% - 40px") 100px calc(~"50% - 40px");
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 3;
  margin-bottom: -18%;
  top: 45px;
  background: #FFFB80; /*yellow*/
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  .shadow(2px, 2px, 10px, rgba(33,33,33,0.4) );

  @media @tablet {
    right: 30px;
    font-size: 1em;
    max-width: 200px;
  }
  @media @phone {
    display: none !important;
  }
  @media @big {
    font-size: 1.1em;
    right: 50px;
  }
  @media @desktop {
    right: 50px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: center;
    li:hover {
      cursor: pointer;
    }
    a {
      color: #A55944;
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2 {
    margin-top: 10px;
  }

  [class^='embedded_'] {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 15px;
    background-color: rgba(234, 234, 234, 0.37);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    cursor: pointer;

    @media @phone {
      margin: 5px auto !important;
      max-width: 90%;
      float: none !important;

      figcaption {
        text-align: center;
        margin-left: 0;
        margin-top: 5px;
      }
      img {
        margin: auto !important;
        max-width: 100%;
        height: auto;
      }
    }
    /*Big Image*/
    &.BI  {
      display: table-cell;
      max-width: none;
      margin-left: 10px;

      figcaption, img {
        max-width: 100% !important;
      }
    }
    app-slide-info {
      display: none;
    }
    figcaption {
      margin: 5px 10px -5px 10px;
      color: dimgray;
      font-size: 14px;
    }
    img {
      margin: auto auto 0 auto;
    }
  }

  .embedded_center {
    margin: 10px auto;
    display: table;
  }
  .embedded_left {
    float: left;
    clear: left;
    margin: 5px 25px 10px 0;
  }
  .embedded_right {
    float: right;
    clear: right;
    margin: 5px 0 10px 20px;
  }
  .embedded_inline {
    display: table;
    margin: 5px 20px 10px 10px;
  }
}

.description {
  .important_message, .warning_message {
    clear: both;
    display: inline-block;
    border-radius: 8px;
    margin: 0 0 5px 0;
    min-height: 25px;
    text-align: justify;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 10px;

    span.glyphicon {
      margin-right: 10px;
    }
  }
  .important_message {
    border: 2px solid #f93;
  }
  .warning_message {
    background-color: #fcc9c8;

    span.glyphicon {
      color: white;
    }
  }
  .embed-responsive-4by3.video {
    margin-top: 5px;
    margin-bottom: 5px;

    @media (min-width: @phone-max) {
      width: 560px;
      padding-bottom: 420px;
    }
  }
}

.show-phone.elevation {
  display: none;
  @media @phone {
    display: block;
  }
}

@import "variables.less";

.view-details-associations .section,  .view-details-informations, #document-informations, .name-icon,
.view-details-associations .associated-documents {
  .flex();
  flex-flow: wrap row;
}

.view-details-title {
  margin-top: 60px;
  margin-bottom: 5px;

  @media @phone {
    margin-top: 55px;
    margin-bottom: 0;
  }
  @media @tablet {
    margin-top: 50px;
  }
  &.image {
    margin-bottom: 30px;
  }
  .outing-date {
    font-size: 2.2em;
    color: darkgray;
    text-align: center;
    @media @phone {
      font-size: 1.5em;
    }
  }
  >h1 {
    .flex();
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    transition: 0.4s;
    margin-top: -5px;
    font-size: 2.5em;

    @media @phone {
      font-size: 2em;
      margin: 10px 0 5px 10px;
    }
    @media @tablet {
      font-size: 2em;
      line-height: 35px;
    }

    &.routes {
      .flex();
      align-items: center;
      justify-content: center;
      width: 99%;
      .title {
        max-width: 70%;
        margin-right: 10px;
        @media @phone {
          max-width: none;
        }
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
        }
      }
    }

    .waypoint-type {
      margin-right: 10px;
      font-size: 1.3em;
      color: @C2C-orange;
    }
    .badge {
      font-size: 0.5em;
      margin-right: 10px;
      margin-left: 10px;
      padding-bottom: 6px;
      margin-top: 5px;
      cursor: pointer;

      a {
        color: white;
        cursor: pointer;
        text-decoration: none;
      }

      @media @phone {
        display: none;
      }

      .glyphicon {
        color: white;
      }

      &.article {
        background-color: @darkcyan;
      }
      &.book {
        background-color: @plum;
      }
      &.image {
        background-color: @darkolivegreen;
      }
      &.outing {
        background-color: @indigo;
      }
      &.route {
        background-color: @brand-info;
      }
      &.xreport {
        background-color: @tomato;
      }
      &.waypoint {
        background-color: @bright-green;
      }
    }
  }
  .icons-header {
    margin-right: 30px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    font-size: 4em;
    .route-activity, .waypoint-type {
      color: @C2C-orange;
    }
    @media @big {
      font-size: 4.5em;
    }
    @media @phone {
      font-size: 2em;
      margin-right: 5px;
    }
  }
}

.view-details-not-authorised {
  height: 100px;
  padding-top: 15px;
  margin-top: 10px;
  width: 100% !important;
}

.view-details-section {
  display: inline-block;
  margin-left: 3%;
  width: 91%;
  padding-bottom: 200px;
  font-size: .9em;

  @media @phone {
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images, &.articles, &.books {
    margin-top: 0;
  }

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    height: 170px;
    @media @phone {
      width: 88% !important;
      margin-right: 6%;
    }
    .photos {
      img {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 5px;
        margin-right: 5px;
      }
      app-slide-info {
        display: none;
      }
    }
    .slick-prev, .slick-next {
      width: 40px;
      height: 100%;
      &:before {
        font-size: 30px;
        color: @C2C-orange;
      }
    }
    .slick-prev {
      left: -40px;
      @media @phone {
        left: -35px;
      }
    }
    .slick-next {
      right: -40px;
      @media @phone {
        right: -35px;
      }
    }
  }
  .view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos,
  .view-details-comments, .view-details-not-authorised {
    padding-left: 0;
    padding-right: 0;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    border: 1px solid #eee;

    @media @phone {
      border-width: 2px;
    }

    @media @big {
      width: 71.5%;
      margin-left: 2.5%;
    }

    h2 {
      text-align: left;
    }
    .heading {
      margin-top: 0;
    }
    .lead {
      width: 100%;
      word-break: break-word;
      float: left;
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 1.2em;

      @media (max-width: @screen-xs-max) {
        padding: 10px;
      }
    }
    .conditions-levels {
      font-size: .9em;
      th {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }

      @media @phone {
        thead {
          display: none;
        }
        tbody,
        tr,
        th,
        td {
          display: block;
          padding: 0;
          text-align: left;
          white-space: normal;
        }
        tr {
          overflow: hidden;
          margin-bottom: 30px;
          background-color: inherit;
        }
        td {
          border-top: 0;
          padding-left: 10px;
        }
        td[data-title]:before {
          content: attr(data-title);
          display: block;
          color: #8D8D8D;
          padding: 3px 10px;
          margin-left: -10px;
          font-variant: small-caps;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
        }
      }
    }
  }

  .view-details-associations {
    background: white;
    width: 100%;
    border: 1px solid #eee;

    @media @big {
      section article {
        min-width:  48%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        flex-grow: 1;
      }
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }

    .associated-documents {
      margin-bottom: 5px;
      padding-left: 10px;
    }
  }

  .view-details-informations {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;

    @media (max-width: 1400px) {
      width: 100%;
    }
    @media @big {
      width: 26%;
    }
    .value, .value-title {
      font-size: 1em;
    }
    .rating-block {
      float: left;
      margin-right: 6px;
      .flex();
      label {
        margin: 0;
        color: @bright-green;
      }
    }
    .route-activity {
      font-size: 2.5em;
      color: @bright-green;
    }

    #document-informations {
      overflow: hidden;
      width: 100%;
      @media @phone {
        display: block;
        border: 2px solid @C2C-orange;
      }
    }
    >.heading {
      margin-top:0;

      .glyphicon {
        font-size: .8em;
      }
    }
    .glyphicon-sort-by-attributes{
      transform: rotateZ(180deg);
    }
    .glyphicon {
      font-size: 2.5em;
      @media @phone {
        font-size: 1em;
      }
    }
    .glyphicon-duplicate {
      color: @bright-green;
      @media @desktop {
        margin-left: 10px;
      }
      @media @phone {
        font-size: 2em;
      }
      /*red strike through*/
      &:after {
        content: "";
        border-top: 3px solid #ea3636;
        position: absolute;
        left: -25%;
        top: 50%;
        width: 150%;
      }
    }
    a.creative-commons {
      font-size: 1em;
      &:hover, &:focus {
        text-decoration: none;
      }
    }

    app-track-download {
      white-space: nowrap;
    }

    .icon-glacier {
      font-size: 3.3em;
      color: @C2C-orange;
    }

    .detail-text {
      width: 80%;
      margin: auto;
      text-align: left;
      line-height: 17px;
      font-size: 1.1em;

      @media @phone {
        width: 200%;
        font-size: 1em;
      }
      @media @tablet {
        font-size: 1em;
      }
      ul {
        padding-left: 15px;
        width: 90%;
        li {
          margin-bottom: 5px;
        }
      }
      >p, >article {
        margin-top: 3px;
        margin-bottom: 3px;
      }
      &.ratings .value {
        cursor: pointer;
        transition: .2s;
        &:hover {
          color: gold;
          transition: .2s;
        }
      }
    }

    .name-icon-value {
      .flex();
      padding: 0;
      flex-grow: 1;
      min-height: 80px;
      background-color: white;
      border-bottom: 1px solid #dfd6c5;
      transition: 0.3s;

      @media @big {
        min-width: 100%;
        min-height: 0;
        height: auto;
      }

      @media (max-width : @screen-sm-max) {
        min-width:  50%;
        padding: 0;
      }
      @media @phone {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        &:not(:first-of-type) {
          border-top: 1px solid #dfd6c5;
        }
      }
      .activities {
        font-size: 1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

      &.location {
        display: none;
        @media @phone {
          .flex();
        }
        .areas {
          @media (min-width: @phone-max) {
            display: none;
          }
        }
      }
      &.maps {
        order: 10;
      }
    }

    .orientation-svg {
      height: 110px;
      width: auto;
      margin-left: 10%;
    }

    .accordion {
      padding: 5px;
      @media (min-width: @phone-max) {
        display: block !important;
      }
      @media @phone {
        padding-top: 1%;
      }
      @media @tablet {
        font-size: 14px;
      }
      ul {
        margin: 0;
      }
    }
    h4 {
      display: none;
      width: 100%;
      text-align: center;

      span {
        margin-right: 5px;
        transition: 0.3s;
      }
      @media @phone {
        display: block;
        font-size: 1em;
        margin-left: 10px;
        text-align: left;
      }
    }

    .name-icon {
      width: 67px;
      text-align: center;
      transition: 0.3s;
      justify-content: center;
      align-items: center;
      align-content: center;
      margin: 5px 3px 5px 10px;

      @media @phone {
        display: none;
      }
      .icon-user {
        font-size: 3em;
      }
      p {
        font-weight: bold;
        font-variant: small-caps;
      }
    }
    .coordinates-table {
      width: 180px;
      td {
        text-align: center;
        vertical-align: middle;
        padding: 1%;
      }
    }
  }
  .view-details-comments {
    @media @big {
      width: 100%;
    }

    #discourse-comments {
      text-align: center;
      padding: 20px;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        padding: 5px;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
  .area-associations {
    padding: 10px 10px 20px 10px;
    [class^="icon-"] {
      font-size: 2em;
      color: @C2C-orange
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 15px;
  display: block;
  background-color: rgba(164, 164, 166, 0.24);

  @media @tablet {
    height: 200px !important;
  }
  @media @phone {
    height: 150px !important;
    margin-bottom: 0;
  }
  .map {
    height: 100%;
  }
}

.view-details-other {
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.document-summary{
  color: #626262;
  border: 1px solid #D8D8D8;
  border-left: 0.5em solid @bright-green;
  padding: 5px 15px 5px 15px;
  background-color: rgba(168, 168, 168, 0.07);
  margin: 10px 0 10px 0;
  .shadow(0, 0, 2px, rgba(0,0,0,0.2));
  font-style: italic;

  label {
    font-style: normal;
  }
}

app-add-association {

  app-simple-search {
    margin-bottom: 20px;
    width: 346px;

    @media @phone {
      width: 100%;
    }
    @media @tablet {
      width: 100%;
    }
    .search {
      width: 100%;

    }
    .glyphicon-search {
      margin-top: 4px;
      font-size: 1.5em;
    }
    .tt-suggestion {
      border-radius: 0;
      padding: 5px !important;
    }
    p {
      margin: 0 !important;
    }
  }

}

.view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos, .view-details-informations {
  will-change: height;
  ul li {
    list-style: none;
    &:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -17px;
      color: @bright-green;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin: 0 calc(~"50% - 40px") 100px calc(~"50% - 40px");
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 3;
  margin-bottom: -18%;
  top: 45px;
  background: #FFFB80; /*yellow*/
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  .shadow(2px, 2px, 10px, rgba(33,33,33,0.4) );

  @media @tablet {
    right: 30px;
    font-size: 1em;
    max-width: 200px;
  }
  @media @phone {
    display: none !important;
  }
  @media @big {
    font-size: 1.1em;
    right: 50px;
  }
  @media @desktop {
    right: 50px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: center;
    li:hover {
      cursor: pointer;
    }
    a {
      color: #A55944;
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2 {
    margin-top: 10px;
  }

  [class^='embedded_'] {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 15px;
    background-color: rgba(234, 234, 234, 0.37);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    cursor: pointer;

    @media @phone {
      margin: 5px auto !important;
      max-width: 90%;
      float: none !important;

      figcaption {
        text-align: center;
        margin-left: 0;
        margin-top: 5px;
      }
      img {
        margin: auto !important;
        max-width: 100%;
        height: auto;
      }
    }
    /*Big Image*/
    &.BI  {
      display: table-cell;
      max-width: none;
      margin-left: 10px;

      figcaption, img {
        max-width: 100% !important;
      }
    }
    app-slide-info {
      display: none;
    }
    figcaption {
      margin: 5px 10px -5px 10px;
      color: dimgray;
      font-size: 14px;
    }
    img {
      margin: auto auto 0 auto;
    }
  }

  .embedded_center {
    margin: 10px auto;
    display: table;
  }
  .embedded_left {
    float: left;
    clear: left;
    margin: 5px 25px 10px 0;
  }
  .embedded_right {
    float: right;
    clear: right;
    margin: 5px 0 10px 20px;
  }
  .embedded_inline {
    display: table;
    margin: 5px 20px 10px 10px;
  }
}

.description {
  .important_message, .warning_message {
    clear: both;
    display: inline-block;
    border-radius: 8px;
    margin: 0 0 5px 0;
    min-height: 25px;
    text-align: justify;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 10px;

    span.glyphicon {
      margin-right: 10px;
    }
  }
  .important_message {
    border: 2px solid #f93;
  }
  .warning_message {
    background-color: #fcc9c8;

    span.glyphicon {
      color: white;
    }
  }
  .embed-responsive-4by3.video {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.show-phone.elevation {
  display: none;
  @media @phone {
    display: block;
  }
}


Vertical centered #saveAs selectbox in favorites.

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/Det-Kongelige-Bibliotek/rex.git/'


Fix scrolling bug on the horizontal gallery for ios devices

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


Delete rotated-flipped.less

Delete rotated-flipped.less

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/Rowan3103/youthfulrepo.git/'


add animation less

add animation less

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


Display block for Action links

Display block for Action links

fatal: unable to access 'https://github.com/StudyForFun/Framework7-Plus.git/': The requested URL returned error: 403


Playing with the site's colour variables.

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/QueensSailing/QueensSailing.github.io.git/'


Update and rename theme_material_design/static/src/less/options to theme_material_design/static/src/less/options/bg_color_05.less

body {
    background-color:  darken(@color-green-dark, 15%);
}

@text-color:        white;
@headings-color:    white;

.text-muted {
    color: @gray;
}

#wrapwrap {
    background-color: fade(black, 50%);
}

/* oe_structure */
.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before {
    color: white;
}

error: pathspec 'theme_material_design/static/src/less/options/bg_color_05.less' did not match any file(s) known to git


Fix up register form

Fix up register form


Create slick-theme.less

Create slick-theme.less

@charset "UTF-8";

// Default Variables

@slick-font-path: "./fonts/";
@slick-font-family: "slick";
@slick-loader-path: "./";
@slick-arrow-color: white;
@slick-dot-color: black;
@slick-dot-color-active: @slick-dot-color;
@slick-prev-character: "←";
@slick-next-character: "→";
@slick-dot-character: "•";
@slick-dot-size: 6px;
@slick-opacity-default: 0.75;
@slick-opacity-on-hover: 1;
@slick-opacity-not-active: 0.25;

/* Slider */
.slick-loading .slick-list{
    background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('@{slick-font-path}slick.eot');
    src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
}

/* Arrows */

.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: none;
    &:hover, &:focus {
        outline: none;
        background: transparent;
        color: transparent;
        &:before {
            opacity: @slick-opacity-on-hover;
        }
    }
    &.slick-disabled:before {
        opacity: @slick-opacity-not-active;
    }
}

.slick-prev:before, .slick-next:before {
    font-family: @slick-font-family;
    font-size: 20px;
    line-height: 1;
    color: @slick-arrow-color;
    opacity: @slick-opacity-default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
    &[dir="rtl"] {
        left: auto;
        right: -25px;
    }
    &:before {
        content: @slick-prev-character;
        &[dir="rtl"] {
            content: @slick-next-character;
        }
    }
}

.slick-next {
    right: -25px;
    &[dir="rtl"] {
        left: -25px;
        right: auto;
    }
    &:before {
        content: @slick-next-character;
        &[dir="rtl"] {
            content: @slick-prev-character;
        }
    }
}

/* Dots */

.slick-dotted .slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
    li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
        button {
            border: 0;
            background: transparent;
            display: block;
            height: 20px;
            width: 20px;
            outline: none;
            line-height: 0px;
            font-size: 0px;
            color: transparent;
            padding: 5px;
            cursor: pointer;
            &:hover, &:focus {
                outline: none;
                &:before {
                    opacity: @slick-opacity-on-hover;
                }
            }
            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: @slick-dot-character;
                width: 20px;
                height: 20px;
                font-family: @slick-font-family;
                font-size: @slick-dot-size;
                line-height: 20px;
                text-align: center;
                color: @slick-dot-color;
                opacity: @slick-opacity-not-active;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
        &.slick-active button:before {
            color: @slick-dot-color-active;
            opacity: @slick-opacity-default;
        }
    }
}

error: pathspec 'Day-8/slick/slick-theme.less' did not match any file(s) known to git


Humanwave color tuning

Humanwave color tuning

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/BitCare/bootstrap.git/'


Fix disconnected styling

Fix disconnected styling

#Disconnected {
  position: fixed;
  top: 2px;
  left: 50%;
  z-index: 2000;

  >div {
    position: relative;
    margin-left: -50%;
    margin-right: 50%;

    border: 1px solid #000;
    padding: 4px 8px;
    background-color: #f88;
  }
}

@media print {
  #Disconnected {
    display: none;
  }
}

error: pathspec 'app/ui/disconnected.less' did not match any file(s) known to git