@charset "utf-8";
/* Site Project: E-games Registration
Description: E-games Registration Page
Version: 1.0 Author: Web Team and Dev Team
Designer: Diwa G. Fernandez
Tags: dark and cool color, fixed width, customized, mmorpg.
Based on 960 Grid System & Blue print 
Licensed under GPL and MIT. */ 

/* reset, DO NOT EDIT */ 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
table, td, th { vertical-align:middle; }
blockquote:before, blockquote:after, q:before, q:after { content:' '; }
blockquote, q { quotes:"" ""; }
a img { border:none; }
button { cursor: pointer; }
/* typography.css */ 
body {
	color:#fff;
	background:#000 url(../images/bg_main.jpg) top center repeat-x;
	font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	color:#F5f5f5;
}
h1 {
	font-size:3em;
	line-height:1;
	margin-bottom:0.5em;
}
h2 {
	font-size:2em;
	margin-bottom:0.75em;
}
h3 {
	font-size:1.5em;
	line-height:1;
	margin-bottom:1em;
}
h4 {
	font-size:1.2em;
	line-height:1.25;
	margin-bottom:1.25em;
	height:1.25em;
}
h5 {
	font-size:1em;
	font-weight:bold;
	margin-bottom:1.5em;
}
h6 {
	font-size:1em;
	font-weight:bold;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; }
