fix style so that you can have longer than normal app names

.bucky-nav-large li:first-of-type+li{
  position:absolute;width:30%;left:35%
}
.portlet-search-bar ul.dropdown-menu {
  min-width: 90%;

  li:first-of-type+li {
    position: relative;
    width: inherit;
    left: 0;
  }
}
#myuw-header span {
  font-size:25px;
}
a#myuw-header {
   color: @white;
   font-weight: 200;
}

a#myuw-header:link, a#myuw-header:visited, a#myuw-header:hover,
a#myuw-header:focus, a#myuw-header:active {
   text-decoration: none;
}

a#myuw-header img {
  display: block;
  position: absolute;
  width: 55px;
  top: -15px;
  left: -7px;
  z-index: 5;
  overflow: hidden;
}

.bucky-nav ul li a:hover {
  text-decoration:none;
  color:#1a0000;
}
.navbar-default {
  height:50px !important;
}
.container-fluid {
  height:inherit;
}
.navbar-header {
  height:inherit;
  h3 {
    margin-top:12px;
  }
}

.navbar-default .navbar-toggle {
  float: left;
  margin-left: 8px;
  background-color:rgba(20,20,20,0.7);
  border-color:transparent;
  .icon-bar {
    background-color:@white;
  }
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color:rgba(20,20,20,0.9);
}
.navbar.navbar-default .navbar-header,
.navbar.navbar-inverse .navbar-header {
  margin-left: -15px;
}
.navbar-brand {
  padding:15px 15px 15px 0px;
}
.bucky-nav {
  background:linear-gradient(
    rgba(20,20,20, 0.8),
    rgba(20,20,20, 0.8)
    ),url(../img/madison.jpg);
  background-size:100%;
}
.bucky-nav ul {
  width: 100% !important;
  margin:0px;
  li {
    position: relative;
    display: block;
    padding: 8px 30px;
    margin-bottom: -1px;
    background-color: transparent;
    border: none;
    text-align: left;
    a {
      color:@white;
      font-size:18px;
    }
  }
}
#bucky-navbar-collapse {
  padding:0px;
  border-color:@color1;
}
.navbar {
 border-radius : 0;
 border: 0;
 margin: 0;
}
.navbar-nav {
  margin:0px;
}
.navbar-fixed-top {
  .container-fluid {
  }
}

.notification-badge {
  background-color: @color4;
  border-radius: 4px;
  font-size: .75em;
  font-weight: 200;
  color: @color1;
  padding: 4px 6px 4px 5px;
  margin: 12px 20px 12px 8px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,0.1);
  top: 0px;
  line-height: 1em;
  border: 1px solid @color1;
  min-width: 2em;
}

.portlet-title h1 i {
  margin: 6px;
}
#myuw-header .beta-logo {
  font-size:0.55em;
  color:#fcf49c;
  position:relative;
  top:5px;
  margin-left:3px;
}
.main-search {
  width: 90%;
  display: block;
  background-color: @color4;
  border: none;
  border-bottom: 1px solid @color4;
  margin-top: 6px;
  margin-bottom: 3px;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  font-size: 1.6em;
  color: @color3;
  float: right;
  padding: 3px 0px 3px 15px;
  height:38px;
}
.main-search[placeholder="Search My-UW"] {
  color: @color1;
}
.main-search:focus {
  outline: none;
}
.btn-search {
  padding:9px 12px;
  border:0px solid transparent;
  background-color:@color4;
  top:2px;
  height:38px;
  &:hover {
    background-color:#efe8d8;
  }
}
.header-mobile {
  display:inline-block;
}
.navbar-header .search-mobile-icon .fa-search {
  float:right;
  font-size:1.7em;
  color:#fff;
  padding:14px 20px;
  cursor:pointer;
  border-left:1px solid @color2;
}
.navbar-header .search-mobile-icon .fa-search:hover {
  background-color:@color2;
}
.search-mobile-icon {
  float:right;
  width:20%;
}

.bucky-nav-large li:first-of-type+li{
  position:absolute;width:30%;left:35%
}
.portlet-search-bar ul.dropdown-menu {
  min-width: 90%;

  li:first-of-type+li {
    position: relative;
    width: inherit;
    left: 0;
  }
}
#myuw-header span {
  font-size:25px;
}
a#myuw-header {
   color: @white;
   font-weight: 200;
}

a#myuw-header:link, a#myuw-header:visited, a#myuw-header:hover,
a#myuw-header:focus, a#myuw-header:active {
   text-decoration: none;
}

a#myuw-header img {
  display: block;
  position: absolute;
  width: 55px;
  top: -15px;
  left: -7px;
  z-index: 5;
  overflow: hidden;
}

.bucky-nav ul li a:hover {
  text-decoration:none;
  color:#1a0000;
}
.navbar-default {
  height:50px !important;
}
.container-fluid {
  height:inherit;
}
.navbar-header {
  height:inherit;
  h3 {
    margin-top:12px;
  }
}

.navbar-default .navbar-toggle {
  float: left;
  margin-left: 8px;
  background-color:rgba(20,20,20,0.7);
  border-color:transparent;
  .icon-bar {
    background-color:@white;
  }
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color:rgba(20,20,20,0.9);
}
.navbar.navbar-default .navbar-header,
.navbar.navbar-inverse .navbar-header {
  margin-left: -15px;
}
.navbar-brand {
  padding:15px 15px 15px 0px;
}
.bucky-nav {
  background:linear-gradient(
    rgba(20,20,20, 0.8),
    rgba(20,20,20, 0.8)
    ),url(../img/madison.jpg);
  background-size:100%;
}
.bucky-nav ul {
  width: 100% !important;
  margin:0px;
  li {
    position: relative;
    display: block;
    padding: 8px 30px;
    margin-bottom: -1px;
    background-color: transparent;
    border: none;
    text-align: left;
    a {
      color:@white;
      font-size:18px;
    }
  }
}
#bucky-navbar-collapse {
  padding:0px;
  border-color:@color1;
}
.navbar {
 border-radius : 0;
 border: 0;
 margin: 0;
}
.navbar-nav {
  margin:0px;
}
.navbar-fixed-top {
  .container-fluid {
  }
}

.notification-badge {
  background-color: @color4;
  border-radius: 4px;
  font-size: .75em;
  font-weight: 200;
  color: @color1;
  padding: 4px 6px 4px 5px;
  margin: 12px 20px 12px 8px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,0.1);
  top: 0px;
  line-height: 1em;
  border: 1px solid @color1;
  min-width: 2em;
}

.portlet-title h1 i {
  margin: 6px;
}
#myuw-header .beta-logo {
  font-size:0.55em;
  color:#fcf49c;
  position:relative;
  top:5px;
  margin-left:3px;
}
.main-search {
  width: 90%;
  display: block;
  background-color: @color4;
  border: none;
  border-bottom: 1px solid @color4;
  margin-top: 6px;
  margin-bottom: 3px;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  font-size: 1.6em;
  color: @color3;
  float: right;
  padding: 3px 0px 3px 15px;
  height:38px;
}
.main-search[placeholder="Search My-UW"] {
  color: @color1;
}
.main-search:focus {
  outline: none;
}
.btn-search {
  padding:9px 12px;
  border:0px solid transparent;
  background-color:@color4;
  top:2px;
  height:38px;
  &:hover {
    background-color:#efe8d8;
  }
}
.header-mobile {
  width:50%;
  display:inline-block;
}
.navbar-header .search-mobile-icon .fa-search {
  float:right;
  font-size:1.7em;
  color:#fff;
  padding:14px 20px;
  cursor:pointer;
  border-left:1px solid @color2;
}
.navbar-header .search-mobile-icon .fa-search:hover {
  background-color:@color2;
}
.search-mobile-icon {
  float:right;
  width:20%;
}


increase large-screen whitespace above h2s


fix pre background color bug

fix pre background color bug

@import "syntax-variables";

