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