| @import "../css/fontello.css"; |
| /* ----- font ----- */ |
| html { |
| font-size: 17px; |
| font-family: source-sans-pro, sans-serif, 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; |
| color: #656f78; |
| } |
| h1 { |
| font-size: 1.8em; |
| font-weight: normal; |
| } |
| h2 { |
| font-size: 1.2em; |
| font-weight: normal; |
| } |
| select { |
| padding: 5px; |
| margin: 0; |
| -webkit-border-radius: 4px; |
| -moz-border-radius: 4px; |
| border-radius: 4px; |
| -webkit-box-shadow: 0 3px 0 #cccccc, 0 -1px #656f78 inset; |
| -moz-box-shadow: 0 3px 0 #cccccc, 0 -1px #656f78 inset; |
| box-shadow: 0 3px 0 #cccccc, 0 -1px #656f78 inset; |
| background: #eeeeee; |
| color: #656f78; |
| border: none; |
| outline: none; |
| display: inline-block; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| cursor: pointer; |
| text-align: center; |
| } |
| /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ |
| @media screen and (-webkit-min-device-pixel-ratio: 0) { |
| select { |
| padding-right: 18px; |
| } |
| } |
| label.dropdown { |
| position: relative; |
| } |
| label.dropdown:after { |
| content: '<>'; |
| font: 11px "Consolas", monospace; |
| color: #656f78; |
| -webkit-transform: rotate(90deg); |
| -moz-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| right: 8px; |
| top: 2px; |
| padding: 0 0 2px; |
| border-bottom: 1px solid #eeeeee; |
| position: absolute; |
| pointer-events: none; |
| } |
| label.dropdown:before { |
| content: ''; |
| right: 6px; |
| top: 0px; |
| width: 20px; |
| height: 15px; |
| background: #eeeeee; |
| position: absolute; |
| pointer-events: none; |
| display: block; |
| } |
| .button-bar { |
| display: table; |
| table-layout: fixed; |
| white-space: nowrap; |
| margin: 0; |
| padding: 0; |
| } |
| .button-bar__item { |
| display: table-cell; |
| width: auto; |
| border-radius: 0; |
| } |
| .button-bar__item > input { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .button-bar__button { |
| border-radius: inherit; |
| } |
| .button-bar__item:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .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: 0; |
| 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: .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 .563rem; |
| font-size: 12px; |
| line-height: 1.313rem; |
| letter-spacing: 0; |
| color: #454545; |
| text-shadow: 0 1px #fff; |
| vertical-align: top; |
| background-color: #e5e9e8; |
| 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 #ffffff; |
| } |
| .topcoat-button--quiet:active, |
| .topcoat-button--quiet:focus:active, |
| .topcoat-button--large--quiet:active, |
| .topcoat-button--large--quiet:focus:active { |
| color: #454545; |
| 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: .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: .875rem; |
| font-weight: 600; |
| line-height: 1.688rem; |
| padding: 0 0.875rem; |
| } |
| .button-bar, |
| .topcoat-button-bar { |
| display: table; |
| table-layout: fixed; |
| white-space: nowrap; |
| margin: 0; |
| padding: 0; |
| } |
| .button-bar__item, |
| .topcoat-button-bar__item { |
| display: table-cell; |
| width: auto; |
| border-radius: 0; |
| } |
| .button-bar__item > input, |
| .topcoat-button-bar__item > input { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .button-bar__button { |
| border-radius: inherit; |
| } |
| .button-bar__item:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-button-bar > .topcoat-button-bar__item:first-child { |
| border-top-left-radius: 4px; |
| border-bottom-left-radius: 4px; |
| } |
| .topcoat-button-bar > .topcoat-button-bar__item:last-child { |
| border-top-right-radius: 4px; |
| border-bottom-right-radius: 4px; |
| } |
| .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, |
| .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large { |
| border-right: 0; |
| } |
| .topcoat-button-bar__item:last-child > .topcoat-button-bar__button, |
| .topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large { |
| border-left: 0; |
| } |
| .topcoat-button-bar__button { |
| border-radius: inherit; |
| } |
| .topcoat-button-bar__button:focus, |
| .topcoat-button-bar__button--large:focus { |
| z-index: 1; |
| } |
| .topcoat-button-bar__button--large { |
| border-radius: inherit; |
| } |
| .button { |
| 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: 0; |
| 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 { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .button, |
| .topcoat-button, |
| .topcoat-button--quiet, |
| .topcoat-button--large, |
| .topcoat-button--large--quiet, |
| .topcoat-button--cta, |
| .topcoat-button--large--cta { |
| 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: 0; |
| 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 { |
| opacity: .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 { |
| padding: 0 .563rem; |
| font-size: 12px; |
| line-height: 1.313rem; |
| letter-spacing: 0; |
| color: #454545; |
| text-shadow: 0 1px #fff; |
| vertical-align: top; |
| background-color: #e5e9e8; |
| 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 { |
| 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 { |
| 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 { |
| 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 #ffffff; |
| } |
| .topcoat-button--quiet:active, |
| .topcoat-button--quiet:focus:active, |
| .topcoat-button--large--quiet:active, |
| .topcoat-button--large--quiet:focus:active { |
| color: #454545; |
| 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 { |
| font-size: .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: .875rem; |
| font-weight: 600; |
| line-height: 1.688rem; |
| padding: 0 0.875rem; |
| } |
| input[type=checkbox] { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .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: .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: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .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: .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; |
| } |
| .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: #e5e9e8; |
| border: 1px solid #9daca9; |
| border-radius: 3px; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .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 #454545; |
| border-width: 3px; |
| border-top: 0; |
| border-right: 0; |
| 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: #e5e9e8; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .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: 0; |
| 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: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-icon-button, |
| .topcoat-icon-button--quiet, |
| .topcoat-icon-button--large, |
| .topcoat-icon-button--large--quiet { |
| padding: 0 .25rem; |
| line-height: 1.313rem; |
| letter-spacing: 0; |
| color: #454545; |
| text-shadow: 0 1px #fff; |
| vertical-align: baseline; |
| background-color: #e5e9e8; |
| 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); |
| } |
| .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 #ffffff; |
| } |
| .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: #454545; |
| text-shadow: 0 1px #fff; |
| background-color: #d2d6d6; |
| border: 1px solid #9daca9; |
| box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); |
| } |
| .topcoat-icon-button--large, |
| .topcoat-icon-button--large--quiet { |
| width: 1.688rem; |
| height: 1.688rem; |
| line-height: 1.688rem; |
| } |
| .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: .81406rem; |
| height: .81406rem; |
| vertical-align: middle; |
| top: -1px; |
| } |
| .topcoat-icon--large { |
| width: 1.06344rem; |
| height: 1.06344rem; |
| top: -2px; |
| } |
| .input { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| vertical-align: top; |
| outline: 0; |
| } |
| .input:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .list { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| cursor: default; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| overflow: auto; |
| -webkit-overflow-scrolling: touch; |
| } |
| .list__header { |
| margin: 0; |
| } |
| .list__container { |
| padding: 0; |
| margin: 0; |
| list-style-type: none; |
| } |
| .list__item { |
| margin: 0; |
| padding: 0; |
| } |
| .navigation-bar { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| white-space: nowrap; |
| overflow: hidden; |
| word-spacing: 0; |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| cursor: default; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| .navigation-bar__item { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| position: relative; |
| display: inline-block; |
| vertical-align: top; |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| } |
| .navigation-bar__title { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| .notification { |
| 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: 0; |
| 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; |
| } |
| .notification, |
| .topcoat-notification { |
| 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: 0; |
| 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; |
| } |
| .topcoat-notification { |
| padding: .15em .5em .2em; |
| border-radius: 2px; |
| background-color: #ec514e; |
| color: #ffffff; |
| } |
| input[type=radio] { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .radio-button { |
| -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; |
| } |
| .radio-button__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; |
| } |
| .radio-button:before, |
| .radio-button:after { |
| content: ''; |
| position: absolute; |
| border-radius: 100%; |
| } |
| .radio-button:after { |
| top: 50%; |
| left: 50%; |
| -webkit-transform: translate(-50%, -50%); |
| -ms-transform: translate(-50%, -50%); |
| transform: translate(-50%, -50%); |
| } |
| .radio-button:before { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| } |
| .radio-button--disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| input[type=radio] { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .radio-button, |
| .topcoat-radio-button__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; |
| } |
| .radio-button__label, |
| .topcoat-radio-button { |
| 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; |
| } |
| .radio-button:before, |
| .radio-button:after, |
| .topcoat-radio-button__checkmark:before, |
| .topcoat-radio-button__checkmark:after { |
| content: ''; |
| position: absolute; |
| border-radius: 100%; |
| } |
| .radio-button:after, |
| .topcoat-radio-button__checkmark:after { |
| top: 50%; |
| left: 50%; |
| -webkit-transform: translate(-50%, -50%); |
| -ms-transform: translate(-50%, -50%); |
| transform: translate(-50%, -50%); |
| } |
| .radio-button:before, |
| .topcoat-radio-button__checkmark:before { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| } |
| .radio-button--disabled, |
| input[type=radio]:disabled + .topcoat-radio-button__checkmark { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| input[type=radio] { |
| height: 1.063rem; |
| width: 1.063rem; |
| margin-top: 0; |
| margin-right: -1.063rem; |
| margin-bottom: -1.063rem; |
| margin-left: 0; |
| } |
| input[type=radio]:checked + .topcoat-radio-button__checkmark:after { |
| opacity: 1; |
| } |
| .topcoat-radio-button { |
| color: #454545; |
| line-height: 1.063rem; |
| } |
| .topcoat-radio-button__checkmark:before { |
| width: 1.063rem; |
| height: 1.063rem; |
| background: #e5e9e8; |
| border: 1px solid #9daca9; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .topcoat-radio-button__checkmark { |
| position: relative; |
| width: 1.063rem; |
| height: 1.063rem; |
| } |
| .topcoat-radio-button__checkmark:after { |
| opacity: 0; |
| width: .313rem; |
| height: .313rem; |
| background: #454545; |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| box-shadow: 0 1px rgba(255, 255, 255, 0.5); |
| -webkit-transform: none; |
| -ms-transform: none; |
| transform: none; |
| top: .313rem; |
| left: 0.313rem; |
| } |
| input[type=radio]:focus + .topcoat-radio-button__checkmark:before { |
| border: 1px solid #0036ff; |
| box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1; |
| } |
| input[type=radio]:active + .topcoat-radio-button__checkmark:before { |
| border: 1px solid #9daca9; |
| background-color: #d2d6d6; |
| box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); |
| } |
| input[type=radio]:disabled:active + .topcoat-radio-button__checkmark:before { |
| border: 1px solid #9daca9; |
| background: #e5e9e8; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .range { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| vertical-align: top; |
| outline: 0; |
| -webkit-appearance: none; |
| } |
| .range__thumb { |
| cursor: pointer; |
| } |
| .range__thumb--webkit { |
| cursor: pointer; |
| -webkit-appearance: none; |
| } |
| .range:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .range, |
| .topcoat-range { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| vertical-align: top; |
| outline: 0; |
| -webkit-appearance: none; |
| } |
| .range__thumb, |
| .topcoat-range::-moz-range-thumb { |
| cursor: pointer; |
| } |
| .range__thumb--webkit, |
| .topcoat-range::-webkit-slider-thumb { |
| cursor: pointer; |
| -webkit-appearance: none; |
| } |
| .range:disabled, |
| .topcoat-range:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-range { |
| border-radius: 4px; |
| border: 1px solid #9daca9; |
| background-color: #d6dcdb; |
| height: .5rem; |
| border-radius: 15px; |
| } |
| .topcoat-range::-moz-range-track { |
| border-radius: 4px; |
| border: 1px solid #9daca9; |
| background-color: #d6dcdb; |
| height: .5rem; |
| border-radius: 15px; |
| } |
| .topcoat-range::-webkit-slider-thumb { |
| height: 1.313rem; |
| width: .75rem; |
| background-color: #e5e9e8; |
| border: 1px solid #9daca9; |
| border-radius: 4px; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .topcoat-range::-moz-range-thumb { |
| height: 1.313rem; |
| width: .75rem; |
| background-color: #e5e9e8; |
| border: 1px solid #9daca9; |
| border-radius: 4px; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .topcoat-range:focus::-webkit-slider-thumb { |
| border: 1px solid #0036ff; |
| box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1; |
| } |
| .topcoat-range:focus::-moz-range-thumb { |
| border: 1px solid #0036ff; |
| box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1; |
| } |
| .topcoat-range:active::-webkit-slider-thumb { |
| border: 1px solid #9daca9; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .topcoat-range:active::-moz-range-thumb { |
| border: 1px solid #9daca9; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .search-input { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| vertical-align: top; |
| outline: 0; |
| -webkit-appearance: none; |
| } |
| input[type=search]::-webkit-search-cancel-button { |
| -webkit-appearance: none; |
| } |
| .search-input:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .search-input, |
| .topcoat-search-input, |
| .topcoat-search-input--large { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| vertical-align: top; |
| outline: 0; |
| -webkit-appearance: none; |
| } |
| input[type=search]::-webkit-search-cancel-button { |
| -webkit-appearance: none; |
| } |
| .search-input:disabled, |
| .topcoat-search-input:disabled, |
| .topcoat-search-input--large:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-search-input, |
| .topcoat-search-input--large { |
| line-height: 1.313rem; |
| height: 1.313rem; |
| font-size: 12px; |
| border: 1px solid #9daca9; |
| background-color: #fff; |
| box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.23); |
| color: #454545; |
| padding: 0 0 0 1.3rem; |
| border-radius: 15px; |
| background-image: url(../img/search.svg); |
| background-position: 1rem center; |
| background-repeat: no-repeat; |
| background-size: 12px; |
| } |
| .topcoat-search-input:focus, |
| .topcoat-search-input--large:focus { |
| background-color: #fff; |
| color: #454545; |
| border: 1px solid #0036ff; |
| box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.23), 0 0 0 2px #6fb5f1; |
| } |
| .topcoat-search-input::-webkit-search-cancel-button, |
| .topcoat-search-input::-webkit-search-decoration, |
| .topcoat-search-input--large::-webkit-search-cancel-button, |
| .topcoat-search-input--large::-webkit-search-decoration { |
| margin-right: 5px; |
| } |
| .topcoat-search-input:focus::-webkit-input-placeholder, |
| .topcoat-search-input:focus::-webkit-input-placeholder { |
| color: #c6c8c8; |
| } |
| .topcoat-search-input:disabled::-webkit-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-search-input:disabled::-moz-placeholder { |
| color: #454545; |
| } |
| .topcoat-search-input:disabled:-ms-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-search-input--large { |
| line-height: 1.688rem; |
| height: 1.688rem; |
| font-size: .875rem; |
| font-weight: 400; |
| padding: 0 0 0 1.8rem; |
| border-radius: 25px; |
| background-position: 1.2rem center; |
| background-size: 0.875rem; |
| } |
| .topcoat-search-input--large:disabled { |
| color: #454545; |
| } |
| .topcoat-search-input--large:disabled::-webkit-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-search-input--large:disabled::-moz-placeholder { |
| color: #454545; |
| } |
| .topcoat-search-input--large:disabled:-ms-input-placeholder { |
| color: #454545; |
| } |
| .switch { |
| position: relative; |
| display: inline-block; |
| vertical-align: top; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| } |
| .switch__input { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .switch__toggle { |
| 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: 0; |
| cursor: default; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| .switch__toggle:before, |
| .switch__toggle:after { |
| content: ''; |
| position: absolute; |
| z-index: -1; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| } |
| .switch--disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .switch, |
| .topcoat-switch { |
| position: relative; |
| display: inline-block; |
| vertical-align: top; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| } |
| .switch__input, |
| .topcoat-switch__input { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .switch__toggle, |
| .topcoat-switch__toggle { |
| 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: 0; |
| cursor: default; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| .switch__toggle:before, |
| .switch__toggle:after, |
| .topcoat-switch__toggle:before, |
| .topcoat-switch__toggle:after { |
| content: ''; |
| position: absolute; |
| z-index: -1; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| } |
| .switch--disabled, |
| .topcoat-switch__input:disabled + .topcoat-switch__toggle { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-switch { |
| font-size: 12px; |
| padding: 0 .563rem; |
| border-radius: 4px; |
| border: 1px solid #9daca9; |
| overflow: hidden; |
| width: 3.5rem; |
| } |
| .topcoat-switch__toggle:before, |
| .topcoat-switch__toggle:after { |
| top: -1px; |
| width: 2.6rem; |
| } |
| .topcoat-switch__toggle:before { |
| content: 'ON'; |
| color: #288edf; |
| background-color: #e5f1fb; |
| right: .8rem; |
| padding-left: 0.75rem; |
| } |
| .topcoat-switch__toggle { |
| line-height: 1.313rem; |
| height: 1.313rem; |
| width: 1rem; |
| border-radius: 4px; |
| color: #454545; |
| text-shadow: 0 1px #fff; |
| background-color: #e5e9e8; |
| border: 1px solid #9daca9; |
| margin-left: -0.6rem; |
| margin-bottom: -1px; |
| margin-top: -1px; |
| box-shadow: inset 0 1px #fff; |
| -webkit-transition: margin-left 0.05s ease-in-out; |
| transition: margin-left 0.05s ease-in-out; |
| } |
| .topcoat-switch__toggle:after { |
| content: 'OFF'; |
| background-color: #d2d6d6; |
| left: .8rem; |
| padding-left: 0.6rem; |
| } |
| .topcoat-switch__input:checked + .topcoat-switch__toggle { |
| margin-left: 1.85rem; |
| } |
| .topcoat-switch__input:active + .topcoat-switch__toggle { |
| border: 1px solid #9daca9; |
| box-shadow: inset 0 1px #ffffff; |
| } |
| .topcoat-switch__input:focus + .topcoat-switch__toggle { |
| border: 1px solid #0036ff; |
| box-shadow: 0 0 0 2px #6fb5f1; |
| } |
| .topcoat-switch__input:disabled + .topcoat-switch__toggle:after, |
| .topcoat-switch__input:disabled + .topcoat-switch__toggle:before { |
| background: transparent; |
| } |
| .button, |
| .topcoat-tab-bar__button { |
| 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: 0; |
| 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-tab-bar__button:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .button-bar, |
| .topcoat-tab-bar { |
| display: table; |
| table-layout: fixed; |
| white-space: nowrap; |
| margin: 0; |
| padding: 0; |
| } |
| .button-bar__item, |
| .topcoat-tab-bar__item { |
| display: table-cell; |
| width: auto; |
| border-radius: 0; |
| } |
| .button-bar__item > input, |
| .topcoat-tab-bar__item > input { |
| position: absolute; |
| overflow: hidden; |
| padding: 0; |
| border: 0; |
| opacity: .001; |
| z-index: 1; |
| vertical-align: top; |
| outline: 0; |
| } |
| .button-bar__button { |
| border-radius: inherit; |
| } |
| .button-bar__item:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-tab-bar__button { |
| padding: 0 .563rem; |
| height: 1.313rem; |
| line-height: 1.313rem; |
| letter-spacing: 0; |
| color: #454545; |
| text-shadow: 0 1px #fff; |
| vertical-align: top; |
| background-color: #e5e9e8; |
| box-shadow: inset 0 1px #fff; |
| border-top: 1px solid #9daca9; |
| } |
| .topcoat-tab-bar__button:active, |
| .topcoat-tab-bar__button--large:active, |
| :checked + .topcoat-tab-bar__button { |
| color: #288edf; |
| background-color: #e5f1fb; |
| box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); |
| } |
| .topcoat-tab-bar__button:focus, |
| .topcoat-tab-bar__button--large:focus { |
| z-index: 1; |
| box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1; |
| outline: 0; |
| } |
| .input, |
| .topcoat-text-input, |
| .topcoat-text-input--large { |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| vertical-align: top; |
| outline: 0; |
| } |
| .input:disabled, |
| .topcoat-text-input:disabled, |
| .topcoat-text-input--large:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-text-input, |
| .topcoat-text-input--large { |
| line-height: 1.313rem; |
| font-size: 12px; |
| letter-spacing: 0; |
| padding: 0 .563rem; |
| border: 1px solid #9daca9; |
| border-radius: 4px; |
| background-color: #fff; |
| box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); |
| color: #454545; |
| vertical-align: top; |
| } |
| .topcoat-text-input:focus, |
| .topcoat-text-input--large:focus { |
| background-color: #fff; |
| color: #454545; |
| border: 1px solid #0036ff; |
| box-shadow: 0 0 0 2px #6fb5f1; |
| } |
| .topcoat-text-input:disabled::-webkit-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-text-input:disabled::-moz-placeholder { |
| color: #454545; |
| } |
| .topcoat-text-input:disabled:-ms-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-text-input:invalid { |
| border: 1px solid #ec514e; |
| } |
| .topcoat-text-input--large { |
| line-height: 1.688rem; |
| font-size: 0.875rem; |
| } |
| .topcoat-text-input--large:disabled { |
| color: #454545; |
| } |
| .topcoat-text-input--large:disabled::-webkit-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-text-input--large:disabled::-moz-placeholder { |
| color: #454545; |
| } |
| .topcoat-text-input--large:disabled:-ms-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-text-input--large:invalid { |
| border: 1px solid #ec514e; |
| } |
| .textarea { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| vertical-align: top; |
| resize: none; |
| outline: 0; |
| } |
| .textarea:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .textarea, |
| .topcoat-textarea, |
| .topcoat-textarea--large { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| vertical-align: top; |
| resize: none; |
| outline: 0; |
| } |
| .textarea:disabled, |
| .topcoat-textarea:disabled, |
| .topcoat-textarea--large:disabled { |
| opacity: .3; |
| cursor: default; |
| pointer-events: none; |
| } |
| .topcoat-textarea, |
| .topcoat-textarea--large { |
| padding: 1rem; |
| font-size: 1rem; |
| font-weight: 400; |
| border-radius: 4px; |
| line-height: 1.313rem; |
| border: 1px solid #9daca9; |
| background-color: #fff; |
| box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); |
| color: #454545; |
| letter-spacing: 0; |
| } |
| .topcoat-textarea:focus, |
| .topcoat-textarea--large:focus { |
| background-color: #fff; |
| color: #454545; |
| border: 1px solid #0036ff; |
| box-shadow: 0 0 0 2px #6fb5f1; |
| } |
| .topcoat-textarea:disabled::-webkit-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-textarea:disabled::-moz-placeholder { |
| color: #454545; |
| } |
| .topcoat-textarea:disabled:-ms-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-textarea--large { |
| font-size: 1.3rem; |
| line-height: 1.688rem; |
| } |
| .topcoat-textarea--large:disabled { |
| color: #454545; |
| } |
| .topcoat-textarea--large:disabled::-webkit-input-placeholder { |
| color: #454545; |
| } |
| .topcoat-textarea--large:disabled::-moz-placeholder { |
| color: #454545; |
| } |
| .topcoat-textarea--large:disabled:-ms-input-placeholder { |
| color: #454545; |
| } |
| @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; |
| } |
| :focus { |
| outline-color: transparent; |
| outline-style: none; |
| } |
| .topcoat-icon--menu-stack { |
| background: url(../img/hamburger_dark.svg) no-repeat; |
| background-size: cover; |
| } |
| .quarter { |
| width: 25%; |
| } |
| .half { |
| width: 50%; |
| } |
| .three-quarters { |
| width: 75%; |
| } |
| .third { |
| width: 33.333%; |
| } |
| .two-thirds { |
| width: 66.666%; |
| } |
| .full { |
| width: 100%; |
| } |
| .left { |
| text-align: left; |
| } |
| .center { |
| text-align: center; |
| } |
| .right { |
| text-align: right; |
| } |
| .reset-ui { |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| background-clip: padding-box; |
| position: relative; |
| display: inline-block; |
| vertical-align: top; |
| padding: 0; |
| margin: 0; |
| font: inherit; |
| color: inherit; |
| background: transparent; |
| border: 0; |
| 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; |
| } |
| .grid-margin { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| padding: 0 2rem; |
| } |
| .row { |
| display: -webkit-box; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-box-orient: horizontal; |
| -webkit-box-direction: normal; |
| -webkit-flex-direction: row; |
| -ms-flex-direction: row; |
| flex-direction: row; |
| -webkit-flex-wrap: wrap; |
| -ms-flex-wrap: wrap; |
| flex-wrap: wrap; |
| margin: 0 -0.5rem; |
| } |
| .row.reverse { |
| display: -webkit-box; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-box-orient: horizontal; |
| -webkit-box-direction: reverse; |
| -webkit-flex-direction: row-reverse; |
| -ms-flex-direction: row-reverse; |
| flex-direction: row-reverse; |
| -webkit-flex-wrap: row-reverse; |
| -ms-flex-wrap: row-reverse; |
| flex-wrap: row-reverse; |
| } |
| .column { |
| display: -webkit-box; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-box-orient: vertical; |
| -webkit-box-direction: normal; |
| -webkit-flex-direction: column; |
| -ms-flex-direction: column; |
| flex-direction: column; |
| } |
| .column.reverse { |
| display: -webkit-box; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-box-orient: vertical; |
| -webkit-box-direction: reverse; |
| -webkit-flex-direction: column-reverse; |
| -ms-flex-direction: column-reverse; |
| flex-direction: column-reverse; |
| -webkit-flex-wrap: column-reverse; |
| -ms-flex-wrap: column-reverse; |
| flex-wrap: column-reverse; |
| } |
| .column, |
| .column-1--hand, |
| .column-10--hand, |
| .column-11--hand, |
| .column-12--hand, |
| .column-2--hand, |
| .column-3--hand, |
| .column-4--hand, |
| .column-5--hand, |
| .column-6--hand, |
| .column-7--hand, |
| .column-8--hand, |
| .column-9--hand, |
| .column-auto--hand, |
| .offset-1--hand, |
| .offset-10--hand, |
| .offset-11--hand, |
| .offset-12--hand, |
| .offset-2--hand, |
| .offset-3--hand, |
| .offset-4--hand, |
| .offset-5--hand, |
| .offset-6--hand, |
| .offset-7--hand, |
| .offset-8--hand, |
| .offset-9--hand { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| padding: 0 0.5rem; |
| } |
| .column-1--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 8.333%; |
| -ms-flex: 0 0 8.333%; |
| flex: 0 0 8.333%; |
| } |
| .column-2--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 16.667%; |
| -ms-flex: 0 0 16.667%; |
| flex: 0 0 16.667%; |
| } |
| .column-3--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 25%; |
| -ms-flex: 0 0 25%; |
| flex: 0 0 25%; |
| } |
| .column-4--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 33.333%; |
| -ms-flex: 0 0 33.333%; |
| flex: 0 0 33.333%; |
| } |
| .column-5--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 41.667%; |
| -ms-flex: 0 0 41.667%; |
| flex: 0 0 41.667%; |
| } |
| .column-6--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 50%; |
| -ms-flex: 0 0 50%; |
| flex: 0 0 50%; |
| } |
| .column-7--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 58.333%; |
| -ms-flex: 0 0 58.333%; |
| flex: 0 0 58.333%; |
| } |
| .column-8--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 66.667%; |
| -ms-flex: 0 0 66.667%; |
| flex: 0 0 66.667%; |
| } |
| .column-9--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 75%; |
| -ms-flex: 0 0 75%; |
| flex: 0 0 75%; |
| } |
| .column-10--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 83.333%; |
| -ms-flex: 0 0 83.333%; |
| flex: 0 0 83.333%; |
| } |
| .column-11--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 91.667%; |
| -ms-flex: 0 0 91.667%; |
| flex: 0 0 91.667%; |
| } |
| .column-12--hand { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 100%; |
| -ms-flex: 0 0 100%; |
| flex: 0 0 100%; |
| } |
| .column-auto--hand { |
| -webkit-box-flex: 1; |
| -webkit-flex: 1; |
| -ms-flex: 1; |
| flex: 1; |
| } |
| .offset-1--hand { |
| margin-left: 8.333%; |
| } |
| .offset-2--hand { |
| margin-left: 16.667%; |
| } |
| .offset-3--hand { |
| margin-left: 25%; |
| } |
| .offset-4--hand { |
| margin-left: 33.333%; |
| } |
| .offset-5--hand { |
| margin-left: 41.667%; |
| } |
| .offset-6--hand { |
| margin-left: 50%; |
| } |
| .offset-7--hand { |
| margin-left: 58.333%; |
| } |
| .offset-8--hand { |
| margin-left: 66.667%; |
| } |
| .offset-9--hand { |
| margin-left: 75%; |
| } |
| .offset-10--hand { |
| margin-left: 83.333%; |
| } |
| .offset-11--hand { |
| margin-left: 91.667%; |
| } |
| .start { |
| -webkit-box-pack: start; |
| -webkit-justify-content: flex-start; |
| -ms-flex-pack: start; |
| justify-content: flex-start; |
| } |
| .center { |
| -webkit-box-pack: center; |
| -webkit-justify-content: center; |
| -ms-flex-pack: center; |
| justify-content: center; |
| } |
| .end { |
| -webkit-box-pack: end; |
| -webkit-justify-content: flex-end; |
| -ms-flex-pack: end; |
| justify-content: flex-end; |
| } |
| .top { |
| -webkit-box-align: start; |
| -webkit-align-items: flex-start; |
| -ms-flex-align: start; |
| align-items: flex-start; |
| } |
| .middle { |
| -webkit-box-align: center; |
| -webkit-align-items: center; |
| -ms-flex-align: center; |
| align-items: center; |
| } |
| .bottom { |
| -webkit-box-align: end; |
| -webkit-align-items: flex-end; |
| -ms-flex-align: end; |
| align-items: flex-end; |
| } |
| .around { |
| -webkit-justify-content: space-around; |
| -ms-flex-pack: distribute; |
| justify-content: space-around; |
| } |
| .between { |
| -webkit-box-pack: justify; |
| -webkit-justify-content: space-between; |
| -ms-flex-pack: justify; |
| justify-content: space-between; |
| } |
| .first { |
| -webkit-box-ordinal-group: 0; |
| -webkit-order: -1; |
| -ms-flex-order: -1; |
| order: -1; |
| } |
| .last { |
| -webkit-box-ordinal-group: 2; |
| -webkit-order: 1; |
| -ms-flex-order: 1; |
| order: 1; |
| } |
| @media only screen and (min-width: 48rem) { |
| .column-1--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 8.333%; |
| -ms-flex: 0 0 8.333%; |
| flex: 0 0 8.333%; |
| } |
| .column-2--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 16.667%; |
| -ms-flex: 0 0 16.667%; |
| flex: 0 0 16.667%; |
| } |
| .column-3--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 25%; |
| -ms-flex: 0 0 25%; |
| flex: 0 0 25%; |
| } |
| .column-4--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 33.333%; |
| -ms-flex: 0 0 33.333%; |
| flex: 0 0 33.333%; |
| } |
| .column-5--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 41.667%; |
| -ms-flex: 0 0 41.667%; |
| flex: 0 0 41.667%; |
| } |
| .column-6--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 50%; |
| -ms-flex: 0 0 50%; |
| flex: 0 0 50%; |
| } |
| .column-7--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 58.333%; |
| -ms-flex: 0 0 58.333%; |
| flex: 0 0 58.333%; |
| } |
| .column-8--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 66.667%; |
| -ms-flex: 0 0 66.667%; |
| flex: 0 0 66.667%; |
| } |
| .column-9--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 75%; |
| -ms-flex: 0 0 75%; |
| flex: 0 0 75%; |
| } |
| .column-10--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 83.333%; |
| -ms-flex: 0 0 83.333%; |
| flex: 0 0 83.333%; |
| } |
| .column-11--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 91.667%; |
| -ms-flex: 0 0 91.667%; |
| flex: 0 0 91.667%; |
| } |
| .column-12--lap { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 100%; |
| -ms-flex: 0 0 100%; |
| flex: 0 0 100%; |
| } |
| .column-auto--lap { |
| -webkit-box-flex: 1; |
| -webkit-flex: 1; |
| -ms-flex: 1; |
| flex: 1; |
| } |
| .offset-1--lap { |
| margin-left: 8.333%; |
| } |
| .offset-2--lap { |
| margin-left: 16.667%; |
| } |
| .offset-3--lap { |
| margin-left: 25%; |
| } |
| .offset-4--lap { |
| margin-left: 33.333%; |
| } |
| .offset-5--lap { |
| margin-left: 41.667%; |
| } |
| .offset-6--lap { |
| margin-left: 50%; |
| } |
| .offset-7--lap { |
| margin-left: 58.333%; |
| } |
| .offset-8--lap { |
| margin-left: 66.667%; |
| } |
| .offset-9--lap { |
| margin-left: 75%; |
| } |
| .offset-10--lap { |
| margin-left: 83.333%; |
| } |
| .offset-11--lap { |
| margin-left: 91.667%; |
| } |
| } |
| @media only screen and (min-width: 62rem) { |
| .column-1--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 8.333%; |
| -ms-flex: 0 0 8.333%; |
| flex: 0 0 8.333%; |
| } |
| .column-2--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 16.667%; |
| -ms-flex: 0 0 16.667%; |
| flex: 0 0 16.667%; |
| } |
| .column-3--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 25%; |
| -ms-flex: 0 0 25%; |
| flex: 0 0 25%; |
| } |
| .column-4--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 33.333%; |
| -ms-flex: 0 0 33.333%; |
| flex: 0 0 33.333%; |
| } |
| .column-5--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 41.667%; |
| -ms-flex: 0 0 41.667%; |
| flex: 0 0 41.667%; |
| } |
| .column-6--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 50%; |
| -ms-flex: 0 0 50%; |
| flex: 0 0 50%; |
| } |
| .column-7--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 58.333%; |
| -ms-flex: 0 0 58.333%; |
| flex: 0 0 58.333%; |
| } |
| .column-8--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 66.667%; |
| -ms-flex: 0 0 66.667%; |
| flex: 0 0 66.667%; |
| } |
| .column-9--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 75%; |
| -ms-flex: 0 0 75%; |
| flex: 0 0 75%; |
| } |
| .column-10--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 83.333%; |
| -ms-flex: 0 0 83.333%; |
| flex: 0 0 83.333%; |
| } |
| .column-11--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 91.667%; |
| -ms-flex: 0 0 91.667%; |
| flex: 0 0 91.667%; |
| } |
| .column-12--desk { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 100%; |
| -ms-flex: 0 0 100%; |
| flex: 0 0 100%; |
| } |
| .column-auto--desk { |
| -webkit-box-flex: 1; |
| -webkit-flex: 1; |
| -ms-flex: 1; |
| flex: 1; |
| } |
| .offset-1--desk { |
| margin-left: 8.333%; |
| } |
| .offset-2--desk { |
| margin-left: 16.667%; |
| } |
| .offset-3--desk { |
| margin-left: 25%; |
| } |
| .offset-4--desk { |
| margin-left: 33.333%; |
| } |
| .offset-5--desk { |
| margin-left: 41.667%; |
| } |
| .offset-6--desk { |
| margin-left: 50%; |
| } |
| .offset-7--desk { |
| margin-left: 58.333%; |
| } |
| .offset-8--desk { |
| margin-left: 66.667%; |
| } |
| .offset-9--desk { |
| margin-left: 75%; |
| } |
| .offset-10--desk { |
| margin-left: 83.333%; |
| } |
| .offset-11--desk { |
| margin-left: 91.667%; |
| } |
| } |
| @media only screen and (min-width: 75rem) { |
| .column-1--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 8.333%; |
| -ms-flex: 0 0 8.333%; |
| flex: 0 0 8.333%; |
| } |
| .column-2--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 16.667%; |
| -ms-flex: 0 0 16.667%; |
| flex: 0 0 16.667%; |
| } |
| .column-3--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 25%; |
| -ms-flex: 0 0 25%; |
| flex: 0 0 25%; |
| } |
| .column-4--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 33.333%; |
| -ms-flex: 0 0 33.333%; |
| flex: 0 0 33.333%; |
| } |
| .column-5--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 41.667%; |
| -ms-flex: 0 0 41.667%; |
| flex: 0 0 41.667%; |
| } |
| .column-6--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 50%; |
| -ms-flex: 0 0 50%; |
| flex: 0 0 50%; |
| } |
| .column-7--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 58.333%; |
| -ms-flex: 0 0 58.333%; |
| flex: 0 0 58.333%; |
| } |
| .column-8--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 66.667%; |
| -ms-flex: 0 0 66.667%; |
| flex: 0 0 66.667%; |
| } |
| .column-9--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 75%; |
| -ms-flex: 0 0 75%; |
| flex: 0 0 75%; |
| } |
| .column-10--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 83.333%; |
| -ms-flex: 0 0 83.333%; |
| flex: 0 0 83.333%; |
| } |
| .column-11--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 91.667%; |
| -ms-flex: 0 0 91.667%; |
| flex: 0 0 91.667%; |
| } |
| .column-12--wall { |
| -webkit-box-flex: 0; |
| -webkit-flex: 0 0 100%; |
| -ms-flex: 0 0 100%; |
| flex: 0 0 100%; |
| } |
| .column-auto--wall { |
| -webkit-box-flex: 1; |
| -webkit-flex: 1; |
| -ms-flex: 1; |
| flex: 1; |
| } |
| .offset-1--wall { |
| margin-left: 8.333%; |
| } |
| .offset-2--wall { |
| margin-left: 16.667%; |
| } |
| .offset-3--wall { |
| margin-left: 25%; |
| } |
| .offset-4--wall { |
| margin-left: 33.333%; |
| } |
| .offset-5--wall { |
| margin-left: 41.667%; |
| } |
| .offset-6--wall { |
| margin-left: 50%; |
| } |
| .offset-7--wall { |
| margin-left: 58.333%; |
| } |
| .offset-8--wall { |
| margin-left: 66.667%; |
| } |
| .offset-9--wall { |
| margin-left: 75%; |
| } |
| .offset-10--wall { |
| margin-left: 83.333%; |
| } |
| .offset-11--wall { |
| margin-left: 91.667%; |
| } |
| } |
| /* ----- basic layout ----- */ |
| body { |
| background: #fff; |
| margin: 0; |
| font-family: 'Lato', sans-serif; |
| } |
| .wrap, |
| #tabs { |
| width: 100% |
| margin: 0 auto; |
| padding: 0px; |
| } |
| /* ----- common elements -----*/ |
| a { |
| color: #4cc2e4; |
| text-decoration: none; |
| } |
| a.dep-link { |
| padding-right: 7px; |
| } |
| .spacer, |
| .clear { |
| clear: both; |
| margin-bottom: 10px; |
| } |
| .button { |
| display: inline-block; |
| background-color: #4cc2e4; |
| margin-left: 8px; |
| padding: 10px 16px; |
| color: #fff; |
| font-size: 1.5em; |
| text-align: center; |
| text-decoration: none; |
| -webkit-transition: background; |
| -moz-transition: background; |
| -ms-transition: background; |
| -o-transition: background; |
| -webkit-transition: background 0.25s linear; |
| -moz-transition: background 0.25s linear; |
| transition: background 0.25s linear; |
| border-bottom: 4px solid #21b2dc; |
| } |
| .button:hover { |
| background-color: #4cd6fc; |
| color: #fff; |
| } |
| .pluggy-logo { |
| background: transparent url('../img/pluggy.png') no-repeat top left; |
| background-size: contain; |
| } |
| .top-logo { |
| height: 50px; |
| width: 32px; |
| } |
| /* ----- content ---- */ |
| #content-wrapper { |
| padding-top: 0; |
| } |
| #content, |
| #tabs a, |
| #tabs span { |
| background: #fff; |
| padding: 2% 2%; |
| -moz-background-clip: padding; |
| -webkit-background-clip: padding-box; |
| background-clip: padding-box; |
| -moz-border-radius: 5px; |
| -webkit-border-radius: 5px; |
| border-radius: 5px; |
| position: relative; |
| } |
| #content { |
| padding: 4% 2%; |
| } |
| #tabs { |
| margin-bottom: -7px; |
| padding-bottom: 0; |
| } |
| #tabs a, |
| #tabs span { |
| display: inline-block; |
| padding: 16px 20px 18px; |
| margin: 0 10px 0 0; |
| } |
| #tabs a { |
| -webkit-transition: background-color; |
| -moz-transition: background-color; |
| -ms-transition: background-color; |
| -o-transition: background-color; |
| -webkit-transition: background-color 0.25s linear; |
| -moz-transition: background-color 0.25s linear; |
| transition: background-color 0.25s linear; |
| background-color: #4cc2e4; |
| color: #fff; |
| } |
| #tabs a:hover { |
| background-color: #78d1eb; |
| } |
| #tabs a.selected { |
| background-color: #fff; |
| color: #656f78; |
| } |
| #tabs a.selected:hover { |
| background-color: #fff; |
| } |
| .search-container { |
| float: left; |
| margin-right: 30px; |
| padding-top: 20px; |
| } |
| .search-container input { |
| border: 1px solid #0036ff; |
| } |
| #search-box { |
| width: auto; |
| margin-bottom: 20px; |
| } |
| #search-box-input span { |
| line-height: 60px; |
| width: 5%; |
| font-size: 1.5em; |
| font-weight: bold; |
| text-align: center; |
| float: left; |
| } |
| #search-box-input .button { |
| padding-left: 2%; |
| padding-right: 2%; |
| width: 25%; |
| float: left; |
| } |
| #search-input { |
| width: auto; |
| min-width: 90%; |
| font-size: 1.5em; |
| padding: 10px 2%; |
| border: none; |
| font-weight: normal; |
| margin: 0 8px 0 0; |
| border: 1px solid #ddd; |
| border-top: 4px #ddd solid; |
| } |
| #search-input:focus { |
| outline-color: #4cc2e4; |
| } |
| #browse-anchors a { |
| margin-right: 20px; |
| padding: 3px 5px 3px 5px; |
| background-color: #fff; |
| display: inline-block; |
| background-color: #4cc2e4; |
| margin-right: 8px; |
| padding: 4px 12px; |
| color: #fff; |
| text-align: center; |
| text-decoration: none; |
| -webkit-transition: background; |
| -moz-transition: background; |
| -ms-transition: background; |
| -o-transition: background; |
| -webkit-transition: background 0.25s linear; |
| -moz-transition: background 0.25s linear; |
| transition: background 0.25s linear; |
| border-bottom: 2px solid #21b2dc; |
| } |
| #browse-anchors a:hover { |
| background-color: #4cd6fc; |
| color: #fff; |
| } |
| /* ----- everything else ----- */ |
| #banner { |
| background-color: #ff8001; |
| color: #ffffff; |
| } |
| #banner a { |
| color: #ffffff; |
| border-bottom: 2px solid #ffffff; |
| } |
| div#results { |
| font-size: 20px; |
| width: 100%; |
| padding-top: 4px; |
| } |
| div.result { |
| width: 100%; |
| } |
| div.result-container { |
| padding-bottom: 6px; |
| } |
| span.result-name { |
| padding-right: 10px; |
| } |
| span.result-desc { |
| color: #6B6B6B; |
| } |
| div.result-tags { |
| text-align: right; |
| font-size: 16px; |
| padding-right: 4px; |
| float: right; |
| } |
| span.tag { |
| padding-left: 6px; |
| cursor: pointer; |
| color: #878787; |
| } |
| span.desc-term { |
| color: #141414; |
| } |
| div.package { |
| text-align: center; |
| } |
| div.package-title { |
| font-size: 22px; |
| float: left; |
| } |
| div.package-label { |
| font-size: 14px; |
| color: #999999; |
| } |
| div.pkg-link { |
| float: left; |
| padding-top: 20px; |
| margin-left: 30px; |
| } |
| div#latest-packages { |
| width: 45%; |
| float: left; |
| margin-right: 5%; |
| } |
| div#top-dep-packages { |
| width: 45%; |
| margin-left: 5%; |
| float: left; |
| } |
| div.top-title { |
| text-align: center; |
| } |
| div.top-package { |
| width: 100%; |
| } |
| div.top-package-title { |
| padding-right: 7px; |
| float: left; |
| } |
| div.top-package-updated { |
| float: right; |
| text-align: right; |
| padding-right: 15px; |
| } |
| div.top-package-dep { |
| float: right; |
| text-align: right; |
| padding-right: 15px; |
| } |
| div.dependencies { |
| width: 80%; |
| text-align: left; |
| padding-left: 10%; |
| padding-right: 10%; |
| } |
| div.users { |
| width: 80%; |
| text-align: left; |
| padding-left: 10%; |
| padding-right: 10%; |
| } |
| a.dep { |
| margin-right: 10px; |
| } |
| a.user { |
| margin-right: 10px; |
| } |
| div#totals { |
| float: right; |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| } |
| div.all-package { |
| width: 100%; |
| } |
| div.all-package-name { |
| width: 40%; |
| padding-right: 2%; |
| float: left; |
| } |
| div.all-package-desc { |
| width: 50%; |
| float: left; |
| } |
| div#more-all { |
| cursor: pointer; |
| color: blue; |
| } |
| div#versions-container { |
| margin-top: 10px; |
| width: 100%; |
| } |
| div#version-list { |
| float: left; |
| width: 20%; |
| } |
| div#version-info { |
| float: left; |
| width: 78%; |
| background-color: #B9D3EE; |
| padding: 1% 1% 1% 1%; |
| } |
| div.version-info-cell { |
| width: 100%; |
| } |
| div.version-info-key { |
| float: left; |
| } |
| div.version-info-value { |
| float: right; |
| text-align: right; |
| } |
| div.version-selected { |
| background-color: #B9D3EE; |
| } |
| div.version-link { |
| width: 100%; |
| padding: 3px 0px 0px 10px; |
| } |
| span.expand-tags { |
| padding-left: 10px; |
| font-size: 12px; |
| cursor: pointer; |
| color: #FF1D4E; |
| } |
| a.tag-val { |
| padding-right: 10px; |
| padding-left: 5px; |
| } |
| div.all-package-author { |
| width: 30%; |
| float: left; |
| } |
| div.all-package-auth-list { |
| width: 70%; |
| float: left; |
| } |
| div.all-package-deps { |
| width: 50%; |
| float: left; |
| } |
| div.all-package-deps-value { |
| width: 50%; |
| float: left; |
| } |
| div.tags-pkg-name { |
| float: left; |
| width: 30%; |
| font-size: 30px; |
| } |
| div.tags-pkg-desc { |
| float: left; |
| width: 70%; |
| } |
| div.right { |
| float: right; |
| } |
| div.left { |
| float: left; |
| } |
| .invisible--hand { |
| display: none; |
| visibility: hidden; |
| } |
| .visible--hand { |
| display: block; |
| visibility: visible; |
| } |
| @media only screen and (min-width: 48rem) { |
| .invisible--lap { |
| display: none; |
| visibility: hidden; |
| } |
| .visible--lap { |
| display: flex; |
| visibility: visible; |
| } |
| } |
| /* ----- header ---- */ |
| #header { |
| background-color: #3b4854; |
| color: #ffffff; |
| border-bottom: 3px solid rgba(0, 0, 0, 0.1); |
| height: 50px; |
| padding: 10px; |
| position: relative; |
| text-align: left; |
| z-index: 3; |
| } |
| #header .header-content { |
| width: 100%; |
| } |
| #header a { |
| -webkit-transition: color; |
| -moz-transition: color; |
| -ms-transition: color; |
| -o-transition: color; |
| -webkit-transition: color 0.25s linear; |
| -moz-transition: color 0.25s linear; |
| transition: color 0.25s linear; |
| color: #ffffff; |
| display: inline-block; |
| padding: 0; |
| position: relative; |
| } |
| #header a:hover { |
| color: #4cc2e4; |
| } |
| #header a.logo { |
| padding-left: 40px; |
| margin-left: 50px; |
| font-size: 1.2em; |
| } |
| #header a.logo:before { |
| font-size: 1.5em; |
| position: absolute; |
| left: 0; |
| top: 3px; |
| } |
| #header .top-project-text, |
| #header .top-plugins-registry-text { |
| text-transform: uppercase; |
| font-weight: 300; |
| } |
| #header .top-project-text { |
| font-size: 12px; |
| } |
| #header .top-plugins-registry-text { |
| font-size: 16px; |
| } |
| #header .header-links { |
| font-size: 18px; |
| font-weight: lighter; |
| padding: 5px; |
| } |
| #header .header-links a { |
| padding: 20px 20px 0px 0px; |
| } |
| #header #howto { |
| float: right; |
| } |
| #header #howto a { |
| padding-top: 10px; |
| margin-left: 24px; |
| } |
| #header #howto a span { |
| position: absolute; |
| top: 0px; |
| left: 0; |
| font-size: 10px; |
| font-weight: 600; |
| } |
| @media only screen and (min-width: 48rem) { |
| #header .top-plugins-registry-text { |
| font-size: 26px; |
| } |
| } |
| /* ----- footer ---- */ |
| #footer { |
| border-top: solid 1px #bfb7b9; |
| padding-top: 20px; |
| margin-top: 20px; |
| } |
| #footer a { |
| font-size: 14px; |
| font-weight: 500; |
| } |
| #footer p { |
| font-size: 12px; |
| color: #a5a5a5; |
| } |
| #footer a { |
| color: #169fc7; |
| font-weight: bold; |
| } |
| /* ========================================================================== |
| MEDIA QUERIES |
| ========================================================================== */ |
| @media screen and (max-width: 1050px), screen and (max-device-width: 1050px) { |
| /*body .header{background-attachment: scroll;} |
| |
| #body-container { |
| }*/ |
| } |
| /*ipad portrait*/ |
| @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { |
| /*.header{background-attachment: scroll;} |
| |
| #body-container { |
| background-color: green; |
| }*/ |
| } |
| @media screen and (max-width: 769px) { |
| /*#body-container { |
| } |
| |
| #body-container { |
| font-size: 80px; |
| } |
| |
| #body-container #header { |
| font-size: 30px; |
| line-height: 38px; |
| } |
| .mobile-phone-img{ |
| position:relative; |
| left:50%; |
| margin-left:-162px; |
| }*/ |
| } |
| /* Home styles */ |
| #home-container { |
| min-height: 350px; |
| } |
| .home-pluggy { |
| height: 260px; |
| margin: -89px auto 10px auto; |
| width: 169px; |
| } |
| .discover-message-container { |
| padding-top: 120px; |
| } |
| .grid-gradient { |
| background-color: transparent; |
| background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#ededed)); |
| background: -webkit-linear-gradient(top, transparent, #ededed); |
| background: -moz-linear-gradient(top, transparent, #ededed); |
| background: -ms-linear-gradient(top, transparent, #ededed); |
| background: -o-linear-gradient(top, transparent, #ededed); |
| } |
| .cordova-grid-bg { |
| background: url(../img/grid.png); |
| } |
| .discover-message { |
| background-color: white; |
| font-size: 41px; |
| margin: 1px; |
| text-align: center; |
| } |
| .home-plugin-listing-headers { |
| margin: 20px auto; |
| } |
| .home-plugin-listing-headers h3 { |
| color: #3b4854; |
| font-weight: bolder; |
| font-size: 30px; |
| margin: 0; |
| } |
| .home-plugin-listing-headers div { |
| font-size: 14px; |
| } |
| .home-plugin-listing { |
| text-align: left; |
| margin: 20px auto; |
| } |
| .call-to-action-panes { |
| text-align: center; |
| } |
| .call-to-action-pane { |
| background-color: #effbfe; |
| margin: 20px auto; |
| position: relative; |
| text-align: center; |
| height: 220px; |
| padding-left: 13px; |
| padding-right: 13px; |
| } |
| .call-to-action-mid-spacer { |
| flex-basis: 8%; |
| position: relative; |
| } |
| .call-to-action-mid-spacer div { |
| color: #F0F0F0; |
| font-size: 45px; |
| left: 75%; |
| position: absolute; |
| top: 40%; |
| } |
| .call-to-action-pane-left-triangle, |
| .call-to-action-pane-right-triangle { |
| position: absolute; |
| } |
| .call-to-action-pane-left-triangle { |
| height: 100%; |
| overflow: hidden; |
| right: 0px; |
| } |
| .call-to-action-pane-left-triangle div { |
| width: 0px; |
| height: 0px; |
| border-style: solid; |
| border-width: 105px 18px 105px 0; |
| border-color: transparent #ffffff transparent transparent; |
| } |
| .call-to-action-pane-right-triangle { |
| height: 100%; |
| overflow: hidden; |
| left: 0px; |
| } |
| .call-to-action-pane-right-triangle div { |
| width: 0px; |
| height: 0px; |
| border-style: solid; |
| border-width: 105px 0 105px 18px; |
| border-color: transparent transparent transparent #ffffff; |
| } |
| .call-to-action-img { |
| border: solid 1px transparent; |
| border-radius: 30px; |
| background-color: white; |
| padding: 5px; |
| margin-top: 20px; |
| } |
| /* Package Details styles */ |
| .space { |
| padding: 5px 0px; |
| border-bottom: solid 2px #eeeeee; |
| } |
| .toprow { |
| padding-top: 10px; |
| } |
| .top-button { |
| border-bottom: dotted 1px blue; |
| color: #4cc2e4; |
| cursor: pointer; |
| padding: 20px 0px; |
| } |
| .version-dropdown { |
| width: 100%; |
| } |
| .package-detail-rows div.row { |
| padding: 5px 0px; |
| word-wrap: break-word; |
| } |
| .package-downloads { |
| background: #eeeeee; |
| margin: -10px; |
| text-align: right; |
| font-weight: lighter; |
| } |
| .package-downloads .package-label { |
| font-weight: normal; |
| } |
| .readme { |
| margin-top: 10px; |
| } |
| /* View all page styles */ |
| .viewContainer { |
| padding-left: 10px; |
| } |
| .loading-plugins { |
| padding: 20px; |
| } |
| /* Search styles */ |
| .searchContainer { |
| padding-left: 10px; |
| } |
| .found { |
| font-size: 25px; |
| color: #3b4854; |
| padding: 15px 0px; |
| border-bottom: dotted 1px #bfb7b9; |
| } |
| .filter-row { |
| padding-top: 10px; |
| } |
| .filter-list { |
| padding: 10px; |
| } |
| .filter-list label { |
| padding: 10px; |
| } |
| .filter-list label span { |
| padding-left: 5px; |
| } |
| .filter-platform-note { |
| color: gray; |
| font-size: 12px; |
| padding-left: 10px; |
| } |
| .topbar-row { |
| padding-top: 5px; |
| padding-bottom: 5px; |
| background-color: #ededed; |
| } |
| .topbar-search { |
| height: 35px; |
| border: 1px solid #4cc2e4; |
| } |
| .topbar-button { |
| background-color: #4cc2e4; |
| height: 35px; |
| background-position: center; |
| background-image: url('/img/search_light.svg'); |
| background-size: 20px 25px; |
| background-repeat: no-repeat; |
| margin-left: -5px; |
| border: 2px solid #4cc2e4; |
| } |
| .topbar-spacer { |
| color: #eeeeee; |
| padding-top: 10px; |
| } |
| .topbar-browse { |
| display: block; |
| font-size: 20px; |
| padding-top: 5px; |
| } |
| .pluginHeader { |
| border-bottom: solid 1px #3b4854; |
| padding: 15px 0px; |
| color: #3b4854; |
| } |
| .pluginItem { |
| border-bottom: solid 1px #eeeeee; |
| padding: 15px 0px; |
| } |
| .pluginItem a { |
| font-weight: 300; |
| } |
| .pluginItemDescription { |
| color: #a0a0a0; |
| font-weight: 200; |
| } |
| .pluginItemDownloads, |
| .pluginItemVersion { |
| color: #3b4854; |
| font-weight: 400; |
| } |