.markdown-preview-enhanced {
  @import (less) "../node_modules/mermaid/dist/mermaid.css";

  @fg: @syntax-text-color;
  @bg: @syntax-background-color;

  @fg-accent: @syntax-cursor-color;
  @fg-strong: contrast(@bg, darken(@fg, 32%), lighten(@fg, 32%));
  @fg-subtle: contrast(@fg, lighten(@fg, 16%), darken(@fg, 16%));

  @border: contrast(@bg, lighten(@bg, 16%), darken(@bg, 16%));

  @margin: 16px;

  @github-black: #555;
  @github-syntax-background-color: #f7f7f7;

  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  // font-size: 1.2em;
  font-size: 16px;
  line-height: 1.6;
  color: @fg;
  background-color: @bg;
  overflow: auto;
  margin: 10px 13px 10px 13px;
  padding: 2em;

  &[data-use-github-style=true] {
    color: @github-black;
    background-color: #fff;
  }

  & > :first-child {
    margin-top: 0;
  }

  // Headings --------------------
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: @margin;
    color: @fg-strong;
  }

  &[data-use-github-style=true] {
    h1, h2, h3, h4, h5, h6 { color: @github-black; }
  }

  h1 { font-size: 2.4em; font-weight: 300; padding-bottom: 0.3em; border-bottom: 1px solid @border;}
  h2 { font-size: 1.8em; font-weight: 400; border-bottom: 1px solid @border;}
  h3 { font-size: 1.5em; font-weight: 500; }
  h4 { font-size: 1.2em; font-weight: 600; }
  h5 { font-size: 1.1em; font-weight: 600; }
  h6 { font-size: 1.0em; font-weight: 600; }

  &[data-use-github-style=true] {
    h1, h2 {
      border-bottom: 1px solid #e7e7e7;
    }
  }

  // Emphasis --------------------

  strong {
    color: @fg-strong;
  }

  &[data-use-github-style=true] {
    strong { color: @github-black; }
  }

  del {
    color: @fg-subtle;
  }

  // Link --------------------
  a:not([href]) {
    color: inherit;
    text-decoration: none;
  }

  a {
    color: #08c;
    text-decoration: none;
  }

  a:hover {
    color: #0050a3;
    text-decoration: none;
  }

  // Images --------------------
  img {
    max-width: 100%;
  }

  // Paragraph --------------------

  & > p {
    margin-top: 0;
    margin-bottom: @margin;
  }

  // List --------------------

  & > ul,
  & > ol {
    margin-bottom: @margin;
  }

  ul,
  ol {
    padding-left: 2em;

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

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    margin-bottom: 0;

    &.task-list-item {
      list-style: none;
    }
  }

  li > p {
    // margin-top: @margin;
    margin-top: 0;
    margin-bottom: 0;
  }

  .task-list-item-checkbox {
    margin: 0 0.2em 0.25em -1.6em;
    vertical-align: middle;
  }

  // Blockquotes --------------------

  blockquote {
    margin: @margin 0;
    font-size: inherit;
    padding: 0 15px;
    color: @fg-subtle;
    border-left: 4px solid @border;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &[data-use-github-style=true] {
    blockquote {
      color: #777;
      border-left: 4px solid #ddd;
    }
  }

  // HR --------------------
  hr {
    height: 4px;
    margin: @margin*2 0;
    background-color: @border;
    border: 0 none;
  }

  &[data-use-github-style=true] {
    hr {
      background-color: #e7e7e7;
    }
  }

  // Table --------------------
  table {
  	margin: 10px 0 15px 0;
  	border-collapse: collapse;

    th {
      font-weight: bold;
      color: @fg-strong;
    }

    td, th {
    	border: 1px solid @border;
    	padding: 5px 10px;
    }

    th {
    	padding: 5px 10px;
    }
  }

  &[data-use-github-style=true] {
    th {
      color: @github-black;
    }
    td, th {
      border: 1px solid #ddd;
    }
  }

  // Code --------------------
  code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.85em !important;
    color: @fg-strong;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
  }

  &[data-use-github-style=true] {
    code {
      background-color: rgba(0, 0, 0, 0.04);
      color: inherit;
    }
  }

  // YIYI add this
  // Code tags within code blocks (<pre>s)
  pre > code {
    padding: 0;
    margin: 0;
    font-size: 0.85em !important;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
  }

  .highlight {
    margin-bottom: @margin;
  }

  .highlight pre,
  pre {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    padding: @margin;
    overflow: auto;
    font-size: 0.85em !important;
    line-height: 1.45;

    color: @fg;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 6%));

    border: @border;
    border-radius: 3px;
  }

  &[data-use-github-style=true] {
    .highlight pre, pre, pre.editor-colors {
      background-color: @github-syntax-background-color;
      color: @github-black;
    }
  }

  .highlight pre {
    margin-bottom: 0;
    word-break: normal;
  }

  pre {
    word-wrap: normal;
  }

  pre code,
  pre tt {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;

    &:before,
    &:after {
      content: normal;
    }
  }

  p,
  blockquote,
  ul, ol, dl,
  pre {
    margin-top: 0;
    margin-bottom: @margin;
  }

  atom-text-editor {
    margin: @margin 0;
    padding: 1em;
    font-size: .92em;
    border-radius: 3px;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 4%));
  }

  // KBD --------------------
  kbd {
    color: @fg-strong;
    border: 1px solid @border;
    border-bottom: 2px solid darken(@border, 6%);
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
  }

  &[data-use-github-style=true] {
    kbd {
      color: @github-black;
      background-color: #fcfcfc;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb;
    }
  }

  .pagebreak, .newpage {
    page-break-before: always;
  }

  @media screen and (min-width: 914px) {
    width: 854px;
    margin:10px auto;
    overflow-y: scroll;
    background: @bg;
  }

  // mobile
  @media screen and (max-width: 400px) {
    font-size: 14px;
  }

  &[data-use-github-style=true] {
    @media screen and (min-width: 914px) {
      background: #fff;
    }
  }

  // very nice tutorial & intro
  // https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
  @media print{
    background-color: @bg;

    h1, h2, h3, h4, h5, h6 {
      color: @fg-strong;
    }

    blockquote {
      color: @fg-subtle;
    }

    table, pre {
       page-break-inside: avoid;
    }

    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    pre, code {
        word-wrap: break-word;
    }
  }

  &[data-use-github-style=true] {
    @media print {
      background: #fff;

      h1, h2, h3, h4, h5, h6 {
        color: #222;
      }

      blockquote {
        color: #777;
      }

      pre {
        border: 2px solid #f6f6f6;
      }
    }
  }

  // mermaid:
  .mermaid {
    margin-bottom: @margin;

    .edgePath {
      .path {
        stroke: @fg-strong;
      }

      marker {
        path {
          fill: @fg-strong !important;
          opacity: 1 !important;
        }
      }
    }

    line, marker {
      stroke: @fg-strong !important;
      opacity: 1 !important;
    }

    .messageText {
      fill: @fg-strong;
    }
  }

  &[data-use-github-style=true] {
    .mermaid {
      .edgePath {
        .path {
          stroke: @github-black;
        }
      }

      marker {
        path {
          fill: @github-black !important;
          opacity: 1 !important;
        }
      }
    }

    line, marker {
      stroke: @github-black !important;
      opacity: 1 !important;
    }

    .messageText {
      fill: @github-black;
    }
  }

  // github syntax theme
  // forked and modified from https://github.com/smlombardi/inspired-github
  .github-syntax-theme {
    // General colors
    @syntax-text-color: #333;
    @syntax-cursor-color: #000000;
    @syntax-selection-color: rgba(178, 215, 255, .4);
    @syntax-background-color: #f7f7f7;

    // Guide colors
    @syntax-wrap-guide-color: #dfdfdf;
    @syntax-indent-guide-color: #dfdfdf;
    @syntax-invisible-character-color: #dfdfdf;

    // For find and replace markers
    @syntax-result-marker-color: #000000;
    @syntax-result-marker-color-selected: #000000;

    // Gutter colors
    @syntax-gutter-text-color: lighten(#000000, 70%);
    @syntax-gutter-text-color-selected: lighten(#000000, 30%);
    @syntax-gutter-background-color: #ffffff;
    @syntax-gutter-background-color-selected: #f5f5f5;

    // For git diff info. i.e. in the gutter
    // These are static and were not extracted from your textmate theme
    @syntax-color-renamed:  #96CBFE;
    @syntax-color-added:    #A8FF60;
    @syntax-color-modified: #E9C062;
    @syntax-color-removed:  #CC6666;

    @dark-blue:             hsl(210, 70%, 45%);
    @light-blue:            hsl(207, 62%, 48%);
    @teal:                  hsl(195, 100%, 40%);
    @purple:                #8567b5;
    @text:                  #000000;
    @burgundy:              #ad1c5d;
    @pink:                  #de68ad;
    @red:                   #b52a1d;
    @green:                 #63a35c;
    @lime:                  #a5d70e;
    @orange:                #ee6a42;
    @gold:                  #b57f00;
    @yellow:                hsl(48, 100%, 47%);

    atom-text-editor, :host {
      background-color: @syntax-background-color;
      color: @syntax-text-color;
    }

    pre {
      background-color: @syntax-background-color;
      color: @syntax-text-color;
    }

    atom-text-editor .gutter, :host .gutter {
      background-color: @syntax-gutter-background-color;
      color: @syntax-gutter-text-color;
    }

    atom-text-editor .gutter .line-number.cursor-line, :host .gutter .line-number.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: @syntax-gutter-text-color-selected;
    }

    atom-text-editor .gutter .line-number.cursor-line-no-selection, :host .gutter .line-number.cursor-line-no-selection {
      color: @syntax-gutter-text-color-selected;
    }

    atom-text-editor .wrap-guide, :host .wrap-guide {
      color: @syntax-wrap-guide-color;
    }

    atom-text-editor .indent-guide, :host .indent-guide {
      color: @syntax-indent-guide-color;
    }

    atom-text-editor .invisible-character, :host .invisible-character {
      color: @syntax-invisible-character-color;
    }

    atom-text-editor .search-results .marker .region, :host .search-results .marker .region {
      background-color: transparent;
      border: @syntax-result-marker-color;
    }

    atom-text-editor .search-results .marker.current-result .region, :host .search-results .marker.current-result .region {
      border: @syntax-result-marker-color-selected;
    }

    atom-text-editor.is-focused .cursor, :host(.is-focused) .cursor {
      border-color: @syntax-cursor-color;
    }

    atom-text-editor.is-focused .selection .region, :host(.is-focused) .selection .region {
      background-color: @syntax-selection-color;
    }

    atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line, :host(.is-focused) .line-number.cursor-line-no-selection, :host(.is-focused) .line.cursor-line {
      background-color: rgba(240, 240, 240,.5);
    }

    .comment {
      color: #b0b0b0;
    }

    .string, .string .constant.character.escape {
      color: @dark-blue;
    }

    .constant.numeric {
      color: @teal;
    }

    .constant.language {
      color: @teal;
    }

    .constant.character, .constant.other.rgb-value {
      color: @teal;
    }

    .constant.numeric.line-number.find-in-files, .constant.numeric.line-number.match.find-in-files {
      color: #abb0b3;
    }

    .entity.other.attribute-name.id.css .punctuation.definition.entity.css {}

    .entity.name.class {
      color: @teal;
    }

    .entity.other.inherited-class {
      color: @teal;
    }

    // to make the = in html tags all the same
    .meta.tag.any.html, .meta.tag.block.any.html {
      color: #abb0b3;
    }

    .entity.name.tag {
      color: @green;
    }

    .entity.name.function {
      color: @purple;
    }

    .entity.other.attribute-name,
    .entity.other.attribute-name .punctuation.definition.entity.scss,
    .entity.other.attribute-name.id.css,
    .entity.other.attribute-name.id.css .punctuation.definition.entity.css,
    .entity.other.attribute-name.class.css .punctuation.definition.entity.css  {
      color: @purple;
    }

    .punctuation.definition.tag.begin.html, .punctuation.definition.tag.end.html, .punctuation.definition.tag.html,  .meta.tag.block.any.html {
      color: @syntax-text-color;
    }

    .keyword.control {
      color: @burgundy;
    }

    .keyword.operator {
      color: @purple;
    }

    .storage {
      color: @burgundy;
    }

    .storage.type {
      color: @burgundy;
      &.function {
      //  font-weight: bold;
      }
    }

    .support.function {
      color: @teal;
    }

    .support.constant {
      color: @teal;
    }

    .support.type, .support.class, .meta.property-name.scss {
      color: @teal;
    }

    .support.other.variable {
      color: @text;
    }

    .invalid, .invalid.illegal {
      color: #f8f8f8;
      background-color: @red;
    }

    .invalid.deprecated {
      color: @red;
      background-color: #ffffff;
    }

    .entity.name.filename.find-in-files {
      color: @text;
    }

    .source.css .punctuation.definition.entity, .punctuation.terminator.rule.scss {
      color: @text;
    }

    .source.css .entity.other.attribute-name.pseudo-class, .source.css .entity.other.attribute-name.pseudo-element {
      color: @burgundy;
    }

    .source.css .meta.value, .source.css .support.constant, .source.css .support.function {
      color: @green;
    }

    .source.scss .entity.other.attribute-name.pseudo-class, .source.scss .entity.other.attribute-name.pseudo-element {
      color: @burgundy;
    }

    .support.constant.property-value, .source.scss .support.function, .meta.property-value.scss {
      color: @green;
    }

    .variable, .source.scss .variable, .variable.interpolation.scss, .source.scss .meta.set.variable  {
      color: @pink;
    }

    .keyword.control.else.scss, .keyword.control.if.scss, .keyword.control.content.scss {
      color: @green;
    }
    .keyword.other.unit {
      color: @burgundy;
    }
    .keyword.other.important {
      color: #eb4535;
    }

    .entity.name.tag.reference.scss {
      color: @gold;
    }

    .entity.name.type.new.js {
      color: @purple;
    }

    .variable.language.js {
      color: @orange;
    }
    .variable.parameter.function {
      color: @gold;
    }

    .source.js .meta.function .entity.name.function, .source.js .entity.name.function .meta.function {
      color: @purple;
    }

    .source.php .entity.name.type.class {
      color: @orange;
    }

    .punctuation.definition.heading.markdown, .punctuation.definition.italic.markdown, .punctuation.definition.bold.markdown, .punctuation.definition.string.begin.markdown, .punctuation.definition.string.end.markdown, .punctuation.definition.metadata.markdown, .punctuation.definition.link.markdown, .punctuation.definition.blockquote.markdown, .punctuation.definition.raw.markdown {
      color: @burgundy;
    }

    .punctuation.section.function.scss {
      color: @green
    }

    .text.html.markdown .meta.separator {
      color: #b3b3b3;
    }

    .text.html.markdown .markup.heading {
    }

    .text.html.markdown .markup.raw.block {
      color: @text;
    }

    .text.html.markdown .markup.raw.inline {
      color: @text;
    }

    .text.html.markdown .meta.link, .text.html.markdown .meta.image {
      color: #4183c4;
    }

    .text.html.markdown .markup.underline.link, .text.html.markdown .constant.other.reference {
      font-style: italic;
    }

    .text.html.markdown .markup.list {
      color: @orange;
    }

    .text.html.markdown .markup.bold {
      font-weight: bold;
    }

    .text.html.markdown .markup.italic {
      font-style: italic;
    }

    .text.html.markdown .markup.bold .markup.italic {
      font-weight: bold;
      font-style: italic;
    }

    .text.html.markdown .markup.italic .markup.bold {
      font-weight: bold;
      font-style: italic;
    }

    .string.quoted.double.html .invalid.illegal.bad-ampersand.html {
      color: @dark-blue;
      background-color: #ffffff;
    }

    .bracket-matcher .region {
        border-bottom: 1px solid hsla(48, 100%, 47%, .8);
        background-color: hsla(48, 100%, 60%, 0.1);
        z-index: 100;
    }

    // new angular colors

    .meta.tag.template.angular {
      color: @dark-blue;
    }
    .meta.tag.template.angular .punctuation.definition.block.begin.angular,
    .meta.tag.template.angular .punctuation.definition.block.end.angular,
    .meta.tag.template.angular .meta.brace.curly.js  {
      color: @burgundy;
    }
    .entity.other.attribute-name.html.angular,
    .meta.attribute.html.angular {
      color: @purple !important;
    }
  }

  &[data-use-github-syntax-theme=true] {
    .github-syntax-theme() !important; // this has to be important!!!
  }
}

