@charset 'utf-8';
/* 
 * 1. Firefox doesn’t inherit font family specified for “select�. More 
 *    information: https://github.com/nathansmith/formalize/issues/41
 * 2. Change this according to your site’s font (family) configuration. Be 
 *    aware that changing font size and line height affects vertical alignment
 *    of check boxes and radio buttons. There’s no “holy grail� for vertically
 *    aligning those input types.
 * 3. If you use a universal reset for “margin� and “padding� in your site’s 
 *    base CSS file you don’t need this.
 * 4. Corrects color not being inherited in IE8/9.
 * 5. Tailored to the demo page with all given HTML markup dependencies and 
 *    so on. Please change according to your needs.
 */
form,
input,
select,
optgroup,
textarea,
button {
  font: 100%/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* 2 */

  margin: 0;
  padding: 0;
  /* 3 */

}
fieldset {
  border: 1px solid #ccc;
  margin: 1.5em 0;
  /* 5 */

  padding: 1em;
}
legend {
  border: 0;
  /* 4 */

  color: #888;
  padding: 0 .5em;
}
/* 5 */
label {
  display: block;
}
/* 5 */
input + label {
  margin-top: 1em;
}
input[type='checkbox'] + label,
input[type='radio'] + label {
  display: inline-block;
  margin: 0 2em 0 0;
}
/* 
 * 1. WebKit browsers use “pointer� only when “size� attribute with value 0
 *    or 1 is present.
 */
label,
input[type='checkbox'],
input[type='radio'],
select,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  cursor: pointer;
}
/*
 * Improves appearancy and consistency in all browsers.
 * 
 * 1. https://github.com/nathansmith/formalize/issues/43
 * 2. Firefox sets line height using “!important� in the UA style sheet.
 */
input,
select,
textarea,
button {
  line-height: normal;
  /* 2 */

  vertical-align: top;
}
/*
 * The reason why I list all input types one by one and not just “input� is 
 * this: I don’t want to address input types “file� and “range�.
 */
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  -moz-background-clip: padding;
  -ms-background-clip: padding-box;
  -o-background-clip: padding-box;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  border: 1px solid;
  height: 1.8em;
}
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea {
  background-color: #fff;
  border-color: #999 #bbb #ddd;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2px 3px;
}
/*
 * Known issue regarding “select�: IE 9 ignores background color.
 */
input[type='color']:hover,
input[type='date']:hover,
input[type='datetime']:hover,
input[type='datetime-local']:hover,
input[type='email']:hover,
input[type='month']:hover,
input[type='number']:hover,
input[type='password']:hover,
input[type='search']:hover,
input[type='tel']:hover,
input[type='text']:hover,
input[type='time']:hover,
input[type='url']:hover,
input[type='week']:hover,
select:hover,
select[size]:hover,
textarea:hover {
  background-color: #f5f5f5;
}
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='time']:focus,
input[type='url']:focus,
input[type='week']:focus,
select:focus,
select[size]:focus,
textarea:focus,
button:focus,
input[type='button']:focus,
input[type='reset']:focus,
input[type='submit']:focus {
  background-color: #fff;
  border-color: #0068c4;
  box-shadow: #0068c4 0 0 .5em 0;
  outline: 0;
  z-index: 1;
}
/*
 * 1. A font size of 100% (as specified in the first rule set) would render
 *    check boxes and radio buttons bigger in Webkit browsers (Mac OS X).
 * 2. Needed for browser specific positioning later on.
 * 3. Improves consistency in all browers.
 */
input[type='checkbox'],
input[type='radio'] {
  font-size: .6875em;
  /* 1 */

  position: relative;
  /* 2 */

  vertical-align: middle;
  /* 3 */

}
/* 
 * Opera (Mac OS X) needs this. More information: 
 * https://github.com/nathansmith/formalize/issues/45
 */
input[type='checkbox'] {
  margin: 2px 1px;
}
input[type='radio'] {
  margin: 1px;
}
select[multiple],
select[size],
textarea {
  height: auto;
}
/* https://github.com/nathansmith/formalize/issues/42 */
select[size='0'],
select[size='1'] {
  height: 1.8em;
}
/* 
 * Only Firefox understands this. Result: Opera and IE have italic font style,
 * WebKit and Firefox normal font style.
 */
