Fix hint background color in chat

Fix hint background color in chat

@import (reference) './avatar.less';
@import (reference) "./colortheme-all.less";

.messenger_vars (
    @bg-color: @cp_messenger-bg,
) {
    @msg-color: @cryptpad_text_col;
    @msg-color-hover: contrast(@msg-color, lighten(@msg-color, 10%), darken(@msg-color, 10%));
    @msg-bg-color: @bg-color;
    @invert: @bg-color;
    @msg-bg-color-light: contrast(@invert, lighten(@bg-color, 5%), darken(@bg-color, 5%));
    @msg-bg-color-lighter: contrast(@invert, lighten(@bg-color, 10%), darken(@bg-color, 10%));
    @msg-bg-color-dark: fade(@cp_messenger-fg, 10%);
    @msg-bg-color-darker: contrast(@bg-color, lighten(@bg-color, 10%), darken(@bg-color, 10%));
};
.messenger_main(
    @bg-color: @cp_messenger-bg,
) {
    --LessLoader_require: LessLoader_currentFile();
    .messenger_vars(@bg-color);
    --msg-color: @msg-color;
    --msg-bg-color: @msg-bg-color;
    --msg-bg-color-light: @msg-bg-color-light;
    --msg-bg-color-lighter: @msg-bg-color-lighter;
    --msg-bg-color-dark: @msg-bg-color-dark;
    --msg-bg-color-darker: @msg-bg-color-darker;
};
& {
    @keyframes notif {
        0% {
            background: fade(@cp_messenger-notif, 10%);
        }
        50% {
            background: fade(@cp_messenger-notif, 30%);
        }
        100% {
            background: fade(@cp_messenger-notif, 10%);
        }
    }

    .messenger_vars();
    @button-border: 2px;
    @room-height: 48px;

    #cp-app-contacts-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
        color: @cp_messenger-fg;
        &.ready {
            background-size: cover;
            background-position: center;
        }
    }

    .cp-app-contacts-spinner {
        display: none;
    }

    .cp-app-contacts-initializing {
        .cp-app-contacts-spinner {
            color: @cp_messenger-fg;
            display: block;
        }
        .cp-app-contacts-info {
            display: none;
        }
        #cp-app-contacts-friendlist,
        #cp-app-contacts-messaging {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    #cp-app-contacts-friendlist {
        width: 200px;
        height: 100%;
        background-color: @msg-bg-color;
        background-color: var(--msg-bg-color);
        color: @msg-color;
        color: var(--msg-color);
        overflow-y: auto;
        display: flex;
        flex-flow: column;
        .cp-app-contacts-friend {
            background-color: @msg-bg-color-dark;
            background-color: var(--msg-bg-color-dark);
            padding: 5px;
            margin: 10px;
            margin-bottom: 0;
            cursor: pointer;
            position: relative;
            height: @room-height;
            .cp-app-contacts-right-col {
                margin-left: 5px;
                display: flex;
                flex-flow: column;
                flex: 1;
                min-width: 0;
                .cp-app-contacts-name {
                    white-space: nowrap;
                }
                .cp-app-contacts-icons {
                    text-align: right;
                    & > span:hover {
                        color: @msg-color-hover;
                    }
                }
            }
            &:hover {
                background-color: @msg-bg-color-darker;
                background-color: var(--msg-bg-color-darker);
            }
            &.cp-app-contacts-notify {
                animation: notif 2s ease-in-out infinite;
            }
        }
        .cp-app-contacts-remove {
            cursor: pointer;
            width: 20px;
            text-align: center;
            &:hover {
                color: @msg-color-hover;
            }
        }

        .cp-app-contacts-category {
            display: flex;
            flex-flow: column;
            flex-grow: 0;
            flex-shrink: 0;
            .cp-app-contacts-category-title {
                order: 1;
                font-size: 18px;
                margin: 0px 5px;
                text-align: center;
                background-color: @msg-bg-color-dark;
                background-color: var(--msg-bg-color-dark);
                font-weight: bold;
                height: 22px;
                line-height: 22px;
            }
            .cp-app-contacts-category-content {
                order: 2;
                display: flex;
                flex-flow: column-reverse;
                padding-bottom: 10px;
                &:empty {
                    display: none;
                    & ~ .cp-app-contacts-category-title {
                        display: none;
                    }
                }
            }
            .cp-app-contacts-muted-button {
                margin: 10px;
                border: 0;
                display: none;
                order: 3;
                .fa-bell-slash {
                    margin-right: 10px;
                }
            }
        }
    }

    .cp-contacts-muted-table {
        .cp-contacts-muted-user {
            margin-bottom: 5px;
            .cp-avatar {
                margin-right: 10px;
            }
            button {
                margin-right: 0px;
            }
        }
    }

    #cp-app-contacts-container.cp-app-contacts-inapp {
        #cp-app-contacts-friendlist {
            display: none;
        }
    }

    #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
        .avatar_main(30px);
        &.cp-avatar {
            display: flex;
        }
        cursor: pointer;
        color: @msg-color;
        media-tag {
            img {
                color: #000;
            }
        }
        media-tag, .cp-avatar-default {
            //margin-right: 5px;
            flex-shrink: 0;
            z-index: 1;
            margin: 4px;
        }
        .cp-app-contacts-status {
            display: inline-block;
            position: absolute;
            width: 10px;
            height: 10px;
            top: 0;
            right: 0;
            border-bottom-left-radius: 100%;

            &.cp-app-contacts-online {
                background-color: @cp_messenger-online;
            }
            &.cp-app-contacts-offline {
                display: none;
            }
        }
    }

    #cp-app-contacts-messaging {
        flex: 1;
        height: 100%;
        background-color: @msg-bg-color-light;
        background-color: var(--msg-bg-color-light);
        min-width: 0;

        .cp-app-contacts-info {
            padding: 20px;
        }
        .cp-app-contacts-header {
            background-color: @msg-bg-color-dark;
            background-color: var(--msg-bg-color-dark);
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;

            .hover () {
                height: 100%;
                line-height: 30px;
                padding: 10px;
                &:hover {
                    background-color: @msg-bg-color-darker;
                    background-color: var(--msg-color-darker);
                }
            }

            .cp-avatar,
            .cp-app-contacts-right-col {
                 flex: 1 1 auto;
            }
            .cp-app-contacts-remove-history {
                .hover;
            }
            .cp-avatar {
                margin: 10px;
            }
            .cp-app-contacts-more-history {
                //display: none;
                .hover;
                &.cp-app-contacts-faded {
                    color: @cryptpad_text_col;
                }
            }

            .cp-app-contacts-header-title {
                padding: 10px;
                flex: 1;
            }
        }
        .cp-app-contacts-tips {
            margin: 1em;
            background-color: @msg-bg-color-dark;
            background-color: var(--msg-bg-color-dark);
            font-size: 14px;
            padding: 10px;
            position: relative;
            .cp-app-contacts-tips-close {
                cursor: pointer;
                position: absolute;
                top: 2px;
                right: 2px;
            }
        }
        .cp-app-contacts-chat {
            height: 100%;
            display: flex;
            flex-flow: column;
            .cp-app-contacts-messages {
                padding: 0 20px;
                margin: 10px 0;
                flex: 1;
                overflow-x: auto;
                .cp-app-contacts-message {
                    display: flex;
                    flex-wrap: wrap;
                    & > div {
                        padding: 0 10px;
                    }
                    .cp-app-contacts-content {
                        overflow: hidden;
                        word-wrap: break-word;
                        &> * {
                            margin: 0;
                        }
                        flex: 1;
                        min-width: 70%;
                        position: relative;
                    }
                    .cp-app-contacts-date {
                        display: none;
                        font-style: italic;
                    }
                    .cp-app-contacts-sender {
                        margin-top: 10px;
                        font-weight: bold;
                        background-color: rgba(0,0,0,0.1);
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                    }
                    .cp-app-contacts-time {
                        display: none;
                        font-size: 0.8em;
                        align-items: center;
                        color: @msg-color;
                        font-weight: bold;
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background: rgba(0,0,0,0.3);
                        border-top-left-radius: 50%;
                        border-bottom-left-radius: 50%;
                        padding: 0 10px;
                    }
                    &:hover {
                        .cp-app-contacts-time {
                            display: flex;
                        }
                    }
                }
            }
        }
        .cp-app-contacts-input {
            background-color: @msg-bg-color-lighter;
            background-color: var(--msg-bg-color-lighter);
            height: auto;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5%;
            textarea {
                margin: 5px 0;
                padding: 5px 10px;
                border: none;
                height: 54px; // 2 lines (22px height) + 2 margins (5px)
                flex: 1;
                background-color: @cp_forms-bg;
                color: @cp_forms-fg;
                resize: none;
                overflow-y: auto;
                .tools_placeholder-color();
                &[disabled="true"] {
                    .tools_placeholder-color();
                }
            }
            button {
                height: 54px !important;
                border-radius: 0;
                border: none;
                color: @cp_messenger-fg;
                background-color: @msg-bg-color-darker;
                background-color: var(--msg-bg-color-darker);
                &:hover {
                    background-color: @msg-bg-color-dark;
                    background-color: var(--msg-bg-color-dark);
                }
            }
        }
    }
}

@import (reference) './avatar.less';
@import (reference) "./colortheme-all.less";

