/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

.button,
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta,
.topcoat-button-bar__button,
.topcoat-button-bar__button--large {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
}

.button--quiet {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.button--disabled,
.topcoat-button:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled,
.topcoat-button-bar__button:disabled,
.topcoat-button-bar__button--large:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta,
.topcoat-button-bar__button,
.topcoat-button-bar__button--large {
    padding: 0 0.563rem;
    font-size: 12px;
    line-height: 1.313rem;
    letter-spacing: 0;
    color: #757575;
    text-shadow: 0 1px #fff;
    vertical-align: top;
    background-color: #f5f5f5;
    box-shadow: inset 0 1px #fff;
    border: 1px solid #9daca9;
    border-radius: 4px;
}

.topcoat-button:hover,
.topcoat-button--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--large--quiet:hover,
.topcoat-button-bar__button:hover,
.topcoat-button-bar__button--large:hover {
    background-color: #eff1f1;
}

.topcoat-button:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus,
.topcoat-button-bar__button:focus,
.topcoat-button-bar__button--large:focus {
    border: 1px solid #0036ff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1;
    outline: 0;
}

.topcoat-button:active,
.topcoat-button--large:active,
.topcoat-button-bar__button:active,
.topcoat-button-bar__button--large:active,
:checked + .topcoat-button-bar__button {
    border: 1px solid #9daca9;
    background-color: #d2d6d6;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
}

.topcoat-button--quiet {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.topcoat-button--quiet:hover,
.topcoat-button--large--quiet:hover {
    text-shadow: 0 1px #fff;
    border: 1px solid #9daca9;
    box-shadow: inset 0 1px #fff;
}

.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active {
    color: #757575;
    text-shadow: 0 1px #fff;
    background-color: #d2d6d6;
    border: 1px solid #9daca9;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
}

.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button-bar__button--large {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.688rem;
    padding: 0 0.875rem;
}

.topcoat-button--large--quiet {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.topcoat-button--cta,
.topcoat-button--large--cta {
    border: 1px solid #134f7f;
    background-color: #288edf;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.36);
    color: #fff;
    font-weight: 500;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.36);
}

.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
    background-color: #4ca1e4;
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
    background-color: #1e7dc8;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
}

.topcoat-button--large--cta {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.688rem;
    padding: 0 0.875rem;
}

input[type="checkbox"] {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border: 0;
    opacity: 0.001;
    z-index: 1;
    vertical-align: top;
    outline: none;
}

.checkbox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox__label {
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox--disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.checkbox:before,
.checkbox:after {
    content: '';
    position: absolute;
}

.checkbox:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
}

input[type="checkbox"] {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border: 0;
    opacity: 0.001;
    z-index: 1;
    vertical-align: top;
    outline: none;
}

.checkbox,
.topcoat-checkbox__checkmark {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox__label,
.topcoat-checkbox {
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox--disabled,
input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.checkbox:before,
.checkbox:after,
.topcoat-checkbox__checkmark:before,
.topcoat-checkbox__checkmark:after {
    content: '';
    position: absolute;
}

.checkbox:before,
.topcoat-checkbox__checkmark:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
}

/* topdoc
  name: Checkbox
  description: Default skin for Topcoat checkbox
  modifiers:
    :focus: Focus state
    :disabled: Disabled state
  markup:
    <label class="topcoat-checkbox">
      <input type="checkbox">
      <div class="topcoat-checkbox__checkmark"></div>
      Default
    </label>
    <br>
    <br>
    <label class="topcoat-checkbox">
      <input type="checkbox" disabled>
      <div class="topcoat-checkbox__checkmark"></div>
      Disabled
    </label>
  examples:
    mobile checkbox: http://codepen.io/Topcoat/pen/piHcs
  tags:
    - desktop
    - light
    - mobile
    - checkbox
*/

.topcoat-checkbox__checkmark {
    height: 1rem;
}

input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
    margin-top: 0;
    margin-right: -1rem;
    margin-bottom: -1rem;
    margin-left: 0;
}

input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
    opacity: 1;
}

.topcoat-checkbox {
    line-height: 1rem;
}

.topcoat-checkbox__checkmark:before {
    width: 1rem;
    height: 1rem;
    background: #f5f5f5;
    border: 1px solid #9daca9;
    border-radius: 3px;
    box-shadow: inset 0 1px #fff;
}

