/* a few styles for the default page to make it presentable */
     
      .tabbable {
          margin-bottom: 18px;
      }
      .tab-content {
          padding: 15px; 
          border-bottom: 1px solid #ddd;
      }

      /* tab styles for small screen */
      @media (max-width: 767px) {
          body {
              padding: 0;
          }
          .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;
              overflow: hidden;
          }
          .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: 56px;
          font-weight: 100;
          line-height: 26px;
          color: #fff;
          text-align: center;
          background: #444;
          -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: #444;
      }
      .tabbable.responsive .nav-tabs > li > span.tab-control-spacer {
          line-height: 28px;
          color: transparent;
          background: transparent;
      }