/* mixin for multiline */
.featured-doc-container {
  margin-bottom: 30px; }
  .featured-doc-container::after {
    clear: both;
    content: "";
    display: table; }
  .featured-doc-container:not(:first-child) {
    margin-top: 15px; }

.featured-doc-container-title {
  color: #2e3336;
  margin: 15px 0; }

.featured-doc {
  margin-bottom: 20px; }
  .featured-doc::after {
    clear: both;
    content: "";
    display: table; }
  @media only screen and (min-width: 48em) {
    .featured-doc {
      float: left;
      width: 28%; }
      .featured-doc:nth-of-type(3n + 1), .featured-doc:nth-of-type(3n + 2) {
        margin-right: 5.33%; } }

.featured-doc-title {
  font-size: 18px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 5px; }

.featured-doc-links {
  color: #999;
  font-weight: bold; }
  .featured-doc-links span {
    vertical-align: top; }

.featured-doc-image {
  float: left;
  padding-right: 10px;
  width: 27.5%;
  max-width: 210px; }
  @media only screen and (min-width: 48em) {
    .featured-doc-image {
      width: 100%;
      float: none;
      margin-bottom: 15px; } }
  .featured-doc-image img {
    display: block;
    width: 100%;
    border: 1px solid #999; }

.featured-doc-author {
  color: #999;
  font-style: italic; }
  .featured-doc-author a {
    color: #999; }
    .featured-doc-author a:hover {
      color: #c73e28; }

@media only screen and (min-width: 48em) {
  #content-header {
    margin: 0 40px; } }

@media only screen and (min-width: 60em) {
  #content-header {
    margin: 0 0 10px 0;
    padding: 0;
    border-bottom: 1px solid #dedede; } }

#content {
  background-color: #fff;
  padding: 10px; }
  #content::after {
    clear: both;
    content: "";
    display: table; }
  @media only screen and (min-width: 60em) {
    #content {
      margin: 0 auto;
      padding: 20px;
      max-width: 960px; }
      #content::after {
        clear: both;
        content: "";
        display: table; } }

#content-main {
  position: relative; }
  @media only screen and (min-width: 48em) {
    #content-main {
      padding: 0 40px; } }
  @media only screen and (min-width: 60em) {
    #content-main {
      float: left;
      padding: 0;
      width: calc(100% - 320px); } }

@media only screen and (min-width: 48em) {
  #sidebar {
    margin: 8px 40px 0 40px; } }

@media only screen and (min-width: 60em) {
  #sidebar {
    margin: 0;
    width: 300px;
    float: right; } }