.btn-getting-started {
  margin-top: 30px;
}

.anchorjs-link {
  opacity: 0;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:hover > .anchorjs-link,
.anchorjs-link:focus  {
  opacity: 1;
}

@font-face {
  font-family:'anchorjs-icons';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
  url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
  url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
  url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
  url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}

[data-anchorjs-icon]::after {
  content: '\e144';
  font-size: 24px;
}

/* We need to push the content because of the fixed header */
body {
  padding-top: 80px;
}

/* Allow anchors to not be hidden by the fixed header */
:target:before {
  content: "";
  display: block;
  margin-top: -80px;
  height: 80px;
  width: 1px;
}

.glyphicon {
  margin: 0 2px; /* margins for icons in ordinary text */
  color: #4d4d4d; /* hsl(0,0%,30%) is 10% lighter gray than text */
}

p {

  &.icon {
    position:relative;

    &.correct:before {
      color: #228b22; /* use green color stand for *correct* */
    }

    &.incorrect:before {
      color: #dc143c; /* use red color stand for *incorrect* */
    }
  }

  &.icon:before {
    position: absolute;
    left: -1.5em; /* negative padding-left of ul */
    font-family: "Glyphicons Halflings";

    @media (max-width: @screen-xs-max) {
      position: static;
      margin-right: 0.5em;
    }
  }

  &.removed ~ p.fixable:before {
    color: #ccc; /* hsl(0,0%,80%) light gray */
  }

  &.recommended:before {
    content: "✓"; /* ok */
  }

  &.removed:before {
    content: "\e014"; /* remove */
  }

  &.fixable:before {
    content: "🔧"; /* wrench */
  }

  &.hasSuggestions:before {
    content: "💡"; /* lightbulb */
  }

  &.incorrect:before {
    content: "\e126"; /* thumbs-down */
  }

  &.correct:before {
    content: "\e125"; /* thumbs-up */
  }
}

main {
  ol, ul {
    padding-left: 1.5em; /* same as indent for inline glyphicon at narrow width */
  }

  li  {
    ul {
      list-style: disc;
    }

    p ~ ul {
      margin-bottom: 12px; /* same as p, ol, ul */
    }
  }
}

a code, /* in link: blue */
h1 code, h2 code, h3 code, h4 code { /* in heading: same dark gray as text */
  color: inherit;
}

h1 code, h2 code, h3 code, h4 code {
  background-color: #f4f4f4; /* hsl(0,0%,96%) in heading: same lighter gray as pre */
}

.loading-demo-message {
  margin: 50px;
  text-align: center;
}

// @media (min-width: @screen-lg-min) {
//   .doc > .container {
//     max-width: 730px;
//   }
// }