.messenger_vars (
    @bg-color: @cp_messenger-bg,
) {
    @msg-color: @cryptpad_text_col;
    @msg-color-hover: contrast(@msg-color, lighten(@msg-color, 10%), darken(@msg-color, 10%));
    @msg-bg-color: @bg-color;
    @invert: @bg-color;
    @msg-bg-color-light: contrast(@invert, lighten(@bg-color, 5%), darken(@bg-color, 5%));
    @msg-bg-color-lighter: contrast(@invert, lighten(@bg-color, 10%), darken(@bg-color, 10%));
    @msg-bg-color-dark: contrast(@bg-color, lighten(@bg-color, 5%), darken(@bg-color, 5%));
    @msg-bg-color-darker: contrast(@bg-color, lighten(@bg-color, 10%), darken(@bg-color, 10%));
};
.messenger_main(
    @bg-color: @cp_messenger-bg,
) {
    --LessLoader_require: LessLoader_currentFile();
    .messenger_vars(@bg-color);
    --msg-color: @msg-color;
    --msg-bg-color: @msg-bg-color;
    --msg-bg-color-light: @msg-bg-color-light;
    --msg-bg-color-lighter: @msg-bg-color-lighter;
    --msg-bg-color-dark: @msg-bg-color-dark;
    --msg-bg-color-darker: @msg-bg-color-darker;
};
& {
    @keyframes notif {
        0% {
            background: fade(@cp_messenger-notif, 10%);
        }
        50% {
            background: fade(@cp_messenger-notif, 30%);
        }
        100% {
            background: fade(@cp_messenger-notif, 10%);
        }
    }

    .messenger_vars();
    @button-border: 2px;
    @room-height: 48px;

    #cp-app-contacts-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
        color: @cp_messenger-fg;
        &.ready {
            background-size: cover;
            background-position: center;
        }
    }

    .cp-app-contacts-spinner {
        display: none;
    }

    .cp-app-contacts-initializing {
        .cp-app-contacts-spinner {
            color: @cp_messenger-fg;
            display: block;
        }
        .cp-app-contacts-info {
            display: none;
        }
        #cp-app-contacts-friendlist,
        #cp-app-contacts-messaging {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    #cp-app-contacts-friendlist {
        width: 200px;
        height: 100%;
        background-color: @msg-bg-color;
        background-color: var(--msg-bg-color);
        color: @msg-color;
        color: var(--msg-color);
        overflow-y: auto;
        display: flex;
        flex-flow: column;
        .cp-app-contacts-friend {
            background-color: @msg-bg-color-dark;
            background-color: var(--msg-bg-color-dark);
            padding: 5px;
            margin: 10px;
            margin-bottom: 0;
            cursor: pointer;
            position: relative;
            height: @room-height;
            .cp-app-contacts-right-col {
                margin-left: 5px;
                display: flex;
                flex-flow: column;
                flex: 1;
                min-width: 0;
                .cp-app-contacts-name {
                    white-space: nowrap;
                }
                .cp-app-contacts-icons {
                    text-align: right;
                    & > span:hover {
                        color: @msg-color-hover;
                    }
                }
            }
            &:hover {
                background-color: @msg-bg-color-darker;
                background-color: var(--msg-bg-color-darker);
            }
            &.cp-app-contacts-notify {
                animation: notif 2s ease-in-out infinite;
            }
        }
        .cp-app-contacts-remove {
            cursor: pointer;
            width: 20px;
            text-align: center;
            &:hover {
                color: @msg-color-hover;
            }
        }

        .cp-app-contacts-category {
            display: flex;
            flex-flow: column;
            flex-grow: 0;
            flex-shrink: 0;
            .cp-app-contacts-category-title {
                order: 1;
                font-size: 18px;
                margin: 0px 5px;
                text-align: center;
                background-color: @msg-bg-color-dark;
                background-color: var(--msg-bg-color-dark);
                font-weight: bold;
                height: 22px;
                line-height: 22px;
            }
            .cp-app-contacts-category-content {
                order: 2;
                display: flex;
                flex-flow: column-reverse;
                padding-bottom: 10px;
                &:empty {
                    display: none;
                    & ~ .cp-app-contacts-category-title {
                        display: none;
                    }
                }
            }
            .cp-app-contacts-muted-button {
                margin: 10px;
                border: 0;
                display: none;
                order: 3;
                .fa-bell-slash {
                    margin-right: 10px;
                }
            }
        }
    }

    .cp-contacts-muted-table {
        .cp-contacts-muted-user {
            margin-bottom: 5px;
            .cp-avatar {
                margin-right: 10px;
            }
            button {
                margin-right: 0px;
            }
        }
    }

    #cp-app-contacts-container.cp-app-contacts-inapp {
        #cp-app-contacts-friendlist {
            display: none;
        }
    }

    #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
        .avatar_main(30px);
        &.cp-avatar {
            display: flex;
        }
        cursor: pointer;
        color: @msg-color;
        media-tag {
            img {
                color: #000;
            }
        }
        media-tag, .cp-avatar-default {
            //margin-right: 5px;
            flex-shrink: 0;
            z-index: 1;
            margin: 4px;
        }
        .cp-app-contacts-status {
            display: inline-block;
            position: absolute;
            width: 10px;
            height: 10px;
            top: 0;
            right: 0;
            border-bottom-left-radius: 100%;

            &.cp-app-contacts-online {
                background-color: @cp_messenger-online;
            }
            &.cp-app-contacts-offline {
                display: none;
            }
        }
    }

    #cp-app-contacts-messaging {
        flex: 1;
        height: 100%;
        background-color: @msg-bg-color-light;
        background-color: var(--msg-bg-color-light);
        min-width: 0;

        .cp-app-contacts-info {
            padding: 20px;
        }
        .cp-app-contacts-header {
            background-color: @msg-bg-color-dark;
            background-color: var(--msg-bg-color-dark);
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;

            .hover () {
                height: 100%;
                line-height: 30px;
                padding: 10px;
                &:hover {
                    background-color: @msg-bg-color-darker;
                    background-color: var(--msg-color-darker);
                }
            }

            .cp-avatar,
            .cp-app-contacts-right-col {
                 flex: 1 1 auto;
            }
            .cp-app-contacts-remove-history {
                .hover;
            }
            .cp-avatar {
                margin: 10px;
            }
            .cp-app-contacts-more-history {
                //display: none;
                .hover;
                &.cp-app-contacts-faded {
                    color: @cryptpad_text_col;
                }
            }

            .cp-app-contacts-header-title {
                padding: 10px;
                flex: 1;
            }
        }
        .cp-app-contacts-tips {
            margin: 1em;
            background-color: @msg-bg-color-light;
            background-color: var(--msg-bg-color-light);
            font-size: 14px;
            padding: 10px;
            position: relative;
            .cp-app-contacts-tips-close {
                cursor: pointer;
                position: absolute;
                top: 2px;
                right: 2px;
            }
        }
        .cp-app-contacts-chat {
            height: 100%;
            display: flex;
            flex-flow: column;
            .cp-app-contacts-messages {
                padding: 0 20px;
                margin: 10px 0;
                flex: 1;
                overflow-x: auto;
                .cp-app-contacts-message {
                    display: flex;
                    flex-wrap: wrap;
                    & > div {
                        padding: 0 10px;
                    }
                    .cp-app-contacts-content {
                        overflow: hidden;
                        word-wrap: break-word;
                        &> * {
                            margin: 0;
                        }
                        flex: 1;
                        min-width: 70%;
                        position: relative;
                    }
                    .cp-app-contacts-date {
                        display: none;
                        font-style: italic;
                    }
                    .cp-app-contacts-sender {
                        margin-top: 10px;
                        font-weight: bold;
                        background-color: rgba(0,0,0,0.1);
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                    }
                    .cp-app-contacts-time {
                        display: none;
                        font-size: 0.8em;
                        align-items: center;
                        color: @msg-color;
                        font-weight: bold;
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background: rgba(0,0,0,0.3);
                        border-top-left-radius: 50%;
                        border-bottom-left-radius: 50%;
                        padding: 0 10px;
                    }
                    &:hover {
                        .cp-app-contacts-time {
                            display: flex;
                        }
                    }
                }
            }
        }
        .cp-app-contacts-input {
            background-color: @msg-bg-color-lighter;
            background-color: var(--msg-bg-color-lighter);
            height: auto;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5%;
            textarea {
                margin: 5px 0;
                padding: 5px 10px;
                border: none;
                height: 54px; // 2 lines (22px height) + 2 margins (5px)
                flex: 1;
                background-color: @cp_forms-bg;
                color: @cp_forms-fg;
                resize: none;
                overflow-y: auto;
                .tools_placeholder-color();
                &[disabled="true"] {
                    .tools_placeholder-color();
                }
            }
            button {
                height: 54px !important;
                border-radius: 0;
                border: none;
                color: @cp_messenger-fg;
                background-color: @msg-bg-color-darker;
                background-color: var(--msg-bg-color-darker);
                &:hover {
                    background-color: @msg-bg-color-dark;
                    background-color: var(--msg-bg-color-dark);
                }
            }
        }
    }
}


Remove unused style

Remove unused style

