/*----------------------------------------------
	SIGNUP.CSS
	Author:		Engage Interactive
	Requires:	reset.css
				global.css
----------------------------------------------*/

p.end_date strong {
	background:red;
	color:#FFF;
	padding:3px 5px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

/*-------------------------------
	STEPS CONTAINER
-------------------------------*/

#steps {
	position:relative;
	width:613px;
	padding-bottom:8px;
	margin-bottom:5px;
	background:#9200b9 url(/assets/giraffe/images/signup/email_background.gif) 0 -8px no-repeat;
}

.steps_footer {
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:613px;
	height:8px;
	background:url(/assets/giraffe/images/signup/email_background.gif) 0 0;
	z-index:1001;
}

#steps div.hr {
	margin:0 20px 10px 0;
	background-image:url(/assets/giraffe/images/signup/dotted_line.gif);
	clear:both;
}

#steps p.intro {
	color:#FFF;
	padding-left:20px;
}

#steps p.intro a {
	padding:0 3px;
	background-color:#4F0064;
	color:#FFF;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
#steps p.intro a:hover {
	text-decoration:underline;
}


/*---------------------
	STEP 1
---------------------*/

#step_1 {
	position:relative;
	width:613px;
	
}

#step_1 label{
	display:block;
	width:613px;
	height:100px;
	background:url(/assets/giraffe/images/signup/email_header.gif) left top no-repeat;
	text-indent:-5000px;
}

#step_1 input#email {
	display:block;
	position:absolute;
	left:17px;
	top:101px;
	width:453px;
	height:60px;
	border:solid 3px #9200b9;
	margin:0;
	padding:22px 100px 0 20px;
	background:#FFF;
	z-index:100;
	font-size:28px;
	font-style:italic;
	color:#3e004f;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
}

#step_1 input#email:focus {
	border-color:#a833c7;
}

#step_1 button#form_1_submit {
	display:block;
	position:absolute;
	right:24px;
	top:108px;
	height:108px;
	width:84px;
	height:74px;
	border:none;
	padding:0;
	margin:0;
	background:url(/assets/giraffe/images/signup/email_go.gif) 0 0 no-repeat;
	text-indent:-5000px;
	z-index:200;
}

#step_1 button#form_1_submit:hover {
	cursor:pointer;
	background-position:left bottom;
}

#step_1 h3 {
	padding:100px 0 0 20px;
	color:#FFF;
	clear:both;
}

/*-------------------------------
	STEP 2
-------------------------------*/

#step_2 h2 {
	display:block;
	height:76px;
	padding:20px 0 0 20px;
	background:url(/assets/giraffe/images/signup/step_2_header.gif) 20px 20px no-repeat;
	text-indent:-5000px;
}

.form_container {
	padding-left:17px;
}

.form_container div.field {
	position:relative;
	margin-bottom:18px;
	clear:both;
}

.form_container div.split {
	float:left;
	width:281px;
	padding-right:17px;
	clear:none;
}

.form_container label {
	display:block;
	padding:0 0 4px 3px;
	font-size:26px;
	color:#FFF;
	text-transform:uppercase;
}


/*---------------------
	GENERIC INPUT
---------------------*/

.form_text input,
.form_textarea textarea,
.form_select select {
	width:259px;
	height:33px;
	padding:8px 8px 0;
	border:3px solid #9200b9;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	background:#FFF;
	color:#5e1072;
	font-size:18px;
	font-style:italic;
}

.form_text input:focus,
.form_textarea textarea:focus,
.form_select select:focus {
	border-color:#a833c7;
}


/*---------------------
	SELECT
---------------------*/

.form_select select {
	width:281px;
	height:47px;
	padding:8px;
}

.small select {
	width:90px;
}


/*---------------------
	BIRTHDAY
*/

#birthday-b {
	width:285px;
	padding-right:13px;
}

#month {
	width:95px;
}


/*---------------------
	CHECKBOX
---------------------*/

#subscribe-checkbox {
	position:absolute;
	left:-9999px;
}

.form_checkbox label.noCufon {
	display:inline-block;
	padding:2px 0 0 10px;
	font-size:16px;
	line-height:22px;
	font-style:italic;
	text-transform:none;
}

.form_checkbox span.checkbox {
	display:inline-block;
	float:left;
	width:29px;
	height:29px;
	background:url(/assets/giraffe/images/signup/checkbox.gif) 0 0 no-repeat;
	cursor:pointer;
}

.form_checkbox span.checkbox:hover {
	background-position:0 -29px;
}

.form_checkbox span.checked {
	background-position:0 -58px;
}

.form_checkbox span.checked:hover {
	background-position:0 -87px;
}

.error span.checkbox {
	background-position:0 -116px;
}


/*---------------------
	BUTTON
---------------------*/

.form_container div.form_button {
	padding:5px 0 10px;
	margin:0 20px 0 0;
}

.form_button button {
	display:block;
	width:160px;
	height:44px;
	border:0;
	background:url(/assets/giraffe/images/signup/submit.gif) left bottom no-repeat;
	text-indent:-5000px;
}

.form_button button:hover {
	cursor:pointer;
	background-position:left top;
}


/*---------------------
	LOADING
---------------------*/

#loading {
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:613px;
	height:100%;
	background:#9200b9 url(/assets/giraffe/images/signup/email_background.gif) 0 -8px no-repeat;
	z-index:1000;
}

#loading p {
	display:block;
	position:absolute;
	top:50%;
	width:100%;
	padding-top:40px;
	margin:-30px 0 0 0;
	background:url(/assets/giraffe/images/signup/loading.gif) center top no-repeat;
	text-align:center;
	color:#FFF;
	font-size:20px;
	text-transform:uppercase;
}

p.error {
	display:none;
	position:absolute;
	right:22px;
	top:22px;
	width:190px;
	height:62px;
	background:url(/assets/giraffe/images/signup/oops.gif);
	text-indent:-5000px;
}


/*-------------------------------
	STEP 3
-------------------------------*/

#step_3 h2.offer,
#step_3 h2.nooffer,
#step_3 h2.existing {
	display:block;
	width:613px;
	height:98px;
	padding:10px 0;
	background:url(/assets/giraffe/images/signup/thanks.gif) 0 10px no-repeat;
	text-indent:-5000px;
}

#step_3 h2.nooffer {
	height:93px;
	background:url(/assets/giraffe/images/signup/no_offer_thanks.gif) 0 10px no-repeat;
}

#step_3 h2.existing {
	height:93px;
	background:url(/assets/giraffe/images/signup/already_in_thanks.gif) 0 10px no-repeat;
}


#step_3 h3 {
	display:block;
	width:544px;
	height:45px;
	margin:auto;
	background:url(/assets/giraffe/images/signup/share.gif) 50% -6px no-repeat;
	text-indent:-5000px;
}

#step_3 .intro {
	padding-bottom:18px;
	margin-bottom:0;
}

#step_3 .share {
	text-align:center;
}

#steps #step_3 .hr {
	width:573px;
	margin:0 0 15px 20px;
}

#step_3 a.facebook_link,
#step_3 a.twitter_link {
	display:inline-block;
	width:165px;
	height:92px;
	margin-bottom:10px;
	background:url(/assets/giraffe/images/signup/facebook.gif);
	text-indent:-5000px;
}

#step_3 a.twitter_link {
	background-image:url(/assets/giraffe/images/signup/twitter.gif);
}