<commit_before>@import "compass";
@import "compass/reset";
@import "compass/typography/text/ellipsis";

@import "fonts";

/* Calculated page dimensions. */
$page-width: 940px;

$col-width: 40px;
$col-spacing: 20px;

$orange-color: #e1563f;
$blue-color: #1f58ce;
$black-color: #252525;

@mixin width-for-columns($cols) {
  width: $cols * $col-width + ($cols - 1) * $col-spacing;
}

body {
  background: url(/images/background-shades.png) no-repeat top center #faf4f1;
  margin: 60px 0 0 0;
  padding: 0;
  font-family: Lato, Arial, sans-serif;
  line-height: 23px;
  font-size: 13px;
  line-height: 20px;
  min-width: $page-width;
}

* {
  @include box-sizing(border-box);
}

a {
  color: $orange-color;
  text-decoration: none;
}

p {
  margin: 24px 0;
}

em {
  font-style: italic;
}

code {
  font-family: Menlo, Courier, monospace;
  font-size: 90%;
  color: #666;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 3px;
  @include border-radius(5px);
}

h1 {
  font-size: 32px;
  margin-bottom: 32px;
  line-height: 40px;
}

strong {
  font-weight: bold;
}

hr {
  height: 1px;
  border: none;
  margin: 40px 0;
  background-color: $black-color;
}

/**
  Tabs
**/

.tabs {
  > ul {
    list-style: none;
    overflow: hidden; // Clearfix

    li {
      display: block;
      float: left;
      padding-right: 10px;
      margin-right: 10px;
      border-right: solid 1px gray;
    }

    border-bottom: solid 1px gray;
    margin-bottom: 20px;
  }
}

/**
  Header
**/
#header {
  position: absolute;
  width: 100%;
  min-width: $page-width;
  top: 0;
  height: 60px;
  background: url(/images/navigation_background.png) top center;
  border-bottom: 1px solid #aa412f;
  z-index: 10; // the header is on top to have a proper drop shadow
  @include box-shadow(rgba(0,0,0,0.3) 0 0 3px);

  #wrapper {
    width: $page-width;
    margin: 0 auto;
    position: relative;
  }

  #logo {
    position: absolute;
    left: 7px;
    top: 6px;
    width: 103px;
    height: 40px;
    background: url(/images/ember_logo.png);
    @include filter(drop-shadow(rgba(0,0,0,0.3) 0 1px 2px));

    &:hover {
      @include filter(drop-shadow(rgba(0,0,0,0.7) 0 1px 3px));
    }
  }

  #nav {
    width: 500px;
    height: 65px;
    margin: 0 auto;

    text-align: center;

    li {
      line-height: 26px;
      margin: 18px 0 0;
      display: inline-block;

      a {
        font-family: "MavenProBold";
        font-size: 13px;
        text-transform: uppercase;
        color: #faf2ee;

        @include text-shadow(rgba(0,0,0,0.3) 0px 1px 0px);
        display: block;
        padding: 0px 1em;
        height: 26px;
        line-height: 26px;
        text-decoration: none;
        border: 1px solid transparent;

        &:hover { color: #fff }
      }

      &.active a {
        color: #331915;
        @include text-shadow(rgba(255,255,255,0.2) 0 1px 0px);
        background-color: #bf4737;
        background-color: rgba(0,0,0,0.2);
        @include border-radius(3px);
        border: 1px solid #923c2e;
        @include box-shadow(
          rgba(255, 255, 255, 0.15) 0 1px 0px,
          inset rgba(0, 0, 0, 0.17) 0 1px 1px
        );

        &:hover {
          color: black;
          background-color: rgba(0,0,0,0.17);
        }
      }

    }
  }

  #github {
    position: absolute;
    right: 7px;
    top: 17px;

    a {
      img {
        float: left;
        margin-top: 7px;
        margin-right: 6px;
        display: block;
      }

      font-family: "MavenProBold";
      font-size: 12px;
      text-transform: uppercase;
      color: #faf2ee;
      @include text-shadow(rgba(0,0,0,0.3) 0px 1px 0px);

      display: block;
      padding: 0px 1em;
      height: 28px;
      line-height: 28px;

      background-color: #ff6e56;
      @include filter-gradient(#ff6e56, #ed4f35, vertical);
      @include background-image(linear-gradient(top, #ff6e56 0%,#ed4f35 100%));

      border: 1px solid #a93926;
      @include border-radius(4px);
      @include box-shadow(
        inset rgba(255,255,255, 0.17) 0 1px 1px
      );

      &:hover {
        color: #fff;
        background: #f86c55;
      }
    }
  }
}

#content-wrapper {
  @include clearfix;
  width: $page-width;
  margin: 0 auto 40px auto;
  padding: 20px 0px;
  position: relative;
  z-index: 1;

  &.grid {
    background-image: url(/images/grid.png);
  }
}

