1/**
2*
3* Copyright 2012 Adobe Systems Inc.;
4*
5* Licensed under the Apache License, Version 2.0 (the "License");
6* you may not use this file except in compliance with the License.
7* You may obtain a copy of the License at
8*
9* http://www.apache.org/licenses/LICENSE-2.0
10*
11* Unless required by applicable law or agreed to in writing, software
12* distributed under the License is distributed on an "AS IS" BASIS,
13* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14* See the License for the specific language governing permissions and
15* limitations under the License.
16*
17*/
18
19.button-bar {
20  display: table;
21  table-layout: fixed;
22  white-space: nowrap;
23  margin: 0;
24  padding: 0;
25}
26
27.button-bar__item {
28  display: table-cell;
29  width: auto;
30  border-radius: 0;
31}
32
33.button-bar__item > input {
34  position: absolute;
35  overflow: hidden;
36  padding: 0;
37  border: 0;
38  opacity: 0.001;
39  z-index: 1;
40  vertical-align: top;
41  outline: none;
42}
43
44.button-bar__button {
45  border-radius: inherit;
46}
47
48.button-bar__item:disabled {
49  opacity: 0.3;
50  cursor: default;
51  pointer-events: none;
52}
53
54/**
55*
56* Copyright 2012 Adobe Systems Inc.;
57*
58* Licensed under the Apache License, Version 2.0 (the "License");
59* you may not use this file except in compliance with the License.
60* You may obtain a copy of the License at
61*
62* http://www.apache.org/licenses/LICENSE-2.0
63*
64* Unless required by applicable law or agreed to in writing, software
65* distributed under the License is distributed on an "AS IS" BASIS,
66* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
67* See the License for the specific language governing permissions and
68* limitations under the License.
69*
70*/
71
72/**
73*
74* Copyright 2012 Adobe Systems Inc.;
75*
76* Licensed under the Apache License, Version 2.0 (the "License");
77* you may not use this file except in compliance with the License.
78* You may obtain a copy of the License at
79*
80* http://www.apache.org/licenses/LICENSE-2.0
81*
82* Unless required by applicable law or agreed to in writing, software
83* distributed under the License is distributed on an "AS IS" BASIS,
84* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
85* See the License for the specific language governing permissions and
86* limitations under the License.
87*
88*/
89
90/**
91*
92* Copyright 2012 Adobe Systems Inc.;
93*
94* Licensed under the Apache License, Version 2.0 (the "License");
95* you may not use this file except in compliance with the License.
96* You may obtain a copy of the License at
97*
98* http://www.apache.org/licenses/LICENSE-2.0
99*
100* Unless required by applicable law or agreed to in writing, software
101* distributed under the License is distributed on an "AS IS" BASIS,
102* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
103* See the License for the specific language governing permissions and
104* limitations under the License.
105*
106*/
107
108.button,
109.topcoat-button,
110.topcoat-button--quiet,
111.topcoat-button--large,
112.topcoat-button--large--quiet,
113.topcoat-button--cta,
114.topcoat-button--large--cta,
115.topcoat-button-bar__button,
116.topcoat-button-bar__button--large {
117  position: relative;
118  display: inline-block;
119  vertical-align: top;
120  -moz-box-sizing: border-box;
121  box-sizing: border-box;
122  background-clip: padding-box;
123  padding: 0;
124  margin: 0;
125  font: inherit;
126  color: inherit;
127  background: transparent;
128  border: none;
129  cursor: default;
130  -webkit-user-select: none;
131  -moz-user-select: none;
132  -ms-user-select: none;
133  user-select: none;
134  text-overflow: ellipsis;
135  white-space: nowrap;
136  overflow: hidden;
137  text-decoration: none;
138}
139
140.button--quiet {
141  background: transparent;
142  border: 1px solid transparent;
143  box-shadow: none;
144}
145
146.button--disabled,
147.topcoat-button:disabled,
148.topcoat-button--quiet:disabled,
149.topcoat-button--large:disabled,
150.topcoat-button--large--quiet:disabled,
151.topcoat-button--cta:disabled,
152.topcoat-button--large--cta:disabled,
153.topcoat-button-bar__button:disabled,
154.topcoat-button-bar__button--large:disabled {
155  opacity: 0.3;
156  cursor: default;
157  pointer-events: none;
158}
159
160.topcoat-button,
161.topcoat-button--quiet,
162.topcoat-button--large,
163.topcoat-button--large--quiet,
164.topcoat-button--cta,
165.topcoat-button--large--cta,
166.topcoat-button-bar__button,
167.topcoat-button-bar__button--large {
168  padding: 0 1.25rem;
169  font-size: 16px;
170  line-height: 3rem;
171  letter-spacing: 1px;
172  color: #454545;
173  text-shadow: 0 1px #fff;
174  vertical-align: top;
175  background-color: #e5e9e8;
176  box-shadow: inset 0 1px #fff;
177  border: 1px solid #a5a8a8;
178  border-radius: 6px;
179}
180
181.topcoat-button:hover,
182.topcoat-button--quiet:hover,
183.topcoat-button--large:hover,
184.topcoat-button--large--quiet:hover,
185.topcoat-button-bar__button:hover,
186.topcoat-button-bar__button--large:hover {
187  background-color: #edf1f1;
188}
189
190.topcoat-button:active,
191.topcoat-button--large:active,
192.topcoat-button-bar__button:active,
193.topcoat-button-bar__button--large:active,
194:checked + .topcoat-button-bar__button {
195  background-color: #d3d7d7;
196  box-shadow: inset 0 1px rgba(0,0,0,0.12);
197}
198
199.topcoat-button:focus,
200.topcoat-button--quiet:focus,
201.topcoat-button--large:focus,
202.topcoat-button--large--quiet:focus,
203.topcoat-button--cta:focus,
204.topcoat-button--large--cta:focus,
205.topcoat-button-bar__button:focus,
206.topcoat-button-bar__button--large:focus {
207  border: 1px solid #0940fd;
208  box-shadow: 0 0 0 2px #6fb5f1;
209  outline: 0;
210}
211
212.topcoat-button--quiet {
213  background: transparent;
214  border: 1px solid transparent;
215  box-shadow: none;
216}
217
218.topcoat-button--quiet:hover,
219.topcoat-button--large--quiet:hover {
220  text-shadow: 0 1px #fff;
221  border: 1px solid #a5a8a8;
222  box-shadow: inset 0 1px #fff;
223}
224
225.topcoat-button--quiet:active,
226.topcoat-button--large--quiet:active {
227  color: #454545;
228  text-shadow: 0 1px #fff;
229  background-color: #d3d7d7;
230  border: 1px solid #a5a8a8;
231  box-shadow: inset 0 1px rgba(0,0,0,0.12);
232}
233
234.topcoat-button--large,
235.topcoat-button--large--quiet,
236.topcoat-button-bar__button--large {
237  font-size: 1.3rem;
238  font-weight: 400;
239  line-height: 4.375rem;
240  padding: 0 1.25rem;
241}
242
243.topcoat-button--large--quiet {
244  background: transparent;
245  border: 1px solid transparent;
246  box-shadow: none;
247}
248
249.topcoat-button--cta,
250.topcoat-button--large--cta {
251  border: 1px solid #143250;
252  background-color: #288edf;
253  box-shadow: inset 0 1px rgba(255,255,255,0.36);
254  color: #fff;
255  font-weight: 500;
256  text-shadow: 0 -1px rgba(0,0,0,0.36);
257}
258
259.topcoat-button--cta:hover,
260.topcoat-button--large--cta:hover {
261  background-color: #509bef;
262}
263
264.topcoat-button--cta:active,
265.topcoat-button--large--cta:active {
266  background-color: #0380e8;
267  box-shadow: inset 0 1px rgba(0,0,0,0.12);
268}
269
270.topcoat-button--large--cta {
271  font-size: 1.3rem;
272  font-weight: 400;
273  line-height: 4.375rem;
274  padding: 0 1.25rem;
275}
276
277.button-bar,
278.topcoat-button-bar {
279  display: table;
280  table-layout: fixed;
281  white-space: nowrap;
282  margin: 0;
283  padding: 0;
284}
285
286.button-bar__item,
287.topcoat-button-bar__item {
288  display: table-cell;
289  width: auto;
290  border-radius: 0;
291}
292
293.button-bar__item > input,
294.topcoat-button-bar__item > input {
295  position: absolute;
296  overflow: hidden;
297  padding: 0;
298  border: 0;
299  opacity: 0.001;
300  z-index: 1;
301  vertical-align: top;
302  outline: none;
303}
304
305.button-bar__button {
306  border-radius: inherit;
307}
308
309.button-bar__item:disabled {
310  opacity: 0.3;
311  cursor: default;
312  pointer-events: none;
313}
314
315/* topdoc
316  name: Button Bar
317  description: Component of grouped buttons
318  modifiers:
319    :disabled: Disabled state
320  markup:
321    <div class="topcoat-button-bar">
322      <div class="topcoat-button-bar__item">
323        <button class="topcoat-button-bar__button">One</button>
324      </div>
325      <div class="topcoat-button-bar__item">
326        <button class="topcoat-button-bar__button">Two</button>
327      </div>
328      <div class="topcoat-button-bar__item">
329        <button class="topcoat-button-bar__button">Three</button>
330      </div>
331    </div>
332  examples:
333    mobile button bar: http://codepen.io/Topcoat/pen/kdKyg
334  tags:
335    - desktop
336    - light
337    - dark
338    - mobile
339    - button
340    - group
341    - bar
342*/
343
344.topcoat-button-bar > .topcoat-button-bar__item:first-child {
345  border-top-left-radius: 6px;
346  border-bottom-left-radius: 6px;
347}
348
349.topcoat-button-bar > .topcoat-button-bar__item:last-child {
350  border-top-right-radius: 6px;
351  border-bottom-right-radius: 6px;
352}
353
354.topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
355.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
356  border-right: none;
357}
358
359.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
360.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
361  border-left: none;
362}
363
364.topcoat-button-bar__button {
365  border-radius: inherit;
366}
367
368.topcoat-button-bar__button:focus,
369.topcoat-button-bar__button--large:focus {
370  z-index: 1;
371}
372
373/* topdoc
374  name: Large Button Bar
375  description: A button bar, only larger
376  modifiers:
377    :disabled: Disabled state
378  markup:
379    <div class="topcoat-button-bar">
380      <div class="topcoat-button-bar__item">
381        <button class="topcoat-button-bar__button--large">One</button>
382      </div>
383      <div class="topcoat-button-bar__item">
384        <button class="topcoat-button-bar__button--large">Two</button>
385      </div>
386      <div class="topcoat-button-bar__item">
387        <button class="topcoat-button-bar__button--large">Three</button>
388      </div>
389    </div>
390  tags:
391    - desktop
392    - light
393    - dark
394    - mobile
395    - button
396    - group
397    - bar
398    - large
399*/
400
401.topcoat-button-bar__button--large {
402  border-radius: inherit;
403}
404
405/**
406*
407* Copyright 2012 Adobe Systems Inc.;
408*
409* Licensed under the Apache License, Version 2.0 (the "License");
410* you may not use this file except in compliance with the License.
411* You may obtain a copy of the License at
412*
413* http://www.apache.org/licenses/LICENSE-2.0
414*
415* Unless required by applicable law or agreed to in writing, software
416* distributed under the License is distributed on an "AS IS" BASIS,
417* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
418* See the License for the specific language governing permissions and
419* limitations under the License.
420*
421*/
422
423.button {
424  position: relative;
425  display: inline-block;
426  vertical-align: top;
427  -moz-box-sizing: border-box;
428  box-sizing: border-box;
429  background-clip: padding-box;
430  padding: 0;
431  margin: 0;
432  font: inherit;
433  color: inherit;
434  background: transparent;
435  border: none;
436  cursor: default;
437  -webkit-user-select: none;
438  -moz-user-select: none;
439  -ms-user-select: none;
440  user-select: none;
441  text-overflow: ellipsis;
442  white-space: nowrap;
443  overflow: hidden;
444  text-decoration: none;
445}
446
447.button--quiet {
448  background: transparent;
449  border: 1px solid transparent;
450  box-shadow: none;
451}
452
453.button--disabled {
454  opacity: 0.3;
455  cursor: default;
456  pointer-events: none;
457}
458
459/**
460*
461* Copyright 2012 Adobe Systems Inc.;
462*
463* Licensed under the Apache License, Version 2.0 (the "License");
464* you may not use this file except in compliance with the License.
465* You may obtain a copy of the License at
466*
467* http://www.apache.org/licenses/LICENSE-2.0
468*
469* Unless required by applicable law or agreed to in writing, software
470* distributed under the License is distributed on an "AS IS" BASIS,
471* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
472* See the License for the specific language governing permissions and
473* limitations under the License.
474*
475*/
476
477/**
478*
479* Copyright 2012 Adobe Systems Inc.;
480*
481* Licensed under the Apache License, Version 2.0 (the "License");
482* you may not use this file except in compliance with the License.
483* You may obtain a copy of the License at
484*
485* http://www.apache.org/licenses/LICENSE-2.0
486*
487* Unless required by applicable law or agreed to in writing, software
488* distributed under the License is distributed on an "AS IS" BASIS,
489* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
490* See the License for the specific language governing permissions and
491* limitations under the License.
492*
493*/
494
495/**
496*
497* Copyright 2012 Adobe Systems Inc.;
498*
499* Licensed under the Apache License, Version 2.0 (the "License");
500* you may not use this file except in compliance with the License.
501* You may obtain a copy of the License at
502*
503* http://www.apache.org/licenses/LICENSE-2.0
504*
505* Unless required by applicable law or agreed to in writing, software
506* distributed under the License is distributed on an "AS IS" BASIS,
507* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
508* See the License for the specific language governing permissions and
509* limitations under the License.
510*
511*/
512
513.button,
514.topcoat-button,
515.topcoat-button--quiet,
516.topcoat-button--large,
517.topcoat-button--large--quiet,
518.topcoat-button--cta,
519.topcoat-button--large--cta {
520  position: relative;
521  display: inline-block;
522  vertical-align: top;
523  -moz-box-sizing: border-box;
524  box-sizing: border-box;
525  background-clip: padding-box;
526  padding: 0;
527  margin: 0;
528  font: inherit;
529  color: inherit;
530  background: transparent;
531  border: none;
532  cursor: default;
533  -webkit-user-select: none;
534  -moz-user-select: none;
535  -ms-user-select: none;
536  user-select: none;
537  text-overflow: ellipsis;
538  white-space: nowrap;
539  overflow: hidden;
540  text-decoration: none;
541}
542
543.button--quiet {
544  background: transparent;
545  border: 1px solid transparent;
546  box-shadow: none;
547}
548
549.button--disabled,
550.topcoat-button:disabled,
551.topcoat-button--quiet:disabled,
552.topcoat-button--large:disabled,
553.topcoat-button--large--quiet:disabled,
554.topcoat-button--cta:disabled,
555.topcoat-button--large--cta:disabled {
556  opacity: 0.3;
557  cursor: default;
558  pointer-events: none;
559}
560
561/* topdoc
562  name: Button
563  description: A simple button
564  modifiers:
565    :active: Active state
566    :disabled: Disabled state
567    :hover: Hover state
568    :focus: Focused
569  markup:
570    <button class="topcoat-button">Button</button>
571    <button class="topcoat-button" disabled>Button</button>
572  examples:
573    mobile button: http://codepen.io/Topcoat/pen/DpKtf
574  tags:
575    - desktop
576    - light
577    - mobile
578    - button
579*/
580
581.topcoat-button,
582.topcoat-button--quiet,
583.topcoat-button--large,
584.topcoat-button--large--quiet,
585.topcoat-button--cta,
586.topcoat-button--large--cta {
587  padding: 0 1.25rem;
588  font-size: 16px;
589  line-height: 3rem;
590  letter-spacing: 1px;
591  color: #454545;
592  text-shadow: 0 1px #fff;
593  vertical-align: top;
594  background-color: #e5e9e8;
595  box-shadow: inset 0 1px #fff;
596  border: 1px solid #a5a8a8;
597  border-radius: 6px;
598}
599
600.topcoat-button:hover,
601.topcoat-button--quiet:hover,
602.topcoat-button--large:hover,
603.topcoat-button--large--quiet:hover {
604  background-color: #edf1f1;
605}
606
607.topcoat-button:active,
608.topcoat-button--large:active {
609  background-color: #d3d7d7;
610  box-shadow: inset 0 1px rgba(0,0,0,0.12);
611}
612
613.topcoat-button:focus,
614.topcoat-button--quiet:focus,
615.topcoat-button--large:focus,
616.topcoat-button--large--quiet:focus,
617.topcoat-button--cta:focus,
618.topcoat-button--large--cta:focus {
619  border: 1px solid #0940fd;
620  box-shadow: 0 0 0 2px #6fb5f1;
621  outline: 0;
622}
623
624/* topdoc
625  name: Quiet Button
626  description: A simple, yet quiet button
627  modifiers:
628    :active: Quiet button active state
629    :disabled: Disabled state
630    :hover: Hover state
631    :focus: Focused
632  markup:
633    <button class="topcoat-button--quiet">Button</button>
634    <button class="topcoat-button--quiet" disabled>Button</button>
635  tags:
636    - desktop
637    - light
638    - mobile
639    - button
640    - quiet
641*/
642
643.topcoat-button--quiet {
644  background: transparent;
645  border: 1px solid transparent;
646  box-shadow: none;
647}
648
649.topcoat-button--quiet:hover,
650.topcoat-button--large--quiet:hover {
651  text-shadow: 0 1px #fff;
652  border: 1px solid #a5a8a8;
653  box-shadow: inset 0 1px #fff;
654}
655
656.topcoat-button--quiet:active,
657.topcoat-button--large--quiet:active {
658  color: #454545;
659  text-shadow: 0 1px #fff;
660  background-color: #d3d7d7;
661  border: 1px solid #a5a8a8;
662  box-shadow: inset 0 1px rgba(0,0,0,0.12);
663}
664
665/* topdoc
666  name: Large Button
667  description: A big ol button
668  modifiers:
669    :active: Active state
670    :disabled: Disabled state
671    :hover: Hover state
672    :focus: Focused
673  markup:
674    <button class="topcoat-button--large" >Button</button>
675    <button class="topcoat-button--large" disabled>Button</button>
676  tags:
677    - desktop
678    - light
679    - mobile
680    - button
681    - large
682*/
683
684.topcoat-button--large,
685.topcoat-button--large--quiet {
686  font-size: 1.3rem;
687  font-weight: 400;
688  line-height: 4.375rem;
689  padding: 0 1.25rem;
690}
691
692/* topdoc
693  name: Large Quiet Button
694  description: A large, yet quiet button
695  modifiers:
696    :active: Active state
697    :disabled: Disabled state
698    :hover: Hover state
699    :focus: Focused
700  markup:
701    <button class="topcoat-button--large--quiet" >Button</button>
702    <button class="topcoat-button--large--quiet" disabled>Button</button>
703  tags:
704    - desktop
705    - light
706    - mobile
707    - button
708    - large
709    - quiet
710*/
711
712.topcoat-button--large--quiet {
713  background: transparent;
714  border: 1px solid transparent;
715  box-shadow: none;
716}
717
718/* topdoc
719  name: Call To Action Button
720  description: A CALL TO ARMS, er, ACTION!
721  modifiers:
722    :active: Active state
723    :disabled: Disabled state
724    :hover: Hover state
725    :focus: Focused
726  markup:
727    <button class="topcoat-button--cta" >Button</button>
728    <button class="topcoat-button--cta" disabled>Button</button>
729  tags:
730    - desktop
731    - light
732    - mobile
733    - button
734    - call to action
735*/
736
737.topcoat-button--cta,
738.topcoat-button--large--cta {
739  border: 1px solid #143250;
740  background-color: #288edf;
741  box-shadow: inset 0 1px rgba(255,255,255,0.36);
742  color: #fff;
743  font-weight: 500;
744  text-shadow: 0 -1px rgba(0,0,0,0.36);
745}
746
747.topcoat-button--cta:hover,
748.topcoat-button--large--cta:hover {
749  background-color: #509bef;
750}
751
752.topcoat-button--cta:active,
753.topcoat-button--large--cta:active {
754  background-color: #0380e8;
755  box-shadow: inset 0 1px rgba(0,0,0,0.12);
756}
757
758/* topdoc
759  name: Large Call To Action Button
760  description: Like call to action, but bigger
761  modifiers:
762    :active: Active state
763    :disabled: Disabled state
764    :hover: Hover state
765    :focus: Focused
766  markup:
767    <button class="topcoat-button--large--cta" >Button</button>
768    <button class="topcoat-button--large--cta" disabled>Button</button>
769  tags:
770    - desktop
771    - light
772    - mobile
773    - button
774    - large
775    - call to action
776*/
777
778.topcoat-button--large--cta {
779  font-size: 1.3rem;
780  font-weight: 400;
781  line-height: 4.375rem;
782  padding: 0 1.25rem;
783}
784
785/**
786*
787* Copyright 2012 Adobe Systems Inc.;
788*
789* Licensed under the Apache License, Version 2.0 (the "License");
790* you may not use this file except in compliance with the License.
791* You may obtain a copy of the License at
792*
793* http://www.apache.org/licenses/LICENSE-2.0
794*
795* Unless required by applicable law or agreed to in writing, software
796* distributed under the License is distributed on an "AS IS" BASIS,
797* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
798* See the License for the specific language governing permissions and
799* limitations under the License.
800*
801*/
802
803input[type="checkbox"] {
804  position: absolute;
805  overflow: hidden;
806  padding: 0;
807  border: 0;
808  opacity: 0.001;
809  z-index: 1;
810  vertical-align: top;
811  outline: none;
812}
813
814.checkbox {
815  -moz-box-sizing: border-box;
816  box-sizing: border-box;
817  background-clip: padding-box;
818  position: relative;
819  display: inline-block;
820  vertical-align: top;
821  cursor: default;
822  -webkit-user-select: none;
823  -moz-user-select: none;
824  -ms-user-select: none;
825  user-select: none;
826}
827
828.checkbox__label {
829  position: relative;
830  display: inline-block;
831  vertical-align: top;
832  cursor: default;
833  -webkit-user-select: none;
834  -moz-user-select: none;
835  -ms-user-select: none;
836  user-select: none;
837}
838
839.checkbox--disabled {
840  opacity: 0.3;
841  cursor: default;
842  pointer-events: none;
843}
844
845.checkbox:before,
846.checkbox:after {
847  content: '';
848  position: absolute;
849}
850
851.checkbox:before {
852  -moz-box-sizing: border-box;
853  box-sizing: border-box;
854  background-clip: padding-box;
855}
856
857/**
858*
859* Copyright 2012 Adobe Systems Inc.;
860*
861* Licensed under the Apache License, Version 2.0 (the "License");
862* you may not use this file except in compliance with the License.
863* You may obtain a copy of the License at
864*
865* http://www.apache.org/licenses/LICENSE-2.0
866*
867* Unless required by applicable law or agreed to in writing, software
868* distributed under the License is distributed on an "AS IS" BASIS,
869* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
870* See the License for the specific language governing permissions and
871* limitations under the License.
872*
873*/
874
875/**
876*
877* Copyright 2012 Adobe Systems Inc.;
878*
879* Licensed under the Apache License, Version 2.0 (the "License");
880* you may not use this file except in compliance with the License.
881* You may obtain a copy of the License at
882*
883* http://www.apache.org/licenses/LICENSE-2.0
884*
885* Unless required by applicable law or agreed to in writing, software
886* distributed under the License is distributed on an "AS IS" BASIS,
887* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
888* See the License for the specific language governing permissions and
889* limitations under the License.
890*
891*/
892
893/**
894*
895* Copyright 2012 Adobe Systems Inc.;
896*
897* Licensed under the Apache License, Version 2.0 (the "License");
898* you may not use this file except in compliance with the License.
899* You may obtain a copy of the License at
900*
901* http://www.apache.org/licenses/LICENSE-2.0
902*
903* Unless required by applicable law or agreed to in writing, software
904* distributed under the License is distributed on an "AS IS" BASIS,
905* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
906* See the License for the specific language governing permissions and
907* limitations under the License.
908*
909*/
910
911input[type="checkbox"] {
912  position: absolute;
913  overflow: hidden;
914  padding: 0;
915  border: 0;
916  opacity: 0.001;
917  z-index: 1;
918  vertical-align: top;
919  outline: none;
920}
921
922.checkbox,
923.topcoat-checkbox__checkmark {
924  -moz-box-sizing: border-box;
925  box-sizing: border-box;
926  background-clip: padding-box;
927  position: relative;
928  display: inline-block;
929  vertical-align: top;
930  cursor: default;
931  -webkit-user-select: none;
932  -moz-user-select: none;
933  -ms-user-select: none;
934  user-select: none;
935}
936
937.checkbox__label,
938.topcoat-checkbox {
939  position: relative;
940  display: inline-block;
941  vertical-align: top;
942  cursor: default;
943  -webkit-user-select: none;
944  -moz-user-select: none;
945  -ms-user-select: none;
946  user-select: none;
947}
948
949.checkbox--disabled,
950input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
951  opacity: 0.3;
952  cursor: default;
953  pointer-events: none;
954}
955
956.checkbox:before,
957.checkbox:after,
958.topcoat-checkbox__checkmark:before,
959.topcoat-checkbox__checkmark:after {
960  content: '';
961  position: absolute;
962}
963
964.checkbox:before,
965.topcoat-checkbox__checkmark:before {
966  -moz-box-sizing: border-box;
967  box-sizing: border-box;
968  background-clip: padding-box;
969}
970
971/* topdoc
972  name: Checkbox
973  description: Default skin for Topcoat checkbox
974  modifiers:
975    :focus: Focus state
976    :disabled: Disabled state
977  markup:
978    <label class="topcoat-checkbox">
979      <input type="checkbox">
980      <div class="topcoat-checkbox__checkmark"></div>
981      Default
982    </label>
983    <br>
984    <br>
985    <label class="topcoat-checkbox">
986      <input type="checkbox" disabled>
987      <div class="topcoat-checkbox__checkmark"></div>
988      Disabled
989    </label>
990  examples:
991    mobile checkbox: http://codepen.io/Topcoat/pen/piHcs
992  tags:
993    - desktop
994    - light
995    - mobile
996    - checkbox
997*/
998
999.topcoat-checkbox__checkmark {
1000  height: 2rem;
1001}
1002
1003input[type="checkbox"] {
1004  height: 2rem;
1005  width: 2rem;
1006  margin-top: 0;
1007  margin-right: -2rem;
1008  margin-bottom: -2rem;
1009  margin-left: 0;
1010}
1011
1012input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
1013  opacity: 1;
1014}
1015
1016.topcoat-checkbox {
1017  line-height: 2rem;
1018}
1019
1020.topcoat-checkbox__checkmark:before {
1021  width: 2rem;
1022  height: 2rem;
1023  background: #e5e9e8;
1024  border: 1px solid #a5a8a8;
1025  border-radius: 3px;
1026  box-shadow: inset 0 1px #fff;
1027}
1028
1029.topcoat-checkbox__checkmark {
1030  width: 2rem;
1031  height: 2rem;
1032}
1033
1034.topcoat-checkbox__checkmark:after {
1035  top: 1px;
1036  left: 2px;
1037  opacity: 0;
1038  width: 28px;
1039  height: 11px;
1040  background: transparent;
1041  border: 7px solid #666;
1042  border-width: 7px;
1043  border-top: none;
1044  border-right: none;
1045  border-radius: 2px;
1046  -webkit-transform: rotate(-50deg);
1047  -ms-transform: rotate(-50deg);
1048  transform: rotate(-50deg);
1049}
1050
1051input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
1052  border: 1px solid #0940fd;
1053  box-shadow: 0 0 0 2px #6fb5f1;
1054}
1055
1056/**
1057*
1058* Copyright 2012 Adobe Systems Inc.;
1059*
1060* Licensed under the Apache License, Version 2.0 (the "License");
1061* you may not use this file except in compliance with the License.
1062* You may obtain a copy of the License at
1063*
1064* http://www.apache.org/licenses/LICENSE-2.0
1065*
1066* Unless required by applicable law or agreed to in writing, software
1067* distributed under the License is distributed on an "AS IS" BASIS,
1068* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1069* See the License for the specific language governing permissions and
1070* limitations under the License.
1071*
1072*/
1073
1074/**
1075*
1076* Copyright 2012 Adobe Systems Inc.;
1077*
1078* Licensed under the Apache License, Version 2.0 (the "License");
1079* you may not use this file except in compliance with the License.
1080* You may obtain a copy of the License at
1081*
1082* http://www.apache.org/licenses/LICENSE-2.0
1083*
1084* Unless required by applicable law or agreed to in writing, software
1085* distributed under the License is distributed on an "AS IS" BASIS,
1086* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1087* See the License for the specific language governing permissions and
1088* limitations under the License.
1089*
1090*/
1091
1092.button,
1093.topcoat-icon-button,
1094.topcoat-icon-button--quiet,
1095.topcoat-icon-button--large,
1096.topcoat-icon-button--large--quiet {
1097  position: relative;
1098  display: inline-block;
1099  vertical-align: top;
1100  -moz-box-sizing: border-box;
1101  box-sizing: border-box;
1102  background-clip: padding-box;
1103  padding: 0;
1104  margin: 0;
1105  font: inherit;
1106  color: inherit;
1107  background: transparent;
1108  border: none;
1109  cursor: default;
1110  -webkit-user-select: none;
1111  -moz-user-select: none;
1112  -ms-user-select: none;
1113  user-select: none;
1114  text-overflow: ellipsis;
1115  white-space: nowrap;
1116  overflow: hidden;
1117  text-decoration: none;
1118}
1119
1120.button--quiet {
1121  background: transparent;
1122  border: 1px solid transparent;
1123  box-shadow: none;
1124}
1125
1126.button--disabled,
1127.topcoat-icon-button:disabled,
1128.topcoat-icon-button--quiet:disabled,
1129.topcoat-icon-button--large:disabled,
1130.topcoat-icon-button--large--quiet:disabled {
1131  opacity: 0.3;
1132  cursor: default;
1133  pointer-events: none;
1134}
1135
1136/* topdoc
1137  name: Icon Button
1138  description: Like button, but it has an icon.
1139  modifiers:
1140    :active: Active state
1141    :disabled: Disabled state
1142    :hover: Hover state
1143    :focus: Focused
1144  markup:
1145    <button class="topcoat-icon-button">
1146      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
1147    </button>
1148    <button class="topcoat-icon-button" disabled>
1149      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
1150    </button>
1151  tags:
1152    - desktop
1153    - light
1154    - mobile
1155    - button
1156    - icon
1157*/
1158
1159.topcoat-icon-button,
1160.topcoat-icon-button--quiet,
1161.topcoat-icon-button--large,
1162.topcoat-icon-button--large--quiet {
1163  padding: 0 0.75rem;
1164  line-height: 3rem;
1165  letter-spacing: 1px;
1166  color: #454545;
1167  text-shadow: 0 1px #fff;
1168  vertical-align: baseline;
1169  background-color: #e5e9e8;
1170  box-shadow: inset 0 1px #fff;
1171  border: 1px solid #a5a8a8;
1172  border-radius: 6px;
1173}
1174
1175.topcoat-icon-button:hover,
1176.topcoat-icon-button--quiet:hover,
1177.topcoat-icon-button--large:hover,
1178.topcoat-icon-button--large--quiet:hover {
1179  background-color: #edf1f1;
1180}
1181
1182.topcoat-icon-button:active {
1183  background-color: #d3d7d7;
1184  box-shadow: inset 0 1px rgba(0,0,0,0.12);
1185}
1186
1187.topcoat-icon-button:focus,
1188.topcoat-icon-button--quiet:focus,
1189.topcoat-icon-button--quiet:hover:focus,
1190.topcoat-icon-button--large:focus,
1191.topcoat-icon-button--large--quiet:focus,
1192.topcoat-icon-button--large--quiet:hover:focus {
1193  border: 1px solid #0940fd;
1194  box-shadow: 0 0 0 2px #6fb5f1;
1195  outline: 0;
1196}
1197
1198/* topdoc
1199  name: Quiet Icon Button
1200  description: Like quiet button, but it has an icon.
1201  modifiers:
1202    :active: Active state
1203    :disabled: Disabled state
1204    :hover: Hover state
1205    :focus: Focused
1206  markup:
1207    <button class="topcoat-icon-button--quiet">
1208      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
1209    </button>
1210    <button class="topcoat-icon-button--quiet" disabled>
1211      <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
1212    </button>
1213  tags:
1214    - desktop
1215    - light
1216    - mobile
1217    - button
1218    - icon
1219    - quiet
1220*/
1221
1222.topcoat-icon-button--quiet {
1223  background: transparent;
1224  border: 1px solid transparent;
1225  box-shadow: none;
1226}
1227
1228.topcoat-icon-button--quiet:hover,
1229.topcoat-icon-button--large--quiet:hover {
1230  text-shadow: 0 1px #fff;
1231  border: 1px solid #a5a8a8;
1232  box-shadow: inset 0 1px #fff;
1233}
1234
1235.topcoat-icon-button--quiet:active,
1236.topcoat-icon-button--large--quiet:active {
1237  color: #454545;
1238  text-shadow: 0 1px #fff;
1239  background-color: #d3d7d7;
1240  border: 1px solid #a5a8a8;
1241  box-shadow: inset 0 1px rgba(0,0,0,0.12);
1242}
1243
1244/* topdoc
1245  name: Large Icon Button
1246  description: Like large button, but it has an icon.
1247  modifiers:
1248    :active: Active state
1249    :disabled: Disabled state
1250    :hover: Hover state
1251    :focus: Focused
1252  markup:
1253    <button class="topcoat-icon-button--large">
1254      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
1255    </button>
1256    <button class="topcoat-icon-button--large" disabled>
1257      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
1258    </button>
1259  tags:
1260    - desktop
1261    - light
1262    - mobile
1263    - button
1264    - icon
1265    - large
1266*/
1267
1268.topcoat-icon-button--large,
1269.topcoat-icon-button--large--quiet {
1270  width: 4.375rem;
1271  height: 4.375rem;
1272  line-height: 4.375rem;
1273}
1274
1275.topcoat-icon-button--large:active {
1276  background-color: #d3d7d7;
1277  box-shadow: inset 0 1px rgba(0,0,0,0.12);
1278}
1279
1280/* topdoc
1281  name: Large Quiet Icon Button
1282  description: Like large button, but it has an icon and this one is quiet.
1283  modifiers:
1284    :active: Active state
1285    :disabled: Disabled state
1286    :hover: Hover state
1287  markup:
1288    <button class="topcoat-icon-button--large--quiet">
1289      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
1290    </button>
1291    <button class="topcoat-icon-button--large--quiet" disabled>
1292      <span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
1293    </button>
1294  tags:
1295    - desktop
1296    - light
1297    - mobile
1298    - button
1299    - icon
1300    - large
1301    - quiet
1302*/
1303
1304.topcoat-icon-button--large--quiet {
1305  background: transparent;
1306  border: 1px solid transparent;
1307  box-shadow: none;
1308}
1309
1310.topcoat-icon,
1311.topcoat-icon--large {
1312  position: relative;
1313  display: inline-block;
1314  vertical-align: top;
1315  overflow: hidden;
1316  width: 1.62rem;
1317  height: 1.62rem;
1318  vertical-align: middle;
1319  top: -1px;
1320}
1321
1322.topcoat-icon--large {
1323  width: 2.499999998125rem;
1324  height: 2.499999998125rem;
1325  top: -2px;
1326}
1327
1328/**
1329*
1330* Copyright 2012 Adobe Systems Inc.;
1331*
1332* Licensed under the Apache License, Version 2.0 (the "License");
1333* you may not use this file except in compliance with the License.
1334* You may obtain a copy of the License at
1335*
1336* http://www.apache.org/licenses/LICENSE-2.0
1337*
1338* Unless required by applicable law or agreed to in writing, software
1339* distributed under the License is distributed on an "AS IS" BASIS,
1340* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1341* See the License for the specific language governing permissions and
1342* limitations under the License.
1343*
1344*/
1345
1346/**
1347*
1348* Copyright 2012 Adobe Systems Inc.;
1349*
1350* Licensed under the Apache License, Version 2.0 (the "License");
1351* you may not use this file except in compliance with the License.
1352* You may obtain a copy of the License at
1353*
1354* http://www.apache.org/licenses/LICENSE-2.0
1355*
1356* Unless required by applicable law or agreed to in writing, software
1357* distributed under the License is distributed on an "AS IS" BASIS,
1358* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1359* See the License for the specific language governing permissions and
1360* limitations under the License.
1361*
1362*/
1363
1364.input {
1365  padding: 0;
1366  margin: 0;
1367  font: inherit;
1368  color: inherit;
1369  background: transparent;
1370  border: none;
1371  -moz-box-sizing: border-box;
1372  box-sizing: border-box;
1373  background-clip: padding-box;
1374  vertical-align: top;
1375  outline: none;
1376}
1377
1378.input:disabled {
1379  opacity: 0.3;
1380  cursor: default;
1381  pointer-events: none;
1382}
1383
1384/**
1385*
1386* Copyright 2012 Adobe Systems Inc.;
1387*
1388* Licensed under the Apache License, Version 2.0 (the "License");
1389* you may not use this file except in compliance with the License.
1390* You may obtain a copy of the License at
1391*
1392* http://www.apache.org/licenses/LICENSE-2.0
1393*
1394* Unless required by applicable law or agreed to in writing, software
1395* distributed under the License is distributed on an "AS IS" BASIS,
1396* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1397* See the License for the specific language governing permissions and
1398* limitations under the License.
1399*
1400*/
1401
1402/**
1403*
1404* Copyright 2012 Adobe Systems Inc.;
1405*
1406* Licensed under the Apache License, Version 2.0 (the "License");
1407* you may not use this file except in compliance with the License.
1408* You may obtain a copy of the License at
1409*
1410* http://www.apache.org/licenses/LICENSE-2.0
1411*
1412* Unless required by applicable law or agreed to in writing, software
1413* distributed under the License is distributed on an "AS IS" BASIS,
1414* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1415* See the License for the specific language governing permissions and
1416* limitations under the License.
1417*
1418*/
1419
1420.list {
1421  padding: 0;
1422  margin: 0;
1423  font: inherit;
1424  color: inherit;
1425  background: transparent;
1426  border: none;
1427  cursor: default;
1428  -webkit-user-select: none;
1429  -moz-user-select: none;
1430  -ms-user-select: none;
1431  user-select: none;
1432  overflow: auto;
1433  -webkit-overflow-scrolling: touch;
1434}
1435
1436.list__header {
1437  margin: 0;
1438}
1439
1440.list__container {
1441  padding: 0;
1442  margin: 0;
1443  list-style-type: none;
1444}
1445
1446.list__item {
1447  margin: 0;
1448  padding: 0;
1449}
1450
1451/**
1452*
1453* Copyright 2012 Adobe Systems Inc.;
1454*
1455* Licensed under the Apache License, Version 2.0 (the "License");
1456* you may not use this file except in compliance with the License.
1457* You may obtain a copy of the License at
1458*
1459* http://www.apache.org/licenses/LICENSE-2.0
1460*
1461* Unless required by applicable law or agreed to in writing, software
1462* distributed under the License is distributed on an "AS IS" BASIS,
1463* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1464* See the License for the specific language governing permissions and
1465* limitations under the License.
1466*
1467*/
1468
1469/**
1470*
1471* Copyright 2012 Adobe Systems Inc.;
1472*
1473* Licensed under the Apache License, Version 2.0 (the "License");
1474* you may not use this file except in compliance with the License.
1475* You may obtain a copy of the License at
1476*
1477* http://www.apache.org/licenses/LICENSE-2.0
1478*
1479* Unless required by applicable law or agreed to in writing, software
1480* distributed under the License is distributed on an "AS IS" BASIS,
1481* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1482* See the License for the specific language governing permissions and
1483* limitations under the License.
1484*
1485*/
1486
1487.list,
1488.topcoat-list {
1489  padding: 0;
1490  margin: 0;
1491  font: inherit;
1492  color: inherit;
1493  background: transparent;
1494  border: none;
1495  cursor: default;
1496  -webkit-user-select: none;
1497  -moz-user-select: none;
1498  -ms-user-select: none;
1499  user-select: none;
1500  overflow: auto;
1501  -webkit-overflow-scrolling: touch;
1502}
1503
1504.list__header,
1505.topcoat-list__header {
1506  margin: 0;
1507}
1508
1509.list__container,
1510.topcoat-list__container {
1511  padding: 0;
1512  margin: 0;
1513  list-style-type: none;
1514}
1515
1516.list__item,
1517.topcoat-list__item {
1518  margin: 0;
1519  padding: 0;
1520}
1521
1522/* topdoc
1523  name: List
1524  description: Topcoat default list skin
1525  markup:
1526    <div class="topcoat-list">
1527      <h3 class="topcoat-list__header">Category</h3>
1528      <ul class="topcoat-list__container">
1529        <li class="topcoat-list__item">
1530          Item
1531        </li>
1532        <li class="topcoat-list__item">
1533          Item
1534        </li>
1535        <li class="topcoat-list__item">
1536          Item
1537        </li>
1538      </ul>
1539    </div>
1540  tags:
1541    - mobile
1542    - list
1543*/
1544
1545.topcoat-list {
1546  border-top: 1px solid #bcbfbf;
1547  border-bottom: 1px solid #eff1f1;
1548  background-color: #dfe2e2;
1549}
1550
1551.topcoat-list__header {
1552  padding: 4px 20px;
1553  font-size: 0.9em;
1554  font-weight: 400;
1555  background-color: #cccfcf;
1556  color: #656565;
1557  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
1558  border-top: 1px solid rgba(255,255,255,0.5);
1559  border-bottom: 1px solid rgba(255,255,255,0.23);
1560}
1561
1562.topcoat-list__container {
1563  border-top: 1px solid #bcbfbf;
1564  color: #454545;
1565}
1566
1567.topcoat-list__item {
1568  padding: 1.25rem;
1569  border-top: 1px solid #eff1f1;
1570  border-bottom: 1px solid #bcbfbf;
1571}
1572
1573.topcoat-list__item:first-child {
1574  border-top: 1px solid rgba(0,0,0,0.05);
1575}
1576
1577/**
1578*
1579* Copyright 2012 Adobe Systems Inc.;
1580*
1581* Licensed under the Apache License, Version 2.0 (the "License");
1582* you may not use this file except in compliance with the License.
1583* You may obtain a copy of the License at
1584*
1585* http://www.apache.org/licenses/LICENSE-2.0
1586*
1587* Unless required by applicable law or agreed to in writing, software
1588* distributed under the License is distributed on an "AS IS" BASIS,
1589* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1590* See the License for the specific language governing permissions and
1591* limitations under the License.
1592*
1593*/
1594
1595/**
1596*
1597* Copyright 2012 Adobe Systems Inc.;
1598*
1599* Licensed under the Apache License, Version 2.0 (the "License");
1600* you may not use this file except in compliance with the License.
1601* You may obtain a copy of the License at
1602*
1603* http://www.apache.org/licenses/LICENSE-2.0
1604*
1605* Unless required by applicable law or agreed to in writing, software
1606* distributed under the License is distributed on an "AS IS" BASIS,
1607* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1608* See the License for the specific language governing permissions and
1609* limitations under the License.
1610*
1611*/
1612
1613/**
1614*
1615* Copyright 2012 Adobe Systems Inc.;
1616*
1617* Licensed under the Apache License, Version 2.0 (the "License");
1618* you may not use this file except in compliance with the License.
1619* You may obtain a copy of the License at
1620*
1621* http://www.apache.org/licenses/LICENSE-2.0
1622*
1623* Unless required by applicable law or agreed to in writing, software
1624* distributed under the License is distributed on an "AS IS" BASIS,
1625* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1626* See the License for the specific language governing permissions and
1627* limitations under the License.
1628*
1629*/
1630
1631.navigation-bar {
1632  -moz-box-sizing: border-box;
1633  box-sizing: border-box;
1634  background-clip: padding-box;
1635  white-space: nowrap;
1636  overflow: hidden;
1637  word-spacing: 0;
1638  padding: 0;
1639  margin: 0;
1640  font: inherit;
1641  color: inherit;
1642  background: transparent;
1643  border: none;
1644  cursor: default;
1645  -webkit-user-select: none;
1646  -moz-user-select: none;
1647  -ms-user-select: none;
1648  user-select: none;
1649}
1650
1651.navigation-bar__item {
1652  -moz-box-sizing: border-box;
1653  box-sizing: border-box;
1654  background-clip: padding-box;
1655  position: relative;
1656  display: inline-block;
1657  vertical-align: top;
1658  padding: 0;
1659  margin: 0;
1660  font: inherit;
1661  color: inherit;
1662  background: transparent;
1663  border: none;
1664}
1665
1666.navigation-bar__title {
1667  padding: 0;
1668  margin: 0;
1669  font: inherit;
1670  color: inherit;
1671  background: transparent;
1672  border: none;
1673  text-overflow: ellipsis;
1674  white-space: nowrap;
1675  overflow: hidden;
1676}
1677
1678/**
1679*
1680* Copyright 2012 Adobe Systems Inc.;
1681*
1682* Licensed under the Apache License, Version 2.0 (the "License");
1683* you may not use this file except in compliance with the License.
1684* You may obtain a copy of the License at
1685*
1686* http://www.apache.org/licenses/LICENSE-2.0
1687*
1688* Unless required by applicable law or agreed to in writing, software
1689* distributed under the License is distributed on an "AS IS" BASIS,
1690* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1691* See the License for the specific language governing permissions and
1692* limitations under the License.
1693*
1694*/
1695
1696/**
1697*
1698* Copyright 2012 Adobe Systems Inc.;
1699*
1700* Licensed under the Apache License, Version 2.0 (the "License");
1701* you may not use this file except in compliance with the License.
1702* You may obtain a copy of the License at
1703*
1704* http://www.apache.org/licenses/LICENSE-2.0
1705*
1706* Unless required by applicable law or agreed to in writing, software
1707* distributed under the License is distributed on an "AS IS" BASIS,
1708* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1709* See the License for the specific language governing permissions and
1710* limitations under the License.
1711*
1712*/
1713
1714.navigation-bar,
1715.topcoat-navigation-bar {
1716  -moz-box-sizing: border-box;
1717  box-sizing: border-box;
1718  background-clip: padding-box;
1719  white-space: nowrap;
1720  overflow: hidden;
1721  word-spacing: 0;
1722  padding: 0;
1723  margin: 0;
1724  font: inherit;
1725  color: inherit;
1726  background: transparent;
1727  border: none;
1728  cursor: default;
1729  -webkit-user-select: none;
1730  -moz-user-select: none;
1731  -ms-user-select: none;
1732  user-select: none;
1733}
1734
1735.navigation-bar__item,
1736.topcoat-navigation-bar__item {
1737  -moz-box-sizing: border-box;
1738  box-sizing: border-box;
1739  background-clip: padding-box;
1740  position: relative;
1741  display: inline-block;
1742  vertical-align: top;
1743  padding: 0;
1744  margin: 0;
1745  font: inherit;
1746  color: inherit;
1747  background: transparent;
1748  border: none;
1749}
1750
1751.navigation-bar__title,
1752.topcoat-navigation-bar__title {
1753  padding: 0;
1754  margin: 0;
1755  font: inherit;
1756  color: inherit;
1757  background: transparent;
1758  border: none;
1759  text-overflow: ellipsis;
1760  white-space: nowrap;
1761  overflow: hidden;
1762}
1763
1764/* topdoc
1765  name: Navigation Bar
1766  description: A place where navigation goes to drink
1767  markup:
1768    <div class="topcoat-navigation-bar">
1769        <div class="topcoat-navigation-bar__item center full">
1770            <h1 class="topcoat-navigation-bar__title">Header</h1>
1771        </div>
1772    </div>
1773  tags:
1774    - desktop
1775    - light
1776    - mobile
1777    - navigation
1778    - bar
1779*/
1780
1781.topcoat-navigation-bar {
1782  height: 4.375rem;
1783  padding-left: 1rem;
1784  padding-right: 1rem;
1785  background: #e5e9e8;
1786  color: #000;
1787  box-shadow: inset 0 -1px #b9bcbc, 0 1px #d4d6d6;
1788}
1789
1790.topcoat-navigation-bar__item {
1791  margin: 0;
1792  line-height: 4.375rem;
1793  vertical-align: top;
1794}
1795
1796.topcoat-navigation-bar__title {
1797  font-size: 1.3rem;
1798  font-weight: 400;
1799  color: #000;
1800}
1801
1802/*
1803Copyright 2012 Adobe Systems Inc.;
1804Licensed under the Apache License, Version 2.0 (the "License");
1805you may not use this file except in compliance with the License.
1806You may obtain a copy of the License at
1807
1808http://www.apache.org/licenses/LICENSE-2.0
1809
1810Unless required by applicable law or agreed to in writing, software
1811distributed under the License is distributed on an "AS IS" BASIS,
1812WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1813See the License for the specific language governing permissions and
1814limitations under the License.
1815*/
1816
1817/**
1818*
1819* Copyright 2012 Adobe Systems Inc.;
1820*
1821* Licensed under the Apache License, Version 2.0 (the "License");
1822* you may not use this file except in compliance with the License.
1823* You may obtain a copy of the License at
1824*
1825* http://www.apache.org/licenses/LICENSE-2.0
1826*
1827* Unless required by applicable law or agreed to in writing, software
1828* distributed under the License is distributed on an "AS IS" BASIS,
1829* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1830* See the License for the specific language governing permissions and
1831* limitations under the License.
1832*
1833*/
1834
1835.notification {
1836  position: relative;
1837  display: inline-block;
1838  vertical-align: top;
1839  -moz-box-sizing: border-box;
1840  box-sizing: border-box;
1841  background-clip: padding-box;
1842  padding: 0;
1843  margin: 0;
1844  font: inherit;
1845  color: inherit;
1846  background: transparent;
1847  border: none;
1848  cursor: default;
1849  -webkit-user-select: none;
1850  -moz-user-select: none;
1851  -ms-user-select: none;
1852  user-select: none;
1853  text-overflow: ellipsis;
1854  white-space: nowrap;
1855  overflow: hidden;
1856  text-decoration: none;
1857}
1858
1859/*
1860Copyright 2012 Adobe Systems Inc.;
1861Licensed under the Apache License, Version 2.0 (the "License");
1862you may not use this file except in compliance with the License.
1863You may obtain a copy of the License at
1864
1865http://www.apache.org/licenses/LICENSE-2.0
1866
1867Unless required by applicable law or agreed to in writing, software
1868distributed under the License is distributed on an "AS IS" BASIS,
1869WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1870See the License for the specific language governing permissions and
1871limitations under the License.
1872*/
1873
1874/**
1875*
1876* Copyright 2012 Adobe Systems Inc.;
1877*
1878* Licensed under the Apache License, Version 2.0 (the "License");
1879* you may not use this file except in compliance with the License.
1880* You may obtain a copy of the License at
1881*
1882* http://www.apache.org/licenses/LICENSE-2.0
1883*
1884* Unless required by applicable law or agreed to in writing, software
1885* distributed under the License is distributed on an "AS IS" BASIS,
1886* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1887* See the License for the specific language governing permissions and
1888* limitations under the License.
1889*
1890*/
1891
1892.notification,
1893.topcoat-notification {
1894  position: relative;
1895  display: inline-block;
1896  vertical-align: top;
1897  -moz-box-sizing: border-box;
1898  box-sizing: border-box;
1899  background-clip: padding-box;
1900  padding: 0;
1901  margin: 0;
1902  font: inherit;
1903  color: inherit;
1904  background: transparent;
1905  border: none;
1906  cursor: default;
1907  -webkit-user-select: none;
1908  -moz-user-select: none;
1909  -ms-user-select: none;
1910  user-select: none;
1911  text-overflow: ellipsis;
1912  white-space: nowrap;
1913  overflow: hidden;
1914  text-decoration: none;
1915}
1916
1917/* topdoc
1918  name: Notification
1919  description: Notification badge
1920  markup:
1921    <span class="topcoat-notification">1</span>
1922  tags:
1923    - desktop
1924    - light
1925    - mobile
1926    - notification
1927*/
1928
1929.topcoat-notification {
1930  padding: 0.15em 0.5em 0.2em;
1931  border-radius: 2px;
1932  background-color: #ec514e;
1933  color: #fff;
1934}
1935
1936/**
1937*
1938* Copyright 2012 Adobe Systems Inc.;
1939*
1940* Licensed under the Apache License, Version 2.0 (the "License");
1941* you may not use this file except in compliance with the License.
1942* You may obtain a copy of the License at
1943*
1944* http://www.apache.org/licenses/LICENSE-2.0
1945*
1946* Unless required by applicable law or agreed to in writing, software
1947* distributed under the License is distributed on an "AS IS" BASIS,
1948* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1949* See the License for the specific language governing permissions and
1950* limitations under the License.
1951*
1952*/
1953
1954/**
1955*
1956* Copyright 2012 Adobe Systems Inc.;
1957*
1958* Licensed under the Apache License, Version 2.0 (the "License");
1959* you may not use this file except in compliance with the License.
1960* You may obtain a copy of the License at
1961*
1962* http://www.apache.org/licenses/LICENSE-2.0
1963*
1964* Unless required by applicable law or agreed to in writing, software
1965* distributed under the License is distributed on an "AS IS" BASIS,
1966* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1967* See the License for the specific language governing permissions and
1968* limitations under the License.
1969*
1970*/
1971
1972input[type="radio"] {
1973  position: absolute;
1974  overflow: hidden;
1975  padding: 0;
1976  border: 0;
1977  opacity: 0.001;
1978  z-index: 1;
1979  vertical-align: top;
1980  outline: none;
1981}
1982
1983.radio-button {
1984  -moz-box-sizing: border-box;
1985  box-sizing: border-box;
1986  background-clip: padding-box;
1987  position: relative;
1988  display: inline-block;
1989  vertical-align: top;
1990  cursor: default;
1991  -webkit-user-select: none;
1992  -moz-user-select: none;
1993  -ms-user-select: none;
1994  user-select: none;
1995}
1996
1997.radio-button__label {
1998  position: relative;
1999  display: inline-block;
2000  vertical-align: top;
2001  cursor: default;
2002  -webkit-user-select: none;
2003  -moz-user-select: none;
2004  -ms-user-select: none;
2005  user-select: none;
2006}
2007
2008.radio-button:before,
2009.radio-button:after {
2010  content: '';
2011  position: absolute;
2012  border-radius: 100%;
2013}
2014
2015.radio-button:after {
2016  top: 50%;
2017  left: 50%;
2018  -webkit-transform: translate(-50%, -50%);
2019  -ms-transform: translate(-50%, -50%);
2020  transform: translate(-50%, -50%);
2021}
2022
2023.radio-button:before {
2024  -moz-box-sizing: border-box;
2025  box-sizing: border-box;
2026  background-clip: padding-box;
2027}
2028
2029.radio-button--disabled {
2030  opacity: 0.3;
2031  cursor: default;
2032  pointer-events: none;
2033}
2034
2035/**
2036*
2037* Copyright 2012 Adobe Systems Inc.;
2038*
2039* Licensed under the Apache License, Version 2.0 (the "License");
2040* you may not use this file except in compliance with the License.
2041* You may obtain a copy of the License at
2042*
2043* http://www.apache.org/licenses/LICENSE-2.0
2044*
2045* Unless required by applicable law or agreed to in writing, software
2046* distributed under the License is distributed on an "AS IS" BASIS,
2047* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2048* See the License for the specific language governing permissions and
2049* limitations under the License.
2050*
2051*/
2052
2053/**
2054*
2055* Copyright 2012 Adobe Systems Inc.;
2056*
2057* Licensed under the Apache License, Version 2.0 (the "License");
2058* you may not use this file except in compliance with the License.
2059* You may obtain a copy of the License at
2060*
2061* http://www.apache.org/licenses/LICENSE-2.0
2062*
2063* Unless required by applicable law or agreed to in writing, software
2064* distributed under the License is distributed on an "AS IS" BASIS,
2065* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2066* See the License for the specific language governing permissions and
2067* limitations under the License.
2068*
2069*/
2070
2071input[type="radio"] {
2072  position: absolute;
2073  overflow: hidden;
2074  padding: 0;
2075  border: 0;
2076  opacity: 0.001;
2077  z-index: 1;
2078  vertical-align: top;
2079  outline: none;
2080}
2081
2082.radio-button,
2083.topcoat-radio-button__checkmark {
2084  -moz-box-sizing: border-box;
2085  box-sizing: border-box;
2086  background-clip: padding-box;
2087  position: relative;
2088  display: inline-block;
2089  vertical-align: top;
2090  cursor: default;
2091  -webkit-user-select: none;
2092  -moz-user-select: none;
2093  -ms-user-select: none;
2094  user-select: none;
2095}
2096
2097.radio-button__label,
2098.topcoat-radio-button {
2099  position: relative;
2100  display: inline-block;
2101  vertical-align: top;
2102  cursor: default;
2103  -webkit-user-select: none;
2104  -moz-user-select: none;
2105  -ms-user-select: none;
2106  user-select: none;
2107}
2108
2109.radio-button:before,
2110.radio-button:after,
2111.topcoat-radio-button__checkmark:before,
2112.topcoat-radio-button__checkmark:after {
2113  content: '';
2114  position: absolute;
2115  border-radius: 100%;
2116}
2117
2118.radio-button:after,
2119.topcoat-radio-button__checkmark:after {
2120  top: 50%;
2121  left: 50%;
2122  -webkit-transform: translate(-50%, -50%);
2123  -ms-transform: translate(-50%, -50%);
2124  transform: translate(-50%, -50%);
2125}
2126
2127.radio-button:before,
2128.topcoat-radio-button__checkmark:before {
2129  -moz-box-sizing: border-box;
2130  box-sizing: border-box;
2131  background-clip: padding-box;
2132}
2133
2134.radio-button--disabled,
2135input[type="radio"]:disabled + .topcoat-radio-button__checkmark {
2136  opacity: 0.3;
2137  cursor: default;
2138  pointer-events: none;
2139}
2140
2141/* topdoc
2142  name: Radio Button
2143  description: A button that can play music, but usually just plays ads.
2144  modifiers:
2145  markup:
2146    <!-- NO LABEL -->
2147    <label class="topcoat-radio-button">
2148      <input type="radio" name="topcoat">
2149      <div class="topcoat-radio-button__checkmark"></div>
2150    </label>
2151    <br>
2152    <br>
2153    <!-- LEFT LABEL -->
2154    <label class="topcoat-radio-button">
2155      Left label
2156      <input type="radio" name="topcoat">
2157      <div class="topcoat-radio-button__checkmark"></div>
2158    </label>
2159    <br>
2160    <br>
2161    <!-- RIGHT LABEL -->
2162    <label class="topcoat-radio-button">
2163      <input type="radio" name="topcoat">
2164      <div class="topcoat-radio-button__checkmark"></div>
2165      Right label
2166    </label>
2167    <br>
2168    <br>
2169    <!-- DISABLED -->
2170    <label class="topcoat-radio-button">
2171      <input type="radio" name="topcoat" Disabled>
2172      <div class="topcoat-radio-button__checkmark"></div>
2173      Disabled
2174    </label>
2175  examples:
2176    Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj
2177  tags:
2178    - desktop
2179    - light
2180    - mobile
2181    - Radio
2182*/
2183
2184input[type="radio"] {
2185  height: 1.875rem;
2186  width: 1.875rem;
2187  margin-top: 0;
2188  margin-right: -1.875rem;
2189  margin-bottom: -1.875rem;
2190  margin-left: 0;
2191}
2192
2193input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
2194  opacity: 1;
2195}
2196
2197.topcoat-radio-button {
2198  color: #454545;
2199  line-height: 1.875rem;
2200}
2201
2202.topcoat-radio-button__checkmark:before {
2203  width: 1.875rem;
2204  height: 1.875rem;
2205  background: #e5e9e8;
2206  border: 1px solid #a5a8a8;
2207  box-shadow: inset 0 1px #fff;
2208}
2209
2210.topcoat-radio-button__checkmark {
2211  position: relative;
2212  width: 1.875rem;
2213  height: 1.875rem;
2214}
2215
2216.topcoat-radio-button__checkmark:after {
2217  opacity: 0;
2218  width: 0.875rem;
2219  height: 0.875rem;
2220  background: #666;
2221  border: 1px solid rgba(0,0,0,0.1);
2222  box-shadow: 0 1px rgba(255,255,255,0.5);
2223  -webkit-transform: none;
2224  -ms-transform: none;
2225  transform: none;
2226  top: 7px;
2227  left: 7px;
2228}
2229
2230input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
2231  border: 1px solid #0940fd;
2232  box-shadow: 0 0 0 2px #6fb5f1;
2233}
2234
2235/*
2236Copyright 2012 Adobe Systems Inc.;
2237Licensed under the Apache License, Version 2.0 (the "License");
2238you may not use this file except in compliance with the License.
2239You may obtain a copy of the License at
2240
2241http://www.apache.org/licenses/LICENSE-2.0
2242
2243Unless required by applicable law or agreed to in writing, software
2244distributed under the License is distributed on an "AS IS" BASIS,
2245WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2246See the License for the specific language governing permissions and
2247limitations under the License.
2248*/
2249
2250/*
2251Copyright 2012 Adobe Systems Inc.;
2252Licensed under the Apache License, Version 2.0 (the "License");
2253you may not use this file except in compliance with the License.
2254You may obtain a copy of the License at
2255
2256http://www.apache.org/licenses/LICENSE-2.0
2257
2258Unless required by applicable law or agreed to in writing, software
2259distributed under the License is distributed on an "AS IS" BASIS,
2260WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2261See the License for the specific language governing permissions and
2262limitations under the License.
2263*/
2264
2265.range {
2266  padding: 0;
2267  margin: 0;
2268  font: inherit;
2269  color: inherit;
2270  background: transparent;
2271  border: none;
2272  -moz-box-sizing: border-box;
2273  box-sizing: border-box;
2274  background-clip: padding-box;
2275  vertical-align: top;
2276  outline: none;
2277  -webkit-appearance: none;
2278}
2279
2280.range__thumb {
2281  cursor: pointer;
2282}
2283
2284.range__thumb--webkit {
2285  cursor: pointer;
2286  -webkit-appearance: none;
2287}
2288
2289.range:disabled {
2290  opacity: 0.3;
2291  cursor: default;
2292  pointer-events: none;
2293}
2294
2295/*
2296Copyright 2012 Adobe Systems Inc.;
2297Licensed under the Apache License, Version 2.0 (the "License");
2298you may not use this file except in compliance with the License.
2299You may obtain a copy of the License at
2300
2301http://www.apache.org/licenses/LICENSE-2.0
2302
2303Unless required by applicable law or agreed to in writing, software
2304distributed under the License is distributed on an "AS IS" BASIS,
2305WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2306See the License for the specific language governing permissions and
2307limitations under the License.
2308*/
2309
2310/*
2311Copyright 2012 Adobe Systems Inc.;
2312Licensed under the Apache License, Version 2.0 (the "License");
2313you may not use this file except in compliance with the License.
2314You may obtain a copy of the License at
2315
2316http://www.apache.org/licenses/LICENSE-2.0
2317
2318Unless required by applicable law or agreed to in writing, software
2319distributed under the License is distributed on an "AS IS" BASIS,
2320WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2321See the License for the specific language governing permissions and
2322limitations under the License.
2323*/
2324
2325.range,
2326.topcoat-range {
2327  padding: 0;
2328  margin: 0;
2329  font: inherit;
2330  color: inherit;
2331  background: transparent;
2332  border: none;
2333  -moz-box-sizing: border-box;
2334  box-sizing: border-box;
2335  background-clip: padding-box;
2336  vertical-align: top;
2337  outline: none;
2338  -webkit-appearance: none;
2339}
2340
2341.range__thumb,
2342.topcoat-range::-moz-range-thumb {
2343  cursor: pointer;
2344}
2345
2346.range__thumb--webkit,
2347.topcoat-range::-webkit-slider-thumb {
2348  cursor: pointer;
2349  -webkit-appearance: none;
2350}
2351
2352.range:disabled,
2353.topcoat-range:disabled {
2354  opacity: 0.3;
2355  cursor: default;
2356  pointer-events: none;
2357}
2358
2359/* topdoc
2360  name: Range
2361  description: Range input
2362  modifiers:
2363    :active: Active state
2364    :disabled: Disabled state
2365    :hover: Hover state
2366    :focus: Focused
2367  markup:
2368    <input type="range" class="topcoat-range">
2369    <input type="range" class="topcoat-range" disabled>
2370  examples:
2371    mobile range: http://codepen.io/Topcoat/pen/BskEn
2372  tags:
2373    - desktop
2374    - mobile
2375    - range
2376*/
2377
2378.topcoat-range {
2379  border-radius: 6px;
2380  border: 1px solid #a5a8a8;
2381  background-color: #d3d7d7;
2382  height: 1rem;
2383  border-radius: 30px;
2384}
2385
2386.topcoat-range::-moz-range-track {
2387  border-radius: 6px;
2388  border: 1px solid #a5a8a8;
2389  background-color: #d3d7d7;
2390  height: 1rem;
2391  border-radius: 30px;
2392}
2393
2394.topcoat-range::-webkit-slider-thumb {
2395  height: 3rem;
2396  width: 2rem;
2397  background-color: #e5e9e8;
2398  border: 1px solid #a5a8a8;
2399  border-radius: 6px;
2400  box-shadow: inset 0 1px #fff;
2401}
2402
2403.topcoat-range::-moz-range-thumb {
2404  height: 3rem;
2405  width: 2rem;
2406  background-color: #e5e9e8;
2407  border: 1px solid #a5a8a8;
2408  border-radius: 6px;
2409  box-shadow: inset 0 1px #fff;
2410}
2411
2412.topcoat-range:focus::-webkit-slider-thumb {
2413  border: 1px solid #0940fd;
2414  box-shadow: 0 0 0 2px #6fb5f1;
2415}
2416
2417.topcoat-range:focus::-moz-range-thumb {
2418  border: 1px solid #0940fd;
2419  box-shadow: 0 0 0 2px #6fb5f1;
2420}
2421
2422/**
2423*
2424* Copyright 2012 Adobe Systems Inc.;
2425*
2426* Licensed under the Apache License, Version 2.0 (the "License");
2427* you may not use this file except in compliance with the License.
2428* You may obtain a copy of the License at
2429*
2430* http://www.apache.org/licenses/LICENSE-2.0
2431*
2432* Unless required by applicable law or agreed to in writing, software
2433* distributed under the License is distributed on an "AS IS" BASIS,
2434* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2435* See the License for the specific language governing permissions and
2436* limitations under the License.
2437*
2438*/
2439
2440/**
2441*
2442* Copyright 2012 Adobe Systems Inc.;
2443*
2444* Licensed under the Apache License, Version 2.0 (the "License");
2445* you may not use this file except in compliance with the License.
2446* You may obtain a copy of the License at
2447*
2448* http://www.apache.org/licenses/LICENSE-2.0
2449*
2450* Unless required by applicable law or agreed to in writing, software
2451* distributed under the License is distributed on an "AS IS" BASIS,
2452* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2453* See the License for the specific language governing permissions and
2454* limitations under the License.
2455*
2456*/
2457
2458.search-input {
2459  padding: 0;
2460  margin: 0;
2461  font: inherit;
2462  color: inherit;
2463  background: transparent;
2464  border: none;
2465  -moz-box-sizing: border-box;
2466  box-sizing: border-box;
2467  background-clip: padding-box;
2468  vertical-align: top;
2469  outline: none;
2470  -webkit-appearance: none;
2471}
2472
2473input[type="search"]::-webkit-search-cancel-button {
2474  -webkit-appearance: none;
2475}
2476
2477.search-input:disabled {
2478  opacity: 0.3;
2479  cursor: default;
2480  pointer-events: none;
2481}
2482
2483/**
2484*
2485* Copyright 2012 Adobe Systems Inc.;
2486*
2487* Licensed under the Apache License, Version 2.0 (the "License");
2488* you may not use this file except in compliance with the License.
2489* You may obtain a copy of the License at
2490*
2491* http://www.apache.org/licenses/LICENSE-2.0
2492*
2493* Unless required by applicable law or agreed to in writing, software
2494* distributed under the License is distributed on an "AS IS" BASIS,
2495* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2496* See the License for the specific language governing permissions and
2497* limitations under the License.
2498*
2499*/
2500
2501/**
2502*
2503* Copyright 2012 Adobe Systems Inc.;
2504*
2505* Licensed under the Apache License, Version 2.0 (the "License");
2506* you may not use this file except in compliance with the License.
2507* You may obtain a copy of the License at
2508*
2509* http://www.apache.org/licenses/LICENSE-2.0
2510*
2511* Unless required by applicable law or agreed to in writing, software
2512* distributed under the License is distributed on an "AS IS" BASIS,
2513* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2514* See the License for the specific language governing permissions and
2515* limitations under the License.
2516*
2517*/
2518
2519.search-input,
2520.topcoat-search-input,
2521.topcoat-search-input--large {
2522  padding: 0;
2523  margin: 0;
2524  font: inherit;
2525  color: inherit;
2526  background: transparent;
2527  border: none;
2528  -moz-box-sizing: border-box;
2529  box-sizing: border-box;
2530  background-clip: padding-box;
2531  vertical-align: top;
2532  outline: none;
2533  -webkit-appearance: none;
2534}
2535
2536input[type="search"]::-webkit-search-cancel-button {
2537  -webkit-appearance: none;
2538}
2539
2540.search-input:disabled,
2541.topcoat-search-input:disabled,
2542.topcoat-search-input--large:disabled {
2543  opacity: 0.3;
2544  cursor: default;
2545  pointer-events: none;
2546}
2547
2548/* topdoc
2549  name: Search Input
2550  description: A text input designed for searching.
2551  modifiers:
2552    :disabled: Disabled state
2553  markup:
2554    <input type="search" value="" placeholder="search" class="topcoat-search-input">
2555    <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>
2556  tags:
2557    - desktop
2558    - light
2559    - mobile
2560    - text
2561    - input
2562    - search
2563    - form
2564*/
2565
2566.topcoat-search-input,
2567.topcoat-search-input--large {
2568  line-height: 3rem;
2569  font-size: 16px;
2570  border: 1px solid #a5a8a8;
2571  background-color: #d3d7d7;
2572  box-shadow: inset 0 1px rgba(0,0,0,0.12);
2573  color: #454545;
2574  padding: 0 0 0 2rem;
2575  border-radius: 30px;
2576  background-image: url("../img/search.svg");
2577  background-position: 1em center;
2578  background-repeat: no-repeat;
2579  background-size: 16px;
2580}
2581
2582.topcoat-search-input:focus,
2583.topcoat-search-input--large:focus {
2584  background-image: url("../img/search_dark.svg");
2585  background-color: #edf1f1;
2586  color: #000;
2587  border: 1px solid #0940fd;
2588  box-shadow: 0 0 0 2px #6fb5f1;
2589}
2590
2591.topcoat-search-input::-webkit-search-cancel-button,
2592.topcoat-search-input::-webkit-search-decoration,
2593.topcoat-search-input--large::-webkit-search-cancel-button,
2594.topcoat-search-input--large::-webkit-search-decoration {
2595  margin-right: 5px;
2596}
2597
2598.topcoat-search-input:focus::-webkit-input-placeholder,
2599.topcoat-search-input:focus::-webkit-input-placeholder {
2600  color: #c6c8c8;
2601}
2602
2603.topcoat-search-input:disabled::-webkit-input-placeholder {
2604  color: #000;
2605}
2606
2607.topcoat-search-input:disabled::-moz-placeholder {
2608  color: #000;
2609}
2610
2611.topcoat-search-input:disabled:-ms-input-placeholder {
2612  color: #000;
2613}
2614
2615/* topdoc
2616  name: Large Search Input
2617  description: A large text input designed for searching.
2618  modifiers:
2619    :disabled: Disabled state
2620  markup:
2621    <input type="search" value="" placeholder="search" class="topcoat-search-input--large">
2622    <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>
2623  tags:
2624    - desktop
2625    - light
2626    - mobile
2627    - text
2628    - input
2629    - search
2630    - form
2631    - large
2632*/
2633
2634.topcoat-search-input--large {
2635  line-height: 4.375rem;
2636  font-size: 1.3rem;
2637  font-weight: 200;
2638  padding: 0 0 0 2.9rem;
2639  border-radius: 40px;
2640  background-position: 1.2em center;
2641  background-size: 1.3rem;
2642}
2643
2644.topcoat-search-input--large:disabled {
2645  color: #000;
2646}
2647
2648.topcoat-search-input--large:disabled::-webkit-input-placeholder {
2649  color: #000;
2650}
2651
2652.topcoat-search-input--large:disabled::-moz-placeholder {
2653  color: #000;
2654}
2655
2656.topcoat-search-input--large:disabled:-ms-input-placeholder {
2657  color: #000;
2658}
2659
2660/**
2661*
2662* Copyright 2012 Adobe Systems Inc.;
2663*
2664* Licensed under the Apache License, Version 2.0 (the "License");
2665* you may not use this file except in compliance with the License.
2666* You may obtain a copy of the License at
2667*
2668* http://www.apache.org/licenses/LICENSE-2.0
2669*
2670* Unless required by applicable law or agreed to in writing, software
2671* distributed under the License is distributed on an "AS IS" BASIS,
2672* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2673* See the License for the specific language governing permissions and
2674* limitations under the License.
2675*
2676*/
2677
2678/**
2679*
2680* Copyright 2012 Adobe Systems Inc.;
2681*
2682* Licensed under the Apache License, Version 2.0 (the "License");
2683* you may not use this file except in compliance with the License.
2684* You may obtain a copy of the License at
2685*
2686* http://www.apache.org/licenses/LICENSE-2.0
2687*
2688* Unless required by applicable law or agreed to in writing, software
2689* distributed under the License is distributed on an "AS IS" BASIS,
2690* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2691* See the License for the specific language governing permissions and
2692* limitations under the License.
2693*
2694*/
2695
2696.switch {
2697  position: relative;
2698  display: inline-block;
2699  vertical-align: top;
2700  -moz-box-sizing: border-box;
2701  box-sizing: border-box;
2702  background-clip: padding-box;
2703}
2704
2705.switch__input {
2706  position: absolute;
2707  overflow: hidden;
2708  padding: 0;
2709  border: 0;
2710  opacity: 0.001;
2711  z-index: 1;
2712  vertical-align: top;
2713  outline: none;
2714}
2715
2716.switch__toggle {
2717  position: relative;
2718  display: inline-block;
2719  vertical-align: top;
2720  -moz-box-sizing: border-box;
2721  box-sizing: border-box;
2722  background-clip: padding-box;
2723  padding: 0;
2724  margin: 0;
2725  font: inherit;
2726  color: inherit;
2727  background: transparent;
2728  border: none;
2729  cursor: default;
2730  -webkit-user-select: none;
2731  -moz-user-select: none;
2732  -ms-user-select: none;
2733  user-select: none;
2734}
2735
2736.switch__toggle:before,
2737.switch__toggle:after {
2738  content: '';
2739  position: absolute;
2740  z-index: -1;
2741  -moz-box-sizing: border-box;
2742  box-sizing: border-box;
2743  background-clip: padding-box;
2744}
2745
2746.switch--disabled {
2747  opacity: 0.3;
2748  cursor: default;
2749  pointer-events: none;
2750}
2751
2752/**
2753*
2754* Copyright 2012 Adobe Systems Inc.;
2755*
2756* Licensed under the Apache License, Version 2.0 (the "License");
2757* you may not use this file except in compliance with the License.
2758* You may obtain a copy of the License at
2759*
2760* http://www.apache.org/licenses/LICENSE-2.0
2761*
2762* Unless required by applicable law or agreed to in writing, software
2763* distributed under the License is distributed on an "AS IS" BASIS,
2764* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2765* See the License for the specific language governing permissions and
2766* limitations under the License.
2767*
2768*/
2769
2770/**
2771*
2772* Copyright 2012 Adobe Systems Inc.;
2773*
2774* Licensed under the Apache License, Version 2.0 (the "License");
2775* you may not use this file except in compliance with the License.
2776* You may obtain a copy of the License at
2777*
2778* http://www.apache.org/licenses/LICENSE-2.0
2779*
2780* Unless required by applicable law or agreed to in writing, software
2781* distributed under the License is distributed on an "AS IS" BASIS,
2782* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2783* See the License for the specific language governing permissions and
2784* limitations under the License.
2785*
2786*/
2787
2788.switch,
2789.topcoat-switch {
2790  position: relative;
2791  display: inline-block;
2792  vertical-align: top;
2793  -moz-box-sizing: border-box;
2794  box-sizing: border-box;
2795  background-clip: padding-box;
2796}
2797
2798.switch__input,
2799.topcoat-switch__input {
2800  position: absolute;
2801  overflow: hidden;
2802  padding: 0;
2803  border: 0;
2804  opacity: 0.001;
2805  z-index: 1;
2806  vertical-align: top;
2807  outline: none;
2808}
2809
2810.switch__toggle,
2811.topcoat-switch__toggle {
2812  position: relative;
2813  display: inline-block;
2814  vertical-align: top;
2815  -moz-box-sizing: border-box;
2816  box-sizing: border-box;
2817  background-clip: padding-box;
2818  padding: 0;
2819  margin: 0;
2820  font: inherit;
2821  color: inherit;
2822  background: transparent;
2823  border: none;
2824  cursor: default;
2825  -webkit-user-select: none;
2826  -moz-user-select: none;
2827  -ms-user-select: none;
2828  user-select: none;
2829}
2830
2831.switch__toggle:before,
2832.switch__toggle:after,
2833.topcoat-switch__toggle:before,
2834.topcoat-switch__toggle:after {
2835  content: '';
2836  position: absolute;
2837  z-index: -1;
2838  -moz-box-sizing: border-box;
2839  box-sizing: border-box;
2840  background-clip: padding-box;
2841}
2842
2843.switch--disabled,
2844.topcoat-switch__input:disabled + .topcoat-switch__toggle {
2845  opacity: 0.3;
2846  cursor: default;
2847  pointer-events: none;
2848}
2849
2850/* topdoc
2851  name: Switch
2852  description: Default skin for Topcoat switch
2853  modifiers:
2854    :focus: Focus state
2855    :disabled: Disabled state
2856  markup:
2857    <label class="topcoat-switch">
2858      <input type="checkbox" class="topcoat-switch__input">
2859      <div class="topcoat-switch__toggle"></div>
2860    </label>
2861    <br>
2862    <br>
2863    <label class="topcoat-switch">
2864      <input type="checkbox" class="topcoat-switch__input" checked>
2865      <div class="topcoat-switch__toggle"></div>
2866    </label>
2867    <br>
2868    <br>
2869    <label class="topcoat-switch">
2870      <input type="checkbox" class="topcoat-switch__input" disabled>
2871      <div class="topcoat-switch__toggle"></div>
2872    </label>
2873  examples:
2874    mobile switch: http://codepen.io/Topcoat/pen/upxds
2875  tags:
2876    - desktop
2877    - light
2878    - mobile
2879    - switch
2880*/
2881
2882.topcoat-switch {
2883  font-size: 16px;
2884  padding: 0 1.25rem;
2885  border-radius: 6px;
2886  border: 1px solid #a5a8a8;
2887  overflow: hidden;
2888  width: 6rem;
2889}
2890
2891.topcoat-switch__toggle:before,
2892.topcoat-switch__toggle:after {
2893  top: -1px;
2894  width: 5rem;
2895}
2896
2897.topcoat-switch__toggle:before {
2898  content: 'ON';
2899  color: #0083e8;
2900  background-color: #e0f0fa;
2901  right: 1rem;
2902  padding-left: 1.5rem;
2903}
2904
2905.topcoat-switch__toggle {
2906  line-height: 3rem;
2907  height: 3rem;
2908  width: 2rem;
2909  border-radius: 6px;
2910  color: #454545;
2911  text-shadow: 0 1px #fff;
2912  background-color: #e5e9e8;
2913  border: 1px solid #a5a8a8;
2914  margin-left: -1.3rem;
2915  margin-bottom: -1px;
2916  margin-top: -1px;
2917  box-shadow: inset 0 1px #fff;
2918  -webkit-transition: margin-left 0.05s ease-in-out;
2919  transition: margin-left 0.05s ease-in-out;
2920}
2921
2922.topcoat-switch__toggle:after {
2923  content: 'OFF';
2924  background-color: #d3d7d7;
2925  left: 1rem;
2926  padding-left: 2rem;
2927}
2928
2929.topcoat-switch__input:checked + .topcoat-switch__toggle {
2930  margin-left: 2.7rem;
2931}
2932
2933.topcoat-switch__input:focus + .topcoat-switch__toggle {
2934  border: 1px solid #0940fd;
2935  box-shadow: 0 0 0 2px #6fb5f1;
2936}
2937
2938.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
2939.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
2940  background: transparent;
2941}
2942
2943/**
2944*
2945* Copyright 2012 Adobe Systems Inc.;
2946*
2947* Licensed under the Apache License, Version 2.0 (the "License");
2948* you may not use this file except in compliance with the License.
2949* You may obtain a copy of the License at
2950*
2951* http://www.apache.org/licenses/LICENSE-2.0
2952*
2953* Unless required by applicable law or agreed to in writing, software
2954* distributed under the License is distributed on an "AS IS" BASIS,
2955* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2956* See the License for the specific language governing permissions and
2957* limitations under the License.
2958*
2959*/
2960
2961/**
2962*
2963* Copyright 2012 Adobe Systems Inc.;
2964*
2965* Licensed under the Apache License, Version 2.0 (the "License");
2966* you may not use this file except in compliance with the License.
2967* You may obtain a copy of the License at
2968*
2969* http://www.apache.org/licenses/LICENSE-2.0
2970*
2971* Unless required by applicable law or agreed to in writing, software
2972* distributed under the License is distributed on an "AS IS" BASIS,
2973* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2974* See the License for the specific language governing permissions and
2975* limitations under the License.
2976*
2977*/
2978
2979.button,
2980.topcoat-tab-bar__button {
2981  position: relative;
2982  display: inline-block;
2983  vertical-align: top;
2984  -moz-box-sizing: border-box;
2985  box-sizing: border-box;
2986  background-clip: padding-box;
2987  padding: 0;
2988  margin: 0;
2989  font: inherit;
2990  color: inherit;
2991  background: transparent;
2992  border: none;
2993  cursor: default;
2994  -webkit-user-select: none;
2995  -moz-user-select: none;
2996  -ms-user-select: none;
2997  user-select: none;
2998  text-overflow: ellipsis;
2999  white-space: nowrap;
3000  overflow: hidden;
3001  text-decoration: none;
3002}
3003
3004.button--quiet {
3005  background: transparent;
3006  border: 1px solid transparent;
3007  box-shadow: none;
3008}
3009
3010.button--disabled,
3011.topcoat-tab-bar__button:disabled {
3012  opacity: 0.3;
3013  cursor: default;
3014  pointer-events: none;
3015}
3016
3017.button-bar,
3018.topcoat-tab-bar {
3019  display: table;
3020  table-layout: fixed;
3021  white-space: nowrap;
3022  margin: 0;
3023  padding: 0;
3024}
3025
3026.button-bar__item,
3027.topcoat-tab-bar__item {
3028  display: table-cell;
3029  width: auto;
3030  border-radius: 0;
3031}
3032
3033.button-bar__item > input,
3034.topcoat-tab-bar__item > input {
3035  position: absolute;
3036  overflow: hidden;
3037  padding: 0;
3038  border: 0;
3039  opacity: 0.001;
3040  z-index: 1;
3041  vertical-align: top;
3042  outline: none;
3043}
3044
3045.button-bar__button {
3046  border-radius: inherit;
3047}
3048
3049.button-bar__item:disabled {
3050  opacity: 0.3;
3051  cursor: default;
3052  pointer-events: none;
3053}
3054
3055/* topdoc
3056  name: Tab Bar
3057  description: Component of tab buttons
3058  modifiers:
3059    :disabled: Disabled state
3060  markup:
3061    <div class="topcoat-tab-bar">
3062      <label class="topcoat-tab-bar__item">
3063        <input type="radio" name="tab-bar">
3064        <button class="topcoat-tab-bar__button">One</button>
3065      </label>
3066      <label class="topcoat-tab-bar__item">
3067        <input type="radio" name="tab-bar">
3068        <button class="topcoat-tab-bar__button">Two</button>
3069      </label>
3070      <label class="topcoat-tab-bar__item">
3071        <input type="radio" name="tab-bar">
3072        <button class="topcoat-tab-bar__button">Three</button>
3073      </label>
3074    </div>
3075  examples:
3076    mobile tab bar: http://codepen.io/Topcoat/pen/rJICF
3077  tags:
3078    - desktop
3079    - light
3080    - dark
3081    - mobile
3082    - tab
3083    - group
3084    - bar
3085*/
3086
3087.topcoat-tab-bar__button {
3088  padding: 0 1.25rem;
3089  height: 3rem;
3090  line-height: 3rem;
3091  letter-spacing: 1px;
3092  color: #454545;
3093  text-shadow: 0 1px #fff;
3094  vertical-align: top;
3095  background-color: #e5e9e8;
3096  box-shadow: inset 0 1px #fff;
3097  border-top: 1px solid #a5a8a8;
3098}
3099
3100.topcoat-tab-bar__button:active,
3101.topcoat-tab-bar__button--large:active,
3102:checked + .topcoat-tab-bar__button {
3103  color: #0083e8;
3104  background-color: #e0f0fa;
3105  box-shadow: inset 0 0 2px #c0ced8;
3106}
3107
3108.topcoat-tab-bar__button:focus,
3109.topcoat-tab-bar__button--large:focus {
3110  z-index: 1;
3111}
3112
3113/**
3114*
3115* Copyright 2012 Adobe Systems Inc.;
3116*
3117* Licensed under the Apache License, Version 2.0 (the "License");
3118* you may not use this file except in compliance with the License.
3119* You may obtain a copy of the License at
3120*
3121* http://www.apache.org/licenses/LICENSE-2.0
3122*
3123* Unless required by applicable law or agreed to in writing, software
3124* distributed under the License is distributed on an "AS IS" BASIS,
3125* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3126* See the License for the specific language governing permissions and
3127* limitations under the License.
3128*
3129*/
3130
3131/**
3132*
3133* Copyright 2012 Adobe Systems Inc.;
3134*
3135* Licensed under the Apache License, Version 2.0 (the "License");
3136* you may not use this file except in compliance with the License.
3137* You may obtain a copy of the License at
3138*
3139* http://www.apache.org/licenses/LICENSE-2.0
3140*
3141* Unless required by applicable law or agreed to in writing, software
3142* distributed under the License is distributed on an "AS IS" BASIS,
3143* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3144* See the License for the specific language governing permissions and
3145* limitations under the License.
3146*
3147*/
3148
3149.input,
3150.topcoat-text-input,
3151.topcoat-text-input--large {
3152  padding: 0;
3153  margin: 0;
3154  font: inherit;
3155  color: inherit;
3156  background: transparent;
3157  border: none;
3158  -moz-box-sizing: border-box;
3159  box-sizing: border-box;
3160  background-clip: padding-box;
3161  vertical-align: top;
3162  outline: none;
3163}
3164
3165.input:disabled,
3166.topcoat-text-input:disabled,
3167.topcoat-text-input--large:disabled {
3168  opacity: 0.3;
3169  cursor: default;
3170  pointer-events: none;
3171}
3172
3173/* topdoc
3174  name: Text input
3175  description: Topdoc text input
3176  modifiers:
3177    :disabled: Disabled state
3178    :focus: Focused
3179    :invalid: Hover state
3180  markup:
3181    <input type="text" class="topcoat-text-input" placeholder="text" value="">
3182    <br>
3183    <br>
3184    <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
3185    <br>
3186    <br>
3187    <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">
3188  tags:
3189    - desktop
3190    - mobile
3191    - text
3192    - input
3193*/
3194
3195.topcoat-text-input,
3196.topcoat-text-input--large {
3197  line-height: 3rem;
3198  font-size: 16px;
3199  letter-spacing: 1px;
3200  padding: 0 1.25rem;
3201  border: 1px solid #a5a8a8;
3202  border-radius: 6px;
3203  background-color: #d3d7d7;
3204  box-shadow: inset 0 1px rgba(0,0,0,0.12);
3205  color: #454545;
3206  vertical-align: top;
3207}
3208
3209.topcoat-text-input:focus,
3210.topcoat-text-input--large:focus {
3211  background-color: #edf1f1;
3212  color: #000;
3213  border: 1px solid #0940fd;
3214  box-shadow: 0 0 0 2px #6fb5f1;
3215}
3216
3217.topcoat-text-input:disabled::-webkit-input-placeholder {
3218  color: #000;
3219}
3220
3221.topcoat-text-input:disabled::-moz-placeholder {
3222  color: #000;
3223}
3224
3225.topcoat-text-input:disabled:-ms-input-placeholder {
3226  color: #000;
3227}
3228
3229.topcoat-text-input:invalid {
3230  border: 1px solid #d83b75;
3231}
3232
3233/* topdoc
3234  name: Large Text Input
3235  description: A bigger input, still for text.
3236  modifiers:
3237    :disabled: Disabled state
3238    :focus: Focused
3239    :invalid: Hover state
3240  markup:
3241    <input type="text" class="topcoat-text-input--large" value="" placeholder="text">
3242    <br>
3243    <br>
3244    <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>
3245    <br>
3246    <br>
3247    <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
3248  tags:
3249    - desktop
3250    - light
3251    - mobile
3252    - form
3253    - input
3254    - large
3255*/
3256
3257.topcoat-text-input--large {
3258  line-height: 4.375rem;
3259  font-size: 1.3rem;
3260}
3261
3262.topcoat-text-input--large:disabled {
3263  color: #000;
3264}
3265
3266.topcoat-text-input--large:disabled::-webkit-input-placeholder {
3267  color: #000;
3268}
3269
3270.topcoat-text-input--large:disabled::-moz-placeholder {
3271  color: #000;
3272}
3273
3274.topcoat-text-input--large:disabled:-ms-input-placeholder {
3275  color: #000;
3276}
3277
3278.topcoat-text-input--large:invalid {
3279  border: 1px solid #d83b75;
3280}
3281
3282/**
3283*
3284* Copyright 2012 Adobe Systems Inc.;
3285*
3286* Licensed under the Apache License, Version 2.0 (the "License");
3287* you may not use this file except in compliance with the License.
3288* You may obtain a copy of the License at
3289*
3290* http://www.apache.org/licenses/LICENSE-2.0
3291*
3292* Unless required by applicable law or agreed to in writing, software
3293* distributed under the License is distributed on an "AS IS" BASIS,
3294* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3295* See the License for the specific language governing permissions and
3296* limitations under the License.
3297*
3298*/
3299
3300/**
3301*
3302* Copyright 2012 Adobe Systems Inc.;
3303*
3304* Licensed under the Apache License, Version 2.0 (the "License");
3305* you may not use this file except in compliance with the License.
3306* You may obtain a copy of the License at
3307*
3308* http://www.apache.org/licenses/LICENSE-2.0
3309*
3310* Unless required by applicable law or agreed to in writing, software
3311* distributed under the License is distributed on an "AS IS" BASIS,
3312* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3313* See the License for the specific language governing permissions and
3314* limitations under the License.
3315*
3316*/
3317
3318.textarea {
3319  -moz-box-sizing: border-box;
3320  box-sizing: border-box;
3321  background-clip: padding-box;
3322  padding: 0;
3323  margin: 0;
3324  font: inherit;
3325  color: inherit;
3326  background: transparent;
3327  border: none;
3328  vertical-align: top;
3329  resize: none;
3330  outline: none;
3331}
3332
3333.textarea:disabled {
3334  opacity: 0.3;
3335  cursor: default;
3336  pointer-events: none;
3337}
3338
3339/**
3340*
3341* Copyright 2012 Adobe Systems Inc.;
3342*
3343* Licensed under the Apache License, Version 2.0 (the "License");
3344* you may not use this file except in compliance with the License.
3345* You may obtain a copy of the License at
3346*
3347* http://www.apache.org/licenses/LICENSE-2.0
3348*
3349* Unless required by applicable law or agreed to in writing, software
3350* distributed under the License is distributed on an "AS IS" BASIS,
3351* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3352* See the License for the specific language governing permissions and
3353* limitations under the License.
3354*
3355*/
3356
3357/**
3358*
3359* Copyright 2012 Adobe Systems Inc.;
3360*
3361* Licensed under the Apache License, Version 2.0 (the "License");
3362* you may not use this file except in compliance with the License.
3363* You may obtain a copy of the License at
3364*
3365* http://www.apache.org/licenses/LICENSE-2.0
3366*
3367* Unless required by applicable law or agreed to in writing, software
3368* distributed under the License is distributed on an "AS IS" BASIS,
3369* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3370* See the License for the specific language governing permissions and
3371* limitations under the License.
3372*
3373*/
3374
3375.textarea,
3376.topcoat-textarea,
3377.topcoat-textarea--large {
3378  -moz-box-sizing: border-box;
3379  box-sizing: border-box;
3380  background-clip: padding-box;
3381  padding: 0;
3382  margin: 0;
3383  font: inherit;
3384  color: inherit;
3385  background: transparent;
3386  border: none;
3387  vertical-align: top;
3388  resize: none;
3389  outline: none;
3390}
3391
3392.textarea:disabled,
3393.topcoat-textarea:disabled,
3394.topcoat-textarea--large:disabled {
3395  opacity: 0.3;
3396  cursor: default;
3397  pointer-events: none;
3398}
3399
3400/* topdoc
3401  name: Textarea
3402  description: A whole area, just for text.
3403  modifiers:
3404    :disabled: Disabled state
3405  markup:
3406    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>
3407    <br>
3408    <br>
3409    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
3410  tags:
3411    - desktop
3412    - light
3413    - mobile
3414    - form
3415    - input
3416    - textarea
3417*/
3418
3419.topcoat-textarea,
3420.topcoat-textarea--large {
3421  padding: 2rem;
3422  font-size: 2.5rem;
3423  font-weight: 200;
3424  border-radius: 6px;
3425  line-height: 3rem;
3426  border: 1px solid #a5a8a8;
3427  background-color: #d3d7d7;
3428  box-shadow: inset 0 1px rgba(0,0,0,0.12);
3429  color: #454545;
3430  letter-spacing: 1px;
3431}
3432
3433.topcoat-textarea:focus,
3434.topcoat-textarea--large:focus {
3435  background-color: #edf1f1;
3436  color: #000;
3437  border: 1px solid #0940fd;
3438  box-shadow: 0 0 0 2px #6fb5f1;
3439}
3440
3441.topcoat-textarea:disabled::-webkit-input-placeholder {
3442  color: #000;
3443}
3444
3445.topcoat-textarea:disabled::-moz-placeholder {
3446  color: #000;
3447}
3448
3449.topcoat-textarea:disabled:-ms-input-placeholder {
3450  color: #000;
3451}
3452
3453/* topdoc
3454  name: Large Textarea
3455  description: A whole area, just for text; now available in large.
3456  modifiers:
3457    :disabled: Disabled state
3458  markup:
3459    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>
3460    <br>
3461    <br>
3462    <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
3463  tags:
3464    - desktop
3465    - light
3466    - mobile
3467    - form
3468    - input
3469    - textarea
3470*/
3471
3472.topcoat-textarea--large {
3473  font-size: 3rem;
3474  line-height: 4.375rem;
3475}
3476
3477.topcoat-textarea--large:disabled {
3478  color: #000;
3479}
3480
3481.topcoat-textarea--large:disabled::-webkit-input-placeholder {
3482  color: #000;
3483}
3484
3485.topcoat-textarea--large:disabled::-moz-placeholder {
3486  color: #000;
3487}
3488
3489.topcoat-textarea--large:disabled:-ms-input-placeholder {
3490  color: #000;
3491}
3492
3493@font-face {
3494  font-family: "Source Sans";
3495  src: url("../font/SourceSansPro-Regular.otf");
3496}
3497
3498@font-face {
3499  font-family: "Source Sans";
3500  src: url("../font/SourceSansPro-Light.otf");
3501  font-weight: 200;
3502}
3503
3504@font-face {
3505  font-family: "Source Sans";
3506  src: url("../font/SourceSansPro-Semibold.otf");
3507  font-weight: 600;
3508}
3509
3510body {
3511  margin: 0;
3512  padding: 0;
3513  background: #dfe2e2;
3514  color: #000;
3515  font: 16px "Source Sans", helvetica, arial, sans-serif;
3516  font-weight: 200;
3517}
3518
3519:focus {
3520  outline-color: transparent;
3521  outline-style: none;
3522}
3523
3524.topcoat-icon--menu-stack {
3525  background: url("../img/hamburger_dark.svg") no-repeat;
3526  background-size: cover;
3527}
3528
3529.quarter {
3530  width: 25%;
3531}
3532
3533.half {
3534  width: 50%;
3535}
3536
3537.three-quarters {
3538  width: 75%;
3539}
3540
3541.third {
3542  width: 33.333%;
3543}
3544
3545.two-thirds {
3546  width: 66.666%;
3547}
3548
3549.full {
3550  width: 100%;
3551}
3552
3553.left {
3554  text-align: left;
3555}
3556
3557.center {
3558  text-align: center;
3559}
3560
3561.right {
3562  text-align: right;
3563}
3564
3565.reset-ui {
3566  -moz-box-sizing: border-box;
3567  box-sizing: border-box;
3568  background-clip: padding-box;
3569  position: relative;
3570  display: inline-block;
3571  vertical-align: top;
3572  padding: 0;
3573  margin: 0;
3574  font: inherit;
3575  color: inherit;
3576  background: transparent;
3577  border: none;
3578  cursor: default;
3579  -webkit-user-select: none;
3580  -moz-user-select: none;
3581  -ms-user-select: none;
3582  user-select: none;
3583  text-overflow: ellipsis;
3584  white-space: nowrap;
3585  overflow: hidden;
3586}
3587
3588/* This file should include color and image variables corresponding to the dark theme */
3589
3590/* Call To Action */
3591
3592/* Icons */
3593
3594/* Navigation Bar */
3595
3596/* Text Input */
3597
3598/* Search Input */
3599
3600/* List */
3601
3602/* Checkbox */
3603
3604/* Overlay */
3605
3606/* Progress bar */
3607
3608/* Checkbox */
3609
3610/* Radio Button */
3611
3612/* Tab bar */
3613
3614/* Switch */
3615
3616/* Icon Button */
3617
3618/* Navigation bar */
3619
3620/* List */
3621
3622/* Search Input */
3623
3624/* Textarea */
3625
3626/* Checkbox */
3627
3628/* Radio */
3629
3630/* Range input */
3631
3632/* Search Input */
3633
3634/* Switch */
3635
3636/* This file should include color and image variables corresponding to the light theme */
3637
3638/* Call To Action */
3639
3640/* Icons */
3641
3642/* Navigation Bar */
3643
3644/* Text Input */
3645
3646/* List */
3647
3648/* Overlay */
3649
3650/* Progress bar */
3651
3652/* Checkbox */
3653
3654/* Range input */
3655
3656/* Radio Button */
3657
3658/* Tab bar */
3659
3660/* Switch */
3661
3662/* Containers */
3663
3664/* Icon Button */
3665
3666/* Navigation bar */
3667
3668/* List */
3669
3670/* Search Input */
3671
3672/* Text Area */
3673
3674/* Checkbox */
3675
3676/* Radio */
3677
3678/* Range input */
3679
3680/* Search Input */
3681
3682/* Switch */
3683
3684/* Text Input */
3685
3686/* Radio input */
3687
3688/* Overlay */
3689
3690/* Textarea */
3691
3692/* Progress bar container */
3693
3694/* Progress bar progress */
3695
3696/* Search input */
3697
3698/* Switch */
3699
3700/* Notification */