﻿/*
    The careers section features a different tab solution than profile/rewards/card. 
    In careers, the sub navigation is moved offscreen to the left instead of pushed below the content as in the other sections.
    This is achieved with  js/shared/sb.tab_detail_panel.js.
    The js adds a parent container (#tab_kit_container) and manages classes based on breakpoints to slide the nav offscreen.
      Classes managed by js are 'open', 'container', 'out-of-bounds'
*/
.tab_kit {
  clear: both;
  margin: -1px 0 3em; }

.tab_header {
  overflow: hidden;
  margin: 0 0 1em;
  padding: .25em 6% 0;
  border: 1px solid #d9d9d9;
  border-radius: 5px 5px 0 0;
  background: #eaeaea;
  font-size: 1.6rem;
  line-height: 1.375; }
  .tab_header p {
    margin: 0 0 0.5em;
    text-align: center;
    word-wrap: break-word; }
  .tab_header strong {
    font-weight: normal;
    font-size: 2rem; }
  .tab_header .nickname {
    font-size: 2rem; }
  .tab_header .balance {
    padding: 0 0.2em 0 0; }
  .tab_header .date {
    padding: 0 0 0 0.2em;
    font-size: 1.3rem; }
  .tab_header .divider {
    margin: 0 0.25em;
    color: #6d953e; }

.tab_container {
  overflow: hidden;
  min-height: 350px;
  background: white;
  width: 100%;
  position: relative; }

.tab_aside {
  margin: 13px 1.5% 1em 0;
  padding: 1em 0 0;
  border-top: 1px solid #d9d9d9; }

.tab_list {
  margin: 0 auto;
  max-width: 225px;
  border-radius: 5px;
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05); }
  .tab_list li {
    margin: 0; }
  .tab_list a {
    display: block;
    padding: 0.5em 14px 0.5em 25px;
    border: 1px solid #d9d9d9;
    border-top-color: #f7f7f7;
    color: black;
    line-height: 1.42857;
    /* 20px */
    word-wrap: break-word; }
    .tab_list a:hover,
    .tab_list a:focus,
    .tab_list a:active {
      background: url(/static/images/global/tab_list_arrows.gif) no-repeat 11px -18px; }

.tab_list li:first-child a {
  border-radius: 5px 5px 0 0;
  border-top-color: #d9d9d9; }

.tab_list li:last-child a {
  border-radius: 0 0 5px 5px; }

.tab_list li:first-child:last-child a {
  border-radius: 5px 5px 5px 5px; }

.tab_list .selected a,
.tab_list .selected a:hover,
.tab_list .selected a:focus {
  position: relative;
  border: 1px solid #20760C;
  /* background match default button background */
  background: #5CA61F;
  background-image: -moz-linear-gradient(top, #5CA61F 30%, #1F760C 100%);
  background-image: -ms-linear-gradient(top, #5CA61F 30%, #1F760C 100%);
  background-image: -o-linear-gradient(top, #5CA61F 30%, #1F760C 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #5CA61F), color-stop(100%, #1F760C));
  background-image: -webkit-linear-gradient(top, #5CA61F 30%, #1F760C 100%);
  background-image: linear-gradient(top, #5CA61F 30%, #1F760C 100%);
  color: white; }

.tab_list .selected a:after {
  display: block;
  position: absolute;
  top: 14px;
  left: 11px;
  width: 4px;
  height: 7px;
  background: url(/static/images/global/tab_list_arrows.gif) no-repeat 0 0;
  content: ''; }

.tab_loading {
  display: none; }
  .tab_loading p {
    margin: 4em auto 2em;
    min-height: 100px;
    background: url(/static/images/loading_bar.gif) no-repeat 50% 2em;
    text-align: center; }

.tab_panel h2 {
  margin-bottom: 1em; }

.tab_panel h3 {
  font-weight: bold; }

.tab_panel h4 {
  margin: 0; }

.tab_panel .sub_section {
  padding: 1em 0 0;
  border-top: 1px solid #ededed; }

.tab_panel .highlight {
  padding: 1.5em 20px;
  border: 1px solid #ededed;
  border-radius: 5px;
  background: #f7f7f7; }

.tab_panel ul.highlight {
  padding-bottom: .5em; }

.tab_panel .group {
  overflow: hidden;
  margin: 0 0 2em;
  padding: 0 1.5%;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

.tab_panel .group h3 {
  margin: 0 0 2em -1.5%;
  padding: .25em 1.5%;
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
  background: #d9d9d9;
  background: #fff -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, #dbdbdb 100%);
  background: #fff -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, #dbdbdb 100%);
  background: #fff -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, #dbdbdb 100%);
  background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.01)), color-stop(100%, #dbdbdb));
  background: #fff -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, #dbdbdb 100%);
  background: #fff linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, #dbdbdb 100%);
  font-size: 1.2rem;
  line-height: 1.333333;
  /* 16px */
  text-transform: uppercase; }

.tab_panel .group h3.additional {
  margin-top: 2.5em;
  border-top: 1px solid #d9d9d9;
  border-radius: 0; }

.tab_panel .right_primary h3 {
  border-top: 1px solid #d9d9d9; }

.tab_panel .auxiliary {
  clear: both;
  overflow: hidden;
  margin: 0 0 0 -15px;
  padding: 1em 15px 2em;
  width: 100%;
  background: #f7f7f7; }

.tab_panel .auxiliary .disclaimer {
  margin: 0;
  list-style: none; }

.tab_panel .auxiliary .disclaimer a {
  text-transform: capitalize; }

.tab_panel .group.secure_ui .right_primary {
  margin-left: -1.5%;
  width: 103%; }

#tab_kit_container {
  position: relative;
  direction: rtl;
  overflow: hidden; }

#tab_kit_container .tab_kit {
  direction: ltr;
  position: relative;
  -webkit-transition: left 0.5s;
  transition: left 0.5s; }

#tab_kit_container.out-of-bounds .tab_kit {
  width: 180%; }

#tab_kit_container.out-of-bounds.open .tab_kit {
  left: 80%; }

#tab_kit_container.out-of-bounds .tab_panel {
  width: 55.5555%;
  float: right; }

#tab_kit_container.out-of-bounds .tab_aside {
  width: 44.4444%;
  float: left;
  padding: 0;
  margin: 0; }

#tab_kit_container.out-of-bounds .tab_loading {
  width: 100%; }

#tab_kit_container.out-of-bounds #details-partial {
  width: 94%;
  margin: auto; }

#tab_kit_container.out-of-bounds .tab_loading,
#tab_kit_container.out-of-bounds .tab_panel {
  float: right; }

#tab_kit_container.out-of-bounds .tab_loading p {
  margin: 8em auto 4em;
  width: 300px; }

#tab_select {
  padding: 0.5em 0.5em 0.5em 0.75em;
  background-color: #ededed;
  margin-bottom: 1em; }
  @media (min-width: 768px) {
    #tab_select {
      display: none; } }