@import "syntax-variables";

.markdown-preview-enhanced {
  @import (less) "../node_modules/mermaid/dist/mermaid.css";

  @fg: @syntax-text-color;
  @bg: @syntax-background-color;

  @fg-accent: @syntax-cursor-color;
  @fg-strong: contrast(@bg, darken(@fg, 32%), lighten(@fg, 32%));
  @fg-subtle: contrast(@fg, lighten(@fg, 16%), darken(@fg, 16%));

  @border: contrast(@bg, lighten(@bg, 16%), darken(@bg, 16%));

  @margin: 16px;

  @github-black: #555;

  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  // font-size: 1.2em;
  font-size: 16px;
  line-height: 1.6;
  color: @fg;
  background-color: @bg;
  overflow: auto;
  margin: 10px 13px 10px 13px;
  padding: 2em;

  &[data-use-github-style=true] {
    color: @github-black;
    background-color: #fff;
  }

  & > :first-child {
    margin-top: 0;
  }

  // Headings --------------------
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: @margin;
    color: @fg-strong;
  }

  &[data-use-github-style=true] {
    h1, h2, h3, h4, h5, h6 { color: @github-black; }
  }

  h1 { font-size: 2.4em; font-weight: 300; padding-bottom: 0.3em; border-bottom: 1px solid @border;}
  h2 { font-size: 1.8em; font-weight: 400; border-bottom: 1px solid @border;}
  h3 { font-size: 1.5em; font-weight: 500; }
  h4 { font-size: 1.2em; font-weight: 600; }
  h5 { font-size: 1.1em; font-weight: 600; }
  h6 { font-size: 1.0em; font-weight: 600; }

  &[data-use-github-style=true] {
    h1, h2 {
      border-bottom: 1px solid #e7e7e7;
    }
  }

  // Emphasis --------------------

  strong {
    color: @fg-strong;
  }

  &[data-use-github-style=true] {
    strong { color: @github-black; }
  }

  del {
    color: @fg-subtle;
  }

  // Link --------------------
  a:not([href]) {
    color: inherit;
    text-decoration: none;
  }

  a {
    color: #08c;
    text-decoration: none;
  }

  a:hover {
    color: #0050a3;
    text-decoration: none;
  }

  // Images --------------------
  img {
    max-width: 100%;
  }

  // Paragraph --------------------

  & > p {
    margin-top: 0;
    margin-bottom: @margin;
  }

  // List --------------------

  & > ul,
  & > ol {
    margin-bottom: @margin;
  }

  ul,
  ol {
    padding-left: 2em;

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

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    margin-bottom: 0;

    &.task-list-item {
      list-style: none;
    }
  }

  li > p {
    // margin-top: @margin;
    margin-top: 0;
    margin-bottom: 0;
  }

  .task-list-item-checkbox {
    margin: 0 0.2em 0.25em -1.6em;
    vertical-align: middle;
  }

  // Blockquotes --------------------

  blockquote {
    margin: @margin 0;
    font-size: inherit;
    padding: 0 15px;
    color: @fg-subtle;
    border-left: 4px solid @border;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &[data-use-github-style=true] {
    blockquote {
      color: #777;
      border-left: 4px solid #ddd;
    }
  }

  // HR --------------------
  hr {
    height: 4px;
    margin: @margin*2 0;
    background-color: @border;
    border: 0 none;
  }

  &[data-use-github-style=true] {
    hr {
      background-color: #e7e7e7;
    }
  }

  // Table --------------------
  table {
  	margin: 10px 0 15px 0;
  	border-collapse: collapse;

    th {
      font-weight: bold;
      color: @fg-strong;
    }

    td, th {
    	border: 1px solid @border;
    	padding: 5px 10px;
    }

    th {
    	padding: 5px 10px;
    }
  }

  &[data-use-github-style=true] {
    th {
      color: @github-black;
    }
    td, th {
      border: 1px solid #ddd;
    }
  }

  // Code --------------------
  code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.85em !important;
    color: @fg-strong;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
  }

  &[data-use-github-style=true] {
    code {
      background-color: rgba(0, 0, 0, 0.04);
      color: inherit;
    }
  }

  // YIYI add this
  // Code tags within code blocks (<pre>s)
  pre > code {
    padding: 0;
    margin: 0;
    font-size: 0.85em !important;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
  }

  .highlight {
    margin-bottom: @margin;
  }

  .highlight pre,
  pre {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    padding: @margin;
    overflow: auto;
    font-size: 0.85em !important;
    line-height: 1.45;

    color: @fg;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 6%));

    border: @border;
    border-radius: 3px;
  }

  &[data-use-github-style=true] {
    .highlight pre, pre {
      background-color: rgba(0, 0, 0, 0.04);
      color: @github-black;
    }
  }

  .highlight pre {
    margin-bottom: 0;
    word-break: normal;
  }

  pre {
    word-wrap: normal;
  }

  pre code,
  pre tt {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;

    &:before,
    &:after {
      content: normal;
    }
  }

  p,
  blockquote,
  ul, ol, dl,
  pre {
    margin-top: 0;
    margin-bottom: @margin;
  }

  atom-text-editor {
    margin: @margin 0;
    padding: 1em;
    font-size: .92em;
    border-radius: 3px;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 4%));
  }

  // KBD --------------------
  kbd {
    color: @fg-strong;
    border: 1px solid @border;
    border-bottom: 2px solid darken(@border, 6%);
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
  }

  &[data-use-github-style=true] {
    kbd {
      color: @github-black;
      background-color: #fcfcfc;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb;
    }
  }

  .pagebreak, .newpage {
    page-break-before: always;
  }

  @media screen and (min-width: 914px) {
    width: 854px;
    margin:10px auto;
    overflow-y: scroll;
    background: @bg;
  }

  // mobile
  @media screen and (max-width: 400px) {
    font-size: 14px;
  }

  &[data-use-github-style=true] {
    @media screen and (min-width: 914px) {
      background: #fff;
    }
  }

  // very nice tutorial & intro
  // https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
  @media print{
    background-color: @bg;

    h1, h2, h3, h4, h5, h6 {
      color: @fg-strong;
    }

    blockquote {
      color: @fg-subtle;
    }

    table, pre {
       page-break-inside: avoid;
    }

    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    pre, code {
        word-wrap: break-word;
    }
  }

  &[data-use-github-style=true] {
    @media print {
      background: #fff;

      h1, h2, h3, h4, h5, h6 {
        color: #222;
      }

      blockquote {
        color: #777;
      }

      pre {
        border: 2px solid #f6f6f6;
      }
    }
  }

  // mermaid:
  .mermaid {
    margin-bottom: @margin;

    .edgePath {
      .path {
        stroke: @fg-strong;
      }

      marker {
        path {
          fill: @fg-strong !important;
          opacity: 1 !important;
        }
      }
    }

    line, marker {
      stroke: @fg-strong !important;
      opacity: 1 !important;
    }

    .messageText {
      fill: @fg-strong;
    }
  }

  &[data-use-github-style=true] {
    .mermaid {
      .edgePath {
        .path {
          stroke: @github-black;
        }
      }

      marker {
        path {
          fill: @github-black !important;
          opacity: 1 !important;
        }
      }
    }

    line, marker {
      stroke: @github-black !important;
      opacity: 1 !important;
    }

    .messageText {
      fill: @github-black;
    }
  }

  // github syntax theme
  // forked and modified from https://github.com/smlombardi/inspired-github
  .github-syntax-theme {
    // General colors
    @syntax-text-color: #333;
    @syntax-cursor-color: #000000;
    @syntax-selection-color: rgba(178, 215, 255, .4);
    @syntax-background-color: #f7f7f7;

    // Guide colors
    @syntax-wrap-guide-color: #dfdfdf;
    @syntax-indent-guide-color: #dfdfdf;
    @syntax-invisible-character-color: #dfdfdf;

    // For find and replace markers
    @syntax-result-marker-color: #000000;
    @syntax-result-marker-color-selected: #000000;

    // Gutter colors
    @syntax-gutter-text-color: lighten(#000000, 70%);
    @syntax-gutter-text-color-selected: lighten(#000000, 30%);
    @syntax-gutter-background-color: #ffffff;
    @syntax-gutter-background-color-selected: #f5f5f5;

    // For git diff info. i.e. in the gutter
    // These are static and were not extracted from your textmate theme
    @syntax-color-renamed:  #96CBFE;
    @syntax-color-added:    #A8FF60;
    @syntax-color-modified: #E9C062;
    @syntax-color-removed:  #CC6666;

    @dark-blue:             hsl(210, 70%, 45%);
    @light-blue:            hsl(207, 62%, 48%);
    @teal:                  hsl(195, 100%, 40%);
    @purple:                #8567b5;
    @text:                  #000000;
    @burgundy:              #ad1c5d;
    @pink:                  #de68ad;
    @red:                   #b52a1d;
    @green:                 #63a35c;
    @lime:                  #a5d70e;
    @orange:                #ee6a42;
    @gold:                  #b57f00;
    @yellow:                hsl(48, 100%, 47%);

    atom-text-editor, :host {
      background-color: @syntax-background-color;
      color: @syntax-text-color;
    }

    atom-text-editor .gutter, :host .gutter {
      background-color: @syntax-gutter-background-color;
      color: @syntax-gutter-text-color;
    }

    atom-text-editor .gutter .line-number.cursor-line, :host .gutter .line-number.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: @syntax-gutter-text-color-selected;
    }

    atom-text-editor .gutter .line-number.cursor-line-no-selection, :host .gutter .line-number.cursor-line-no-selection {
      color: @syntax-gutter-text-color-selected;
    }

    atom-text-editor .wrap-guide, :host .wrap-guide {
      color: @syntax-wrap-guide-color;
    }

    atom-text-editor .indent-guide, :host .indent-guide {
      color: @syntax-indent-guide-color;
    }

    atom-text-editor .invisible-character, :host .invisible-character {
      color: @syntax-invisible-character-color;
    }

    atom-text-editor .search-results .marker .region, :host .search-results .marker .region {
      background-color: transparent;
      border: @syntax-result-marker-color;
    }

    atom-text-editor .search-results .marker.current-result .region, :host .search-results .marker.current-result .region {
      border: @syntax-result-marker-color-selected;
    }

    atom-text-editor.is-focused .cursor, :host(.is-focused) .cursor {
      border-color: @syntax-cursor-color;
    }

    atom-text-editor.is-focused .selection .region, :host(.is-focused) .selection .region {
      background-color: @syntax-selection-color;
    }

    atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line, :host(.is-focused) .line-number.cursor-line-no-selection, :host(.is-focused) .line.cursor-line {
      background-color: rgba(240, 240, 240,.5);
    }

    .comment {
      color: #b0b0b0;
    }

    .string, .string .constant.character.escape {
      color: @dark-blue;
    }

    .constant.numeric {
      color: @teal;
    }

    .constant.language {
      color: @teal;
    }

    .constant.character, .constant.other.rgb-value {
      color: @teal;
    }

    .constant.numeric.line-number.find-in-files, .constant.numeric.line-number.match.find-in-files {
      color: #abb0b3;
    }

    .entity.other.attribute-name.id.css .punctuation.definition.entity.css {}

    .entity.name.class {
      color: @teal;
    }

    .entity.other.inherited-class {
      color: @teal;
    }

    // to make the = in html tags all the same
    .meta.tag.any.html, .meta.tag.block.any.html {
      color: #abb0b3;
    }

    .entity.name.tag {
      color: @green;
    }

    .entity.name.function {
      color: @purple;
    }

    .entity.other.attribute-name,
    .entity.other.attribute-name .punctuation.definition.entity.scss,
    .entity.other.attribute-name.id.css,
    .entity.other.attribute-name.id.css .punctuation.definition.entity.css,
    .entity.other.attribute-name.class.css .punctuation.definition.entity.css  {
      color: @purple;
    }

    .punctuation.definition.tag.begin.html, .punctuation.definition.tag.end.html, .punctuation.definition.tag.html,  .meta.tag.block.any.html {
      color: @syntax-text-color;
    }

    .keyword.control {
      color: @burgundy;
    }

    .keyword.operator {
      color: @purple;
    }

    .storage {
      color: @burgundy;
    }

    .storage.type {
      color: @burgundy;
      &.function {
      //  font-weight: bold;
      }
    }

    .support.function {
      color: @teal;
    }

    .support.constant {
      color: @teal;
    }

    .support.type, .support.class, .meta.property-name.scss {
      color: @teal;
    }

    .support.other.variable {
      color: @text;
    }

    .invalid, .invalid.illegal {
      color: #f8f8f8;
      background-color: @red;
    }

    .invalid.deprecated {
      color: @red;
      background-color: #ffffff;
    }

    .entity.name.filename.find-in-files {
      color: @text;
    }

    .source.css .punctuation.definition.entity, .punctuation.terminator.rule.scss {
      color: @text;
    }

    .source.css .entity.other.attribute-name.pseudo-class, .source.css .entity.other.attribute-name.pseudo-element {
      color: @burgundy;
    }

    .source.css .meta.value, .source.css .support.constant, .source.css .support.function {
      color: @green;
    }

    .source.scss .entity.other.attribute-name.pseudo-class, .source.scss .entity.other.attribute-name.pseudo-element {
      color: @burgundy;
    }

    .support.constant.property-value, .source.scss .support.function, .meta.property-value.scss {
      color: @green;
    }

    .variable, .source.scss .variable, .variable.interpolation.scss, .source.scss .meta.set.variable  {
      color: @pink;
    }

    .keyword.control.else.scss, .keyword.control.if.scss, .keyword.control.content.scss {
      color: @green;
    }
    .keyword.other.unit {
      color: @burgundy;
    }
    .keyword.other.important {
      color: #eb4535;
    }

    .entity.name.tag.reference.scss {
      color: @gold;
    }

    .entity.name.type.new.js {
      color: @purple;
    }

    .variable.language.js {
      color: @orange;
    }
    .variable.parameter.function {
      color: @gold;
    }

    .source.js .meta.function .entity.name.function, .source.js .entity.name.function .meta.function {
      color: @purple;
    }

    .source.php .entity.name.type.class {
      color: @orange;
    }

    .punctuation.definition.heading.markdown, .punctuation.definition.italic.markdown, .punctuation.definition.bold.markdown, .punctuation.definition.string.begin.markdown, .punctuation.definition.string.end.markdown, .punctuation.definition.metadata.markdown, .punctuation.definition.link.markdown, .punctuation.definition.blockquote.markdown, .punctuation.definition.raw.markdown {
      color: @burgundy;
    }

    .punctuation.section.function.scss {
      color: @green
    }

    .text.html.markdown .meta.separator {
      color: #b3b3b3;
    }

    .text.html.markdown .markup.heading {
    }

    .text.html.markdown .markup.raw.block {
      color: @text;
    }

    .text.html.markdown .markup.raw.inline {
      color: @text;
    }

    .text.html.markdown .meta.link, .text.html.markdown .meta.image {
      color: #4183c4;
    }

    .text.html.markdown .markup.underline.link, .text.html.markdown .constant.other.reference {
      font-style: italic;
    }

    .text.html.markdown .markup.list {
      color: @orange;
    }

    .text.html.markdown .markup.bold {
      font-weight: bold;
    }

    .text.html.markdown .markup.italic {
      font-style: italic;
    }

    .text.html.markdown .markup.bold .markup.italic {
      font-weight: bold;
      font-style: italic;
    }

    .text.html.markdown .markup.italic .markup.bold {
      font-weight: bold;
      font-style: italic;
    }

    .string.quoted.double.html .invalid.illegal.bad-ampersand.html {
      color: @dark-blue;
      background-color: #ffffff;
    }

    .bracket-matcher .region {
        border-bottom: 1px solid hsla(48, 100%, 47%, .8);
        background-color: hsla(48, 100%, 60%, 0.1);
        z-index: 100;
    }

    // new angular colors

    .meta.tag.template.angular {
      color: @dark-blue;
    }
    .meta.tag.template.angular .punctuation.definition.block.begin.angular,
    .meta.tag.template.angular .punctuation.definition.block.end.angular,
    .meta.tag.template.angular .meta.brace.curly.js  {
      color: @burgundy;
    }
    .entity.other.attribute-name.html.angular,
    .meta.attribute.html.angular {
      color: @purple !important;
    }
  }

  &[data-use-github-syntax-theme=true] {
    .github-syntax-theme() !important; // this has to be important!!!
  }
}


