/* --------------------------------------------------------------------
  Forms
  by Arik Jones
  
  This code has been derived from many examples including
  those from Wufoo and the book, CSS Mastery by
  Andy Budd and Friends.
----------------------------------------------------------------------- */


form { 
  font-size: 62.5%;
}
fieldset {
  width: 800px;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ddd;
}
fieldset.basic {
  border: none;
  width: auto;
  margin: 0;
  padding: 0;
}
legend { 
  font-weight: bold; 
  font-size: 2em; 
}
.form p { 
  padding: 0;
  margin: 0 0 15px; 
  clear: both;
}
.form span {
  float: left;
  display: inline;
}

/*  =Labels
----------------------------------------------------------------------- */
.form label {
  float: left;
  width: 180px;
  margin-top: 2px;
  margin-right: 10px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  color: #222;
}
.form label.req { 
  background: url(/images/req.png) center right no-repeat; 
}

.form label.none {
  text-indent: -1000em;
  width: 0;
  margin: 0;
  padding: 0;
}             

.form label em { 
  padding: 1px;
  color: red; 
}
.form span label {
  float: none;
  width: inherit;
  font-size: 11px;
  font-weight: normal;
  color: #999;
  text-align: left;
}
.form p.prepend_label {
  padding-left: 190px;
}

/*  =Input, Textarea and Select Fields
----------------------------------------------------------------------- */
input { 
  font-size: 1.5em; 
}


input[type="text"], input.text, textarea { 
  padding: 1px;
}
input[type="file"], input.file { 
  display: inline;
  margin-left: 0px;
  width: auto; 
}
select {
  font-size: 1em; 
  background-color: #fefefe; 
}



/*  =Radio and Checkbox Fields
----------------------------------------------------------------------- */

.form label.radio, .form label.checkbox {
  width: auto;
  color: #777;
  margin-right: 0;
  text-align: left;
}
.form label.radio.col, .form label.checkbox.col {
  width: 9em;
  float: left;
}
.form label checkbox.col span {
  display: inline;
  .float: left;
}
.form label.radio input[type="radio"], 
.form label.radio input.radio,
.form label.radio input,
.form label.checkbox input[type="checkbox"],
.form label.checkbox input.checkbox,
.form label.checkbox input {
  width: 1px;
  margin-bottom: 0px;
}

.form label.radio,
.form label.checkbox {
  font-size: 1em;
}

.form label.radio.basic,
.form label.checkbox.basic {
  width: auto;
  margin-right: 15px;
}


/*  =Buttons
----------------------------------------------------------------------- */
.form p.buttons input {
  width: auto;
}


/*  =Sizes
----------------------------------------------------------------------- */
.form label.tiny     { width: 3em; }
.form label.xshort   { width: 5em; }
.form label.short    { width: 10em; }
.form label.long     { width: 15em; }
.form label.xlong    { width: 25em; }

.form label.radio,
.form label.checkbox { 
  width: 10em;
}

input.xshort  { width: 5em; }
input.short   { width: 10em; }
input.xlong   { width: 15em; }
input.long    { width: 25em; }


/*  =Form Layout Helpers
----------------------------------------------------------------------- */
.form p br, .form br {
  display: block;
  clear: both;
  line-height: 5.3em;
}
.form p br {
  line-height: 0;
}
.clear    { display: inline-block; }   
.clear:after, .container:after, fieldset p:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear        { display: block; }


/*  =Simple Forms
----------------------------------------------------------------------- */
.form.simple fieldset {
  padding: 5px 10px;
  margin: 0;
  float: left;
  width: auto;
  border: none;
/*  background: #eee;*/
}
.form.simple p {
  float: left;
  display: inline;
  margin-bottom: 8px;
}
.form.simple p span {
  float: left;
  display: inline;
}
.form.simple label, .form.simple span label {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}
.form.simple label {
  float: none;
  width: auto;
  display: block;
  text-align: left;
  margin-bottom: 5px;
}
.form.simple input, .form.simple select {
  width: 180px;
}
.form.simple p span.append {
  width: 180px;
}

/*  =Credit Cards
----------------------------------------------------------------------- */
.credit_card input.text.month,
.credit_card input.text.year {
  width: 20px;
}
.credit_card input.text.security {
  width: 40px;
}