/*----------------------------------------------
	FORM.CSS
	Author:		Engage Interactive
	Requires:	reset.css
	Colours:	#f0f0f0 - light border
----------------------------------------------*/

/*--------------------------
	CONTAINER STYLES
--------------------------*/

div.form_container{
	}
div.form_container p{
	margin:0;
	font-size:1.2em;
	color:#999;
	}

div.form_container div{
	position:relative;
	padding:10px;
	z-index:10;
	clear:both;
	}
div.form_container div.two_column{
	float:left;
	width:46%;
	clear:none;
	}
div.form_container div.last{
	margin-bottom:0;
	}

/*--------------------------
	LABELS AND HINTS
--------------------------*/

div.form_container label{
	display:block;
	margin-bottom:0.5em;
	font-size:1.4em;
	font-weight:bold;
	cursor:pointer;
	}
div.form_container label em{
	font-size:0.8em;
	font-weight:normal;
	font-style:italic;
	color:#999;
	}

/*--------------------------
	GENERIC STYLING FOR
	ALL FORM ELEMENTS
--------------------------*/

div.form_container div.text_field input,
div.form_container div.text_area textarea,
div.form_container div.drop_down select{
	font-size:12px;
	color:#666;
	font-family:Helvetica, Arial, sans-serif;
	}

div.form_container div li{
	width:100%;
	margin-bottom:10px;
	}
div.form_container div li.last{
	margin:0;
	}

/*--------------------------
	TEXT FIELD
--------------------------*/

div.form_container div.text_field input{
	width:210px;
	height:20px;
	padding:6px 5px 0 5px;
	background:url(/assets/images/contact/text_field.gif) left top no-repeat;
	border:none;
	}
div.form_container div.post_code input{
	width:99px;
	background:url(/assets/images/contact/postcode_field.gif) left top no-repeat;
	}

/*--------------------------
	TEXT AREA
--------------------------*/

div.form_container div.text_area{
	padding-bottom:0;
	margin-bottom:10px;
	background:url(/assets/images/contact/text_area.gif) 10px 100% no-repeat;
	}
div.form_container div.address{
	background:url(/assets/images/contact/address_field.gif) 10px 100% no-repeat;
	}
div.form_container div.text_area textarea{
	width:528px;
	height:149px;
	padding:0 5px;
	margin:10px 0;
	background:none;
	border:none;
	overflow:auto;
	}
div.form_container div.address textarea{
	width:210px;
	}

/*--------------------------
	BUTTON
--------------------------*/

button {
	display:block;
	width:100px;
	background:#819d01;
	border:0;
	padding:8px;
	color:#FFF;
	font-weight:bold;
	cursor:pointer;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;

}


/*--------------------------
	CHECKBOX & RADIO
--------------------------*/

div.checkbox ul.fancy_checkbox li,
div.radio ul.fancy_radio li{
	display:block;
	width:auto;
	padding-right:10px;
	}

div.checkbox ul.fancy_checkbox li input,
div.radio ul.fancy_radio li input{
	display:none;
	}

div.checkbox ul li label,
div.radio ul li label{
	position:relative;
	display:inline-block;
	padding:6px 8px 6px 28px;
	border:solid 1px #EEE;
	background:#F7F7F7;
	font-size:1.1em;
	margin:0;
	}
ul.fancy_checkbox li label span,
ul.fancy_radio li label span{
	position:absolute;
	left:5px;
	top:5px;
	display:block;
	width:15px;
	height:15px;
	background-image:url(/assets/images/contact/radio.gif);
	}
ul.fancy_radio li label span{
	background-position:-15px 0;
	}

ul.fancy_checkbox li label.hover span{
	background-position:0 -15px;
	}
ul.fancy_checkbox li label.pressed span{
	background-position:0 -30px;
	}
ul.fancy_checkbox li label.checked span{
	background-position:0 -45px;
	}
ul.fancy_checkbox li label.checked.pressed span{
	background-position:0 -75px;
	}

ul.fancy_radio li label.hover span{
	background-position:-15px -15px;
	}
ul.fancy_radio li label.pressed span{
	background-position:-15px -30px;
	}
ul.fancy_radio li label.checked span{
	background-position:-15px -45px;
	}
ul.fancy_radio li label.checked.pressed span{
	background-position:-15px -75px;
	}


/*--------------------------
	ERRORS
--------------------------*/

p.error, div.form_container p.error{	
	display:block;
	background:#d52e2e url(/assets/images/template/error.png) 8px 50% no-repeat;
	padding:6px 10px 6px 30px;
	margin:0 10px;
	color:#FFF;
	}
div.form_container div.error input{
	background-position:left bottom;
	color:#862629;
	}