.navbar {
    margin-bottom: 0;
}

#path-breadcrumb {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#footer {
    background-color: #f3f3f3;
    height: 60px;
    padding-top: 20px;
    .container {
    }
}

#login_form {
    #div_id_login, #div_id_password {
        width: 80%;
        margin: 0 auto;

        #id_login, #id_password {
            width: 100%;
        }
    }
    #div_id_remember {
        width: 75%;
        margin: 0 auto;
    }
    #login_buttons {
        width: 200px;
        margin: 0 auto;
    }
}

.socialaccount_ballot {
    li {
        text-align: center;
    }
}

#user-profile {
    img {
        max-width: 100%;
    }
}

.sidebar-collapse {
    cursor: pointer;
}

#collapseArrow {
    color: #008CBA
}

Break words that are too long

body {
    word-wrap: break-word;
}
.navbar {
    margin-bottom: 0;
}

#path-breadcrumb {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#footer {
    background-color: #f3f3f3;
    height: 60px;
    padding-top: 20px;
    .container {
    }
}

#login_form {
    #div_id_login, #div_id_password {
        width: 80%;
        margin: 0 auto;

        #id_login, #id_password {
            width: 100%;
        }
    }
    #div_id_remember {
        width: 75%;
        margin: 0 auto;
    }
    #login_buttons {
        width: 200px;
        margin: 0 auto;
    }
}

.socialaccount_ballot {
    li {
        text-align: center;
    }
}

#user-profile {
    img {
        max-width: 100%;
    }
}

.sidebar-collapse {
    cursor: pointer;
}

#collapseArrow {
    color: #008CBA
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.atom-vim-keymap {
  text-align: center;

  img {
    width: 100%;
    max-width: 1033px;
  }
}