hr {
	border: 0;
	background: url(../images/img-hr.png) 50% 50% no-repeat;
}
p { margin:0 0 1.5em; }
p img.left {
	float:left;
	margin:1.5em 1.5em 1.5em 0;
	padding:0;
}
p img.right {
	float:right;
	margin:1.5em 0 1.5em 1.5em;
}
a:focus, a:hover {
	color:#00bff3;
	text-decoration: underline;
}
a {
	color:#ff0808;
	text-decoration:none;
}
blockquote {
	margin:1.3em;
	clear: both;
}
blockquote blockquote {
	border: 1px solid #3a2a1b;
	padding: 5px;
}
strong { font-weight:bold; }
em, dfn { font-style:italic; }
dfn { font-weight:bold; }
sup, sub { line-height:0; }
abbr, acronym {
	border-bottom:1px dotted #C60;
	cursor: help;
}
address {
	margin:0 0 1.5em;
	font-style:italic;
}
del { color:#C60; }
pre, code {
	margin:1.5em 0;
	white-space:pre;
}
pre, code, tt {
	font:1em 'andale mono', 'lucida console', monospace;
	line-height:1.5;
}
li ul, li ol { margin:0 1.5em; }
ul, ol { margin:0 1.5em 1.5em 1.5em; }
ul { list-style-type:disc; }
ol { list-style-type:decimal; }
dl { margin:0 0 1.5em 0; }
dl dt { font-weight:bold; }
dd { margin-left:1.5em; }
table {
	margin-bottom:1.4em;
	width:100%;
}
th {
	font-weight:bold;
	background:#C3D9FF;
}
th, td {
	padding:4px 10px 4px 5px;
	text-align: inherit;
}
tr.even td {
	background:#3c3a3a;
	text-align: inherit;
}
tr.odd td {
	background:#343333;
	text-align: inherit;
}
tfoot { font-style:italic; }
caption { background:#eee; }
.small {
	font-size:.8em;
	margin-bottom:1.875em;
	line-height:1.875em;
}
.large {
	font-size:1.2em;
	line-height:2.5em;
	margin-bottom:1.25em;
}
.hide { display:none; }
.quiet { color:#666; }
.loud { color:#000; }
.highlight { color:#ff0; }
.added {
	background:#060;
	color:#fff;
}
.removed {
	background:#900;
	color:#fff;
}
.first {
	margin-left:0;
	padding-left:0;
}
.alignleft {
	float: left;
	text-align: left;
}
alignright {
	float: right;
	text-align: right;
}
.aligncenter {
	margin: 0 auto;
	display: block;
	clear: both;
	width: auto;
	text-align: center;
}
.last {
	margin-right:0;
	padding-right:0;
}
.top {
	margin-top:0;
	padding-top:0;
}
.bottom {
	margin-bottom:0;
	padding-bottom:0;
}
.prev {
	float: left;
	text-align: center;
	width: 45px;
	clear: left;
}
.prev a {
	background:url(../images/btn_prev.gif) top left no-repeat;
	padding-top: 14px;
	font-size: 1px;
	color:#49453e;
	display: block;
	text-decoration: none;
}
.next {
	float: right;
	text-align: center;
	width: 45px;
	clear: right;
}
.next a {
	background:url(../images/btn_next.gif) top left no-repeat;
	padding-top: 14px;
	font-size: 1px;
	color:#49453e;
	display: block;
	text-decoration: none;
}
#footer p.cite a, #footer p.cite {
	color: #fff;
	margin: 0;
	font-weight: bold;
}
.normal {
	text-align: left!important;
	font-weight: normal !important;
	font-size: 12px!important;
	font-style: normal!important;
}
/* Containers
----------------------------------------------------------------------------------------------------*/
#rap {
	background: url(../images/bg_header2.jpg) 50% 0% no-repeat;
	display: block;
	position: relative;
	min-height: 350px;
}
#rap2 {
	background: url(../images/bg_header2.jpg) 50% 0% no-repeat;
	display: block;
	position: relative;
	min-height: 350px;
}
#rap-rom {
	background: url(../images/bg_header-rom.jpg) 50% 0% no-repeat;
	display: block;
	position: relative;
	min-height: 350px;
}

.container {
	width: 960px;
	margin: 0 auto;
}
.header { height: 122px; }
#rap-rom .header { height: 233px; }
.header h1.logo {
	background: url(../images/logo-egames.png) 0% 50% no-repeat;
	width: 240px;
	text-indent: -1000px;
	padding: 25px;
	line-height: 0.05em;
}
.header h1.account-title, .header h1.page-title { float: left; }
.header h1.account-title {
	color:#f5f5f5;
	font-size:16px;
	font-family: Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	margin: 1px 0;
	line-height: 1.0em;
	text-transform:uppercase;
}
.header h1.page-title {
	color:#FFFFFF;
	font-family: "Century Gothic", Helvetica, Verdana, Geneva, sans-serif;
	font-size:28px;
	line-height:24px;
	text-transform:uppercase;
}
.header h1.step-title {
	float: right;
	text-align: right;
	font-size: 14px;
}
.progress {
	margin: 0 auto;
	background: url(../images/progress-bar-01.png) 50% 50% no-repeat;
	margin-bottom: 10px;
}
#rap-rom .progress {
	margin: 0 auto;
	background: url(../images/progress-bar-rom.jpg) 50% 50% no-repeat;
	margin-bottom: 10px;
}

.bar-steps {
	padding: 18px;
	color:white;
	font-size:10px;
	position:relative;
}
.clr1 {
	color:#4183AC !important;
	top:-14px;
}
.steps-1, .steps-2, .steps-3, .steps-4 {
	float: right;
	text-align: center;
	padding: 5px 20px;
	text-transform:uppercase;
	margin-top: -10px;
	background: url(../images/progress-steps-off.png) 0% 50% no-repeat;
}
.youarehere, .steps-1.youarehere, .steps-2.youarehere, .steps-3.youarehere, .steps-4.youarehere {
	background: url(../images/progress-steps-on.png) 0% 50% no-repeat;
}

.content-m { background: url(../images/bg_content-mid.png) 50% 50% repeat-y; }
.content-tp { background: url(../images/bg_content-top2.png) 50% 0% no-repeat; padding: 0px; height: 13px; margin: 0; }
.content-t {
	padding: 20px;
	margin-top: 0px;
	font-size: 13px;
}

.content-m { background: url(../images/bg_content-mid.png) 50% 50% repeat-y; }