Changed max-height in height, this way they change of height won't be an issue for the popup

/*
 *= require bootstrap
 *= require bubble
 */

@import "bootstrap/variables";
@import "bootstrap/mixins";
html {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  background: #fff;
  width: 460px;
  font-family: "Helvetica Neue", "Lucida Grande", 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
  padding: 10px 5px 0;
}

a:focus {
  outline: none;
}
#container {
  padding: 0 !important;

  #new_fact_form {
    display: none;
  }

  #header {
    overflow: auto;
    border-bottom: 1px solid #ccc;
    color: #000;
    margin: 0 0 10px;
    padding: 0 0 5px;

    label {
      display: inline;

      input[type=checkbox] {
        display: inline;
      }
    }

    img {
      vertical-align: middle;
    }
  }

  label#annotate_button {
    display: inline-block;
  }

  label {
    margin-bottom: -1px;
  }

  textarea {
    color: #555;
    border: 1px dotted #ccc;
    background: transparent;
    cursor: default;
    box-shadow: none;
    resize: none;
    height: 60px;
    line-height: 20px;
  }

  form.form-horizontal {
    margin: 0;
  }
  #annotate_button {
    cursor: pointer;
  }
  #add_to_channels {
    ul {
      li {
        margin-bottom: 3px;
      }
      width: 250px;
      height: 162px;
      overflow: scroll;
      padding: 8px 9px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #f5f5f5;
      border: 1px solid #eee;
      border: 1px solid rgba(0, 0, 0, 0.05);
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    .add-channel {
      margin-top: 10px;
    }
  }

  #blacklisted {
    display:none;
  }

  #error_loading_factlink {
    display:none;
  }

}

