/* ------------------------------------------------------------------------------
 <> VoiceFire Signup
    Author:   Erik Burns
    Version:  2 January 2008
    ------------------------
    The signup styles the pages in the signup flow.
-------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
 :: General
    ----------
	General layout for signup pages
--------------------------------------------------------------------------------- */
.signupbody .bodycontent {
  float: left; /* position: relative; */
  color: inherit;
  width: 850px;
  padding: 0 0 26px 0; margin: 0;
  background: #fff url(/skins/VF/images/titleframe_signup_gradient.gif) repeat-x 0 0;
  }
/* Overcome 3px margin bug in IE/Win floats
   http://www.positioniseverything.net/explorer/threepxtest.html */
   * html .bodycontent {
     margin-right: -3px;
     }

 /* ------------------------------------------------------------------------------
  ... the right column
/* ------------------------------------------------------------------------------ */
.signupbody .bodycontent .right_column {
  position: relative; float: right;
  z-index: 10;
  width: 447px;
  /* Tiny Cycloid Hack */
  background: url(/skins/VF/images/titleframe_bg_rtcolumn.gif) no-repeat top right;
  margin: 0; padding: 0 36px 64px 47px;
  }

/* ------------------------------------------------------------------------------
  ... the left column
/* ------------------------------------------------------------------------------ */
.signupbody .bodycontent .left_column {
  display: block; position: relative; float: left;
  padding: 0; margin: 0;
  width: 280px;
  padding: 195px 15px 100px 15px;
  background: url(/skins/VF/images/titleframe_signup_earthbeam.gif) no-repeat 0 0;
  }
  
.signupbody .bodycontent .left_column p {
  color: #231F20;
  padding-left: 21px;
  }

/* ------------------------------------------------------------------------------
 :: Basic Form
    ----------
	Styles the custom-signup-properties of the basic form
--------------------------------------------------------------------------------- */
.signupbody form {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 447px;
  }

.signupbody form input.text, .signupbody form textarea {
  display: block;
  color: #000;
/* Fix an IE scrolling bug with replaced form backgrounds */
  _background-attachment: fixed !important;
  }

.signupbody form a {
  color: #0071BC !important;
  }

.signupbody form p {
  display: block;
  text-align: left;
  color: #666;
  margin-top: 3px; margin-bottom: 10px;
  padding: 0 10px;
  font-size: 75%;
  background: url(/skins/VF/images/form_bullet3.gif) no-repeat 0 20%;
  }

.signupbody form h3 {
  display: block; left: 0;
  padding: 0; margin: 0;
  font-size: 135%; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
  color: #F6921E;
  color: #000;
  }

/* ... Input boxes */
.signupbody form input.text {
  display: block;
  width: 432px; /* Tiny Cycloid Hack */ width: "442px";
  padding: 6px 3px 6px 7px;
  /* Tiny Cycloid Hack so IE 5.5 doesn't clip the height of the input backgrounds */ padding: "2px 3px 1px 7px";
  background: url(/skins/VF/images/titleframe_input_bg.gif) no-repeat 0 center;
  background-attachment: inherit;
  border: 0;
  font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
  color: #333;
  }

/* ... Checkboxes */
.signupbody form .checkbox {
  padding-top: 10px;
  }

.signupbody form .checkbox input {
  float: left; margin-top: 0; margin-left: 40px;
  }

.signupbody form .checkbox label {
  padding-left: 10px;
  font-size: 75%; color: #666;
  }

/* ------------------------------------------------------------------------------
 ... First Field: Styling of the top field
--------------------------------------------------------------------------------- */
.signupbody form .first_field {
  height: 167px;
}

.signupbody .first_field, .signupbody .first_field h3, .signupbody .first_field a {
  padding: 0; margin: 0; border: 0;
  color: #333;
  }

.signupbody form .first_field input.text {
  background-image: url(/skins/VF/images/titleframe_input_top_bg.gif);
  }

.signupbody form .first_field span.step, .signupbody form .first_field span.step_one, .signupbody form .first_field span.step_two, .signupbody form .first_field span.step_three, .signupbody form .first_field span.step_four {
  display: block;
  margin: 0; padding: 36px 0 0;
  }

/* ------------------------------------------------------------------------------
 ... Errors: Styling the input fields when there is an error
--------------------------------------------------------------------------------- */
.signupbody form .error input.text { background-image: url(/skins/VF/images/titleframe_input_bgerr.gif); }
.signupbody form .first_field .error input.text { background-image: url(/skins/VF/images/titleframe_input_top_bgerr.gif); }

/* ------------------------------------------------------------------------------
 ... Buttons: Styling the submit/back buttons in the form
--------------------------------------------------------------------------------- */
/* format the buttons */
.signupbody form .buttons {
  display: block; position: absolute; bottom: 0px; right: 38px;
  }

.signupbody form .buttons a {
  display: block; float: left;
  height: 48px; width: 125px; margin-left: 20px;
  background-repeat: no-repeat; background-position: 0 0;
  }

.signupbody form .buttons a:hover, .signupbody form .buttons a:active, .signupbody form .buttons a.on {
  background-position: 0 -52px;
  }

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