optgroup {
  font-style: normal;
  font-weight: 700;
}
/*
 * 1. Removes default vertical scrollbar in IE browsers.
 */
textarea {
  min-height: 5em;
  overflow: auto;
  /* 1 */

  resize: vertical;
  width: 100%;
}
/*
 * All clickable buttons.
 *
 * 1. Fallback for browsers not supporting gradients (like IE 9).
 * 2. “Pushed in� effect for active state.
 */
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background: #e5e5e5 url('img/button.png') repeat-x;
  /* 1 */

  background-image: -moz-linear-gradient(#ffffff, #e5e5e5);
  background-image: -ms-linear-gradient(#ffffff, #e5e5e5);
  background-image: -o-linear-gradient(#ffffff, #e5e5e5);
  background-image: -webkit-linear-gradient(#ffffff, #e5e5e5);
  background-image: linear-gradient(#ffffff, #e5e5e5);
  border-color: #ddd #bbb #999;
  font-weight: 700;
  line-height: normal;
  overflow: visible;
  padding: 3px .5em;
  text-shadow: #fff 0 1px 1px;
}
button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover {
  background-image: -moz-linear-gradient(#ffffff, #d9d9d9);
  background-image: -ms-linear-gradient(#ffffff, #d9d9d9);
  background-image: -o-linear-gradient(#ffffff, #d9d9d9);
  background-image: -webkit-linear-gradient(#ffffff, #d9d9d9);
  background-image: linear-gradient(#ffffff, #d9d9d9);
}
/* 2 */
button:active,
input[type='button']:active,
input[type='reset']:active,
input[type='submit']:active {
  background-image: -moz-linear-gradient(#d9d9d9, #ffffff);
  background-image: -ms-linear-gradient(#d9d9d9, #ffffff);
  background-image: -o-linear-gradient(#d9d9d9, #ffffff);
  background-image: -webkit-linear-gradient(#d9d9d9, #ffffff);
  background-image: linear-gradient(#d9d9d9, #ffffff);
  border-color: #999 #bbb #ddd;
  box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
}
/* 
 * Disabled states.
 */
input[type='color'][disabled],
input[type='date'][disabled],
input[type='datetime'][disabled],
input[type='datetime-local'][disabled],
input[type='email'][disabled],
input[type='month'][disabled],
input[type='number'][disabled],
input[type='password'][disabled],
input[type='search'][disabled],
input[type='tel'][disabled],
input[type='text'][disabled],
input[type='time'][disabled],
input[type='url'][disabled],
input[type='week'][disabled],
select[disabled],
textarea[disabled] {
  background-color: #eee !important;
}
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
button[disabled] {
  color: #888;
  cursor: default;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
}
/*
 * WebKit specific stuff.
 */
@media (-webkit-min-device-pixel-ratio: 0) {
  input[type='checkbox'] {
    top: -1px;
  }
  input[type='radio'] {
    top: -2px;
  }
  input[type='search'] {
    -webkit-appearance: none;
  }
  input[type='search']::-webkit-search-decoration {
    display: none;
  }
  select {
    -webkit-appearance: none;
    border-radius: 0;
  }
  /*
  	 * 1. https://github.com/nathansmith/formalize/issues/44
  	 */
  select[multiple],
  select[multiple][size],
  select[size] {
    background-image: none;
    padding-right: 3px;
  }
  select,
  select[size='0'],
  select[size='1'] {
    background: transparent url('img/select_arrow.gif') no-repeat right center;
    padding-right: 1em;
  }
  ::-webkit-input-placeholder {
    color: #888;
  }
}
/*
 * Firefox specific stuff.
 */
@-moz-document url-prefix() {
  input[type='checkbox'] {
    top: -2px;
  }
  input[type='radio'] {
    top: -1px;
  }
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}
/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner {
  border: 0;
  padding: 0;
}