$sidebar-width: $col-width * 4 + $col-spacing * 3;
$content-width: $page-width - $sidebar-width - $col-spacing * 2;

#content {
  width: $page-width;

  &.has-sidebar {
    margin-left: $sidebar-width + $col-spacing * 2;
    width: $content-width;
  }

  & > h1:first-child {
    margin-top: 43px;
  }
}

#sidebar {
  float: left;
  width: $sidebar-width;
  margin-top: 43px;
  font-family: "MavenProMedium";
  font-size: 14px;

  #back-to-top {
    text-align: center;
    opacity: 0;
    @include transition(opacity 0.05s linear);
  }

  a {
    text-decoration: none;
    line-height: 21px;
    border-bottom: none;
    color: $orange-color;

    &:hover {
      color: $black-color;
    }

    &.active {
      color: $black-color;
    }
  }

  ol {
    list-style-type: none;

    li {
      margin: 14px 0;

      &:first-of-type {
        margin-top: 0;
      }

      &.level-1, &.level-2 {
        a {
          font-family: "MavenProBold";
          color: $black-color;
        }
      }

      &.level-3, &.level-4 {
        font-family: "Lato";
        font-size: 13px;
        text-transform: none;
        margin: 2px 0;
      }

      &:hover {
        a {
          color: #491500;
        }
      }

      a {
        display: block;
      }
    }
  }

  h2 {
    font-family: "MavenProBold";
    color: $black-color;
    margin-bottom: 10px;
  }

  ul li {
    font-family: "Lato";
    font-size: 13px;
    text-transform: none;
    margin: 2px 0;
  }
}

/**
  About Page
**/
.about-header-text {
  display: block;
  margin: 60px auto 0 auto;
}

#download {
  width: 465px;
  height: 125px;
  margin: 0 auto;
  position: relative;

  #download-ember, #download-starter-kit {
    position: absolute;
    width: 220px;
    top: 40px;
    text-align: center;
  }

  #download-ember {
    left: 0;

    .button {
      font-size: 13px; /* Due to long version name */
    }
  }

  #download-starter-kit {
    left: 240px;
  }

  .info {
    margin-top: 4px;
    color: #888;
  }
}

.section {
  margin: 60px 0;
  overflow: hidden;

  h2 {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: $black-color;
    text-transform: uppercase;
    font-family: "MavenProBold";
    margin-bottom: 28px;
  }

  h3 {
    font-size: 14px;
    text-transform: uppercase;
    font-family: "MavenProBold";
  }

  table.columns {
    margin: 0 auto;

    td {
      vertical-align: top;
      padding-right: 50px;
    }
  }
}

.getting-started.section {
  .highlight, p {
    float: left;
    width: $col-width * 8 + $col-spacing * 6;

    &.right {
      margin-left: $col-width * 1 + $col-spacing * 1;
    }
  }

  p {
    text-align: center;
    color: #222;
  }
}

