<commit_before>@import "_conditionals";

/* visited link colour overrides */
#content.multi-page li a:visited,
#content.multi-page .pagination li a:visited,
#wrapper.programme .article-container nav a:visited {
  color: #2E3191;
}

#content.multi-page {
  header {
    position: relative;
  }

  article {
    margin-left: -1px;
    min-height: 40em;
    width: 75%;

    @include ie-lte(8) {
      width: 74.999%;
      float: left;
    }

    @include ie-lte(7) {
      min-height: 40em;
    }
  }

  aside {
    float: left;
    margin-bottom: 1em;
    width: 25%;

    .inner {
      padding: 0;
      width: 100%;
    }
  }
}

.alternative-guide {
  margin: 0 auto 0.5em;
  overflow: hidden;
  width: 9.5em;

  &.video {
    .video-wrapper {
      background: image-url("play-video-cta.png")  no-repeat scroll 0 -80px #E5E5E5;
      height: 5em;
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
      width: 8.5em;

      &:hover {
        background: image-url("play-video-cta.png") no-repeat scroll 0 0 #e5e5e5;
      }

      a span {
        display: block;
        font-size: 1em;
        line-height: 2em;
        padding-left: 0.5em;
      }

      img {
        display: none;
        margin-top: -0.5em;
      }
    }
  }
}

#wrapper.video-guide article {
  /* get rid of border on video guide pages */
  border-left: none;
  margin-left: 0;
}

.multi-page article .inner {
  padding: 0.5em 2.5em 1em 2.5em;
}
.licence article .inner {
  padding-top: 0;
}

aside .page-navigation {
  display: block;
  float: right;
  margin-top: 0.5em;
  width: 100%;

  ol {
    font-size: 0.85em;
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;

    &:first-child a {
      border-top: none;
    }

    &.active a {
      background: #fff;
      border: solid 1px #C9D0D0;
      border-right: none;
      display: block;
      margin: 0 0 -1px -1px;
      position: relative;
      z-index: 2;

      @include ie-lte(8) {
        bottom: -1px;
        margin: 0;
      }

      &:hover {
        background: #fff;
        color: #1576FB;
      }

      .part-title {
        color: #000;
      }
    }

    a {
      background-color: #E1E8E8;
      border-top: solid 1px #C9D0D0;
      display: block;
      padding: 0.75em 0.75em;
      font-size: 1.176em;
      text-decoration: none;

      &:hover {
        background-color: #97C5E5;
        color: #fff;
      }

      span {
        display: block;
      }

      .part-label {
        color: #3f3f3f;
        display: block;
        line-height: 1.5em;
      }

      .part-title {
        line-height: 1.3em;
      }
    }
  }
}

#wrapper.video-guide article {
  width: 100%;
}

.video-guide {
  article .inner {
    padding-bottom: 2em;
  }

  .meta-data {
    border-top: none;
    margin: 1em 0 2em 2em;
  }
}

/* guides pagination */
.pagination {
  display: block;
  margin: 2em -1em 0 -1em;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    float: left;
    list-style: none;
    text-align: right;
    margin: 0;
    padding: 0;
    width: 48.5%;
    font-size: 1em;

    &:first-child {
      margin-right: 3%;
      text-align: left;
    }

    a {
      background-color: #E1E8E8;
      display: block;
      float: left;
      min-height: 4.5em;
      text-decoration: none;
      width: 87%;

      @include ie-lte(7) {
        height: 4.5em;
      }

      &:hover {
        background-color: #97C5E5;
        color: #fff;
      }

      .pagination-label {
        color: #000;
        display: block;
      }

      .pagination-part-title {
        text-decoration: underline;
      }
    }
  }

  .previous a {
    padding: 0.75em 5% 0.75em 1em;
  }

  .next a {
    padding: 0.75em 1em 0.75em 5%;
  }

  .first,
  .last {
    background-color: #E1E8E8;
    min-height: 4.5em;

    @include ie-lte(7) {
      height: 4.5em;
    }

    span {
      display: block;
      min-height: 4.5em;
      padding: 0.75em 5%;
      width: 90%;

      @include ie-lte(7) {
        height: 4.5em;
      }
    }

    .pagination-label {
      display: block;
      font-size: 0.85em;
      line-height: 1em;
      margin-bottom: 0.5em;
    }
  }
}

/*
 * Transactions and local transactions styles
 */

#wrapper.transaction .continue,
#wrapper.local_transaction .continue {
  background: #F9F9F9 image-url("info-icon.png") no-repeat 1% 50%;
  border: 1px solid #586E75;
  margin-bottom: 1.2em;
  padding: 0.15em 1em;
}

.find-location-for-service {
  background: #f8f8f8 image-url("locator-icon.png") no-repeat 1em 1em;
  border: none;
  margin: 1.2em 0;
  padding: 1.2em 0.75em 1.2em 3.5em;
  position: relative;

  p.geolocate-me {
    border-top: 1px solid #ddd;
    font-size: 1em;
    margin-bottom: 0;
    padding-top: 1em;
  }
}

/* once we have added a class to external links generated by govspeak we can ditch this */
#wrapper .get-started a[rel="external"]:after {
  content: "";
}

