/* CLEAN FORM
/////////////////////////////*/

/*
KEY:
TL = Top Level Fieldset (e.g. the main fieldset containind text ans select elements)
SL = Sub Level Fieldset (e.g. a nested fieldset that will likely contain radio buttons or check-boxes)
*/

/* Remove on site-by-site basis */



/* General */
/***************************************************************************************/

	.cleanform { /*Form*/
		/*width:550px;*/	
		font-size:1.2em;
		margin:0; padding: 0;
	}

/***************************************************************************************/
/* END: General */


/* Fieldset */
/***************************************************************************************/

	.cleanform fieldset.primary{ /*TL wrapping fieldset*/
		padding: 0;
		margin: 0 0 0.7em 0;
		border: none;
		margin-top: -2em;
		position: relative !important;
		
		/* override */
		margin-top: -1em;
	}

/***************************************************************************************/
/* END: Fieldset */





/* Legend */
/***************************************************************************************/
	.cleanform fieldset.primary legend{ /*Legend of TL fieldset*/
		padding: 0;	margin: 0;
	}
	
		.cleanform fieldset.primary legend span.legendWrapper{ /*Legend wrapping span of TL fieldset*/
			font-weight:bold;
			position: relative !important;
			top: 2em;
			left: 0.7em;
			font-size: 1.4em;
			/*text-shadow: 2px 2px 2px #ddccb5;*/
			
			/* override */
			position: absolute;
			top: -9999px;
		}
		
		/* Remove the legend from clear format forms */
		.clearformat.cleanform fieldset.primary legend span.legendWrapper {
				position: absolute;
				top: -9999px;
			}

/***************************************************************************************/
/* END: Legend */





/* List */
/***************************************************************************************/
.cleanform fieldset.primary ol {/*List within TL fieldset*/
	padding: 0;	margin: 0; list-style: none;
	/*background: url(/ui/images/grad-bg-large.gif) repeat-x top; /*#dee8f4;*/
	padding:3.1em 0.7em 0.7em 0.7em;
	border:0px solid #dee8f4;
	margin:0 0 0.5em 0;
	overflow: auto;
	
	/* override */
	padding-top:1em;
}

	.cleanform fieldset.primary ol li {/*List item within TL fieldset - used to wrap label and input pairs*/
		padding: 0.2em;
		margin: 0 0 0.2em 0;
		/*border-bottom: 1px dotted #ccc;*/
		list-style: none;
		overflow: auto;
		clear: both;
		display: block;
		float: none;
		
	}

	    .cleanform fieldset.primary ol li.noLabel {/*List item within TL fieldset. Contains no label so label space is compensated for*/
		    margin-left: 35%;		
	    }

			.cleanform fieldset.primary ol li.noLabelPad {/*List item within TL fieldset. Contains no label so label space is compensated for*/
			    padding-left: 35%;		
		    }


			.vertical fieldset.primary ol li.noLabel {/*reset extra left padding for vertical form alignment*/
			    margin-left: 0;		
		    }
	
		.cleanform .radio ol li, .cleanform .checkbox ol li { /*List items within independendt radiobutton or checkbox fieldset*/
			padding: 0em;
		}
		
		.cleanform fieldset.primary ol li.first {/*First List item within TL fieldset. Spaced further down from legend*/
			border-top: 1px solid #ccc;
			padding-top: 0.5em;	
			display: block;	
		}
		
		.cleanform fieldset.primary ol li.break {/*Break List item to chunk the fieldset*/
			padding-top: 1em;	
		}
		
		
/***************************************************************************************/
/* END: List */





/* Label */
/***************************************************************************************/

	.cleanform fieldset.primary .text label{/* Label within .text list item (row) within TL fieldset. Exaples of text row would be input, textarea and select */
		padding:0;
		margin:0.3em 0;
		display: block;
		float: left;
		font-weight:bold;	
		text-align: right; 
		width: 30%; 
		padding-right: 5%;
	}
	
		.vertical fieldset.primary .text label, .vertical fieldset.primary label.error{/* reset styles for vertical form alignment*/
			display: block;
			float: none;
			padding-right: 0;
			margin:0.1em 0;
			text-align: left; 
			width: auto;
		}
	
	
		.cleanform fieldset.primary .text label:after{ /*Force colon onto the end of .text list item (row) label within TL fieldset*/
			/*content:':';*/
		}
/***************************************************************************************/
/* END: Label */





/* Input, Textares and Select */
/***************************************************************************************/

.cleanform fieldset.primary input, .cleanform fieldset.primary select, .cleanform fieldset.primary textarea {/* Common Input, Textares and Select properties within TL fieldset*/
    /*line-height:1.5em;*/
	margin: 0;
	padding:0.15em;
	display:block;
    font-size:1em;
	font-weight: bold;
    border:2px solid #ccddef;
    padding:3px;
    /*margin-right:1em;*/
	font-family: Arial, Helvetica, sans-serif;
}


