.umlaut-main, .umlaut-sidebar {
  ul {
    margin-left: 0;
    list-style: none;
  }
}

// Main section styles
.umlaut-main {  
  padding-right: 10px + ($umlautContainerPadding * 2);
}

.response_list {
  padding-left: 0;

  .response_item  {
    margin-bottom: ($line-height-computed / 2);
    // Try to make line wrap respect space for icon/indent. 
    padding-left: $umlautIndent;
    text-indent: -$umlautIndent;
  }
  // default bold response link if it's in the main section
  .umlaut-main & .response_link {
    font-weight: bold;
  }
}

.umlaut-section {
  margin: 0 0 ($line-height-computed * 1.5) 0;  
  .section_heading h3 {
    /* semantically an h3, but make it sized an h4 */
    @extend h4;
    /* bold for consistency with previous bootstrap2 umlaut, we like it better */
    font-weight: bold;
    margin-top: 0;    
  }
  .section-subheading {
    @extend .text-muted;
  }

  /* In the sidebar, search_inside heading looks better without
     bottom margin, cause of spacing needed for form, it just does. */
  .umlaut-sidebar &.search_inside {
    .section_heading h3 {
      margin-bottom: 0;
    }
  }

  // Special looks for particular sections
  &.fulltext, .page-icons {
    @include iconed-response;
    .response_item i {
      @extend .umlaut_icons-famfamfam-page-text;
    }
  }

  &.audio, .sound-icons {
    @include iconed-response;
    .response_item i {
      @extend .umlaut_icons-famfamfam-page-sound;
    }
  }

  &.excerpts, .book-open-icons {
    @include iconed-response;
    .response_item i {
      @extend .umlaut_icons-famfamfam-book-open;
    }
  }

  &.coins {
    border: none;
  }

  &.document_delivery, .book-go-icons {
    @include iconed-response;
    .response_item i {
      @extend .umlaut_icons-famfamfam-book-go;
    }
  }

  .response_item 

  &.related_items {
    // Margin between the 'cited by' and 'similar' lists
    .response_list + .response_list {
      margin-top: $line-height-computed * 1.5;
    }

  }

  &.holding, &.book-icons {
    .response_item i {
      @extend .umlaut_icons-famfamfam-book;
    }
    .umlaut-holdings {
      .row {
        margin-left: 0;
        margin-right: 0;
      }

      .umlaut-holding {
        margin-bottom: $umlautIndent;
      }
      .collection-str {
        font-weight: bold;
        //leave room for book icon
        padding-left: $umlautIndent;
        text-indent: -$umlautIndent;
      }
      .umlaut-holding-notes {
        @extend .text-muted;
      }
      .umlaut-holding-match-reliability, .umlaut-holding-notes, .umlaut-holding-coverage {
        margin: ($line-height-computed / 3) 0 ($line-height-computed / 3) $umlautIndent;        
      }
      .item_status_row {
        min-height: 0;
      }  
      .collection-str, .call-number, .holding-status, .holding-actions {
        margin-left: 0;        
        min-height: 0;        
      }
      .call-number, .holding-status, .holding-actions {        
        padding-left: $umlautIndent;        
      }    
    }



  }

  &.search_inside {
    .input-group .input-group-addon {
      // can't figure out if this is a bug in bootstrap or what
      height: auto;    
    }
    select.id {
      border-radius: 0 $input-border-radius $input-border-radius 0;
    }
  }
}