.features.section {
  @include clearfix;

  .feature {
    @include width-for-columns(4);
    float: left;
    margin-left: $col-width + $col-spacing;
    margin-right: $col-spacing;

    img {
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    p {
      text-align: center;
    }
  }
}

.users.section {

  .surround {
    @include border-radius(3px);
    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff);
    @include clearfix;
    background: url('/images/about/carousel_bg.png');
    border: 1px solid #d1d1d1;
    padding-top: 19px;

    .bx-wrapper,
    .bx-window {
      width: 940px;
    }

    .bx-wrapper {

      .bx-prev,
      .bx-next {
        background: url('/images/about/carousel_controls.png') no-repeat;
        float: left;
        height: 28px;
        width: 30px;
      }

      .bx-prev,
      .bx-next,
      .pager-link {
        text-indent: -9999px;
      }

      .bx-prev {
        background-position: left;
        border-right: 1px solid #d1d1d1;
        float: right;
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .bx-next {
        background-position: right;
        border-left: 1px solid #d1d1d1;
        float: right;
        position: absolute;
        bottom: 0;
        right: 1px;
      }

      .bx-window {
        border-bottom: 1px solid #d1d1d1;
        height: 124px;
      }

      .bx-pager {
        @include clearfix;
        background: url('/images/about/carousel_pager_bg.png') bottom repeat-x #f4f4f4;
        border-left: 1px solid #fafafa;
        border-right: 1px solid #fafafa;
        border-top: 1px solid #fefefe;
        font-size: 0;
        height: 28px;
        line-height: 0;
        margin: 0 29px;
        padding-top: 9px;
        text-align: center;

        .pager-link {
          background: url('/images/about/carousel_dots.png') 0 0 no-repeat;
          height: 11px;
          width: 10px;
          margin-left: 10px;
          display: inline-block;

          &.pager-active,
          &.pager-active:hover {
            background-position: -22px 0;
          }

          &:hover {
            background-position: -11px 0;
          }

          &:first-of-type {
            margin-left: 0;
          }
        }
      }
    }
  }

  .user {
    position: relative;
    float: left;
    width: 230px;

    &.empty {
      display: block;
      height: 210px;
      visibility: hidden; // Take up space, but be invisible
    }

    a {
      @include border-radius(4px);
      @include box-shadow(0 1px 2px rgba(0,0,0,0.1));
      background: url('/images/about/user_bg.png') no-repeat;
      display: block;
      height: 103px;
      margin-left: 20px;
      width: 210px;
    }
  }

  p {
    text-align: center;
  }

  #listed {
    float: left;
    margin-left: $col-width * 9;
    text-align: center;
  }
}

.gears.section {
  .gear {
    text-align: center;
    height: 120px;

    .gearplus {
      padding: 0px 30px 0px 30px;
      display: inline;
      line-height: 120px;
      img {
        vertical-align: top;
        padding-top: 50px;
      }
    }
  }
}


.samples.section {
  .sample {
    float: left;
    position: relative;
    margin-left: $col-spacing;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    @include box-shadow(rgba(0,0,0,0.1) 0 2px 3px);
    @include border-radius(6px);
    @include width-for-columns(4);

    &:first-of-type {
      margin-left: 0;
    }

    .info {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      background-color: rgba(0,0,0,0.85);
      -webkit-font-smoothing: antialiased;
      @include transition(opacity 0.1s linear);
      @include border-radius(6px);

      .name {
        text-align: center;
        color: white;
        font-family: MavenProMedium;
        font-size: 18px;
        margin-top: 55px;
        text-transform: uppercase;
      }

      .actions {
        text-align: center;
        margin-top: 16px;

        > div {
          display: inline-block;
          margin: 0 3px;
        }
      }
    }

    img {
      @include border-radius(6px);
    }

    &:hover .info {
      opacity: 1;
    }
  }
}

/**
  Documentation Page
**/

