//
// Overrides for uxframework styles during DEVELOPMENT
// (for performance, compile into main stylesheet and 
//  DO NOT use this in production)
//

//== Brand colors
@proquest-olive:            #6F7F35;
@proquest-dark-olive:       #424C23;

//== Variables
@body-bg:                                   #fff;
@gray:                                      #555;
@gray-light:                                #777;
@gray-lighter:                              #eee;
@input-border:                              #ccc;
@navbar-default-toggle-hover-bg:            #ddd;
@nav-tabs-border-color:                     #ddd;
@nav-open-link-hover-color:                 #fff;
@table-border-color:                        #ddd;
@ui-danger:                                 #a01100;
@ui-success:                                #098900;
@ui-primary:                                #2A5DB0;

//== Links
@link-color:                                @ui-primary;

//== Tabs
@nav-tabs-link-color:                       @proquest-dark-olive;
@nav-tabs-link-border-color:                @gray-lighter;
@nav-tabs-link-border-bottom-color:         @nav-tabs-border-color;

@nav-tabs-active-link-focus-bg:             @proquest-dark-olive;
@nav-tabs-active-link-focus-color:          @nav-open-link-hover-color;
@nav-tabs-active-link-focus-border-color:   @proquest-dark-olive;

//== Pills
@nav-pills-border-color:                    @gray-lighter;

//== Pagination
@pagination-active-link-color:              @proquest-dark-olive;

@pagination-active-link-focus-bg:           @proquest-dark-olive;
@pagination-active-link-focus-color:        @nav-open-link-hover-color;
@pagination-active-link-focus-border-color: @proquest-dark-olive;

//== Other
@external-link-color:                       @proquest-dark-olive;
@search-result-highlight-color:             #d8eef9;

// Tabs
// -------------------------
.nav-tabs {
  > li {
    > a {
      margin-right: 0px;
      color: @nav-tabs-link-color;
      border: 1px solid @nav-tabs-link-border-color;
      border-bottom: 1px solid @nav-tabs-link-border-bottom-color;
    }

    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-tabs-active-link-focus-color;
        background-color: @nav-tabs-active-link-focus-bg;
        border: 1px solid @nav-tabs-active-link-focus-border-color;
      }
    }
  }
}

// Pills
// -------------------------
.nav-pills {
  > li {
    > a {
      border: 1px solid @nav-pills-border-color;
    }
  }
}

// Navbars
// -------------------------
.navbar {
  .navbar-collapse {
    .navbar-nav.navbar-below {
      .uxf-icon {
        color: @external-link-color;
      }
    }
  }
}

// Tabbable tabs
// -------------------------
.tab-content {
  border-left: 1px solid @nav-tabs-link-border-bottom-color; 
  border-right: 1px solid @nav-tabs-link-border-bottom-color; 
  padding-top: 10px; 
  padding-left: 30px; 
  padding-right: 30px; 
  overflow: auto; 
  height: 700px;
}

// Grid system
// --------------------------------------------------
.container {
  padding-left: 10%;
  padding-right: 10%;
  min-height: 490px;
  height: auto;
}

// Horizontal forms
.form-horizontal {
  .form-group {
    margin-left: 0px;
    margin-right: 0px;
  }  
}

// Pagination
// -------------------------
.pagination {
  > li {
    > a {
      &,
      &:hover,
      &:focus {
        color: @pagination-active-link-color;
      }
    }

    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @pagination-active-link-focus-color;
        background-color: @pagination-active-link-focus-bg;
        border: 1px solid @pagination-active-link-focus-border-color;
      }
    }
  }
}

.pager {
  > li {
    > a {
      &,
      &:hover,
      &:focus {
        color: @pagination-active-link-color;
      }
    }
  }
}


// Inline forms
// -------------------------
.form-inline {
  .transcript-search {
    width: 500px;
  }
}

// FIXME: move VCS historical styles to uxframework styles

span.highlight, em.highlight {
  font-style: normal;
  background-color: @search-result-highlight-color;
}

a.external-link {
  color: @external-link-color;
}

span.title-header {
  font-family: aleolight; 
  font-size: 22px; 
  color: @gray-light;
}

