/* REQUIRED STYLING */ /* styles the close button for the dismissible popovers */ .popover .close { position: absolute; top: 7px; right: 10px; } /* REQUIRED STYLING */ /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { color: #5a5a5a; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } #main-container {padding-top: 20px;} footer { padding: 20px 0 10px; background: #e6f0f8 } /* some typo */ h1,h2,h3,h4,h5,strong,b { color: #111 } h1 { letter-spacing: -2px } h2 { letter-spacing: -3px; font-size: 56px; font-weight: bold } h3:not(.popover-title) { font-size: 32px; font-weight: bold; letter-spacing: -2px; } hr.clearfix {clear: both; width: 100%; float: left} /* colors */ .bg-bootstrap { background-color: #563d7c } .bg-pink { background-color: #E91E63 } .bg-indigo { background-color: #673ab7 } .bg-purple { background-color: #9c27b0 } .bg-red { background-color: #e51c23 } /* CONTENT STYLING -------------------------------------------------- */ /* required for scrollspy to work perfect */ section { position: relative; display: inline-block; width: 100%; } .scrollspy-example { position: relative; height: 150px; overflow: auto; margin-bottom: 20px; padding: 0 15px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } /* required for scrollspy to work perfect */ /* some content customization | because why not */ #componentTab .nav-tabs, #componentTab .nav-pills, #componentTab .navbar-nav, #componentTab .nav-stacked { margin-bottom: 15px } #componentTab .nav-stacked li a {padding: 5px 10px} #componentTab .nav-stacked, #componentTab .nav.panel { float: left; margin: 0 15px 20px 0 } #componentTab .nav-list { float: left; margin: 0 15px 20px 0; border-right: 1px solid #ddd } #componentTab .nav.panel > li.active > a, #componentTab .nav-list > li.active > a { background: #286090; color: #fff } #componentTab .nav.panel > li:first-child > a { border-radius: 3px 3px 0 0; } #componentTab .nav.panel > li:last-child > a { border-radius: 0 0 3px 3px; } #componentTab .navbar-nav { background: #eee; width: 100%; border-radius: 3px; } #componentTab .navbar-nav > li:first-child > a { border-radius: 3px 0 0 3px; } #componentTab .navbar-nav > li.active > a { background: #286090; color: #fff } #componentTab .nav.nav-stacked .dropdown-menu, #componentTab .nav.panel .dropdown-menu, #componentTab .nav-list .dropdown-menu { margin: 0; top: 0; left: 103%; } #componentTab .nav.panel + .tab-content, #componentTab .nav.nav-list + .tab-content { display: table-cell } /*#componentTab .btn-group { position: absolute; top:8px; left: 85px }*/ #componentTab .btn-group > .btn { margin: 0} #componentTab .btn-group { margin: 0 0 20px } /* buttons */ p .btn, p .form-control {vertical-align: top} p .btn, p .form-control {margin-bottom: 20px; vertical-align: top} /*p .btn-group {margin-bottom: 20px}*/ #collapseExampleWrapper { padding: 20px 20px 10px } #collapseExample .well {margin-bottom: 10px} .btn-group .btn {margin-bottom: 0} #components {padding-bottom: 20px } /* nested dropdowns */ .dropdown-menu .dropdown-menu.left { top: -1px; left: auto; right: 100%; margin: 0 3px 0 0; } .dropdown-menu .dropdown-menu.right { top: -1px; left: 100%; margin: 0 0 0 3px; } /* when on mobile, disable affix position */ #side-nav {clear: both} #side-nav .nav.affix, #side-nav .nav.affix.affix-bottom { position: relative; margin: 20px 0; backface-visibility: hidden; } #side-nav > .nav li.active > a, #side-nav > .nav li.active:hover > a { background-color: #e6f0f8 } #side-nav > .nav li:hover > a { background-color: #f5f9fc } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ .navbar-inverse .navbar-brand { color: #fff } .navbar-nav .open .dropdown-menu { left: auto; right:0 } .navbar-collapse.collapsing {overflow-y: hidden} .navbar-nav { float: none } .navbar-fixed-top { padding: .5rem 0; border:0 } .navbar-brand { font-size: 20px } .navbar-brand svg { display: inline-block; vertical-align:top; margin: -8px 0 0 0 } .navbar-brand span { display: inline-block; vertical-align: top } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover { background-color: transparent; } .navbar-inverse .navbar-toggle { border-color: #eee; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { border-color: #fff; } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: #673ab7; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ #myCarousel.carousel { height: 500px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* do some transition */ #myCarousel .item { -webkit-transition-timing-function: cubic-bezier(.45,.18,0,1); transition-timing-function: cubic-bezier(.45,.18,0,1); } #myCarousel .carousel-caption { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-timing-function: cubic-bezier(0,.24,0,1); transition-timing-function: cubic-bezier(0,.24,0,1); opacity: 0; } /* when going forward, captions slide left */ #myCarousel .next .carousel-caption { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } #myCarousel .prev .carousel-caption { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } /* when going backward, captions move different */ #myCarousel .right.next .carousel-caption { -webkit-transform: /*translate3d(50%, 0, 0)*/ rotateX(90deg); transform: /*translate3d(50%, 0, 0)*/ rotateX(90deg); } #myCarousel .right.prev .carousel-caption { -webkit-transform: /*translate3d(-50%, 0, 0)*/ rotateX(-90deg); transform: /*translate3d(-50%, 0, 0)*/ rotateX(-90deg); } #myCarousel .carousel-caption.slide { -webkit-transform: translate3d( 0%, 0, 0); transform: translate3d(0%, 0, 0); opacity:1; /*visibility: visible; */ } /* Declare heights because of positioning of img element */ #myCarousel .item { height: 500px; width: 100%; background-color: #777; } .carousel h2 { letter-spacing: -1px; font-size: 30px; font-weight: bold } .carousel .item.prev, .carousel .item.next {display: block} #myCarousel .carousel-inner > .item > .item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 500px; } .carousel .btn-default.btn-empty { border-width: 2px; color: #fff; border-color: #fff; background: none transparent } .carousel .btn-default.btn-empty:hover { color: #337ab7; background: #fff } .carousel h1,.carousel h2,.carousel h3,.carousel strong,.carousel b { color: #fff } .carousel a { color: #fff; text-decoration:underline } .carousel a:hover { color: #eee } .carousel a.btn { text-decoration:none } /* the small carousel thumbnail */ #carousel-example-generic { margin: 0 } #carousel-example-generic, #carousel-example-generic .carousel-inner > .item > img { height: auto } /* dropdown form */ .form-vertical { padding: 10px 10px 5px 10px; width: 250px; } /* side navigation */ #side-nav { margin-top: 40px; clear: none } /*#side-nav > .nav > li > ul { margin-top: 2px; height:0; opacity: 0; padding-left: 15px; transition: all 0.3s ease-out; }*/ #side-nav > .nav li > ul { height:0; opacity: 0; padding-left: 15px; transition: height 0.3s ease-out, opacity 0.3s ease; } #side-nav > .nav li { overflow: hidden } #side-nav > .nav li.active > ul { opacity: 1; margin-top: 2px; } #side-nav > .nav li.active.list2 > ul { height: 66px; height: calc(32px*2 + 2px); } #side-nav > .nav li.active.list3 > ul { height: 100px; height: calc(32px*3 + 2px*2); } #side-nav > .nav li.active.list4 > ul { height: 134px; height: calc(32px*4 + 2px*3); } #side-nav > .nav li.active.list5 > ul { height: 168px; height: calc(32px*5 + 2px*4); } #side-nav > .nav li.active.list6 > ul { height: 202px; height: calc(32px*6 + 2px*5); } #side-nav > .nav li.active.list7 > ul { height: 236px; height: calc(32px*7 + 2px*6); } #side-nav > .nav li.active.list8 > ul { height: 270px; height: calc(32px*8 + 2px*7); } #side-nav > .nav li.active.list9 > ul { height: 304px; height: calc(32px*9 + 2px*8); } #side-nav > .nav li.active.list11 > ul { height: 338px; height: calc(32px*11 + 2px*10); } #side-nav > .nav li.active.list11.additional > ul { height: 506px; height: calc(32px*11 + 2px*10 + 32px*5 + 2px*4); } #side-nav > .nav li > a { z-index: 1; padding: 6px 10px; } #side-nav > .nav li > ul { z-index: 0 } .tooltip b, .tooltip strong {color: #fff} /* RESPONSIVE CSS -------------------------------------------------- */ @media screen and (max-width: 1200px) { .carousel-caption { right: 10%; left: 10%; padding-bottom: 30px; } } @media (min-width: 768px) { /* affix example */ #side-nav .nav.affix, #side-nav .nav.affix-bottom { position: fixed !important; width: 263px; } #side-nav .nav.affix { top: 50px; } #side-nav .nav.affix-bottom { top: auto; bottom: 100px } /* Navbar positioning foo */ .navbar .navbar-nav {margin-right: 15px; float: right} /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } .carousel h2 { letter-spacing: -3px; font-size: 56px; font-weight: bold } } /* IE8 without modernizr */ .ie8 #side-nav .nav.affix { position: fixed !important; width: 215px; top: 0; } .ie8 #side-nav .nav.affix.affix-bottom { top: auto; bottom: 100px; } .ie8 .navbar-wrapper { margin-top: 40px; } .ie8 .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .ie8 .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } .ie8 .navbar .navbar-nav {margin-right: 15px; float: right} /* IE8 without modernizr */ /* code wrapping */ pre { display: block; padding: 10px 15px !important; /*margin: 0 0 20px !important;*/ line-height: 2.08; color: #999; word-break: break-all; background-color: rgb(33,33,33); background-color: rgba(11,11,11,0.8); border: none; border-radius: 4px; text-align: left; position: relative; } pre code {background: none;padding: 0; font-weight: normal; font-size: 100%;}