Editor allows overflow-x:visible with exception for categorizer

Summary:
ToolTips were becoming impossible to read due to the editor's
overflow-x:scroll styling. I reset the editor to have overflow-x:visible
and gave categorizers overflow-x:scroll only when nested in the editor
interface. As far as I can tell, no other widgets are able to overflow in
the same manner, so it seems fine to make an exception for the categorizer.
Long-term, if we want the tooltips to overflow, then the editor will need
to have overflow-x:visible (i.e., there's no way around it).

Fixes T2591

Test Plan:
- See a long categorizer [here](http://localhost:9000/test.html#content=%7B%22question%22%3A%7B%22content%22%3A%22%5Cn%5Cn%5B%5B%E2%98%83%20categorizer%201%5D%5D%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22categorizer%201%22%3A%7B%22type%22%3A%22categorizer%22%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22items%22%3A%5B%22ababababababbababbabababbabababbabababbabababbabababa%22%5D%2C%22categories%22%3A%5B%22Dogs%22%2C%22Cats%22%5D%2C%22values%22%3A%5B%5D%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22type%22%3A%22multiple%22%2C%22options%22%3A%7B%22content%22%3A%22%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%7D%7D%2C%22calculator%22%3Afalse%7D%2C%22hints%22%3A%5B%5D%7D).
    - Notice that it has a scroll bar in the editor pane, but not the widget pane (i.e., on the left but not on the right).
    - Try some of the tooltips--notice that they overflow.
- For another example, see the sorter [here](http://localhost:9000/test.html#content=%7B%22question%22%3A%7B%22content%22%3A%22%5Cn%5Cn%5B%5B%E2%98%83%20sorter%201%5D%5D%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22sorter%201%22%3A%7B%22type%22%3A%22sorter%22%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22correct%22%3A%5B%22%24x%24%22%2C%22%24y%24%22%2C%22%24z%24%22%5D%2C%22layout%22%3A%22horizontal%22%2C%22padding%22%3Atrue%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22type%22%3A%22multiple%22%2C%22options%22%3A%7B%22content%22%3A%22%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%7D%7D%2C%22calculator%22%3Afalse%7D%2C%22hints%22%3A%5B%5D%7D). Again, the tooltips overflow.

Reviewers: jack

Reviewed By: jack

Subscribers: eater

Maniphest Tasks: T2591

Differential Revision: http://phabricator.khanacademy.org/D9513

// Use this file only for editor styles
// (changes to the renderer will not work in production)
//

// Variables
// Should be consistent with webapp's variables.less

// Colors
@grayDarker:            #333;
@gray:                  #999;
@grayExtraLight:        #eee;
@grayLighter:           #ddd;
@white:                 #fff;

// Editor Style
@editorBorderWidth:     1px;
@editorBorder:          @editorBorderWidth solid @grayLighter;
@editorBorderRadius:    3px;
@editorPadding:         10px;

@widgetBorderWidth:     1px;
@widgetBorderColor:     #ccc;
@widgetBorder:          @widgetBorderWidth solid @widgetBorderColor;
@widgetBorderRadius:    3px;

// Dimensions
@questionWidth:         480px;
@leftCellWidth:         360px;
@cellPadding:           30px;
@rightCellWidth:        @questionWidth + 2 * @cellPadding;

// Colors
@wrongRed:              #f2dede;
@correctGreen:          #dff0d8;
@ungradedBlue:          #d9edf7;

.border-box-sizing() {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

}

.size(@width: auto, @height: auto) {
    height: @height;
    width: @width;
}

.position(@position: static, @top: auto, @right: auto, @bottom: auto, @left: auto) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}

.user-select (@select) {
  -webkit-user-select: @select;
  -khtml-user-drag: @select;
  -khtml-user-select: @select;
  -moz-user-select: @select;
  -ms-user-select: @select;
  user-select: @select;
}

.pod-title {
    background-color: @grayExtraLight;
    border: 1px solid @grayLighter;
    border-bottom: 0;
    font-size: 1.25em;
    padding: 4px 10px;
    border-radius: @editorBorderRadius @editorBorderRadius 0 0;
    &.closed {
        border-radius: @editorBorderRadius;
    }
}

.smiley {
    position: absolute;
    left: 0px;
    top: 4px;
}

//
// General editor styles
//

.perseus-single-editor {
    box-sizing: border-box;
    width: @leftCellWidth;
}

.perseus-json-editor {
    width: 100%;
    font-family: monospace;
    height: 500px;
}

.perseus-json-editor.invalid {
    background-color: #ffe6e6;
}

.perseus-textarea-pair {
    border: 1px solid @grayLighter;
    font-size: 12px;
    line-height: 1.6;
    position: relative;
}

.perseus-textarea-pair > .perseus-textarea-underlay {
    color: transparent;
    margin-bottom: 12px;
    padding: @editorPadding;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.perseus-textarea-pair > .perseus-textarea-underlay b {
    font-weight: normal;
    background-color: #dfd;
}

.perseus-textarea-pair > .perseus-textarea-underlay b.selected {
    background-color: #ddf;
}

.perseus-textarea-pair > .perseus-textarea-underlay b.error {
    background-color: #fcc;
}

.perseus-textarea-pair > textarea {
    background: transparent;
    border: 0;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font: inherit;
    height: 100%;
    left: 0;
    padding: @editorPadding;
    position: absolute;
    resize: none;
    top: 0;
    width: 100%;

    /* for Firefox, this helps. it seems that the underlay is still 1px off and
    I'm not really sure why. not too noticeable if we're just setting the
    background color though. */
    margin: 0;
}

.perseus-widget-row {
    margin: 7px 0;
    width: 100%;

    .perseus-widget-left-col,
    .perseus-widget-right-col {
        display: inline-block;
        width: 50%;

        .range-input {
            float: right;
            margin-right: 5px;
        }
    }
}

.perseus-answer-editor {
    .perseus-textarea-pair {
        min-height: 50px;
    }
}

.perseus-answer-options {
    border: @editorBorder;
    border-bottom: 0;
    padding: @editorPadding;
}

.perseus-answer-widget {
    border: @editorBorder;
    border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
    padding: @editorPadding;
}

.perseus-widget-editor {
    border: @editorBorder;
    border-radius: @editorBorderRadius;
    margin-top: 10px;

    .perseus-widget-editor-title {
        .pod-title;
        border: 0;
        color: inherit;
        display: block;
        text-decoration: none;

        > i {
            float: left;
            font-size: 14px;
            margin-right: 10px;
        }
    }

    .perseus-widget-editor-content {
        border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
        border-top: @editorBorder;
        padding: @editorPadding;
        transition: all 0s;

        &.enter {}
        &.leave {
            display: none;
        }
    }

    // Are any widgets capable of overflowing in the editor interface?
    .categorizer-container {
        overflow-x: scroll;
    }

}

.perseus-editor-widgets-selectors {
    background-color: @grayExtraLight;
    border: 1px solid @grayLighter;
    border-top: 0;
    border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
    padding: 5px @editorPadding;
}

.perseus-editor-widgets > div.selected > strong {
    background-color: #ddf;
}

.perseus-editor-widgets .warning {
    background-color: #ffcccc;
    padding: 4px;
    margin: 4px;
}
//
// Misc styles
//

.MathJax .math {
    // override athena silliness
    color: inherit;
}

//
// DOM-based styles that overwrite rules set in khan-exercise.css
//

#perseus {
    margin: 20px;

    // Question area styles
    #problemarea {
        /* Override the min-height property used for displaying the problem.
        While editing, the size of the editor itself is a better constraint on
        the size of the problemarea, and having a smaller problemarea is nicer
        if it means it aligns better with the editor. */
        min-height: 0;

        // Force the question width to make too-wide items visually overflow,
        // to indicate that there is a problem to content creators
        width: @questionWidth;

        #workarea {
            margin: 0; // override ke
            outline: 1px solid #ccc;
        }
    }

    // Answer area styles
    #answer_area {
        position: relative;

        #examples-show {
            float: none;
            left: 109px;
            position: absolute;
            top: -30px;
        }

        #solutionarea, .answer-buttons {
            border: 0; // override ke
            box-sizing: border-box;
            margin: 0; // override ke
            width: 225px;
        }

        #solutionarea {
            margin-left: 0; // override ke
            margin-top: 20px;
            outline: 1px solid #ccc;
            // Make too-wide items visually overflow, to indicate
            // that there is a problem to content creators
            overflow-x: visible;
        }
    }

    // Space out the question, answer, and hint areas
    .perseus-question-container > div, .perseus-answer-container > div {
        padding-bottom: 25px;
    }

    // Add radio choice/hint button styles
    .add-choice-container,
    .add-hint-container {
        margin-bottom: 20px;
        text-align: left;
    }
}

//
// Table styles for Editor/Renderer pairs
//

.perseus-editor-table {
    display: table;
    table-layout: fixed;
}

.perseus-editor-row {
    display: table-row;
}

.perseus-editor-left-cell {
    display: table-cell;
    padding-right: 30px;
    vertical-align: top;
    width: @leftCellWidth;
}

.perseus-editor-right-cell {
    background-color: #f7f7f7;
    .border-box-sizing();
    display: table-cell;
    padding: @cellPadding;
    vertical-align: top;
    width: @rightCellWidth;
}

//
// Hint Editor
//

.perseus-hint-editor {
    padding-bottom: 20px;

    .perseus-single-editor {
        margin-bottom: 5px;
    }

    .reorder-hints a {
        font-size: 16px;

        &:hover, &:active {
            color: #000;
            text-decoration: none;
        }

        &.hidden {
            visibility: hidden;
        }
    }

    .remove-hint {
        padding: 0 10px;
        float: right;
    }
}

.framework-perseus .perseus-hint-renderer {
    div.paragraph {
        margin: 0px 0px 22px 0px;
    }
    outline: 1px solid #ccc;

    // Force the hint width to make too-wide items visually overflow,
    // to indicate that there is a problem to content creators
    width: @questionWidth;
}

//
// Button Group
//

.perseus-button-group {
    display: inline-block;

    & > button {
        background-color: white;
        border: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-left: 0;
        cursor: pointer;
        margin: 0;
        padding: 5px 10px;
        position: relative; // for hover

        &.selected {
            background-color: #ddd;
        }

        &:first-child {
            border-left: 1px solid #ccc;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        &:last-child {
            border-right: 1px solid #ccc;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        &:hover, &:focus {
            outline: 2px solid #999;
            outline-offset: -1px;
            z-index: 2;
        }
    }
}

