/*
 * AT&T Web Standards Initiative <wsi at att dot com>
 * Joe D'Andrea and Vincent Murphy
 *
 * $Id: form.css,v 1.18 2005/05/04 13:03:35 jdandrea Exp $
 *
 * Form
 */

/* Tip-of-the-hat: The Man In Blue - http://www.themaninblue.com/ */

/* Form */

/* NOTE: "border: 1px solid red" doesn't seem to outline any text input
 * fields in Safari. Might be working-as-designed? Also, do comments
 * inside {} make Safari's CSS processing all wacky?
 */
form.search input { vertical-align: middle; }

form {
  margin: 0;
  padding: 0;
}

/* Fieldset */
form fieldset {
  border: 0 solid transparent;
  margin: 0;
  padding: 0;
}
form fieldset,
form fieldset input,
form fieldset label,
form fieldset legend,
form fieldset radio,
form fieldset checkbox,
form fieldset select {
  font-size: 1em;
}

/* Input Set */
form fieldset .inputset {
  display: block;
}
form fieldset .inputset input {
  display: inline;
}

/* Phone Number */
form fieldset input.phone-area { width: 3em; }
form fieldset input.phone-prefix { width: 3em; }
form fieldset input.phone-line { width: 4em; }
form fieldset input.phone-station { width: 6em; }
form fieldset input.phone-country { width: 3em; }
form fieldset input.phone-city { width: 3em; }
form fieldset input.phone-us { width: 16em; }
form fieldset input.phone-international { width: 16em; }

/* Address */
form fieldset input.address-zip { width: 5em; }
form fieldset input.address-zip4 { width: 10em; }

/* Text */
form fieldset input.text-keyword { width: 32em; }

/* Qualifier */
/* "Not Quite the Solution He Expected" */
/*form .required:after {
  content: " (Required)";
  color: red;
  font-size: 1em;
}*/

/* "Commented out so jquery validation will work" */
form .required {
	color: red;
	font-size: 1em;
	font-weight: bold;
}
/* Error formatting for jquery Validation */
form .error{ border:1px solid red; border-radius: 3px 3px 3px 3px; }


form .optional:after {
	content: " ";
	font-size: 1em;	
}

form.columnar fieldset {
  float: left;
  display: block;
  width: 17em;
  margin: 0 1em 1em 0;
  padding: 0 1em 1em 1em;
}

form.columnar fieldset.checkbox input,
form.columnar fieldset.radio input {
  clear: both;
  float: left;
  width: auto;
}

form.columnar fieldset.checkbox label,
form.columnar fieldset.radio label {
  font-weight: normal;
}

form.columnar input {
  display: block;
  width: 15em;
}

form.columnar input.submit {
  width: auto;
}

form.columnar label {
  display: block; /* Using this causes Netscape 6 to hide forms. */
  margin-bottom: 1em; /* Careful using these in sidebars! */
  font-weight: bold;
}

form.columnar label.first {
  padding-top: 1em;
}

form.columnar select {
  display: block;
}

form.horizontal fieldset {
  display: block;
  margin: 0 0 0.5em 0;
  padding: 0 1em 1em 1em;
}

form.horizontal fieldset.checkbox,
form.horizontal fieldset.radio {
  margin: 1em 0 2em 0;
}

form.horizontal fieldset.checkbox input,
form.horizontal fieldset.radio input {
  clear: both;
  float: left;
  width: auto;
}

form.horizontal fieldset.checkbox label,
form.horizontal fieldset.radio label {
  font-weight: normal;
}

form.horizontal label {
  float: left;
  display: block; /* Using this causes Netscape 6 to hide forms. */
  margin: 1em 1em 0 0;
  font-weight: bold;
}

form.horizontal input {
  display: block;
  width: 13em;
}

form.horizontal input.submit {
  clear: both;
  display: block;
  width: auto;
  float: right;
  margin: 0;
  padding: 0;
}

form.horizontal select {
  display: block;
}

form.margin fieldset {
  display: block;
  margin: 0 0 1em 0;
  border: 0 solid #fff; /* Fix for Opera */
  border-top: 1px solid #000;
  padding: 0 1em 1em 1em;
}

form.margin fieldset.checkbox,
form.margin fieldset.radio {
  margin: 0 0 0 -1em;
  border: 0 solid #fff;
}

form.margin fieldset.checkbox input,
form.margin fieldset.radio input {
  position: static;
  clear: both;
  float: left;
}

form.margin fieldset.checkbox label,
form.margin fieldset.radio label {
  position: relative;
  top: -1.25em;
  display: inline;
  width: auto;
  margin: 0 0 0 8em;
  font-weight: bold;
  font-weight: normal;
}

form.margin fieldset.checkbox legend,
form.margin fieldset.radio legend {
  float: left;
  font-weight: bold;
}

form.margin input {
  position: relative;
  top: -1.4em;
  left: 8em;
  display: block;
}

form.margin input.submit {
  clear: both;
  top: 0;
  width: auto;
}

form.margin label {
  clear: both;
  float: left;
  display: block;
  width: 8em;
  margin-top: -1em;
  font-weight: bold;
}

form.margin label.first {
  margin-top: 1em;
}

form.margin select {
  position: relative;
  top: -1.4em;
  left: 8em;
  display: block;
}

form.vertical fieldset {
  display: block;
  width: 17em;
  margin: 0 0 3em 0;
  padding: 0 1em 1em 1em;
}

form.vertical fieldset.checkbox,
form.vertical fieldset.radio {
  width: 15em;
  margin: 1em 0 2em 0;
}

form.vertical fieldset.checkbox input,
form.vertical fieldset.radio input {
  clear: both;
  float: left;
  width: auto;
}

form.vertical fieldset.checkbox label,
form.vertical fieldset.radio label {
  font-weight: normal;
}

form.vertical input {
  display: block;
  width: 15em;
}

form.vertical input.submit {
  width: auto;
}

form.vertical label {
  display: block;
  margin-bottom: 1em; /* Careful using these in sidebars! */
  font-weight: bold;
}

form.vertical label.first {
  padding-top: 1em;
}

form.vertical select {
  display: block;
  font-size: 1em; /* TODO: Apply this elsewhere instead (pick better spot) */
}

.sidebar form.vertical fieldset {
  width: auto;
  margin: 0;
  padding: 4px; /* Tied to .sidebar .content li */
}

.sidebar form.vertical fieldset input.submit {
  width: auto;
  float: right;
  padding-top: 1px;
  padding-bottom: 3px; /* Would rather have this on the fieldset, no? */
}

.sidebar form.vertical fieldset .date select {
  display: inline;
  font-size: .95em;
}

/* Only for text fields, really */
/* NOTE: An "Icky IE hack" (sigh) */
/* Technically this should end \"" and not just "" but there's some funny
   business going on in IE6 that we have to work around. Thus this is the
   very last part of the stylesheet. Ick ... ICK I say! */
.sidebar form.vertical fieldset input {
  width: auto;
  voice-family: "\"}"";
  voice-family: inherit;
  width: 100%;
}