.chapter {
  margin: 23px 0 90px 0;

  $h3-indent: 32px;
  $body-indent: $h3-indent;

  h1 {
    font-family: "MavenProBold";
    font-size: 22px;
    text-transform: uppercase;
    color: $orange-color;
    padding: 0px 0px 15px 25px;
    background: no-repeat url(/images/chapter-mark.png) 0px 7px;
    border-bottom: 1px solid #dfd7d4;
  }

  h2 {
    width: 100%;
    font-size: 22px;
    color: $black-color;
    font-family: "MavenProBold";
  }

  h3 {
    font-family: "MavenProBold";
    font-size: 18px;
    color: $black-color;
    margin: 30px 0;
  }

  h4 {
    font-family: "MavenProBold";
    font-size: 12px;
    color: $orange-color;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0 12px 0;
    line-height: 18px;
  }

  p {
    color: #222;
    font-size: 15px;
    line-height: 22px;
  }

  ul, ol {
    margin-left: $body-indent;
    list-style-type: disc;
    margin-bottom: 28px;

    li {
      font-size: 15px;
      margin: 10px 0 10px 0;

      p {
        padding-left: 7px;
      }
    }
  }
}


/**
  Guides Page
**/

.guides {
    #content-wrapper {
        padding: 0px 0px 20px 0px;
    }
    #sidebar {
        margin-top: 0px;
        width: 218px;
        margin-bottom: 28px;
        padding-bottom: 120px;
        background: #f4ece9;
        border-left: 1px solid #d4ccc8;
        border-right: 1px solid #d4ccc8;
        position: relative;
        ol#guide_list {
            li {
                font-size: 12px;
                list-style: none;
                margin: 0px;
                padding: 0px;
                p {
                    padding-left: 7px;
                }
                a {
                    padding: 0 10px;
                    line-height: 1.2em;
                }
                > ol {
                    display: none;
                    background-color: #f9e7e4;
                    &.selected {
                        display: block;
                    }
                    li:first-of-type {
                        padding-top: 10px;
                    }
                    li:last-of-type {
                        padding-bottom: 10px;
                    }
                }
                &.level-1 {
                    text-transform: uppercase;
                    > a {
                        color: #443331;
                        border-top: 1px solid #d5ccc8;
                        border-bottom: 1px solid #d5ccc8;
                        padding: 12px 12px 10px 12px;
                        width: 218px;
                        margin-left: -1px;

                        &.selected {
                            background-color: #f16f58;
                            background-image: -webkit-linear-gradient(-90deg, #f67862, #e7624b);
                            border: 1px solid #b23e2a;
                            color: white;
                        }
                    }
                }
                &.level-2, &.level-3 {
                    padding: 4px 0;
                    a {
                        text-transform: none;
                        color: #d84a32;
                        font-weight: normal;
                        font-size: 12px;
                    }
                }
            }
        }
        &:after {
            @include background-image(linear-gradient(rgba(250, 244, 241, 0), rgba(251, 245, 241, 1)));
            position: absolute;
            bottom: 0px;
            left: -2px;
            right: 0;
            width: 220px;
            height: 120px;
            content: '';
        }
    }


    #guide_search {
        background-color: #fbf8f7;
        border: 1px solid #ccc;
        position: relative;
        color: #423432;
        display: block;
        width: 100%;
        height: 40px;
        label {
            padding: 0px 0px 5px 15px;
            padding-right: 10px;
            margin-left: 10px;
            background: no-repeat url(/images/search-icon.png);
        }
        border: 0;
        input::-webkit-input-placeholder { font-style: italic; }
        input:-moz-placeholder { font-style: italic; }
        input::-moz-placeholder { font-style: italic; }
        input {
            background: none;
            font-size: 12px;
            border: 0px;
            padding: 5px 0px 5px 5px;
            height: 100%;
            width: 165px;
            outline: none;
            font-style: normal;
        }
        button {
            background: no-repeat url(/images/search-erase.png);
            width: 14px;
            border: 0px;
            height: 14px;
            position: absolute;
            cursor: pointer;
            right: 10px;
            top: 15px;
        }
    }
}


/**
  Blogs
**/