.head-row {
  user-select: none;
  background-color: @background-colour;
  height: @head-height;

  .head-sub-row {
    display: flex;
    align-items: center;

    #product-dropdown {
      .phone-portrait-display(@mobile-device-product-dropdown-display);
      .phone-landscape-display(@mobile-device-product-dropdown-display);
      .tablet-portrait-display(@mobile-device-product-dropdown-display);
      .tablet-landscape-display(@mobile-device-product-dropdown-display);

      flex-grow: 1;

      button {
        border: none !important;
      }
    }

    #period-selector {
      .phone-portrait-display(@phone-portrait-period-tab-display);
      .phone-landscape-display(@phone-landscape-period-tab-display);
      .tablet-portrait-display(@tablet-portrait-period-tab-display);
      .tablet-landscape-display(@tablet-landscape-period-tab-display);

      display: flex;
      justify-content: flex-end;
      align-self: flex-end;
      flex-grow: 1;
      padding-right: @y-axis-width;

      ul {
        list-style: none;
        float: right;
        margin: 0;
      }
      li {
        display: inline-block;
        border: 1px solid @gridline-colour;
        border-bottom: 0;
        margin-left: -1px;
        width: 56px;
        line-height: 15px;
        text-align: center;
      }

      li:first-child {
        margin-left: 0;
      }
      li.active {
        background-color: fade(@primary-white, 20%);
      }
      li.active a {
        color: @primary-white;
      }
      a {
        color: @period-selector-font-colour;
        text-decoration: none;
        padding: 3px;
        font-size: @font-size-small;
        font-weight: @font-weight-base;
        line-height: @line-height-base;
        display: block;
      }
    }

    .selectors {
      .phone-portrait-display(@mobile-device-head-selectors-display);
      .phone-landscape-display(@mobile-device-head-selectors-display);
      .tablet-portrait-display(@mobile-device-head-selectors-display);
      .tablet-landscape-display(@mobile-device-head-selectors-display);

      position: initial;
      display: none;
      flex-grow: 1;
    }

    #mobile-product-dropdown {
      button {
        height: 34px;
      }
    }

    #mobile-period-selector {
      .phone-portrait-display(@phone-portrait-period-dropdown-display);
      .phone-landscape-display(@phone-landscape-period-dropdown-display);
      .tablet-portrait-display(@tablet-portrait-period-dropdown-display);
      .tablet-landscape-display(@tablet-landscape-period-dropdown-display);

      display: none;
      align-self: center;
      margin-right: 12px;
      margin-left: auto;

      button {
        height: 34px;
        font-size: @font-size-small;
      }
    }

    .delete-button {
      .phone-portrait-display(@phone-portrait-clear-all-display);
      .phone-landscape-display(@phone-landscape-clear-all-display);
      .tablet-portrait-display(@tablet-portrait-clear-all-display);
      .tablet-landscape-display(@tablet-landscape-clear-all-display);

      display: none;
      align-self: center;
      margin-right: 12px;
      cursor: pointer;
    }
  }
}

.head-row {
  user-select: none;
  background-color: @background-colour;
  height: @head-height;

  .head-sub-row {
    display: flex;
    align-items: center;

    #product-dropdown {
      .phone-portrait-display(@mobile-device-product-dropdown-display);
      .phone-landscape-display(@mobile-device-product-dropdown-display);
      .tablet-portrait-display(@mobile-device-product-dropdown-display);
      .tablet-landscape-display(@mobile-device-product-dropdown-display);

      flex-grow: 1;

      button {
        border: none !important;
      }
    }

    #period-selector {
      .phone-portrait-display(@phone-portrait-period-tab-display);
      .phone-landscape-display(@phone-landscape-period-tab-display);
      .tablet-portrait-display(@tablet-portrait-period-tab-display);
      .tablet-landscape-display(@tablet-landscape-period-tab-display);

      display: flex;
      justify-content: flex-end;
      align-self: flex-end;
      flex-grow: 1;
      padding-right: @y-axis-width;

      ul {
        list-style: none;
        float: right;
        margin: 0;
      }
      li {
        display: inline-block;
        border: 1px solid @gridline-colour;
        border-bottom: 0;
        margin-left: -1px;
        width: 56px;
        line-height: 15px;
        text-align: center;
      }

      li:first-child {
        margin-left: 0;
      }
      li.active {
        background-color: fade(@primary-white, 20%);
      }
      li.active a {
        color: @primary-white;
      }
      a {
        color: @period-selector-font-colour;
        text-decoration: none;
        padding: 3px;
        font-size: @font-size-small;
        font-weight: @font-weight-base;
        line-height: @line-height-base;
        display: block;
      }
    }

    .selectors {
      .phone-portrait-display(@mobile-device-head-selectors-display);
      .phone-landscape-display(@mobile-device-head-selectors-display);
      .tablet-portrait-display(@mobile-device-head-selectors-display);
      .tablet-landscape-display(@mobile-device-head-selectors-display);

      position: initial;
      display: none;
      flex-grow: 1;
    }

    #mobile-product-dropdown {
      button {
        height: 34px;
      }
    }

    #spacer {
      .phone-portrait-display(@phone-portrait-spacer-display);
      .phone-landscape-display(@phone-landscape-spacer-display);
      .tablet-portrait-display(@tablet-portrait-spacer-display);
      .tablet-landscape-display(@tablet-landscape-spacer-display);

      flex-grow: 1;
    }

    #mobile-period-selector {
      .phone-portrait-display(@phone-portrait-period-dropdown-display);
      .phone-landscape-display(@phone-landscape-period-dropdown-display);
      .tablet-portrait-display(@tablet-portrait-period-dropdown-display);
      .tablet-landscape-display(@tablet-landscape-period-dropdown-display);

      display: none;
      align-self: center;
      margin-right: 12px;
      margin-left: auto;

      button {
        height: 34px;
        font-size: @font-size-small;
      }
    }

    .delete-button {
      .phone-portrait-display(@phone-portrait-clear-all-display);
      .phone-landscape-display(@phone-landscape-clear-all-display);
      .tablet-portrait-display(@tablet-portrait-clear-all-display);
      .tablet-landscape-display(@tablet-landscape-clear-all-display);

      display: none;
      align-self: center;
      margin-right: 12px;
      cursor: pointer;
    }
  }
}


Nav fix on chrome

Nav fix on chrome

.navbar-footer {
  background-color: @lightnavy;
  padding-bottom: 3rem;
  padding-top: 1.5em;
  font-size: 1.8rem;

  ul {
    text-align: left;
    list-style: none;
    padding: 0;
    @media screen and (min-width: @screen-xs-min) {
      text-align: center;
    }
  }

  li {
    display: block;
    @media screen and (min-width: @screen-xs-min) {
      display: inline-block;
    }
  }

  a {
    font-size: 1.4rem;
    display: block;
    padding: 1.3rem 1.8rem;
    @media screen and (min-width: @screen-xs-min) {
      display: inline-block;
      padding: 0rem 1.8rem;
    }
    &:link, &:visited {
      color: fade(@white, 80%);
    }
    &:hover, &:active, &:focus {
      color: @white;
      text-decoration: none;
    }
  }

  .secondary {
    li {
      padding: 1.2rem 1.8rem;
    }
    a {
      padding: 0;
      font-size: 1.3rem;
      display: inline-block;
    }
    .fa {
      color: rgba(255,255,255,0.8);
      margin-right: 0.5rem;
      font-size: 1.3rem;
    }
  }

  .moz-logo {
    text-align: left;
    margin: 0 0 -1rem 0;
    @media screen and (min-width: @screen-xs-min) {
      text-align: center;
      margin: 0 0 -1rem 1.8rem;
    }
    a {
      padding: 0.8rem;
    }
    img {
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
    }
  }
}

.navbar {
  min-height: 0;
  .container {
    .navbar-collapse {
      padding: 0;
    }
  }
}

.navbar-nav {
  @media screen and (min-width: @screen-sm-min) {
    float: none;
  }
  .col-3 {
    width: 33%;
  }
  > li {
    @media screen and (min-width: @screen-sm-min) {
      text-align: center;
      width: 100%
    }
    > a {
      font-size: 1.4rem;
      padding: 1.8rem 1.5rem 1.8rem 3.2rem;
      @media screen and (min-width: @screen-sm-min) {
        padding-left: 1.5rem;
      }
    }
    &.nav-icon {
      @media screen and (min-width: @screen-sm-min) {
        width: 25%
      }
      > a {
        height: auto;
        padding: 1.2rem 1.8rem;
        &:link, &:visited {
          color: fade(@white, 80);
        }
        &:hover, &:active, &:focus {
          color: @white;
        }
        span.fa {
          margin-right: 0.8rem;
        }
      }
    }
  }
}

.navbar-footer {
  background-color: @lightnavy;
  padding-bottom: 3rem;
  padding-top: 1.5em;
  font-size: 1.8rem;

  ul {
    text-align: left;
    list-style: none;
    padding: 0;
    @media screen and (min-width: @screen-xs-min) {
      text-align: center;
    }
  }

  li {
    display: block;
    @media screen and (min-width: @screen-xs-min) {
      display: inline-block;
    }
  }

  a {
    font-size: 1.4rem;
    display: block;
    padding: 1.3rem 1.8rem;
    @media screen and (min-width: @screen-xs-min) {
      display: inline-block;
      padding: 0rem 1.8rem;
    }
    &:link, &:visited {
      color: fade(@white, 80%);
    }
    &:hover, &:active, &:focus {
      color: @white;
      text-decoration: none;
    }
  }

  .secondary {
    li {
      padding: 1.2rem 1.8rem;
    }
    a {
      padding: 0;
      font-size: 1.3rem;
      display: inline-block;
    }
    .fa {
      color: rgba(255,255,255,0.8);
      margin-right: 0.5rem;
      font-size: 1.3rem;
    }
  }

  .moz-logo {
    text-align: left;
    margin: 0 0 -1rem 0;
    @media screen and (min-width: @screen-xs-min) {
      text-align: center;
      margin: 0 0 -1rem 1.8rem;
    }
    a {
      padding: 0.8rem;
    }
    img {
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
    }
  }
}

.navbar {
  min-height: auto;
  .container {
    .navbar-collapse {
      padding: 0;
    }
  }
}

