//
// Structure
// Styles for Tabs, Messages, ..etc
// --------------------------------------------------

// Page header
// --------------------------------------------------
.page-header {
  margin: 0 0 18px;
  h1 {
    margin: 0;
  }
}
.page-title-hidden {
  .page-header {
    display: none;
  }
}

// Breadcrumb
// --------------------------------------------------
.breadcrumb {
  a {
    i {
      display: none;
    }
  }
}

// Vertical Tabs
// --------------------------------------------------
div.vertical-tabs {
  border: none;
  border: 1px solid #DDD;
  outline: none;
  @include border-radius(4px);
  ul.vertical-tabs-list {
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
    outline: none;
    li {
      border: none;
      background: none;
      outline: none !important;
      @include border-radius(4px 0 0 4px);
      border: 1px solid;
      border-color: #fff #ddd #fff #fff;
      &.selected {
        border-color: #ddd #fff #ddd #ddd;
      }
      a {
        outline: none !important;
        @include border-radius(4px 0 0 4px);
        &:hover {
          color: $white;
          background: $linkColor;
          text-decoration: none;
          strong {
            text-decoration: none;
            color: $white;
          }
        }
      }
    }
  }
  .vertical-tabs-panes {
    padding: 20px 10px;
  }
  .form-type-textfield input {
    width: 90%;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
}

// Messages
// --------------------------------------------------
div.messages {
  padding: 8px 35px 8px 14px;
  margin: 0 0 18px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  background-image: none;
  border: 1px solid #fbeed5;
  @include border-radius(4px);
  &.status {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
  }
  &.error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
  }
  &.info {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
  }
}

// Tables
// --------------------------------------------------
table {
  width: 100%;
  margin-bottom: $baseLineHeight;
  // Cells
  th,
  td {
    padding: 8px;
    line-height: $baseLineHeight;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid $tableBorder;
    &.checkbox {
      text-align: center;
      input {
        float: none !important;
        margin-left: 0 !important;
      }
    }
  }
  th {
    font-weight: bold;
  }
  // Bottom align for column headings
  thead th {
    vertical-align: bottom;
  }
  // Remove top border from thead by default
  caption + thead tr:first-child th,
  caption + thead tr:first-child td,
  colgroup + thead tr:first-child th,
  colgroup + thead tr:first-child td,
  thead:first-child tr:first-child th,
  thead:first-child tr:first-child td {
    border-top: 0;
  }
  // Account for multiple tbody instances
  tbody + tbody {
    border-top: 2px solid $tableBorder;
  }
}

// Links
// --------------------------------------------------
ul.links {
  &.inline {
    margin: 0;
    li {
      margin: 0 10px 0 0;
      padding: 0;
    }
  }
}

// Slideshow - with Field Slideshow
// --------------------------------------------------
.field-slideshow-wrapper {
  position: relative;
  background-color: #FFFFFF;
  @include border-radius(4px 4px 4px 4px);
  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.055));
  border: 1px solid #DDD;
  padding: 5px;
  > .field-slideshow {
    width: 100% !important;
    padding: 0 !important;
    .field-slideshow-slide {
      width: 100% !important;
      img {
        width: 100% !important;
      }
      .field-slideshow-caption {
        background: rgba(#000000, 0.65);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: $white;
        .field-slideshow-caption-text {
          display: block;
          padding: 20px;
        }
        h1, h2, h3 {
          margin-top: 0;
        }
      }
    }
  }
  .field-slideshow-controls {
    a {
      position: absolute;
      z-index: 500;
      top: 45%;
      left: 15px;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      font-size: 60px;
      font-weight: 100;
      line-height: 30px;
      color: $white;
      text-align: center;
      background: #222222;
      border: 3px solid #ffffff;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      @include border-radius(23px);
      @include opacity(0.5);
      &.next {
        right: 15px;
        left: auto;
      }
      &:hover {
        color: $white;
        text-decoration: none;
        @include opacity(0.9);
      }
    }
  }
  .field-slideshow-pager {
    margin-top: 10px;
    text-align: center;
    position: absolute;
    bottom: 8%;
    right: 20px;
    z-index: 500;
    a {
      background: $gray;
      border: 3px solid #ffffff;
      display: inline-block;
      margin: 0 3px;
      width: 25px;
      height: 25px;
      line-height: 25px;
      color: $white;
      text-decoration: none;
      @include border-radius(25px);
      @include opacity(0.5);
      &:hover {
        color: $white;
        text-decoration: none;
        @include opacity(0.9);
      }
      &.activeSlide {
        background: $linkColor;
        @include opacity(0.9);
      }
    }
  }
}

// Progress
// --------------------------------------------------
.progress {
  margin-bottom: 60px;
  overflow: visible;
  height: 40px;
  font-weight: 400;
  .bar {
    width: 100%;
    margin: 0 0 5px;
    float: none;
    border: none;
    background: none;
    @include border-radius(4px);
    .filled {
      height: 40px;
      @include border-radius(4px);
      @include ctb-gradient-striped($linkColor);
      @include background-size(40px 40px);
      @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
      @include box-sizing(border-box);
      @include transition(width .6s ease);
      -webkit-animation: progress-bar-stripes 2s linear infinite;
         -moz-animation: progress-bar-stripes 2s linear infinite;
          -ms-animation: progress-bar-stripes 2s linear infinite;
           -o-animation: progress-bar-stripes 2s linear infinite;
              animation: progress-bar-stripes 2s linear infinite;
    }
  }
}

// Misc Fixes
// --------------------------------------------------
.ctools-dropdown-container {
  hr {
    margin: 0;
  }
}

ul.nav,
ul.navl li,
ul.dropdown-menu,
ul.dropdown-menu li {
  list-style: none outside none !important;
}