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

   1 /* Add additional stylesheets below
   2 -------------------------------------------------- */
   3 /*
   4   Bootstrap's documentation styles
   5   Special styles for presenting Bootstrap's documentation and examples
   6 */
   7
   8
   9
  10 /* Body and structure
  11 -------------------------------------------------- */
  12
  13 body {
  14   position: relative;
  15   padding-top: 40px;
  16 }
  17
  18 /* Code in headings */
  19 h3 code {
  20   font-size: 14px;
  21   font-weight: normal;
  22 }
  23
  24
  25
  26 /* Tweak navbar brand link to be super sleek
  27 -------------------------------------------------- */
  28
  29 body > .navbar {
  30   font-size: 13px;
  31 }
  32
  33 /* Change the docs' brand */
  34 body > .navbar .brand {
  35   padding-right: 0;
  36   padding-left: 0;
  37   margin-left: 20px;
  38   float: right;
  39   font-weight: bold;
  40   color: #000;
  41   text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
  42   -webkit-transition: all .2s linear;
  43      -moz-transition: all .2s linear;
  44           transition: all .2s linear;
  45 }
  46 body > .navbar .brand:hover {
  47   text-decoration: none;
  48   text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
  49 }
  50
  51
  52 /* Sections
  53 -------------------------------------------------- */
  54
  55 /* padding for in-page bookmarks and fixed navbar */
  56 section {
  57   padding-top: 30px;
  58 }
  59 section > .page-header,
  60 section > .lead {
  61   color: #5a5a5a;
  62 }
  63 section > ul li {
  64   margin-bottom: 5px;
  65 }
  66
  67 /* Separators (hr) */
  68 .bs-docs-separator {
  69   margin: 40px 0 39px;
  70 }
  71
  72 /* Faded out hr */
  73 hr.soften {
  74   height: 1px;
  75   margin: 70px 0;
  76   background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  77   background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  78   background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  79   background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  80   border: 0;
  81 }
  82
  83
  84
  85 /* Jumbotrons
  86 -------------------------------------------------- */
  87
  88 /* Base class
  89 ------------------------- */
  90 .jumbotron {
  91   position: relative;
  92   padding: 40px 0;
  93   color: #fff;
  94   text-align: center;
  95   text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
  96   background: #020031; /* Old browsers */
  97   background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
  98   background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
  99   background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
 100   background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */
 101   background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */
 102   background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */
 103   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 104   -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 105      -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 106           box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 107 }
 108 .jumbotron h1 {
 109   font-size: 80px;
 110   font-weight: bold;
 111   letter-spacing: -1px;
 112   line-height: 1;
 113 }
 114 .jumbotron p {
 115   font-size: 24px;
 116   font-weight: 300;
 117   line-height: 1.25;
 118   margin-bottom: 30px;
 119 }
 120
 121 /* Link styles (used on .masthead-links as well) */
 122 .jumbotron a {
 123   color: #fff;
 124   color: rgba(255,255,255,.5);
 125   -webkit-transition: all .2s ease-in-out;
 126      -moz-transition: all .2s ease-in-out;
 127           transition: all .2s ease-in-out;
 128 }
 129 .jumbotron a:hover {
 130   color: #fff;
 131   text-shadow: 0 0 10px rgba(255,255,255,.25);
 132 }
 133
 134 /* Download button */
 135 .masthead .btn {
 136   padding: 19px 24px;
 137   font-size: 24px;
 138   font-weight: 200;
 139   color: #fff; /* redeclare to override the `.jumbotron a` */
 140   border: 0;
 141   -webkit-border-radius: 6px;
 142      -moz-border-radius: 6px;
 143           border-radius: 6px;
 144   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
 145      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
 146           box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
 147   -webkit-transition: none;
 148      -moz-transition: none;
 149           transition: none;
 150 }
 151 .masthead .btn:hover {
 152   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
 153      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
 154           box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
 155 }
 156 .masthead .btn:active {
 157   -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
 158      -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
 159           box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
 160 }
 161
 162
 163 /* Pattern overlay
 164 ------------------------- */
 165 .jumbotron .container {
 166   position: relative;
 167   z-index: 2;
 168 }
 169 .jumbotron:after {
 170   content: '';
 171   display: block;
 172   position: absolute;
 173   top: 0;
 174   right: 0;
 175   bottom: 0;
 176   left: 0;
 177   background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
 178   opacity: .4;
 179 }
 180 @media
 181 only screen and (-webkit-min-device-pixel-ratio: 2),
 182 only screen and (   min--moz-device-pixel-ratio: 2),
 183 only screen and (     -o-min-device-pixel-ratio: 2/1) {
 184
 185   .jumbotron:after {
 186     background-size: 150px 150px;
 187   }
 188
 189 }
 190
 191 /* Masthead (docs home)
 192 ------------------------- */
 193 .masthead {
 194   padding: 70px 0 80px;
 195   margin-bottom: 0;
 196   color: #fff;
 197 }
 198 .masthead h1 {
 199   font-size: 120px;
 200   line-height: 1;
 201   letter-spacing: -2px;
 202 }
 203 .masthead p {
 204   font-size: 40px;
 205   font-weight: 200;
 206   line-height: 1.25;
 207 }
 208
 209 /* Textual links in masthead */
 210 .masthead-links {
 211   margin: 0;
 212   list-style: none;
 213 }
 214 .masthead-links li {
 215   display: inline;
 216   padding: 0 10px;
 217   color: rgba(255,255,255,.25);
 218 }
 219
 220 /* Social proof buttons from GitHub & Twitter */
 221 .bs-docs-social {
 222   padding: 15px 0;
 223   text-align: center;
 224   background-color: #f5f5f5;
 225   border-top: 1px solid #fff;
 226   border-bottom: 1px solid #ddd;
 227 }
 228
 229 /* Quick links on Home */
 230 .bs-docs-social-buttons {
 231   margin-left: 0;
 232   margin-bottom: 0;
 233   padding-left: 0;
 234   list-style: none;
 235 }
 236 .bs-docs-social-buttons li {
 237   display: inline-block;
 238   padding: 5px 8px;
 239   line-height: 1;
 240   *display: inline;
 241   *zoom: 1;
 242 }
 243
 244 /* Subhead (other pages)
 245 ------------------------- */
 246 .subhead {
 247   text-align: left;
 248   border-bottom: 1px solid #ddd;
 249 }
 250 .subhead h1 {
 251   font-size: 60px;
 252 }
 253 .subhead p {
 254   margin-bottom: 20px;
 255 }
 256 .subhead .navbar {
 257   display: none;
 258 }
 259
 260
 261
 262 /* Marketing section of Overview
 263 -------------------------------------------------- */
 264
 265 .marketing {
 266   text-align: center;
 267   color: #5a5a5a;
 268 }
 269 .marketing h1 {
 270   margin: 60px 0 10px;
 271   font-size: 60px;
 272   font-weight: 200;
 273   line-height: 1;
 274   letter-spacing: -1px;
 275 }
 276 .marketing h2 {
 277   font-weight: 200;
 278   margin-bottom: 5px;
 279 }
 280 .marketing p {
 281   font-size: 16px;
 282   line-height: 1.5;
 283 }
 284 .marketing .marketing-byline {
 285   margin-bottom: 40px;
 286   font-size: 20px;
 287   font-weight: 300;
 288   line-height: 1.25;
 289   color: #999;
 290 }
 291 .marketing-img {
 292   display: block;
 293   margin: 0 auto 30px;
 294   max-height: 145px;
 295 }
 296
 297
 298
 299 /* Footer
 300 -------------------------------------------------- */
 301
 302 .footer {
 303   text-align: center;
 304   padding: 30px 0;
 305   margin-top: 70px;
 306   border-top: 1px solid #e5e5e5;
 307   background-color: #f5f5f5;
 308 }
 309 .footer p {
 310   margin-bottom: 0;
 311   color: #777;
 312 }
 313 .footer-links {
 314   margin: 10px 0;
 315 }
 316 .footer-links li {
 317   display: inline;
 318   padding: 0 2px;
 319 }
 320 .footer-links li:first-child {
 321   padding-left: 0;
 322 }
 323
 324
 325
 326 /* Special grid styles
 327 -------------------------------------------------- */
 328
 329 .show-grid {
 330   margin-top: 10px;
 331   margin-bottom: 20px;
 332 }
 333 .show-grid [class*="span"] {
 334   background-color: #eee;
 335   text-align: center;
 336   -webkit-border-radius: 3px;
 337      -moz-border-radius: 3px;
 338           border-radius: 3px;
 339   min-height: 40px;
 340   line-height: 40px;
 341 }
 342 .show-grid [class*="span"]:hover {
 343   background-color: #ddd;
 344 }
 345 .show-grid .show-grid {
 346   margin-top: 0;
 347   margin-bottom: 0;
 348 }
 349 .show-grid .show-grid [class*="span"] {
 350   margin-top: 5px;
 351 }
 352 .show-grid [class*="span"] [class*="span"] {
 353   background-color: #ccc;
 354 }
 355 .show-grid [class*="span"] [class*="span"] [class*="span"] {
 356   background-color: #999;
 357 }
 358
 359
 360
 361 /* Mini layout previews
 362 -------------------------------------------------- */
 363 .mini-layout {
 364   border: 1px solid #ddd;
 365   -webkit-border-radius: 6px;
 366      -moz-border-radius: 6px;
 367           border-radius: 6px;
 368   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
 369      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
 370           box-shadow: 0 1px 2px rgba(0,0,0,.075);
 371 }
 372 .mini-layout,
 373 .mini-layout .mini-layout-body,
 374 .mini-layout.fluid .mini-layout-sidebar {
 375   height: 300px;
 376 }
 377 .mini-layout {
 378   margin-bottom: 20px;
 379   padding: 9px;
 380 }
 381 .mini-layout div {
 382   -webkit-border-radius: 3px;
 383      -moz-border-radius: 3px;
 384           border-radius: 3px;
 385 }
 386 .mini-layout .mini-layout-body {
 387   background-color: #dceaf4;
 388   margin: 0 auto;
 389   width: 70%;
 390 }
 391 .mini-layout.fluid .mini-layout-sidebar,
 392 .mini-layout.fluid .mini-layout-header,
 393 .mini-layout.fluid .mini-layout-body {
 394   float: left;
 395 }
 396 .mini-layout.fluid .mini-layout-sidebar {
 397   background-color: #bbd8e9;
 398   width: 20%;
 399 }
 400 .mini-layout.fluid .mini-layout-body {
 401   width: 77.5%;
 402   margin-left: 2.5%;
 403 }
 404
 405
 406
 407 /* Download page
 408 -------------------------------------------------- */
 409
 410 .download .page-header {
 411   margin-top: 36px;
 412 }
 413 .page-header .toggle-all {
 414   margin-top: 5px;
 415 }
 416
 417 /* Space out h3s when following a section */
 418 .download h3 {
 419   margin-bottom: 5px;
 420 }
 421 .download-builder input + h3,
 422 .download-builder .checkbox + h3 {
 423   margin-top: 9px;
 424 }
 425
 426 /* Fields for variables */
 427 .download-builder input[type=text] {
 428   margin-bottom: 9px;
 429   font-family: Menlo, Monaco, "Courier New", monospace;
 430   font-size: 12px;
 431   color: #d14;
 432 }
 433 .download-builder input[type=text]:focus {
 434   background-color: #fff;
 435 }
 436
 437 /* Custom, larger checkbox labels */
 438 .download .checkbox {
 439   padding: 6px 10px 6px 25px;
 440   font-size: 13px;
 441   line-height: 18px;
 442   color: #555;
 443   background-color: #f9f9f9;
 444   -webkit-border-radius: 3px;
 445      -moz-border-radius: 3px;
 446           border-radius: 3px;
 447   cursor: pointer;
 448 }
 449 .download .checkbox:hover {
 450   color: #333;
 451   background-color: #f5f5f5;
 452 }
 453 .download .checkbox small {
 454   font-size: 12px;
 455   color: #777;
 456 }
 457
 458 /* Variables section */
 459 #variables label {
 460   margin-bottom: 0;
 461 }
 462
 463 /* Giant download button */
 464 .download-btn {
 465   margin: 36px 0 108px;
 466 }
 467 #download p,
 468 #download h4 {
 469   max-width: 50%;
 470   margin: 0 auto;
 471   color: #999;
 472   text-align: center;
 473 }
 474 #download h4 {
 475   margin-bottom: 0;
 476 }
 477 #download p {
 478   margin-bottom: 18px;
 479 }
 480 .download-btn .btn {
 481   display: block;
 482   width: auto;
 483   padding: 19px 24px;
 484   margin-bottom: 27px;
 485   font-size: 30px;
 486   line-height: 1;
 487   text-align: center;
 488   -webkit-border-radius: 6px;
 489      -moz-border-radius: 6px;
 490           border-radius: 6px;
 491 }
 492
 493
 494
 495 /* Misc
 496 -------------------------------------------------- */
 497
 498 /* Make tables spaced out a bit more */
 499 h2 + table,
 500 h3 + table,
 501 h4 + table,
 502 h2 + .row {
 503   margin-top: 5px;
 504 }
 505
 506 /* Example sites showcase */
 507 .example-sites {
 508   xmargin-left: 20px;
 509 }
 510 .example-sites img {
 511   max-width: 100%;
 512   margin: 0 auto;
 513 }
 514
 515 .scrollspy-example {
 516   height: 200px;
 517   overflow: auto;
 518   position: relative;
 519 }
 520
 521
 522 /* Fake the :focus state to demo it */
 523 .focused {
 524   border-color: rgba(82,168,236,.8);
 525   -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
 526      -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
 527           box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
 528   outline: 0;
 529 }
 530
 531 /* For input sizes, make them display block */
 532 .docs-input-sizes select,
 533 .docs-input-sizes input[type=text] {
 534   display: block;
 535   margin-bottom: 9px;
 536 }
 537
 538 /* Icons
 539 ------------------------- */
 540 .the-icons {
 541   margin-left: 0;
 542   list-style: none;
 543 }
 544 .the-icons li {
 545   float: left;
 546   width: 25%;
 547   line-height: 25px;
 548 }
 549 .the-icons i:hover {
 550   background-color: rgba(255,0,0,.25);
 551 }
 552
 553 /* Example page
 554 ------------------------- */
 555 .bootstrap-examples h4 {
 556   margin: 10px 0 5px;
 557 }
 558 .bootstrap-examples p {
 559   font-size: 13px;
 560   line-height: 18px;
 561 }
 562 .bootstrap-examples .thumbnail {
 563   margin-bottom: 9px;
 564   background-color: #fff;
 565 }
 566
 567
 568
 569 /* Bootstrap code examples
 570 -------------------------------------------------- */
 571
 572 /* Base class */
 573 .bs-docs-example {
 574   position: relative;
 575   margin: 15px 0;
 576   padding: 39px 19px 14px;
 577   *padding-top: 19px;
 578   background-color: #fff;
 579   border: 1px solid #ddd;
 580   -webkit-border-radius: 4px;
 581      -moz-border-radius: 4px;
 582           border-radius: 4px;
 583 }
 584
 585 /* Echo out a label for the example */
 586 .bs-docs-example:after {
 587   content: "Example";
 588   position: absolute;
 589   top: -1px;
 590   left: -1px;
 591   padding: 3px 7px;
 592   font-size: 12px;
 593   font-weight: bold;
 594   background-color: #f5f5f5;
 595   border: 1px solid #ddd;
 596   color: #9da0a4;
 597   -webkit-border-radius: 4px 0 4px 0;
 598      -moz-border-radius: 4px 0 4px 0;
 599           border-radius: 4px 0 4px 0;
 600 }
 601
 602 /* Remove spacing between an example and it's code */
 603 .bs-docs-example + .prettyprint {
 604   margin-top: -20px;
 605   padding-top: 15px;
 606 }
 607
 608 /* Tweak examples
 609 ------------------------- */
 610 .bs-docs-example > p:last-child {
 611   margin-bottom: 0;
 612 }
 613 .bs-docs-example .table,
 614 .bs-docs-example .progress,
 615 .bs-docs-example .well,
 616 .bs-docs-example .alert,
 617 .bs-docs-example .hero-unit,
 618 .bs-docs-example .pagination,
 619 .bs-docs-example .navbar,
 620 .bs-docs-example > .nav,
 621 .bs-docs-example blockquote {
 622   margin-bottom: 5px;
 623 }
 624 .bs-docs-example .pagination {
 625   margin-top: 0;
 626 }
 627 .bs-navbar-top-example,
 628 .bs-navbar-bottom-example {
 629   z-index: 1;
 630   padding: 0;
 631   height: 90px;
 632   overflow: hidden; /* cut the drop shadows off */
 633 }
 634 .bs-navbar-top-example .navbar-fixed-top,
 635 .bs-navbar-bottom-example .navbar-fixed-bottom {
 636   margin-left: 0;
 637   margin-right: 0;
 638 }
 639 .bs-navbar-top-example {
 640   -webkit-border-radius: 0 0 4px 4px;
 641      -moz-border-radius: 0 0 4px 4px;
 642           border-radius: 0 0 4px 4px;
 643 }
 644 .bs-navbar-top-example:after {
 645   top: auto;
 646   bottom: -1px;
 647   -webkit-border-radius: 0 4px 0 4px;
 648      -moz-border-radius: 0 4px 0 4px;
 649           border-radius: 0 4px 0 4px;
 650 }
 651 .bs-navbar-bottom-example {
 652   -webkit-border-radius: 4px 4px 0 0;
 653      -moz-border-radius: 4px 4px 0 0;
 654           border-radius: 4px 4px 0 0;
 655 }
 656 .bs-navbar-bottom-example .navbar {
 657   margin-bottom: 0;
 658 }
 659 form.bs-docs-example {
 660   padding-bottom: 19px;
 661 }
 662
 663 /* Images */
 664 .bs-docs-example-images img {
 665   margin: 10px;
 666   display: inline-block;
 667 }
 668
 669 /* Tooltips */
 670 .bs-docs-tooltip-examples {
 671   text-align: center;
 672   margin: 0 0 10px;
 673   list-style: none;
 674 }
 675 .bs-docs-tooltip-examples li {
 676   display: inline;
 677   padding: 0 10px;
 678 }
 679
 680 /* Popovers */
 681 .bs-docs-example-popover {
 682   padding-bottom: 24px;
 683   background-color: #f9f9f9;
 684 }
 685 .bs-docs-example-popover .popover {
 686   position: relative;
 687   display: block;
 688   float: left;
 689   width: 260px;
 690   margin: 20px;
 691 }
 692
 693 /* Dropdowns */
 694 .bs-docs-example-submenus {
 695   min-height: 180px;
 696 }
 697 .bs-docs-example-submenus > .pull-left + .pull-left {
 698   margin-left: 20px;
 699 }
 700 .bs-docs-example-submenus .dropup > .dropdown-menu,
 701 .bs-docs-example-submenus .dropdown > .dropdown-menu {
 702   display: block;
 703   position: static;
 704   margin-bottom: 5px;
 705   *width: 180px;
 706 }
 707
 708
 709
 710 /* Responsive docs
 711 -------------------------------------------------- */
 712
 713 /* Utility classes table
 714 ------------------------- */
 715 .responsive-utilities th small {
 716   display: block;
 717   font-weight: normal;
 718   color: #999;
 719 }
 720 .responsive-utilities tbody th {
 721   font-weight: normal;
 722 }
 723 .responsive-utilities td {
 724   text-align: center;
 725 }
 726 .responsive-utilities td.is-visible {
 727   color: #468847;
 728   background-color: #dff0d8 !important;
 729 }
 730 .responsive-utilities td.is-hidden {
 731   color: #ccc;
 732   background-color: #f9f9f9 !important;
 733 }
 734
 735 /* Responsive tests
 736 ------------------------- */
 737 .responsive-utilities-test {
 738   margin-top: 5px;
 739   margin-left: 0;
 740   list-style: none;
 741   overflow: hidden; /* clear floats */
 742 }
 743 .responsive-utilities-test li {
 744   position: relative;
 745   float: left;
 746   width: 25%;
 747   height: 43px;
 748   font-size: 14px;
 749   font-weight: bold;
 750   line-height: 43px;
 751   color: #999;
 752   text-align: center;
 753   border: 1px solid #ddd;
 754   -webkit-border-radius: 4px;
 755      -moz-border-radius: 4px;
 756           border-radius: 4px;
 757 }
 758 .responsive-utilities-test li + li {
 759   margin-left: 10px;
 760 }
 761 .responsive-utilities-test span {
 762   position: absolute;
 763   top:    -1px;
 764   left:   -1px;
 765   right:  -1px;
 766   bottom: -1px;
 767   -webkit-border-radius: 4px;
 768      -moz-border-radius: 4px;
 769           border-radius: 4px;
 770 }
 771 .responsive-utilities-test span {
 772   color: #468847;
 773   background-color: #dff0d8;
 774   border: 1px solid #d6e9c6;
 775 }
 776
 777
 778
 779 /* Sidenav for Docs
 780 -------------------------------------------------- */
 781
 782 .bs-docs-sidenav {
 783   width: 228px;
 784   margin: 30px 0 0;
 785   padding: 0;
 786   background-color: #fff;
 787   -webkit-border-radius: 6px;
 788      -moz-border-radius: 6px;
 789           border-radius: 6px;
 790   -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 791      -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 792           box-shadow: 0 1px 4px rgba(0,0,0,.065);
 793 }
 794 .bs-docs-sidenav > li > a {
 795   display: block;
 796   width: 190px \9;
 797   margin: 0 0 -1px;
 798   padding: 8px 14px;
 799   border: 1px solid #e5e5e5;
 800 }
 801 .bs-docs-sidenav > li:first-child > a {
 802   -webkit-border-radius: 6px 6px 0 0;
 803      -moz-border-radius: 6px 6px 0 0;
 804           border-radius: 6px 6px 0 0;
 805 }
 806 .bs-docs-sidenav > li:last-child > a {
 807   -webkit-border-radius: 0 0 6px 6px;
 808      -moz-border-radius: 0 0 6px 6px;
 809           border-radius: 0 0 6px 6px;
 810 }
 811 .bs-docs-sidenav > .active > a {
 812   position: relative;
 813   z-index: 2;
 814   padding: 9px 15px;
 815   border: 0;
 816   text-shadow: 0 1px 0 rgba(0,0,0,.15);
 817   -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 818      -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 819           box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 820 }
 821 /* Chevrons */
 822 .bs-docs-sidenav .icon-chevron-right {
 823   float: right;
 824   margin-top: 2px;
 825   margin-right: -6px;
 826   opacity: .25;
 827 }
 828 .bs-docs-sidenav > li > a:hover {
 829   background-color: #f5f5f5;
 830 }
 831 .bs-docs-sidenav a:hover .icon-chevron-right {
 832   opacity: .5;
 833 }
 834 .bs-docs-sidenav .active .icon-chevron-right,
 835 .bs-docs-sidenav .active a:hover .icon-chevron-right {
 836   background-image: url(../img/glyphicons-halflings-white.png);
 837   opacity: 1;
 838 }
 839 .bs-docs-sidenav.affix {
 840   top: 40px;
 841 }
 842 .bs-docs-sidenav.affix-bottom {
 843   position: absolute;
 844   top: auto;
 845   bottom: 270px;
 846 }
 847
 848
 849
 850
 851 /* Responsive
 852 -------------------------------------------------- */
 853
 854 /* Desktop large
 855 ------------------------- */
 856 @media (min-width: 1200px) {
 857   .bs-docs-container {
 858     max-width: 970px;
 859   }
 860   .bs-docs-sidenav {
 861     width: 258px;
 862   }
 863   .bs-docs-sidenav > li > a {
 864     width: 230px \9; /* Override the previous IE8-9 hack */
 865   }
 866 }
 867
 868 /* Desktop
 869 ------------------------- */
 870 @media (max-width: 980px) {
 871   /* Unfloat brand */
 872   body > .navbar-fixed-top .brand {
 873     float: left;
 874     margin-left: 0;
 875     padding-left: 10px;
 876     padding-right: 10px;
 877   }
 878
 879   /* Inline-block quick links for more spacing */
 880   .quick-links li {
 881     display: inline-block;
 882     margin: 5px;
 883   }
 884
 885   /* When affixed, space properly */
 886   .bs-docs-sidenav {
 887     top: 0;
 888     width: 218px;
 889     margin-top: 30px;
 890     margin-right: 0;
 891   }
 892 }
 893
 894 /* Tablet to desktop
 895 ------------------------- */
 896 @media (min-width: 768px) and (max-width: 979px) {
 897   /* Remove any padding from the body */
 898   body {
 899     padding-top: 0;
 900   }
 901   /* Widen masthead and social buttons to fill body padding */
 902   .jumbotron {
 903     margin-top: -20px; /* Offset bottom margin on .navbar */
 904   }
 905   /* Adjust sidenav width */
 906   .bs-docs-sidenav {
 907     width: 166px;
 908     margin-top: 20px;
 909   }
 910   .bs-docs-sidenav.affix {
 911     top: 0;
 912   }
 913 }
 914
 915 /* Tablet
 916 ------------------------- */
 917 @media (max-width: 767px) {
 918   /* Remove any padding from the body */
 919   body {
 920     padding-top: 0;
 921   }
 922
 923   /* Widen masthead and social buttons to fill body padding */
 924   .jumbotron {
 925     padding: 40px 20px;
 926     margin-top:   -20px; /* Offset bottom margin on .navbar */
 927     margin-right: -20px;
 928     margin-left:  -20px;
 929   }
 930   .masthead h1 {
 931     font-size: 90px;
 932   }
 933   .masthead p,
 934   .masthead .btn {
 935     font-size: 24px;
 936   }
 937   .marketing .span4 {
 938     margin-bottom: 40px;
 939   }
 940   .bs-docs-social {
 941     margin: 0 -20px;
 942   }
 943
 944   /* Space out the show-grid examples */
 945   .show-grid [class*="span"] {
 946     margin-bottom: 5px;
 947   }
 948
 949   /* Sidenav */
 950   .bs-docs-sidenav {
 951     width: auto;
 952     margin-bottom: 20px;
 953   }
 954   .bs-docs-sidenav.affix {
 955     position: static;
 956     width: auto;
 957     top: 0;
 958   }
 959
 960   /* Unfloat the back to top link in footer */
 961   .footer {
 962     margin-left: -20px;
 963     margin-right: -20px;
 964     padding-left: 20px;
 965     padding-right: 20px;
 966   }
 967   .footer p {
 968     margin-bottom: 9px;
 969   }
 970 }
 971
 972 /* Landscape phones
 973 ------------------------- */
 974 @media (max-width: 480px) {
 975   /* Remove padding above jumbotron */
 976   body {
 977     padding-top: 0;
 978   }
 979
 980   /* Change up some type stuff */
 981   h2 small {
 982     display: block;
 983   }
 984
 985   /* Downsize the jumbotrons */
 986   .jumbotron h1 {
 987     font-size: 45px;
 988   }
 989   .jumbotron p,
 990   .jumbotron .btn {
 991     font-size: 18px;
 992   }
 993   .jumbotron .btn {
 994     display: block;
 995     margin: 0 auto;
 996   }
 997
 998   /* center align subhead text like the masthead */
 999   .subhead h1,
1000   .subhead p {
1001     text-align: center;
1002   }
1003
1004   /* Marketing on home */
1005   .marketing h1 {
1006     font-size: 30px;
1007   }
1008   .marketing-byline {
1009     font-size: 18px;
1010   }
1011
1012   /* center example sites */
1013   .example-sites {
1014     margin-left: 0;
1015   }
1016   .example-sites > li {
1017     float: none;
1018     display: block;
1019     max-width: 280px;
1020     margin: 0 auto 18px;
1021     text-align: center;
1022   }
1023   .example-sites .thumbnail > img {
1024     max-width: 270px;
1025   }
1026
1027   /* Do our best to make tables work in narrow viewports */
1028   table code {
1029     white-space: normal;
1030     word-wrap: break-word;
1031     word-break: break-all;
1032   }
1033
1034   /* Examples: dropdowns */
1035   .bs-docs-example-submenus > .pull-left {
1036     float: none;
1037     clear: both;
1038   }
1039   .bs-docs-example-submenus > .pull-left,
1040   .bs-docs-example-submenus > .pull-left + .pull-left {
1041     margin-left: 0;
1042   }
1043   .bs-docs-example-submenus p {
1044     margin-bottom: 0;
1045   }
1046   .bs-docs-example-submenus .dropup > .dropdown-menu,
1047   .bs-docs-example-submenus .dropdown > .dropdown-menu {
1048     margin-bottom: 10px;
1049     float: none;
1050     max-width: 180px;
1051   }
1052
1053   /* Examples: modal */
1054   .modal-example .modal {
1055     position: relative;
1056     top: auto;
1057     right: auto;
1058     bottom: auto;
1059     left: auto;
1060   }
1061
1062   /* Tighten up footer */
1063   .footer {
1064     padding-top: 20px;
1065     padding-bottom: 20px;
1066   }
1067 }