@charset "UTF-8";
/* ============== Browser Support ============== */
/* ================== Colors ================== */
/* ================ Typography ================= */
/* ============ Heights and Widths ============= */
/* ========== Responsive breakpoints =========== */
/* ================= Elevations ================ */
/* ================= Animations ================ */
/* =================== Icons =================== */
/* ============== Module specific ============== */
/* ============== Accordion ============== */
/* ============== Avatar ============== */
/* ============== Button ============== */
/* ============== Card ============== */
/* ============== Event Cards ============== */
/* ============== Form ============== */
/* ============== Overlay ============== */
/* ============== Reports ============== */
/* ============== Responsive Form ============== */
/* ============== Segmented Control ============== */
/* ============== Ticket Types ============== */
/* ============== Toggle / Switch ============== */
/* ============== Browser Support ============== */
/* ================== Colors ================== */
/* ================ Typography ================= */
/* ============ Heights and Widths ============= */
/* ========== Responsive breakpoints =========== */
/* ================= Elevations ================ */
/* ================= Animations ================ */
/* =================== Icons =================== */
/* ============== Module specific ============== */
/* ============== Accordion ============== */
/* ============== Avatar ============== */
/* ============== Button ============== */
/* ============== Card ============== */
/* ============== Event Cards ============== */
/* ============== Form ============== */
/* ============== Overlay ============== */
/* ============== Reports ============== */
/* ============== Responsive Form ============== */
/* ============== Segmented Control ============== */
/* ============== Ticket Types ============== */
/* ============== Toggle / Switch ============== */
/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */
/* - Android tvdpi devices, including Google Nexus 7          */
/* - Chrome running on high DPI Macs and PCs                  */
/* - Opera running on high DPI Macs, PCs and mobile devices   */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/* A test for CSS pixel densites can be found here:           */
/* http://bjango.com/articles/min-device-pixel-ratio/         */
/*                                                            */
/*                                  @marcedwards from @bjango */
/*                                                            */
/* ---------------------------------------------------------- */
/* This is hacky and awesome. it should be part of mixins or something.
   I found it once on stack overflow and couldn't find it later when I looked */
/* XXX: test in browsers */
/* ratio is the height divided by width in percentage form */
/* This function is used to get the max height for multi-line ellipses
 * We use px values for line-height in styleguide, and unitless values for line-height in core
 * so we need to handle the possibility for both here
 */
.app-card, .app-card-spectrum {
  padding: 20px;
  display: block;
  text-decoration: none;
  background-color: white; }
  .app-card .app-card__image, .app-card-spectrum .app-card__image {
    float: left;
    overflow: hidden;
    text-align: center;
    display: table;
    line-height: 0; }
  .app-card .app-card__content, .app-card-spectrum .app-card__content {
    padding-left: 20px; }
  .app-card .app-card__description, .app-card-spectrum .app-card__description {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 42px; }
  .app-card .l-media > :first-child, .app-card-spectrum .l-media > :first-child {
    margin-right: 0; }
  .app-card .app-card__heading, .app-card-spectrum .app-card__heading {
    display: inline-block; }
  .app-card .app-listing__badge, .app-card-spectrum .app-listing__badge {
    display: block; }
    @media only screen and (min-width: 800px) {
      .app-card .app-listing__badge, .app-card-spectrum .app-listing__badge {
        float: right; } }

