

/* forms
=============================================== */

/* fieldset */

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(../../media/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(../../media/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(../../media/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 input.text-dob,
			.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;
			}

		.form-2col div.field-pair div.field-wrap-ddl {
			float: right;
			width: 55%;
		}

			.form-2col .field-pair .field-wrap-ddl select
			{
				float: left;
				width: 88%;
			}

			.form-2col .field-pair .field-wrap-ddl .field-help {
				clear: both;
				margin: 0 0.25em 0 0;
			}
			
			.form-2col .field-pair .field-wrap-ddl img.error-marker {
				float: left;
				margin: 0 0 0 0.25em;
			}
			
.warning-threshold { clear:both; color: #ffffff; font-weight: bold; width: 135px; padding: 10px 70px 10px 9px; margin-top: 10px; background: #c1649b url(../../media/images/present.jpg) 95% 43% no-repeat; border: solid 2px red; }
.warning-duedate { clear:both; color: #ffffff; font-weight: bold; width: 135px; padding: 10px 10px 10px 9px; margin-top: 10px; background: #c1649b; border: solid 2px red; }


fieldset#searchCriteria
{
    font-weight: bold;
}		

fieldset#searchCriteria input
{
    left: 100px;
}


fieldset#searchCriteria .leftOption
{    
    padding-top: 20px;
    width: 295px;
    float: left;
}

fieldset#searchCriteria .leftOption .heading
{
    position: relative;
    left: 20px;
    width: 75px;
    float: left;
    
}

fieldset#searchCriteria .leftOption .input
{
    position: relative;
    left: 30px;  
    
}

fieldset#searchCriteria input, fieldset#searchCriteria select
{
    border: solid 1px #a6c0d1;
}

fieldset#searchCriteria .rightOption
{
    float: left;
    padding-top: 20px;
    width: 220px;
}

fieldset#searchCriteria .rightOption .heading
{
    position: relative;
    float: left;
    width: 50px;
}

fieldset#searchCriteria
{
    margin: 0;
}


fieldset#searchCriteria .rightOption .input
{
    position: relative;
    
}

div.pager a.prevLink
{
    background: url('../../media/images/pagearrow-left.gif') no-repeat center left;
    display:block;
    float:left;
    text-align:right;
    width:40px;
    padding-right: 10px;
    border-right: solid 1px #dddddd;
}

div.pager a.nextLink
{
    background: url('../../media/images/pagearrow-right.gif') no-repeat center right;
    display:block;
    float:left;
    text-align:left;
    width:40px;
    padding-left: 10px;    
}

div.searchButton
{
	text-align: right;
}

div.searchButton input
{
    margin-top: 15px; 
}

div.searchBottom
{
    margin-top: 40px;
    width:550px;
	*width: 550px;
	_width: 525px;
}

/* 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: 77%;
}

/* 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:65px;
	*margin-left:60px;
	_margin-left:55px;
	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(../../media/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(../../media/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(../../media/images/buttonLeft.gif) no-repeat scroll left top;
	height:29px;
	float:right;
	margin-right:0px;
	
	

} 

.buttonHolder input
{
	margin-right:10px;
	background:transparent url(../../media/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;


			}



/* Search */

div.searchresults
{
    
}

div.searchresults .searchResult
{
     padding: 20px 0 20px;
}

div.searchresults .searchResult p
{
    margin: 10px !important;
    
    }


div.searchresults .searchResult a
{
    font-weight: bold;
}

div.pagecount
{
    float: right;
    padding-right: 10px;
    border-right: solid 1px #dddddd;
    
}
div.resultcount
{
    float: right;
    padding-left: 10px;
}

div.resultSeparator
{
    width: 100%;
    border-bottom: solid 1px #dddddd;
}


div.pager
{
    border-bottom: 1px solid #AFD5E2;
    border-top: 1px solid #AFD5E2;
    padding: 8px 0 8px;
}

/****** Preferences form  *****/

.field-wrap-preferences
{
	float: left;
	width: 5%;
		
}


.field-label-preferences
{
	float: left;
	display: block;
	padding-left: 21px;
	width: 90%;
	
	
}

