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