.navbar-nav {
  @media screen and (min-width: @screen-sm-min) {
    float: none;
  }
  .col-3 {
    width: 33%;
  }
  > li {
    @media screen and (min-width: @screen-sm-min) {
      text-align: center;
      width: 100%
    }
    > a {
      font-size: 1.4rem;
      padding: 1.8rem 1.5rem 1.8rem 3.2rem;
      @media screen and (min-width: @screen-sm-min) {
        padding-left: 1.5rem;
      }
    }
    &.nav-icon {
      @media screen and (min-width: @screen-sm-min) {
        width: 25%
      }
      > a {
        height: auto;
        padding: 1.2rem 1.8rem;
        &:link, &:visited {
          color: fade(@white, 80);
        }
        &:hover, &:active, &:focus {
          color: @white;
        }
        span.fa {
          margin-right: 0.8rem;
        }
      }
    }
  }
}


Broken styles over multiple lines

Broken styles over multiple lines

@import "reset.less";
@import "notification.less";

/* Actual styles start */
@z-index      : 2147483644; // max z-index supported: 2147483647
@max-z-index  : 2147483647;
@popup-width  : 105px;
@popup-height : 24px;
@border-color : #1c5c90;
@buttonBackground: #3d75a3;

#fl-wrapper-1 > #fl-wrapper-2 > #fl-wrapper-3 {
  > #fl, > #fl * {
    #fl > .resetStyles;
    color: #fff;
  }
}

span.factlink {
  cursor: pointer;

  &.fl-active {
    background: #B4D5FE !important;
    color: #333;
  }
  transition: all 0.4s;

  &.fl-first::before {
    padding: 0 3px 0 0;
    content: '\2713';
  }
}

#fl-wrapper-1 > #fl-wrapper-2 > #fl-wrapper-3 > #fl {
  height: 0;
  width: 0;

  #factlink-iframe {
    border: 0px solid transparent;
    height: 0px;
    width: 0px;
  }

  #factlink-modal-frame {
    background: transparent;
    background: rgba(233, 234, 238, .9);
    border: none;
    z-index: @max-z-index;
    padding: 0;
    display: none;
    margin: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

    iframe {
      border: none;
      height: 100%;
      width: 100%;
    }
  }

  .fl-popup {
    cursor:   pointer;
    display:  none;
    height:   @popup-height;
    position: absolute;
    z-index:  @max-z-index;

    &:before {
      position: relative;
      top: 5px;
      margin-right: 4px;
      content: url(../images/logo-white.png);
    }

    border-radius: 3px;
    height: 30px;
    line-height: 30px;
    padding: 0 16px;

    border-bottom: 3px solid @border-color;
    background-color: @buttonBackground;

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);

    &:hover {
      background: darken(@buttonBackground, 5);
      border-color: darken(@border-color, 5);
    }

    &:active {
      background-color: darken(@buttonBackground, 5);
      border-top: 3px solid @border-color;
      border-bottom: 0px;
    }
  }

  .fl-loading:before { content: url(../images/loading-indicator.gif); }

  .fl-loading-message { display: none; }

  .fl-loading .fl-loading-message { display: inline; }
  .fl-loading .fl-default-message { display: none; }

  .fl-add-new .fl-new     { display: inline; }
  .fl-add-new .fl-created { display: none; }

  .fl-created .fl-new     { display: none; }
  .fl-created .fl-created { display: inline; }
}


also reset max-width and height properties

#fl-wrapper-1, #fl-wrapper-2, #fl-wrapper-3, #fl {
  .resetStyles() {
    &::before{
      content:none;
    }
    &::after{
      content:none;
    }
    margin:0;
    padding:0;
    background: initial;
    background: -moz-initial;
    opacity: initial;
    opacity: -moz-initial;
    -webkit-transition: initial;
  	border-collapse: initial;
  	border-collapse: -moz-initial;
    border: initial;
    border: -moz-initial;
    text-decoration: none  !important;
    text-align: left;
    text-transform: initial;
    text-transform: -moz-initial;
  	border-spacing: initial;
  	border-spacing: -moz-initial;
    float: initial;
    float: -moz-initial;
  	font: initial;
  	font: -moz-initial;
    font-weight: initial;
    font-weight: -moz-initial;
    line-height: initial;
    line-height: -moz-initial;
  	vertical-align: initial;
  	vertical-align: -moz-initial;
  	width: initial;
  	width: -moz-initial;
  	font-size: initial;
  	font-size: -moz-initial;
    max-height: none;
    height: initial;
    max-height: none;
    box-shadow: initial;
    box-shadow: -moz-initial;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    white-space: initial;
    white-space: -moz-initial;
    text-indent: initial;
    text-indent: -moz-initial;
    text-shadow: initial;
    text-shadow: -moz-initial;
    list-style: none;
    color: #000;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 13px;
  }
}

#fl-wrapper-1, #fl-wrapper-2, #fl-wrapper-3, #fl {
  .resetStyles() {
    &::before{
      content:none;
    }
    &::after{
      content:none;
    }
    margin:0;
    padding:0;
    background: initial;
    background: -moz-initial;
    opacity: initial;
    opacity: -moz-initial;
    -webkit-transition: initial;
  	border-collapse: initial;
  	border-collapse: -moz-initial;
    border: initial;
    border: -moz-initial;
    text-decoration: none  !important;
    text-align: left;
    text-transform: initial;
    text-transform: -moz-initial;
  	border-spacing: initial;
  	border-spacing: -moz-initial;
    float: initial;
    float: -moz-initial;
  	font: initial;
  	font: -moz-initial;
    font-weight: initial;
    font-weight: -moz-initial;
    line-height: initial;
    line-height: -moz-initial;
  	vertical-align: initial;
  	vertical-align: -moz-initial;
  	width: initial;
  	width: -moz-initial;
  	font-size: initial;
  	font-size: -moz-initial;
    box-shadow: initial;
    box-shadow: -moz-initial;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    white-space: initial;
    white-space: -moz-initial;
    text-indent: initial;
    text-indent: -moz-initial;
    text-shadow: initial;
    text-shadow: -moz-initial;
    list-style: none;
    color: #000;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 13px;
  }
}


Fix menu overlapping content between 1001px/1024px Fixes Bug 843648

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

/* {{{ Journal font */

@font-face {
    font-family: 'Journal';
    src: url('/media/fonts/journal-webfont.eot');
    src: url('/media/fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/journal-webfont.woff') format('woff'),
         url('/media/fonts/journal-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* }}} */
/* {{{ Template overrides */

#article-wrapper {
    height: 2840px;
    overflow: hidden;
    position: relative;
    top: 0px;
    left: 0px;
}

.partner-article {
    overflow: hidden;
    position: relative;
    height: 820px;
    background: #eee url(/media/img/sandstone/grain.png) repeat;
    background: url(/media/img/sandstone/bg-gradient-sky.png) repeat-x 0 0,
                url(/media/img/sandstone/grain.png) repeat 0 0,
                #eee;
    .clearfix();
    -webkit-box-shadow:  0px -3px 5px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  0px -3px 5px 1px rgba(0, 0, 0, 0.3);
    section {
        width: 100%;
        height: 820px;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
        .transition(all ease .5s);
        &.section-2 {
            left: 100%;
        }
        &.section-3 {
            left: 200%;
        }
    }
    .article-header {
        .clearfix();
        padding: (@baseLine * 2) 0;
        top: auto;
        h2 {
            float: left;
            margin-right: 30px;
        }
        nav {
            position: relative;
            display: block;
            padding: 25px 0 0 0;
            a {
                display: table;
                float: left;
                position: relative;
                height: 45px;
                width: 150px;
                color: @textColorSecondary;
                background: rgba(166,189,206,0.2);
                border: 1px solid rgba(173,201,222,0.4);
                padding: 0 10px;
                border-radius: 4px;
                margin-left: 20px;
                text-transform: uppercase;
                text-align: center;
                line-height: 1;
                letter-spacing: -0.02em;
                .transition();
                span {
                    display: table-cell;
                    width: 100%;
                    vertical-align: middle;
                }
                &:hover {
                    text-decoration: none;
                    background: rgba(166,189,206,0.4);
                }
            }
        }
    }
    .article-content {
        padding: (@baseLine * 2) 0;
        h2 {
            .span(8);
            margin-bottom: @baseLine;
        }
        .intro {
            .span(8);
            margin-left: 20px;
            margin-right: 0;
            .promos {
                padding-top: @baseLine;
                div {
                    .span(3);
                    &:first-child {
                        margin-left: 0;
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }

}

.partner-article.dark {
    .article-header {
        nav {
            a {
                color: #fff;
                background: rgba(255,255,255,0.1);
                &:hover {
                    text-decoration: none;
                    background: rgba(255,255,255,0.2);
                }
            }
        }
    }
}

.partner-article[data-section="os-overview"] .article-header nav a[data-section="os-overview"],
.partner-article[data-section="os-operators"] .article-header nav a[data-section="os-operators"],
.partner-article[data-section="marketplace-overview"] .article-header nav a[data-section="marketplace-overview"],
.partner-article[data-section="marketplace-operators"] .article-header nav a[data-section="marketplace-operators"],
.partner-article[data-section="marketplace-developers"] .article-header nav a[data-section="marketplace-developers"],
.partner-article[data-section="android-overview"] .article-header nav a[data-section="android-overview"],
.partner-article[data-section="android-partner"] .article-header nav a[data-section="android-partner"] {
    background: #fff;
    border-color: #fff;
    color: @textColorSecondary;
    @shadow: 0 1px 2px rgba(0,0,0,0.4);
    .box-shadow(@shadow);
    &:after {
        content: " ";
        display: block;
        position: absolute;
        height: 12px;
        width: 25px;
        background: url(/media/img/firefox/partners/menu-icons.png) 50% -1140px no-repeat;
        bottom: -12px;
        left: 50%;
        margin-left: -12px;
    }
}

.partner-article[data-section="os-overview"] .article-header nav a[data-section="os-overview"],
.partner-article[data-section="os-operators"] .article-header nav a[data-section="os-operators"],
.partner-article[data-section="android-overview"] .article-header nav a[data-section="android-overview"],
.partner-article[data-section="android-partner"] .article-header nav a[data-section="android-partner"] {
    background: #fff;
    border-color: #fff;
    color: @textColorSecondary;
}

/* }}} */
/* {{{ Giant Fox */

#os {
    .giantfox {
        width: 900px;
        height: 700px;
        background: url(/media/img/firefox/partners/firefoxos-giantfox-back.png) no-repeat 0 0 ;
        position: absolute;
        top: 140px;
        left: 50%;
        margin-left: -70px;
        .transition(all ease 0.6s);
        .giantfox-foreground {
            position: absolute;
            display: block;
            top: 0;
            right: 0;
            width: 469px;
            height: 700px;
            background: url(/media/img/firefox/partners/firefoxos-giantfox-front.png) no-repeat 100% 130px;
            z-index: 110;
        }
    }
}

.marketplacegiantfox {
    position: absolute;
    display: block;
    top: 1576px;
    left: 50%;
    .transition(all ease 0.6s);
    &.giantfox-foreground {
        background: url(/media/img/firefox/partners/marketplace-giantfox-front.png) no-repeat 100% top;
        z-index: 120;
        width: 454px;
        height: 520px;
        margin-left: 86px;
    }
    &.giantfox-background {
        background: url(/media/img/firefox/partners/marketplace-giantfox-back.png) no-repeat 0 0 ;
        z-index: 112;
        width: 580px;
        height: 240px;
        margin-left: -40px;
    }
}

/* }}} */
/* {{{ Overview Article */

#overview {
    background: url(/media/img/firefox/partners/overview-bg.png) center top no-repeat;
    h2 {
        font-size: 84px;
        letter-spacing: -4px;
        .span-all();
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .intro {
        p {
            .open-sans-light;
            font-size: 17px;
            letter-spacing: -0.01em;
        }
        #more-partners {
            margin: -30px 0 0 0;
            float: left;
            display: block;
            font-family: Journal;
            font-size: 23px;
            color: @textColorTertiary;
            padding-right: 50px;
            text-align: right;
            width: 210px;
            background: url(/media/img/firefox/partners/partners-arrow.png) 100% 50% no-repeat;
        }
        .partner-button {
            display: none;
            margin-top: -35px;
            float: right;
        }
        #overview-news {
            display: none;
            clear: both;
            .clearfix();
            background: url(/media/img/firefox/partners/divider.png) 50% 100% no-repeat;
            padding-bottom: @baseLine;
            min-height: 60px;
            position: relative;
            img {
                position: absolute;
                top: 0;
                left: 0;
            }
            h3 {
                color: @textColorSecondary;
                margin-left: 150px;
                text-align: left;
                font-weight: bold;
                font-size: 18px;
                text-transform: uppercase;
            }
        }
    }
    .overview-actions {
        display: none;
        margin: 0;
        padding: 0;
        li {
            width: 33%;
            float: left;
        }
    }

}

/* }}} */
/* {{{ Firefox OS section */

#os {
    .intro {
        z-index: 50;
        padding-top: 140px;
        .span(7);
        margin-left: 20px;
        .narrow {
            margin-right: 140px;
        }
    }
    h3 {
        font-size: 42px;
    }
    #os-operators-intro {
        .span-all();
        padding-top: 120px;
        h3 {
            font-size: 50px;
            letter-spacing: -2px;
            margin-left: 0;
            margin-bottom: 40px;
            text-align: center;
        }
        .left {
            .span(6);
            ul li {
                margin: 10px 20px;
            }
            .promos div {
                .span-all();
            }
        }
        .logos {
            .span(6);
            margin-left: 0;
            margin-right: 0;
        }
    }
    #os-operators {
        padding-top: 0;
    }
}

