git.roojs.org Git - ratchet/blob - docs/css/docs.css

   1 /* Base styles
   2 -------------------------------------------------- */
   3
   4 body {
   5   position: static !important; /* Overrides the fixed positioning of body in Ratchet */
   6   font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
   7   font-size: 14px;
   8   line-height: 1.6;
   9   color: #333;
  10   background: #fff;
  11   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  12   -webkit-text-size-adjust: 100%;
  13 }
  14
  15
  16 /* Typography
  17 -------------------------------------------------- */
  18
  19 hr {
  20   height: 0;
  21   margin: 10px 0 30px;
  22   border: solid #ddd;
  23   border-width: 1px 0 0;
  24   clear: both;
  25 }
  26
  27 h1,
  28 h2,
  29 h3,
  30 h4,
  31 h5,
  32 h6 {
  33   text-rendering: optimizeLegibility;
  34 }
  35
  36
  37 /* Docs structural styles
  38 -------------------------------------------------- */
  39 .docs-outer-wrapper {
  40   position: relative;
  41 }
  42
  43 .docs-inner-wrapper {
  44   width: 1000px;
  45   margin: 0 auto;
  46 }
  47
  48 /* Masthead (navigation)
  49 -------------------------------------------------- */
  50
  51 .docs-masthead {
  52   position: fixed;
  53   top: 0;
  54   right: 0;
  55   left: 0;
  56   z-index: 100;
  57   padding: 10px 0;
  58   background-color: #fff;
  59   border-bottom: 1px solid #ddd;
  60   box-shadow: 0 0 5px rgba(0,0,0,.1);
  61 }
  62
  63 .docs-masthead .docs-inner-wrapper {
  64   line-height: 40px;
  65 }
  66
  67 .docs-masthead-title {
  68   font-weight: 700;
  69   font-size: 21px;
  70   text-transform: uppercase;
  71   letter-spacing: 5px;
  72 }
  73
  74 .docs-navigation {
  75   float: right;
  76   font-size: 15px;
  77 }
  78
  79 .nav-item {
  80   position: relative;
  81   float: left;
  82   margin-right: 30px;
  83   list-style: none;
  84 }
  85
  86 .nav-item:last-child {
  87   margin-right: 0;
  88 }
  89
  90 .nav-item a {
  91   position: relative;
  92   color: #777;
  93   text-decoration: none;
  94 }
  95
  96 .nav-item a:hover {
  97   color: #555;
  98 }
  99
 100 /* Give the components link a bit more room to fit the caret */
 101 .nav-item.nav-components {
 102   margin-right: 45px;
 103 }
 104
 105 /* Give the  components link a down caret */
 106 .nav-components-link:after {
 107   content: '';
 108   position: absolute;
 109   right: 0;
 110   width: 0;
 111   height: 0;
 112   top: 8px;
 113   right: -15px;
 114   margin-left: -4px;
 115   border-right: 4px solid transparent;
 116   border-top: 4px solid #777;
 117   border-left: 4px solid transparent;
 118 }
 119
 120 /* The components list dropdown */
 121 .components-list {
 122   position: absolute;
 123   display: none;
 124   top: 45px;
 125   left: -20px;
 126   z-index: -1;
 127   padding: 10px 0;
 128   line-height: 1.1;
 129   background-color: #fff;
 130   background-clip: padding-box;
 131   border: 1px solid rgba(0,0,0,.2);
 132   border-radius: 3px;
 133   box-shadow: 0 0 8px rgba(0,0,0,.05);
 134 }
 135
 136 .components-list.active {
 137   z-index: 100;
 138   display: block;
 139 }
 140
 141 .components-list:before,
 142 .components-list:after {
 143   content: '';
 144   position: absolute;
 145   left: 30px;
 146   width: 0;
 147   height: 0;
 148 }
 149
 150 .components-list:before {
 151   top: -11px;
 152   margin-left: -11px;
 153   border-right: 11px solid transparent;
 154   border-bottom: 11px solid rgba(0,0,0,.3);
 155   border-left: 11px solid transparent;
 156 }
 157
 158 .components-list:after {
 159   top: -10px;
 160   margin-left: -10px;
 161   border-right: 10px solid transparent;
 162   border-bottom: 10px solid #fff;
 163   border-left: 10px solid transparent;
 164 }
 165
 166 .components-list li {
 167   list-style: none;
 168 }
 169
 170 .components-list li:last-child {
 171   padding-bottom: 0;
 172 }
 173
 174 .components-list li a {
 175   display: block;
 176   width: 150px;
 177   padding: 10px 20px;
 178 }
 179
 180 .components-list li a:hover {
 181   color: #fff;
 182   background-color: #1eb0e9;
 183 }
 184
 185 /* Jumbo header
 186 -------------------------------------------------- */
 187
 188 .docs-header {
 189   height: 530px;
 190   margin-top: 60px;
 191   background-color: #02122b;
 192   background-image: url(../img/header-bg.jpg);
 193   background-size: cover;
 194   box-shadow: inset 0 0 10px rgba(0,0,0,.6);
 195 }
 196
 197 .docs-header-text {
 198   position: relative;
 199   z-index: 3;
 200   top: 140px;
 201   width: 800px;
 202   margin: 0 auto;
 203   color: #fff;
 204   text-align: center;
 205   text-shadow: 0 0 5px #000;
 206   -webkit-animation: fadeintext 2s;
 207      -moz-animation: fadeintext 2s;
 208 }
 209
 210 .docs-header-subtitle {
 211   margin-bottom: 35px;
 212   font-size: 45px;
 213   font-weight: 300;
 214   line-height: 55px;
 215 }
 216
 217 .docs-btn {
 218   display: inline-block;
 219   padding: 18px 40px;
 220   color: #fff;
 221   font-size: 24px;
 222   font-weight: 700;
 223   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 224   text-decoration: none;
 225   line-height: 1;
 226   background-color: #f26629; /* Old browsers */
 227   background-image: -moz-linear-gradient(top,  #f95e0c 0%, #e53003 100%); /* FF3.6+ */
 228   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#e53003)); /* Chrome,Safari4+ */
 229   background-image: -webkit-linear-gradient(top,  #f95e0c 0%,#e53003 100%); /* Chrome10+,Safari5.1+ */
 230   background-image: -o-linear-gradient(top,  #f95e0c 0%,#e53003 100%); /* Opera 11.10+ */
 231   background-image: -ms-linear-gradient(top,  #f95e0c 0%,#e53003 100%); /* IE10+ */
 232   background-image: linear-gradient(to bottom,  #f95e0c 0%,#e53003 100%); /* W3C */
 233   border-radius: 3px;
 234   box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 5px rgba(0,0,0,.2);
 235 }
 236
 237 .docs-btn:hover {
 238   color: #fff;
 239   background-color: #ff7234; /* Old browsers */
 240   background-image: -moz-linear-gradient(top,  #f95e0c 0%, #cd2a02 100%); /* FF3.6+ */
 241   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#cd2a02)); /* Chrome,Safari4+ */
 242   background-image: -webkit-linear-gradient(top,  #f95e0c 0%,#cd2a02 100%); /* Chrome10+,Safari5.1+ */
 243   background-image: -o-linear-gradient(top,  #f95e0c 0%,#cd2a02 100%); /* Opera 11.10+ */
 244   background-image: -ms-linear-gradient(top,  #f95e0c 0%,#cd2a02 100%); /* IE10+ */
 245   background-image: linear-gradient(to bottom,  #f95e0c 0%,#cd2a02 100%); /* W3C */
 246 }
 247
 248 .docs-btn:active {
 249   padding: 19px 40px 17px;
 250   background-color: #cd2a02;
 251   background-image: none;
 252   box-shadow: inset 0 0 5px rgba(0,0,0,.4);
 253 }
 254
 255 /* Styles for the social media buttons */
 256 .social {
 257   position: absolute;
 258   bottom: 0;
 259   left: 0;
 260   right: 0;
 261   padding: 20px 0;
 262   background-color: rgba(0,0,0,.3);
 263   -webkit-animation: fadeinsocial 2.5s;
 264      -moz-animation: fadeinsocial 2.5s;
 265 }
 266
 267 .social ul {
 268   height: 20px;
 269   padding-left: 50px;
 270   list-style: none;
 271   text-align: center;
 272 }
 273
 274 .social li {
 275   display: inline-block;
 276   height: 20px;
 277   padding: 0;
 278   vertical-align: top;
 279 }
 280
 281 /* Overiding our framework button styles so our social buttons aren't messed up */
 282 .twitter-follow-button,
 283 .twitter-follow-button:hover,
 284 .twitter-follow-button:active,
 285 .twitter-share-button,
 286 .twitter-share-button:hover,
 287 .twitter-share-button:active {
 288   padding: 0;
 289   border: none;
 290   border-radius: 0;
 291   background: none;
 292   box-shadow: none;
 293 }
 294
 295
 296 /* iPhone previewer
 297 -------------------------------------------------- */
 298
 299 .iphone {
 300   position: relative;
 301   top: 50px;
 302   float: right;
 303   width: 375px;
 304   height: 806px;
 305   font-family: "Helvetica Neue", sans-serif;
 306   background-image: url("../img/iphone.png");
 307 }
 308
 309 .iphone-fixed,
 310 .iphone-bottom {
 311   left: 50%;
 312   margin-left: 125px;
 313 }
 314
 315 .iphone-fixed {
 316   position: fixed;
 317   top: 30px;
 318 }
 319
 320 .iphone-bottom {
 321   position: absolute;
 322   top: auto;
 323   bottom: 130px;
 324 }
 325
 326 .iphone .iphone-content {
 327   position: absolute;
 328   top: 147px;
 329   left: 27px;
 330   width: 320px;
 331   height: 548px;
 332   overflow: hidden;
 333   background-color: white;
 334 }
 335
 336 .iphone .content,
 337 .component-example .content {
 338   position: absolute;
 339   top: 0;
 340   left: 0;
 341   right: 0;
 342   bottom: 0;
 343 }
 344
 345 .component-example .content {
 346   position: relative;
 347 }
 348
 349 /* Mad override to avoid it being styled like the block level link */
 350 .component-example .list a[data-transition="slide-out"],
 351 .iphone .list a[data-transition="slide-out"] {
 352   padding: 0;
 353   display: inline;
 354   margin: 0;
 355   color: #0882f0;
 356 }
 357
 358 /* Content layout
 359 -------------------------------------------------- */
 360
 361 .content-section {
 362   position: relative;
 363   padding-top: 80px;
 364 }
 365
 366 /* Section header
 367 -------------------------------------------------- */
 368
 369 .section-header {
 370   padding-bottom: 30px;
 371   text-align: center;
 372   border-bottom: 1px solid #ddd;
 373 }
 374
 375 .section-title {
 376   font-size: 60px;
 377   font-weight: 700;
 378   line-height: 1;
 379   color: #333;
 380 }
 381
 382 .section-description {
 383   font-weight: 300;
 384   font-size: 24px;
 385   color: #777;
 386 }
 387
 388 .section-informational {
 389   border-top: 1px solid #ddd;
 390   border-bottom: 1px solid #ddd;
 391   background-color: #fafafa;
 392   padding-bottom: 70px;
 393 }
 394
 395 /* Getting started & page setup
 396 -------------------------------------------------- */
 397
 398 .steps {
 399   overflow: hidden;
 400   padding-top: 40px;
 401 }
 402
 403 .steps .step {
 404   float: left;
 405   width: 306px;
 406   margin-right: 40px;
 407   list-style: none;
 408 }
 409
 410 .step-title {
 411   font-size: 18px;
 412   font-weight: 700;
 413 }
 414
 415 .step-description {
 416   color: #777;
 417   margin-bottom: 10px;
 418 }
 419
 420 .steps .step:last-child {
 421   margin-right: 0;
 422 }
 423
 424 /* Components
 425 -------------------------------------------------- */
 426
 427 .section-components {
 428   padding-bottom: 350px;
 429   background-color: #fff;
 430 }
 431
 432 .component {
 433   position: relative;
 434   padding-top: 80px;
 435   width: 550px;
 436   margin-top: 1px;
 437   font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
 438   font-weight: 300;
 439   opacity: .3; /* Fade content back until the user scrolls to it. */
 440   -webkit-transition: opacity .2s ease-in-out;
 441 }
 442
 443 .component:last-child {
 444   margin-bottom: 320px;
 445 }
 446
 447 /* Active class applied when the specific component is in focus */
 448 .component.active {
 449   opacity: 1;
 450 }
 451
 452 .component-title {
 453   font-size: 28px;
 454   font-weight: 300;
 455   line-height: 35px;
 456 }
 457
 458 .component-description {
 459   margin-bottom: 13px;
 460   color: #777;
 461   font-size: 18px;
 462   line-height: 26px;
 463   font-weight: 300;
 464 }
 465
 466 .component-note {
 467   margin-top: 10px;
 468   color: #999;
 469   font-size: 14px;
 470   line-height: 18px;
 471   font-style: italic;
 472 }
 473
 474 .component-title + .component-example {
 475   margin-top: 13px;
 476 }
 477
 478 .content-section .prettyprint,
 479 .content-section .instruction-code {
 480   margin-top: 10px;
 481   padding: 10px;
 482   overflow-x: auto;
 483   font-size: 13px;
 484   font-family: monaco, menlo, monospace;
 485   color: #777;
 486   background-color: #fafafa;
 487   border: 1px solid #ddd;
 488   border-radius: 3px;
 489 }
 490
 491 .prettyprint + .component-description,
 492 .component-note + .component-description {
 493   margin-top: 36px;
 494 }
 495
 496 /* Content specific styles
 497 -------------------------------------------------- */
 498
 499 /* Make the example bars stay put in the docs */
 500 .iphone [class*="bar"] {
 501   position: absolute;
 502 }
 503
 504 /* Component examples on mobile */
 505 .component-example {
 506   position: relative;
 507   display: none;
 508   margin-bottom: 20px;
 509   font-family: "Helvetica Neue", sans-serif;
 510   font-weight: normal;
 511 }
 512
 513 .component-example-fullbleed {
 514   margin-right: -20px;
 515   margin-left: -20px;
 516 }
 517
 518 /* Bar examples */
 519 .component-example [class*="bar"] {
 520   position: relative;
 521 }
 522
 523 .component-example .bar-header-secondary {
 524   top: 0;
 525 }
 526
 527 /* List examples */
 528 .component-example .list {
 529   margin-left: 0;
 530   margin-right: 0;
 531   background-color: #fff;
 532 }
 533
 534 .component-example .list li {
 535   padding-right: 70px;
 536   padding-left: 20px;
 537 }
 538
 539 .component-example .list.inset {
 540   margin: 0;
 541 }
 542
 543 .iphone .list .segmented-controller-item,
 544 .component-example .list .segmented-controller-item {
 545   border-bottom-width: 0;
 546 }
 547
 548 .iphone .list {
 549   margin-left: 0;
 550   margin-right: 0;
 551 }
 552
 553 /* Button examples */
 554 #buttons [class*="button"],
 555 #buttonsCounts [class*="button"],
 556 #blockButtons [class*="button"] {
 557   margin-bottom: 10px;
 558 }
 559
 560 #buttons [class*="button"]:last-child,
 561 #buttonsCounts [class*="button"]:last-child,
 562 #blockButtons [class*="button"]:last-child {
 563   margin-bottom: 0;
 564 }
 565
 566 #blockButtonsInPhone .button-block {
 567   margin-left: 5px;
 568   margin-right: 5px;
 569 }
 570
 571 #push .component-example {
 572   height: 108px;
 573   overflow: hidden;
 574 }
 575
 576 #push .component-example .list {
 577   border-left: 1px solid rgba(0, 0, 0, .1);
 578   border-right: 1px solid rgba(0, 0, 0, .1);
 579 }
 580
 581 .iphone .btn-section .button {
 582   display: block;
 583   margin: 0 auto;
 584 }
 585
 586 .iphone .block-btn-section .block-button {
 587   margin-top: 10px;
 588 }
 589
 590 .iphone .block-btn-section .block-button:first-child {
 591   margin-top: 100px;
 592 }
 593
 594 #buttonsInPhone,
 595 #buttonsCountsInPhone {
 596   text-align: center;
 597 }
 598
 599 #buttonsInPhone [class*="button"],
 600 #buttonsCountsInPhone [class*="button"] {
 601   margin-top: 10px;
 602 }
 603
 604 #blockButtonsInPhone [class*="button"] {
 605   margin-top: 5px;
 606 }
 607
 608 /* Counts examples */
 609 #countsInPhone {
 610   text-align: center;
 611 }
 612
 613 #countsInPhone [class*="count"] {
 614   margin-top: 10px;
 615 }
 616
 617 /* Form examples */
 618 .component-example form [class*="button"] {
 619   margin-bottom: 0;
 620 }
 621
 622 .component .input-group label {
 623   padding: 9px 10px 9px 13px;
 624 }
 625
 626 /* Toggle examples */
 627 #toggles .toggle {
 628   display: inline-block;
 629   margin-right: 10px;
 630 }
 631 #togglesInPhone .toggle {
 632   margin: 10px auto 0;
 633 }
 634
 635 /* Popover examples */
 636 .component-example .popover {
 637   position: relative;
 638   display: block;
 639   top: 0;
 640   margin-top: 50px;
 641   opacity: 1;
 642 }
 643 #popoversInPhone .popover {
 644   position: absolute;
 645   display: block !important;
 646   top: 72px;
 647   opacity: 1 !important;
 648 }
 649
 650 /* Slider examples */
 651 .component-example-fullbleed .slider,
 652 .component-example-fullbleed .slider li,
 653 .component-example-fullbleed .slider li img,
 654 #slidersInPhone .slider,
 655 #slidersInPhone .slider li,
 656 #slidersInPhone .slider li img {
 657   width: 100%;
 658 }
 659
 660 #slidersInPhone .slider {
 661   position: absolute;
 662   top: 0;
 663   left: 0;
 664 }
 665
 666 .slider .slide-text {
 667   position: absolute;
 668   top: 45%;
 669   left: 0;
 670   width: 100%;
 671   color: #fff;
 672   text-align: center;
 673   font-size: 24px;
 674   font-weight: 300;
 675   text-shadow: 0 0 10px rgba(0,0,0,.5);
 676 }
 677
 678 /* Give inset components in the iphone correct margin */
 679 .iphone .list.inset,
 680 #segmentedControllersInPhone .segmented-controller,
 681 #formsInPhone form,
 682 #formsWithInputGroupInPhone form,
 683 #formsWithInputGroupAndLabelsInPhone form {
 684   margin: 10px;
 685 }
 686
 687 #pushInPhone .list {
 688   margin-top: 44px;
 689 }
 690
 691 /* Footer
 692 -------------------------------------------------- */
 693
 694 .docs-footer {
 695   padding-bottom: 100px;
 696   overflow: hidden;
 697   color: #fff;
 698   background-color: #151515;
 699 }
 700
 701 .docs-footer .docs-inner-wrapper {
 702   text-align: center
 703 }
 704
 705 .docs-footer h3 {
 706   font-size: 24px;
 707   color: #fefefe;
 708   font-weight: 700;
 709 }
 710
 711 .docs-footer p {
 712   font-size: 18px;
 713   color: #777;
 714 }
 715
 716 .avatars {
 717   display: block;
 718   width: 590px;
 719   margin: 30px auto 0;
 720 }
 721
 722 .avatars li {
 723   float: left;
 724   height: 170px;
 725   width: 170px;
 726   margin-right: 40px;
 727   list-style: none;
 728 }
 729
 730 .avatars .avatar {
 731   display: block;
 732   height: 100%;
 733   width: 100%;
 734   margin-bottom: 15px;
 735   overflow: hidden;
 736   border-radius: 100%;
 737 }
 738
 739 .avatars li:last-child {
 740   margin-right: 0;
 741 }
 742
 743 .avatars img {
 744   width: 170px;
 745   height: 170px;
 746 }
 747
 748 /* Banner for Mozilla and IE about component rendering poorly
 749 ------------------------------------------------------------- */
 750 .notice-banner {
 751   cursor: pointer;
 752   height: 0;
 753   opacity: 0;
 754   padding: 0;
 755   color: #333;
 756   font-size: 16px;
 757   text-align: center;
 758   background-color: #fff9c4; /* Old browsers */
 759   background-image: -moz-linear-gradient(top,  #fff9c4 0%, #fff38d 100%); /* FF3.6+ */
 760   background-image: -ms-linear-gradient(top,  #fff9c4 0%,#fff38d 100%); /* IE10+ */
 761   background-image: linear-gradient(to bottom,  #fff9c4 0%,#fff38d 100%); /* W3C */
 762   box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
 763   -moz-animation: shownotice 1s infinite;
 764 }
 765
 766 /* Media queries
 767 -------------------------------------------------- */
 768
 769 @media only screen and (max-width: 1039px) {
 770   .docs-inner-wrapper  {
 771     width: 920px;
 772   }
 773
 774   .docs-header-text {
 775     width: 700px;
 776   }
 777
 778   .steps .step {
 779     width: 280px;
 780   }
 781
 782   .component {
 783     width: 500px;
 784   }
 785
 786   .iphone-fixed,
 787   .iphone-bottom {
 788     margin-left: 85px;
 789   }
 790 }
 791 @media only screen and (min-width: 768px) and (max-width: 959px) {
 792   .docs-header-text,
 793   .docs-inner-wrapper  {
 794     width: 700px;
 795   }
 796
 797   .docs-header {
 798     height: 400px;
 799   }
 800
 801   .docs-header-text {
 802     top: 75px;
 803   }
 804
 805   .steps .step {
 806     width: 205px;
 807   }
 808
 809   .component {
 810     width: 300px;
 811   }
 812
 813   .iphone-fixed,
 814   .iphone-bottom {
 815     margin-left: -25px;
 816   }
 817 }
 818 @media only screen and (max-width: 767px) {
 819   .docs-outer-wrapper,
 820   .docs-inner-wrapper,
 821   .docs-header-text,
 822   .docs-content,
 823   .component {
 824     width: auto;
 825   }
 826
 827   .docs-inner-wrapper {
 828     padding-right: 20px;
 829     padding-left: 20px;
 830   }
 831
 832   /* Have the masthead scroll away instead of being fixed */
 833   .docs-masthead {
 834     position: absolute;
 835     padding: 2px 0 1px;
 836   }
 837
 838   .docs-masthead-title {
 839     font-size: 18px;
 840     text-align: center;
 841   }
 842
 843   /* Hide the navigation on mobile. Scroll away! */
 844   .docs-navigation {
 845     display: none;
 846   }
 847
 848   .docs-header {
 849     height: 320px;
 850     margin-top: 44px;
 851   }
 852
 853   .docs-header-text {
 854     top: 50px;
 855   }
 856
 857   .docs-header-subtitle {
 858     margin-bottom: 18px;
 859     font-size: 24px;
 860     line-height: 30px;
 861   }
 862
 863   .docs-btn {
 864     width: 100%;
 865     padding: 15px 0;
 866     font-size: 18px;
 867   }
 868
 869   .docs-btn:active {
 870     padding: 16px 0 14px;
 871   }
 872
 873   .social ul {
 874     height: auto;
 875   }
 876
 877   .social li {
 878     padding-bottom: 15px;
 879   }
 880
 881   .social li:last-child {
 882     padding-bottom : 0;
 883   }
 884
 885   .content-section {
 886     padding-top: 50px;
 887   }
 888
 889   .section-header {
 890     padding-bottom: 50px;
 891   }
 892
 893   .section-title {
 894     margin-bottom: 5px;
 895     font-size: 40px;
 896   }
 897
 898   .section-description {
 899     font-size: 18px;
 900     line-height: 24px;
 901   }
 902
 903   .section-components {
 904     padding-bottom: 0px;
 905   }
 906
 907   .section-informational {
 908     padding-bottom: 70px;
 909   }
 910
 911   .steps .step {
 912     float: none;
 913     width: auto;
 914     margin: 0 0 30px 0;
 915   }
 916
 917   .steps .step:last-child {
 918     margin: 0;
 919   }
 920
 921   .notice-banner {
 922     position: relative;
 923     top: 0;
 924     font-size: 14px;
 925     line-height: 18px;
 926   }
 927
 928   .notice-banner:after {
 929     display: none;
 930   }
 931
 932   .component {
 933     padding: 50px 20px;
 934     margin-left: -20px;
 935     margin-right: -20px;
 936     opacity: 1;
 937     border-bottom: 1px solid #ddd;
 938   }
 939
 940   .component:last-child {
 941     margin-bottom: 80px;
 942   }
 943
 944   .component-example {
 945     display: block;
 946   }
 947
 948   /* Hacky way to get parent of slider position absolute for smooth sliding */
 949   #sliders .slider {
 950     position: absolute;
 951     top: 0;
 952     left: 0;
 953     z-index: 10000;
 954   }
 955   #sliders .prettyprint:not(.js) {
 956     margin-top: 230px;
 957   }
 958
 959   .avatars {
 960     overflow: hidden;
 961     width: 280px;
 962     margin: 10px auto 0;
 963   }
 964
 965   .avatars li {
 966     height: 86px;
 967     width: 86px;
 968     margin-right: 10px;
 969   }
 970
 971   .avatars li:last-child {
 972     margin-right: 0;
 973   }
 974
 975   .avatars img {
 976     width: 86px;
 977     height: 86px;
 978   }
 979
 980   /* Hide the iPhone on mobile */
 981   .iphone {
 982     display: none;
 983   }
 984 }
 985
 986 @media only screen and (max-width: 320px) {
 987   .docs-header-text {
 988     top: 30px;
 989   }
 990 }
 991
 992 /* Animations
 993 -------------------------------------------------- */
 994
 995 @-webkit-keyframes fadeintext {
 996   0% {
 997    opacity: 0;
 998    -webkit-transform: translateY(20px);
 999   }
1000   50% {
1001    opacity: 0;
1002    -webkit-transform: translateY(20px);
1003   }
1004   100% {
1005    opacity: 1;
1006    -webkit-transform: translateY(0);
1007   }
1008 }
1009
1010 @-webkit-keyframes fadeinsocial {
1011   0% {
1012    opacity: 0;
1013   }
1014   85% {
1015    opacity: 0;
1016   }
1017   100% {
1018    opacity: 1;
1019   }
1020 }
1021
1022 @-moz-keyframes fadeintext {
1023   0% {
1024    opacity: 0;
1025    -moz-transform: translateY(20px);
1026   }
1027   50% {
1028    opacity: 0;
1029    -moz-transform: translateY(20px);
1030   }
1031   100% {
1032    opacity: 1;
1033    -moz-transform: translateY(0);
1034   }
1035 }
1036
1037 @-moz-keyframes fadeinsocial {
1038   0% {
1039    opacity: 0;
1040   }
1041   85% {
1042    opacity: 0;
1043   }
1044   100% {
1045    opacity: 1;
1046   }
1047 }
1048
1049 @-moz-keyframes shownotice {
1050   0% {
1051     min-height: 30px;
1052     padding: 20px 0;
1053     opacity: 1;
1054   }
1055   100% {
1056     min-height: 30px;
1057     padding: 20px 0;
1058     opacity: 1;
1059   }
1060 }
1061
1062 /* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla
1063 -------------------------------------------------- */
1064
1065 /* Bars.css */
1066 [class*="bar-"] {
1067   -moz-box-sizing: border-box;
1068 }
1069 .bar-title,
1070 .tab-inner {
1071   display: -moz-box;
1072   -moz-box-orient: horizontal;
1073 }
1074 .tab-item {
1075   -moz-box-sizing: border-box;
1076   -moz-box-flex: 1;
1077 }
1078 .bar-title [class*="button"] {
1079   -moz-box-flex: 0;
1080 }
1081 .bar-title .segmented-controller {
1082   -moz-box-flex: 1;
1083 }
1084
1085  /* forms.css */
1086 select,
1087 textarea,
1088 input[type="text"],
1089 input[type=search],
1090 input[type="password"],
1091 input[type="datetime"],
1092 input[type="datetime-local"],
1093 input[type="date"],
1094 input[type="month"],
1095 input[type="time"],
1096 input[type="week"],
1097 input[type="number"],
1098 input[type="email"],
1099 input[type="url"],
1100 input[type="tel"],
1101 input[type="color"],
1102 .input-group {
1103   -moz-box-sizing: border-box;
1104 }
1105
1106 /* lists.css */
1107 .list.inset  {
1108   -moz-box-sizing: border-box;
1109 }
1110
1111 /* popovers.css */
1112 .popover-header {
1113   display: -moz-box;
1114 }
1115
1116 /* segmented-controller.css*/
1117 .segmented-controller {
1118   display: -moz-box;
1119   -moz-box-orient: horizontal;
1120 }
1121 .segmented-controller li {
1122   -moz-box-flex: 1;
1123 }
1124
1125 /* Get tab-bar to look 1/2way decent */
1126 .iphone .tab-item {
1127   min-width: 64px;
1128 }