update topcoat demo with ios and android theme# Please enter the commit message for your changes. Lines starting# with '#' will be ignored, and an empty message aborts the commit.# On branch master# Your branch is ahead of 'origin/master' by 1 commit.## Changes to be committed:#   (use "git reset HEAD^1 <file>..." to unstage)##	modified:   topcoat/Gruntfile.js#	modified:   topcoat/css/topcoat-desktop-dark.css#	deleted:    topcoat/css/topcoat-desktop-dark.min.css#	modified:   topcoat/css/topcoat-desktop-light.css#	deleted:    topcoat/css/topcoat-desktop-light.min.css#	modified:   topcoat/css/topcoat-mobile-dark.css#	modified:   topcoat/css/topcoat-mobile-dark.min.css#	modified:   topcoat/css/topcoat-mobile-light.css#	modified:   topcoat/css/topcoat-mobile-light.min.css#	renamed:    topcoat/css/topcoat-desktop-dark.css -> topcoat/css/topcoat-mobile-onsen-android4_4.css#	new file:   topcoat/css/topcoat-mobile-onsen-android4_4.min.css#	modified:   topcoat/css/topcoat-mobile-onsen-blue.css#	modified:   topcoat/css/topcoat-mobile-onsen-blue.min.css#	modified:   topcoat/css/topcoat-mobile-onsen-green.css#	modified:   topcoat/css/topcoat-mobile-onsen-green.min.css#	renamed:    topcoat/css/topcoat-desktop-light.css -> topcoat/css/topcoat-mobile-onsen-ios7.css#	new file:   topcoat/css/topcoat-mobile-onsen-ios7.min.css#	modified:   topcoat/css/topcoat-mobile-onsen-orange.css#	modified:   topcoat/css/topcoat-mobile-onsen-orange.min.css#	modified:   topcoat/css/topcoat-mobile-onsen-pink.css#	modified:   topcoat/css/topcoat-mobile-onsen-pink.min.css#	modified:   topcoat/css/topcoat-mobile-onsen-purple.css#	modified:   topcoat/css/topcoat-mobile-onsen-purple.min.css#	modified:   topcoat/css/topcoat-mobile-onsen-yellow.css#	modified:   topcoat/css/topcoat-mobile-onsen-yellow.min.css#	modified:   topcoat/demo/index.html#	modified:   topcoat/demo/topcoat-desktop-light.html#	modified:   topcoat/demo/topcoat-mobile-dark.html#	modified:   topcoat/demo/topcoat-mobile-light.html#	renamed:    topcoat/demo/index.html -> topcoat/demo/topcoat-mobile-onsen-android4_4.html#	modified:   topcoat/demo/topcoat-mobile-onsen-blue.html#	modified:   topcoat/demo/topcoat-mobile-onsen-green.html#	renamed:    topcoat/demo/topcoat-desktop-light.html -> topcoat/demo/topcoat-mobile-onsen-ios7.html#	modified:   topcoat/demo/topcoat-mobile-onsen-orange.html#	modified:   topcoat/demo/topcoat-mobile-onsen-pink.html#	modified:   topcoat/demo/topcoat-mobile-onsen-purple.html#	modified:   topcoat/demo/topcoat-mobile-onsen-yellow.html#	modified:   topcoat/package.json#diff --git a/topcoat/Gruntfile.js b/topcoat/Gruntfile.jsindex 5645ce6..44c9d46 100644--- a/topcoat/Gruntfile.js+++ b/topcoat/Gruntfile.js@@ -58,6 +58,28 @@ module.exports = function(grunt) {                 }]             }, +            mobile_onsen_ios7: {+                options: {+                    import: ['theme-topcoat-mobile-onsen-ios7', 'utils']+                },++                files: [{+                    src: 'node_modules/topcoat-*/src/**/*.styl',+                    dest: 'css/topcoat-mobile-onsen-ios7.css'+                }]+            },++            mobile_onsen_android4_4: {+                options: {+                    import: ['theme-topcoat-mobile-onsen-android4_4', 'utils']+                },++                files: [{+                    src: 'node_modules/topcoat-*/src/**/*.styl',+                    dest: 'css/topcoat-mobile-onsen-android4_4.css'+                }]+            },+             mobile_onsen_blue: {                 options: {                     import: ['theme-topcoat-mobile-onsen-blue', 'utils']@@ -102,7 +124,7 @@ module.exports = function(grunt) {                 }]             }, -              mobile_onsen_purple: {+            mobile_onsen_purple: {                 options: {                     import: ['theme-topcoat-mobile-onsen-purple', 'utils']                 },@@ -113,7 +135,7 @@ module.exports = function(grunt) {                 }]             }, -              mobile_onsen_yellow: {+            mobile_onsen_yellow: {                 options: {                     import: ['theme-topcoat-mobile-onsen-yellow', 'utils']                 },@@ -124,34 +146,34 @@ module.exports = function(grunt) {                 }]             }, -            desktoplight: {-                options: {-                    import: ['theme-topcoat-desktop-light', 'utils']-                },-                files: [{-                    src: [-                        'node_modules/topcoat-*/src/**/*.styl',-                        '!node_modules/topcoat-navigation-bar/src/*.styl',-                        '!node_modules/topcoat-list/src/*.styl'-                        ],-                    dest: 'css/topcoat-desktop-light.css'-                }]-            },--            desktopdark: {-                options: {-                    import: ['theme-topcoat-desktop-dark', 'utils']-                },--                files: [{-                    src: [-                        'node_modules/topcoat-*/src/**/*.styl',-                        '!node_modules/topcoat-navigation-bar/src/*.styl',-                        '!node_modules/topcoat-list/src/*.styl'-                        ],-                    dest: 'css/topcoat-desktop-dark.css'-                }]-            }+            // desktoplight: {+            //     options: {+            //         import: ['theme-topcoat-desktop-light', 'utils']+            //     },+            //     files: [{+            //         src: [+            //             'node_modules/topcoat-*/src/**/*.styl',+            //             '!node_modules/topcoat-navigation-bar/src/*.styl',+            //             '!node_modules/topcoat-list/src/*.styl'+            //             ],+            //         dest: 'css/topcoat-desktop-light.css'+            //     }]+            // },++            // desktopdark: {+            //     options: {+            //         import: ['theme-topcoat-desktop-dark', 'utils']+            //     },++            //     files: [{+            //         src: [+            //             'node_modules/topcoat-*/src/**/*.styl',+            //             '!node_modules/topcoat-navigation-bar/src/*.styl',+            //             '!node_modules/topcoat-list/src/*.styl'+            //             ],+            //         dest: 'css/topcoat-desktop-dark.css'+            //     }]+            // }         },          topdoc: {@@ -235,8 +257,15 @@ module.exports = function(grunt) {                   {                     src: 'css/topcoat-mobile-onsen-yellow.css',                     dest: 'css/topcoat-mobile-onsen-yellow.css'-                }-                ]+                },+                  {+                    src: 'css/topcoat-mobile-onsen-ios7.css',+                    dest: 'css/topcoat-mobile-onsen-ios7.css'+                },+                  {+                    src: 'css/topcoat-mobile-onsen-android4_4.css',+                    dest: 'css/topcoat-mobile-onsen-android4_4.css'+                }]             }          },diff --git a/topcoat/css/topcoat-desktop-dark.css b/topcoat/css/topcoat-desktop-dark.cssindex 102f166..e69de29 100644--- a/topcoat/css/topcoat-desktop-dark.css+++ b/topcoat/css/topcoat-desktop-dark.css@@ -1,4030 +0,0 @@-/**-*-* 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-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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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: #c6c8c8;-  color: var-color__button;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: top;-  background-color: #595b5b;-  background-color: var-background-color__button;-  box-shadow: inset 0 1px #737373;-  border: 1px solid #333434;-  border: var-border--button;-  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: #626465;-  background-color: var-background-color--hover__button;-}--.topcoat-button:active,-.topcoat-button--large:active,-.topcoat-button-bar__button:active,-.topcoat-button-bar__button--large:active,-:checked + .topcoat-button-bar__button {-  background-color: #3f4041;-  background-color: var-background-color--down__button;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-  color: var-color--button--active;-}--.topcoat-button:focus,-.topcoat-button--quiet:focus,-.topcoat-button--large:focus,-.topcoat-button--large--quiet:focus,-.topcoat-button--cta:focus,-.topcoat-button--large--cta:focus,-.topcoat-button-bar__button:focus,-.topcoat-button-bar__button--large:focus {-  outline: 0;-}--.topcoat-button--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-}--.topcoat-button--quiet:hover,-.topcoat-button--large--quiet:hover {-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  border: 1px solid #333434;-  border: var-border--hover__button--quiet;-  background-color: var-background-color--quiet-hover;-  box-shadow: inset 0 1px #737373;-  background-color: var-background-color--quiet-hover;-}--.topcoat-button--quiet:active,-.topcoat-button--large--quiet:active {-  color: #c6c8c8;-  color: var-color--active__button--quiet;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #3f4041;-  background-color: var-background-color--quiet-active;-  border: 1px solid #333434;-  border: var-border--active__button--quiet;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--.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 {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  color: var-quiet-button-color;-}--.topcoat-button--large--quiet:active {-  color: var-color--quiet-active;-}--.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;-}--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Button Bar-  description: Component of grouped buttons-  modifiers:-    :disabled: Disabled state-  markup:-    <div class="topcoat-button-bar">-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button">One</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button">Two</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button">Three</button>-      </div>-    </div>-  examples:-    mobile button bar: http://codepen.io/Topcoat/pen/kdKyg-  tags:-    - desktop-    - light-    - dark-    - mobile-    - button-    - group-    - bar-*/--.topcoat-button-bar {-  margin: var-button-bar-margin;-}--.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: none;-  border-right: var-border-right--button-bar__button__first;-}--.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,-.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {-  border-left: none;-  border-right: var-border-right--button-bar__button__last;-}--.topcoat-button-bar__button {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button:active,-.topcoat-button-bar__button--large:active,-:checked + .topcoat-button-bar__button {-  background-color: var-background-color--button-bar--button--active;-  color: var-color--button-bar__button--active;-  border: var-border--button-bar__button;-}--.topcoat-button-bar__button:hover {-  background-color: var-background-color--button-bar--button--hover;-}--.topcoat-button-bar__button:focus,-.topcoat-button-bar__button--large:focus {-  z-index: 1;-}--/* topdoc-  name: Large Button Bar-  description: A button bar, only larger-  modifiers:-    :disabled: Disabled state-  markup:-    <div class="topcoat-button-bar">-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button--large">One</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button--large">Two</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button--large">Three</button>-      </div>-    </div>-  tags:-    - desktop-    - light-    - dark-    - mobile-    - button-    - group-    - bar-    - large-*/--.topcoat-button-bar__button--large {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button--large:hover {-  background-color: var-background-color--button-bar--button--hover;-}--/**-*-* 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Button-  description: A simple button-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button">Button</button>-    <button class="topcoat-button" disabled>Button</button>-  examples:-    mobile button: http://codepen.io/Topcoat/pen/DpKtf-  tags:-    - desktop-    - light-    - mobile-    - button-*/--.topcoat-button,-.topcoat-button--quiet,-.topcoat-button--large,-.topcoat-button--large--quiet,-.topcoat-button--cta,-.topcoat-button--large--cta {-  padding: 0 0.563rem;-  font-size: 12px;-  line-height: 1.313rem;-  letter-spacing: 0;-  color: #c6c8c8;-  color: var-color__button;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: top;-  background-color: #595b5b;-  background-color: var-background-color__button;-  box-shadow: inset 0 1px #737373;-  border: 1px solid #333434;-  border: var-border--button;-  border-radius: 4px;-}--.topcoat-button:hover,-.topcoat-button--quiet:hover,-.topcoat-button--large:hover,-.topcoat-button--large--quiet:hover {-  background-color: #626465;-  background-color: var-background-color--hover__button;-}--.topcoat-button:active,-.topcoat-button--large:active {-  background-color: #3f4041;-  background-color: var-background-color--down__button;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-  color: var-color--button--active;-}--.topcoat-button:focus,-.topcoat-button--quiet:focus,-.topcoat-button--large:focus,-.topcoat-button--large--quiet:focus,-.topcoat-button--cta:focus,-.topcoat-button--large--cta:focus {-  outline: 0;-}--/* topdoc-  name: Quiet Button-  description: A simple, yet quiet button-  modifiers:-    :active: Quiet button active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--quiet">Button</button>-    <button class="topcoat-button--quiet" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - quiet-*/--.topcoat-button--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-}--.topcoat-button--quiet:hover,-.topcoat-button--large--quiet:hover {-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  border: 1px solid #333434;-  border: var-border--hover__button--quiet;-  background-color: var-background-color--quiet-hover;-  box-shadow: inset 0 1px #737373;-  background-color: var-background-color--quiet-hover;-}--.topcoat-button--quiet:active,-.topcoat-button--large--quiet:active {-  color: #c6c8c8;-  color: var-color--active__button--quiet;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #3f4041;-  background-color: var-background-color--quiet-active;-  border: 1px solid #333434;-  border: var-border--active__button--quiet;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--/* topdoc-  name: Large Button-  description: A big ol button-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--large" >Button</button>-    <button class="topcoat-button--large" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - large-*/--.topcoat-button--large,-.topcoat-button--large--quiet {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}--/* topdoc-  name: Large Quiet Button-  description: A large, yet quiet button-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--large--quiet" >Button</button>-    <button class="topcoat-button--large--quiet" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - large-    - quiet-*/--.topcoat-button--large--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  color: var-quiet-button-color;-}--.topcoat-button--large--quiet:active {-  color: var-color--quiet-active;-}--/* topdoc-  name: Call To Action Button-  description: A CALL TO ARMS, er, ACTION!-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--cta" >Button</button>-    <button class="topcoat-button--cta" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - call to action-*/--.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);-}--/* topdoc-  name: Large Call To Action Button-  description: Like call to action, but bigger-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--large--cta" >Button</button>-    <button class="topcoat-button--large--cta" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - large-    - call to action-*/--.topcoat-button--large--cta {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}--/**-*-* 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.-*-*/--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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--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: #595b5b;-  background: var-background-color--checkmark;-  border: 1px solid #333434;-  border: var-border--checkbox;-  border-radius: 3px;-  box-shadow: inset 0 1px #737373;-  left: 0;-}--.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 #c6c8c8;-  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: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #333434;-  border: var-border--checkbox--active;-  background-color: #3f4041;-  background-color: var-background-color--down--checkbox;-  border: var-border--checkbox--active;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #333434;-  background: #595b5b;-  box-shadow: inset 0 1px #737373;-}--/**-*-* 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.-*-*/--/**-*-* 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-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: #c6c8c8;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: baseline;-  background-color: #595b5b;-  background-color: var-background-color__icon-button;-  box-shadow: inset 0 1px #737373;-  border: 1px solid #333434;-  border: var-border--icon-button;-  border-radius: 4px;-  border-radius: var-icon-button-border-radius;-}--.topcoat-icon-button:hover,-.topcoat-icon-button--quiet:hover,-.topcoat-icon-button--large:hover,-.topcoat-icon-button--large--quiet:hover {-  background-color: #626465;-}--.topcoat-icon-button:active {-  background-color: #3f4041;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--.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 {-  outline: 0;-}--/* 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;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;-}--.topcoat-icon-button--quiet:hover,-.topcoat-icon-button--large--quiet:hover {-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  border: 1px solid #333434;-  border: var-border--icon-button--quite--hover;-  box-shadow: inset 0 1px #737373;-}--.topcoat-icon-button--quiet:active,-.topcoat-icon-button--large--quiet:active {-  color: #c6c8c8;-  color: var-color--icon-button--quiet--active;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #3f4041;-  background-color: var-background-color--icon-button-quiet--down;-  border: 1px solid #333434;-  border: var-border--icon-button--quite--active;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--/* 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;-}--.topcoat-icon-button--large:active {-  background-color: #3f4041;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--/* 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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.list {-  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;-  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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: none;-  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: none;-}--.navigation-bar__title {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  text-overflow: ellipsis;-  white-space: nowrap;-  overflow: hidden;-}--/*-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.-*/--/**-*-* 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.-*-*/--.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: 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;-}--/*-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.-*/--/**-*-* 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.-*-*/--.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: 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;-}--/* topdoc-  name: Notification-  description: Notification badge-  markup:-    <span class="topcoat-notification">1</span>-  tags:-    - desktop-    - light-    - mobile-    - notification-*/--.topcoat-notification {-  padding: 0.15em 0.5em 0.2em;-  width: var-notification-width;-  height: var-notification-height;-  border-radius: 2px;-  background-color: #ec514e;-  color: #fff;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/* topdoc-  name: Page-  description: Default skin for Onsen UI Page-  modifiers:-    :focus: Focus state-    :disabled: Disabled state-  markup:-    <div class="page">-    </div>-  examples:-    mobile checkbox: http://codepen.io/Topcoat/pen/piHcs-  tags:-    - desktop-    - light-    - mobile-    - checkbox-*/--.page {-  background-color: var-background-color--page;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--input[type="radio"] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--input[type="radio"] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Radio Button-  description: A button that can play music, but usually just plays ads.-  modifiers:-  markup:-    <!-- NO LABEL -->-    <label class="topcoat-radio-button">-      <input type="radio" name="topcoat">-      <div class="topcoat-radio-button__checkmark"></div>-    </label>-    <br>-    <br>-    <!-- LEFT LABEL -->-    <label class="topcoat-radio-button">-      Left label-      <input type="radio" name="topcoat">-      <div class="topcoat-radio-button__checkmark"></div>-    </label>-    <br>-    <br>-    <!-- RIGHT LABEL -->-    <label class="topcoat-radio-button">-      <input type="radio" name="topcoat">-      <div class="topcoat-radio-button__checkmark"></div>-      Right label-    </label>-    <br>-    <br>-    <!-- DISABLED -->-    <label class="topcoat-radio-button">-      <input type="radio" name="topcoat" Disabled>-      <div class="topcoat-radio-button__checkmark"></div>-      Disabled-    </label>-  examples:-    Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj-  tags:-    - desktop-    - light-    - mobile-    - Radio-*/--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: #c6c8c8;-  color: var-color--radio-button;-  line-height: 1.063rem;-  text-align: left;-}--.topcoat-radio-button__checkmark:before {-  width: 1.063rem;-  height: 1.063rem;-  background: #595b5b;-  background: var-background--radio-button--before;-  border: 1px solid #333434;-  border: var-border--radio-button--before;-  box-shadow: inset 0 1px #737373;-}--.topcoat-radio-button__checkmark {-  position: relative;-  width: 1.063rem;-  height: 1.063rem;-}--.topcoat-radio-button__checkmark:after {-  opacity: 0;-  width: 0.313rem;-  height: 0.313rem;-  background: #c6c8c8;-  border: 1px solid rgba(0,0,0,0.05);-  box-shadow: 0 1px rgba(255,255,255,0.1);-  -webkit-transform: none;-  -ms-transform: none;-  transform: none;-  top: 0.313rem;-  left: 0.313rem;-}--input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {-  border: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type="radio"]:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #333434;-  border: var-border--radio-button--active;-  background-color: #3f4041;-  background-color: var-background-color--down--radio-button;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #333434;-  background: #595b5b;-  box-shadow: inset 0 1px #737373;-}--/*-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.-*/--/*-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.-*/--.range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--.range__thumb {-  cursor: pointer;-}--.range__thumb--webkit {-  cursor: pointer;-  -webkit-appearance: none;-}--.range:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/*-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.-*/--/*-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.-*/--.range,-.topcoat-range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Range-  description: Range input-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <input type="range" class="topcoat-range">-    <input type="range" class="topcoat-range" disabled>-  examples:-    mobile range: http://codepen.io/Topcoat/pen/BskEn-  tags:-    - desktop-    - mobile-    - range-*/--.topcoat-range {-  border-radius: 4px;-  border: 1px solid #333434;-  border: var-border--range;-  background-color: #454646;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--range;-}--.topcoat-range::-moz-range-track {-  border-radius: 4px;-  border: 1px solid #333434;-  background-color: #454646;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--none;-}--.topcoat-range::-webkit-slider-thumb {-  height: 1.313rem;-  height: 0.75rem;-  width: 0.75rem;-  background-color: #595b5b;-  background-color: var-background-color--range__thumb;-  border: 1px solid #333434;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #737373;-}--.topcoat-range::-moz-range-thumb {-  height: 1.313rem;-  width: 0.75rem;-  background-color: #595b5b;-  border: 1px solid #333434;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #737373;-}--.topcoat-range:focus::-webkit-slider-thumb {-  border: none;-  box-shadow: none;-}--.topcoat-range:focus::-moz-range-thumb {-  border: none;-  box-shadow: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.search-input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--input[type="search"]::-webkit-search-cancel-button {-  -webkit-appearance: none;-}--.search-input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.search-input,-.topcoat-search-input,-.topcoat-search-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Search Input-  description: A text input designed for searching.-  modifiers:-    :disabled: Disabled state-  markup:-    <input type="search" value="" placeholder="search" class="topcoat-search-input">-    <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>-  tags:-    - desktop-    - light-    - mobile-    - text-    - input-    - search-    - form-*/--.topcoat-search-input,-.topcoat-search-input--large {-  line-height: 1.313rem;-  height: 1.313rem;-  font-size: 12px;-  border: 1px solid #333434;-  border: var-border--search-input;-  background-color: #454646;-  background-color: var-background-color--search-input;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #c6c8c8;-  padding: 0 0 0 1.3rem;-  border-radius: 15px;-  border-radius: var-search-input--border-radius;-  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: #595b5b;-  background-color: var-background-color--search-input--focus;-  color: #fff;-  border: none;-  border: var-border--search-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.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: #fff;-}--.topcoat-search-input:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-search-input:disabled:-ms-input-placeholder {-  color: #fff;-}--/* topdoc-  name: Large Search Input-  description: A large text input designed for searching.-  modifiers:-    :disabled: Disabled state-  markup:-    <input type="search" value="" placeholder="search" class="topcoat-search-input--large">-    <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>-  tags:-    - desktop-    - light-    - mobile-    - text-    - input-    - search-    - form-    - large-*/--.topcoat-search-input--large {-  line-height: 1.688rem;-  height: 1.688rem;-  font-size: 0.875rem;-  font-weight: 400;-  padding: 0 0 0 1.8rem;-  border-radius: 25px;-  border-radius: var-search-input--border-radius;-  background-position: 1.2rem center;-  background-size: 0.875rem;-}--.topcoat-search-input--large:disabled {-  color: #fff;-}--.topcoat-search-input--large:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-search-input--large:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-search-input--large:disabled:-ms-input-placeholder {-  color: #fff;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Switch-  description: Default skin for Topcoat switch-  modifiers:-    :focus: Focus state-    :disabled: Disabled state-  markup:-    <label class="topcoat-switch">-      <input type="checkbox" class="topcoat-switch__input">-      <div class="topcoat-switch__toggle"></div>-    </label>-    <br>-    <br>-    <label class="topcoat-switch">-      <input type="checkbox" class="topcoat-switch__input" checked>-      <div class="topcoat-switch__toggle"></div>-    </label>-    <br>-    <br>-    <label class="topcoat-switch">-      <input type="checkbox" class="topcoat-switch__input" disabled>-      <div class="topcoat-switch__toggle"></div>-    </label>-  examples:-    mobile switch: http://codepen.io/Topcoat/pen/upxds-  tags:-    - desktop-    - light-    - mobile-    - switch-*/--.topcoat-switch {-  font-size: 12px;-  padding: 0 0.563rem;-  border-radius: 4px;-  border-radius: var-switch--border-radius;-  border: 1px solid #333434;-  border: var-border--switch;-  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: #3f4041;-  right: 0.8rem;-  padding-left: 0.75rem;-  height: var-height--switch__label--left;-  top: var-top--switch__label--left;-  border-radius: var-border-radius--switch__label--left;-}--.topcoat-switch__toggle {-  line-height: 1.313rem;-  line-height: var-line-height--switch__toggle;-  height: 1.313rem;-  height: var-height--switch__toggle;-  width: 1rem;-  border-radius: 4px;-  border-radius: var-border-radius--switch__toggle;-  color: #c6c8c8;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #595b5b;-  background-color: var-background-color--switch__toggle;-  border: 1px solid #333434;-  border: var-border--switch__toggle;-  margin-left: -0.6rem;-  margin-bottom: -1px;-  margin-top: -1px;-  box-shadow: inset 0 1px #737373;-  -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: #3f4041;-  left: 0.8rem;-  padding-left: 0.6rem;-  height: var-height--switch__label--right;-  top: var-top--switch__label--right;-  border-radius: var-border-radius--switch__label--right;-}--.topcoat-switch__input:checked + .topcoat-switch__toggle {-  margin-left: 1.85rem;-}--.topcoat-switch__input:active + .topcoat-switch__toggle {-  border: 1px solid #333434;-  box-shadow: inset 0 1px #737373;-}--.topcoat-switch__input:focus + .topcoat-switch__toggle {-  border: none;-  box-shadow: none;-}--.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,-.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {-  background: transparent;-}--/**-*-* 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.-*-*/--/**-*-* 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-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: 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-tab-bar__button:disabled {-  opacity: 0.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Tab Bar-  description: Component of tab buttons-  modifiers:-    :disabled: Disabled state-  markup:-    <div class="topcoat-tab-bar">-      <label class="topcoat-tab-bar__item">-        <input type="radio" name="tab-bar">-        <button class="topcoat-tab-bar__button">One</button>-      </label>-      <label class="topcoat-tab-bar__item">-        <input type="radio" name="tab-bar">-        <button class="topcoat-tab-bar__button">Two</button>-      </label>-      <label class="topcoat-tab-bar__item">-        <input type="radio" name="tab-bar">-        <button class="topcoat-tab-bar__button">Three</button>-      </label>-    </div>-  examples:-    mobile tab bar: http://codepen.io/Topcoat/pen/rJICF-  tags:-    - desktop-    - light-    - dark-    - mobile-    - tab-    - group-    - bar-*/--.topcoat-tab-bar {-  background-color: var-background-color--tab-bar;-  border-top: var-border-top--tab-bar;-}--.topcoat-tab-bar__button {-  padding: 0 0.563rem;-  height: 1.313rem;-  height: var-line-height--tab-bar__button;-  line-height: 1.313rem;-  line-height: var-line-height--tab-bar__button;-  letter-spacing: 0;-  color: #c6c8c8;-  color: var-color--tab-bar__button;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: top;-  background-color: #595b5b;-  background-color: var-background-color--tab-bar__button;-  box-shadow: inset 0 1px #737373;-  border-top: 1px solid #333434;-  border-top: var-border--tab-bar__button;-}--.topcoat-tab-bar__button:active,-.topcoat-tab-bar__button--large:active,-:checked + .topcoat-tab-bar__button {-  color: #288edf;-  background-color: #3f4041;-  box-shadow: inset 0 0 1px rgba(0,0,0,0.05);-}--.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), none;-  box-shadow: var-box-shadow--tab-bar__button--focus;-  outline: 0;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.input,-.topcoat-text-input,-.topcoat-text-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled,-.topcoat-text-input:disabled,-.topcoat-text-input--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Text input-  description: Topdoc text input-  modifiers:-    :disabled: Disabled state-    :focus: Focused-    :invalid: Hover state-  markup:-    <input type="text" class="topcoat-text-input" placeholder="text" value="">-    <br>-    <br>-    <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>-    <br>-    <br>-    <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">-  tags:-    - desktop-    - mobile-    - text-    - input-*/--.topcoat-text-input,-.topcoat-text-input--large {-  line-height: 1.313rem;-  font-size: 12px;-  letter-spacing: 0;-  padding: 0 0.563rem;-  border: 1px solid #333434;-  border: var-border--text-input;-  border-radius: 4px;-  background-color: #454646;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #c6c8c8;-  color: var-color--text-input;-  vertical-align: top;-}--.topcoat-text-input:focus,-.topcoat-text-input--large:focus {-  background-color: #595b5b;-  color: #fff;-  border: none;-  border: var-border--text-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.topcoat-text-input:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-text-input:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-text-input:disabled:-ms-input-placeholder {-  color: #fff;-}--.topcoat-text-input:invalid {-  border: 1px solid #ec514e;-  color: var-color-invalid;-}--/* topdoc-  name: Large Text Input-  description: A bigger input, still for text.-  modifiers:-    :disabled: Disabled state-    :focus: Focused-    :invalid: Hover state-  markup:-    <input type="text" class="topcoat-text-input--large" value="" placeholder="text">-    <br>-    <br>-    <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>-    <br>-    <br>-    <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">-  tags:-    - desktop-    - light-    - mobile-    - form-    - input-    - large-*/--.topcoat-text-input--large {-  line-height: 1.688rem;-  font-size: 0.875rem;-}--.topcoat-text-input--large:disabled {-  color: #fff;-}--.topcoat-text-input--large:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-text-input--large:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-text-input--large:disabled:-ms-input-placeholder {-  color: #fff;-}--.topcoat-text-input--large:invalid {-  border: 1px solid #ec514e;-  color: var-color-invalid;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled,-.topcoat-textarea:disabled,-.topcoat-textarea--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Textarea-  description: A whole area, just for text.-  modifiers:-    :disabled: Disabled state-  markup:-    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>-    <br>-    <br>-    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>-  tags:-    - desktop-    - light-    - mobile-    - form-    - input-    - textarea-*/--.topcoat-textarea,-.topcoat-textarea--large {-  padding: 1rem;-  font-size: 1rem;-  font-weight: 400;-  border-radius: 4px;-  line-height: 1.313rem;-  border: 1px solid #333434;-  border: var-border--textarea;-  background-color: #454646;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #c6c8c8;-  color: var-color--textarea;-  letter-spacing: 0;-}--.topcoat-textarea:focus,-.topcoat-textarea--large:focus {-  background-color: #595b5b;-  color: #fff;-  border: none;-  border: var-border--focus--textarea;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.topcoat-textarea:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-textarea:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-textarea:disabled:-ms-input-placeholder {-  color: #fff;-}--/* topdoc-  name: Large Textarea-  description: A whole area, just for text; now available in large.-  modifiers:-    :disabled: Disabled state-  markup:-    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>-    <br>-    <br>-    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>-  tags:-    - desktop-    - light-    - mobile-    - form-    - input-    - textarea-*/--.topcoat-textarea--large {-  font-size: 1.3rem;-  line-height: 1.688rem;-}--.topcoat-textarea--large:disabled {-  color: #fff;-}--.topcoat-textarea--large:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-textarea--large:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-textarea--large:disabled:-ms-input-placeholder {-  color: #fff;-}--@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: #4b4d4e;-  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_light.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: 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;-}--/* This file should include color and image variables corresponding to the dark theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Textarea */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the light theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Secondary colors (based on colors above)--Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!--*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Containers */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* Containers */--/* Button */--/* Bar Button */--/* Icon Button */--/* Navigation bar */--/* List */--/* Notification */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* Tab-bar */--/* Call To Action */--/* Text Input */--/* Radio input */--/* Overlay */--/* Textarea */--/* Progress bar container */--/* Progress bar progress */--/* Switch */--/* Notification */--/* Search */\ No newline at end of filediff --git a/topcoat/css/topcoat-desktop-dark.min.css b/topcoat/css/topcoat-desktop-dark.min.cssdeleted file mode 100644index b9b5fdc..0000000--- a/topcoat/css/topcoat-desktop-dark.min.css+++ /dev/null@@ -1 +0,0 @@-.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:#c6c8c8;color:var-color__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color__button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--button;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:#626465;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#3f4041;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.05);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #737373;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:var-color--active__button--quiet;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--quiet-active;border:1px solid #333434;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding: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{margin:var-button-bar-margin}.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;border-right:var-border-right--button-bar__button__first}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:var-border-right--button-bar__button__last}.topcoat-button-bar__button{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:var-background-color--button-bar--button--active;color:var-color--button-bar__button--active;border:var-border--button-bar__button}.topcoat-button-bar__button:hover{background-color:var-background-color--button-bar--button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button--large:hover{background-color:var-background-color--button-bar--button--hover}.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:#c6c8c8;color:var-color__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color__button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--button;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#626465;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active{background-color:#3f4041;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.05);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #737373;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:var-color--active__button--quiet;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--quiet-active;border:1px solid #333434;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding: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:#595b5b;background:var-background-color--checkmark;border:1px solid #333434;border:var-border--checkbox;border-radius:3px;box-shadow:inset 0 1px #737373;left:0}.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 #c6c8c8;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:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;border:var-border--checkbox--active;background-color:#3f4041;background-color:var-background-color--down--checkbox;border:var-border--checkbox--active;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.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:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:baseline;background-color:#595b5b;background-color:var-background-color__icon-button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--icon-button;border-radius:4px;border-radius:var-icon-button-border-radius}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#626465}.topcoat-icon-button:active{background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:var-border--icon-button--quiet;color:var-color--icon-button--quiet}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--icon-button--quite--hover;box-shadow:inset 0 1px #737373}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:var-color--icon-button--quiet--active;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--icon-button-quiet--down;border:1px solid #333434;border:var-border--icon-button--quite--active;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:1.688rem;height:1.688rem;line-height:1.688rem}.topcoat-icon-button--large:active{background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.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;width:var-notification-width;height:var-notification-height;border-radius:2px;background-color:#ec514e;color:#fff}.page{background-color:var-background-color--page}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:#c6c8c8;color:var-color--radio-button;line-height:1.063rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.063rem;height:1.063rem;background:#595b5b;background:var-background--radio-button--before;border:1px solid #333434;border:var-border--radio-button--before;box-shadow:inset 0 1px #737373}.topcoat-radio-button__checkmark{position:relative;width:1.063rem;height:1.063rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.313rem;height:.313rem;background:#c6c8c8;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px rgba(255,255,255,.1);-webkit-transform:none;-ms-transform:none;transform:none;top:.313rem;left:.313rem}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;border:var-border--radio-button--active;background-color:#3f4041;background-color:var-background-color--down--radio-button;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.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 #333434;border:var-border--range;background-color:#454646;background-color:var-background-color--range;height:.5rem;border-radius:15px;border-radius:var-border-radius--range}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #333434;background-color:#454646;background-color:var-background-color--range;height:.5rem;border-radius:15px;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:1.313rem;height:.75rem;width:.75rem;background-color:#595b5b;background-color:var-background-color--range__thumb;border:1px solid #333434;border:var-range-border;border-radius:4px;border-radius:var-round-border;box-shadow:inset 0 1px #737373}.topcoat-range::-moz-range-thumb{height:1.313rem;width:.75rem;background-color:#595b5b;border:1px solid #333434;border:var-range-border;border-radius:4px;border-radius:var-round-border;box-shadow:inset 0 1px #737373}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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 #333434;border:var-border--search-input;background-color:#454646;background-color:var-background-color--search-input;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;padding:0 0 0 1.3rem;border-radius:15px;border-radius:var-search-input--border-radius;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:#595b5b;background-color:var-background-color--search-input--focus;color:#fff;border:0;border:var-border--search-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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:#fff}.topcoat-search-input:disabled::-moz-placeholder{color:#fff}.topcoat-search-input:disabled:-ms-input-placeholder{color:#fff}.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;border-radius:var-search-input--border-radius;background-position:1.2rem center;background-size:.875rem}.topcoat-search-input--large:disabled{color:#fff}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-search-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#fff}.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-radius:var-switch--border-radius;border:1px solid #333434;border:var-border--switch;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:#3f4041;right:.8rem;padding-left:.75rem;height:var-height--switch__label--left;top:var-top--switch__label--left;border-radius:var-border-radius--switch__label--left}.topcoat-switch__toggle{line-height:1.313rem;line-height:var-line-height--switch__toggle;height:1.313rem;height:var-height--switch__toggle;width:1rem;border-radius:4px;border-radius:var-border-radius--switch__toggle;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#595b5b;background-color:var-background-color--switch__toggle;border:1px solid #333434;border:var-border--switch__toggle;margin-left:-.6rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #737373;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#3f4041;left:.8rem;padding-left:.6rem;height:var-height--switch__label--right;top:var-top--switch__label--right;border-radius:var-border-radius--switch__label--right}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:1.85rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:var-background-color--tab-bar;border-top:var-border-top--tab-bar}.topcoat-tab-bar__button{padding:0 .563rem;height:1.313rem;height:var-line-height--tab-bar__button;line-height:1.313rem;line-height:var-line-height--tab-bar__button;letter-spacing:0;color:#c6c8c8;color:var-color--tab-bar__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color--tab-bar__button;box-shadow:inset 0 1px #737373;border-top:1px solid #333434;border-top:var-border--tab-bar__button}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#288edf;background-color:#3f4041;box-shadow:inset 0 0 1px rgba(0,0,0,.05)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),none;box-shadow:var-box-shadow--tab-bar__button--focus;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 #333434;border:var-border--text-input;border-radius:4px;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--text-input;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#595b5b;color:#fff;border:0;border:var-border--text-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input:disabled::-moz-placeholder{color:#fff}.topcoat-text-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input:invalid{border:1px solid #ec514e;color:var-color-invalid}.topcoat-text-input--large{line-height:1.688rem;font-size:.875rem}.topcoat-text-input--large:disabled{color:#fff}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input--large:invalid{border:1px solid #ec514e;color:var-color-invalid}.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 #333434;border:var-border--textarea;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--textarea;letter-spacing:0}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#595b5b;color:#fff;border:0;border:var-border--focus--textarea;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea:disabled::-moz-placeholder{color:#fff}.topcoat-textarea:disabled:-ms-input-placeholder{color:#fff}.topcoat-textarea--large{font-size:1.3rem;line-height:1.688rem}.topcoat-textarea--large:disabled{color:#fff}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea--large:disabled::-moz-placeholder{color:#fff}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#fff}@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:#4b4d4e;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_light.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}\ No newline at end of filediff --git a/topcoat/css/topcoat-desktop-light.css b/topcoat/css/topcoat-desktop-light.cssindex b139925..e69de29 100644--- a/topcoat/css/topcoat-desktop-light.css+++ b/topcoat/css/topcoat-desktop-light.css@@ -1,4030 +0,0 @@-/**-*-* 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-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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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: #454545;-  color: var-color__button;-  text-shadow: 0 1px #fff;-  vertical-align: top;-  background-color: #e5e9e8;-  background-color: var-background-color__button;-  box-shadow: inset 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--button;-  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;-  background-color: var-background-color--hover__button;-}--.topcoat-button:active,-.topcoat-button--large:active,-.topcoat-button-bar__button:active,-.topcoat-button-bar__button--large:active,-:checked + .topcoat-button-bar__button {-  background-color: #d2d6d6;-  background-color: var-background-color--down__button;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-  color: var-color--button--active;-}--.topcoat-button:focus,-.topcoat-button--quiet:focus,-.topcoat-button--large:focus,-.topcoat-button--large--quiet:focus,-.topcoat-button--cta:focus,-.topcoat-button--large--cta:focus,-.topcoat-button-bar__button:focus,-.topcoat-button-bar__button--large:focus {-  outline: 0;-}--.topcoat-button--quiet {-  color: var-quiet-button-color;-  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;-  border: var-border--hover__button--quiet;-  background-color: var-background-color--quiet-hover;-  box-shadow: inset 0 1px #fff;-  background-color: var-background-color--quiet-hover;-}--.topcoat-button--quiet:active,-.topcoat-button--large--quiet:active {-  color: #454545;-  color: var-color--active__button--quiet;-  text-shadow: 0 1px #fff;-  background-color: #d2d6d6;-  background-color: var-background-color--quiet-active;-  border: 1px solid #9daca9;-  border: var-border--active__button--quiet;-  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 {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  color: var-quiet-button-color;-}--.topcoat-button--large--quiet:active {-  color: var-color--quiet-active;-}--.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;-}--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Button Bar-  description: Component of grouped buttons-  modifiers:-    :disabled: Disabled state-  markup:-    <div class="topcoat-button-bar">-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button">One</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button">Two</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button">Three</button>-      </div>-    </div>-  examples:-    mobile button bar: http://codepen.io/Topcoat/pen/kdKyg-  tags:-    - desktop-    - light-    - dark-    - mobile-    - button-    - group-    - bar-*/--.topcoat-button-bar {-  margin: var-button-bar-margin;-}--.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: none;-  border-right: var-border-right--button-bar__button__first;-}--.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,-.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {-  border-left: none;-  border-right: var-border-right--button-bar__button__last;-}--.topcoat-button-bar__button {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button:active,-.topcoat-button-bar__button--large:active,-:checked + .topcoat-button-bar__button {-  background-color: var-background-color--button-bar--button--active;-  color: var-color--button-bar__button--active;-  border: var-border--button-bar__button;-}--.topcoat-button-bar__button:hover {-  background-color: var-background-color--button-bar--button--hover;-}--.topcoat-button-bar__button:focus,-.topcoat-button-bar__button--large:focus {-  z-index: 1;-}--/* topdoc-  name: Large Button Bar-  description: A button bar, only larger-  modifiers:-    :disabled: Disabled state-  markup:-    <div class="topcoat-button-bar">-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button--large">One</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button--large">Two</button>-      </div>-      <div class="topcoat-button-bar__item">-        <button class="topcoat-button-bar__button--large">Three</button>-      </div>-    </div>-  tags:-    - desktop-    - light-    - dark-    - mobile-    - button-    - group-    - bar-    - large-*/--.topcoat-button-bar__button--large {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button--large:hover {-  background-color: var-background-color--button-bar--button--hover;-}--/**-*-* 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Button-  description: A simple button-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button">Button</button>-    <button class="topcoat-button" disabled>Button</button>-  examples:-    mobile button: http://codepen.io/Topcoat/pen/DpKtf-  tags:-    - desktop-    - light-    - mobile-    - button-*/--.topcoat-button,-.topcoat-button--quiet,-.topcoat-button--large,-.topcoat-button--large--quiet,-.topcoat-button--cta,-.topcoat-button--large--cta {-  padding: 0 0.563rem;-  font-size: 12px;-  line-height: 1.313rem;-  letter-spacing: 0;-  color: #454545;-  color: var-color__button;-  text-shadow: 0 1px #fff;-  vertical-align: top;-  background-color: #e5e9e8;-  background-color: var-background-color__button;-  box-shadow: inset 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--button;-  border-radius: 4px;-}--.topcoat-button:hover,-.topcoat-button--quiet:hover,-.topcoat-button--large:hover,-.topcoat-button--large--quiet:hover {-  background-color: #eff1f1;-  background-color: var-background-color--hover__button;-}--.topcoat-button:active,-.topcoat-button--large:active {-  background-color: #d2d6d6;-  background-color: var-background-color--down__button;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-  color: var-color--button--active;-}--.topcoat-button:focus,-.topcoat-button--quiet:focus,-.topcoat-button--large:focus,-.topcoat-button--large--quiet:focus,-.topcoat-button--cta:focus,-.topcoat-button--large--cta:focus {-  outline: 0;-}--/* topdoc-  name: Quiet Button-  description: A simple, yet quiet button-  modifiers:-    :active: Quiet button active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--quiet">Button</button>-    <button class="topcoat-button--quiet" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - quiet-*/--.topcoat-button--quiet {-  color: var-quiet-button-color;-  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;-  border: var-border--hover__button--quiet;-  background-color: var-background-color--quiet-hover;-  box-shadow: inset 0 1px #fff;-  background-color: var-background-color--quiet-hover;-}--.topcoat-button--quiet:active,-.topcoat-button--large--quiet:active {-  color: #454545;-  color: var-color--active__button--quiet;-  text-shadow: 0 1px #fff;-  background-color: #d2d6d6;-  background-color: var-background-color--quiet-active;-  border: 1px solid #9daca9;-  border: var-border--active__button--quiet;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}--/* topdoc-  name: Large Button-  description: A big ol button-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--large" >Button</button>-    <button class="topcoat-button--large" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - large-*/--.topcoat-button--large,-.topcoat-button--large--quiet {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}--/* topdoc-  name: Large Quiet Button-  description: A large, yet quiet button-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--large--quiet" >Button</button>-    <button class="topcoat-button--large--quiet" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - large-    - quiet-*/--.topcoat-button--large--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  color: var-quiet-button-color;-}--.topcoat-button--large--quiet:active {-  color: var-color--quiet-active;-}--/* topdoc-  name: Call To Action Button-  description: A CALL TO ARMS, er, ACTION!-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--cta" >Button</button>-    <button class="topcoat-button--cta" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - call to action-*/--.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);-}--/* topdoc-  name: Large Call To Action Button-  description: Like call to action, but bigger-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <button class="topcoat-button--large--cta" >Button</button>-    <button class="topcoat-button--large--cta" disabled>Button</button>-  tags:-    - desktop-    - light-    - mobile-    - button-    - large-    - call to action-*/--.topcoat-button--large--cta {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}--/**-*-* 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.-*-*/--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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--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: #e5e9e8;-  background: var-background-color--checkmark;-  border: 1px solid #9daca9;-  border: var-border--checkbox;-  border-radius: 3px;-  box-shadow: inset 0 1px #fff;-  left: 0;-}--.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: 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: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #9daca9;-  border: var-border--checkbox--active;-  background-color: #d2d6d6;-  background-color: var-background-color--down--checkbox;-  border: var-border--checkbox--active;-  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 #fff;-}--/**-*-* 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.-*-*/--/**-*-* 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-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: #454545;-  text-shadow: 0 1px #fff;-  vertical-align: baseline;-  background-color: #e5e9e8;-  background-color: var-background-color__icon-button;-  box-shadow: inset 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--icon-button;-  border-radius: 4px;-  border-radius: var-icon-button-border-radius;-}--.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:active {-  background-color: #d2d6d6;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}--.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 {-  outline: 0;-}--/* 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;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;-}--.topcoat-icon-button--quiet:hover,-.topcoat-icon-button--large--quiet:hover {-  text-shadow: 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--icon-button--quite--hover;-  box-shadow: inset 0 1px #fff;-}--.topcoat-icon-button--quiet:active,-.topcoat-icon-button--large--quiet:active {-  color: #454545;-  color: var-color--icon-button--quiet--active;-  text-shadow: 0 1px #fff;-  background-color: #d2d6d6;-  background-color: var-background-color--icon-button-quiet--down;-  border: 1px solid #9daca9;-  border: var-border--icon-button--quite--active;-  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;-}--.topcoat-icon-button--large:active {-  background-color: #d2d6d6;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}--/* 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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.list {-  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;-  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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: none;-  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: none;-}--.navigation-bar__title {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  text-overflow: ellipsis;-  white-space: nowrap;-  overflow: hidden;-}--/*-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.-*/--/**-*-* 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.-*-*/--.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: 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;-}--/*-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.-*/--/**-*-* 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.-*-*/--.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: 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;-}--/* topdoc-  name: Notification-  description: Notification badge-  markup:-    <span class="topcoat-notification">1</span>-  tags:-    - desktop-    - light-    - mobile-    - notification-*/--.topcoat-notification {-  padding: 0.15em 0.5em 0.2em;-  width: var-notification-width;-  height: var-notification-height;-  border-radius: 2px;-  background-color: #ec514e;-  color: #fff;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--/* topdoc-  name: Page-  description: Default skin for Onsen UI Page-  modifiers:-    :focus: Focus state-    :disabled: Disabled state-  markup:-    <div class="page">-    </div>-  examples:-    mobile checkbox: http://codepen.io/Topcoat/pen/piHcs-  tags:-    - desktop-    - light-    - mobile-    - checkbox-*/--.page {-  background-color: var-background-color--page;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--input[type="radio"] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--input[type="radio"] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Radio Button-  description: A button that can play music, but usually just plays ads.-  modifiers:-  markup:-    <!-- NO LABEL -->-    <label class="topcoat-radio-button">-      <input type="radio" name="topcoat">-      <div class="topcoat-radio-button__checkmark"></div>-    </label>-    <br>-    <br>-    <!-- LEFT LABEL -->-    <label class="topcoat-radio-button">-      Left label-      <input type="radio" name="topcoat">-      <div class="topcoat-radio-button__checkmark"></div>-    </label>-    <br>-    <br>-    <!-- RIGHT LABEL -->-    <label class="topcoat-radio-button">-      <input type="radio" name="topcoat">-      <div class="topcoat-radio-button__checkmark"></div>-      Right label-    </label>-    <br>-    <br>-    <!-- DISABLED -->-    <label class="topcoat-radio-button">-      <input type="radio" name="topcoat" Disabled>-      <div class="topcoat-radio-button__checkmark"></div>-      Disabled-    </label>-  examples:-    Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj-  tags:-    - desktop-    - light-    - mobile-    - Radio-*/--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;-  color: var-color--radio-button;-  line-height: 1.063rem;-  text-align: left;-}--.topcoat-radio-button__checkmark:before {-  width: 1.063rem;-  height: 1.063rem;-  background: #e5e9e8;-  background: var-background--radio-button--before;-  border: 1px solid #9daca9;-  border: var-border--radio-button--before;-  box-shadow: inset 0 1px #fff;-}--.topcoat-radio-button__checkmark {-  position: relative;-  width: 1.063rem;-  height: 1.063rem;-}--.topcoat-radio-button__checkmark:after {-  opacity: 0;-  width: 0.313rem;-  height: 0.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: 0.313rem;-  left: 0.313rem;-}--input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {-  border: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type="radio"]:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #9daca9;-  border: var-border--radio-button--active;-  background-color: #d2d6d6;-  background-color: var-background-color--down--radio-button;-  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 #fff;-}--/*-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.-*/--/*-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.-*/--.range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--.range__thumb {-  cursor: pointer;-}--.range__thumb--webkit {-  cursor: pointer;-  -webkit-appearance: none;-}--.range:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/*-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.-*/--/*-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.-*/--.range,-.topcoat-range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Range-  description: Range input-  modifiers:-    :active: Active state-    :disabled: Disabled state-    :hover: Hover state-    :focus: Focused-  markup:-    <input type="range" class="topcoat-range">-    <input type="range" class="topcoat-range" disabled>-  examples:-    mobile range: http://codepen.io/Topcoat/pen/BskEn-  tags:-    - desktop-    - mobile-    - range-*/--.topcoat-range {-  border-radius: 4px;-  border: 1px solid #9daca9;-  border: var-border--range;-  background-color: #d6dcdb;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--range;-}--.topcoat-range::-moz-range-track {-  border-radius: 4px;-  border: 1px solid #9daca9;-  background-color: #d6dcdb;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--none;-}--.topcoat-range::-webkit-slider-thumb {-  height: 1.313rem;-  height: 0.75rem;-  width: 0.75rem;-  background-color: #e5e9e8;-  background-color: var-background-color--range__thumb;-  border: 1px solid #9daca9;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #fff;-}--.topcoat-range::-moz-range-thumb {-  height: 1.313rem;-  width: 0.75rem;-  background-color: #e5e9e8;-  border: 1px solid #9daca9;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #fff;-}--.topcoat-range:focus::-webkit-slider-thumb {-  border: none;-  box-shadow: none;-}--.topcoat-range:focus::-moz-range-thumb {-  border: none;-  box-shadow: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.search-input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--input[type="search"]::-webkit-search-cancel-button {-  -webkit-appearance: none;-}--.search-input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.search-input,-.topcoat-search-input,-.topcoat-search-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Search Input-  description: A text input designed for searching.-  modifiers:-    :disabled: Disabled state-  markup:-    <input type="search" value="" placeholder="search" class="topcoat-search-input">-    <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>-  tags:-    - desktop-    - light-    - mobile-    - text-    - input-    - search-    - form-*/--.topcoat-search-input,-.topcoat-search-input--large {-  line-height: 1.313rem;-  height: 1.313rem;-  font-size: 12px;-  border: 1px solid #9daca9;-  border: var-border--search-input;-  background-color: #fff;-  background-color: var-background-color--search-input;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #454545;-  padding: 0 0 0 1.3rem;-  border-radius: 15px;-  border-radius: var-search-input--border-radius;-  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;-  background-color: var-background-color--search-input--focus;-  color: #454545;-  border: none;-  border: var-border--search-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.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;-}--/* topdoc-  name: Large Search Input-  description: A large text input designed for searching.-  modifiers:-    :disabled: Disabled state-  markup:-    <input type="search" value="" placeholder="search" class="topcoat-search-input--large">-    <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>-  tags:-    - desktop-    - light-    - mobile-    - text-    - input-    - search-    - form-    - large-*/--.topcoat-search-input--large {-  line-height: 1.688rem;-  height: 1.688rem;-  font-size: 0.875rem;-  font-weight: 400;-  padding: 0 0 0 1.8rem;-  border-radius: 25px;-  border-radius: var-search-input--border-radius;-  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;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Switch-  description: Default skin for Topcoat switch-  modifiers:-    :focus: Focus state-    :disabled: Disabled state-  markup:-    <label class="topcoat-switch">-      <input type="checkbox" class="topcoat-switch__input">-      <div class="topcoat-switch__toggle"></div>-    </label>-    <br>-    <br>-    <label class="topcoat-switch">-      <input type="checkbox" class="topcoat-switch__input" checked>-      <div class="topcoat-switch__toggle"></div>-    </label>-    <br>-    <br>-    <label class="topcoat-switch">-      <input type="checkbox" class="topcoat-switch__input" disabled>-      <div class="topcoat-switch__toggle"></div>-    </label>-  examples:-    mobile switch: http://codepen.io/Topcoat/pen/upxds-  tags:-    - desktop-    - light-    - mobile-    - switch-*/--.topcoat-switch {-  font-size: 12px;-  padding: 0 0.563rem;-  border-radius: 4px;-  border-radius: var-switch--border-radius;-  border: 1px solid #9daca9;-  border: var-border--switch;-  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: 0.8rem;-  padding-left: 0.75rem;-  height: var-height--switch__label--left;-  top: var-top--switch__label--left;-  border-radius: var-border-radius--switch__label--left;-}--.topcoat-switch__toggle {-  line-height: 1.313rem;-  line-height: var-line-height--switch__toggle;-  height: 1.313rem;-  height: var-height--switch__toggle;-  width: 1rem;-  border-radius: 4px;-  border-radius: var-border-radius--switch__toggle;-  color: #454545;-  text-shadow: 0 1px #fff;-  background-color: #e5e9e8;-  background-color: var-background-color--switch__toggle;-  border: 1px solid #9daca9;-  border: var-border--switch__toggle;-  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: 0.8rem;-  padding-left: 0.6rem;-  height: var-height--switch__label--right;-  top: var-top--switch__label--right;-  border-radius: var-border-radius--switch__label--right;-}--.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 #fff;-}--.topcoat-switch__input:focus + .topcoat-switch__toggle {-  border: none;-  box-shadow: none;-}--.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,-.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {-  background: transparent;-}--/**-*-* 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.-*-*/--/**-*-* 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-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: 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-tab-bar__button:disabled {-  opacity: 0.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Tab Bar-  description: Component of tab buttons-  modifiers:-    :disabled: Disabled state-  markup:-    <div class="topcoat-tab-bar">-      <label class="topcoat-tab-bar__item">-        <input type="radio" name="tab-bar">-        <button class="topcoat-tab-bar__button">One</button>-      </label>-      <label class="topcoat-tab-bar__item">-        <input type="radio" name="tab-bar">-        <button class="topcoat-tab-bar__button">Two</button>-      </label>-      <label class="topcoat-tab-bar__item">-        <input type="radio" name="tab-bar">-        <button class="topcoat-tab-bar__button">Three</button>-      </label>-    </div>-  examples:-    mobile tab bar: http://codepen.io/Topcoat/pen/rJICF-  tags:-    - desktop-    - light-    - dark-    - mobile-    - tab-    - group-    - bar-*/--.topcoat-tab-bar {-  background-color: var-background-color--tab-bar;-  border-top: var-border-top--tab-bar;-}--.topcoat-tab-bar__button {-  padding: 0 0.563rem;-  height: 1.313rem;-  height: var-line-height--tab-bar__button;-  line-height: 1.313rem;-  line-height: var-line-height--tab-bar__button;-  letter-spacing: 0;-  color: #454545;-  color: var-color--tab-bar__button;-  text-shadow: 0 1px #fff;-  vertical-align: top;-  background-color: #e5e9e8;-  background-color: var-background-color--tab-bar__button;-  box-shadow: inset 0 1px #fff;-  border-top: 1px solid #9daca9;-  border-top: var-border--tab-bar__button;-}--.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), none;-  box-shadow: var-box-shadow--tab-bar__button--focus;-  outline: 0;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.input,-.topcoat-text-input,-.topcoat-text-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled,-.topcoat-text-input:disabled,-.topcoat-text-input--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Text input-  description: Topdoc text input-  modifiers:-    :disabled: Disabled state-    :focus: Focused-    :invalid: Hover state-  markup:-    <input type="text" class="topcoat-text-input" placeholder="text" value="">-    <br>-    <br>-    <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>-    <br>-    <br>-    <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">-  tags:-    - desktop-    - mobile-    - text-    - input-*/--.topcoat-text-input,-.topcoat-text-input--large {-  line-height: 1.313rem;-  font-size: 12px;-  letter-spacing: 0;-  padding: 0 0.563rem;-  border: 1px solid #9daca9;-  border: var-border--text-input;-  border-radius: 4px;-  background-color: #fff;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #454545;-  color: var-color--text-input;-  vertical-align: top;-}--.topcoat-text-input:focus,-.topcoat-text-input--large:focus {-  background-color: #fff;-  color: #454545;-  border: none;-  border: var-border--text-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.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;-  color: var-color-invalid;-}--/* topdoc-  name: Large Text Input-  description: A bigger input, still for text.-  modifiers:-    :disabled: Disabled state-    :focus: Focused-    :invalid: Hover state-  markup:-    <input type="text" class="topcoat-text-input--large" value="" placeholder="text">-    <br>-    <br>-    <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>-    <br>-    <br>-    <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">-  tags:-    - desktop-    - light-    - mobile-    - form-    - input-    - large-*/--.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;-  color: var-color-invalid;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* 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.-*-*/--/**-*-* 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled,-.topcoat-textarea:disabled,-.topcoat-textarea--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/* topdoc-  name: Textarea-  description: A whole area, just for text.-  modifiers:-    :disabled: Disabled state-  markup:-    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>-    <br>-    <br>-    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>-  tags:-    - desktop-    - light-    - mobile-    - form-    - input-    - textarea-*/--.topcoat-textarea,-.topcoat-textarea--large {-  padding: 1rem;-  font-size: 1rem;-  font-weight: 400;-  border-radius: 4px;-  line-height: 1.313rem;-  border: 1px solid #9daca9;-  border: var-border--textarea;-  background-color: #fff;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #454545;-  color: var-color--textarea;-  letter-spacing: 0;-}--.topcoat-textarea:focus,-.topcoat-textarea--large:focus {-  background-color: #fff;-  color: #454545;-  border: none;-  border: var-border--focus--textarea;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.topcoat-textarea:disabled::-webkit-input-placeholder {-  color: #454545;-}--.topcoat-textarea:disabled::-moz-placeholder {-  color: #454545;-}--.topcoat-textarea:disabled:-ms-input-placeholder {-  color: #454545;-}--/* topdoc-  name: Large Textarea-  description: A whole area, just for text; now available in large.-  modifiers:-    :disabled: Disabled state-  markup:-    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>-    <br>-    <br>-    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>-  tags:-    - desktop-    - light-    - mobile-    - form-    - input-    - textarea-*/--.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: 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;-}--/* This file should include color and image variables corresponding to the dark theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Textarea */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the light theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Secondary colors (based on colors above)--Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!--*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Containers */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* Containers */--/* Button */--/* Bar Button */--/* Icon Button */--/* Navigation bar */--/* List */--/* Notification */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* Tab-bar */--/* Call To Action */--/* Text Input */--/* Radio input */--/* Overlay */--/* Textarea */--/* Progress bar container */--/* Progress bar progress */--/* Switch */--/* Notification */--/* Search */\ No newline at end of filediff --git a/topcoat/css/topcoat-desktop-light.min.css b/topcoat/css/topcoat-desktop-light.min.cssdeleted file mode 100644index 7bb0e90..0000000--- a/topcoat/css/topcoat-desktop-light.min.css+++ /dev/null@@ -1 +0,0 @@-.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;color:var-color__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color__button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--button;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;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#d2d6d6;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.1);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;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;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #fff;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#454545;color:var-color--active__button--quiet;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--quiet-active;border:1px solid #9daca9;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(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 .875rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding: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{margin:var-button-bar-margin}.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;border-right:var-border-right--button-bar__button__first}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:var-border-right--button-bar__button__last}.topcoat-button-bar__button{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:var-background-color--button-bar--button--active;color:var-color--button-bar__button--active;border:var-border--button-bar__button}.topcoat-button-bar__button:hover{background-color:var-background-color--button-bar--button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button--large:hover{background-color:var-background-color--button-bar--button--hover}.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;color:var-color__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color__button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--button;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#eff1f1;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active{background-color:#d2d6d6;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.1);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;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;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #fff;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#454545;color:var-color--active__button--quiet;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--quiet-active;border:1px solid #9daca9;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding: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;background:var-background-color--checkmark;border:1px solid #9daca9;border:var-border--checkbox;border-radius:3px;box-shadow:inset 0 1px #fff;left:0}.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:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;border:var-border--checkbox--active;background-color:#d2d6d6;background-color:var-background-color--down--checkbox;border:var-border--checkbox--active;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;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: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;background-color:var-background-color__icon-button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--icon-button;border-radius:4px;border-radius:var-icon-button-border-radius}.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:active{background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:var-border--icon-button--quiet;color:var-color--icon-button--quiet}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;border:var-border--icon-button--quite--hover;box-shadow:inset 0 1px #fff}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#454545;color:var-color--icon-button--quiet--active;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--icon-button-quiet--down;border:1px solid #9daca9;border:var-border--icon-button--quite--active;box-shadow:inset 0 1px rgba(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:active{background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.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;width:var-notification-width;height:var-notification-height;border-radius:2px;background-color:#ec514e;color:#fff}.page{background-color:var-background-color--page}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;color:var-color--radio-button;line-height:1.063rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.063rem;height:1.063rem;background:#e5e9e8;background:var-background--radio-button--before;border:1px solid #9daca9;border:var-border--radio-button--before;box-shadow:inset 0 1px #fff}.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,.1);box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:.313rem;left:.313rem}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;border:var-border--radio-button--active;background-color:#d2d6d6;background-color:var-background-color--down--radio-button;box-shadow:inset 0 1px rgba(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 #fff}.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;border:var-border--range;background-color:#d6dcdb;background-color:var-background-color--range;height:.5rem;border-radius:15px;border-radius:var-border-radius--range}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #9daca9;background-color:#d6dcdb;background-color:var-background-color--range;height:.5rem;border-radius:15px;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:1.313rem;height:.75rem;width:.75rem;background-color:#e5e9e8;background-color:var-background-color--range__thumb;border:1px solid #9daca9;border:var-range-border;border-radius:4px;border-radius:var-round-border;box-shadow:inset 0 1px #fff}.topcoat-range::-moz-range-thumb{height:1.313rem;width:.75rem;background-color:#e5e9e8;border:1px solid #9daca9;border:var-range-border;border-radius:4px;border-radius:var-round-border;box-shadow:inset 0 1px #fff}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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;border:var-border--search-input;background-color:#fff;background-color:var-background-color--search-input;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;padding:0 0 0 1.3rem;border-radius:15px;border-radius:var-search-input--border-radius;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;background-color:var-background-color--search-input--focus;color:#454545;border:0;border:var-border--search-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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;border-radius:var-search-input--border-radius;background-position:1.2rem center;background-size:.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-radius:var-switch--border-radius;border:1px solid #9daca9;border:var-border--switch;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:.75rem;height:var-height--switch__label--left;top:var-top--switch__label--left;border-radius:var-border-radius--switch__label--left}.topcoat-switch__toggle{line-height:1.313rem;line-height:var-line-height--switch__toggle;height:1.313rem;height:var-height--switch__toggle;width:1rem;border-radius:4px;border-radius:var-border-radius--switch__toggle;color:#454545;text-shadow:0 1px #fff;background-color:#e5e9e8;background-color:var-background-color--switch__toggle;border:1px solid #9daca9;border:var-border--switch__toggle;margin-left:-.6rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #fff;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#d2d6d6;left:.8rem;padding-left:.6rem;height:var-height--switch__label--right;top:var-top--switch__label--right;border-radius:var-border-radius--switch__label--right}.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 #fff}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:var-background-color--tab-bar;border-top:var-border-top--tab-bar}.topcoat-tab-bar__button{padding:0 .563rem;height:1.313rem;height:var-line-height--tab-bar__button;line-height:1.313rem;line-height:var-line-height--tab-bar__button;letter-spacing:0;color:#454545;color:var-color--tab-bar__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color--tab-bar__button;box-shadow:inset 0 1px #fff;border-top:1px solid #9daca9;border-top:var-border--tab-bar__button}.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,.1)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),none;box-shadow:var-box-shadow--tab-bar__button--focus;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:var-border--text-input;border-radius:4px;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--text-input;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#fff;color:#454545;border:0;border:var-border--text-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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;color:var-color-invalid}.topcoat-text-input--large{line-height:1.688rem;font-size:.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;color:var-color-invalid}.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;border:var-border--textarea;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--textarea;letter-spacing:0}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#fff;color:#454545;border:0;border:var-border--focus--textarea;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-dark.css b/topcoat/css/topcoat-mobile-dark.cssindex 00c3405..b266815 100644--- a/topcoat/css/topcoat-mobile-dark.css+++ b/topcoat/css/topcoat-mobile-dark.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: #626465;   background-color: var-background-color--hover__button;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: var-quiet-button-color;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: var-quiet-button-color;+  border: var-border__button--quiet;+}++.topcoat-button--quiet:disabled {+  border: var-border__button--quiet; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #1e7dc8;   box-shadow: inset 0 1px rgba(0,0,0,0.12); }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid var-color__button;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: var-border-right--button-bar__button__first; }@@ -398,15 +420,20 @@   background-color: var-background-color--button-bar--button--active;   color: var-color--button-bar__button--active;   border: var-border--button-bar__button;+  border-right: var-border-right--button-bar__button;+  border-right: var-border-right--button-bar__button--active; }  .topcoat-button-bar__button:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: var-border-right--button-bar__button--focus; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: #626465;   background-color: var-background-color--hover__button;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: var-quiet-button-color;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: var-quiet-button-color;+  border: var-border__button--quiet;+}++.topcoat-button--quiet:disabled {+  border: var-border__button--quiet; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #1e7dc8;   box-shadow: inset 0 1px rgba(0,0,0,0.12); }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid var-color__button;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: var-border--checkbox--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -1249,10 +1301,10 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   text-shadow: 0 -1px rgba(0,0,0,0.69);   vertical-align: baseline;   background-color: #595b5b;-  background-color: var-background-color__icon-button;+  background-color: var-view-background;   box-shadow: inset 0 1px #737373;   border: 1px solid #333434;-  border: var-border--icon-button;+  border: none;   border-radius: 6px;   border-radius: var-icon-button-border-radius; }@@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: #626465;+  background-color: transparent; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,28 +1361,31 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;+  background-color: transparent;+  border: none;+  color: #c6c8c8; }  .topcoat-icon-button--quiet:hover, .topcoat-icon-button--large--quiet:hover {   text-shadow: 0 -1px rgba(0,0,0,0.69);   border: 1px solid #333434;-  border: var-border--icon-button--quite--hover;+  border: none;   box-shadow: inset 0 1px #737373;+  box-shadow: none; }  .topcoat-icon-button--quiet:active, .topcoat-icon-button--large--quiet:active {   color: #c6c8c8;-  color: var-color--icon-button--quiet--active;+  color: #dddfdf;   text-shadow: 0 -1px rgba(0,0,0,0.69);   background-color: #3f4041;-  background-color: var-background-color--icon-button-quiet--down;+  background-color: transparent;   border: 1px solid #333434;-  border: var-border--icon-button--quite--active;+  border: none;   box-shadow: inset 0 1px rgba(0,0,0,0.05);+  box-shadow: none; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: 1px solid #333434;   color: #c6c8c8;   padding: var-padding--list-container;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: var-background-color--list-item; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: var-background-color--list-item--active; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: 1px solid rgba(0,0,0,0.05);+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: var-border-bottom--list-item--last; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: var-border-bottom--navigation-bar; } +.topcoat-navigation-bar__line-height {+  line-height: 4.375rem !important;+  line-height: var-height--navigation-bar !important;+}++.topcoat-navigation-bar__bg {+  background: #595b5b;+  background: var-navigation-bar-background-color;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 4.375rem;@@ -2094,8 +2173,16 @@ limitations under the License.     - checkbox */ +body {+  background-color: #4b4d4e;+}+ .page {-  background-color: var-background-color--page;+  background-color: #4b4d4e;+}++.topcoat-page__bg {+  background-color: #4b4d4e; }  /**@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: var-border--radio-button--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: var-background-color--search-input;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2rem;   border-radius: 30px;   border-radius: var-search-input--border-radius;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #595b5b;   background-color: var-background-color--search-input--focus;   color: #fff;+  color: var-color--search-input--focus;   border: none;   border: var-border--search-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: var-border--switch;   overflow: hidden;   width: 6rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 5rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 2.7rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: var-border--switch__toggle--focus;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: var-background-color--tab-bar;   border-top: var-border-top--tab-bar; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #288edf;   background-color: #3f4041;   box-shadow: inset 0 0 1px rgba(0,0,0,0.05);+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none;   box-shadow: var-box-shadow--tab-bar__button--focus;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #595b5b;   color: #fff;+  color: var-color--text-input--focus;   border: none;   border: var-border--text-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #595b5b;   color: #fff;+  color: var-color--textarea--focus;   border: none;   border: var-border--focus--textarea;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #4b4d4e;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-dark.min.css b/topcoat/css/topcoat-mobile-dark.min.cssindex 10cdaa3..4b0bce2 100644--- a/topcoat/css/topcoat-mobile-dark.min.css+++ b/topcoat/css/topcoat-mobile-dark.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:var-color__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color__button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--button;border-radius:6px}.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:#626465;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#3f4041;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.05);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #737373;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:var-color--active__button--quiet;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--quiet-active;border:1px solid #333434;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-right:0;border-right:var-border-right--button-bar__button__first}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:var-border-right--button-bar__button__last}.topcoat-button-bar__button{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:var-background-color--button-bar--button--active;color:var-color--button-bar__button--active;border:var-border--button-bar__button}.topcoat-button-bar__button:hover{background-color:var-background-color--button-bar--button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button--large:hover{background-color:var-background-color--button-bar--button--hover}.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:var-color__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color__button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--button;border-radius:6px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#626465;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active{background-color:#3f4041;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.05);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #737373;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:var-color--active__button--quiet;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--quiet-active;border:1px solid #333434;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:#595b5b;background:var-background-color--checkmark;border:1px solid #333434;border:var-border--checkbox;border-radius:3px;box-shadow:inset 0 1px #737373;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:1px;left:2px;opacity:0;width:28px;height:11px;background:transparent;border:7px solid #c6c8c8;border-width:7px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;border:var-border--checkbox--active;background-color:#3f4041;background-color:var-background-color--down--checkbox;border:var-border--checkbox--active;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.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 .75rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:baseline;background-color:#595b5b;background-color:var-background-color__icon-button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--icon-button;border-radius:6px;border-radius:var-icon-button-border-radius}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#626465}.topcoat-icon-button:active{background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:var-border--icon-button--quiet;color:var-color--icon-button--quiet}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--icon-button--quite--hover;box-shadow:inset 0 1px #737373}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:var-color--icon-button--quiet--active;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--icon-button-quiet--down;border:1px solid #333434;border:var-border--icon-button--quite--active;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:4.375rem;height:4.375rem;line-height:4.375rem}.topcoat-icon-button--large:active{background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.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:1.62rem;height:1.62rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:2.499999998125rem;height:2.499999998125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:1px solid #333434;border-bottom:1px solid #616363;background-color:#454646}.topcoat-list__header{padding:4px 20px;font-size:.9em;font-weight:400;background-color:#3f4041;color:#c6c8c8;text-shadow:0 1px 0 rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.05)}.topcoat-list__container{border-top:1px solid #333434;color:#c6c8c8;padding:var-padding--list-container}.topcoat-list__item{padding:1.25rem;margin:var-margin--list-item;border-top:1px solid #616363;border-bottom:1px solid #333434;color:var-color--list-item;background-color:var-background-color--list-item}.topcoat-list__item:active{background-color:var-background-color--list-item--active}.topcoat-list__item:first-child{border-top:1px solid rgba(0,0,0,.05)}.topcoat-list__item:last-child{border-bottom:var-border-bottom--list-item--last}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:4.375rem;height:var-height--navigation-bar;padding-left:1rem;padding-right:1rem;background:#595b5b;background:var-navigation-bar-background-color;color:#fff;box-shadow:inset 0 -1px #333434,0 1px #454646;border-bottom:var-border-bottom--navigation-bar}.topcoat-navigation-bar__item{margin:0;line-height:4.375rem;line-height:var-line-height--navigation-bar--item;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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;width:var-notification-width;height:var-notification-height;border-radius:2px;background-color:#ec514e;color:#fff}.page{background-color:var-background-color--page}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:var-color--radio-button;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:#595b5b;background:var-background--radio-button--before;border:1px solid #333434;border:var-border--radio-button--before;box-shadow:inset 0 1px #737373}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#c6c8c8;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px rgba(255,255,255,.1);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;border:var-border--radio-button--active;background-color:#3f4041;background-color:var-background-color--down--radio-button;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.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:6px;border:1px solid #333434;border:var-border--range;background-color:#454646;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--range}.topcoat-range::-moz-range-track{border-radius:6px;border:1px solid #333434;background-color:#454646;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:3rem;height:2rem;width:2rem;background-color:#595b5b;background-color:var-background-color--range__thumb;border:1px solid #333434;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #737373}.topcoat-range::-moz-range-thumb{height:3rem;width:2rem;background-color:#595b5b;border:1px solid #333434;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #737373}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:3rem;height:3rem;font-size:16px;border:1px solid #333434;border:var-border--search-input;background-color:#454646;background-color:var-background-color--search-input;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;padding:0 0 0 2rem;border-radius:30px;border-radius:var-search-input--border-radius;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#595b5b;background-color:var-background-color--search-input--focus;color:#fff;border:0;border:var-border--search-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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:#fff}.topcoat-search-input:disabled::-moz-placeholder{color:#fff}.topcoat-search-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-search-input--large{line-height:4.375rem;height:4.375rem;font-size:1.3rem;font-weight:400;padding:0 0 0 2.9rem;border-radius:40px;border-radius:var-search-input--border-radius;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#fff}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-search-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#fff}.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:16px;padding:0 1.25rem;border-radius:6px;border-radius:var-switch--border-radius;border:1px solid #333434;border:var-border--switch;overflow:hidden;width:6rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:5rem}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#3f4041;right:1rem;padding-left:1.5rem;height:var-height--switch__label--left;top:var-top--switch__label--left;border-radius:var-border-radius--switch__label--left}.topcoat-switch__toggle{line-height:3rem;line-height:var-line-height--switch__toggle;height:3rem;height:var-height--switch__toggle;width:2rem;border-radius:6px;border-radius:var-border-radius--switch__toggle;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#595b5b;background-color:var-background-color--switch__toggle;border:1px solid #333434;border:var-border--switch__toggle;margin-left:-1.3rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #737373;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#3f4041;left:1rem;padding-left:2rem;height:var-height--switch__label--right;top:var-top--switch__label--right;border-radius:var-border-radius--switch__label--right}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:2.7rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:var-background-color--tab-bar;border-top:var-border-top--tab-bar}.topcoat-tab-bar__button{padding:0 1.25rem;height:3rem;height:var-line-height--tab-bar__button;line-height:3rem;line-height:var-line-height--tab-bar__button;letter-spacing:1px;color:#c6c8c8;color:var-color--tab-bar__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color--tab-bar__button;box-shadow:inset 0 1px #737373;border-top:1px solid #333434;border-top:var-border--tab-bar__button}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#288edf;background-color:#3f4041;box-shadow:inset 0 0 1px rgba(0,0,0,.05)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),none;box-shadow:var-box-shadow--tab-bar__button--focus;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:3rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #333434;border:var-border--text-input;border-radius:6px;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--text-input;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#595b5b;color:#fff;border:0;border:var-border--text-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input:disabled::-moz-placeholder{color:#fff}.topcoat-text-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input:invalid{border:1px solid #ec514e;color:var-color-invalid}.topcoat-text-input--large{line-height:4.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#fff}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input--large:invalid{border:1px solid #ec514e;color:var-color-invalid}.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:2rem;font-size:2.5rem;font-weight:400;border-radius:6px;line-height:3rem;border:1px solid #333434;border:var-border--textarea;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--textarea;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#595b5b;color:#fff;border:0;border:var-border--focus--textarea;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea:disabled::-moz-placeholder{color:#fff}.topcoat-textarea:disabled:-ms-input-placeholder{color:#fff}.topcoat-textarea--large{font-size:3rem;line-height:4.375rem}.topcoat-textarea--large:disabled{color:#fff}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea--large:disabled::-moz-placeholder{color:#fff}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#fff}@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:#4b4d4e;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_light.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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:var-color__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color__button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--button;border-radius:6px}.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:#626465;background-color:var-background-color--hover__button;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#3f4041;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.05);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:var-quiet-button-color;border:var-border__button--quiet}.topcoat-button--quiet:disabled{border:var-border__button--quiet}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #737373;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:var-color--active__button--quiet;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--quiet-active;border:1px solid #333434;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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{color:var-color--cta--down;background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid var-color__button}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-left:var-border-left--button-bar__button__first;border-right:0;border-right:var-border-right--button-bar__button__first}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:var-border-right--button-bar__button__last}.topcoat-button-bar__button{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:var-background-color--button-bar--button--active;color:var-color--button-bar__button--active;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button;border-right:var-border-right--button-bar__button--active}.topcoat-button-bar__button:hover{background-color:var-background-color--button-bar--button--hover;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:var-border-right--button-bar__button--focus}.topcoat-button-bar__button--large{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button--large:hover{background-color:var-background-color--button-bar--button--hover;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:var-color__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color__button;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:var-border--button;border-radius:6px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#626465;background-color:var-background-color--hover__button;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#3f4041;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.05);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:var-quiet-button-color;border:var-border__button--quiet}.topcoat-button--quiet:disabled{border:var-border__button--quiet}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #737373;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:var-color--active__button--quiet;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:var-background-color--quiet-active;border:1px solid #333434;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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{color:var-color--cta--down;background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid var-color__button}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:#595b5b;background:var-background-color--checkmark;border:1px solid #333434;border:var-border--checkbox;border-radius:3px;box-shadow:inset 0 1px #737373;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:1px;left:2px;opacity:0;width:28px;height:11px;background:transparent;border:7px solid #c6c8c8;border-width:7px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:var-border--checkbox--focus;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;border:var-border--checkbox--active;background-color:#3f4041;background-color:var-background-color--down--checkbox;border:var-border--checkbox--active;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.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 .75rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:baseline;background-color:#595b5b;background-color:var-view-background;box-shadow:inset 0 1px #737373;border:1px solid #333434;border:0;border-radius:6px;border-radius:var-icon-button-border-radius}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#626465;background-color:transparent}.topcoat-icon-button:active{background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:transparent;border:0;color:#c6c8c8}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;border:0;box-shadow:inset 0 1px #737373;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#dddfdf;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;background-color:transparent;border:1px solid #333434;border:0;box-shadow:inset 0 1px rgba(0,0,0,.05);box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:4.375rem;height:4.375rem;line-height:4.375rem}.topcoat-icon-button--large:active{background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.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:1.62rem;height:1.62rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:2.499999998125rem;height:2.499999998125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:1px solid #333434;border-bottom:1px solid #616363;background-color:#454646}.topcoat-list__header{padding:4px 20px;font-size:.9em;font-weight:400;background-color:#3f4041;color:#c6c8c8;text-shadow:0 1px 0 rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.05)}.topcoat-list__container{border-top:1px solid #333434;color:#c6c8c8;padding:var-padding--list-container;background-color:var-background-color--list-container}.topcoat-list__item{padding:1.25rem;margin:var-margin--list-item;border-top:1px solid #616363;border-bottom:1px solid #333434;color:var-color--list-item;background-color:var-background-color--list-item}.topcoat-list__item_active:active{background-color:var-background-color--list-item--active}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:1px solid rgba(0,0,0,.05);border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:var-border-bottom--list-item--last}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:4.375rem;height:var-height--navigation-bar;padding-left:1rem;padding-right:1rem;background:#595b5b;background:var-navigation-bar-background-color;color:#fff;box-shadow:inset 0 -1px #333434,0 1px #454646;border-bottom:var-border-bottom--navigation-bar}.topcoat-navigation-bar__line-height{line-height:4.375rem!important;line-height:var-height--navigation-bar!important}.topcoat-navigation-bar__bg{background:#595b5b;background:var-navigation-bar-background-color}.topcoat-navigation-bar__item{margin:0;line-height:4.375rem;line-height:var-line-height--navigation-bar--item;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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;width:var-notification-width;height:var-notification-height;border-radius:2px;background-color:#ec514e;color:#fff}body{background-color:#4b4d4e}.page{background-color:#4b4d4e}.topcoat-page__bg{background-color:#4b4d4e}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:var-color--radio-button;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:#595b5b;background:var-background--radio-button--before;border:1px solid #333434;border:var-border--radio-button--before;box-shadow:inset 0 1px #737373}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#c6c8c8;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px rgba(255,255,255,.1);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:var-border--radio-button--focus;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;border:var-border--radio-button--active;background-color:#3f4041;background-color:var-background-color--down--radio-button;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.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:6px;border:1px solid #333434;border:var-border--range;background-color:#454646;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--range}.topcoat-range::-moz-range-track{border-radius:6px;border:1px solid #333434;background-color:#454646;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:3rem;height:2rem;width:2rem;background-color:#595b5b;background-color:var-background-color--range__thumb;border:1px solid #333434;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #737373}.topcoat-range::-moz-range-thumb{height:3rem;width:2rem;background-color:#595b5b;border:1px solid #333434;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #737373}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:var-border--range__thumb--focus;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:var-border--range__thumb--focus;box-shadow:none}.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:3rem;height:3rem;font-size:16px;border:1px solid #333434;border:var-border--search-input;background-color:#454646;background-color:var-background-color--search-input;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2rem;border-radius:30px;border-radius:var-search-input--border-radius;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#595b5b;background-color:var-background-color--search-input--focus;color:#fff;color:var-color--search-input--focus;border:0;border:var-border--search-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#fff}.topcoat-search-input:disabled::-moz-placeholder{color:#fff}.topcoat-search-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-search-input--large{line-height:4.375rem;height:4.375rem;font-size:1.3rem;font-weight:400;padding:0 0 0 2.9rem;border-radius:40px;border-radius:var-search-input--border-radius;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#fff}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-search-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#fff}.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:16px;padding:0 1.25rem;border-radius:6px;border-radius:var-switch--border-radius;border:1px solid #333434;border:var-border--switch;overflow:hidden;width:6rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:5rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#3f4041;right:1rem;padding-left:1.5rem;height:var-height--switch__label--left;top:var-top--switch__label--left;border-radius:var-border-radius--switch__label--left}.topcoat-switch__toggle{line-height:3rem;line-height:var-line-height--switch__toggle;height:3rem;height:var-height--switch__toggle;width:2rem;border-radius:6px;border-radius:var-border-radius--switch__toggle;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#595b5b;background-color:var-background-color--switch__toggle;border:1px solid #333434;border:var-border--switch__toggle;margin-left:-1.3rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #737373;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#3f4041;left:1rem;padding-left:2rem;height:var-height--switch__label--right;top:var-top--switch__label--right;border-radius:var-border-radius--switch__label--right}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:2.7rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:var-border--switch__toggle--focus;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:var-background-color--tab-bar;border-top:var-border-top--tab-bar}.topcoat-tab-bar__button{padding:0 1.25rem;height:3rem;height:var-line-height--tab-bar__button;line-height:3rem;line-height:var-line-height--tab-bar__button;letter-spacing:1px;color:#c6c8c8;color:var-color--tab-bar__button;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;background-color:var-background-color--tab-bar__button;box-shadow:inset 0 1px #737373;border-top:1px solid #333434;border-top:var-border--tab-bar__button}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#288edf;background-color:#3f4041;box-shadow:inset 0 0 1px rgba(0,0,0,.05);border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:inset 0 1px rgba(255,255,255,.36),none;box-shadow:var-box-shadow--tab-bar__button--focus;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:3rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #333434;border:var-border--text-input;border-radius:6px;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--text-input;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#595b5b;color:#fff;color:var-color--text-input--focus;border:0;border:var-border--text-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input:disabled::-moz-placeholder{color:#fff}.topcoat-text-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input:invalid{border:1px solid #ec514e;color:var-color-invalid}.topcoat-text-input--large{line-height:4.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#fff}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input--large:invalid{border:1px solid #ec514e;color:var-color-invalid}.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:2rem;font-size:2.5rem;font-weight:400;border-radius:6px;line-height:3rem;border:1px solid #333434;border:var-border--textarea;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;color:var-color--textarea;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#595b5b;color:#fff;color:var-color--textarea--focus;border:0;border:var-border--focus--textarea;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea:disabled::-moz-placeholder{color:#fff}.topcoat-textarea:disabled:-ms-input-placeholder{color:#fff}.topcoat-textarea--large{font-size:3rem;line-height:4.375rem}.topcoat-textarea--large:disabled{color:#fff}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea--large:disabled::-moz-placeholder{color:#fff}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#fff}@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:#4b4d4e;color:#000;color:var-color--body;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_light.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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-light.css b/topcoat/css/topcoat-mobile-light.cssindex 2fa6704..2a9eb05 100644--- a/topcoat/css/topcoat-mobile-light.css+++ b/topcoat/css/topcoat-mobile-light.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: #eff1f1;   background-color: var-background-color--hover__button;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: var-quiet-button-color;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: var-quiet-button-color;+  border: var-border__button--quiet;+}++.topcoat-button--quiet:disabled {+  border: var-border__button--quiet; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #1e7dc8;   box-shadow: inset 0 1px rgba(0,0,0,0.12); }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #454545;+  border: 3px solid var-color__button;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: var-border-right--button-bar__button__first; }@@ -398,15 +420,20 @@   background-color: var-background-color--button-bar--button--active;   color: var-color--button-bar__button--active;   border: var-border--button-bar__button;+  border-right: var-border-right--button-bar__button;+  border-right: var-border-right--button-bar__button--active; }  .topcoat-button-bar__button:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: var-border-right--button-bar__button--focus; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: #eff1f1;   background-color: var-background-color--hover__button;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: var-quiet-button-color;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: var-quiet-button-color;+  border: var-border__button--quiet;+}++.topcoat-button--quiet:disabled {+  border: var-border__button--quiet; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #1e7dc8;   box-shadow: inset 0 1px rgba(0,0,0,0.12); }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #454545;+  border: 3px solid var-color__button;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: var-border--checkbox--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -1249,10 +1301,10 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   text-shadow: 0 1px #fff;   vertical-align: baseline;   background-color: #e5e9e8;-  background-color: var-background-color__icon-button;+  background-color: var-view-background;   box-shadow: inset 0 1px #fff;   border: 1px solid #9daca9;-  border: var-border--icon-button;+  border: none;   border-radius: 6px;   border-radius: var-icon-button-border-radius; }@@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: #eff1f1;+  background-color: transparent; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,28 +1361,31 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;+  background-color: transparent;+  border: none;+  color: #454545; }  .topcoat-icon-button--quiet:hover, .topcoat-icon-button--large--quiet:hover {   text-shadow: 0 1px #fff;   border: 1px solid #9daca9;-  border: var-border--icon-button--quite--hover;+  border: none;   box-shadow: inset 0 1px #fff;+  box-shadow: none; }  .topcoat-icon-button--quiet:active, .topcoat-icon-button--large--quiet:active {   color: #454545;-  color: var-color--icon-button--quiet--active;+  color: #6b6b6b;   text-shadow: 0 1px #fff;   background-color: #d2d6d6;-  background-color: var-background-color--icon-button-quiet--down;+  background-color: transparent;   border: 1px solid #9daca9;-  border: var-border--icon-button--quite--active;+  border: none;   box-shadow: inset 0 1px rgba(0,0,0,0.1);+  box-shadow: none; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: 1px solid #9daca9;   color: #454545;   padding: var-padding--list-container;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: var-background-color--list-item; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: var-background-color--list-item--active; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: 1px solid #d6dcdb;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: var-border-bottom--list-item--last; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: var-border-bottom--navigation-bar; } +.topcoat-navigation-bar__line-height {+  line-height: 4.375rem !important;+  line-height: var-height--navigation-bar !important;+}++.topcoat-navigation-bar__bg {+  background: #e5e9e8;+  background: var-navigation-bar-background-color;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 4.375rem;@@ -2094,8 +2173,16 @@ limitations under the License.     - checkbox */ +body {+  background-color: #dfe2e2;+}+ .page {-  background-color: var-background-color--page;+  background-color: #dfe2e2;+}++.topcoat-page__bg {+  background-color: #dfe2e2; }  /**@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: var-border--radio-button--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: var-background-color--search-input;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);   color: #454545;+  color: var-color--search-input;   padding: 0 0 0 2rem;   border-radius: 30px;   border-radius: var-search-input--border-radius;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #fff;   background-color: var-background-color--search-input--focus;   color: #454545;+  color: var-color--search-input--focus;   border: none;   border: var-border--search-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: var-border--switch;   overflow: hidden;   width: 6rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 5rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 2.7rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: var-border--switch__toggle--focus;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: var-background-color--tab-bar;   border-top: var-border-top--tab-bar; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #288edf;   background-color: #e5f1fb;   box-shadow: inset 0 0 1px rgba(0,0,0,0.1);+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none;   box-shadow: var-box-shadow--tab-bar__button--focus;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #fff;   color: #454545;+  color: var-color--text-input--focus;   border: none;   border: var-border--text-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #fff;   color: #454545;+  color: var-color--textarea--focus;   border: none;   border: var-border--focus--textarea;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #dfe2e2;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-light.min.css b/topcoat/css/topcoat-mobile-light.min.cssindex 0365095..d09878f 100644--- a/topcoat/css/topcoat-mobile-light.min.css+++ b/topcoat/css/topcoat-mobile-light.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;color:var-color__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color__button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--button;border-radius:6px}.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;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#d2d6d6;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.1);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;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;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #fff;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#454545;color:var-color--active__button--quiet;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--quiet-active;border:1px solid #9daca9;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-right:0;border-right:var-border-right--button-bar__button__first}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:var-border-right--button-bar__button__last}.topcoat-button-bar__button{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:var-background-color--button-bar--button--active;color:var-color--button-bar__button--active;border:var-border--button-bar__button}.topcoat-button-bar__button:hover{background-color:var-background-color--button-bar--button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button--large:hover{background-color:var-background-color--button-bar--button--hover}.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;color:var-color__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color__button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--button;border-radius:6px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#eff1f1;background-color:var-background-color--hover__button}.topcoat-button:active,.topcoat-button--large:active{background-color:#d2d6d6;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.1);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:var-quiet-button-color;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;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #fff;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#454545;color:var-color--active__button--quiet;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--quiet-active;border:1px solid #9daca9;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:#e5e9e8;background:var-background-color--checkmark;border:1px solid #9daca9;border:var-border--checkbox;border-radius:3px;box-shadow:inset 0 1px #fff;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:1px;left:2px;opacity:0;width:28px;height:11px;background:transparent;border:7px solid #454545;border-width:7px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;border:var-border--checkbox--active;background-color:#d2d6d6;background-color:var-background-color--down--checkbox;border:var-border--checkbox--active;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;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: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 .75rem;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;background-color:#e5e9e8;background-color:var-background-color__icon-button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--icon-button;border-radius:6px;border-radius:var-icon-button-border-radius}.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:active{background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:var-border--icon-button--quiet;color:var-color--icon-button--quiet}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;border:var-border--icon-button--quite--hover;box-shadow:inset 0 1px #fff}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#454545;color:var-color--icon-button--quiet--active;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--icon-button-quiet--down;border:1px solid #9daca9;border:var-border--icon-button--quite--active;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:4.375rem;height:4.375rem;line-height:4.375rem}.topcoat-icon-button--large:active{background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.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:1.62rem;height:1.62rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:2.499999998125rem;height:2.499999998125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:1px solid #9daca9;border-bottom:1px solid #fff;background-color:#e5e9e8}.topcoat-list__header{padding:4px 20px;font-size:.9em;font-weight:400;background-color:#d2d6d6;color:#454545;text-shadow:0 1px 0 rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.23)}.topcoat-list__container{border-top:1px solid #9daca9;color:#454545;padding:var-padding--list-container}.topcoat-list__item{padding:1.25rem;margin:var-margin--list-item;border-top:1px solid #fff;border-bottom:1px solid #9daca9;color:var-color--list-item;background-color:var-background-color--list-item}.topcoat-list__item:active{background-color:var-background-color--list-item--active}.topcoat-list__item:first-child{border-top:1px solid #d6dcdb}.topcoat-list__item:last-child{border-bottom:var-border-bottom--list-item--last}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:4.375rem;height:var-height--navigation-bar;padding-left:1rem;padding-right:1rem;background:#e5e9e8;background:var-navigation-bar-background-color;color:#454545;box-shadow:inset 0 -1px #9daca9,0 1px #d6dcdb;border-bottom:var-border-bottom--navigation-bar}.topcoat-navigation-bar__item{margin:0;line-height:4.375rem;line-height:var-line-height--navigation-bar--item;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#454545}.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;width:var-notification-width;height:var-notification-height;border-radius:2px;background-color:#ec514e;color:#fff}.page{background-color:var-background-color--page}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#454545;color:var-color--radio-button;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:#e5e9e8;background:var-background--radio-button--before;border:1px solid #9daca9;border:var-border--radio-button--before;box-shadow:inset 0 1px #fff}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#454545;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;border:var-border--radio-button--active;background-color:#d2d6d6;background-color:var-background-color--down--radio-button;box-shadow:inset 0 1px rgba(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 #fff}.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:6px;border:1px solid #9daca9;border:var-border--range;background-color:#d6dcdb;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--range}.topcoat-range::-moz-range-track{border-radius:6px;border:1px solid #9daca9;background-color:#d6dcdb;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:3rem;height:2rem;width:2rem;background-color:#e5e9e8;background-color:var-background-color--range__thumb;border:1px solid #9daca9;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #fff}.topcoat-range::-moz-range-thumb{height:3rem;width:2rem;background-color:#e5e9e8;border:1px solid #9daca9;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #fff}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:3rem;height:3rem;font-size:16px;border:1px solid #9daca9;border:var-border--search-input;background-color:#fff;background-color:var-background-color--search-input;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;padding:0 0 0 2rem;border-radius:30px;border-radius:var-search-input--border-radius;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#fff;background-color:var-background-color--search-input--focus;color:#454545;border:0;border:var-border--search-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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:4.375rem;height:4.375rem;font-size:1.3rem;font-weight:400;padding:0 0 0 2.9rem;border-radius:40px;border-radius:var-search-input--border-radius;background-position:1.2rem center;background-size:1.3rem}.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:16px;padding:0 1.25rem;border-radius:6px;border-radius:var-switch--border-radius;border:1px solid #9daca9;border:var-border--switch;overflow:hidden;width:6rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:5rem}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#e5f1fb;right:1rem;padding-left:1.5rem;height:var-height--switch__label--left;top:var-top--switch__label--left;border-radius:var-border-radius--switch__label--left}.topcoat-switch__toggle{line-height:3rem;line-height:var-line-height--switch__toggle;height:3rem;height:var-height--switch__toggle;width:2rem;border-radius:6px;border-radius:var-border-radius--switch__toggle;color:#454545;text-shadow:0 1px #fff;background-color:#e5e9e8;background-color:var-background-color--switch__toggle;border:1px solid #9daca9;border:var-border--switch__toggle;margin-left:-1.3rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #fff;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#d2d6d6;left:1rem;padding-left:2rem;height:var-height--switch__label--right;top:var-top--switch__label--right;border-radius:var-border-radius--switch__label--right}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:2.7rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:var-background-color--tab-bar;border-top:var-border-top--tab-bar}.topcoat-tab-bar__button{padding:0 1.25rem;height:3rem;height:var-line-height--tab-bar__button;line-height:3rem;line-height:var-line-height--tab-bar__button;letter-spacing:1px;color:#454545;color:var-color--tab-bar__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color--tab-bar__button;box-shadow:inset 0 1px #fff;border-top:1px solid #9daca9;border-top:var-border--tab-bar__button}.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,.1)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),none;box-shadow:var-box-shadow--tab-bar__button--focus;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:3rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #9daca9;border:var-border--text-input;border-radius:6px;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--text-input;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#fff;color:#454545;border:0;border:var-border--text-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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;color:var-color-invalid}.topcoat-text-input--large{line-height:4.375rem;font-size:1.3rem}.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;color:var-color-invalid}.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:2rem;font-size:2.5rem;font-weight:400;border-radius:6px;line-height:3rem;border:1px solid #9daca9;border:var-border--textarea;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--textarea;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#fff;color:#454545;border:0;border:var-border--focus--textarea;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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:3rem;line-height:4.375rem}.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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;color:var-color__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color__button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--button;border-radius:6px}.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;background-color:var-background-color--hover__button;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#d2d6d6;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.1);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:var-quiet-button-color;border:var-border__button--quiet}.topcoat-button--quiet:disabled{border:var-border__button--quiet}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #fff;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#454545;color:var-color--active__button--quiet;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--quiet-active;border:1px solid #9daca9;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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{color:var-color--cta--down;background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #454545;border:3px solid var-color__button}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-left:var-border-left--button-bar__button__first;border-right:0;border-right:var-border-right--button-bar__button__first}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:var-border-right--button-bar__button__last}.topcoat-button-bar__button{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:var-background-color--button-bar--button--active;color:var-color--button-bar__button--active;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button;border-right:var-border-right--button-bar__button--active}.topcoat-button-bar__button:hover{background-color:var-background-color--button-bar--button--hover;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:var-border-right--button-bar__button--focus}.topcoat-button-bar__button--large{border-radius:inherit;background-color:var-background-color--button-bar;color:var-color--button-bar--button;border:var-border--button-bar__button;border-right:var-border-right--button-bar__button}.topcoat-button-bar__button--large:hover{background-color:var-background-color--button-bar--button--hover;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;color:var-color__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color__button;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:var-border--button;border-radius:6px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#eff1f1;background-color:var-background-color--hover__button;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#d2d6d6;background-color:var-background-color--down__button;box-shadow:inset 0 1px rgba(0,0,0,.1);color:var-color--button--active}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:var-quiet-button-color;border:var-border__button--quiet}.topcoat-button--quiet:disabled{border:var-border__button--quiet}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;border:var-border--hover__button--quiet;background-color:var-background-color--quiet-hover;box-shadow:inset 0 1px #fff;background-color:var-background-color--quiet-hover}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#454545;color:var-color--active__button--quiet;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:var-background-color--quiet-active;border:1px solid #9daca9;border:var-border--active__button--quiet;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:var-quiet-button-color;background:transparent;border:1px solid transparent;box-shadow:none;color:var-quiet-button-color}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(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{color:var-color--cta--down;background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #454545;border:3px solid var-color__button}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:#e5e9e8;background:var-background-color--checkmark;border:1px solid #9daca9;border:var-border--checkbox;border-radius:3px;box-shadow:inset 0 1px #fff;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:1px;left:2px;opacity:0;width:28px;height:11px;background:transparent;border:7px solid #454545;border-width:7px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:var-border--checkbox--focus;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;border:var-border--checkbox--active;background-color:#d2d6d6;background-color:var-background-color--down--checkbox;border:var-border--checkbox--active;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;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: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 .75rem;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;background-color:#e5e9e8;background-color:var-view-background;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border:0;border-radius:6px;border-radius:var-icon-button-border-radius}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#eff1f1;background-color:transparent}.topcoat-icon-button:active{background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:transparent;border:0;color:#454545}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;border:0;box-shadow:inset 0 1px #fff;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#454545;color:#6b6b6b;text-shadow:0 1px #fff;background-color:#d2d6d6;background-color:transparent;border:1px solid #9daca9;border:0;box-shadow:inset 0 1px rgba(0,0,0,.1);box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:4.375rem;height:4.375rem;line-height:4.375rem}.topcoat-icon-button--large:active{background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.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:1.62rem;height:1.62rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:2.499999998125rem;height:2.499999998125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:1px solid #9daca9;border-bottom:1px solid #fff;background-color:#e5e9e8}.topcoat-list__header{padding:4px 20px;font-size:.9em;font-weight:400;background-color:#d2d6d6;color:#454545;text-shadow:0 1px 0 rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.23)}.topcoat-list__container{border-top:1px solid #9daca9;color:#454545;padding:var-padding--list-container;background-color:var-background-color--list-container}.topcoat-list__item{padding:1.25rem;margin:var-margin--list-item;border-top:1px solid #fff;border-bottom:1px solid #9daca9;color:var-color--list-item;background-color:var-background-color--list-item}.topcoat-list__item_active:active{background-color:var-background-color--list-item--active}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:1px solid #d6dcdb;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:var-border-bottom--list-item--last}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:4.375rem;height:var-height--navigation-bar;padding-left:1rem;padding-right:1rem;background:#e5e9e8;background:var-navigation-bar-background-color;color:#454545;box-shadow:inset 0 -1px #9daca9,0 1px #d6dcdb;border-bottom:var-border-bottom--navigation-bar}.topcoat-navigation-bar__line-height{line-height:4.375rem!important;line-height:var-height--navigation-bar!important}.topcoat-navigation-bar__bg{background:#e5e9e8;background:var-navigation-bar-background-color}.topcoat-navigation-bar__item{margin:0;line-height:4.375rem;line-height:var-line-height--navigation-bar--item;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#454545}.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;width:var-notification-width;height:var-notification-height;border-radius:2px;background-color:#ec514e;color:#fff}body{background-color:#dfe2e2}.page{background-color:#dfe2e2}.topcoat-page__bg{background-color:#dfe2e2}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#454545;color:var-color--radio-button;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:#e5e9e8;background:var-background--radio-button--before;border:1px solid #9daca9;border:var-border--radio-button--before;box-shadow:inset 0 1px #fff}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#454545;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:var-border--radio-button--focus;box-shadow:inset 0 1px rgba(255,255,255,.36),none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;border:var-border--radio-button--active;background-color:#d2d6d6;background-color:var-background-color--down--radio-button;box-shadow:inset 0 1px rgba(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 #fff}.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:6px;border:1px solid #9daca9;border:var-border--range;background-color:#d6dcdb;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--range}.topcoat-range::-moz-range-track{border-radius:6px;border:1px solid #9daca9;background-color:#d6dcdb;background-color:var-background-color--range;height:1rem;border-radius:30px;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:3rem;height:2rem;width:2rem;background-color:#e5e9e8;background-color:var-background-color--range__thumb;border:1px solid #9daca9;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #fff}.topcoat-range::-moz-range-thumb{height:3rem;width:2rem;background-color:#e5e9e8;border:1px solid #9daca9;border:var-range-border;border-radius:6px;border-radius:var-round-border;box-shadow:inset 0 1px #fff}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:var-border--range__thumb--focus;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:var-border--range__thumb--focus;box-shadow:none}.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:3rem;height:3rem;font-size:16px;border:1px solid #9daca9;border:var-border--search-input;background-color:#fff;background-color:var-background-color--search-input;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--search-input;padding:0 0 0 2rem;border-radius:30px;border-radius:var-search-input--border-radius;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#fff;background-color:var-background-color--search-input--focus;color:#454545;color:var-color--search-input--focus;border:0;border:var-border--search-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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;margin-right:var-margin-right--search-decoration}.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:4.375rem;height:4.375rem;font-size:1.3rem;font-weight:400;padding:0 0 0 2.9rem;border-radius:40px;border-radius:var-search-input--border-radius;background-position:1.2rem center;background-size:1.3rem}.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:16px;padding:0 1.25rem;border-radius:6px;border-radius:var-switch--border-radius;border:1px solid #9daca9;border:var-border--switch;overflow:hidden;width:6rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:5rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#e5f1fb;right:1rem;padding-left:1.5rem;height:var-height--switch__label--left;top:var-top--switch__label--left;border-radius:var-border-radius--switch__label--left}.topcoat-switch__toggle{line-height:3rem;line-height:var-line-height--switch__toggle;height:3rem;height:var-height--switch__toggle;width:2rem;border-radius:6px;border-radius:var-border-radius--switch__toggle;color:#454545;text-shadow:0 1px #fff;background-color:#e5e9e8;background-color:var-background-color--switch__toggle;border:1px solid #9daca9;border:var-border--switch__toggle;margin-left:-1.3rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #fff;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#d2d6d6;left:1rem;padding-left:2rem;height:var-height--switch__label--right;top:var-top--switch__label--right;border-radius:var-border-radius--switch__label--right}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:2.7rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:var-border--switch__toggle--focus;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:var-background-color--tab-bar;border-top:var-border-top--tab-bar}.topcoat-tab-bar__button{padding:0 1.25rem;height:3rem;height:var-line-height--tab-bar__button;line-height:3rem;line-height:var-line-height--tab-bar__button;letter-spacing:1px;color:#454545;color:var-color--tab-bar__button;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;background-color:var-background-color--tab-bar__button;box-shadow:inset 0 1px #fff;border-top:1px solid #9daca9;border-top:var-border--tab-bar__button}.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,.1);border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:inset 0 1px rgba(255,255,255,.36),none;box-shadow:var-box-shadow--tab-bar__button--focus;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:3rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #9daca9;border:var-border--text-input;border-radius:6px;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--text-input;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#fff;color:#454545;color:var-color--text-input--focus;border:0;border:var-border--text-input--focus;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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;color:var-color-invalid}.topcoat-text-input--large{line-height:4.375rem;font-size:1.3rem}.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;color:var-color-invalid}.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:2rem;font-size:2.5rem;font-weight:400;border-radius:6px;line-height:3rem;border:1px solid #9daca9;border:var-border--textarea;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;color:var-color--textarea;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#fff;color:#454545;color:var-color--textarea--focus;border:0;border:var-border--focus--textarea;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),none}.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:3rem;line-height:4.375rem}.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;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-android4_4.css b/topcoat/css/topcoat-mobile-onsen-android4_4.cssnew file mode 100644index 0000000..477f68c--- /dev/null+++ b/topcoat/css/topcoat-mobile-onsen-android4_4.css@@ -0,0 +1,4531 @@+/**+*+* 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-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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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 1.25rem;+  font-size: 16px;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #f3f3f3;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: #535353;+  box-shadow: none;+  border: 1px solid #09c;+  border: none;+  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: var-background-color--hover;+  background-color: #535353;+  color: #f3f3f3;+}++.topcoat-button:active,+.topcoat-button--large:active,+.topcoat-button-bar__button:active,+.topcoat-button-bar__button--large:active,+:checked + .topcoat-button-bar__button {+  background-color: #09c;+  background-color: #868686;+  box-shadow: none;+  color: #fff;+}++.topcoat-button:focus,+.topcoat-button--quiet:focus,+.topcoat-button--large:focus,+.topcoat-button--large--quiet:focus,+.topcoat-button--cta:focus,+.topcoat-button--large--cta:focus,+.topcoat-button-bar__button:focus,+.topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;+  outline: 0;+}++.topcoat-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background: var-quiet-button-background;+  color: #c0c0c0;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none;+}++.topcoat-button--quiet:hover,+.topcoat-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #09c;+  border: none;+  background-color: transparent;+  box-shadow: none;+  background-color: transparent;+}++.topcoat-button--quiet:active,+.topcoat-button--large--quiet:active {+  color: #f3f3f3;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+}++.topcoat-button--large,+.topcoat-button--large--quiet,+.topcoat-button-bar__button--large {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button--large--quiet {+  color: #c0c0c0;+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  color: #c0c0c0;+}++.topcoat-button--large--quiet:active {+  color: var-color--quiet-active;+}++.topcoat-button--cta,+.topcoat-button--large--cta {+  border: none;+  background-color: #535353;+  box-shadow: none;+  color: #f3f3f3;+  font-weight: 500;+  text-shadow: none;+}++.topcoat-button--cta:hover,+.topcoat-button--large--cta:hover {+  background-color: #535353;+}++.topcoat-button--cta:active,+.topcoat-button--large--cta:active {+  color: #fff;+  background-color: #868686;+  box-shadow: none;+}++.topcoat-button--large--cta {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button__spinner {+  border: 3px solid #f3f3f3;+  border: 3px solid #f3f3f3;+}++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Button Bar+  description: Component of grouped buttons+  modifiers:+    :disabled: Disabled state+  markup:+    <div class="topcoat-button-bar">+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button">One</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button">Two</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button">Three</button>+      </div>+    </div>+  examples:+    mobile button bar: http://codepen.io/Topcoat/pen/kdKyg+  tags:+    - desktop+    - light+    - dark+    - mobile+    - button+    - group+    - bar+*/++.topcoat-button-bar {+  margin: var-button-bar-margin;+  border: 0px solid #535353;+}++.topcoat-button-bar__item {+  border-top: 1px solid #535353;+  border-bottom: 1px solid #535353;+}++.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-left: 1px solid #535353;+  border-right: none;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,+.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {+  border-left: none;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button {+  border-radius: inherit;+  background-color: #000;+  color: var-color--button-bar--button;+  border: 0px solid #535353;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button:active,+.topcoat-button-bar__button--large:active,+:checked + .topcoat-button-bar__button {+  background-color: #3cf !important;+  color: #303942;+  border: 0px solid #535353;+  border-right: 1px solid #535353;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button:hover {+  background-color: #09c;+  color: #050607;+}++.topcoat-button-bar__button:focus,+.topcoat-button-bar__button--large:focus {+  z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #535353;+}++/* topdoc+  name: Large Button Bar+  description: A button bar, only larger+  modifiers:+    :disabled: Disabled state+  markup:+    <div class="topcoat-button-bar">+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button--large">One</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button--large">Two</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button--large">Three</button>+      </div>+    </div>+  tags:+    - desktop+    - light+    - dark+    - mobile+    - button+    - group+    - bar+    - large+*/++.topcoat-button-bar__button--large {+  border-radius: inherit;+  background-color: #000;+  color: var-color--button-bar--button;+  border: 0px solid #535353;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button--large:hover {+  background-color: #09c;+  color: #050607;+}++/**+*+* 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Button+  description: A simple button+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button">Button</button>+    <button class="topcoat-button" disabled>Button</button>+  examples:+    mobile button: http://codepen.io/Topcoat/pen/DpKtf+  tags:+    - desktop+    - light+    - mobile+    - button+*/++.topcoat-button,+.topcoat-button--quiet,+.topcoat-button--large,+.topcoat-button--large--quiet,+.topcoat-button--cta,+.topcoat-button--large--cta {+  padding: 0 1.25rem;+  font-size: 16px;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #f3f3f3;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: #535353;+  box-shadow: none;+  border: 1px solid #09c;+  border: none;+  border-radius: 4px;+}++.topcoat-button:hover,+.topcoat-button--quiet:hover,+.topcoat-button--large:hover,+.topcoat-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: #535353;+  color: #f3f3f3;+}++.topcoat-button:active,+.topcoat-button--large:active {+  background-color: #09c;+  background-color: #868686;+  box-shadow: none;+  color: #fff;+}++.topcoat-button:focus,+.topcoat-button--quiet:focus,+.topcoat-button--large:focus,+.topcoat-button--large--quiet:focus,+.topcoat-button--cta:focus,+.topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;+  outline: 0;+}++/* topdoc+  name: Quiet Button+  description: A simple, yet quiet button+  modifiers:+    :active: Quiet button active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--quiet">Button</button>+    <button class="topcoat-button--quiet" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - quiet+*/++.topcoat-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background: var-quiet-button-background;+  color: #c0c0c0;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none;+}++.topcoat-button--quiet:hover,+.topcoat-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #09c;+  border: none;+  background-color: transparent;+  box-shadow: none;+  background-color: transparent;+}++.topcoat-button--quiet:active,+.topcoat-button--large--quiet:active {+  color: #f3f3f3;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+}++/* topdoc+  name: Large Button+  description: A big ol button+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--large" >Button</button>+    <button class="topcoat-button--large" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - large+*/++.topcoat-button--large,+.topcoat-button--large--quiet {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++/* topdoc+  name: Large Quiet Button+  description: A large, yet quiet button+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--large--quiet" >Button</button>+    <button class="topcoat-button--large--quiet" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - large+    - quiet+*/++.topcoat-button--large--quiet {+  color: #c0c0c0;+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  color: #c0c0c0;+}++.topcoat-button--large--quiet:active {+  color: var-color--quiet-active;+}++/* topdoc+  name: Call To Action Button+  description: A CALL TO ARMS, er, ACTION!+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--cta" >Button</button>+    <button class="topcoat-button--cta" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - call to action+*/++.topcoat-button--cta,+.topcoat-button--large--cta {+  border: none;+  background-color: #535353;+  box-shadow: none;+  color: #f3f3f3;+  font-weight: 500;+  text-shadow: none;+}++.topcoat-button--cta:hover,+.topcoat-button--large--cta:hover {+  background-color: #535353;+}++.topcoat-button--cta:active,+.topcoat-button--large--cta:active {+  color: #fff;+  background-color: #868686;+  box-shadow: none;+}++/* topdoc+  name: Large Call To Action Button+  description: Like call to action, but bigger+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--large--cta" >Button</button>+    <button class="topcoat-button--large--cta" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - large+    - call to action+*/++.topcoat-button--large--cta {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button__spinner {+  border: 3px solid #f3f3f3;+  border: 3px solid #f3f3f3;+}++/**+*+* 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.+*+*/++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;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++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: 1.1rem;+}++input[type="checkbox"] {+  height: 1.1rem;+  width: 1.1rem;+  margin-top: 0;+  margin-right: -1.1rem;+  margin-bottom: -1.1rem;+  margin-left: 0;+}++input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {+  opacity: 1;+}++.topcoat-checkbox {+  line-height: 1.1rem;+}++.topcoat-checkbox__checkmark:before {+  width: 1.1rem;+  height: 1.1rem;+  background: var-background-color;+  background: transparent;+  border: 1px solid #09c;+  border: 1px solid #535353;+  border-radius: none;+  box-shadow: none;+  left: 0;+}++.topcoat-checkbox__checkmark {+  width: 1.1rem;+  height: 1.1rem;+}++.topcoat-checkbox__checkmark:after {+  top: -0.08rem;+  left: 0.15rem;+  opacity: 0;+  width: 0.85rem;+  height: 6px;+  background: transparent;+  border: 0.01rem solid #09c;+  border-width: 4px;+  border-top: none;+  border-right: none;+  border-radius: 2px;+  -webkit-transform: rotate(-50deg);+  -ms-transform: rotate(-50deg);+  transform: rotate(-50deg);+}++input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {+  border: none;+  border: 1px solid #535353;+  box-shadow: none, none;+}++input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #09c;+  border: 1px solid #535353;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #535353;+  box-shadow: none;+}++input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #09c;+  background: var-background-color;+  box-shadow: none;+}++/**+*+* 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.+*+*/++/**+*+* 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-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.5rem;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  vertical-align: baseline;+  background-color: var-background-color;+  background-color: #050607;+  box-shadow: none;+  border: 1px solid #09c;+  border: none;+  border-radius: 4px;+  border-radius: 3px;+}++.topcoat-icon-button:hover,+.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large:hover,+.topcoat-icon-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover;+}++.topcoat-icon-button:active {+  background-color: #09c;+  box-shadow: none;+}++.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: none;+  box-shadow: none;+  outline: 0;+}++/* 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;+  background-color: transparent;+  border: none;+  color: #09c;+}++.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover;+}++.topcoat-icon-button--quiet:active,+.topcoat-icon-button--large--quiet:active {+  color: #f3f3f3;+  color: #3cf;+  text-shadow: 0 1px none;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down;+}++/* 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: 3.375rem;+  height: 3.375rem;+  line-height: 3.375rem;+}++.topcoat-icon-button--large:active {+  background-color: #09c;+  box-shadow: none;+}++/* 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: 1.08rem;+  height: 1.08rem;+  vertical-align: middle;+  top: -1px;+}++.topcoat-icon--large {+  width: 1.928571427125rem;+  height: 1.928571427125rem;+  top: -2px;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.list {+  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;+  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;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.list,+.topcoat-list {+  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;+  overflow: auto;+  -webkit-overflow-scrolling: touch;+}++.list__header,+.topcoat-list__header {+  margin: 0;+}++.list__container,+.topcoat-list__container {+  padding: 0;+  margin: 0;+  list-style-type: none;+}++.list__item,+.topcoat-list__item {+  margin: 0;+  padding: 0;+}++/* topdoc+  name: List+  description: Topcoat default list skin+  markup:+    <div class="topcoat-list">+      <h3 class="topcoat-list__header">Category</h3>+      <ul class="topcoat-list__container">+        <li class="topcoat-list__item">+          Item+        </li>+        <li class="topcoat-list__item">+          Item+        </li>+        <li class="topcoat-list__item">+          Item+        </li>+      </ul>+    </div>+  tags:+    - mobile+    - list+*/++.topcoat-list {+  border-top: none;+  border-bottom: none;+  background-color: #050607;+}++.topcoat-list__header {+  padding: 4px 0.7rem;+  font-size: 0.9em;+  font-weight: 400;+  background-color: #050607;+  color: #f3f3f3;+  text-shadow: none;+  border-top: none;+  border-bottom: 2px solid #3a3d40;+}++.topcoat-list__container {+  border-top: none;+  color: #f3f3f3;+  padding: 0;+  background-color: var-background-color--list-container;+}++.topcoat-list__item {+  padding: 0.7rem;+  margin: 0;+  border-top: none;+  border-bottom: 1px solid #3a3d40;+  color: #f3f3f3;+  background-color: #050607;+}++.topcoat-list__item_active:active {+  background-color: #bdbec2;+}++.topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;+  border-top: none;+  border-bottom: var-border-bottom--list-item--first;+}++.topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;+  border-bottom: none;+}++.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: none;+  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: none;+}++.navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.navigation-bar,+.topcoat-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: none;+  cursor: default;+  -webkit-user-select: none;+  -moz-user-select: none;+  -ms-user-select: none;+  user-select: none;+}++.navigation-bar__item,+.topcoat-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: none;+}++.navigation-bar__title,+.topcoat-navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}++/* topdoc+  name: Navigation Bar+  description: A place where navigation goes to drink+  markup:+    <div class="topcoat-navigation-bar">+        <div class="topcoat-navigation-bar__item center full">+            <h1 class="topcoat-navigation-bar__title">Header</h1>+        </div>+    </div>+  tags:+    - desktop+    - light+    - mobile+    - navigation+    - bar+*/++.topcoat-navigation-bar {+  height: 3.375rem;+  height: 2.5rem;+  padding-left: 1rem;+  padding-right: 1rem;+  background: var-background-color;+  background: #222;+  color: #f3f3f3;+  box-shadow: none;+  border-bottom: 1px solid #3a3d40;+}++.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #222;+}++.topcoat-navigation-bar__item {+  margin: 0;+  line-height: 3.375rem;+  line-height: 2.5rem;+  vertical-align: top;+}++.topcoat-navigation-bar__title {+  font-size: 1.3rem;+  font-weight: 400;+  color: #f3f3f3;+}++/*+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.+*/++/**+*+* 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.+*+*/++.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: 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;+}++/*+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.+*/++/**+*+* 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.+*+*/++.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: 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;+}++/* topdoc+  name: Notification+  description: Notification badge+  markup:+    <span class="topcoat-notification">1</span>+  tags:+    - desktop+    - light+    - mobile+    - notification+*/++.topcoat-notification {+  padding: 0 0.4em 0;+  width: 1.2rem;+  height: 1.2rem;+  border-radius: 50%;+  background-color: #ec514e;+  color: #fff;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/* topdoc+  name: Page+  description: Default skin for Onsen UI Page+  modifiers:+    :focus: Focus state+    :disabled: Disabled state+  markup:+    <div class="page">+    </div>+  examples:+    mobile checkbox: http://codepen.io/Topcoat/pen/piHcs+  tags:+    - desktop+    - light+    - mobile+    - checkbox+*/++body {+  background-color: #050607;+}++.page {+  background-color: #050607;+}++.topcoat-page__bg {+  background-color: #050607;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++input[type="radio"] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++input[type="radio"] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Radio Button+  description: A button that can play music, but usually just plays ads.+  modifiers:+  markup:+    <!-- NO LABEL -->+    <label class="topcoat-radio-button">+      <input type="radio" name="topcoat">+      <div class="topcoat-radio-button__checkmark"></div>+    </label>+    <br>+    <br>+    <!-- LEFT LABEL -->+    <label class="topcoat-radio-button">+      Left label+      <input type="radio" name="topcoat">+      <div class="topcoat-radio-button__checkmark"></div>+    </label>+    <br>+    <br>+    <!-- RIGHT LABEL -->+    <label class="topcoat-radio-button">+      <input type="radio" name="topcoat">+      <div class="topcoat-radio-button__checkmark"></div>+      Right label+    </label>+    <br>+    <br>+    <!-- DISABLED -->+    <label class="topcoat-radio-button">+      <input type="radio" name="topcoat" Disabled>+      <div class="topcoat-radio-button__checkmark"></div>+      Disabled+    </label>+  examples:+    Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj+  tags:+    - desktop+    - light+    - mobile+    - Radio+*/++input[type="radio"] {+  height: 1.2rem;+  width: 1.2rem;+  margin-top: 0;+  margin-right: -1.2rem;+  margin-bottom: -1.2rem;+  margin-left: 0;+}++input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {+  opacity: 1;+}++.topcoat-radio-button {+  color: #f3f3f3;+  color: #3a3d40;+  line-height: 1.2rem;+  text-align: left;+}++.topcoat-radio-button__checkmark:before {+  width: 1.2rem;+  height: 1.2rem;+  background: var-background-color;+  background: transparent;+  border: 1px solid #09c;+  border: 1px solid #535353;+  box-shadow: none;+}++.topcoat-radio-button__checkmark {+  position: relative;+  width: 1.2rem;+  height: 1.2rem;+}++.topcoat-radio-button__checkmark:after {+  opacity: 0;+  width: 0.6rem;+  height: 0.6rem;+  background: #09c;+  border: 1px solid #09c;+  box-shadow: 0 1px rgba(255,255,255,0.5);+  -webkit-transform: none;+  -ms-transform: none;+  transform: none;+  top: 0.25rem;+  left: 0.25rem;+}++input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {+  border: none;+  border: 1px solid #535353;+  box-shadow: none, none;+}++input[type="radio"]:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #09c;+  border: 1px solid #09c;+  background-color: #09c;+  background-color: transparent;+  box-shadow: none;+}++input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #09c;+  background: var-background-color;+  box-shadow: none;+}++/*+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.+*/++/*+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.+*/++.range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++.range__thumb {+  cursor: pointer;+}++.range__thumb--webkit {+  cursor: pointer;+  -webkit-appearance: none;+}++.range:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/*+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.+*/++/*+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.+*/++.range,+.topcoat-range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Range+  description: Range input+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <input type="range" class="topcoat-range">+    <input type="range" class="topcoat-range" disabled>+  examples:+    mobile range: http://codepen.io/Topcoat/pen/BskEn+  tags:+    - desktop+    - mobile+    - range+*/++.topcoat-range {+  border-radius: 4px;+  border: 1px solid #09c;+  border: none;+  background-color: var-background-color--input;+  background-color: #09c;+  height: 0.15rem;+  border-radius: 0;+  border-radius: 3px;+}++.topcoat-range::-moz-range-track {+  border-radius: 4px;+  border: 1px solid #09c;+  background-color: var-background-color--input;+  background-color: #09c;+  height: 0.15rem;+  border-radius: 0;+  border-radius: var-border-radius--none;+}++.topcoat-range::-webkit-slider-thumb {+  height: 2rem;+  height: 1.5rem;+  width: 1.5rem;+  background-color: var-background-color;+  background-color: rgba(0,153,204,0.8);+  border: 1px solid #09c;+  border: 0px solid #3a3d40;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range::-moz-range-thumb {+  height: 2rem;+  width: 1.5rem;+  background-color: var-background-color;+  border: 1px solid #09c;+  border: 0px solid #3a3d40;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range:focus::-webkit-slider-thumb {+  border: none;+  border: var-border--range__thumb--focus;+  box-shadow: none;+}++.topcoat-range:focus::-moz-range-thumb {+  border: none;+  border: var-border--range__thumb--focus;+  box-shadow: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.search-input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++input[type="search"]::-webkit-search-cancel-button {+  -webkit-appearance: none;+}++.search-input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.search-input,+.topcoat-search-input,+.topcoat-search-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Search Input+  description: A text input designed for searching.+  modifiers:+    :disabled: Disabled state+  markup:+    <input type="search" value="" placeholder="search" class="topcoat-search-input">+    <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>+  tags:+    - desktop+    - light+    - mobile+    - text+    - input+    - search+    - form+*/++.topcoat-search-input,+.topcoat-search-input--large {+  line-height: 2rem;+  height: 2rem;+  font-size: 16px;+  border: 1px solid #09c;+  border: 1px solid #535353;+  background-color: #050607;+  background-color: #050607;+  box-shadow: var-box-shadow--text-input;+  color: #f3f3f3;+  color: #c0c0c0;+  padding: 0 0 0 2.2rem;+  border-radius: 0;+  border-radius: 4px;+  background-image: url("../img/search.svg");+  background-position: 1rem center;+  background-position: var-background-position--search-input;+  background-repeat: no-repeat;+  background-size: 16px;+}++.topcoat-search-input:focus,+.topcoat-search-input--large:focus {+  background-color: #050607;+  background-color: #050607;+  color: #000;+  color: #f3f3f3;+  border: none;+  border: 1px solid #535353;+  box-shadow: var-box-shadow--text-input, none;+}++.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;+  margin-right: var-margin-right--search-decoration;+}++.topcoat-search-input:focus::-webkit-input-placeholder,+.topcoat-search-input:focus::-webkit-input-placeholder {+  color: #f3f3f3;+}++.topcoat-search-input:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-search-input:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-search-input:disabled:-ms-input-placeholder {+  color: #000;+}++/* topdoc+  name: Large Search Input+  description: A large text input designed for searching.+  modifiers:+    :disabled: Disabled state+  markup:+    <input type="search" value="" placeholder="search" class="topcoat-search-input--large">+    <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>+  tags:+    - desktop+    - light+    - mobile+    - text+    - input+    - search+    - form+    - large+*/++.topcoat-search-input--large {+  line-height: 3.375rem;+  height: 3.375rem;+  font-size: 1.3rem;+  font-weight: 200;+  padding: 0 0 0 2.9rem;+  border-radius: 40px;+  border-radius: 4px;+  background-position: 1.2rem center;+  background-size: 1.3rem;+}++.topcoat-search-input--large:disabled {+  color: #000;+}++.topcoat-search-input--large:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-search-input--large:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-search-input--large:disabled:-ms-input-placeholder {+  color: #000;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Switch+  description: Default skin for Topcoat switch+  modifiers:+    :focus: Focus state+    :disabled: Disabled state+  markup:+    <label class="topcoat-switch">+      <input type="checkbox" class="topcoat-switch__input">+      <div class="topcoat-switch__toggle"></div>+    </label>+    <br>+    <br>+    <label class="topcoat-switch">+      <input type="checkbox" class="topcoat-switch__input" checked>+      <div class="topcoat-switch__toggle"></div>+    </label>+    <br>+    <br>+    <label class="topcoat-switch">+      <input type="checkbox" class="topcoat-switch__input" disabled>+      <div class="topcoat-switch__toggle"></div>+    </label>+  examples:+    mobile switch: http://codepen.io/Topcoat/pen/upxds+  tags:+    - desktop+    - light+    - mobile+    - switch+*/++.topcoat-switch {+  font-size: 16px;+  padding: 0 1.25rem;+  border-radius: 4px;+  border-radius: 0;+  border: 1px solid #09c;+  border: none;+  overflow: hidden;+  width: 4rem;+  height: 1rem;+}++.topcoat-switch__toggle:before,+.topcoat-switch__toggle:after {+  top: -1px;+  width: 4rem;+  border: var-border--switch__label;+  margin: 0rem 0 0 0;+}++.topcoat-switch__toggle:before {+  content: '';+  color: #39372e;+  background-color: #3a3d40;+  right: -0.08rem;+  padding-left: 1.5rem;+  height: 1rem;+  top: -0.05rem;+  border-radius: 0;+}++.topcoat-switch__toggle {+  line-height: 2rem;+  line-height: 2rem;+  height: 2rem;+  height: 0.9rem;+  width: 1.9rem;+  border-radius: 4px;+  border-radius: 0;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  background-color: var-background-color;+  background-color: #535353;+  border: 1px solid #09c;+  border: 0px solid #3a3d40;+  margin-left: -1.2rem;+  margin-bottom: 0;+  margin-top: 0.05rem;+  box-shadow: none;+  -webkit-transition: margin-left 0.05s ease-in-out;+  transition: margin-left 0.05s ease-in-out;+}++.topcoat-switch__toggle:after {+  content: '';+  background-color: #3a3d40;+  left: -0.06rem;+  padding-left: 2rem;+  height: 1rem;+  top: -0.05rem;+  border-radius: 0;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle {+  margin-left: 0.8rem;+  background-color: #0983ac;+}++.topcoat-switch__input:active + .topcoat-switch__toggle {+  border: 1px solid #09c;+  box-shadow: none;+}++.topcoat-switch__input:focus + .topcoat-switch__toggle {+  border: none;+  border: var-border--switch__toggle--focus;+  box-shadow: none;+}++.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,+.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {+  background: transparent;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}++/**+*+* 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.+*+*/++/**+*+* 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-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: 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-tab-bar__button:disabled {+  opacity: 0.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Tab Bar+  description: Component of tab buttons+  modifiers:+    :disabled: Disabled state+  markup:+    <div class="topcoat-tab-bar">+      <label class="topcoat-tab-bar__item">+        <input type="radio" name="tab-bar">+        <button class="topcoat-tab-bar__button">One</button>+      </label>+      <label class="topcoat-tab-bar__item">+        <input type="radio" name="tab-bar">+        <button class="topcoat-tab-bar__button">Two</button>+      </label>+      <label class="topcoat-tab-bar__item">+        <input type="radio" name="tab-bar">+        <button class="topcoat-tab-bar__button">Three</button>+      </label>+    </div>+  examples:+    mobile tab bar: http://codepen.io/Topcoat/pen/rJICF+  tags:+    - desktop+    - light+    - dark+    - mobile+    - tab+    - group+    - bar+*/++.topcoat-tab-bar {+  height: 49px;+  background-color: #222;+  border-top: 3px solid #3a3d40;+}++.topcoat-tab-bar__button {+  padding: 0 1.25rem;+  height: 2rem;+  height: 49px;+  line-height: 2rem;+  line-height: 49px;+  letter-spacing: 1px;+  color: #f3f3f3;+  color: #c0c0c0;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border-top: 1px solid #09c;+  border-top: none;+}++.topcoat-tab-bar__button:active,+.topcoat-tab-bar__button--large:active,+:checked + .topcoat-tab-bar__button {+  color: #f3f3f3;+  background-color: #555;+  box-shadow: none;+  border-top: 3px solid #09c;+}++.topcoat-tab-bar__button:focus,+.topcoat-tab-bar__button--large:focus {+  z-index: 1;+  border-top: var-border-top--tab-bar--focus;+  box-shadow: none, none;+  box-shadow: none;+  outline: 0;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.input,+.topcoat-text-input,+.topcoat-text-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled,+.topcoat-text-input:disabled,+.topcoat-text-input--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Text input+  description: Topdoc text input+  modifiers:+    :disabled: Disabled state+    :focus: Focused+    :invalid: Hover state+  markup:+    <input type="text" class="topcoat-text-input" placeholder="text" value="">+    <br>+    <br>+    <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>+    <br>+    <br>+    <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">+  tags:+    - desktop+    - mobile+    - text+    - input+*/++.topcoat-text-input,+.topcoat-text-input--large {+  line-height: 2rem;+  font-size: 16px;+  letter-spacing: 1px;+  padding: 0 1.25rem;+  border: 1px solid #09c;+  border: 1px solid #3a3d40;+  border-radius: 4px;+  background-color: #050607;+  box-shadow: var-box-shadow--text-input;+  color: #f3f3f3;+  color: #c0c0c0;+  vertical-align: top;+}++.topcoat-text-input:focus,+.topcoat-text-input--large:focus {+  background-color: #050607;+  color: #000;+  color: #f3f3f3;+  border: none;+  border: 1px solid #3a3d40;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-text-input:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-text-input:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-text-input:disabled:-ms-input-placeholder {+  color: #000;+}++.topcoat-text-input:invalid {+  border: 1px solid #f00;+  color: #f00;+}++/* topdoc+  name: Large Text Input+  description: A bigger input, still for text.+  modifiers:+    :disabled: Disabled state+    :focus: Focused+    :invalid: Hover state+  markup:+    <input type="text" class="topcoat-text-input--large" value="" placeholder="text">+    <br>+    <br>+    <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>+    <br>+    <br>+    <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">+  tags:+    - desktop+    - light+    - mobile+    - form+    - input+    - large+*/++.topcoat-text-input--large {+  line-height: 3.375rem;+  font-size: 1.3rem;+}++.topcoat-text-input--large:disabled {+  color: #000;+}++.topcoat-text-input--large:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-text-input--large:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-text-input--large:disabled:-ms-input-placeholder {+  color: #000;+}++.topcoat-text-input--large:invalid {+  border: 1px solid #f00;+  color: #f00;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled,+.topcoat-textarea:disabled,+.topcoat-textarea--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Textarea+  description: A whole area, just for text.+  modifiers:+    :disabled: Disabled state+  markup:+    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>+    <br>+    <br>+    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>+  tags:+    - desktop+    - light+    - mobile+    - form+    - input+    - textarea+*/++.topcoat-textarea,+.topcoat-textarea--large {+  padding: 2rem;+  font-size: 2.5rem;+  font-weight: 200;+  border-radius: 4px;+  line-height: 2rem;+  border: 1px solid #09c;+  border: 1px solid #3a3d40;+  background-color: #050607;+  box-shadow: var-box-shadow--text-input;+  color: #f3f3f3;+  color: #c0c0c0;+  letter-spacing: 1px;+}++.topcoat-textarea:focus,+.topcoat-textarea--large:focus {+  background-color: #050607;+  color: #000;+  color: #f3f3f3;+  border: none;+  border: 1px solid #3a3d40;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-textarea:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-textarea:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-textarea:disabled:-ms-input-placeholder {+  color: #000;+}++/* topdoc+  name: Large Textarea+  description: A whole area, just for text; now available in large.+  modifiers:+    :disabled: Disabled state+  markup:+    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>+    <br>+    <br>+    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>+  tags:+    - desktop+    - light+    - mobile+    - form+    - input+    - textarea+*/++.topcoat-textarea--large {+  font-size: 3rem;+  line-height: 3.375rem;+}++.topcoat-textarea--large:disabled {+  color: #000;+}++.topcoat-textarea--large:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-textarea--large:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-textarea--large:disabled:-ms-input-placeholder {+  color: #000;+}++@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: #050607;+  color: #000;+  color: #f3f3f3;+  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: 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;+}++/* This file should include color and image variables corresponding to the dark theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Icon Button */++/* Tab bar */++/* Switch */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Textarea */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the light theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Secondary colors (based on colors above)++Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!++*/++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Icon Button */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Containers */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* Containers */++/* Button */++/* Bar Button */++/* Button Quiet*/++/* Icon Button */++/* Navigation bar */++/* List */++/* Notification */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* Tab-bar */++/* Call To Action */++/* Text Input */++/* Radio input */++/* Overlay */++/* Textarea */++/* Progress bar container */++/* Progress bar progress */++/* Switch */++/* Notification */++/* Search */\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-android4_4.min.css b/topcoat/css/topcoat-mobile-onsen-android4_4.min.cssnew file mode 100644index 0000000..5668ceb--- /dev/null+++ b/topcoat/css/topcoat-mobile-onsen-android4_4.min.css@@ -0,0 +1 @@+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#f3f3f3;color:#f3f3f3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#535353;box-shadow:none;border:1px solid #09c;border:0;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:var-background-color--hover;background-color:#535353;color:#f3f3f3}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#09c;background-color:#868686;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:silver;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #09c;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#f3f3f3;color:#f3f3f3;text-shadow:0 1px none;background-color:#09c;background-color:transparent;border:1px solid #09c;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:silver;background:transparent;border:1px solid transparent;box-shadow:none;color:silver}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#535353;box-shadow:none;color:#f3f3f3;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#535353}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:#fff;background-color:#868686;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #f3f3f3;border:3px solid #f3f3f3}.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{margin:var-button-bar-margin;border:0 solid #535353}.topcoat-button-bar__item{border-top:1px solid #535353;border-bottom:1px solid #535353}.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-left:1px solid #535353;border-right:0;border-right:1px solid #535353}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:1px solid #535353}.topcoat-button-bar__button{border-radius:inherit;background-color:#000;color:var-color--button-bar--button;border:0 solid #535353;border-right:1px solid #535353}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#3cf!important;color:#303942;border:0 solid #535353;border-right:1px solid #535353;border-right:1px solid #535353}.topcoat-button-bar__button:hover{background-color:#09c;color:#050607}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #535353}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#000;color:var-color--button-bar--button;border:0 solid #535353;border-right:1px solid #535353}.topcoat-button-bar__button--large:hover{background-color:#09c;color:#050607}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#f3f3f3;color:#f3f3f3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#535353;box-shadow:none;border:1px solid #09c;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#535353;color:#f3f3f3}.topcoat-button:active,.topcoat-button--large:active{background-color:#09c;background-color:#868686;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:silver;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #09c;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#f3f3f3;color:#f3f3f3;text-shadow:0 1px none;background-color:#09c;background-color:transparent;border:1px solid #09c;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:silver;background:transparent;border:1px solid transparent;box-shadow:none;color:silver}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#535353;box-shadow:none;color:#f3f3f3;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#535353}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:#fff;background-color:#868686;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #f3f3f3;border:3px solid #f3f3f3}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:1.1rem}input[type=checkbox]{height:1.1rem;width:1.1rem;margin-top:0;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:1.1rem}.topcoat-checkbox__checkmark:before{width:1.1rem;height:1.1rem;background:var-background-color;background:transparent;border:1px solid #09c;border:1px solid #535353;border-radius:none;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:1.1rem;height:1.1rem}.topcoat-checkbox__checkmark:after{top:-.08rem;left:.15rem;opacity:0;width:.85rem;height:6px;background:transparent;border:.01rem solid #09c;border-width:4px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #535353;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #09c;border:1px solid #535353;background-color:#09c;background-color:transparent;border:1px solid #535353;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #09c;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#f3f3f3;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#050607;box-shadow:none;border:1px solid #09c;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#09c;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:transparent;border:0;color:#09c}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #09c;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#f3f3f3;color:#3cf;text-shadow:0 1px none;background-color:#09c;background-color:transparent;border:1px solid #09c;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#09c;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#050607}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#050607;color:#f3f3f3;text-shadow:none;border-top:0;border-bottom:2px solid #3a3d40}.topcoat-list__container{border-top:0;color:#f3f3f3;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #3a3d40;color:#f3f3f3;background-color:#050607}.topcoat-list__item_active:active{background-color:#bdbec2}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:0}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#222;color:#f3f3f3;box-shadow:none;border-bottom:1px solid #3a3d40}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#222}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#f3f3f3}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#050607}.page{background-color:#050607}.topcoat-page__bg{background-color:#050607}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.2rem;width:1.2rem;margin-top:0;margin-right:-1.2rem;margin-bottom:-1.2rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#f3f3f3;color:#3a3d40;line-height:1.2rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.2rem;height:1.2rem;background:var-background-color;background:transparent;border:1px solid #09c;border:1px solid #535353;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.2rem;height:1.2rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.6rem;height:.6rem;background:#09c;border:1px solid #09c;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:.25rem;left:.25rem}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #535353;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #09c;border:1px solid #09c;background-color:#09c;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #09c;background:var-background-color;box-shadow:none}.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 #09c;border:0;background-color:var-background-color--input;background-color:#09c;height:.15rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #09c;background-color:var-background-color--input;background-color:#09c;height:.15rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1.5rem;width:1.5rem;background-color:var-background-color;background-color:rgba(0,153,204,.8);border:1px solid #09c;border:0 solid #3a3d40;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1.5rem;background-color:var-background-color;border:1px solid #09c;border:0 solid #3a3d40;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:var-border--range__thumb--focus;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:var-border--range__thumb--focus;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #09c;border:1px solid #535353;background-color:#050607;background-color:#050607;box-shadow:var-box-shadow--text-input;color:#f3f3f3;color:silver;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#050607;background-color:#050607;color:#000;color:#f3f3f3;border:0;border:1px solid #535353;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#f3f3f3}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:0;border:1px solid #09c;border:0;overflow:hidden;width:4rem;height:1rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:0rem 0 0}.topcoat-switch__toggle:before{content:'';color:#39372e;background-color:#3a3d40;right:-.08rem;padding-left:1.5rem;height:1rem;top:-.05rem;border-radius:0}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:.9rem;width:1.9rem;border-radius:4px;border-radius:0;color:#f3f3f3;text-shadow:0 1px none;background-color:var-background-color;background-color:#535353;border:1px solid #09c;border:0 solid #3a3d40;margin-left:-1.2rem;margin-bottom:0;margin-top:.05rem;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#3a3d40;left:-.06rem;padding-left:2rem;height:1rem;top:-.05rem;border-radius:0}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.8rem;background-color:#0983ac}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #09c;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:var-border--switch__toggle--focus;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:49px;background-color:#222;border-top:3px solid #3a3d40}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:49px;line-height:2rem;line-height:49px;letter-spacing:1px;color:#f3f3f3;color:silver;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #09c;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#f3f3f3;background-color:#555;box-shadow:none;border-top:3px solid #09c}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #09c;border:1px solid #3a3d40;border-radius:4px;background-color:#050607;box-shadow:var-box-shadow--text-input;color:#f3f3f3;color:silver;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#050607;color:#000;color:#f3f3f3;border:0;border:1px solid #3a3d40;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #09c;border:1px solid #3a3d40;background-color:#050607;box-shadow:var-box-shadow--text-input;color:#f3f3f3;color:silver;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#050607;color:#000;color:#f3f3f3;border:0;border:1px solid #3a3d40;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#050607;color:#000;color:#f3f3f3;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-blue.css b/topcoat/css/topcoat-mobile-onsen-blue.cssindex cc8c275..453ed87 100644--- a/topcoat/css/topcoat-mobile-onsen-blue.css+++ b/topcoat/css/topcoat-mobile-onsen-blue.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: var-background-color--hover;   background-color: #2ec9d7;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: #25b5c2;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #25b5c2;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #25b5c2; }@@ -398,15 +420,20 @@   background-color: #f5f0e8 !important;   color: #25b5c2;   border: none;+  border-right: 1px solid #25b5c2;+  border-right: 1px solid #25b5c2; }  .topcoat-button-bar__button:hover {   background-color: #2ec9d7;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #25b5c2; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #2ec9d7;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #2ec9d7;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: #25b5c2;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #25b5c2;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #25b5c2;   box-shadow: none, none; } @@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,6 +1361,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1316,6 +1372,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #25b5c2;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1328,6 +1385,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #25b5c2;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #b6dedd; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #25b5c2;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -2094,10 +2173,18 @@ limitations under the License.     - checkbox */ +body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #25b5c2;   box-shadow: none, none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: #e7e3e0;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #25b5c2;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-onsen-blue.min.css b/topcoat/css/topcoat-mobile-onsen-blue.min.cssindex aaf42d5..075874d 100644--- a/topcoat/css/topcoat-mobile-onsen-blue.min.css+++ b/topcoat/css/topcoat-mobile-onsen-blue.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#25b5c2;box-shadow:none;border:1px solid #25b5c2;border:0;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:var-background-color--hover;background-color:#2ec9d7}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#25b5c2;background-color:#55d3df;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:#25b5c2;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #25b5c2;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#55d3df;text-shadow:0 1px none;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#25b5c2;background:transparent;border:1px solid transparent;box-shadow:none;color:#25b5c2}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.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;border-right:1px solid #25b5c2}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#21a1ad;color:var-color--button-bar--button;border:0;border-right:1px solid #25b5c2}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#25b5c2;border:0}.topcoat-button-bar__button:hover{background-color:#2ec9d7}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#21a1ad;color:var-color--button-bar--button;border:0;border-right:1px solid #25b5c2}.topcoat-button-bar__button--large:hover{background-color:#2ec9d7}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#25b5c2;box-shadow:none;border:1px solid #25b5c2;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#2ec9d7}.topcoat-button:active,.topcoat-button--large:active{background-color:#25b5c2;background-color:#55d3df;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:#25b5c2;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #25b5c2;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#55d3df;text-shadow:0 1px none;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#25b5c2;background:transparent;border:1px solid transparent;box-shadow:none;color:#25b5c2}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #25b5c2;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #25b5c2;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #25b5c2;border:1px solid #25b5c2;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #25b5c2;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #25b5c2;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover}.topcoat-icon-button:active{background-color:#25b5c2;box-shadow:none}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #25b5c2;border:0;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;border:0;box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#25b5c2;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item:active{background-color:#b6dedd}.topcoat-list__item:first-child{border-top:0}.topcoat-list__item:last-child{border-bottom:1px solid #b3b3b3}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#25b5c2;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}.page{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #25b5c2;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#25b5c2;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #25b5c2;border:1px solid #25b5c2;background-color:#25b5c2;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #25b5c2;background:var-background-color;box-shadow:none}.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 #25b5c2;border:0;background-color:var-background-color--input;background-color:#25b5c2;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #25b5c2;background-color:var-background-color--input;background-color:#25b5c2;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #25b5c2;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #25b5c2;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #25b5c2;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:#e7e3e0;color:#000;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #25b5c2;border:0;overflow:hidden;width:4rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#25b5c2;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #25b5c2;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #25b5c2;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #25b5c2;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#25b5c2;background-color:transparent;box-shadow:none}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #25b5c2;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #25b5c2;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#25b5c2;box-shadow:none;border:1px solid #25b5c2;border:0;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:var-background-color--hover;background-color:#2ec9d7;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#25b5c2;background-color:#55d3df;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#25b5c2;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #25b5c2;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#55d3df;text-shadow:0 1px none;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#25b5c2;background:transparent;border:1px solid transparent;box-shadow:none;color:#25b5c2}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.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-left:var-border-left--button-bar__button__first;border-right:0;border-right:1px solid #25b5c2}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#21a1ad;color:var-color--button-bar--button;border:0;border-right:1px solid #25b5c2}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#25b5c2;border:0;border-right:1px solid #25b5c2;border-right:1px solid #25b5c2}.topcoat-button-bar__button:hover{background-color:#2ec9d7;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #25b5c2}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#21a1ad;color:var-color--button-bar--button;border:0;border-right:1px solid #25b5c2}.topcoat-button-bar__button--large:hover{background-color:#2ec9d7;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#25b5c2;box-shadow:none;border:1px solid #25b5c2;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#2ec9d7;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#25b5c2;background-color:#55d3df;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#25b5c2;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #25b5c2;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#55d3df;text-shadow:0 1px none;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#25b5c2;background:transparent;border:1px solid transparent;box-shadow:none;color:#25b5c2}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #25b5c2;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #25b5c2;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #25b5c2;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #25b5c2;border:1px solid #25b5c2;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #25b5c2;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #25b5c2;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#25b5c2;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:var-background-color__icon-button--quiet;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #25b5c2;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#25b5c2;background-color:transparent;border:1px solid #25b5c2;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#25b5c2;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item_active:active{background-color:#b6dedd}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:1px solid #b3b3b3}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#25b5c2;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#25b5c2}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#f5f0e8}.page{background-color:#f5f0e8}.topcoat-page__bg{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #25b5c2;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#25b5c2;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #25b5c2;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #25b5c2;border:1px solid #25b5c2;background-color:#25b5c2;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #25b5c2;background:var-background-color;box-shadow:none}.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 #25b5c2;border:0;background-color:var-background-color--input;background-color:#25b5c2;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #25b5c2;background-color:var-background-color--input;background-color:#25b5c2;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #25b5c2;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #25b5c2;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #25b5c2;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:#e7e3e0;color:#000;color:var-color--search-input--focus;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #25b5c2;border:0;overflow:hidden;width:4rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#25b5c2;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #25b5c2;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #25b5c2;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #b3b3b3;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #25b5c2;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#25b5c2;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #25b5c2;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;color:var-color--text-input--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #25b5c2;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;color:var-color--textarea--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-green.css b/topcoat/css/topcoat-mobile-onsen-green.cssindex b085fd7..695f9c6 100644--- a/topcoat/css/topcoat-mobile-onsen-green.css+++ b/topcoat/css/topcoat-mobile-onsen-green.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: var-background-color--hover;   background-color: #7ecf35;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: #6fba2c;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #6fba2c;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #6fba2c; }@@ -398,15 +420,20 @@   background-color: #f5f0e8 !important;   color: #6fba2c;   border: none;+  border-right: 1px solid #6fba2c;+  border-right: 1px solid #6fba2c; }  .topcoat-button-bar__button:hover {   background-color: #7ecf35;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #6fba2c; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #7ecf35;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #7ecf35;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: #6fba2c;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #6fba2c;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #6fba2c;   box-shadow: none, none; } @@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,6 +1361,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1316,6 +1372,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #6fba2c;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1328,6 +1385,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #6fba2c;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #cde0af; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #6fba2c;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -2094,10 +2173,18 @@ limitations under the License.     - checkbox */ +body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #6fba2c;   box-shadow: none, none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #6fba2c;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-onsen-green.min.css b/topcoat/css/topcoat-mobile-onsen-green.min.cssindex 57351e2..c596bf3 100644--- a/topcoat/css/topcoat-mobile-onsen-green.min.css+++ b/topcoat/css/topcoat-mobile-onsen-green.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#6fba2c;box-shadow:none;border:1px solid #6fba2c;border:0;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:var-background-color--hover;background-color:#7ecf35}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#6fba2c;background-color:#96d85a;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:#6fba2c;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #6fba2c;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#96d85a;text-shadow:0 1px none;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#6fba2c;background:transparent;border:1px solid transparent;box-shadow:none;color:#6fba2c}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.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;border-right:1px solid #6fba2c}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#63a527;color:var-color--button-bar--button;border:0;border-right:1px solid #6fba2c}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#6fba2c;border:0}.topcoat-button-bar__button:hover{background-color:#7ecf35}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#63a527;color:var-color--button-bar--button;border:0;border-right:1px solid #6fba2c}.topcoat-button-bar__button--large:hover{background-color:#7ecf35}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#6fba2c;box-shadow:none;border:1px solid #6fba2c;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#7ecf35}.topcoat-button:active,.topcoat-button--large:active{background-color:#6fba2c;background-color:#96d85a;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:#6fba2c;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #6fba2c;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#96d85a;text-shadow:0 1px none;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#6fba2c;background:transparent;border:1px solid transparent;box-shadow:none;color:#6fba2c}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #6fba2c;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #6fba2c;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #6fba2c;border:1px solid #6fba2c;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #6fba2c;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #6fba2c;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover}.topcoat-icon-button:active{background-color:#6fba2c;box-shadow:none}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #6fba2c;border:0;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;border:0;box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#6fba2c;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item:active{background-color:#cde0af}.topcoat-list__item:first-child{border-top:0}.topcoat-list__item:last-child{border-bottom:1px solid #b3b3b3}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#6fba2c;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}.page{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #6fba2c;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#6fba2c;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #6fba2c;border:1px solid #6fba2c;background-color:#6fba2c;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #6fba2c;background:var-background-color;box-shadow:none}.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 #6fba2c;border:0;background-color:var-background-color--input;background-color:#6fba2c;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #6fba2c;background-color:var-background-color--input;background-color:#6fba2c;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #6fba2c;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #6fba2c;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #6fba2c;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #6fba2c;border:0;overflow:hidden;width:4rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#6fba2c;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #6fba2c;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #6fba2c;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #6fba2c;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#6fba2c;background-color:transparent;box-shadow:none}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #6fba2c;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #6fba2c;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#6fba2c;box-shadow:none;border:1px solid #6fba2c;border:0;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:var-background-color--hover;background-color:#7ecf35;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#6fba2c;background-color:#96d85a;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#6fba2c;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #6fba2c;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#96d85a;text-shadow:0 1px none;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#6fba2c;background:transparent;border:1px solid transparent;box-shadow:none;color:#6fba2c}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.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-left:var-border-left--button-bar__button__first;border-right:0;border-right:1px solid #6fba2c}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#63a527;color:var-color--button-bar--button;border:0;border-right:1px solid #6fba2c}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#6fba2c;border:0;border-right:1px solid #6fba2c;border-right:1px solid #6fba2c}.topcoat-button-bar__button:hover{background-color:#7ecf35;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #6fba2c}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#63a527;color:var-color--button-bar--button;border:0;border-right:1px solid #6fba2c}.topcoat-button-bar__button--large:hover{background-color:#7ecf35;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#6fba2c;box-shadow:none;border:1px solid #6fba2c;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#7ecf35;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#6fba2c;background-color:#96d85a;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#6fba2c;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #6fba2c;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#96d85a;text-shadow:0 1px none;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#6fba2c;background:transparent;border:1px solid transparent;box-shadow:none;color:#6fba2c}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #6fba2c;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #6fba2c;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #6fba2c;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #6fba2c;border:1px solid #6fba2c;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #6fba2c;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #6fba2c;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#6fba2c;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:var-background-color__icon-button--quiet;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #6fba2c;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#6fba2c;background-color:transparent;border:1px solid #6fba2c;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#6fba2c;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item_active:active{background-color:#cde0af}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:1px solid #b3b3b3}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#6fba2c;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#6fba2c}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#f5f0e8}.page{background-color:#f5f0e8}.topcoat-page__bg{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #6fba2c;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#6fba2c;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #6fba2c;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #6fba2c;border:1px solid #6fba2c;background-color:#6fba2c;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #6fba2c;background:var-background-color;box-shadow:none}.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 #6fba2c;border:0;background-color:var-background-color--input;background-color:#6fba2c;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #6fba2c;background-color:var-background-color--input;background-color:#6fba2c;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #6fba2c;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #6fba2c;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #6fba2c;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;color:var-color--search-input--focus;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #6fba2c;border:0;overflow:hidden;width:4rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#6fba2c;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #6fba2c;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #6fba2c;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #b3b3b3;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #6fba2c;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#6fba2c;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #6fba2c;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;color:var-color--text-input--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #6fba2c;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;color:var-color--textarea--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-ios7.css b/topcoat/css/topcoat-mobile-onsen-ios7.cssnew file mode 100644index 0000000..2fa2527--- /dev/null+++ b/topcoat/css/topcoat-mobile-onsen-ios7.css@@ -0,0 +1,4531 @@+/**+*+* 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-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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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 1.25rem;+  font-size: 16px;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #c6c8c8;+  color: #157dfb;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border: 1px solid #157dfb;+  border: none;+  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: var-background-color--hover;+  background-color: transparent;+  color: #157dfb;+}++.topcoat-button:active,+.topcoat-button--large:active,+.topcoat-button-bar__button:active,+.topcoat-button-bar__button--large:active,+:checked + .topcoat-button-bar__button {+  background-color: #157dfb;+  background-color: transparent;+  box-shadow: none;+  color: #79b5fd;+}++.topcoat-button:focus,+.topcoat-button--quiet:focus,+.topcoat-button--large:focus,+.topcoat-button--large--quiet:focus,+.topcoat-button--cta:focus,+.topcoat-button--large--cta:focus,+.topcoat-button-bar__button:focus,+.topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;+  outline: 0;+}++.topcoat-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background: var-quiet-button-background;+  color: #157dfb;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none;+}++.topcoat-button--quiet:hover,+.topcoat-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #157dfb;+  border: none;+  background-color: transparent;+  box-shadow: none;+  background-color: transparent;+}++.topcoat-button--quiet:active,+.topcoat-button--large--quiet:active {+  color: #c6c8c8;+  color: #79b5fd;+  text-shadow: 0 1px none;+  background-color: #157dfb;+  background-color: transparent;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+}++.topcoat-button--large,+.topcoat-button--large--quiet,+.topcoat-button-bar__button--large {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button--large--quiet {+  color: #157dfb;+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  color: #157dfb;+}++.topcoat-button--large--quiet:active {+  color: var-color--quiet-active;+}++.topcoat-button--cta,+.topcoat-button--large--cta {+  border: none;+  background-color: transparent;+  box-shadow: none;+  color: #157dfb;+  font-weight: 500;+  text-shadow: none;+}++.topcoat-button--cta:hover,+.topcoat-button--large--cta:hover {+  background-color: transparent;+}++.topcoat-button--cta:active,+.topcoat-button--large--cta:active {+  color: #79b5fd;+  background-color: transparent;+  box-shadow: none;+}++.topcoat-button--large--cta {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #157dfb;+}++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Button Bar+  description: Component of grouped buttons+  modifiers:+    :disabled: Disabled state+  markup:+    <div class="topcoat-button-bar">+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button">One</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button">Two</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button">Three</button>+      </div>+    </div>+  examples:+    mobile button bar: http://codepen.io/Topcoat/pen/kdKyg+  tags:+    - desktop+    - light+    - dark+    - mobile+    - button+    - group+    - bar+*/++.topcoat-button-bar {+  margin: var-button-bar-margin;+  border: 0px solid #157dfb;+}++.topcoat-button-bar__item {+  border-top: 1px solid #157dfb;+  border-bottom: 1px solid #157dfb;+}++.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-left: 1px solid #157dfb;+  border-right: none;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,+.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {+  border-left: none;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button {+  border-radius: inherit;+  background-color: #f2f2f2;+  color: #157dfb;+  border: 0px solid #157dfb;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button:active,+.topcoat-button-bar__button--large:active,+:checked + .topcoat-button-bar__button {+  background-color: #b5d6fe !important;+  color: #fff;+  border: 0px solid #157dfb;+  border-right: 1px solid #157dfb;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button:hover {+  background-color: #157dfb;+  color: #fff;+}++.topcoat-button-bar__button:focus,+.topcoat-button-bar__button--large:focus {+  z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #157dfb;+}++/* topdoc+  name: Large Button Bar+  description: A button bar, only larger+  modifiers:+    :disabled: Disabled state+  markup:+    <div class="topcoat-button-bar">+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button--large">One</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button--large">Two</button>+      </div>+      <div class="topcoat-button-bar__item">+        <button class="topcoat-button-bar__button--large">Three</button>+      </div>+    </div>+  tags:+    - desktop+    - light+    - dark+    - mobile+    - button+    - group+    - bar+    - large+*/++.topcoat-button-bar__button--large {+  border-radius: inherit;+  background-color: #f2f2f2;+  color: #157dfb;+  border: 0px solid #157dfb;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button--large:hover {+  background-color: #157dfb;+  color: #fff;+}++/**+*+* 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Button+  description: A simple button+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button">Button</button>+    <button class="topcoat-button" disabled>Button</button>+  examples:+    mobile button: http://codepen.io/Topcoat/pen/DpKtf+  tags:+    - desktop+    - light+    - mobile+    - button+*/++.topcoat-button,+.topcoat-button--quiet,+.topcoat-button--large,+.topcoat-button--large--quiet,+.topcoat-button--cta,+.topcoat-button--large--cta {+  padding: 0 1.25rem;+  font-size: 16px;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #c6c8c8;+  color: #157dfb;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border: 1px solid #157dfb;+  border: none;+  border-radius: 4px;+}++.topcoat-button:hover,+.topcoat-button--quiet:hover,+.topcoat-button--large:hover,+.topcoat-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: transparent;+  color: #157dfb;+}++.topcoat-button:active,+.topcoat-button--large:active {+  background-color: #157dfb;+  background-color: transparent;+  box-shadow: none;+  color: #79b5fd;+}++.topcoat-button:focus,+.topcoat-button--quiet:focus,+.topcoat-button--large:focus,+.topcoat-button--large--quiet:focus,+.topcoat-button--cta:focus,+.topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;+  outline: 0;+}++/* topdoc+  name: Quiet Button+  description: A simple, yet quiet button+  modifiers:+    :active: Quiet button active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--quiet">Button</button>+    <button class="topcoat-button--quiet" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - quiet+*/++.topcoat-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background: var-quiet-button-background;+  color: #157dfb;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none;+}++.topcoat-button--quiet:hover,+.topcoat-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #157dfb;+  border: none;+  background-color: transparent;+  box-shadow: none;+  background-color: transparent;+}++.topcoat-button--quiet:active,+.topcoat-button--large--quiet:active {+  color: #c6c8c8;+  color: #79b5fd;+  text-shadow: 0 1px none;+  background-color: #157dfb;+  background-color: transparent;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+}++/* topdoc+  name: Large Button+  description: A big ol button+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--large" >Button</button>+    <button class="topcoat-button--large" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - large+*/++.topcoat-button--large,+.topcoat-button--large--quiet {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++/* topdoc+  name: Large Quiet Button+  description: A large, yet quiet button+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--large--quiet" >Button</button>+    <button class="topcoat-button--large--quiet" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - large+    - quiet+*/++.topcoat-button--large--quiet {+  color: #157dfb;+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  color: #157dfb;+}++.topcoat-button--large--quiet:active {+  color: var-color--quiet-active;+}++/* topdoc+  name: Call To Action Button+  description: A CALL TO ARMS, er, ACTION!+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--cta" >Button</button>+    <button class="topcoat-button--cta" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - call to action+*/++.topcoat-button--cta,+.topcoat-button--large--cta {+  border: none;+  background-color: transparent;+  box-shadow: none;+  color: #157dfb;+  font-weight: 500;+  text-shadow: none;+}++.topcoat-button--cta:hover,+.topcoat-button--large--cta:hover {+  background-color: transparent;+}++.topcoat-button--cta:active,+.topcoat-button--large--cta:active {+  color: #79b5fd;+  background-color: transparent;+  box-shadow: none;+}++/* topdoc+  name: Large Call To Action Button+  description: Like call to action, but bigger+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <button class="topcoat-button--large--cta" >Button</button>+    <button class="topcoat-button--large--cta" disabled>Button</button>+  tags:+    - desktop+    - light+    - mobile+    - button+    - large+    - call to action+*/++.topcoat-button--large--cta {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #157dfb;+}++/**+*+* 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.+*+*/++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;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++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: 1.5rem;+}++input[type="checkbox"] {+  height: 1.5rem;+  width: 1.5rem;+  margin-top: 0;+  margin-right: -1.5rem;+  margin-bottom: -1.5rem;+  margin-left: 0;+}++input[type="checkbox"]:checked {+  background: #157dfb;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: #157dfb;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {+  opacity: 1;+}++.topcoat-checkbox {+  line-height: 1.5rem;+}++.topcoat-checkbox__checkmark:before {+  width: 1.5rem;+  height: 1.5rem;+  background: var-background-color;+  background: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  border-radius: 1rem;+  box-shadow: none;+  left: 0;+}++.topcoat-checkbox__checkmark {+  width: 1.5rem;+  height: 1.5rem;+}++.topcoat-checkbox__checkmark:after {+  top: 5px;+  left: 3px;+  opacity: 0;+  width: 12px;+  height: 6px;+  background: transparent;+  border: 3px solid #fff;+  border-width: 4px;+  border-top: none;+  border-right: none;+  border-radius: 2px;+  -webkit-transform: rotate(-50deg);+  -ms-transform: rotate(-50deg);+  transform: rotate(-50deg);+}++input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {+  border: none;+  border: 1px solid #157dfb;+  box-shadow: none, none;+}++input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  background-color: #157dfb;+  background-color: #fff;+  border: 1px solid #157dfb;+  box-shadow: none;+}++input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #157dfb;+  background: var-background-color;+  box-shadow: none;+}++/**+*+* 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.+*+*/++/**+*+* 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-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.5rem;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #c6c8c8;+  text-shadow: 0 1px none;+  vertical-align: baseline;+  background-color: var-background-color;+  background-color: #fff;+  box-shadow: none;+  border: 1px solid #157dfb;+  border: none;+  border-radius: 4px;+  border-radius: 3px;+}++.topcoat-icon-button:hover,+.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large:hover,+.topcoat-icon-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover;+}++.topcoat-icon-button:active {+  background-color: #157dfb;+  box-shadow: none;+}++.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: none;+  box-shadow: none;+  outline: 0;+}++/* 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;+  background-color: transparent;+  border: none;+  color: #157dfb;+}++.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover;+}++.topcoat-icon-button--quiet:active,+.topcoat-icon-button--large--quiet:active {+  color: #c6c8c8;+  color: #79b5fd;+  text-shadow: 0 1px none;+  background-color: #157dfb;+  background-color: transparent;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down;+}++/* 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: 3.375rem;+  height: 3.375rem;+  line-height: 3.375rem;+}++.topcoat-icon-button--large:active {+  background-color: #157dfb;+  box-shadow: none;+}++/* 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: 1.08rem;+  height: 1.08rem;+  vertical-align: middle;+  top: -1px;+}++.topcoat-icon--large {+  width: 1.928571427125rem;+  height: 1.928571427125rem;+  top: -2px;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.list {+  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;+  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;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.list,+.topcoat-list {+  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;+  overflow: auto;+  -webkit-overflow-scrolling: touch;+}++.list__header,+.topcoat-list__header {+  margin: 0;+}++.list__container,+.topcoat-list__container {+  padding: 0;+  margin: 0;+  list-style-type: none;+}++.list__item,+.topcoat-list__item {+  margin: 0;+  padding: 0;+}++/* topdoc+  name: List+  description: Topcoat default list skin+  markup:+    <div class="topcoat-list">+      <h3 class="topcoat-list__header">Category</h3>+      <ul class="topcoat-list__container">+        <li class="topcoat-list__item">+          Item+        </li>+        <li class="topcoat-list__item">+          Item+        </li>+        <li class="topcoat-list__item">+          Item+        </li>+      </ul>+    </div>+  tags:+    - mobile+    - list+*/++.topcoat-list {+  border-top: none;+  border-bottom: none;+  background-color: #f0eff4;+}++.topcoat-list__header {+  padding: 4px 0.7rem;+  font-size: 0.9em;+  font-weight: 400;+  background-color: #f0eff4;+  color: #1f1f21;+  text-shadow: none;+  border-top: none;+  border-bottom: none;+}++.topcoat-list__container {+  border-top: none;+  color: #c6c8c8;+  padding: 0;+  background-color: #fff;+}++.topcoat-list__item {+  padding: 0.7rem 0.7rem 0.7rem 0.7rem;+  margin: 0 0 0 0;+  border-top: none;+  border-bottom: 1px solid #c8c7cc;+  color: #1f1f21;+  background-color: #fff;+}++.topcoat-list__item_active:active {+  background-color: #bdbec2;+}++.topcoat-list__item:first-child {+  padding-left: 0.7rem;+  margin: 0;+  border-top: 1px solid #c8c7cc;+  border-bottom: none;+}++.topcoat-list__item:last-child {+  padding-left: 0.7rem;+  margin: 0;+  border-top: none;+  border-bottom: 1px solid #c8c7cc;+}++.topcoat-list__item:nth-child(2) {+  border-top: 1px solid #c8c7cc;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: none;+  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: none;+}++.navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.navigation-bar,+.topcoat-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: none;+  cursor: default;+  -webkit-user-select: none;+  -moz-user-select: none;+  -ms-user-select: none;+  user-select: none;+}++.navigation-bar__item,+.topcoat-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: none;+}++.navigation-bar__title,+.topcoat-navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}++/* topdoc+  name: Navigation Bar+  description: A place where navigation goes to drink+  markup:+    <div class="topcoat-navigation-bar">+        <div class="topcoat-navigation-bar__item center full">+            <h1 class="topcoat-navigation-bar__title">Header</h1>+        </div>+    </div>+  tags:+    - desktop+    - light+    - mobile+    - navigation+    - bar+*/++.topcoat-navigation-bar {+  height: 3.375rem;+  height: 44px;+  padding-left: 1rem;+  padding-right: 1rem;+  background: var-background-color;+  background: #f8f8f8;+  color: #1f1f21;+  box-shadow: none;+  border-bottom: 1px solid #c8c7cc;+}++.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 44px !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #f8f8f8;+}++.topcoat-navigation-bar__item {+  margin: 0;+  line-height: 3.375rem;+  line-height: 2.5rem;+  vertical-align: top;+}++.topcoat-navigation-bar__title {+  font-size: 1.3rem;+  font-weight: 400;+  color: #1f1f21;+}++/*+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.+*/++/**+*+* 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.+*+*/++.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: 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;+}++/*+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.+*/++/**+*+* 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.+*+*/++.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: 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;+}++/* topdoc+  name: Notification+  description: Notification badge+  markup:+    <span class="topcoat-notification">1</span>+  tags:+    - desktop+    - light+    - mobile+    - notification+*/++.topcoat-notification {+  padding: 0 0.4em 0;+  width: 1.2rem;+  height: 1.2rem;+  border-radius: 50%;+  background-color: #ec514e;+  color: #fff;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++/* topdoc+  name: Page+  description: Default skin for Onsen UI Page+  modifiers:+    :focus: Focus state+    :disabled: Disabled state+  markup:+    <div class="page">+    </div>+  examples:+    mobile checkbox: http://codepen.io/Topcoat/pen/piHcs+  tags:+    - desktop+    - light+    - mobile+    - checkbox+*/++body {+  background-color: #fff;+}++.page {+  background-color: #fff;+}++.topcoat-page__bg {+  background-color: #fff;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++input[type="radio"] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++input[type="radio"] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Radio Button+  description: A button that can play music, but usually just plays ads.+  modifiers:+  markup:+    <!-- NO LABEL -->+    <label class="topcoat-radio-button">+      <input type="radio" name="topcoat">+      <div class="topcoat-radio-button__checkmark"></div>+    </label>+    <br>+    <br>+    <!-- LEFT LABEL -->+    <label class="topcoat-radio-button">+      Left label+      <input type="radio" name="topcoat">+      <div class="topcoat-radio-button__checkmark"></div>+    </label>+    <br>+    <br>+    <!-- RIGHT LABEL -->+    <label class="topcoat-radio-button">+      <input type="radio" name="topcoat">+      <div class="topcoat-radio-button__checkmark"></div>+      Right label+    </label>+    <br>+    <br>+    <!-- DISABLED -->+    <label class="topcoat-radio-button">+      <input type="radio" name="topcoat" Disabled>+      <div class="topcoat-radio-button__checkmark"></div>+      Disabled+    </label>+  examples:+    Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj+  tags:+    - desktop+    - light+    - mobile+    - Radio+*/++input[type="radio"] {+  height: 1.5rem;+  width: 1.5rem;+  margin-top: 0;+  margin-right: -1.5rem;+  margin-bottom: -1.5rem;+  margin-left: 0;+}++input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {+  opacity: 1;+}++.topcoat-radio-button {+  color: #c6c8c8;+  color: #157dfb;+  line-height: 1.5rem;+  text-align: left;+}++.topcoat-radio-button__checkmark:before {+  width: 1.5rem;+  height: 1.5rem;+  background: var-background-color;+  background: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  box-shadow: none;+}++.topcoat-radio-button__checkmark {+  position: relative;+  width: 1.5rem;+  height: 1.5rem;+}++.topcoat-radio-button__checkmark:after {+  opacity: 0;+  width: 0.9rem;+  height: 0.9rem;+  background: #157dfb;+  border: 1px solid #157dfb;+  box-shadow: 0 1px rgba(255,255,255,0.5);+  -webkit-transform: none;+  -ms-transform: none;+  transform: none;+  top: 0.25rem;+  left: 0.25rem;+}++input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {+  border: none;+  border: 1px solid #157dfb;+  box-shadow: none, none;+}++input[type="radio"]:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  background-color: #157dfb;+  background-color: transparent;+  box-shadow: none;+}++input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #157dfb;+  background: var-background-color;+  box-shadow: none;+}++/*+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.+*/++/*+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.+*/++.range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++.range__thumb {+  cursor: pointer;+}++.range__thumb--webkit {+  cursor: pointer;+  -webkit-appearance: none;+}++.range:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/*+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.+*/++/*+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.+*/++.range,+.topcoat-range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Range+  description: Range input+  modifiers:+    :active: Active state+    :disabled: Disabled state+    :hover: Hover state+    :focus: Focused+  markup:+    <input type="range" class="topcoat-range">+    <input type="range" class="topcoat-range" disabled>+  examples:+    mobile range: http://codepen.io/Topcoat/pen/BskEn+  tags:+    - desktop+    - mobile+    - range+*/++.topcoat-range {+  border-radius: 4px;+  border: 1px solid #157dfb;+  border: none;+  background-color: var-background-color--input;+  background-color: #157dfb;+  height: 0.15rem;+  border-radius: 0;+  border-radius: 3px;+}++.topcoat-range::-moz-range-track {+  border-radius: 4px;+  border: 1px solid #157dfb;+  background-color: var-background-color--input;+  background-color: #157dfb;+  height: 0.15rem;+  border-radius: 0;+  border-radius: var-border-radius--none;+}++.topcoat-range::-webkit-slider-thumb {+  height: 2rem;+  height: 1.8rem;+  width: 1.8rem;+  background-color: var-background-color;+  background-color: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range::-moz-range-thumb {+  height: 2rem;+  width: 1.8rem;+  background-color: var-background-color;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range:focus::-webkit-slider-thumb {+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: none;+}++.topcoat-range:focus::-moz-range-thumb {+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.search-input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++input[type="search"]::-webkit-search-cancel-button {+  -webkit-appearance: none;+}++.search-input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.search-input,+.topcoat-search-input,+.topcoat-search-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Search Input+  description: A text input designed for searching.+  modifiers:+    :disabled: Disabled state+  markup:+    <input type="search" value="" placeholder="search" class="topcoat-search-input">+    <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>+  tags:+    - desktop+    - light+    - mobile+    - text+    - input+    - search+    - form+*/++.topcoat-search-input,+.topcoat-search-input--large {+  line-height: 2rem;+  height: 2rem;+  font-size: 16px;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  background-color: #fff;+  background-color: #fff;+  box-shadow: var-box-shadow--text-input;+  color: #c6c8c8;+  color: #a3a3a6;+  padding: 0 0 0 1.8rem;+  border-radius: 0;+  border-radius: 4px;+  background-image: url("../img/search.svg");+  background-position: 1rem center;+  background-position: 0.5rem center;+  background-repeat: no-repeat;+  background-size: 16px;+}++.topcoat-search-input:focus,+.topcoat-search-input--large:focus {+  background-color: #fff;+  background-color: #fff;+  color: #1f1f21;+  color: #6f6f74;+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: var-box-shadow--text-input, none;+}++.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;+  margin-right: 8px;+}++.topcoat-search-input:focus::-webkit-input-placeholder,+.topcoat-search-input:focus::-webkit-input-placeholder {+  color: #c6c8c8;+}++.topcoat-search-input:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-search-input:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-search-input:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++/* topdoc+  name: Large Search Input+  description: A large text input designed for searching.+  modifiers:+    :disabled: Disabled state+  markup:+    <input type="search" value="" placeholder="search" class="topcoat-search-input--large">+    <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>+  tags:+    - desktop+    - light+    - mobile+    - text+    - input+    - search+    - form+    - large+*/++.topcoat-search-input--large {+  line-height: 3.375rem;+  height: 3.375rem;+  font-size: 1.3rem;+  font-weight: 200;+  padding: 0 0 0 2.9rem;+  border-radius: 40px;+  border-radius: 4px;+  background-position: 1.2rem center;+  background-size: 1.3rem;+}++.topcoat-search-input--large:disabled {+  color: #1f1f21;+}++.topcoat-search-input--large:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-search-input--large:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-search-input--large:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Switch+  description: Default skin for Topcoat switch+  modifiers:+    :focus: Focus state+    :disabled: Disabled state+  markup:+    <label class="topcoat-switch">+      <input type="checkbox" class="topcoat-switch__input">+      <div class="topcoat-switch__toggle"></div>+    </label>+    <br>+    <br>+    <label class="topcoat-switch">+      <input type="checkbox" class="topcoat-switch__input" checked>+      <div class="topcoat-switch__toggle"></div>+    </label>+    <br>+    <br>+    <label class="topcoat-switch">+      <input type="checkbox" class="topcoat-switch__input" disabled>+      <div class="topcoat-switch__toggle"></div>+    </label>+  examples:+    mobile switch: http://codepen.io/Topcoat/pen/upxds+  tags:+    - desktop+    - light+    - mobile+    - switch+*/++.topcoat-switch {+  font-size: 16px;+  padding: 0 1.25rem;+  border-radius: 4px;+  border-radius: 30px;+  border: 1px solid #157dfb;+  border: none;+  overflow: hidden;+  width: 3.2rem;+  height: 2rem;+}++.topcoat-switch__toggle:before,+.topcoat-switch__toggle:after {+  top: -1px;+  width: 3.5rem;+  border: 0px solid #c8c7cc;+  margin: -0.12rem 0 0 0;+}++.topcoat-switch__toggle:before {+  content: '';+  color: #4cd964;+  background-color: #4cd964;+  right: -0.08rem;+  padding-left: 1.5rem;+  height: 2rem;+  top: 0;+  border-radius: 15px;+}++.topcoat-switch__toggle {+  line-height: 2rem;+  line-height: 1.8rem;+  height: 2rem;+  height: 1.9rem;+  width: 1.9rem;+  border-radius: 4px;+  border-radius: 50%;+  color: #c6c8c8;+  text-shadow: 0 1px none;+  background-color: var-background-color;+  background-color: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  margin-left: -1.2rem;+  margin-bottom: 0;+  margin-top: 0.06rem;+  box-shadow: none;+  -webkit-transition: margin-left 0.35s cubic-bezier(0.5, 1.6, 0.5, 1);+  transition: margin-left 0.35s cubic-bezier(0.5, 1.6, 0.5, 1);+}++.topcoat-switch__toggle:after {+  content: '';+  background-color: #c8c7cc;+  left: -0.06rem;+  padding-left: 2rem;+  height: 2rem;+  top: 0;+  border-radius: 15px;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle {+  margin-left: -0.05rem;+  background-color: var-background-color--switch__toggle--checked;+}++.topcoat-switch__input:active + .topcoat-switch__toggle {+  border: 1px solid #157dfb;+  box-shadow: none;+}++.topcoat-switch__input:focus + .topcoat-switch__toggle {+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: none;+}++.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,+.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {+  background: transparent;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: #4cd964;+  -webkit-transition: background-color 0.5s cubic-bezier(0.5, 1.6, 0.5, 1);+  transition: background-color 0.5s cubic-bezier(0.5, 1.6, 0.5, 1);+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: #c8c7cc;+  -webkit-transition: background-color 0.5s cubic-bezier(0.5, 1.3, 0.5, 1);+  transition: background-color 0.5s cubic-bezier(0.5, 1.3, 0.5, 1);+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);+}++/**+*+* 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.+*+*/++/**+*+* 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-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: 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-tab-bar__button:disabled {+  opacity: 0.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Tab Bar+  description: Component of tab buttons+  modifiers:+    :disabled: Disabled state+  markup:+    <div class="topcoat-tab-bar">+      <label class="topcoat-tab-bar__item">+        <input type="radio" name="tab-bar">+        <button class="topcoat-tab-bar__button">One</button>+      </label>+      <label class="topcoat-tab-bar__item">+        <input type="radio" name="tab-bar">+        <button class="topcoat-tab-bar__button">Two</button>+      </label>+      <label class="topcoat-tab-bar__item">+        <input type="radio" name="tab-bar">+        <button class="topcoat-tab-bar__button">Three</button>+      </label>+    </div>+  examples:+    mobile tab bar: http://codepen.io/Topcoat/pen/rJICF+  tags:+    - desktop+    - light+    - dark+    - mobile+    - tab+    - group+    - bar+*/++.topcoat-tab-bar {+  height: 49px;+  background-color: #f8f8f8;+  border-top: 1px solid #c8c7cc;+}++.topcoat-tab-bar__button {+  padding: 0 1.25rem;+  height: 2rem;+  height: 49px;+  line-height: 2rem;+  line-height: 49px;+  letter-spacing: 1px;+  color: #c6c8c8;+  color: #6f6f74;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border-top: 1px solid #157dfb;+  border-top: none;+}++.topcoat-tab-bar__button:active,+.topcoat-tab-bar__button--large:active,+:checked + .topcoat-tab-bar__button {+  color: #157dfb;+  background-color: transparent;+  box-shadow: none;+  border-top: var-border-top--tab-bar--active;+}++.topcoat-tab-bar__button:focus,+.topcoat-tab-bar__button--large:focus {+  z-index: 1;+  border-top: var-border-top--tab-bar--focus;+  box-shadow: none, none;+  box-shadow: none;+  outline: 0;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.input,+.topcoat-text-input,+.topcoat-text-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled,+.topcoat-text-input:disabled,+.topcoat-text-input--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Text input+  description: Topdoc text input+  modifiers:+    :disabled: Disabled state+    :focus: Focused+    :invalid: Hover state+  markup:+    <input type="text" class="topcoat-text-input" placeholder="text" value="">+    <br>+    <br>+    <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>+    <br>+    <br>+    <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">+  tags:+    - desktop+    - mobile+    - text+    - input+*/++.topcoat-text-input,+.topcoat-text-input--large {+  line-height: 2rem;+  font-size: 16px;+  letter-spacing: 1px;+  padding: 0 1.25rem;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  border-radius: 4px;+  background-color: #fff;+  box-shadow: var-box-shadow--text-input;+  color: #c6c8c8;+  color: #a3a3a6;+  vertical-align: top;+}++.topcoat-text-input:focus,+.topcoat-text-input--large:focus {+  background-color: #fff;+  color: #1f1f21;+  color: #6f6f74;+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-text-input:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-text-input:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input:invalid {+  border: 1px solid #f00;+  color: #f00;+}++/* topdoc+  name: Large Text Input+  description: A bigger input, still for text.+  modifiers:+    :disabled: Disabled state+    :focus: Focused+    :invalid: Hover state+  markup:+    <input type="text" class="topcoat-text-input--large" value="" placeholder="text">+    <br>+    <br>+    <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>+    <br>+    <br>+    <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">+  tags:+    - desktop+    - light+    - mobile+    - form+    - input+    - large+*/++.topcoat-text-input--large {+  line-height: 3.375rem;+  font-size: 1.3rem;+}++.topcoat-text-input--large:disabled {+  color: #1f1f21;+}++.topcoat-text-input--large:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input--large:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-text-input--large:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input--large:invalid {+  border: 1px solid #f00;+  color: #f00;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* 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.+*+*/++/**+*+* 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled,+.topcoat-textarea:disabled,+.topcoat-textarea--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/* topdoc+  name: Textarea+  description: A whole area, just for text.+  modifiers:+    :disabled: Disabled state+  markup:+    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>+    <br>+    <br>+    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>+  tags:+    - desktop+    - light+    - mobile+    - form+    - input+    - textarea+*/++.topcoat-textarea,+.topcoat-textarea--large {+  padding: 2rem;+  font-size: 2.5rem;+  font-weight: 200;+  border-radius: 4px;+  line-height: 2rem;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  background-color: #fff;+  box-shadow: var-box-shadow--text-input;+  color: #c6c8c8;+  color: #a3a3a6;+  letter-spacing: 1px;+}++.topcoat-textarea:focus,+.topcoat-textarea--large:focus {+  background-color: #fff;+  color: #1f1f21;+  color: #6f6f74;+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-textarea:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-textarea:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-textarea:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++/* topdoc+  name: Large Textarea+  description: A whole area, just for text; now available in large.+  modifiers:+    :disabled: Disabled state+  markup:+    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>+    <br>+    <br>+    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>+  tags:+    - desktop+    - light+    - mobile+    - form+    - input+    - textarea+*/++.topcoat-textarea--large {+  font-size: 3rem;+  line-height: 3.375rem;+}++.topcoat-textarea--large:disabled {+  color: #1f1f21;+}++.topcoat-textarea--large:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-textarea--large:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-textarea--large:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++@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: #fff;+  color: #000;+  color: var-color--body;+  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: 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;+}++/* This file should include color and image variables corresponding to the dark theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Icon Button */++/* Tab bar */++/* Switch */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Textarea */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the light theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Secondary colors (based on colors above)++Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!++*/++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Icon Button */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Containers */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* Containers */++/* Button */++/* Bar Button */++/* Button Quiet*/++/* Icon Button */++/* Navigation bar */++/* List */++/* Notification */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* Tab-bar */++/* Call To Action */++/* Text Input */++/* Radio input */++/* Overlay */++/* Textarea */++/* Progress bar container */++/* Progress bar progress */++/* Switch */++/* Notification */++/* Search */\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-ios7.min.css b/topcoat/css/topcoat-mobile-onsen-ios7.min.cssnew file mode 100644index 0000000..d2274a5--- /dev/null+++ b/topcoat/css/topcoat-mobile-onsen-ios7.min.css@@ -0,0 +1 @@+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#157dfb;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border:1px solid #157dfb;border:0;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:var-background-color--hover;background-color:transparent;color:#157dfb}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#157dfb;background-color:transparent;box-shadow:none;color:#79b5fd}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#157dfb;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #157dfb;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#79b5fd;text-shadow:0 1px none;background-color:#157dfb;background-color:transparent;border:1px solid #157dfb;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#157dfb;background:transparent;border:1px solid transparent;box-shadow:none;color:#157dfb}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:transparent;box-shadow:none;color:#157dfb;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:transparent}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:#79b5fd;background-color:transparent;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #157dfb}.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{margin:var-button-bar-margin;border:0 solid #157dfb}.topcoat-button-bar__item{border-top:1px solid #157dfb;border-bottom:1px solid #157dfb}.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-left:1px solid #157dfb;border-right:0;border-right:1px solid #157dfb}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:1px solid #157dfb}.topcoat-button-bar__button{border-radius:inherit;background-color:#f2f2f2;color:#157dfb;border:0 solid #157dfb;border-right:1px solid #157dfb}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#b5d6fe!important;color:#fff;border:0 solid #157dfb;border-right:1px solid #157dfb;border-right:1px solid #157dfb}.topcoat-button-bar__button:hover{background-color:#157dfb;color:#fff}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #157dfb}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#f2f2f2;color:#157dfb;border:0 solid #157dfb;border-right:1px solid #157dfb}.topcoat-button-bar__button--large:hover{background-color:#157dfb;color:#fff}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#157dfb;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border:1px solid #157dfb;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:transparent;color:#157dfb}.topcoat-button:active,.topcoat-button--large:active{background-color:#157dfb;background-color:transparent;box-shadow:none;color:#79b5fd}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#157dfb;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #157dfb;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#79b5fd;text-shadow:0 1px none;background-color:#157dfb;background-color:transparent;border:1px solid #157dfb;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#157dfb;background:transparent;border:1px solid transparent;box-shadow:none;color:#157dfb}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:transparent;box-shadow:none;color:#157dfb;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:transparent}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:#79b5fd;background-color:transparent;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #157dfb}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:1.5rem}input[type=checkbox]{height:1.5rem;width:1.5rem;margin-top:0;margin-right:-1.5rem;margin-bottom:-1.5rem;margin-left:0}input[type=checkbox]:checked{background:#157dfb}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:#157dfb}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:1.5rem}.topcoat-checkbox__checkmark:before{width:1.5rem;height:1.5rem;background:var-background-color;background:#fff;border:1px solid #157dfb;border:1px solid #157dfb;border-radius:1rem;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:1.5rem;height:1.5rem}.topcoat-checkbox__checkmark:after{top:5px;left:3px;opacity:0;width:12px;height:6px;background:transparent;border:3px solid #fff;border-width:4px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #157dfb;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #157dfb;border:1px solid #157dfb;background-color:#157dfb;background-color:#fff;border:1px solid #157dfb;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #157dfb;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #157dfb;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#157dfb;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:transparent;border:0;color:#157dfb}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #157dfb;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#79b5fd;text-shadow:0 1px none;background-color:#157dfb;background-color:transparent;border:1px solid #157dfb;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#157dfb;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f0eff4}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#f0eff4;color:#1f1f21;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:#fff}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #c8c7cc;color:#1f1f21;background-color:#fff}.topcoat-list__item_active:active{background-color:#bdbec2}.topcoat-list__item:first-child{padding-left:.7rem;margin:0;border-top:1px solid #c8c7cc;border-bottom:0}.topcoat-list__item:last-child{padding-left:.7rem;margin:0;border-top:0;border-bottom:1px solid #c8c7cc}.topcoat-list__item:nth-child(2){border-top:1px solid #c8c7cc}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:44px;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#f8f8f8;color:#1f1f21;box-shadow:none;border-bottom:1px solid #c8c7cc}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:44px!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#f8f8f8}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#1f1f21}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#fff}.page{background-color:#fff}.topcoat-page__bg{background-color:#fff}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.5rem;width:1.5rem;margin-top:0;margin-right:-1.5rem;margin-bottom:-1.5rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#157dfb;line-height:1.5rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.5rem;height:1.5rem;background:var-background-color;background:#fff;border:1px solid #157dfb;border:1px solid #157dfb;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.5rem;height:1.5rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.9rem;height:.9rem;background:#157dfb;border:1px solid #157dfb;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:.25rem;left:.25rem}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #157dfb;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #157dfb;border:1px solid #157dfb;background-color:#157dfb;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #157dfb;background:var-background-color;box-shadow:none}.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 #157dfb;border:0;background-color:var-background-color--input;background-color:#157dfb;height:.15rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #157dfb;background-color:var-background-color--input;background-color:#157dfb;height:.15rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1.8rem;width:1.8rem;background-color:var-background-color;background-color:#fff;border:1px solid #157dfb;border:1px solid #c8c7cc;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1.8rem;background-color:var-background-color;border:1px solid #157dfb;border:1px solid #c8c7cc;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #c8c7cc;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #c8c7cc;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #157dfb;border:1px solid #c8c7cc;background-color:#fff;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#a3a3a6;padding:0 0 0 1.8rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:.5rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#fff;background-color:#fff;color:#1f1f21;color:#6f6f74;border:0;border:1px solid #c8c7cc;box-shadow:var-box-shadow--text-input,none}.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;margin-right:8px}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#1f1f21}.topcoat-search-input:disabled::-moz-placeholder{color:#1f1f21}.topcoat-search-input:disabled:-ms-input-placeholder{color:#1f1f21}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#1f1f21}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#1f1f21}.topcoat-search-input--large:disabled::-moz-placeholder{color:#1f1f21}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#1f1f21}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #157dfb;border:0;overflow:hidden;width:3.2rem;height:2rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:3.5rem;border:0 solid #c8c7cc;margin:-.12rem 0 0 0}.topcoat-switch__toggle:before{content:'';color:#4cd964;background-color:#4cd964;right:-.08rem;padding-left:1.5rem;height:2rem;top:0;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:1.8rem;height:2rem;height:1.9rem;width:1.9rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #157dfb;border:1px solid #c8c7cc;margin-left:-1.2rem;margin-bottom:0;margin-top:.06rem;box-shadow:none;-webkit-transition:margin-left .35s cubic-bezier(0.5,1.6,.5,1);transition:margin-left .35s cubic-bezier(0.5,1.6,.5,1)}.topcoat-switch__toggle:after{content:'';background-color:#c8c7cc;left:-.06rem;padding-left:2rem;height:2rem;top:0;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:-.05rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #157dfb;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #c8c7cc;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:#4cd964;-webkit-transition:background-color .5s cubic-bezier(0.5,1.6,.5,1);transition:background-color .5s cubic-bezier(0.5,1.6,.5,1)}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:#c8c7cc;-webkit-transition:background-color .5s cubic-bezier(0.5,1.3,.5,1);transition:background-color .5s cubic-bezier(0.5,1.3,.5,1)}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:inset 0 0 0 0 rgba(0,0,0,.4)}.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{height:49px;background-color:#f8f8f8;border-top:1px solid #c8c7cc}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:49px;line-height:2rem;line-height:49px;letter-spacing:1px;color:#c6c8c8;color:#6f6f74;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #157dfb;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#157dfb;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #157dfb;border:1px solid #c8c7cc;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#a3a3a6;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#fff;color:#1f1f21;color:#6f6f74;border:0;border:1px solid #c8c7cc;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#1f1f21}.topcoat-text-input:disabled::-moz-placeholder{color:#1f1f21}.topcoat-text-input:disabled:-ms-input-placeholder{color:#1f1f21}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#1f1f21}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#1f1f21}.topcoat-text-input--large:disabled::-moz-placeholder{color:#1f1f21}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#1f1f21}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #157dfb;border:1px solid #c8c7cc;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#a3a3a6;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#fff;color:#1f1f21;color:#6f6f74;border:0;border:1px solid #c8c7cc;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#1f1f21}.topcoat-textarea:disabled::-moz-placeholder{color:#1f1f21}.topcoat-textarea:disabled:-ms-input-placeholder{color:#1f1f21}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#1f1f21}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#1f1f21}.topcoat-textarea--large:disabled::-moz-placeholder{color:#1f1f21}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#1f1f21}@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:#fff;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-orange.css b/topcoat/css/topcoat-mobile-onsen-orange.cssindex 1e89d3e..b9ea0e9 100644--- a/topcoat/css/topcoat-mobile-onsen-orange.css+++ b/topcoat/css/topcoat-mobile-onsen-orange.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: var-background-color--hover;   background-color: #f6790e;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: #de6a08;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #de6a08;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #de6a08; }@@ -398,15 +420,20 @@   background-color: #f5f0e8 !important;   color: #de6a08;   border: none;+  border-right: 1px solid #de6a08;+  border-right: 1px solid #de6a08; }  .topcoat-button-bar__button:hover {   background-color: #f6790e;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #de6a08; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #f6790e;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #f6790e;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: #de6a08;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #de6a08;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #de6a08;   box-shadow: none, none; } @@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,6 +1361,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1316,6 +1372,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #de6a08;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1328,6 +1385,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #de6a08;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #eec8a4; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #de6a08;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -2094,10 +2173,18 @@ limitations under the License.     - checkbox */ +body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #de6a08;   box-shadow: none, none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #de6a08;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-onsen-orange.min.css b/topcoat/css/topcoat-mobile-onsen-orange.min.cssindex 8a93ce9..2bc16dd 100644--- a/topcoat/css/topcoat-mobile-onsen-orange.min.css+++ b/topcoat/css/topcoat-mobile-onsen-orange.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#de6a08;box-shadow:none;border:1px solid #de6a08;border:0;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:var-background-color--hover;background-color:#f6790e}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#de6a08;background-color:#f8913b;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:#de6a08;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #de6a08;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f8913b;text-shadow:0 1px none;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#de6a08;background:transparent;border:1px solid transparent;box-shadow:none;color:#de6a08}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.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;border-right:1px solid #de6a08}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#cf6307;color:var-color--button-bar--button;border:0;border-right:1px solid #de6a08}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#de6a08;border:0}.topcoat-button-bar__button:hover{background-color:#f6790e}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#cf6307;color:var-color--button-bar--button;border:0;border-right:1px solid #de6a08}.topcoat-button-bar__button--large:hover{background-color:#f6790e}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#de6a08;box-shadow:none;border:1px solid #de6a08;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#f6790e}.topcoat-button:active,.topcoat-button--large:active{background-color:#de6a08;background-color:#f8913b;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:#de6a08;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #de6a08;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f8913b;text-shadow:0 1px none;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#de6a08;background:transparent;border:1px solid transparent;box-shadow:none;color:#de6a08}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #de6a08;border:1px solid #b3b3b3;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #de6a08;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #de6a08;border:1px solid #de6a08;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #de6a08;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #de6a08;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover}.topcoat-icon-button:active{background-color:#de6a08;box-shadow:none}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #de6a08;border:0;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;border:0;box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#de6a08;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item:active{background-color:#eec8a4}.topcoat-list__item:first-child{border-top:0}.topcoat-list__item:last-child{border-bottom:1px solid #b3b3b3}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#de6a08;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}.page{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #de6a08;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#de6a08;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #de6a08;border:1px solid #de6a08;background-color:#de6a08;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #de6a08;background:var-background-color;box-shadow:none}.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 #de6a08;border:0;background-color:var-background-color--input;background-color:#de6a08;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #de6a08;background-color:var-background-color--input;background-color:#de6a08;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #de6a08;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #de6a08;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #de6a08;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #de6a08;border:0;overflow:hidden;width:4rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#de6a08;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #de6a08;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #de6a08;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #de6a08;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#de6a08;background-color:transparent;box-shadow:none}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #de6a08;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #de6a08;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#de6a08;box-shadow:none;border:1px solid #de6a08;border:0;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:var-background-color--hover;background-color:#f6790e;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#de6a08;background-color:#f8913b;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#de6a08;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #de6a08;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f8913b;text-shadow:0 1px none;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#de6a08;background:transparent;border:1px solid transparent;box-shadow:none;color:#de6a08}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.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-left:var-border-left--button-bar__button__first;border-right:0;border-right:1px solid #de6a08}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#cf6307;color:var-color--button-bar--button;border:0;border-right:1px solid #de6a08}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#de6a08;border:0;border-right:1px solid #de6a08;border-right:1px solid #de6a08}.topcoat-button-bar__button:hover{background-color:#f6790e;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #de6a08}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#cf6307;color:var-color--button-bar--button;border:0;border-right:1px solid #de6a08}.topcoat-button-bar__button--large:hover{background-color:#f6790e;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#de6a08;box-shadow:none;border:1px solid #de6a08;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#f6790e;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#de6a08;background-color:#f8913b;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#de6a08;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #de6a08;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f8913b;text-shadow:0 1px none;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#de6a08;background:transparent;border:1px solid transparent;box-shadow:none;color:#de6a08}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #de6a08;border:1px solid #b3b3b3;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #de6a08;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #de6a08;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #de6a08;border:1px solid #de6a08;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #de6a08;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #de6a08;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#de6a08;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:var-background-color__icon-button--quiet;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #de6a08;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#de6a08;background-color:transparent;border:1px solid #de6a08;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#de6a08;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item_active:active{background-color:#eec8a4}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:1px solid #b3b3b3}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#de6a08;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#de6a08}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#f5f0e8}.page{background-color:#f5f0e8}.topcoat-page__bg{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #de6a08;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#de6a08;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #de6a08;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #de6a08;border:1px solid #de6a08;background-color:#de6a08;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #de6a08;background:var-background-color;box-shadow:none}.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 #de6a08;border:0;background-color:var-background-color--input;background-color:#de6a08;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #de6a08;background-color:var-background-color--input;background-color:#de6a08;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #de6a08;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #de6a08;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #de6a08;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;color:var-color--search-input--focus;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #de6a08;border:0;overflow:hidden;width:4rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#de6a08;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #de6a08;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #de6a08;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #b3b3b3;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #de6a08;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#de6a08;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #de6a08;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;color:var-color--text-input--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #de6a08;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;color:var-color--textarea--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-pink.css b/topcoat/css/topcoat-mobile-onsen-pink.cssindex 577dac7..1614c38 100644--- a/topcoat/css/topcoat-mobile-onsen-pink.css+++ b/topcoat/css/topcoat-mobile-onsen-pink.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: var-background-color--hover;   background-color: #ec6e8c;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: #e95377;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #e95377;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #e95377; }@@ -398,15 +420,20 @@   background-color: #f5f0e8 !important;   color: #e95377;   border: none;+  border-right: 1px solid #e95377;+  border-right: 1px solid #e95377; }  .topcoat-button-bar__button:hover {   background-color: #ec6e8c;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #e95377; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #ec6e8c;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #ec6e8c;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: #e95377;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #e95377;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #e95377;   box-shadow: none, none; } @@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,6 +1361,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1316,6 +1372,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #e95377;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1328,6 +1385,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #e95377;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #f1c1c6; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #e95377;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -2094,10 +2173,18 @@ limitations under the License.     - checkbox */ +body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #e95377;   box-shadow: none, none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #e95377;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-onsen-pink.min.css b/topcoat/css/topcoat-mobile-onsen-pink.min.cssindex 75dbc46..16c5494 100644--- a/topcoat/css/topcoat-mobile-onsen-pink.min.css+++ b/topcoat/css/topcoat-mobile-onsen-pink.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#e95377;box-shadow:none;border:1px solid #e95377;border:0;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:var-background-color--hover;background-color:#ec6e8c}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#e95377;background-color:#f297ad;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:#e95377;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #e95377;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f297ad;text-shadow:0 1px none;background-color:#e95377;background-color:transparent;border:1px solid #e95377;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#e95377;background:transparent;border:1px solid transparent;box-shadow:none;color:#e95377}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.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;border-right:1px solid #e95377}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#e63c65;color:var-color--button-bar--button;border:0;border-right:1px solid #e95377}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#e95377;border:0}.topcoat-button-bar__button:hover{background-color:#ec6e8c}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#e63c65;color:var-color--button-bar--button;border:0;border-right:1px solid #e95377}.topcoat-button-bar__button--large:hover{background-color:#ec6e8c}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#e95377;box-shadow:none;border:1px solid #e95377;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#ec6e8c}.topcoat-button:active,.topcoat-button--large:active{background-color:#e95377;background-color:#f297ad;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:#e95377;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #e95377;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f297ad;text-shadow:0 1px none;background-color:#e95377;background-color:transparent;border:1px solid #e95377;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#e95377;background:transparent;border:1px solid transparent;box-shadow:none;color:#e95377}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #e95377;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #e95377;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #e95377;border:1px solid #e95377;background-color:#e95377;background-color:transparent;border:1px solid #e95377;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #e95377;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #e95377;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover}.topcoat-icon-button:active{background-color:#e95377;box-shadow:none}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #e95377;border:0;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#e95377;background-color:transparent;border:1px solid #e95377;border:0;box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#e95377;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item:active{background-color:#f1c1c6}.topcoat-list__item:first-child{border-top:0}.topcoat-list__item:last-child{border-bottom:1px solid #b3b3b3}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#e95377;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}.page{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #e95377;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#e95377;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #e95377;border:1px solid #e95377;background-color:#e95377;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #e95377;background:var-background-color;box-shadow:none}.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 #e95377;border:0;background-color:var-background-color--input;background-color:#e95377;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #e95377;background-color:var-background-color--input;background-color:#e95377;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #e95377;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #e95377;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #e95377;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #e95377;border:0;overflow:hidden;width:4rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#e95377;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #e95377;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #e95377;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #e95377;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#e95377;background-color:transparent;box-shadow:none}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #e95377;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #e95377;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#e95377;box-shadow:none;border:1px solid #e95377;border:0;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:var-background-color--hover;background-color:#ec6e8c;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#e95377;background-color:#f297ad;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#e95377;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #e95377;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f297ad;text-shadow:0 1px none;background-color:#e95377;background-color:transparent;border:1px solid #e95377;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#e95377;background:transparent;border:1px solid transparent;box-shadow:none;color:#e95377}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.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-left:var-border-left--button-bar__button__first;border-right:0;border-right:1px solid #e95377}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#e63c65;color:var-color--button-bar--button;border:0;border-right:1px solid #e95377}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#e95377;border:0;border-right:1px solid #e95377;border-right:1px solid #e95377}.topcoat-button-bar__button:hover{background-color:#ec6e8c;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #e95377}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#e63c65;color:var-color--button-bar--button;border:0;border-right:1px solid #e95377}.topcoat-button-bar__button--large:hover{background-color:#ec6e8c;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#e95377;box-shadow:none;border:1px solid #e95377;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#ec6e8c;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#e95377;background-color:#f297ad;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#e95377;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #e95377;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#f297ad;text-shadow:0 1px none;background-color:#e95377;background-color:transparent;border:1px solid #e95377;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#e95377;background:transparent;border:1px solid transparent;box-shadow:none;color:#e95377}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #e95377;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #e95377;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #e95377;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #e95377;border:1px solid #e95377;background-color:#e95377;background-color:transparent;border:1px solid #e95377;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #e95377;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #e95377;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#e95377;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:var-background-color__icon-button--quiet;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #e95377;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#e95377;background-color:transparent;border:1px solid #e95377;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#e95377;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item_active:active{background-color:#f1c1c6}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:1px solid #b3b3b3}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#e95377;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#e95377}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#f5f0e8}.page{background-color:#f5f0e8}.topcoat-page__bg{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #e95377;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#e95377;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #e95377;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #e95377;border:1px solid #e95377;background-color:#e95377;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #e95377;background:var-background-color;box-shadow:none}.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 #e95377;border:0;background-color:var-background-color--input;background-color:#e95377;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #e95377;background-color:var-background-color--input;background-color:#e95377;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #e95377;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #e95377;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #e95377;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;color:var-color--search-input--focus;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #e95377;border:0;overflow:hidden;width:4rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#e95377;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #e95377;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #e95377;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #b3b3b3;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #e95377;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#e95377;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #e95377;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;color:var-color--text-input--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #e95377;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;color:var-color--textarea--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-purple.css b/topcoat/css/topcoat-mobile-onsen-purple.cssindex 79638a4..2fed319 100644--- a/topcoat/css/topcoat-mobile-onsen-purple.css+++ b/topcoat/css/topcoat-mobile-onsen-purple.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: var-background-color--hover;   background-color: #b559a6;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: #a64a97;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #a64a97;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #a64a97; }@@ -398,15 +420,20 @@   background-color: #f5f0e8 !important;   color: #a64a97;   border: none;+  border-right: 1px solid #a64a97;+  border-right: 1px solid #a64a97; }  .topcoat-button-bar__button:hover {   background-color: #b559a6;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #a64a97; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #b559a6;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #b559a6;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: #a64a97;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #a64a97;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #a64a97;   box-shadow: none, none; } @@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,6 +1361,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1316,6 +1372,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #a64a97;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1328,6 +1385,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #a64a97;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #ddbed0; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #a64a97;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -2094,10 +2173,18 @@ limitations under the License.     - checkbox */ +body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #a64a97;   box-shadow: none, none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #a64a97;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-onsen-purple.min.css b/topcoat/css/topcoat-mobile-onsen-purple.min.cssindex bc81ebf..f2084cf 100644--- a/topcoat/css/topcoat-mobile-onsen-purple.min.css+++ b/topcoat/css/topcoat-mobile-onsen-purple.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#a64a97;box-shadow:none;border:1px solid #a64a97;border:0;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:var-background-color--hover;background-color:#b559a6}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#a64a97;background-color:#c379b7;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:#a64a97;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #a64a97;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#c379b7;text-shadow:0 1px none;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#a64a97;background:transparent;border:1px solid transparent;box-shadow:none;color:#a64a97}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.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;border-right:1px solid #a64a97}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#944287;color:var-color--button-bar--button;border:0;border-right:1px solid #a64a97}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#a64a97;border:0}.topcoat-button-bar__button:hover{background-color:#b559a6}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#944287;color:var-color--button-bar--button;border:0;border-right:1px solid #a64a97}.topcoat-button-bar__button--large:hover{background-color:#b559a6}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#a64a97;box-shadow:none;border:1px solid #a64a97;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#b559a6}.topcoat-button:active,.topcoat-button--large:active{background-color:#a64a97;background-color:#c379b7;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:#a64a97;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #a64a97;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#c379b7;text-shadow:0 1px none;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#a64a97;background:transparent;border:1px solid transparent;box-shadow:none;color:#a64a97}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #a64a97;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #a64a97;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #a64a97;border:1px solid #a64a97;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #a64a97;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #a64a97;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover}.topcoat-icon-button:active{background-color:#a64a97;box-shadow:none}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #a64a97;border:0;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;border:0;box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#a64a97;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item:active{background-color:#ddbed0}.topcoat-list__item:first-child{border-top:0}.topcoat-list__item:last-child{border-bottom:1px solid #b3b3b3}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#a64a97;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}.page{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #a64a97;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#a64a97;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #a64a97;border:1px solid #a64a97;background-color:#a64a97;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #a64a97;background:var-background-color;box-shadow:none}.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 #a64a97;border:0;background-color:var-background-color--input;background-color:#a64a97;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #a64a97;background-color:var-background-color--input;background-color:#a64a97;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #a64a97;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #a64a97;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #a64a97;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #a64a97;border:0;overflow:hidden;width:4rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#a64a97;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #a64a97;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #a64a97;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #a64a97;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#a64a97;background-color:transparent;box-shadow:none}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #a64a97;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #a64a97;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#a64a97;box-shadow:none;border:1px solid #a64a97;border:0;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:var-background-color--hover;background-color:#b559a6;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#a64a97;background-color:#c379b7;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#a64a97;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #a64a97;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#c379b7;text-shadow:0 1px none;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#a64a97;background:transparent;border:1px solid transparent;box-shadow:none;color:#a64a97}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.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-left:var-border-left--button-bar__button__first;border-right:0;border-right:1px solid #a64a97}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#944287;color:var-color--button-bar--button;border:0;border-right:1px solid #a64a97}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#a64a97;border:0;border-right:1px solid #a64a97;border-right:1px solid #a64a97}.topcoat-button-bar__button:hover{background-color:#b559a6;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #a64a97}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#944287;color:var-color--button-bar--button;border:0;border-right:1px solid #a64a97}.topcoat-button-bar__button--large:hover{background-color:#b559a6;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#a64a97;box-shadow:none;border:1px solid #a64a97;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#b559a6;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#a64a97;background-color:#c379b7;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#a64a97;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #a64a97;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#c379b7;text-shadow:0 1px none;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#a64a97;background:transparent;border:1px solid transparent;box-shadow:none;color:#a64a97}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #a64a97;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #a64a97;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #a64a97;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #a64a97;border:1px solid #a64a97;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #a64a97;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #a64a97;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#a64a97;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:var-background-color__icon-button--quiet;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #a64a97;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#a64a97;background-color:transparent;border:1px solid #a64a97;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#a64a97;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item_active:active{background-color:#ddbed0}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:1px solid #b3b3b3}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#a64a97;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#a64a97}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#f5f0e8}.page{background-color:#f5f0e8}.topcoat-page__bg{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #a64a97;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#a64a97;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #a64a97;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #a64a97;border:1px solid #a64a97;background-color:#a64a97;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #a64a97;background:var-background-color;box-shadow:none}.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 #a64a97;border:0;background-color:var-background-color--input;background-color:#a64a97;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #a64a97;background-color:var-background-color--input;background-color:#a64a97;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #a64a97;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #a64a97;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #a64a97;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;color:var-color--search-input--focus;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #a64a97;border:0;overflow:hidden;width:4rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#a64a97;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #a64a97;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #a64a97;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #b3b3b3;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #a64a97;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#a64a97;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #a64a97;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;color:var-color--text-input--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #a64a97;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;color:var-color--textarea--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/css/topcoat-mobile-onsen-yellow.css b/topcoat/css/topcoat-mobile-onsen-yellow.cssindex 044ddb0..184d302 100644--- a/topcoat/css/topcoat-mobile-onsen-yellow.css+++ b/topcoat/css/topcoat-mobile-onsen-yellow.css@@ -189,6 +189,7 @@ .topcoat-button-bar__button--large:hover {   background-color: var-background-color--hover;   background-color: #ffca12;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -210,14 +211,22 @@ .topcoat-button--large--cta:focus, .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {+  border: none;+  box-shadow: none;   outline: 0; }  .topcoat-button--quiet {-  color: #f2bc00;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #f2bc00;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -280,6 +289,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -291,6 +301,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ .button-bar, .topcoat-button-bar {   display: table;@@ -360,6 +375,12 @@  .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar > .topcoat-button-bar__item:first-child {@@ -374,6 +395,7 @@  .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #f2bc00; }@@ -398,15 +420,20 @@   background-color: #f5f0e8 !important;   color: #f2bc00;   border: none;+  border-right: 1px solid #f2bc00;+  border-right: 1px solid #f2bc00; }  .topcoat-button-bar__button:hover {   background-color: #ffca12;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #f2bc00; }  /* topdoc@@ -447,6 +474,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #ffca12;+  color: var-color--button-bar__button--hover; }  /**@@ -653,6 +681,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #ffca12;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -669,6 +698,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -692,10 +723,16 @@ */  .topcoat-button--quiet {-  color: #f2bc00;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #f2bc00;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -815,6 +852,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -846,6 +884,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1073,6 +1116,14 @@ input[type="checkbox"] {   margin-left: 0; } +input[type="checkbox"]:checked {+  background: var-background-color-checked--checkbox;+}++input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -1117,6 +1168,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {  input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #f2bc00;   box-shadow: none, none; } @@ -1262,6 +1314,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1275,6 +1328,8 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } @@ -1306,6 +1361,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1316,6 +1372,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #f2bc00;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1328,6 +1385,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border: 1px solid #f2bc00;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; }  /* topdoc@@ -1652,6 +1710,7 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1663,18 +1722,28 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #f4e0a2; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1891,6 +1960,16 @@ input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #f2bc00;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -2094,10 +2173,18 @@ limitations under the License.     - checkbox */ +body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2398,6 +2485,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #f2bc00;   box-shadow: none, none; } @@ -2605,11 +2693,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2768,11 +2858,13 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url("../img/search.svg");   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2782,6 +2874,7 @@ input[type="search"]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2792,6 +2885,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -3089,12 +3183,15 @@ input[type="search"]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -3142,6 +3239,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -3151,6 +3249,7 @@ input[type="search"]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -3159,6 +3258,26 @@ input[type="search"]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3304,6 +3423,7 @@ input[type="search"]::-webkit-search-cancel-button { */  .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3332,11 +3452,13 @@ input[type="search"]::-webkit-search-cancel-button {   color: #f2bc00;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3444,6 +3566,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3673,6 +3796,7 @@ input[type="search"]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3752,6 +3876,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px "Source Sans", helvetica, arial, sans-serif;   font-weight: 400; }@@ -3841,6 +3966,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3857,6 +3984,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3903,6 +4032,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3917,6 +4048,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3965,6 +4098,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4065,6 +4248,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4251,6 +4484,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/css/topcoat-mobile-onsen-yellow.min.css b/topcoat/css/topcoat-mobile-onsen-yellow.min.cssindex 5b07fc1..c5443de 100644--- a/topcoat/css/topcoat-mobile-onsen-yellow.min.css+++ b/topcoat/css/topcoat-mobile-onsen-yellow.min.css@@ -1 +1 @@-.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#f2bc00;box-shadow:none;border:1px solid #f2bc00;border:0;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:var-background-color--hover;background-color:#ffca12}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f2bc00;background-color:#ffd440;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{outline:0}.topcoat-button--quiet{color:#f2bc00;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #f2bc00;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#ffd440;text-shadow:0 1px none;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#f2bc00;background:transparent;border:1px solid transparent;box-shadow:none;color:#f2bc00}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.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{margin:var-button-bar-margin}.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;border-right:1px solid #f2bc00}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#d8a800;color:var-color--button-bar--button;border:0;border-right:1px solid #f2bc00}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#f2bc00;border:0}.topcoat-button-bar__button:hover{background-color:#ffca12}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#d8a800;color:var-color--button-bar--button;border:0;border-right:1px solid #f2bc00}.topcoat-button-bar__button--large:hover{background-color:#ffca12}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#f2bc00;box-shadow:none;border:1px solid #f2bc00;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#ffca12}.topcoat-button:active,.topcoat-button--large:active{background-color:#f2bc00;background-color:#ffd440;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{outline:0}.topcoat-button--quiet{color:#f2bc00;background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #f2bc00;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#ffd440;text-shadow:0 1px none;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#f2bc00;background:transparent;border:1px solid transparent;box-shadow:none;color:#f2bc00}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #f2bc00;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #f2bc00;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #f2bc00;border:1px solid #f2bc00;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #f2bc00;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #f2bc00;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover}.topcoat-icon-button:active{background-color:#f2bc00;box-shadow:none}.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{outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #f2bc00;border:0;box-shadow:none}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;border:0;box-shadow:none}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#f2bc00;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item:active{background-color:#f4e0a2}.topcoat-list__item:first-child{border-top:0}.topcoat-list__item:last-child{border-bottom:1px solid #b3b3b3}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#f2bc00;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}.page{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #f2bc00;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#f2bc00;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #f2bc00;border:1px solid #f2bc00;background-color:#f2bc00;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #f2bc00;background:var-background-color;box-shadow:none}.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 #f2bc00;border:0;background-color:var-background-color--input;background-color:#f2bc00;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #f2bc00;background-color:var-background-color--input;background-color:#f2bc00;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #f2bc00;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #f2bc00;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #f2bc00;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #f2bc00;border:0;overflow:hidden;width:4rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#f2bc00;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #f2bc00;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #f2bc00;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;box-shadow:none}.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{background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #f2bc00;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#f2bc00;background-color:transparent;box-shadow:none}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #f2bc00;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #f2bc00;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;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}\ No newline at end of file+.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#f2bc00;box-shadow:none;border:1px solid #f2bc00;border:0;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:var-background-color--hover;background-color:#ffca12;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f2bc00;background-color:#ffd440;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#f2bc00;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #f2bc00;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#ffd440;text-shadow:0 1px none;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#f2bc00;background:transparent;border:1px solid transparent;box-shadow:none;color:#f2bc00}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}.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{margin:var-button-bar-margin;border:var-border--button-bar}.topcoat-button-bar__item{border-top:var-border-top--button-bar__button;border-bottom:var-border-bottom--button-bar__button}.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-left:var-border-left--button-bar__button__first;border-right:0;border-right:1px solid #f2bc00}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0;border-right:0}.topcoat-button-bar__button{border-radius:inherit;background-color:#d8a800;color:var-color--button-bar--button;border:0;border-right:1px solid #f2bc00}.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{background-color:#f5f0e8!important;color:#f2bc00;border:0;border-right:1px solid #f2bc00;border-right:1px solid #f2bc00}.topcoat-button-bar__button:hover{background-color:#ffca12;color:var-color--button-bar__button--hover}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1;z-index:var-border-right--button-bar__button--z-index;border-right:1px solid #f2bc00}.topcoat-button-bar__button--large{border-radius:inherit;background-color:#d8a800;color:var-color--button-bar--button;border:0;border-right:1px solid #f2bc00}.topcoat-button-bar__button--large:hover{background-color:#ffca12;color:var-color--button-bar__button--hover}.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 1.25rem;font-size:16px;line-height:2rem;letter-spacing:1px;color:#c6c8c8;color:#fff;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:#f2bc00;box-shadow:none;border:1px solid #f2bc00;border:0;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:var-background-color--hover;background-color:#ffca12;color:var-color--button--hover}.topcoat-button:active,.topcoat-button--large:active{background-color:#f2bc00;background-color:#ffd440;box-shadow:none;color:#fff}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:0;box-shadow:none;outline:0}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background:var-quiet-button-background;color:#f2bc00;border:0}.topcoat-button--quiet:disabled{border:0}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #f2bc00;border:0;background-color:transparent;box-shadow:none;background-color:transparent}.topcoat-button--quiet:active,.topcoat-button--large--quiet:active{color:#c6c8c8;color:#ffd440;text-shadow:0 1px none;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;border:0;box-shadow:none}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{color:#f2bc00;background:transparent;border:1px solid transparent;box-shadow:none;color:#f2bc00}.topcoat-button--large--quiet:active{color:var-color--quiet-active}.topcoat-button--cta,.topcoat-button--large--cta{border:0;background-color:#4a9cd2;box-shadow:none;color:#fff;font-weight:500;text-shadow:none}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#63a9d8}.topcoat-button--cta:active,.topcoat-button--large--cta:active{color:var-color--cta--down;background-color:#87bee1;box-shadow:none}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:3.375rem;padding:0 1.25rem}.topcoat-button__spinner{border:3px solid #c6c8c8;border:3px solid #fff}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:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked{background:var-background-color-checked--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:before{background:var-background-color--before--checkbox}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:var-background-color;background:#fff;border:1px solid #f2bc00;border:var-border--checkbox;border-radius:3px;box-shadow:none;left:0}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:7px;left:4px;opacity:0;width:18px;height:6px;background:transparent;border:7px solid #f2bc00;border-width:6px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:0;border:1px solid #f2bc00;box-shadow:none,none}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #f2bc00;border:1px solid #f2bc00;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;box-shadow:none}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #f2bc00;background:var-background-color;box-shadow:none}.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 .5rem;line-height:2rem;letter-spacing:1px;color:#c6c8c8;text-shadow:0 1px none;vertical-align:baseline;background-color:var-background-color;background-color:#fff;box-shadow:none;border:1px solid #f2bc00;border:0;border-radius:4px;border-radius:3px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:var-background-color--hover;background-color:var-background-color--icon-button-quiet--hover}.topcoat-icon-button:active{background-color:#f2bc00;box-shadow:none}.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:0;box-shadow:none;outline:0}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none;background-color:var-background-color__icon-button--quiet;border:0;color:#fff}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px none;border:1px solid #f2bc00;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--hover}.topcoat-icon-button--quiet:active,.topcoat-icon-button--large--quiet:active{color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;background-color:#f2bc00;background-color:transparent;border:1px solid #f2bc00;border:0;box-shadow:none;box-shadow:var-box-shadow--icon-button-quiet--down}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:3.375rem;height:3.375rem;line-height:3.375rem}.topcoat-icon-button--large:active{background-color:#f2bc00;box-shadow:none}.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:1.08rem;height:1.08rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.928571427125rem;height:1.928571427125rem;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}.list,.topcoat-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,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:0;border-bottom:0;background-color:#f5f0e8}.topcoat-list__header{padding:4px .7rem;font-size:.9em;font-weight:400;background-color:#e2dcd5;color:#666;text-shadow:none;border-top:0;border-bottom:0}.topcoat-list__container{border-top:0;color:#c6c8c8;padding:0;background-color:var-background-color--list-container}.topcoat-list__item{padding:.7rem;margin:0;border-top:0;border-bottom:1px solid #b3b3b3;color:#666;background-color:transparent}.topcoat-list__item_active:active{background-color:#f4e0a2}.topcoat-list__item:first-child{padding-left:var-padding-left--list-item--first;margin:var-margin--list-item--first;border-top:0;border-bottom:var-border-bottom--list-item--first}.topcoat-list__item:last-child{padding-left:var-padding-left--list-item--last;margin:var-margin--list-item--last;border-top:var-border-top--list-item--last;border-bottom:1px solid #b3b3b3}.topcoat-list__item:nth-child(2){border-top:var-border-top--list-item--2}.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}.navigation-bar,.topcoat-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,.topcoat-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,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:3.375rem;height:2.5rem;padding-left:1rem;padding-right:1rem;background:var-background-color;background:#f2bc00;color:#fff;box-shadow:none;border-bottom:1px solid #8b8b8b}.topcoat-navigation-bar__line-height{line-height:3.375rem!important;line-height:2.5rem!important}.topcoat-navigation-bar__bg{background:var-background-color;background:#f2bc00}.topcoat-navigation-bar__item{margin:0;line-height:3.375rem;line-height:2.5rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#fff}.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:0 .4em;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#ec514e;color:#fff}body{background-color:#f5f0e8}.page{background-color:#f5f0e8}.topcoat-page__bg{background-color:#f5f0e8}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.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;color:#666;line-height:1.875rem;text-align:left}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:var-background-color;background:#fff;border:1px solid #f2bc00;border:1px solid #b3b3b3;box-shadow:none}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#f2bc00;border:1px solid transparent;box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:0;border:1px solid #f2bc00;box-shadow:none,none}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #f2bc00;border:1px solid #f2bc00;background-color:#f2bc00;background-color:transparent;box-shadow:none}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #f2bc00;background:var-background-color;box-shadow:none}.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 #f2bc00;border:0;background-color:var-background-color--input;background-color:#f2bc00;height:.3rem;border-radius:0;border-radius:3px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #f2bc00;background-color:var-background-color--input;background-color:#f2bc00;height:.3rem;border-radius:0;border-radius:var-border-radius--none}.topcoat-range::-webkit-slider-thumb{height:2rem;height:1rem;width:1rem;background-color:var-background-color;background-color:#fff;border:1px solid #f2bc00;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range::-moz-range-thumb{height:2rem;width:1rem;background-color:var-background-color;border:1px solid #f2bc00;border:1px solid #8a8a8a;border-radius:4px;border-radius:50%;box-shadow:none}.topcoat-range:focus::-webkit-slider-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.topcoat-range:focus::-moz-range-thumb{border:0;border:1px solid #8a8a8a;box-shadow:none}.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:2rem;height:2rem;font-size:16px;border:1px solid #f2bc00;border:0;background-color:#fff;background-color:#faf7f3;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:var-color--search-input;padding:0 0 0 2.2rem;border-radius:0;border-radius:4px;background-image:url(../img/search.svg);background-position:1rem center;background-position:var-background-position--search-input;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#ececec;background-color:var-background-color--search-input--focus;color:#000;color:var-color--search-input--focus;border:0;border:0;box-shadow:var-box-shadow--text-input,none}.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;margin-right:var-margin-right--search-decoration}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input:disabled::-moz-placeholder{color:#000}.topcoat-search-input:disabled:-ms-input-placeholder{color:#000}.topcoat-search-input--large{line-height:3.375rem;height:3.375rem;font-size:1.3rem;font-weight:200;padding:0 0 0 2.9rem;border-radius:40px;border-radius:4px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#000}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-search-input--large:disabled::-moz-placeholder{color:#000}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#000}.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:16px;padding:0 1.25rem;border-radius:4px;border-radius:30px;border:1px solid #f2bc00;border:0;overflow:hidden;width:4rem;height:var-height--switch}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:4rem;border:var-border--switch__label;margin:var-margin--switch__label}.topcoat-switch__toggle:before{content:'';color:#0083e8;background-color:#f2bc00;right:-.08rem;padding-left:1.5rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__toggle{line-height:2rem;line-height:2rem;height:2rem;height:2rem;width:2rem;border-radius:4px;border-radius:50%;color:#c6c8c8;text-shadow:0 1px none;background-color:var-background-color;background-color:#fff;border:1px solid #f2bc00;border:1px solid #b3b3b3;margin-left:-1.27rem;margin-bottom:0;margin-top:0;box-shadow:none;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'';background-color:#b3b3b3;left:-.06rem;padding-left:2rem;height:1.5rem;top:3px;border-radius:15px}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:.75rem;background-color:var-background-color--switch__toggle--checked}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #f2bc00;box-shadow:none}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:0;border:1px solid #b3b3b3;box-shadow:none}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,.topcoat-switch__input:checked+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label--checked;-webkit-transition:var-transition--switch__label--checked;transition:var-transition--switch__label--checked}.topcoat-switch__input+.topcoat-switch__toggle:after,.topcoat-switch__input+.topcoat-switch__toggle:before{background-color:var-background-color--switch__label;-webkit-transition:var-transition--switch__label;transition:var-transition--switch__label}.topcoat-switch__input:checked+.topcoat-switch__toggle:after,box-shadow var-box-shadow--switch__label--after--checked,.topcoat-switch__input+.topcoat-switch__toggle:after{box-shadow:var-box-shadow--switch__label--after}.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{height:var-height--tab-bar;background-color:#eae5e3;border-top:1px solid #b5b0aa}.topcoat-tab-bar__button{padding:0 1.25rem;height:2rem;height:3rem;line-height:2rem;line-height:3rem;letter-spacing:1px;color:#c6c8c8;color:#b3b3b3;text-shadow:0 1px none;vertical-align:top;background-color:var-background-color;background-color:transparent;box-shadow:none;border-top:1px solid #f2bc00;border-top:0}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#f2bc00;background-color:transparent;box-shadow:none;border-top:var-border-top--tab-bar--active}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;border-top:var-border-top--tab-bar--focus;box-shadow:none,none;box-shadow:none;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:2rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #f2bc00;border:1px solid #b3b3b3;border-radius:4px;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#000;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#ececec;color:#000;color:var-color--text-input--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input:disabled::-moz-placeholder{color:#000}.topcoat-text-input:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input:invalid{border:1px solid red;color:red}.topcoat-text-input--large{line-height:3.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#000}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-text-input--large:disabled::-moz-placeholder{color:#000}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#000}.topcoat-text-input--large:invalid{border:1px solid red;color:red}.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:2rem;font-size:2.5rem;font-weight:200;border-radius:4px;line-height:2rem;border:1px solid #f2bc00;border:1px solid #b3b3b3;background-color:#fff;box-shadow:var-box-shadow--text-input;color:#c6c8c8;color:#b3b3b3;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#ececec;color:#000;color:var-color--textarea--focus;border:0;border:1px solid #b3b3b3;box-shadow:var-box-shadow--text-input,none}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea:disabled::-moz-placeholder{color:#000}.topcoat-textarea:disabled:-ms-input-placeholder{color:#000}.topcoat-textarea--large{font-size:3rem;line-height:3.375rem}.topcoat-textarea--large:disabled{color:#000}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#000}.topcoat-textarea--large:disabled::-moz-placeholder{color:#000}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#000}@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:#f5f0e8;color:#000;color:var-color--body;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}\ No newline at end of filediff --git a/topcoat/demo/index.html b/topcoat/demo/index.htmlindex 4303779..18ab673 100644--- a/topcoat/demo/index.html+++ b/topcoat/demo/index.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -40,31 +42,6 @@           </div>           <div id="pageNav">             <ul>-              <li><a href="#button-bar">Button Bar</a></li>-              <li><a href="#large-buttonbar">Large Button Bar</a></li>-              <li><a href="#button">Button</a></li>-              <li><a href="#quiet-button">Quiet Button</a></li>-              <li><a href="#large-button">Large Button</a></li>-              <li><a href="#large-quietbutton">Large Quiet Button</a></li>-              <li><a href="#call-toaction button">Call To Action Button</a></li>-              <li><a href="#large-callto action button">Large Call To Action Button</a></li>-              <li><a href="#checkbox">Checkbox</a></li>-              <li><a href="#icon-button">Icon Button</a></li>-              <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>-              <li><a href="#large-iconbutton">Large Icon Button</a></li>-              <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>-              <li><a href="#notification">Notification</a></li>-              <li><a href="#page">Page</a></li>-              <li><a href="#radio-button">Radio Button</a></li>-              <li><a href="#range">Range</a></li>-              <li><a href="#search-input">Search Input</a></li>-              <li><a href="#large-searchinput">Large Search Input</a></li>-              <li><a href="#switch">Switch</a></li>-              <li><a href="#tab-bar">Tab Bar</a></li>-              <li><a href="#text-input">Text input</a></li>-              <li><a href="#large-textinput">Large Text Input</a></li>-              <li><a href="#textarea">Textarea</a></li>-              <li><a href="#large-textarea">Large Textarea</a></li>             </ul>           </div>         </div>@@ -197,3654 +174,6 @@             </div>             <div style="clear: both"></div>           </article>-          <article id="button-bar" class="component">-            <header>-              <h2>Button Bar</h2>-            </header>-            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Three</button>  </div></div></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button-bar {-  margin: var-button-bar-margin;-}--.topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {-  border-top-left-radius: 4px;-  border-bottom-left-radius: 4px;-}--.topcoat-button-bar &gt; .topcoat-button-bar__item:last-child {-  border-top-right-radius: 4px;-  border-bottom-right-radius: 4px;-}--.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button,-.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {-  border-right: none;-  border-right: var-border-right--button-bar__button__first;-}--.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button,-.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button--large {-  border-left: none;-  border-right: var-border-right--button-bar__button__last;-}--.topcoat-button-bar__button {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button:active,-.topcoat-button-bar__button--large:active,-:checked + .topcoat-button-bar__button {-  background-color: var-background-color--button-bar--button--active;-  color: var-color--button-bar__button--active;-  border: var-border--button-bar__button;-}--.topcoat-button-bar__button:hover {-  background-color: var-background-color--button-bar--button--hover;-}--.topcoat-button-bar__button:focus,-.topcoat-button-bar__button--large:focus {-  z-index: 1;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-buttonbar" class="component">-            <header>-              <h2>Large Button Bar</h2>-            </header>-            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Three</button>  </div></div></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button-bar__button--large {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button--large:hover {-  background-color: var-background-color--button-bar--button--hover;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="button" class="component">-            <header>-              <h2>Button</h2>-            </header>-            <section class="component"><button class="topcoat-button">Button</button><button class="topcoat-button" disabled>Button</button></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button,-.topcoat-button--quiet,-.topcoat-button--large,-.topcoat-button--large--quiet,-.topcoat-button--cta,-.topcoat-button--large--cta {-  padding: 0 0.563rem;-  font-size: 12px;-  line-height: 1.313rem;-  letter-spacing: 0;-  color: #c6c8c8;-  color: var-color__button;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: top;-  background-color: #595b5b;-  background-color: var-background-color__button;-  box-shadow: inset 0 1px #737373;-  border: 1px solid #333434;-  border: var-border--button;-  border-radius: 4px;-}--.topcoat-button:hover,-.topcoat-button--quiet:hover,-.topcoat-button--large:hover,-.topcoat-button--large--quiet:hover {-  background-color: #626465;-  background-color: var-background-color--hover__button;-}--.topcoat-button:active,-.topcoat-button--large:active {-  background-color: #3f4041;-  background-color: var-background-color--down__button;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-  color: var-color--button--active;-}--.topcoat-button:focus,-.topcoat-button--quiet:focus,-.topcoat-button--large:focus,-.topcoat-button--large--quiet:focus,-.topcoat-button--cta:focus,-.topcoat-button--large--cta:focus {-  outline: 0;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="quiet-button" class="component">-            <header>-              <h2>Quiet Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--quiet">Button</button><button class="topcoat-button--quiet" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--quiet&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-}--.topcoat-button--quiet:hover,-.topcoat-button--large--quiet:hover {-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  border: 1px solid #333434;-  border: var-border--hover__button--quiet;-  background-color: var-background-color--quiet-hover;-  box-shadow: inset 0 1px #737373;-  background-color: var-background-color--quiet-hover;-}--.topcoat-button--quiet:active,-.topcoat-button--large--quiet:active {-  color: #c6c8c8;-  color: var-color--active__button--quiet;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #3f4041;-  background-color: var-background-color--quiet-active;-  border: 1px solid #333434;-  border: var-border--active__button--quiet;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-button" class="component">-            <header>-              <h2>Large Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--large" >Button</button><button class="topcoat-button--large" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--large,-.topcoat-button--large--quiet {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-quietbutton" class="component">-            <header>-              <h2>Large Quiet Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--large--quiet" >Button</button><button class="topcoat-button--large--quiet" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--quiet&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--large--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  color: var-quiet-button-color;-}--.topcoat-button--large--quiet:active {-  color: var-color--quiet-active;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="call-toaction button" class="component">-            <header>-              <h2>Call To Action Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--cta" >Button</button><button class="topcoat-button--cta" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-callto action button" class="component">-            <header>-              <h2>Large Call To Action Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--large--cta" >Button</button><button class="topcoat-button--large--cta" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--large--cta {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;checkbox&quot;] {-  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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;checkbox&quot;] {-  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=&quot;checkbox&quot;]: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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="checkbox" class="component">-            <header>-              <h2>Checkbox</h2>-            </header>-            <section class="component"><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></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot;&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Default&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot; disabled&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-checkbox__checkmark {-  height: 1rem;-}--input[type=&quot;checkbox&quot;] {-  height: 1rem;-  width: 1rem;-  margin-top: 0;-  margin-right: -1rem;-  margin-bottom: -1rem;-  margin-left: 0;-}--input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {-  opacity: 1;-}--.topcoat-checkbox {-  line-height: 1rem;-}--.topcoat-checkbox__checkmark:before {-  width: 1rem;-  height: 1rem;-  background: #595b5b;-  background: var-background-color--checkmark;-  border: 1px solid #333434;-  border: var-border--checkbox;-  border-radius: 3px;-  box-shadow: inset 0 1px #737373;-  left: 0;-}--.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 #c6c8c8;-  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=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {-  border: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type=&quot;checkbox&quot;]:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #333434;-  border: var-border--checkbox--active;-  background-color: #3f4041;-  background-color: var-background-color--down--checkbox;-  border: var-border--checkbox--active;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #333434;-  background: #595b5b;-  box-shadow: inset 0 1px #737373;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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-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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="icon-button" class="component">-            <header>-              <h2>Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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: #c6c8c8;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: baseline;-  background-color: #595b5b;-  background-color: var-background-color__icon-button;-  box-shadow: inset 0 1px #737373;-  border: 1px solid #333434;-  border: var-border--icon-button;-  border-radius: 4px;-  border-radius: var-icon-button-border-radius;-}--.topcoat-icon-button:hover,-.topcoat-icon-button--quiet:hover,-.topcoat-icon-button--large:hover,-.topcoat-icon-button--large--quiet:hover {-  background-color: #626465;-}--.topcoat-icon-button:active {-  background-color: #3f4041;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--.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 {-  outline: 0;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="quiet-iconbutton" class="component">-            <header>-              <h2>Quiet Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-icon-button--quiet {-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;-}--.topcoat-icon-button--quiet:hover,-.topcoat-icon-button--large--quiet:hover {-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  border: 1px solid #333434;-  border: var-border--icon-button--quite--hover;-  box-shadow: inset 0 1px #737373;-}--.topcoat-icon-button--quiet:active,-.topcoat-icon-button--large--quiet:active {-  color: #c6c8c8;-  color: var-color--icon-button--quiet--active;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #3f4041;-  background-color: var-background-color--icon-button-quiet--down;-  border: 1px solid #333434;-  border: var-border--icon-button--quite--active;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-iconbutton" class="component">-            <header>-              <h2>Large Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-icon-button--large,-.topcoat-icon-button--large--quiet {-  width: 1.688rem;-  height: 1.688rem;-  line-height: 1.688rem;-}--.topcoat-icon-button--large:active {-  background-color: #3f4041;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-quieticon button" class="component">-            <header>-              <h2>Large Quiet Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.list {-  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;-  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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: none;-  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: none;-}--.navigation-bar__title {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  text-overflow: ellipsis;-  white-space: nowrap;-  overflow: hidden;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 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;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="notification" class="component">-            <header>-              <h2>Notification</h2>-            </header>-            <section class="component"><span class="topcoat-notification">1</span></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;span class=&quot;topcoat-notification&quot;&gt;1&lt;/span&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-notification {-  padding: 0.15em 0.5em 0.2em;-  width: var-notification-width;-  height: var-notification-height;-  border-radius: 2px;-  background-color: #ec514e;-  color: #fff;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="page" class="component">-            <header>-              <h2>Page</h2>-            </header>-            <section class="component"><div class="page"></div></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;page&quot;&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.page {-  background-color: var-background-color--page;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;radio&quot;] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;radio&quot;] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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=&quot;radio&quot;]:disabled + .topcoat-radio-button__checkmark {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="radio-button" class="component">-            <header>-              <h2>Radio Button</h2>-            </header>-            <section class="component"><!-- NO LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- LEFT LABEL --><label class="topcoat-radio-button">  Left label  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- RIGHT LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div>  Right label</label><br><br><!-- DISABLED --><label class="topcoat-radio-button">  <input type="radio" name="topcoat" Disabled>  <div class="topcoat-radio-button__checkmark"></div>  Disabled</label></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;!-- NO LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- LEFT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  Left label  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- RIGHT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Right label&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- DISABLED --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot; Disabled&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-input[type=&quot;radio&quot;] {-  height: 1.063rem;-  width: 1.063rem;-  margin-top: 0;-  margin-right: -1.063rem;-  margin-bottom: -1.063rem;-  margin-left: 0;-}--input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {-  opacity: 1;-}--.topcoat-radio-button {-  color: #c6c8c8;-  color: var-color--radio-button;-  line-height: 1.063rem;-  text-align: left;-}--.topcoat-radio-button__checkmark:before {-  width: 1.063rem;-  height: 1.063rem;-  background: #595b5b;-  background: var-background--radio-button--before;-  border: 1px solid #333434;-  border: var-border--radio-button--before;-  box-shadow: inset 0 1px #737373;-}--.topcoat-radio-button__checkmark {-  position: relative;-  width: 1.063rem;-  height: 1.063rem;-}--.topcoat-radio-button__checkmark:after {-  opacity: 0;-  width: 0.313rem;-  height: 0.313rem;-  background: #c6c8c8;-  border: 1px solid rgba(0,0,0,0.05);-  box-shadow: 0 1px rgba(255,255,255,0.1);-  -webkit-transform: none;-  -ms-transform: none;-  transform: none;-  top: 0.313rem;-  left: 0.313rem;-}--input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {-  border: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type=&quot;radio&quot;]:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #333434;-  border: var-border--radio-button--active;-  background-color: #3f4041;-  background-color: var-background-color--down--radio-button;-  box-shadow: inset 0 1px rgba(0,0,0,0.05);-}--input[type=&quot;radio&quot;]:disabled:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #333434;-  background: #595b5b;-  box-shadow: inset 0 1px #737373;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--.range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--.range__thumb {-  cursor: pointer;-}--.range__thumb--webkit {-  cursor: pointer;-  -webkit-appearance: none;-}--.range:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--.range,-.topcoat-range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -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: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="range" class="component">-            <header>-              <h2>Range</h2>-            </header>-            <section class="component"><input type="range" class="topcoat-range"><input type="range" class="topcoat-range" disabled></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot;&gt;&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot; disabled&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-range {-  border-radius: 4px;-  border: 1px solid #333434;-  border: var-border--range;-  background-color: #454646;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--range;-}--.topcoat-range::-moz-range-track {-  border-radius: 4px;-  border: 1px solid #333434;-  background-color: #454646;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--none;-}--.topcoat-range::-webkit-slider-thumb {-  height: 1.313rem;-  height: 0.75rem;-  width: 0.75rem;-  background-color: #595b5b;-  background-color: var-background-color--range__thumb;-  border: 1px solid #333434;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #737373;-}--.topcoat-range::-moz-range-thumb {-  height: 1.313rem;-  width: 0.75rem;-  background-color: #595b5b;-  border: 1px solid #333434;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #737373;-}--.topcoat-range:focus::-webkit-slider-thumb {-  border: none;-  box-shadow: none;-}--.topcoat-range:focus::-moz-range-thumb {-  border: none;-  box-shadow: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.search-input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--input[type=&quot;search&quot;]::-webkit-search-cancel-button {-  -webkit-appearance: none;-}--.search-input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.search-input,-.topcoat-search-input,-.topcoat-search-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--input[type=&quot;search&quot;]::-webkit-search-cancel-button {-  -webkit-appearance: none;-}--.search-input:disabled,-.topcoat-search-input:disabled,-.topcoat-search-input--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="search-input" class="component">-            <header>-              <h2>Search Input</h2>-            </header>-            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input"><input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot; disabled&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-search-input,-.topcoat-search-input--large {-  line-height: 1.313rem;-  height: 1.313rem;-  font-size: 12px;-  border: 1px solid #333434;-  border: var-border--search-input;-  background-color: #454646;-  background-color: var-background-color--search-input;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #c6c8c8;-  padding: 0 0 0 1.3rem;-  border-radius: 15px;-  border-radius: var-search-input--border-radius;-  background-image: url(&quot;../img/search.svg&quot;);-  background-position: 1rem center;-  background-repeat: no-repeat;-  background-size: 12px;-}--.topcoat-search-input:focus,-.topcoat-search-input--large:focus {-  background-color: #595b5b;-  background-color: var-background-color--search-input--focus;-  color: #fff;-  border: none;-  border: var-border--search-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.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: #fff;-}--.topcoat-search-input:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-search-input:disabled:-ms-input-placeholder {-  color: #fff;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-searchinput" class="component">-            <header>-              <h2>Large Search Input</h2>-            </header>-            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large"><input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot; disabled&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-search-input--large {-  line-height: 1.688rem;-  height: 1.688rem;-  font-size: 0.875rem;-  font-weight: 400;-  padding: 0 0 0 1.8rem;-  border-radius: 25px;-  border-radius: var-search-input--border-radius;-  background-position: 1.2rem center;-  background-size: 0.875rem;-}--.topcoat-search-input--large:disabled {-  color: #fff;-}--.topcoat-search-input--large:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-search-input--large:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-search-input--large:disabled:-ms-input-placeholder {-  color: #fff;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="switch" class="component">-            <header>-              <h2>Switch</h2>-            </header>-            <section class="component"><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input">  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" checked>  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" disabled>  <div class="topcoat-switch__toggle"></div></label></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot;&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; checked&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; disabled&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-switch {-  font-size: 12px;-  padding: 0 0.563rem;-  border-radius: 4px;-  border-radius: var-switch--border-radius;-  border: 1px solid #333434;-  border: var-border--switch;-  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: #3f4041;-  right: 0.8rem;-  padding-left: 0.75rem;-  height: var-height--switch__label--left;-  top: var-top--switch__label--left;-  border-radius: var-border-radius--switch__label--left;-}--.topcoat-switch__toggle {-  line-height: 1.313rem;-  line-height: var-line-height--switch__toggle;-  height: 1.313rem;-  height: var-height--switch__toggle;-  width: 1rem;-  border-radius: 4px;-  border-radius: var-border-radius--switch__toggle;-  color: #c6c8c8;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  background-color: #595b5b;-  background-color: var-background-color--switch__toggle;-  border: 1px solid #333434;-  border: var-border--switch__toggle;-  margin-left: -0.6rem;-  margin-bottom: -1px;-  margin-top: -1px;-  box-shadow: inset 0 1px #737373;-  -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: #3f4041;-  left: 0.8rem;-  padding-left: 0.6rem;-  height: var-height--switch__label--right;-  top: var-top--switch__label--right;-  border-radius: var-border-radius--switch__label--right;-}--.topcoat-switch__input:checked + .topcoat-switch__toggle {-  margin-left: 1.85rem;-}--.topcoat-switch__input:active + .topcoat-switch__toggle {-  border: 1px solid #333434;-  box-shadow: inset 0 1px #737373;-}--.topcoat-switch__input:focus + .topcoat-switch__toggle {-  border: none;-  box-shadow: none;-}--.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,-.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {-  background: transparent;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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-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: 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-tab-bar__button:disabled {-  opacity: 0.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 &gt; input,-.topcoat-tab-bar__item &gt; input {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="tab-bar" class="component">-            <header>-              <h2>Tab Bar</h2>-            </header>-            <section class="component"><div class="topcoat-tab-bar">  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">One</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Two</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Three</button>  </label></div></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-tab-bar&quot;&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/label&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-tab-bar {-  background-color: var-background-color--tab-bar;-  border-top: var-border-top--tab-bar;-}--.topcoat-tab-bar__button {-  padding: 0 0.563rem;-  height: 1.313rem;-  height: var-line-height--tab-bar__button;-  line-height: 1.313rem;-  line-height: var-line-height--tab-bar__button;-  letter-spacing: 0;-  color: #c6c8c8;-  color: var-color--tab-bar__button;-  text-shadow: 0 -1px rgba(0,0,0,0.69);-  vertical-align: top;-  background-color: #595b5b;-  background-color: var-background-color--tab-bar__button;-  box-shadow: inset 0 1px #737373;-  border-top: 1px solid #333434;-  border-top: var-border--tab-bar__button;-}--.topcoat-tab-bar__button:active,-.topcoat-tab-bar__button--large:active,-:checked + .topcoat-tab-bar__button {-  color: #288edf;-  background-color: #3f4041;-  box-shadow: inset 0 0 1px rgba(0,0,0,0.05);-}--.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), none;-  box-shadow: var-box-shadow--tab-bar__button--focus;-  outline: 0;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.input,-.topcoat-text-input,-.topcoat-text-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled,-.topcoat-text-input:disabled,-.topcoat-text-input--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="text-input" class="component">-            <header>-              <h2>Text input</h2>-            </header>-            <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value=""><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="" disabled><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-text-input,-.topcoat-text-input--large {-  line-height: 1.313rem;-  font-size: 12px;-  letter-spacing: 0;-  padding: 0 0.563rem;-  border: 1px solid #333434;-  border: var-border--text-input;-  border-radius: 4px;-  background-color: #454646;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #c6c8c8;-  color: var-color--text-input;-  vertical-align: top;-}--.topcoat-text-input:focus,-.topcoat-text-input--large:focus {-  background-color: #595b5b;-  color: #fff;-  border: none;-  border: var-border--text-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.topcoat-text-input:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-text-input:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-text-input:disabled:-ms-input-placeholder {-  color: #fff;-}--.topcoat-text-input:invalid {-  border: 1px solid #ec514e;-  color: var-color-invalid;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-textinput" class="component">-            <header>-              <h2>Large Text Input</h2>-            </header>-            <section class="component"><input type="text" class="topcoat-text-input--large" value="" placeholder="text"><br><br><input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled><br><br><input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-text-input--large {-  line-height: 1.688rem;-  font-size: 0.875rem;-}--.topcoat-text-input--large:disabled {-  color: #fff;-}--.topcoat-text-input--large:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-text-input--large:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-text-input--large:disabled:-ms-input-placeholder {-  color: #fff;-}--.topcoat-text-input--large:invalid {-  border: 1px solid #ec514e;-  color: var-color-invalid;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled,-.topcoat-textarea:disabled,-.topcoat-textarea--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="textarea" class="component">-            <header>-              <h2>Textarea</h2>-            </header>-            <section class="component"><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-textarea,-.topcoat-textarea--large {-  padding: 1rem;-  font-size: 1rem;-  font-weight: 400;-  border-radius: 4px;-  line-height: 1.313rem;-  border: 1px solid #333434;-  border: var-border--textarea;-  background-color: #454646;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #c6c8c8;-  color: var-color--textarea;-  letter-spacing: 0;-}--.topcoat-textarea:focus,-.topcoat-textarea--large:focus {-  background-color: #595b5b;-  color: #fff;-  border: none;-  border: var-border--focus--textarea;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.topcoat-textarea:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-textarea:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-textarea:disabled:-ms-input-placeholder {-  color: #fff;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-textarea" class="component">-            <header>-              <h2>Large Textarea</h2>-            </header>-            <section class="component"><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-textarea--large {-  font-size: 1.3rem;-  line-height: 1.688rem;-}--.topcoat-textarea--large:disabled {-  color: #fff;-}--.topcoat-textarea--large:disabled::-webkit-input-placeholder {-  color: #fff;-}--.topcoat-textarea--large:disabled::-moz-placeholder {-  color: #fff;-}--.topcoat-textarea--large:disabled:-ms-input-placeholder {-  color: #fff;-}--@font-face {-  font-family: &quot;Source Sans&quot;;-  src: url(&quot;../font/SourceSansPro-Regular.otf&quot;);-}--@font-face {-  font-family: &quot;Source Sans&quot;;-  src: url(&quot;../font/SourceSansPro-Light.otf&quot;);-  font-weight: 200;-}--@font-face {-  font-family: &quot;Source Sans&quot;;-  src: url(&quot;../font/SourceSansPro-Semibold.otf&quot;);-  font-weight: 600;-}--body {-  margin: 0;-  padding: 0;-  background: #4b4d4e;-  color: #000;-  font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;-  font-weight: 400;-}--:focus {-  outline-color: transparent;-  outline-style: none;-}--.topcoat-icon--menu-stack {-  background: url(&quot;../img/hamburger_light.svg&quot;) 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: 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;-}--/* This file should include color and image variables corresponding to the dark theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Textarea */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the light theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Secondary colors (based on colors above)--Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!--*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Containers */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* Containers */--/* Button */--/* Bar Button */--/* Icon Button */--/* Navigation bar */--/* List */--/* Notification */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* Tab-bar */--/* Call To Action */--/* Text Input */--/* Radio input */--/* Overlay */--/* Textarea */--/* Progress bar container */--/* Progress bar progress */--/* Switch */--/* Notification */--/* Search */</code></pre>-                </div>-              </section>-            </footer>-          </article>         </div>         <footer></footer>       </div>diff --git a/topcoat/demo/topcoat-desktop-light.html b/topcoat/demo/topcoat-desktop-light.htmlindex 3f6390c..83119a4 100644--- a/topcoat/demo/topcoat-desktop-light.html+++ b/topcoat/demo/topcoat-desktop-light.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html" selected="selected">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -40,31 +42,6 @@           </div>           <div id="pageNav">             <ul>-              <li><a href="#button-bar">Button Bar</a></li>-              <li><a href="#large-buttonbar">Large Button Bar</a></li>-              <li><a href="#button">Button</a></li>-              <li><a href="#quiet-button">Quiet Button</a></li>-              <li><a href="#large-button">Large Button</a></li>-              <li><a href="#large-quietbutton">Large Quiet Button</a></li>-              <li><a href="#call-toaction button">Call To Action Button</a></li>-              <li><a href="#large-callto action button">Large Call To Action Button</a></li>-              <li><a href="#checkbox">Checkbox</a></li>-              <li><a href="#icon-button">Icon Button</a></li>-              <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>-              <li><a href="#large-iconbutton">Large Icon Button</a></li>-              <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>-              <li><a href="#notification">Notification</a></li>-              <li><a href="#page">Page</a></li>-              <li><a href="#radio-button">Radio Button</a></li>-              <li><a href="#range">Range</a></li>-              <li><a href="#search-input">Search Input</a></li>-              <li><a href="#large-searchinput">Large Search Input</a></li>-              <li><a href="#switch">Switch</a></li>-              <li><a href="#tab-bar">Tab Bar</a></li>-              <li><a href="#text-input">Text input</a></li>-              <li><a href="#large-textinput">Large Text Input</a></li>-              <li><a href="#textarea">Textarea</a></li>-              <li><a href="#large-textarea">Large Textarea</a></li>             </ul>           </div>         </div>@@ -197,3654 +174,6 @@             </div>             <div style="clear: both"></div>           </article>-          <article id="button-bar" class="component">-            <header>-              <h2>Button Bar</h2>-            </header>-            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Three</button>  </div></div></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button-bar {-  margin: var-button-bar-margin;-}--.topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {-  border-top-left-radius: 4px;-  border-bottom-left-radius: 4px;-}--.topcoat-button-bar &gt; .topcoat-button-bar__item:last-child {-  border-top-right-radius: 4px;-  border-bottom-right-radius: 4px;-}--.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button,-.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {-  border-right: none;-  border-right: var-border-right--button-bar__button__first;-}--.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button,-.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button--large {-  border-left: none;-  border-right: var-border-right--button-bar__button__last;-}--.topcoat-button-bar__button {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button:active,-.topcoat-button-bar__button--large:active,-:checked + .topcoat-button-bar__button {-  background-color: var-background-color--button-bar--button--active;-  color: var-color--button-bar__button--active;-  border: var-border--button-bar__button;-}--.topcoat-button-bar__button:hover {-  background-color: var-background-color--button-bar--button--hover;-}--.topcoat-button-bar__button:focus,-.topcoat-button-bar__button--large:focus {-  z-index: 1;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-buttonbar" class="component">-            <header>-              <h2>Large Button Bar</h2>-            </header>-            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Three</button>  </div></div></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button-bar__button--large {-  border-radius: inherit;-  background-color: var-background-color--button-bar;-  color: var-color--button-bar--button;-  border: var-border--button-bar__button;-  border-right: var-border-right--button-bar__button;-}--.topcoat-button-bar__button--large:hover {-  background-color: var-background-color--button-bar--button--hover;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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 {-  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 {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="button" class="component">-            <header>-              <h2>Button</h2>-            </header>-            <section class="component"><button class="topcoat-button">Button</button><button class="topcoat-button" disabled>Button</button></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button,-.topcoat-button--quiet,-.topcoat-button--large,-.topcoat-button--large--quiet,-.topcoat-button--cta,-.topcoat-button--large--cta {-  padding: 0 0.563rem;-  font-size: 12px;-  line-height: 1.313rem;-  letter-spacing: 0;-  color: #454545;-  color: var-color__button;-  text-shadow: 0 1px #fff;-  vertical-align: top;-  background-color: #e5e9e8;-  background-color: var-background-color__button;-  box-shadow: inset 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--button;-  border-radius: 4px;-}--.topcoat-button:hover,-.topcoat-button--quiet:hover,-.topcoat-button--large:hover,-.topcoat-button--large--quiet:hover {-  background-color: #eff1f1;-  background-color: var-background-color--hover__button;-}--.topcoat-button:active,-.topcoat-button--large:active {-  background-color: #d2d6d6;-  background-color: var-background-color--down__button;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-  color: var-color--button--active;-}--.topcoat-button:focus,-.topcoat-button--quiet:focus,-.topcoat-button--large:focus,-.topcoat-button--large--quiet:focus,-.topcoat-button--cta:focus,-.topcoat-button--large--cta:focus {-  outline: 0;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="quiet-button" class="component">-            <header>-              <h2>Quiet Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--quiet">Button</button><button class="topcoat-button--quiet" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--quiet&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--quiet {-  color: var-quiet-button-color;-  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;-  border: var-border--hover__button--quiet;-  background-color: var-background-color--quiet-hover;-  box-shadow: inset 0 1px #fff;-  background-color: var-background-color--quiet-hover;-}--.topcoat-button--quiet:active,-.topcoat-button--large--quiet:active {-  color: #454545;-  color: var-color--active__button--quiet;-  text-shadow: 0 1px #fff;-  background-color: #d2d6d6;-  background-color: var-background-color--quiet-active;-  border: 1px solid #9daca9;-  border: var-border--active__button--quiet;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-button" class="component">-            <header>-              <h2>Large Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--large" >Button</button><button class="topcoat-button--large" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--large,-.topcoat-button--large--quiet {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-quietbutton" class="component">-            <header>-              <h2>Large Quiet Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--large--quiet" >Button</button><button class="topcoat-button--large--quiet" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--quiet&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--large--quiet {-  color: var-quiet-button-color;-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  color: var-quiet-button-color;-}--.topcoat-button--large--quiet:active {-  color: var-color--quiet-active;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="call-toaction button" class="component">-            <header>-              <h2>Call To Action Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--cta" >Button</button><button class="topcoat-button--cta" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-callto action button" class="component">-            <header>-              <h2>Large Call To Action Button</h2>-            </header>-            <section class="component"><button class="topcoat-button--large--cta" >Button</button><button class="topcoat-button--large--cta" disabled>Button</button></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-button--large--cta {-  font-size: 0.875rem;-  font-weight: 600;-  line-height: 1.688rem;-  padding: 0 0.875rem;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;checkbox&quot;] {-  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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;checkbox&quot;] {-  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=&quot;checkbox&quot;]: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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="checkbox" class="component">-            <header>-              <h2>Checkbox</h2>-            </header>-            <section class="component"><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></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot;&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Default&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot; disabled&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-checkbox__checkmark {-  height: 1rem;-}--input[type=&quot;checkbox&quot;] {-  height: 1rem;-  width: 1rem;-  margin-top: 0;-  margin-right: -1rem;-  margin-bottom: -1rem;-  margin-left: 0;-}--input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {-  opacity: 1;-}--.topcoat-checkbox {-  line-height: 1rem;-}--.topcoat-checkbox__checkmark:before {-  width: 1rem;-  height: 1rem;-  background: #e5e9e8;-  background: var-background-color--checkmark;-  border: 1px solid #9daca9;-  border: var-border--checkbox;-  border-radius: 3px;-  box-shadow: inset 0 1px #fff;-  left: 0;-}--.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: none;-  border-right: none;-  border-radius: 1px;-  -webkit-transform: rotate(-50deg);-  -ms-transform: rotate(-50deg);-  transform: rotate(-50deg);-}--input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {-  border: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type=&quot;checkbox&quot;]:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #9daca9;-  border: var-border--checkbox--active;-  background-color: #d2d6d6;-  background-color: var-background-color--down--checkbox;-  border: var-border--checkbox--active;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}--input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:before {-  border: 1px solid #9daca9;-  background: #e5e9e8;-  box-shadow: inset 0 1px #fff;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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-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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="icon-button" class="component">-            <header>-              <h2>Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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: #454545;-  text-shadow: 0 1px #fff;-  vertical-align: baseline;-  background-color: #e5e9e8;-  background-color: var-background-color__icon-button;-  box-shadow: inset 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--icon-button;-  border-radius: 4px;-  border-radius: var-icon-button-border-radius;-}--.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:active {-  background-color: #d2d6d6;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}--.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 {-  outline: 0;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="quiet-iconbutton" class="component">-            <header>-              <h2>Quiet Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-icon-button--quiet {-  background: transparent;-  border: 1px solid transparent;-  box-shadow: none;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;-}--.topcoat-icon-button--quiet:hover,-.topcoat-icon-button--large--quiet:hover {-  text-shadow: 0 1px #fff;-  border: 1px solid #9daca9;-  border: var-border--icon-button--quite--hover;-  box-shadow: inset 0 1px #fff;-}--.topcoat-icon-button--quiet:active,-.topcoat-icon-button--large--quiet:active {-  color: #454545;-  color: var-color--icon-button--quiet--active;-  text-shadow: 0 1px #fff;-  background-color: #d2d6d6;-  background-color: var-background-color--icon-button-quiet--down;-  border: 1px solid #9daca9;-  border: var-border--icon-button--quite--active;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-iconbutton" class="component">-            <header>-              <h2>Large Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-icon-button--large,-.topcoat-icon-button--large--quiet {-  width: 1.688rem;-  height: 1.688rem;-  line-height: 1.688rem;-}--.topcoat-icon-button--large:active {-  background-color: #d2d6d6;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-quieticon button" class="component">-            <header>-              <h2>Large Quiet Icon Button</h2>-            </header>-            <section class="component"><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></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.list {-  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;-  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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: none;-  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: none;-}--.navigation-bar__title {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  text-overflow: ellipsis;-  white-space: nowrap;-  overflow: hidden;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 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;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="notification" class="component">-            <header>-              <h2>Notification</h2>-            </header>-            <section class="component"><span class="topcoat-notification">1</span></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;span class=&quot;topcoat-notification&quot;&gt;1&lt;/span&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-notification {-  padding: 0.15em 0.5em 0.2em;-  width: var-notification-width;-  height: var-notification-height;-  border-radius: 2px;-  background-color: #ec514e;-  color: #fff;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="page" class="component">-            <header>-              <h2>Page</h2>-            </header>-            <section class="component"><div class="page"></div></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;page&quot;&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.page {-  background-color: var-background-color--page;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;radio&quot;] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--input[type=&quot;radio&quot;] {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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=&quot;radio&quot;]:disabled + .topcoat-radio-button__checkmark {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="radio-button" class="component">-            <header>-              <h2>Radio Button</h2>-            </header>-            <section class="component"><!-- NO LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- LEFT LABEL --><label class="topcoat-radio-button">  Left label  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- RIGHT LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div>  Right label</label><br><br><!-- DISABLED --><label class="topcoat-radio-button">  <input type="radio" name="topcoat" Disabled>  <div class="topcoat-radio-button__checkmark"></div>  Disabled</label></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;!-- NO LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- LEFT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  Left label  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- RIGHT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Right label&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- DISABLED --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot; Disabled&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-input[type=&quot;radio&quot;] {-  height: 1.063rem;-  width: 1.063rem;-  margin-top: 0;-  margin-right: -1.063rem;-  margin-bottom: -1.063rem;-  margin-left: 0;-}--input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {-  opacity: 1;-}--.topcoat-radio-button {-  color: #454545;-  color: var-color--radio-button;-  line-height: 1.063rem;-  text-align: left;-}--.topcoat-radio-button__checkmark:before {-  width: 1.063rem;-  height: 1.063rem;-  background: #e5e9e8;-  background: var-background--radio-button--before;-  border: 1px solid #9daca9;-  border: var-border--radio-button--before;-  box-shadow: inset 0 1px #fff;-}--.topcoat-radio-button__checkmark {-  position: relative;-  width: 1.063rem;-  height: 1.063rem;-}--.topcoat-radio-button__checkmark:after {-  opacity: 0;-  width: 0.313rem;-  height: 0.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: 0.313rem;-  left: 0.313rem;-}--input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {-  border: none;-  box-shadow: inset 0 1px rgba(255,255,255,0.36), none;-}--input[type=&quot;radio&quot;]:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #9daca9;-  border: var-border--radio-button--active;-  background-color: #d2d6d6;-  background-color: var-background-color--down--radio-button;-  box-shadow: inset 0 1px rgba(0,0,0,0.1);-}--input[type=&quot;radio&quot;]:disabled:active + .topcoat-radio-button__checkmark:before {-  border: 1px solid #9daca9;-  background: #e5e9e8;-  box-shadow: inset 0 1px #fff;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--.range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--.range__thumb {-  cursor: pointer;-}--.range__thumb--webkit {-  cursor: pointer;-  -webkit-appearance: none;-}--.range:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--/*-Copyright 2012 Adobe Systems Inc.;-Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-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 &quot;AS IS&quot; 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.-*/--.range,-.topcoat-range {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -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: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="range" class="component">-            <header>-              <h2>Range</h2>-            </header>-            <section class="component"><input type="range" class="topcoat-range"><input type="range" class="topcoat-range" disabled></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot;&gt;&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot; disabled&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-range {-  border-radius: 4px;-  border: 1px solid #9daca9;-  border: var-border--range;-  background-color: #d6dcdb;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--range;-}--.topcoat-range::-moz-range-track {-  border-radius: 4px;-  border: 1px solid #9daca9;-  background-color: #d6dcdb;-  background-color: var-background-color--range;-  height: 0.5rem;-  border-radius: 15px;-  border-radius: var-border-radius--none;-}--.topcoat-range::-webkit-slider-thumb {-  height: 1.313rem;-  height: 0.75rem;-  width: 0.75rem;-  background-color: #e5e9e8;-  background-color: var-background-color--range__thumb;-  border: 1px solid #9daca9;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #fff;-}--.topcoat-range::-moz-range-thumb {-  height: 1.313rem;-  width: 0.75rem;-  background-color: #e5e9e8;-  border: 1px solid #9daca9;-  border: var-range-border;-  border-radius: 4px;-  border-radius: var-round-border;-  box-shadow: inset 0 1px #fff;-}--.topcoat-range:focus::-webkit-slider-thumb {-  border: none;-  box-shadow: none;-}--.topcoat-range:focus::-moz-range-thumb {-  border: none;-  box-shadow: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.search-input {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--input[type=&quot;search&quot;]::-webkit-search-cancel-button {-  -webkit-appearance: none;-}--.search-input:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.search-input,-.topcoat-search-input,-.topcoat-search-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-  -webkit-appearance: none;-}--input[type=&quot;search&quot;]::-webkit-search-cancel-button {-  -webkit-appearance: none;-}--.search-input:disabled,-.topcoat-search-input:disabled,-.topcoat-search-input--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="search-input" class="component">-            <header>-              <h2>Search Input</h2>-            </header>-            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input"><input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot; disabled&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-search-input,-.topcoat-search-input--large {-  line-height: 1.313rem;-  height: 1.313rem;-  font-size: 12px;-  border: 1px solid #9daca9;-  border: var-border--search-input;-  background-color: #fff;-  background-color: var-background-color--search-input;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #454545;-  padding: 0 0 0 1.3rem;-  border-radius: 15px;-  border-radius: var-search-input--border-radius;-  background-image: url(&quot;../img/search.svg&quot;);-  background-position: 1rem center;-  background-repeat: no-repeat;-  background-size: 12px;-}--.topcoat-search-input:focus,-.topcoat-search-input--large:focus {-  background-color: #fff;-  background-color: var-background-color--search-input--focus;-  color: #454545;-  border: none;-  border: var-border--search-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.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;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-searchinput" class="component">-            <header>-              <h2>Large Search Input</h2>-            </header>-            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large"><input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot; disabled&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-search-input--large {-  line-height: 1.688rem;-  height: 1.688rem;-  font-size: 0.875rem;-  font-weight: 400;-  padding: 0 0 0 1.8rem;-  border-radius: 25px;-  border-radius: var-search-input--border-radius;-  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;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.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: none;-  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: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="switch" class="component">-            <header>-              <h2>Switch</h2>-            </header>-            <section class="component"><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input">  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" checked>  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" disabled>  <div class="topcoat-switch__toggle"></div></label></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot;&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; checked&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; disabled&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-switch {-  font-size: 12px;-  padding: 0 0.563rem;-  border-radius: 4px;-  border-radius: var-switch--border-radius;-  border: 1px solid #9daca9;-  border: var-border--switch;-  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: 0.8rem;-  padding-left: 0.75rem;-  height: var-height--switch__label--left;-  top: var-top--switch__label--left;-  border-radius: var-border-radius--switch__label--left;-}--.topcoat-switch__toggle {-  line-height: 1.313rem;-  line-height: var-line-height--switch__toggle;-  height: 1.313rem;-  height: var-height--switch__toggle;-  width: 1rem;-  border-radius: 4px;-  border-radius: var-border-radius--switch__toggle;-  color: #454545;-  text-shadow: 0 1px #fff;-  background-color: #e5e9e8;-  background-color: var-background-color--switch__toggle;-  border: 1px solid #9daca9;-  border: var-border--switch__toggle;-  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: 0.8rem;-  padding-left: 0.6rem;-  height: var-height--switch__label--right;-  top: var-top--switch__label--right;-  border-radius: var-border-radius--switch__label--right;-}--.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 #fff;-}--.topcoat-switch__input:focus + .topcoat-switch__toggle {-  border: none;-  box-shadow: none;-}--.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,-.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {-  background: transparent;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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-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: 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-tab-bar__button:disabled {-  opacity: 0.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 &gt; input,-.topcoat-tab-bar__item &gt; input {-  position: absolute;-  overflow: hidden;-  padding: 0;-  border: 0;-  opacity: 0.001;-  z-index: 1;-  vertical-align: top;-  outline: none;-}--.button-bar__button {-  border-radius: inherit;-}--.button-bar__item:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="tab-bar" class="component">-            <header>-              <h2>Tab Bar</h2>-            </header>-            <section class="component"><div class="topcoat-tab-bar">  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">One</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Two</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Three</button>  </label></div></section>-            <section class="examples">-              <h4>Examples</h4>-              <ul>-                <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>-              </ul>-            </section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-tab-bar&quot;&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/label&gt;&lt;/div&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-tab-bar {-  background-color: var-background-color--tab-bar;-  border-top: var-border-top--tab-bar;-}--.topcoat-tab-bar__button {-  padding: 0 0.563rem;-  height: 1.313rem;-  height: var-line-height--tab-bar__button;-  line-height: 1.313rem;-  line-height: var-line-height--tab-bar__button;-  letter-spacing: 0;-  color: #454545;-  color: var-color--tab-bar__button;-  text-shadow: 0 1px #fff;-  vertical-align: top;-  background-color: #e5e9e8;-  background-color: var-background-color--tab-bar__button;-  box-shadow: inset 0 1px #fff;-  border-top: 1px solid #9daca9;-  border-top: var-border--tab-bar__button;-}--.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), none;-  box-shadow: var-box-shadow--tab-bar__button--focus;-  outline: 0;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.input,-.topcoat-text-input,-.topcoat-text-input--large {-  padding: 0;-  margin: 0;-  font: inherit;-  color: inherit;-  background: transparent;-  border: none;-  -moz-box-sizing: border-box;-  box-sizing: border-box;-  background-clip: padding-box;-  vertical-align: top;-  outline: none;-}--.input:disabled,-.topcoat-text-input:disabled,-.topcoat-text-input--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="text-input" class="component">-            <header>-              <h2>Text input</h2>-            </header>-            <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value=""><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="" disabled><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-text-input,-.topcoat-text-input--large {-  line-height: 1.313rem;-  font-size: 12px;-  letter-spacing: 0;-  padding: 0 0.563rem;-  border: 1px solid #9daca9;-  border: var-border--text-input;-  border-radius: 4px;-  background-color: #fff;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #454545;-  color: var-color--text-input;-  vertical-align: top;-}--.topcoat-text-input:focus,-.topcoat-text-input--large:focus {-  background-color: #fff;-  color: #454545;-  border: none;-  border: var-border--text-input--focus;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.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;-  color: var-color-invalid;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-textinput" class="component">-            <header>-              <h2>Large Text Input</h2>-            </header>-            <section class="component"><input type="text" class="topcoat-text-input--large" value="" placeholder="text"><br><br><input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled><br><br><input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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;-  color: var-color-invalid;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--/**-*-* Copyright 2012 Adobe Systems Inc.;-*-* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);-* 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 &quot;AS IS&quot; 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.-*-*/--.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: none;-  vertical-align: top;-  resize: none;-  outline: none;-}--.textarea:disabled,-.topcoat-textarea:disabled,-.topcoat-textarea--large:disabled {-  opacity: 0.3;-  cursor: default;-  pointer-events: none;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="textarea" class="component">-            <header>-              <h2>Textarea</h2>-            </header>-            <section class="component"><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.topcoat-textarea,-.topcoat-textarea--large {-  padding: 1rem;-  font-size: 1rem;-  font-weight: 400;-  border-radius: 4px;-  line-height: 1.313rem;-  border: 1px solid #9daca9;-  border: var-border--textarea;-  background-color: #fff;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);-  color: #454545;-  color: var-color--textarea;-  letter-spacing: 0;-}--.topcoat-textarea:focus,-.topcoat-textarea--large:focus {-  background-color: #fff;-  color: #454545;-  border: none;-  border: var-border--focus--textarea;-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;-}--.topcoat-textarea:disabled::-webkit-input-placeholder {-  color: #454545;-}--.topcoat-textarea:disabled::-moz-placeholder {-  color: #454545;-}--.topcoat-textarea:disabled:-ms-input-placeholder {-  color: #454545;-}-</code></pre>-                </div>-              </section>-            </footer>-          </article>-          <article id="large-textarea" class="component">-            <header>-              <h2>Large Textarea</h2>-            </header>-            <section class="component"><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>-            <footer>-              <div class="showcode"><a href="#">Show code snippets</a></div>-              <section class="code">-                <div>-                  <h3>HTML</h3>-                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>-                </div>-                <div>-                  <h3>CSS</h3>-                  <pre class="css"><code data-language="css">-.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: &quot;Source Sans&quot;;-  src: url(&quot;../font/SourceSansPro-Regular.otf&quot;);-}--@font-face {-  font-family: &quot;Source Sans&quot;;-  src: url(&quot;../font/SourceSansPro-Light.otf&quot;);-  font-weight: 200;-}--@font-face {-  font-family: &quot;Source Sans&quot;;-  src: url(&quot;../font/SourceSansPro-Semibold.otf&quot;);-  font-weight: 600;-}--body {-  margin: 0;-  padding: 0;-  background: #dfe2e2;-  color: #000;-  font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;-  font-weight: 400;-}--:focus {-  outline-color: transparent;-  outline-style: none;-}--.topcoat-icon--menu-stack {-  background: url(&quot;../img/hamburger_dark.svg&quot;) 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: 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;-}--/* This file should include color and image variables corresponding to the dark theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Textarea */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the light theme */--/* ---------- colors ---------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* ---------- thickness ---------- */--/* ---------- shadows ---------- */--/* Secondary colors (based on colors above)--Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!--*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Containers */--/* Icon Button */--/* Navigation bar */--/* List */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* This file should include color and image variables corresponding to the onsen theme */--/* --------- colors --------- */--/* ---------- darken ---------- */--/* ---------- lighten ---------- */--/* ---------- alphas ---------- */--/* Page */--/* Call To Action */--/*Icon-Button*/--/* Icons */--/* Navigation Bar */--/* Text Input */--/* Text Area */--/* List */--/* Overlay */--/* Progress bar */--/* Checkbox */--/* Range input */--/* Radio Button */--/* Tab bar */--/* Switch */--/* Bar button */--/* Button */--/* Button Quiet*/--/* Notification */--/* Search-Input */--/* Containers */--/* Button */--/* Bar Button */--/* Icon Button */--/* Navigation bar */--/* List */--/* Notification */--/* Search Input */--/* Text Area */--/* Checkbox */--/* Radio */--/* Range input */--/* Search Input */--/* Switch */--/* Tab-bar */--/* Call To Action */--/* Text Input */--/* Radio input */--/* Overlay */--/* Textarea */--/* Progress bar container */--/* Progress bar progress */--/* Switch */--/* Notification */--/* Search */</code></pre>-                </div>-              </section>-            </footer>-          </article>         </div>         <footer></footer>       </div>diff --git a/topcoat/demo/topcoat-mobile-dark.html b/topcoat/demo/topcoat-mobile-dark.htmlindex 722680d..f7bc48d 100644--- a/topcoat/demo/topcoat-mobile-dark.html+++ b/topcoat/demo/topcoat-mobile-dark.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html" selected="selected">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: var-border-right--button-bar__button__first; }@@ -260,15 +269,20 @@   background-color: var-background-color--button-bar--button--active;   color: var-color--button-bar__button--active;   border: var-border--button-bar__button;+  border-right: var-border-right--button-bar__button;+  border-right: var-border-right--button-bar__button--active; }  .topcoat-button-bar__button:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: var-border-right--button-bar__button--focus; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: #626465;   background-color: var-background-color--hover__button;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: var-quiet-button-color;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: var-quiet-button-color;+  border: var-border__button--quiet;+}++.topcoat-button--quiet:disabled {+  border: var-border__button--quiet; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #1e7dc8;   box-shadow: inset 0 1px rgba(0,0,0,0.12); }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid var-color__button;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: var-border--checkbox--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -1098,10 +1137,10 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   text-shadow: 0 -1px rgba(0,0,0,0.69);   vertical-align: baseline;   background-color: #595b5b;-  background-color: var-background-color__icon-button;+  background-color: var-view-background;   box-shadow: inset 0 1px #737373;   border: 1px solid #333434;-  border: var-border--icon-button;+  border: none;   border-radius: 6px;   border-radius: var-icon-button-border-radius; }@@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: #626465;+  background-color: transparent; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,28 +1192,31 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;+  background-color: transparent;+  border: none;+  color: #c6c8c8; }  .topcoat-icon-button--quiet:hover, .topcoat-icon-button--large--quiet:hover {   text-shadow: 0 -1px rgba(0,0,0,0.69);   border: 1px solid #333434;-  border: var-border--icon-button--quite--hover;+  border: none;   box-shadow: inset 0 1px #737373;+  box-shadow: none; }  .topcoat-icon-button--quiet:active, .topcoat-icon-button--large--quiet:active {   color: #c6c8c8;-  color: var-color--icon-button--quiet--active;+  color: #dddfdf;   text-shadow: 0 -1px rgba(0,0,0,0.69);   background-color: #3f4041;-  background-color: var-background-color--icon-button-quiet--down;+  background-color: transparent;   border: 1px solid #333434;-  border: var-border--icon-button--quite--active;+  border: none;   box-shadow: inset 0 1px rgba(0,0,0,0.05);+  box-shadow: none; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: 1px solid #333434;   color: #c6c8c8;   padding: var-padding--list-container;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: var-background-color--list-item; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: var-background-color--list-item--active; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: 1px solid rgba(0,0,0,0.05);+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: var-border-bottom--list-item--last; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: var-border-bottom--navigation-bar; } +.topcoat-navigation-bar__line-height {+  line-height: 4.375rem !important;+  line-height: var-height--navigation-bar !important;+}++.topcoat-navigation-bar__bg {+  background: #595b5b;+  background: var-navigation-bar-background-color;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 4.375rem;@@ -1940,8 +2006,16 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #4b4d4e;+}+ .page {-  background-color: var-background-color--page;+  background-color: #4b4d4e;+}++.topcoat-page__bg {+  background-color: #4b4d4e; }  /**@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: var-border--radio-button--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: var-background-color--search-input;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2rem;   border-radius: 30px;   border-radius: var-search-input--border-radius;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #595b5b;   background-color: var-background-color--search-input--focus;   color: #fff;+  color: var-color--search-input--focus;   border: none;   border: var-border--search-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: var-border--switch;   overflow: hidden;   width: 6rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 5rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 2.7rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: var-border--switch__toggle--focus;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: var-background-color--tab-bar;   border-top: var-border-top--tab-bar; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #288edf;   background-color: #3f4041;   box-shadow: inset 0 0 1px rgba(0,0,0,0.05);+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none;   box-shadow: var-box-shadow--tab-bar__button--focus;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #595b5b;   color: #fff;+  color: var-color--text-input--focus;   border: none;   border: var-border--text-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #595b5b;   color: #fff;+  color: var-color--textarea--focus;   border: none;   border: var-border--focus--textarea;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #4b4d4e;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-light.html b/topcoat/demo/topcoat-mobile-light.htmlindex daff5ae..e0da534 100644--- a/topcoat/demo/topcoat-mobile-light.html+++ b/topcoat/demo/topcoat-mobile-light.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html" selected="selected">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: var-border-right--button-bar__button__first; }@@ -260,15 +269,20 @@   background-color: var-background-color--button-bar--button--active;   color: var-color--button-bar__button--active;   border: var-border--button-bar__button;+  border-right: var-border-right--button-bar__button;+  border-right: var-border-right--button-bar__button--active; }  .topcoat-button-bar__button:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: var-border-right--button-bar__button--focus; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: var-background-color--button-bar--button--hover;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: #eff1f1;   background-color: var-background-color--hover__button;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: var-quiet-button-color;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: var-quiet-button-color;+  border: var-border__button--quiet;+}++.topcoat-button--quiet:disabled {+  border: var-border__button--quiet; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #1e7dc8;   box-shadow: inset 0 1px rgba(0,0,0,0.12); }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #454545;+  border: 3px solid var-color__button;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: var-border--checkbox--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -1098,10 +1137,10 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   text-shadow: 0 1px #fff;   vertical-align: baseline;   background-color: #e5e9e8;-  background-color: var-background-color__icon-button;+  background-color: var-view-background;   box-shadow: inset 0 1px #fff;   border: 1px solid #9daca9;-  border: var-border--icon-button;+  border: none;   border-radius: 6px;   border-radius: var-icon-button-border-radius; }@@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: #eff1f1;+  background-color: transparent; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,28 +1192,31 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;-  border: var-border--icon-button--quiet;-  color: var-color--icon-button--quiet;+  background-color: transparent;+  border: none;+  color: #454545; }  .topcoat-icon-button--quiet:hover, .topcoat-icon-button--large--quiet:hover {   text-shadow: 0 1px #fff;   border: 1px solid #9daca9;-  border: var-border--icon-button--quite--hover;+  border: none;   box-shadow: inset 0 1px #fff;+  box-shadow: none; }  .topcoat-icon-button--quiet:active, .topcoat-icon-button--large--quiet:active {   color: #454545;-  color: var-color--icon-button--quiet--active;+  color: #6b6b6b;   text-shadow: 0 1px #fff;   background-color: #d2d6d6;-  background-color: var-background-color--icon-button-quiet--down;+  background-color: transparent;   border: 1px solid #9daca9;-  border: var-border--icon-button--quite--active;+  border: none;   box-shadow: inset 0 1px rgba(0,0,0,0.1);+  box-shadow: none; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: 1px solid #9daca9;   color: #454545;   padding: var-padding--list-container;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: var-background-color--list-item; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: var-background-color--list-item--active; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: 1px solid #d6dcdb;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: var-border-bottom--list-item--last; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: var-border-bottom--navigation-bar; } +.topcoat-navigation-bar__line-height {+  line-height: 4.375rem !important;+  line-height: var-height--navigation-bar !important;+}++.topcoat-navigation-bar__bg {+  background: #e5e9e8;+  background: var-navigation-bar-background-color;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 4.375rem;@@ -1940,8 +2006,16 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #dfe2e2;+}+ .page {-  background-color: var-background-color--page;+  background-color: #dfe2e2;+}++.topcoat-page__bg {+  background-color: #dfe2e2; }  /**@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: var-border--radio-button--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: var-border--range__thumb--focus;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: var-background-color--search-input;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);   color: #454545;+  color: var-color--search-input;   padding: 0 0 0 2rem;   border-radius: 30px;   border-radius: var-search-input--border-radius;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #fff;   background-color: var-background-color--search-input--focus;   color: #454545;+  color: var-color--search-input--focus;   border: none;   border: var-border--search-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: var-border--switch;   overflow: hidden;   width: 6rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 5rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 2.7rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: var-border--switch__toggle--focus;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: var-background-color--tab-bar;   border-top: var-border-top--tab-bar; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #288edf;   background-color: #e5f1fb;   box-shadow: inset 0 0 1px rgba(0,0,0,0.1);+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: inset 0 1px rgba(255,255,255,0.36), none;   box-shadow: var-box-shadow--tab-bar__button--focus;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #fff;   color: #454545;+  color: var-color--text-input--focus;   border: none;   border: var-border--text-input--focus;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #fff;   color: #454545;+  color: var-color--textarea--focus;   border: none;   border: var-border--focus--textarea;   box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #dfe2e2;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-onsen-android4_4.html b/topcoat/demo/topcoat-mobile-onsen-android4_4.htmlnew file mode 100644index 0000000..13cce1c--- /dev/null+++ b/topcoat/demo/topcoat-mobile-onsen-android4_4.html@@ -0,0 +1,4343 @@+<!DOCTYPE html>+<html>+  <head>+    <meta charset="utf-8">+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">+    <title>Topcoat</title>+    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">+    <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">+    <link rel="stylesheet" type="text/css" href="../css/topcoat-mobile-onsen-android4_4.css">+    <link rel="stylesheet" type="text/css" href="css/main.css">+    <link rel="stylesheet" type="text/css" href="css/brackets.css">+    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet"><!--[if lt IE 9]>+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->+  </head>+  <body class="light">+    <div id="wrapper">+      <div class="max-width">+        <div id="sideNav">+          <nav class="site">+            <ul>+              <li><a href="http://topcoat.io">Home</a></li>+              <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>+              <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>+              <li><a href="http://topcoat.io/blog">Blog</a></li>+            </ul>+          </nav>+          <div class="combo">+            <select class="docNav">+              <option value="index.html">Topcoat Desktop Dark</option>+              <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>+              <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>+              <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html" selected="selected">Topcoat Mobile Onsen Android4_4</option>+              <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>+              <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>+              <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>+              <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>+              <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>+              <option value="topcoat-mobile-onsen-yellow.html">Topcoat Mobile Onsen Yellow</option>+            </select>+          </div>+          <div id="pageNav">+            <ul>+              <li><a href="#button-bar">Button Bar</a></li>+              <li><a href="#large-buttonbar">Large Button Bar</a></li>+              <li><a href="#button">Button</a></li>+              <li><a href="#quiet-button">Quiet Button</a></li>+              <li><a href="#large-button">Large Button</a></li>+              <li><a href="#large-quietbutton">Large Quiet Button</a></li>+              <li><a href="#call-toaction button">Call To Action Button</a></li>+              <li><a href="#large-callto action button">Large Call To Action Button</a></li>+              <li><a href="#checkbox">Checkbox</a></li>+              <li><a href="#icon-button">Icon Button</a></li>+              <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>+              <li><a href="#large-iconbutton">Large Icon Button</a></li>+              <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>+              <li><a href="#list">List</a></li>+              <li><a href="#navigation-bar">Navigation Bar</a></li>+              <li><a href="#notification">Notification</a></li>+              <li><a href="#page">Page</a></li>+              <li><a href="#radio-button">Radio Button</a></li>+              <li><a href="#range">Range</a></li>+              <li><a href="#search-input">Search Input</a></li>+              <li><a href="#large-searchinput">Large Search Input</a></li>+              <li><a href="#switch">Switch</a></li>+              <li><a href="#tab-bar">Tab Bar</a></li>+              <li><a href="#text-input">Text input</a></li>+              <li><a href="#large-textinput">Large Text Input</a></li>+              <li><a href="#textarea">Textarea</a></li>+              <li><a href="#large-textarea">Large Textarea</a></li>+            </ul>+          </div>+        </div>+      </div>+      <div id="site">+        <header id="main-header">+          <div class="max-width">+            <hgroup>+              <h1><a href="http://topcoat.io">Topcoat</a></h1>+              <p>CSS for clean and fast web apps</p>+            </hgroup>+            <nav>+              <ul>+                <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>+                <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>+                <li><a href="http://topcoat.io/blog">Blog</a></li>+                <li><a id="download-btn" href="https://github.com/topcoat/topcoat/archive/v0.7.0.zip" onclick="_gaq.push(['_trackEvent', 'download', 'click',,, false]);">Download</a></li>+              </ul>+            </nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>+          </div>+        </header>+        <div id="content" class="max-width">+          <article class="component">+            <div style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px" class="showcase">+              <div class="topcoat-navigation-bar">+                <div class="topcoat-navigation-bar__item left quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-bars"></i></span></div>+                <div class="topcoat-navigation-bar__item center half"><span class="topcoat-navigation-bar__title">Title</span></div>+                <div class="topcoat-navigation-bar__item right quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-angle-right"></i></span></div>+              </div>+              <div class="topcoat-list">+                <h3 class="topcoat-list__header">Category</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                </ul>+                <h3 class="topcoat-list__header">Category</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                </ul>+                <h3 class="topcoat-list__header">Category</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                </ul>+              </div>+              <div class="topcoat-tab-bar full">+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">One</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Two</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Three</button>+                </label>+              </div>+            </div>+            <div style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px" class="showcase">+              <div class="topcoat-navigation-bar">+                <div class="topcoat-navigation-bar__item left quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-bars"></i></span></div>+                <div class="topcoat-navigation-bar__item center half"><span class="topcoat-navigation-bar__title">Title</span></div>+                <div class="topcoat-navigation-bar__item right quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-angle-right"></i></span></div>+              </div>+              <div class="topcoat-list">+                <h3 class="topcoat-list__header">+                  <input placeholder="Search" class="topcoat-search-input full">+                </h3>+                <h3 class="topcoat-list__header">+                  <input type="text" placeholder="text" value="" class="topcoat-text-input full">+                </h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item"><span>Notification</span><span style="float: right" class="topcoat-notification">1</span></li>+                  <li class="topcoat-list__item"><span>Radio Button</span><span style="float: right">+                      <label class="topcoat-radio-button">+                        <input type="radio" name="topcoat">+                        <div class="topcoat-radio-button__checkmark"></div>+                      </label>+                      <label class="topcoat-radio-button">OR+                        <input type="radio" name="topcoat">+                        <div class="topcoat-radio-button__checkmark"></div>+                      </label></span></li>+                  <li class="topcoat-list__item">	<span>Checkbox</span><span style="float: right">+                      <label class="topcoat-checkbox">+                        <input type="checkbox">+                        <div class="topcoat-checkbox__checkmark">											  											</div>+                      </label></span></li>+                  <li class="topcoat-list__item">	<span>Switch</span><span style="float: right">+                      <label class="topcoat-switch">+                        <input type="checkbox" class="topcoat-switch__input">+                        <div class="topcoat-switch__toggle">										</div>+                      </label></span></li>+                  <li class="topcoat-list__item">	<span>Range</span><span style="float: right">+                      <input type="range" class="topcoat-range"></span></li>+                </ul>+                <h3 class="topcoat-list__header">Button									</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">+                    <button class="topcoat-button">Button</button>+                    <button class="topcoat-button--cta">Button cta</button>+                  </li>+                </ul>+                <h3 class="topcoat-list__header">Quiet Button</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">+                    <button class="topcoat-button--quiet">Button									</button>+                  </li>+                </ul>+              </div>+              <div class="topcoat-tab-bar full">+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">One</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Two</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Three</button>+                </label>+              </div>+            </div>+            <div style="clear: both"></div>+          </article>+          <article id="button-bar" class="component">+            <header>+              <h2>Button Bar</h2>+            </header>+            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Three</button>  </div></div></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button-bar {+  margin: var-button-bar-margin;+  border: 0px solid #535353;+}++.topcoat-button-bar__item {+  border-top: 1px solid #535353;+  border-bottom: 1px solid #535353;+}++.topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {+  border-top-left-radius: 4px;+  border-bottom-left-radius: 4px;+}++.topcoat-button-bar &gt; .topcoat-button-bar__item:last-child {+  border-top-right-radius: 4px;+  border-bottom-right-radius: 4px;+}++.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button,+.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: 1px solid #535353;+  border-right: none;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button,+.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button--large {+  border-left: none;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button {+  border-radius: inherit;+  background-color: #000;+  color: var-color--button-bar--button;+  border: 0px solid #535353;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button:active,+.topcoat-button-bar__button--large:active,+:checked + .topcoat-button-bar__button {+  background-color: #3cf !important;+  color: #303942;+  border: 0px solid #535353;+  border-right: 1px solid #535353;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button:hover {+  background-color: #09c;+  color: #050607;+}++.topcoat-button-bar__button:focus,+.topcoat-button-bar__button--large:focus {+  z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #535353;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-buttonbar" class="component">+            <header>+              <h2>Large Button Bar</h2>+            </header>+            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Three</button>  </div></div></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button-bar__button--large {+  border-radius: inherit;+  background-color: #000;+  color: var-color--button-bar--button;+  border: 0px solid #535353;+  border-right: 1px solid #535353;+}++.topcoat-button-bar__button--large:hover {+  background-color: #09c;+  color: #050607;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="button" class="component">+            <header>+              <h2>Button</h2>+            </header>+            <section class="component"><button class="topcoat-button">Button</button><button class="topcoat-button" disabled>Button</button></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button,+.topcoat-button--quiet,+.topcoat-button--large,+.topcoat-button--large--quiet,+.topcoat-button--cta,+.topcoat-button--large--cta {+  padding: 0 1.25rem;+  font-size: 16px;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #f3f3f3;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: #535353;+  box-shadow: none;+  border: 1px solid #09c;+  border: none;+  border-radius: 4px;+}++.topcoat-button:hover,+.topcoat-button--quiet:hover,+.topcoat-button--large:hover,+.topcoat-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: #535353;+  color: #f3f3f3;+}++.topcoat-button:active,+.topcoat-button--large:active {+  background-color: #09c;+  background-color: #868686;+  box-shadow: none;+  color: #fff;+}++.topcoat-button:focus,+.topcoat-button--quiet:focus,+.topcoat-button--large:focus,+.topcoat-button--large--quiet:focus,+.topcoat-button--cta:focus,+.topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;+  outline: 0;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="quiet-button" class="component">+            <header>+              <h2>Quiet Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--quiet">Button</button><button class="topcoat-button--quiet" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--quiet&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background: var-quiet-button-background;+  color: #c0c0c0;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none;+}++.topcoat-button--quiet:hover,+.topcoat-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #09c;+  border: none;+  background-color: transparent;+  box-shadow: none;+  background-color: transparent;+}++.topcoat-button--quiet:active,+.topcoat-button--large--quiet:active {+  color: #f3f3f3;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-button" class="component">+            <header>+              <h2>Large Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--large" >Button</button><button class="topcoat-button--large" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--large,+.topcoat-button--large--quiet {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-quietbutton" class="component">+            <header>+              <h2>Large Quiet Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--large--quiet" >Button</button><button class="topcoat-button--large--quiet" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--quiet&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--large--quiet {+  color: #c0c0c0;+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  color: #c0c0c0;+}++.topcoat-button--large--quiet:active {+  color: var-color--quiet-active;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="call-toaction button" class="component">+            <header>+              <h2>Call To Action Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--cta" >Button</button><button class="topcoat-button--cta" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--cta,+.topcoat-button--large--cta {+  border: none;+  background-color: #535353;+  box-shadow: none;+  color: #f3f3f3;+  font-weight: 500;+  text-shadow: none;+}++.topcoat-button--cta:hover,+.topcoat-button--large--cta:hover {+  background-color: #535353;+}++.topcoat-button--cta:active,+.topcoat-button--large--cta:active {+  color: #fff;+  background-color: #868686;+  box-shadow: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-callto action button" class="component">+            <header>+              <h2>Large Call To Action Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--large--cta" >Button</button><button class="topcoat-button--large--cta" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--large--cta {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button__spinner {+  border: 3px solid #f3f3f3;+  border: 3px solid #f3f3f3;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;checkbox&quot;] {+  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;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;checkbox&quot;] {+  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=&quot;checkbox&quot;]: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;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="checkbox" class="component">+            <header>+              <h2>Checkbox</h2>+            </header>+            <section class="component"><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></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot;&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Default&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot; disabled&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-checkbox__checkmark {+  height: 1.1rem;+}++input[type=&quot;checkbox&quot;] {+  height: 1.1rem;+  width: 1.1rem;+  margin-top: 0;+  margin-right: -1.1rem;+  margin-bottom: -1.1rem;+  margin-left: 0;+}++input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {+  opacity: 1;+}++.topcoat-checkbox {+  line-height: 1.1rem;+}++.topcoat-checkbox__checkmark:before {+  width: 1.1rem;+  height: 1.1rem;+  background: var-background-color;+  background: transparent;+  border: 1px solid #09c;+  border: 1px solid #535353;+  border-radius: none;+  box-shadow: none;+  left: 0;+}++.topcoat-checkbox__checkmark {+  width: 1.1rem;+  height: 1.1rem;+}++.topcoat-checkbox__checkmark:after {+  top: -0.08rem;+  left: 0.15rem;+  opacity: 0;+  width: 0.85rem;+  height: 6px;+  background: transparent;+  border: 0.01rem solid #09c;+  border-width: 4px;+  border-top: none;+  border-right: none;+  border-radius: 2px;+  -webkit-transform: rotate(-50deg);+  -ms-transform: rotate(-50deg);+  transform: rotate(-50deg);+}++input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {+  border: none;+  border: 1px solid #535353;+  box-shadow: none, none;+}++input[type=&quot;checkbox&quot;]:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #09c;+  border: 1px solid #535353;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #535353;+  box-shadow: none;+}++input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #09c;+  background: var-background-color;+  box-shadow: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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-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;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="icon-button" class="component">+            <header>+              <h2>Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-icon-button,+.topcoat-icon-button--quiet,+.topcoat-icon-button--large,+.topcoat-icon-button--large--quiet {+  padding: 0 0.5rem;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  vertical-align: baseline;+  background-color: var-background-color;+  background-color: #050607;+  box-shadow: none;+  border: 1px solid #09c;+  border: none;+  border-radius: 4px;+  border-radius: 3px;+}++.topcoat-icon-button:hover,+.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large:hover,+.topcoat-icon-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover;+}++.topcoat-icon-button:active {+  background-color: #09c;+  box-shadow: none;+}++.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: none;+  box-shadow: none;+  outline: 0;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="quiet-iconbutton" class="component">+            <header>+              <h2>Quiet Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-icon-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background-color: transparent;+  border: none;+  color: #09c;+}++.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover;+}++.topcoat-icon-button--quiet:active,+.topcoat-icon-button--large--quiet:active {+  color: #f3f3f3;+  color: #3cf;+  text-shadow: 0 1px none;+  background-color: #09c;+  background-color: transparent;+  border: 1px solid #09c;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-iconbutton" class="component">+            <header>+              <h2>Large Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-icon-button--large,+.topcoat-icon-button--large--quiet {+  width: 3.375rem;+  height: 3.375rem;+  line-height: 3.375rem;+}++.topcoat-icon-button--large:active {+  background-color: #09c;+  box-shadow: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-quieticon button" class="component">+            <header>+              <h2>Large Quiet Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.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: 1.08rem;+  height: 1.08rem;+  vertical-align: middle;+  top: -1px;+}++.topcoat-icon--large {+  width: 1.928571427125rem;+  height: 1.928571427125rem;+  top: -2px;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.list {+  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;+  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;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.list,+.topcoat-list {+  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;+  overflow: auto;+  -webkit-overflow-scrolling: touch;+}++.list__header,+.topcoat-list__header {+  margin: 0;+}++.list__container,+.topcoat-list__container {+  padding: 0;+  margin: 0;+  list-style-type: none;+}++.list__item,+.topcoat-list__item {+  margin: 0;+  padding: 0;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="list" class="component">+            <header>+              <h2>List</h2>+            </header>+            <section class="component"><div class="topcoat-list">  <h3 class="topcoat-list__header">Category</h3>  <ul class="topcoat-list__container">    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>  </ul></div></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-list&quot;&gt;  &lt;h3 class=&quot;topcoat-list__header&quot;&gt;Category&lt;/h3&gt;  &lt;ul class=&quot;topcoat-list__container&quot;&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-list {+  border-top: none;+  border-bottom: none;+  background-color: #050607;+}++.topcoat-list__header {+  padding: 4px 0.7rem;+  font-size: 0.9em;+  font-weight: 400;+  background-color: #050607;+  color: #f3f3f3;+  text-shadow: none;+  border-top: none;+  border-bottom: 2px solid #3a3d40;+}++.topcoat-list__container {+  border-top: none;+  color: #f3f3f3;+  padding: 0;+  background-color: var-background-color--list-container;+}++.topcoat-list__item {+  padding: 0.7rem;+  margin: 0;+  border-top: none;+  border-bottom: 1px solid #3a3d40;+  color: #f3f3f3;+  background-color: #050607;+}++.topcoat-list__item_active:active {+  background-color: #bdbec2;+}++.topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;+  border-top: none;+  border-bottom: var-border-bottom--list-item--first;+}++.topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;+  border-bottom: none;+}++.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: none;+  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: none;+}++.navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.navigation-bar,+.topcoat-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: none;+  cursor: default;+  -webkit-user-select: none;+  -moz-user-select: none;+  -ms-user-select: none;+  user-select: none;+}++.navigation-bar__item,+.topcoat-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: none;+}++.navigation-bar__title,+.topcoat-navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="navigation-bar" class="component">+            <header>+              <h2>Navigation Bar</h2>+            </header>+            <section class="component"><div class="topcoat-navigation-bar">    <div class="topcoat-navigation-bar__item center full">        <h1 class="topcoat-navigation-bar__title">Header</h1>    </div></div></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-navigation-bar&quot;&gt;    &lt;div class=&quot;topcoat-navigation-bar__item center full&quot;&gt;        &lt;h1 class=&quot;topcoat-navigation-bar__title&quot;&gt;Header&lt;/h1&gt;    &lt;/div&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-navigation-bar {+  height: 3.375rem;+  height: 2.5rem;+  padding-left: 1rem;+  padding-right: 1rem;+  background: var-background-color;+  background: #222;+  color: #f3f3f3;+  box-shadow: none;+  border-bottom: 1px solid #3a3d40;+}++.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #222;+}++.topcoat-navigation-bar__item {+  margin: 0;+  line-height: 3.375rem;+  line-height: 2.5rem;+  vertical-align: top;+}++.topcoat-navigation-bar__title {+  font-size: 1.3rem;+  font-weight: 400;+  color: #f3f3f3;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 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;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 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;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="notification" class="component">+            <header>+              <h2>Notification</h2>+            </header>+            <section class="component"><span class="topcoat-notification">1</span></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;span class=&quot;topcoat-notification&quot;&gt;1&lt;/span&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-notification {+  padding: 0 0.4em 0;+  width: 1.2rem;+  height: 1.2rem;+  border-radius: 50%;+  background-color: #ec514e;+  color: #fff;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="page" class="component">+            <header>+              <h2>Page</h2>+            </header>+            <section class="component"><div class="page"></div></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;page&quot;&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+body {+  background-color: #050607;+}++.page {+  background-color: #050607;+}++.topcoat-page__bg {+  background-color: #050607;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;radio&quot;] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;radio&quot;] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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=&quot;radio&quot;]:disabled + .topcoat-radio-button__checkmark {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="radio-button" class="component">+            <header>+              <h2>Radio Button</h2>+            </header>+            <section class="component"><!-- NO LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- LEFT LABEL --><label class="topcoat-radio-button">  Left label  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- RIGHT LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div>  Right label</label><br><br><!-- DISABLED --><label class="topcoat-radio-button">  <input type="radio" name="topcoat" Disabled>  <div class="topcoat-radio-button__checkmark"></div>  Disabled</label></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;!-- NO LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- LEFT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  Left label  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- RIGHT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Right label&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- DISABLED --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot; Disabled&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+input[type=&quot;radio&quot;] {+  height: 1.2rem;+  width: 1.2rem;+  margin-top: 0;+  margin-right: -1.2rem;+  margin-bottom: -1.2rem;+  margin-left: 0;+}++input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {+  opacity: 1;+}++.topcoat-radio-button {+  color: #f3f3f3;+  color: #3a3d40;+  line-height: 1.2rem;+  text-align: left;+}++.topcoat-radio-button__checkmark:before {+  width: 1.2rem;+  height: 1.2rem;+  background: var-background-color;+  background: transparent;+  border: 1px solid #09c;+  border: 1px solid #535353;+  box-shadow: none;+}++.topcoat-radio-button__checkmark {+  position: relative;+  width: 1.2rem;+  height: 1.2rem;+}++.topcoat-radio-button__checkmark:after {+  opacity: 0;+  width: 0.6rem;+  height: 0.6rem;+  background: #09c;+  border: 1px solid #09c;+  box-shadow: 0 1px rgba(255,255,255,0.5);+  -webkit-transform: none;+  -ms-transform: none;+  transform: none;+  top: 0.25rem;+  left: 0.25rem;+}++input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {+  border: none;+  border: 1px solid #535353;+  box-shadow: none, none;+}++input[type=&quot;radio&quot;]:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #09c;+  border: 1px solid #09c;+  background-color: #09c;+  background-color: transparent;+  box-shadow: none;+}++input[type=&quot;radio&quot;]:disabled:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #09c;+  background: var-background-color;+  box-shadow: none;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++.range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++.range__thumb {+  cursor: pointer;+}++.range__thumb--webkit {+  cursor: pointer;+  -webkit-appearance: none;+}++.range:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++.range,+.topcoat-range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -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: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="range" class="component">+            <header>+              <h2>Range</h2>+            </header>+            <section class="component"><input type="range" class="topcoat-range"><input type="range" class="topcoat-range" disabled></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot;&gt;&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot; disabled&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-range {+  border-radius: 4px;+  border: 1px solid #09c;+  border: none;+  background-color: var-background-color--input;+  background-color: #09c;+  height: 0.15rem;+  border-radius: 0;+  border-radius: 3px;+}++.topcoat-range::-moz-range-track {+  border-radius: 4px;+  border: 1px solid #09c;+  background-color: var-background-color--input;+  background-color: #09c;+  height: 0.15rem;+  border-radius: 0;+  border-radius: var-border-radius--none;+}++.topcoat-range::-webkit-slider-thumb {+  height: 2rem;+  height: 1.5rem;+  width: 1.5rem;+  background-color: var-background-color;+  background-color: rgba(0,153,204,0.8);+  border: 1px solid #09c;+  border: 0px solid #3a3d40;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range::-moz-range-thumb {+  height: 2rem;+  width: 1.5rem;+  background-color: var-background-color;+  border: 1px solid #09c;+  border: 0px solid #3a3d40;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range:focus::-webkit-slider-thumb {+  border: none;+  border: var-border--range__thumb--focus;+  box-shadow: none;+}++.topcoat-range:focus::-moz-range-thumb {+  border: none;+  border: var-border--range__thumb--focus;+  box-shadow: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.search-input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++input[type=&quot;search&quot;]::-webkit-search-cancel-button {+  -webkit-appearance: none;+}++.search-input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.search-input,+.topcoat-search-input,+.topcoat-search-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++input[type=&quot;search&quot;]::-webkit-search-cancel-button {+  -webkit-appearance: none;+}++.search-input:disabled,+.topcoat-search-input:disabled,+.topcoat-search-input--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="search-input" class="component">+            <header>+              <h2>Search Input</h2>+            </header>+            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input"><input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot; disabled&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-search-input,+.topcoat-search-input--large {+  line-height: 2rem;+  height: 2rem;+  font-size: 16px;+  border: 1px solid #09c;+  border: 1px solid #535353;+  background-color: #050607;+  background-color: #050607;+  box-shadow: var-box-shadow--text-input;+  color: #f3f3f3;+  color: #c0c0c0;+  padding: 0 0 0 2.2rem;+  border-radius: 0;+  border-radius: 4px;+  background-image: url(&quot;../img/search.svg&quot;);+  background-position: 1rem center;+  background-position: var-background-position--search-input;+  background-repeat: no-repeat;+  background-size: 16px;+}++.topcoat-search-input:focus,+.topcoat-search-input--large:focus {+  background-color: #050607;+  background-color: #050607;+  color: #000;+  color: #f3f3f3;+  border: none;+  border: 1px solid #535353;+  box-shadow: var-box-shadow--text-input, none;+}++.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;+  margin-right: var-margin-right--search-decoration;+}++.topcoat-search-input:focus::-webkit-input-placeholder,+.topcoat-search-input:focus::-webkit-input-placeholder {+  color: #f3f3f3;+}++.topcoat-search-input:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-search-input:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-search-input:disabled:-ms-input-placeholder {+  color: #000;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-searchinput" class="component">+            <header>+              <h2>Large Search Input</h2>+            </header>+            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large"><input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot; disabled&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-search-input--large {+  line-height: 3.375rem;+  height: 3.375rem;+  font-size: 1.3rem;+  font-weight: 200;+  padding: 0 0 0 2.9rem;+  border-radius: 40px;+  border-radius: 4px;+  background-position: 1.2rem center;+  background-size: 1.3rem;+}++.topcoat-search-input--large:disabled {+  color: #000;+}++.topcoat-search-input--large:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-search-input--large:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-search-input--large:disabled:-ms-input-placeholder {+  color: #000;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="switch" class="component">+            <header>+              <h2>Switch</h2>+            </header>+            <section class="component"><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input">  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" checked>  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" disabled>  <div class="topcoat-switch__toggle"></div></label></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot;&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; checked&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; disabled&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-switch {+  font-size: 16px;+  padding: 0 1.25rem;+  border-radius: 4px;+  border-radius: 0;+  border: 1px solid #09c;+  border: none;+  overflow: hidden;+  width: 4rem;+  height: 1rem;+}++.topcoat-switch__toggle:before,+.topcoat-switch__toggle:after {+  top: -1px;+  width: 4rem;+  border: var-border--switch__label;+  margin: 0rem 0 0 0;+}++.topcoat-switch__toggle:before {+  content: '';+  color: #39372e;+  background-color: #3a3d40;+  right: -0.08rem;+  padding-left: 1.5rem;+  height: 1rem;+  top: -0.05rem;+  border-radius: 0;+}++.topcoat-switch__toggle {+  line-height: 2rem;+  line-height: 2rem;+  height: 2rem;+  height: 0.9rem;+  width: 1.9rem;+  border-radius: 4px;+  border-radius: 0;+  color: #f3f3f3;+  text-shadow: 0 1px none;+  background-color: var-background-color;+  background-color: #535353;+  border: 1px solid #09c;+  border: 0px solid #3a3d40;+  margin-left: -1.2rem;+  margin-bottom: 0;+  margin-top: 0.05rem;+  box-shadow: none;+  -webkit-transition: margin-left 0.05s ease-in-out;+  transition: margin-left 0.05s ease-in-out;+}++.topcoat-switch__toggle:after {+  content: '';+  background-color: #3a3d40;+  left: -0.06rem;+  padding-left: 2rem;+  height: 1rem;+  top: -0.05rem;+  border-radius: 0;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle {+  margin-left: 0.8rem;+  background-color: #0983ac;+}++.topcoat-switch__input:active + .topcoat-switch__toggle {+  border: 1px solid #09c;+  box-shadow: none;+}++.topcoat-switch__input:focus + .topcoat-switch__toggle {+  border: none;+  border: var-border--switch__toggle--focus;+  box-shadow: none;+}++.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,+.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {+  background: transparent;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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-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: 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-tab-bar__button:disabled {+  opacity: 0.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 &gt; input,+.topcoat-tab-bar__item &gt; input {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="tab-bar" class="component">+            <header>+              <h2>Tab Bar</h2>+            </header>+            <section class="component"><div class="topcoat-tab-bar">  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">One</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Two</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Three</button>  </label></div></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-tab-bar&quot;&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/label&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-tab-bar {+  height: 49px;+  background-color: #222;+  border-top: 3px solid #3a3d40;+}++.topcoat-tab-bar__button {+  padding: 0 1.25rem;+  height: 2rem;+  height: 49px;+  line-height: 2rem;+  line-height: 49px;+  letter-spacing: 1px;+  color: #f3f3f3;+  color: #c0c0c0;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border-top: 1px solid #09c;+  border-top: none;+}++.topcoat-tab-bar__button:active,+.topcoat-tab-bar__button--large:active,+:checked + .topcoat-tab-bar__button {+  color: #f3f3f3;+  background-color: #555;+  box-shadow: none;+  border-top: 3px solid #09c;+}++.topcoat-tab-bar__button:focus,+.topcoat-tab-bar__button--large:focus {+  z-index: 1;+  border-top: var-border-top--tab-bar--focus;+  box-shadow: none, none;+  box-shadow: none;+  outline: 0;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.input,+.topcoat-text-input,+.topcoat-text-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled,+.topcoat-text-input:disabled,+.topcoat-text-input--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="text-input" class="component">+            <header>+              <h2>Text input</h2>+            </header>+            <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value=""><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="" disabled><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-text-input,+.topcoat-text-input--large {+  line-height: 2rem;+  font-size: 16px;+  letter-spacing: 1px;+  padding: 0 1.25rem;+  border: 1px solid #09c;+  border: 1px solid #3a3d40;+  border-radius: 4px;+  background-color: #050607;+  box-shadow: var-box-shadow--text-input;+  color: #f3f3f3;+  color: #c0c0c0;+  vertical-align: top;+}++.topcoat-text-input:focus,+.topcoat-text-input--large:focus {+  background-color: #050607;+  color: #000;+  color: #f3f3f3;+  border: none;+  border: 1px solid #3a3d40;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-text-input:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-text-input:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-text-input:disabled:-ms-input-placeholder {+  color: #000;+}++.topcoat-text-input:invalid {+  border: 1px solid #f00;+  color: #f00;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-textinput" class="component">+            <header>+              <h2>Large Text Input</h2>+            </header>+            <section class="component"><input type="text" class="topcoat-text-input--large" value="" placeholder="text"><br><br><input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled><br><br><input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-text-input--large {+  line-height: 3.375rem;+  font-size: 1.3rem;+}++.topcoat-text-input--large:disabled {+  color: #000;+}++.topcoat-text-input--large:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-text-input--large:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-text-input--large:disabled:-ms-input-placeholder {+  color: #000;+}++.topcoat-text-input--large:invalid {+  border: 1px solid #f00;+  color: #f00;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled,+.topcoat-textarea:disabled,+.topcoat-textarea--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="textarea" class="component">+            <header>+              <h2>Textarea</h2>+            </header>+            <section class="component"><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-textarea,+.topcoat-textarea--large {+  padding: 2rem;+  font-size: 2.5rem;+  font-weight: 200;+  border-radius: 4px;+  line-height: 2rem;+  border: 1px solid #09c;+  border: 1px solid #3a3d40;+  background-color: #050607;+  box-shadow: var-box-shadow--text-input;+  color: #f3f3f3;+  color: #c0c0c0;+  letter-spacing: 1px;+}++.topcoat-textarea:focus,+.topcoat-textarea--large:focus {+  background-color: #050607;+  color: #000;+  color: #f3f3f3;+  border: none;+  border: 1px solid #3a3d40;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-textarea:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-textarea:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-textarea:disabled:-ms-input-placeholder {+  color: #000;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-textarea" class="component">+            <header>+              <h2>Large Textarea</h2>+            </header>+            <section class="component"><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-textarea--large {+  font-size: 3rem;+  line-height: 3.375rem;+}++.topcoat-textarea--large:disabled {+  color: #000;+}++.topcoat-textarea--large:disabled::-webkit-input-placeholder {+  color: #000;+}++.topcoat-textarea--large:disabled::-moz-placeholder {+  color: #000;+}++.topcoat-textarea--large:disabled:-ms-input-placeholder {+  color: #000;+}++@font-face {+  font-family: &quot;Source Sans&quot;;+  src: url(&quot;../font/SourceSansPro-Regular.otf&quot;);+}++@font-face {+  font-family: &quot;Source Sans&quot;;+  src: url(&quot;../font/SourceSansPro-Light.otf&quot;);+  font-weight: 200;+}++@font-face {+  font-family: &quot;Source Sans&quot;;+  src: url(&quot;../font/SourceSansPro-Semibold.otf&quot;);+  font-weight: 600;+}++body {+  margin: 0;+  padding: 0;+  background: #050607;+  color: #000;+  color: #f3f3f3;+  font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;+  font-weight: 400;+}++:focus {+  outline-color: transparent;+  outline-style: none;+}++.topcoat-icon--menu-stack {+  background: url(&quot;../img/hamburger_dark.svg&quot;) 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: 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;+}++/* This file should include color and image variables corresponding to the dark theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Icon Button */++/* Tab bar */++/* Switch */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Textarea */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the light theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Secondary colors (based on colors above)++Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!++*/++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Icon Button */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Containers */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* Containers */++/* Button */++/* Bar Button */++/* Button Quiet*/++/* Icon Button */++/* Navigation bar */++/* List */++/* Notification */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* Tab-bar */++/* Call To Action */++/* Text Input */++/* Radio input */++/* Overlay */++/* Textarea */++/* Progress bar container */++/* Progress bar progress */++/* Switch */++/* Notification */++/* Search */</code></pre>+                </div>+              </section>+            </footer>+          </article>+        </div>+        <footer></footer>+      </div>+    </div>+    <script src="js/rainbow-custom.min.js"></script>+    <script src="js/main.js"></script>+  </body>+</html>\ No newline at end of filediff --git a/topcoat/demo/topcoat-mobile-onsen-blue.html b/topcoat/demo/topcoat-mobile-onsen-blue.htmlindex 7056308..aad896e 100644--- a/topcoat/demo/topcoat-mobile-onsen-blue.html+++ b/topcoat/demo/topcoat-mobile-onsen-blue.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html" selected="selected">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #25b5c2; }@@ -260,15 +269,20 @@   background-color: #f5f0e8 !important;   color: #25b5c2;   border: none;+  border-right: 1px solid #25b5c2;+  border-right: 1px solid #25b5c2; }  .topcoat-button-bar__button:hover {   background-color: #2ec9d7;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #25b5c2; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #2ec9d7;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #2ec9d7;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: #25b5c2;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #25b5c2;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #25b5c2;   box-shadow: none, none; } @@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,6 +1192,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1160,6 +1203,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #25b5c2;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1172,6 +1216,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #25b5c2;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #b6dedd; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #25b5c2;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -1940,10 +2006,18 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #25b5c2;   box-shadow: none, none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: #e7e3e0;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #25b5c2;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-onsen-green.html b/topcoat/demo/topcoat-mobile-onsen-green.htmlindex 9da7438..147605d 100644--- a/topcoat/demo/topcoat-mobile-onsen-green.html+++ b/topcoat/demo/topcoat-mobile-onsen-green.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html" selected="selected">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #6fba2c; }@@ -260,15 +269,20 @@   background-color: #f5f0e8 !important;   color: #6fba2c;   border: none;+  border-right: 1px solid #6fba2c;+  border-right: 1px solid #6fba2c; }  .topcoat-button-bar__button:hover {   background-color: #7ecf35;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #6fba2c; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #7ecf35;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #7ecf35;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: #6fba2c;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #6fba2c;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #6fba2c;   box-shadow: none, none; } @@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,6 +1192,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1160,6 +1203,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #6fba2c;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1172,6 +1216,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #6fba2c;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #cde0af; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #6fba2c;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -1940,10 +2006,18 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #6fba2c;   box-shadow: none, none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #6fba2c;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-onsen-ios7.html b/topcoat/demo/topcoat-mobile-onsen-ios7.htmlnew file mode 100644index 0000000..adf7420--- /dev/null+++ b/topcoat/demo/topcoat-mobile-onsen-ios7.html@@ -0,0 +1,4343 @@+<!DOCTYPE html>+<html>+  <head>+    <meta charset="utf-8">+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">+    <title>Topcoat</title>+    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">+    <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">+    <link rel="stylesheet" type="text/css" href="../css/topcoat-mobile-onsen-ios7.css">+    <link rel="stylesheet" type="text/css" href="css/main.css">+    <link rel="stylesheet" type="text/css" href="css/brackets.css">+    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet"><!--[if lt IE 9]>+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->+  </head>+  <body class="light">+    <div id="wrapper">+      <div class="max-width">+        <div id="sideNav">+          <nav class="site">+            <ul>+              <li><a href="http://topcoat.io">Home</a></li>+              <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>+              <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>+              <li><a href="http://topcoat.io/blog">Blog</a></li>+            </ul>+          </nav>+          <div class="combo">+            <select class="docNav">+              <option value="index.html">Topcoat Desktop Dark</option>+              <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>+              <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>+              <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>+              <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>+              <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html" selected="selected">Topcoat Mobile Onsen Ios7</option>+              <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>+              <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>+              <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>+              <option value="topcoat-mobile-onsen-yellow.html">Topcoat Mobile Onsen Yellow</option>+            </select>+          </div>+          <div id="pageNav">+            <ul>+              <li><a href="#button-bar">Button Bar</a></li>+              <li><a href="#large-buttonbar">Large Button Bar</a></li>+              <li><a href="#button">Button</a></li>+              <li><a href="#quiet-button">Quiet Button</a></li>+              <li><a href="#large-button">Large Button</a></li>+              <li><a href="#large-quietbutton">Large Quiet Button</a></li>+              <li><a href="#call-toaction button">Call To Action Button</a></li>+              <li><a href="#large-callto action button">Large Call To Action Button</a></li>+              <li><a href="#checkbox">Checkbox</a></li>+              <li><a href="#icon-button">Icon Button</a></li>+              <li><a href="#quiet-iconbutton">Quiet Icon Button</a></li>+              <li><a href="#large-iconbutton">Large Icon Button</a></li>+              <li><a href="#large-quieticon button">Large Quiet Icon Button</a></li>+              <li><a href="#list">List</a></li>+              <li><a href="#navigation-bar">Navigation Bar</a></li>+              <li><a href="#notification">Notification</a></li>+              <li><a href="#page">Page</a></li>+              <li><a href="#radio-button">Radio Button</a></li>+              <li><a href="#range">Range</a></li>+              <li><a href="#search-input">Search Input</a></li>+              <li><a href="#large-searchinput">Large Search Input</a></li>+              <li><a href="#switch">Switch</a></li>+              <li><a href="#tab-bar">Tab Bar</a></li>+              <li><a href="#text-input">Text input</a></li>+              <li><a href="#large-textinput">Large Text Input</a></li>+              <li><a href="#textarea">Textarea</a></li>+              <li><a href="#large-textarea">Large Textarea</a></li>+            </ul>+          </div>+        </div>+      </div>+      <div id="site">+        <header id="main-header">+          <div class="max-width">+            <hgroup>+              <h1><a href="http://topcoat.io">Topcoat</a></h1>+              <p>CSS for clean and fast web apps</p>+            </hgroup>+            <nav>+              <ul>+                <li class="selected"><a href="http://topcoat.io/topcoat">Demo</a></li>+                <li><a href="http://bench.topcoat.io/">Benchmarks</a></li>+                <li><a href="http://topcoat.io/blog">Blog</a></li>+                <li><a id="download-btn" href="https://github.com/topcoat/topcoat/archive/v0.7.0.zip" onclick="_gaq.push(['_trackEvent', 'download', 'click',,, false]);">Download</a></li>+              </ul>+            </nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>+          </div>+        </header>+        <div id="content" class="max-width">+          <article class="component">+            <div style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px" class="showcase">+              <div class="topcoat-navigation-bar">+                <div class="topcoat-navigation-bar__item left quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-bars"></i></span></div>+                <div class="topcoat-navigation-bar__item center half"><span class="topcoat-navigation-bar__title">Title</span></div>+                <div class="topcoat-navigation-bar__item right quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-angle-right"></i></span></div>+              </div>+              <div class="topcoat-list">+                <h3 class="topcoat-list__header">Category</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                </ul>+                <h3 class="topcoat-list__header">Category</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                </ul>+                <h3 class="topcoat-list__header">Category</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                  <li class="topcoat-list__item">Item</li>+                </ul>+              </div>+              <div class="topcoat-tab-bar full">+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">One</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Two</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Three</button>+                </label>+              </div>+            </div>+            <div style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px" class="showcase">+              <div class="topcoat-navigation-bar">+                <div class="topcoat-navigation-bar__item left quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-bars"></i></span></div>+                <div class="topcoat-navigation-bar__item center half"><span class="topcoat-navigation-bar__title">Title</span></div>+                <div class="topcoat-navigation-bar__item right quarter"><span style="vertical-align: middle" class="topcoat-icon-button--quiet"><i class="fa fa-lg fa-angle-right"></i></span></div>+              </div>+              <div class="topcoat-list">+                <h3 class="topcoat-list__header">+                  <input placeholder="Search" class="topcoat-search-input full">+                </h3>+                <h3 class="topcoat-list__header">+                  <input type="text" placeholder="text" value="" class="topcoat-text-input full">+                </h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item"><span>Notification</span><span style="float: right" class="topcoat-notification">1</span></li>+                  <li class="topcoat-list__item"><span>Radio Button</span><span style="float: right">+                      <label class="topcoat-radio-button">+                        <input type="radio" name="topcoat">+                        <div class="topcoat-radio-button__checkmark"></div>+                      </label>+                      <label class="topcoat-radio-button">OR+                        <input type="radio" name="topcoat">+                        <div class="topcoat-radio-button__checkmark"></div>+                      </label></span></li>+                  <li class="topcoat-list__item">	<span>Checkbox</span><span style="float: right">+                      <label class="topcoat-checkbox">+                        <input type="checkbox">+                        <div class="topcoat-checkbox__checkmark">											  											</div>+                      </label></span></li>+                  <li class="topcoat-list__item">	<span>Switch</span><span style="float: right">+                      <label class="topcoat-switch">+                        <input type="checkbox" class="topcoat-switch__input">+                        <div class="topcoat-switch__toggle">										</div>+                      </label></span></li>+                  <li class="topcoat-list__item">	<span>Range</span><span style="float: right">+                      <input type="range" class="topcoat-range"></span></li>+                </ul>+                <h3 class="topcoat-list__header">Button									</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">+                    <button class="topcoat-button">Button</button>+                    <button class="topcoat-button--cta">Button cta</button>+                  </li>+                </ul>+                <h3 class="topcoat-list__header">Quiet Button</h3>+                <ul class="topcoat-list__container">+                  <li class="topcoat-list__item">+                    <button class="topcoat-button--quiet">Button									</button>+                  </li>+                </ul>+              </div>+              <div class="topcoat-tab-bar full">+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">One</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Two</button>+                </label>+                <label class="topcoat-tab-bar__item">+                  <input type="radio" name="tab-bar">+                  <button class="topcoat-tab-bar__button full">Three</button>+                </label>+              </div>+            </div>+            <div style="clear: both"></div>+          </article>+          <article id="button-bar" class="component">+            <header>+              <h2>Button Bar</h2>+            </header>+            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button">Three</button>  </div></div></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/kdKyg">mobile button bar</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button-bar {+  margin: var-button-bar-margin;+  border: 0px solid #157dfb;+}++.topcoat-button-bar__item {+  border-top: 1px solid #157dfb;+  border-bottom: 1px solid #157dfb;+}++.topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {+  border-top-left-radius: 4px;+  border-bottom-left-radius: 4px;+}++.topcoat-button-bar &gt; .topcoat-button-bar__item:last-child {+  border-top-right-radius: 4px;+  border-bottom-right-radius: 4px;+}++.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button,+.topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: 1px solid #157dfb;+  border-right: none;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button,+.topcoat-button-bar__item:last-child &gt; .topcoat-button-bar__button--large {+  border-left: none;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button {+  border-radius: inherit;+  background-color: #f2f2f2;+  color: #157dfb;+  border: 0px solid #157dfb;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button:active,+.topcoat-button-bar__button--large:active,+:checked + .topcoat-button-bar__button {+  background-color: #b5d6fe !important;+  color: #fff;+  border: 0px solid #157dfb;+  border-right: 1px solid #157dfb;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button:hover {+  background-color: #157dfb;+  color: #fff;+}++.topcoat-button-bar__button:focus,+.topcoat-button-bar__button--large:focus {+  z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #157dfb;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-buttonbar" class="component">+            <header>+              <h2>Large Button Bar</h2>+            </header>+            <section class="component"><div class="topcoat-button-bar">  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">One</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Two</button>  </div>  <div class="topcoat-button-bar__item">    <button class="topcoat-button-bar__button--large">Three</button>  </div></div></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-button-bar&quot;&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;One&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Two&lt;/button&gt;  &lt;/div&gt;  &lt;div class=&quot;topcoat-button-bar__item&quot;&gt;    &lt;button class=&quot;topcoat-button-bar__button--large&quot;&gt;Three&lt;/button&gt;  &lt;/div&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button-bar__button--large {+  border-radius: inherit;+  background-color: #f2f2f2;+  color: #157dfb;+  border: 0px solid #157dfb;+  border-right: 1px solid #157dfb;+}++.topcoat-button-bar__button--large:hover {+  background-color: #157dfb;+  color: #fff;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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 {+  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 {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="button" class="component">+            <header>+              <h2>Button</h2>+            </header>+            <section class="component"><button class="topcoat-button">Button</button><button class="topcoat-button" disabled>Button</button></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/DpKtf">mobile button</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button,+.topcoat-button--quiet,+.topcoat-button--large,+.topcoat-button--large--quiet,+.topcoat-button--cta,+.topcoat-button--large--cta {+  padding: 0 1.25rem;+  font-size: 16px;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #c6c8c8;+  color: #157dfb;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border: 1px solid #157dfb;+  border: none;+  border-radius: 4px;+}++.topcoat-button:hover,+.topcoat-button--quiet:hover,+.topcoat-button--large:hover,+.topcoat-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: transparent;+  color: #157dfb;+}++.topcoat-button:active,+.topcoat-button--large:active {+  background-color: #157dfb;+  background-color: transparent;+  box-shadow: none;+  color: #79b5fd;+}++.topcoat-button:focus,+.topcoat-button--quiet:focus,+.topcoat-button--large:focus,+.topcoat-button--large--quiet:focus,+.topcoat-button--cta:focus,+.topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;+  outline: 0;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="quiet-button" class="component">+            <header>+              <h2>Quiet Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--quiet">Button</button><button class="topcoat-button--quiet" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--quiet&quot;&gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background: var-quiet-button-background;+  color: #157dfb;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none;+}++.topcoat-button--quiet:hover,+.topcoat-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #157dfb;+  border: none;+  background-color: transparent;+  box-shadow: none;+  background-color: transparent;+}++.topcoat-button--quiet:active,+.topcoat-button--large--quiet:active {+  color: #c6c8c8;+  color: #79b5fd;+  text-shadow: 0 1px none;+  background-color: #157dfb;+  background-color: transparent;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-button" class="component">+            <header>+              <h2>Large Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--large" >Button</button><button class="topcoat-button--large" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--large,+.topcoat-button--large--quiet {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-quietbutton" class="component">+            <header>+              <h2>Large Quiet Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--large--quiet" >Button</button><button class="topcoat-button--large--quiet" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--quiet&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--quiet&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--large--quiet {+  color: #157dfb;+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  color: #157dfb;+}++.topcoat-button--large--quiet:active {+  color: var-color--quiet-active;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="call-toaction button" class="component">+            <header>+              <h2>Call To Action Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--cta" >Button</button><button class="topcoat-button--cta" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--cta,+.topcoat-button--large--cta {+  border: none;+  background-color: transparent;+  box-shadow: none;+  color: #157dfb;+  font-weight: 500;+  text-shadow: none;+}++.topcoat-button--cta:hover,+.topcoat-button--large--cta:hover {+  background-color: transparent;+}++.topcoat-button--cta:active,+.topcoat-button--large--cta:active {+  color: #79b5fd;+  background-color: transparent;+  box-shadow: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-callto action button" class="component">+            <header>+              <h2>Large Call To Action Button</h2>+            </header>+            <section class="component"><button class="topcoat-button--large--cta" >Button</button><button class="topcoat-button--large--cta" disabled>Button</button></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-button--large--cta&quot; &gt;Button&lt;/button&gt;&lt;button class=&quot;topcoat-button--large--cta&quot; disabled&gt;Button&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-button--large--cta {+  font-size: 1.3rem;+  font-weight: 400;+  line-height: 3.375rem;+  padding: 0 1.25rem;+}++.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #157dfb;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;checkbox&quot;] {+  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;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;checkbox&quot;] {+  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=&quot;checkbox&quot;]: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;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="checkbox" class="component">+            <header>+              <h2>Checkbox</h2>+            </header>+            <section class="component"><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></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot;&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Default&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-checkbox&quot;&gt;  &lt;input type=&quot;checkbox&quot; disabled&gt;  &lt;div class=&quot;topcoat-checkbox__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-checkbox__checkmark {+  height: 1.5rem;+}++input[type=&quot;checkbox&quot;] {+  height: 1.5rem;+  width: 1.5rem;+  margin-top: 0;+  margin-right: -1.5rem;+  margin-bottom: -1.5rem;+  margin-left: 0;+}++input[type=&quot;checkbox&quot;]:checked {+  background: #157dfb;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: #157dfb;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {+  opacity: 1;+}++.topcoat-checkbox {+  line-height: 1.5rem;+}++.topcoat-checkbox__checkmark:before {+  width: 1.5rem;+  height: 1.5rem;+  background: var-background-color;+  background: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  border-radius: 1rem;+  box-shadow: none;+  left: 0;+}++.topcoat-checkbox__checkmark {+  width: 1.5rem;+  height: 1.5rem;+}++.topcoat-checkbox__checkmark:after {+  top: 5px;+  left: 3px;+  opacity: 0;+  width: 12px;+  height: 6px;+  background: transparent;+  border: 3px solid #fff;+  border-width: 4px;+  border-top: none;+  border-right: none;+  border-radius: 2px;+  -webkit-transform: rotate(-50deg);+  -ms-transform: rotate(-50deg);+  transform: rotate(-50deg);+}++input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {+  border: none;+  border: 1px solid #157dfb;+  box-shadow: none, none;+}++input[type=&quot;checkbox&quot;]:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  background-color: #157dfb;+  background-color: #fff;+  border: 1px solid #157dfb;+  box-shadow: none;+}++input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:before {+  border: 1px solid #157dfb;+  background: var-background-color;+  box-shadow: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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-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;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="icon-button" class="component">+            <header>+              <h2>Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-icon-button,+.topcoat-icon-button--quiet,+.topcoat-icon-button--large,+.topcoat-icon-button--large--quiet {+  padding: 0 0.5rem;+  line-height: 2rem;+  letter-spacing: 1px;+  color: #c6c8c8;+  text-shadow: 0 1px none;+  vertical-align: baseline;+  background-color: var-background-color;+  background-color: #fff;+  box-shadow: none;+  border: 1px solid #157dfb;+  border: none;+  border-radius: 4px;+  border-radius: 3px;+}++.topcoat-icon-button:hover,+.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large:hover,+.topcoat-icon-button--large--quiet:hover {+  background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover;+}++.topcoat-icon-button:active {+  background-color: #157dfb;+  box-shadow: none;+}++.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: none;+  box-shadow: none;+  outline: 0;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="quiet-iconbutton" class="component">+            <header>+              <h2>Quiet Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-icon-button--quiet {+  background: transparent;+  border: 1px solid transparent;+  box-shadow: none;+  background-color: transparent;+  border: none;+  color: #157dfb;+}++.topcoat-icon-button--quiet:hover,+.topcoat-icon-button--large--quiet:hover {+  text-shadow: 0 1px none;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover;+}++.topcoat-icon-button--quiet:active,+.topcoat-icon-button--large--quiet:active {+  color: #c6c8c8;+  color: #79b5fd;+  text-shadow: 0 1px none;+  background-color: #157dfb;+  background-color: transparent;+  border: 1px solid #157dfb;+  border: none;+  box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-iconbutton" class="component">+            <header>+              <h2>Large Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-icon-button--large,+.topcoat-icon-button--large--quiet {+  width: 3.375rem;+  height: 3.375rem;+  line-height: 3.375rem;+}++.topcoat-icon-button--large:active {+  background-color: #157dfb;+  box-shadow: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-quieticon button" class="component">+            <header>+              <h2>Large Quiet Icon Button</h2>+            </header>+            <section class="component"><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></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;button class=&quot;topcoat-icon-button--large--quiet&quot;&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;topcoat-icon-button--large--quiet&quot; disabled&gt;  &lt;span class=&quot;topcoat-icon--large&quot; style=&quot;background-color:#A5A7A7;&quot;&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.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: 1.08rem;+  height: 1.08rem;+  vertical-align: middle;+  top: -1px;+}++.topcoat-icon--large {+  width: 1.928571427125rem;+  height: 1.928571427125rem;+  top: -2px;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.list {+  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;+  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;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.list,+.topcoat-list {+  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;+  overflow: auto;+  -webkit-overflow-scrolling: touch;+}++.list__header,+.topcoat-list__header {+  margin: 0;+}++.list__container,+.topcoat-list__container {+  padding: 0;+  margin: 0;+  list-style-type: none;+}++.list__item,+.topcoat-list__item {+  margin: 0;+  padding: 0;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="list" class="component">+            <header>+              <h2>List</h2>+            </header>+            <section class="component"><div class="topcoat-list">  <h3 class="topcoat-list__header">Category</h3>  <ul class="topcoat-list__container">    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>    <li class="topcoat-list__item">      Item    </li>  </ul></div></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-list&quot;&gt;  &lt;h3 class=&quot;topcoat-list__header&quot;&gt;Category&lt;/h3&gt;  &lt;ul class=&quot;topcoat-list__container&quot;&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;    &lt;li class=&quot;topcoat-list__item&quot;&gt;      Item    &lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-list {+  border-top: none;+  border-bottom: none;+  background-color: #f0eff4;+}++.topcoat-list__header {+  padding: 4px 0.7rem;+  font-size: 0.9em;+  font-weight: 400;+  background-color: #f0eff4;+  color: #1f1f21;+  text-shadow: none;+  border-top: none;+  border-bottom: none;+}++.topcoat-list__container {+  border-top: none;+  color: #c6c8c8;+  padding: 0;+  background-color: #fff;+}++.topcoat-list__item {+  padding: 0.7rem 0.7rem 0.7rem 0.7rem;+  margin: 0 0 0 0;+  border-top: none;+  border-bottom: 1px solid #c8c7cc;+  color: #1f1f21;+  background-color: #fff;+}++.topcoat-list__item_active:active {+  background-color: #bdbec2;+}++.topcoat-list__item:first-child {+  padding-left: 0.7rem;+  margin: 0;+  border-top: 1px solid #c8c7cc;+  border-bottom: none;+}++.topcoat-list__item:last-child {+  padding-left: 0.7rem;+  margin: 0;+  border-top: none;+  border-bottom: 1px solid #c8c7cc;+}++.topcoat-list__item:nth-child(2) {+  border-top: 1px solid #c8c7cc;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: none;+  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: none;+}++.navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.navigation-bar,+.topcoat-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: none;+  cursor: default;+  -webkit-user-select: none;+  -moz-user-select: none;+  -ms-user-select: none;+  user-select: none;+}++.navigation-bar__item,+.topcoat-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: none;+}++.navigation-bar__title,+.topcoat-navigation-bar__title {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  text-overflow: ellipsis;+  white-space: nowrap;+  overflow: hidden;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="navigation-bar" class="component">+            <header>+              <h2>Navigation Bar</h2>+            </header>+            <section class="component"><div class="topcoat-navigation-bar">    <div class="topcoat-navigation-bar__item center full">        <h1 class="topcoat-navigation-bar__title">Header</h1>    </div></div></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-navigation-bar&quot;&gt;    &lt;div class=&quot;topcoat-navigation-bar__item center full&quot;&gt;        &lt;h1 class=&quot;topcoat-navigation-bar__title&quot;&gt;Header&lt;/h1&gt;    &lt;/div&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-navigation-bar {+  height: 3.375rem;+  height: 44px;+  padding-left: 1rem;+  padding-right: 1rem;+  background: var-background-color;+  background: #f8f8f8;+  color: #1f1f21;+  box-shadow: none;+  border-bottom: 1px solid #c8c7cc;+}++.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 44px !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #f8f8f8;+}++.topcoat-navigation-bar__item {+  margin: 0;+  line-height: 3.375rem;+  line-height: 2.5rem;+  vertical-align: top;+}++.topcoat-navigation-bar__title {+  font-size: 1.3rem;+  font-weight: 400;+  color: #1f1f21;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 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;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 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;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="notification" class="component">+            <header>+              <h2>Notification</h2>+            </header>+            <section class="component"><span class="topcoat-notification">1</span></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;span class=&quot;topcoat-notification&quot;&gt;1&lt;/span&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-notification {+  padding: 0 0.4em 0;+  width: 1.2rem;+  height: 1.2rem;+  border-radius: 50%;+  background-color: #ec514e;+  color: #fff;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="page" class="component">+            <header>+              <h2>Page</h2>+            </header>+            <section class="component"><div class="page"></div></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;page&quot;&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+body {+  background-color: #fff;+}++.page {+  background-color: #fff;+}++.topcoat-page__bg {+  background-color: #fff;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;radio&quot;] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++input[type=&quot;radio&quot;] {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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=&quot;radio&quot;]:disabled + .topcoat-radio-button__checkmark {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="radio-button" class="component">+            <header>+              <h2>Radio Button</h2>+            </header>+            <section class="component"><!-- NO LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- LEFT LABEL --><label class="topcoat-radio-button">  Left label  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div></label><br><br><!-- RIGHT LABEL --><label class="topcoat-radio-button">  <input type="radio" name="topcoat">  <div class="topcoat-radio-button__checkmark"></div>  Right label</label><br><br><!-- DISABLED --><label class="topcoat-radio-button">  <input type="radio" name="topcoat" Disabled>  <div class="topcoat-radio-button__checkmark"></div>  Disabled</label></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/HDcJj">Mobile Radio Button</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;!-- NO LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- LEFT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  Left label  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- RIGHT LABEL --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot;&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Right label&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;!-- DISABLED --&gt;&lt;label class=&quot;topcoat-radio-button&quot;&gt;  &lt;input type=&quot;radio&quot; name=&quot;topcoat&quot; Disabled&gt;  &lt;div class=&quot;topcoat-radio-button__checkmark&quot;&gt;&lt;/div&gt;  Disabled&lt;/label&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+input[type=&quot;radio&quot;] {+  height: 1.5rem;+  width: 1.5rem;+  margin-top: 0;+  margin-right: -1.5rem;+  margin-bottom: -1.5rem;+  margin-left: 0;+}++input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {+  opacity: 1;+}++.topcoat-radio-button {+  color: #c6c8c8;+  color: #157dfb;+  line-height: 1.5rem;+  text-align: left;+}++.topcoat-radio-button__checkmark:before {+  width: 1.5rem;+  height: 1.5rem;+  background: var-background-color;+  background: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  box-shadow: none;+}++.topcoat-radio-button__checkmark {+  position: relative;+  width: 1.5rem;+  height: 1.5rem;+}++.topcoat-radio-button__checkmark:after {+  opacity: 0;+  width: 0.9rem;+  height: 0.9rem;+  background: #157dfb;+  border: 1px solid #157dfb;+  box-shadow: 0 1px rgba(255,255,255,0.5);+  -webkit-transform: none;+  -ms-transform: none;+  transform: none;+  top: 0.25rem;+  left: 0.25rem;+}++input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {+  border: none;+  border: 1px solid #157dfb;+  box-shadow: none, none;+}++input[type=&quot;radio&quot;]:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #157dfb;+  border: 1px solid #157dfb;+  background-color: #157dfb;+  background-color: transparent;+  box-shadow: none;+}++input[type=&quot;radio&quot;]:disabled:active + .topcoat-radio-button__checkmark:before {+  border: 1px solid #157dfb;+  background: var-background-color;+  box-shadow: none;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++.range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++.range__thumb {+  cursor: pointer;+}++.range__thumb--webkit {+  cursor: pointer;+  -webkit-appearance: none;+}++.range:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++/*+Copyright 2012 Adobe Systems Inc.;+Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+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 &quot;AS IS&quot; 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.+*/++.range,+.topcoat-range {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -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: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="range" class="component">+            <header>+              <h2>Range</h2>+            </header>+            <section class="component"><input type="range" class="topcoat-range"><input type="range" class="topcoat-range" disabled></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot;&gt;&lt;input type=&quot;range&quot; class=&quot;topcoat-range&quot; disabled&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-range {+  border-radius: 4px;+  border: 1px solid #157dfb;+  border: none;+  background-color: var-background-color--input;+  background-color: #157dfb;+  height: 0.15rem;+  border-radius: 0;+  border-radius: 3px;+}++.topcoat-range::-moz-range-track {+  border-radius: 4px;+  border: 1px solid #157dfb;+  background-color: var-background-color--input;+  background-color: #157dfb;+  height: 0.15rem;+  border-radius: 0;+  border-radius: var-border-radius--none;+}++.topcoat-range::-webkit-slider-thumb {+  height: 2rem;+  height: 1.8rem;+  width: 1.8rem;+  background-color: var-background-color;+  background-color: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range::-moz-range-thumb {+  height: 2rem;+  width: 1.8rem;+  background-color: var-background-color;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  border-radius: 4px;+  border-radius: 50%;+  box-shadow: none;+}++.topcoat-range:focus::-webkit-slider-thumb {+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: none;+}++.topcoat-range:focus::-moz-range-thumb {+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.search-input {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++input[type=&quot;search&quot;]::-webkit-search-cancel-button {+  -webkit-appearance: none;+}++.search-input:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.search-input,+.topcoat-search-input,+.topcoat-search-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+  -webkit-appearance: none;+}++input[type=&quot;search&quot;]::-webkit-search-cancel-button {+  -webkit-appearance: none;+}++.search-input:disabled,+.topcoat-search-input:disabled,+.topcoat-search-input--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="search-input" class="component">+            <header>+              <h2>Search Input</h2>+            </header>+            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input"><input type="search" value="" placeholder="search" class="topcoat-search-input" disabled></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input&quot; disabled&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-search-input,+.topcoat-search-input--large {+  line-height: 2rem;+  height: 2rem;+  font-size: 16px;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  background-color: #fff;+  background-color: #fff;+  box-shadow: var-box-shadow--text-input;+  color: #c6c8c8;+  color: #a3a3a6;+  padding: 0 0 0 1.8rem;+  border-radius: 0;+  border-radius: 4px;+  background-image: url(&quot;../img/search.svg&quot;);+  background-position: 1rem center;+  background-position: 0.5rem center;+  background-repeat: no-repeat;+  background-size: 16px;+}++.topcoat-search-input:focus,+.topcoat-search-input--large:focus {+  background-color: #fff;+  background-color: #fff;+  color: #1f1f21;+  color: #6f6f74;+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: var-box-shadow--text-input, none;+}++.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;+  margin-right: 8px;+}++.topcoat-search-input:focus::-webkit-input-placeholder,+.topcoat-search-input:focus::-webkit-input-placeholder {+  color: #c6c8c8;+}++.topcoat-search-input:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-search-input:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-search-input:disabled:-ms-input-placeholder {+  color: #1f1f21;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-searchinput" class="component">+            <header>+              <h2>Large Search Input</h2>+            </header>+            <section class="component"><input type="search" value="" placeholder="search" class="topcoat-search-input--large"><input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot;&gt;&lt;input type=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search&quot; class=&quot;topcoat-search-input--large&quot; disabled&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-search-input--large {+  line-height: 3.375rem;+  height: 3.375rem;+  font-size: 1.3rem;+  font-weight: 200;+  padding: 0 0 0 2.9rem;+  border-radius: 40px;+  border-radius: 4px;+  background-position: 1.2rem center;+  background-size: 1.3rem;+}++.topcoat-search-input--large:disabled {+  color: #1f1f21;+}++.topcoat-search-input--large:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-search-input--large:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-search-input--large:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.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: none;+  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: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="switch" class="component">+            <header>+              <h2>Switch</h2>+            </header>+            <section class="component"><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input">  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" checked>  <div class="topcoat-switch__toggle"></div></label><br><br><label class="topcoat-switch">  <input type="checkbox" class="topcoat-switch__input" disabled>  <div class="topcoat-switch__toggle"></div></label></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/upxds">mobile switch</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot;&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; checked&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;&lt;br&gt;&lt;br&gt;&lt;label class=&quot;topcoat-switch&quot;&gt;  &lt;input type=&quot;checkbox&quot; class=&quot;topcoat-switch__input&quot; disabled&gt;  &lt;div class=&quot;topcoat-switch__toggle&quot;&gt;&lt;/div&gt;&lt;/label&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-switch {+  font-size: 16px;+  padding: 0 1.25rem;+  border-radius: 4px;+  border-radius: 30px;+  border: 1px solid #157dfb;+  border: none;+  overflow: hidden;+  width: 3.2rem;+  height: 2rem;+}++.topcoat-switch__toggle:before,+.topcoat-switch__toggle:after {+  top: -1px;+  width: 3.5rem;+  border: 0px solid #c8c7cc;+  margin: -0.12rem 0 0 0;+}++.topcoat-switch__toggle:before {+  content: '';+  color: #4cd964;+  background-color: #4cd964;+  right: -0.08rem;+  padding-left: 1.5rem;+  height: 2rem;+  top: 0;+  border-radius: 15px;+}++.topcoat-switch__toggle {+  line-height: 2rem;+  line-height: 1.8rem;+  height: 2rem;+  height: 1.9rem;+  width: 1.9rem;+  border-radius: 4px;+  border-radius: 50%;+  color: #c6c8c8;+  text-shadow: 0 1px none;+  background-color: var-background-color;+  background-color: #fff;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  margin-left: -1.2rem;+  margin-bottom: 0;+  margin-top: 0.06rem;+  box-shadow: none;+  -webkit-transition: margin-left 0.35s cubic-bezier(0.5, 1.6, 0.5, 1);+  transition: margin-left 0.35s cubic-bezier(0.5, 1.6, 0.5, 1);+}++.topcoat-switch__toggle:after {+  content: '';+  background-color: #c8c7cc;+  left: -0.06rem;+  padding-left: 2rem;+  height: 2rem;+  top: 0;+  border-radius: 15px;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle {+  margin-left: -0.05rem;+  background-color: var-background-color--switch__toggle--checked;+}++.topcoat-switch__input:active + .topcoat-switch__toggle {+  border: 1px solid #157dfb;+  box-shadow: none;+}++.topcoat-switch__input:focus + .topcoat-switch__toggle {+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: none;+}++.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,+.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {+  background: transparent;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: #4cd964;+  -webkit-transition: background-color 0.5s cubic-bezier(0.5, 1.6, 0.5, 1);+  transition: background-color 0.5s cubic-bezier(0.5, 1.6, 0.5, 1);+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: #c8c7cc;+  -webkit-transition: background-color 0.5s cubic-bezier(0.5, 1.3, 0.5, 1);+  transition: background-color 0.5s cubic-bezier(0.5, 1.3, 0.5, 1);+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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-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: 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-tab-bar__button:disabled {+  opacity: 0.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 &gt; input,+.topcoat-tab-bar__item &gt; input {+  position: absolute;+  overflow: hidden;+  padding: 0;+  border: 0;+  opacity: 0.001;+  z-index: 1;+  vertical-align: top;+  outline: none;+}++.button-bar__button {+  border-radius: inherit;+}++.button-bar__item:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="tab-bar" class="component">+            <header>+              <h2>Tab Bar</h2>+            </header>+            <section class="component"><div class="topcoat-tab-bar">  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">One</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Two</button>  </label>  <label class="topcoat-tab-bar__item">    <input type="radio" name="tab-bar">    <button class="topcoat-tab-bar__button">Three</button>  </label></div></section>+            <section class="examples">+              <h4>Examples</h4>+              <ul>+                <li><a href="http://codepen.io/Topcoat/pen/rJICF">mobile tab bar</a></li>+              </ul>+            </section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;div class=&quot;topcoat-tab-bar&quot;&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;One&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Two&lt;/button&gt;  &lt;/label&gt;  &lt;label class=&quot;topcoat-tab-bar__item&quot;&gt;    &lt;input type=&quot;radio&quot; name=&quot;tab-bar&quot;&gt;    &lt;button class=&quot;topcoat-tab-bar__button&quot;&gt;Three&lt;/button&gt;  &lt;/label&gt;&lt;/div&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-tab-bar {+  height: 49px;+  background-color: #f8f8f8;+  border-top: 1px solid #c8c7cc;+}++.topcoat-tab-bar__button {+  padding: 0 1.25rem;+  height: 2rem;+  height: 49px;+  line-height: 2rem;+  line-height: 49px;+  letter-spacing: 1px;+  color: #c6c8c8;+  color: #6f6f74;+  text-shadow: 0 1px none;+  vertical-align: top;+  background-color: var-background-color;+  background-color: transparent;+  box-shadow: none;+  border-top: 1px solid #157dfb;+  border-top: none;+}++.topcoat-tab-bar__button:active,+.topcoat-tab-bar__button--large:active,+:checked + .topcoat-tab-bar__button {+  color: #157dfb;+  background-color: transparent;+  box-shadow: none;+  border-top: var-border-top--tab-bar--active;+}++.topcoat-tab-bar__button:focus,+.topcoat-tab-bar__button--large:focus {+  z-index: 1;+  border-top: var-border-top--tab-bar--focus;+  box-shadow: none, none;+  box-shadow: none;+  outline: 0;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.input,+.topcoat-text-input,+.topcoat-text-input--large {+  padding: 0;+  margin: 0;+  font: inherit;+  color: inherit;+  background: transparent;+  border: none;+  -moz-box-sizing: border-box;+  box-sizing: border-box;+  background-clip: padding-box;+  vertical-align: top;+  outline: none;+}++.input:disabled,+.topcoat-text-input:disabled,+.topcoat-text-input--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="text-input" class="component">+            <header>+              <h2>Text input</h2>+            </header>+            <section class="component"><input type="text" class="topcoat-text-input" placeholder="text" value=""><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="" disabled><br><br><input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail"></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-text-input,+.topcoat-text-input--large {+  line-height: 2rem;+  font-size: 16px;+  letter-spacing: 1px;+  padding: 0 1.25rem;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  border-radius: 4px;+  background-color: #fff;+  box-shadow: var-box-shadow--text-input;+  color: #c6c8c8;+  color: #a3a3a6;+  vertical-align: top;+}++.topcoat-text-input:focus,+.topcoat-text-input--large:focus {+  background-color: #fff;+  color: #1f1f21;+  color: #6f6f74;+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-text-input:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-text-input:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input:invalid {+  border: 1px solid #f00;+  color: #f00;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-textinput" class="component">+            <header>+              <h2>Large Text Input</h2>+            </header>+            <section class="component"><input type="text" class="topcoat-text-input--large" value="" placeholder="text"><br><br><input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled><br><br><input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail"></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; value=&quot;&quot; placeholder=&quot;text&quot; disabled&gt;&lt;br&gt;&lt;br&gt;&lt;input type=&quot;text&quot; class=&quot;topcoat-text-input--large&quot; placeholder=&quot;text&quot; value=&quot;fail&quot; pattern=&quot;not-fail&quot;&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-text-input--large {+  line-height: 3.375rem;+  font-size: 1.3rem;+}++.topcoat-text-input--large:disabled {+  color: #1f1f21;+}++.topcoat-text-input--large:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input--large:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-text-input--large:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++.topcoat-text-input--large:invalid {+  border: 1px solid #f00;+  color: #f00;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++/**+*+* Copyright 2012 Adobe Systems Inc.;+*+* Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);+* 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 &quot;AS IS&quot; 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.+*+*/++.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: none;+  vertical-align: top;+  resize: none;+  outline: none;+}++.textarea:disabled,+.topcoat-textarea:disabled,+.topcoat-textarea--large:disabled {+  opacity: 0.3;+  cursor: default;+  pointer-events: none;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="textarea" class="component">+            <header>+              <h2>Textarea</h2>+            </header>+            <section class="component"><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-textarea,+.topcoat-textarea--large {+  padding: 2rem;+  font-size: 2.5rem;+  font-weight: 200;+  border-radius: 4px;+  line-height: 2rem;+  border: 1px solid #157dfb;+  border: 1px solid #c8c7cc;+  background-color: #fff;+  box-shadow: var-box-shadow--text-input;+  color: #c6c8c8;+  color: #a3a3a6;+  letter-spacing: 1px;+}++.topcoat-textarea:focus,+.topcoat-textarea--large:focus {+  background-color: #fff;+  color: #1f1f21;+  color: #6f6f74;+  border: none;+  border: 1px solid #c8c7cc;+  box-shadow: var-box-shadow--text-input, none;+}++.topcoat-textarea:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-textarea:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-textarea:disabled:-ms-input-placeholder {+  color: #1f1f21;+}+</code></pre>+                </div>+              </section>+            </footer>+          </article>+          <article id="large-textarea" class="component">+            <header>+              <h2>Large Textarea</h2>+            </header>+            <section class="component"><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea><br><br><textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea></section>+            <footer>+              <div class="showcode"><a href="#">Show code snippets</a></div>+              <section class="code">+                <div>+                  <h3>HTML</h3>+                  <pre class="html"><code data-language="html">&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;textarea class=&quot;topcoat-textarea--large&quot; rows=&quot;6&quot; cols=&quot;36&quot; placeholder=&quot;Textarea&quot; disabled&gt;&lt;/textarea&gt;</code></pre>+                </div>+                <div>+                  <h3>CSS</h3>+                  <pre class="css"><code data-language="css">+.topcoat-textarea--large {+  font-size: 3rem;+  line-height: 3.375rem;+}++.topcoat-textarea--large:disabled {+  color: #1f1f21;+}++.topcoat-textarea--large:disabled::-webkit-input-placeholder {+  color: #1f1f21;+}++.topcoat-textarea--large:disabled::-moz-placeholder {+  color: #1f1f21;+}++.topcoat-textarea--large:disabled:-ms-input-placeholder {+  color: #1f1f21;+}++@font-face {+  font-family: &quot;Source Sans&quot;;+  src: url(&quot;../font/SourceSansPro-Regular.otf&quot;);+}++@font-face {+  font-family: &quot;Source Sans&quot;;+  src: url(&quot;../font/SourceSansPro-Light.otf&quot;);+  font-weight: 200;+}++@font-face {+  font-family: &quot;Source Sans&quot;;+  src: url(&quot;../font/SourceSansPro-Semibold.otf&quot;);+  font-weight: 600;+}++body {+  margin: 0;+  padding: 0;+  background: #fff;+  color: #000;+  color: var-color--body;+  font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;+  font-weight: 400;+}++:focus {+  outline-color: transparent;+  outline-style: none;+}++.topcoat-icon--menu-stack {+  background: url(&quot;../img/hamburger_dark.svg&quot;) 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: 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;+}++/* This file should include color and image variables corresponding to the dark theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Icon Button */++/* Tab bar */++/* Switch */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Textarea */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the light theme */++/* ---------- colors ---------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* ---------- thickness ---------- */++/* ---------- shadows ---------- */++/* Secondary colors (based on colors above)++Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!++*/++/* Icons */++/* Page */++/* Navigation Bar */++/* Text Input */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Icon Button */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Containers */++/* Icon Button */++/* Navigation bar */++/* List */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */++/* Text Input */++/* Text Area */++/* List */++/* Overlay */++/* Progress bar */++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* Containers */++/* Button */++/* Bar Button */++/* Button Quiet*/++/* Icon Button */++/* Navigation bar */++/* List */++/* Notification */++/* Search Input */++/* Text Area */++/* Checkbox */++/* Radio */++/* Range input */++/* Search Input */++/* Switch */++/* Tab-bar */++/* Call To Action */++/* Text Input */++/* Radio input */++/* Overlay */++/* Textarea */++/* Progress bar container */++/* Progress bar progress */++/* Switch */++/* Notification */++/* Search */</code></pre>+                </div>+              </section>+            </footer>+          </article>+        </div>+        <footer></footer>+      </div>+    </div>+    <script src="js/rainbow-custom.min.js"></script>+    <script src="js/main.js"></script>+  </body>+</html>\ No newline at end of filediff --git a/topcoat/demo/topcoat-mobile-onsen-orange.html b/topcoat/demo/topcoat-mobile-onsen-orange.htmlindex 90e5ac1..da1b9bf 100644--- a/topcoat/demo/topcoat-mobile-onsen-orange.html+++ b/topcoat/demo/topcoat-mobile-onsen-orange.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html" selected="selected">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #de6a08; }@@ -260,15 +269,20 @@   background-color: #f5f0e8 !important;   color: #de6a08;   border: none;+  border-right: 1px solid #de6a08;+  border-right: 1px solid #de6a08; }  .topcoat-button-bar__button:hover {   background-color: #f6790e;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #de6a08; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #f6790e;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #f6790e;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: #de6a08;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #de6a08;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #de6a08;   box-shadow: none, none; } @@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,6 +1192,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1160,6 +1203,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #de6a08;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1172,6 +1216,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #de6a08;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #eec8a4; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #de6a08;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -1940,10 +2006,18 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #de6a08;   box-shadow: none, none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #de6a08;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-onsen-pink.html b/topcoat/demo/topcoat-mobile-onsen-pink.htmlindex 66127e7..e87e68d 100644--- a/topcoat/demo/topcoat-mobile-onsen-pink.html+++ b/topcoat/demo/topcoat-mobile-onsen-pink.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html" selected="selected">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #e95377; }@@ -260,15 +269,20 @@   background-color: #f5f0e8 !important;   color: #e95377;   border: none;+  border-right: 1px solid #e95377;+  border-right: 1px solid #e95377; }  .topcoat-button-bar__button:hover {   background-color: #ec6e8c;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #e95377; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #ec6e8c;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #ec6e8c;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: #e95377;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #e95377;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #e95377;   box-shadow: none, none; } @@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,6 +1192,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1160,6 +1203,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #e95377;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1172,6 +1216,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #e95377;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #f1c1c6; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #e95377;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -1940,10 +2006,18 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #e95377;   box-shadow: none, none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #e95377;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-onsen-purple.html b/topcoat/demo/topcoat-mobile-onsen-purple.htmlindex c39f271..6111383 100644--- a/topcoat/demo/topcoat-mobile-onsen-purple.html+++ b/topcoat/demo/topcoat-mobile-onsen-purple.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html" selected="selected">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #a64a97; }@@ -260,15 +269,20 @@   background-color: #f5f0e8 !important;   color: #a64a97;   border: none;+  border-right: 1px solid #a64a97;+  border-right: 1px solid #a64a97; }  .topcoat-button-bar__button:hover {   background-color: #b559a6;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #a64a97; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #b559a6;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #b559a6;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: #a64a97;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #a64a97;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #a64a97;   box-shadow: none, none; } @@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,6 +1192,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1160,6 +1203,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #a64a97;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1172,6 +1216,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #a64a97;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #ddbed0; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #a64a97;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -1940,10 +2006,18 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #a64a97;   box-shadow: none, none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #a64a97;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/demo/topcoat-mobile-onsen-yellow.html b/topcoat/demo/topcoat-mobile-onsen-yellow.htmlindex bc4673a..2dc48c9 100644--- a/topcoat/demo/topcoat-mobile-onsen-yellow.html+++ b/topcoat/demo/topcoat-mobile-onsen-yellow.html@@ -30,8 +30,10 @@               <option value="topcoat-desktop-light.html">Topcoat Desktop Light</option>               <option value="topcoat-mobile-dark.html">Topcoat Mobile Dark</option>               <option value="topcoat-mobile-light.html">Topcoat Mobile Light</option>+              <option value="topcoat-mobile-onsen-android4_4.html">Topcoat Mobile Onsen Android4_4</option>               <option value="topcoat-mobile-onsen-blue.html">Topcoat Mobile Onsen Blue</option>               <option value="topcoat-mobile-onsen-green.html">Topcoat Mobile Onsen Green</option>+              <option value="topcoat-mobile-onsen-ios7.html">Topcoat Mobile Onsen Ios7</option>               <option value="topcoat-mobile-onsen-orange.html">Topcoat Mobile Onsen Orange</option>               <option value="topcoat-mobile-onsen-pink.html">Topcoat Mobile Onsen Pink</option>               <option value="topcoat-mobile-onsen-purple.html">Topcoat Mobile Onsen Purple</option>@@ -222,6 +224,12 @@                   <pre class="css"><code data-language="css"> .topcoat-button-bar {   margin: var-button-bar-margin;+  border: var-border--button-bar;+}++.topcoat-button-bar__item {+  border-top: var-border-top--button-bar__button;+  border-bottom: var-border-bottom--button-bar__button; }  .topcoat-button-bar &gt; .topcoat-button-bar__item:first-child {@@ -236,6 +244,7 @@  .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button, .topcoat-button-bar__item:first-child &gt; .topcoat-button-bar__button--large {+  border-left: var-border-left--button-bar__button__first;   border-right: none;   border-right: 1px solid #f2bc00; }@@ -260,15 +269,20 @@   background-color: #f5f0e8 !important;   color: #f2bc00;   border: none;+  border-right: 1px solid #f2bc00;+  border-right: 1px solid #f2bc00; }  .topcoat-button-bar__button:hover {   background-color: #ffca12;+  color: var-color--button-bar__button--hover; }  .topcoat-button-bar__button:focus, .topcoat-button-bar__button--large:focus {   z-index: 1;+  z-index: var-border-right--button-bar__button--z-index;+  border-right: 1px solid #f2bc00; } </code></pre>                 </div>@@ -300,6 +314,7 @@  .topcoat-button-bar__button--large:hover {   background-color: #ffca12;+  color: var-color--button-bar__button--hover; }  /**@@ -511,6 +526,7 @@ .topcoat-button--large--quiet:hover {   background-color: var-background-color--hover;   background-color: #ffca12;+  color: var-color--button--hover; }  .topcoat-button:active,@@ -527,6 +543,8 @@ .topcoat-button--large--quiet:focus, .topcoat-button--cta:focus, .topcoat-button--large--cta:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -550,10 +568,16 @@                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-button--quiet {-  color: #f2bc00;   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background: var-quiet-button-background;+  color: #f2bc00;+  border: none;+}++.topcoat-button--quiet:disabled {+  border: none; }  .topcoat-button--quiet:hover,@@ -672,6 +696,7 @@  .topcoat-button--cta:active, .topcoat-button--large--cta:active {+  color: var-color--cta--down;   background-color: #87bee1;   box-shadow: none; }@@ -702,6 +727,11 @@   padding: 0 1.25rem; } +.topcoat-button__spinner {+  border: 3px solid #c6c8c8;+  border: 3px solid #fff;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -926,6 +956,14 @@ input[type=&quot;checkbox&quot;] {   margin-left: 0; } +input[type=&quot;checkbox&quot;]:checked {+  background: var-background-color-checked--checkbox;+}++input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:before {+  background: var-background-color--before--checkbox;+}+ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {   opacity: 1; }@@ -970,6 +1008,7 @@ input[type=&quot;checkbox&quot;]:checked + .topcoat-checkbox__checkmark:after {  input[type=&quot;checkbox&quot;]:focus + .topcoat-checkbox__checkmark:before {   border: none;+  border: 1px solid #f2bc00;   box-shadow: none, none; } @@ -1111,6 +1150,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:hover, .topcoat-icon-button--large--quiet:hover {   background-color: var-background-color--hover;+  background-color: var-background-color--icon-button-quiet--hover; }  .topcoat-icon-button:active {@@ -1124,6 +1164,8 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark: .topcoat-icon-button--large:focus, .topcoat-icon-button--large--quiet:focus, .topcoat-icon-button--large--quiet:hover:focus {+  border: none;+  box-shadow: none;   outline: 0; } </code></pre>@@ -1150,6 +1192,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background: transparent;   border: 1px solid transparent;   box-shadow: none;+  background-color: var-background-color__icon-button--quiet;   border: none;   color: #fff; }@@ -1160,6 +1203,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #f2bc00;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--hover; }  .topcoat-icon-button--quiet:active,@@ -1172,6 +1216,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border: 1px solid #f2bc00;   border: none;   box-shadow: none;+  box-shadow: var-box-shadow--icon-button-quiet--down; } </code></pre>                 </div>@@ -1482,6 +1527,7 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-top: none;   color: #c6c8c8;   padding: 0;+  background-color: var-background-color--list-container; }  .topcoat-list__item {@@ -1493,18 +1539,28 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   background-color: transparent; } -.topcoat-list__item:active {+.topcoat-list__item_active:active {   background-color: #f4e0a2; }  .topcoat-list__item:first-child {+  padding-left: var-padding-left--list-item--first;+  margin: var-margin--list-item--first;   border-top: none;+  border-bottom: var-border-bottom--list-item--first; }  .topcoat-list__item:last-child {+  padding-left: var-padding-left--list-item--last;+  margin: var-margin--list-item--last;+  border-top: var-border-top--list-item--last;   border-bottom: 1px solid #b3b3b3; } +.topcoat-list__item:nth-child(2) {+  border-top: var-border-top--list-item--2;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -1723,6 +1779,16 @@ input[type=&quot;checkbox&quot;]:disabled:active + .topcoat-checkbox__checkmark:   border-bottom: 1px solid #8b8b8b; } +.topcoat-navigation-bar__line-height {+  line-height: 3.375rem !important;+  line-height: 2.5rem !important;+}++.topcoat-navigation-bar__bg {+  background: var-background-color;+  background: #f2bc00;+}+ .topcoat-navigation-bar__item {   margin: 0;   line-height: 3.375rem;@@ -1940,10 +2006,18 @@ limitations under the License.                 <div>                   <h3>CSS</h3>                   <pre class="css"><code data-language="css">+body {+  background-color: #f5f0e8;+}+ .page {   background-color: #f5f0e8; } +.topcoat-page__bg {+  background-color: #f5f0e8;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -2226,6 +2300,7 @@ input[type=&quot;radio&quot;]:checked + .topcoat-radio-button__checkmark:after {  input[type=&quot;radio&quot;]:focus + .topcoat-radio-button__checkmark:before {   border: none;+  border: 1px solid #f2bc00;   box-shadow: none, none; } @@ -2439,11 +2514,13 @@ limitations under the License.  .topcoat-range:focus::-webkit-slider-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; }  .topcoat-range:focus::-moz-range-thumb {   border: none;+  border: 1px solid #8a8a8a;   box-shadow: none; } @@ -2603,11 +2680,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #faf7f3;   box-shadow: var-box-shadow--text-input;   color: #c6c8c8;+  color: var-color--search-input;   padding: 0 0 0 2.2rem;   border-radius: 0;   border-radius: 4px;   background-image: url(&quot;../img/search.svg&quot;);   background-position: 1rem center;+  background-position: var-background-position--search-input;   background-repeat: no-repeat;   background-size: 16px; }@@ -2617,6 +2696,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background-color: #ececec;   background-color: var-background-color--search-input--focus;   color: #000;+  color: var-color--search-input--focus;   border: none;   border: none;   box-shadow: var-box-shadow--text-input, none;@@ -2627,6 +2707,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-search-input--large::-webkit-search-cancel-button, .topcoat-search-input--large::-webkit-search-decoration {   margin-right: 5px;+  margin-right: var-margin-right--search-decoration; }  .topcoat-search-input:focus::-webkit-input-placeholder,@@ -2917,12 +2998,15 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   border: none;   overflow: hidden;   width: 4rem;+  height: var-height--switch; }  .topcoat-switch__toggle:before, .topcoat-switch__toggle:after {   top: -1px;   width: 4rem;+  border: var-border--switch__label;+  margin: var-margin--switch__label; }  .topcoat-switch__toggle:before {@@ -2970,6 +3054,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:checked + .topcoat-switch__toggle {   margin-left: 0.75rem;+  background-color: var-background-color--switch__toggle--checked; }  .topcoat-switch__input:active + .topcoat-switch__toggle {@@ -2979,6 +3064,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {  .topcoat-switch__input:focus + .topcoat-switch__toggle {   border: none;+  border: 1px solid #b3b3b3;   box-shadow: none; } @@ -2987,6 +3073,26 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   background: transparent; } +.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+.topcoat-switch__input:checked + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label--checked;+  -webkit-transition: var-transition--switch__label--checked;+  transition: var-transition--switch__label--checked;+}++.topcoat-switch__input + .topcoat-switch__toggle:after,+.topcoat-switch__input + .topcoat-switch__toggle:before {+  background-color: var-background-color--switch__label;+  -webkit-transition: var-transition--switch__label;+  transition: var-transition--switch__label;+}++.topcoat-switch__input:checked + .topcoat-switch__toggle:after,+box-shadow var-box-shadow--switch__label--after--checked,+.topcoat-switch__input + .topcoat-switch__toggle:after {+  box-shadow: var-box-shadow--switch__label--after;+}+ /** * * Copyright 2012 Adobe Systems Inc.;@@ -3125,6 +3231,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {                   <h3>CSS</h3>                   <pre class="css"><code data-language="css"> .topcoat-tab-bar {+  height: var-height--tab-bar;   background-color: #eae5e3;   border-top: 1px solid #b5b0aa; }@@ -3153,11 +3260,13 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button {   color: #f2bc00;   background-color: transparent;   box-shadow: none;+  border-top: var-border-top--tab-bar--active; }  .topcoat-tab-bar__button:focus, .topcoat-tab-bar__button--large:focus {   z-index: 1;+  border-top: var-border-top--tab-bar--focus;   box-shadow: none, none;   box-shadow: none;   outline: 0;@@ -3262,6 +3371,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-text-input--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--text-input--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3486,6 +3596,7 @@ input[type=&quot;search&quot;]::-webkit-search-cancel-button { .topcoat-textarea--large:focus {   background-color: #ececec;   color: #000;+  color: var-color--textarea--focus;   border: none;   border: 1px solid #b3b3b3;   box-shadow: var-box-shadow--text-input, none;@@ -3565,6 +3676,7 @@ body {   padding: 0;   background: #f5f0e8;   color: #000;+  color: var-color--body;   font: 16px &quot;Source Sans&quot;, helvetica, arial, sans-serif;   font-weight: 400; }@@ -3654,6 +3766,8 @@ body {  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3670,6 +3784,8 @@ body {  /* Radio Button */ +/* Icon Button */+ /* Tab bar */  /* Switch */@@ -3716,6 +3832,8 @@ Everything below this line should be calculated using the variables above. This  /* Icons */ +/* Page */+ /* Navigation Bar */  /* Text Input */@@ -3730,6 +3848,8 @@ Everything below this line should be calculated using the variables above. This  /* Range input */ +/* Icon Button */+ /* Radio Button */  /* Tab bar */@@ -3778,6 +3898,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch !*/++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -3878,6 +4048,56 @@ Everything below this line should be calculated using the variables above. This  /* Navigation Bar */ +/* Text Input !*/++/* Text Area !*/++/* List !*/++/* Overlay !!!*/++/* Progress bar !!!*/++/* Checkbox */++/* Range input */++/* Radio Button */++/* Tab bar */++/* Switch */++/* Bar button */++/* Button */++/* Button Quiet*/++/* Notification */++/* Search-Input */++/* This file should include color and image variables corresponding to the onsen theme */++/* --------- colors --------- */++/* ---------- darken ---------- */++/* ---------- lighten ---------- */++/* ---------- alphas ---------- */++/* Page */++/* Call To Action */++/*Icon-Button*/++/* Icons */++/* Navigation Bar */+ /* Text Input */  /* Text Area */@@ -4064,6 +4284,8 @@ Everything below this line should be calculated using the variables above. This  /* Bar Button */ +/* Button Quiet*/+ /* Icon Button */  /* Navigation bar */diff --git a/topcoat/package.json b/topcoat/package.jsonindex b7bf8c5..9af7a07 100644--- a/topcoat/package.json+++ b/topcoat/package.json@@ -36,7 +36,7 @@     "topcoat-switch-base": "~0.1.0",     "topcoat-range-base": "0.0.3",     "topcoat-range": "~0.1.0",-    "onsen-page": "~0.1.0"+    "topcoat-page": "~0.1.0"   },   "devDependencies": {     "grunt": "~0.4.1",