/* }}} */
/* {{{ Marketplace section */

#marketplace {
    z-index: 111;
    .article-header {
        h2 {
            padding-top: 15px;
            margin-right: 5px;
        }
    }
    .intro {
        padding-top: 140px;
        z-index: 50;
    }
    #marketplace-overview {
        .intro {
            .span(8);
            margin-left: 20px;
            width: 580px;
            .narrow {
                margin-right: 140px;
            }
            .promos {
                .span(8);
                width: 580px;
                margin-left: 0;
                margin-right: 0;
                div {
                    .span(4);
                    width: 280px;
                    &:first-child { margin-left: 0; }
                    &:last-child  { margin-right: 0; }
                }
            }
        }
    }
    #marketplace-operators {
        padding-top: 0;
        .intro {
            .span-all();
            h3 {
                font-size: 48px;
                letter-spacing: -2px;
                text-align: center;
                margin-bottom: @baseLine * 2;
            }
        }
        .left {
            .span(6);
            .partner-button {
                a:first-child {
                    margin-right: 20px;
                }
            }
            ul li {
                margin: 10px 20px;
            }
        }
        .logos {
            .span(6);
            margin-left: 0;
            margin-right: 0;
        }
    }
    #marketplace-developers {
        padding-top: 0;
        .article-content {
            .intro {
                .span-all();
                h3 {
                    font-size: 48px;
                    letter-spacing: -2px;
                    text-align: center;
                    margin-bottom: @baseLine * 2;
                }
                .promos {
                    .span(5);
                    padding-top: 0;
                    margin-right: 0;
                    margin-left: 0;
                    margin-bottom: @baseLine;
                    clear: none;
                    div {
                        .span-all();
                        margin-bottom: @baseLine;
                    }
                    .register {
                        margin-right: 0;
                        .button {
                            .inline-block();
                            padding-left: 30px;
                            padding-right: 30px;
                        }
                    }
                }
            }
            .left {
                .span(7);
                .partner-button {
                    a:first-child {
                        margin-right: 20px;
                    }
                }
                ul li {
                    margin: 10px 20px;
                }
            }
        }
    }
}

/* }}} */
/* {{{ Firefox for Android section */

#android {
    z-index: 121; // 1 higher than #phone-container
    .intro {
        padding-top: 140px;
        .span(6);
        margin-left: 20px;
        .narrow {
            margin-right: 100px;
        }
    }
    .article-header {
        h2 {
            font-size: 78px;
        }
    }
    .android-dude {
        position: absolute;
        display: block;
        top: 405px;
        left: -75px;
        width: 231px;
        height: 256px;
        background: url(/media/img/firefox/partners/android-dude.png) no-repeat 0 0;
        z-index: 130;
    }
    #android-partner {
        padding-top: 0;
        background: url(/media/img/firefox/partners/android-partners-bg.png) 50% 200px no-repeat;
        .intro {
            padding-top: 120px;
            h3 {
                font-size: 42px;
            }
            h4 {
                font-size: 26px;
            }
        }
        .android-dude {
            top: 440px;
            left: 560px;
        }
    }
    .android-tablet {
        width: 1021px;
        height: 662px;
        background: url(/media/img/firefox/partners/android-tablet-frame.png) no-repeat 0 0;
        position: absolute;
        top: 120px;
        left: 50%;
        margin-left: -40px;
        .transition(all ease 0.6s);
        .tablet-screen {
            position: absolute;
            display: block;
            top: 58px;
            right: 127px;
            width: 767px;
            height: 488px;
            background: url(/media/img/firefox/partners/android-tablet-screen.jpg) no-repeat 0 0;
        }
    }
}

/* }}} */
/* {{{ Left menu */

body #partner-nav {
    position: fixed;
    z-index: 1000;
    top: 160px;
    left: 30px;
    width: 60px;
    margin-left: auto;
    padding: 0;
}

#explore {
    position: absolute;
    display: block;
    z-index: 1;
    font-family: Journal;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    letter-spacing: normal;
    line-height: 0.9;
    top: 80px;
    left: 34px;
    width: 50px;
    padding: 0 0 18px 50px;
    margin: 0;
    font-size: 23px;
    background: url(/media/img/firefox/partners/menu-icons.png) 0 -720px no-repeat;
}

.menu {
    margin-bottom: @baseLine;
    li {
        display: block;
        float: none;
        width: auto;
        a {
            @shadow: 0 -1px rgba(0,0,0,0.1) inset;
            .box-shadow(@shadow);
        }
        &:first-child a {
            border-radius: 3px 3px 0 0;
        }
        &:last-child a {
            border-radius: 0 0 3px 3px;
        }
        &.title {
            border-radius: 3px 3px 0 0;
            background: #515f6a;
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
        }
    }
}

#mwc-menu {
    display: block;
}

#overlay-menu {
    display: block;
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 200;
    border-radius: 3px;
    .transition(right linear 0.3s);
    li {
        width: 40px;
        border-radius: 3px;
        padding-left: 14px;
        background: #515f6a url(/media/img/firefox/partners/menu-icons.png) 0 -910px no-repeat;
        a {
            background-position: 50% -790px;
            border-radius: 0 3px 3px 0;
            width: 40px;
            height: 40px;
        }
        &.active a { background-position: 50% -850px; }
    }
    &.form-open {
        right: 320px;
        @shadow: 0 1px rgba(255,255,255,0.8);
        opacity: 0.9;
        .box-shadow(@shadow);
        li {
            background-position: -46px -910px;
            @shadow: 1px 2px 2px rgba(0,0,0,0.4) inset, 0 0 0 1px rgba(0,0,0,0.2) inset;
            .box-shadow(@shadow);
            a {
                background-position: 50% -850px;
                background-color: rgba(255,255,255,0.4);
            }
        }
    }
}

/* }}} */
/* {{{ Large Phone */

