/**
 * Visual styles for tabs as featured in various menus.
 * - For the View/Edit/Delete/Revisions tabs on nodes when logged in
 * - For View menus (sermon downloads and preaching program)
 * It is mostly concerned with defining the rounded corner borders, background colours and margins
 * -webkit- : alternative used by Opera (and posibly some other browsers)
 * The first section is from the StarterKit with settings updated as per the Classy version of CCNM
 */

nav.tabs {
  margin-top: 1.5rem;
  border-bottom: 1px solid #bbbbbb;
}
div.tabs {
  margin: 1rem 0;
}
ul.tabs {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.tabs > li {
  display: inline-block;
  margin-right: 0.125rem; /* LTR */
}
[dir="rtl"] .tabs > li {
  margin-left: 0.125rem;
  margin-right: 0;
}
.tabs a {
  display: block;
  padding: 0.125rem 0.75rem;
}
.tabs a.is-active {
  background-color: #eee;
}
.tabs a:focus,
.tabs a:hover {
  background-color: #f5f5f5;
}

/* Primary tabs. */
/* See https://www.w3schools.com/css/css3_gradients.asp for a description of linear gradients */
/* Ideally we would be using linear-gradient - current linear-gradient directive had the wrong syntax */
/* However, there doesn't seem any easy way of replicating what the vendor prefixes do */
/* - it appears that the "transparent 1px" preserves the bottom borders */
.tabs.primary {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0 2px;
  white-space: nowrap;
}

.tabs.primary li,
.tabs.primary li.is-active {
  float: left; 
}
.tabs.primary a {
  border-right: 0;
  border-bottom: 0;
  display: block;
  line-height: 2.5rem;
  text-decoration: none;
}

.tabs.primary li,
.tabs.primary li.is-active {
  text-shadow: 1px 1px 0 white;
  border-bottom: 6px solid white;
  margin: 0 1px;
}
.tabs.primary li:hover {
  border-bottom-color: #f5f5f5;
}
/* Active tab must have a red bottom border (effectively giving the appearance of having no border) */
.tabs.primary li.is-active {
  border-bottom-color: var(--colour-gold);
}

/* Note that some of the following is superseded for the active (selected) tab */
.primary a {
  color: var(--colour-grey-x58);
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}
.primary a.is-active {
  color: var(--colour-text);
}
.primary a:hover,
.primary a:focus {
  color: var(--colour-venetian-red);
}

/* Specific formatting for the active (selected) tab */
.primary a:active,
.primary a.is-active {
  background-color: transparent;
  background-image: -webkit-linear-gradient(#e9e9e9, rgba(233, 233, 233, 0));	
  background-image: linear-gradient(#e9e9e9, rgba(233, 233, 233, 0));			
  border-color: #fff;
}

/* Formatting specific for mobile and tablet (portrait) */
/* Here there is less space for tab menus so we go for tighter padding */
@media all and (max-width: 959px) {

.primary a,
.primary a.is-active {
  padding: 0 0.5rem;
}
	
}

/* Larger screens have more space so padding can be more generous */
@media all and (min-width: 960px) {

.primary a,
.primary a.is-active {
  padding: 0 1rem;
}
	
}