#wrapper.transaction .get-started .button .indicator:after {
  font-size: 1.75em;
  margin-top: -0.5em;
  position: absolute;
  right: 0.5em;
  top: 50%;
}

h1#what-you-need-to-know{
  font-weight: 300;
}

/*
 * Helper icons
 */

ul.helpers li.active,
ul.helpers li.active h3 a {
  color: #fff;
}

/*
  Programme format
*/
#wrapper.programme {
  article {
    min-height: 20em;
    width: 75%;

    @include ie-lte(8) {
      height: none;
    }

    .inner {
      padding: 0 2.5em 1em;
    }
  }

  .programme-progression li a:hover,
  .part-pagination li:first-child a:hover {
    background-color: #97C5E5;
    color: inherit;
  }

  .programme-progression {
    padding: 0;
    position: relative;
    width:25%;
    float:left;

    ol {
      background-color: #C9D0D0;
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      width:100%;
      z-index: 5;
    }

    li {
      &:first-child a {
        border-left: solid 1px #E1E8E8;
        margin-left: 0;
      }

      a {
        background-color: #E1E8E8;
        display: block;
        height: 2.25em;
        line-height: 2.25em;
        border-top: 1px solid #C9D0D0;
        padding: 0 1em 0 0.75em;
        position: relative;
        text-align: left;
        text-decoration: none;
        top: 0;

        @include ie-lte(7) {
          background-image: none;
          padding: 0 0.5em;
        }
      }

      &.active a {
        background-color: #fff;
        border-color: #C9D0D0;
        border-style: solid none solid solid;
        border-width: 1px medium 1px 1px;
        color: #000;
        margin: -1px -1px -1px 0;
        position: relative;
        z-index: 5;

        &:hover {
          color: #2E8ACA;
        }
      }
    }
  }

  .part-pagination {
    margin-top: 3em;

    @include ie-lte(6) {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: right;
      text-align: right;
    }

    a:hover .progressor {
      background-position: -573px 0;
    }

    li {
      &:first-child a {
        background-color: #E1E8E8;
        display: block;
        padding: 0 0.55em 0 0.5em;
        text-decoration: none;
      }

      a {
        line-height: 2.15em;
        height: 2.15em;
        position: relative;
        font-size: 0.862em;
      }
    }
  }
}

.js-enabled #wrapper.programme {

  .part-pagination.return-to-top,<commit_msg>Add typography mixins & fix structure<commit_after>@import "_conditionals";
@import "styleguide/_font-stacks.scss";
@import "styleguide/_typography.scss";

/* visited link colour overrides */
#content.multi-page li a:visited,
#content.multi-page .pagination li a:visited,
#wrapper.programme .article-container nav a:visited {
  color: #2E3191;
}

#content.multi-page {
  header {
    position: relative;
  }

  article {
    margin-left: -1px;
    min-height: 40em;
    width: 75%;

    @include ie-lte(8) {
      width: 74.999%;
      float: left;
    }

    @include ie-lte(7) {
      min-height: 40em;
    }
  }

  aside {
    float: left;
    margin-bottom: 1em;
    width: 25%;

    .inner {
      padding: 0;
      width: 100%;
    }
  }
}

.alternative-guide {
  margin: 0 auto 0.5em;
  overflow: hidden;
  width: 9.5em;

  &.video {
    .video-wrapper {
      background: image-url("play-video-cta.png")  no-repeat scroll 0 -80px #E5E5E5;
      height: 5em;
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
      width: 8.5em;

      &:hover {
        background: image-url("play-video-cta.png") no-repeat scroll 0 0 #e5e5e5;
      }

      a span {
        @include core-16($line-height: (32 / 16));
        display: block;
        padding-left: 0.5em;
      }

      img {
        display: none;
        margin-top: -0.5em;
      }
    }
  }
}

.video-guide {
  article .inner {
    padding-bottom: 2em;
  }

  .meta-data {
    border-top: none;
    margin: 1em 0 2em 2em;
  }
}

#wrapper.video-guide article {
  /* get rid of border on video guide pages */
  border-left: none;
  margin-left: 0;
  width: 100%;
}

.multi-page article .inner {
  padding: 0.5em 2.5em 1em 2.5em;
}
.licence article .inner {
  padding-top: 0;
}

aside .page-navigation {
  display: block;
  float: right;
  margin-top: 0.5em;
  width: 100%;

  ol {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;

    &:first-child a {
      border-top: none;
    }

    &.active a {
      background: #fff;
      border: solid 1px #C9D0D0;
      border-right: none;
      display: block;
      margin: 0 0 -1px -1px;
      position: relative;
      z-index: 2;

      @include ie-lte(8) {
        bottom: -1px;
        margin: 0;
      }

      &:hover {
        background: #fff;
        color: #1576FB;
      }

      .part-title {
        color: #000;
      }
    }

    a {
      @include core-16;
      background-color: #E1E8E8;
      border-top: solid 1px #C9D0D0;
      display: block;
      padding: 0.75em 0.75em;
      text-decoration: none;

      &:hover {
        background-color: #97C5E5;
        color: #fff;
      }

      span {
        display: block;
      }

      .part-label {
        color: #3f3f3f;
        display: block;
        line-height: 1.5em;
      }

      .part-title {
        line-height: 1.3em;
      }
    }
  }
}

