/* 

	FORMS CSS
	
	pages: none
	media: all
	
	written by: Phil Thompson hello@philthompson.co.uk March 2007
	last edited: 12/12/2008 by Phil Thompson
	
	Table of Contents
	
	Form
		
		Paragraphs
		Fieldset
			Fieldset Fieldset
			Legend
			Help & instructions
			Labels
			Data entry
				input
				textareas
				drop down (select)
				checkboxes/radio buttons & labels
			Buttons
		
	Different types of forms:
		form.incognito/tables in forms
		
	
*/

/* USER FEEDBACK */

div.feedback{
	margin: 1em 10px;
}

div.feedback.error{
	background: #FDD;
}

div.feedback.success{
	background: #DFD;
}

	div.feedback h3,
	div.feedback p,
	div.feedback ul{
		padding: .5em 10px;
	}
	
	div.feedback ul{
		padding: 0 5px .5em;
	}
	
	div.feedback ul li{
		color: #000;
	}


/* Form */
form{
	background: #EEEEEE;
	border: 1px solid #DFDFDF;
	margin: 1em 10px;
}

	
	
	/* P */

	form p{
		padding: 5px 0;
	}

	/* Fieldset*/
	form fieldset{
		border: none;
		margin: 1em 0;
		padding: 10px; 
	}
	
		form fieldset fieldset{
			border: 1px solid #DFDFDF;
			clear: both;
			padding: .5em 10px;
		}
	
		/* Legend */
	
		form fieldset legend{
			font-size: 140%;
		}
		
		/* HELP & FEEDBACK */
		
		p.instructions{
			background: #EFEFEF;
			border-bottom: 1px solid #DFDFDF;
			clear: both;
			color: #333;
			margin: .5em 0 1em; 
			padding: .5em 5px 0;	
		}
		
		p.help{/* all dependent upon size of form elements and whether they're floated or not*/
			clear: none;
			float: right;
			padding: 0;
			margin: -1.5em 0 0;
			width: auto;
		}
		
		/* LABELS */
		
		form fieldset label{
			color: #333;
			display: block;
			font-weight: bold;
			margin: .25em 0 0;
		}
			/* Required field label */
			form fieldset label.required{
				background: transparent url('/img/forms/star.gif') 128px center no-repeat;
			}
			form fieldset label.highlighted{
				text-decoration: underline;
			}
			
		/* DATA ENTRY */
		
		/* Input */
		form fieldset input{
			border: 1px solid #A7A6AA;
			margin: 0 0 .25em;
			padding: 1px 2px;
			width: 170px;
		}
			/* Numerical input */
			form fieldset input.int{
				width: 3em;
			}
		
			form fieldset input[type="hidden"]{
				border: none;
			}
		
			form fieldset input:focus{
				background: #FFB;
				color: #333;
			}
			
			form fieldset input#slug{
				max-width: 17em;
			}
		
		/* Textarea */
		form fieldset textarea{
			border: 1px solid #A7A6AA;
			height: 100pxem;
			margin: .25em 0;
			padding: 1px 2px;
			width: 170px;
			float: left;
		}

		
			form fieldset textarea:focus{
				background: #FFB;
				color: #333;
			}
			
		/* CHECKBOXES/RADIO BUTTONS */
		form fieldset input.checkbox{
			border: none;
			clear: left;
			float: left;
			margin: .5em 10px .5em 0;
			width: 1em ;
		}
		
		/* CHECKBOXES/RADIO BUTTONS LABELS */
		form fieldset label.checklabel{
			clear: none;
			float: left;
			margin: 0 0 .5em;
			width: auto; /* IE6+ has trouble with this */
		}
		
		/* DROP DOWNS*/
		
		form fieldset select{
			border: 1px solid #A7A6AA;
			/* width should be slightly wider than textareas and inputs OR automatic */
		}
		
			form fieldset select option{
				margin-right: .5em;
			}
			
				form fieldset select option.child{
					text-indent: 5px;
				}
				
					form fieldset select option.grandchild{
						text-indent: 10px;
					}
		
				select option[selected="selected"]{
					background: #FFB;
				}
		
		/* BUTTONS */
		
		form fieldset input.button, 
		form fieldset button{
			clear: both;
			float: left;
			margin: .5em 0;
			width: auto;
		}
		
		a.button{
			/*background: #F0F0F0;
			border: 2px solid #848484;
			border-color: #FAFAFA #848484 #848484 #FAFAFA;
			color: #000;
			clear: both;
			float: left;
			font: 100% "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
			margin: .5em 0;
			padding: 0 5px;
			text-decoration: none;*/
		}
		
		/* Forms in table/Styleless forms (class="incognito") */
		form.incognito,
		form.incognito fieldset,
		td form, 
		td fieldset{
			background: transparent;
			border: none;
			margin: 0;
			padding: 0;
		}
	
		form.incognito fieldset,
		td fieldset{
			padding: 0 10px;
		}
		
		/* Errors */
		form div.field.error{
			background: #FDD;
			clear: both;
		}
		
			form div.field.error span.error{
				display: block;
			}
		
		form div.field.error input,
		form div.field.error textarea,
		form div.field.error select{
			border: 1px solid #F33;
		}