.topcoat-checkbox__checkmark {
    width: 1rem;
    height: 1rem;
}

.topcoat-checkbox__checkmark:after {
    top: 2px;
    left: 1px;
    opacity: 0;
    width: 14px;
    height: 4px;
    background: transparent;
    border: 7px solid #757575;
    border-width: 3px;
    border-top: none;
    border-right: none;
    border-radius: 1px;
    -webkit-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
    border: 1px solid #0036ff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1;
}

input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {
    border: 1px solid #9daca9;
    background-color: #d2d6d6;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
}

input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {
    border: 1px solid #9daca9;
    background: #f5f5f5;
    box-shadow: inset 0 1px #fff;
}

.button,
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
}

.button--quiet {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.button--disabled,
.topcoat-icon-button:disabled,
.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--large:disabled,
.topcoat-icon-button--large--quiet:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* topdoc
  name: Icon Button
  description: Like button, but it has an icon.
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-icon-button">
      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
    </button>
    <button class="topcoat-icon-button" disabled>
      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
    </button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - icon
*/

.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
    padding: 0 0.25rem;
    line-height: 1.313rem;
    letter-spacing: 0;
    color: #757575;
    text-shadow: 0 1px #fff;
    vertical-align: baseline;
    /*background-color: #f5f5f5;*/
    box-shadow: inset 0 1px #fff;
    border: 1px solid #9daca9;
    border-radius: 4px;
}

.topcoat-icon-button:hover,
.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large:hover,
.topcoat-icon-button--large--quiet:hover {
    background-color: #eff1f1;
}

.topcoat-icon-button:focus,
.topcoat-icon-button--quiet:focus,
.topcoat-icon-button--quiet:hover:focus,
.topcoat-icon-button--large:focus,
.topcoat-icon-button--large--quiet:focus,
.topcoat-icon-button--large--quiet:hover:focus {
    border: 1px solid #0036ff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1;
    outline: 0;
}

.topcoat-icon-button:active,
.topcoat-icon-button--large:active {
    border: 1px solid #9daca9;
    background-color: #d2d6d6;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
}

/* topdoc
  name: Quiet Icon Button
  description: Like quiet button, but it has an icon.
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-icon-button--quiet">
      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
    </button>
    <button class="topcoat-icon-button--quiet" disabled>
      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
    </button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - icon
    - quiet
*/

.topcoat-icon-button--quiet {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large--quiet:hover {
    text-shadow: 0 1px #fff;
    border: 1px solid #9daca9;
    box-shadow: inset 0 1px #fff;
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet:focus:active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet:focus:active {
    color: #757575;
    text-shadow: 0 1px #fff;
    background-color: #d2d6d6;
    border: 1px solid #9daca9;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
}

/* topdoc
  name: Large Icon Button
  description: Like large button, but it has an icon.
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-icon-button--large">
      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
    </button>
    <button class="topcoat-icon-button--large" disabled>
      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
    </button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - icon
    - large
*/

.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
    width: 1.688rem;
    height: 1.688rem;
    line-height: 1.688rem;
}

/* topdoc
  name: Large Quiet Icon Button
  description: Like large button, but it has an icon and this one is quiet.
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
  markup:
    <button class="topcoat-icon-button--large--quiet">
      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
    </button>
    <button class="topcoat-icon-button--large--quiet" disabled>
      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
    </button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - icon
    - large
    - quiet
*/

.topcoat-icon-button--large--quiet {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.topcoat-icon,
.topcoat-icon--large {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: 0.81406rem;
    height: 0.81406rem;
    vertical-align: middle;
    top: -1px;
}

.topcoat-icon--large {
    width: 1.06344rem;
    height: 1.06344rem;
    top: -2px;
}

@font-face {
    font-family: "Source Sans";
    src: url("../font/SourceSansPro-Regular.otf");
}

@font-face {
    font-family: "Source Sans";
    src: url("../font/SourceSansPro-Light.otf");
    font-weight: 200;
}

@font-face {
    font-family: "Source Sans";
    src: url("../font/SourceSansPro-Semibold.otf");
    font-weight: 600;
}

body {
    margin: 0;
    padding: 0;
    background: #dfe2e2;
    color: #000;
    font: 16px "Source Sans", helvetica, arial, sans-serif;
    font-weight: 400;
}