//
// More Options
//
.more-options-container {
    display: block;
    padding-bottom: 24px;
    position: relative;

    .more-options-title {
        border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
        color: @gray;
        height: 20px;
        font-size: 14px;
        padding: 5px 0;
        width: @leftCellWidth - 2 * @editorBorderWidth;

        position: absolute;
        left: -1 * @editorPadding;
        right: 0;
        bottom: -1 * @editorPadding;

        text-align: center;

        &:hover {
            background-color: @grayLighter;
            cursor: pointer;
        }
    }
}

//
// Info tips
//

.perseus-info-tip {
    margin-left: 5px;
    position: relative;
}

.perseus-info-tip > i {
    cursor: pointer;
}

.perseus-info-tip-container {
    position: absolute;
    top: -12px;
    left: 22px;
    z-index: 1000;
}

.perseus-info-tip-triangle {
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 0;
    z-index: 1;
}

.perseus-info-tip-triangle:before {
    border-bottom: 9px solid transparent;
    border-right: 9px solid #bbb;
    border-top: 9px solid transparent;
    content: " ";
    display: block;
    height: 0;
    right: 0;
    position: absolute;
    top: 0;
    width: 0;
}

.perseus-info-tip-triangle:after {
    border-bottom: 9px solid transparent;
    border-right: 9px solid @white;
    border-top: 9px solid transparent;
    content: " ";
    display: block;
    height: 0;
    right: -1px;
    position: absolute;
    top: 0;
    width: 0;
}

.perseus-info-tip-content-container {
    display: block;
    background: @white;
    padding: 5px 10px;
    width: 240px;
}

.perseus-info-tip-content-container p {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.perseus-info-tip-content-container p + p {
    margin-top: 22px;
}

//
// Dropdown editor
//
.perseus-widget-dropdown .remove-choice {
    margin-bottom:10px;
}
//
// Input Number / Text Input
//
.perseus-input-number-editor {
    font-size: 14px;

    .ui-title, .msg-title {
        display: inline-block;
        text-align: center;
    }

    .ui-title {
        width: 100px;
    }

    .msg-title {
        margin-left: 5px;
        width: 230px;
    }

    .options-container {
        padding-left: 30px;
    }

    .input-answer-editor-value,
    .input-answer-editor-message {
        display: inline-block;
    }

    .input-answer-editor-value-container {
        border: @widgetBorder;
        border-radius: @widgetBorderRadius;
        float: left;
        .size(100px, 53px);
        overflow: hidden;
        position: relative;

        .numeric-input-value {
            border: 0;
            font-size: 13px;
            outline-offset: -3px;
            width: 100%;
        }

        &.with-max-error {
            .numeric-input-value {
                width: 60%;
            }
        }

        .max-error-container {
            display: inline-block;
            width: 40%;
            .max-error-plusmn {
                cursor: default;
                display: inline-block;
                width: 20%;
            }
            .number-input {
                border: 0;
                font-size: 13px;
                width: 80%;
            }
        }
    }

    .options-toggle,
    .answer-status {
        height: 26px;
        line-height: 26px;
        outline-offset: -3px;
        vertical-align: middle;
    }

    .value-divider {
        border-top: @widgetBorder;
    }

    .options-toggle {
        background-color: #eee;
        border-left: @widgetBorder;
        .border-box-sizing();
        color: #444;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        width: 25%;
        &:hover {
            background-color: #ccc;
        }
    }

    .is-strict-indicator {
        background-color: @ungradedBlue;
        border-bottom: @widgetBorder;
        border-right: @widgetBorder;
        cursor: default;
        font-size: 16px;
        line-height: 12px;
        .size(12px, 12px);
        text-align: center;
        .position(absolute, 0, auto, auto, 0);
        .user-select(none);
    }

    .simplify-indicator {
        border-top: @widgetBorder;
        border-right: @widgetBorder;
        cursor: default;
        font-size: 10px;
        line-height: 13px;
        .size(12px, 13px);
        text-align: center;
        .position(absolute, 12px, auto, auto, 0);
        .user-select(none);

        &.optional {
            background-color: @correctGreen;
        }
        &.enforced {
             background-color: @wrongRed;
        }
    }

    .answer-status {
        color: inherit;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        width: 75%;
        .user-select(none);

        &.wrong {
            background-color: @wrongRed;
        }

        &.correct {
            background-color: @correctGreen;
        }

        &.ungraded {
            background-color: @ungradedBlue;
        }
    }

    .input-answer-editor-message {
        margin-left: 5px;

        .perseus-single-editor{
            font-family: 'Lucida Grande';
            width: 230px;

            .perseus-textarea-pair > textarea,
            .perseus-textarea-underlay {
                padding: 5px;
            }

            .perseus-textarea-pair {
                border-color: @widgetBorderColor;
                border-radius: @editorBorderRadius;
                min-height: 53px;
            }

            .perseus-textarea-underlay {
                margin-bottom: 0; //override
            }
        }
    }
}

//
// Radio editor / renderer
//

.perseus-widget-radio {

    .choice-editor {
        .perseus-single-editor {
            margin-bottom: 0;
        }
        &.correct textarea {
            background: #aaffaa;
        }
        &.incorrect textarea {
            background: #ffcccc;
        }
    }

    textarea {
        // http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
        &::-webkit-input-placeholder {
            color: #777;
        }
        &:-moz-placeholder {
            color: #777;
            opacity: 1;
        }
        &::-moz-placeholder {
            color: #777;
            opacity: 1;
        }
        &:-ms-input-placeholder {
            color: #777;
        }
    }

    .clue-editor {
        .perseus-textarea-pair {
            border-top: 0;
        }
    }

    .choice-clue-editors,
    .choice-editor,
    .clue-editor {
        display: inline-block;
    }

    .delete-choice {
        margin-left: 5px;
        padding: 5px;
    }

    .perseus-single-editor {
        border: 0;
        display: inline-block;
        margin: 0 0 5px;
        vertical-align: top;
        width: 280px;

        p {margin: 0;}
    }
}

.perseus-widget-radio .perseus-textarea-pair {
    & > textarea, > .perseus-textarea-underlay {
        padding: 5px;
    }
}

.perseus-widget-editor-content {
    .perseus-widget-radio {
        .checkbox, .delete-choice {
            position: relative;
            top: -10px;
        }
    }
}

#solutionarea .perseus-widget-radio li {
    padding: 7px 0;
}

//
// Table of values editor
//

.framework-perseus table.perseus-widget-table-of-values {
    th {
        .perseus-single-editor {
            width: 80px;
            margin-bottom: 6px;
        }
        .perseus-textarea-pair,
        .perseus-single-editor {
            height: 50px;
        }
    }
}

//
// Categorization Editor
//

.categorization-container.categorization-container-editor {
    @categoryWidth: 160px;
    width: 350px;
    margin-bottom: 160px;

    .card input {
        margin: 7px 3px 7px 13px;
        font-size: 12px;
        display: block;
        width: 81%;
    }

    .category {
        float: left;
        padding: 5px;
        width: @categoryWidth;
    }
    .categories {
        width: (@categoryWidth + 16px);
    }

    .perseus-textarea-underlay {
        margin-bottom: 0;
    }

    .drag-bar {
        float: left;
        font-size: 10px;
        padding: 2px 0;
        height: 70%;
        margin-top: 3px;
    }
    .header {
        margin-bottom: 8px;
        input {
            display: block;
            margin-right: 24px;
            width: 76%;
        }
        .remove {
            position: relative;
            top: -14px;
            left: 12px;
            float: right;
            width: 20px;
            height: 20px;
            padding: 2px;
            color: #666;
            &:hover {
                color: @grayDarker;
            }
            cursor: pointer;
        }
    }
    .delete-item-area {
        position: absolute;
        width: 150px;
        height: 60px;
        padding-top: 40px;
        bottom: -150px;
        left: 10px;
        border: dashed 2px #888;
        color: #888;
        &.target {
            border-color: black;
            color: @grayDarker;
        }
        text-align: center;
        font-size: 20px;
    }
    .card {
        width: (@categoryWidth - 30px);
        padding: 0;
        &.dragging .drag-bar {
            margin-left: 2px;
        }
    }
}

.categorization-editor-area {
    height: 30px;

    .add-item {
        float: left;
        margin-left: 17px;
    }

    .add-category {
        margin-left: 173px;
    }
}

//
// Graph Editor
//

.perseus-widget-interactive-graph {
    display: block;

    .graph-settings {
        .graph-settings-axis-label {
            border: 1px solid #ccc;
            border-radius: 5px;
            display: inline-block;
            padding: 5px 5px;
            width: 70px;
            float: right;
            margin: 0 5px;
        }
        .graph-settings-background-url {
            width: 250px;
        }
    }

    .graph-settings, .image-settings, .misc-settings {
        padding-bottom: 5px;
    }

    .image-settings, .misc-settings, .type-settings {
        border-top: 1px solid black;
        padding-top: 5px;
    }

}

//
// Plot Editor
//

.perseus-widget-plotter-editor {
    .plotter-categories, .pic-url {
        width: 70%;
    }
}

//
// Text List Editors (Orderer, Matcher, Sorter)
//
.perseus-text-list-editor {
    input[type=text] {
        padding: 3px;
        margin-right: 5px;
        min-width: 20px;
        max-width: 340px;
    }

    &.layout-horizontal input[type=text] {
        float: left;
    }
}

.perseus-matcher-editor {
    .perseus-text-list-editor {
        float: left;
        max-width: 50%;

        input[type=text] {
            max-width: 90%;
        }
    }

    input[type=text] {
        width: 46%;
    }

    input[type=text] + input[type=text] {
        margin-left: 2%;
    }
}

// Use this file only for editor styles
// (changes to the renderer will not work in production)
//

// Variables
// Should be consistent with webapp's variables.less

// Colors
@grayDarker:            #333;
@gray:                  #999;
@grayExtraLight:        #eee;
@grayLighter:           #ddd;
@white:                 #fff;

// Editor Style
@editorBorderWidth:     1px;
@editorBorder:          @editorBorderWidth solid @grayLighter;
@editorBorderRadius:    3px;
@editorPadding:         10px;

@widgetBorderWidth:     1px;
@widgetBorderColor:     #ccc;
@widgetBorder:          @widgetBorderWidth solid @widgetBorderColor;
@widgetBorderRadius:    3px;

// Dimensions
@questionWidth:         480px;
@leftCellWidth:         360px;
@cellPadding:           30px;
@rightCellWidth:        @questionWidth + 2 * @cellPadding;

// Colors
@wrongRed:              #f2dede;
@correctGreen:          #dff0d8;
@ungradedBlue:          #d9edf7;

.border-box-sizing() {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

}

.size(@width: auto, @height: auto) {
    height: @height;
    width: @width;
}

