/*****************************************
   global.css for for account management pages @ EA.com
   code by Ryan (ryan.betts(AT)blastradius.com)
*****************************************/

@import url(https://ll.assets.ea.com/_css/footer.css); 

/*---------------------------------------------------------*/
/* -- BASE STYLES --*/
/*---------------------------------------------------------*/

html, body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #333;
 margin:  0px; padding: 0px; background: #b2b4b5 url(../img/bg.jpg) no-repeat top center;}

h1 { font-size: 34px; color: #000;}
h2 { font-size: 14px; color: #294c72;}
h3, h4 
{
	display: block;
	width: 100%;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 0 3px 0;
	margin: 0 0 13px 0;
	background-color: #4e79aa;
	color: #fff;
	text-align: center;
}
h4 {background-color: #999;}

dl { width: 300px; }
dt, dt { float: left; margin: 0; padding: 0; }
dt { height:14px; width: 126px; font-weight: bold; }
dd { height:14px; }

.aligned_list { list-style: none; padding: 0; margin: 0; }

.section_full, .section_half { background-color: #f2f2f2; padding: 15px; margin-bottom: 15px;}
.section_half { float: left; width: 307px; }
.right_column { margin-left: 15px; }
.hidden, p#tos_hidden_div { display: none; }
.bordered { border-top: 1px solid #afafaf; border-bottom: 1px solid #afafaf; }
.hr { border-bottom: 1px solid #c0c0c0; }
.notification { background-color: #059505; color: #FFF; padding: 13px; margin-top: 13px;}
.notification a { color: #FFF; }
div#loadContainer {text-align:center; }

/* clear floating elements without extra markup */
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}

/*---------------------------------------------------------*/
/* -- LAYOUT --*/
/*---------------------------------------------------------*/

html, body 		
{ margin:  0px; padding: 0px; background: #b2b4b5 url(../img/bg.jpg) no-repeat top center;}

#header-notice-bar { display: none; }

#masthead { height: 150px; background-image: url(../img/header.jpg); border-bottom: 6px solid #586f8d;}

#content, #title { width: 689px; margin: 0 auto 0; }
#title { position: relative; border-bottom: 1px solid #c0c0c0; margin: 25px auto; }
#title h2, #title h1 { display: inline-block; margin: 0 auto;}
/*#title h1 { float: left; width: 500px; }*/
#title h2 { 
	float: right; 
	font-size: 16px; 
	color: #000; 
	text-align: right; 
	width: 200px; 
	position: absolute;
	top: 18px;
	left: 488px;
}
#current_step { color: #dc4720; font-style: normal;}

#title-promo { 
    display: block; 
    position: relative; 
    width: 689px; 
    margin: 10px auto;
}
#title-promo h1 {display: inline-block; margin: 0 auto;}
#title-promo h2 { 
    float: left; 
    font-size: 18px !important; 
    color: #4882D9; 
    width: 478px; 
    position: relative;
    top: -25px;
    *top: -5px;
    left: 20px;
}
#title-promo p { 
    float: left; 
    font-size: 12px; 
    color: #333333; 
    width: 478px; 
    position: relative;
    top: -50px;
    *top: 0px;
    left: 20px;
}
#title-promo img {
    float: left; 
    position: relative;
    top: -5px;
    width: 182px;
    left: 0px;
    padding-bottom: 30px;
    *padding-bottom: 50px;
}

#header-notice-bar
{
    display: block;
    background:#404040;
    padding:15px;
}
#header-notice
{
    width:890px;
    margin:0 auto;
    color:#fff;
    font-size:13px;
    line-height:17px;
    text-shadow:#333 1px 1px 0;
    /*background:url(../img/ea/notice-icons.png) no-repeat 0 4px;*/
    padding-left:40px;
}
#header-notice strong
{
    color:#ff9900;
}
#header-notice a
{
    color: #fff !important;
    /*background:url(../img/ea/notice-icons.png) no-repeat 142px -29px;*/
    padding-right:20px;
}

#page {
   background: #e7e7e7;
	margin: 0 auto 0;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 829px;
	padding-bottom: 70px;
	border-bottom: 13px solid #586f8d;
}

/* side box - info panels */

.side_box 
{
	position: relative;
	top: -3px;
	width: 195px;
	margin: 0 0 15px 57px;
	float: left;
	background: #dbdbdb;
}

.side_box h2 
{
	width: 175px;
	text-align: center;
	padding: 10px;
	margin-top: 0;
	background: #000;
	color: #FFF;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 1px;
}

.side_box p { padding: 0 12px 0 12px; *padding: 0 12px 15px 12px;}
.side_box ul { margin: 0; padding: 0 12px 12px 12px; list-style:none;}
.side_box li { display: block; padding: 2px 0 12px 24px; background: url(../img/bullet_star.gif) no-repeat 0 0; height: auto;}

/*---------------------------------*/
/* modalOverlay */

.modal_overlay
{
	display: block;
	position:fixed;
	height: 100%;
	left:0pt;
	top:0pt;
	width:100%;
	z-index:1000;
}

.modal_overlay .background
{
   position: fixed;
   _position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   _height: 1700px;
   background:transparent url(../img/bg_overlay.png) repeat scroll 0%;
   _background: #000;
   _filter: alpha(opacity=60);
   z-index:1000;
}
.modal_overlay .content_container { position: fixed; _position: absolute; top: 50%; left: 50%; z-index:1001; background-color: #e7e7e7; padding: 15px; border: 8px solid #000; }
.modal_overlay hr { border: 2px solid #E7E7E7; }

#warning .content_container { margin: -75px 0 0 -150px; }
#warning .content { width: 300px; padding: 3px 15px 15px 15px; background: #FFF; text-align: center; color: #294c72;}
#warning .content p { padding: 15px 0;}

#tos .content_container { margin: -220px 0pt 0pt -345px;}
#tos .content {display: block; padding-top: 3px; width: 643px; height: 372px; *height: 385px; background-color: #FFF; overflow: auto;}
#tos button { float:right; }
#tos hr { margin-top: 25px; left: 12px; width: 618px; }
#tos .content p {padding: 0px 5px;}

#tos-iframe { width: 600px; height: 500px; z-index: -1; filter: mask(); display: block; position: absolute; margin-top: -50px;}

#tosContainer .content p { color: #000000; background-color: #FFFFFF; outline-color: #7f9db9; outline-style: solid; outline-width: 1px; padding: 5px; height: 80px; overflow-x: auto; overflow-y: auto; width: auto; }
#preview_TOS { float: right; }

/*---------------------------------*/
/* avatar_selector */

#avatar_selector .content_container { margin:-220px 0pt 0pt -345px;}
#avatar_selector .content { display: block; width: 643px; height: 372px; *height: 385px; background-color: #FFF;}
#avatar_selector .content ul { margin: 6px 0 0 2px; padding-left: 8px; list-style: none; height: 292px; width: 620px; overflow-y: scroll;}
#avatar_selector .content h3
{
	display: block;
	width: 100%;
	font-size: 12px;
	font-weight: normal;
	padding: 3px 0 3px 0;
	margin: 0;
	background-color: #4e79aa;
	color: #fff;
	text-align: center;
}

#avatar_selector .content a 
{ 
	display: block; 
	border: 0; 
	text-decoration: none; 
	height: 64px; 
	width: 64px;
	padding: 9px; 
	height: auto;
}
#avatar_selector hr { margin-top: 13px; left: 12px; width: 618px; }
#avatar_selector .content a:hover, #avatar_selector a.selected { background: url(../img/avatar_highlight-sm.gif) no-repeat; }
#avatar_selector li 
{ 
	display: inline-block; display: -moz-inline-box; 
	float: left; 
	margin: 0 0 -7px -7px;
	display: inline; 
}
#avatar_selector img { border: 0; }
#avatar_selector button { float:right; }
#use_as_avatar { margin-right: 13px;}

/*---------------------------------------------------------*/
/* -- FORMS -- */
/*---------------------------------------------------------*/

form { padding: 0; margin: 0; }
form ol, form ul { list-style: none; padding: 0; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; margin-top: 6px;}

form em.required { color: #dc4720; position: relative; top:-7px;}
form em.rule { font-size: 9px; font-style: normal; position: relative; top:-7px;}

form div.error_message, form div.error_message_static { background-color: #d0030d; color: #FFF; padding: 5px; margin-top: 6px;}

label, legend.label { 
	font-weight: bold; 
	color: #294c72; 
	display: -moz-inline-box; display: inline-block; 
	padding: 0;
	margin: 0;
	width: 140px;
}
label.checkbox, form textarea { font-weight: normal; color: #333333; font-size: 11px; display: inline; width: auto;}
label.checkbox { position: relative; top: -2px;}
form textarea { font-family: Arial, Verdana, Helvetica, sans-serif; line-height: 15px;}

form hr { border: 3px solid #323024; margin-bottom: 18px; }

form ol li { padding: 0 0 6px 0; }
form ul li.spacer, form ol li.spacer { margin-bottom: 22px; }
form div.spacer { margin-bottom: 80px; }

/* buttons */

button {
	border:0;
	cursor:pointer;
	padding:0 4px 0 6px;
	text-align:center;
	float: left;
	width: auto;
	background:url(../img/button_1_edge.gif) right no-repeat;
	font-size: 11px;
	width:auto;
	overflow:visible;
}
button span {
	position:relative;
	display:block;
	white-space:nowrap;
	padding:0 0 1px 6px;
	height:20px;
	line-height:20px;
	background:url(../img/button_1.gif) left no-repeat;
	color:#fff;
	font-weight: bold;
}

button span em {
	font-style: normal;
}

button.button2 {
	background:url(../img/button_2_edge.gif) right no-repeat;
}
button.button2 span {
	background:url(../img/button_2.gif) left no-repeat;
}

#submit, #btnSubmit, #cancel { margin-left: 0; }
button#submit span em, button#btnSubmit span em, button#cancel span em { display: block; text-align: center; }
/* IE FIX */ button#submit span, button#btnSubmit span, button#cancel span { _display: block; _top: 0px; }
button#submit, button#btnSubmit {float: right;  }

/* fieldset */

fieldset.grouped { background-color: #f1f1f1; height: auto;}
fieldset.grouped p { padding: 0 13px 13px 13px; font-size: 11px; margin:0; }
fieldset.grouped label { padding: 0 0 0 13px; }
/*fieldset.grouped h3 
{
	display: block;
	width: 100%;
	font-size: 12px;
	font-weight: normal;
	padding: 3px 0 3px 0;
	margin: 0 0 13px 0;
	background-color: #4e79aa;
	color: #fff;
	text-align: center;
}*/

fieldset.grouped .error_message, fieldset.grouped .error_message_static { margin: 6px 13px 0 13px;}

/*---------------------------------------------------------*/
/* Footer */
/*---------------------------------------------------------*/

#footer { width: 829px; position: relative; top: 40px; }

#footerbg {
   position: relative;
   background: none;
   margin: 0 auto; width:829px; height:53px; top: 0px; 
}

#footerbox {
   position:relative;
   padding: 0; margin: 0px auto; width: 829px; height: 43px; line-height: 14px;
   font-size: 0.8em; color: #999;
}

#footer ul { position:absolute; margin: 0; padding: 0; width: 400px; left: 165px; list-style: none; }
#footer li { float: left; margin: 0; padding: 0px 0px 0px 18px; width: 142px; border-right: 1px solid #8a8e88;}

#footer a { text-decoration: none; color:#fff; }
#footer a:hover { text-decoration: underline; }
#footer #copyright a:hover { text-decoration: none; }

#esrb { position: absolute; top: 0px; padding-right: 20px; border-right: 1px solid #8a8e88; background-repeat: no-repeat;}
#copyright { position: absolute; border: 0; padding: 0; margin: 0; width: 310px; right: 0px; text-align: right;  font-family: Arial; font-size: 11px;}
#copyright a {color: #fff;}
/*********************************************************************
   footer.css for EA.com
   code by Ernie Bin (ebin(AT)blastradius.com)
   global _footer css  - base styles imported by section footer.css
*********************************************************************/

/*****************
 global footer 
 classes
*****************/
#footerbg {
   height:43px;
	width:100%;
	position:relative;
}

#footer {
   font:9px Verdana, sans-serif ! important; 
	line-height:14px;
   margin:0px auto 10px auto;
   position: relative;
   display: block;
   clear: both;
   z-index: 50;
   text-align:center;
   top: 40px;
}
#footer a{
   font:9px Verdana, sans-serif; 
}

#esrb {
   width: 144px; 
   height: 44px;
   display: block;
   
   }

/****************
 link lists
****************/
.siteLinks, .siteLinks2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.siteLinks li, .siteLinks2 li {
    background: transparent url(https://ll.assets.ea.com/ea/account/img/bullet_rightcircle.gif) no-repeat scroll 0 0;
    padding: 4px 0 4px 22px;
}

.siteLinks a, .siteLinks2 a {
    color: #325280;
    text-decoration: none;
}

.errorInputBorder {border-color:#FF0000;}