/**
 * @fileoverview:   39CLUES registration styles
 * @author:         Julia Yu
**/

/* general form styles
------------------------------------------------ */

.registration {
	width: 905px;
	margin: 25px auto;
	padding: 5px 30px 35px 45px;
	font-size: 1.4em;
	background: url("/Media/Images/Originals/bg_register.jpg") no-repeat 0 bottom;
}

.quiz {
	background: url("/Media/Images/Originals/bg_quiz.jpg") no-repeat 0 bottom;
}

.registration h1 {
	position: relative;
	margin-bottom: 20px;
	font-size: 1em;
}

.registration h1 span {
	position: absolute;
	top: 0;
	left: 0;
}

.registration h1#congratHeader, .registration h1#congratHeader span {
	width: 452px;
	height: 43px;
}

.registration h1#congratHeader span {
	background: url("/Media/Images/Originals/h1_congratulations.jpg") no-repeat 0 bottom;
}

.registration h1.almostThere, .registration h1.almostThere span {
	width: 423px;
	height: 45px;
}

.registration h1.almostThere span {
	background: url("/Media/Images/Originals/h1_almostThere.png") no-repeat 0 bottom;
}

.registration h1.forgotLogin, .registration h1.forgotLogin span {
	width: 473px;
	height: 45px;
}

.registration h1.forgotLogin span {
	background: url("/Media/Images/Originals/h1_forgot.png") no-repeat 0 bottom;
}

.registration h1.resendEmail, .registration h1.resendEmail span {
	width: 867px;
	height: 45px;
}

.registration h1.resendEmail span {
	background: url("/Media/Images/Originals/h1_resend.png") no-repeat 0 bottom;
}

.registration h1.alert, .registration h1.alert span {
	width: 194px;
	height: 45px;
}

.registration h1.alert span {
	background: url("/Media/Images/Originals/h1_alert.png") no-repeat 0 bottom;
}

.registration p {
	width: 750px;
	margin-bottom: 10px;
}

form.registration img {
	border: 0;
	display: block;
}

form.registration h1#loginHeader, form.registration h1#loginHeader span {
	width: 177px;
	height: 60px;
}

form.registration h1#loginHeader span {
	background: url("/Media/Images/Originals/h1_login.jpg") no-repeat 0 bottom;
}

h1#changePasswordHeader, h1#changePasswordHeader span {
	width: 588px;
	height: 55px;
}

h1#changePasswordHeader span {
	background: url("/Media/Images/Originals/h1_change_password.jpg") no-repeat 0 bottom;
}

h1#logoutHeader, h1#logoutHeader span {
	width: 229px;
	height: 49px;
}

h1#logoutHeader span {
	background: url("/Media/Images/Originals/h1_logout.jpg") no-repeat 0 bottom;
}

form.registration h1.stepHeader, form.registration h1.stepHeader span {
	width: 912px;
	height: 63px;
}

form.registration h1#step1Header span {
	background: url("/Media/Images/Originals/h1_step1.jpg") no-repeat 0 bottom;
}

form.registration h1#step2Header span {
	background: url("/Media/Images/Originals/h1_step2.jpg") no-repeat 0 bottom;
}

form.registration h1#step3Header span {
	background: url("/Media/Images/Originals/h1_step3.jpg") no-repeat 0 bottom;
}

form.registration h1#step4Header span {
	background: url("/Media/Images/Originals/h1_step4.jpg") no-repeat 0 bottom;
}

form.registration h1#step4aHeader span {
	background: url("/Media/Images/Originals/h1_step4a.jpg") no-repeat 0 bottom;
}

form.registration a.hint {
	display: block;
	clear: both;
	color: #00c1dc;
	margin: 10px 0;
	text-decoration: none;
	width: 300px;
}

form.registration a:hover.hint {
	color: #fff;
}

form.registration fieldset {
	margin: 20px 0px;
	border: 0;
	height: 100%;
	overflow: hidden;
}

form.registration fieldset .inputGroup {
	float: left;
	width: 340px;
}

