/*
 * Responsive Bootstrap Tabs
 */
 .nav-tabs > li > a {
    color: #0088cc;
}
      .tabbable {
          margin-bottom: 18px;
      }
      .tab-content {
          padding: 15px; 
      }

      /* tab styles for small screen */
      @media (max-width: 767px) {
          .tabbable.responsive .nav-tabs {
              font-size: 16px;
          }
          .tabbable.responsive .nav-tabs ul {
              margin: 0;
          }
          .tabbable.responsive .nav-tabs li {
              /* box-sizing seems like the cleanest way to make sure width includes padding */
              -webkit-box-sizing: border-box;
                 -moz-box-sizing: border-box; 
                  -ms-box-sizing: border-box;
                   -o-box-sizing: border-box;
                      box-sizing: border-box; 
              display: inline-block; 
              width: 100%; 
              height: 44px;
              line-height: 44px; 
              padding: 0 15px;
              border: 1px solid #ddd;
              overflow: hidden;
			      background-color: #337ab7;
          }
.tabbable.responsive .nav-tabs > li.active > a, .tabbable.responsive .nav-tabs > li.active > a:hover, .tabbable.responsive .nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: transparent;
}
          .tabbable.responsive .nav-tabs > li > a {
              border-style: none;
              display: inline-block;
              margin: 0;
              padding: 0;
          }
          /* include hover and active styling for links to override bootstrap defaults */
          .tabbable.responsive .nav-tabs > li > a:hover {
              border-style: none; 
              background-color: transparent;}
          .tabbable.responsive .nav-tabs > li > a:active,
          .tabbable.responsive .nav-tabs > .active > a,
          .tabbable.responsive .nav-tabs > .active > a:hover {
              border-style: none;
          }
      }

      /* sample styles for the tab controls on small screens  - start with left control and override for right */
      .tabbable.responsive .nav-tabs > li > a.tab-control,
      .tabbable.responsive .nav-tabs > li > span.tab-control-spacer {
          float: left;
          width: 36px;
          height: 36px;
          margin-top: 4px;
          font-size: 50px;
          font-weight: 100;
          line-height: 26px;
          color: #fff;
          text-align: center;
          background: #069eed;
          -webkit-border-radius: 18px;
             -moz-border-radius: 18px;
                  border-radius: 18px;
          }
      .tabbable.responsive .nav-tabs > li > a.tab-control.right,
      .tabbable.responsive .nav-tabs > li > span.tab-control-spacer.right {
          float: right;
      }
      .tabbable.responsive .nav-tabs > li > a.tab-control:hover {
          color: #fff;
          background: #004EA2;
      }
      .tabbable.responsive .nav-tabs > li > span.tab-control-spacer {
          line-height: 28px;
          color: transparent;
          background: transparent;
      }