Add resizing to the panel

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.atom-vim-keymap-resizer {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-height: 100px;
  height: -webkit-min-content;
  z-index: 2;
  display: flex;
  flex-direction: row;

  .atom-vim-keymap-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    cursor: row-resize;
    z-index: 3;
    bottom: 0px;
  }

  .atom-vim-keymap {
    min-width: 100%;
    min-height: -webkit-min-content;
    position: relative;

    text-align: center;

    display: block;
    overflow: hidden;

    // Default height
    height: 350px;

    img {
      bottom: 0;
      left: 0;
      margin: auto;
      max-height: 100%;
      max-width: 100%;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.platform-win32 {
  .tree-view-resizer {
    .tree-view-resize-handle {
      cursor: ns-resize;
    }
  }
}


.ui-content-list {
    .item-file {
        padding: 5px;

        p {
            margin: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.component-tab-results {
    padding: 4px 8px;
    .user-select(text);

    .results-header {
        margin-bottom: 20px;
    }
    .results-footer {
        margin-top: 20px;
    }
    .results-body {
        .result-file {
            margin: 10px 0px;

            .file-lines {
                list-style: none;
                margin: 0px;
                padding: 0px;
                margin-left: 20px;

                .number {
                    color: @color-9;
                    width: 40px;
                    text-align: right;
                    display: inline-block;
                }

                .separator {
                    white-space: pre;
                    display: inline-block;
                    width: 20px;
                    text-align: left;
                }
            }
        }
    }
}

Fix display of results tab

.ui-content-list {
    .item-file {
        padding: 5px;

        p {
            margin: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.component-tab-results {
    padding: 4px 8px;
    .user-select(text);
    overflow-y: auto;
    width: 100%;
    height: 100%;

    .results-header {
        margin-bottom: 20px;
    }
    .results-footer {
        margin-top: 20px;
    }
    .results-body {
        .result-file {
            margin: 10px 0px;

            .file-lines {
                list-style: none;
                margin: 0px;
                padding: 0px;
                margin-left: 20px;

                .number {
                    color: @color-9;
                    width: 40px;
                    text-align: right;
                    display: inline-block;
                }

                .separator {
                    white-space: pre;
                    display: inline-block;
                    width: 20px;
                    text-align: left;
                }

                .line {
                    white-space: pre;
                }
            }
        }
    }
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.git-plus {
  .alert {
    color: @text-color-warning;
  }

  .success {
    color: @text-color-success;
  }

  .atom-panel.modal.from-bottom {
    width: 600px;
  }

  .info-view {
    overflow: auto;
  }
}

.meta.diff.range.unified {
  color: @text-color-info;
}

.meta.diff.header {
  color: @text-color-info;
}

.markup.deleted.diff {
  color: @text-color-error;
}

.markup.inserted.diff {
  color: @text-color-success;
}

Update styles to work with shadow DOM

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.git-plus {
  .alert {
    color: @text-color-warning;
  }

  .success {
    color: @text-color-success;
  }

  .atom-panel.modal.from-bottom {
    width: 600px;
  }

  .info-view {
    overflow: auto;
  }
}

atom-text-editor,
atom-text-editor::shadow {
  .meta.diff.range.unified {
    color: @text-color-info;
  }

  .meta.diff.header {
    color: @text-color-info;
  }

  .markup.deleted.diff {
    color: @text-color-error;
  }

  .markup.inserted.diff {
    color: @text-color-success;
  }
}


.spell-check-misspelling .region {
  border-bottom: 1px dashed rgba(250, 128, 114, .5);
}

Make border thicker and dotted

.spell-check-misspelling .region {
  border-bottom: 2px dotted hsla(0, 100%, 60%, 0.75);
}


@import "./variables";

.answer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  margin: 0 10px 0 10px;
  background-color: @cc-orange-light5;
  cursor: pointer;

  &:hover {
    background-color: @cc-orange-light3;
  }
  &:active {
    background-color: @cc-orange;
  }

  .icon {
    width: 24px;
    height: 24px;
  }

  &.noAnswer {
    background-color: white;
  }
}

Fix expanded activity mouse pointer

@import "./variables";

.answer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  margin: 0 10px 0 10px;
  background-color: @cc-orange-light5;
  cursor: pointer;

  &:hover {
    background-color: @cc-orange-light3;
  }
  &:active {
    background-color: @cc-orange;
  }

  .icon {
    width: 24px;
    height: 24px;
  }

  &.noAnswer {
    background-color: white;
    pointer-events: none;
    cursor: auto;
  }
}


body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-family: Roboto,Noto,Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

main {
  padding-top: 56px;
}

section {
  margin: 32px 0;
  padding: 0 16px;
  box-sizing: border-box;

  p > a {
    text-decoration: none;
    color: #2196f3;
  }
}

Fix body scroll for android

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-family: Roboto,Noto,Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}

main {
  padding-top: 56px;
}

section {
  margin: 32px 0;
  padding: 0 16px;
  box-sizing: border-box;

  p > a {
    text-decoration: none;
    color: #2196f3;
  }
}


/**
 * Definitions for icons.
 */
.gmf-icon {
  &:after,
  &:before {
    font-family: gmf-icons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  &.gmf-icon-layers:after {
    content: '\e600';
  }

  &.gmf-icon-list:after {
    content: '\e602';
  }

  &.gmf-icon-map:after {
    content: '\f279';
  }

  &.gmf-icon-map-o:after {
    content: '\f278';
  }

  &.gmf-icon-check:after {
    content: '\e603';
  }

  &.gmf-icon-check-o:after {
    content: '\e604';
  }

  &.gmf-icon-circle:after {
    content: '\e901';
  }

  &.gmf-icon-line:after {
    content: '\e902';
  }

  &.gmf-icon-point:after {
    content: '\e903';
  }

  &.gmf-icon-polygon:after {
    content: '\e904';
  }

  &.gmf-icon-rectangle:after {
    content: '\e905';
  }

  &.gmf-icon-text:after {
    content: '\e906';
  }
}

Remove unused check-o icon css rule

/**
 * Definitions for icons.
 */
.gmf-icon {
  &:after,
  &:before {
    font-family: gmf-icons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  &.gmf-icon-layers:after {
    content: '\e600';
  }

  &.gmf-icon-list:after {
    content: '\e602';
  }

  &.gmf-icon-map:after {
    content: '\f279';
  }

  &.gmf-icon-map-o:after {
    content: '\f278';
  }

  &.gmf-icon-check:after {
    content: '\e603';
  }

  &.gmf-icon-circle:after {
    content: '\e901';
  }

  &.gmf-icon-line:after {
    content: '\e902';
  }

  &.gmf-icon-point:after {
    content: '\e903';
  }

  &.gmf-icon-polygon:after {
    content: '\e904';
  }

  &.gmf-icon-rectangle:after {
    content: '\e905';
  }

  &.gmf-icon-text:after {
    content: '\e906';
  }
}


.grasp-seasons {
    position: absolute;

    &.main {
      top: 0px;
      left: 0px;
      font-size: 18px;
      width: 795px;
      height: 600px;
    }

    &.small-top {
      top: 0px;
      left: 805px;
      width: 395px;
      height: 296px;
      font-size: 14px;
    }

    &.small-bottom {
      top: 305px;
      left: 805px;
      width: 395px;
      height: 296px;
      font-size: 14px;
    }
    .view-manager{
      margin: 0 auto 0;
    }
}
.seasons-container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 860px;
    overflow: auto;
}
.simulation.seasons{
    position: absolute;
    top: 80px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0;
    h1{
      margin-left:20px;
    }
    .detail-toggle-switches{
      margin-right:30px;
    }
}

Fix centering at higher resolutions and adjust padding on drop down form controls to fix Firefox rendering issue

.grasp-seasons {
    position: absolute;

    &.main {
      top: 0px;
      left: 0px;
      font-size: 18px;
      width: 795px;
      height: 600px;
    }

    &.small-top {
      top: 0px;
      left: 805px;
      width: 395px;
      height: 296px;
      font-size: 14px;
    }

    &.small-bottom {
      top: 305px;
      left: 805px;
      width: 395px;
      height: 296px;
      font-size: 14px;
    }
    .view-manager{
      margin: 0 auto 0;
    }
    .form-control{
      padding-top: 3px;
      padding-bottom: 3px;
      padding-left: 6px;
    }
}
.seasons-container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 860px;
    overflow: auto;
}
.simulation.seasons{
    position: absolute;
    top: 80px;
    left: 0px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    height: 100%;
    margin: 0;
    h1{
      margin-left:20px;
    }
    .detail-toggle-switches{
      margin-right:30px;
    }
}


@import './datepicker/datepicker';
[ng-click],
[data-ng-click],
[x-ng-click] {

  cursor: pointer;

  &[disabled],
  &.disabled,
  &[disabled]:hover,
  &.disabled:focus{
    color: inherit;
    cursor: auto;
    pointer-events: none;
    text-decoration: none;
  }
}

Allow bootstrap to set disabled button text color

@import './datepicker/datepicker';
[ng-click],
[data-ng-click],
[x-ng-click] {

  cursor: pointer;

  &[disabled],
  &.disabled,
  &[disabled]:hover,
  &.disabled:focus{
    cursor: auto;
    pointer-events: none;
    text-decoration: none;
  }
}


@import "includes.less";

[class^="icon-"]::before {
    vertical-align: top;
}

[class^="icon-"] {
    color: @icon_color;
    text-decoration: none;
    margin: auto 1px;
}

a [class^="icon-"]:hover {
    color: @hover_color;
    text-decoration: none;
}

a i.nolink:hover {
    color: @icon_color;
}

.input-append {
    .tt-hint {
        .border-box;
    }

    .tt-dropdown-menu {
        width: 100%;
        background: white;
        border: 1px solid skyblue;
        .border-box;
        .border-radius;
    }

    .tt-suggestions p {
        margin: 0 0 3px;
        padding: 0 6px;
    }

    .tt-is-under-cursor {
        background: lightskyblue;
    }

    .btn.add-on {
        height: 24px;
    }

    input {
        width: 132px;
        height: 24px;
    }
}

h1, h2, h3, h4, h5, h6 {
    text-rendering: auto;
}

Resolve style conflict in autocompletion

@import "includes.less";

[class^="icon-"]::before {
    vertical-align: top;
}

[class^="icon-"] {
    color: @icon_color;
    text-decoration: none;
    margin: auto 1px;
}

a [class^="icon-"]:hover {
    color: @hover_color;
    text-decoration: none;
}

a i.nolink:hover {
    color: @icon_color;
}

.input-append {
    .tt-hint {
        .border-box;
    }

    .tt-dropdown-menu {
        width: 100%;
        background: white;
        border: 1px solid skyblue;
        .border-box;
        .border-radius;
    }

    .tt-suggestions p {
        margin: 0 0 3px;
        padding: 0 6px;
    }

    .tt-suggestion {
        font-size: 10pt;
        color: #555;
    }

    .tt-is-under-cursor {
        background: lightskyblue;
    }

    .btn.add-on {
        height: 24px;
    }

    input {
        width: 132px;
        height: 24px;
    }
}

h1, h2, h3, h4, h5, h6 {
    text-rendering: auto;
}


// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.deprecation-cop {
  overflow: auto;
  -webkit-flex: 1;
  background-color: @app-background-color !important;

  .deprecation-info {
    padding: 0 @component-padding;
  }

  .deprecation-info:hover {
    background-color: @background-color-selected !important;
  }

  .collapsed > ul {
    display: none;
  }

  .list {
    list-style-type: none;
    padding: 0;
  }

  .stack-trace {
    background-color: @tool-panel-background-color;
    padding: @component-padding;
    margin-bottom: @component-padding;
  }
}

Make sure links are the correct color

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.deprecation-cop {
  overflow: auto;
  -webkit-flex: 1;
  background-color: @app-background-color !important;

  .deprecation-info {
    padding: 0 @component-padding;
  }

  .deprecation-info:hover {
    background-color: @background-color-selected !important;
  }

  .collapsed > ul {
    display: none;
  }

  .list {
    list-style-type: none;
    padding: 0;
  }

  .stack-trace {
    background-color: @tool-panel-background-color;
    padding: @component-padding;
    margin-bottom: @component-padding;
  }

  a {
    color: @text-color-highlight;
  }
}


& when (@deployments-table-enabled) {

  .deployments-table {

    // TODO: Apply this more globally.
    .deployment-services-list,
    .deployment-start-time,
    .deployment-step,
    .deployment-status-list,
    .deployment-rollback {
      font-size: 1rem;
    }

    .deployment-id {
      .text-overflow;
      margin-bottom: 8px;
    }

    .deployment-service-icon {
      flex-shrink: 0;
      margin: 0 8px;
    }

    .deployment-service-name {
      .text-overflow;
    }

    .deployment-location-list {
      padding-top: 25px;
    }

    .deployment-location-list li,
    .deployment-status-list li {
      margin-bottom: 0;
    }

    .deployment-breadcrumb {

      .deployment-breadcrumb-service-id {
        display: none;
      }

      .deployment-breadcrumb-crumb {
        font-size: 1rem;
        line-height: 32px;
      }
    }
  }

  .deployment-step {
    display: inline-block;
    margin-bottom: 8px;
    margin-left: @base-spacing-unit * 0.25;
  }

  .deployment-status-list {

    li {
      line-height: 32px;
    }
  }
}

Align location and start-time in deployments table

& when (@deployments-table-enabled) {

  .deployments-table {

    // TODO: Apply this more globally.
    .deployment-services-list,
    .deployment-start-time,
    .deployment-step,
    .deployment-status-list,
    .deployment-rollback {
      font-size: 1rem;
    }

    .deployment-id {
      .text-overflow;
      margin-bottom: 8px;
    }

    .deployment-service-icon {
      flex-shrink: 0;
      margin: 0 8px;
    }

    .deployment-service-name {
      .text-overflow;
    }

    .deployment-location-list,
    .deployment-start-time {
      display: block;
      padding-top: 23px;
    }

    .deployment-location-list li,
    .deployment-status-list li {
      margin-bottom: 0;
    }

    .deployment-breadcrumb {

      .deployment-breadcrumb-service-id {
        display: none;
      }

      .deployment-breadcrumb-crumb {
        font-size: 1rem;
        line-height: 32px;
      }
    }
  }

  .deployment-step {
    display: inline-block;
    margin-bottom: 8px;
    margin-left: @base-spacing-unit * 0.25;
  }

  .deployment-status-list {

    li {
      line-height: 32px;
    }
  }
}


// Variables

@brand-primary:#f8b416;//orange
@brand-danger: white;
@gray-darkest: #222;
@gray: #777;
@gray-lighter: #f7f7f7;
@placeholder-text: #bbbbbb;

Improve variable comments on main less file

// Variables

@brand-primary:#f8b416;//Encuentro-Inernacional-Teatro main text color
@brand-danger: white;
@gray-darkest: #222;
@gray: #777;
@gray-lighter: #f7f7f7;
@placeholder-text: #bbbbbb;


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

@iconSpritePath:          "../bootstrap/images/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../bootstrap/images/glyphicons-halflings-white.png";

Load responsive.less to introduce responsive designs

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

@iconSpritePath:          "../bootstrap/images/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../bootstrap/images/glyphicons-halflings-white.png";


@base: #00B64F;
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

.container {
    // text-align: center;
}

.subtitle {
    color: gray;
}
.base {background: @base}

Add link to the Palette

// Palette: http://colorschemedesigner.com/csd-3.5/#2Z41Vw0w0w0w0
@base: #00B64F;
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

.container {
    // text-align: center;
}

.subtitle {
    color: gray;
}
.base {background: @base}


@import '~rc-footer/assets/index.css';
@import './colors';

.rc-footer {
  &-container {
    max-width: unset;
    padding: 60px;
  }

  &-bottom-container {
    max-width: calc(100% - 120px);
  }

  &-columns {
    justify-content: space-between;
  }
  &-item {
    .page-wrapper-rtl & {
      display: flex;
      justify-content: flex-start;
      text-align: right;
    }

    &-icon {
      .page-wrapper-rtl & {
        margin-right: 0;
        margin-left: 0.4em;
      }
    }
  }
}

Fix site fixed nav overflow style

@import '~rc-footer/assets/index.css';
@import './colors';

.rc-footer {
  z-index: 11;

  &-container {
    max-width: unset;
    padding: 60px;
  }

  &-bottom-container {
    max-width: calc(100% - 120px);
  }

  &-columns {
    justify-content: space-between;
  }
  &-item {
    .page-wrapper-rtl & {
      display: flex;
      justify-content: flex-start;
      text-align: right;
    }

    &-icon {
      .page-wrapper-rtl & {
        margin-right: 0;
        margin-left: 0.4em;
      }
    }
  }
}


@import 'common';

.oo-ui-windowManager {
	&-modal > .oo-ui-dialog {
		position: fixed;
		width: 0;
		height: 0;
		overflow: hidden;

		&.oo-ui-window-load {
			width: auto;
			height: auto;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 1em;
		}

		&.oo-ui-window-setup > .oo-ui-window-frame {
			position: absolute;
			right: 0;
			left: 0;
			margin: auto;
			overflow: hidden;
			max-width: 100%;
			max-height: 100%;

			> iframe {
				width: 100%;
				height: 100%;
			}
		}

		> .oo-ui-window-frame {
			visibility: hidden;
		}

		&.oo-ui-window-ready > .oo-ui-window-frame {
			visibility: visible;
		}
	}

	&-fullscreen > .oo-ui-dialog > .oo-ui-window-frame {
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
	}

	.theme-oo-ui-windowManager();
}

Revert "Followup ca6a16f: use parent selector both for hiding and showing windows"

@import 'common';

.oo-ui-windowManager {
	&-modal > .oo-ui-dialog {
		position: fixed;
		width: 0;
		height: 0;
		overflow: hidden;

		&.oo-ui-window-load {
			width: auto;
			height: auto;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 1em;
		}

		&.oo-ui-window-setup > .oo-ui-window-frame {
			position: absolute;
			right: 0;
			left: 0;
			margin: auto;
			overflow: hidden;
			max-width: 100%;
			max-height: 100%;

			> iframe {
				width: 100%;
				height: 100%;
			}
		}

		.oo-ui-window-frame {
			visibility: hidden;
		}

		&.oo-ui-window-ready > .oo-ui-window-frame {
			visibility: visible;
		}
	}

	&-fullscreen > .oo-ui-dialog > .oo-ui-window-frame {
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
	}

	.theme-oo-ui-windowManager();
}


@import "components/generated-grid";
@import "components/media-object";
@import "components/progress";
@import "components/forms";
@import "components/buttons";
@import "components/card";
@import "components/icons";
@import "components/lists";
@import "components/markdown";
@import "components/alert";
@import "components/images";
@import "components/horizontal-rules";
@import "components/dropdown";

Remove old reference to card component.

@import "components/generated-grid";
@import "components/media-object";
@import "components/progress";
@import "components/forms";
@import "components/buttons";
@import "components/icons";
@import "components/lists";
@import "components/markdown";
@import "components/alert";
@import "components/images";
@import "components/horizontal-rules";
@import "components/dropdown";


#form-result {
  text-align: center;
  span {
    line-height: 240px;
    color: @highlight;
  }
  button {
    display: none;
    margin: 0 auto;
  }
}

form {
  .formfield {
    margin: @size auto;
    width: 200px;
  }
  .submitfield {
    vertical-align: bottom;
    margin-top: @size;
    text-align: center;
  }
  .form-input-error {
    color: @highlight;
    line-height: 150%;
  }
  .submit {
    cursor: pointer;
    &:hover {
      @media (min-width: @tablet) {
        transition-duration: .5s;
        color: @highlight;
      }
    }
  }
  input{
    padding: 10px;
    border: none;
    border-bottom: solid 2px @bg;
    transition: border 0.3s;
    background-color: transparent;
    &[type="checkbox"] {
      vertical-align: middle;
    }
    &:not([type="checkbox"]) {
      width: 180px;
    }
    &:focus {
      outline: none !important;
      border-bottom: solid 2px @highlight;
    }
  }
}

#community-apply-info {
  width: 270px;
  margin: 0 auto;
  h2 {
    font-style: italic;
    line-height: 200%;
    text-align: center;
  }
}

Fix for input text color

#form-result {
  text-align: center;
  span {
    line-height: 240px;
    color: @highlight;
  }
  button {
    display: none;
    margin: 0 auto;
  }
}

form {
  .formfield {
    margin: @size auto;
    width: 200px;
  }
  .submitfield {
    vertical-align: bottom;
    margin-top: @size;
    text-align: center;
  }
  .form-input-error {
    color: @highlight;
    line-height: 150%;
  }
  .submit {
    cursor: pointer;
    &:hover {
      @media (min-width: @tablet) {
        transition-duration: .5s;
        color: @highlight;
      }
    }
  }
  input{
    padding: 10px;
    border: none;
    border-bottom: solid 2px @bg;
    transition: border 0.3s;
    background-color: transparent;
    color: white;
    &[type="checkbox"] {
      vertical-align: middle;
    }
    &:not([type="checkbox"]) {
      width: 180px;
    }
    &:focus {
      outline: none !important;
      border-bottom: solid 2px @highlight;
    }
  }
}

#community-apply-info {
  width: 270px;
  margin: 0 auto;
  h2 {
    font-style: italic;
    line-height: 200%;
    text-align: center;
  }
}


@import "ui-variables";
@import "octicon-mixins";

@font-face { .octicon-font(); }

html {
  font-family: @font-family;
  font-size: @font-size;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

atom-workspace {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: @app-background-color;
  font-family: @font-family;

  atom-workspace-axis.horizontal {
    display: -webkit-flex;
    height: 100%;
  }

  atom-workspace-axis.vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-flow: column;
  }
}

Add text color to atom-workspace

@import "ui-variables";
@import "octicon-mixins";

@font-face { .octicon-font(); }

html {
  font-family: @font-family;
  font-size: @font-size;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

atom-workspace {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  color: @text-color;
  background-color: @app-background-color;
  font-family: @font-family;

  atom-workspace-axis.horizontal {
    display: -webkit-flex;
    height: 100%;
  }

  atom-workspace-axis.vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-flow: column;
  }
}


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

.archive-view {
  margin: 0;
  padding: 0;
  overflow: auto;
  position: relative;
  display: -webkit-flex;
  @icon-margin: @line-height-base / 4;

  .archive-container {
    height:100%;
    width: 100%;

    .loading-message {
      margin: 5px;

      .mini-icon(hourglass);

      &:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }

    .tree {
      padding: 5px;
    }

    .entry {
      margin: 5px;

      > .entry {
        padding-left: 15px;
      }

      span.file {
        display: inline-block;
        padding: 5px;

        &:before {
          padding-right: @icon-margin;
        }

        .mini-icon(text-file);

        &.symlink {
          .mini-icon(symlink);
        }
      }

      span.directory {
        display: inline-block;
        padding-left: 5px;

        &:before {
          margin-right: @icon-margin;
        }

        .mini-icon(directory);
      }
    }
  }
}

Add top padding to directories

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

.archive-view {
  margin: 0;
  padding: 0;
  overflow: auto;
  position: relative;
  display: -webkit-flex;
  @icon-margin: @line-height-base / 4;

  .archive-container {
    height:100%;
    width: 100%;

    .loading-message {
      margin: 5px;

      .mini-icon(hourglass);

      &:before {
        font-size: 16px;
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }

    .tree {
      padding: 0 5px 5px 5px;
    }

    .entry {
      margin: 5px;

      > .entry {
        padding-left: 15px;
      }

      span.file {
        display: inline-block;
        padding: 5px;

        &:before {
          padding-right: @icon-margin;
        }

        .mini-icon(text-file);

        &.symlink {
          .mini-icon(symlink);
        }
      }

      span.directory {
        display: inline-block;
        padding: 5px 0 0 5px;

        &:before {
          margin-right: @icon-margin;
        }

        .mini-icon(directory);
      }
    }
  }
}


@import '../mixins';

.oo-ui-menuToolGroup {
	.oo-ui-popupToolGroup-handle {
		min-width: 8em;
	}

	.oo-ui-tool {
		display: block;

		&-link {
			display: block;
			cursor: pointer;
			white-space: nowrap;
			padding: 0.25em 1em 0.25em 0.25em;

			.oo-ui-iconedElement-icon {
				background-image: none;
			}
		}

		&-active .oo-ui-tool-link .oo-ui-iconedElement-icon {
			.oo-ui-background-image('images/icons/check.png');
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tool-link {
				cursor: default;
			}
		}
	}
}

Make menu toolgroup take up less space and look more like a menu

@import '../mixins';

.oo-ui-menuToolGroup {
	.oo-ui-popupToolGroup-handle {
		min-width: 8em;
	}

	.oo-ui-toolGroup-tools {
		padding: 0.25em 0 0.25em 0;
	}

	.oo-ui-tool {
		display: block;

		&-link {
			display: block;
			cursor: pointer;
			white-space: nowrap;
			padding: 0 1em 0 0.25em;

			.oo-ui-iconedElement-icon {
				background-image: none;
			}
		}

		&-active .oo-ui-tool-link .oo-ui-iconedElement-icon {
			.oo-ui-background-image('images/icons/check.png');
		}

		&.oo-ui-widget-disabled {
			.oo-ui-tool-link {
				cursor: default;
			}
		}
	}
}


// Import from the theme's variables with a fallback to /static/variables/ui-variables.less
@import "ui-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

@import "root-view.less";
@import "buttons.less";
@import "icons.less";
@import "links.less";
@import "panes.less";
@import "panels.less";
@import "sections.less";
@import "overlay.less";
@import "lists.less";
@import "popover-list.less";
@import "notification.less";
@import "markdown.less";
@import "editor.less";
@import "select-list.less";
@import "utilities.less";
@import "octicons.less";

Remove .less extensions from imports

// Import from the theme's variables with a fallback to /static/variables/ui-variables.less
@import "ui-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

@import "root-view";
@import "buttons";
@import "icons";
@import "links";
@import "panes";
@import "panels";
@import "sections";
@import "overlay";
@import "lists";
@import "popover-list";
@import "notification";
@import "markdown";
@import "editor";
@import "select-list";
@import "utilities";
@import "octicons";


.autocomplete-label {
  display: inline-block;
  background-color: #f1f8ff;
  color: #317fd8;
  font-size: 85%;
  font-weight: normal;
  line-height: 1.7;
  padding: 0.3em 0.9em;
  margin-right: 1px;
  white-space: nowrap;
  border-radius: 3px;

  &.autocomplete-label-value {
    background-color: #f1f8ff;
    color: #174b8c;
    border-radius: 0 2px 2px 0;
    margin-right: 5px;
    margin-bottom: 5px;
    padding-right: 8px;
    .remove {
      padding-left: 4px;
      cursor: pointer;
    }
  }
}

Add hover to autocomplete elements

.autocomplete-label {
  display: inline-block;
  background-color: #f1f8ff;
  color: #317fd8;
  font-size: 85%;
  font-weight: normal;
  line-height: 1.7;
  padding: 0.3em 0.9em;
  margin-right: 1px;
  white-space: nowrap;
  border-radius: 3px;

  &.autocomplete-label-value {
    background-color: #f1f8ff;
    color: #174b8c;
    border-radius: 0 2px 2px 0;
    margin-right: 5px;
    margin-bottom: 5px;
    padding-right: 8px;

    &:hover {
      color: #317fd8;
    }

    .remove {
      padding-left: 4px;
      cursor: pointer;
    }
  }
}


.thumbnail {
    border: transparent;
    background: transparent;
    padding: @grid-gutter-width/6 0;
}

.thumbnail-sm {
    img {
        max-height: @grid-gutter-width*2;
    }
}

Add styling rules for .post-thumbnail

.post-thumbnail{
    max-width: 100%;
}

.thumbnail {
    border: transparent;
    background: transparent;
    padding: @grid-gutter-width/6 0;
}

.thumbnail-sm {
    img {
        max-height: @grid-gutter-width*2;
    }
}


// Override the inline style on mathjax text elements to match the tutor default of lato
.MathJax .mtext { font-family: lato !important; }
// a more specific style to override those for .exercise.card img to make sure that
// MathJax's render images
.exercise.card {
  .MathJax img {
    margin: 0;
  }
}

Switch mathjax back to using it's default font


#plugin-deconst-content {
  input.inline {
    margin-right: 10px;
  }

  input#content-service-url {
    width: 400px;
  }

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

  .inline-checkbox {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 5px;
  }

  .danger {
    color: #900;
  }
}