.umlaut-section-highlighted {
  @include umlaut-well($umlautHighlightedSectionBackgroundColor, $umlautHighlightedSectionBorderColor);
  border-radius: $umlautBorderRadiusExtraLarge;

  // If a p.alert is in a highlighted section, give it special styling
  // as a ribbon, not a box-in-box. 
  .alert {
    margin-left: -12px;
    margin-right: -12px;

    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  // If it's the LAST thing in the highlighted section, do better and merge
  // it with the box itself
  .umlaut_section_content > .alert:last-child {
    margin-bottom: -12px;
    border-bottom-right-radius: $umlautBorderRadiusExtraLarge;
    border-bottom-left-radius: $umlautBorderRadiusExtraLarge;
  }
  .umlaut_section_content > hr {
    border-color: $umlautHighlightedSectionBorderColor;
    margin-left: -12px;
    margin-right: -12px;
  }

}



.section_prompt {
  @extend .text-muted;
}

// extra block-level elements inside a response_item
// need to turn off the text-indent that inherits, don't actually
// need any indent. 
%indented-subitem {
  text-indent: 0;
  margin: ($line-height-computed / 6) 0;
}

.umlaut-content-indent {
  @extend %indented-subitem;
}

.edition_warning, .response_source, .response_coverage_statement, .response_notes {
  @extend %indented-subitem;
  @extend .text-muted;
}

.response_notes {
  @extend %indented-subitem;
}

.debug_info {
  @extend %indented-subitem;
  @include umlaut-well($umlautDebugInfoBackgroundColor, $umlautDebugInfoBorderColor);
}

.umlaut-sidebar {
  margin-top: $umlautIndent;
  padding: $umlautIndent;

  border:  1px solid $umlautSidebarBorderColor;    
  border-radius: $umlautBorderRadiusExtraLarge;

  background-color: $umlautSidebarBackgroundColor;

  .help-text-icon {
    height: 100%;

    font-size: $line-height-computed * 1.85;
    line-height: 20px;
    font-weight: bold;
    float: right;
    clear: right;

    margin-left: $umlautIndent;
    padding: $line-height-computed * 0.5;
    

    background-color: $umlautHighlightedSectionBackgroundColor;
    border: 1px solid $umlautHighlightedSectionBorderColor;    

    border-radius: ($line-height-computed * 2);    
  }
  .umlaut-section.help {
    @include clearfix();    
  }
}

.umlaut-resource-info {
  display: table;
  width: 100%;
  @include clearfix(); 
  padding: $umlautIndent 0 0 0;
  margin-bottom: $umlautIndent;


  .resource_info_sections, .umlaut-section.cover_image {
    display:        table-cell;
    vertical-align: top;
    margin: $line-height-computed;
    width: 100%;
  }

  .umlaut-section.cover_image .umlaut_section_content {
    text-align: right;
    img.cover_image {
      border: 1px solid $umlautHighlightedSectionBorderColor;
      margin-left: $umlautIndent;

      // IE7 and below, hide cover image entirely, since
      // we dont' have display:table to do it right. Use IE7 asterisk trick
      *display: none;

      // override to make cover smaller on smaller screens
      @media (max-width: 550px) {
        max-width:  100px !important;
        max-height: 80px !important;
      }
      // and disappear on really small ones
      @media (max-width: 340px) {
        display: none;
      }
    }
  }

  /* citation render styles */



  .resource-type {    
    @extend .text-muted;
    margin: 0;    
  }
  h2.title {  
    margin-top: 0;
    @extend h4;
    line-height: $line-height-computed * 1.1;
    font-weight: normal;    
  }
  
  .container-title {
    font-style: italic;
  }

  dl.citation-info {
    /* based on dl-horizontal, but tweaked.  */
    @include clearfix();   
    @extend .text-muted; // subsidiary stuff, mute it
    margin-top: 10px;
    margin-bottom: 10px;     
    dt {      
      float: left;
      clear: left;
      font-weight: normal;
      @include text-overflow();        
      width: ($umlautIndent * 5) - 20;
      @media (max-width: 400px) {
        float: none;
        clear: none;
        width: auto;
        text-align: left;
      }
    }
    dd {
      margin-left: ($umlautIndent * 5);
      @media (max-width: 400px) {
        margin-left: 0;
      }
    }
  }

}

.umlaut-available {
  color: $umlautAvailableColor;
  font-size: $font-size-base;
}

.umlaut-unavailable {
  color: $umlautUnavailableColor;
  font-size: $font-size-base;
}


a:not(:hover) .coverage_summary {
  /* even though it's part of a hyperlink, we make it black for distinction */
  color: black; 
}

@media (max-width: $screen-sm-min) {
  /* hacky taking account of bootstrap3, without a major refactor
    of our css for it */
  .umlaut-main-container-fluid .row {
    margin-left: 0;
    margin-right: 0;
  }
  .umlaut-sidebar-container {
    padding-left: 0;
    padding-right: 0;
  }

  .umlaut-main {
    padding: 0;
  }
  .umlaut-sidebar {    
    padding: 0;

    background-color: $umlautMainBackgroundColor;
    border: none;
    padding-top: 10px;

    .umlaut-section {
      margin-left: 0;
      padding-left: 0;
    }

    .umlaut-help-list {
      text-align: left;
    }
  }
}