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