/*
	# Company: CSM
	# File: form.css
*/

/* 
	** Global components
*/
fieldset
{
	border: 0;
}
fieldset legend
{
	display: none;
}

fieldset div
{
	clear: both;
	padding: 4px 0 4px;
}
fieldset label
{
	display: block;
	float: left;
	width: 24%;
	padding-top: 3px;
	padding-right: 1%;
	
	cursor: pointer;
	
	font-size: 11px;
}
fieldset li
{
	list-style-type: none;
}

fieldset input.txt,
fieldset textarea.txt,
fieldset select.ddl
{
	width: 68%;

	background: #efefef;
	border: 1px solid #c7c7c7;
}
fieldset input.txt,
fieldset textarea.txt
{
	padding: 4px;
}
fieldset textarea
{
	font-size: 1em;
	font-family: Verdana, Sans-Serif;
}
fieldset input.btn
{
	padding: 4px 12px;
	
	font-size: .9em;
	font-weight: bold;
	cursor: pointer;
}

/* full */
fieldset div.full label
{
	float: none;
	width: auto;
	padding-bottom: 2px;
}
fieldset div.full input.txt
{
	width: 95%;
}


/* buttons, checklist */
fieldset div.buttons,
fieldset div.checklist ul,
fieldset ul.checklist,
fieldset .nested
{
	margin-left: 0;
	width: 74% !important;
	padding-left: 26%;
}
fieldset div.checklist label,
fieldset ul.checklist label
{
	float: none;
	width: auto;
}
fieldset ul.checklist
{
	padding-bottom: 0;
}
fieldset .checklist li
{
	line-height: 1.1em;
	margin: 0;
	padding: 0;
	background: none;
}
fieldset div.checklist label
{
	padding-left: 18px;
}
	fieldset div.checklist label input
	{
		float: left;
		margin: 1px 0 0 -18px;
	}

/* Form Validation */
fieldset .required
{
	font-size: 90%;
}
fieldset input.error,
fieldset textarea.error
{
	border: 1px solid #e60000 !important;
}
label.error
{
	float: none;
	width: auto;
	padding-left: 25%;
	
	color: #e60000;
	font-size: 90%;
}

/* Striped Forms */
fieldset.striped div
{
	float: left;
	width: 100%;
	clear: both;
	margin-bottom: 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e4e5e5;
}
	fieldset.striped div div
	{
		float: none;
		width: auto;
		clear: none;
	}
	fieldset.striped div.buttons
	{
		border: 0;
	}

/* 
	** Custom Form Styling
*/