span.clear-search {
  position: absolute; 
  right: 6px; 
  top: 0; 
  bottom: 0; 
  height: 14px; 
  margin: auto; 
  font-size: 14px; 
  cursor: pointer; 
  color: @input-border;
}

div.search-result {
  font-size: 12px; 
  margin-top: 6px; 
  border-bottom: 1px solid @table-border-color; 
  padding-bottom: 6px;
}

div.search-result-msg {
  font-size: 12px; 
  margin-top: 6px; 
  border-bottom: 0px solid @table-border-color; 
  padding-bottom: 6px;
}

div.blacklist-term-editable {
  display: inline-block; 
  background-color: @body-bg; 
  padding: 6px 6px 6px 0px;

  > span.blacklist-selected {
    color: @ui-danger; 
    text-decoration: line-through;

    > a {
      color: @ui-danger; 
      text-decoration: line-through;
    }
  }

  span.blacklist-deselected {
    color: @ui-success; 
 
    > a {
      color: @link-color; 
    }
  }

  > span {
    display: inline-block; 
    color: @gray; 
    background-color: @navbar-default-toggle-hover-bg; 
    padding: 6px 8px 6px 8px;

    > span {
      display: none;
    }

    > a {
      color: @link-color;

      > span {
        width: 5px; 
        color: @gray-light;
      }
    }
  }
}

div.enrichment-term-editable {
  display: inline-block; 
  background-color: @body-bg; 
  padding: 6px 6px 6px 0px;

  > span.blacklist-selected {
    color: @ui-danger; 
    text-decoration: line-through;

    > a {
      color: @ui-danger; 
      text-decoration: line-through;
    }
  }

  span.blacklist-deselected {
    color: @gray; 
 
    > a {
      color: @link-color; 
    }
  }

  > span {
    display: inline-block; 
    color: @gray; 
    background-color: @navbar-default-toggle-hover-bg; 
    padding: 6px 8px 6px 8px;

    > span {
      display: none;
    }

    > a {
      color: @link-color;

      > span {
        width: 5px; 
        color: @gray-light;
      }
    }
  }
}

div.enrichment-term {
  display: inline-block; 
  white-space: nowrap;
  background-color: @body-bg; 
  padding: 0px;
  margin: 0px;

  > span {
    display: inline-block; 
    white-space: nowrap;
    color: @gray; 
    background-color: @body-bg; 
    padding: 0px;

    > a:last-of-type {
      display: none;
    }
  }
}

div.thumbnail {
  width: 140px; 
  height: 90px; 
  font-size: 60px; 
  text-align: center; 
  padding-top: 10px; 
  color: rgba(0,0,0,0.4); 
  background-color: @proquest-dark-olive;
  background-size: 100% 100%;
}

div.result-row-item {
  width: 190px; 
  height: 180px; 
  margin: 25px; 
  float: left; 
  display: inline-block;
  word-wrap: break-word;
}

div.thumbnail-lg {
  width: 190px; 
  height: 120px; 
  font-size: 60px; 
  text-align: center; 
  padding-top: 25px; 
  color: rgba(0,0,0,0.4); 
  background-color: @proquest-dark-olive;
  background-size: 100% 100%;
}

input.upload-filename {
  border: 0px; 
  background-color: @gray-lighter; 
}

input.disabled, textarea.disabled {
  border: 0px; 
  background-color: @gray-lighter; 
  padding: 5px;
  width: 100%;
}

table.form-group {
  > tbody {
    > tr {
      > td {
        padding-bottom: 20px;
      }
    }
  }
}

a.transcript-deselected, .transcript-deselected-start, .transcript-deselected-end {
  color: @gray; 
  background-color: @body-bg; 
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

a.transcript-selected, .transcript-selected-start, .transcript-selected-end {
  color: @gray; 
  background-color: @search-result-highlight-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

input.no-ie-clear::-ms-clear {
  display: none;
}

input.has-error {
  border: 1px solid @ui-danger; 
}

// NOTE: override bootstrap styling all to border-box
// causing jwplayer thumbnails to go out of their container
#jwplayer div {
  -moz-box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

span.icon-lg {
  font-size: 30px;
  color: @proquest-dark-olive;
}