/* a few styles for the default page to make it presentable */
/*            body {
                margin-top: 20px;
            }*/
            .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;
                    border: 1px solid #ddd;
                    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;
            }