git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/assets/css/docs.css

   1 /*
   2  * Bootstrap Documentation
   3  * Special styles for presenting Bootstrap's documentation and code examples.
   4  */
   5
   6
   7
   8 /* Key scaffolding
   9 -------------------------------------------------- */
  10
  11 body {
  12   position: relative; /* For scrollyspy */
  13   padding-top: 50px; /* Account for fixed navbar */
  14 }
  15
  16 /* Custom docs button */
  17 .btn-bs {
  18   color: #563d7c;
  19   background-color: #fff;
  20   border-color: #e5e5e5;
  21 }
  22 .btn-bs:hover,
  23 .btn-bs:focus,
  24 .btn-bs:active {
  25   color: #fff;
  26   background-color: #563d7c;
  27   border-color: #563d7c;
  28 }
  29
  30 /* Homepage button */
  31 .btn-outline {
  32   color: #fff;
  33   background-color: transparent;
  34   border-color: #cdbfe3;
  35 }
  36 .btn-outline:hover,
  37 .btn-outline:focus,
  38 .btn-outline:active {
  39   color: #563d7c;
  40   background-color: #fff;
  41   border-color: #fff;
  42 }
  43
  44 /* Temp CSS until RC2 */
  45 .bs-customize-placeholder {
  46   margin-bottom: -100px;
  47   padding: 80px 30px;
  48   text-align: center;
  49   background-color: #f5f5f5;
  50 }
  51
  52
  53 /* Top nav and header
  54 -------------------------------------------------- */
  55
  56 .bs-docs-nav {
  57   background-color: #563d7c;
  58   border-color: #463265;
  59 }
  60 .bs-docs-nav .navbar-collapse {
  61   border-color: #463265;
  62 }
  63 .bs-docs-nav .navbar-brand {
  64   color: #fff;
  65 }
  66 .bs-docs-nav .navbar-nav > li > a {
  67   color: #cdbfe3;
  68 }
  69 .bs-docs-nav .navbar-nav > li > a:hover {
  70   color: #fff;
  71 }
  72 .bs-docs-nav .navbar-nav > .active > a,
  73 .bs-docs-nav .navbar-nav > .active > a:hover {
  74   color: #fff;
  75   background-color: #463265;
  76 }
  77 .bs-docs-nav .navbar-toggle {
  78   border-color: #563d7c;
  79 }
  80 .bs-docs-nav .navbar-toggle:hover {
  81   background-color: #463265;
  82   border-color: #463265;
  83 }
  84
  85 /* Old docs callout */
  86 .bs-old-docs {
  87   padding: 15px 20px;
  88   color: #777;
  89   background-color: #fafafa;
  90   border-bottom: 1px solid #e5e5e5;
  91 }
  92 .bs-old-docs strong {
  93   color: #555;
  94 }
  95 .bs-docs-home .bs-old-docs {
  96   padding-top: 0;
  97   padding-bottom: 0;
  98   text-align: center;
  99   color: inherit;
 100   background-color: transparent;
 101   border-color: transparent;
 102 }
 103 .bs-docs-home .bs-old-docs a {
 104   color: #fff;
 105 }
 106
 107 /* Homepage */
 108 .bs-docs-home {
 109   color: #cdbfe3;
 110   background-color: #563d7c;
 111 }
 112
 113
 114 /* Homepage masthead
 115 -------------------------------------------------- */
 116
 117 .bs-masthead {
 118   position: relative;
 119   padding: 30px 15px;
 120   text-align: center;
 121 }
 122 .bs-masthead h1 {
 123   font-size: 50px;
 124   line-height: 1;
 125   color: #fff;
 126 }
 127
 128 /* Download button */
 129 .bs-masthead .btn-outline {
 130   margin-top: 20px;
 131   margin-bottom: 20px;
 132   padding: 18px 24px;
 133   font-size: 21px;
 134 }
 135
 136 /* Textual links */
 137 .bs-social {
 138   margin-top: 30px;
 139   text-align: center;
 140 }
 141 .bs-masthead-links {
 142   margin-top: 20px;
 143   margin-bottom: 20px;
 144   padding: 0 15px;
 145   list-style: none;
 146   text-align: center;
 147 }
 148 .bs-masthead-links li {
 149   display: inline;
 150   color: #999;
 151 }
 152 .bs-masthead-links li + li {
 153   margin-left: 20px;
 154 }
 155 .bs-masthead-links a {
 156   color: #fff;
 157 }
 158
 159
 160
 161 /* Customize and Download button
 162 -------------------------------------------------- */
 163
 164 .bs-customizer .toggle {
 165   float: right;
 166 }
 167 .bs-customizer label {
 168   margin-top: 10px;
 169   font-weight: 500;
 170   color: #444;
 171 }
 172 .bs-customizer h2 {
 173   margin-top: 0;
 174   margin-bottom: 5px;
 175   padding-top: 30px;
 176 }
 177 .bs-customizer h4 {
 178   margin-top: 15px;
 179 }
 180 .bs-customizer input[type="text"] {
 181   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 182   background-color: #fafafa;
 183 }
 184 .bs-customizer .help-block {
 185   font-size: 12px;
 186 }
 187
 188 .bs-customize-download {
 189   text-align: center;
 190 }
 191
 192 #less-section label {
 193   font-weight: normal;
 194 }
 195
 196
 197
 198 /* Docs pages and sections
 199 -------------------------------------------------- */
 200
 201 /* Page headers */
 202 .bs-header {
 203   padding: 30px 30px 40px;
 204   font-size: 16px;
 205   color: #5a5a5a;
 206   text-align: center;
 207   border-bottom: 1px solid #e5e5e5;
 208 }
 209 .bs-header h1 {
 210   color: #563d7c;
 211 }
 212 .bs-header p {
 213   font-weight: 300;
 214   line-height: 1.5;
 215 }
 216 .bs-header .container {
 217   position: relative;
 218 }
 219
 220 .bs-docs-section + .bs-docs-section {
 221   padding-top: 80px;
 222 }
 223
 224 /* Ads in page headers */
 225 .carbonad {
 226   width: auto !important;
 227   margin: 50px -30px -40px !important;
 228   padding: 20px !important;
 229   overflow: hidden; /* clearfix */
 230   height: auto !important;
 231   font-size: 13px !important;
 232   line-height: 16px !important;
 233   text-align: left;
 234   background: none !important;
 235   border: 0 !important;
 236   border-top: 1px solid #e5e5e5 !important;
 237 }
 238 .carbonad-img {
 239   margin: 0 !important;
 240 }
 241 .carbonad-text,
 242 .carbonad-tag {
 243   float: none !important;
 244   display: block !important;
 245   width: auto !important;
 246   height: auto !important;
 247   margin-left: 145px !important;
 248   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 249 }
 250 .carbonad-text {
 251   padding-top: 0 !important;
 252 }
 253 .carbonad-tag {
 254   text-align: left !important;
 255 }
 256 .carbonad #azcarbon > img {
 257   display: none; /* hide what I assume are tracking images */
 258 }
 259
 260
 261
 262 /* Docs sidebar
 263 -------------------------------------------------- */
 264
 265 /* By default it's not affixed in mobile views, so undo that */
 266 .bs-sidebar.affix {
 267   position: static;
 268 }
 269
 270 /* First level of nav */
 271 .bs-sidenav {
 272   margin-top: 30px;
 273   margin-bottom: 30px;
 274   padding-top:    10px;
 275   padding-bottom: 10px;
 276   text-shadow: 0 1px 0 #fff;
 277   background-color: #f7f5fa;
 278   border-radius: 5px;
 279 }
 280
 281 /* All levels of nav */
 282 .bs-sidebar .nav > li > a {
 283   display: block;
 284   color: #716b7a;
 285   padding: 5px 20px;
 286 }
 287 .bs-sidebar .nav > li > a:hover,
 288 .bs-sidebar .nav > li > a:focus {
 289   text-decoration: none;
 290   background-color: #e5e3e9;
 291   border-right: 1px solid #dbd8e0;
 292 }
 293 .bs-sidebar .nav > .active > a,
 294 .bs-sidebar .nav > .active:hover > a,
 295 .bs-sidebar .nav > .active:focus > a {
 296   font-weight: bold;
 297   color: #563d7c;
 298   background-color: transparent;
 299   border-right: 1px solid #563d7c;
 300 }
 301
 302 /* Nav: second level (shown on .active) */
 303 .bs-sidebar .nav .nav {
 304   display: none; /* Hide by default, but at >768px, show it */
 305   margin-bottom: 8px;
 306 }
 307 .bs-sidebar .nav .nav > li > a {
 308   padding-top:    3px;
 309   padding-bottom: 3px;
 310   padding-left: 30px;
 311   font-size: 90%;
 312 }
 313
 314
 315
 316 /* Side notes for calling out things
 317 -------------------------------------------------- */
 318
 319 /* Base styles (regardless of theme) */
 320 .bs-callout {
 321   margin: 20px 0;
 322   padding: 15px 30px 15px 15px;
 323   border-left: 5px solid #eee;
 324 }
 325 .bs-callout h4 {
 326   margin-top: 0;
 327 }
 328 .bs-callout p:last-child {
 329   margin-bottom: 0;
 330 }
 331 .bs-callout code,
 332 .bs-callout .highlight {
 333   background-color: #fff;
 334 }
 335
 336 /* Themes for different contexts */
 337 .bs-callout-danger {
 338   background-color: #fcf2f2;
 339   border-color: #dFb5b4;
 340 }
 341 .bs-callout-warning {
 342   background-color: #fefbed;
 343   border-color: #f1e7bc;
 344 }
 345 .bs-callout-info {
 346   background-color: #f0f7fd;
 347   border-color: #d0e3f0;
 348 }
 349
 350
 351 /* Examples grid
 352 -------------------------------------------------- */
 353
 354 .bs-examples h4 {
 355   margin-bottom: 5px;
 356 }
 357 .bs-examples p {
 358   margin-bottom: 20px;
 359 }
 360
 361
 362
 363 /* Special grid styles
 364 -------------------------------------------------- */
 365
 366 .show-grid {
 367   margin-bottom: 15px;
 368 }
 369 .show-grid [class^="col-"] {
 370   padding-top: 10px;
 371   padding-bottom: 10px;
 372   background-color: #eee;
 373   border: 1px solid #ddd;
 374   background-color: rgba(86,61,124,.15);
 375   border: 1px solid rgba(86,61,124,.2);
 376 }
 377
 378
 379
 380 /* Bootstrap code examples
 381 -------------------------------------------------- */
 382
 383 /* Base class */
 384 .bs-example {
 385   position: relative;
 386   padding: 45px 15px 15px;
 387   margin: 0 -15px 15px;
 388   background-color: #fafafa;
 389   box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
 390   border-color: #e5e5e5 #eee #eee;
 391   border-style: solid;
 392   border-width: 1px 0;
 393 }
 394 /* Echo out a label for the example */
 395 .bs-example:after {
 396   content: "Example";
 397   position: absolute;
 398   top:  15px;
 399   left: 15px;
 400   font-size: 12px;
 401   font-weight: bold;
 402   color: #bbb;
 403   text-transform: uppercase;
 404   letter-spacing: 1px;
 405 }
 406
 407 /* Tweak display of the examples */
 408 .bs-example + .highlight {
 409   margin: -15px -15px 15px;
 410   border-radius: 0;
 411   border-width: 0 0 1px;
 412 }
 413
 414 /* Tweak content of examples for optimum awesome */
 415 .bs-example > p:last-child,
 416 .bs-example > ul:last-child,
 417 .bs-example > ol:last-child,
 418 .bs-example > blockquote:last-child,
 419 .bs-example > .form-control:last-child,
 420 .bs-example > .table:last-child,
 421 .bs-example > .navbar:last-child,
 422 .bs-example > .jumbotron:last-child,
 423 .bs-example > .alert:last-child,
 424 .bs-example > .panel:last-child,
 425 .bs-example > .list-group:last-child,
 426 .bs-example > .well:last-child,
 427 .bs-example > .progress:last-child {
 428   margin-bottom: 0;
 429 }
 430 .bs-example > p > .close {
 431   float: none;
 432 }
 433
 434 /* Typography */
 435 .bs-example-type .table td:last-child {
 436   color: #999;
 437   vertical-align: middle;
 438 }
 439 .bs-example-type .table td {
 440   padding: 15px 0;
 441   border-color: #eee;
 442 }
 443 .bs-example-type .table tr:first-child td {
 444   border-top: 0;
 445 }
 446 .bs-example-type h1,
 447 .bs-example-type h2,
 448 .bs-example-type h3,
 449 .bs-example-type h4,
 450 .bs-example-type h5,
 451 .bs-example-type h6 {
 452   margin: 0;
 453 }
 454
 455 /* Images */
 456 .bs-example > .img-circle,
 457 .bs-example > .img-rounded,
 458 .bs-example > .img-thumbnail {
 459   margin: 5px;
 460 }
 461
 462 /* Buttons */
 463 .bs-example > .btn,
 464 .bs-example > .btn-group {
 465   margin-top: 5px;
 466   margin-bottom: 5px;
 467 }
 468 .bs-example > .btn-toolbar + .btn-toolbar {
 469   margin-top: 10px;
 470 }
 471
 472 /* Forms */
 473 .bs-example-control-sizing select,
 474 .bs-example-control-sizing input[type="text"] + input[type="text"] {
 475   margin-top: 10px;
 476 }
 477 .bs-example-form .input-group {
 478   margin-bottom: 10px;
 479 }
 480 .bs-example > textarea.form-control {
 481   resize: vertical;
 482 }
 483
 484 /* List groups */
 485 .bs-example > .list-group {
 486   max-width: 400px;
 487 }
 488
 489 /* Navbar examples */
 490 .bs-example .navbar:last-child {
 491   margin-bottom: 0;
 492 }
 493 .bs-navbar-top-example,
 494 .bs-navbar-bottom-example {
 495   z-index: 1;
 496   padding: 0;
 497   overflow: hidden; /* cut the drop shadows off */
 498 }
 499 .bs-navbar-top-example .navbar-fixed-top,
 500 .bs-navbar-bottom-example .navbar-fixed-bottom {
 501   position: relative;
 502   margin-left: 0;
 503   margin-right: 0;
 504 }
 505 .bs-navbar-top-example {
 506   padding-bottom: 45px;
 507 }
 508 .bs-navbar-top-example:after {
 509   top: auto;
 510   bottom: 15px;
 511 }
 512 .bs-navbar-top-example .navbar-fixed-top {
 513   top: -1px;
 514 }
 515 .bs-navbar-bottom-example {
 516   padding-top: 45px;
 517 }
 518 .bs-navbar-bottom-example .navbar-fixed-bottom {
 519   bottom: -1px;
 520 }
 521 .bs-navbar-bottom-example .navbar {
 522   margin-bottom: 0;
 523 }
 524
 525 @media (min-width: 768px) {
 526   .bs-navbar-top-example {
 527     border-radius: 0 0 4px 4px;
 528   }
 529   .bs-navbar-bottom-example {
 530     border-radius: 4px 4px 0 0;
 531   }
 532 }
 533
 534 /* Pagination */
 535 .bs-example .pagination {
 536   margin-top: 10px;
 537   margin-bottom: 10px;
 538 }
 539
 540 /* Example modals */
 541 .bs-example-modal {
 542   background-color: #f5f5f5;
 543 }
 544 .bs-example-modal .modal {
 545   position: relative;
 546   top: auto;
 547   right: auto;
 548   left: auto;
 549   bottom: auto;
 550   z-index: 1;
 551   display: block;
 552 }
 553 .bs-example-modal .modal-dialog {
 554   left: auto;
 555   margin-left: auto;
 556   margin-right: auto;
 557 }
 558
 559 /* Example dropdowns */
 560 .bs-example > .dropdown > .dropdown-menu {
 561   position: static;
 562   display: block;
 563   margin-bottom: 5px;
 564 }
 565
 566 /* Example tabbable tabs */
 567 .bs-example-tabs .nav-tabs {
 568   margin-bottom: 15px;
 569 }
 570
 571 /* Tooltips */
 572 .bs-example-tooltips {
 573   text-align: center;
 574 }
 575 .bs-example-tooltips > .btn {
 576   margin-top: 5px;
 577   margin-bottom: 5px;
 578 }
 579
 580 /* Popovers */
 581 .bs-example-popover {
 582   padding-bottom: 24px;
 583   background-color: #f9f9f9;
 584 }
 585 .bs-example-popover .popover {
 586   position: relative;
 587   display: block;
 588   float: left;
 589   width: 260px;
 590   margin: 20px;
 591 }
 592
 593
 594 /* Responsive docs
 595 -------------------------------------------------- */
 596
 597 /* Responsive (scrollable) doc tables */
 598 @media (max-width: 768px) {
 599   .bs-table-scrollable {
 600     width: 100%;
 601     margin-bottom: 15px;
 602     overflow-y: hidden;
 603     overflow-x: scroll;
 604     border: 1px solid #ddd;
 605   }
 606   .bs-table-scrollable .table {
 607     margin-bottom: 0;
 608     border: 0;
 609   }
 610   .bs-table-scrollable .table th,
 611   .bs-table-scrollable .table td {
 612     white-space: nowrap;
 613   }
 614   .bs-table-scrollable .table th:first-child,
 615   .bs-table-scrollable .table td:first-child {
 616     border-left: 0;
 617   }
 618   .bs-table-scrollable .table th:last-child,
 619   .bs-table-scrollable .table td:last-child {
 620     border-right: 0;
 621   }
 622   .bs-table-scrollable .table tr:last-child th,
 623   .bs-table-scrollable .table tr:last-child td {
 624     border-bottom: 0;
 625   }
 626 }
 627 .bs-table-scrollable .highlight pre {
 628   white-space: normal;
 629 }
 630
 631
 632 /* Related: responsive utilities tables */
 633 .table code {
 634   font-size: 13px;
 635   font-weight: normal;
 636 }
 637
 638 /* Utility classes table
 639 ------------------------- */
 640 .bs-table th small,
 641 .responsive-utilities th small {
 642   display: block;
 643   font-weight: normal;
 644   color: #999;
 645 }
 646 .responsive-utilities tbody th {
 647   font-weight: normal;
 648 }
 649 .responsive-utilities td {
 650   text-align: center;
 651 }
 652 .responsive-utilities td.is-visible {
 653   color: #468847;
 654   background-color: #dff0d8 !important;
 655 }
 656 .responsive-utilities td.is-hidden {
 657   color: #ccc;
 658   background-color: #f9f9f9 !important;
 659 }
 660
 661 /* Responsive tests
 662 ------------------------- */
 663 .responsive-utilities-test {
 664   margin-top: 5px;
 665 }
 666 .responsive-utilities-test .col-xs-6 {
 667   margin-bottom: 10px;
 668 }
 669 .responsive-utilities-test span {
 670   padding: 15px 10px;
 671   font-size: 14px;
 672   font-weight: bold;
 673   line-height: 1.1;
 674   text-align: center;
 675   border-radius: 4px;
 676 }
 677 .visible-on .col-xs-6 .hidden-xs,
 678 .visible-on .col-xs-6 .hidden-sm,
 679 .visible-on .col-xs-6 .hidden-md,
 680 .visible-on .col-xs-6 .hidden-lg,
 681 .hidden-on .col-xs-6 .visible-xs,
 682 .hidden-on .col-xs-6 .visible-sm,
 683 .hidden-on .col-xs-6 .visible-md,
 684 .hidden-on .col-xs-6 .visible-lg {
 685   color: #999;
 686   border: 1px solid #ddd;
 687 }
 688 .visible-on .col-xs-6 .visible-xs,
 689 .visible-on .col-xs-6 .visible-sm,
 690 .visible-on .col-xs-6 .visible-md,
 691 .visible-on .col-xs-6 .visible-lg,
 692 .hidden-on .col-xs-6 .hidden-xs,
 693 .hidden-on .col-xs-6 .hidden-sm,
 694 .hidden-on .col-xs-6 .hidden-md,
 695 .hidden-on .col-xs-6 .hidden-lg {
 696   color: #468847;
 697   background-color: #dff0d8;
 698   border: 1px solid #d6e9c6;
 699 }
 700
 701
 702
 703 /* Footer
 704 -------------------------------------------------- */
 705
 706 .bs-footer {
 707   padding-top: 40px;
 708   padding-bottom: 30px;
 709   margin-top: 100px;
 710   text-align: center;
 711   border-top: 1px solid #e5e5e5;
 712 }
 713 .bs-footer p {
 714   margin-bottom: 0;
 715   color: #777;
 716 }
 717 .footer-links {
 718   margin: 10px 0;
 719   padding-left: 0;
 720 }
 721 .footer-links li {
 722   display: inline;
 723   padding: 0 2px;
 724 }
 725 .footer-links li:first-child {
 726   padding-left: 0;
 727 }
 728
 729 /* Social proof buttons from GitHub & Twitter */
 730 .bs-social {
 731   margin-bottom: 20px;
 732 }
 733 .bs-social-buttons {
 734   display: inline-block;
 735   margin-bottom: 0;
 736   padding-left: 0;
 737   list-style: none;
 738 }
 739 .bs-social-buttons li {
 740   display: inline-block;
 741   line-height: 1;
 742   padding: 5px 8px;
 743 }
 744 .bs-social-buttons .twitter-follow-button {
 745   width: 225px !important;
 746 }
 747 .bs-social-buttons .twitter-share-button {
 748   width: 98px !important;
 749 }
 750 /* Style the GitHub buttons via CSS instead of inline attributes */
 751 .github-btn {
 752   border: 0;
 753   overflow: hidden;
 754 }
 755
 756
 757
 758 /* Misc docs stuff
 759 -------------------------------------------------- */
 760
 761 /* Pseudo :focus state for showing how it looks in the docs */
 762 #focusedInput {
 763   border-color: rgba(82,168,236,.8);
 764   outline: 0;
 765   outline: thin dotted \9; /* IE6-9 */
 766   -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
 767        box-shadow: 0 0 8px rgba(82,168,236,.6);
 768 }
 769
 770 /* Scrollspy demo on fixed height div */
 771 .scrollspy-example {
 772   position: relative;
 773   height: 200px;
 774   margin-top: 10px;
 775   overflow: auto;
 776 }
 777
 778 .highlight {
 779   padding: 9px 14px;
 780   margin-bottom: 14px;
 781   background-color: #f7f7f9;
 782   border: 1px solid #e1e1e8;
 783   border-radius: 4px;
 784 }
 785 .highlight pre {
 786   padding: 0;
 787   margin-top: 0;
 788   margin-bottom: 0;
 789   background-color: transparent;
 790   border: 0;
 791   white-space: nowrap;
 792 }
 793 .highlight pre code {
 794   font-size: inherit;
 795   color: #333; /* Effectively the base text color */
 796 }
 797 .highlight pre .lineno {
 798   display: inline-block;
 799   width: 22px;
 800   padding-right: 5px;
 801   margin-right: 10px;
 802   text-align: right;
 803   color: #bebec5;
 804 }
 805
 806 /* Better spacing on download options in getting started */
 807 .bs-docs-dl-options h4 {
 808   margin-top: 15px;
 809   margin-bottom: 5px;
 810 }
 811
 812
 813 /* Responsive variations
 814 -------------------------------------------------- */
 815
 816 /* Hide code snippets on mobile devices */
 817 @media screen and (max-width: 480px) {
 818   .highlight {
 819     display: none;
 820   }
 821 }
 822
 823 /* Tablets and up */
 824 @media screen and (min-width: 768px) {
 825
 826   .bs-header {
 827     font-size: 21px;
 828     text-align: left;
 829   }
 830   .bs-header h1 {
 831     font-size: 60px;
 832     line-height: 1;
 833   }
 834
 835   .bs-example {
 836     margin-left: 0;
 837     margin-right: 0;
 838     background-color: #fff;
 839     border-width: 1px;
 840     border-color: #ddd;
 841     border-radius: 4px 4px 0 0;
 842     box-shadow: none;
 843   }
 844   .bs-example + .prettyprint,
 845   .bs-example + .highlight {
 846     margin-top: -16px;
 847     margin-left: 0;
 848     margin-right: 0;
 849     border-width: 1px;
 850     border-bottom-left-radius: 4px;
 851     border-bottom-right-radius: 4px;
 852   }
 853
 854   .bs-masthead-links {
 855     padding: 0;
 856   }
 857
 858   .carbonad {
 859     margin: 0 !important;
 860     border: 1px solid #e5e5e5 !important;
 861     border-radius: 4px;
 862   }
 863
 864   /* Show the docs nav */
 865   .bs-sidebar {
 866     display: block;
 867   }
 868
 869   /* Tweak display of docs jumbotrons */
 870   .bs-masthead {
 871     padding-top:    140px;
 872     padding-bottom: 140px;
 873   }
 874   .bs-masthead h1 {
 875     font-size: 100px;
 876   }
 877   .bs-masthead .lead {
 878     margin-left: 15%;
 879     margin-right: 15%;
 880     font-size: 30px;
 881   }
 882
 883   .bs-navbar-top-example .navbar-fixed-top,
 884   .bs-navbar-bottom-example .navbar-fixed-bottom {
 885     position: absolute;
 886   }
 887
 888 }
 889
 890 /* Tablets/desktops and up */
 891 @media screen and (min-width: 992px) {
 892   .bs-header h1,
 893   .bs-header p {
 894     margin-right: 380px;
 895   }
 896   .carbonad {
 897     position: absolute;
 898     top: 20px;
 899     right: 0;
 900     padding: 15px !important;
 901     width: 330px !important;
 902     min-height: 132px;
 903   }
 904
 905   /* Show the hidden subnavs when space allows it */
 906   .bs-sidebar .nav > .active > ul {
 907     display: block;
 908   }
 909   /* Widen the fixed sidebar */
 910   .bs-sidebar.affix,
 911   .bs-sidebar.affix-bottom {
 912     width: 213px;
 913   }
 914   .bs-sidebar.affix {
 915     position: fixed; /* Undo the static from mobile-first approach */
 916     top: 80px;
 917   }
 918   .bs-sidebar.affix-bottom {
 919     position: absolute; /* Undo the static from mobile-first approach */
 920   }
 921   .bs-sidebar.affix-bottom .bs-sidenav,
 922   .bs-sidebar.affix .bs-sidenav {
 923     margin-top: 0;
 924     margin-bottom: 0;
 925   }
 926 }
 927
 928 /* Large desktops and up */
 929 @media screen and (min-width: 1200px) {
 930
 931   /* Widen the fixed sidebar again */
 932   .bs-sidebar.affix-bottom,
 933   .bs-sidebar.affix {
 934     width: 263px;
 935   }
 936
 937 }