

/* forms
=============================================== */

body
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 72.5%;
}

/* fieldset */

/* Misc Baby Wall CSS */

p {
	color: #444444;
}

h1 {
	color: #0099FF;
	font-size: 1.5em;
	font-weight: bold;
}

	


fieldset {
	/* float:left; */
	width:550px;
	*width: 550px;
	_width: 525px;

	border: solid 1px #c3dde7;
	margin: 0 17px 15px 17px;
	*margin: 0 1px 15px 20px;
	
	_margin: 0 6px 15px 10px;
	
	padding: 0 0 2em 0;

	background:transparent url(../images/form-gradient-bg.jpg) repeat-x scroll right top;
	background-color: #ffffff;
	
}
	


	body.standard-page div#content-body fieldset h2 {

		
		color: #ffffff;
		font-size:100%;
		height:30px;
		background:transparent url(../images/form-h2-gradient-bg.jpg) repeat-x scroll right top;
		color: #ffffff;
		padding:1.4em 0 1em 1em;
		margin: 0 0 0.5em 0;
		
	}

	
	
	fieldset p.copy {
		margin: 1em;
	}

/* 1 column layout */


.form-1col fieldset {

}

	.form-1col div.field-pair {
		padding: 0.5em 0 0.5em 1em;
	}

/* 2 column layout */
	
	.form-2col h2 {

		
		color: #ffffff;
		font-size:100%;
		height:30px;
		background:transparent url(../images/form-h2-gradient-bg.jpg) repeat-x scroll right top;
		color: #ffffff;
		padding:1.4em 0 1em 1em;
		margin: 0 0 0.5em 0;
		
	}


	.form-2col div.field-pair {
		clear: both;
		padding: 0.5em 0 0.5em 3%;
		_padding: 0.5em 0 0.5em 15px;
	}
	
	/* IE hack */
	
	/* end: IE hack */
	
		.form-2col div.field-pair label.field-label {
			display: block;
			float: left;
			width: 38%;
		}
		
		.form-2col div.field-pair div.field-wrap {
			float: right;
			width: 55%;
		}
			
			.form-2col .field-pair .field-wrap select,
			.form-2col .field-pair .field-wrap input.text,
			.form-2col .field-pair .field-wrap div.radio-set,
			.form-2col .field-pair .field-wrap div.checkbox-set,
			.form-2col .field-pair .field-wrap input.button {
				float: left; /* float allows error marker to sit adjacently */
				
			}
			
			.form-2col .field-pair .field-wrap .field-help {
				clear: both;
				margin: 0 0.25em 0 0;
			}
			
			.form-2col .field-pair .field-wrap img.error-marker {
				float: left;
				margin: 0 0 0 0.25em;
			}













/* field help */
	
.field-help {
	font-size: 85%;
	width:80%;
}

/* buttons */


.form-2col .field-pair
{
	width:525px;
	-width:490px;


}



/* form elements */

input, select, textarea {
	font-family: arial, helvetica, sans-serif;
	font-size: 100%;
}

input.checkbox {
	border: none;
	height: auto;
	margin: 0;
	width: auto;
}

input.radio {
	border: none;
	height: auto;
	margin: 0; 
	width: auto;
}
		
input.text {
	width: 75%;
}

input.text-postcode,
input.text-dob {
	width: 7em;
}

input.text-sort-code,
input.text-account-number {
	width: 11em;
}

select {
	padding: 0;
}
		
	select option {
		/* padding: 0 .75em 0 .25em; */
	}	

	select optgroup {
		font-style: normal;
		padding: 0 0 0 .25em;
	}
		
		select optgroup option {
			/* padding: 0 0 0 1em; */
		}

select.address-list {
	width: 80%;
}

/* form labels */

label.radio {
	margin: 0 1em 0 0;
}

label.radio-last {
	margin: 0; 
}

label.checkbox {
	margin: 0 1em 0 0;
}

label.checkbox-last {
	margin: 0;		
}

/* buttons */

input.button {
	cursor: pointer;
	padding: 0.1em 0.25em 0.1em 0.25em;
	width: auto;
}

input.button-print,
input.button-close {
	width: 7em;
}

