PageRenderTime 83ms CodeModel.GetById 16ms app.highlight 60ms RepoModel.GetById 2ms app.codeStats 0ms

/style/src/_northstar.scss

https://github.com/ajanthanm/cssfilterlab
Sass | 1134 lines | 1064 code | 5 blank | 65 comment | 0 complexity | cb5fc1254eacf7118433b5176a172fd7 MD5 | raw file
   1/*
   2 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
   3 * 
   4 * Licensed under the Apache License, Version 2.0 (the "License");
   5 * you may not use this file except in compliance with the License.
   6 * You may obtain a copy of the License at
   7 * 
   8 *     http://www.apache.org/licenses/LICENSE-2.0
   9 * 
  10 * Unless required by applicable law or agreed to in writing, software
  11 * distributed under the License is distributed on an "AS IS" BASIS,
  12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 * See the License for the specific language governing permissions and
  14 * limitations under the License.
  15 */
  16
  17 @font-face {
  18   font-family: "Source Sans Pro";
  19   src: url("../font/SourceSansPro-Regular.otf"); }
  20
  21 @font-face {
  22   font-family: "source";
  23   src: url("../font/SourceSansPro-Regular.otf");
  24   font-weight: normal;
  25   font-style: normal; }
  26
  27 @font-face {
  28   font-family: "source-l";
  29   src: url("../font/SourceSansPro-Light.otf");
  30   font-weight: 300;
  31   font-style: normal; }
  32
  33 @font-face {
  34   font-family: "source-sb";
  35   src: url("../font/SourceSansPro-Semibold.otf");
  36   font-weight: 600;
  37   font-style: normal; }
  38
  39 /* Fonts
  40 	100 = thin
  41 	200 = extra-light
  42 	300 = light
  43 	400 = normal, book
  44 	500 = medium
  45 	600 = demi-bold
  46 	700 = bold
  47 	800 = heavy
  48 	900 = black
  49 */
  50 /* Icons
  51 	pl = 23x23
  52 	lg = 22x18
  53 	wi = 20x13
  54 	md = 18x18
  55 	sm = 16x16
  56 	xs = 13x13
  57 */
  58 /* Fonts
  59 	100 = thin
  60 	200 = extra-light
  61 	300 = light
  62 	400 = normal, book
  63 	500 = medium
  64 	600 = demi-bold
  65 	700 = bold
  66 	800 = heavy
  67 	900 = black
  68 */
  69 /* Icons
  70 	pl = 23x23
  71 	lg = 22x18
  72 	wi = 20x13
  73 	md = 18x18
  74 	sm = 16x16
  75 	xs = 13x13
  76 */
  77 .standard-structure {
  78   background-clip: padding-box;
  79   border: 1px solid rgba(0, 0, 0, 0);
  80   border-radius: 3px;
  81   display: inline-block;
  82   font-size: 12px;
  83   height: 21px;
  84   line-height: 21px;
  85   min-width: 15px;
  86   margin: 0 5px 5px 0;
  87   max-width: 150px;
  88   overflow: hidden;
  89   padding: 0 8px;
  90   position: relative;
  91   text-decoration: none;
  92   text-overflow: ellipsis;
  93   vertical-align: top;
  94   white-space: nowrap;
  95   user-select: none;
  96   -webkit-touch-callout: none;
  97   -webkit-user-select: none;
  98 }
  99 .icon-structure {
 100   background-repeat: no-repeat;
 101   display: inline-block;
 102   vertical-align: top;
 103 }
 104 .light-focus-style {
 105   border: 1px solid rgba(9, 64, 253, 0.84);
 106   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 107   outline: none;
 108 }
 109 .quiet-style {
 110   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 111   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
 112   border: 1px solid rgba(0, 0, 0, 0.21);
 113   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
 114   color: #454545;
 115   text-shadow: none;
 116 }
 117 .quiet-hover-style {
 118   background-image: linear-gradient(top, #f9f9f9, #f9f9f9);
 119   background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f9f9f9));
 120 }
 121 .quiet-down-style {
 122   background: #e5e7e7;
 123   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 124   text-decoration: none;
 125 }
 126 .quiet-focus-style {
 127   border: 1px solid rgba(9, 64, 253, 0.84);
 128   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
 129   outline: none;
 130 }
 131 .dark-focus-style {
 132   border: 1px solid #000000;
 133   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
 134   outline: none;
 135 }
 136 .dark-quiet-style {
 137   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 138   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
 139   border: 1px solid rgba(255, 255, 255, 0.21);
 140   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
 141   color: #eff1f1;
 142   text-shadow: none;
 143 }
 144 .dark-quiet-hover-style {
 145   background-image: linear-gradient(top, #555555, #555555);
 146   background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#555555));
 147 }
 148 .dark-quiet-down-style {
 149   background: #2b2d2d;
 150   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 151   text-decoration: none;
 152 }
 153 .dark-quiet-focus-style {
 154   border: 1px solid rgba(9, 64, 253, 0.84);
 155   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
 156   outline: none;
 157 }
 158 .cta-style {
 159   background-image: linear-gradient(top, #4fa3e1, #237fcb);
 160   background-image: -webkit-gradient(linear, left top, left bottom, from(#4fa3e1), to(#237fcb));
 161   border: 1px solid #014994;
 162   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.27);
 163   color: #ffffff;
 164   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
 165 }
 166 .cta-hover-style {
 167   background-image: linear-gradient(top, #5dafed, #3892de);
 168   background-image: -webkit-gradient(linear, left top, left bottom, from(#5dafed), to(#3892de));
 169 }
 170 .cta-down-style {
 171   background: #4290d1;
 172   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.12);
 173   text-decoration: none;
 174 }
 175 .cta-focus-style {
 176   border: 1px solid #0940fd;
 177   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
 178   outline: none;
 179 }
 180 body {
 181   color: #454545;
 182   font: 14px "source", helvetica, arial, sans-serif;
 183   margin: 0;
 184   padding: 0;
 185   -webkit-font-smoothing: subpixel-antialiased !important;
 186   text-rendering: optimizeLegibility;
 187 }
 188 .disabled {
 189   cursor: default;
 190   opacity: 0.6;
 191   pointer-events: none;
 192 }
 193 .bg-white {
 194   background: #fff;
 195   font-size: 12px;
 196   padding: 20px;
 197 }
 198 .bg-lightgray {
 199   background: #dfe2e2;
 200   font-size: 12px;
 201   padding: 20px;
 202 }
 203 .bg-slategray {
 204   background: #3a3f42 url("../img/bg_dark.png") repeat-x;
 205   color: #c7c7c7;
 206   font-size: 12px;
 207   padding: 20px;
 208 }
 209 .bg-white .title {
 210   color: #000;
 211   font-size: 18px;
 212   font-weight: 300;
 213 }
 214 .bg-lightgray .title {
 215   font-size: 18px;
 216   font-weight: 300;
 217   text-shadow: 0 1px 0 #fff;
 218 }
 219 .bg-slategray .title {
 220   color: #fff;
 221   font-size: 18px;
 222   text-shadow: 0 -1px 0 #000000;
 223 }
 224 .bg-slategray .group-label {
 225   color: #a4b4b7;
 226   font-size: 14px;
 227   text-shadow: 0 -1px 0 #000000;
 228 }
 229 .large {
 230   font-family: source-sb !important;
 231   font-size: 14px !important;
 232   line-height: 27px !important;
 233 }
 234 .button.large {
 235   height: 27px !important;
 236   margin: 0 10px 10px 0 !important;
 237   padding: 0 15px !important;
 238 }
 239 .button.large.no-label {
 240   padding: 0 !important;
 241 }
 242 .button.large.no-label i {
 243   margin-left: 6px;
 244 }
 245 .text,
 246 .inline-block {
 247   background-clip: padding-box;
 248   border: 1px solid rgba(0, 0, 0, 0);
 249   border-radius: 3px;
 250   display: inline-block;
 251   font-size: 12px;
 252   height: 21px;
 253   line-height: 21px;
 254   min-width: 15px;
 255   margin: 0 5px 5px 0;
 256   max-width: 150px;
 257   overflow: hidden;
 258   padding: 0 8px;
 259   position: relative;
 260   text-decoration: none;
 261   text-overflow: ellipsis;
 262   vertical-align: top;
 263   white-space: nowrap;
 264   user-select: none;
 265   -webkit-touch-callout: none;
 266   -webkit-user-select: none;
 267   min-width: auto;
 268   max-width: auto;
 269   padding-left: 0;
 270   padding-right: 0;
 271 }
 272 a {
 273   color: #0083e8;
 274   text-decoration: none;
 275   margin: 0 5px 0 0;
 276 }
 277 a:active {
 278   text-decoration: underline;
 279 }
 280 .link {
 281   background-clip: padding-box;
 282   border: 1px solid rgba(0, 0, 0, 0);
 283   border-radius: 3px;
 284   display: inline-block;
 285   font-size: 12px;
 286   height: 21px;
 287   line-height: 21px;
 288   min-width: 15px;
 289   margin: 0 5px 5px 0;
 290   max-width: 150px;
 291   overflow: hidden;
 292   padding: 0 8px;
 293   position: relative;
 294   text-overflow: ellipsis;
 295   vertical-align: top;
 296   white-space: nowrap;
 297   user-select: none;
 298   -webkit-touch-callout: none;
 299   -webkit-user-select: none;
 300   color: #0083e8;
 301   min-width: auto;
 302   max-width: auto;
 303   padding-left: 0;
 304   padding-right: 0;
 305   text-decoration: none;
 306 }
 307 .link:active {
 308   text-decoration: underline;
 309 }
 310 .link:focus {
 311   color: #0083e8;
 312   outline: none;
 313   text-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 314 }
 315 .link.dark {
 316   color: #6bc3fa;
 317 }
 318 .drop-down-triangle {
 319   background-image: url(../img/drop-down-triangle.png);
 320   background-repeat: no-repeat;
 321   display: inline-block;
 322   height: 6px;
 323   position: absolute;
 324   right: 6px;
 325   top: 9px;
 326   width: 9px;
 327 }
 328 .drop-down-triangle.dark {
 329   background-image: url(../img/drop-down-triangle-dark.png) !important;
 330   top: 8px;
 331   right: 0;
 332 }
 333 .large .drop-down-triangle {
 334   background-image: url(../img/drop-down-triangle.png);
 335   background-repeat: no-repeat;
 336   display: inline-block;
 337   height: 6px;
 338   position: absolute;
 339   right: 6px;
 340   top: 12px;
 341   width: 9px;
 342 }
 343 .icon-xs {
 344   background-repeat: no-repeat;
 345   display: inline-block;
 346   vertical-align: top;
 347   background: #aaa;
 348   height: 13px;
 349   width: 13px;
 350   margin: 4px 4px 0 -3px;
 351 }
 352 .icon-sm {
 353   background-repeat: no-repeat;
 354   display: inline-block;
 355   vertical-align: top;
 356   background: #aaa;
 357   height: 16px;
 358   width: 16px;
 359   margin: 5px 6px 0 -9px;
 360 }
 361 .button,
 362 .button.disabled:hover,
 363 .button.disabled:active {
 364   background-clip: padding-box;
 365   border-radius: 3px;
 366   display: inline-block;
 367   font-size: 12px;
 368   height: 21px;
 369   line-height: 21px;
 370   min-width: 15px;
 371   margin: 0 5px 5px 0;
 372   max-width: 150px;
 373   overflow: hidden;
 374   padding: 0 8px;
 375   position: relative;
 376   text-decoration: none;
 377   text-overflow: ellipsis;
 378   vertical-align: top;
 379   white-space: nowrap;
 380   user-select: none;
 381   -webkit-font-smoothing: antialiased !important;
 382   -webkit-touch-callout: none;
 383   -webkit-user-select: none;
 384   background-image: none, linear-gradient(top, #f5f8fa, #e3e5e5);
 385   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
 386   background-position: center;
 387   background-repeat: none;
 388   border: 1px solid rgba(0, 0, 0, 0.3);
 389   box-shadow: inset 0 1px 0 #ffffff;
 390   color: #454545;
 391   text-shadow: 0 1px 0 #ffffff;
 392 }
 393 .button:hover {
 394   background-image: none, linear-gradient(top, #f8fafb, #edefef);
 395   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#f8fafb), to(#edefef));
 396   background-position: center;
 397   background-repeat: none;
 398 }
 399 .button:active {
 400   background-color: #D3D7D7;
 401   background-image: none;
 402   background-position: center;
 403   background-repeat: none;
 404   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 405   text-decoration: none;
 406 }
 407 .button:focus {
 408   border: 1px solid rgba(9, 64, 253, 0.84);
 409   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 410   outline: none;
 411 }
 412 .button.quiet,
 413 .button.quiet.disabled:hover,
 414 .button.quiet.disabled:active {
 415   background-clip: padding-box;
 416   border: 1px solid rgba(0, 0, 0, 0);
 417   border-radius: 3px;
 418   display: inline-block;
 419   font-size: 12px;
 420   height: 21px;
 421   line-height: 21px;
 422   min-width: 15px;
 423   margin: 0 5px 5px 0;
 424   max-width: 150px;
 425   overflow: hidden;
 426   padding: 0 8px;
 427   position: relative;
 428   text-decoration: none;
 429   text-overflow: ellipsis;
 430   vertical-align: top;
 431   white-space: nowrap;
 432   user-select: none;
 433   -webkit-touch-callout: none;
 434   -webkit-user-select: none;
 435   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 436   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
 437   border: 1px solid rgba(0, 0, 0, 0.21);
 438   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
 439   color: #454545;
 440   text-shadow: none;
 441 }
 442 .button.quiet:hover {
 443   background-image: linear-gradient(top, #f9f9f9, #f9f9f9);
 444   background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f9f9f9));
 445 }
 446 .button.quiet:active {
 447   background: #e5e7e7;
 448   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 449   text-decoration: none;
 450 }
 451 .button.quiet:focus {
 452   border: 1px solid rgba(9, 64, 253, 0.84);
 453   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
 454   outline: none;
 455 }
 456 .button.dark,
 457 .button.dark.disabled:hover,
 458 .button.dark.disabled:active {
 459   background-image: none, linear-gradient(top, #7a7c7c, #5f6060);
 460   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
 461   background-position: center;
 462   background-repeat: none;
 463   border: 1px solid rgba(0, 0, 0, 0.8);
 464   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
 465   color: #eff1f1;
 466   text-shadow: 0 -1px 0 #000000;
 467 }
 468 .button.dark:hover {
 469   background-image: none, linear-gradient(top, #828585, #6a6b6b);
 470   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#828585), to(#6a6b6b));
 471   background-position: center;
 472   background-repeat: none;
 473 }
 474 .button.dark:active {
 475   background-color: #2b2d2d;
 476   background-image: none;
 477   background-position: center;
 478   background-repeat: none;
 479   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 480   text-decoration: none;
 481 }
 482 .button.dark:focus {
 483   border: 1px solid #000000;
 484   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
 485   outline: none;
 486 }
 487 .button.quiet.dark,
 488 .button.quiet.dark.disabled:hover,
 489 .button.quiet.dark.disabled:active {
 490   background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 491   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
 492   border: 1px solid rgba(255, 255, 255, 0.21);
 493   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0);
 494   color: #eff1f1;
 495   text-shadow: none;
 496 }
 497 .button.quiet.dark:hover {
 498   background-image: linear-gradient(top, #555555, #555555);
 499   background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#555555));
 500 }
 501 .button.quiet.dark:active {
 502   background: #2b2d2d;
 503   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 504   text-decoration: none;
 505 }
 506 .button.quiet.dark:focus {
 507   border: 1px solid rgba(9, 64, 253, 0.84);
 508   box-shadow: 0 0 4px 0 rgba(0, 136, 255, 0.69);
 509   outline: none;
 510 }
 511 .button.no-label {
 512   padding: 0 0 0 8px;
 513 }
 514 .button.drop-down {
 515   min-width: 70px;
 516/*   overflow: visible;*/
 517   padding: 0 30px 0 5px !important;
 518   position: relative;
 519 }
 520 .menu {
 521   background: #ffffff;
 522   border-top: none !important;
 523   border-radius: 3px;
 524   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
 525   font-size: 12px;
 526   left: 0px;
 527   margin: 0;
 528   overflow: hidden;
 529   padding: 3px 0 !important;
 530   position: absolute;
 531   top: 22px;
 532   min-width: 100%;
 533   z-index: 1000;
 534 }
 535 .menu li {
 536   list-style: none;
 537 }
 538 .menu li:last-child {
 539   border-radius: 3px;
 540 }
 541 .menu a {
 542   color: #454545;
 543   display: block;
 544   outline: none;
 545   padding: 0 0 0 10px;
 546   text-shadow: none;
 547 }
 548 .menu a:hover,
 549 .menu a:focus {
 550   background-color: #e0f0fa;
 551 }
 552 .menu a:active {
 553   text-decoration: none;
 554 }
 555 .dark .menu {
 556   border-top: none !important;
 557 }
 558 .large .menu {
 559   border-top: none !important;
 560   top: 28px !important;
 561 }
 562 .large.dark .menu {
 563   border-top: none !important;
 564   top: 28px !important;
 565 }
 566 .button.drop-down.large {
 567   min-width: 100px;
 568   padding: 0 30px 0 10px !important;
 569 }
 570 .button.drop-down.large .menu {
 571   top: 28px;
 572 }
 573 .button-group {
 574   display: inline-block;
 575   vertical-align: top;
 576   user-select: none;
 577   -webkit-touch-callout: none;
 578   -webkit-user-select: none;
 579   overflow: visible;
 580   position: relative;
 581 }
 582 .button-group .menu {
 583   left: 1px;
 584   top: 23px;
 585 }
 586 .button.inside {
 587   border-left: 1px solid rgba(0, 0, 0, 0);
 588   border-right: 1px solid rgba(187, 187, 187, 0.8);
 589   border-radius: 0;
 590   margin: 0 0 0 -3px !important;
 591 }
 592 .button.start {
 593   border-right: 1px solid rgba(187, 187, 187, 0.8);
 594   border-radius: 3px 0 0 3px !important;
 595   margin: 0;
 596 }
 597 .button.end {
 598   border-left: 1px solid rgba(0, 0, 0, 0);
 599   border-radius: 0 3px 3px 0 !important;
 600   margin: 0 5px 5px -3px;
 601 }
 602 .button.more {
 603   border-left: 1px solid rgba(0, 0, 0, 0);
 604   border-radius: 0 3px 3px 0 !important;
 605   margin: 0 5px 5px -3px;
 606   padding: 0;
 607   width: 20px;
 608 }
 609 .button.inside.dark {
 610   border-left: 1px solid rgba(0, 0, 0, 0);
 611   border-right: 1px solid rgba(0, 0, 0, 0.1);
 612   border-radius: 3px 0 0 3px !important;
 613   margin: 0;
 614 }
 615 .button.start.dark {
 616   border-right: 1px solid rgba(0, 0, 0, 0.1);
 617   border-radius: 3px 0 0 3px !important;
 618   margin: 0;
 619 }
 620 .button-group.large {
 621   margin: 0 10px 10px 0 !important;
 622 }
 623 .button-group.large .menu {
 624   top: 29px !important;
 625 }
 626 .button.inside.large {
 627   margin: 0 0 0 -4px !important;
 628 }
 629 .button.start.large {
 630   margin: 0 !important;
 631 }
 632 .button.end.large {
 633   margin: 0 5px 5px -4px !important;
 634 }
 635 .button.more.large {
 636   margin: 0 5px 5px -4px !important;
 637   padding: 0 !important;
 638 }
 639 select.button {
 640   background-image: url(../img/pop-up-triangle.png), linear-gradient(top, #f5f8fa, #e3e5e5);
 641   background-image: url(../img/pop-up-triangle.png), -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
 642   background-position: right;
 643   background-repeat: no-repeat;
 644   border: 1px solid rgba(0, 0, 0, 0.3);
 645   box-shadow: inset 0 1px 0 #ffffff;
 646   color: #454545;
 647   text-shadow: 0 1px 0 #ffffff;
 648   height: 23px;
 649   min-width: 70px;
 650   padding: 0 30px 0 5px;
 651   -webkit-appearance: none !important;
 652 }
 653 select.button:hover {
 654   background-image: url(../img/pop-up-triangle.png), linear-gradient(top, #f8fafb, #edefef);
 655   background-image: url(../img/pop-up-triangle.png), -webkit-gradient(linear, left top, left bottom, from(#f8fafb), to(#edefef));
 656   background-position: right;
 657   background-repeat: no-repeat;
 658 }
 659 select.button:active {
 660   background-color: #e5e7e7;
 661   background-image: url(../img/pop-up-triangle.png);
 662   background-position: right;
 663   background-repeat: no-repeat;
 664   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 665   text-decoration: none;
 666 }
 667 select.button:focus {
 668   border: 1px solid rgba(9, 64, 253, 0.84);
 669   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 670   outline: none;
 671 }
 672 select.button.dark {
 673   background-image: url(../img/pop-up-triangle-dark.png), linear-gradient(top, #7a7c7c, #5f6060);
 674   background-image: url(../img/pop-up-triangle-dark.png), -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
 675   background-position: right;
 676   background-repeat: no-repeat;
 677   border: 1px solid rgba(0, 0, 0, 0.8);
 678   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
 679   color: #eff1f1;
 680   text-shadow: 0 -1px 0 #000000;
 681   height: 23px;
 682   min-width: 70px;
 683   padding: 0 30px 0 5px;
 684   -webkit-appearance: none !important;
 685 }
 686 select.button.dark:hover {
 687   background-image: url(../img/pop-up-triangle-dark.png), linear-gradient(top, #828585, #6a6b6b);
 688   background-image: url(../img/pop-up-triangle-dark.png), -webkit-gradient(linear, left top, left bottom, from(#828585), to(#6a6b6b));
 689   background-position: right;
 690   background-repeat: no-repeat;
 691 }
 692 select.button.dark:active {
 693   background-color: #2b2d2d;
 694   background-image: url(../img/pop-up-triangle-dark.png);
 695   background-position: right;
 696   background-repeat: no-repeat;
 697   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 698   text-decoration: none;
 699 }
 700 select.button.dark:focus {
 701   border: 1px solid #000000;
 702   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
 703   outline: none;
 704 }
 705 select.button.large {
 706   height: 29px !important;
 707   min-width: 70px;
 708   padding: 0 30px 0 10px !important;
 709 }
 710 .button.cta,
 711 .button.cta.disabled:hover,
 712 .button.cta.disabled:active {
 713   background-clip: padding-box;
 714   border: 1px solid rgba(0, 0, 0, 0);
 715   border-radius: 3px;
 716   display: inline-block;
 717   font-size: 12px;
 718   height: 21px;
 719   line-height: 21px;
 720   min-width: 15px;
 721   margin: 0 5px 5px 0;
 722   max-width: 150px;
 723   overflow: hidden;
 724   padding: 0 8px;
 725   position: relative;
 726   text-decoration: none;
 727   text-overflow: ellipsis;
 728   text-align: center;  
 729   vertical-align: top;
 730   white-space: nowrap;
 731   user-select: none;
 732   -webkit-touch-callout: none;
 733   -webkit-user-select: none;
 734   background-image: linear-gradient(top, #4fa3e1, #237fcb);
 735   background-image: -webkit-gradient(linear, left top, left bottom, from(#4fa3e1), to(#237fcb));
 736   border: 1px solid #014994;
 737   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.27);
 738   color: #ffffff;
 739   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
 740 }
 741 .button.cta:hover {
 742   background-image: linear-gradient(top, #5dafed, #3892de);
 743   background-image: -webkit-gradient(linear, left top, left bottom, from(#5dafed), to(#3892de));
 744 }
 745 .button.cta:active {
 746   background: #4290d1;
 747   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.12);
 748   text-decoration: none;
 749 }
 750 .button.cta:focus {
 751   border: 1px solid rgba(9, 64, 253, 0.84);
 752   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 753   outline: none;
 754 }
 755 /* Approx. Slider */
 756 .approx-slider {
 757   background: #d4d7d7;
 758   border: 1px solid #babdbd;
 759   border-radius: 3px;
 760   display: inline-block;
 761   height: 3px;
 762   outline: none;
 763   width: 100px;
 764   cursor: pointer;
 765   -webkit-appearance: none !important;
 766 }
 767 .approx-slider::-webkit-slider-thumb {
 768   background-image: none, linear-gradient(top, #f5f8fa, #e3e5e5);
 769   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
 770   background-position: center;
 771   background-repeat: none;
 772   border: 1px solid rgba(0, 0, 0, 0.3);
 773   box-shadow: inset 0 1px 0 #ffffff;
 774   color: #454545;
 775   text-shadow: 0 1px 0 #ffffff;
 776   border-radius: 3px;
 777   height: 17px;
 778   width: 11px;
 779   -webkit-appearance: none !important;
 780 }
 781 .approx-slider:focus::-webkit-slider-thumb {
 782   border: 1px solid rgba(9, 64, 253, 0.84);
 783   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 784   outline: none;
 785 }
 786 .approx-slider.large {
 787   height: 5px;
 788   width: 140px !important;
 789 }
 790 .approx-slider.large::-webkit-slider-thumb {
 791   height: 15px;
 792   width: 13px;
 793 }
 794 .approx-slider.dark {
 795   background: #1f1f1f;
 796   border: 1px solid #000000;
 797 }
 798 .approx-slider.dark::-webkit-slider-thumb {
 799   background-image: none, linear-gradient(top, #7a7c7c, #5f6060);
 800   background-image: none, -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
 801   background-position: center;
 802   background-repeat: none;
 803   border: 1px solid rgba(0, 0, 0, 0.8);
 804   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
 805   color: #eff1f1;
 806   text-shadow: 0 -1px 0 #000000;
 807 }
 808 .approx-slider.dark:focus::-webkit-slider-thumb {
 809   border: 1px solid #000000;
 810   box-shadow: 0 0 4px rgba(0, 0, 0, 0.69);
 811   outline: none;
 812 }
 813 /* Slide Switch */
 814 .slide-switch {
 815   background-clip: padding-box;
 816   border: 1px solid rgba(0, 0, 0, 0);
 817   border-radius: 3px;
 818   display: inline-block;
 819   font-size: 12px;
 820   height: 21px;
 821   line-height: 21px;
 822   min-width: 15px;
 823   margin: 0 5px 5px 0;
 824   max-width: 150px;
 825   overflow: hidden;
 826   padding: 0 8px;
 827   text-decoration: none;
 828   text-overflow: ellipsis;
 829   vertical-align: top;
 830   white-space: nowrap;
 831   user-select: none;
 832   -webkit-touch-callout: none;
 833   -webkit-user-select: none;
 834   background-color: #ccc;
 835   border: 1px solid rgba(0, 0, 0, 0.3);
 836   font-family: source-sb;
 837   cursor: pointer;
 838   padding: 0;
 839   position: relative;
 840   width: 54px;
 841 }
 842 .slide-switch input {
 843   display: none;
 844 }
 845 .slide-switch input:checked + .wrapper {
 846   left: -38px;
 847 }
 848 .slide-switch::focus {
 849   border: 1px solid rgba(9, 64, 253, 0.84);
 850   box-shadow: 0 0 4px rgba(0, 136, 255, 0.69);
 851   outline: none;
 852 }
 853 .wrapper {
 854   display: block;
 855   height: 21px;
 856   position: relative;
 857   top: 0px;
 858   -moz-transition: left 0.2s ease-out;
 859   -webkit-transition: left 0.2s ease-out;
 860   transition: left 0.2s ease-out;
 861   width: 90px;
 862   z-index: 1;
 863 }
 864 .switch,
 865 .on,
 866 .off {
 867   display: block;
 868   height: 21px;
 869   font-size: 12px;
 870   line-height: 21px;
 871   position: absolute;
 872   text-align: center;
 873   text-shadow: 0 1px 0 #ffffff;
 874   top: 0;
 875 }
 876 .switch {
 877   background-image: linear-gradient(top, #f5f8fa, #e3e5e5);
 878   background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f8fa), to(#e3e5e5));
 879   border-left: 1px solid rgba(0, 0, 0, 0.3);
 880   border-right: 1px solid rgba(0, 0, 0, 0.3);
 881   border-radius: 3px;
 882   box-shadow: inset 0 1px 0 #ffffff;
 883   left: 37px;
 884   width: 16px;
 885 }
 886 .on {
 887   background: #e0f0fa;
 888   border-top-left-radius: 3px;
 889   border-bottom-left-radius: 3px;
 890   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 891   color: #0083e8;
 892   width: 37px;
 893 }
 894 .off {
 895   background: #e5e7e7;
 896   border-top-right-radius: 3px;
 897   border-bottom-right-radius: 3px;
 898   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 899   left: 55px;
 900   width: 37px;
 901 }
 902 .slide-switch.dark {
 903   background-color: #2b2d2d;
 904   border: 1px solid rgba(0, 0, 0, 0.8);
 905 }
 906 .dark .switch,
 907 .dark .on,
 908 .dark .off {
 909   text-shadow: 0 -1px 0 #000000;
 910 }
 911 .dark .switch {
 912   background-image: linear-gradient(top, #7a7c7c, #5f6060);
 913   background-image: -webkit-gradient(linear, left top, left bottom, from(#7a7c7c), to(#5f6060));
 914   border-left: 1px solid rgba(0, 0, 0, 0.8);
 915   border-right: 1px solid rgba(0, 0, 0, 0.8);
 916   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
 917 }
 918 .dark .on {
 919   background: #2b2d2d;
 920   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 921   color: #56badf;
 922 }
 923 .dark .off {
 924   background: #2b2d2d;
 925   box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
 926   color: #999;
 927 }
 928 .slide-switch.large {
 929   height: 27px;
 930   width: 69px;
 931 }
 932 .slide-switch.large .wrapper {
 933   display: block;
 934   height: 27px;
 935   position: relative;
 936   top: 0px;
 937   -moz-transition: left 0.2s ease-out;
 938   -webkit-transition: left 0.2s ease-out;
 939   transition: left 0.2s ease-out;
 940   z-index: 1;
 941 }
 942 .slide-switch.large .switch,
 943 .slide-switch.large .on,
 944 .slide-switch.large .off {
 945   height: 27px;
 946   font-size: 14px;
 947   line-height: 28px;
 948 }
 949 .slide-switch.large .switch {
 950   left: 47px;
 951   width: 21px;
 952 }
 953 .slide-switch.large .on {
 954   width: 48px;
 955 }
 956 .slide-switch.large .off {
 957   left: 70px;
 958   width: 48px;
 959 }
 960 .slide-switch.large input:checked + .wrapper {
 961   left: -48px;
 962 }
 963 /* Checkbox */
 964 input[type=checkbox] {
 965   display: none;
 966 }
 967 input[type=checkbox] + label {
 968   background: url("../img/checkbox_unchecked_dark.png") no-repeat 0 50%;
 969   display: inline-block;
 970   font-weight: 400;
 971   padding: 0 0 0 20px;
 972 }
 973 input[type=checkbox]:checked + label {
 974   background: url("../img/checkbox_checked_dark.png") no-repeat 0 50%;
 975   display: inline-block;
 976   padding: 0 0 0 20px;
 977 }
 978 input.dark[type=checkbox] + label {
 979   background: url("../img/checkbox_unchecked_dark.png") no-repeat 0 50%;
 980   display: inline-block;
 981   padding: 0 0 0 20px;
 982 }
 983 input.dark[type=checkbox]:checked + label {
 984   background: url("../img/checkbox_checked_dark.png") no-repeat 0 50%;
 985   display: inline-block;
 986   padding: 0 0 0 20px;
 987 }
 988 /* Spinner */
 989 .spinner {
 990   -webkit-transition-property: -webkit-transform;
 991   -webkit-transition-duration: .75s;
 992   -moz-transition-property: -moz-transform;
 993   -moz-transition-duration: .75s;
 994   -webkit-animation-name: rotate;
 995   -webkit-animation-duration: .75s;
 996   -webkit-animation-iteration-count: infinite;
 997   -webkit-animation-timing-function: linear;
 998   -moz-animation-name: rotate;
 999   -moz-animation-duration: .75s;
1000   -moz-animation-iteration-count: infinite;
1001   -moz-animation-timing-function: linear;
1002 }
1003 .spinner {
1004   display: inline-block;
1005   margin: 0 5px 5px 0;
1006   width: 16px;
1007   height: 16px;
1008   background: url(../img/spinner-sml.png) 50% no-repeat;
1009   background-size: 100%;
1010 }
1011 .spinner.large {
1012   width: 36px;
1013   height: 36px;
1014   background: url(../img/spinner-lrg.png) 50% no-repeat;
1015   background-size: 100%;
1016 }
1017 @-webkit-keyframes rotate {
1018   from {
1019     -webkit-transform: rotate(0deg);
1020   }
1021   to {
1022     -webkit-transform: rotate(360deg);
1023   }
1024 }
1025 @-moz-keyframes rotate {
1026   from {
1027     -moz-transform: rotate(0deg);
1028   }
1029   to {
1030     -moz-transform: rotate(360deg);
1031   }
1032 }
1033 /* Swatch */
1034 .swatch.large {
1035   border: 1px solid rgba(0, 0, 0, 0.2);
1036   border-radius: 3px;
1037   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1038   height: 27px;
1039   width: 27px;
1040 }
1041 /* End Swatch */
1042 /* Text Field */
1043 .text-field {
1044   border: 1px solid #a5a8a8;
1045   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1046   color: #000;
1047   font-family: "Source Sans Pro", "source", helvetica, arial, sans-serif;
1048   -webkit-border-radius: 4px;
1049   border-radius: 3px;
1050   font-size: 12px;
1051   font-weight: 400;
1052   height: 21px;
1053   line-height: 21px;
1054   margin: 0 3px 3px 0;
1055   padding: 0 4px;
1056   min-width: 150px;
1057 }
1058 .text-field.large {
1059   font-size: 14px;
1060   padding: 1px 4px 0 4px;
1061   height: 27px;
1062 }
1063 .text-field.dark {
1064   background: rgba(255, 255, 255, 0.15);
1065   border: 1px solid rgba(0, 0, 0, 0.7);
1066   color: #fff;
1067   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1068   -webkit-border-radius: 4px;
1069   border-radius: 3px;
1070   font-size: 12px;
1071   font-weight: 400;
1072   height: 21px;
1073   line-height: 21px;
1074   margin: 0 3px 3px 0;
1075   padding: 0 4px;
1076   min-width: 80px;   
1077 }
1078 /* Error state before Focus state on purpose */
1079 .text-field.error {
1080   border: 1px solid #ea015e;
1081   -webkit-box-shadow: 0 0 4px #ff0078;
1082   box-shadow: 0 0 4px #ff0078, inset 0px 1px 0px rgba(0, 0, 0, 0.15);
1083 }
1084 .text-field.dark.error {
1085   border: 1px solid #ea015e;
1086   -webkit-box-shadow: 0 0 4px #ff0078;
1087   box-shadow: 0 0 4px #ff0078, inset 0px 1px 0px rgba(0, 0, 0, 0.15);
1088 }
1089 .text-field:focus {
1090   border: 1px solid #0940fd;
1091   -webkit-box-shadow: 0 0 4px #0088ff;
1092   box-shadow: 0 0 4px #0088ff;
1093   outline: none;
1094 }
1095 .text-field.dark:focus {
1096   border: 1px solid #000;
1097   -webkit-box-shadow: 0 0 4px #222;
1098   box-shadow: 0 0 4px #222;
1099   outline: none;
1100 }
1101 .text-field[disabled=disabled] {
1102   opacity: 0.6;
1103 }
1104 /* End Text Field */
1105 /* Breadcrumbs */
1106 .breadcrumbs {
1107   list-style: none;
1108   margin: 0;
1109   padding: 0;
1110 }
1111 .breadcrumbs li {
1112   background: url("../img/breadcrumb.png") no-repeat right 3px;
1113   color: #000;
1114   display: inline-block;
1115   font-size: 12px;
1116   font-weight: 400;
1117   line-height: 18px;
1118   margin: 0 3px 0 0;
1119   padding: 0 11px 0 0;
1120 }
1121 .breadcrumbs li:last-child {
1122   background: none;
1123 }
1124 .bg-slategray .breadcrumbs li {
1125   color: #fff;
1126 }
1127 .breadcrumbs a {
1128   color: #888;
1129   text-decoration: none;
1130 }
1131 .bg-slategray .breadcrumbs a {
1132   color: #bbb;
1133 }
1134 /* End Breadcrumbs */