.signupbody form .buttons a.back { background-image: url(/skins/VF/images/titleframe_buttons_back.gif); }
.signupbody form .buttons a.continue { background-image: url(/skins/VF/images/titleframe_buttons_cont.gif); }
.signupbody form .buttons a.emailme { background-image: url(/skins/VF/images/titleframe_buttons_emailme.gif); }
.signupbody form .buttons a.finish { background-image: url(/skins/VF/images/titleframe_buttons_finish.gif); }
.signupbody form .buttons a.next { background-image: url(/skins/VF/images/titleframe_buttons_next.gif); }
.signupbody form .buttons a.signin { background-image: url(/skins/VF/images/titleframe_buttons_signin.gif); }

/* ------------------------------------------------------------------------------
 :: Signup Step 1
    -------------
    Styles specific to sign up step 1
/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------
 ... Message Inline : Styling of the inline success/failure message for
     trying to sign up with a new agentId
--------------------------------------------------------------------------------- */
.signupbody .right_column .message_inline {
  position: absolute;  right: 42px;  top: 15px;
  height: 26px;
  background-repeat: no-repeat; background-position: 0 0;
  }

/* Dwyer method image replacement */
.signupbody .right_column .message_inline span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  }

.signupbody .right_column .success { background-image: url(/skins/VF/images/titleframe_msg_success.gif); width: 146px; }
.signupbody .right_column .failure { background-image: url(/skins/VF/images/titleframe_msg_sorry.gif); width: 201px; }

/* ------------------------------------------------------------------------------
 :: Signup Step 2
    -------------
    Styles specific to sign up step 2
/* ------------------------------------------------------------------------------ */

/* ... Radio Buttons */
.signupbody form span.step_two h3 {
  margin-bottom: 10px;
  }

.signupbody form span.radio_wrapper {
  display: block;
  margin: 3px 0; padding: 0 0 0 20px;
  }

.signupbody form label.radio {
  display: inline;
  font-size: 95%; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;
  }

.signupbody form input.radio {
  height: 100%;
  }

/*-------------------------------------------------------------------------------
 ... Photo Wrapper & Frame (for Thumbnail)
     ----------------------------------
	 Styles for the photo wrapper and frame that goes around the thumbnail, including
	 the widgetry buttons and in-frame instructional text
--------------------------------------------------------------------------------- */
.bodycontent .photo_wrapper {
  position: relative;
  padding: 3px; margin: 15px 0 0 0;
  height: 235px; width: 442px;
  background: url("/skins/VF/images/titleframe_photo_wrapper.gif") no-repeat 0 0;
  }

.bodycontent .photo_wrapper .photo_frame {
  position: absolute; left: 16px; top: 16px;
  height: 203px; width: 202px;
  background: url(/skins/VF/images/titleframe_thumbnail_frame.gif) no-repeat 0 0;
  z-index: 35;
  }

.bodycontent .photo_wrapper img {
  position: absolute; left: 23px; top: 23px;
  z-index: 34;
  }

/* Navigator - has widgets for choosing an image or instructions for uploading an image */
.bodycontent .photo_wrapper .navigator {
  position: absolute; left: 237px; top: 44px;
  height: 147px; width: 185px;
  }

/*--------------------------------------------------- */
/* State : User wants to choose a VoiceFire Character */
/*--------------------------------------------------- */
.bodycontent .navigator h4 {
  height: 99px; width: 185px;
  background: url("/skins/VF/images/titleframe_thumbnail_title.gif") no-repeat 0 0;
  padding: 0; margin: 0;
  }

.bodycontent .navigator ul {
  padding: 0; margin: 0;
  list-style: none;
  }

.bodycontent .navigator ul li {
  display: block;
  }

.bodycontent .navigator ul li a {
  display: block; position: absolute; top: 56px;
  width: 43px; height: 48px;
  background-repeat: no-repeat;
  background-position: 0 0;
  }

.bodycontent .navigator ul li a:hover, .bodycontent .navigator ul li a:active, .bodycontent .navigator ul li a.on { background-position: 0 -52px; }

.bodycontent .navigator ul li a.back { background-image: url("/skins/VF/images/titleframe_thumbnail_left.gif"); left: 0; }
.bodycontent .navigator ul li a.next { background-image: url("/skins/VF/images/titleframe_thumbnail_right.gif"); right: 0; }

/* Hack to turn off the guy and girl picker.  Can remove once Jer cleans out the Dojo code */
 .bodycontent .navigator ul li a.guy, .bodycontent .navigator ul li a.girl { height: 1px; width: 1px; }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.bodycontent .navigator h4 span, .bodycontent .navigator ul li a span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  line-height: 0;
  }

/* ------------------------------------ */
/* State : User wants to upload a photo */
/* ------------------------------------ */
.bodycontent .navigator p {
  padding: 0; margin: 0;
  text-align: center; font-size: 90%; font-weight: bold;
  background: none;
  }

.bodycontent .thumbnailUpload {
  visibility: hidden; /* Will get set to visible by JavaScript */
  position: relative;
  }

/* ------------------------------------------------------------------------------
 :: Signup Step 3
    -------------
    Styles specific to sign up step 3
/* ------------------------------------------------------------------------------ */
.signupbody form .map_wrapper {
  position: relative;
  height: 232px; width: 442px;
  padding: 0; margin: 15px 0 10px 0;
  }

.signupbody form .map_wrapper .map_frame {
  display: block;
  height: 235px; width: 442px;
  padding: 3px;
  background: url("/skins/VF/images/titleframe_photo_wrapper.gif") no-repeat 0 0;
  }