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

   1 /**
   2  * ==================================
   3  * Ratchet v1.0.0
   4  * Licensed under The MIT License
   5  * http://opensource.org/licenses/MIT
   6  * ==================================
   7  */
   8
   9 /* Hard reset
  10 -------------------------------------------------- */
  11
  12 html,
  13 body,
  14 div,
  15 span,
  16 iframe,
  17 h1,
  18 h2,
  19 h3,
  20 h4,
  21 h5,
  22 h6,
  23 p,
  24 blockquote,
  25 pre,
  26 a,
  27 abbr,
  28 acronym,
  29 address,
  30 big,
  31 cite,
  32 code,
  33 del,
  34 dfn,
  35 em,
  36 img,
  37 ins,
  38 kbd,
  39 q,
  40 s,
  41 samp,
  42 small,
  43 strike,
  44 strong,
  45 sub,
  46 sup,
  47 tt,
  48 var,
  49 b,
  50 u,
  51 i,
  52 center,
  53 dl,
  54 dt,
  55 dd,
  56 ol,
  57 ul,
  58 li,
  59 fieldset,
  60 form,
  61 label,
  62 legend,
  63 table,
  64 caption,
  65 tbody,
  66 tfoot,
  67 thead,
  68 tr,
  69 th,
  70 td,
  71 article,
  72 aside,
  73 canvas,
  74 details,
  75 embed,
  76 figure,
  77 figcaption,
  78 footer,
  79 header,
  80 hgroup,
  81 menu,
  82 nav,
  83 output,
  84 section,
  85 summary,
  86 time,
  87 audio,
  88 video {
  89   padding: 0;
  90   margin: 0;
  91   border: 0;
  92 }
  93
  94 /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
  95 html {
  96   -webkit-text-size-adjust: 100%;
  97       -ms-text-size-adjust: 100%;
  98 }
  99
 100 /* Base styles
 101 -------------------------------------------------- */
 102
 103 body {
 104   position: fixed;
 105   top: 0;
 106   right: 0;
 107   bottom: 0;
 108   left: 0;
 109   font: 14px/1.25 "Helvetica Neue", sans-serif;
 110   color: #222;
 111   background-color: #fff;
 112 }
 113
 114 /* Universal link styling */
 115 a {
 116   color: #0882f0;
 117   text-decoration: none;
 118   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */
 119 }
 120
 121 /* Wrapper to be used around all content not in .bar-title and .bar-tab */
 122 .content {
 123   position: fixed;
 124   top: 0;
 125   right: 0;
 126   bottom: 0;
 127   left: 0;
 128   overflow: auto;
 129   background: #fff;
 130   -webkit-transition-property: top, bottom;
 131           transition-property: top, bottom;
 132   -webkit-transition-duration: .2s, .2s;
 133           transition-duration: .2s, .2s;
 134   -webkit-transition-timing-function: linear, linear;
 135           transition-timing-function: linear, linear;
 136   -webkit-overflow-scrolling: touch;
 137 }
 138
 139 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
 140    Note: This is a bug for "-webkit-overflow-scrolling: touch" */
 141 .content > * {
 142   -webkit-transform: translateZ(0px);
 143           transform: translateZ(0px);
 144 }
 145
 146 /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
 147 .content-padded {
 148   padding: 10px;
 149 }
 150
 151 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 152    Note: For these to work, content must come after both bars in the markup */
 153 .bar-title ~ .content {
 154   top: 44px;
 155 }
 156 .bar-tab ~ .content {
 157   bottom: 51px;
 158 }
 159 .bar-header-secondary ~ .content {
 160   top: 88px;
 161 }/* General bar styles
 162 -------------------------------------------------- */
 163
 164 [class*="bar-"] {
 165   position: fixed;
 166   right: 0;
 167   left: 0;
 168   z-index: 10;
 169   height: 44px;
 170   padding: 5px;
 171   box-sizing: border-box;
 172 }
 173
 174 /* Modifier class to dock any bar to top of viewport */
 175 .bar-header {
 176   top: 0;
 177 }
 178
 179 /* Modifier class to dock any bar to bottom of viewport */
 180 .bar-footer {
 181   bottom: 0;
 182 }
 183
 184 /* Modifier class to dock any bar below .bar-title */
 185 .bar-header-secondary {
 186   top: 45px;
 187 }
 188
 189 /* Modifier class to dock any bar above .bar-tab */
 190 .bar-footer-secondary {
 191   bottom: 51px;
 192 }
 193
 194 /* Generic bar for wrapping buttons, segmented controllers, etc. */
 195 .bar-standard {
 196   background-color: #f2f2f2;
 197   background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
 198   background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
 199   border-bottom: 1px solid #aaa;
 200   box-shadow: inset 0 1px 1px -1px #fff;
 201 }
 202
 203 /* Flip border position to top for footer bars */
 204 .bar-footer.bar-standard,
 205 .bar-footer-secondary.bar-standard {
 206   border-top: 1px solid #aaa;
 207   border-bottom-width: 0;
 208 }
 209
 210 /* Title bar
 211 -------------------------------------------------- */
 212
 213 /* Bar docked to top of viewport for showing page title and actions */
 214 .bar-title {
 215   top: 0;
 216   display: -webkit-box;
 217   display: box;
 218   background-color: #1eb0e9;
 219   background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
 220   background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
 221   border-bottom: 1px solid #0e5895;
 222   box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
 223   -webkit-box-orient: horizontal;
 224           box-orient: horizontal;
 225 }
 226
 227 /* Centered text in the .bar-title */
 228 .bar-title .title {
 229   position: absolute;
 230   top: 0;
 231   left: 0;
 232   display: block;
 233   width: 100%;
 234   font-size: 20px;
 235   font-weight: bold;
 236   line-height: 44px;
 237   color: #fff;
 238   text-align: center;
 239   text-shadow: 0 -1px rgba(0, 0, 0, .5);
 240   white-space: nowrap;
 241 }
 242
 243 .bar-title > a:not([class*="button"]) {
 244   display: block;
 245   width: 100%;
 246   height: 100%;
 247 }
 248
 249 /* Retain specified title color */
 250 .bar-title .title a {
 251   color: inherit;
 252 }
 253
 254 /* Tab bar
 255 -------------------------------------------------- */
 256
 257 /* Bar docked to bottom used for primary app navigation */
 258 .bar-tab {
 259   bottom: 0;
 260   height: 50px;
 261   padding: 0;
 262   background-color: #393939;
 263   background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
 264   background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
 265   border-top: 1px solid #000;
 266   border-bottom-width: 0;
 267   box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
 268 }
 269
 270 /* Wrapper for individual tab */
 271 .tab-inner {
 272   display: -webkit-box;
 273   display: box;
 274   height: 100%;
 275   list-style: none;
 276   -webkit-box-orient: horizontal;
 277           box-orient: horizontal;
 278 }
 279
 280 /* Navigational tab */
 281 .tab-item {
 282   height: 100%;
 283   padding-top: 9px;
 284   text-align: center;
 285   box-sizing: border-box;
 286   -webkit-box-flex: 1;
 287           box-flex: 1;
 288 }
 289
 290 /* Active state for tab */
 291 .tab-item.active {
 292   box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
 293 }
 294
 295 /* Icon for tab  */
 296 .tab-icon {
 297   display: block;
 298   height: 18px;
 299   margin: 0 auto;
 300 }
 301
 302 /* Label for tab */
 303 .tab-label {
 304   margin-top: 1px;
 305   font-size: 10px;
 306   font-weight: bold;
 307   color: #fff;
 308   text-shadow: 0 1px rgba(0, 0, 0, .3);
 309 }
 310
 311 /* Buttons in title bars
 312 -------------------------------------------------- */
 313
 314 /* Generic style for all buttons in .bar-title */
 315 .bar-title [class*="button"] {
 316   position: relative;
 317   z-index: 10; /* Places buttons over full width title */
 318   font-size: 12px;
 319   line-height: 23px;
 320   color: #fff;
 321   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 322   background-color: #1eb0e9;
 323   background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
 324   background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
 325   border: 1px solid #0e5895;
 326   box-shadow: 0 1px rgba(255, 255, 255, .25);
 327   -webkit-box-flex: 0;
 328           box-flex: 0;
 329 }
 330
 331
 332 /* Hacky way to right align buttons outside of flex-box system
 333    Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
 334 .bar-title .title + [class*="button"]:last-child,
 335 .bar-title .button + [class*="button"]:last-child,
 336 .bar-title [class*="button"].pull-right {
 337   position: absolute;
 338   top: 5px;
 339   right: 5px;
 340 }
 341
 342 /* Override standard button active states */
 343 .bar-title .button:active {
 344   color: #fff;
 345   background-color: #0876b1;
 346 }
 347
 348 /* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/)
 349 -------------------------------------------------- */
 350
 351 /* Add relative positioning so :before content is positioned properly */
 352 .bar-title .button-prev,
 353 .bar-title .button-next {
 354   position: relative;
 355 }
 356
 357 /* Prev/next button base styles */
 358 .bar-title .button-prev {
 359   margin-left: 7px; /* Push over to make room for :before content */
 360   border-left: 0;
 361   border-bottom-left-radius: 10px 15px;
 362   border-top-left-radius: 10px 15px;
 363 }
 364 .bar-title .button-next {
 365   margin-right: 7px; /* Push over to make room for :before content */
 366   border-right: 0;
 367   border-top-right-radius: 10px 15px;
 368   border-bottom-right-radius: 10px 15px;
 369 }
 370
 371 /* Pointed part of directional button */
 372 .bar-title .button-prev:before,
 373 .bar-title .button-next:before {
 374   position: absolute;
 375   top: 2px;
 376   width: 27px;
 377   height: 27px;
 378   border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
 379   content: '';
 380   box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
 381   -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
 382                   mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
 383 }
 384 .bar-title .button-prev:before {
 385   left: -5px;
 386   background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
 387   background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
 388   border-left: 1.5px solid rgba(255, 255, 255, .25);
 389   -webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
 390           transform: rotate(-45deg) skew(-10deg, -10deg);
 391 }
 392 .bar-title .button-next:before {
 393   right: -5px;
 394   background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
 395   background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
 396   border-top: 1.5px solid rgba(255, 255, 255, .25);
 397   -webkit-transform: rotate(135deg) skew(-10deg, -10deg);
 398           transform: rotate(135deg) skew(-10deg, -10deg);
 399 }
 400
 401 /* Active states for the directional buttons */
 402 .bar-title .button-prev:active,
 403 .bar-title .button-next:active,
 404 .bar-title .button-prev:active:before,
 405 .bar-title .button-next:active:before {
 406   color: #fff;
 407   background-color: #0876b1;
 408   background-image: none;
 409 }
 410 .bar-title .button-prev:active:before,
 411 .bar-title .button-next:active:before {
 412   content: '';
 413 }
 414 .bar-title .button-prev:active:before {
 415   box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
 416 }
 417 .bar-title .button-next:active:before {
 418   box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
 419 }
 420
 421 /* Block buttons in any bar
 422 -------------------------------------------------- */
 423
 424 /* Add proper padding and replace buttons normal dropshadow with a shine from bar */
 425 [class*="bar"] .button-block {
 426   padding: 7px 0;
 427   margin-bottom: 0;
 428   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8);
 429 }
 430
 431 /* Override standard padding changes for .button-blocks */
 432 [class*="bar"] .button-block:active {
 433   padding: 7px 0;
 434 }
 435
 436 /* Segmented controller in any bar
 437 -------------------------------------------------- */
 438
 439 /* Remove standard segmented bottom margin */
 440 [class*="bar-"] .segmented-controller {
 441   margin-bottom: 0;
 442 }
 443
 444 /* Add margins between segmented controllers and buttons */
 445 [class*="bar-"] .segmented-controller + [class*="button"],
 446 [class*="bar-"] [class*="button"] + .segmented-controller {
 447   margin-left: 5px;
 448 }
 449
 450 /* Segmented controller in a title bar
 451 -------------------------------------------------- */
 452
 453 .bar-title .segmented-controller {
 454   line-height: 18px;
 455   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 456   background-color: #1eb0e9;
 457   background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
 458   background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
 459   border: 1px solid #0e5895;
 460   border-radius: 3px;
 461   box-shadow: 0 1px rgba(255, 255, 255, .25);
 462   -webkit-box-flex: 1;
 463           box-flex: 1;
 464 }
 465
 466 /* Set color for tab border and highlight */
 467 .bar-title .segmented-controller li {
 468   border-left: 1px solid #0e5895;
 469   box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
 470 }
 471
 472 /* Remove inset shadow from first tab or one to the right of the active tab  */
 473 .bar-title .segmented-controller .active + li,
 474 .bar-title .segmented-controller li:first-child {
 475   box-shadow: none;
 476 }
 477
 478 /* Remove left-hand border from first tab */
 479 .bar-title .segmented-controller li:first-child {
 480   border-left-width: 0;
 481 }
 482
 483 /* Depressed state (active) */
 484 .bar-title .segmented-controller li.active {
 485   background-color: #0082c4;
 486   box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
 487 }
 488
 489 /* Set color of links to white */
 490 .bar-title .segmented-controller li > a {
 491   color: #fff;
 492 }
 493
 494
 495 /* Search forms in standard bar
 496 -------------------------------------------------- */
 497
 498 /* Position/size search bar within the bar */
 499 .bar-standard input[type=search] {
 500   height: 32px;
 501   margin: 0;
 502 }/* Lists
 503 -------------------------------------------------- */
 504
 505 /* Remove usual bullet styles from list */
 506 .list {
 507   margin-bottom: 10px;
 508   list-style: none;
 509   background-color: #fff;
 510 }
 511
 512 /* Pad each list item and add dividers */
 513 .list li {
 514   position: relative;
 515   padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
 516   border-bottom: 1px solid rgba(0, 0, 0, .1);
 517 }
 518
 519 /* Give top border to first list items */
 520 .list li:first-child {
 521   border-top: 1px solid rgba(0, 0, 0, .1);
 522 }
 523
 524 /* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
 525 .list li > a:not([class*="button"]) {
 526   position: relative;
 527   display: block;
 528   padding: inherit;
 529   margin: -20px -60px -20px -10px;
 530   color: inherit;
 531 }
 532
 533 /* Inset list
 534 -------------------------------------------------- */
 535
 536 .list.inset {
 537   width: auto;
 538   margin-right: 10px;
 539   margin-left: 10px;
 540   border: 1px solid rgba(0, 0, 0, .1);
 541   border-radius: 6px;
 542   box-sizing: border-box;
 543 }
 544
 545 /* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
 546 .list.inset li:first-child {
 547   border-top-width: 0;
 548 }
 549 .list.inset li:last-child {
 550   border-bottom-width: 0;
 551 }
 552
 553
 554 /* List dividers
 555 -------------------------------------------------- */
 556
 557 .list .list-divider {
 558   position: relative;
 559   top: -1px;
 560   padding-top: 6px;
 561   padding-bottom: 6px;
 562   font-size: 12px;
 563   font-weight: bold;
 564   line-height: 18px;
 565   text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
 566   background-color: #f8f8f8;
 567   background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%);
 568   background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%);
 569   border-top: 1px solid rgba(0, 0, 0, .1);
 570   border-bottom: 1px solid rgba(0, 0, 0, .1);
 571   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
 572 }
 573
 574 /* Rounding first divider on inset lists and remove border on the top */
 575 .list.inset .list-divider:first-child {
 576   top: 0;
 577   border-top-width: 0;
 578   border-radius: 6px 6px 0 0;
 579 }
 580
 581 /* Rounding last divider on inset lists */
 582 .list.inset .list-divider:last-child {
 583   border-radius: 0 0 6px 6px;
 584 }
 585
 586 /* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
 587 -------------------------------------------------- */
 588 .list .chevron,
 589 .list [class*="button"],
 590 .list [class*="count"],
 591 .list .toggle {
 592   position: absolute;
 593   top: 50%;
 594   right: 10px;
 595 }
 596
 597  /* Position chevrons/counts vertically centered on the right in list items */
 598 .list .chevron,
 599 .list [class*="count"] {
 600   margin-top: -10px; /* Half height of chevron */
 601 }
 602
 603 /* Push count over if there's a sibling chevron */
 604 .list .chevron + [class*="count"] {
 605   right: 30px;
 606 }
 607
 608 /* Position buttons vertically centered on the right in list items */
 609 .list [class*="button"] {
 610   left: auto;
 611   margin-top: -14px; /* Half height of button */
 612 }
 613
 614 .list .toggle {
 615   margin-top: -15px; /* Half height of toggle */
 616 }/* Forms
 617 -------------------------------------------------- */
 618
 619 /* Force form elements to inherit font styles */
 620 input,
 621 textarea,
 622 button,
 623 select {
 624   font-family: inherit;
 625   font-size: inherit;
 626 }
 627
 628 /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
 629 select,
 630 textarea,
 631 input[type="text"],
 632 input[type=search],
 633 input[type="password"],
 634 input[type="datetime"],
 635 input[type="datetime-local"],
 636 input[type="date"],
 637 input[type="month"],
 638 input[type="time"],
 639 input[type="week"],
 640 input[type="number"],
 641 input[type="email"],
 642 input[type="url"],
 643 input[type="tel"],
 644 input[type="color"],
 645 .input-group {
 646   width: 100%;
 647   height: 40px;
 648   padding: 10px;
 649   margin-bottom: 10px;
 650   background: #fff;
 651   border: 1px solid rgba(0, 0, 0, .2);
 652   border-radius: 3px;
 653   box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
 654   -webkit-appearance: none;
 655   box-sizing: border-box;
 656 }
 657
 658 /* Fully round search input */
 659 input[type=search] {
 660   height: 34px;
 661   font-size: 14px;
 662   border-radius: 30px;
 663 }
 664
 665 /* Allow text area's height to grow larger than a normal input */
 666 textarea {
 667   height: auto;
 668 }
 669
 670 /* Style select button to look like part of the Ratchet's style */
 671 select {
 672   height: auto;
 673   font-size: 14px;
 674   background-color: #f8f8f8;
 675   background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
 676   background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
 677   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
 678 }
 679
 680
 681 /* Input groups (cluster multiple inputs together into a single group)
 682 -------------------------------------------------- */
 683
 684 /* Reset from initial form setup styles */
 685 .input-group {
 686   width: auto;
 687   height: auto;
 688   padding: 0;
 689 }
 690
 691 /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
 692 .input-group input {
 693   margin-bottom: 0;
 694   background-color: transparent;
 695   border: 0;
 696   border-bottom: 1px solid rgba(0, 0, 0, .2);
 697   border-radius: 0;
 698   box-shadow: none;
 699 }
 700
 701 /* Remove bottom border on last input to avoid double bottom border */
 702 .input-group input:last-child {
 703   border-bottom-width: 0;
 704 }
 705
 706 /* Input groups with labels
 707 -------------------------------------------------- */
 708
 709 /* To use labels with input groups, wrap a label and an input in an .input-row */
 710 .input-row {
 711   overflow: hidden;
 712   border-bottom: 1px solid rgba(0, 0, 0, .2);
 713 }
 714
 715 /* Remove bottom border on last input-row to avoid double bottom border */
 716 .input-row:last-child {
 717   border-bottom-width: 0;
 718 }
 719
 720 /* Labels get floated left with a set percentage width */
 721 .input-row label {
 722   float: left;
 723   width: 25%;
 724   padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
 725   font-weight: bold;
 726 }
 727
 728 /* Actual inputs float to right of labels and also have a set percentage */
 729 .input-row label + input {
 730   float: right;
 731   width: 65%;
 732   padding-left: 0;
 733   margin-bottom: 0;
 734   border-bottom: 0;
 735 }/* General button styles
 736 -------------------------------------------------- */
 737
 738 [class*="button"] {
 739   position: relative;
 740   display: inline-block;
 741   padding: 4px 12px;
 742   margin: 0;
 743   font-weight: bold;
 744   line-height: 18px;
 745   color: #333;
 746   text-align: center;
 747   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 748   vertical-align: top;
 749   cursor: pointer;
 750   background-color: #f8f8f8;
 751   background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
 752   background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
 753   border: 1px solid rgba(0, 0, 0, .3);
 754   border-radius: 3px;
 755   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
 756 }
 757
 758 /* Active */
 759 [class*="button"]:active {
 760   padding-top: 5px;
 761   padding-bottom: 3px;
 762   color: #333;
 763   background-color: #ccc;
 764   background-image: none;
 765   box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
 766 }
 767
 768 /* Button modifiers
 769 -------------------------------------------------- */
 770
 771 /* Overriding styles for buttons with modifiers  */
 772 .button-main,
 773 .button-positive,
 774 .button-negative {
 775   color: #fff;
 776   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 777 }
 778
 779 /* Main button */
 780 .button-main {
 781   background-color: #1eafe7;
 782   background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
 783   background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
 784   border: 1px solid #117aaa;
 785 }
 786
 787 /* Positive button  */
 788 .button-positive {
 789   background-color: #34ba15;
 790   background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
 791   background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
 792   border: 1px solid #278f0f;
 793 }
 794
 795 /* Negative button  */
 796 .button-negative {
 797   background-color: #e71e1e;
 798   background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
 799   background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
 800   border: 1px solid #b51a1a;
 801 }
 802
 803 /* Active state for buttons with modifiers */
 804 .button-main:active,
 805 .button-positive:active,
 806 .button-negative:active {
 807   color: #fff;
 808 }
 809 .button-main:active {
 810   background-color: #0876b1;
 811 }
 812 .button-positive:active {
 813   background-color: #298f11;
 814 }
 815 .button-negative:active {
 816   background-color: #b21a1a;
 817 }
 818
 819 /* Block level buttons (full width buttons) */
 820 .button-block {
 821   display: block;
 822   padding: 11px 0 13px;
 823   margin-bottom: 10px;
 824   font-size: 16px;
 825 }
 826
 827 /* Active state for block level buttons */
 828 .button-block:active {
 829   padding: 12px 0;
 830 }
 831
 832 /* Counts in buttons
 833 -------------------------------------------------- */
 834
 835 /* Generic styles for all counts within buttons */
 836 [class*="button"] [class*="count"] {
 837   padding-top: 2px;
 838   padding-bottom: 2px;
 839   margin-right: -4px;
 840   margin-left: 4px;
 841   text-shadow: none;
 842   background-color: rgba(0, 0, 0, .2);
 843   box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff;
 844 }
 845
 846 /* Position counts within block level buttons
 847    Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
 848    stays at true center of button */
 849 .button-block [class*="count"] {
 850   position: absolute;
 851   right: 0;
 852   padding-top: 4px;
 853   padding-bottom: 4px;
 854   margin-right: 10px;
 855 }/* Chevrons
 856 -------------------------------------------------- */
 857
 858 .chevron {
 859   display: block;
 860   height: 20px;
 861 }
 862
 863 /* Base styles for both 1/2's of the chevron */
 864 .chevron:before,
 865 .chevron:after {
 866   position: relative;
 867   display: block;
 868   width: 12px;
 869   height: 4px;
 870   background-color: #999;
 871   content: '';
 872 }
 873
 874 /* Position and rotate respective 1/2's of the chevron */
 875 .chevron:before {
 876   top: 5px;
 877   -webkit-transform: rotate(45deg);
 878           transform: rotate(45deg);
 879 }
 880 .chevron:after {
 881   top: 7px;
 882   -webkit-transform: rotate(-45deg);
 883           transform: rotate(-45deg);
 884 }/* General count styles
 885 -------------------------------------------------- */
 886
 887 [class*="count"] {
 888   display: inline-block;
 889   padding: 4px 9px;
 890   font-size: 12px;
 891   font-weight: bold;
 892   line-height: 13px;
 893   color: #fff;
 894   background-color: rgba(0, 0, 0, .3);
 895   border-radius: 100px;
 896 }
 897
 898 /* Count modifiers
 899 -------------------------------------------------- */
 900
 901 /* Overriding styles for counts with modifiers  */
 902 .count-main,
 903 .count-positive,
 904 .count-negative {
 905   color: #fff;
 906   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 907 }
 908
 909 /* Main count  */
 910 .count-main {
 911   background-color: #1eafe7;
 912   background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
 913   background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
 914 }
 915
 916 /* Positive count  */
 917 .count-positive {
 918   background-color: #34ba15;
 919   background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
 920   background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
 921 }
 922
 923 /* Negative count  */
 924 .count-negative {
 925   background-color: #e71e1e;
 926   background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
 927   background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
 928 }/* Segmented controllers
 929 -------------------------------------------------- */
 930
 931 .segmented-controller {
 932   display: -webkit-box;
 933   display: box;
 934   margin-bottom: 10px;
 935   overflow: hidden;
 936   font-size: 12px;
 937   font-weight: bold;
 938   text-shadow: 0 1px rgba(255, 255, 255, .5);
 939   list-style: none;
 940   background-color: #f8f8f8;
 941   background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
 942   background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
 943   border: 1px solid #aaa;
 944   border-radius: 3px;
 945   box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
 946   -webkit-box-orient: horizontal;
 947           box-orient: horizontal;
 948 }
 949
 950 /* Section within controller */
 951 .segmented-controller li {
 952   overflow: hidden;
 953   text-align: center;
 954   white-space: nowrap;
 955   border-left: 1px solid #aaa;
 956   box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
 957   -webkit-box-flex: 1;
 958           box-flex: 1;
 959 }
 960
 961 /* Link that fills each section */
 962 .segmented-controller li > a {
 963   display: block;
 964   padding: 8px 16px;
 965   overflow: hidden;
 966   line-height: 15px;
 967   color: #333;
 968   text-overflow: ellipsis;
 969 }
 970
 971 /* Remove border-left and shadow from first section */
 972 .segmented-controller li:first-child {
 973   border-left-width: 0;
 974   box-shadow: none;
 975 }
 976
 977 /* Active segment of controller */
 978 .segmented-controller li.active {
 979   background-color: #ccc;
 980   box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
 981 }
 982
 983 .segmented-controller-item {
 984   display: none;
 985 }
 986
 987 .segmented-controller-item.active {
 988   display: block;
 989 }/* Popovers (to be used with popovers.js)
 990 -------------------------------------------------- */
 991
 992 .popover {
 993   position: fixed;
 994   top: 55px;
 995   left: 50%;
 996   z-index: 20;
 997   display: none;
 998   width: 280px;
 999   padding: 5px;
1000   margin-left: -146px;
1001   background-color: #555;
1002   background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
1003   background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
1004   border: 1px solid #111;
1005   border-radius: 6px;
1006   opacity: 0;
1007   box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
1008   -webkit-transform: translate3d(0, -15px, 0);
1009           transform: translate3d(0, -15px, 0);
1010   -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
1011                   transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
1012 }
1013
1014 /* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
1015 .popover:before,
1016 .popover:after {
1017   position: absolute;
1018   left: 50%;
1019   width: 0;
1020   height: 0;
1021   content: '';
1022 }
1023 .popover:before {
1024   top: -20px;
1025   margin-left: -21px;
1026   border-right: 21px solid transparent;
1027   border-bottom: 21px solid #111;
1028   border-left: 21px solid transparent;
1029 }
1030 .popover:after {
1031   top: -19px;
1032   margin-left: -20px;
1033   border-right: 20px solid transparent;
1034   border-bottom: 20px solid #555;
1035   border-left: 20px solid transparent;
1036 }
1037
1038 /* Wrapper for a title and buttons */
1039 .popover-header {
1040   display: -webkit-box;
1041   display: box;
1042   height: 34px;
1043   margin-bottom: 5px;
1044 }
1045
1046 /* Centered title for popover */
1047 .popover-header .title {
1048   position: absolute;
1049   top: 0;
1050   left: 0;
1051   width: 100%;
1052   margin: 15px 0;
1053   font-size: 16px;
1054   font-weight: bold;
1055   line-height: 12px;
1056   color: #fff;
1057   text-align: center;
1058   text-shadow: 0 -1px rgba(0, 0, 0, .5);
1059 }
1060
1061 /* Generic style for all buttons in .popover-header */
1062 .popover-header [class*="button"] {
1063   z-index: 25;
1064   font-size: 12px;
1065   line-height: 22px;
1066   color: #fff;
1067   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
1068   background-color: #454545;
1069   background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
1070   background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
1071   border: 1px solid #111;
1072   -webkit-box-flex: 0;
1073           box-flex: 0;
1074 }
1075
1076 /* Hacky way to right align buttons outside of flex-box system
1077    Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
1078 .popover-header .title + [class*="button"]:last-child,
1079 .popover-header .button + [class*="button"]:last-child,
1080 .popover-header [class*="button"].pull-right {
1081   position: absolute;
1082   top: 5px;
1083   right: 5px;
1084 }
1085
1086 /* Active state for popover header buttons */
1087 .popover-header .button:active {
1088   color: #fff;
1089   background-color: #0876b1;
1090 }
1091
1092 /* Popover animation
1093 -------------------------------------------------- */
1094
1095 .popover.visible {
1096   opacity: 1;
1097   -webkit-transform: translate3d(0, 0, 0);
1098           transform: translate3d(0, 0, 0);
1099 }
1100
1101 /* Backdrop (used as invisible touch escape)
1102 -------------------------------------------------- */
1103
1104 .backdrop {
1105   position: fixed;
1106   top: 0;
1107   right: 0;
1108   bottom: 0;
1109   left: 0;
1110   z-index: 10;
1111 }
1112
1113 /* Block level buttons in popovers
1114 -------------------------------------------------- */
1115
1116 /* Positioning and giving darker border to look sharp against dark popover */
1117 .popover .button-block {
1118   margin-bottom: 5px;
1119   border: 1px solid #111;
1120 }
1121
1122 /* Remove extra margin on bottom of last button */
1123 .popover .button-block:last-child {
1124   margin-bottom: 0;
1125 }
1126
1127 /* Lists in popovers
1128 -------------------------------------------------- */
1129
1130 .popover .list {
1131   width: auto;
1132   max-height: 250px;
1133   margin-right: 0;
1134   margin-bottom: 0;
1135   margin-left: 0;
1136   overflow: auto;
1137   background-color: #fff;
1138   border: 1px solid #000;
1139   border-radius: 3px;
1140   -webkit-overflow-scrolling: touch;
1141 }/* Slider styles (to be used with sliders.js)
1142 -------------------------------------------------- */
1143
1144 /* Width/height of slider */
1145 .slider,
1146 .slider > li {
1147   width: 100%;
1148   height: 200px;
1149 }
1150
1151 /* Outer wrapper for slider */
1152 .slider {
1153   overflow: hidden;
1154   background-color: #000;
1155 }
1156
1157 /* Inner wrapper for slider (width of all slides together) */
1158 .slider > ul {
1159   position: relative;
1160   font-size: 0; /* Remove spaces from inline-block children */
1161   white-space: nowrap;
1162   -webkit-transition: all 0 linear;
1163           transition: all 0 linear;
1164 }
1165
1166 /* Individual slide */
1167 .slider > ul > li {
1168   display: inline-block;
1169   vertical-align: top; /* Ensure that li always aligns to top */
1170   width: 100%;
1171   height: 100%;
1172 }
1173
1174 /* Required reset of font-size to same as standard body */
1175 .slider > ul > li > * {
1176   font-size: 14px;
1177 }/* Toggle styles (to be used with toggles.js)
1178 -------------------------------------------------- */
1179
1180 .toggle {
1181   position: relative;
1182   width: 75px;
1183   height: 28px;
1184   background-color: #eee;
1185   border: 1px solid #bbb;
1186   border-radius: 20px;
1187   box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
1188 }
1189
1190 /* Text indicating "on" or "off". Default is "off" */
1191 .toggle:before {
1192   position: absolute;
1193   right: 13px;
1194   font-weight: bold;
1195   line-height: 28px;
1196   color: #777;
1197   text-shadow: 0 1px #fff;
1198   text-transform: uppercase;
1199   content: "Off";
1200 }
1201
1202 /* Sliding handle */
1203 .toggle-handle {
1204   position: absolute;
1205   top: -1px;
1206   left: -1px;
1207   z-index: 2;
1208   width: 28px;
1209   height: 28px;
1210   background-color: #fff;
1211   background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
1212   background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
1213   border: 1px solid rgba(0, 0, 0, .2);
1214   border-radius: 100px;
1215   -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
1216                   transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
1217 }
1218
1219 /* Active state for toggle */
1220 .toggle.active {
1221   background-color: #19a8e4;
1222   background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%);
1223   background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%);
1224   border: 1px solid #096c9d;
1225   box-shadow: inset 0 0 15px rgba(255, 255, 255, .25);
1226 }
1227
1228 /* Active state for toggle handle */
1229 .toggle.active .toggle-handle {
1230   border-color: #0a76ad;
1231   -webkit-transform: translate3d(48px,0,0);
1232           transform: translate3d(48px,0,0);
1233 }
1234
1235 /* Change "off" to "on" for active state */
1236 .toggle.active:before {
1237   right: auto;
1238   left: 15px;
1239   color: #fff;
1240   text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
1241   content: "On";
1242 }/* Push styles (to be used with push.js)
1243 -------------------------------------------------- */
1244
1245 /* Fade animation */
1246 .content.fade {
1247   left: 0;
1248   opacity: 0;
1249   -webkit-transition: opacity .2s ease-in-out;
1250           transition: opacity .2s ease-in-out;
1251 }
1252 .content.fade.in {
1253   opacity: 1;
1254 }
1255
1256 /* Slide animation */
1257 .content.slide {
1258   -webkit-transform: translate3d(0, 0, 0);
1259           transform: translate3d(0, 0, 0);
1260  -webkit-transition: -webkit-transform .25s ease-in-out;
1261          transition:         transform .25s ease-in-out;
1262 }
1263 .content.slide.left {
1264   -webkit-transform: translate3d(-100%, 0, 0);
1265           transform: translate3d(-100%, 0, 0);
1266 }
1267 .content.slide.right {
1268   -webkit-transform: translate3d(100%, 0, 0);
1269           transform: translate3d(100%, 0, 0);
1270 }