/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/

.blacklight-home_pages-show .edit-button {
  margin-bottom: 2em;
}

.form-actions {
  @extend .clearfix;
}

.primary-actions {
  @extend .pull-right; 
}

#nested-pages {
  margin-bottom: 1em;  
}

.st-title {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: $panel-info-heading-bg;
  padding: 3px 8px;
  color: $panel-info-text;
  font-weight: bold;
}

.st-block__inner:hover {
  .st-title {
    display: block;
  }
}
#sidebar {
  li {
    margin-top: $padding-small-vertical;
  }
  h4 {
    line-height: $line-height-large;
  }
  .contacts-header {
    margin-top: 4 * $padding-large-vertical;
  }
  ol.contacts {
    li {
      margin-bottom: 2 * $padding-large-vertical;
      margin-top: $padding-small-vertical;
      .name {
        font-weight: bold;
      }
    }
  }

  ol.sidenav {
    li {
      color: $gray-darker;
      a {
        &:hover, &:focus {
          @include link-highlighting();
        }
      }
      > h4 {
        font-size: ceil(($font-size-base * 1.05));
        margin-top: 3 * $padding-large-vertical;
        > a {
          color: $text-color;
          display: block;
          font-weight: 400;
        }
      }
    }
    ol.subsection {
      padding-left: 0;
      li {
        list-style: square;
        margin-left: 18px;
        > a {
          display: block;
        }
      }
    }
  }
}

.contacts_admin .name {
  font-size: 16px;
  font-weight: 500;
}

.contact-photo {
    border: 1px solid #CCC;
    float: left;
    margin-right: 15px;
}

.st-block-controls {
  border-radius: 12px;
  border: 3px dotted #999;
}

.st-block-control {
  @extend .btn;

  max-width: 100px;
  word-wrap: break-word;
  white-space: normal;
  color: #666;
  vertical-align: top;

  .icon {

    border: 3px solid #ccc;
    border-radius: 6px;
    width: 70px;
    height: 40px;
    background-size: cover;
    @extend .text-hide;
  }

  .st-icon-multi-up-item-grid {
    @extend .icon;
    background-image: image-url('spotlight/blocks/multi-up-item-grid.png');
  }

  .st-icon-text {
    @extend .icon;
    background-image: image-url('spotlight/blocks/text.png');
  }

  .st-icon-item-text {
    @extend .icon;
    background-image: image-url('spotlight/blocks/item-text.png');
  }

  .st-icon-item-carousel {
    @extend .icon;
    background-image: image-url('spotlight/blocks/item-carousel.png');
  }

  .st-icon-item-features {
    @extend .icon;
    background-image: image-url('spotlight/blocks/item-features.png');
  }
}

.st-block__inner {
  @extend .panel;
  @extend .panel-default;
  &:hover {
    @extend .panel-info;
  }
}

.st-block-ui-btn, .st-block-control-ui-btn {
  
  color: $panel-info-text;
  border-color: $panel-info-heading-bg;
  
  &:hover {
    color: $panel-info-text;
    border-color: $panel-info-heading-bg;
    background-color: $panel-info-heading-bg;
    text-decoration: none;
  }
}

.st-block {
  margin-top: 1.5em;
}

.st-block-controls__top, .st-block--with-plus {

    &:hover {
      &:before, &:after {
      color: #666;
    }
  }
}

.form-group .st-text-block {
  @extend .form-control;
  height: auto;
  min-height: 6em;
}


.item-carousel {
  .carousel {
    background-color: #111;
    text-align: center;
  }

  img {
    margin-left: auto;
    margin-right: auto;
  }
}

.item-features {
  text-align: center;
  .carousel {
    display: inline-block;
    .carousel-inner {
      padding-right: 30px;
      .item {
        float: right;
      }
    }

    .slideshow-indicators {
      text-align: left;
      li {
        border-left: 0;
        border-right: 0;
        color: $text-color;

        &:nth-child(odd) {
          background-color: $table-bg-accent;
        }

        &:hover {
          background-color: $table-bg-hover;
        }

        &.active {
          background-color: $panel-info-heading-bg;
        }

        a {
          text-decoration: none;
          color: inherit;

        }
      }
    }
  }
}

.preview-btn, .preview-exit-btn {
  float: left;
  width: 100px;
}

.avatar-missing {
  display: none;
}