/* The title on the top left and step counter on the top right
 *************************************************************/
.javascript-link { text-decoration: underline; color: #234782; cursor: pointer; }

#stepCounter {
	position: absolute;
	top: 11px;
	right: 21px;
}
/*.stepNumber { display: none;}*/
.stepNumber, .stepText { font-size: 12px; line-height: 20px; }
#stepCounter .stepContainer {
	background: #fff;
	border-top: 1px solid #a4c9eb;
	border-bottom: 1px solid #a4c9eb;
	border-right: none;
	float: left;
	height: 22px;
	width: 54px;
	line-height: 21px;
	text-align: center;
}
#stepCounter .leftmost {
	padding-left: 8px;
	border-left: 1px solid #a4c9eb;
	-moz-border-radius:15px 0 0 15px;
	-webkit-border-top-left-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	border-radius: 15px 0 0 15px;
}
#stepCounter .rightmost {
	padding-right: 8px;
	border-right: 1px solid #accdec;
	-moz-border-radius:0 15px 15px 0;
	-webkit-border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	border-radius: 0 15px 15px 0;
}
#stepCounter .currentStepNumber { background: #dae9ff; }

#bottomRight {
	/*position: absolute;*/
	float:right;
	right: 0px;
}

.continueButton { height: 13px;
	border: 1px solid #AAAAAA; color: #323232; font-weight: bold;
	border-radius: 5px; -moz-border-radius: 3px; -webkit-border-radius: 5px;
	text-align: center; font-size: 12px; cursor: pointer;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.25); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.25);
	width: 70px; background: url('../img/registration/continue-button.png'); padding: 6px 10px 7px; }
.finishButton { background: url('../img/registration/finish-button.png'); border-color: #E55019; color: #742306; }
.waitingSpinner { background: url('../img/registration/spinner.gif') no-repeat; display: inline;
	margin: 0 -4px 0 6px; padding: 0 14px 0 0; height: 14px; float: right; }

/* Conversion process
 ********************/
#newTermsStep { position: absolute; left: 10px; top: 5px; width: 440px; height: 360px; background: #f3f8ff; z-index: 1; padding: 20px; }
.termsTitle { font-size: 18px; letter-spacing: .3px; font-weight: bold; margin: 10px 0 25px 0; }
.newFeaturesTable { margin: 10px 20px 0 10px; }
.newFeature td { font-size: 16px; letter-spacing: .3px; padding-bottom: 15px; }
.newFeature th { vertical-align: top; }
.newFeature th .number { padding: 0 10px 0 0; font-size: 16px; }
#acceptTermsButton { width: 100px; position: absolute; bottom: 40px; right: 20px; }
#newTermsStep .terms { position: absolute; bottom: 40px; left: 20px;}
#newTermsStep .terms, #newTermsStep .terms a {font-size: 13px;}

/* Styles for all steps
 **********************/
.signupStep label {
	display: block;
	font-size: 13px;
	margin: 8px 0 3px;
	height: 14px;
}

.signupStep input[type="checkbox"] {
    height: 14px;
    margin: 8px 0 3px;
    float:left;
}

.signupStep input[type="text"], .signupStep input[type="password"], .signupStep textarea, .signupStep select{
	width: 200px;
	color: #555;
}

/* Facebook connect
 ******************/
#facebookConnect {
	position: absolute;
	top: 40px;
	left: 0;
	width: 410px;
	height: 250px;
	padding: 10px;
	z-index: 1;
	text-align: center;
	margin-top: 12px;
}

.facebookDescription {
	margin: 10px 5px 15px 5px;
	text-align: left;
	font: normal normal normal 12px/1.6 verdana, sans-serif;
	color: #677788;
	line-height: 21px;
}

/* Connect buttons (twitter and facebook)
 ****************************************/
.connectButton {
	background: url("../images/facebook-connect-background.png");
	width: 209px;
	padding: 5px;
	border: 1px solid #bbbbbb;
	height: 34px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	text-align: left;
	cursor: pointer;
	color: #333;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.25); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.25); 
}
.connectButton .provider {
	font-weight: bold;
}
.connectButton .image {
	float: left;
	width: 32px;
	height: 32px;
	background-color: #999;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	margin: 0 0 2px 6px;
}
.connectButton .text {
	float: left;
	margin: 8px 0 0 9px;
	letter-spacing: .7px;
	color: #234782;
	font: normal normal normal 12px/1.6 verdana, sans-serif;
	cursor:pointer;
}

#connectToFacebook {
	clear: both;
}
#connectToFacebook.connected {
	background: #fcfdff;
	border-color: #d0def3;
}

#connectToFacebook h2 {
	font-size: 16px;
	color: #444;
	margin-top: 6px;
}

#connectStepFacebookButton .image, #facebookConnectButton .image {
	background: url("../images/facebook.png");
}

#connectStepFacebookButton .image, #noFacebookButton .image {
	background: url("../images/register.png");
}

#connectFideniaButton .image, #fideniaButton .image {
	background: url("../images/fidenia.png");
}

#connectStepTwitterButton .image {
	background: url("../img/registration/twitter.png");
}

/* The signup steps
 ******************/
#stepTitle {
	position: absolute;
	font: normal normal normal 22px/normal 'Arial Rounded MT Bold', sans-serif;
	color: #6797DB;
	text-transform: lowercase;
	top: 10px;
	left: 20px;
}

.signupStep {
	display: none;
	width: 415px;
	height: 275px;
	margin: 35px 0 12px 10px;
	position: absolute;	
}
.currentStep { display:block; }
.signupStep .submit { display: none; }
/*.signupStep { width: 600px;}*/
.hasError {
	border-color: #ED1C24;
	background-color: #ffd4d4;
}