/* silverstripe default style */
.form-container 
{
	padding: 0;
	margin: 0 0 10px 0;
	float: none;
	width: 600px;
}
	.form-container h2
	{
		padding-bottom: 30px;
		
		font-size: 14px;
		font-weight: normal;
	}
	.form-container form
	{
		clear: both;
	}
	.form-container fieldset 
	{
		padding: 0;
		margin: 0;
	
		line-height: 0;
	}
		.form-container fieldset p 
		{
			width: auto;
			padding: 0 0 5px 0;
		}
		.form-container fieldset div 
		{
			clear: both;
		}
		.form-container fieldset label 
		{
			width: 24%;
		}
			.form-container fieldset label.error
			{
				width: auto;	
			}
			
		.form-container fieldset input.text,
		.form-container fieldset textarea 
		{
			width: 52%;
		}
		.form-container fieldset input.text,
		.form-container fieldset textarea
		{
			padding: 4px;
			background: #efefef;
			border: 1px solid #c7c7c7;
		}
		.form-container fieldset input.text.nolabel
		{
			margin-left: 25%;
		}
		.form-container fieldset button 
		{
			padding: 4px 12px;
			
			font-size: .9em;
			font-weight: bold;
			cursor: pointer;
		}
			.form-container fieldset button.action
			{
				margin-left: 25%;
			}
			
		.form-container fieldset div.fieldgroup,
		.form-container fieldset div.fieldgroupField
		{
			padding: 0;
		}
		.form-container fieldset div.middleColumn
		{
			padding: 0;
			width: auto;
			float: none;
			clear: none;
		}
		.form-container fieldset .literalField
		{
			margin-bottom: 10px;
			width: 73% !important;
			padding-left: 25%;
		}
		.form-container fieldset ul.optionset
		{
			width: 73% !important;
			padding-left: 25%;
		}
		.form-container fieldset ul.optionset label
		{
			float: none;
			width: auto;
		}
		.form-container fieldset ul.optionset
		{
			padding-bottom: 0;
		}
		.form-container fieldset .optionset li
		{
			margin: 0 0 3px 0;
			padding: 0;
			overflow: auto;

			background: none;
			
		}
		.form-container fieldset div.optionset div.middleColumn label
		{
			float: left;
			padding: 0 0 0 18px;
			
			line-height: 16px;
		}
		.form-container fieldset div.optionset input
		{
			float: left;
			margin: 1px 0 0 0;
		}
		.form-container fieldset .BBCodeHint 
		{
			clear: both;
			float: left;
			padding-left: 25%;
	
			text-align: left;
		}
		.form-container fieldset .field.checkbox 
		{
			clear: both;
			float: left;
			padding: 4px 0 2px 25%;
			overflow: auto;
	
			text-align: left;
		}
			.form-container fieldset .field.checkbox input 
			{
				float: left !important;
				margin-top: 1px;
			}
			.form-container fieldset .field.checkbox label 
			{
				float: left !important;
				width: auto;
				width: 320px;
				padding: 0 0 3px 10px;
				
				font-weight: normal !important;
				line-height: normal;
			}
		.form-container fieldset .field.simpleimage 
		{
			padding-left: 25%;
		}
		.form-container fieldset .creditCardField input
		{
			padding: 1px;
			width: 11.4%;

			background: #fff;
			border: 1px solid #cbd1d3;
		}
		.form-container fieldset .paymentTypes
		{
			float: right;
			margin-top: -100px;
		}
			.form-container fieldset .paymentTypes img
			{
				margin-right: 5px;
			}
		.form-container fieldset .expiryField
		{
			float: left;
			clear: none;
			padding: 4px 0 2px 0;
		}
			.form-container fieldset .expiryField div
			{
				display: inline;
			}
		.form-container fieldset .message 
		{
			margin-top: 5px;
		}
		.form-container fieldset .required,
		.form-container fieldset .validation
		{
			display: block;
			margin-left: 25%;
		}
		.form-container fieldset .readonly
		{
			display: block;
			padding: 3px 0 2px 0;
		}	

	.form-container .message
	{
		margin-bottom: 8px;
		padding: 8px 16px;
		
		background: #fefafa;
		background: #fefcfc;
		border: 1px solid #b70e13;
		
		color: #ff0000;
	}
	.form-container .holder-required
	{
		border-color: #f00 !important;
	}
	.form-container .good
	{
		color: #0da305;
		background: #fbfcfa;
		border-color: #0da305;
	}
	.form-container fieldset div .message
	{
		margin: 0;
		padding: 2px 0 0 25%;
		background: #fff;
		border: 0;
	}	
		
	.form-container.left,
	.form-container.right 
	{
		width: 44.5%;
	}
	.form-container.padded 
	{
		padding-top: 10px;
	}
	.form-container .Actions 
	{
		padding-left: 25%;
		padding-top: 8px;
	}
		.form-container .Actions p 
		{
			padding: 5px 0 0 0;
			margin: 0;
			width: auto;
		}
		.form-container .Actions .action 
		{
			padding: 4px 12px;
			
			font-size: .9em;
			font-weight: bold;
			cursor: pointer;
		}

	.form-container.alt
	{
		width: auto;
	}
		.form-container.alt .Actions
		{
			padding-top: 8px;
			padding-left: 0;
			width: 80.5%;
		}
			.form-container.alt .Actions p 
			{
				padding: 5px 0 0 0;
				margin: 0;
				width: auto;
			}


/* ReCaptcha */
#recaptcha .nested {
	clear: none;
	padding: 0;
	width: 75% !important;
	float: right;
}
	#recaptcha .nested div
	{
		padding: 0;
	}
	#recaptcha .nested label.error
	{
		padding-left: 0;
		width: auto;	
	}
	
#recaptcha_image
{
	margin-bottom: 10px;
}
	#recaptcha_image img
	{
		border: 1px solid #c7c7c7;
	}
					



/* default items */
fieldset div.button
{
	float: left;
	margin-top: 30px;
	width: 95%;
}
	fieldset div.button input
	{
		float: right;
	}



/* contact us */
#contactUs .form-container
{
	float: left;
}
	#contactUs .form-container fieldset
	{
		width: 455px;
	}
		#contactUs .form-container fieldset input.text,	
		#contactUs .form-container fieldset textarea
		{
			width: 68%;
		}
		#contactUs .form-container .Actions
		{
			width: 98%;
		}