/* guides pagination */
.pagination {
  display: block;
  margin: 2em -1em 0 -1em;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    @include core-16($line-height: (24 / 16));
    float: left;
    list-style: none;
    text-align: right;
    margin: 0;
    padding: 0;
    width: 48.5%;

    &:first-child {
      margin-right: 3%;
      text-align: left;
    }

    a {
      background-color: #E1E8E8;
      display: block;
      float: left;
      min-height: 4.5em;
      text-decoration: none;
      width: 87%;

      @include ie-lte(7) {
        height: 4.5em;
      }

      &:hover {
        background-color: #97C5E5;
        color: #fff;
      }

      .pagination-label {
        color: #000;
        display: block;
      }

      .pagination-part-title {
        text-decoration: underline;
      }
    }
  }

  .previous a {
    padding: 0.75em 5% 0.75em 1em;
  }

  .next a {
    padding: 0.75em 1em 0.75em 5%;
  }

  .first,
  .last {
    background-color: #E1E8E8;
    min-height: 4.5em;

    @include ie-lte(7) {
      height: 4.5em;
    }

    span {
      display: block;
      min-height: 4.5em;
      padding: 0.75em 5%;
      width: 90%;

      @include ie-lte(7) {
        height: 4.5em;
      }
    }

    .pagination-label {
      display: block;
      margin-bottom: 0.5em;
    }
  }
}

/*
 * Transactions and local transactions styles
 */

#wrapper.transaction .continue,
#wrapper.local_transaction .continue {
  background: #F9F9F9 image-url("info-icon.png") no-repeat 1% 50%;
  border: 1px solid #586E75;
  margin-bottom: 1.2em;
  padding: 0.15em 1em;
}

.find-location-for-service {
  background: #f8f8f8 image-url("locator-icon.png") no-repeat 1em 1em;
  border: none;
  margin: 1.2em 0;
  padding: 1.2em 0.75em 1.2em 3.5em;
  position: relative;

  p.geolocate-me {
    border-top: 1px solid #ddd;
    @include core-16;
    margin-bottom: 0;
    padding-top: 1em;
  }
}

/* once we have added a class to external links generated by govspeak we can ditch this */
#wrapper .get-started a[rel="external"]:after {
  content: "";
}

#wrapper.transaction .get-started .button .indicator:after {
  @include core-27;
  margin-top: -0.5em;
  position: absolute;
  right: 0.5em;
  top: 50%;
}

h1#what-you-need-to-know{
  font-weight: 300;
}

/*
 * Helper icons
 */

ul.helpers li.active,
ul.helpers li.active h3 a {
  color: #fff;
}

/*
  Programme format
*/
#wrapper.programme {
  article {
    min-height: 20em;
    width: 75%;

    @include ie-lte(8) {
      height: none;
    }

    .inner {
      padding: 0 2.5em 1em;
    }
  }

  .programme-progression li a:hover,
  .part-pagination li:first-child a:hover {
    background-color: #97C5E5;
    color: inherit;
  }

  .programme-progression {
    padding: 0;
    position: relative;
    width:25%;
    float:left;

    ol {
      background-color: #C9D0D0;
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      width:100%;
      z-index: 5;
    }

    li {
      &:first-child a {
        border-left: solid 1px #E1E8E8;
        margin-left: 0;
      }

      a {
        background-color: #E1E8E8;
        display: block;
        height: 2.25em;
        line-height: 2.25em;
        border-top: 1px solid #C9D0D0;
        padding: 0 1em 0 0.75em;
        position: relative;
        text-align: left;
        text-decoration: none;
        top: 0;

        @include ie-lte(7) {
          background-image: none;
          padding: 0 0.5em;
        }
      }

      &.active a {
        background-color: #fff;
        border-color: #C9D0D0;
        border-style: solid none solid solid;
        border-width: 1px medium 1px 1px;
        color: #000;
        margin: -1px -1px -1px 0;
        position: relative;
        z-index: 5;

        &:hover {
          color: #2E8ACA;
        }
      }
    }
  }

  .part-pagination {
    margin-top: 3em;

    @include ie-lte(6) {
      display: none;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: right;
      text-align: right;
    }

    a:hover .progressor {
      background-position: -573px 0;
    }

    li {
      &:first-child a {
        background-color: #E1E8E8;
        display: block;
        padding: 0 0.55em 0 0.5em;
        text-decoration: none;
      }

      a {
        @include core-16($line-height: (35 / 16));
        height: 2.15em;
        position: relative;
      }
    }
  }
}

.js-enabled #wrapper.programme {

  .part-pagination.return-to-top,
{'fraction_non_alphanumeric': 0.13504343105320304, 'fraction_numerical': 0.04716340933767644, 'mean_word_length': 1.7331231454005935, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7042396', 'n_tokens_mistral': 6029, 'n_tokens_neox': 5513, 'n_words': 1251}