.position(@position: static, @top: auto, @right: auto, @bottom: auto, @left: auto) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}

.user-select (@select) {
  -webkit-user-select: @select;
  -khtml-user-drag: @select;
  -khtml-user-select: @select;
  -moz-user-select: @select;
  -ms-user-select: @select;
  user-select: @select;
}

.pod-title {
    background-color: @grayExtraLight;
    border: 1px solid @grayLighter;
    border-bottom: 0;
    font-size: 1.25em;
    padding: 4px 10px;
    border-radius: @editorBorderRadius @editorBorderRadius 0 0;
    &.closed {
        border-radius: @editorBorderRadius;
    }
}

.smiley {
    position: absolute;
    left: 0px;
    top: 4px;
}

//
// General editor styles
//

.perseus-single-editor {
    box-sizing: border-box;
    width: @leftCellWidth;
}

.perseus-json-editor {
    width: 100%;
    font-family: monospace;
    height: 500px;
}

.perseus-json-editor.invalid {
    background-color: #ffe6e6;
}

.perseus-textarea-pair {
    border: 1px solid @grayLighter;
    font-size: 12px;
    line-height: 1.6;
    position: relative;
}

.perseus-textarea-pair > .perseus-textarea-underlay {
    color: transparent;
    margin-bottom: 12px;
    padding: @editorPadding;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.perseus-textarea-pair > .perseus-textarea-underlay b {
    font-weight: normal;
    background-color: #dfd;
}

.perseus-textarea-pair > .perseus-textarea-underlay b.selected {
    background-color: #ddf;
}

.perseus-textarea-pair > .perseus-textarea-underlay b.error {
    background-color: #fcc;
}

.perseus-textarea-pair > textarea {
    background: transparent;
    border: 0;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font: inherit;
    height: 100%;
    left: 0;
    padding: @editorPadding;
    position: absolute;
    resize: none;
    top: 0;
    width: 100%;

    /* for Firefox, this helps. it seems that the underlay is still 1px off and
    I'm not really sure why. not too noticeable if we're just setting the
    background color though. */
    margin: 0;
}

.perseus-widget-row {
    margin: 7px 0;
    width: 100%;

    .perseus-widget-left-col,
    .perseus-widget-right-col {
        display: inline-block;
        width: 50%;

        .range-input {
            float: right;
            margin-right: 5px;
        }
    }
}

.perseus-answer-editor {
    .perseus-textarea-pair {
        min-height: 50px;
    }
}

.perseus-answer-options {
    border: @editorBorder;
    border-bottom: 0;
    padding: @editorPadding;
}

.perseus-answer-widget {
    border: @editorBorder;
    border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
    padding: @editorPadding;
}

.perseus-widget-editor {
    border: @editorBorder;
    border-radius: @editorBorderRadius;
    margin-top: 10px;

    .perseus-widget-editor-title {
        .pod-title;
        border: 0;
        color: inherit;
        display: block;
        text-decoration: none;

        > i {
            float: left;
            font-size: 14px;
            margin-right: 10px;
        }
    }

    .perseus-widget-editor-content {
        border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
        border-top: @editorBorder;
        padding: @editorPadding;
        transition: all 0s;
        overflow-x: scroll;

        &.enter {}
        &.leave {
            display: none;
        }
    }

}

.perseus-editor-widgets-selectors {
    background-color: @grayExtraLight;
    border: 1px solid @grayLighter;
    border-top: 0;
    border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
    padding: 5px @editorPadding;
}

.perseus-editor-widgets > div.selected > strong {
    background-color: #ddf;
}

.perseus-editor-widgets .warning {
    background-color: #ffcccc;
    padding: 4px;
    margin: 4px;
}
//
// Misc styles
//

.MathJax .math {
    // override athena silliness
    color: inherit;
}

//
// DOM-based styles that overwrite rules set in khan-exercise.css
//

#perseus {
    margin: 20px;

    // Question area styles
    #problemarea {
        /* Override the min-height property used for displaying the problem.
        While editing, the size of the editor itself is a better constraint on
        the size of the problemarea, and having a smaller problemarea is nicer
        if it means it aligns better with the editor. */
        min-height: 0;

        // Force the question width to make too-wide items visually overflow,
        // to indicate that there is a problem to content creators
        width: @questionWidth;

        #workarea {
            margin: 0; // override ke
            outline: 1px solid #ccc;
        }
    }

    // Answer area styles
    #answer_area {
        position: relative;

        #examples-show {
            float: none;
            left: 109px;
            position: absolute;
            top: -30px;
        }

        #solutionarea, .answer-buttons {
            border: 0; // override ke
            box-sizing: border-box;
            margin: 0; // override ke
            width: 225px;
        }

        #solutionarea {
            margin-left: 0; // override ke
            margin-top: 20px;
            outline: 1px solid #ccc;
            // Make too-wide items visually overflow, to indicate
            // that there is a problem to content creators
            overflow-x: visible;
        }
    }

    // Space out the question, answer, and hint areas
    .perseus-question-container > div, .perseus-answer-container > div {
        padding-bottom: 25px;
    }

    // Add radio choice/hint button styles
    .add-choice-container,
    .add-hint-container {
        margin-bottom: 20px;
        text-align: left;
    }
}

//
// Table styles for Editor/Renderer pairs
//

.perseus-editor-table {
    display: table;
    table-layout: fixed;
}

.perseus-editor-row {
    display: table-row;
}

.perseus-editor-left-cell {
    display: table-cell;
    padding-right: 30px;
    vertical-align: top;
    width: @leftCellWidth;
}

.perseus-editor-right-cell {
    background-color: #f7f7f7;
    .border-box-sizing();
    display: table-cell;
    padding: @cellPadding;
    vertical-align: top;
    width: @rightCellWidth;
}

//
// Hint Editor
//

.perseus-hint-editor {
    padding-bottom: 20px;

    .perseus-single-editor {
        margin-bottom: 5px;
    }

    .reorder-hints a {
        font-size: 16px;

        &:hover, &:active {
            color: #000;
            text-decoration: none;
        }

        &.hidden {
            visibility: hidden;
        }
    }

    .remove-hint {
        padding: 0 10px;
        float: right;
    }
}

.framework-perseus .perseus-hint-renderer {
    div.paragraph {
        margin: 0px 0px 22px 0px;
    }
    outline: 1px solid #ccc;

    // Force the hint width to make too-wide items visually overflow,
    // to indicate that there is a problem to content creators
    width: @questionWidth;
}

//
// Button Group
//

.perseus-button-group {
    display: inline-block;

    & > button {
        background-color: white;
        border: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-left: 0;
        cursor: pointer;
        margin: 0;
        padding: 5px 10px;
        position: relative; // for hover

        &.selected {
            background-color: #ddd;
        }

        &:first-child {
            border-left: 1px solid #ccc;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        &:last-child {
            border-right: 1px solid #ccc;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        &:hover, &:focus {
            outline: 2px solid #999;
            outline-offset: -1px;
            z-index: 2;
        }
    }
}

//
// More Options
//
.more-options-container {
    display: block;
    padding-bottom: 24px;
    position: relative;

    .more-options-title {
        border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
        color: @gray;
        height: 20px;
        font-size: 14px;
        padding: 5px 0;
        width: @leftCellWidth - 2 * @editorBorderWidth;

        position: absolute;
        left: -1 * @editorPadding;
        right: 0;
        bottom: -1 * @editorPadding;

        text-align: center;

        &:hover {
            background-color: @grayLighter;
            cursor: pointer;
        }
    }
}

//
// Info tips
//

.perseus-info-tip {
    margin-left: 5px;
    position: relative;
}

.perseus-info-tip > i {
    cursor: pointer;
}

.perseus-info-tip-container {
    position: absolute;
    top: -12px;
    left: 22px;
    z-index: 1000;
}

.perseus-info-tip-triangle {
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 0;
    z-index: 1;
}

.perseus-info-tip-triangle:before {
    border-bottom: 9px solid transparent;
    border-right: 9px solid #bbb;
    border-top: 9px solid transparent;
    content: " ";
    display: block;
    height: 0;
    right: 0;
    position: absolute;
    top: 0;
    width: 0;
}

.perseus-info-tip-triangle:after {
    border-bottom: 9px solid transparent;
    border-right: 9px solid @white;
    border-top: 9px solid transparent;
    content: " ";
    display: block;
    height: 0;
    right: -1px;
    position: absolute;
    top: 0;
    width: 0;
}

.perseus-info-tip-content-container {
    display: block;
    background: @white;
    padding: 5px 10px;
    width: 240px;
}

