You are here

Home » API reference » AT Tools 8

tabs.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
/**
 * Tabs (local tasks).
 * Tab styles leverage AT's responsive lists JS feature. This sets a class if
 * the list is too wide for it's container. This allows us to dynamically change
 * the design of the tabs menu if they are too wide. We use media queries as a
 * no-js fallback.
 ============================================================================ */
.tabs {
  padding: 0;
  margin: 16px 0;
  margin: 1rem 0;
}
.tabs ul {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  padding: 0;
}
.tabs ul:before, .tabs ul:after {
  content: " ";
  display: table;
}
.tabs ul:after {
  clear: both;
}
.tabs ul.tabs--primary {
  margin-bottom: 0;
}
.tabs .is-vertical ul.tabs--primary {
  border-bottom: 0;
}
.tabs .is-vertical ul.tabs--primary:before, .tabs .is-vertical ul.tabs--primary:after {
  content: " ";
  display: table;
}
.tabs .is-vertical ul.tabs--primary:after {
  clear: both;
}
.tabs .is-vertical ul.tabs--primary li {
  float: none;
  list-style: none;
}
.tabs .is-vertical ul.tabs--primary li:first-child a {
  border-radius: 2px 2px 0 0;
}
.tabs .is-vertical ul.tabs--primary li:last-child a {
  border-radius: 0 0 2px 2px;
}
.tabs .is-vertical ul.tabs--primary li a {
  color: #fcfcfc;
  background-color: #828282;
  opacity: 0.9;
  border: 1px #828282 solid;
  box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  margin-bottom: -1px;
  padding: 7px 16px;
  padding: 0.4375rem 1rem;
  text-align: left;
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  width: auto;
  display: block;
  position: relative;
  transition: all, 225ms, ease-in-out;
}
.tabs .is-vertical ul.tabs--primary li a:link, .tabs .is-vertical ul.tabs--primary li a:visited {
  color: #fcfcfc;
  background-color: #828282;
  border-color: #828282;
}
.tabs .is-vertical ul.tabs--primary li a:hover, .tabs .is-vertical ul.tabs--primary li a:focus, .tabs .is-vertical ul.tabs--primary li a:active, .tabs .is-vertical ul.tabs--primary li a.active {
  color: #fcfcfc;
  background-color: #828282;
  border-color: #828282;
  opacity: 1;
}
.tabs .is-vertical ul.tabs--secondary {
  text-align: left;
}
.tabs .is-vertical ul.tabs--secondary:before, .tabs .is-vertical ul.tabs--secondary:after {
  content: " ";
  display: table;
}
.tabs .is-vertical ul.tabs--secondary:after {
  clear: both;
}
.tabs .is-vertical ul.tabs--secondary li {
  list-style: none;
}
.tabs .is-vertical ul.tabs--secondary a {
  display: inline-block;
  line-height: 1;
  color: #363636;
  border-bottom: 1px solid transparent;
  border-left: 3px solid;
  transition: all, 225ms, ease-in-out;
  padding: 11px 16px 7px 14px;
  padding: 0.6875rem 1rem 0.4375rem 0.875rem;
}
.tabs .is-vertical ul.tabs--secondary a:hover, .tabs .is-vertical ul.tabs--secondary a:focus {
  text-decoration: none;
  color: #363636;
  border-bottom: 1px solid #cccccc;
}
.tabs .is-vertical ul.tabs--secondary a.active, .tabs .is-vertical ul.tabs--secondary a.is-active {
  border-bottom: 1px solid #cccccc;
}
.tabs .is-vertical ul.tabs--secondary a.active:hover, .tabs .is-vertical ul.tabs--secondary a.active:focus, .tabs .is-vertical ul.tabs--secondary a.is-active:hover, .tabs .is-vertical ul.tabs--secondary a.is-active:focus {
  color: #363636;
}
.tabs .is-horizontal ul.tabs--primary {
  border-bottom: 1px solid #cccccc;
}
.tabs .is-horizontal ul.tabs--primary li {
  float: left;
  margin: 0 0 0 0;
  list-style: none;
}
.tabs .is-horizontal ul.tabs--primary li ul,
.tabs .is-horizontal ul.tabs--primary li ol {
  display: none;
}
[dir="rtl"] .tabs .is-horizontal ul.tabs--primary li {
  margin-right: 0;
  margin-left: 0;
}
.tabs .is-horizontal ul.tabs--primary li {
  margin-bottom: -1px;
}
.tabs .is-horizontal ul.tabs--primary li:first-child a {
  border-radius: 2px 0 0 0;
}
.tabs .is-horizontal ul.tabs--primary li:last-child a {
  border-radius: 0 2px 0 0;
}
.tabs .is-horizontal ul.tabs--primary a {
  display: block;
  line-height: 1;
  color: #363636;
  background-color: #f7f7f7;
  border: 1px solid #cccccc;
  padding: 7px 16px;
  padding: 0.4375rem 1rem;
  transition: background-color, .15s, ease-in-out;
  margin-right: -1px;
  box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
}
.tabs .is-horizontal ul.tabs--primary a:hover, .tabs .is-horizontal ul.tabs--primary a:focus {
  color: #363636;
  background-color: #ededed;
  text-decoration: none;
}
.tabs .is-horizontal ul.tabs--primary a.active, .tabs .is-horizontal ul.tabs--primary a.is-active {
  color: #363636;
  background: none;
  border-bottom-color: #f7f7f7;
}
.tabs .is-horizontal ul.tabs--primary a.active:hover, .tabs .is-horizontal ul.tabs--primary a.active:focus, .tabs .is-horizontal ul.tabs--primary a.is-active:hover, .tabs .is-horizontal ul.tabs--primary a.is-active:focus {
  color: #363636;
  background: none;
}
.tabs .is-horizontal ul.tabs--secondary {
  padding: 0;
}
.tabs .is-horizontal ul.tabs--secondary li {
  float: left;
  margin: 0 0 0 0;
  list-style: none;
}
.tabs .is-horizontal ul.tabs--secondary li ul,
.tabs .is-horizontal ul.tabs--secondary li ol {
  display: none;
}
[dir="rtl"] .tabs .is-horizontal ul.tabs--secondary li {
  margin-right: 0;
  margin-left: 0;
}
.tabs .is-horizontal ul.tabs--secondary a {
  display: block;
  line-height: 1;
  color: #363636;
  border-bottom: 1px solid #d9d9d9;
  transition: all, 225ms, ease-in-out;
  padding: 16px 7px 10px;
  padding: 1rem 0.4375rem 0.625rem;
  margin-right: 16px;
  margin-right: 1rem;
}
.tabs .is-horizontal ul.tabs--secondary a:hover, .tabs .is-horizontal ul.tabs--secondary a:focus {
  text-decoration: none;
  color: #363636;
  border-bottom: 1px solid #cccccc;
}
.tabs .is-horizontal ul.tabs--secondary a.active, .tabs .is-horizontal ul.tabs--secondary a.is-active {
  border-bottom: 1px solid #cccccc;
}
.tabs .is-horizontal ul.tabs--secondary a.active:hover, .tabs .is-horizontal ul.tabs--secondary a.active:focus, .tabs .is-horizontal ul.tabs--secondary a.is-active:hover, .tabs .is-horizontal ul.tabs--secondary a.is-active:focus {
  color: #363636;
}
@media all and (max-width: 60em) {
  .no-js .tabs ul.tabs--primary {
    border-bottom: 0;
  }
  .no-js .tabs ul.tabs--primary:before, .no-js .tabs ul.tabs--primary:after {
    content: " ";
    display: table;
  }
  .no-js .tabs ul.tabs--primary:after {
    clear: both;
  }
  .no-js .tabs ul.tabs--primary li {
    float: none;
    list-style: none;
  }
  .no-js .tabs ul.tabs--primary li:first-child a {
    border-radius: 2px 2px 0 0;
  }
  .no-js .tabs ul.tabs--primary li:last-child a {
    border-radius: 0 0 2px 2px;
  }
  .no-js .tabs ul.tabs--primary li a {
    color: #fcfcfc;
    background-color: #828282;
    opacity: 0.9;
    border: 1px #828282 solid;
    box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
    margin-bottom: -1px;
    padding: 7px 16px;
    padding: 0.4375rem 1rem;
    text-align: left;
    text-decoration: none;
    font-weight: 400;
    line-height: 1;
    width: auto;
    display: block;
    position: relative;
    transition: all, 225ms, ease-in-out;
  }
  .no-js .tabs ul.tabs--primary li a:link, .no-js .tabs ul.tabs--primary li a:visited {
    color: #fcfcfc;
    background-color: #828282;
    border-color: #828282;
  }
  .no-js .tabs ul.tabs--primary li a:hover, .no-js .tabs ul.tabs--primary li a:focus, .no-js .tabs ul.tabs--primary li a:active, .no-js .tabs ul.tabs--primary li a.active {
    color: #fcfcfc;
    background-color: #828282;
    border-color: #828282;
    opacity: 1;
  }
  .no-js .tabs ul.tabs--secondary {
    text-align: left;
  }
  .no-js .tabs ul.tabs--secondary:before, .no-js .tabs ul.tabs--secondary:after {
    content: " ";
    display: table;
  }
  .no-js .tabs ul.tabs--secondary:after {
    clear: both;
  }
  .no-js .tabs ul.tabs--secondary li {
    list-style: none;
  }
  .no-js .tabs ul.tabs--secondary a {
    display: inline-block;
    line-height: 1;
    color: #363636;
    border-bottom: 1px solid transparent;
    border-left: 3px solid;
    transition: all, 225ms, ease-in-out;
    padding: 11px 16px 7px 14px;
    padding: 0.6875rem 1rem 0.4375rem 0.875rem;
  }
  .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {
    text-decoration: none;
    color: #363636;
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {
    color: #363636;
  }
}
@media all and (min-width: 60.063em) {
  .no-js .tabs ul.tabs--primary {
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--primary li {
    float: left;
    margin: 0 0 0 0;
    list-style: none;
  }
  .no-js .tabs ul.tabs--primary li ul,
  .no-js .tabs ul.tabs--primary li ol {
    display: none;
  }
  [dir="rtl"] .no-js .tabs ul.tabs--primary li {
    margin-right: 0;
    margin-left: 0;
  }
  .no-js .tabs ul.tabs--primary li {
    margin-bottom: -1px;
  }
  .no-js .tabs ul.tabs--primary li:first-child a {
    border-radius: 2px 0 0 0;
  }
  .no-js .tabs ul.tabs--primary li:last-child a {
    border-radius: 0 2px 0 0;
  }
  .no-js .tabs ul.tabs--primary a {
    display: block;
    line-height: 1;
    color: #363636;
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    padding: 7px 16px;
    padding: 0.4375rem 1rem;
    transition: background-color, .15s, ease-in-out;
    margin-right: -1px;
    box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;
  }
  .no-js .tabs ul.tabs--primary a:hover, .no-js .tabs ul.tabs--primary a:focus {
    color: #363636;
    background-color: #ededed;
    text-decoration: none;
  }
  .no-js .tabs ul.tabs--primary a.active, .no-js .tabs ul.tabs--primary a.is-active {
    color: #363636;
    background: none;
    border-bottom-color: #f7f7f7;
  }
  .no-js .tabs ul.tabs--primary a.active:hover, .no-js .tabs ul.tabs--primary a.active:focus, .no-js .tabs ul.tabs--primary a.is-active:hover, .no-js .tabs ul.tabs--primary a.is-active:focus {
    color: #363636;
    background: none;
  }
  .no-js .tabs ul.tabs--secondary {
    padding: 0;
  }
  .no-js .tabs ul.tabs--secondary li {
    float: left;
    margin: 0 0 0 0;
    list-style: none;
  }
  .no-js .tabs ul.tabs--secondary li ul,
  .no-js .tabs ul.tabs--secondary li ol {
    display: none;
  }
  [dir="rtl"] .no-js .tabs ul.tabs--secondary li {
    margin-right: 0;
    margin-left: 0;
  }
  .no-js .tabs ul.tabs--secondary a {
    display: block;
    line-height: 1;
    color: #363636;
    border-bottom: 1px solid #d9d9d9;
    transition: all, 225ms, ease-in-out;
    padding: 16px 7px 10px;
    padding: 1rem 0.4375rem 0.625rem;
    margin-right: 16px;
    margin-right: 1rem;
  }
  .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {
    text-decoration: none;
    color: #363636;
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {
    border-bottom: 1px solid #cccccc;
  }
  .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {
    color: #363636;
  }
}

/*# sourceMappingURL=maps/tabs.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/tabs.css
View source 
  1. /**

  2.  * Tabs (local tasks).

  3.  * Tab styles leverage AT's responsive lists JS feature. This sets a class if

  4.  * the list is too wide for it's container. This allows us to dynamically change

  5.  * the design of the tabs menu if they are too wide. We use media queries as a

  6.  * no-js fallback.

  7.  ============================================================================ */

  8. .tabs {

  9.   padding: 0;

  10.   margin: 16px 0;

  11.   margin: 1rem 0;

  12. }

  13. .tabs ul {

  14.   margin-bottom: 16px;

  15.   margin-bottom: 1rem;

  16.   padding: 0;

  17. }

  18. .tabs ul:before, .tabs ul:after {

  19.   content: " ";

  20.   display: table;

  21. }

  22. .tabs ul:after {

  23.   clear: both;

  24. }

  25. .tabs ul.tabs--primary {

  26.   margin-bottom: 0;

  27. }

  28. .tabs .is-vertical ul.tabs--primary {

  29.   border-bottom: 0;

  30. }

  31. .tabs .is-vertical ul.tabs--primary:before, .tabs .is-vertical ul.tabs--primary:after {

  32.   content: " ";

  33.   display: table;

  34. }

  35. .tabs .is-vertical ul.tabs--primary:after {

  36.   clear: both;

  37. }

  38. .tabs .is-vertical ul.tabs--primary li {

  39.   float: none;

  40.   list-style: none;

  41. }

  42. .tabs .is-vertical ul.tabs--primary li:first-child a {

  43.   border-radius: 2px 2px 0 0;

  44. }

  45. .tabs .is-vertical ul.tabs--primary li:last-child a {

  46.   border-radius: 0 0 2px 2px;

  47. }

  48. .tabs .is-vertical ul.tabs--primary li a {

  49.   color: #fcfcfc;

  50.   background-color: #828282;

  51.   opacity: 0.9;

  52.   border: 1px #828282 solid;

  53.   box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  54.   margin-bottom: -1px;

  55.   padding: 7px 16px;

  56.   padding: 0.4375rem 1rem;

  57.   text-align: left;

  58.   text-decoration: none;

  59.   font-weight: 400;

  60.   line-height: 1;

  61.   width: auto;

  62.   display: block;

  63.   position: relative;

  64.   transition: all, 225ms, ease-in-out;

  65. }

  66. .tabs .is-vertical ul.tabs--primary li a:link, .tabs .is-vertical ul.tabs--primary li a:visited {

  67.   color: #fcfcfc;

  68.   background-color: #828282;

  69.   border-color: #828282;

  70. }

  71. .tabs .is-vertical ul.tabs--primary li a:hover, .tabs .is-vertical ul.tabs--primary li a:focus, .tabs .is-vertical ul.tabs--primary li a:active, .tabs .is-vertical ul.tabs--primary li a.active {

  72.   color: #fcfcfc;

  73.   background-color: #828282;

  74.   border-color: #828282;

  75.   opacity: 1;

  76. }

  77. .tabs .is-vertical ul.tabs--secondary {

  78.   text-align: left;

  79. }

  80. .tabs .is-vertical ul.tabs--secondary:before, .tabs .is-vertical ul.tabs--secondary:after {

  81.   content: " ";

  82.   display: table;

  83. }

  84. .tabs .is-vertical ul.tabs--secondary:after {

  85.   clear: both;

  86. }

  87. .tabs .is-vertical ul.tabs--secondary li {

  88.   list-style: none;

  89. }

  90. .tabs .is-vertical ul.tabs--secondary a {

  91.   display: inline-block;

  92.   line-height: 1;

  93.   color: #363636;

  94.   border-bottom: 1px solid transparent;

  95.   border-left: 3px solid;

  96.   transition: all, 225ms, ease-in-out;

  97.   padding: 11px 16px 7px 14px;

  98.   padding: 0.6875rem 1rem 0.4375rem 0.875rem;

  99. }

  100. .tabs .is-vertical ul.tabs--secondary a:hover, .tabs .is-vertical ul.tabs--secondary a:focus {

  101.   text-decoration: none;

  102.   color: #363636;

  103.   border-bottom: 1px solid #cccccc;

  104. }

  105. .tabs .is-vertical ul.tabs--secondary a.active, .tabs .is-vertical ul.tabs--secondary a.is-active {

  106.   border-bottom: 1px solid #cccccc;

  107. }

  108. .tabs .is-vertical ul.tabs--secondary a.active:hover, .tabs .is-vertical ul.tabs--secondary a.active:focus, .tabs .is-vertical ul.tabs--secondary a.is-active:hover, .tabs .is-vertical ul.tabs--secondary a.is-active:focus {

  109.   color: #363636;

  110. }

  111. .tabs .is-horizontal ul.tabs--primary {

  112.   border-bottom: 1px solid #cccccc;

  113. }

  114. .tabs .is-horizontal ul.tabs--primary li {

  115.   float: left;

  116.   margin: 0 0 0 0;

  117.   list-style: none;

  118. }

  119. .tabs .is-horizontal ul.tabs--primary li ul,

  120. .tabs .is-horizontal ul.tabs--primary li ol {

  121.   display: none;

  122. }

  123. [dir="rtl"] .tabs .is-horizontal ul.tabs--primary li {

  124.   margin-right: 0;

  125.   margin-left: 0;

  126. }

  127. .tabs .is-horizontal ul.tabs--primary li {

  128.   margin-bottom: -1px;

  129. }

  130. .tabs .is-horizontal ul.tabs--primary li:first-child a {

  131.   border-radius: 2px 0 0 0;

  132. }

  133. .tabs .is-horizontal ul.tabs--primary li:last-child a {

  134.   border-radius: 0 2px 0 0;

  135. }

  136. .tabs .is-horizontal ul.tabs--primary a {

  137.   display: block;

  138.   line-height: 1;

  139.   color: #363636;

  140.   background-color: #f7f7f7;

  141.   border: 1px solid #cccccc;

  142.   padding: 7px 16px;

  143.   padding: 0.4375rem 1rem;

  144.   transition: background-color, .15s, ease-in-out;

  145.   margin-right: -1px;

  146.   box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  147. }

  148. .tabs .is-horizontal ul.tabs--primary a:hover, .tabs .is-horizontal ul.tabs--primary a:focus {

  149.   color: #363636;

  150.   background-color: #ededed;

  151.   text-decoration: none;

  152. }

  153. .tabs .is-horizontal ul.tabs--primary a.active, .tabs .is-horizontal ul.tabs--primary a.is-active {

  154.   color: #363636;

  155.   background: none;

  156.   border-bottom-color: #f7f7f7;

  157. }

  158. .tabs .is-horizontal ul.tabs--primary a.active:hover, .tabs .is-horizontal ul.tabs--primary a.active:focus, .tabs .is-horizontal ul.tabs--primary a.is-active:hover, .tabs .is-horizontal ul.tabs--primary a.is-active:focus {

  159.   color: #363636;

  160.   background: none;

  161. }

  162. .tabs .is-horizontal ul.tabs--secondary {

  163.   padding: 0;

  164. }

  165. .tabs .is-horizontal ul.tabs--secondary li {

  166.   float: left;

  167.   margin: 0 0 0 0;

  168.   list-style: none;

  169. }

  170. .tabs .is-horizontal ul.tabs--secondary li ul,

  171. .tabs .is-horizontal ul.tabs--secondary li ol {

  172.   display: none;

  173. }

  174. [dir="rtl"] .tabs .is-horizontal ul.tabs--secondary li {

  175.   margin-right: 0;

  176.   margin-left: 0;

  177. }

  178. .tabs .is-horizontal ul.tabs--secondary a {

  179.   display: block;

  180.   line-height: 1;

  181.   color: #363636;

  182.   border-bottom: 1px solid #d9d9d9;

  183.   transition: all, 225ms, ease-in-out;

  184.   padding: 16px 7px 10px;

  185.   padding: 1rem 0.4375rem 0.625rem;

  186.   margin-right: 16px;

  187.   margin-right: 1rem;

  188. }

  189. .tabs .is-horizontal ul.tabs--secondary a:hover, .tabs .is-horizontal ul.tabs--secondary a:focus {

  190.   text-decoration: none;

  191.   color: #363636;

  192.   border-bottom: 1px solid #cccccc;

  193. }

  194. .tabs .is-horizontal ul.tabs--secondary a.active, .tabs .is-horizontal ul.tabs--secondary a.is-active {

  195.   border-bottom: 1px solid #cccccc;

  196. }

  197. .tabs .is-horizontal ul.tabs--secondary a.active:hover, .tabs .is-horizontal ul.tabs--secondary a.active:focus, .tabs .is-horizontal ul.tabs--secondary a.is-active:hover, .tabs .is-horizontal ul.tabs--secondary a.is-active:focus {

  198.   color: #363636;

  199. }

  200. @media all and (max-width: 60em) {

  201.   .no-js .tabs ul.tabs--primary {

  202.     border-bottom: 0;

  203.   }

  204.   .no-js .tabs ul.tabs--primary:before, .no-js .tabs ul.tabs--primary:after {

  205.     content: " ";

  206.     display: table;

  207.   }

  208.   .no-js .tabs ul.tabs--primary:after {

  209.     clear: both;

  210.   }

  211.   .no-js .tabs ul.tabs--primary li {

  212.     float: none;

  213.     list-style: none;

  214.   }

  215.   .no-js .tabs ul.tabs--primary li:first-child a {

  216.     border-radius: 2px 2px 0 0;

  217.   }

  218.   .no-js .tabs ul.tabs--primary li:last-child a {

  219.     border-radius: 0 0 2px 2px;

  220.   }

  221.   .no-js .tabs ul.tabs--primary li a {

  222.     color: #fcfcfc;

  223.     background-color: #828282;

  224.     opacity: 0.9;

  225.     border: 1px #828282 solid;

  226.     box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  227.     margin-bottom: -1px;

  228.     padding: 7px 16px;

  229.     padding: 0.4375rem 1rem;

  230.     text-align: left;

  231.     text-decoration: none;

  232.     font-weight: 400;

  233.     line-height: 1;

  234.     width: auto;

  235.     display: block;

  236.     position: relative;

  237.     transition: all, 225ms, ease-in-out;

  238.   }

  239.   .no-js .tabs ul.tabs--primary li a:link, .no-js .tabs ul.tabs--primary li a:visited {

  240.     color: #fcfcfc;

  241.     background-color: #828282;

  242.     border-color: #828282;

  243.   }

  244.   .no-js .tabs ul.tabs--primary li a:hover, .no-js .tabs ul.tabs--primary li a:focus, .no-js .tabs ul.tabs--primary li a:active, .no-js .tabs ul.tabs--primary li a.active {

  245.     color: #fcfcfc;

  246.     background-color: #828282;

  247.     border-color: #828282;

  248.     opacity: 1;

  249.   }

  250.   .no-js .tabs ul.tabs--secondary {

  251.     text-align: left;

  252.   }

  253.   .no-js .tabs ul.tabs--secondary:before, .no-js .tabs ul.tabs--secondary:after {

  254.     content: " ";

  255.     display: table;

  256.   }

  257.   .no-js .tabs ul.tabs--secondary:after {

  258.     clear: both;

  259.   }

  260.   .no-js .tabs ul.tabs--secondary li {

  261.     list-style: none;

  262.   }

  263.   .no-js .tabs ul.tabs--secondary a {

  264.     display: inline-block;

  265.     line-height: 1;

  266.     color: #363636;

  267.     border-bottom: 1px solid transparent;

  268.     border-left: 3px solid;

  269.     transition: all, 225ms, ease-in-out;

  270.     padding: 11px 16px 7px 14px;

  271.     padding: 0.6875rem 1rem 0.4375rem 0.875rem;

  272.   }

  273.   .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {

  274.     text-decoration: none;

  275.     color: #363636;

  276.     border-bottom: 1px solid #cccccc;

  277.   }

  278.   .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {

  279.     border-bottom: 1px solid #cccccc;

  280.   }

  281.   .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {

  282.     color: #363636;

  283.   }

  284. }

  285. @media all and (min-width: 60.063em) {

  286.   .no-js .tabs ul.tabs--primary {

  287.     border-bottom: 1px solid #cccccc;

  288.   }

  289.   .no-js .tabs ul.tabs--primary li {

  290.     float: left;

  291.     margin: 0 0 0 0;

  292.     list-style: none;

  293.   }

  294.   .no-js .tabs ul.tabs--primary li ul,

  295.   .no-js .tabs ul.tabs--primary li ol {

  296.     display: none;

  297.   }

  298.   [dir="rtl"] .no-js .tabs ul.tabs--primary li {

  299.     margin-right: 0;

  300.     margin-left: 0;

  301.   }

  302.   .no-js .tabs ul.tabs--primary li {

  303.     margin-bottom: -1px;

  304.   }

  305.   .no-js .tabs ul.tabs--primary li:first-child a {

  306.     border-radius: 2px 0 0 0;

  307.   }

  308.   .no-js .tabs ul.tabs--primary li:last-child a {

  309.     border-radius: 0 2px 0 0;

  310.   }

  311.   .no-js .tabs ul.tabs--primary a {

  312.     display: block;

  313.     line-height: 1;

  314.     color: #363636;

  315.     background-color: #f7f7f7;

  316.     border: 1px solid #cccccc;

  317.     padding: 7px 16px;

  318.     padding: 0.4375rem 1rem;

  319.     transition: background-color, .15s, ease-in-out;

  320.     margin-right: -1px;

  321.     box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0 inset;

  322.   }

  323.   .no-js .tabs ul.tabs--primary a:hover, .no-js .tabs ul.tabs--primary a:focus {

  324.     color: #363636;

  325.     background-color: #ededed;

  326.     text-decoration: none;

  327.   }

  328.   .no-js .tabs ul.tabs--primary a.active, .no-js .tabs ul.tabs--primary a.is-active {

  329.     color: #363636;

  330.     background: none;

  331.     border-bottom-color: #f7f7f7;

  332.   }

  333.   .no-js .tabs ul.tabs--primary a.active:hover, .no-js .tabs ul.tabs--primary a.active:focus, .no-js .tabs ul.tabs--primary a.is-active:hover, .no-js .tabs ul.tabs--primary a.is-active:focus {

  334.     color: #363636;

  335.     background: none;

  336.   }

  337.   .no-js .tabs ul.tabs--secondary {

  338.     padding: 0;

  339.   }

  340.   .no-js .tabs ul.tabs--secondary li {

  341.     float: left;

  342.     margin: 0 0 0 0;

  343.     list-style: none;

  344.   }

  345.   .no-js .tabs ul.tabs--secondary li ul,

  346.   .no-js .tabs ul.tabs--secondary li ol {

  347.     display: none;

  348.   }

  349.   [dir="rtl"] .no-js .tabs ul.tabs--secondary li {

  350.     margin-right: 0;

  351.     margin-left: 0;

  352.   }

  353.   .no-js .tabs ul.tabs--secondary a {

  354.     display: block;

  355.     line-height: 1;

  356.     color: #363636;

  357.     border-bottom: 1px solid #d9d9d9;

  358.     transition: all, 225ms, ease-in-out;

  359.     padding: 16px 7px 10px;

  360.     padding: 1rem 0.4375rem 0.625rem;

  361.     margin-right: 16px;

  362.     margin-right: 1rem;

  363.   }

  364.   .no-js .tabs ul.tabs--secondary a:hover, .no-js .tabs ul.tabs--secondary a:focus {

  365.     text-decoration: none;

  366.     color: #363636;

  367.     border-bottom: 1px solid #cccccc;

  368.   }

  369.   .no-js .tabs ul.tabs--secondary a.active, .no-js .tabs ul.tabs--secondary a.is-active {

  370.     border-bottom: 1px solid #cccccc;

  371.   }

  372.   .no-js .tabs ul.tabs--secondary a.active:hover, .no-js .tabs ul.tabs--secondary a.active:focus, .no-js .tabs ul.tabs--secondary a.is-active:hover, .no-js .tabs ul.tabs--secondary a.is-active:focus {

  373.     color: #363636;

  374.   }

  375. }

  376. 

  377. /*# sourceMappingURL=maps/tabs.css.map */