div.alert-message {
  a.close {
    font-size: 20px;
    margin-top: -3px;
  }
}

article.fact {
  .wheel {
    width: 60px;
    float: left;
  }
  header {
    padding-top: 12px;
    .head.edit {
      display: block;
    }
  }
}

/*
 *= require bootstrap
 *= require bubble
 */

@import "bootstrap/variables";
@import "bootstrap/mixins";
html {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  background: #fff;
  width: 460px;
  font-family: "Helvetica Neue", "Lucida Grande", 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
  padding: 10px 5px 0;
}

a:focus {
  outline: none;
}
#container {
  padding: 0 !important;

  #new_fact_form {
    display: none;
  }

  #header {
    overflow: auto;
    border-bottom: 1px solid #ccc;
    color: #000;
    margin: 0 0 10px;
    padding: 0 0 5px;

    label {
      display: inline;

      input[type=checkbox] {
        display: inline;
      }
    }

    img {
      vertical-align: middle;
    }
  }

  label#annotate_button {
    display: inline-block;
  }

  label {
    margin-bottom: -1px;
  }

  textarea {
    color: #555;
    border: 1px dotted #ccc;
    background: transparent;
    cursor: default;
    box-shadow: none;
    resize: none;
    height: 60px;
    line-height: 20px;
  }

  form.form-horizontal {
    margin: 0;
  }
  #annotate_button {
    cursor: pointer;
  }
  #add_to_channels {
    ul {
      li {
        margin-bottom: 3px;
      }
      width: 250px;
      max-height: 162px;
      overflow: scroll;
      padding: 8px 9px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #f5f5f5;
      border: 1px solid #eee;
      border: 1px solid rgba(0, 0, 0, 0.05);
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    .add-channel {
      margin-top: 10px;
    }
  }

  #blacklisted {
    display:none;
  }

  #error_loading_factlink {
    display:none;
  }

}

div.alert-message {
  a.close {
    font-size: 20px;
    margin-top: -3px;
  }
}

article.fact {
  .wheel {
    width: 60px;
    float: left;
  }
  header {
    padding-top: 12px;
    .head.edit {
      display: block;
    }
  }
}


Default to not showing the new_fact_form

/*
 *= require bootstrap
 *= require bubble
 */

@import "bootstrap/variables";
@import "bootstrap/mixins";
html {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  background: #fff;
  width: 460px;
  font-family: "Helvetica Neue", "Lucida Grande", 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
  padding: 10px 5px 0;
}

a:focus {
  outline: none;
}
#container {
  padding: 0 !important;

  #new_fact_form {
    display: none;
  }

  #header {
    overflow: auto;
    border-bottom: 1px solid #ccc;
    color: #000;
    margin: 0 0 10px;
    padding: 0 0 5px;

    label {
      display: inline;

      input[type=checkbox] {
        display: inline;
      }
    }

    img {
      vertical-align: middle;
    }
  }

  label#annotate_button {
    display: inline-block;
  }

  label {
    margin-bottom: -1px;
  }

  textarea {
    color: #555;
    border: 1px dotted #ccc;
    background: transparent;
    cursor: default;
    box-shadow: none;
    resize: none;
    height: 60px;
    line-height: 20px;
  }

  form.form-horizontal {
    margin: 0;
  }
  #annotate_button {
    cursor: pointer;
  }
  #add_to_channels {
    ul {
      li {
        margin-bottom: 3px;
      }
      width: 250px;
      max-height: 162px;
      overflow: scroll;
      padding: 8px 9px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #f5f5f5;
      border: 1px solid #eee;
      border: 1px solid rgba(0, 0, 0, 0.05);
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    .add-channel {
      margin-top: 10px;
    }
  }

  #blacklisted {
    display:none;
  }

  #error_loading_factlink {
    display:none;
  }

}

div.alert-message {
  a.close {
    font-size: 20px;
    margin-top: -3px;
  }
}

article.fact {
  .wheel {
    width: 60px;
    float: left;
  }
  header {
    padding-top: 12px;
    .head.edit {
      display: block;
    }
  }
}

/*
 *= require bootstrap
 *= require bubble
 */

@import "bootstrap/variables";
@import "bootstrap/mixins";
html {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  background: #fff;
  width: 460px;
  font-family: "Helvetica Neue", "Lucida Grande", 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
  padding: 10px 5px 0;
}

a:focus {
  outline: none;
}
#container {
  padding: 0 !important;

  #header {
    overflow: auto;
    border-bottom: 1px solid #ccc;
    color: #000;
    margin: 0 0 10px;
    padding: 0 0 5px;

    label {
      display: inline;

      input[type=checkbox] {
        display: inline;
      }
    }

    img {
      vertical-align: middle;
    }
  }

  label#annotate_button {
    display: inline-block;
  }

  label {
    margin-bottom: -1px;
  }

  textarea {
    color: #555;
    border: 1px dotted #ccc;
    background: transparent;
    cursor: default;
    box-shadow: none;
    resize: none;
    height: 60px;
    line-height: 20px;
  }

  form.form-horizontal {
    margin: 0;
  }
  #annotate_button {
    cursor: pointer;
  }
  #add_to_channels {
    ul {
      li {
        margin-bottom: 3px;
      }
      width: 250px;
      max-height: 162px;
      overflow: scroll;
      padding: 8px 9px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #f5f5f5;
      border: 1px solid #eee;
      border: 1px solid rgba(0, 0, 0, 0.05);
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    .add-channel {
      margin-top: 10px;
    }
  }

  #blacklisted {
    display:none;
  }

  #error_loading_factlink {
    display:none;
  }

}

div.alert-message {
  a.close {
    font-size: 20px;
    margin-top: -3px;
  }
}

article.fact {
  .wheel {
    width: 60px;
    float: left;
  }
  header {
    padding-top: 12px;
    .head.edit {
      display: block;
    }
  }
}


unnest class

unnest class

@import "bootstrap/mixins";

.conversations-overview-item, .conversation-message {
  padding: 15px 0;
  .reset-main-padding();
  border-bottom: 1px solid @mutedBorderColor;
}

.message {
  padding: 0 0 0 58px;
  margin: -4px 0 0 0;
}

.message-text {
  word-wrap: break-word;
}

.icon-reply {
  opacity: 0.65;
}

.message-meta {
  float: right;
  color: @mutedFontColor;
}

.message-avatar {
  float: left;
  width: 48px;
  height: 48px;
  border-radius: @baseBorderRadius;
}

.message-user-profile-link {
  font-weight: bold;
}

.conversations-overview-empty {
  margin: 20px 0;
  text-align: center;
  color: @metaFontColor;

  &.ajax-loader {
    width: 16px;
    height: 16px;
  }

  &.conversations-logo {
    margin: 15px 0;
    width: 56px;
    height: 39px;
  }
}

.conversations-overview-user-link {
  font-weight: bold;
  color: @headingFontColor;
}

.conversations-overview-item:hover {
  cursor: pointer;
  background: @itemHoverColor;
}

@import "bootstrap/mixins";

.conversations-overview-item, .conversation-message {
  padding: 15px 0;
  .reset-main-padding();
  border-bottom: 1px solid @mutedBorderColor;
}

.message {
  padding: 0 0 0 58px;
  margin: -4px 0 0 0;
}

.message-text {
  word-wrap: break-word;

  .icon-reply {
    opacity: 0.65;
  }
}

.message-meta {
  float: right;
  color: @mutedFontColor;
}

.message-avatar {
  float: left;
  width: 48px;
  height: 48px;
  border-radius: @baseBorderRadius;
}

.message-user-profile-link {
  font-weight: bold;
}

.conversations-overview-empty {
  margin: 20px 0;
  text-align: center;
  color: @metaFontColor;

  &.ajax-loader {
    width: 16px;
    height: 16px;
  }

  &.conversations-logo {
    margin: 15px 0;
    width: 56px;
    height: 39px;
  }
}

.conversations-overview-user-link {
  font-weight: bold;
  color: @headingFontColor;
}

.conversations-overview-item:hover {
  cursor: pointer;
  background: @itemHoverColor;
}


Add comment

Add comment

.mb-font-size(@factor) {
  body {
    font-size: @font-size-base * @factor;
  }

  .small {
    font-size: @font-size-small * @factor;
  }

  .large {
    font-size: @font-size-large * @factor;
  }

  h1, .h1 { font-size: @font-size-h1 * @factor; }
  h2, .h2 { font-size: @font-size-h2 * @factor; }
  h3, .h3 { font-size: @font-size-h3 * @factor; }
  h4, .h4 { font-size: @font-size-h4 * @factor; }
  h5, .h5 { font-size: @font-size-h5 * @factor; }
  h6, .h6 { font-size: @font-size-h6 * @factor; }
}

.mb-mo-cover-size(@factor) {
  .mb-mo-cover {
    width: 300px * @factor;
    height: 400px * @factor;
  }

  .mb-lomo-covers {
    height: 400px * @factor;
  }
}

.mb-jaw-bone-size(@factor) {
  .mb-jaw-bone {
    height: 1080px * 0.5 * @factor;
  }
}

.mb-lo-in-tab-size(@factor) {
  .mb-lo-casts {
    .thumbnail {
      width: 150px * @factor;
      height: 200px * @factor;
    }
  }

  .mb-lo-trailers {
    .thumbnail {
      width: 355px * @factor;
      height: 200px * @factor;
    }
  }
}

.mb-responsive(@factor) {
  .mb-mo-cover-size(@factor);
  .mb-jaw-bone-size(@factor);
  .mb-lo-in-tab-size(@factor);
}

@media (min-width: 1920px) {
  .mb-font-size(1); // 16px
  .mb-responsive(1.2);
}

@media (max-width: 1920px) {
  .mb-font-size(1); // 16px
  .mb-responsive(1920 / 1920);
}

@media (max-width: 1600px) {
  .mb-font-size(1600 / 1920); // 16px
  .mb-responsive(1600 / 1920);
}

@media (max-width: 1440px) {
  .mb-font-size(1440 / 1920);
  .mb-responsive(1440 / 1920);
}

@media (max-width: 1280px) {
  .mb-font-size(1280 / 1920);
  .mb-responsive(1280 / 1920);
}

@media (max-width: 1024px) {
  .mb-font-size(1024 / 1920);
  .mb-responsive(1024 / 1920);
}