.content-b {
	background: url(../images/bg_content-bottom.png) bottom center no-repeat;
	margin-bottom: 13px;
	padding-bottom: 13px;
}
.forms { border-style:solid none !important; }
.forms blockquote label { width:25%; }
.forms blockquote {
	display:block;
	position: relative;
	margin:1.5em 40px;
	clear: both;
}
.forms blockquote label {
	float:left;
	font-size:12px !important;
	line-height:22px;
	padding: 3px 10px 0px 0px;
	text-align:right;
}
.forms input.text{
	background-color: #cdcdcd;
	background-image: url(../images/input.png);
	background-repeat: no-repeat!important;
	border:medium none !important;
	font-size:14px;
	margin-bottom: 20px;
	padding:5px !important;
	width:350px !important;
	float: left;
}
input.text{
	background-color: #cdcdcd;
	background-image: url(../images/input.png);
	background-repeat: no-repeat!important;
	border:medium none !important;
	font-size:14px;
	margin-bottom: 20px;
	padding:5px !important;
	width:350px !important;
}
.forms select.text {
	background: #cdcdcd url(../images/input.png) 0 0 no-repeat!important;
	border:medium none !important;
	font-size:14px;
	margin-bottom: 20px;
	padding:5px !important;
	width:360px !important;
	float: left;
}
.forms select.month, .forms select.day, .forms select.year  {
	background: #cdcdcd url(../images/input.png) 0 0 no-repeat!important;
	border:medium none !important;
	font-size:14px;
	margin-bottom: 20px;
	padding:5px !important;
	float: left;
}
.forms select.month, .forms select.day {
	margin-right: 10px;
}
.forms select.month {
	width: 150px;
}
.forms select.day {
	width: 90px;
}
.forms select.year {
	width: 100px;
}
.forms input.available {
	background-position: 0 -35px;
}
.forms input.error {
	background-position: 0 -70px;
}
.forms input.checkbox {
	background: url(../images/input.png) no-repeat 0 0 scroll !important;
	border: none;
	float: left;
	margin: 8px;
}
input:focus, input:hover {
	background:#F5F5F5 !important;
	border:1px solid #3081D1;
}
.btn-big-blue {
	background-image: url(../images/ui-button-bg.png);
	padding: 11px 10px;
	background-color: transparent;
	width: 200px;
	border: none;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	background-repeat: no-repeat;
}
.btn-big-enabled { background-position: 0% 0%; }
.btn-big-disabled { background-position: 0px -41px; }

.note #check-user-availability, .note #check-useremail-availability {
	text-indent: -99999px;
	top: 0;
	left: 0;
	display: none;
}
.forms .note {
	display: block;
	position:relative;
	float: left;
}
.forms .note span.flag { background-image: url(../images/ui-icon-input-notes.png); }
.forms .note span.flag {
	background-position:left top;
	background-repeat:no-repeat;
	position: absolute;
	display:block;
	height:31px;
	margin:0;
	/*text-indent:-9999px;*/
top:0;
	width:42px;
}
.forms .note span.required {
	background-position: 0px -1px;
	width: 95px;
}
.forms .note span.check {
	background-position: 0px -43px;
	width: 95px;
}
.forms .note span.error {
	background-position: 0px -90px;
	width: 95px;
}
.forms .note span.loading {
	background:url(../images/loading.gif) 0 0 scroll no-repeat;
	width: 95px;
}
.forms label {
	display:block;
	float:left;
	font-weight:bold !important;
	line-height:2em;
	padding-right:10px;
	text-align:right;
	width:18%;
}
label {
	display:block;
	font-weight:bold !important;
}
#footer {
	text-align: center;
	font-size: 11px;
	margin: 10px auto;
}