input.button-postcode {
	float: left;
	width: 8em;
}

input.button-address-select {
	margin-top: 0.25em !important;
}

input.button-submit {
	float: right;
	width: 7em;
}

/* error marker */

img.error-marker {
	background-color: #ffffff;
	font-style: normal;
	font-weight: bold;
	color: #e00000;
}












/* ecards
=============================================== */


.inviteLabel
{
clear:both;
width:100px;

float:left;
height:30px;
margin-left:18px;
}

.inviteTxt1
{height:30px;
width:160px;
float:left;
padding-right:40px;
}

.inviteTxt2
{
height:30px;
width:120px;
float:left;
}


.inviteImg
{
margin-left:50px;
_margin-left:30px;
width:auto;
float:left;
}



.ecardImg
{

	margin-left:10px;

	*margin-left:5px;
	_margin-left:0px;
	
	width:156px;

	float:left;

	margin-bottom:0px;
}

.ecardImg2
{
	margin-left:45px;
	_margin-left:30px;
	margin-right:0px;
	
	width:auto;
	float:left;
	margin-bottom:0px;
}

.imgPanelOn 
{
border:2px solid #00aef3;
width:146px;
height:103px;
padding:3px;
*margin-left:10px;
_margin-left:0px;
}

.imgPanelOff
{
border:2px solid transparent;
width:146px;
height:103px;
*margin-left:10px;
_margin-left:0px;
padding:3px;
/* IE fix*/
/*set an unused color to be index color*/
_border-color:tomato; /*For IE6-*/
/*then remove this indexed color*/
_filter:chroma(color=tomato);/*For IE6-*/
}


.imgPanelOn2 
{
border:2px solid #00aef3;
width:100px;



}




.imgPanel2Off
{
border:2px solid transparent;
width:100px;

/* IE fix*/
/*set an unused color to be index color*/
_border-color:tomato; /*For IE6-*/
/*then remove this indexed color*/
_filter:chroma(color=tomato);/*For IE6-*/

}


.ecardImg input
{

width:146px;
height:103px;


}

.ecardImg2 input
{

width:100px;
height:100px;


}

.previewImage
{
margin:auto;
width:522px;
height:400px;
}


.ecardMessage
{
width:490px;
height:160px;

}


.form-2col .imgUploadLeft
{
float:left;
width:250px;
padding:10px;
}


.form-2col .imgUploadRight
{
margin-left:40px;
margin-top:20px;
border-left:solid 1px #000000;
padding-left:20px;
float:left;
width:180px;
}


.form-2col  .imgUploadRightHeader
{
margin-left:30px;
margin-top:30px;
float:left;
width:200px;
}

.form-2col  .imgUploadRightHeader .right
{
margin-left:40px;
}



.form-2col .emailHolder
{
padding:10px;
float:left;
width:210px;
}




/* For ie gap inbetween divs */
.ecardPanel
{

*padding-bottom:20px;

}






 /* step indicator */



 div#step-indicator 
{
	padding-bottom:20px;
	margin-left:0;
	padding-left:18px;
	*margin-left:-38px;

}

 div#step-indicator ul li {
 display: block;
 float: left;
 font-weight: bold;
 margin: 0 1.5em 2em 0;

 }



 div#step-indicator ul li span.step-number {
 display: block;
 float: left;
 padding: 0.25em 0.5em;
 }

 div#step-indicator ul li span.step-label {
 display: block;
 float: left;
 padding: 0.25em 0.5em;
 }

div#step-indicator ul li.current-step span.step-number {
background-color:#4191C4;
color:#FFFFFF;
}

div#step-indicator ul li.current-step {
background-color:#4191C4;
color:#FFFFFF;
}

div#step-indicator ul li span.step-number {
background-color:#ECF6FC;
border-right:2px solid #FFFFFF;
}

 /* end: step indicator */

.fileUpload
{
font-size:9px;
width:auto;
float:left;
margin:0;
padding:0;


}








.buttonHolderWhite
{
	*margin-top:0px;
	background:transparent url(../images/buttonWhiteLeft.gif) no-repeat scroll left top;
	height:29px;
	float:left;
	margin-left:10px;
	*margin-left: 10px;
	
} 

