// Override the bottom padding for Most Read/Cited ajax tabs
.most-read-cited ul.panels-ajax-tab li a {
  padding-bottom: 12px;
}

.pane-highwire-panel-tabs ul.panels-ajax-tab li a {
  padding: 15px;
}

// Force the display of ajax tabs to be inline at every screen size
.pane-panels-ajax-tab-tabs .item-list ul.panels-ajax-tab.tabs > li {
  display: inline-block;
  margin: 0 .5em 0 0;
}

// Make sure the content area of ajax tabs has no border and is left aligned
#zone-content .pane-panels-ajax-tab-tabs .pane-content {
  border: none;
  text-align: left;
}

// Removes padding on all ajax tabs LIs (except articles)
.pane-panels-ajax-tab-tabs.most-read-cited .panels-ajax-tab > li,
.panel-region-sidebar-right .pane-panels-ajax-tab-tabs.most-read-cited .panels-ajax-tab > li,
.pane-panels-ajax-tab-tabs.most-read-cited .panels-ajax-tab > li.first,
.panel-region-top-left .pane-panels-ajax-tab-tabs .panels-ajax-tab > li.first,
.pane-panels-ajax-tab-tabs.home-page-highlight-tabs ul li {
  padding: 0;
}

.pane-panels-ajax-tab-tabs.home-page-highlight-tabs,
.pane-panels-ajax-tab-tabs.most-read-cited {
  border-bottom: 1px solid @ajax_tabs_underline;
  padding: none;
}

// Make the most read/cited ajax tabs always span full screen width
.most-read-cited {
  display: table;
  width: 100%;
}

// Make sure ajax tabs don't have text decoration
.pane-panels-ajax-tab-tabs ul.tabs li a:hover {
  text-decoration: none;
}

#region-content .panel-region-content .pane-panels-ajax-tab-tabs .panels-ajax-tab {
  border-width: 0;
  display: table;
}

// Reset mobile styling on homepage ajax tabs
.panel-region-content .bordered-tab .pane-content ul.tabs li a {
  background-color: transparent;
  border: none;
  color: @ajax_tabs_text;
}

// Reset the padding and margin that Jcore applies to active tabs
.panel-region-content .pane-panels-ajax-tab-tabs.bordered-tab .active > .panels-ajax-tab-tab {
  margin: 0;
  padding: 15px;
}

.bordered-tab .pane-content ul.tabs li a {
  font-size: 1.429rem;
  font-weight: normal;
}
// Need to set a transparent bottom border for the tabs to align
.bordered-tab .pane-content ul.tabs li a,
.panel-region-content .bordered-tab .pane-content ul.tabs li a {
  border-bottom: 8px solid transparent;
  border-radius: 0;
}
// Set the active/hover color of ajax tabs
.bordered-tab .pane-content ul.tabs li.active a,
.bordered-tab .pane-content ul.tabs li a:hover {
  border-color: @ajax_tabs_border;
}
// @todo check where the generic .pane-highwire-panel-tabs rule applies
.bordered-tab .pane-content ul li a.active,
.pane-highwire-panel-tabs ul.panels-ajax-tab li.active {
  font-weight: bold;
}

/**
 * Homepage ajax tabs
 */

// Override the homepage tabs font size
.home-page-highlight-tabs .pane-content ul.tabs li a {
  font-size: 1.143rem;
}
// Adds padding to the homepage tab links
#zone-content .pane-panels-ajax-tab-tabs.home-page-highlight-tabs .panels-ajax-tab li a {
  padding: 12px 0;
}
// Add a top margin for mobile view on homepage tabs
.home-page-highlight-tabs .pane-content ul.tabs li {
  margin-top: 10px;
}
// Increase the bottom margin on the homepage ajax tabs
.pane-panels-ajax-tab-tabs.home-page-highlight-tabs {
  margin-bottom: 30px;
}

/**
 * Article level ajax tabs
 */

// Set the article level tabs to block display for mobile (resets later)
#region-content .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs {
  display: block;
}
.panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li {
  display: block;
  width: 100%;
  padding: 0;
  margin: 5px 0 8px 0;
}
.panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li a,
.panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.active a {
  padding: 6px 5px;
  margin: 0;
  display: block;
  width: 98%;
}
.panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.last a,
.panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.last a:hover {
  border-bottom: none;
}

// PDF ajax tab on article pages
#region-content .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul li.last a:hover,
#region-content .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul li.last a {
  border-bottom: none;
  padding: 0;
}

// @todo check that border color is supposed to be different on article pages
.pane-highwire-panel-tabs.article-page-ajax-tab {
  border-bottom: 1px solid #dadada;
}

/**
 * Responsive styling
 */
@media @narrow {
  .bordered-tab .pane-content ul.tabs li a {
    font-size: 1.143rem;
  }

  .article-page-ajax-tab .pane-content ul.tabs li a {
    font-size: 0.9286rem;
  }

  // Changes the padding on homepage ajax tabs
  #zone-content .pane-panels-ajax-tab-tabs.home-page-highlight-tabs .panels-ajax-tab li a {
    padding: 12px 15px;
  }

  // Reset the padding on margin that Jcore applies
  .panel-region-content .pane-panels-ajax-tab-tabs.bordered-tab .active > .panels-ajax-tab-tab {
    margin: 0;
    padding: 15px;
  }

  // Set the ajax tabs display back to normal
  #region-content .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs {
    display: table;
  }
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li {
    display: inline;
  }
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li a,
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.active a {
    display: inline-block;
  }
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li,
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li a,
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.active a {
    width: auto;
  }
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.last a,
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.last:hover a {
    border-bottom: none;
  }
}
@media @normal {
  .bordered-tab .pane-content ul.tabs li a {
    font-size: 1.429rem;
  }
  // Override font size for article page tabs
  .article-page-ajax-tab .pane-content ul.tabs li a {
    font-size: 1.143rem;
  }

  // Changes the padding on homepage ajax tabs
  #zone-content .pane-panels-ajax-tab-tabs.home-page-highlight-tabs .panels-ajax-tab li a {
    padding: 12px 20px;
  }

  // Reset the padding and margin that Jcore applies
  .panel-region-content .pane-panels-ajax-tab-tabs.bordered-tab .active > .panels-ajax-tab-tab {
    margin: 0;
    padding: 15px;
  }

  // Set article tab padding and margin
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li a,
  .panel-region-content .pane-highwire-panel-tabs.article-page-ajax-tab ul.tabs li.active a {
    margin-right: 2px;
    padding: 8px 12px;
  }
}
@media @wide {
  .article-page-ajax-tab .pane-content ul.tabs li a {
    font-size: 1.429rem;
  }

  // Changes the padding on homepage ajax tabs
  #zone-content .pane-panels-ajax-tab-tabs.home-page-highlight-tabs .panels-ajax-tab li a {
    padding: 12px 30px;
  }

  // Reset the padding and margin that Jcore applies
  .panel-region-content .pane-panels-ajax-tab-tabs.bordered-tab .active > .panels-ajax-tab-tab {
    margin: 0;
    padding: 15px;
  }
}


/**
 * Container specific styling
 */

// Removes the inner padding from ajax tabs container for most read/cited
.panel-panel .pane-panels-ajax-tab-tabs + .pane-panels-ajax-tab-container.most-read-cited,
.panel-panel .pane-panels-ajax-tab-tabs + .panel-separator + .pane-panels-ajax-tab-container.most-read-cited {
  margin: 0px;
}