@media (max-width: 1024px) {
  .mb-jaw-bone {
    height: 400px !important;
  }
}

@media (max-width: 320px) {
  .mb-jaw-bone {
    height: 300px !important;
  }

  .mb-mo-general {
    .summary {
      display: none !important;
    }
  }
}

@media (max-width: 768px) {
  .mb-font-size(768 / 1920);
  .mb-responsive(768 / 1920);
}

/*
* TEMP SOLUTION
*/
@media (max-width: 425px) {
  .mb-tabs {
    .tab-nav {
      ul {
        li {
          padding: 10px 15px !important;  // TEMP SOLUTION
        }
      }
    }
  }

  .mb-mo-general {
    width: 80% !important;  // TEMP SOLUTION
  }

  .mb-lo-comments {
    width: 80% !important;  // TEMP SOLUTION
  }
}

.mb-font-size(@factor) {
  body {
    font-size: @font-size-base * @factor;
  }

  .small {
    font-size: @font-size-small * @factor;
  }

  .large {
    font-size: @font-size-large * @factor;
  }

  h1, .h1 { font-size: @font-size-h1 * @factor; }
  h2, .h2 { font-size: @font-size-h2 * @factor; }
  h3, .h3 { font-size: @font-size-h3 * @factor; }
  h4, .h4 { font-size: @font-size-h4 * @factor; }
  h5, .h5 { font-size: @font-size-h5 * @factor; }
  h6, .h6 { font-size: @font-size-h6 * @factor; }
}

.mb-mo-cover-size(@factor) {
  .mb-mo-cover {
    width: 300px * @factor;
    height: 400px * @factor;
  }

  .mb-lomo-covers {
    height: 400px * @factor;
  }
}

.mb-jaw-bone-size(@factor) {
  .mb-jaw-bone {
    height: 1080px * 0.5 * @factor;
  }
}

.mb-lo-in-tab-size(@factor) {
  .mb-lo-casts {
    .thumbnail {
      width: 150px * @factor;
      height: 200px * @factor;
    }
  }

  .mb-lo-trailers {
    .thumbnail {
      width: 355px * @factor;
      height: 200px * @factor;
    }
  }
}

.mb-responsive(@factor) {
  .mb-mo-cover-size(@factor);
  .mb-jaw-bone-size(@factor);
  .mb-lo-in-tab-size(@factor);
}

@media (min-width: 1920px) {
  .mb-font-size(1); // 16px
  .mb-responsive(1.2);
}

@media (max-width: 1920px) {
  .mb-font-size(1); // 16px
  .mb-responsive(1920 / 1920);
}

@media (max-width: 1600px) {
  .mb-font-size(1600 / 1920); // 16px
  .mb-responsive(1600 / 1920);
}

@media (max-width: 1440px) {
  .mb-font-size(1440 / 1920);
  .mb-responsive(1440 / 1920);
}

@media (max-width: 1280px) {
  .mb-font-size(1280 / 1920);
  .mb-responsive(1280 / 1920);
}

@media (max-width: 1024px) {
  .mb-font-size(1024 / 1920);
  .mb-responsive(1024 / 1920);
}

@media (max-width: 1024px) {
  .mb-jaw-bone {
    height: 400px !important;
  }
}

@media (max-width: 320px) {
  .mb-jaw-bone {
    height: 300px !important;
  }

  .mb-mo-general {
    .summary {
      display: none !important;
    }
  }
}

@media (max-width: 768px) {
  .mb-font-size(768 / 1920);
  .mb-responsive(768 / 1920);
}

@media (max-width: 425px) {
  .mb-tabs {
    .tab-nav {
      ul {
        li {
          padding: 10px 15px !important;
        }
      }
    }
  }

  .mb-mo-general {
    width: 80% !important;
  }

  .mb-lo-comments {
    width: 80% !important;
  }
}


removed unnecesarry styling/comments

removed unnecesarry styling/comments

// @todo Add topdoc docu

.emil-label {
	border-radius: 2px;
	padding: auto 0;

	&.critical,
	&.warning {
		color: white;
	}

	.labelValue {
		.label;
		padding: 2px 5px;
		border-radius: 3px;
	}
}

// @todo Add topdoc docu

.emil-label {
	.no-user-selection;
	border-radius: 2px;
	padding: auto 0;

	&.critical,
	&.warning {
		color: white;
	}

	.labelValue {
		// .label;
		// margin-left: 2px;
		// // display: inline-block;
		// margin-top: -1px;
		// padding: 2px 5px;
		// border-radius: 3px;

	}
}


Make geo-waiting state default in CSS

Make geo-waiting state default in CSS

& {
  .form {
    display: none;
  }

  &.state-active {
    .teaser {
      display: none;
    }
    .form {
      display: block;
    }
  }
}

.teaser {
  margin: 8px;
  display: flex;

  .message-action {
    flex: 1 0 auto;
  }

  .account {
    flex: 1 1 auto;
    text-align: right;
  }
}

.form {
  border-bottom: 1px solid @colorFgBorderEmphasize2;
  background-color: @colorBg;
  padding: 8px;

  @media (min-width: @breakpointSmall) {
    .box;
    margin: 8px;
  }

  .form-fields {
    position: relative;

    .venueNearby-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: fadeout(@colorBg, 7);
      display: flex;
      align-items: center;
      justify-content: center;

      .venueNearby-overlay-content {
        text-align: center;
        text-shadow: 1px 1px 0 @colorBg;

        .spinner, .text, .action {
          display: block;
        }
        .text {
          padding: 4px;
        }
      }
    }
  }

  .formField.text, .formField.image {
    display: none;
  }

  &.state-text {
    .formField.text {
      display: block;
    }
  }

  &.state-image {
    .formField.image {
      display: block;
    }
  }
}

&.state-geo-success, &.state-geo-failure {
  .geo-waiting-visible {
    display: none !important;
  }
}

&:not(.state-geo-success) .geo-success-visible {
  display: none !important;
}

&:not(.state-geo-failure) .geo-failure-visible {
  display: none !important;
}

& {
  .form {
    display: none;
  }

  &.state-active {
    .teaser {
      display: none;
    }
    .form {
      display: block;
    }
  }
}

.teaser {
  margin: 8px;
  display: flex;

  .message-action {
    flex: 1 0 auto;
  }

  .account {
    flex: 1 1 auto;
    text-align: right;
  }
}

.form {
  border-bottom: 1px solid @colorFgBorderEmphasize2;
  background-color: @colorBg;
  padding: 8px;

  @media (min-width: @breakpointSmall) {
    .box;
    margin: 8px;
  }

  .form-fields {
    position: relative;

    .venueNearby-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: fadeout(@colorBg, 7);
      display: flex;
      align-items: center;
      justify-content: center;

      .venueNearby-overlay-content {
        text-align: center;
        text-shadow: 1px 1px 0 @colorBg;

        .spinner, .text, .action {
          display: block;
        }
        .text {
          padding: 4px;
        }
      }
    }
  }

  .formField.text, .formField.image {
    display: none;
  }

  &.state-text {
    .formField.text {
      display: block;
    }
  }

  &.state-image {
    .formField.image {
      display: block;
    }
  }
}

&:not(.state-geo-waiting) .geo-waiting-visible {
  display: none !important;
}
&:not(.state-geo-success) .geo-success-visible {
  display: none !important;
}
&:not(.state-geo-failure) .geo-failure-visible {
  display: none !important;
}


:ambulance: fix(oui-select-picker): add picture disabled state

@import '../oui-radio/_mixins';
@import '../oui-thumbnail/_mixins';
@import './_variables';

#oui {
  .select-picker(
    @selector
  ) {
    #oui > .radio(
      @selector
    );

    #oui > .radio-thumbnail(
      @selector
    );

    &__picture-container {
      display: block;
      max-width: @oui-select-picker-padding * 2;
      position: absolute;
      right: @oui-select-picker-padding;
      text-align: center;
      top: @oui-select-picker-padding / 2;
      width: 10%;

      .@{selector}__picture {
        display: inline-block;
        max-width: 100%;
      }

      & + .@{selector}__label {
        padding-right: ~"calc(10% + 1rem)";

        & + .@{selector}__section {
          margin-top: rem-calc(14);
        }
      }
    }

    &__value {
      color: @oui-select-picker-label-color;
      display: inline-block;
      opacity: 0.5;
      padding-bottom: @oui-select-picker-value-padding;
      padding-top: @oui-select-picker-value-padding;
      width: 100%;
    }

    .oui-ui-select-container .ui-select-match {
      margin-bottom: 0;
      text-align: left;
      width: 100%;
    }

    .oui-ui-select-container .ui-select-choices {
      min-width: 100%;
    }

    &__input:checked ~ .@{selector}__label-container,
    &__input:disabled ~ .@{selector}__label-container {
      .@{selector}__value {
        opacity: 1;
      }
    }

    &__input:disabled ~ .@{selector}__label-container {
      .@{selector}__value {
        color: @oui-select-picker-label-color-disabled;
      }
      .@{selector}__picture-container {
        opacity: 0.3;
        filter: grayscale(0.6);
      }
    }

    &__input:not(:disabled) ~ .@{selector}__label-container {
      .ui-select-match {
        #oui > .thumbnail-base-color(
          @oui-select-picker-value-border-color,
          @oui-select-picker-value-background-color,
          rem-calc(1)
        );

        & > span,
        & > i {
          opacity: 0.5;
        }
      }
    }

    &__input:checked ~ .@{selector}__label-container,
    .oui-ui-select-container.oui-ui-select-container_open {
      .ui-select-match {
        background-color: #fff;
        border-color: @oui-select-picker-value-border-color-checked;

        & > span,
        & > i {
          opacity: 1;
        }
      }
    }
  }

  // stylelint-disable max-nesting-depth
  .select-picker-status(@index: length(@oui-select-picker-status)) when (@index > 0) {
    .select-picker-status(@index - 1);

    @selector: oui-select-picker;
    @status: extract(@oui-select-picker-status, @index);
    @status-font-color: "oui-color-@{status}-dark";
    @status-icon-color: "oui-color-@{status}-medium";
    @status-border-color: "oui-color-@{status}-light";
    @status-background-color: "oui-color-@{status}-fade";

    &_@{status} {
      .@{selector}__input:not(:disabled) + .@{selector}__label-container {
        &,
        &:hover,
        &:active,
        &:focus {
          border-color: @@status-border-color;
          background: @@status-background-color;

          .@{selector}__label {
            &::before {
              border-color: @@status-icon-color;
            }

            &::after {
              background: @@status-icon-color;
            }
          }
        }

        .@{selector}__section {
          border-top-color: @@status-border-color;
        }

        .ui-select-match {
          background-color: @@status-background-color;
          border-color: @@status-border-color;
        }
      }

      .@{selector}__input:not(:disabled):focus + .@{selector}__label-container .@{selector}__label,
      .@{selector}__input:checked:not(:disabled):focus + .@{selector}__label-container .@{selector}__label {
        &::before {
          box-shadow: 0 0 3px 1px @@status-border-color;
        }
      }
    }
  }
  // stylelint-enable max-nesting-depth
}

