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