/* Icon Re-Mappings */
.icon-company:before {
  content: "\e909";
}

.icon-article:before,
.icon-news:before {
  content: "\e942";
}

.icon-source:before {
  content: "\e94f";
}


/* Because navbar is fixed */
body {
  padding-top: $navbar-height;
}

/*** Global Add-ons ***/

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.mt-1 {
  margin-top: 5px;
}

.mt-3 {
  margin-top: 10px;
}

.mt-5 {
  margin-top: 15px;
}

.mb-1 {
  margin-bottom: 5px;
}

.mb-3 {
  margin-bottom: 10px;
}

.mb-5 {
  margin-bottom: 15px;
}

/*** Top Navigation ***/

nav.navbar-fixed-top {
  // Hide default border to remove 1px line
  border: 0;
}

div.detail-heading {
  margin-bottom: 15px;
  color: $lg-tiny-heading-color;
  text-transform: uppercase;
  font-size: $lg-tiny-heading-size;
  font-family: $lg-tiny-heading-font;
  font-weight: normal;
}

/*** Sidebar ***/

div.sidebar {
  // Hide for mobile, show later
  display: none;

  a {
    &:visited {
      color: $lg-sidebar-link-color;
    }
    &:hover {
      color: $lg-sidebar-link-color-hover;
      text-decoration: none;
    }
  }
}

@media (min-width: 768px) {

    div.navbar-header {
      min-width: 300px;
    }

    div.sidebar {
      position: fixed;
      top: $navbar-height;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
      background-color: $lg-sidebar-background-color;
  }

  div.main {
    padding-right: 30px;
    padding-left: 30px;
  }
}

/*** Main content ***/

div.main {
    padding: 20px;

    .page-header {
        margin-top: 0;
    }
}


/*** Navbar ***/

div.navbar-header {
  min-width: 340px;

  a.navbar-brand {
    position: relative;
    top: $lg-navbar-brand-top;
    font-family: $lg-navbar-brand-font;
    font-size: $lg-navbar-brand-font-size;
    line-height: ($lg-navbar-brand-font-size - $line-height-computed);

    span {
      position: relative;
      top: 3px;
    }

    img {
      max-height: $lg-navbar-brand-img-height;
      display: inline-block;
      margin-right: 10px;
    }
  }
}

form.navbar-form {

  .form-control:focus {
    border-color: $lg-navbar-input-color;
    outline: 0;
    box-shadow: inset 0 0px 0px $base-black, 0 0 0px $base-black;
  }

  select {
    color: $lg-navbar-select-color;
    background-color: $lg-navbar-select-background-color;
    border: $lg-navbar-select-border;
  }

  input[type="text"] {
    color: $lg-navbar-input-color;
    background-color: $lg-navbar-input-background-color;
    border: $lg-navbar-input-border;
    margin: 0;

    &::placeholder {
  	  color: $lg-navbar-input-placeholder-color;
    }
  }

  div.input-group {
    margin: 0;
    width: 90% !important;
    height: 80% !important;
    border: 0px;
    background-color: $lg-navbar-input-group-background;
  }

  input.form-control-sm {
    width: 120px;
  }

  button[type=submit] {
    color: $lg-navbar-button-color;
    background-color: $lg-navbar-button-background-color;
    border: $lg-navbar-button-border;

    i {
      font-size: 18px;
      margin: 0 5px;
    }

    &:hover {
      background-color: $lg-navbar-button-background-color-hover;
    }
  }
}

.nav-tabs > li {
  a {
    background-color: #CCCCCC;

    &:hover {
      background-color: #A8A8A8;
      color: $base-black;
    }
  }

  .active > a,
  .active > a:hover,
  .active > a:focus {
    background-color: #A3A3A3;
    color: $base-black;
  }
}


/** Sidebar ***/