.perseus-info-tip-content-container p {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.perseus-info-tip-content-container p + p {
    margin-top: 22px;
}

//
// Dropdown editor
//
.perseus-widget-dropdown .remove-choice {
    margin-bottom:10px;
}
//
// Input Number / Text Input
//
.perseus-input-number-editor {
    font-size: 14px;

    .ui-title, .msg-title {
        display: inline-block;
        text-align: center;
    }

    .ui-title {
        width: 100px;
    }

    .msg-title {
        margin-left: 5px;
        width: 230px;
    }

    .options-container {
        padding-left: 30px;
    }

    .input-answer-editor-value,
    .input-answer-editor-message {
        display: inline-block;
    }

    .input-answer-editor-value-container {
        border: @widgetBorder;
        border-radius: @widgetBorderRadius;
        float: left;
        .size(100px, 53px);
        overflow: hidden;
        position: relative;

        .numeric-input-value {
            border: 0;
            font-size: 13px;
            outline-offset: -3px;
            width: 100%;
        }

        &.with-max-error {
            .numeric-input-value {
                width: 60%;
            }
        }

        .max-error-container {
            display: inline-block;
            width: 40%;
            .max-error-plusmn {
                cursor: default;
                display: inline-block;
                width: 20%;
            }
            .number-input {
                border: 0;
                font-size: 13px;
                width: 80%;
            }
        }
    }

    .options-toggle,
    .answer-status {
        height: 26px;
        line-height: 26px;
        outline-offset: -3px;
        vertical-align: middle;
    }

    .value-divider {
        border-top: @widgetBorder;
    }

    .options-toggle {
        background-color: #eee;
        border-left: @widgetBorder;
        .border-box-sizing();
        color: #444;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        width: 25%;
        &:hover {
            background-color: #ccc;
        }
    }

    .is-strict-indicator {
        background-color: @ungradedBlue;
        border-bottom: @widgetBorder;
        border-right: @widgetBorder;
        cursor: default;
        font-size: 16px;
        line-height: 12px;
        .size(12px, 12px);
        text-align: center;
        .position(absolute, 0, auto, auto, 0);
        .user-select(none);
    }

    .simplify-indicator {
        border-top: @widgetBorder;
        border-right: @widgetBorder;
        cursor: default;
        font-size: 10px;
        line-height: 13px;
        .size(12px, 13px);
        text-align: center;
        .position(absolute, 12px, auto, auto, 0);
        .user-select(none);

        &.optional {
            background-color: @correctGreen;
        }
        &.enforced {
             background-color: @wrongRed;
        }
    }

    .answer-status {
        color: inherit;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        width: 75%;
        .user-select(none);

        &.wrong {
            background-color: @wrongRed;
        }

        &.correct {
            background-color: @correctGreen;
        }

        &.ungraded {
            background-color: @ungradedBlue;
        }
    }

    .input-answer-editor-message {
        margin-left: 5px;

        .perseus-single-editor{
            font-family: 'Lucida Grande';
            width: 230px;

            .perseus-textarea-pair > textarea,
            .perseus-textarea-underlay {
                padding: 5px;
            }

            .perseus-textarea-pair {
                border-color: @widgetBorderColor;
                border-radius: @editorBorderRadius;
                min-height: 53px;
            }

            .perseus-textarea-underlay {
                margin-bottom: 0; //override
            }
        }
    }
}

//
// Radio editor / renderer
//

.perseus-widget-radio {

    .choice-editor {
        .perseus-single-editor {
            margin-bottom: 0;
        }
        &.correct textarea {
            background: #aaffaa;
        }
        &.incorrect textarea {
            background: #ffcccc;
        }
    }

    textarea {
        // http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
        &::-webkit-input-placeholder {
            color: #777;
        }
        &:-moz-placeholder {
            color: #777;
            opacity: 1;
        }
        &::-moz-placeholder {
            color: #777;
            opacity: 1;
        }
        &:-ms-input-placeholder {
            color: #777;
        }
    }

    .clue-editor {
        .perseus-textarea-pair {
            border-top: 0;
        }
    }

    .choice-clue-editors,
    .choice-editor,
    .clue-editor {
        display: inline-block;
    }

    .delete-choice {
        margin-left: 5px;
        padding: 5px;
    }

    .perseus-single-editor {
        border: 0;
        display: inline-block;
        margin: 0 0 5px;
        vertical-align: top;
        width: 280px;

        p {margin: 0;}
    }
}

.perseus-widget-radio .perseus-textarea-pair {
    & > textarea, > .perseus-textarea-underlay {
        padding: 5px;
    }
}

.perseus-widget-editor-content {
    .perseus-widget-radio {
        .checkbox, .delete-choice {
            position: relative;
            top: -10px;
        }
    }
}

#solutionarea .perseus-widget-radio li {
    padding: 7px 0;
}

//
// Table of values editor
//

.framework-perseus table.perseus-widget-table-of-values {
    th {
        .perseus-single-editor {
            width: 80px;
            margin-bottom: 6px;
        }
        .perseus-textarea-pair,
        .perseus-single-editor {
            height: 50px;
        }
    }
}

//
// Categorization Editor
//

.categorization-container.categorization-container-editor {
    @categoryWidth: 160px;
    width: 350px;
    margin-bottom: 160px;

    .card input {
        margin: 7px 3px 7px 13px;
        font-size: 12px;
        display: block;
        width: 81%;
    }

    .category {
        float: left;
        padding: 5px;
        width: @categoryWidth;
    }
    .categories {
        width: (@categoryWidth + 16px);
    }

    .perseus-textarea-underlay {
        margin-bottom: 0;
    }

    .drag-bar {
        float: left;
        font-size: 10px;
        padding: 2px 0;
        height: 70%;
        margin-top: 3px;
    }
    .header {
        margin-bottom: 8px;
        input {
            display: block;
            margin-right: 24px;
            width: 76%;
        }
        .remove {
            position: relative;
            top: -14px;
            left: 12px;
            float: right;
            width: 20px;
            height: 20px;
            padding: 2px;
            color: #666;
            &:hover {
                color: @grayDarker;
            }
            cursor: pointer;
        }
    }
    .delete-item-area {
        position: absolute;
        width: 150px;
        height: 60px;
        padding-top: 40px;
        bottom: -150px;
        left: 10px;
        border: dashed 2px #888;
        color: #888;
        &.target {
            border-color: black;
            color: @grayDarker;
        }
        text-align: center;
        font-size: 20px;
    }
    .card {
        width: (@categoryWidth - 30px);
        padding: 0;
        &.dragging .drag-bar {
            margin-left: 2px;
        }
    }
}

.categorization-editor-area {
    height: 30px;

    .add-item {
        float: left;
        margin-left: 17px;
    }

    .add-category {
        margin-left: 173px;
    }
}

//
// Graph Editor
//

.perseus-widget-interactive-graph {
    display: block;

    .graph-settings {
        .graph-settings-axis-label {
            border: 1px solid #ccc;
            border-radius: 5px;
            display: inline-block;
            padding: 5px 5px;
            width: 70px;
            float: right;
            margin: 0 5px;
        }
        .graph-settings-background-url {
            width: 250px;
        }
    }

    .graph-settings, .image-settings, .misc-settings {
        padding-bottom: 5px;
    }

    .image-settings, .misc-settings, .type-settings {
        border-top: 1px solid black;
        padding-top: 5px;
    }

}

//
// Plot Editor
//

.perseus-widget-plotter-editor {
    .plotter-categories, .pic-url {
        width: 70%;
    }
}

//
// Text List Editors (Orderer, Matcher, Sorter)
//
.perseus-text-list-editor {
    input[type=text] {
        padding: 3px;
        margin-right: 5px;
        min-width: 20px;
        max-width: 340px;
    }

    &.layout-horizontal input[type=text] {
        float: left;
    }
}

.perseus-matcher-editor {
    .perseus-text-list-editor {
        float: left;
        max-width: 50%;

        input[type=text] {
            max-width: 90%;
        }
    }

    input[type=text] {
        width: 46%;
    }

    input[type=text] + input[type=text] {
        margin-left: 2%;
    }
}


Explain negative margin in comment

Explain negative margin in comment

@import "../lib/bootstrap/custom.bootstrap.less";
@import "../lib/bootstrap/custom.bootstrap.import.less";

@dream: #8f0ad7;
@make: #0a90d7;
@boost: #0ad78c;

.front-page {
  .jumbotron {
    // No white space between navbar and full width jumbotron on front page
    margin-top: -20px;
  }
  .communities {
    .make-row();
    & > div {
      .make-sm-column(4);
      text-align: center;
      p {
        margin-top: 10px;
      }
      & > a {
        .btn;
        .btn-block;
      }
      &.dream > a {
        .button-variant(#fff, @dream, darken(@dream, 5%));
      }
      &.make > a {
        .button-variant(#fff, @make, darken(@make, 5%));
      }
      &.boost > a {
        .button-variant(#fff, @boost, darken(@boost, 5%));
      }
    }
  }
}

@import "../lib/bootstrap/custom.bootstrap.less";
@import "../lib/bootstrap/custom.bootstrap.import.less";

@dream: #8f0ad7;
@make: #0a90d7;
@boost: #0ad78c;

.front-page {
  .jumbotron {
    margin-top: -20px;
  }
  .communities {
    .make-row();
    & > div {
      .make-sm-column(4);
      text-align: center;
      p {
        margin-top: 10px;
      }
      & > a {
        .btn;
        .btn-block;
      }
      &.dream > a {
        .button-variant(#fff, @dream, darken(@dream, 5%));
      }
      &.make > a {
        .button-variant(#fff, @make, darken(@make, 5%));
      }
      &.boost > a {
        .button-variant(#fff, @boost, darken(@boost, 5%));
      }
    }
  }
}


bugfix (styles)

bugfix (styles)

@import "vendor/bootstrap/bootstrap.less";

@body_bg_color:'#fff';

img {
	max-width: 100%;
	height: auto;

	// The size of the logo on the main navbar
	&#site-logo {
		max-height: 1em;
		width: auto;
	}
}

.wp-caption {
	max-width: 100%;
	height: auto;
}

body {
	overflow-x: hidden;
	ms-word-wrap: break-word;
	word-wrap: break-word;

	&.container.boxed {
		padding-left: 0;
		padding-right: 0;
		box-shadow: 0 0 1em 1px rgba(50,50,50,0.1)
	}

	&.admin-bar.body-nav-fixed-top {
		#banner-header {
			top: 32px;
		}
	}

	&.body-nav-fixed-top {
		margin-top: @navbar-height;
	}
}

#banner-header {
	margin-bottom: 0;

	&.mode-full {
		.container {
			margin: 0;
		}
	}
}

.featured-image {
	margin-right: 1em;
	float: left;
	max-width: 100%;
}

header.page-header {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

#wrap-main-section {
	padding-top: (@grid-gutter-width / 2);
    background-color: @body_bg_color;
}

#comment-submit {
	.btn;
	.btn-primary;
}

code {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	ms-word-wrap: break-word;
	word-wrap: break-word;
}

.jumbotron,
.container .jumbotron {
	margin-bottom: 0;
	border-radius: 0;
}

.post-meta-element {
	margin-right: @grid-gutter-width;
}

@media (max-width: @screen-sm) {
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12 {
		float: none !important;
	}
}

@media (max-width: @screen-md) {
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12,
	.col-lg-1,
	.col-lg-2,
	.col-lg-3,
	.col-lg-4,
	.col-lg-5,
	.col-lg-6,
	.col-lg-7,
	.col-lg-8,
	.col-lg-9,
	.col-lg-10,
	.col-lg-11,
	.col-lg-12 {
		float: none !important;
	}
}

a.brand-logo {
	h1 {
		margin: 0;
	}
}

ul.nav.navbar-nav.navbar-center {
	text-align: center;
	float: none;

	li {
		float: none;
		display: inline-block;
	}
}

.btn-group.social-share {
	.social-link {
		display: none;
	}
	&:hover {
		.social-share-main {
			border-bottom-right-radius: 0px !important;
			border-top-right-radius: 0px !important;
		}
		a {
			display: block;
			width: auto;
		}
	}
}

@import "vendor/bootstrap/bootstrap.less";

@body_bg_color:'#fff';

img {
	max-width: 100%;
	height: auto;

	// The size of the logo on the main navbar
	&#site-logo {
		max-height: 1em;
		width: auto;
	}
}

.wp-caption {
	max-width: 100%;
	height: auto;
}

body {
	overflow-x: hidden;
	ms-word-wrap: break-word;
	word-wrap: break-word;

	&.container.boxed {
		padding-left: 0;
		padding-right: 0;
		box-shadow: 0 0 1em 1px rgba(50,50,50,0.1)
	}

	&.admin-bar {
		#banner-header {
			top: 32px;
		}
	}

	&.body-nav-fixed-top {
		margin-top: @navbar-height;
	}
}