article {
  margin: 43px 0 90px 0;

  $h3-indent: 0;
  $body-indent: $h3-indent;

  figure {
    width: 100%;<commit_msg>Whitespace<commit_after>@import "compass";
@import "compass/reset";
@import "compass/typography/text/ellipsis";

@import "fonts";

/* Calculated page dimensions. */
$page-width: 940px;

$col-width: 40px;
$col-spacing: 20px;

$orange-color: #e1563f;
$blue-color: #1f58ce;
$black-color: #252525;

@mixin width-for-columns($cols) {
  width: $cols * $col-width + ($cols - 1) * $col-spacing;
}

body {
  background: url(/images/background-shades.png) no-repeat top center #faf4f1;
  margin: 60px 0 0 0;
  padding: 0;
  font-family: Lato, Arial, sans-serif;
  line-height: 23px;
  font-size: 13px;
  line-height: 20px;
  min-width: $page-width;
}

* {
  @include box-sizing(border-box);
}

a {
  color: $orange-color;
  text-decoration: none;
}

p {
  margin: 24px 0;
}

em {
  font-style: italic;
}

code {
  font-family: Menlo, Courier, monospace;
  font-size: 90%;
  color: #666;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 3px;
  @include border-radius(5px);
}

h1 {
  font-size: 32px;
  margin-bottom: 32px;
  line-height: 40px;
}

strong {
  font-weight: bold;
}

hr {
  height: 1px;
  border: none;
  margin: 40px 0;
  background-color: $black-color;
}

/**
  Tabs
**/

.tabs {
  > ul {
    list-style: none;
    overflow: hidden; // Clearfix

    li {
      display: block;
      float: left;
      padding-right: 10px;
      margin-right: 10px;
      border-right: solid 1px gray;
    }

    border-bottom: solid 1px gray;
    margin-bottom: 20px;
  }
}

/**
  Header
**/
#header {
  position: absolute;
  width: 100%;
  min-width: $page-width;
  top: 0;
  height: 60px;
  background: url(/images/navigation_background.png) top center;
  border-bottom: 1px solid #aa412f;
  z-index: 10; // the header is on top to have a proper drop shadow
  @include box-shadow(rgba(0,0,0,0.3) 0 0 3px);

  #wrapper {
    width: $page-width;
    margin: 0 auto;
    position: relative;
  }

  #logo {
    position: absolute;
    left: 7px;
    top: 6px;
    width: 103px;
    height: 40px;
    background: url(/images/ember_logo.png);
    @include filter(drop-shadow(rgba(0,0,0,0.3) 0 1px 2px));

    &:hover {
      @include filter(drop-shadow(rgba(0,0,0,0.7) 0 1px 3px));
    }
  }

  #nav {
    width: 500px;
    height: 65px;
    margin: 0 auto;

    text-align: center;

    li {
      line-height: 26px;
      margin: 18px 0 0;
      display: inline-block;

      a {
        font-family: "MavenProBold";
        font-size: 13px;
        text-transform: uppercase;
        color: #faf2ee;

        @include text-shadow(rgba(0,0,0,0.3) 0px 1px 0px);
        display: block;
        padding: 0px 1em;
        height: 26px;
        line-height: 26px;
        text-decoration: none;
        border: 1px solid transparent;

        &:hover { color: #fff }
      }

      &.active a {
        color: #331915;
        @include text-shadow(rgba(255,255,255,0.2) 0 1px 0px);
        background-color: #bf4737;
        background-color: rgba(0,0,0,0.2);
        @include border-radius(3px);
        border: 1px solid #923c2e;
        @include box-shadow(
          rgba(255, 255, 255, 0.15) 0 1px 0px,
          inset rgba(0, 0, 0, 0.17) 0 1px 1px
        );

        &:hover {
          color: black;
          background-color: rgba(0,0,0,0.17);
        }
      }

    }
  }

  #github {
    position: absolute;
    right: 7px;
    top: 17px;

    a {
      img {
        float: left;
        margin-top: 7px;
        margin-right: 6px;
        display: block;
      }

      font-family: "MavenProBold";
      font-size: 12px;
      text-transform: uppercase;
      color: #faf2ee;
      @include text-shadow(rgba(0,0,0,0.3) 0px 1px 0px);

      display: block;
      padding: 0px 1em;
      height: 28px;
      line-height: 28px;

      background-color: #ff6e56;
      @include filter-gradient(#ff6e56, #ed4f35, vertical);
      @include background-image(linear-gradient(top, #ff6e56 0%,#ed4f35 100%));

      border: 1px solid #a93926;
      @include border-radius(4px);
      @include box-shadow(
        inset rgba(255,255,255, 0.17) 0 1px 1px
      );

      &:hover {
        color: #fff;
        background: #f86c55;
      }
    }
  }
}

#content-wrapper {
  @include clearfix;
  width: $page-width;
  margin: 0 auto 40px auto;
  padding: 20px 0px;
  position: relative;
  z-index: 1;

  &.grid {
    background-image: url(/images/grid.png);
  }
}