.buttonHolderWhite input
{	
	height:29px;
	
	color:#003A6F;
	background:transparent url(../images/buttonWhiteLong.gif) no-repeat scroll right top;
	height:29px;
	float:left;
	cursor:pointer;
	border:none;
	font-weight:bold;

	margin-left:26px;
	*margin-left: 17px;
	
	padding-bottom:2px;
}



.buttonHolder
{

	background:transparent url(../images/buttonLeft.gif) no-repeat scroll left top;
	height:29px;
	float:right;
	margin-right:0px;
	
	

} 

.buttonHolder input
{
	margin-right:10px;
	background:transparent url(../images/buttonLong.gif) no-repeat scroll right top;
	height:29px;
	float:left;
	cursor:pointer;
	border:none;
	font-weight:bold;
	color:#003A6F;
	margin-left:25px;
	margin-right:0;

	padding-bottom:2px;
	*padding-right:10px;
}




.imgPanelUserImage
{

margin-right:auto;


}




.inviteButtonContainer
{


margin-left:18px;
_margin-left:10px;
width:550px;

_width:525px;
margin-top:0px;

clear:both;
float:left;

}


.inviteButtonLeft
{
display:inline;
width:200px;

}

.inviteButtonRight
{
float:right;
margin-right:0;
padding-right:0;
width:200px;
}

.field-pairEmail
{
	margin-left:-px;
	margin-top:-20px;
	width:300px;
}



.yourDetails .field-pair
{
	font-weight:bold;
}

.yourDetails .field-help
{
	font-weight:normal;
}


/*IE fixes*/

#InviteContributeECard1_pnlCustomise .form-2col div.field-pair {
clear:both;
_margin-left:-36px;
}

.emailDetails .form-2col div.field-pair 
{
_margin-left:0px;
	
}


.ecardImg
{
_margin-left:5px;
}





.fileUploadButton
{

_padding-left:16px;

*padding-right:16px;
/*IE fixes long button bug*/
*overflow: visible;
text-align:left;
}





.emailList{padding:14px;}

.ecardMessageLabel {float:left;width:180px;}
.ecardMessageLabel span {font-size:85%;}
.ecardMessageLabel label {width:100px;}
.ecardMessageBox {float:left;margin-left:0px;padding-bottom:20px;}

.plaButtonsForPrint input{width:100px}
.emailRadioButton
{
margin-left:0px;
*margin-left:-4px;
margin-top:10px;
_padding-top:10px;
margin-bottom:8px;

}
.emailRadioButton td{padding-right:50px;}





.ecardThemeName{width:;100px;text-align:center;padding-bottom:10px;}

.printButtonsHolder{margin-left:1px;width:auto;float:left;padding-bottom:20px;padding-top:14px}
.verticalSpacer 
{
height:20px;
_height:0px;
clear:both;
}


#title {
	font-weight: bold;
}


.clearfix {

padding-left:0;

display:block;
}


/* form error message (TODO: split out colors, maybe?)
=============================================== */

div#error-message {
	border: 2px solid #e00000;
	margin: 1em 18px 1.25em 17px;
	*margin: 1em 18px 1.25em 21px;
	_margin: 1em 18px 1.25em 20px;

	padding: 0.5em;
	width: 534px;
	_width: 509px;
}
	
div#error-message div#error-message-inner .error-summary {
		margin: 0 0 1em 0;
		padding: 0.25em 0 0.25em 27px; /* padding used to display image */
		background: url(/images/icon-error-marker.gif) no-repeat 0% 50%;
		color: #e00000;
		font-size: 100%;
	}
	
	div#error-message p {
		color: #e00000;
		margin: 0 0 1.2em 5px;
	}
	
	div#error-message ul {
		padding: 0 0 0 35px;
		*padding: 0 0 0 0px;
	}
		
		div#error-message ul li {
			list-style-image: url(/images/icon-error-bullet.gif);
			margin: 0 0 0.25em 0;


			color: #e00000;
		}
			
			div#error-message ul li label {
				text-decoration: underline;
				cursor: pointer;
			}

body.standard-page div#content-body .error-message-inner h2
			
			{

				color: #e00000;


			}


