.content-tabs { position: relative; height: 42px; background: #fafafa; line-height: 40px; } .content-tabs .roll-nav, .page-tabs-list { position: absolute; width: 40px; height: 40px; text-align: center; color: #999; z-index: 2; top: 0; } .content-tabs .roll-left { left: 0; border-right: solid 1px #eee; } .content-tabs .roll-right { right: 0; border-left: solid 1px #eee; } .content-tabs button { background: #fff; border: 0; height: 40px; width: 40px; outline: none; } .content-tabs button:hover { background: #fafafa; } nav.page-tabs { margin-left: 40px; height: 40px; overflow: hidden; } nav.page-tabs .page-tabs-content { float: left; } .page-tabs a { display: block; float: left; border-right: solid 1px #eee; padding: 0 15px; } .page-tabs a i:hover { color: #c00; } .page-tabs a:hover, .content-tabs .roll-nav:hover { color: #777; background: #f2f2f2; cursor: pointer; } .page-tabs a { color: #999; } .page-tabs a i { color: #ccc; } .page-tabs a.active { background: rgb(111, 179, 224); color: #eee; } .roll-right.J_tabRight { right: 140px; } .roll-right.btn-group { right: 60px; width: 80px; padding: 0; } .roll-right.btn-group button { width: 80px; } .roll-right.J_tabExit { background: #fff; height: 40px; width: 60px; outline: none; } .dropdown-menu-right { left: auto; } html, body { height: 100%; } body.full-height-layout #wrapper, body.full-height-layout #page-wrapper { height: 100%; } #page-wrapper { min-height: auto; } .main-container{ height:80%; height: calc(100% - 120px); height:-moz-calc(100% - 120px); height:-webkit-calc(100% - 105px); } .main-content-inner, .main-content{ height:100%; } #content-main { height: calc(100% - 40px); } .fixed-nav #content-main { height: calc(100% - 40px); overflow: hidden; } /* Tabs */ .tabs-container .panel-body { background: #fff; border: 1px solid #e7eaec; border-radius: 2px; padding: 20px; position: relative; } .tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:hover, .tabs-container .nav-tabs > li.active > a:focus { border: 1px solid #e7eaec; border-bottom-color: transparent; background-color: #fff; } .tabs-container .nav-tabs > li { float: left; margin-bottom: -1px; } .tabs-container .tab-pane .panel-body { border-top: none; } .tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:hover, .tabs-container .nav-tabs > li.active > a:focus { border: 1px solid #e7eaec; border-bottom-color: transparent; } .tabs-container .nav-tabs { border-bottom: 1px solid #e7eaec; } .tabs-container .tab-pane .panel-body { border-top: none; } .tabs-container .tabs-left .tab-pane .panel-body, .tabs-container .tabs-right .tab-pane .panel-body { border-top: 1px solid #e7eaec; } .tabs-container .nav-tabs > li a:hover { background: transparent; border-color: transparent; } .tabs-container .tabs-below > .nav-tabs, .tabs-container .tabs-right > .nav-tabs, .tabs-container .tabs-left > .nav-tabs { border-bottom: 0; } .tabs-container .tabs-left .panel-body { position: static; } .tabs-container .tabs-left > .nav-tabs, .tabs-container .tabs-right > .nav-tabs { width: 20%; } .tabs-container .tabs-left .panel-body { width: 80%; margin-left: 20%; } .tabs-container .tabs-right .panel-body { width: 80%; margin-right: 20%; } .tabs-container .tab-content > .tab-pane, .tabs-container .pill-content > .pill-pane { display: none; } .tabs-container .tab-content > .active, .tabs-container .pill-content > .active { display: block; } .tabs-container .tabs-below > .nav-tabs { border-top: 1px solid #e7eaec; } .tabs-container .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-container .tabs-below > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .tabs-container .tabs-below > .nav-tabs > li > a:hover, .tabs-container .tabs-below > .nav-tabs > li > a:focus { border-top-color: #e7eaec; border-bottom-color: transparent; } .tabs-container .tabs-left > .nav-tabs > li, .tabs-container .tabs-right > .nav-tabs > li { float: none; } .tabs-container .tabs-left > .nav-tabs > li > a, .tabs-container .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } .tabs-container .tabs-left > .nav-tabs { float: left; margin-right: 19px; } .tabs-container .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .tabs-container .tabs-left > .nav-tabs .active > a, .tabs-container .tabs-left > .nav-tabs .active > a:hover, .tabs-container .tabs-left > .nav-tabs .active > a:focus { border-color: #e7eaec transparent #e7eaec #e7eaec; *border-right-color: #ffffff; } .tabs-container .tabs-right > .nav-tabs { float: right; margin-left: 19px; } .tabs-container .tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .tabs-container .tabs-right > .nav-tabs .active > a, .tabs-container .tabs-right > .nav-tabs .active > a:hover, .tabs-container .tabs-right > .nav-tabs .active > a:focus { border-color: #e7eaec #e7eaec #e7eaec transparent; *border-left-color: #ffffff; z-index: 1; }