$sidebar-width: $col-width * 4 + $col-spacing * 3;
$content-width: $page-width - $sidebar-width - $col-spacing * 2;

#content {
  width: $page-width;

  &.has-sidebar {
    margin-left: $sidebar-width + $col-spacing * 2;
    width: $content-width;
  }

  & > h1:first-child {
    margin-top: 43px;
  }
}

#sidebar {
  float: left;
  width: $sidebar-width;
  margin-top: 43px;
  font-family: "MavenProMedium";
  font-size: 14px;

  #back-to-top {
    text-align: center;
    opacity: 0;
    @include transition(opacity 0.05s linear);
  }

  a {
    text-decoration: none;
    line-height: 21px;
    border-bottom: none;
    color: $orange-color;

    &:hover {
      color: $black-color;
    }

    &.active {
      color: $black-color;
    }
  }

  ol {
    list-style-type: none;

    li {
      margin: 14px 0;

      &:first-of-type {
        margin-top: 0;
      }

      &.level-1, &.level-2 {
        a {
          font-family: "MavenProBold";
          color: $black-color;
        }
      }

      &.level-3, &.level-4 {
        font-family: "Lato";
        font-size: 13px;
        text-transform: none;
        margin: 2px 0;
      }

      &:hover {
        a {
          color: #491500;
        }
      }

      a {
        display: block;
      }
    }
  }

  h2 {
    font-family: "MavenProBold";
    color: $black-color;
    margin-bottom: 10px;
  }

  ul li {
    font-family: "Lato";
    font-size: 13px;
    text-transform: none;
    margin: 2px 0;
  }
}

/**
  About Page
**/
.about-header-text {
  display: block;
  margin: 60px auto 0 auto;
}

#download {
  width: 465px;
  height: 125px;
  margin: 0 auto;
  position: relative;

  #download-ember, #download-starter-kit {
    position: absolute;
    width: 220px;
    top: 40px;
    text-align: center;
  }

  #download-ember {
    left: 0;

    .button {
      font-size: 13px; /* Due to long version name */
    }
  }

  #download-starter-kit {
    left: 240px;
  }

  .info {
    margin-top: 4px;
    color: #888;
  }
}

.section {
  margin: 60px 0;
  overflow: hidden;

  h2 {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: $black-color;
    text-transform: uppercase;
    font-family: "MavenProBold";
    margin-bottom: 28px;
  }

  h3 {
    font-size: 14px;
    text-transform: uppercase;
    font-family: "MavenProBold";
  }

  table.columns {
    margin: 0 auto;

    td {
      vertical-align: top;
      padding-right: 50px;
    }
  }
}

.getting-started.section {
  .highlight, p {
    float: left;
    width: $col-width * 8 + $col-spacing * 6;

    &.right {
      margin-left: $col-width * 1 + $col-spacing * 1;
    }
  }

  p {
    text-align: center;
    color: #222;
  }
}