#banner-header {
	margin-bottom: 0;

	&.mode-full {
		.container {
			margin: 0;
		}
	}
}

.featured-image {
	margin-right: 1em;
	float: left;
	max-width: 100%;
}

header.page-header {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

#wrap-main-section {
	padding-top: (@grid-gutter-width / 2);
    background-color: @body_bg_color;
}

#comment-submit {
	.btn;
	.btn-primary;
}

code {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	ms-word-wrap: break-word;
	word-wrap: break-word;
}

.jumbotron,
.container .jumbotron {
	margin-bottom: 0;
	border-radius: 0;
}

.post-meta-element {
	margin-right: @grid-gutter-width;
}

@media (max-width: @screen-sm) {
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12 {
		float: none !important;
	}
}

@media (max-width: @screen-md) {
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12,
	.col-lg-1,
	.col-lg-2,
	.col-lg-3,
	.col-lg-4,
	.col-lg-5,
	.col-lg-6,
	.col-lg-7,
	.col-lg-8,
	.col-lg-9,
	.col-lg-10,
	.col-lg-11,
	.col-lg-12 {
		float: none !important;
	}
}

a.brand-logo {
	h1 {
		margin: 0;
	}
}

ul.nav.navbar-nav.navbar-center {
	text-align: center;
	float: none;

	li {
		float: none;
		display: inline-block;
	}
}

.btn-group.social-share {
	.social-link {
		display: none;
	}
	&:hover {
		.social-share-main {
			border-bottom-right-radius: 0px !important;
			border-top-right-radius: 0px !important;
		}
		a {
			display: block;
			width: auto;
		}
	}
}


update spinner.

update spinner.

@import '../../style/themes/default';
@import '../../style/mixins';

@activityIndicatorPrefixCls: am-activity-indicator;

.@{activityIndicatorPrefixCls} {
  display: flex;
  align-items: center;
  z-index: 999;
  &-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" width="59.75" height="60.25" viewBox="0 -2 59.75 60.25"><path fill="#D8D8D8" d="M29.691-.527c-15.648 0-28.333 12.685-28.333 28.333s12.685 28.333 28.333 28.333c15.648 0 28.333-12.685 28.333-28.333S45.339-.527 29.691-.527zm.184 53.75c-14.037 0-25.417-11.379-25.417-25.417S15.838 2.39 29.875 2.39s25.417 11.379 25.417 25.417-11.38 25.416-25.417 25.416z"/><path fill="none" stroke="#108EE9" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M56.587 29.766c.369-7.438-1.658-14.699-6.393-19.552"/></svg>');
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    animation: spinner-anime 1s steps(12, end) infinite;
  }

  &-tip {
    font-size: @font-size-base;
    margin-left: @h-spacing-md;
    color: @color-text-base;
    opacity: 0.4;
  }

  &.@{activityIndicatorPrefixCls}-toast {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    .@{activityIndicatorPrefixCls}-spinner {
      margin: 0;
    }
    .@{activityIndicatorPrefixCls}-toast {
      display: inline-block;
      position: relative;
      top: 8px;
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    border-radius: 6px;
    background-clip: padding-box;
    color: @color-text-base-inverse;
    background-color: rgba(34, 34, 34, 0.6);
    font-size: @font-size-subhead;
    line-height: 40px;
  }

  &-spinner-lg {
    width: 64px;
    height: 64px;
  }

  @keyframes spinner-anime {
    100% {
      transform: rotate(360deg);
    }
  }
}

@import '../../style/themes/default';
@import '../../style/mixins';

@activityIndicatorPrefixCls: am-activity-indicator;

.@{activityIndicatorPrefixCls} {
  display: flex;
  align-items: center;
  z-index: 999;
  &-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    .encoded-svg-background('<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Oval 4 + Oval 4</title><defs><path d="M20 39.889c10.432 0 18.889-9.457 18.889-19.889C38.889 9.568 30.432.111 20 .111 9.568.111.111 9.568.111 20 .111 30.432 9.568 39.889 20 39.889z" id="a"/><mask id="b" x="0" y="0" width="38.778" height="39.778" fill="#fff"><use xlink:href="#a"/></mask></defs><g stroke-linecap="round" fill="none" fill-rule="evenodd"><use stroke="#CCC" mask="url(#b)" stroke-width="6" xlink:href="#a"/><path d="M37.931 21.307c.246-4.959-1.362-9.703-4.519-12.938" stroke="#108EE9" stroke-width="3"/></g></svg>');
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    animation: spinner-anime 1s steps(12, end) infinite;
  }

  &-tip {
    font-size: @font-size-base;
    margin-left: @h-spacing-md;
    color: @color-text-base;
    opacity: 0.4;
  }

  &.@{activityIndicatorPrefixCls}-toast {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    .@{activityIndicatorPrefixCls}-spinner {
      margin: 0;
    }
    .@{activityIndicatorPrefixCls}-toast {
      display: inline-block;
      position: relative;
      top: 8px;
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    border-radius: 6px;
    background-clip: padding-box;
    color: @color-text-base-inverse;
    background-color: rgba(34, 34, 34, 0.6);
    font-size: @font-size-subhead;
    line-height: 40px;
  }

  &-spinner-lg {
    width: 64px;
    height: 64px;
  }

  @keyframes spinner-anime {
    100% {
      transform: rotate(360deg);
    }
  }
}


Fix for image swipebox to show in RTL interface

swipebox has not built in support for RTL, and without this fix the images will display outside of the window range since it does the calculation for the window location assuming every thing is aligned left, and that is hard-coded in its javascript and cannot be overridden with css.

The easiest fix which is proposed here is to override the global RTL just for swipebox, and make it display in LTR to match its calculations. The problem however, is that the Next and Prev buttons are still in LTR direction which is the opposite of what users of RTL expect.

The other solution is to either replace swipebox with something that is RTL aware, or modify swipebox code to add RTL support.