@import '../oui-radio/_mixins';
@import '../oui-thumbnail/_mixins';
@import './_variables';

#oui {
  .select-picker(
    @selector
  ) {
    #oui > .radio(
      @selector
    );

    #oui > .radio-thumbnail(
      @selector
    );

    &__picture-container {
      background-color: #fff;
      border-radius: 50%;
      display: block;
      font-size: rem-calc(30);
      max-width: @oui-select-picker-padding * 2;
      padding: rem-calc(5);
      position: absolute;
      right: @oui-select-picker-padding;
      text-align: center;
      top: @oui-select-picker-padding / 2;
      width: 12%;

      .@{selector}__picture {
        display: block;
        max-width: 100%;
      }

      & + .@{selector}__label {
        padding-right: ~"calc(12% + 1rem)";

        & + .@{selector}__section {
          margin-top: rem-calc(14);
        }
      }
    }

    &__value {
      color: @oui-select-picker-label-color;
      display: inline-block;
      opacity: 0.5;
      padding-bottom: @oui-select-picker-value-padding;
      padding-top: @oui-select-picker-value-padding;
      width: 100%;
    }

    .oui-ui-select-container .ui-select-match {
      margin-bottom: 0;
      text-align: left;
      width: 100%;
    }

    .oui-ui-select-container .ui-select-choices {
      min-width: 100%;
    }

    &__input:checked ~ .@{selector}__label-container,
    &__input:disabled ~ .@{selector}__label-container {
      .@{selector}__value {
        opacity: 1;
      }
    }

    &__input:disabled ~ .@{selector}__label-container {
      .@{selector}__value {
        color: @oui-select-picker-label-color-disabled;
      }
    }

    &__input:not(:disabled) ~ .@{selector}__label-container {
      .ui-select-match {
        #oui > .thumbnail-base-color(
          @oui-select-picker-value-border-color,
          @oui-select-picker-value-background-color,
          rem-calc(1)
        );

        & > span,
        & > i {
          opacity: 0.5;
        }
      }
    }

    &__input:checked ~ .@{selector}__label-container,
    .oui-ui-select-container.oui-ui-select-container_open {
      .ui-select-match {
        background-color: #fff;
        border-color: @oui-select-picker-value-border-color-checked;

        & > span,
        & > i {
          opacity: 1;
        }
      }
    }
  }

  // stylelint-disable max-nesting-depth
  .select-picker-status(@index: length(@oui-select-picker-status)) when (@index > 0) {
    .select-picker-status(@index - 1);

    @selector: oui-select-picker;
    @status: extract(@oui-select-picker-status, @index);
    @status-font-color: "oui-color-@{status}-dark";
    @status-icon-color: "oui-color-@{status}-medium";
    @status-border-color: "oui-color-@{status}-light";
    @status-background-color: "oui-color-@{status}-fade";

    &_@{status} {
      .@{selector}__input:not(:disabled) + .@{selector}__label-container {
        &,
        &:hover,
        &:active,
        &:focus {
          border-color: @@status-border-color;
          background: @@status-background-color;

          .@{selector}__label {
            &::before {
              border-color: @@status-icon-color;
            }

            &::after {
              background: @@status-icon-color;
            }
          }
        }

        .@{selector}__section {
          border-top-color: @@status-border-color;
        }

        .ui-select-match {
          background-color: @@status-background-color;
          border-color: @@status-border-color;
        }
      }

      .@{selector}__input:not(:disabled):focus + .@{selector}__label-container .@{selector}__label,
      .@{selector}__input:checked:not(:disabled):focus + .@{selector}__label-container .@{selector}__label {
        &::before {
          box-shadow: 0 0 3px 1px @@status-border-color;
        }
      }
    }
  }
  // stylelint-enable max-nesting-depth
}


remove text-decoration on box courses

remove text-decoration on box courses

// COURSES BOXES FROM HOME AND COURSES PAGE
// ********************************************************************* //
#courses {
    header {
        border: none;
    }
    .course {
        min-height: 195px;
        &:hover {
            .fa-check {
                background-color: @brand-success;
            }
        }
        .fa-check {
            background-color: darken(@gray-lighter, 5%);
            box-shadow: 0px 0px 1px rgba(0,0,0,0.3);
            top: -200px;
            right: 5px;
        }
        &.started {
            .fa-check {
                background-color: @brand-success;
            }
        }
        .course-link { // link wrapper
            &:hover {
                .info {
                    background-color: lighten(@gray-lighter, 5%);
                }
                .enroll {
                    background-color: lighten(@gray-lighter, 5%);
                    border-top: 2px solid darken(@gray-lighter, 5%);
                }
            }
            &:focus {
                text-decoration: none;
            }
        } // .course-link
        .thumb-wrapper { // course thumbnail
            .mouseover {
                background-color: lighten(@gray-lighter, 5%);
            }
            .thumb {
                background-color: lighten(@gray-lighter, 5%);
                @media (max-width: @screen-xs-max) {
                    height: 75px;
                }
            }
        } // .thumb-wrapper
        .info-box { // info wrapper for courses page
            position: relative;
            width: 100%;
            @media (min-width: 540px) and (max-width: @screen-xs-max) {
                float: none;
                width: initial!;
            }
            @media (min-width: @screen-sm-min) {
                float: none;
                width: initial!;
            }
        } // .info-box
        .info { // course info
            background: transparent;
            padding: 10px 0 0;
            h3 {
                color: #000;
                font-family: @font-family-base;
                font-size: 20px;
            }
            .instructors {
                font-size: 20px;
                font-style: normal;
                line-height: 110%;
                max-height: 42px;
            }
        } // .info
        .enroll { // go to course link
            background-color: transparent;
            border-top: 2px solid @gray-lighter;
            color: #000;
            font-family: 'ek-mukta-extralight', @font-family-base;
            font-size: 20px;
            line-height: 110%;
            padding-top: 5px;
            .fa {
                display: none;
            }
            .enroll-link {
                color: @brand-primary;
            }
        } // .enroll
    } // .course
}

// COURSES BOXES FROM HOME AND COURSES PAGE
// ********************************************************************* //
#courses {
    header {
        border: none;
    }
    .course {
        min-height: 195px;
        &:hover {
            .fa-check {
                background-color: @brand-success;
            }
        }
        .fa-check {
            background-color: darken(@gray-lighter, 5%);
            box-shadow: 0px 0px 1px rgba(0,0,0,0.3);
            top: -200px;
            right: 5px;
        }
        &.started {
            .fa-check {
                background-color: @brand-success;
            }
        }
        .course-link { // link wrapper
            &:hover {
                .info {
                    background-color: lighten(@gray-lighter, 5%);
                }
                .enroll {
                    background-color: lighten(@gray-lighter, 5%);
                    border-top: 2px solid darken(@gray-lighter, 5%);
                }
            }
        } // .course-link
        .thumb-wrapper { // course thumbnail
            .mouseover {
                background-color: lighten(@gray-lighter, 5%);
            }
            .thumb {
                background-color: lighten(@gray-lighter, 5%);
                @media (max-width: @screen-xs-max) {
                    height: 75px;
                }
            }
        } // .thumb-wrapper
        .info-box { // info wrapper for courses page
            position: relative;
            width: 100%;
            @media (min-width: 540px) and (max-width: @screen-xs-max) {
                float: none;
                width: initial!;
            }
            @media (min-width: @screen-sm-min) {
                float: none;
                width: initial!;
            }
        } // .info-box
        .info { // course info
            background: transparent;
            padding: 10px 0 0;
            h3 {
                color: #000;
                font-family: @font-family-base;
                font-size: 20px;
            }
            .instructors {
                font-size: 20px;
                font-style: normal;
                line-height: 110%;
                max-height: 42px;
            }
        } // .info
        .enroll { // go to course link
            background-color: transparent;
            border-top: 2px solid @gray-lighter;
            color: #000;
            font-family: 'ek-mukta-extralight', @font-family-base;
            font-size: 20px;
            line-height: 110%;
            padding-top: 5px;
            .fa {
                display: none;
            }
            .enroll-link {
                color: @brand-primary;
            }
        } // .enroll
    } // .course
}


[view] style on geocoder

[view] style on geocoder

.map-wrapper {
    background: url('../../imgs/map-trame.png') repeat;

    .map {
        height: 100%;
        width : 100%;
    }

    .map-scale {
        .absolute (initial, @small-margin, @small-margin, initial);
        border: 1px solid #000;

        .map-scale-label {
            .absolute (-6px, -1px, initial, initial);
            font-size  : 8pt;
            line-height: 0;
        }

        .map-scale-chess {
            display: flex;

            > div {
                width : 50%;
                height: 6px;
            }

            .white {
                background: #FFF;
                height    : 3px;
            }

            .black {
                background: #000;
                height    : 3px;
            }
        }
    }

    .zoom {
        .absolute (auto, @small-margin, 32px, auto);
        display        : flex;
        justify-content: center;
        flex-direction : column;

        button {
            font-family     : @gui-font;
            background-color: @white;
            border          : 1px solid @grey;
            margin          : 2px 0;
            font-size       : 12pt;
            font-weight     : bold;
            width           : 37px;
            height          : 37px;

            &.zoom-in {
                &:before {
                    .awsomefont;
                    content: @fa-var-plus;
                }
            }

            &.zoom-out {
                &:before {
                    .awsomefont;
                    content: @fa-var-minus;
                }
            }

            &:hover {
                color           : @white;
                background-color: @green;
                border          : 1px solid @green;
            }

            &:focus {
                outline: none;
            }
        }
    }

    .tool.geocoder {
        .absolute(@small-margin, auto, auto, @small-margin);
        background-color: @white;
        border: 1px solid @grey;

        input {border: 0px;}
    }
}