@mixin sidebar-titles() {
  font-size: $lg-sidebar-text-size;
    font-family: $lg-sidebar-text-font;
    font-weight: $lg-sidebar-text-weight;
    letter-spacing: $lg-sidebar-link-spacing;
  }

  @mixin sidebar-links($weight, $color) {
    font-family: $lg-sidebar-link-font;
    font-size: $lg-sidebar-link-size;
    font-weight: $weight;
    color: $color;
  }

  #sidebar {
    background-color: $lg-sidebar-background-color;
    color: $lg-sidebar-text-color;
    border-right: $lg-sidebar-border-right;

    h2,
    h3,
    h4 {
      font-family: $lg-sidebar-link-font;
    }

    label.nav-header {
      @include sidebar-titles();

      &:hover {
        color: $lg-sidebar-text-color-hover;
        cursor: pointer;
      }

      i {
        margin-right: 10px;
        font-size: $lg-sidebar-text-size * 1.25;
        color: $lg-sidebar-icon-color;
        vertical-align: middle;
      }

      &.plus:after,
      &.minus:after {
        padding-left: 2px;
        @include sidebar-links($lg-sidebar-link-weight, $lg-sidebar-text-color);
      }
      &.plus:after {
        content: "+ Show More";
        font-weight: bold;
      }
      &.minus:after {
        content: "- Show Less";
        font-weight: bold;
      }
      &.just-minus:after,
      &.just-plus:after {
        color: $lg-sidebar-expand-color;
        padding-left: 0px;
      }
      &.just-minus:after {
        content: " -";
      }
      &.just-plus:after {
        content: " +";
      }
      &.just-minus:hover:hover,
      &.just-plus:hover:after {
        color: $lg-sidebar-text-color-hover;
        padding-left: 0px;
      }
    }

    ul.nav-list li em {
      width: 100%;
      display: block;
      background: $lg-sidebar-term-on-bg;
      padding: 10px 15px;
      font-style: normal;

      a {
        @include sidebar-links($lg-sidebar-link-weight, $lg-sidebar-term-on-color);
      }
    }

    ul.nav > li > a {
      @include sidebar-links($lg-sidebar-link-weight, $lg-sidebar-link-color);

      &:hover,
      &:focus {
        color: $gray-darker;
      }
    }

    p:nth-child(1) {
      margin-bottom: 10px;

      i {
        margin-right: 5px;
        font-size: $lg-sidebar-text-size * 1;
        color: $lg-sidebar-icon-color;
        vertical-align: middle;
      }

      strong.label {
        font-size: $lg-sidebar-text-size * .75;
        font-family: $lg-sidebar-text-font;
        font-weight: $lg-sidebar-text-weight;
      }
    }

    p:nth-child(2) {
      margin-bottom: 25px;

      a {
        @include sidebar-links($lg-sidebar-link-weight, $lg-sidebar-link-color);
        padding: 10px 0px;
        text-decoration: $lg-sidebar-link-decoration;
        &:hover {
          color: $lg-sidebar-link-color-hover;
          text-decoration: $lg-sidebar-link-decoration-hover;
        }
      }
    }
  }

/*** Main Content ***/

  a.remove-filter:hover {
    text-decoration: none;
    background-color: transparent;
  }

/*** Search Filters ***/

  #searchtags {
    margin-bottom: 20px;
  }

  div.search-filter {
    padding: 8px 10px 8px 12px;
    margin: 0px 15px 0px 0px;
    background-color: $lg-search-filter-background-color;
    font-size: 16px;
    font-family: $lg-search-filter-font;
    font-weight: $lg-search-filter-weight;
    color: $lg-search-filter-color;
    display: inline-block;
    border-top: $lg-search-details-border-top;
    border-right: $lg-search-details-border-right;
    border-bottom: $lg-search-details-border-bottom;
    border-left: $lg-search-details-border-left;

    span.category {
      font-size: 12px;
      font-family: $lg-search-filter-font;
      text-transform: uppercase;
      line-height: 12px;
      color: $lg-search-filter-category-color;
    }

    a.remove-filter {
      margin-left: 10px;
      color: $lg-search-filter-remove-color;

      i.icon-circle-x {
        color: $lg-search-filter-remove-color;

        &:hover {
          color: darken($lg-search-filter-remove-color, 15%);
        }
      }
    }
  }