.features.section {
  @include clearfix;

  .feature {
    @include width-for-columns(4);
    float: left;
    margin-left: $col-width + $col-spacing;
    margin-right: $col-spacing;

    img {
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    p {
      text-align: center;
    }
  }
}

.users.section {

  .surround {
    @include border-radius(3px);
    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff);
    @include clearfix;
    background: url('/images/about/carousel_bg.png');
    border: 1px solid #d1d1d1;
    padding-top: 19px;

    .bx-wrapper,
    .bx-window {
      width: 940px;
    }

    .bx-wrapper {

      .bx-prev,
      .bx-next {
        background: url('/images/about/carousel_controls.png') no-repeat;
        float: left;
        height: 28px;
        width: 30px;
      }

      .bx-prev,
      .bx-next,
      .pager-link {
        text-indent: -9999px;
      }

      .bx-prev {
        background-position: left;
        border-right: 1px solid #d1d1d1;
        float: right;
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .bx-next {
        background-position: right;
        border-left: 1px solid #d1d1d1;
        float: right;
        position: absolute;
        bottom: 0;
        right: 1px;
      }

      .bx-window {
        border-bottom: 1px solid #d1d1d1;
        height: 124px;
      }

      .bx-pager {
        @include clearfix;
        background: url('/images/about/carousel_pager_bg.png') bottom repeat-x #f4f4f4;
        border-left: 1px solid #fafafa;
        border-right: 1px solid #fafafa;
        border-top: 1px solid #fefefe;
        font-size: 0;
        height: 28px;
        line-height: 0;
        margin: 0 29px;
        padding-top: 9px;
        text-align: center;

        .pager-link {
          background: url('/images/about/carousel_dots.png') 0 0 no-repeat;
          height: 11px;
          width: 10px;
          margin-left: 10px;
          display: inline-block;

          &.pager-active,
          &.pager-active:hover {
            background-position: -22px 0;
          }

          &:hover {
            background-position: -11px 0;
          }

          &:first-of-type {
            margin-left: 0;
          }
        }
      }
    }
  }

  .user {
    position: relative;
    float: left;
    width: 230px;

    &.empty {
      display: block;
      height: 210px;
      visibility: hidden; // Take up space, but be invisible
    }

    a {
      @include border-radius(4px);
      @include box-shadow(0 1px 2px rgba(0,0,0,0.1));
      background: url('/images/about/user_bg.png') no-repeat;
      display: block;
      height: 103px;
      margin-left: 20px;
      width: 210px;
    }
  }

  p {
    text-align: center;
  }

  #listed {
    float: left;
    margin-left: $col-width * 9;
    text-align: center;
  }
}

.gears.section {
  .gear {
    text-align: center;
    height: 120px;

    .gearplus {
      padding: 0px 30px 0px 30px;
      display: inline;
      line-height: 120px;
      img {
        vertical-align: top;
        padding-top: 50px;
      }
    }
  }
}


.samples.section {
  .sample {
    float: left;
    position: relative;
    margin-left: $col-spacing;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    @include box-shadow(rgba(0,0,0,0.1) 0 2px 3px);
    @include border-radius(6px);
    @include width-for-columns(4);

    &:first-of-type {
      margin-left: 0;
    }

    .info {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      background-color: rgba(0,0,0,0.85);
      -webkit-font-smoothing: antialiased;
      @include transition(opacity 0.1s linear);
      @include border-radius(6px);

      .name {
        text-align: center;
        color: white;
        font-family: MavenProMedium;
        font-size: 18px;
        margin-top: 55px;
        text-transform: uppercase;
      }

      .actions {
        text-align: center;
        margin-top: 16px;

        > div {
          display: inline-block;
          margin: 0 3px;
        }
      }
    }

    img {
      @include border-radius(6px);
    }

    &:hover .info {
      opacity: 1;
    }
  }
}

/**
  Documentation Page
**/

