/* ------------------------------------------------------------------------------
 ~~ Forms.css
    Author: Erik Burns
    Version: 1 May 2008
    ----------------------------
    .basic_forms provides global styles for VoiceFire .basic_forms. These styles are included on a
    page-by-page basis, so as not to interfere with specialty .basic_form styles
    (such as those employed in the VoiceFire Sign Up flow).

    To standardize the site design around these .basic_form styles, simply add a link to
    this stylesheet into any pages or components that use .basic_forms.  Also make sure
    to add css classes (e.g., <input class="text">) to the .basic_form elements in the
    page or component you wish to style.
/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------
 :: Basic Form
    ----------
	Styles a basic "stacked" label <-> form element <-> instruction text form
--------------------------------------------------------------------------------- */
.basic_form {
  background-color: #fbf7c3;
  border: 1px solid #f9f3a5; border-top: 0; /* Fix an IE bug */
  padding: 10px 20px;
  margin: 0;
  width: 590px;
  }

.basic_form h2 {
  margin: -10px -20px 10px -20px;
  padding: 9px 20px 8px 20px;
  border-bottom: 1px solid #fff !important;
  background-color: #f9f3a5;
  color: #FBB040;
  }

.basic_form h3 {
  color: #000;
  font-family: Verdana !important;
  margin: 0 0 5px 0; padding: 0 !important;
  text-transform: capitalize;
  }

.basic_form h3.plain {
  text-transform: none;
  }

.basic_form h4 {
  font-size: 90%;
  margin: 0;
  padding: 0;
  }

.basic_form .firstcap {
  text-transform: capitalize;
  }

/* .basic_form elements */
.basic_form input, .basic_form select, .basic_form textarea {
  font-size: 90% !important; font-weight: normal; font-family: Verdana, Arial, Helvetica, sans-serif;
  }

.basic_form input, .basic_form textarea {
  padding-left: 3px;
  }

/* ... element widths... */
.basic_form textarea { width: 580px; }
.basic_form input.wide { width: 263px; }
.basic_form input.wider { width: 303px; }
.basic_form input.widest { width: 363px; }

/* Help instructions */
.basic_form p {
  margin-top: 5px; margin-bottom: 10px;
  padding: 0 10px;
  font-size: 70% !important; color: #666;
  background: url(/skins/VF/images/form_bullet3.gif) no-repeat 0 20%;
  }

.basic_form p.no_note {
  padding: 0;
  margin: 15px 0 0;
  }

.basic_form span.note {
  font-size: 90%;
  color: #666;
  }

/* Submit buttons */
.basic_form input.submit {
  padding: 8px 10px;
  _width: 0px; overflow: visible; /* .basic_form Button Hack - get rid of the extra padding in IE */
  margin-bottom: 10px;
  font-weight: bold; font-family: Verdana; font-size: 85% !important;
  }

.basic_form input.submit_large {
  padding: 10px 20px;
  _width: 0px; overflow: visible; /* .basic_form Button Hack - get rid of the extra padding in IE */
  margin-bottom: 10px;
  font-weight: bold; font-family: Verdana; font-size: 100% !important;
  }

.basic_form input.no_margin {
  margin-bottom: 0;
  }

/* Dividers between .basic_form sections */
.basic_form .form_divider {
  height: 30px;
  padding: 0;
  font-size: 1pt;
  background-color: #fff;
  }

.basic_form .form_divider_inform {
  position: relative;
  height: 30px;
  padding: 0; margin: 10px 0 10px 0;
  font-size: 1pt;
  }

.basic_form .form_divider_inform span {
  display: block;
  position: absolute;
  left: -21px; top: 0;
  height: 30px;
  width: 632px;
  background-color: #fff;
  }

.form_float_clear {
  clear: both;
  height: 0; line-height: 0;
  }

/* ------------------------------------------------------------------------------
 :: Basic Display
    -------------
	Styles the unique aspects of displaying data from stacked .basic_forms
--------------------------------------------------------------------------------- */
/* Profile photo */
.basic_display .profile_photo {
  float: right;
  margin: 4px 0; margin-left: 20px; margin-right: -4px;
  }

/* Help instructions */
.basic_display p {
  padding: 0;
  font-size: 80% !important; color: #000;
  background: none;
  }

.basic_display p.note {
  margin-top: 5px; margin-bottom: 10px;
  padding: 0 10px;
  font-size: 70% !important; color: #666;
  background: url(/skins/VF/images/form_bullet3.gif) no-repeat left 20%;
  }

/* ------------------------------------------------------------------------------
 :: Step images
    -----------
    Style the "step one" "step two" image bubbles
--------------------------------------------------------------------------------- */
.basic_form .stepimage {
  display: block; float: left; position: relative; bottom: 2px;
  width: 25px; height: 27px;
  padding-left: 6px;
  background-repeat: no-repeat; background-position: 0 0;
  }

.basic_form .stepimage .step_one { background-image: url(/skins/proto/images/bumplet_step_one.gif); }
.basic_form .stepimage .step_two { background-image: url(/skins/proto/images/bumplet_step_two.gif); }
.basic_form .stepimage .step_three { background-image: url(/skins/proto/images/bumplet_step_three.gif); }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.basic_form .stepimage span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  }

/* ------------------------------------------------------------------------------
 :: ... Intra-view elements
    -----------------------
    Style items that are rendered between views, such as the checkbox above the
    "business information" split view that asks "is this place a business?"
--------------------------------------------------------------------------------- */
/* ... Checkbox ... */
.basic_form .outside_checkbox {
  position: relative; bottom: 30px;
  padding: 0; margin: 0;
  }

.basic_form .outside_checkbox label {
  color: #000;
  }

/* ------------------------------------------------------------------------------
 :: ... Errors
    ----------
    Color the background of inputs, textareas, etc to yellow when surrounded by
    <span class="error"> revealing that the .basic_form element is in error.
--------------------------------------------------------------------------------- */
.basic_form .error input, .basic_form .error textarea, .basic_form .error checkbox, .basic_form .error select
  { background-color: #FFF56E !important; }

/* ------------------------------------------------------------------------------
 :: Buttons
    -------
    Styling the submit/action buttons in the basic_forms and basic_displays
--------------------------------------------------------------------------------- */
.basic_form .buttons a.bigpublish { background-image: url(/skins/proto/images/bumplet_buttons_bigpublish.gif); width: 234px; }

/* ------------------------------------------------------------------------------
 ... styling the basic buttons in the .basic_form
--------------------------------------------------------------------------------- */
.basic_form .basic_buttons {
  margin-top: 20px;
  }

.basic_form .basic_buttons a {
  display: block;
  height: 48px;
  background-repeat: no-repeat; background-position: 0 0;
  }

.basic_form .basic_buttons a:hover, .basic_form .basic_buttons a:active, .basic_form .basic_buttons a.on {
  background-position: 0 -52px;
  }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.basic_form .basic_buttons a span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  }

.basic_form .basic_buttons a.home { background-image: url(/skins/VF/images/titleframe_buttons_home.gif); width: 162px; }

/* ------------------------------------------------------------------------------
 ... styling the "speak out" button in the basic_display
--------------------------------------------------------------------------------- */
.basic_display .snapshot_action_button {
  margin: 0px;
  }

.basic_display .snapshot_action_button a {
  display: block;
  height: 39px;
  background-repeat: no-repeat; background-position: 0 0;
  }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.basic_display .snapshot_action_button a span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  line-height: 0;
  }

.basic_display .snapshot_action_button a.speakout { background-image: url(/skins/VF/images/action_button_speakout.gif); width: 170px; }