/*** Search Result ***/

  #search-details {
    margin-bottom: 20px;

    div.detail {
      display: inline-block;
      background: $lg-search-details-background-color;
      padding: 8px 12px 8px 10px;
      border-top: $lg-search-details-border-top;
      border-right: $lg-search-details-border-right;
      border-bottom: $lg-search-details-border-bottom;
      border-left: $lg-search-details-border-left;
      font-weight: $lg-search-details-weight;

      span.count {
        font-family: $lg-search-details-font;
        font-size: 16px;
        color: $lg-search-details-color;
      }

      span.sub {
        font-size: 12px;
        font-family: $lg-search-details-sub-font;
        text-transform: uppercase;
        line-height: 12px;
        color: $lg-search-details-sub-color;
      }
    }
  }

  #search-pagination {
    display: inline-block;
    background: $lg-search-background-color;
    padding: 15px 10px;
    font-family: $lg-search-pagination-font;
    font-size: 18px;
    border-top: $lg-search-item-border-top;
    border-right: $lg-search-item-border-right;
    border-bottom: $lg-search-item-border-bottom;
    border-left: $lg-search-item-border-left;

    .pagination {
      margin: 0px;

      span,
      em,
      a {
        padding: 3px 8px;
        color: $lg-search-pagination-color;
      }

      em {
        font-style: normal;
        background: $lg-search-pagination-on-bg;
        color: $lg-search-pagination-on-color;
      }

      a {
        color: $lg-search-pagination-color;

        &:hover {
          text-decoration: none;
          color: $base-white;
          background-color: $lg-search-pagination-hover-bg;
        }
      }
    }
  }

  #search-result {
    padding: 0px;
  }

  div.search-item {
    background: $lg-search-background-color;
    border-top: $lg-search-item-border-top;
    border-right: $lg-search-item-border-right;
    border-bottom: $lg-search-item-border-bottom;
    border-left: $lg-search-item-border-left;
    padding: $lg-search-item-padding;
    margin: $lg-search-item-margin;
    color: $lg-search-text-color;

    h3.title,
    h3.title a,
    h3.title a:visited {
      max-width: 80%;
      font-size: $lg-search-item-title-size;
      font-family: $lg-search-item-title-font;
      font-weight: $lg-search-item-title-weight;
      line-height: 1.25em;
      margin-top: 0px !important;
      margin-bottom: 5px !important;
      color: $lg-search-item-title-color;
      text-decoration: none;
      word-wrap: break-word;

      &:hover {
        color: $lg-search-item-title-hover-color;
        text-decoration: none;
        background: transparent;
      }
    }

    div.dataset-name {
      margin-top: 5px;
      margin-right: 5px;
      font-size: 14px;
      color: $lg-search-item-dataset-color;
    }

    h4.title-sub {
      font-size: 18px;
      font-family: $lg-search-item-title-font;
      line-height: 21px;
      margin-top: 0px;
      margin-bottom: 5px;
      color: $lg-search-item-title-color;
    }

    .date,
    .date:visited {
      display: inline-block;
      margin-right: 15px;
      margin-bottom: 5px;
      color: $lg-search-item-detail-text-color;
      font-size: 13px;
      font-weight: bold;
      font-family: $font-family-sans-serif;
    }

    div.description,
    div.doc_text {
      margin-bottom: 10px;
      font-size: 14px;
      font-family: $font-family-sans-serif;
      line-height: 16px;
      color: $lg-search-item-text-color;
    }

    h3.title a b.is_highlighted,
    div.description b.is_highlighted,
    div.doc_text b.is_highlighted {
      background: $lg-search-item-highlight-background;
      padding: 2px;
      border-radius: 3px;
      color: $lg-search-item-highlight-color;
    }

    div.pictures {
      margin: 20px 0px;
    }

    img.picture {
      width: 150px;
      margin-right: 15px;
    }

    div.facet {
      float: left;
      margin: 0px 15px 5px 0;
      font-size: 12px;
      font-family: Helvetica, Arial, sans-serif;
      display: inline-block;

      i {
        color: $lg-search-item-facet-icon-color;
      }

      a {
        display: inline-block;
        margin: 0px 0px 0px 5px;
        color: $lg-search-item-facet-color;

        &:hover {
          background: transparent;
          color: $lg-search-item-facet-hover-color;
          text-decoration: none;
        }
      }
    }
  }