.cleanform fieldset.primary .text input, .cleanform fieldset.primary .text select, .cleanform fieldset.primary .text textarea { /*Input, Textares and Select elements in .text list item within TL fieldset*/
    float: left;
	width:60%;
}
	.vertical fieldset.primary .text input, .vertical fieldset.primary .text select, .vertical fieldset.primary .text textarea { /*Input, Textares and Select elements in .text list item within TL fieldset*/
		float: none;
		width:95%;
	}

	.cleanform fieldset.primary .text input.short, .cleanform fieldset.primary .text textarea.short {/*Input, Textares elements as above but with .short applied*/
		width:40%;
	}
	
		.cleanform fieldset.primary .text input.veryshort, .cleanform fieldset.primary .text textarea.veryshort {/*Input, Textares elements as above but with .veryshort applied*/
			width:20%;
		}
	
	.cleanform fieldset.primary .text select.short {/*Select element as above but with .short applied*/
		width:auto;
	}
	
	.cleanform fieldset.primary .text input.upload {
		background: #fff;
		border: 2px solid #ccddef;
		padding: 5px;	
	}
	
.cleanform fieldset.primary .text textarea:focus,
.cleanform fieldset.primary .text input:focus {
	border: 2px solid #f9a61c;
}

/***************************************************************************************/
/* Input, Textares and Select */




/* Radiobuttons and checkboxes */
/***************************************************************************************/

	.cleanform .radio ol li, .cleanform .checkbox ol li {/* Radio and check-box group list-items. Keeping the centre line flush with other elements */
	    padding-left:35%;
	 }
	
	
	.cleanform fieldset.primary .radio input,
	.cleanform fieldset.primary .checkbox input { /* Radio and check-box items within .radio or .checkbox fieldsets */
	    width:auto;
	    border:none;
	    margin:0 1.5em 0 0;
	 }
	
	
	
	.cleanform fieldset.primary .radio label, .cleanform fieldset.primary .radio input,
	.cleanform fieldset.primary .checkbox label, .cleanform fieldset.primary .checkbox input { /* Radio items and labels items within .radio or .checkbox fieldsets */
	    display:inline;
	    margin:0 0.5em 0 0;
		font-size: 0.8em;
	}
	
	.cleanform .radio input, .cleanform .checkbox input {/* radio buttons or checkboxs within .radiobutton or .checkbox fieldsets */
	    margin:0 0.3em 0 0
	}

/***************************************************************************************/
/* END: Radiobuttons and checkboxes */

/* p */
/***************************************************************************************/

	.cleanform p {
	    line-height:1em;
	 }

/***************************************************************************************/
/* END: p */





/* Button */
/***************************************************************************************/

/* Button within TL fieldset */
/*
.cleanform fieldset.primary button { 
	margin:0;
	background:#e57010 url(images/button-bg.gif) repeat-x top left;
	border:0.1em solid #e57010;		
	font-size:1em;
	font-weight: bold;
	cursor:pointer;
	padding:0.3em;
	color:white;
}

    .cleanform fieldset.primary button:hover {
	    text-decoration: underline;
    }

    .cleanform button:active {
	    border-color:#fccc48;
    }*/

/***************************************************************************************/
/* END: Button */	





/* Required Fields */
/***************************************************************************************/

	.cleanform .requiredfieldmarker { /* Set against all primary labels for required elements in the form */
		color:#0057ad;
		font-weight:normal;
		font-size:0.8em;
	}
	
	.cleanform fieldset.primary label.error { /* Error messages on the form */
		color:#fff;
		font-weight:bold;
		font-size: 0.8em;
		padding: 2px;
		background: #990000;
		float: left;
		margin-left: 35%;
		
		/*width: auto;*/
		text-align: left;
		
		display: block;
		clear: both;
	}
	
		.vertical fieldset.primary label.error { /* Error messages on the form */
			margin-left: 0;	
		}
		
		
		.cleanform fieldset.primary .radio label.error, 
		.cleanform fieldset.primary .checkbox label.error {
			display: inline;
			float: none;
			margin-left: 0;	
		}
		
		


/***************************************************************************************/
/* Required Fields */





/* Errors */
/***************************************************************************************/

	.errorPanel{
		background: #f4dede;
		padding: 10px;
		border: 1px solid #660000;
		
		font-size: 80%;
		
		color: #000;
		
		display: none;
	}
	
		.errorPanel h4, a.errorLink{
			color:  #660000;
		}
		
		


/***************************************************************************************/
/* Errors */



.mceEditor  {
	display: block;
	clear: both;
}



/*

NOTES on further development

    - Text, select, textarea, label

- Independent radio button groups
- Independent check-box groups

	- you might want to have these multi-column
	- 

- Nested fieldsets
	with or without legend.
	- Want to float the check box next to the label so that the text doesn't wrap under



*/