/* Created: CU for form styling across Haysubs website */

/* NOTE:
 * Styling in this file for all common elements of form styling across Haysubs.
 * Primarily for the form areas within the main col section of the page.
 * All other generic form elements within the navigation are held in
 * style.css
 */


/* styling of legend area based on:
 * http://www.tyssendesign.com.au/articles/css/legends-of-style/
 */

@media screen {
	
.fieldset {
	width: 100%;
	position: relative;
	padding-top: 12px;
}
	
	.fieldset fieldset {/* styling specific for fieldsets within div.fieldset */
		border-top: 1px solid #e1e0ea;
		padding-top: 10px;
	}

fieldset {
	margin: 5px 0 20px 0;
	overflow: hidden;
}

/* styling for legend elements */	
legend {
	font-size:1.6em;
	font-weight: 700;
	color: #180f5e;
}

	legend span {
		top: 0;
		left: 0;
		position: absolute;
		padding-bottom: 2px;
	}
	
/* styling for required field statement */
#maincol form p.requiredStatement {
	font-size: 1.1em;
	color: #757575;
	margin-left: 160px;
}

	#maincol form p.requiredStatement span {
		color: #ff0000;
		font-weight: 700;
		font-size: 1.64em;
	}
		
/* form row and labelling styling */
.formRow {
	overflow: hidden;
	margin-bottom: 5px;
}

	.formRow label {
		font-weight: 700;
		font-size: 1.2em;
		line-height: 1.5em;
		float: left;
		width: 150px;
		margin-right: 10px;
		text-align: right;
	}

	.formRow label .requiredField {
		color: #ff0000;
		font-weight: 700;
		font-size: 1.5em;
	}
	
/* error styling for forms related to JQuery form validation, and non JS messages */

#errorMessage,
.errorMessage {
	margin-bottom: 10px;
	display: none;
}

	#errorMessage p,
	#errorMessagePostcodeOld p,
	#errorMessagePostcodeNew p,
	#errorMessagePostcode p,
	.errorMessage p,
	#errorMessage label {
		color: #ed1c24;
		margin-bottom: 8px;
	}
	

	#errorMessagePostcodeOld p,
	#errorMessagePostcodeNew p,
	#postCodeFinderForm #errorMessagePostcode p {
		margin-left: 160px;
	}
	
#noJSerrorMessage {
	margin-bottom: 10px;
}
	
	#noJSerrorMessage ul li {
		color: #ed1c24;
		font-size: 1.2em;
		line-height: 1.5em;
	}
		
#maincol p.error, #maincol .showError p {
	color: #ed1c24;
	margin: 0 0 2px 0;
}

	#maincol .formRow p.error {
		margin: 0 0 2px 160px;
	}
	/* Adjustment to error message placement for contact forms */
	#contactForm .formRow p.error {
		margin: 0 0 2px 0;
	}

	/* errors styling for checkout area when JS disabled (for XSLT work) */
	#errors {
		font-size: 1.2em;
		margin-bottom: 10px;
		color: #ed1c24;
	}
	
	#checkoutArea #errors h2 {
		font-size: 1em;
	}
	
	/*Coldfusion validation error messages for when JS is disabled */
	.showError{
		display: block;
	}

/* styling for solo button in form area of checkout.  */
.soloButton {
	margin-left: 160px;
	float: left;
}

/* postcode finder styling */
#postCodeFinderForm {
	overflow: hidden;
	margin-bottom: 10px;
}

#postCodeFinderForm p {
	margin:10px 0 5px 0;
}

#postCodeSearchButton,
#postCodeSearchButtonOld,
#postCodeSearchButtonNew,
#postCodeSearchButtonDelivery {
	background: url(/_images/buttons/searchButton.gif) transparent no-repeat 0 0;
	height: 22px;
	width: 75px;
	display: block;
}

#maincol select#postCodeItems,
#maincol select#postCodeFinderOldItems,
#maincol select#postCodeFinderNewItems,
#maincol #postCodeSelector,
#maincol #postCodeSelectorNew {
	margin: 0 0 5px 160px;	
}

#postCodeSelector,
#postCodeSelectorNew,
#selectButton {
	background: url(/_images/buttons/selectButton.gif) transparent no-repeat 0 0;
	height: 22px;
	width: 75px;
	display: block;	
}	
}