/static/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
  13body {
  14  position: relative;
  15  padding-top: 40px;
  16}
  17
  18/* Code in headings */
  19h3 code {
  20  font-size: 14px;
  21  font-weight: normal;
  22}
  23
  24
  25
  26/* Tweak navbar brand link to be super sleek
  27-------------------------------------------------- */
  28
  29body > .navbar {
  30  font-size: 13px;
  31}
  32
  33/* Change the docs' brand */
  34body > .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}
  46body > .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 */
  56section {
  57  padding-top: 30px;
  58}
  59section > .page-header,
  60section > .lead {
  61  color: #5a5a5a;
  62}
  63section > 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 */
  73hr.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
 181only screen and (-webkit-min-device-pixel-ratio: 2),
 182only screen and (   min--moz-device-pixel-ratio: 2),
 183only 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:hover [class*="span"] {
 343  background: #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 */
 499h2 + table,
 500h3 + table,
 501h4 + table,
 502h2 + .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 p {
 556  font-size: 13px;
 557  line-height: 18px;
 558}
 559.bootstrap-examples .thumbnail {
 560  margin-bottom: 9px;
 561  background-color: #fff;
 562}
 563
 564
 565
 566/* Bootstrap code examples
 567-------------------------------------------------- */
 568
 569/* Base class */
 570.bs-docs-example {
 571  position: relative;
 572  margin: 15px 0;
 573  padding: 39px 19px 14px;
 574  *padding-top: 19px;
 575  background-color: #fff;
 576  border: 1px solid #ddd;
 577  -webkit-border-radius: 4px;
 578     -moz-border-radius: 4px;
 579          border-radius: 4px;
 580}
 581
 582/* Echo out a label for the example */
 583.bs-docs-example:after {
 584  content: "Example";
 585  position: absolute;
 586  top: -1px;
 587  left: -1px;
 588  padding: 3px 7px;
 589  font-size: 12px;
 590  font-weight: bold;
 591  background-color: #f5f5f5;
 592  border: 1px solid #ddd;
 593  color: #9da0a4;
 594  -webkit-border-radius: 4px 0 4px 0;
 595     -moz-border-radius: 4px 0 4px 0;
 596          border-radius: 4px 0 4px 0;
 597}
 598
 599/* Remove spacing between an example and it's code */
 600.bs-docs-example + .prettyprint {
 601  margin-top: -20px;
 602  padding-top: 15px;
 603}
 604
 605/* Tweak examples
 606------------------------- */
 607.bs-docs-example > p:last-child {
 608  margin-bottom: 0;
 609}
 610.bs-docs-example .table,
 611.bs-docs-example .progress,
 612.bs-docs-example .well,
 613.bs-docs-example .alert,
 614.bs-docs-example .hero-unit,
 615.bs-docs-example .pagination,
 616.bs-docs-example .navbar,
 617.bs-docs-example > .nav,
 618.bs-docs-example blockquote {
 619  margin-bottom: 5px;
 620}
 621.bs-docs-example .pagination {
 622  margin-top: 0;
 623}
 624.bs-navbar-top-example,
 625.bs-navbar-bottom-example {
 626  z-index: 1;
 627  padding: 0;
 628  height: 90px;
 629  overflow: hidden; /* cut the drop shadows off */
 630}
 631.bs-navbar-top-example .navbar-fixed-top,
 632.bs-navbar-bottom-example .navbar-fixed-bottom {
 633  margin-left: 0;
 634  margin-right: 0;
 635}
 636.bs-navbar-top-example {
 637  -webkit-border-radius: 0 0 4px 4px;
 638     -moz-border-radius: 0 0 4px 4px;
 639          border-radius: 0 0 4px 4px;
 640}
 641.bs-navbar-top-example:after {
 642  top: auto;
 643  bottom: -1px;
 644  -webkit-border-radius: 0 4px 0 4px;
 645     -moz-border-radius: 0 4px 0 4px;
 646          border-radius: 0 4px 0 4px;
 647}
 648.bs-navbar-bottom-example {
 649  -webkit-border-radius: 4px 4px 0 0;
 650     -moz-border-radius: 4px 4px 0 0;
 651          border-radius: 4px 4px 0 0;
 652}
 653.bs-navbar-bottom-example .navbar {
 654  margin-bottom: 0;
 655}
 656form.bs-docs-example {
 657  padding-bottom: 19px;
 658}
 659
 660/* Images */
 661.bs-docs-example-images img {
 662  margin: 10px;
 663  display: inline-block;
 664}
 665
 666/* Tooltips */
 667.bs-docs-tooltip-examples {
 668  text-align: center;
 669  margin: 0 0 10px;
 670  list-style: none;
 671}
 672.bs-docs-tooltip-examples li {
 673  display: inline;
 674  padding: 0 10px;
 675}
 676
 677/* Popovers */
 678.bs-docs-example-popover {
 679  padding-bottom: 24px;
 680  background-color: #f9f9f9;
 681}
 682.bs-docs-example-popover .popover {
 683  position: relative;
 684  display: block;
 685  float: left;
 686  width: 260px;
 687  margin: 20px;
 688}
 689
 690/* Dropdowns */
 691.bs-docs-example-submenus {
 692  min-height: 180px;
 693}
 694.bs-docs-example-submenus > .pull-left + .pull-left {
 695  margin-left: 20px;
 696}
 697.bs-docs-example-submenus .dropup > .dropdown-menu,
 698.bs-docs-example-submenus .dropdown > .dropdown-menu {
 699  display: block;
 700  position: static;
 701  margin-bottom: 5px;
 702  *width: 180px;
 703}
 704
 705
 706
 707/* Responsive docs
 708-------------------------------------------------- */
 709
 710/* Utility classes table
 711------------------------- */
 712.responsive-utilities th small {
 713  display: block;
 714  font-weight: normal;
 715  color: #999;
 716}
 717.responsive-utilities tbody th {
 718  font-weight: normal;
 719}
 720.responsive-utilities td {
 721  text-align: center;
 722}
 723.responsive-utilities td.is-visible {
 724  color: #468847;
 725  background-color: #dff0d8 !important;
 726}
 727.responsive-utilities td.is-hidden {
 728  color: #ccc;
 729  background-color: #f9f9f9 !important;
 730}
 731
 732/* Responsive tests
 733------------------------- */
 734.responsive-utilities-test {
 735  margin-top: 5px;
 736  margin-left: 0;
 737  list-style: none;
 738  overflow: hidden; /* clear floats */
 739}
 740.responsive-utilities-test li {
 741  position: relative;
 742  float: left;
 743  width: 25%;
 744  height: 43px;
 745  font-size: 14px;
 746  font-weight: bold;
 747  line-height: 43px;
 748  color: #999;
 749  text-align: center;
 750  border: 1px solid #ddd;
 751  -webkit-border-radius: 4px;
 752     -moz-border-radius: 4px;
 753          border-radius: 4px;
 754}
 755.responsive-utilities-test li + li {
 756  margin-left: 10px;
 757}
 758.responsive-utilities-test span {
 759  position: absolute;
 760  top:    -1px;
 761  left:   -1px;
 762  right:  -1px;
 763  bottom: -1px;
 764  -webkit-border-radius: 4px;
 765     -moz-border-radius: 4px;
 766          border-radius: 4px;
 767}
 768.responsive-utilities-test span {
 769  color: #468847;
 770  background-color: #dff0d8;
 771  border: 1px solid #d6e9c6;
 772}
 773
 774
 775
 776/* Sidenav for Docs
 777-------------------------------------------------- */
 778
 779.bs-docs-sidenav {
 780  width: 228px;
 781  margin: 30px 0 0;
 782  padding: 0;
 783  background-color: #fff;
 784  -webkit-border-radius: 6px;
 785     -moz-border-radius: 6px;
 786          border-radius: 6px;
 787  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 788     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 789          box-shadow: 0 1px 4px rgba(0,0,0,.065);
 790}
 791.bs-docs-sidenav > li > a {
 792  display: block;
 793  width: 190px \9;
 794  margin: 0 0 -1px;
 795  padding: 8px 14px;
 796  border: 1px solid #e5e5e5;
 797}
 798.bs-docs-sidenav > li:first-child > a {
 799  -webkit-border-radius: 6px 6px 0 0;
 800     -moz-border-radius: 6px 6px 0 0;
 801          border-radius: 6px 6px 0 0;
 802}
 803.bs-docs-sidenav > li:last-child > a {
 804  -webkit-border-radius: 0 0 6px 6px;
 805     -moz-border-radius: 0 0 6px 6px;
 806          border-radius: 0 0 6px 6px;
 807}
 808.bs-docs-sidenav > .active > a {
 809  position: relative;
 810  z-index: 2;
 811  padding: 9px 15px;
 812  border: 0;
 813  text-shadow: 0 1px 0 rgba(0,0,0,.15);
 814  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 815     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 816          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 817}
 818/* Chevrons */
 819.bs-docs-sidenav .icon-chevron-right {
 820  float: right;
 821  margin-top: 2px;
 822  margin-right: -6px;
 823  opacity: .25;
 824}
 825.bs-docs-sidenav > li > a:hover {
 826  background-color: #f5f5f5;
 827}
 828.bs-docs-sidenav a:hover .icon-chevron-right {
 829  opacity: .5;
 830}
 831.bs-docs-sidenav .active .icon-chevron-right,
 832.bs-docs-sidenav .active a:hover .icon-chevron-right {
 833  background-image: url(../img/glyphicons-halflings-white.png);
 834  opacity: 1;
 835}
 836.bs-docs-sidenav.affix {
 837  top: 40px;
 838}
 839.bs-docs-sidenav.affix-bottom {
 840  position: absolute;
 841  top: auto;
 842  bottom: 270px;
 843}
 844
 845
 846
 847
 848/* Responsive
 849-------------------------------------------------- */
 850
 851/* Desktop large
 852------------------------- */
 853@media (min-width: 1200px) {
 854  .bs-docs-container {
 855    max-width: 970px;
 856  }
 857  .bs-docs-sidenav {
 858    width: 258px;
 859  }
 860  .bs-docs-sidenav > li > a {
 861    width: 230px \9; /* Override the previous IE8-9 hack */
 862  }
 863}
 864
 865/* Desktop
 866------------------------- */
 867@media (max-width: 980px) {
 868  /* Unfloat brand */
 869  body > .navbar-fixed-top .brand {
 870    float: left;
 871    margin-left: 0;
 872    padding-left: 10px;
 873    padding-right: 10px;
 874  }
 875
 876  /* Inline-block quick links for more spacing */
 877  .quick-links li {
 878    display: inline-block;
 879    margin: 5px;
 880  }
 881
 882  /* When affixed, space properly */
 883  .bs-docs-sidenav {
 884    top: 0;
 885    width: 218px;
 886    margin-top: 30px;
 887    margin-right: 0;
 888  }
 889}
 890
 891/* Tablet to desktop
 892------------------------- */
 893@media (min-width: 768px) and (max-width: 979px) {
 894  /* Remove any padding from the body */
 895  body {
 896    padding-top: 0;
 897  }
 898  /* Widen masthead and social buttons to fill body padding */
 899  .jumbotron {
 900    margin-top: -20px; /* Offset bottom margin on .navbar */
 901  }
 902  /* Adjust sidenav width */
 903  .bs-docs-sidenav {
 904    width: 166px;
 905    margin-top: 20px;
 906  }
 907  .bs-docs-sidenav.affix {
 908    top: 0;
 909  }
 910}
 911
 912/* Tablet
 913------------------------- */
 914@media (max-width: 767px) {
 915  /* Remove any padding from the body */
 916  body {
 917    padding-top: 0;
 918  }
 919
 920  /* Widen masthead and social buttons to fill body padding */
 921  .jumbotron {
 922    padding: 40px 20px;
 923    margin-top:   -20px; /* Offset bottom margin on .navbar */
 924    margin-right: -20px;
 925    margin-left:  -20px;
 926  }
 927  .masthead h1 {
 928    font-size: 90px;
 929  }
 930  .masthead p,
 931  .masthead .btn {
 932    font-size: 24px;
 933  }
 934  .marketing .span4 {
 935    margin-bottom: 40px;
 936  }
 937  .bs-docs-social {
 938    margin: 0 -20px;
 939  }
 940
 941  /* Space out the show-grid examples */
 942  .show-grid [class*="span"] {
 943    margin-bottom: 5px;
 944  }
 945
 946  /* Sidenav */
 947  .bs-docs-sidenav {
 948    width: auto;
 949    margin-bottom: 20px;
 950  }
 951  .bs-docs-sidenav.affix {
 952    position: static;
 953    width: auto;
 954    top: 0;
 955  }
 956
 957  /* Unfloat the back to top link in footer */
 958  .footer {
 959    margin-left: -20px;
 960    margin-right: -20px;
 961    padding-left: 20px;
 962    padding-right: 20px;
 963  }
 964  .footer p {
 965    margin-bottom: 9px;
 966  }
 967}
 968
 969/* Landscape phones
 970------------------------- */
 971@media (max-width: 480px) {
 972  /* Remove padding above jumbotron */
 973  body {
 974    padding-top: 0;
 975  }
 976
 977  /* Change up some type stuff */
 978  h2 small {
 979    display: block;
 980  }
 981
 982  /* Downsize the jumbotrons */
 983  .jumbotron h1 {
 984    font-size: 45px;
 985  }
 986  .jumbotron p,
 987  .jumbotron .btn {
 988    font-size: 18px;
 989  }
 990  .jumbotron .btn {
 991    display: block;
 992    margin: 0 auto;
 993  }
 994
 995  /* center align subhead text like the masthead */
 996  .subhead h1,
 997  .subhead p {
 998    text-align: center;
 999  }
1000
1001  /* Marketing on home */
1002  .marketing h1 {
1003    font-size: 30px;
1004  }
1005  .marketing-byline {
1006    font-size: 18px;
1007  }
1008
1009  /* center example sites */
1010  .example-sites {
1011    margin-left: 0;
1012  }
1013  .example-sites > li {
1014    float: none;
1015    display: block;
1016    max-width: 280px;
1017    margin: 0 auto 18px;
1018    text-align: center;
1019  }
1020  .example-sites .thumbnail > img {
1021    max-width: 270px;
1022  }
1023
1024  /* Do our best to make tables work in narrow viewports */
1025  table code {
1026    white-space: normal;
1027    word-wrap: break-word;
1028    word-break: break-all;
1029  }
1030
1031  /* Examples: dropdowns */
1032  .bs-docs-example-submenus > .pull-left {
1033    float: none;
1034    clear: both;
1035  }
1036  .bs-docs-example-submenus > .pull-left,
1037  .bs-docs-example-submenus > .pull-left + .pull-left {
1038    margin-left: 0;
1039  }
1040  .bs-docs-example-submenus p {
1041    margin-bottom: 0;
1042  }
1043  .bs-docs-example-submenus .dropup > .dropdown-menu,
1044  .bs-docs-example-submenus .dropdown > .dropdown-menu {
1045    margin-bottom: 10px;
1046    float: none;
1047    max-width: 180px;
1048  }
1049
1050  /* Examples: modal */
1051  .modal-example .modal {
1052    position: relative;
1053    top: auto;
1054    right: auto;
1055    bottom: auto;
1056    left: auto;
1057  }
1058
1059  /* Tighten up footer */
1060  .footer {
1061    padding-top: 20px;
1062    padding-bottom: 20px;
1063  }
1064}