Change the CSS root ID.

#plugin-deconst-control {
  input.inline {
    margin-right: 10px;
  }

  input#content-service-url {
    width: 400px;
  }

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

  .inline-checkbox {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 5px;
  }

  .danger {
    color: #900;
  }
}


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

@dream-content-gutter: 20px;

.dreams {
  .media-list {
    li {
      & > .media-body {
        h3 {
          margin: 12.5px 0;
          font-size: @font-size-h4;
        }
        h2 {
          font-size: @font-size-h3;
        }
        & > a {
          & > div {
            .make-row(@gutter: @dream-content-gutter);
            & > .img {
              .make-sm-column(4, @gutter: @dream-content-gutter);
            }
            & > .text {
              .make-sm-column(8, @gutter: @dream-content-gutter);
              @media (min-width: @screen-sm-min) {
                h2 {
                  margin-top: 0;
                }
              }
            }
          }
          p {
            color: @text-color;
          }
          &:hover {
            text-decoration: none;
            h2 {
              text-decoration: underline;
            }
            p {
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

.dream {
  .page-header {
    margin-top: -@navbar-margin-bottom;
    background: @brand-dream;
    color: #fff;
    a {
      color: #fff;
    }
    .profile-pic:hover {
      text-decoration: none;
    }
  }
}

Fix layout of dream feed items with little text

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

@dream-content-gutter: 20px;

.dreams {
  .media-list {
    li {
      & > .media-body {
        width: 100%;
        h3 {
          margin: 12.5px 0;
          font-size: @font-size-h4;
        }
        h2 {
          font-size: @font-size-h3;
        }
        & > a {
          & > div {
            .make-row(@gutter: @dream-content-gutter);
            & > .img {
              .make-sm-column(4, @gutter: @dream-content-gutter);
            }
            & > .text {
              .make-sm-column(8, @gutter: @dream-content-gutter);
              @media (min-width: @screen-sm-min) {
                h2 {
                  margin-top: 0;
                }
              }
            }
          }
          p {
            color: @text-color;
          }
          &:hover {
            text-decoration: none;
            h2 {
              text-decoration: underline;
            }
            p {
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

.dream {
  .page-header {
    margin-top: -@navbar-margin-bottom;
    background: @brand-dream;
    color: #fff;
    a {
      color: #fff;
    }
    .profile-pic:hover {
      text-decoration: none;
    }
  }
}


@import "ui-variables";
@import "octicon-mixins";

.tree-view-resizer {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-width: 50px;
  z-index: 2;

  .tree-view-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }
}

.tree-view-scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tree-view {
  min-width: -webkit-min-content;
  min-height: 100%;

  position: relative;
  padding: 0 @component-icon-padding;
  margin-bottom: 0;
  cursor: default;

  .entry {
    text-wrap: none;
    white-space: nowrap;

    .name {
      position: relative;
      z-index: 1;
    }
  }
}

.tree-view-dialog {
  padding: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;

  .prompt {
    padding-bottom: 3px;
    font-size: 12px;
    line-height: 16px;
    &:before { margin-right: @component-icon-padding; }
  }
}

Move more styles into the base CSS

@import "ui-variables";
@import "octicon-mixins";

.tree-view-resizer {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  min-width: 50px;
  z-index: 2;

  .tree-view-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }
}

.tree-view-scroller {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.tree-view {
  min-width: -webkit-min-content;
  min-height: 100%;
  padding: 0 @component-icon-padding;
}

.tree-view-dialog {
  padding: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;

  .prompt {
    padding-bottom: 3px;
    font-size: 12px;
    line-height: 16px;
    &:before { margin-right: @component-icon-padding; }
  }
}


@import (reference) '~app/less/variables';
@import (reference) '~app/less/themes/themeify';

.DropdownCover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: @z-index-overlay;

  .themeify({
    background-color: @theme-overlay-color;
  });
}

Make dropdowns close on IOS when clicking outside the menu

@import (reference) '~app/less/variables';
@import (reference) '~app/less/themes/themeify';

.DropdownCover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: @z-index-overlay;

  .themeify({
    background-color: @theme-overlay-color;
  });
}


.mw-echo-ui-confirmationPopupWidget {
	position: relative;
	bottom: 1em;
	width: 100%;
	text-align: center;

	&-popup {
		display: inline-block;
		background-color: #333;
		border-radius: 2px;
		padding: 0.5em 1em;
		text-align: left;
		color: #fff;

		span {
			vertical-align: middle;
		}

		.oo-ui-iconElement-icon {
			display: inline-block;
			margin-right: 0.5em;
		}
	}
}

Align popup message color to toast message in MinervaNeue

.mw-echo-ui-confirmationPopupWidget {
	position: relative;
	bottom: 1em;
	width: 100%;
	text-align: center;

	&-popup {
		background-color: #222;
		color: #fff;
		display: inline-block;
		border-radius: 2px;
		padding: 0.5em 1em;
		text-align: left;

		span {
			vertical-align: middle;
		}

		.oo-ui-iconElement-icon {
			display: inline-block;
			margin-right: 0.5em;
		}
	}
}


.ns("frontend.components.pieces.top-banner", {
  .ui("banner", {
    position: relative;
    margin-bottom: 15px;
    height: 70px;
    padding: 15px;

    &.success {
      background-color: @greenLightest;
    }

    &.warning {
      background-color: @yellowLightest;
    }

    &.danger {
      background-color: @redLightest;
    }

    > .text {
      margin-top: 10px;

      > .banner-dismiss {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  });
});

Add breathing room to banner notification

.ns("frontend.components.pieces.top-banner", {
  .ui("banner", {
    position: relative;
    padding: 15px;

    &.success {
      background-color: @greenLightest;
    }

    &.warning {
      background-color: @yellowLightest;
    }

    &.danger {
      background-color: @redLightest;
    }

    > .text {
      // TODO This is a bad componentization. When icons are
      // componentized we should give them this styling, but until then ...
      > div > .banner-alert-icon {
        margin-right: 11px;
      }

      > .banner-dismiss {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  });
});


/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

Add global transition text and block elements

/* Selection ============================================= */
::-moz-selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}
::selection {
	background-color: lighten(@basecolor, 65%);
	color: @basecolor;
	text-shadow: none;
}

/* Global Classes ======================================== */
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
}
.pull-right {
	float:right;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
	    content: "";
	}
	&:after {
		clear: both;
	}
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}

/* Global Transition ==================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
	.transition(all .2s ease);
}


#search-screen {
  width: 100%;

  #search-form {
    .search-box {
    }
  }

  #search-results {
    td.password {
      width: 200px;

      input.shown-password {
        width: 60%;
      }

      span.hidden-password {
        width: 60%;
      }
    }
  }
}

Tweak to size of password field in search results

#search-screen {
  width: 100%;

  #search-form {
    .search-box {
    }
  }

  #search-results {
    td.password {
      width: 250px;

      input.shown-password {
        width: 60%;
      }

      span.hidden-password {
        width: 60%;
      }
    }
  }
}


.panel-item-component {
	float: left;
	margin: 0 3.125em 2em 0;

	> * {
		// width in pixels
		max-width: 320px;
		margin: 0 auto;
	}

	.title {
		> a {
			font-weight: lighter;
			text-decoration: none;
		}
	}

	img {
		display: block;

		&.withLink {
			cursor: pointer;
		}
	}

	.description {
		padding: 1em;

		h1 { font-size: 1.25rem; }
		h2 { font-size: 1.125rem; }
		h3, h4 { font-size: 1rem; }

		ul, ol {
			margin-left: -1em;
		}

		a {
			&,
			& b,
			& strong {
				font-weight: normal;
			}
		}
	}
}

Fix anchor font-weight in panel-item-component

.panel-item-component {
	float: left;
	margin: 0 3.125em 2em 0;

	> * {
		// width in pixels
		max-width: 320px;
		margin: 0 auto;
	}

	.title {
		> a {
			font-weight: lighter;
			text-decoration: none;
		}
	}

	img {
		display: block;

		&.withLink {
			cursor: pointer;
		}
	}

	.description {
		padding: 1em;

		h1 { font-size: 1.25rem; }
		h2 { font-size: 1.125rem; }
		h3, h4 { font-size: 1rem; }

		ul, ol {
			margin-left: -1em;
		}

		a {
			&,
			& b,
			& strong {
				font-weight: inherit;
			}
		}
	}
}


@import "./colors";

@io-panel-height: 250px;

// Layout styles
// TODO: smaller screen styling, stack? Switch to a tabbed view?
// Rely on min/max buttons?
.delve-io-left-panel, .delve-io-right-panel {
  display: inline-block;
  vertical-align: top;
  height: @io-panel-height;
  min-width: 250px;
}

.delve-io-left-panel { width: 64%; }
.delve-io-right-panel { width: 35%; }

.delve-io-panel { background: @term-bg; }

.delve-io-panel-resizer {
  width: 2px;
  background-color: @term-border-color;
  height: @io-panel-height;
  display: inline-block;

  &:hover { cursor: col-resize; }
}

.delve-io-title-bar {
  height: 1.5em;
  width: 100%;

  background: @base-background-color;
  border-left: 2px solid @base-border-color;
  border-right: 2px solid @base-border-color;

  .delve-io-action {
    &-minimize, &-maximize {
      float: right;
      margin: 0 1em;
    }
  }
}

Adjust colors, title bar styling

@import "./colors";

@io-panel-height: 250px;

// Layout styles
// TODO: smaller screen styling, stack? Switch to a tabbed view?
// Rely on min/max buttons?
.delve-io-left-panel, .delve-io-right-panel {
  display: inline-block;
  vertical-align: top;
  height: @io-panel-height;
  min-width: 250px;
  background: @term-bg;
}

.delve-io-left-panel { width: 64%; }
.delve-io-right-panel { width: 35%; }

.delve-io-panel-resizer {
  width: 2px;
  background-color: @term-border-color;
  height: @io-panel-height;
  display: inline-block;

  &:hover { cursor: col-resize; }
}

.delve-io-title-bar {
  height: 1.5em;
  width: 100%;
  padding: 0 1.25em;

  .delve-io-action {
    &-minimize, &-maximize {
      float: right;
      margin: 0 1em;
    }
  }
}


/* ========================================
MIXINS
* General Use Mixins to ease up reoccuring styles
* No Components!
======================================== */

.shadow(@size: .5em, @color: @color-dark-shadow) {
    box-shadow: 0 0 @size @color;
}

.responsiveWidth(@width) {
    @media screen and (min-width: @breakpoint-sm) {
        width: calc(@breakpoint-sm * (min(1, min(@width + .2, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-md) {
        width: calc(@breakpoint-md * (min(1, min(@width + .05, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-lg) {
        width: calc(@breakpoint-lg * @width ~'- 1rem');
    }
}

.responsiveHeight(@height) {
    min-height: @height * .5;
    @media screen and (min-width: @breakpoint-sm) {
        min-height: @height * .7;
    }
    @media screen and (min-width: @breakpoint-md) {
        min-height: @height * .85;
    }
    @media screen and (min-width: @breakpoint-lg) {
        min-height: @height;
    }
}

Use 95% width for container on mobile

/* ========================================
MIXINS
* General Use Mixins to ease up reoccuring styles
* No Components!
======================================== */

.shadow(@size: .5em, @color: @color-dark-shadow) {
    box-shadow: 0 0 @size @color;
}

.responsiveWidth(@width) {
    width: calc(~"95%");
    @media screen and (min-width: @breakpoint-sm) {
        width: calc(@breakpoint-sm * (min(1, min(@width + .2, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-md) {
        width: calc(@breakpoint-md * (min(1, min(@width + .05, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-lg) {
        width: calc(@breakpoint-lg * @width ~'- 1rem');
    }
}

.responsiveHeight(@height) {
    min-height: @height * .5;
    @media screen and (min-width: @breakpoint-sm) {
        min-height: @height * .7;
    }
    @media screen and (min-width: @breakpoint-md) {
        min-height: @height * .85;
    }
    @media screen and (min-width: @breakpoint-lg) {
        min-height: @height;
    }
}


.gmf-contextualdata {
  width: 40rem;
  font-size: @font-size-small;

  table {
    width: 100%;
  }
}

Make sure the lines from the contextual menu are never wrapped

.gmf-contextualdata {
  width: 40rem;
  font-size: @font-size-small;

  table {
    width: 100%;
    tr {
      td {
        white-space: nowrap;
      }
    }
  }
}


ul.user-list {
  margin: 0;
  padding: 0;
  height: 519px;
  background-color: @whiter;
  overflow-x: hidden;
  overflow-y: auto;

  li.user {
    color: @black;
    padding: 3px 10px;
    cursor: default;

    &.me {
      color: @green;
    }

    &:hover {
      background-color: @lightblue;
    }
  }
}

div.description {
  height: 24px;
  line-height: 24px;
  padding: 3px 10px;
  margin-top: 1px;
  background-color: @whiter;
  color: @green;
}

Add transition for user list.

ul.user-list {
  margin: 0;
  padding: 0;
  height: 519px;
  background-color: @whiter;
  overflow-x: hidden;
  overflow-y: auto;

  li.user {
    color: @black;
    padding: 3px 10px;
    cursor: default;
    background-color: @whiter;
    .transition(.1s linear background-color);

    &.me {
      color: @green;
    }

    &:hover {
      background-color: @lightblue;
    }
  }
}

div.description {
  height: 24px;
  line-height: 24px;
  padding: 3px 10px;
  margin-top: 1px;
  background-color: @whiter;
  color: @green;
}


.chromosome {
  font-family: sans-serif;
  text-anchor: middle;
  vector-effect: non-scaling-stroke;
  font-weight: bold;
}

.chromosome .mask_rect {
  stroke: none;
  fill: #fff;
}

.chromosome rect.outline {
  fill: none;
  stroke-width: 0.5;
  stroke: #000;
  vector-effect: non-scaling-stroke;
}

.chromosome rect.border {
  fill: none;
  stroke-width: 0.5;
  stroke: #000;
}

.chromosome rect.band {
  stroke: none;
}

.chromosome rect.background {
  fill: #fff;
}

.chromosome-label {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  cursor: pointer;
}

.chromosome-size-label {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  cursor: pointer;
  color: gray;
  fill: gray;
}

.qtl-hoverbox {
  opacity: 0.1;
}

.chromosome rect.band.geneline.selected {
  stroke: black;
}

.chromosome rect.band.geneline:hover {
  fill: gray;
}

Remove black line from selected gene bands

.chromosome {
  font-family: sans-serif;
  text-anchor: middle;
  vector-effect: non-scaling-stroke;
  font-weight: bold;
}

.chromosome .mask_rect {
  stroke: none;
  fill: #fff;
}

.chromosome rect.outline {
  fill: none;
  stroke-width: 0.5;
  stroke: #000;
  vector-effect: non-scaling-stroke;
}

.chromosome rect.border {
  fill: none;
  stroke-width: 0.5;
  stroke: #000;
}

.chromosome rect.band {
  stroke: none;
}

.chromosome rect.background {
  fill: #fff;
}

.chromosome-label {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  cursor: pointer;
}

.chromosome-size-label {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  cursor: pointer;
  color: gray;
  fill: gray;
}

.qtl-hoverbox {
  opacity: 0.1;
}

.chromosome rect.band.geneline:hover {
  fill: gray;
}


@import "mixins";
html, body, #page, #top-page {
  height: 100%;
  overflow-y: visible; // prevents scroll bar appearance
}
html{
  overflow-y: hidden;
}
.responsive-block{
  min-width: 350px;
  word-break: break-all;
}
.responsive-cell {
  .forScreenWithSideBar(@smallScreen, float, left);
  .forScreenWithSideBar(@smallScreen, width, 100%);
}
#left-panel,
#right-panel {
  overflow: visible;
}
#left-panel, #right-panel, #main {
  float: left;
}
.oro-multiselect-holder {
  .input-append, .input-prepend {
    input[type="email"], input[type="text"] {
      width: 235px !important;
    }
  }
}

Fix width for dropdowns and select2 fields - small fix

@import "mixins";
html, body, #page, #top-page {
  height: 100%;
  overflow-y: visible; // prevents scroll bar appearance
}
html{
  overflow-y: hidden;
}
.responsive-block{
  min-width: 350px;
  word-break: break-all;
}
.responsive-cell {
  .forScreenWithSideBar(@smallScreen, float, left);
  .forScreenWithSideBar(@smallScreen, width, 100%);
}
#left-panel,
#right-panel {
  overflow: visible;
}
#left-panel, #right-panel, #main {
  float: left;
}
.oro-multiselect-holder {
  .input-append, .input-prepend {
    input[type="email"], input[type="text"] {
      width: 235px;
    }
  }
}


@import "ui-variables";

#status-bar-jumpy {
    color: @text-color-info;
    &.no-match,
    &.no-match .status {
        color: @text-color-warning;
    }
}

.jumpy-label {
    &.irrelevant { // This is a marker to indicate not applicable (when 1 key is entered/known).
        display: none;
    }
    color: @base-background-color;
    background: @text-color;
    position: absolute;
    left: 10px;
    vertical-align: bottom;
    transform: translate(0, -100%);
    padding: .15em;
    border-radius: @component-border-radius;
    font-family: @font-family;
    &.high-contrast {
        background-color: @background-color-success;
    }
}

@import "beacon.less";

Fix alignment for new decoration method

@import "ui-variables";

#status-bar-jumpy {
    color: @text-color-info;
    &.no-match,
    &.no-match .status {
        color: @text-color-warning;
    }
}

.jumpy-label {
    &.irrelevant { // This is a marker to indicate not applicable (when 1 key is entered/known).
        display: none;
    }
    color: @base-background-color;
    background: @text-color;
    position: absolute;
    vertical-align: bottom;
    transform: translate(0, -100%);
    padding: .15em;
    border-radius: @component-border-radius;
    font-family: @font-family;
    &.high-contrast {
        background-color: @background-color-success;
    }
}

@import "beacon.less";


@import "colors.less";
@import "bootstrap-v3.3.0/variables.less";

@grid-float-breakpoint: @screen-md;

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

#cover {
    background: #333 url(../img/homepage/hero.png) no-repeat center top;
    height: 500px;
    overflow: hidden;
    text-align: center;

    .hero {
        color: #fff;
        margin-top: 60px;

        h1 {
            font-weight: bold;
            font-size: 36px;
            line-height: 40px;
            margin-bottom: 10px;
        }

        h2 {
            font-weight: normal;
            font-size: 18px;
            line-height: 30px;
            margin-bottom: 30px;
        }

        a {
            transition: 0.5s;
        }
    }
}

#footer {
    padding-top: 20px;
    text-align: center;

    nav {
        background-color: white;
        border-color: white;
    }

    a {
        color: @footer-link;

        &:hover {
            text-decoration: underline;
        }
    }
}

Fix top padding on the footer.

@import "colors.less";
@import "bootstrap-v3.3.0/variables.less";

@grid-float-breakpoint: @screen-md;

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

#cover {
    background: #333 url(../img/homepage/hero.png) no-repeat center top;
    height: 500px;
    overflow: hidden;
    text-align: center;

    .hero {
        color: #fff;
        margin-top: 60px;

        h1 {
            font-weight: bold;
            font-size: 36px;
            line-height: 40px;
            margin-bottom: 10px;
        }

        h2 {
            font-weight: normal;
            font-size: 18px;
            line-height: 30px;
            margin-bottom: 30px;
        }

        a {
            transition: 0.5s;
        }
    }
}

#footer {
    padding-top: 6px;
    text-align: center;

    nav {
        background-color: white;
        border-color: white;
    }

    a {
        color: @footer-link;

        &:hover {
            text-decoration: underline;
        }
    }
}


& {
  padding-top: 10px;
}

.eventListMeta {
  color: @colorFgSubtle;
  display: block;
  font-size: .8rem;
  margin-bottom: 10px;
  padding: 1px 5px;
}

.weekday {
  margin-right: 5px;
}

.eventList {
  > li {
    > a {
      color: inherit;
      display: block;
    }

    @media (min-width: @breakpointMedium) {
      border-bottom: 1px solid @colorFgBorder;
    }
  }
}

.Denkmal_Component_Event {
  cursor: pointer;

  .event .event-context .date {
    display: none;
  }
}

.Denkmal_Component_EventDetails {
  display: none;
}

.footer {
  margin-top: 1em;
  text-align: center;

  .button {
    padding: 0 0.6em;
    color: @colorFgSubtle;
  }
}

Adjust event list date spacing

& {
  padding-top: 10px;
}

.eventListMeta {
  color: @colorFgSubtle;
  display: block;
  font-size: @fontSizeTiny;
  margin-bottom: 10px;
  padding: 0 10px;
}

.weekday {
  margin-right: 5px;
}

.eventList {
  > li {
    > a {
      color: inherit;
      display: block;
    }

    @media (min-width: @breakpointMedium) {
      border-bottom: 1px solid @colorFgBorder;
    }
  }
}

.Denkmal_Component_Event {
  cursor: pointer;

  .event .event-context .date {
    display: none;
  }
}

.Denkmal_Component_EventDetails {
  display: none;
}

.footer {
  padding: 1em 0;
  text-align: center;

  .button {
    padding: 0 0.6em;
    color: @colorFgSubtle;
  }
}


// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }
}

Add high dpi media queries for Firefox and Opera

// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media @highdpi {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }
}


.umb-querybuilder .row {
    font-size: 14px;
    line-height: 14px
}

.umb-querybuilder .row a.btn {
    padding: 5px 8px;
    margin: 0 5px;
    font-weight: bold;
    background-color: @turquoise-washed;
    border: 1px solid @turquoise-l1;
    border-radius: 3px;
    text-align: center;
    display: inline-block;

}

.umb-querybuilder .row a.btn:hover {
    background-color: @turquoise-washed;
    border: 1px solid @turquoise-d1;
    text-decoration: none;
}

.umb-querybuilder .row > div {
    padding: 20px 0;
    border-bottom: 1px solid @gray-10;
}

.umb-querybuilder .datepicker input {
    width: 90px;
}

.umb-querybuilder .query-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.umb-querybuilder .query-items > *  {
    flex: 0 1 auto;
    margin: 5px;
}

Add a minimum height to the query builder dropdowns

.umb-querybuilder .row {
    font-size: 14px;
    line-height: 14px
}

.umb-querybuilder .row a.btn {
    padding: 5px 8px;
    margin: 0 5px;
    font-weight: bold;
    background-color: @turquoise-washed;
    border: 1px solid @turquoise-l1;
    border-radius: 3px;
    text-align: center;
    display: inline-block;

}

.umb-querybuilder .row a.btn:hover {
    background-color: @turquoise-washed;
    border: 1px solid @turquoise-d1;
    text-decoration: none;
}

.umb-querybuilder .row > div {
    padding: 20px 0;
    border-bottom: 1px solid @gray-10;
}

.umb-querybuilder .datepicker input {
    width: 90px;
}

.umb-querybuilder .query-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.umb-querybuilder .query-items > *  {
    flex: 0 1 auto;
    margin: 5px;
}

.umb-querybuilder .query-items .btn {
    min-height: 2rem;
}


.atom-yarn-output {
  pre {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 20px;
    height: 100%;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }
}

Update styles to be less intrusive

.atom-yarn-output {
  pre {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 15px;
    height: 100%;
    font-size: @font-size;
    line-height: 1.5;
    white-space: normal;
    background-color: inherit;
  }
  .line {
    margin: 0 0 3px;
  }
}


@import '../../echo.variables';

.mw-echo-ui-bundledNotificationGroupWidget {

	&:not(:first-child) {
		padding-top: @bundle-group-padding;
	}

	&-title {
		font-weight: bold;
		color: #666666;
		margin-bottom: @bundle-group-padding;
	}

	.mw-echo-ui-notificationsWidget {
		margin-bottom: @bundle-group-padding / 2;
	}

	.mw-echo-ui-notificationItemWidget {
		padding: 0.5em;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;

		&:not(:last-child) {
			border-bottom: 0;
		}

		&-icon img {
			height: 1.5em;
			width: 1.5em;
		}

		&-content {
			padding-left: 0.5em + 1.5em;
		}

		&-markAsReadButton {
			padding-top: 0;
		}
	}
}

Adjust line-height of bundle group titles

@import '../../echo.variables';

.mw-echo-ui-bundledNotificationGroupWidget {

	&:not(:first-child) {
		padding-top: @bundle-group-padding;
	}

	&-title {
		// Override OOUI's line height for labels
		line-height: 1em !important;
		font-weight: bold;
		color: #666666;
		margin-bottom: @bundle-group-padding;
	}

	.mw-echo-ui-notificationsWidget {
		margin-bottom: @bundle-group-padding / 2;
	}

	.mw-echo-ui-notificationItemWidget {
		padding: 0.5em;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;

		&:not(:last-child) {
			border-bottom: 0;
		}

		&-icon img {
			height: 1.5em;
			width: 1.5em;
		}

		&-content {
			padding-left: 0.5em + 1.5em;
		}

		&-markAsReadButton {
			padding-top: 0;
		}
	}
}


/*
    Generated by Zeplin
    Copyright (C) 2014 - present Zeplin

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

@red: #de0000;
@purple: #cfa2f7;
@aqua: #00dec4;
@slate-blue: #597193;
@black: #041329;
@dark-blue: #1c3b61;
@grey: #414e5e;
@dark-indigo: #0d223f;
@pinkish-grey: #bfbfbf;
@white: #ffffff;
@white-two: #f4f4f4;
@bluey-grey: #8d99ae;
@squash: #f5a623;

Make the previous/next times for local-booking darker (higher contrast to background)

/*
    Generated by Zeplin
    Copyright (C) 2014 - present Zeplin

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

@red: #de0000;
@purple: #cfa2f7;
@aqua: #00dec4;
@slate-blue: #597193;
@black: #041329;
@dark-blue: #1c3b61;
@grey: #414e5e;
@dark-indigo: #0d223f;
@pinkish-grey: #8f8f8f;
@white: #ffffff;
@white-two: #f4f4f4;
@bluey-grey: #8d99ae;
@squash: #f5a623;


// Core variables and mixins
@import "../libs/bootstrap/less/_variables.less";
@import "../libs/bootstrap/less/_mixins.less";

// Reset and dependencies
@import "../libs/bootstrap/less/_normalize.less";
@import "../libs/bootstrap/less/_print.less";

// Core CSS
@import "../libs/bootstrap/less/_scaffolding.less";
@import "../libs/bootstrap/less/_type.less";
@import "../libs/bootstrap/less/_grid.less";
@import "../libs/bootstrap/less/_tables.less";
@import "../libs/bootstrap/less/_forms.less";
@import "../libs/bootstrap/less/_buttons.less";
@import "../libs/bootstrap/less/_input-groups.less";

// Components
@import "../libs/bootstrap/less/_component-animations.less";
@import "../libs/bootstrap/less/_labels.less";

// Utility classes
@import "../libs/bootstrap/less/_utilities.less";
@import "../libs/bootstrap/less/_responsive-utilities.less";

// Theme Base
@import '_variables.less';
@import '_base.less';
@import '_shims.less';

// Components
@import '_attribution.less';
@import '_buttons.less';
@import '_icons.less';
@import '_input-groups.less';
@import '_referrals.less';
@import '_share.less';
@import '_stats.less';

// Atomic classes
@import '_atomic.less';

// Theme Modes
@import 'modes/_embed.less';
@import 'modes/_popup.less';

Make text case of comments consistent

// Core variables and mixins
@import "../libs/bootstrap/less/_variables.less";
@import "../libs/bootstrap/less/_mixins.less";

// Reset and dependencies
@import "../libs/bootstrap/less/_normalize.less";
@import "../libs/bootstrap/less/_print.less";

// Core CSS
@import "../libs/bootstrap/less/_scaffolding.less";
@import "../libs/bootstrap/less/_type.less";
@import "../libs/bootstrap/less/_grid.less";
@import "../libs/bootstrap/less/_tables.less";
@import "../libs/bootstrap/less/_forms.less";
@import "../libs/bootstrap/less/_buttons.less";
@import "../libs/bootstrap/less/_input-groups.less";

// Components
@import "../libs/bootstrap/less/_component-animations.less";
@import "../libs/bootstrap/less/_labels.less";

// Utility classes
@import "../libs/bootstrap/less/_utilities.less";
@import "../libs/bootstrap/less/_responsive-utilities.less";

// Theme base
@import '_variables.less';
@import '_base.less';
@import '_shims.less';

// Components
@import '_attribution.less';
@import '_buttons.less';
@import '_icons.less';
@import '_input-groups.less';
@import '_referrals.less';
@import '_share.less';
@import '_stats.less';

// Atomic classes
@import '_atomic.less';

// Theme modes
@import 'modes/_embed.less';
@import 'modes/_popup.less';


@import "variables";

.git-StatusBarTileController {
  display: inline-block;

  &-tooltipMenu {
    &.tooltip {
      padding-right: @component-padding;
    }
    .tooltip-inner.tooltip-inner {
      padding: @component-padding / 2;
      background-color: @base-background-color;
      border: 1px solid @base-border-color;
      box-shadow: 0 4px 8px hsla(0, 0, 0, .1);
      color: @text-color;
    }
    &.top .tooltip-arrow.tooltip-arrow {
      bottom: -1px;
      border-width: 10px 10px 0 10px;
      border-top-color: @base-background-color;
    }
  }
}

Add border to tooltip arrow

@import "variables";

.git-StatusBarTileController {
  display: inline-block;

  &-tooltipMenu {
    &.tooltip {
      padding-right: @component-padding;
    }
    .tooltip-inner.tooltip-inner {
      padding: @component-padding / 2;
      background-color: @base-background-color;
      border: 1px solid @base-border-color;
      box-shadow: 0 4px 8px hsla(0, 0, 0, .1);
      color: @text-color;
    }
    &.top .tooltip-arrow.tooltip-arrow {
      width: @component-padding;
      height: @component-padding;
      border-width: 0 0 1px 1px;
      border-color: @base-border-color;
      background-color: @base-background-color;
      border-bottom-right-radius: 2px;
      transform: rotate(-45deg);
    }
  }
}


.theme-one-light-ui {
}

Add disabled styles to One light UI

.theme-one-light-ui {
  .tool-bar button.tool-bar-btn.disabled {
    &:hover, &:focus {
      background-color: inherit;
      background-image: inherit;
    }
  }
}


@import "ui-mixins";
@import "ui-variables";

.key-binding {
  background: #fff;
  border: 1px solid lighten(@base-border-color, 20%);
  text-shadow: none;
  display: inline-block;
  line-height: 100%;
  border-radius: @component-border-radius;
  margin-left: @component-icon-padding;
  font-family: Helvetica, Arial, sans-serif;
  font-size: @font-size - 4px;
  padding: @component-padding / 2;
}

.badge {
  .text(highlight);
  background: @background-color-selected;
}

Fix keybinding indicator for dropdown, tweak badge

@import "ui-mixins";
@import "ui-variables";

.key-binding {
  background: @base_color;
  border: 1px solid lighten(@base-border-color, 20%);
  text-shadow: none;
  display: inline-block;
  line-height: 100%;
  border-radius: @component-border-radius;
  margin-left: @component-icon-padding;
  font-family: Helvetica, Arial, sans-serif;
  font-size: @font-size - 4px;
  padding: @component-padding / 2;
}

.badge {
  .text(highlight);
  background: fade(@background-color-selected, 50%);
}


.markdown-preview.markdown-preview {
    background-color: @markdown-preview-background-color;
    color: @markdown-preview-text-color;
    border: @markdown-preview-background-color solid @markdown-preview-border-color;
    .markdown-body {
        color: @markdown-preview-text-color;
        word-wrap: normal;
    }
}

.markdown-preview:not([data-use-github-style]) {
    strong {
        color: @markdown-preview-text-color;
    }
    a {
        color: darken(@theme-blue, 40%);
        font-weight: 600;
    }
    h1, h2, h3, h4, h5, h6 {
        color: @markdown-preview-text-color;
    }
}

Improve Markdown-Preview rendering to resemble Githubs

.markdown-preview.markdown-preview {
    background-color: @markdown-preview-background-color;
    color: @markdown-preview-text-color;
    border: @markdown-preview-background-color solid @markdown-preview-border-color;
    .markdown-body {
        color: @markdown-preview-text-color;
        word-wrap: normal;
    }
}

.markdown-preview:not([data-use-github-style]) {
	strong {
        color: @markdown-preview-text-color;
    }
    a {
        color: #3392C9;
        font-weight: 600;
    }
    h1, h2, h3, h4, h5, h6 {
        color: @markdown-preview-text-color;
    };
	h1, h2 {
		border-bottom: 1px solid @lighter-gray !important;
		margin-top: 20px !important;
	}
	h4 {
		font-size: 17px;
		margin-top: 16px;
	}
	hr {
		margin: 0 10px;
		border: 2px solid @lighter-gray;
	}
	atom-text-editor {
		background: @theme-background-color;
		color: @lighter-gray;
	}
	p {
		font-size: 16px;
		margin-bottom: 18px;
	}
}


.noUiSlider-wrapper {
  padding-left: 12px;
  padding-right: 12px;
}

.noUi-target {
  border: 0;
  background-color: @colorInputFocus;
}

.noUi-handle {
  border-radius: 50%;
  box-shadow: none;

  &::before, &::after {
    display: none;
  }
}

.noUi-origin {
  border-radius: 4px;
  background-color: @colorInputBorder;
}

.noUi-handle:focus, .noUi-active {
  .input_focus;
}

.noUi-horizontal {
  height: 8px;
  box-shadow: none;
  background-color: @colorInputFocus;

  &[disabled] {
    opacity: 0.5;
    background-color: @colorInputBg;
  }

  .noUi-handle {
    width: 24px;
    height: 24px;
    top: -8px;
    left: -12px;
  }
}

Adjust disabled styles for Integer form field

.noUiSlider-wrapper {
  padding-left: 12px;
  padding-right: 12px;
}

.noUi-target {
  border: 0;
  background-color: @colorInputFocus;
}

.noUi-handle {
  border-radius: 50%;
  box-shadow: none;

  &::before, &::after {
    display: none;
  }
}

.noUi-origin {
  border-radius: 4px;
  background-color: @colorInputBorder;
}

.noUi-handle:focus, .noUi-active {
  .input_focus;
}

.noUi-horizontal {
  height: 8px;
  box-shadow: none;
  background-color: @colorInputFocus;

  &[disabled] {
    opacity: 0.5;
  }

  .noUi-handle {
    width: 24px;
    height: 24px;
    top: -8px;
    left: -12px;
  }
}


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

.auto-complete-results-container {
  > ul {
    list-style: none;
    padding: 0;
    margin: 0;

    > li {
      background: #f0f0f0;
      .box-sizing();
      color: @metaFontColor;
      margin: 0 0 5px;
      padding: 8px 10px 7px 9px;
      .border-radius(4px);
      border-bottom: 1px solid #e4e4e4;
      font-size: 13px;

      > a.icon-remove {
        cursor: pointer;
        float: right;
        .opacity(0.4);
        position: relative;
        top: 2px;

        &:hover {
          .opacity(1.0);
        }
      }

      > input {
        display: none;
      }
    }
  }
}

Make the added list items a bit more beautiful and ready for the new design with channel suggestions

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

.auto-complete-results-container {
  > ul {
    list-style: none;
    padding: 0;
    margin: 0;

    > li {
      background: #f0f0f0;
      .box-sizing();
      color: @metaFontColor;
      margin: 0 0 5px;
      padding: 7px 10px 7px 9px;
      .border-radius(3px);
      border: 1px solid @baseBorderColor;
      font-size: @baseFontSize;
      -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
      -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);

      > a {
        font-weight: normal;
      }

      > a.icon-remove {
        cursor: pointer;
        float: right;
        .opacity(0.4);
        position: relative;
        top: 2px;

        &:hover {
          .opacity(1.0);
        }
      }

      > input {
        display: none;
      }
    }
  }
}


.box-shadow {
  -webkit-box-shadow: 0px 1px 0px 0px #aaa;
  -moz-box-shadow: 0px 1px 0px 0px #aaa;
  box-shadow: 0px 1px 0px 0px #aaa;
}
body {
  width: 480px;
  padding-top: 100px;
  margin: 0 auto 0 auto;
  background: #ccc;
}
canvas {
  background: #fff;
  .box-shadow;
}

Make box-shadow mixin use parameters

// Mixins
.box-shadow (@hor, @vert, @blur, @spread, @color) {
  -webkit-box-shadow: @hor @vert @blur @spread @color;
  -moz-box-shadow: @hor @vert @blur @spread @color;
  -o-box-shadow: @hor @vert @blur @spread @color;
  box-shadow: @hor @vert @blur @spread @color;
}
body {
  width: 480px;
  padding-top: 100px;
  margin: 0 auto 0 auto;
  background: #ccc;
}
canvas {
  background: #fff;
  .box-shadow;
}


@import "ui-mixins";
@import "ui-variables";
@import "buttons";

.panes {
  .pane {
    background-color: @app-background-color;

    &:focus .item-views {
      box-shadow: inset 0 0 7px #6aa5e9;
    }
  }

  .pane-row .pane {
    border-right: 1px solid @pane-item-border-color;
    &:last-child { border-right: none; }
  }
}

Use slightly darker background color rather than glow to indicate focus

@import "ui-mixins";
@import "ui-variables";
@import "buttons";

.panes {
  .pane {
    background-color: lighten(@app-background-color, 3%);

    &:focus {
      background-color: @app-background-color;
    }
  }

  .pane-row .pane {
    border-right: 1px solid @pane-item-border-color;
    &:last-child { border-right: none; }
  }
}


@import "ui-variables";
@import "ui-mixins";

.editor.mini {
  color: @text-color;
  background-color: @input-background-color;
  border: 1px solid @input-border-color;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  border-radius: @component-border-radius;
  padding-left: @component-padding/2;

  .cursor { border-color: #000; }
  .selection .region { background-color: rgba(0, 0, 0, .2); }
}

.editor.editor-colors.mini.is-focused {
  background-color: lighten(@input-background-color, 5%);
  .selection .region { background-color: lighten(@background-color-info, 30%); }
}

// FIXME: these should go in syntax themes?
.editor .gutter.drop-shadow {
  -webkit-box-shadow: -2px 0 10px 2px #222;
}

@-webkit-keyframes highlight {
  from { background-color: rgba(100, 255, 100, 0.7); }
  to { background-color: null; }
}

.editor .highlighted.selection .region {
  -webkit-animation-name: highlight;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
}

Remove flash / highlighted css


.notification-title {
  border-bottom: 1px solid @grey05;
}

.notifications-box {
  padding-left: 8px;
}

.notification {
  border-bottom: 1px solid @grey05;
}

.dropdown {
  list-style:none;
}

Revert "Merge remote-tracking branch 'origin/master'"


.list-gallery{
	&:extend(.list-inline all);
	li{
		margin-bottom: @line-height-computed / 2;
	}
}

.download-list {
	padding: 0;
	list-style: none;

	padding: 10px;

	i {
		background: @brand-primary;
		color: #fff;
		float: left;
		font-size: 2em;
		line-height: 37px;
		width: 60px;
		text-align: center;
		margin-right: 20px;
	}

	a {
		font-weight: bold;
	}

	small {
		color: @gray-dark;
		display: block;
	}

	small.size{
		color: @gray-dark;
		display: inline-block;
		margin-left: 10px;
	}
}

Fix for full-width images in gallery for small screens

.list-gallery{
	&:extend(.list-inline all);

	& > li {
		margin-bottom: @line-height-computed / 2;
		display: block !important;
		padding-right: 0 !important;
	}
}

.download-list {
	padding: 0;
	list-style: none;

	padding: 10px;

	i {
		background: @brand-primary;
		color: #fff;
		float: left;
		font-size: 2em;
		line-height: 37px;
		width: 60px;
		text-align: center;
		margin-right: 20px;
	}

	a {
		font-weight: bold;
	}

	small {
		color: @gray-dark;
		display: block;
	}

	small.size{
		color: @gray-dark;
		display: inline-block;
		margin-left: 10px;
	}
}

// For small and larger screens
@media screen and (min-width: @screen-xs) {
	.list-gallery > li {
		display: inline-block !important;
		padding-right: 5px !important;
	}
}


//
// Ripple Core
// --------------------------------------------------

.ripple-action {
    overflow: hidden;
    position: relative;

    > .ripple {
        animation: ripple @ripple-animation-duration linear;
    }
}

.ripple {
    position: absolute;
    display: block;
    border-radius: 100%;
    transform: scale(0);
    background: @ripple-light-bg;
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

Disable effect on disabled element

//
// Ripple Core
// --------------------------------------------------

.ripple-action:not(.disabled) {
    overflow: hidden;
    position: relative;

    > .ripple {
        animation: ripple @ripple-animation-duration linear;
    }
}

.ripple {
    position: absolute;
    display: block;
    border-radius: 100%;
    transform: scale(0);
    background: @ripple-light-bg;
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}


@import "../../styles/custom.less";
@import "../../styles/mixins.less";

.CommentForm {
  position: relative;
  margin-top: 8px;
  display: flex;

  &__text {
    width: 100%;
    margin-left: 12px;
  }

  &__imagebox {
    input {
      width: 0.1px;
    	height: 0.1px;
    	opacity: 0;
    	overflow: hidden;
    	position: absolute;
    	z-index: -1;
    }

    label {
      cursor: pointer;
    }

    .iconfont {
      font-size: 22px !important;
      margin-right: 4px;
      vertical-align: -2px;
    }

    .anticon {
      font-size: 16px !important;
      margin-right: 8px !important;
      vertical-align: 1px;
    }
  }

  &__button {
    color: @white-darker;
    margin-top: 4px;
    .btn;
    .btn-primary;

    &__primary {
      .colorize-button(@purple, #2a3574);
    }

    &__disabled {
      .colorize-button(@normal-grey, #5c5f63);
    }

    & > .anticon {
      vertical-align: -1px;
      margin-right: 8px;
    }
  }
}

Disable comment text horizontal resizing

@import "../../styles/custom.less";
@import "../../styles/mixins.less";

.CommentForm {
  position: relative;
  margin-top: 8px;
  display: flex;

  &__text {
    width: 100%;
    margin-left: 12px;

    textarea {
      resize: vertical;
    }
  }

  &__imagebox {
    input {
      width: 0.1px;
    	height: 0.1px;
    	opacity: 0;
    	overflow: hidden;
    	position: absolute;
    	z-index: -1;
    }

    label {
      cursor: pointer;
    }

    .iconfont {
      font-size: 22px !important;
      margin-right: 4px;
      vertical-align: -2px;
    }

    .anticon {
      font-size: 16px !important;
      margin-right: 8px !important;
      vertical-align: 1px;
    }
  }

  &__button {
    color: @white-darker;
    margin-top: 4px;
    .btn;
    .btn-primary;

    &__primary {
      .colorize-button(@purple, #2a3574);
    }

    &__disabled {
      .colorize-button(@normal-grey, #5c5f63);
    }

    & > .anticon {
      vertical-align: -1px;
      margin-right: 8px;
    }
  }
}


/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

// Highlighted text
atom-text-editor::shadow .highlights .selection .region {
  // background-color: #A4FCB9;
  background-color: #FFCDDC;
}
atom-text-editor::shadow .highlights .highlight-selected .region {
  // border-color: #42E769;
  border-color: #F979A0;
}

// Markdown
atom-text-editor[data-grammar="source gfm"] {
  // font-size: 13px;
}

Customize atom styling a bit

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

@highlight-color: rgba(255, 77, 253, 0.37);

// Highlighted text
atom-text-editor::shadow .highlights .selection .region {
  background-color: @highlight-color;
}
atom-text-editor::shadow .highlights .highlight-selected .region {
  border-color: #AD30CF;
}

// Markdown
atom-text-editor[data-grammar="source gfm"] {
  // font-size: 13px;
}

// Tree view default width
.tree-view-resizer {
    width: 270px;
}

// Mark selected item in Tree view more clear when focused
.tree-view:focus .selected:before {
    background: @highlight-color;
}


.feed {

  .tab-nav {
    list-style: none;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

    li {
      float: left;

      a {
        display: inline-block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;
        &:hover {
          background-color: #ddd;
        }

        &.active {
          background-color: #ccc;
        }
      }

    }
  }

  .feed-list {
    list-style: none;
    padding-left: 0 !important;

    li {
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: @darkgrey;

      p {
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

}

Add overflow rules for new preview class

.feed {

  .tab-nav {
    list-style: none;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

    li {
      float: left;

      a {
        display: inline-block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;
        &:hover {
          background-color: #ddd;
        }

        &.active {
          background-color: #ccc;
        }
      }

    }
  }

  .feed-list {
    list-style: none;
    padding-left: 0 !important;

    li {
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: @darkgrey;

      .preview {
        overflow-x: hidden;
        font-style: italic;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

}


/*------------------------------------*\
    $MOD-NAV
\*------------------------------------*/
/**
 * Module rule define the styling of discrete components of the page.
 * See http://smacss.com/book/type-module
 *
 * This module is styling nav
 */

/**
 * Main navs (typically in the <header>)
 */
.nav--main {
    > li {
        padding-right: 7%;
    }
}

Make the .nav--stacked responsive to extend as one whole

/*------------------------------------*\
    $MOD-NAV
\*------------------------------------*/
/**
 * Module rule define the styling of discrete components of the page.
 * See http://smacss.com/book/type-module
 *
 * This module is styling nav
 */

/**
 * Main navs (typically in the <header>)
 */
.nav--main {
    > li {
        padding-right: 7%;
    }
}

/**
 * Stacked navs should re-organized when it comes to one-whole
 */
@media only screen and (max-width:~"@{lap-end}px") {
    .nav--stacked {
        margin-top: @base-spacing-unit*1px;

        > li {
            padding: 0 5%;

            &,
            > a {
                display: inline-block;
            }
        }
    }
}


@import "ui-variables";

.nav {
  > li > a {
    border-radius: @component-border-radius;
  }
  > li > a:hover {
    background-color: @background-color-highlight;
  }

  &.nav-pills > li.active > a {
    background-color: @background-color-info;
  }
}

Use background-color-selected for active pill

@import "ui-variables";

.nav {
  > li > a {
    border-radius: @component-border-radius;
  }
  > li > a:hover {
    background-color: @background-color-highlight;
  }

  &.nav-pills > li.active > a {
    background-color: @background-color-selected;
  }
}


@import "twitter/bootstrap/bootstrap";
// @import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");

// Font Awesome
@import "fontawesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;

Comment out FontAwesome for TW Bootstrap

@import "twitter/bootstrap/bootstrap";
// @import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
//       have the proper paths. So for now we use the absolute path.
// @fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
// @fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
// @fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
// @fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
// @fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");

// Font Awesome
// @import "fontawesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;


.qn-Button {
  background-color: @color-Interactive--150;
  border: none;
  border-radius: 0.25em;
  color: @color-Interactive--750;
  line-height: 1;
  padding: 0.5em;
  text-decoration: none;
}

Add text shadow to buttons

.qn-Button {
  background-color: @color-Interactive--150;
  border: none;
  border-radius: 0.25em;
  color: @color-Interactive--750;
  line-height: 1;
  padding: 0.5em;
  text-decoration: none;
  text-shadow: 0 0.05em 0 @color-White;
}


// Core variables and mixins
@import "../libs/bootstrap/less/_variables.less";
@import "../libs/bootstrap/less/_mixins.less";

// Reset and dependencies
@import "../libs/bootstrap/less/_normalize.less";
@import "../libs/bootstrap/less/_print.less";

// Core CSS
@import "../libs/bootstrap/less/_scaffolding.less";
@import "../libs/bootstrap/less/_type.less";
@import "../libs/bootstrap/less/_grid.less";
@import "../libs/bootstrap/less/_tables.less";
@import "../libs/bootstrap/less/_forms.less";
@import "../libs/bootstrap/less/_buttons.less";
@import "../libs/bootstrap/less/_input-groups.less";

// Components
@import "../libs/bootstrap/less/_component-animations.less";
@import "../libs/bootstrap/less/_labels.less";

// Utility classes
@import "../libs/bootstrap/less/_utilities.less";
@import "../libs/bootstrap/less/_responsive-utilities.less";

// Theme Base
@import '_variables.less';
@import '_base.less';
@import '_shims.less';

// Components
@import '_attribution.less';
@import '_buttons.less';
@import '_icons.less';
@import '_input-groups.less';
@import '_panel.less';
@import '_referrals.less';
@import '_share.less';
@import '_stats.less';

// Atomic Classes
@import '_atomic.less';

// Theme Modes
@import 'modes/_embed.less';
@import 'modes/_popup.less';
@import 'modes/_hosted.less';

.cta-container {
  width: 200px;
  height: 38px;
}

Change height of cta button


.connect {
    margin-top: @grid-gutter-width*0.5;
    label,
    select {
        color: inherit;
        cursor: pointer;
        &.form-control {
            padding: @grid-gutter-width/3 0;
            height: inherit;
        }
        font-weight: 500;
        .text-uppercase;
    }
    .alert {
        display: none;
        color: @brand-danger;
        padding: @grid-gutter-width/6 0 0 0;
    }
    label {
        .unselectable;
        .animate-position;
        cursor: pointer;
        position: absolute;
        width: 100%;
        top: @grid-gutter-width/2;
        left: 0;
        display: block;
    }
    .form-group {
        position: relative;
    }
    .form-control {
        background: transparent;
        border: transparent;
        padding: @grid-gutter-width 0 @grid-gutter-width/3;
        border-bottom: 2px solid @keitaro-green-gray;
        box-shadow: none;
        &:focus {
            &,
            &:valid {
                border-bottom-color: @keitaro-green-dark; // &:required:invalid {
            }
            ~label {
                top: @grid-gutter-width/3;
                color: @brand-primary;
            }
        }
    }
}

.animate-position {
    transition: 100ms top ease-in-out;
}

Rename .connect to .contact-form and update label and input rules

.contact-form {
    label,
    select {
        color: @keitaro-green-gray-l-10;
        cursor: pointer;
        &.form-control {
            padding: @grid-gutter-width/3 0;
            height: inherit;
        }
        font-weight: 500;
        .text-uppercase;
    }
    .alert {
        display: none;
        color: @brand-danger;
        padding: @grid-gutter-width/6 0 0 0;
    }
    label {
        .unselectable;
        .animate-position;
        cursor: pointer;
        position: absolute;
        width: 100%;
        top: @grid-gutter-width/3;
        left: 0;
        display: block;
    }
    .form-group {
        position: relative;
    }
    .form-control {
        background: transparent;
        border: transparent;
        padding: @grid-gutter-width 0 @grid-gutter-width/3;
        border-bottom: 2px solid @keitaro-green-gray;
        box-shadow: none;
        &:focus {
            &,
            &:valid {
                border-bottom-color: @keitaro-green-dark;
            }
            ~label {
                top: @grid-gutter-width/4;
                color: @brand-primary;
            }
        }
    }
}

.animate-position {
    transition: 100ms top ease-in-out;
}


/**
 *    Copyright (c) ppy Pty Ltd <contact@ppy.sh>.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.landing-middle-buttons {
  padding: 20px;
  text-align: center;

  &__button {
    .default-box-shadow();
    border-radius: @border-radius-large;
    margin: 5px;
    display: inline-block;
    width: 250px;
    height: 75px;
    transition: all 120ms;
    background-size: cover;

    &:hover {
      .thicker-box-shadow();
    }

    &--blog {
      .at2x-simple("/images/landing/button-blog.png");
    }
  }
}

Use single quotes instead of doubles

/**
 *    Copyright (c) ppy Pty Ltd <contact@ppy.sh>.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.landing-middle-buttons {
  padding: 20px;
  text-align: center;

  &__button {
    .default-box-shadow();
    border-radius: @border-radius-large;
    margin: 5px;
    display: inline-block;
    width: 250px;
    height: 75px;
    transition: all 120ms;
    background-size: cover;

    &:hover {
      .thicker-box-shadow();
    }

    &--blog {
      .at2x-simple('/images/landing/button-blog.png');
    }
  }
}


.panel-item-component {
	float: left;
	margin: 0 3.125em 2em 0;

	> * {
		// width in pixels
		max-width: 320px;
		margin: 0 auto;
	}

	.title {
		> a {
			font-weight: lighter;
			text-decoration: none;
		}
	}

	img {
		display: block;

		&.withLink {
			cursor: pointer;
		}
	}

	.description {
		padding: 1em;

		h1 { font-size: 1.25rem; }
		h2 { font-size: 1.125rem; }
		h3, h4 { font-size: 1rem; }

		ul, ol {
			margin-left: -1em;
		}

		a {
			&,
			& b,
			& strong {
				font-weight: inherit;
			}
		}
	}
}

Add gap between panel-item headline and image

.panel-item-component {
	float: left;
	margin: 0 3.125em 2em 0;

	> * {
		// width in pixels
		max-width: 320px;
		margin: 0 auto;
	}

	.title {
		> a {
			font-weight: lighter;
			text-decoration: none;
		}
	}

	img {
		display: block;

		&.withLink {
			cursor: pointer;
		}
	}

	.title + img {
		margin-top: 1em;
	}

	.description {
		padding: 1em;

		h1 { font-size: 1.25rem; }
		h2 { font-size: 1.125rem; }
		h3, h4 { font-size: 1rem; }

		ul, ol {
			margin-left: -1em;
		}

		a {
			&,
			& b,
			& strong {
				font-weight: inherit;
			}
		}
	}
}


@import (reference) '../css/wee.variables.less';                  // Core configuration
@import (optional, reference) '@{sourcePath}custom/variables.less'; // Custom configuration

{{namespaceOpen}}
@import '../css/wee.reset.less';  // Reset
.wee-reset();

@import '../css/wee.mixins.less'; // Core mixins

{{coreImports}}
{{namespaceClose}}

@import (optional, reference) '@{sourcePath}custom/mixins.less'; // Custom mixins
{{imports}}

@import '@{sourcePath}/custom/screen.less'; // Customizations

{{responsive}}
{{print}}

// Framework
@responsivePath: 'custom/breakpoints';
@legacyMode: false;

Remove redundant slash in Less path

@import (reference) '../css/wee.variables.less';                  // Core configuration
@import (optional, reference) '@{sourcePath}custom/variables.less'; // Custom configuration

{{namespaceOpen}}
@import '../css/wee.reset.less';  // Reset
.wee-reset();

@import '../css/wee.mixins.less'; // Core mixins

{{coreImports}}
{{namespaceClose}}

@import (optional, reference) '@{sourcePath}custom/mixins.less'; // Custom mixins
{{imports}}

@import '@{sourcePath}custom/screen.less'; // Customizations

{{responsive}}
{{print}}

// Framework
@responsivePath: 'custom/breakpoints';
@legacyMode: false;


.asciinema-theme-solarized-light {
  @foreground: #657b83;
  @background: #fdf6e3;

  @color0: #073642;
  @color1: #dc322f;
  @color2: #859900;
  @color3: #b58900;
  @color4: #268bd2;
  @color5: #d33682;
  @color6: #2aa198;
  @color7: #eee8d5;
  @color8: #002b36;
  @color9: #cb4b16;
  @color10: #586e75;
  @color11: #657c83;
  @color12: #839496;
  @color13: #6c71c4;
  @color14: #93a1a1;
  @color15: #fdf6e3;

  .theme-base;
}

Use red color for play button in solarized-light

.asciinema-theme-solarized-light {
  @foreground: #657b83;
  @background: #fdf6e3;

  @color0: #073642;
  @color1: #dc322f;
  @color2: #859900;
  @color3: #b58900;
  @color4: #268bd2;
  @color5: #d33682;
  @color6: #2aa198;
  @color7: #eee8d5;
  @color8: #002b36;
  @color9: #cb4b16;
  @color10: #586e75;
  @color11: #657c83;
  @color12: #839496;
  @color13: #6c71c4;
  @color14: #93a1a1;
  @color15: #fdf6e3;

  .theme-base;
  .theme-play-icon-color(@color1);
}


#application.ic-app {

    .module-sequence-footer {

        .module-sequence-footer-content {
            height: 55px;
            padding-top: 0px;

            a {
                padding: 0;
            }
        }

    }
}

Fix for the footer styling which was being displayed on the very far right side in certain cases

#application.ic-app {

    .module-sequence-footer {

        .module-sequence-footer-content {
            height: 55px;
            padding-top: 0px;

            a {
                padding: 0;
            }
        }

    }

    #footer {
        display: block;
    }
}