/*** Document View ***/

  #maincontent {

    ul.nav > li > a {
      background: $lg-show-tab-background-color;
      color: $lg-show-tab-color;

      i {
        margin-right: 5px;
        font-size: 1.1em;
        vertical-align: middle;
      }
    }

    ul.nav > li.active > a {
      background: $lg-show-tab-active-background-color;
      color: $lg-show-tab-active-color;
    }

    div.tab-content {
      background: $lg-show-background-color;
      border-top: $lg-show-tab-border-top;
      border-right: $lg-show-tab-border-right;
      border-bottom: $lg-show-tab-border-bottom;
      border-left: $lg-show-tab-border-left;
      color: $lg-show-color;
      padding: 20px;

      div.tab-pane {

        a {
          font-weight: $lg-show-link-weight;
          color: $lg-show-link-color;

          &:visited {
            color: $lg-show-link-color;
          }
          &:hover {
            color: $lg-show-link-color-hover;
            text-decoration: none;
          }
        }

        // TODO: this is a hack until a 'title' partial exists
        p.name,
        p.title,
        p.story_title,
        p.brochure_title {
          font-size: $lg-show-title-size;
          font-weight: $lg-show-title-weight;
        }

        strong.label {
          display: block;
          font-size: 12px;
          font-weight: $lg-show-label-weight;
          text-transform: uppercase;
          color: $lg-show-label-color;
        }

        a.related-item {
          margin-bottom: $padding-large-vertical;
          display: block;
          font-size: $lg-show-link-related-size;
          color: $lg-show-link-related-color;

          &:visited {
            color: $lg-show-link-related-color;
          }

          &:hover {
            color: $lg-show-link-related-color-hover;
          }
        }

        ul {
          li {
            margin-bottom: $padding-large-vertical;
          }
        }

      }
    }

    object.show-document {
      width: 100%;
      min-height: 700px;
      border: $lg-show-embed-border;
      background: transparent;
    }

    iframe.show-iframe {
      background: transparent;
      border: $lg-show-embed-border;
    }

    div.show-article-item {
      padding: 25px 0px;
      margin: 0px 0px;
      border-top: $lg-show-article-item-border;

      span.article {
        display: block;
        margin-bottom: 15px;
        font-size: $lg-show-article-text-size;
        font-weight: $lg-show-article-text-weight;
        color: $lg-show-article-color;

        em {
          font-style: normal;
          color: $lg-show-article-number;
        }
      }

      a {
        margin-right: 10px;
      }
    }

    small.version-name {
      display: inline-block;
      background: $lg-show-version-background;
      border: $lg-show-version-border;
      color: $lg-show-version-color;
      padding: 5px 10px;
      margin-bottom: 15px;
    }

    h3.panel-title {
      font-family: $lg-show-panel-title-font;
      font-size: $lg-show-panel-title-size;
    }

  }

/* Static Pages */

  .static-page {
    background: $lg-static-background-color;
    border-top: $lg-static-border-top;
    border-right: $lg-static-border-right;
    border-bottom: $lg-static-border-bottom;
    border-left: $lg-static-item-border-left;
    padding: 10px 25px;
    margin-top: 30px;
    color: $lg-static-color;

    h1 {
      color: $lg-static-title-color;
    }
  }


/*** datetime-picker ***/

