$green: #31D2B1;
$black: #2D3036;
$white: #F8F9FC;
$headers: #EFF5FE;
$grey: #ABB6C6;

/* Eggshell */

@import 'eggshell';

/* Layout */

$width: 700px;

#main{
  margin: 0 auto;
  max-width: $width;
  width: 90%;
  padding-top: 20px;
}

/* General */

body {
  background: $white;
  color: $black;
  @include font-size($larger);
  position: relative;
  text-align: center;
}

.CodeMirror {
    height: auto;
    line-height: 1.5;
    font-size: initial;
    text-align: left;
    box-sizing: default;
    overflow-y: hidden;
    overflow-x: auto;
}

.CodeMirror-gutters, .listing {
    background-color: #f7f7ff;
}

.CodeMirror-linenumbers {
    padding-right: 10px;
}

.CodeMirror-lines {
    padding: 1em 0 1em 1em;
}


.header {
  padding-top: 80px;
  padding-bottom: 80px;
  background: $black;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      color: $white;
  }
}

.example {
  margin-bottom: 40px;
  .title {
    font-size: 2.0rem;
  }
  .result {
    font-size: 1.4rem;
    display: block;
  }
  .show {
    margin-top: 20px;
    font-size: 1.6rem;
    border-radius: $radius;
    border: 1px solid transparent;
    border-color: $grey;
    padding: $gutter/8;
    min-width: 100px;
  }

}

.range-slider {
  color: #FFF;
  @include font-size($smaller);
  line-height: 140%;
  border-radius: $radius;
  border-color: #000;
  top: 0px;
  left: 0px;
  right: 0px;
  max-width: 700px;
  width: 90%;
  height: 40px;
  margin: 0 auto;
  div {
  }
  .cursor {
    width: 4px;
    height: inherit;
    padding: 8px;
    background-color: #FFA52F;
    &.header {
      height: inherit;
    }
    & span {
      position: absolute;
      bottom: 0px;
      right: 0px;
      background-color: #B5B5B5;
    }
  }
  .bars {
    height: 24px;
    background-color: #BDBDBD;
    position: absolute;
    width: 100%;
    top:15px;
    .bar {
      height: inherit;
      background-color: #7C7C7C;
    }
  }

}