/* --------------------------------------------------------------

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

/*
  A special hack is included for IE8 since it does not apply padding
  correctly on fieldsets
 */
label    { display: block; font-weight: 600; margin-bottom: 0.5em; }
fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend   { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; }
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */
input[type=text], input[type=password], input[type=url], input[type=email], input[type=date], input[type=search], input[type=tel],
input.text, input.title,
textarea,
select, div.select {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
  background-color:#fff;
  border:1px solid #e4e0dc;
  border-radius: 2px;
  box-sizing: border-box;
  color:#605550;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  height: 34px;
  margin: 0 0 20px;
  padding: 5px 9px;
  width: 100%;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus, input[type=date]:focus, input[type=tel]:focus input[type=search]:focus,
input.text:focus, input.title:focus,
textarea:focus {
  border-color:#b1ada8;
}
select { padding: 4px 4px 4px 9px; }


input[type=radio],
input[type=checkbox] { margin: 3px 10px 3px 0; }

input[type=file] { display: block; padding: 5px 0; }

input.text,
input.title { width: 300px; padding:5px; }
input.title { font-size:1.5em; }
textarea    { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; height: auto; padding:9px; }

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }

.required:after {
  color: rgba(255,255,255,0.8);
  content: '*';
  font-weight: normal;
  margin: 0 0 0 0.25em;
}