.app-card-spectrum {
  padding: 0;
  cursor: pointer; }
  .app-card-spectrum .app-card__content {
    overflow: visible;
    padding-top: 10px; }
  .app-card-spectrum .app-listing__badge {
    display: block; }
    @media only screen and (min-width: 800px) {
      .app-card-spectrum .app-listing__badge {
        background-color: #dfdfe1;
        background-color: rgba(40, 44, 53, 0.15);
        color: #53565d;
        color: rgba(40, 44, 53, 0.8);
        position: relative;
        padding: 10px;
        left: 5px;
        border-right: 5px solid #0093D7; } }
  .app-card-spectrum .app-card__image {
    float: left;
    overflow: hidden;
    text-align: center;
    display: table;
    line-height: 0;
    padding-right: 10px; }

.app-listing__heading .g-cell {
  vertical-align: middle; }

.app-listing__heading .app-listing__heading--headline > * {
  vertical-align: middle; }

.app-listing__heading .app-listing__badge {
  padding-left: 10px; }

.app-listing__badge {
  vertical-align: middle; }
  .app-listing__badge, .app-listing__badge:hover {
    text-decoration: none; }
  .app-listing__badge > span {
    vertical-align: middle; }

.app-listing__hero {
  text-align: center; }
  @media only screen and (min-width: 480px) {
    .app-listing__hero {
      display: inline-block;
      position: relative;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover; }
      .app-listing__hero:before {
        margin-top: 33.3333333333%;
        content: "";
        display: block; }
      .app-listing__hero .ratio-child {
        overflow: hidden;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; }
      .app-listing__hero.default-background {
        /*
            ========================================================
            This pattern is downloaded from www.subtlepatterns.com
            If you need more, that's where to get'em.
            ========================================================
            */
        background-image: url("../../../../images/background/retina_wood.png");
        background-repeat: repeat;
        background-size: 512px 512px; } }
    @media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-width: 480px) and (-o-min-device-pixel-ratio: 13 / 10), only screen and (min-width: 480px) and (min-resolution: 120dpi) {
      .app-listing__hero.default-background {
        background-image: url("../../../../images/background/retina_wood@2x.png"); } }
  @media only screen and (max-width: 479px) {
    .app-listing__hero {
      background-image: none !important; } }
  .app-listing__hero .app-listing__hero--image {
    height: auto;
    margin: auto; }
    @media only screen and (min-width: 480px) {
      .app-listing__hero .app-listing__hero--image {
        max-width: 150px; } }

.app-cube {
  position: relative;
  display: block;
  text-decoration: none; }
  .app-cube:hover, .app-cube:active {
    text-decoration: none; }
  .app-cube .app-cube__caption {
    background-color: #53565d;
    background-color: rgba(40, 44, 53, 0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white; }
    .app-cube .app-cube__caption h3 {
      color: #D2D6DF; }

.app-cube-spectrum {
  position: relative;
  display: block;
  text-decoration: none;
  padding-bottom: 70px; }
  .app-cube-spectrum .app-cube__content {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white; }
  .app-cube-spectrum .app-cube__caption p {
    color: #666A73; }
  .app-cube-spectrum .app-cube__caption_more {
    display: none; }
    .app-cube-spectrum .app-cube__caption_more p {
      color: #666A73; }
  .app-cube-spectrum:hover, .app-cube-spectrum:active {
    text-decoration: none; }
    .app-cube-spectrum:hover .app-cube__caption_more, .app-cube-spectrum:active .app-cube__caption_more {
      display: block; }
  .app-cube-spectrum .app-cube__badge {
    display: block; }
    @media only screen and (min-width: 800px) {
      .app-cube-spectrum .app-cube__badge {
        background-color: #9ea0a4;
        background-color: rgba(40, 44, 53, 0.45);
        border-right: 5px solid #0093D7;
        color: white;
        padding: 10px;
        position: absolute;
        right: -5px;
        top: 10px; } }

.app-directory__hero--container {
  background: url("../../../../images/background/api_directory_bg.png") no-repeat top center;
  background-size: cover; }

.app-directory__hero--container-spectrum {
  background: url("../../../../images/background/spectrum_bg.jpg") no-repeat top center;
  background-size: cover; }

.app-directory__hero {
  padding-top: 70px;
  padding-bottom: 70px; }
  .app-directory__hero .app-directory__hero--content, .app-directory__hero .app-directory__hero--content h1, .app-directory__hero .app-directory__hero--content h2, .app-directory__hero .app-directory__hero--content h3, .app-directory__hero .app-directory__hero--content h4, .app-directory__hero .app-directory__hero--content .g-cell {
    color: white; }

.app-directory__heading-wrapper {
  background: white;
  border-bottom: 2px solid #D2D6DF; }

.app-directory__heading {
  display: inline-block;
  vertical-align: top; }

.side-nav .responsive-form {
  margin-left: -10px;
  margin-right: -10px; }