// Legacy content styles that apply to multiple legacy content pages
.legacy-content-wrap {
  .footnotes,
  .padded {
    padding-top: 2 * $vertical-height;
  }

  .footnote-back-link {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }

  .fancy-bullets {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 1em 0 0 0;

    li {
      padding-left: 1.25em;
      position: relative;
    }
  }

  .bullet-point {
    @include border-radius(0.3em);

    @include box-shadow(1px 1px 1px rgba(black, 0.2));

    display: block;
    position: absolute;
    left: 0;
    top: 1em;
    width: 0.6em;
    height: 0.6em;
    margin: 0.3em 0.6em 0 0;
    background: $blue;
    border: 1px solid $gray-light;

    // background: $linkColor;
    // border: 1px solid darken($linkColor, 5%);
  }

  .blue-bullet {
    @include border-radius(1px);

    @include box-shadow(1px 1px 1px rgba(black, 0.2));

    display: block;
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.4em;
    height: 0.4em;
    margin: 0.4em 0.3em 0 0;
    background: $blue-dark;
    border: 1px solid darken($blue-dark, 10%);
  }

  .green-bullet {
    @extend .blue-bullet;

    background: $green;
    border: 1px solid darken($green, 10%);
  }

  // Used by Serials and also image_resources
  .serial-pictures {
    @include list-unstyled;

    margin: 30px 0;
    list-style-type: none;

    li {
      @include clearfix;

      margin: 20px 0 0 0;
      position: relative;
      width: 100%;

      .serial-image {
        width: 27%;
        float: left;
        display: block;
        position: relative;

        img {
          width: 100%;
        }

        &.blackbg {
          background: black;
        }

        // This, for example, is only image_resources
      }

      p {
        float: left;
        margin-left: 3%;
        width: 70%;
      }
    }
  }

  .serial-search-screenshot {
    display: block;
    width: 100%;
    img {
      display: block;
      max-width: 750px;
      width: 80%;
      margin: 0 auto;
    }
  }
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  iframe {
    border: 1px solid #ccc;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// Override some styles for the datatable
#manufacturers-list {
  width: 100%;
  th {
    padding-right: 8px !important;
    &:after {
      display: none !important;
    }
  }
}
