/* Add additional stylesheets below -------------------------------------------------- */ /* Bootstrap's documentation styles Special styles for presenting Bootstrap's documentation and examples */ /* Body and structure -------------------------------------------------- */ body { position: relative; padding-top: 100px; font-size: 14px; background-color: #fff; background-image: url(../img/grid-20px.png); background-repeat: repeat-x; background-position: 0 40px; } /* Custom container for the narrow docs */ .bs-docs-container { max-width: 780px; margin: 0 auto; } /* Increase docs base type size and line-heights */ body { line-height: 20px; } p { margin-bottom: 15px; } li { line-height: 25px; } /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ .navbar, .subnav { font-size: 13px; } .navbar-fixed-top .brand { padding-right: 0; padding-left: 0; margin-left: 20px; float: right; font-weight: bold; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; } .navbar-fixed-top .brand:hover { text-decoration: none; } /* Left nav -------------------------------------------------- */ .bs-docs-nav { display: none; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: scroll; width: 150px; padding: 25px; background-color: #dde2e9; text-shadow: 0 1px 0 rgba(255,255,255,.55); -webkit-box-shadow: inset -10px 0 15px rgba(0,0,0,.15); -moz-box-shadow: inset -10px 0 15px rgba(0,0,0,.15); box-shadow: inset -10px 0 15px rgba(0,0,0,.15); background-color: #444; text-shadow: 0 1px 0 rgba(0,0,0,.5); } .bs-docs-nav ul { margin-left: 0; margin-bottom: 15px; } .bs-docs-nav ul li { list-style: none; line-height: 1; } .bs-docs-nav a:hover { text-decoration: none; } .bs-docs-nav ul li a { display: block; width: 145px; padding: 0 30px; margin: 0 -30px; font-size: 12px; line-height: 22px; color: #444; color: #999; } .bs-docs-nav ul li a:hover { color: #333; color: #fff; background-color: rgba(0,0,0,.05); } .bs-docs-nav > ul > li > a { font-size: 14px; font-weight: bold; line-height: 24px; color: #333; color: #fff; } /* Logo wordmark */ .bs-docs-logo { font-size: 24px; font-weight: bold; line-height: 1; margin-top: 0; margin-bottom: 20px; } .bs-docs-logo a { color: #a4b4cb; color: #333; text-shadow: 0 1px 0 #555; } .bs-docs-logo a:hover { color: #8e9db3; color: #222; } /* Space out sub-sections more -------------------------------------------------- */ section { padding-top: 60px; } /* Table of contents */ .bs-docs-contents li { line-height: 25px; color: #777; } /* Separators (hr) */ .bs-docs-separator { margin: 40px 0 39px; } /* Faded out hr */ hr.soften { height: 1px; margin: 54px 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); border: 0; } /* Jumbotrons -------------------------------------------------- */ /* Base class ------------------------- */ .jumbotron { position: relative; text-align: center; } .jumbotron h1 { margin-bottom: 10px; font-size: 80px; font-weight: bold; letter-spacing: -1px; line-height: 1; } .jumbotron p { margin-bottom: 20px; font-weight: 300; } .jumbotron .btn-large { font-size: 18px; font-weight: normal; padding: 13px 24px; margin-right: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .jumbotron .btn-large small { font-size: 14px; } /* Masthead (docs home) ------------------------- */ .masthead { margin-top: 20px; margin-bottom: 80px; } .masthead h1, .masthead p { } .masthead h1 { margin-bottom: 10px; } .masthead p { font-size: 30px; line-height: 40px; } /* Quick links ------------------------- */ .bs-links { margin: 40px 0 0; font-size: 12px; } .quick-links { min-height: 30px; margin: 0; padding: 0; list-style: none; overflow: hidden; } .quick-links:first-child { min-height: 0; } .quick-links li { display: inline; margin: 0 8px; color: #999; } .quick-links .github-btn, .quick-links .tweet-btn, .quick-links .follow-btn { position: relative; top: 5px; } /* Specific jumbotrons ------------------------- */ /* supporting docs pages */ .subhead { text-align: left; } .subhead h1 { font-size: 60px; } .subhead .lead { margin-bottom: 30px; line-height: 25px; font-size: 30px; line-height: 40px; } /* Subnav */ .subnav { width: 100%; height: 36px; background-color: #eeeeee; /* Old browsers */ background-repeat: repeat-x; /* Repeat the gradient */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */ background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */ background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */ border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .subnav .nav { margin-bottom: 0; } .subnav .nav > li > a { margin: 0; padding-top: 11px; padding-bottom: 11px; border-left: 1px solid #f5f5f5; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .subnav .nav > .active > a, .subnav .nav > .active > a:hover { padding-left: 13px; color: #777; background-color: #e9e9e9; border-right-color: #ddd; border-left: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); box-shadow: inset 0 3px 5px rgba(0,0,0,.05); } .subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret { border-top-color: #777; } .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { border-left: 0; padding-left: 12px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .subnav .nav > li:last-child > a { border-right: 0; } .subnav .dropdown-menu { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ @media (min-width: 980px) { .subnav-fixed { position: fixed; top: 40px; left: 0; right: 0; z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ border-color: #d5d5d5; border-width: 0 0 1px; /* drop the border on the fixed edges */ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ } .subnav-fixed .nav { width: 938px; margin: 0 auto; padding: 0 1px; } .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } } /* Marketing section of Overview -------------------------------------------------- */ .marketing .row { margin-bottom: 9px; } .marketing h1 { margin: 36px 0 27px; font-size: 40px; font-weight: 300; text-align: center; } .marketing h2, .marketing h3 { font-weight: 300; } .marketing h2 { font-size: 22px; } .marketing p { margin-right: 10px; } .marketing .bs-icon { float: left; margin: 7px 10px 0 0; opacity: .8; } .marketing .small-bs-icon { float: left; margin: 4px 5px 0 0; } .marketing-byline { margin: -18px 0 27px; font-size: 18px; font-weight: 300; line-height: 24px; color: #999; text-align: center; } /* Footer -------------------------------------------------- */ .footer { padding: 35px 0 36px; margin-top: 45px; border-top: 1px solid #e5e5e5; } .footer p { font-size: 12px; line-height: 20px; margin-bottom: 0; color: #555; } /* Special grid styles -------------------------------------------------- */ .show-grid { margin-top: 10px; margin-bottom: 20px; } .show-grid [class*="span"] { background-color: #eee; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; min-height: 40px; line-height: 40px; } .show-grid:hover [class*="span"] { background: #ddd; } .show-grid .show-grid { margin-top: 0; margin-bottom: 0; } .show-grid .show-grid [class*="span"] { background-color: #ccc; } /* Render mini layout previews -------------------------------------------------- */ .mini-layout { border: 1px solid #ddd; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); box-shadow: 0 1px 2px rgba(0,0,0,.075); } .mini-layout { height: 240px; margin-bottom: 20px; padding: 9px; } .mini-layout div { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; width: 70%; height: 240px; } .mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, .mini-layout.fluid .mini-layout-body { float: left; } .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 20%; height: 240px; } .mini-layout.fluid .mini-layout-body { width: 77.5%; margin-left: 2.5%; } /* Popover docs -------------------------------------------------- */ .popover-well { min-height: 160px; } .popover-well .popover { display: block; } .popover-well .popover-wrapper { width: 50%; height: 160px; float: left; margin-left: 55px; position: relative; } .popover-well .popover-menu-wrapper { height: 80px; } .large-bird { margin: 5px 0 0 310px; opacity: .1; } /* Download page -------------------------------------------------- */ .download .page-header { margin-top: 36px; } .page-header .toggle-all { margin-top: 5px; } /* Space out h3s when following a section */ .download h3 { margin-bottom: 5px; } .download-builder input + h3, .download-builder .checkbox + h3 { margin-top: 9px; } /* Fields for variables */ .download-builder input[type=text] { margin-bottom: 9px; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; color: #d14; } .download-builder input[type=text]:focus { background-color: #fff; } /* Custom, larger checkbox labels */ .download .checkbox { padding: 6px 10px 6px 25px; color: #555; background-color: #f9f9f9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } .download .checkbox:hover { color: #333; background-color: #f5f5f5; } .download .checkbox small { font-size: 12px; color: #777; } /* Variables section */ #variables label { margin-bottom: 0; } /* Giant download button */ .download-btn { margin: 36px 0 108px; } #download p, #download h4 { max-width: 50%; margin: 0 auto; color: #999; text-align: center; } #download h4 { margin-bottom: 0; } #download p { margin-bottom: 18px; } .download-btn .btn { display: block; width: auto; padding: 19px 24px; margin-bottom: 27px; font-size: 30px; line-height: 1; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /* Color swatches on LESS docs page -------------------------------------------------- */ /* Sets the width of the td */ .swatch-col { width: 30px; } /* Le swatch */ .swatch { display: inline-block; width: 30px; height: 20px; margin: -6px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* For white swatches, give a border */ .swatch-bordered { width: 28px; height: 18px; border: 1px solid #eee; } /* Misc -------------------------------------------------- */ /* Make tables spaced out a bit more */ h2 + table, h3 + table, h4 + table, h2 + .row { margin-top: 5px; } /* Example sites showcase */ .example-sites { margin-left: 20px; } .example-sites img { max-width: 100%; margin: 0 auto; } .scrollspy-example { height: 200px; overflow: auto; position: relative; } /* Remove bottom margin on example forms in wells */ form.well { padding: 14px; } /* Tighten up spacing */ .well hr { margin: 18px 0; } /* Fake the :focus state to demo it */ .focused { border-color: rgba(82,168,236,.8); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); outline: 0; } /* For input sizes, make them display block */ .docs-input-sizes select, .docs-input-sizes input[type=text] { display: block; margin-bottom: 9px; } /* Icons ------------------------- */ .the-icons { margin-left: 0; list-style: none; } .the-icons i:hover { background-color: rgba(255,0,0,.25); } /* Eaxmples page ------------------------- */ .bootstrap-examples .thumbnail { margin-bottom: 9px; background-color: #fff; } /* Docs examples ------------------------- */ .bs-docs-example { position: relative; margin: 15px 0; padding: 39px 19px 14px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .bs-docs-example:after { content: "Example"; position: absolute; top: -1px; left: -1px; padding: 3px 7px; font-size: 12px; font-weight: bold; background-color: #f5f5f5; border: 1px solid #ddd; color: #9da0a4; -webkit-border-radius: 4px 0 4px 0; -moz-border-radius: 4px 0 4px 0; border-radius: 4px 0 4px 0; } .bs-docs-example + .prettyprint { margin-top: -20px; padding-top: 15px; } .bs-docs-example, .bs-docs-example > p { font-size: 13px; line-height: 18px; } .bs-docs-example p { margin-bottom: 9px; } .bs-docs-example p:last-child { margin-bottom: 0; } .bs-docs-example .table { margin-bottom: 5px; } form.bs-docs-example { padding-bottom: 19px; } .bs-docs-example .lead { font-size: 18px; line-height: 24px; } .bs-docs-example li { line-height: 18px; } /* Responsive table ------------------------- */ .responsive-utilities th small { display: block; font-weight: normal; color: #999; } .responsive-utilities tbody th { font-weight: normal; } .responsive-utilities td { text-align: center; } .responsive-utilities td.is-visible { color: #468847; background-color: #dff0d8 !important; } .responsive-utilities td.is-hidden { color: #ccc; background-color: #f9f9f9 !important; } /* Responsive tests ------------------------- */ .responsive-utilities-test { margin-top: 5px; margin-left: 0; list-style: none; overflow: hidden; /* clear floats */ } .responsive-utilities-test li { position: relative; float: left; width: 25%; height: 43px; font-size: 14px; font-weight: bold; line-height: 43px; color: #999; text-align: center; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .responsive-utilities-test li + li { margin-left: 10px; } .responsive-utilities-test span { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .responsive-utilities-test span { color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; } /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { /* Reduce padding above jumbotron */ body { padding-top: 70px; } /* Change up some type stuff */ h2 { margin-top: 27px; } h2 small { display: block; line-height: 18px; } h3 { margin-top: 18px; } /* icons */ .marketing .bs-icon { margin: 0; } /* Adjust the jumbotron */ .jumbotron h1, .jumbotron p { text-align: center; margin-right: 0; } .jumbotron h1 { font-size: 45px; margin-right: 0; } .jumbotron p { margin-right: 0; margin-left: 0; font-size: 18px; line-height: 24px; } .jumbotron .btn { display: block; font-size: 18px; padding: 10px 14px; margin: 0 auto 10px; } /* Masthead (home page jumbotron) */ .masthead { padding-top: 0; } /* Don't space out quick links so much */ .quick-links { margin: 40px 0 0; } /* hide the bullets on mobile since our horizontal space is limited */ .quick-links .divider { display: none; } /* center example sites */ .example-sites { margin-left: 0; } .example-sites > li { float: none; display: block; max-width: 280px; margin: 0 auto 18px; text-align: center; } .example-sites .thumbnail > img { max-width: 270px; } table code { white-space: normal; word-wrap: break-word; word-break: break-all; } /* Modal example */ .modal-example .modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; } } @media (max-width: 768px) { /* Remove any padding from the body */ body { padding-top: 0; } /* Jumbotron buttons */ .jumbotron .btn { margin-bottom: 10px; } /* Subnav */ .subnav { position: static; top: auto; z-index: auto; width: auto; height: auto; background: #fff; /* whole background property since we use a background-image for gradient */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .subnav .nav > li { float: none; } .subnav .nav > li > a { border: 0; } .subnav .nav > li + li > a { border-top: 1px solid #e5e5e5; } .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } /* Popovers */ .large-bird { display: none; } .popover-well .popover-wrapper { margin-left: 0; } /* Space out the show-grid examples */ .show-grid [class*="span"] { margin-bottom: 5px; } /* Unfloat the back to top link in footer */ .footer p { margin-bottom: 9px; } } @media (min-width: 480px) and (max-width: 768px) { /* Scale down the jumbotron content */ .jumbotron h1 { font-size: 54px; } .jumbotron p { margin-right: 0; margin-left: 0; } } @media (min-width: 768px) and (max-width: 980px) { /* Remove any padding from the body */ body { padding-top: 0; } /* Scale down the jumbotron content */ .jumbotron h1 { font-size: 72px; } } @media (max-width: 980px) { /* Unfloat brand */ .navbar-fixed-top .brand { float: left; margin-left: 0; padding-left: 10px; padding-right: 10px; } /* Inline-block quick links for more spacing */ .quick-links li { display: inline-block; margin: 5px; } } /* LARGE DESKTOP SCREENS */ @media (min-width: 1210px) { .bs-docs-container { max-width: 970px; } /* Update subnav container */ .subnav-fixed .nav { width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ } }