/* OVERRIDES */
form .radio, form .check {margin:0px;}

/* LABEL AFTER CONTROL VISUACB AND IN MARKUP */
.item.label-after {
	width:auto;}
	.label-after .control {
		position:static;
		float:left;
		padding-right:5px;}
	.label-after label {
		text-align:left;
		float:left;}

/* CONTROL AS LABEL/TEXT */
form .control.txt {background:none !important;}


.item.select.g150 .control {
	margin-left:0px !important;}

/* added by Matt 6/29 - to fix defect #4415 non-JS not showing complete sentence in customselect */
.item.select .control .customselect.w200 {width:auto;}
.dynamic .item.select .control .customselect.w200 {width:200px;}


/* LABEL ON TOP */
.label-top{
	height:45px;
}
.label-top > label{
	/*left: 175px;*/
	text-align:left;
}
form .label-top .controls, form .label-top .controls {
	margin: -25px 0 0 175px;
}
form .label-top .control{
	left:175px;
	margin-top:25px;
}

form .label-top textarea{
	margin-top:-20px;
}

/* ERROR TEXT ABOVE THE CONTROL */

/* * /
form .item .error {margin-top:22px;}
/* */
/*form .item.error {margin-top:18px; margin-bottom:20px;} - removed by Matt */
.item.error label {/*top:6px; clear:left;*/ color:#505050;} /* clear:left; removed by Matt to keep labels beside radio buttons with errors */
.error {margin-bottom:5px;}
.error .message {float:left;}
div.error-text, .error .message { 
	position: relative;
	/*float: left; JCA - Removing to unfloat div.error-text, added to single rule above for .error .message*/
	padding-left:25px;
	margin-left:175px;
	margin-top:0;
	text-align:left;
	width:350px;
	margin-bottom:8px;
	background: url(images/error-icon.png) no-repeat left top;}
	/* for error messages inside table cells */
	td div.error-text, td .error .message { 
		float: none;
		padding-left:25px;
		margin-left:0;
		width:auto;}

	div.error-text {
		background: url(images/error-icon.png) no-repeat 10px;}
		
/* --- start: forms.css overrides specifically for error handling --- */
	form label {display:inline-block !important;}
	span.prefix {display:inline-block;}
	form .text input {display:inline-block; padding: 2px 5px 2px 0;}
	
	.dynamic form .select .control, form .text .control {
		display:inline-block;
		margin:-23px 0 0 175px;
		width:335px;
/*		position:relative; commented out by Allan - has no affect on the repo copy, but causes test3 to push all text fields down by a couple of pixels */
		
}
		.dynamic form td .select .control, form td .text .control {
			margin:0px;
			width:auto;}
	form .control {
		left:inherit;
		top:inherit;}
	form .text input {
		float:left;}
	form .instruction {
		float:left;
		position:static; /* used to remove position:absolute */ }
	
	/* fix for repeating horiz. input-left-mask.png 	*/
	.dynamic form .select .control, 
	form .text .control {
		background:url(images/input-left-mask-vert.png) no-repeat left top !important;}
	form .item .hasfocus { background-position:0 -300px !important; }
	form .item .disabled { background-position:0 -600px !important;}
	
	form .item .error, .dynamic form .select .error { background-position:0 -900px !important;}
	
	form .dollar .control {background:url(images/input-dollar-mask.png) top left no-repeat !important;}
	form .error .dollar .control {background-position:-150px top;}
	
	div.custombox-wrapper {position:absolute; left:5px;}
/* --- end: forms.css overrides specifically for error handling ----- */

		

#page.ac .g000.error .message {
	margin-left:0px;
	width:525px; /*default width(350px) + default margin-left(175px) = 525px*/ }

form#id_info .item.radio.error .controls .message {margin-left:0px;}


form .g200 span.error-text { left: 200px; }
.control.error.with-text {top:12px;}

/* ERROR MESSAGE BOX AT TOP OF PAGE */
.activity-message.error-text {
	width:86%;
	margin:20px 0 10px 22px;
	padding:10px 10px 10px 30px !important;
	border:1px solid #dddddd; border-radius:5px;
	color:#7e1818; position:relative;
	background: -moz-linear-gradient(90deg, #eee6dc 0%, #efe7dd 80%, #f6f3ee 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f3ee), color-stop(20%, #efe7dd), color-stop(100%, #eee6dc)); /* safari4+,chrome */
	background: -webkit-linear-gradient(90deg, #eee6dc 0%, #efe7dd 80%, #f6f3ee 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(90deg, #eee6dc 0%, #efe7dd 80%, #f6f3ee 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(90deg, #eee6dc 0%, #efe7dd 80%, #f6f3ee 100%); /* ie10+ */
	background: linear-gradient(0deg, #eee6dc 0%, #efe7dd 80%, #f6f3ee 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f3ee', endColorstr='#eee6dc',GradientType=0 ); /* ie6-9 */
	}
	.activity-message.error-text:before{
		position:absolute; 
		display:inline-block; 
		top:-10px; left:-12px; 
		background:url(images/message-bubble.png) no-repeat; 
		width:34px; 
		height:34px;
		color:transparent; content:'i';}
	.activity-message.error-text .bottom {
		width:0;
		height:0;
		position:absolute;
		bottom:0;
		margin-left:0;
		background:none}
	#article .activity-message.error-text p, #article .activity-message.error-text h3 {line-height:120%;}
	#article .activity-message.error-text ul {
		margin:0;
		padding:0 0 10px 0;
		list-style:none;}
		#article .activity-message.error-text ul li {
			margin:0;
			padding:0;}
		#article .activity-message.error-text a {color:#006899;}
	.activity-message.ext-message{width:62%; margin-right:0;float:left;}
.system-message.error-text{
	width:90%;
  	margin: 25px 20px 20px 10px;
   	padding: 20px 20px 20px 45px;
   	border-radius: 6px;
   	color: #7e1818;
 	background-color: #EEE6DC;
   	background-image:none;}
    .system-message.error-text .icon-close{
           float:left;         
           cursor:pointer;
           color: #fff;
           width:25px;
           height:25px;
           border-radius: 50%;
           background: red;
           font-size: 31px;
           display: inline-block;
           line-height: 0px;
           float: left;
           position: absolute;
           top: 30%; left:15px;}
       .system-message.error-text .icon-close:before {
           content: "×";
           top: 13px;
    		position: absolute;
    		left: 4px;}


/* FORM GUTTERS */
form .g000{ width: 0px; }
form .g000 .controls { margin:-25px 0 0 0px; }
form .g000 .control{ left: 0px;  margin-left:0; top: 23px;}

form .g025{ width: 25px; }
form .g025 .controls { margin:-25px 0 0 25px; }
form .g025 .control{ left: 25px;  margin-left:0; top: 23px;}

form .g050{ width: 50px; }
form .g050 .controls { margin:-25px 0 0 50px; }
form .g050 .control{ left: 50px;  margin-left:0; top: 23px;}

form .g075{ width: 75px; }
form .g075 .controls { margin:-25px 0 0 75px; }
form .g075 .control{ left: 75px;  margin-left:0; top: 23px;}

form .g100{ width: 100px; }
form .g100 .controls { margin:-25px 0 0 100px; }
form .g100 .control{ left: 100px;  margin-left:0; top: 23px;}

form .g125{ width: 125px; }
form .g125 .controls { margin:-25px 0 0 125px;}
form .g125 .control{ left: 125px;  margin-left:0; top: 23px;}

form .g150{ width: 150px; }
form .g150 .controls { margin:-25px 0 0 150px; }
form .g150 .control{ left: 150px;  margin-left:0; top: 23px;}

form .g175{ width: 175px; }
form .g175 .controls { margin:-25px 0 0 175px; }
form .g175 .control{ left: 175px;  margin-left:0; top: 23px;}

form .g200{ width: 200px; }
form .g200 .controls { margin:-25px 0 0 200px; }
form .g200 .control{ left: 200px; margin-left:0; top: 23px;}

form .g210{ width: 210px; }
form .g210 .controls { margin:-25px 0 0 210px; }
form .g210 .control{ left: 210px; margin-left:0; top: 23px;}

form .g225{ width: 225px; }
form .g225 .controls { margin:-25px 0 0 225px; }
form .g225 .control{ left: 225px;  margin-left:0; top: 23px;}

form .g250{ width: 250px; }
form .g250 .controls { margin:-25px 0 0 250px; }
form .g250 .control{ left: 250px;  margin-left:0; top: 23px;}

form .g275{ width: 275px; }
form .g275 .controls { margin:-25px 0 0 275px; }
form .g275 .control{ left: 275px;  margin-left:0; top: 23px;}

form .g300{ width: 300px; }
form .g300 .controls { margin:-25px 0 0 300px; }
form .g300 .control{ left: 300px;  margin-left:0; top: 23px;}

form .g325{ width: 325px; }
form .g325 .controls { margin:-25px 0 0 325px; }
form .g325 .control{ left: 325px;  margin-left:0; top: 23px;}

form .g350{ width: 350px; }
form .g350 .controls { margin:-25px 0 0 350px; }
form .g350 .control{ left: 350px;  margin-left:0; top: 23px;}

form .g375{ width: 375px; }
form .g375 .controls { margin:-25px 0 0 375px; }
form .g375 .control{ left: 375px;  margin-left:0; top: 23px;}

form .g400{ width: 400px; }
form .g400 .controls { margin:-25px 0 0 400px; }
form .g400 .control{ left: 400px;  margin-left:0; top: 23px;}

form .g425{ width: 425px; }
form .g425 .controls { margin:-25px 0 0 425px; }
form .g425 .control{ left: 425px;  margin-left:0; top: 23px;}

form .g450{ width: 450px; }
form .g450 .controls { margin:-25px 0 0 450px; }
form .g450 .control{ left: 450px;  margin-left:0; top: 23px;}

form .g475{ width: 475px; }
form .g475 .controls { margin:-25px 0 0 475px; }
form .g475 .control{ left: 475px;  margin-left:0; top: 23px;}

form .g500{ width: 500px; }
form .g500 .controls { margin:-25px 0 0 500px; }
form .g500 .control{ left: 500px;  margin-left:0; top: 23px;}

form .g525{ width: 525px; }
form .g525 .controls { margin:-25px 0 0 525px; }
form .g525 .control{ left: 525px;  margin-left:0; top: 23px;}

form .g550{ width: 550px; }
form .g550 .controls { margin:-25px 0 0 550px; }
form .g550 .control{ left: 550px;  margin-left:0; top: 23px;}

form .g575{ width: 575px; }
form .g575 .controls { margin:-25px 0 0 575px; }
form .g575 .control{ left: 575px;  margin-left:0; top: 23px;}

form .g600{ width: 600px; }
form .g600 .controls { margin:-25px 0 0 600px; }
form .g600 .control{ left: 600px;  margin-left:0; top: 23px;}


/* PADDING-LEFT VARIABLES */
.p005 {padding-left:5px;}   .p010 {padding-left:10px;}  .p015 {padding-left:15px;}  .p020 {padding-left:20px;}  .p025 {padding-left:25px;}  .p030 {padding-left:30px;}  .p035 {padding-left:35px;}  .p040 {padding-left:40px;}  .p045 {padding-left:45px;}  .p050 {padding-left:50px;}  .p055 {padding-left:55px;}  .p060 {padding-left:60px;}  .p065 {padding-left:65px;} .p070 {padding-left:70px;} .p075 {padding-left:75px;} .p080 {padding-left:80px;} .p085 {padding-left:85px;} .p090 {padding-left:90px;} .p095 {padding-left:95px;} .p100 {padding-left:100px;} 
.p110 {padding-left:110px;} .p120 {padding-left:120px;} .p125 {padding-left:125px;} .p130 {padding-left:130px;} .p140 {padding-left:140px;} .p145 {padding-left:145px;} .p150 {padding-left:150px;} .p160 {padding-left:160px;} .p170 {padding-left:170px;} .p175 {padding-left:175px;} .p180 {padding-left:180px;} .p190 {padding-left:190px;} .p200 {padding-left:200px;} 
.p210 {padding-left:210px;} .p220 {padding-left:220px;} .p225 {padding-left:225px;} .p230 {padding-left:230px;} .p240 {padding-left:240px;} .p250 {padding-left:250px;} .p260 {padding-left:260px;} .p270 {padding-left:270px;} .p275 {padding-left:275px;} .p280 {padding-left:280px;} .p290 {padding-left:290px;} .p300 {padding-left:300px;} 
.p310 {padding-left:310px;} .p320 {padding-left:320px;} .p325 {padding-left:325px;} .p330 {padding-left:330px;} .p340 {padding-left:340px;} .p350 {padding-left:350px;} .p360 {padding-left:360px;} .p370 {padding-left:370px;} .p375 {padding-left:375px;} .p380 {padding-left:380px;} .p390 {padding-left:390px;} .p400 {padding-left:400px;} 


/* PRE-FIX FOR INPUTS MARGIN-LEFT VARIABLES */
.example.m050 .control {margin-left:50px;} .example.m060 .control {margin-left:60px;} .example.m070 .control {margin-left:70px;} .example.m075 .control {margin-left:75px;} .example.m080 .control {margin-left:80px;} .example.m090 .control {margin-left:90px;} .example.m100 .control {margin-left:100px;} 
.example.m060 .control {margin-left:235px !important;} /* added by Matt for error handling */

form#reset-pass .item.g200.example.m060 .control,
form#login .item.g200.example.m060 .control {margin-left:60px !important;} /* added by Matt 6/22 for #55 verifyShortSSN and #53 resetPassSSNorTaxID */

span.prefix {
	display: block;
	float: left;
	margin-top:4px;
	text-align: right;}

	.m050 span.prefix {margin-left:-50px; width:42px;}
	.m060 span.prefix {margin-left:-60px; width:52px;}
	.m070 span.prefix {margin-left:-70px; width:62px;}
	.m075 span.prefix {margin-left:-75px; width:68px;}
	.m080 span.prefix {margin-left:-80px; width:72px;}
	.m090 span.prefix {margin-left:-90px; width:82px;}
	.m100 span.prefix {margin-left:-100px; width:92px;} 

/**************** Submit and Reset button defaults ********************/
input.btn-submit, input.btn-reset {
	background: none;
	border: 0;
	outline: 0;
}

input.btn-submit {
	color: #fff;
	font-weight: bold;
	padding: 4px 7px;
	border: 1px solid #3F043C;	
	cursor: pointer;
	
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	
	background: #005487;
	background: -moz-linear-gradient(top, #8F1A8A, #4F004B);
	background: -webkit-gradient(linear, left top, left bottom, from(#8F1A8A), to(#4F004B));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8F1A8A', endColorstr='#4F004B');
}

input.btn-reset {
	color: #006899;
	font-weight: bold;
	padding: 4px 7px;
	border: 1px solid #cccccc;	
	cursor: pointer;
	
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff, #d8d8d8);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d8d8d8));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d8d8d8');
}


/************** First stab at adding an example to a text field ****************/
div.item.text.sample span.example {
	/*position: relative;
	left: -55px; 
	top: -17px;  --- commented out by Matt 6/22 - for UID6 */
	
	/* added by Matt 6/22 - for UID6 */
	float:left;
	margin-left:-164px; 
}


/*div.item.text.sample .control { left: 230px; } --- commented out by Matt 6/22 - for UID6 */
div.item.text.sample .control { margin-left:230px; margin-top: -20px !important;} /* added by Matt 6/22 - for UID6 */


/****************** Creating inline field groups using .controls and .inline ***************/

.controls span {
	display: inline;
	position: relative;
	top: -9px;
}

form .radio .controls, form .check .controls {top: 5px;}

form .radio .controls .control label, form .check .controls .control label {top: -5px;}

form#id_info .radio .controls .control label, 
form#receive_future_statements .radio .controls .control label, 
form .check .controls .control label {top: 0;} /* added by allan to override the above rule (causing misalignment on various pages) */

form#showFilter .control {left: 145px; margin-top:-20px;} /* added by Allan to fix issues with UIDs 16 & 46 - and modified by Matt based on error handling */

.dynamic form#showFilter .control {left: 0px; margin-top: -22px;} /* added by Matt to align .control on right for JS-version */

	 form#showFilter label {left:-30px !important;}
	
.dynamic form#showFilter label {left:0 !important; top:0 !important;}
	
	form#showFilter .submit-right {margin-left: -30px !important; margin-top:-2px !important;} /* added by Allan to fix issues with UIDs 16 & 46 */

.dynamic #update-nojs,.dynamic #recalculate-nojs {display:none;}

.online-detail .select .control {
	left: 0 !important;
	margin-top: 0 !important;

}


form .controls .inline {
	text-align: left;
	float:left;}
	form .controls .inline span {
		top:0px;
		vertical-align:top;}

form .controls .inline .control {
	display: inline-block;
	width: auto;
	margin:0;
}

form .controls .inline .text, form .controls .inline .select { display: inline-block; }

form .controls .inline .custombox span, form .controls .inline .menu span {top: 0;}

form .controls .inline .custombox-wrapper {position: absolute; left: 5px;}

form .text .username-txt {background: none !important;}

/* Defect 6858 */

form#autopay_statements .text .control, form#autopay_statements .select .control {
	display: block !important;
}

form#autopay_statements table.zebra div#add_new_bank .item.text .control, form#select_bank table.zebra div#add_new_bank .item.text .control, form#manage_accounts table.zebra div#add_new_bank .item.text .control   {
	position:absolute !important;
}

form#autopay_statements #add_new_bank a.help, form#autopay_statements #add_new_bank a.help-link {
	top: -5px !important;
}

/* End Defect 6858 */

#forgot-password-user-identification .text .control, #forgot-password form .radio .controls .text .control { /* defect 6920 */
	width: 465px !important;
}

#forgot-password-user-identification form#forgotPasswordCommand label {
	top: 0 !important;
}

.add_new_bank_fields .error .message { /* fix for defect 7557 */

width: 50% !important;

}