@charset "UTF-8";

/*
FORMS 
	By Darren Kovalchik
	Button styles adapted from Kevin Hale's writeup on Particle Tree:
		http://particletree.com/features/rediscovering-the-button-element/
	
VERSION HISTORY
v2.3
	- Various optimizations
	- Removed all hacks
v2.2
	- Changing back error location to be inline with inputs
v2.2
	- Various tweaks
v1.1
	- Uses inline blocks instead of floats
v1.0
	- Initial release

USAGE
	<div>
		<input name="name" type="text" /><span class="error">error</span>
		<label for="name">Name</label>
	</div>
	
	- Each element should be wrapped in a div or span with its corresponding label and/or error.
		- Divs and Spans will act as expected, while containing the elements within.
	- Wrap checkboxes and radio buttons with the class "checkbox."
	- To use styled butttons, wrap button groups with the class "buttons."
		- Currently, there is a black box around the submit button in IE because IE "highlights?" the submit button when the form is active. Unsure how to fix.
	- Fieldsets can be wrapped around everything to indicate what that portion of the form does.
		- Top level fieldsets have a default of no border and block level which will display like a general heading.
		- Nested fieldsets are set to float with a border to make a smaller box around the elements.
			- It is assumed that a nested fieldset will likely contain a group of radiobuttons/checkboxes or closely related inline inputs, whereas top level fieldsets are more general.
	- Elements are set to a specific color and font-family to improve the default appearance.
		- Inheritance was considered:
			- Inheritance is not supported by IE.
			- To set inherited styles before importing forms.css you'd have to import a seperate stylesheet because imorts must be declared before styles.
		- Therefore, to modify default font settings, just copy the "Fonts" settings below to your stylesheet.
	- Errors and Colors
		- Inputs and textareas recieve a slight highlight on focus in browsers other than IE.
		- Inputs and textareas with a class of "required" will display with a light blue background if empty on page load.
			- This does not work in IE6 and IE7 does not fully support the textarea styles.
			- An asterik was originally consiered for indicating required fields, but due to problems with line height in IE was discarded. The highlighting seems slightly more elegant anyway.
			- However, since users may not immediately recognize the purpose of a highlighted field, required fields should also be indicated elsewhere. I use "(required)" in the label.
		- Inputs and textareas with a class of "error" will display with a light red background.
			- This class would be applied by server side code on a repost.
*/
	

/* General */
		
	/* Set Line Height */
	form {
		line-height:1; }
	
		