.phone-container {
    height: 586px;
    width: 327px;
    position: absolute;
    z-index: 120;
    top: 200px;
    left: 50%;
    margin-left: 166px;
    .phone {
        height: 586px;
        width: 327px;
    }
    .phone-overlay {
        position: absolute;
        top: 0;
        left: 0;
        background: url(/media/img/firefox/partners/phone-overlay.png) 0 0 no-repeat;
        height: 586px;
        width: 327px;
    }
    .screen {
        position: absolute;
        top: 79px;
        left: 41px;
        height: 373px;
        width: 244px;
        display: none;
    }
    #screen-overview {
        display: block;
        background: url(/media/img/firefox/partners/screen-overview.jpg) 0 0 no-repeat;
        #foxtail {
            height: 156px;
            width: 156px;
            position: absolute;
            top: 90px;
            left: 30px;
            background: url(/media/img/firefox/partners/foxtail.png) 0 0 no-repeat;
        }
    }
    #screen-os {
        background: url(/media/img/firefox/partners/phone-os-screenshots.jpg) 0 0 repeat-x;

        -moz-animation: os-screenslide 20s ease infinite alternate;
        -webkit-animation: os-screenslide 20s ease infinite alternate;
        animation: os-screenslide 20s ease infinite alternate;
    }

    @keyframes os-screenslide {
          0% { background-position: 0 0; }
         20% { background-position: 0 0; }
         22% { background-position: -244px 0; }
         42% { background-position: -244px 0; }
         44% { background-position: -488px 0; }
         64% { background-position: -488px 0; }
         66% { background-position: -732px 0; }
        100% { background-position: -732px 0; }
    }

    @-moz-keyframes os-screenslide {
          0% { background-position: 0 0; }
         20% { background-position: 0 0; }
         22% { background-position: -244px 0; }
         42% { background-position: -244px 0; }
         44% { background-position: -488px 0; }
         64% { background-position: -488px 0; }
         66% { background-position: -732px 0; }
        100% { background-position: -732px 0; }
    }

    @-webkit-keyframes os-screenslide {
          0% { background-position: 0 0; }
         20% { background-position: 0 0; }
         22% { background-position: -244px 0; }
         42% { background-position: -244px 0; }
         44% { background-position: -488px 0; }
         64% { background-position: -488px 0; }
         66% { background-position: -732px 0; }
        100% { background-position: -732px 0; }
    }

    #screen-marketplace {
        background: url(/media/img/firefox/partners/phone-marketplace-screenshot.jpg) 0 0 no-repeat;
    }
}

.phone-shadow {
    opacity: 0;
    position: absolute;
    top: 682px;
    left: 50%;
    margin-left: 166px;
    width: 327px;
    height: 104px;
    background: url(/media/img/firefox/partners/phone-shadow.png) 50% 100% no-repeat;
    background-size: 50%;
    .transition(all ease 0.5s);
    &.visible {
        background-size: 100%;
        opacity: 1;
    }
}

.android-phone-container {
    top: auto;
    bottom: -600px;
    height: 636px;
    .transition(all ease 1s);
    .phone {
        background: url(/media/img/firefox/partners/phone-android-shadow.png) 50% 100% no-repeat;
        height: 636px;
    }
    .phone-overlay {
        background: url(/media/img/firefox/partners/phone-android.png) 50% 100% no-repeat;
        height: 636px;
    }
    &.android-phone-visible {
        bottom: 30px;
    }
}

/* }}} */
/* {{{ Form */

#form {
    .close { display: inline; }
    display: none;
    height: 820px;
}

#pageslide {
    background: #1e2023 url(/media/img/firefox/partners/form-bg.jpg) 0 0 repeat-y;
}

/* }}} */
/* {{{ l10n tweaks */

/* German */

html[lang="de"] {
    #overview h2 {
        font-size: 66px;
    }
}

html[lang="fr"],
html[lang="pt-BR"] {
    #overview h2 {
        font-size: 72px;
    }
}

html[lang="pl"] {
    #explore,
    #overview .intro #more-partners {
        display: none;
    }
}

html[lang="zh-CN"] {
    #overview .intro p {
        padding: 0 10px;
    }
}

/* }}} */

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

/* {{{ Journal font */

@font-face {
    font-family: 'Journal';
    src: url('/media/fonts/journal-webfont.eot');
    src: url('/media/fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/journal-webfont.woff') format('woff'),
         url('/media/fonts/journal-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* }}} */
/* {{{ Template overrides */

#article-wrapper {
    height: 2840px;
    overflow: hidden;
    position: relative;
    top: 0px;
    left: 0px;
}

.partner-article {
    overflow: hidden;
    position: relative;
    height: 820px;
    background: #eee url(/media/img/sandstone/grain.png) repeat;
    background: url(/media/img/sandstone/bg-gradient-sky.png) repeat-x 0 0,
                url(/media/img/sandstone/grain.png) repeat 0 0,
                #eee;
    .clearfix();
    -webkit-box-shadow:  0px -3px 5px 1px rgba(0, 0, 0, 0.3);
    box-shadow:  0px -3px 5px 1px rgba(0, 0, 0, 0.3);
    section {
        width: 100%;
        height: 820px;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
        .transition(all ease .5s);
        &.section-2 {
            left: 100%;
        }
        &.section-3 {
            left: 200%;
        }
    }
    .article-header {
        .clearfix();
        padding: (@baseLine * 2) 0;
        top: auto;
        h2 {
            float: left;
            margin-right: 30px;
        }
        nav {
            position: relative;
            display: block;
            padding: 25px 0 0 0;
            a {
                display: table;
                float: left;
                position: relative;
                height: 45px;
                width: 150px;
                color: @textColorSecondary;
                background: rgba(166,189,206,0.2);
                border: 1px solid rgba(173,201,222,0.4);
                padding: 0 10px;
                border-radius: 4px;
                margin-left: 20px;
                text-transform: uppercase;
                text-align: center;
                line-height: 1;
                letter-spacing: -0.02em;
                .transition();
                span {
                    display: table-cell;
                    width: 100%;
                    vertical-align: middle;
                }
                &:hover {
                    text-decoration: none;
                    background: rgba(166,189,206,0.4);
                }
            }
        }
    }
    .article-content {
        padding: (@baseLine * 2) 0;
        h2 {
            .span(8);
            margin-bottom: @baseLine;
        }
        .intro {
            .span(8);
            margin-left: 20px;
            margin-right: 0;
            .promos {
                padding-top: @baseLine;
                div {
                    .span(3);
                    &:first-child {
                        margin-left: 0;
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }

}

.partner-article.dark {
    .article-header {
        nav {
            a {
                color: #fff;
                background: rgba(255,255,255,0.1);
                &:hover {
                    text-decoration: none;
                    background: rgba(255,255,255,0.2);
                }
            }
        }
    }
}

.partner-article[data-section="os-overview"] .article-header nav a[data-section="os-overview"],
.partner-article[data-section="os-operators"] .article-header nav a[data-section="os-operators"],
.partner-article[data-section="marketplace-overview"] .article-header nav a[data-section="marketplace-overview"],
.partner-article[data-section="marketplace-operators"] .article-header nav a[data-section="marketplace-operators"],
.partner-article[data-section="marketplace-developers"] .article-header nav a[data-section="marketplace-developers"],
.partner-article[data-section="android-overview"] .article-header nav a[data-section="android-overview"],
.partner-article[data-section="android-partner"] .article-header nav a[data-section="android-partner"] {
    background: #fff;
    border-color: #fff;
    color: @textColorSecondary;
    @shadow: 0 1px 2px rgba(0,0,0,0.4);
    .box-shadow(@shadow);
    &:after {
        content: " ";
        display: block;
        position: absolute;
        height: 12px;
        width: 25px;
        background: url(/media/img/firefox/partners/menu-icons.png) 50% -1140px no-repeat;
        bottom: -12px;
        left: 50%;
        margin-left: -12px;
    }
}

.partner-article[data-section="os-overview"] .article-header nav a[data-section="os-overview"],
.partner-article[data-section="os-operators"] .article-header nav a[data-section="os-operators"],
.partner-article[data-section="android-overview"] .article-header nav a[data-section="android-overview"],
.partner-article[data-section="android-partner"] .article-header nav a[data-section="android-partner"] {
    background: #fff;
    border-color: #fff;
    color: @textColorSecondary;
}

/* }}} */
/* {{{ Giant Fox */

#os {
    .giantfox {
        width: 900px;
        height: 700px;
        background: url(/media/img/firefox/partners/firefoxos-giantfox-back.png) no-repeat 0 0 ;
        position: absolute;
        top: 140px;
        left: 50%;
        margin-left: -70px;
        .transition(all ease 0.6s);
        .giantfox-foreground {
            position: absolute;
            display: block;
            top: 0;
            right: 0;
            width: 469px;
            height: 700px;
            background: url(/media/img/firefox/partners/firefoxos-giantfox-front.png) no-repeat 100% 130px;
            z-index: 110;
        }
    }
}

.marketplacegiantfox {
    position: absolute;
    display: block;
    top: 1576px;
    left: 50%;
    .transition(all ease 0.6s);
    &.giantfox-foreground {
        background: url(/media/img/firefox/partners/marketplace-giantfox-front.png) no-repeat 100% top;
        z-index: 120;
        width: 454px;
        height: 520px;
        margin-left: 86px;
    }
    &.giantfox-background {
        background: url(/media/img/firefox/partners/marketplace-giantfox-back.png) no-repeat 0 0 ;
        z-index: 112;
        width: 580px;
        height: 240px;
        margin-left: -40px;
    }
}

/* }}} */
/* {{{ Overview Article */

#overview {
    background: url(/media/img/firefox/partners/overview-bg.png) center top no-repeat;
    h2 {
        font-size: 84px;
        letter-spacing: -4px;
        .span-all();
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .intro {
        p {
            .open-sans-light;
            font-size: 17px;
            letter-spacing: -0.01em;
        }
        #more-partners {
            margin: -30px 0 0 0;
            float: left;
            display: block;
            font-family: Journal;
            font-size: 23px;
            color: @textColorTertiary;
            padding-right: 50px;
            text-align: right;
            width: 210px;
            background: url(/media/img/firefox/partners/partners-arrow.png) 100% 50% no-repeat;
        }
        .partner-button {
            display: none;
            margin-top: -35px;
            float: right;
        }
        #overview-news {
            display: none;
            clear: both;
            .clearfix();
            background: url(/media/img/firefox/partners/divider.png) 50% 100% no-repeat;
            padding-bottom: @baseLine;
            min-height: 60px;
            position: relative;
            img {
                position: absolute;
                top: 0;
                left: 0;
            }
            h3 {
                color: @textColorSecondary;
                margin-left: 150px;
                text-align: left;
                font-weight: bold;
                font-size: 18px;
                text-transform: uppercase;
            }
        }
    }
    .overview-actions {
        display: none;
        margin: 0;
        padding: 0;
        li {
            width: 33%;
            float: left;
        }
    }

}

/* }}} */
/* {{{ Firefox OS section */

#os {
    .intro {
        z-index: 50;
        padding-top: 140px;
        .span(7);
        .narrow {
            margin-right: 140px;
        }
    }
    h3 {
        font-size: 42px;
    }
    #os-operators-intro {
        .span-all();
        padding-top: 120px;
        h3 {
            font-size: 50px;
            letter-spacing: -2px;
            margin-left: 0;
            margin-bottom: 40px;
            text-align: center;
        }
        .left {
            .span(6);
            margin-left: 0;
            ul li {
                margin: 10px 20px;
            }
            .promos div {
                .span-all();
            }
        }
        .logos {
            .span(6);
            margin-right: 0;
        }
    }
    #os-operators {
        padding-top: 0;
    }
}

