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

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

.topcoat-icon--menu-stack {
  background: url("../img/hamburger_dark.svg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.quarter {
  width: 25%;
}
.half {
  width: 50%;
}
.three-quarters {
  width: 75%;
}
.third {
  width: 33.333%;
}
.two-thirds {
  width: 66.666%;
}
.full {
  width: 100%;
}

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

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

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 Button
 ------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-button">Button</a>
    <a class="topcoat-button is-active">Button</a>
    <a class="topcoat-button is-disabled">Button</a>
*/
.topcoat-button,
.topcoat-button--quiet,
.topcoat-button--large,
.topcoat-button--large--quiet,
.topcoat-button--cta,
.topcoat-button--large--cta {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 1.16rem;
  font-size: 12px;
  line-height: 2rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: top;
  background-color: #e5e9e8;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #a5a8a8;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.topcoat-button:active,
.topcoat-button.is-active,
.topcoat-button--large:active,
.topcoat-button--large.is-active {
  background-color: #d3d7d7;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button:disabled,
.topcoat-button.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Quiet Button
 ------------

 :active - Quiet button active state

 .is-active - Simulates active state for a quiet button on touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state

    <a class="topcoat-button--quiet">Button</a>
    <a class="topcoat-button--quiet is-active">Button</a>
    <a class="topcoat-button--quiet is-disabled">Button</a>
*/
.topcoat-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-button--quiet:active,
.topcoat-button--quiet.is-active,
.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet.is-active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d3d7d7;
  border: 1px solid #a5a8a8;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button--quiet:disabled,
.topcoat-button--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Button
 ------------

 :active - Active state

 .is-active - Simulates active state touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state

    <a class="topcoat-button--large" >Button</a>
    <a class="topcoat-button--large is-active" >Button</a>
    <a class="topcoat-button--large is-disabled" >Button</a>
*/
.topcoat-button--large,
.topcoat-button--large--quiet {
  font-size: 1.167rem;
  line-height: 2.6rem;
}
.topcoat-button--large:disabled,
.topcoat-button--large.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Quiet Button
 ------------------

 :active - Active state

 .is-pressed - Simulates active state on touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state


    <a class="topcoat-button--large--quiet" >Button</a>
    <a class="topcoat-button--large--quiet is-active" >Button</a>
    <a class="topcoat-button--large--quiet is-disabled" >Button</a>
*/
.topcoat-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-button--large--quiet:disabled,
.topcoat-button--large--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Call To Action Button
 ---------------------

 :active - Active state

 .is-pressed - Simulates active state on touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state


    <a class="topcoat-button--cta" >Button</a>
    <a class="topcoat-button--cta is-active" >Button</a>
    <a class="topcoat-button--cta is-disabled" >Button</a>

*/
.topcoat-button--cta,
.topcoat-button--large--cta {
  border: 1px solid #143250;
  background-color: #288edf;
  -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.36);
  box-shadow: inset 0 1px rgba(255,255,255,0.36);
  color: #fff;
  font-weight: 500;
  text-shadow: 0 -1px rgba(0,0,0,0.36);
}
.topcoat-button--cta:active,
.topcoat-button--cta.is-active,
.topcoat-button--large--cta:active,
.topcoat-button--large--cta.is-active {
  background-color: #0380e8;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-button--cta:disabled,
.topcoat-button--cta.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Call To Action Button
 ---------------------------

 :active - Active state

 .is-active - Simulates active state touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state

    <a class="topcoat-button--large--cta" >Button</a>
    <a class="topcoat-button--large--cta is-active" >Button</a>
    <a class="topcoat-button--large--cta is-disabled" >Button</a>
*/
.topcoat-button--large--cta {
  font-size: 1.167rem;
  line-height: 2.6rem;
}
.topcoat-button--large-cta:disabled,
.topcoat-button--large--cta.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 Icon Button
 -----------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button">
        <span class="topcoat-icon topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button is-active">
      <span class="topcoat-icon topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button is-disabled">
      <span class="topcoat-icon topcoat-icon--menu-stack"></span>
    </a>
*/
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  position: relative;
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 0.5rem;
  line-height: 2rem;
  letter-spacing: 1px;
  color: #454545;
  text-shadow: 0 1px #fff;
  vertical-align: baseline;
  background-color: #e5e9e8;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
  border: 1px solid #a5a8a8;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.topcoat-icon-button:active,
.topcoat-icon-button.is-active {
  background-color: #d3d7d7;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-icon-button:disabled,
.topcoat-icon-button.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Quiet Icon Button
 -----------------

 :active - Button active state

 .is-active - Simulates active state for a button on touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state

    <a class="topcoat-icon-button--quiet">
        <span class="topcoat-icon topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button--quiet is-active">
      <span class="topcoat-icon topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button--quiet is-disabled">
      <span class="topcoat-icon topcoat-icon--menu-stack"></span>
    </a>
*/
.topcoat-icon-button--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet.is-active,
.topcoat-icon-button--large--quiet:active,
.topcoat-icon-button--large--quiet.is-active {
  color: #454545;
  text-shadow: 0 1px #fff;
  background-color: #d3d7d7;
  border: 1px solid #a5a8a8;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Icon Button
 -----------------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button--large">
        <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button--large is-active">
      <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button--large is-disabled">
      <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
    </a>
*/
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
}
.topcoat-icon-button--large:active,
.topcoat-icon-button--large.is-active {
  background-color: #d3d7d7;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
}
.topcoat-icon-button--large:disabled,
.topcoat-icon-button--large.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Quiet Icon Button
 -----------------------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button--large--quiet">
        <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button--large--quiet is-active">
      <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
    </a>

    <a class="topcoat-icon-button--large--quiet is-disabled">
      <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
    </a>
*/
.topcoat-icon-button--large--quiet {
  background: transparent;
  border: 1px solid transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topcoat-icon-button--large--quiet:disabled,
.topcoat-icon-button--large--quiet.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.topcoat-icon,
.topcoat-icon--large {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
.topcoat-icon--large {
  width: 1.3rem;
  height: 1.3rem;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 List
 ------------

    <div class="topcoat-list__container">
      <h3 class="topcoat-list__header">Category</h3>
      <ul class="topcoat-list">
        <li class="topcoat-list__item">
          Item
        </li>
        <li class="topcoat-list__item">
          Item
        </li>
        <li class="topcoat-list__item">
          Item
        </li>
      </ul>
    </div>

*/
.topcoat-list__container {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #bcbfbf;
  border-bottom: 1px solid #eff1f1;
  background-color: #dfe2e2;
}
.topcoat-list__header {
  margin: 0;
  padding: 0.3rem 1.6rem;
  font-size: 0.9em;
  font-weight: 400;
  background-color: #cccfcf;
  color: #656565;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-top: solid 1px rgba(255,255,255,0.5);
  border-bottom: solid 1px rgba(255,255,255,0.23);
}
.topcoat-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  border-top: 1px solid #bcbfbf;
  color: #454545;
}
.topcoat-list__item {
  margin: 0;
  padding: 0;
  padding: 1.16rem;
  border-top: 1px solid #eff1f1;
  border-bottom: 1px solid #bcbfbf;
}
.topcoat-list__item:first-child {
  border-top: 1px solid rgba(0,0,0,0.05);
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
Navigation Bar
--------------

    <div class="topcoat-navigation-bar">
        <div class="topcoat-navigation-bar__item left quarter">
            <a class="topcoat-icon-button--quiet">
              <span class="topcoat-icon topcoat-icon--menu-stack"></span>
            </a>
        </div>
        <div class="topcoat-navigation-bar__item center half">
            <h1 class="topcoat-navigation-bar__title">Header</h1>
        </div>
        <div class="topcoat-navigation-bar__item right quarter">
            <a class="topcoat-icon-button--quiet">
              <span class="topcoat-icon topcoat-icon--edit"></span>
            </a>
        </div>
    </div>
*/
.topcoat-navigation-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  white-space: nowrap;
  overflow: hidden;
  word-spacing: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.6rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: #e5e9e8;
  color: #000;
  -webkit-box-shadow: inset 0 -1 #b9bcbc, 0 1px rgba(0,0,0,0.95);
  box-shadow: inset 0 -1 #b9bcbc, 0 1px rgba(0,0,0,0.95);
}
.topcoat-navigation-bar__item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  margin: var-margin;
  line-height: 2.6rem;
  vertical-align: top;
}
.topcoat-navigation-bar__title {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.167rem;
  font-weight: 400;
  color: #000;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*


Use this class to create a dialog element. Make sure to apply ".topcoat-overlay-bg" an empty div on the page as well,
so that the dialog is resting on a dark, transparent background

	<div class="topcoat-overlay-bg"></div>
	<aside class="topcoat-overlay">
		<h1>Are eagles nice ?</h1>
		<div class="topcoat-overlay-buttons">
			<button role="button" class="topcoat-button">No</button>
			<button role="button" class="topcoat-button--cta">Yes</button>
		</div>
	</aside>

*/
.topcoat-overlay {
  width: 50%;
  height: auto;
  overflow: hidden;
  position: absolute;
  z-index: 10;
  margin: 20%;
  padding: var-overlay-padding;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: var-bg-color;
  border: 1px solid #a5a8a8;
  text-align: center;
}
.topcoat-overlay h1 {
  padding-bottom: 20px;
  border-bottom: 1px solid #d3d7d7;
}
.topcoat-overlay-bg {
  position: absolute;
  z-index: 5;
  background-color: var-overlay-bg-color;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: var-bg-box-shadow;
  box-shadow: var-bg-box-shadow;
}
.topcoat-overlay-buttons {
  margin-top: 20px;
}
.topcoat-overlay-buttons .topcoat-button,
.topcoat-overlay-buttons .topcoat-button--cta {
  margin: 5px;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 Search Input
 ------------

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state

    <input type="search" value="" placeholder="search" class="topcoat-search-input">
    <input type="search is-disabled" value="" placeholder="search" class="topcoat-search-input">

 */
.topcoat-search-input,
.topcoat-search-input--large {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.25rem;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin: 5px;
  height: 3rem;
  font: inherit;
  font-weight: 200;
  outline: none;
  border: 1px solid #a5a8a8;
  background-color: #e5e9e8;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
  color: #454545;
  -webkit-appearance: none;
  padding: 0 0 0 2.7em;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-image: url("../img/search.svg");
  background-position: 1em center;
  background-repeat: no-repeat;
  -webkit-background-size: 12px;
  -moz-background-size: 12px;
  background-size: 12px;
}
.topcoat-search-input:focus,
.topcoat-search-input--large:focus {
  background-color: #fff;
  color: var-color-focus;
}
.topcoat-search-input::-webkit-search-cancel-button,
.topcoat-search-input::-webkit-search-decoration {
  margin-right: 5px;
}
.topcoat-search-input:focus::-webkit-input-placeholder,
.topcoat-search-input:focus::-webkit-input-placeholder {
  color: #c6c8c8;
}
.topcoat-search-input:disabled,
.topcoat-search-input.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Search Input
 ------------------

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state

    <input type="search"  value="" placeholder="search" class="topcoat-search-input--large">
    <input type="search"  value="" placeholder="search" class="topcoat-search-input--large .is-disabled">

*/
.topcoat-search-input--large {
  height: 2.6rem;
  font-size: 1.167rem;
  font-weight: 200;
  padding-left: 2.8em;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  background-position: 1.2em center;
  -webkit-background-size: 1.167rem;
  -moz-background-size: 1.167rem;
  background-size: 1.167rem;
}
.topcoat-search-input--large:disabled,
.topcoat-search-input--large.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 Text Input
 ----------

:disabled - Disabled state
.is-disabled - Simulates a disabled state on mobile devices

    <input type="text" class="topcoat-text-input" value="" placeholder="text">
    <input type="text" class="topcoat-text-input is-disabled" value="" placeholder="text">

*/
.topcoat-text-input,
.topcoat-text-input--large {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.25rem;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin: 5px;
  height: 3rem;
  font: inherit;
  font-weight: 200;
  outline: none;
  border: 1px solid #a5a8a8;
  background-color: #e5e9e8;
  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
  box-shadow: inset 0 1px rgba(0,0,0,0.12);
  color: #454545;
}
.topcoat-text-input:focus {
  background-color: #fff;
  color: #000;
}
.topcoat-text-input:disabled,
.topcoat-text-input.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/*
 Large Text Input
 ----------------

:disabled - Disabled state
.is-disabled - Simulates a disabled state on mobile devices

    <input type="text" class="topcoat-text-input--large" value="" placeholder="text">
    <input type="text" class="topcoat-text-input--large is-disabled" value="" placeholder="text">
*/
.topcoat-text-input--large {
  height: 2.6rem;
  font-size: 1.167rem;
}
.topcoat-text-input--large:focus {
  background-color: #fff;
  color: #000;
}
.topcoat-text-input--large.is-disabled,
.topcoat-text-input--large:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 TopCoat Textarea
 ------------------------

    <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>

 */
.topcoat-textarea,
.topcoat-textarea--large {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.16rem;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: var-margin;
  font: var-font;
  font-weight: 200;
  line-height: 2rem;
  resize: none;
  outline: none;
  border: 1px solid #a5a8a8;
  background-color: #e5e9e8;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
  color: #454545;
}
.topcoat-textarea:focus,
.topcoat-textarea--large:focus {
  background-color: var-background--focus;
  color: #000;
}
/*
Topcoat Large Textarea
 ------------------------

	<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>

*/
.topcoat-textarea--large {
  font: var-font--large;
  font-weight: 200;
  line-height: 2.6rem;
}