/* Positioning */
	
	/* Div wrappers for each element */
	form div, form span {
		padding:5px 0; }
	
	/* Span wrapper for placing elements on a single line */
	form span {
		display:inline-block; }
	
	/* Bump the label below the input */
	label {
		display:block;
		color:#999; cursor:pointer; }
	
	/* Change style of checkbox labels */
	.checkbox label {
		display:inline; }
		
			
/* Styles */
		
	/* Groups and Labels */
		
		/* Set style of fieldset to a standard for all browers */
		fieldset {
			margin:5px 0;
			padding:5px;
			border:none; border-top:1px solid #CCC; }
		
		/* Nested fieldsets have a border and float */
		fieldset fieldset {
			display:inline-block;
			border:1px solid #CCC; }
		
		/* Legends are a bold slightly larger size */
		legend {
			margin-left:-15px;
			font-weight:bold; font-size:1.2em; }
		
		/* Nested legends have a normal font size */
		fieldset fieldset legend {
			font-size:1em; }	
	
	/* Inputs */
	
		/* Normalizes display and gets rid of system styled select boxes
		 * Overflow is only for the text area in ie, but does not need a seperate rule as it doesn't effect anything else
		 * Set width to 200px just to standardize things */
		input, textarea, select {
			margin-right:10px;
			border-width:1px; width:200px;
			font-family:Arial, sans-serif; font-size:1em; border-color:#999 #CCC; }
			
		/* Changing the width of check-boxes by specific IDs to prevent some cross-browser issues. */
			
		#deletelogo, #accept, #displayEvents, #displayDeals, #displayAttractions, #displayHappyhours, #login, #deleteimage {
			width: 20px;
			}
			
		/* Explicitly set the font color */ 
		input, textarea, select, legend, form .checkbox label {
			color:#333; }
		
		/* Apply overflow value so IE doesn't needlessly put scrollbars on textareas */
		textarea {
			overflow:auto; }
		
		/* Set select width back to auto */
		select {
			width:auto; }
		
		/* Explicitly set font family for IE7- */
		textarea {
			font-family:Arial, sans-serif; }
		
		/* Input Colors and Behaviors
		 * Not all behaviors work in all browsers */
			
			/* Error - Marked as important to keep other rules from overiding */
			input.error, textarea.error {
				background-color:#FFEEEE !important; }
				
			/* Focus - Marked as important to keep other rules from overiding */
			input:focus, textarea:focus {
				background-color:#F6F8FB !important; }
			
			/* Required Fields */
			
				/* Color all required inputs */
				input.required {
					background-color:#EAF0FF; }
				
				/* IE7+ If a required input has a value, color the background white */
				input.required[value*=''] {
					background-color:#FFF; }
		
	/* Other */
		
		/* Error message */
		form span.error, span.error, form div.error, div.error, form span span, form div span {
			padding:0;
			color:#FF0000; }
		
		/* Make sure error messages within a block div have a display of block */
		form div.errorBlock .error {
			display:block; }

	
/* Buttons */

	/* General */
		
		/* Set button styles
		 * Style links to look like buttons */
		form .buttons input, form .buttons a {
			display:inline-block;
			padding:1px 7px; width:auto;
			overflow:visible; font:inherit; line-height:1.3; text-decoration:none; font-weight:bold; cursor:pointer;
			color:#565656; background-color:#F5F5F5; border-width:1px; border-style:solid; border-color:#EEE #DEDEDE; }
		
		/* Adjust padding for buttons links
		 * Is not quite tall enough in IE7- */
		form .buttons a {
			padding:2px 7px; }
			
				
	/* Behaviors and Colors
	 * Not all behaviors work in all browsers */
	
		/* Standard */
		
			form .buttons input, form .buttons a {
				color:#336699; }
			
			form .buttons input:hover, form .buttons a:hover {
				background-color:#DFF4FF; border-color:#C2E1EF; color:#336699; }
			
			form .buttons input:active, form .buttons a:active {
				background-color:#6299C5; border-color:#6299C5; color:#FFF; }
		
		/* Positive */
		
			form .buttons input.positive, form .buttons a.positive {
				color:#529214; }
				
			form .buttons input.positive:hover, form .buttons a.positive:hover {
				background-color:#E6EFC2; border-color:#C6D880; color:#529214; }
				
			form .buttons input.positive:active, form .buttons a.positive:active {
				background-color:#529214; border-color:#529214; color:#FFF; }
		
		/* Negative */
		
			form .buttons input.negative, form .buttons a.negative {
				color:#d12f19; }
				
			form .buttons input.negative:hover, form .buttons a.negative:hover {
				background:#FBE3E4;	border-color:#FBC2C4; color:#D12F19; }
				
			form .buttons input.negative:active, form .buttons a.negative:active{
				background-color:#D12f19; border-color:#D12f19; color:#FFF; }
		
		/* Disabled */
		
			form .buttons input[disabled="disabled"], form .buttons input[disabled="disabled"]:hover {
				color:#CCC; background-color:#F5F5F5; border-color:#EEE; cursor:default; }
				
	/* Faux link
	 * Sometimes you may need to have a button/form which looks like a link */
	input.link {
		display:inline; margin:0;
		padding:0; width:auto; border:none;
		background-color:transparent; color:#0000FF; text-decoration:underline; cursor:pointer; }