.map-wrapper {
    background: url('../../imgs/map-trame.png') repeat;

    .map {
        height: 100%;
        width : 100%;
    }

    .map-scale {
        .absolute (initial, @small-margin, @small-margin, initial);
        border: 1px solid #000;

        .map-scale-label {
            .absolute (-6px, -1px, initial, initial);
            font-size  : 8pt;
            line-height: 0;
        }

        .map-scale-chess {
            display: flex;

            > div {
                width : 50%;
                height: 6px;
            }

            .white {
                background: #FFF;
                height    : 3px;
            }

            .black {
                background: #000;
                height    : 3px;
            }
        }
    }

    .zoom {
        .absolute (auto, @small-margin, 32px, auto);
        display        : flex;
        justify-content: center;
        flex-direction : column;

        button {
            font-family     : @gui-font;
            background-color: @white;
            border          : 1px solid @grey;
            margin          : 2px 0;
            font-size       : 12pt;
            font-weight     : bold;
            width           : 37px;
            height          : 37px;

            &.zoom-in {
                &:before {
                    .awsomefont;
                    content: @fa-var-plus;
                }
            }

            &.zoom-out {
                &:before {
                    .awsomefont;
                    content: @fa-var-minus;
                }
            }

            &:hover {
                color           : @white;
                background-color: @green;
                border          : 1px solid @green;
            }

            &:focus {
                outline: none;
            }
        }
    }

    .tool.geocoder {
        .absolute(@small-margin, auto, auto, @small-margin);
        background-color: @white;
        border: 1px solid @light-grey;

        input {border: 0px;}
    }
}


Fix hover bounce style in DatePicker time panel

.@{timepicker-prefix-cls} {
  position: absolute;
  width: 100%;
  top: 34px;
  background-color: white;
  height: 206px;

  &-panel {
    z-index: @zindex-picker;
    position: absolute;
    width: 100%;
  }

  &-inner {
    display: inline-block;
    position: relative;
    outline: none;
    list-style: none;
    font-size: 12px;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    line-height: 1.5;
    overflow: hidden;
  }

  &-input {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    cursor: auto;
    line-height: 1.5;
    outline: 0;

    &-wrap {
      display: none;
      box-sizing: border-box;
      position: relative;
      padding: 6px;
      border-bottom: 1px solid @border-color-split;
    }

    &-invalid {
      border-color: red;
    }
  }

  &-clear-btn {
    position: absolute;
    right: 5px;
    cursor: pointer;
    overflow: hidden;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    top: 5px;
    margin: 0;
  }

  &-clear-btn:after {
    content: "\e62e";
    font-family: "anticon";
    font-size: 12px;
    color: #ccc;
    display: inline-block;
    line-height: 1;
    width: 20px;
    transition: color 0.3s ease;
  }

  &-clear-btn:hover:after {
    color: #999;
  }

  &-narrow &-input-wrap {
    max-width: 111px;
  }

  &-select {
    float: left;
    font-size: 12px;
    border: 1px solid @border-color-split;
    border-width: 0 1px;
    margin-left: -1px;
    box-sizing: border-box;
    width: 77px;
    overflow: hidden;
    position: relative; // Fix chrome weird render bug

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      border-left: 0;
      margin-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

    ul {
      list-style: none;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      width: 100%;
      max-height: 206px;
    }

    li {
      padding: 0 0 0 28px;
      list-style: none;
      box-sizing: content-box;
      margin: 0;
      width: 100%;
      height: 24px;
      line-height: 24px;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s ease;
    }

    li:last-child:after {
      content: '';
      height: 182px;
      display: block;
    }

    li:hover {
      background: tint(@primary-color, 90%);
    }

    li&-option-selected {
      background: @background-color-base;
      font-weight: bold;
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: @cursor-disabled;
      }
    }
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{timepicker-prefix-cls} {
  display: inline-block;
  outline: none;
  font-size: @font-size-base;

  &-input {
    .input;
    width: 100px;
  }

  &-large &-input {
    .input-lg;
  }

  &-small &-input {
    .input-sm;
  }

  &-open {
    opacity: 0;
  }

  &-icon {
    position: absolute;
    user-select: none;
    transition: all .3s @ease-in-out;
    width: 12px;
    height: 12px;
    line-height: 12px;
    right: 8px;
    color: #999;
    top: 50%;
    margin-top: -6px;
    &:after {
      content: "\e643";
      font-family: "anticon";
      font-size: 12px;
      color: #999;
      display: inline-block;
      line-height: 1;
      vertical-align: bottom;
    }
  }
}

.@{calendar-prefix-cls} {
  &-time {
    .@{calendar-prefix-cls}-day-select {
      padding: 0 2px;
      font-weight: bold;
      display: inline-block;
      color: #666;
      line-height: 34px;
    }

    .@{calendar-prefix-cls}-footer {
      border-top: 1px solid @border-color-split;
      padding: 10px 0;
      text-align: right;
      position: relative;
      height: auto;
      line-height: auto;

      &-btn {
        line-height: 1.5;
        text-align: right;
      }

      .@{calendar-prefix-cls}-today-btn {
        float: left;
        margin: 0;
        padding-left: 12px;
      }

      .@{calendar-prefix-cls}-time-picker-btn {
        display: inline-block;
        text-align: center;
        margin-right: 60px;

        &-disabled {
          color: #ccc;
        }
      }
    }
  }
}

.@{timepicker-prefix-cls} {
  position: absolute;
  width: 100%;
  top: 34px;
  background-color: white;
  height: 206px;

  &-panel {
    z-index: @zindex-picker;
    position: absolute;
    width: 100%;
  }

  &-inner {
    display: inline-block;
    position: relative;
    outline: none;
    list-style: none;
    font-size: 12px;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    line-height: 1.5;
    overflow: hidden;
  }

  &-input {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    cursor: auto;
    line-height: 1.5;
    outline: 0;

    &-wrap {
      display: none;
      box-sizing: border-box;
      position: relative;
      padding: 6px;
      border-bottom: 1px solid @border-color-split;
    }

    &-invalid {
      border-color: red;
    }
  }

  &-clear-btn {
    position: absolute;
    right: 5px;
    cursor: pointer;
    overflow: hidden;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    top: 5px;
    margin: 0;
  }

  &-clear-btn:after {
    content: "\e62e";
    font-family: "anticon";
    font-size: 12px;
    color: #ccc;
    display: inline-block;
    line-height: 1;
    width: 20px;
    transition: color 0.3s ease;
  }

  &-clear-btn:hover:after {
    color: #999;
  }

  &-narrow &-input-wrap {
    max-width: 111px;
  }

  &-select {
    float: left;
    font-size: 12px;
    border: 1px solid @border-color-split;
    border-width: 0 1px;
    margin-left: -1px;
    box-sizing: border-box;
    width: 77px;
    overflow: hidden;
    position: relative; // Fix chrome weird render bug

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      border-left: 0;
      margin-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

    ul {
      list-style: none;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      width: 100%;
      max-height: 206px;
    }

    li {
      text-align: center;
      list-style: none;
      box-sizing: content-box;
      margin: 0;
      width: 100%;
      height: 24px;
      line-height: 24px;
      cursor: pointer;
      user-select: none;
      transition: background 0.3s ease;
    }

    li:last-child:after {
      content: '';
      height: 182px;
      display: block;
    }

    li:hover {
      background: tint(@primary-color, 90%);
    }

    li&-option-selected {
      background: @background-color-base;
      font-weight: bold;
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: @cursor-disabled;
      }
    }
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{timepicker-prefix-cls} {
  display: inline-block;
  outline: none;
  font-size: @font-size-base;

  &-input {
    .input;
    width: 100px;
  }

  &-large &-input {
    .input-lg;
  }

  &-small &-input {
    .input-sm;
  }

  &-open {
    opacity: 0;
  }

  &-icon {
    position: absolute;
    user-select: none;
    transition: all .3s @ease-in-out;
    width: 12px;
    height: 12px;
    line-height: 12px;
    right: 8px;
    color: #999;
    top: 50%;
    margin-top: -6px;
    &:after {
      content: "\e643";
      font-family: "anticon";
      font-size: 12px;
      color: #999;
      display: inline-block;
      line-height: 1;
      vertical-align: bottom;
    }
  }
}

.@{calendar-prefix-cls} {
  &-time {
    .@{calendar-prefix-cls}-day-select {
      padding: 0 2px;
      font-weight: bold;
      display: inline-block;
      color: #666;
      line-height: 34px;
    }

    .@{calendar-prefix-cls}-footer {
      border-top: 1px solid @border-color-split;
      padding: 10px 0;
      text-align: right;
      position: relative;
      height: auto;
      line-height: auto;

      &-btn {
        line-height: 1.5;
        text-align: right;
      }

      .@{calendar-prefix-cls}-today-btn {
        float: left;
        margin: 0;
        padding-left: 12px;
      }

      .@{calendar-prefix-cls}-time-picker-btn {
        display: inline-block;
        text-align: center;
        margin-right: 60px;

        &-disabled {
          color: #ccc;
        }
      }
    }
  }
}


testing header padding

testing header padding

/* ==========================================================================
	 CFPB Design Manual
	 Header
	 ========================================================================== */

.header {
	border-bottom: 4px solid @green;
	padding-top: 0.5em;
	padding-bottom: 3em;
	width: 100%;

	.site-title {
		.grid_column(12);
		text-align: center;

		h1 {
			font-size: 1.5em;
		}
		.title-link {
			color: @gray-80;
			.site-org {
				color: @gray;
				.webfont-medium;
			}
		}
		.title-link:visited {
			color: @gray-80;
		}
	}

	.site-logo {
		display: none;
	}
}

/* Small tablet (600px) */
@media only screen and (min-width: 37.5em) {
	.header {

		padding: 2em 0 0;

		.site-title {
			.grid_column(6);
			text-align: left;

			h1 {
				font-size: 1.625em;
			}
		}

		.site-logo {
			.grid_column(6);
			text-align: right;

			.logo {
				display: inline;
			}
		}
	}
}

/* ==========================================================================
	 CFPB Design Manual
	 Header
	 ========================================================================== */

.header {
	border-bottom: 4px solid @green;
	padding-top: 0.5em;
	width: 100%;

	.site-title {
		.grid_column(12);
		text-align: center;

		h1 {
			font-size: 1.5em;
		}
		.title-link {
			color: @gray-80;
			.site-org {
				color: @gray;
				.webfont-medium;
			}
		}
		.title-link:visited {
			color: @gray-80;
		}
	}

	.site-logo {
		display: none;
	}
}

/* Small tablet (600px) */
@media only screen and (min-width: 37.5em) {
	.header {

		padding: 2em 0 0;

		.site-title {
			.grid_column(6);
			text-align: left;

			h1 {
				font-size: 1.625em;
			}
		}

		.site-logo {
			.grid_column(6);
			text-align: right;

			.logo {
				display: inline;
			}
		}
	}
}