#tab_select * {
  margin-left: 0.5em; }

#tab_select .h3 {
  margin-left: 0;
  vertical-align: top;
  line-height: 1.5em;
  display: inline; }

#tab_select.on_top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1; }

.js #tab_select {
  padding-left: 2.5em;
  background-image: url("/static/images/global/arrow_right.png");
  background-repeat: no-repeat;
  background-position: 11px center; }

.js #tab_kit_container.out-of-bounds.open #tab_select {
  background-image: url("/static/images/global/arrow_left.png"); }

#tab_kit_container.out-of-bounds .tab_list {
  max-width: 100%; }

#tab_kit_container.out-of-bounds .tab_list,
#tab_kit_container.out-of-bounds .tab_list .first a,
#tab_kit_container.out-of-bounds .tab_list .last a,
#tab_kit_container.out-of-bounds .tab_list .single a {
  border-radius: 0; }

/* TODO Move to better location */
.js .noscript {
  display: none; }

@media (min-width: 480px) {
  .tab_panel .auxiliary .disclaimer {
    overflow: hidden; }
  .tab_panel .auxiliary .disclaimer li {
    float: left; }
  .tab_panel .auxiliary .disclaimer li.first {
    margin-right: 3%;
    width: 39%; }
  .tab_panel .auxiliary .disclaimer li.last {
    width: 58%; } }

@media (min-width: 600px) {
  .tab_panel .group h3 {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0; }
  .tab_loading,
  .tab_panel {
    overflow: hidden; }
  .tab_panel .left_primary,
  .tab_panel .right_primary {
    float: left;
    margin: 0 0 0 -1px;
    padding: 0 1.5% 1em 0;
    width: 38.5%;
    border: 1px solid #eee;
    border-width: 0 1px 0 0; }
  .group .right_primary {
    padding-right: 0;
    padding-left: 1.5%;
    width: 58.4%;
    border-width: 0 0 0 1px; }
  .tab_panel .left_primary h3 {
    margin-right: -3.6%;
    margin-left: -3.6%;
    padding-right: 3.6%;
    padding-left: 3.6%;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0; }
  .tab_panel .right_primary h3 {
    margin-right: -2.75%;
    margin-left: -2.75%;
    padding-right: 2.75%;
    padding-left: 2.75%;
    border-top: 0;
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0; }
  .tab_panel .group.secure_ui {
    padding-right: 0; }
  .tab_panel .group.secure_ui .right_primary {
    margin-left: -1px;
    padding-right: 0;
    padding-left: 0;
    width: 60%; } }

@media (min-width: 769px) {
  .tab_header {
    margin: 0; }
  .tab_aside {
    float: left;
    padding: 0;
    border: 0;
    width: 23%; }
  .ie7 .tab_aside {
    width: 22%; }
  .tab_loading,
  .tab_panel {
    float: right;
    margin: 16px 0 1em 1.5%;
    width: 74%; }
  .tab_loading p {
    margin: 8em auto 4em;
    width: 300px; } }

@media (min-width: 992px) {
  .tab_panel {
    /*add right margin of 14% to prevent expansion to uncomfortably wide column*/
    margin: 16px 14% 1em 1.5%;
    width: 60%; } }

/*# sourceMappingURL=tab_kit.css.map */