.rtl {
	direction: rtl;

	// Mix-ins
	.right(@right) {
		right: @right;
		left: auto;
	}

	.left (@left) {
		left: @left;
		right: auto;
	}

	.margin-right(@margin-right) {
		margin-right: @margin-right;
		margin-left: auto;
	}

	.margin-left(@margin-left) {
		margin-left: @margin-left;
		margin-right: auto;
	}

	.padding-right(@padding-right) {
		padding-right: @padding-right;
		padding-left: 0px;
	}

	.padding-left(@padding-left) {
		padding-left: @padding-left;
		padding-right: 0px;
	}

	.side-nav {
		.right(0px);
		.header {
			.right(0px);
			.account-box {
				.info {
					padding: 10px 18px 10px 0px;
					.thumb {
						float: right;
					}
					.thumb:after {
						.right(-14px);
					}
					.data {
						float: right;
						padding: 0 10px 0 25px;
						.wrp {
							text-align: right;
						}
					}
				}
				.options {
					.right(0px);
					.status {
						.padding-right(38px);
					}
					span.soon {
						.left(-30px);
					}
					.status:after {
						.right(18px);
					}
				}
				.options._hidden {
					transform: translateX(100%);
				}
			}
		}
		> .arrow {
			.left(8px);
		}
		.arrow {
			transform: rotateY(180deg);
		}
		.flex-nav.animated-hidden {
			transform: translateX(100%);
		}
		.footer {
			.right(0px);
		}
		.rooms-list {
			direction: ltr;
			> .wrapper {
				direction: rtl;
				.padding-right(8px);
				h3.add-room {
					i {
						.left(6px);
					}
				}
				h3 {
					.padding-right(10px);
				}
				ul a {
					padding: 6px 6px 7px 25px;
				}
			}
		}
		.more {
			padding: 4px 10px 4px 0px;
		}
		.empty {
			.padding-right(10px);
		}
		ul .opt {
			.left(0px);
			.padding-left(10px);
		}
		.flex-nav {
			.right(0px);
			> section {
				.right(0px);
			}
			header {
				.right(0px);
				.padding-right(15px);
				> div {
					text-align: right;
				}
			}
			.content {
				> .wrapper {
					direction: rtl;
				}
			}
			.input-submit {
				margin: 35px -4px 0 0px;
			}
			.button:before {
				.right(0px);
			}
			footer {
				.right(0px);
				text-align: right;
				> div {
					text-align: right;
				}
			}
		}
		.search-form {
			.search {
				.padding-right(25px);
			}
			.margin-left(20px);
		}
		h3 {
			.padding-right(10px);
			&.add-room {
				i {
					.left(6px);
				}
			}
		}
		.unread {
			.left(6px);
		}
	}

	.side-nav:before {
		.right(8px);
	}

	.main-content {
		left: 0;
		right: @rooms-box-width;
		.margin-left(40px);
		&.flex-opened {
			left: @flex-tab-width;
			.flex-tab {
				.left(40px);
			}
		}
	}

	.messages-box {
		margin: 60px 0px 0px 20px;
		.new-message {
			.right(50%);
		}
	}

	.container-bars {
		.upload-progress {
			.upload-progress-progress {
				.right(0px);
			}
			.upload-progress-text {
				> a {
					float: left;
				}
			}
		}
		.unread-bar {
			> a {
				float: left;
			}
		}
	}

	.messages-container {
		.right(0);
		.edit-room-title {
			.margin-right(4px);
		}
		.wrapper {
			.right(0);
		}
		.footer {
			.right(0);
		}
		.message-form {
			> div {
				> .file {
					border-right-width: 1px;
					border-radius: 0 5px 5px 0;
					border-left-style: none;
					border-right-style: solid;
				}
			}
			textarea {
				padding-left: 38px;
				padding-right: 8px;
				border-radius: 5px 0 0 5px;
				text-align: right;
			}
			> .users-typing {
				float: right;
			 }
			> .formatting-tips {
				float: left;
				position: relative;
				q {
					padding: 0 3px 0 0;
					border-right: 3px solid;
					border-left: 0px none;
					border-right-color: #CCC;
				}
			}
		}
	}

	.account-box {
		.options {
			direction: ltr;
			> .wrapper {
				direction: rtl;
			}
		}
	}

	.flex-tab-bar {
		.left(0);
		border-right: 1px solid #eaeaea;
		border-left: none;
		z-index: 13;

		.tab-button {
			&.active {
				.margin-right(-1px);
				border-left: 3px solid #ff0000;
				border-right: unset;
			}
		}
	}

	.flex-tab {
		border-left: unset;
		border-right: 1px solid;
		.left(0);
		.transform(translateX(-100%));
		.control {
			text-align: right;
			padding: 12px 30px 12px;
			> a,
			> form {
				float: right;
			}
			.more {
				.right(0);
				.transform(translateX(27px));
			}
			.search-form {
				padding: 0 0 0 4px;
				width: 100%;
				.icon-plus {
					.right(4px);
				}
			}
			.info-tabs {
				text-align: left;
				.left(20px);
			}
		}
	}

	.flex-opened {
		.flex-tab {
			.control {
				.more {
					.transform(translateX(0));
				}
			}
		}
	}

	.input-line {
		&.search {
			.octicon {
				.right(10px);
			}
			.icon-spin4 {
				.left(5px);
			}
			.icon-search {
				.right(2px);
			}
			input {
				padding-right: 20px;
				padding-left: 8px;
				text-align: right;
			}
		}
		&.double-col {
			> label {
				float: right;
				.padding-left(20px);
				text-align: left;
				padding: 10px 0 10px 20px;
			}
			> div {
				float: right;
				label {
					.margin-left(4px);
					&:nth-last-child(1) {
						.margin-left(0);
					}
					input {
						.margin-left(4px);
					}
				}
			}
		}
	}

	.user-image {
		.avatar {
			&:after {
				.right(-12px);
			}
		}
	}
	.lines .user-image {
		a {
			> div {
				float: right;
			}
		}
		p {
			float: right;
			.padding-right(10px);
		}
	}

	.user-view {
		.thumb {
			float: right;
		}
		nav {
			.margin-right(-4px);
			.back {
				float: left;
			}
		}
		.info {
			.margin-right(120px);
		}
		.stats {
			li {
				border-right: unset;
				border-left: 2px;
			}
		}
	}

	@media all and(max-width: 1100px) {
		#rocket-chat {
			.flex-opened {
				left: 0;
				right: @rooms-box-width;
			}
		}
	}

	@media all and(max-width: 780px) {
		#rocket-chat {
			.main-content {
				right: 0;
			}
			.fixed-title h2 {
				margin-right: 45px;
			}
			&.menu-opened {
				.burger {
					i {
						&:nth-child(1) {
							.transform(translateY(3px) rotate(45deg));
						}
						&:nth-child(3) {
							.transform(translateY(-3px) rotate(-45deg));
						}
					}
				}
				.main-content {
					.transform(translateX(-@rooms-box-width));
				}
			}
		}
	}

	.burger {
		.margin-right(7px);
		.right(0px);
		.unread-burger-alert {
			.left(4px);
		}
	}

	.arrow {
		&:before,
		&:after {
			.calc(right,~"50% - 5px");
		}
		&:before {
			.transform(rotate(135deg) translateX(4px));
		}
		&:after {
			.transform(rotate(-135deg) translateX(4px));
		}
		&.left {
			&:before {
				.transform(rotate(-45deg) translateY(-4px));
			}
			&:after {
				.transform(rotate(45deg) translateY(4px));
			}
		}
		&.top {
			&:before {
				.transform(rotate(45deg) translateX(-2px) translateY(2px));
			}
			&:after {
				.transform(rotate(-45deg) translateX(2px) translateY(2px));
			}
		}
		&.bottom {
			&:before {
				.transform(rotate(-45deg) translateX(-2px) translateY(-2px));
			}
			&:after {
				.transform(rotate(45deg) translateX(2px) translateY(-2px));
			}
		}
		&.close {
			&:before {
				.transform(rotate(-45deg));
			}
			&:after {
				.transform(rotate(45deg));
			}
		}
	}

	.message {
		padding: 18px 70px 4px 20px;
		&.new-day {
			margin-top: 60px;
			&:before {
				.right(0);
				.calc(right,~"50% - 70px");
			}
			&:after {
				.right(0);
				.margin-right(2%);
			}
		}
		.message-dropdown {
			.right(-2px);
			ul {
				li {
					&:first-child {
						padding-right: 6px;
						padding-left: 8px;
						border-left: 1px solid #eee;
						border-right: unset;
					}
					&:last-child {
						padding-left: 13px;
						padding-right: 8px;
					}
				}
			}
		}
		.user {
			margin-left: 5px;
			margin-right: 0;
		}
		.thumb {
			.right(20px);
		}
		.info {
			.edited {
				border-right: 1px dotted #BAB8B8;
				border-left: unset;
				.padding-right(3px);
				.margin-right(3px);
			}
		}
		.private {
			.margin-right(10px); //
		}
		&.sequential {
			padding-top: 4px;
			.info {
				text-align: left;
				.right(5px);
				.edited {
					border-right: 0;
					.margin-right(0);
					.padding-right(0);
				}
				.message-action {
					float: right; //
					.margin-right(1px); //
				}
			}
		}
	}

	blockquote {
		.padding-right(10px);
		&:before {
			.right(0px);
		}
	}

	.first-unread {
		.body {
			&::before {
				right: 20px;
				left: 0px;
			}
			&::after {
				.left(0px);
			}
		}
	}

	.ticks-bar {
		.left(2px);
	}

	.fixed-title {
		padding: 0 20px 0 10px;
		.right(0);
	}

	.list-view {
		> .status {
			.see-all {
				float: left;
			}
		}
		&.uploaded-files-list {
			i {
				float: right;
				.margin-left(10px);
			}
		}
	}

	.page-list {
		.list {
			a {
				.info {
					ul {
						.margin-right(3px);
					}
				}
			}
			.user-image {
				float: left;
				.margin-right(12px);
			}
			table {
				thead {
					th {
						text-align: right;
					}
				}
			}
		}
	}

	.statistics-table {
		th, td {
			text-align: right;
		}
	}

	/* Overridding classes from swipebox.min.css */
	#swipebox-close {
		.left(0);
	}
	@media screen and (min-width:800px) {
		#swipebox-close {
			.left(10px);
		}
	}
	#swipebox-overlay{
		direction: ltr;
	}

	/* Overridding the icons Unicode to suit RTL languages
	 * from _octicons.less */
	.octicon-chevron-right:before { content: '\f0a4'}
	.icon-angle-right:before { content: '\e914'; }
}