.chapter {
  margin: 23px 0 90px 0;

  $h3-indent: 32px;
  $body-indent: $h3-indent;

  h1 {
    font-family: "MavenProBold";
    font-size: 22px;
    text-transform: uppercase;
    color: $orange-color;
    padding: 0px 0px 15px 25px;
    background: no-repeat url(/images/chapter-mark.png) 0px 7px;
    border-bottom: 1px solid #dfd7d4;
  }

  h2 {
    width: 100%;
    font-size: 22px;
    color: $black-color;
    font-family: "MavenProBold";
  }

  h3 {
    font-family: "MavenProBold";
    font-size: 18px;
    color: $black-color;
    margin: 30px 0;
  }

  h4 {
    font-family: "MavenProBold";
    font-size: 12px;
    color: $orange-color;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0 12px 0;
    line-height: 18px;
  }

  p {
    color: #222;
    font-size: 15px;
    line-height: 22px;
  }

  ul, ol {
    margin-left: $body-indent;
    list-style-type: disc;
    margin-bottom: 28px;

    li {
      font-size: 15px;
      margin: 10px 0 10px 0;

      p {
        padding-left: 7px;
      }
    }
  }
}


/**
  Guides Page
**/

.guides {
  #content-wrapper {
    padding: 0px 0px 20px 0px;
  }

  #sidebar {
    margin-top: 0px;
    width: 218px;
    margin-bottom: 28px;
    padding-bottom: 120px;
    background: #f4ece9;
    border-left: 1px solid #d4ccc8;
    border-right: 1px solid #d4ccc8;
    position: relative;

    ol#guide_list {
      li {
        font-size: 12px;
        list-style: none;
        margin: 0px;
        padding: 0px;

        p {
          padding-left: 7px;
        }

        a {
          padding: 0 10px;
          line-height: 1.2em;
        }

        > ol {
          display: none;
          background-color: #f9e7e4;

          &.selected {
            display: block;
          }

          li:first-of-type {
            padding-top: 10px;
          }

          li:last-of-type {
            padding-bottom: 10px;
          }
        }

        &.level-1 {
          text-transform: uppercase;

          > a {
            color: #443331;
            border-top: 1px solid #d5ccc8;
            border-bottom: 1px solid #d5ccc8;
            padding: 12px 12px 10px 12px;
            width: 218px;
            margin-left: -1px;

            &.selected {
              background-color: #f16f58;
              background-image: -webkit-linear-gradient(-90deg, #f67862, #e7624b);
              border: 1px solid #b23e2a;
              color: white;
            }
          }
        }

        &.level-2, &.level-3 {
          padding: 4px 0;

          a {
            text-transform: none;
            color: #d84a32;
            font-weight: normal;
            font-size: 12px;
          }
        }
      }
    }

    &:after {
      @include background-image(linear-gradient(rgba(250, 244, 241, 0), rgba(251, 245, 241, 1)));
      position: absolute;
      bottom: 0px;
      left: -2px;
      right: 0;
      width: 220px;
      height: 120px;
      content: '';
    }
  }

  #guide_search {
    background-color: #fbf8f7;
    border: 1px solid #ccc;
    position: relative;
    color: #423432;
    display: block;
    width: 100%;
    height: 40px;

    label {
      padding: 0px 0px 5px 15px;
      padding-right: 10px;
      margin-left: 10px;
      background: no-repeat url(/images/search-icon.png);
    }

    border: 0;
    input::-webkit-input-placeholder { font-style: italic; }
    input:-moz-placeholder { font-style: italic; }
    input::-moz-placeholder { font-style: italic; }

    input {
      background: none;
      font-size: 12px;
      border: 0px;
      padding: 5px 0px 5px 5px;
      height: 100%;
      width: 165px;
      outline: none;
      font-style: normal;
    }

    button {
      background: no-repeat url(/images/search-erase.png);
      width: 14px;
      border: 0px;
      height: 14px;
      position: absolute;
      cursor: pointer;
      right: 10px;
      top: 15px;
    }
  }
}


/**
  Blogs
**/

article {
  margin: 43px 0 90px 0;

  $h3-indent: 0;
  $body-indent: $h3-indent;

  figure {
    width: 100%;
{'fraction_non_alphanumeric': 0.13279192970212225, 'fraction_numerical': 0.04929733845128954, 'mean_word_length': 1.6609268169156748, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6793405', 'n_tokens_mistral': 12745, 'n_tokens_neox': 11198, 'n_words': 2493}