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