/* }}} */
/* {{{ Marketplace section */

#marketplace {
    z-index: 111;
    .article-header {
        h2 {
            padding-top: 15px;
            margin-right: 5px;
        }
    }
    .intro {
        padding-top: 140px;
        z-index: 50;
    }
    #marketplace-overview {
        .intro {
            .span(8);
            width: 580px;
            .narrow {
                margin-right: 140px;
            }
            .promos {
                .span(8);
                width: 580px;
                margin-left: 0;
                margin-right: 0;
                div {
                    .span(4);
                    width: 280px;
                    &:first-child { margin-left: 0; }
                    &:last-child  { margin-right: 0; }
                }
            }
        }
    }
    #marketplace-operators {
        padding-top: 0;
        .intro {
            .span-all();
            h3 {
                font-size: 48px;
                letter-spacing: -2px;
                text-align: center;
                margin-bottom: @baseLine * 2;
            }
        }
        .left {
            .span(6);
            margin-left: 0;
            .partner-button {
                a:first-child {
                    margin-right: 20px;
                }
            }
            ul li {
                margin: 10px 20px;
            }
        }
        .logos {
            .span(6);
            margin-right: 0;
        }
    }
    #marketplace-developers {
        padding-top: 0;
        .article-content {
            .intro {
                .span-all();
                h3 {
                    font-size: 48px;
                    letter-spacing: -2px;
                    text-align: center;
                    margin-bottom: @baseLine * 2;
                }
                .promos {
                    .span(5);
                    padding-top: 0;
                    margin-right: 0;
                    margin-bottom: @baseLine;
                    clear: none;
                    div {
                        .span-all();
                        margin-bottom: @baseLine;
                    }
                    .register {
                        margin-right: 0;
                        .button {
                            .inline-block();
                            padding-left: 30px;
                            padding-right: 30px;
                        }
                    }
                }
            }
            .left {
                .span(7);
                margin-left: 0;
                .partner-button {
                    a:first-child {
                        margin-right: 20px;
                    }
                }
                ul li {
                    margin: 10px 20px;
                }
            }
        }
    }
}

/* }}} */
/* {{{ Firefox for Android section */

#android {
    z-index: 121; // 1 higher than #phone-container
    .intro {
        padding-top: 140px;
        .span(6);
        .narrow {
            margin-right: 100px;
        }
    }
    .article-header {
        h2 {
            font-size: 78px;
        }
    }
    .android-dude {
        position: absolute;
        display: block;
        top: 405px;
        left: -75px;
        width: 231px;
        height: 256px;
        background: url(/media/img/firefox/partners/android-dude.png) no-repeat 0 0;
        z-index: 130;
    }
    #android-partner {
        padding-top: 0;
        background: url(/media/img/firefox/partners/android-partners-bg.png) 50% 200px no-repeat;
        .intro {
            padding-top: 120px;
            h3 {
                font-size: 42px;
            }
            h4 {
                font-size: 26px;
            }
        }
        .android-dude {
            top: 440px;
            left: 560px;
        }
    }
    .android-tablet {
        width: 1021px;
        height: 662px;
        background: url(/media/img/firefox/partners/android-tablet-frame.png) no-repeat 0 0;
        position: absolute;
        top: 120px;
        left: 50%;
        margin-left: -40px;
        .transition(all ease 0.6s);
        .tablet-screen {
            position: absolute;
            display: block;
            top: 58px;
            right: 127px;
            width: 767px;
            height: 488px;
            background: url(/media/img/firefox/partners/android-tablet-screen.jpg) no-repeat 0 0;
        }
    }
}

/* }}} */
/* {{{ Left menu */

body #partner-nav {
    position: fixed;
    z-index: 1000;
    top: 160px;
    left: 30px;
    width: 60px;
    margin-left: auto;
    padding: 0;
}

#explore {
    position: absolute;
    display: block;
    z-index: 1;
    font-family: Journal;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    letter-spacing: normal;
    line-height: 0.9;
    top: 80px;
    left: 34px;
    width: 50px;
    padding: 0 0 18px 50px;
    margin: 0;
    font-size: 23px;
    background: url(/media/img/firefox/partners/menu-icons.png) 0 -720px no-repeat;
}

.menu {
    margin-bottom: @baseLine;
    li {
        display: block;
        float: none;
        width: auto;
        a {
            @shadow: 0 -1px rgba(0,0,0,0.1) inset;
            .box-shadow(@shadow);
        }
        &:first-child a {
            border-radius: 3px 3px 0 0;
        }
        &:last-child a {
            border-radius: 0 0 3px 3px;
        }
        &.title {
            border-radius: 3px 3px 0 0;
            background: #515f6a;
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
        }
    }
}

#mwc-menu {
    display: block;
}

#overlay-menu {
    display: block;
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 200;
    border-radius: 3px;
    .transition(right linear 0.3s);
    li {
        width: 40px;
        border-radius: 3px;
        padding-left: 14px;
        background: #515f6a url(/media/img/firefox/partners/menu-icons.png) 0 -910px no-repeat;
        a {
            background-position: 50% -790px;
            border-radius: 0 3px 3px 0;
            width: 40px;
            height: 40px;
        }
        &.active a { background-position: 50% -850px; }
    }
    &.form-open {
        right: 320px;
        @shadow: 0 1px rgba(255,255,255,0.8);
        opacity: 0.9;
        .box-shadow(@shadow);
        li {
            background-position: -46px -910px;
            @shadow: 1px 2px 2px rgba(0,0,0,0.4) inset, 0 0 0 1px rgba(0,0,0,0.2) inset;
            .box-shadow(@shadow);
            a {
                background-position: 50% -850px;
                background-color: rgba(255,255,255,0.4);
            }
        }
    }
}

/* }}} */
/* {{{ Large Phone */

.phone-container {
    height: 586px;
    width: 327px;
    position: absolute;
    z-index: 120;
    top: 200px;
    left: 50%;
    margin-left: 166px;
    .phone {
        height: 586px;
        width: 327px;
    }
    .phone-overlay {
        position: absolute;
        top: 0;
        left: 0;
        background: url(/media/img/firefox/partners/phone-overlay.png) 0 0 no-repeat;
        height: 586px;
        width: 327px;
    }
    .screen {
        position: absolute;
        top: 79px;
        left: 41px;
        height: 373px;
        width: 244px;
        display: none;
    }
    #screen-overview {
        display: block;
        background: url(/media/img/firefox/partners/screen-overview.jpg) 0 0 no-repeat;
        #foxtail {
            height: 156px;
            width: 156px;
            position: absolute;
            top: 90px;
            left: 30px;
            background: url(/media/img/firefox/partners/foxtail.png) 0 0 no-repeat;
        }
    }
    #screen-os {
        background: url(/media/img/firefox/partners/phone-os-screenshots.jpg) 0 0 repeat-x;

        -moz-animation: os-screenslide 20s ease infinite alternate;
        -webkit-animation: os-screenslide 20s ease infinite alternate;
        animation: os-screenslide 20s ease infinite alternate;
    }

    @keyframes os-screenslide {
          0% { background-position: 0 0; }
         20% { background-position: 0 0; }
         22% { background-position: -244px 0; }
         42% { background-position: -244px 0; }
         44% { background-position: -488px 0; }
         64% { background-position: -488px 0; }
         66% { background-position: -732px 0; }
        100% { background-position: -732px 0; }
    }

    @-moz-keyframes os-screenslide {
          0% { background-position: 0 0; }
         20% { background-position: 0 0; }
         22% { background-position: -244px 0; }
         42% { background-position: -244px 0; }
         44% { background-position: -488px 0; }
         64% { background-position: -488px 0; }
         66% { background-position: -732px 0; }
        100% { background-position: -732px 0; }
    }

    @-webkit-keyframes os-screenslide {
          0% { background-position: 0 0; }
         20% { background-position: 0 0; }
         22% { background-position: -244px 0; }
         42% { background-position: -244px 0; }
         44% { background-position: -488px 0; }
         64% { background-position: -488px 0; }
         66% { background-position: -732px 0; }
        100% { background-position: -732px 0; }
    }

    #screen-marketplace {
        background: url(/media/img/firefox/partners/phone-marketplace-screenshot.jpg) 0 0 no-repeat;
    }
}