/* The email verified div is taken out of the DOM with absolute position so that the registration form table cells do not get too wide */
#email-verified1 {
	display: none;
	font-weight: bold;
	color: #444;
	font-size: 12px;
}
#email-verified{
	display: none;
	font-weight: bold;
	color: #444;
	font-size: 12px;
}
#email-verified .email { font-size: 12px; }
.verified-message {
	background: #39b54a;
	color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-size: 11px;
	padding: 3px 4px 2px;
}
.change-email {
	color: #008ecc;
	font-size: 11px;
}
.change-email a {
	text-decoration: underline;
	font-weight: normal;
	font-size: 12px;
	margin: 0 15px 0 5px;
}

#facebookConnect .connectButton { margin: 10px auto 15px; }

/* step 1, registration */
.reg-input { width: 220px; }
.reg-input-font { font-family: verdana, sans-serif; color: #677788;}
.message { color: #649fd8; position: relative; top: 0px; left: 12px; font-size: 11px; }
#message-bio .message { top: 10px; }
.errorMessage { color: #8F0F0A; vertical-align:middle; padding-bottom:0px; padding-top:25px;}
#month { width: 70px; }
#date { width: 55px; }
#year { width: 60px; }
#gender-row { height: 40px; }
#gender-row .errorMessage { top: 3px; }
#gender-row label { float: left; }
#gender { float: left; }
#gender li { float: left; margin-left: 14px; }
#gender label { display: inline; }
#gender input { width: 15px; float: left; margin: 10px 4px 0 0;}
#newsletter { width: 15px; margin: 12px 0 0 -1px; }
#newsletter-row label { display: inline; }
.terms { margin: 16px 0 0 0; font-size: 11px; width: 280px; line-height: 1.1; }
.terms a { font-size: 11px; font-weight: normal; text-decoration: underline; }

/* step 2, profile */
#profile-info { margin: 30px 0 0 4px; height: 135px; }
#profileName { font-size: 18px; }
#profileLink { font-size: 11px; margin-top: 3px; }
.profile-wrapper { position: relative; top: 10px; left: 10px; }
.picture-wrapper { float: left; width: 106px; height: 115px; border: 1px solid #a5a5a5;
	border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,.35); -moz-box-shadow: 0px 3px 5px rgba(0,0,0,.35); 
	background: #fff; }
.picture-wrapper #picture-image { width: 96px; height: 96px; background-color: #dae9ff;
	float: left; margin: 4px 5px; }

.picture-upload-container { margin: 20px 0 8px 0; position: relative; }
.picture-upload-container .label { position: absolute; top: 2px; left: 117px; font-size: 12px; color: #444444; }
#picture-upload { width: 80px; height: 18px; overflow: hidden; font-size: 12px; float: left;
	border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid #999999;
	background: url("../img/registration/upload-background.png") 0 -1px; margin-bottom: 6px;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.20); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.20); }
#picture-upload .label { position: relative; top: 3px; left: 8px; font-size: 12px; }
#picture-upload input { cursor: pointer; position: absolute; left: 25px; top: -1px; height: 23px;}
#picture-upload-error { position: relative; top: -4px; left: 6px; font-size: 12px; float:left; width: 250px; }
.picture-upload-description { color: #999; font-size: 12px; float: left; }
#profileTable { clear: both; }
#profileTable .text-input { width: 211px; }
#profileNameInput { width: 205px; }
#message-profileNameInput .message { position: static; }

.facebookConnected #profile-info { height: 100px; }
.facebookConnected .picture-upload-container, .facebookConnected .picture-upload-description { display: none; }
.facebookConnected #picture-image { width: 50px; height: 50px; margin: 3px; }
.facebookConnected .picture-wrapper { width: 56px; height: 64px; }
.facebookConnected .profile-info { height: 40px; }

/* step 3 */
.connectContainer { margin: 10px 0 0 0;}
.mockCheckin { float: left; width: 202px; height: 120px; border: 1px solid #82a5d2; background: url("../img/registration/checkin-mock.png");
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.15); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.15); }
.connectSettings { float: left; margin: 0 0 0 22px; }

.connectContainer table { display: none; }
#connectStepFacebookButton { left: 0; margin-top: 22px; }
.facebookConnected #connectStepFacebookButton { display: none;}
.facebookConnected .connectStepFacebookTable { display: block; margin-top: 14px; }
#connectStepTwitterButton { left: 248px; }
.twitterConnected #connectStepTwitterButton { display: none; }
.twitterConnected .connectStepTwitterTable { display: block; }

#connectStep { width: 470px; } /* This should use the same width as other signupSteps, but I'm afraid to mess them up this close to release. TODO REMOVE THIS LINE */
#connectStep table th { font-weight: bold; }
#connectStep table label { margin: 4px 0 3px; font-size: 12px; }
#connectStep table input { margin: 0 12px 0 0; }
th .icon { width: 15px; height: 15px; margin: 0 8px 4px 0; }
th .twitter-icon { background: url('../img/registration/icon-small-twitter.png'); }
th .facebook-icon { background: url('../img/registration/icon-small-facebook.png'); }

.connectDescription { margin: 28px 0 0 8px; width: 300px; }
.connectDescription .header { font-size: 20px; letter-spacing: .5px; margin: 0 0 7px 0;}
.blurb .text { letter-spacing: 0.5px; font-size: 13px; line-height: 17px; }
.blurb .icon { width: 21px; height: 21px; float: left; margin: 6px 12px 0 0; }
.share-blurb .icon { width: 23px; height: 23px; background:url('../img/registration/blurb-icon-share.png') no-repeat; }
.chat-blurb .icon { width: 23px; height: 23px; background:url('../img/registration/blurb-icon-chat.png') no-repeat; }
.chat-blurb { margin-top: 17px; }

.pstrength-info 
{
    font-size:10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}