ul.services {
	list-style: none;
	list-style-type: none;
	text-align: right;
	width: 320px;
	margin: 0;
	margin-left: -25px;
	padding: 0;
	float: left;
}
li.available {
	background: url(../images/ui-icon-input-notes.png) 100% -43px no-repeat ;
	padding: 9px;
	padding-right: 100px;
}
li.error {
	background: url(../images/ui-icon-input-notes.png) 100% -90px no-repeat ;
	padding: 9px;
	padding-right: 100px;
}
.bubble {
	float: left;
	background: url(../images/img-bubble.png) 0 0 no-repeat;
	padding: 10px 35px;
	margin-left: -45px;
	color: #000;
	width: 360px;
	display: block;
}
.note .bubble {
	float: left;
	background: url(../images/img-bubble2.png) 0 0 no-repeat;
	padding: 10px 25px;
	margin-left: -45px;
	color: #000;
	width: 240px;
	display: block;
	position: absolute;
	top: 0;
	right: -300px;
}
.note .bubble p { margin-bottom: 10px; text-align: justify; }
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha { margin-left: 0; }
.omega { margin-right: 0; }
/* Grid >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container .grid_1 { width:50px; }
.container .grid_2 { width:110px; }
.container .grid_3 { width:170px; }
.container .grid_4 { width:230px; }
.container .grid_5 { width:290px; }
.container .grid_6 { width:350px; }
.container .grid_7 { width:410px; }
.container .grid_8 { width:470px; }
.container .grid_9 { width:530px; }
.container .grid_10 { width:590px; }
.container .grid_11 { width:650px; }
.container .grid_12 { width:710px; }
.container .grid_13 { width:770px; }
.container .grid_14 { width:830px; }
.container .grid_15 { width:890px; }
.container .grid_16 { width:950px; }
/* Prefix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container .prefix_1 { padding-left:60px; }
.container .prefix_2 { padding-left:120px; }
.container .prefix_3 { padding-left:180px; }
.container .prefix_4 { padding-left:240px; }
.container .prefix_5 { padding-left:300px; }
.container .prefix_6 { padding-left:360px; }
.container .prefix_7 { padding-left:420px; }
.container .prefix_8 { padding-left:480px; }
.container .prefix_9 { padding-left:540px; }
.container .prefix_10 { padding-left:600px; }
.container .prefix_11 { padding-left:660px; }
.container .prefix_12 { padding-left:720px; }
.container .prefix_13 { padding-left:780px; }
.container .prefix_14 { padding-left:840px; }
.container .prefix_15 { padding-left:900px; }
/* Suffix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container .suffix_1 { padding-right:60px; }
.container .suffix_2 { padding-right:120px; }
.container .suffix_3 { padding-right:180px; }
.container .suffix_4 { padding-right:240px; }
.container .suffix_5 { padding-right:300px; }
.container .suffix_6 { padding-right:360px; }
.container .suffix_7 { padding-right:420px; }
.container .suffix_8 { padding-right:480px; }
.container .suffix_9 { padding-right:540px; }
.container .suffix_10 { padding-right:600px; }
.container .suffix_11 { padding-right:660px; }
.container .suffix_12 { padding-right:720px; }
.container .suffix_13 { padding-right:780px; }
.container .suffix_14 { padding-right:840px; }
.container .suffix_15 { padding-right:900px; }
/* Push Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container .push_1 { left:60px; }
.container .push_2 { left:120px; }
.container .push_3 { left:180px; }
.container .push_4 { left:240px; }
.container .push_5 { left:300px; }
.container .push_6 { left:360px; }
.container .push_7 { left:420px; }
.container .push_8 { left:480px; }
.container .push_9 { left:540px; }
.container .push_10 { left:600px; }
.container .push_11 { left:660px; }
.container .push_12 { left:720px; }
.container .push_13 { left:780px; }
.container .push_14 { left:840px; }
.container .push_15 { left:900px; }
/* Pull Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container .pull_1 { left:-60px; }
.container .pull_2 { left:-120px; }
.container .pull_3 { left:-180px; }
.container .pull_4 { left:-240px; }
.container .pull_5 { left:-300px; }
.container .pull_6 { left:-360px; }
.container .pull_7 { left:-420px; }
.container .pull_8 { left:-480px; }
.container .pull_9 { left:-540px; }
.container .pull_10 { left:-600px; }
.container .pull_11 { left:-660px; }
.container .pull_12 { left:-720px; }
.container .pull_13 { left:-780px; }
.container .pull_14 { left:-840px; }
.container .pull_15 { left:-900px; }
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }