/* Reset and tool classes */
* {font-family: arial, verdana, sans-serif; border: none; outline: none; text-decoration: none; list-style: none; color: #191919; padding: 0; margin: 0;}
body {background: #020202 url(../images/bg_main.jpg) repeat 0 0; width: 100%; font-size: 0.625em;}
#container {margin: 0 auto;}

#area1 {width: 200px; float: left; display: inline; margin: 75px 0 0 78px;}

	#area1 li {display: block; position: relative; text-indent: -9999px; opacity: 0.5; background: transparent url(../images/bg_input_inactive.png) no-repeat 0 0; width: 200px; height: 90px; margin: 0 0 0 2px;}
	
	#area1 li#code1 {background-image: url(../images/bg_input_code1.png);}
	#area1 li#code2 {background-image: url(../images/bg_input_code2.png);}
	#area1 li#code3 {background-image: url(../images/bg_input_code3.png);}
	#area1 li#code4 {background-image: url(../images/bg_input_code4.png);}
	
	#area1 .active {text-indent: 0; background-image: url(../images/bg_input_active.png); opacity: 1;}
			#area1 form {width: 200px; display: block; padding: 10px 0;}
				#area1 form fieldset {}
				#area1 form legend {display: none;}
				#area1 form label {font-size: 1.5em; color: #fff; display: none; margin-left: 30px;}
				#area1 form input {display: block; width: 55px; background: transparent; color: #fff; font-size: 1.5em; letter-spacing: 0.12em; margin-left: 75px;}
				#area1 form #code_submit, #area1 #user_info #user_info_submit {display: block; float: right; text-indent: -9999px; cursor: pointer; background: transparent url(../images/code_submit.png) no-repeat 0 0; width: 64px; height: 14px; margin: 20px 0 0 0;}
			
			#area1 .correct, #area1 .incorrect {background: transparent url(../images/correct_code.png) no-repeat 0 0; bottom: 10px; right: 0; position: absolute; display: block; z-index: 9999; text-indent: -9999px; width: 98px; height: 11px; text-transform: uppercase; font-size: 1.2em; color: #fcd009;}
			#area1 .incorrect {background-image: url(../images/incorrect_code.png); width: 114px; color: #ec343a;}
			
			#area1 #user_info {width: 264px;}
				#area1 #user_info fieldset {display: block; width: 264px; height: 24px; background: #ffd209; margin-bottom: 12px;}
					#area1 #user_info fieldset label {display: inline; float: left; height: 16px; text-indent: -9999px; margin: 2px;}
					#area1 #user_info fieldset #gamertag_label {width: 125px; background: #ffd209 url(../images/label_gamertag.gif) no-repeat 0 0;}
					#area1 #user_info fieldset #email_label {width: 77px; background: #ffd209 url(../images/label_email.gif) no-repeat 0 0;}
					#area1 #user_info fieldset input {width: 132px; font-size: 1.3em; letter-spacing: 0.1em; color: #000; margin-top: 4px;}
					#area1 #user_info fieldset #email_input {width: 180px;}
					#area1 #gamertag_input {color: #000; width: 65px; margin-top: 10px; margin-left: 80px; margin: 0;}
				#area1 #user_info #user_info_submit {float: right; background-image: url(../images/gamertag_submit.png); margin: 0;}
		
			#area1 #confirmation {display: block; width: 186px; height: 36px; display: block; text-indent: -9999px; background: transparent url(../images/confirmation.png) no-repeat 0 0;}
		
		/* Error messages */
		#area1 .error {height: 35px; margin-top: -35px;}	
			#area1 .error li {font-size: 1.2em; color: #f00; text-indent: 0; opacity: 0.9; background: transparent; width: 400px; height: auto;}
			
/* Terms and Conditions */
.terms #area1 {width: 600px;}
	.terms #area1 h1 {font-weight: normal; color: #fff; font-size: 1.8em;}
	.terms #area1 h2 {font-weight: normal; color: #fff; font-size: 1.6em;}
	.terms #area1 p {opacity: 0.95; font-size: 1.2em; color: #fff; margin-bottom: 10px;}
	.terms #area1 a {color: #fff; text-decoration: underline;}
	.terms #area1 ul {font-size: 1em;}
		.terms #area1 li {opacity: 0.95; width: 400px; height: auto; font-size: 1.2em; color: #fff; text-indent: 0; background: transparent url(../images/terms_bullet.png) no-repeat 0 5px; padding-left: 10px; margin: 0 0 10px 0;}


#area2 {width: 300px; position: absolute; bottom: 100px; right: 80px;}
	#area2 li {display: block; width: 300px; float: left; opacity: 0.8; line-height: 1.4em; text-transform: uppercase; font-size: 1em; color: #fff; border-bottom: 1px dashed #62656b; padding-bottom: 10px; margin-bottom: 10px;}
		#area2 span {font-size: 1.2em; width: 300px; display: block; color: #fff;}
#area2 a {float: right;}
	
#footer {position: absolute; bottom: 40px; clear: both; right: 80px; float: right;}
	#footer li {display: block; float: left; margin-left: 25px;}	
		#footer li a {height: 15px; display: block; text-indent: -9999px;}
		#footer #footer_twitter a {width: 181px; background: transparent url(../images/code_conviction.png) no-repeat 0 0;}
		#footer #footer_privacy a {width: 158px; background: transparent url(../images/privacy_policy.png) no-repeat 0 0;}
		#footer #footer_terms a {width: 219px; background: transparent url(../images/terms.png) no-repeat 0 0;}