.rtl {
	direction: rtl;

	// Mix-ins
	.right(@right) {
		right: @right;
		left: auto;
	}

	.left (@left) {
		left: @left;
		right: auto;
	}

	.margin-right(@margin-right) {
		margin-right: @margin-right;
		margin-left: auto;
	}

	.margin-left(@margin-left) {
		margin-left: @margin-left;
		margin-right: auto;
	}

	.padding-right(@padding-right) {
		padding-right: @padding-right;
		padding-left: 0px;
	}

	.padding-left(@padding-left) {
		padding-left: @padding-left;
		padding-right: 0px;
	}

	.side-nav {
		.right(0px);
		.header {
			.right(0px);
			.account-box {
				.info {
					padding: 10px 18px 10px 0px;
					.thumb {
						float: right;
					}
					.thumb:after {
						.right(-14px);
					}
					.data {
						float: right;
						padding: 0 10px 0 25px;
						.wrp {
							text-align: right;
						}
					}
				}
				.options {
					.right(0px);
					.status {
						.padding-right(38px);
					}
					span.soon {
						.left(-30px);
					}
					.status:after {
						.right(18px);
					}
				}
				.options._hidden {
					transform: translateX(100%);
				}
			}
		}
		> .arrow {
			.left(8px);
		}
		.arrow {
			transform: rotateY(180deg);
		}
		.flex-nav.animated-hidden {
			transform: translateX(100%);
		}
		.footer {
			.right(0px);
		}
		.rooms-list {
			direction: ltr;
			> .wrapper {
				direction: rtl;
				.padding-right(8px);
				h3.add-room {
					i {
						.left(6px);
					}
				}
				h3 {
					.padding-right(10px);
				}
				ul a {
					padding: 6px 6px 7px 25px;
				}
			}
		}
		.more {
			padding: 4px 10px 4px 0px;
		}
		.empty {
			.padding-right(10px);
		}
		ul .opt {
			.left(0px);
			.padding-left(10px);
		}
		.flex-nav {
			.right(0px);
			> section {
				.right(0px);
			}
			header {
				.right(0px);
				.padding-right(15px);
				> div {
					text-align: right;
				}
			}
			.content {
				> .wrapper {
					direction: rtl;
				}
			}
			.input-submit {
				margin: 35px -4px 0 0px;
			}
			.button:before {
				.right(0px);
			}
			footer {
				.right(0px);
				text-align: right;
				> div {
					text-align: right;
				}
			}
		}
		.search-form {
			.search {
				.padding-right(25px);
			}
			.margin-left(20px);
		}
		h3 {
			.padding-right(10px);
			&.add-room {
				i {
					.left(6px);
				}
			}
		}
		.unread {
			.left(6px);
		}
	}

	.side-nav:before {
		.right(8px);
	}

	.main-content {
		left: 0;
		right: @rooms-box-width;
		.margin-left(40px);
		&.flex-opened {
			left: @flex-tab-width;
			.flex-tab {
				.left(40px);
			}
		}
	}

	.messages-box {
		margin: 60px 0px 0px 20px;
		.new-message {
			.right(50%);
		}
	}

	.container-bars {
		.upload-progress {
			.upload-progress-progress {
				.right(0px);
			}
			.upload-progress-text {
				> a {
					float: left;
				}
			}
		}
		.unread-bar {
			> a {
				float: left;
			}
		}
	}

	.messages-container {
		.right(0);
		.edit-room-title {
			.margin-right(4px);
		}
		.wrapper {
			.right(0);
		}
		.footer {
			.right(0);
		}
		.message-form {
			> div {
				> .file {
					border-right-width: 1px;
					border-radius: 0 5px 5px 0;
					border-left-style: none;
					border-right-style: solid;
				}
			}
			textarea {
				padding-left: 38px;
				padding-right: 8px;
				border-radius: 5px 0 0 5px;
				text-align: right;
			}
			> .users-typing {
				float: right;
			 }
			> .formatting-tips {
				float: left;
				position: relative;
				q {
					padding: 0 3px 0 0;
					border-right: 3px solid;
					border-left: 0px none;
					border-right-color: #CCC;
				}
			}
		}
	}

	.account-box {
		.options {
			direction: ltr;
			> .wrapper {
				direction: rtl;
			}
		}
	}

	.flex-tab-bar {
		.left(0);
		border-right: 1px solid #eaeaea;
		border-left: none;
		z-index: 13;

		.tab-button {
			&.active {
				.margin-right(-1px);
				border-left: 3px solid #ff0000;
				border-right: unset;
			}
		}
	}

	.flex-tab {
		border-left: unset;
		border-right: 1px solid;
		.left(0);
		.transform(translateX(-100%));
		.control {
			text-align: right;
			padding: 12px 30px 12px;
			> a,
			> form {
				float: right;
			}
			.more {
				.right(0);
				.transform(translateX(27px));
			}
			.search-form {
				padding: 0 0 0 4px;
				width: 100%;
				.icon-plus {
					.right(4px);
				}
			}
			.info-tabs {
				text-align: left;
				.left(20px);
			}
		}
	}

	.flex-opened {
		.flex-tab {
			.control {
				.more {
					.transform(translateX(0));
				}
			}
		}
	}

	.input-line {
		&.search {
			.octicon {
				.right(10px);
			}
			.icon-spin4 {
				.left(5px);
			}
			.icon-search {
				.right(2px);
			}
			input {
				padding-right: 20px;
				padding-left: 8px;
				text-align: right;
			}
		}
		&.double-col {
			> label {
				float: right;
				.padding-left(20px);
				text-align: left;
				padding: 10px 0 10px 20px;
			}
			> div {
				float: right;
				label {
					.margin-left(4px);
					&:nth-last-child(1) {
						.margin-left(0);
					}
					input {
						.margin-left(4px);
					}
				}
			}
		}
	}

	.user-image {
		.avatar {
			&:after {
				.right(-12px);
			}
		}
	}
	.lines .user-image {
		a {
			> div {
				float: right;
			}
		}
		p {
			float: right;
			.padding-right(10px);
		}
	}

	.user-view {
		.thumb {
			float: right;
		}
		nav {
			.margin-right(-4px);
			.back {
				float: left;
			}
		}
		.info {
			.margin-right(120px);
		}
		.stats {
			li {
				border-right: unset;
				border-left: 2px;
			}
		}
	}

	@media all and(max-width: 1100px) {
		#rocket-chat {
			.flex-opened {
				left: 0;
				right: @rooms-box-width;
			}
		}
	}

	@media all and(max-width: 780px) {
		#rocket-chat {
			.main-content {
				right: 0;
			}
			.fixed-title h2 {
				margin-right: 45px;
			}
			&.menu-opened {
				.burger {
					i {
						&:nth-child(1) {
							.transform(translateY(3px) rotate(45deg));
						}
						&:nth-child(3) {
							.transform(translateY(-3px) rotate(-45deg));
						}
					}
				}
				.main-content {
					.transform(translateX(-@rooms-box-width));
				}
			}
		}
	}

	.burger {
		.margin-right(7px);
		.right(0px);
		.unread-burger-alert {
			.left(4px);
		}
	}

	.arrow {
		&:before,
		&:after {
			.calc(right,~"50% - 5px");
		}
		&:before {
			.transform(rotate(135deg) translateX(4px));
		}
		&:after {
			.transform(rotate(-135deg) translateX(4px));
		}
		&.left {
			&:before {
				.transform(rotate(-45deg) translateY(-4px));
			}
			&:after {
				.transform(rotate(45deg) translateY(4px));
			}
		}
		&.top {
			&:before {
				.transform(rotate(45deg) translateX(-2px) translateY(2px));
			}
			&:after {
				.transform(rotate(-45deg) translateX(2px) translateY(2px));
			}
		}
		&.bottom {
			&:before {
				.transform(rotate(-45deg) translateX(-2px) translateY(-2px));
			}
			&:after {
				.transform(rotate(45deg) translateX(2px) translateY(-2px));
			}
		}
		&.close {
			&:before {
				.transform(rotate(-45deg));
			}
			&:after {
				.transform(rotate(45deg));
			}
		}
	}

	.message {
		padding: 18px 70px 4px 20px;
		&.new-day {
			margin-top: 60px;
			&:before {
				.right(0);
				.calc(right,~"50% - 70px");
			}
			&:after {
				.right(0);
				.margin-right(2%);
			}
		}
		.message-dropdown {
			.right(-2px);
			ul {
				li {
					&:first-child {
						padding-right: 6px;
						padding-left: 8px;
						border-left: 1px solid #eee;
						border-right: unset;
					}
					&:last-child {
						padding-left: 13px;
						padding-right: 8px;
					}
				}
			}
		}
		.user {
			margin-left: 5px;
			margin-right: 0;
		}
		.thumb {
			.right(20px);
		}
		.info {
			.edited {
				border-right: 1px dotted #BAB8B8;
				border-left: unset;
				.padding-right(3px);
				.margin-right(3px);
			}
		}
		.private {
			.margin-right(10px); //
		}
		&.sequential {
			padding-top: 4px;
			.info {
				text-align: left;
				.right(5px);
				.edited {
					border-right: 0;
					.margin-right(0);
					.padding-right(0);
				}
				.message-action {
					float: right; //
					.margin-right(1px); //
				}
			}
		}
	}

	blockquote {
		.padding-right(10px);
		&:before {
			.right(0px);
		}
	}

	.first-unread {
		.body {
			&::before {
				right: 20px;
				left: 0px;
			}
			&::after {
				.left(0px);
			}
		}
	}

	.ticks-bar {
		.left(2px);
	}

	.fixed-title {
		padding: 0 20px 0 10px;
		.right(0);
	}

	.list-view {
		> .status {
			.see-all {
				float: left;
			}
		}
		&.uploaded-files-list {
			i {
				float: right;
				.margin-left(10px);
			}
		}
	}

	.page-list {
		.list {
			a {
				.info {
					ul {
						.margin-right(3px);
					}
				}
			}
			.user-image {
				float: left;
				.margin-right(12px);
			}
			table {
				thead {
					th {
						text-align: right;
					}
				}
			}
		}
	}

	.statistics-table {
		th, td {
			text-align: right;
		}
	}

	/* Overridding classes from swipebox.min.css */
	#swipebox-close {
		.left(0);
	}
	@media screen and (min-width:800px) {
		#swipebox-close {
			.left(10px);
		}
	}

	/* Overridding the icons Unicode to suit RTL languages
	 * from _octicons.less */
	.octicon-chevron-right:before { content: '\f0a4'}
	.icon-angle-right:before { content: '\e914'; }
}


update

update

.archaeological {
    top: 50px !important;
    bottom: 0 !important;
    left: auto !important;
    right: 10px !important;
    margin: auto !important;
    position: absolute;
        a {
            margin: 0px !important;
            padding: 0px !important;
            &:hover {
                margin: 0px !important;
                padding: 0px !important;
            }
        }
}
.leftMenu {
    position:relative;
    float:right;
    margin-right: 67px;
    margin-top: -32px;
}

.archaeological {
    top: 50px !important;
    bottom: 0 !important;
    left: auto !important;
    right: 10px !important;
    margin: auto !important;
    position: absolute;
        a {
            margin: 0px !important;
            padding: 0px !important;
            &:hover {
                margin: 0px !important;
                padding: 0px !important;
            }
        }
}
.leftMenu {
    position:relative;
    float:left;
    margin-right: 67px;
    margin-top: -32px;
}


content load ajax

content load ajax

