/* FORM //////////////////////////////////////////////////////*/

/* Initial layout */

.form-wrapper {
	width:96%;
	margin-left:auto;
	margin-right:auto;
	max-width:560px;
	background-image: url(../layout/form-bg-lg.png);
	background-repeat: no-repeat;
	background-position: left top;	
	-webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.10);
}



#form{
	width: 280px;
	min-height: 300px;
	z-index: 3;
	position: relative;
	margin-top: 0px;
	background: transparent;
	text-align: center;
	margin: 0 auto;
	padding-top:90px;
	color: #000000;
	padding-bottom:30px;
}

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 {
	height: 95px;
	margin-right: auto;
	margin-left: auto;
	display:block;
}
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin-bottom: 15px; }

.steps {
	z-index: 9;
	margin-top: 10px;
	width: 230px;
	margin-right:20px;
	position: absolute;
	top: 3px;
	left: 160px;
}
.step_bar {
	width: 40px;
	height: 55px;
	display: inline-block;
	margin: 0 1px;
	font-size: 15px;
	font-weight: bold;
	color: #E74547;
	cursor: pointer;
	text-align: center;
	line-height: 30px;
	background-image: url(../layout/step-bg.png);
	background-repeat: no-repeat;
}
.step_highlight {
	width: 40px;
	height: 55px;
	color: #FF3B77;
	background-repeat: no-repeat;
	background-image: url(../layout/step-arrow.png);

}

input, select, textarea { outline: none; }
input[type=text], input[type=password] {
	width: 215px;
	height: 40px;
	display: block;
	border: 1px solid #b1b1b1;
	box-shadow: 0 1px 0 #e1e1e1;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	color:#333;
	margin-top: 36px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
.drop_down_container { width: 230px; margin: 0 0 0 4px; position: relative; }
select {
	width:120px;
	height: 30px;
	float: left;
	font-size: 15px;
	color: #333;
	border: 1px solid #b1b1b1;
	line-height: 20px;
	-webkit-appearance: none;
	margin-top: 30px;
	margin-right: 3px;
	margin-bottom: -5;
	padding-top: 6px;
	padding-right: 3px;
	padding-bottom: 6px;
	padding-left: 5px;
}
#dobmonth {
margin-left:22px;
}
/* Select elements */
select:hover { cursor: pointer; }
select#dating-gender.required { width: 210px; margin: 0 0 0 20px; }
select#dobday.required { width: 55px; }
select#dobmonth.required { width: 75px; }
select#dobyear.required { width: 65px; }

/* Error styling */
select.error { padding: 5px; color: red; border: 1px solid red; background: url(../_img/dropdown_icon.png) no-repeat -moz-linear-gradient( 90deg, rgb( 231, 231, 231 ) 0%, rgb( 255, 255, 255 ) 100%) !important;background: url(../_img/dropdown_icon.png) 96% 50% no-repeat, -webkit-linear-gradient( 90deg, rgb( 231, 231, 231 ) 0%, rgb( 255, 255, 255 ) 100%) !important; -webkit-appearance: none; }
label.error { width: 215px; font-size: 14px; text-align: center; color: red; }

#fstep_1 label.error { position: absolute; top: 156px; left: 32px; }
#fstep_2 label.error { position: absolute; top: 110px; left: 18px; }
#fstep_3 label.error { position: relative; top: 50px; left: 2px; }
#fstep_4 label.error { position: relative; top: 40px; left: 3px; }
#fstep_5 label.error { position: relative; top: 40px; left: 4px; }

input[type=text].error, input[type=password].error, textarea.error, select.error {
	background-color: #FFFFFF;
}
input.error, textarea.error, select.error {
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: left top;
	border: 1px solid #FF0000;
}

/* Button styling */
.myButton {
	width: 151px;
	height: 40px;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
	text-decoration: none;
	line-height: 43px;
	text-align: center;
	color: white;
	cursor: pointer;
	background-color: #E84E50;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #C81A1E;
	border-bottom-color: #C81A1E;
	margin-top: 82px;
	margin-right: 50px;
	margin-bottom: 20px;
	margin-left: 50px;
}
.myButton:active { position: relative; top: 1px; cursor: pointer; }
span.fprev.myButton { display: none !important; }


/* Custom radio buttons */

input[type="radio"] { position: absolute; left: -5000px; }

input[type="radio"] + label span.male, input[type="radio"] + label + label span.male {
	position: absolute;
	left: 21px;
	width:110px;
	height:110px;
	cursor:pointer;
	background-image: url(../layout/male.png);
	background-repeat: no-repeat;
	margin-top: -4px;
}

input[type="radio"] + label span.female {
	position: absolute;
	left: 136px;
    width:110px;
    height:110px;
    background-image: url(../layout/female.png);;
    cursor:pointer;
	margin-top: -4px;
}

input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male {
	background-image: url(../layout/male-checked.png);
	cursor:pointer;
}

input[type="radio"]:checked + label span.female {
	background-image: url(../layout/female-checked.png);
	cursor:pointer;
}

.valid {
	border: 1px solid #a8dc2a !important;
}
@media(max-width:620px) {
.form-wrapper {

	background-image: url(../layout/form-bg-mobile.png);
	
}

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 {
	height: 95px;
	margin-right: auto;
	margin-left: auto;
	display:block;
}
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin-bottom: 15px; }

.steps {
	z-index: 9;
	margin-top: 10px;
	width: 228px;
	position: absolute;
	top: 3px;
	left: auto;
	margin-right:0px;
	margin-left:46px;

}

input[type="radio"] { position: absolute; left: -5000px; }

input[type="radio"] + label span.male, input[type="radio"] + label + label span.male {
	position: absolute;
	left: 21px;
	width:110px;
	height:110px;
	cursor:pointer;
	background-image: url(../layout/male.png);
	background-repeat: no-repeat;
	margin-top: -4px;
}

input[type="radio"] + label span.female {
	position: absolute;
	left: 136px;
    width:110px;
    height:110px;
    background-image: url(../layout/female.png);;
    cursor:pointer;
	margin-top: -4px;
}

input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male {
	background-image: url(../layout/male-checked.png);
	cursor:pointer;
}

input[type="radio"]:checked + label span.female {
	background-image: url(../layout/female-checked.png);
	cursor:pointer;
}
.myButton {
	
	margin-bottom: 5px;

}
}