/*----------------------------------------------
	FORM.CSS
	Author:		Engage Interactive
	Requires:	reset.css
	Version:	0.1
----------------------------------------------*/

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

.form_wrapper {
	padding:15px 0 0 15px;
	margin-bottom:20px;
	border:solid 1px #d2d2d2;
	border-radius:10px;
	background:#FFF;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

.form_wrapper fieldset {
	position:relative;
	overflow:auto;
}

.form_wrapper legend {
	display:none;
}


/*-------------------------------
	FIELDS
-------------------------------*/

.form_wrapper .field {
	position:relative;
	padding-top:15px;
	margin:0 15px 15px 0;
	border-top:solid 1px #e4e4e4;
	clear:both;
	text-align:left;
}

.form_wrapper .split {
	float:left;
	display:inline;
	width:232px;
	clear:none;
}

.form_wrapper .left {
	clear:left;
}


/*---------------------
	ERROR/VALID
---------------------*/

.form_wrapper .valid {
	background:url(/assets/images/form/valid.png) 99% 16px no-repeat;
}

.form_wrapper .error {
	background:url(/assets/images/form/error.png) 99% 16px no-repeat;
}


/*-------------------------------
	LABELS
-------------------------------*/

.form_wrapper .field label {
	display:inline-block;
	padding-right:20px;
	margin-bottom:6px;
	font-size:14px;
	font-weight:bold;
}

.form_wrapper .field label em {
	display:block;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
}

.form_wrapper .error label em {
	color:#C00;
}


/*-------------------------------
	GENERIC FORM ELEMENTS
-------------------------------*/

.form_wrapper input.text,
.form_wrapper select,
.form_wrapper textarea {
	display:block;
	width:240px;
	padding:6px;
	margin:0;
	border:solid 1px #666;
	border-radius: 4px;
	background:#efefef;
	font-family:inherit;
	font-size:13px;
	color:#333;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.form_wrapper .split input.text,
.form_wrapper .split textarea {
	width:218px;
}


/*---------------------
	TEXTAREA
---------------------*/

.form_wrapper textarea {
	width:466px;
	max-width:466px;
	height:160px;
	font-family:Arial, Helvetica, sans-serif;
}


/*---------------------
	SELECT
---------------------*/

.form_wrapper select {
	width:254px;
	padding:5px;
	line-height:23px;
}

.form_wrapper .split select {
	width:232px;
}


/*---------------------
	FOCUS
*/

.form_wrapper input.text:focus,
.form_wrapper select:focus,
.form_wrapper textarea:focus {
	border-color:#333;
	background:#fefefe;
	color:#20173F;
}

/*---------------------
	ERROR
*/

.form_wrapper .error input.text,
.form_wrapper .error select,
.form_wrapper .error textarea {
	border-color:#C00;
	background:#f3e4e4;
	color:#5a0505;
}


/*-------------------------------
	CHECKBOXES & RADIOS
-------------------------------*/

.form_wrapper .checkbox label,
.form_wrapper .radio label {
	margin-bottom:0;
}

.form_wrapper .checkbox ul,
.form_wrapper .radio ul {
	overflow:auto;
	height:100%;
}

.form_wrapper .checkbox ul li,
.form_wrapper .radio ul li {
	float:left;
	position:relative;
	margin:10px 10px 0 0;
}

.form_wrapper .checkbox ul input,
.form_wrapper .radio ul input {
	position:absolute;
	left:6px;
	top:6px;
	margin:0;
	padding:0;
}

.form_wrapper .checkbox ul label,
.form_wrapper .radio ul label {
	padding:6px 6px 6px 28px;
	margin:0;
	border:solid 1px #d2d2d2;
	border-radius:4px;
	background:#efefef;
	font-weight:normal;
	font-size:12px;
	cursor:pointer;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.form_wrapper .checkbox ul label:hover,
.form_wrapper .radio ul label:hover {
	background:#fefefe;
}


/*---------------------
	ERROR
*/

.form_wrapper .error .checkbox ul label,
.form_wrapper .error .radio ul label {
	border-color:#C00;
	background:#f3e4e4;
	color:#5a0505;
}


/*-------------------------------
	BUTTONS
-------------------------------*/

.form_wrapper button {
	display:inline-block;
	padding:6px;
	margin:0;
	border:none;
	border-radius:4px;
	background:#333;
	font-weight:bold;
	font-size:13px;
	color:#FFF;
	cursor:pointer;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.form_wrapper button:hover {
	background:#666;
}


/*-------------------------------
	MESSAGES
-------------------------------*/

.form_wrapper .messages,
.form_wrapper .messages span.messages_bg {
	display:none;
	position:absolute;
	left:0;
	top:0;
	right:15px;
	bottom:15px;
	background:url(/assets/images/form/white.png);
	background:rgba(255,255,255,0.6);
	text-align:center;
}

.form_wrapper .messages p {
	position:relative;
	display:none;
	max-width:260px;
	padding:10px 30px 10px 10px;
	border-radius:8px;
	background:#d2d2d2;
	z-index:100;
	
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.form_wrapper .messages p.active {
	display:inline-block;
}

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

.form_wrapper .messages p a.close {
	position:absolute;
	right:8px;
	top:8px;
	display:block;
	width:16px;
	height:16px;
	border-radius:8px;
	background:#FFF;
	color:#333;
	font-weight:bold;
	font-size:16px;
	text-align:center;
	
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
}

.form_wrapper .messages p a.close:hover {
	background:#000;
	color:#FFF;
	text-decoration:none;
}

/*---------------------
	ERROR MESSAGE
*/

.form_wrapper .messages .error {
	background:#C00;
	color:#FFF;
	text-align:left;
}

/*---------------------
	WAIT TO SEND
*/

.form_wrapper .messages .wait {
	padding:30px 10px 10px;
	background:#09F url(/assets/images/form/loading.gif) 50% 10px no-repeat;
	color:#FFF;
}

/*---------------------
	THANK YOU
*/

.form_wrapper .thankyou {
	display:none;
	overflow:auto;
}