.phone-shadow {
    opacity: 0;
    position: absolute;
    top: 682px;
    left: 50%;
    margin-left: 166px;
    width: 327px;
    height: 104px;
    background: url(/media/img/firefox/partners/phone-shadow.png) 50% 100% no-repeat;
    background-size: 50%;
    .transition(all ease 0.5s);
    &.visible {
        background-size: 100%;
        opacity: 1;
    }
}

.android-phone-container {
    top: auto;
    bottom: -600px;
    height: 636px;
    .transition(all ease 1s);
    .phone {
        background: url(/media/img/firefox/partners/phone-android-shadow.png) 50% 100% no-repeat;
        height: 636px;
    }
    .phone-overlay {
        background: url(/media/img/firefox/partners/phone-android.png) 50% 100% no-repeat;
        height: 636px;
    }
    &.android-phone-visible {
        bottom: 30px;
    }
}

/* }}} */
/* {{{ Form */

#form {
    .close { display: inline; }
    display: none;
    height: 820px;
}

#pageslide {
    background: #1e2023 url(/media/img/firefox/partners/form-bg.jpg) 0 0 repeat-y;
}

/* }}} */
/* {{{ l10n tweaks */

/* German */

html[lang="de"] {
    #overview h2 {
        font-size: 66px;
    }
}

html[lang="fr"],
html[lang="pt-BR"] {
    #overview h2 {
        font-size: 72px;
    }
}

html[lang="pl"] {
    #explore,
    #overview .intro #more-partners {
        display: none;
    }
}

html[lang="zh-CN"] {
    #overview .intro p {
        padding: 0 10px;
    }
}

/* }}} */


Smooth scroll on form ease-out.

Smooth scroll on form ease-out.

.signup-form-container {
  vertical-align: top;
  margin: 54px 0 54px 0;
  .signup-form {
    padding: 0 20px;
    max-width: 800px;
    display: block;
    margin: 0 auto;
  }
  .checkbox {
    width: auto;
    display: inline;
    height: auto;
    margin-right: 5px;
  }
  h3 {
    font-size: 1.5rem;
    font-weight: 400;
  }
  p {
    font-size: 0.9375rem;
    line-height: 1.4375rem;
  }
  label {
    font-family: Fira Sans Condensed, sans-serif;
    color: #5b555c;
    font-size: 0.75rem;
  }
  .privacy-policy {
    font-family: Fira Sans Condensed, sans-serif;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #5b555c;
    margin: 20px 0;
  }
  input, select {
    font-family: Fira Sans Condensed, sans-serif;
    letter-spacing: 0.03rem;
    font-size: 0.9rem;
    color: #5b555c;
    width: 100%;
    display: block;
    height: 57px;
    @media screen and (min-width: 1800px) {
      height: 70px;
    }
    border: 1px solid #CFCFCF;
    padding: 14px;
    &:invalid {
      box-shadow: none;
    }
    &.invalid {
      border-color: #FF0000;
    }
    &:focus {
      border-color: #17FFFF;
    }
    margin-bottom: -1px;
    position: relative;
    &.invalid {
      z-index: 1;
    }
    &:focus {
      z-index: 2;
    }
  }
  select {
    &:invalid {
      color: #767676;
    }
    background: #FFFFFF;
  }
  .get-involved {
    display: none;
    &:after {
      display: none;
    }
  }
  @media screen and (max-width: 992px) {
    .sticky .get-involved {
      position: fixed;
      display: flex;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  @media screen and (min-width: 992px) {
    width: 600px;
    margin: 0;
    .signup-form {
      width: 100%;
      margin: 0 0 144px 0;
      padding: 0 55px 0 55px;
      h3 {
        margin-top: 64px;
      }
      transition: margin-top ease-out 1s;
    }
  }
  @media screen and (min-width: 1200px) {
    .signup-form {
      width: 100%;
      padding: 0 84px 0 84px;
    }
  }
  @media screen and (min-width: 1800px) {
    width: 645px;
  }
}

.signup-form-container {
  vertical-align: top;
  margin: 54px 0 54px 0;
  .signup-form {
    padding: 0 20px;
    max-width: 800px;
    display: block;
    margin: 0 auto;
  }
  .checkbox {
    width: auto;
    display: inline;
    height: auto;
    margin-right: 5px;
  }
  h3 {
    font-size: 1.5rem;
    font-weight: 400;
  }
  p {
    font-size: 0.9375rem;
    line-height: 1.4375rem;
  }
  label {
    font-family: Fira Sans Condensed, sans-serif;
    color: #5b555c;
    font-size: 0.75rem;
  }
  .privacy-policy {
    font-family: Fira Sans Condensed, sans-serif;
    font-size: 0.75rem;
    line-height: 1.2rem;
    color: #5b555c;
    margin: 20px 0;
  }
  input, select {
    font-family: Fira Sans Condensed, sans-serif;
    letter-spacing: 0.03rem;
    font-size: 0.9rem;
    color: #5b555c;
    width: 100%;
    display: block;
    height: 57px;
    @media screen and (min-width: 1800px) {
      height: 70px;
    }
    border: 1px solid #CFCFCF;
    padding: 14px;
    &:invalid {
      box-shadow: none;
    }
    &.invalid {
      border-color: #FF0000;
    }
    &:focus {
      border-color: #17FFFF;
    }
    margin-bottom: -1px;
    position: relative;
    &.invalid {
      z-index: 1;
    }
    &:focus {
      z-index: 2;
    }
  }
  select {
    &:invalid {
      color: #767676;
    }
    background: #FFFFFF;
  }
  .get-involved {
    display: none;
    &:after {
      display: none;
    }
  }
  @media screen and (max-width: 992px) {
    .sticky .get-involved {
      position: fixed;
      display: flex;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  @media screen and (min-width: 992px) {
    width: 600px;
    margin: 0;
    .signup-form {
      width: 100%;
      margin: 0 0 144px 0;
      padding: 0 55px 0 55px;
      h3 {
        margin-top: 64px;
      }
      transition: margin-top 1s;
    }
  }
  @media screen and (min-width: 1200px) {
    .signup-form {
      width: 100%;
      padding: 0 84px 0 84px;
    }
  }
  @media screen and (min-width: 1800px) {
    width: 645px;
  }
}


style(left-panel): add hover background with slight transition

// .project-list-item {
//   border: 3px solid @border;
//   project {
//     box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
//
//     .title {
//       color: @black;
//     }
//
//     &.selected:hover, &.selected {
//       background-image: linear-gradient(-270deg,rgba(255,255,255,.5) 100%,rgba(255,255,255,0) 100%);
//
//       .title {
//         color: @accent;
//       }
//     }
//   }
// }

.main {
  .left {
    background-color: @accent-backdrop;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);

    .main-header {
      background-color: @accent-backdrop;
    }

    .main-button-group {
      .main-button {
        background: @white;
        color: @primary;
        border-left: 1px solid @accent-backdrop;
      }

      .main-button:active, .main-button:hover {
        color: @white;
        background-image: -webkit-radial-gradient(49% 0 circle, #C632AC 0, #8A2979 100%);
        background-image: radial-gradient(circle at 49% 0, #C632AC 0, #8A2979 100%);
      }
    }

    .projectList {
      .vGrid {
        background-color: transparent !important;
        border: 0 !important;

        .vGrid-row {
          color: @boulder;
          background-color: @athens-gray !important;
          transition: background-color 100ms ease-out;

          &:hover {
            background-color: @backdrop !important;
          }
        }

        .vGrid-row-selected {
          color: @accent;
          background-color: @backdrop !important;
        }
      }
    }

    .project-list-header {
      background-color: @border;
      color: @primary;
    }
  }

  .right {
    .title {
      border-bottom: 1px solid rgba(0, 0, 0, .12);
    }
  }
}

.plugin-content-container {
  color: @dove-gray;
}

// .project-list-item {
//   border: 3px solid @border;
//   project {
//     box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
//
//     .title {
//       color: @black;
//     }
//
//     &.selected:hover, &.selected {
//       background-image: linear-gradient(-270deg,rgba(255,255,255,.5) 100%,rgba(255,255,255,0) 100%);
//
//       .title {
//         color: @accent;
//       }
//     }
//   }
// }

.main {
  .left {
    background-color: @accent-backdrop;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);

    .main-header {
      background-color: @accent-backdrop;
    }

    .main-button-group {
      .main-button {
        background: @white;
        color: @primary;
        border-left: 1px solid @accent-backdrop;
      }

      .main-button:active, .main-button:hover {
        color: @white;
        background-image: -webkit-radial-gradient(49% 0 circle, #C632AC 0, #8A2979 100%);
        background-image: radial-gradient(circle at 49% 0, #C632AC 0, #8A2979 100%);
      }
    }

    .projectList {
      .vGrid {
        background-color: transparent !important;
        border: 0 !important;

        .vGrid-row {
          color: @boulder;
          background-color: @athens-gray !important;
        }

        .vGrid-row-selected {
          color: @violet-red;
          background-color: @backdrop !important;
        }
      }
    }

    .project-list-header {
      background-color: @border;
      color: @primary;
    }
  }

  .right {
    .title {
      border-bottom: 1px solid rgba(0, 0, 0, .12);
    }
  }
}

.plugin-content-container {
  color: @dove-gray;
}


No neg

No neg