.archaeological {
    /*
    top: 50px !important;
    bottom: 0 !important;
    left: auto !important;
    right: 10px !important;
    margin: auto !important;
    position: fixed;*/
        a {
            margin: 0px !important;
            padding: 0px !important;
            &:hover {
                margin: 0px !important;
                padding: 0px !important;
            }
        }
}
.leftMenu {
    position:relative;
    float:right;
    margin-right: 67px;
    margin-top: -32px;
}
form .control-label {
    display: block;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
.required {
    color: red !important;
}

div.savestatus{ /* Style for the "Saving Form Contents" DIV that is shown at the top of the form */
    width:200px;
    padding:2px 5px;
    border:1px solid gray;
    background: #fff6e5;
    -webkit-box-shadow: 0 0 8px #818181;
    box-shadow: 0 0 8px #818181;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    color: red;
    position: fixed;
    top: 10px;
    }

form#feedbackform div{ /*CSS used by demo form*/
    margin-bottom:9px;
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

.archaeological {
    top: 50px !important;
    bottom: 0 !important;
    left: auto !important;
    right: 10px !important;
    margin: auto !important;
    position: fixed;
        a {
            margin: 0px !important;
            padding: 0px !important;
            &:hover {
                margin: 0px !important;
                padding: 0px !important;
            }
        }
}
.leftMenu {
    position:relative;
    float:right;
    margin-right: 67px;
    margin-top: -32px;
}
form .control-label {
    display: block;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
.required {
    color: red !important;
}

div.savestatus{ /* Style for the "Saving Form Contents" DIV that is shown at the top of the form */
    width:200px;
    padding:2px 5px;
    border:1px solid gray;
    background: #fff6e5;
    -webkit-box-shadow: 0 0 8px #818181;
    box-shadow: 0 0 8px #818181;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    color: red;
    position: fixed;
    top: 10px;
    }

form#feedbackform div{ /*CSS used by demo form*/
    margin-bottom:9px;
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}


Update grid-constructor.less

Update grid-constructor.less

// Grid column constructor
.grid-constructor(@n, @selector, @padding: 0) {

  // Two lists with breakpoints
  @import 'breakpoints';

  .grid-overloop(@suffix, @breakpoint) {

    @media (min-width: @breakpoint) {
      .grid-loop(@n, @selector, @padding, @i: 1) when (@i =< @n) {

        .@{selector}-@{suffix}-@{i} {
          padding: 0 @padding;
          width: (@i * 100% / @n);
          position: relative;
          min-height: 1px;
          float: left;
          box-sizing: border-box;
        }

        .grid-loop(@n, @selector, @padding, (@i + 1));
      }

      .grid-loop(@n, @selector, @padding);
    }
  }

  .grid-gdd(@n, @i: 1) when (@i =< @n) {

    @suffix: extract(@suffixes, @i);
    @breakpoint: extract(@breakpoints, @i);

    .grid-overloop(@suffix, @breakpoint);

    .grid-gdd(@n, (@i + 1));
  }

  .grid-gdd(length(@suffixes));
}

// Grid column constructor
.grid-constructor(@n, @selector, @padding: 0) {

  // Two lists with breakpoints
  @import 'breakpoints';

  .grid-overloop(@suffix, @breakpoint) {

    @media (min-width: @breakpoint) {
      .grid-loop(@n, @selector, @padding, @i: 1) when (@i =< @n) {

        .@{selector}-@{suffix}-@{i} {
          padding: 0 @padding;
          width: (@i * 100% / @n);
        }

        .grid-loop(@n, @selector, @padding, (@i + 1));
      }

      .grid-loop(@n, @selector, @padding);
    }
  }

  .grid-gdd(@n, @i: 1) when (@i =< @n) {

    @suffix: extract(@suffixes, @i);
    @breakpoint: extract(@breakpoints, @i);

    .grid-overloop(@suffix, @breakpoint);

    .grid-gdd(@n, (@i + 1));
  }

  .grid-gdd(length(@suffixes));
}


Fix dropdown separator style issue in the calendar app

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

/* The container <div> - needed to position the dropdown content */
.dropdown_main () {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    ul.ui-autocomplete {
        background-color: @cp_autocomplete-bg;
        color: @cp_autocomplete-fg;
    }
    ul.ui-menu.ui-widget {
        border: 1px solid @cp_autocomplete-border;
        .ui-state-active {
            background-color: @cp_autocomplete-hover;
            color: @cp_autocomplete-fg;
            border-color: @cp_autocomplete-hover;
        }
    }
    .cp-autocomplete-value {
        display: flex;
        align-items: center;
        .cp-avatar {
            .avatar_main(30px);
            padding: 1px;
        }
        & > span:last-child {
            flex: 1;
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
        }
        span {
            margin: 0px !important;
            border: none !important;
        }
    }
    .cp-dropdown-container {
        @dropdown_font: @colortheme_app-font-size @colortheme_font;
        position: relative;
        display: inline-block;

        .fa {
            font-family: FontAwesome;
        }

        button {
            .fa-caret-down {
                margin-right: 1em !important;
            }
            * {
                .tools_unselectable();
            }
        }

        .cp-dropdown-content {
            display: none;
            position: absolute;
            background-color: @cp_dropdown-bg;
            min-width: 250px;
            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
            z-index: 1000; //Z dropdown content
            max-height: 300px;
            overflow-y: auto;
            font: @dropdown_font;
            line-height: 1em;

            &.cp-dropdown-left {
                right: 0;
            }

            &:hover {
                display: block;
            }

            & > a, & > span {
                color: @cp_dropdown-fg;
                padding: 5px 16px;
                text-decoration: none;
                display: flex;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                float: none;
                text-align: left;
                line-height: 1em;
                align-items: center;

                &:not(.fa) {
                    font: @dropdown_font;
                }
                &.fa, &.cptools {
                    font-size: 18px;
                    &::before {
                        width: 40px;
                        margin-left: -10px;
                        text-align: center;
                    }
                    * {
                        font: @dropdown_font;
                    }
                }

                .fa, .cptools {
                    width: 20px;
                    text-align: center;
                    margin-right: 5px !important;
                }

                &:hover {
                    background-color: @cp_dropdown-bg-hover;
                    color: @cp_dropdown-fg;
                }

                &.cp-dropdown-element-active {
                    background-color: @cp_dropdown-bg-active;
                    color: @cp_dropdown-fg;
                }

                &.cp-app-hidden {
                    display: none;
                }
                &.cp-app-disabled {
                    cursor: not-allowed !important;
                    opacity: 0.5;
                }
            }
            &> span {
                box-sizing: border-box;
                height: 26px;
                border-radius: 0;
                border: 0;
                padding: 0 16px;
                .cp-dropdown-content {
                    margin-top: 26px;
                    left: 0;
                }
                button {
                    padding: 0;
                    text-align: left;
                    margin: 0;
                    border-radius: 0;
                    border: 0;
                    width: 100%;
                    line-height: 1em;
                    .cp-toolbar-drawer-element {
                        margin-left: 10px;
                        display: inline;
                        vertical-align: top;
                    }
                }
            }

            hr {
                margin: 5px 0px;
                height: 1px;
                background: @cp_dropdown-bg-active;
                border: 0 !important;
                border-top: 1px solid rgba(0,0,0,.1) !important;
                & + hr {
                    display: none;
                }
            }

            p {
                min-width: 160px;
                padding: 5px;
                margin: 0;
                white-space: normal;
                text-align: left;
                color: @cp_dropdown-fg;
                font-size: 14px;
                * {
                    font-size: 14px;
                }
            }
        }
    }
}

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

/* The container <div> - needed to position the dropdown content */
.dropdown_main () {
    --LessLoader_require: LessLoader_currentFile();
}
& {
    ul.ui-autocomplete {
        background-color: @cp_autocomplete-bg;
        color: @cp_autocomplete-fg;
    }
    ul.ui-menu.ui-widget {
        border: 1px solid @cp_autocomplete-border;
        .ui-state-active {
            background-color: @cp_autocomplete-hover;
            color: @cp_autocomplete-fg;
            border-color: @cp_autocomplete-hover;
        }
    }
    .cp-autocomplete-value {
        display: flex;
        align-items: center;
        .cp-avatar {
            .avatar_main(30px);
            padding: 1px;
        }
        & > span:last-child {
            flex: 1;
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
        }
        span {
            margin: 0px !important;
            border: none !important;
        }
    }
    .cp-dropdown-container {
        @dropdown_font: @colortheme_app-font-size @colortheme_font;
        position: relative;
        display: inline-block;

        .fa {
            font-family: FontAwesome;
        }

        button {
            .fa-caret-down {
                margin-right: 1em !important;
            }
            * {
                .tools_unselectable();
            }
        }

        .cp-dropdown-content {
            display: none;
            position: absolute;
            background-color: @cp_dropdown-bg;
            min-width: 250px;
            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
            z-index: 1000; //Z dropdown content
            max-height: 300px;
            overflow-y: auto;
            font: @dropdown_font;
            line-height: 1em;

            &.cp-dropdown-left {
                right: 0;
            }

            &:hover {
                display: block;
            }

            & > a, & > span {
                color: @cp_dropdown-fg;
                padding: 5px 16px;
                text-decoration: none;
                display: flex;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                float: none;
                text-align: left;
                line-height: 1em;
                align-items: center;

                &:not(.fa) {
                    font: @dropdown_font;
                }
                &.fa, &.cptools {
                    font-size: 18px;
                    &::before {
                        width: 40px;
                        margin-left: -10px;
                        text-align: center;
                    }
                    * {
                        font: @dropdown_font;
                    }
                }

                .fa, .cptools {
                    width: 20px;
                    text-align: center;
                    margin-right: 5px !important;
                }

                &:hover {
                    background-color: @cp_dropdown-bg-hover;
                    color: @cp_dropdown-fg;
                }

                &.cp-dropdown-element-active {
                    background-color: @cp_dropdown-bg-active;
                    color: @cp_dropdown-fg;
                }

                &.cp-app-hidden {
                    display: none;
                }
                &.cp-app-disabled {
                    cursor: not-allowed !important;
                    opacity: 0.5;
                }
            }
            &> span {
                box-sizing: border-box;
                height: 26px;
                border-radius: 0;
                border: 0;
                padding: 0 16px;
                .cp-dropdown-content {
                    margin-top: 26px;
                    left: 0;
                }
                button {
                    padding: 0;
                    text-align: left;
                    margin: 0;
                    border-radius: 0;
                    border: 0;
                    width: 100%;
                    line-height: 1em;
                    .cp-toolbar-drawer-element {
                        margin-left: 10px;
                        display: inline;
                        vertical-align: top;
                    }
                }
            }

            hr {
                margin: 5px 0px;
                height: 1px;
                background: @cp_dropdown-bg-active;
                & + hr {
                    display: none;
                }
            }

            p {
                min-width: 160px;
                padding: 5px;
                margin: 0;
                white-space: normal;
                text-align: left;
                color: @cp_dropdown-fg;
                font-size: 14px;
                * {
                    font-size: 14px;
                }
            }
        }
    }
}


Start to clean up styles

Start to clean up styles

Remove classes used for things that can be styled by existing classes or ids
and start to simplify.

/* Custom stylings for the Hypothes.is website */

// General ////////////////////////////////
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic);

html, body {
  font-family: "lato", sans-serif;
}

body {
  margin: 0 1em;
}

main {
  margin-bottom: 40px;
}

p {
  font-weight: 300;
  font-size: 1.2em;
}

.list {
  li {
    font-weight: 300;
    font-size: 1.2em;

    p{
      font-size: 1em;
    }
  }
}

.page-header {
  display: none;
}

.primary-color {
  color: @brand-primary;
}

/* This old .redtext class appears in some pages and posts, so I've copied it
over for now. Since this class is used on things like buttons, I've changed the
name to .primary-color */
.redtext {
  color: @brand-primary;
}

.hypo-small {
  font-size: .9em !important;
}

.single {
  article {
    header {
      padding-bottom: 1em;
    }
  }
}

// Menus
.navbar-default {
  background-color: transparent;
  border: none;
  padding-top: 2em;
  padding-bottom: 2em;
}

.hypo-social-media {
  padding-top: 7px;
  font-size: 1.4em;

  a {
    color: #777;
    padding: 3px;

    &:hover {
      color: #333;
    }
  }
}

#menu-footer {
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-bottom: 30px;

  li {
    display: inline-block;

    a {
      color: #777;
      display: block;
      padding: 15px;

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

      &:hover {
        color: #333
      }
    }
  }
}

@media (max-width: @screen-xs-max) {
  #menu-footer li {
    margin: 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

/* Custom stylings for the Hypothes.is website */

// General ////////////////////////////////
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic);

html, body {
  font-family: "lato", sans-serif;
}

p {
  font-weight: 300;
  font-size: 1.2em;
}

.list {
  li {
    font-weight: 300;
    font-size: 1.2em;

    p{
      font-size: 1em;
    }
  }
}

.primary-color {
  color: @brand-primary;
}

/* This old .redtext class appears in some pages and posts, so I've copied it
over for now. Since this class is used on things like buttons, I've changed the
name to .primary-color */
.redtext {
  color: @brand-primary;
}

.hypo-small {
  font-size: .9em !important;
}

.single {
  article {
    header {
      padding-bottom: 1em;
    }
  }
}

/* Provides space at the bottom of the page */
.hypo-space-at-bottom {
  padding-bottom: 40px;
}

// Menus /////////////////////////////////
header.navbar-default {
  background-color: transparent;
  border: none;
  padding-top: 2em;
  padding-bottom: 2em;
}

.navbar-header {
  padding-left: 1em;
}

.hypo-social-media {
  padding-top: 7px;
  font-size: 1.4em;

  a {
    color: #777;
    padding: 3px;

    &:hover {
      color: #333;
    }
  }
}

#menu-footer {
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-bottom: 30px;

  a {
    color: #777;
    padding: 10px 15px;

    &:hover {
      color: #333
    }
  }

  li {
    float: left;
  }
}

@media (max-width: @screen-xs-max) {
  #menu-footer {
    li {
      margin: 0;
    }

    /* Keep footer menu items horizontal on mobile. */
    li {
      float: left;
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }
}