form.registration fieldset .inputGroup label {
	display: block;
	font-size: 1.5em;
	color: #00c1dc;
	margin-bottom: 10px;
}

/*form.registration fieldset .inputGroup span {
	margin-top: 5px;
	display: block;
}*/

form.registration fieldset .inputGroup select {
	margin-top: 5px;
	font-size: 1em;
}

form.registration fieldset .inputGroup input.text {
	font-size: 1em;
	width: 300px;
	display: block;
}

form.registration fieldset .inputGroup input.error, form.registration fieldset .inputGroup select.error {
	background-color: #ee0a00;
}

form.registration fieldset .inputGroup select.error option {
	background-color:#ffffff;
}

/*generic error for entire form */
form.registration p.error {
	color: #ee0a00;
	padding: 10px 0px 10px 0px;
}

form.registration fieldset p.error {
	color: #ee0a00;
	width: 450px;
	float: left;
	margin-top: 2em;
}

form.registration fieldset #btnLogin {
	margin-top: 2.2em;
}

/* confirmation page styles
------------------------------------------------ */

.confirmation {
	padding-bottom: 100px;
}

.confirmation p {
	margin: 30px 0;
}

.confirmation h2 {
	width: 750px;
	height: 142px;
	overflow: visible;
	font-size: 2em;
	padding: 30px 0 0 180px;

}

.confirmation h2.janus {
	background: url("/Media/Images/Originals/logo_janus.jpg") no-repeat 0 0;
	color: #1a783c;
}

.confirmation h2.lucian {
	background: url("/Media/Images/Originals/logo_lucian.jpg") no-repeat 0 0;
	color: #e62933;
}

.confirmation h2.ekaterina {
	background: url("/Media/Images/Originals/logo_ekaterina.jpg") no-repeat 0 0;
	color: #ff9933;
}

.confirmation h2.tomas {
	background: url("/Media/Images/Originals/logo_tomas.jpg") no-repeat 0 0;
	color: #25b6f6;
}

.confirmation ul {
	list-style: disc;
	padding-left: 20px;
}

/* registration page styles
------------------------------------------------ */
form.quiz fieldset p.jsError {
	position: absolute;
	top: 200px;
	left: 100px;
	width: 514px;
	display: block;
}
form.quiz fieldset {
	position:relative;
	width:714px;
	height:456px;
	margin: auto;
	background: url("/Media/Images/Originals/bg_reg_question.gif") no-repeat 0 0;
}
form.quiz.answered fieldset {
	background: url("/Media/Images/Originals/bg_reg_answer.gif") no-repeat 0 0;
}
form.quiz .question {
	position:absolute;
	top:140px;
	left:100px;
	width:514px;
	text-align:center;
}
form.quiz .question h3 {
	font-size:1.5em;
	color:#00c1dc;
	padding-bottom:10px;
}
form.quiz .answer {
	position:absolute;
	top:0;
	left:100px;
	width:514px;
	text-align:center;
}
form.quiz .answer h3 img {
	margin:0 auto;
}
form.quiz .answer h4 {
	font-size:1.2em;
}
form.quiz .answer p {
	width:auto;
}
form.quiz fieldset label {
	color:#fff;
	width:auto;
	float:none;
	display:block;
}
form.quiz fieldset p {
	width: auto;
	margin-top: 10px;
}
form.quiz fieldset label input {
	margin-left: 0;
}
form.quiz fieldset #nextButton {
	position:absolute;
	top:382px;
	left:245px;
	z-index:5;
}
form.quiz fieldset #submitButton {
	position:absolute;
	top:380px;
	left:193px;
	z-index:5;
}
form.quiz fieldset #emailButton {
	position:absolute;
	top:382px;
	left:290px;
	z-index:5;
}

/* hidden divs for js
------------------------------------------------ */

#checkUser, #usernameFeedback, #bookCode, #bookCodeHelp {
	display: none;
	cursor: pointer;
}

#usernameFeedback span {
	color: red;
}
form.quiz #question1, form.quiz fieldset #nextButton {
	display: none;
}