@charset "utf-8";

/*
|--------------------------------------------------------------------------
| Food TV > Front-End > CSS Forms
|--------------------------------------------------------------------------
|
| @package		Food TV
| @subpackage	Frontend
| @company		Scripps Interactive.
| @phone		(212) 741-0700 x112
| @fax			(212) 741-4700
| @author		Joey Avino
| @email		javino@gabriels.net
| @link			http://www.gabriels.net
| @copyright	2008 Scripps Interactive.
| @requires		mootools.1.2.js
|
*/

/*
|--------------------------------------------------------------------------
| Food TV > Front-End > CSS Forms > Images
|--------------------------------------------------------------------------
|
| Declares all global images and some positioning.
| Additional positioning can be found following this section.
|
| A user using this framework would change this.
| NOTE: Do not change the names of these classes.
|
*/

	input.submit { 			 }
	input.submit_over { 	 }
	.input span { 			 }

	.dropdown span { 		background: url('../../../images/layout/forms/form_inputs.gif') no-repeat top left; }
	.textarea span { 		background: url('../../../images/layout/forms/form_inputs.gif') no-repeat top left; }

	
/*
|--------------------------------------------------------------------------
| Food TV > Front-End > CSS Forms > User Specifed Attributes
|--------------------------------------------------------------------------
|
| Use this section to change items on the forum custom to the wb site.
| NOTE: Do not change the names of these classes.
|
*/

	/* ----- Default wrapper for your input table. -------------- */
	/* ----- This value should be set in the page specific css found in extensions. -------------- */
	.global_input_wrapper {  }
		.global_input_wrapper span { height: 21px; }
		.global_input_wrapper label { white-space: nowrap; }
		.val_class_holder { display: block; }
		.input_table { padding: 5px; }





		/* ----- Left and Right columns in your input table. -------------- */
		/* ----- Input tables usually always have two columns. -------------- */
		/* ----- You may nest the HTML differently for different layouts, but the CSS remains consistant. -------------- */
		.global_input_wrapper div.left { }
		.global_input_wrapper div.right { }





		/* ----- Default height for your spans should be the height you want your inputs. -------------- */
		.global_input_wrapper span { }





		/* ----- Default spacer used between inputs. -------------- */
		.global_input_wrapper .spacer { height: 12px; }





		/* ----- Set your font and width attributes of your input here. -------------- */
		input { font: 12px Arial, Helvetica, sans-serif; color: #4A4B5D; }
			.watch input { background-position: 0px -148px; width: 72px; height: 19px; margin: 10px 0px; }

			/* ----- This class is used for the submit buttons of inputs -------------- */
			input.submit { width: 90px; height: 27px; font: bold 12px Arial, Helvetica, sans-serif; color: #383b4a; border: 0px; }
				#whats_for_dinner input.submit { background-position: 0px -54px; margin-left: 35px; }
				.edit input.submit { background-position: 0px -104px; width: 44px; height: 27px; padding: 0px; }
				#email_lightbox input.submit { background-position: 0px -288px; width: 61px; padding: 0px; }

			/* ----- On mouseover state decalred in HTML for submit buttons -------------- */
			input.submit_over { }

			/* ----- Inputs that scale horizontally in any browser. -------------- */
			/* ----- Left and right sides may have rounded corners. -------------- */
			/* ----- The input class is used on the div, and not on the input box. -------------- */
			.input span.left { 		background-position: 0px -136px;  }
			.input span.right { 	background-position: -474px -136px; }
			.input span.mid { 		background-position: -5px -136px; }






		/* ----- Set the height of the total text area here. -------------- */
		/* ----- The textarea class is used on the div, and not on the input box. -------------- */
		.textarea span {  }

			/* ----- Set your default text area attributs here. -------------- */
			.textarea textarea { width: 160px; height: 81px; overflow-x: hidden; overflow-y: auto; }

			/* ----- Textareas that scale horizontally in any browser. -------------- */
			/* ----- Left and right sides may have rounded corners. -------------- */
			/* ----- The textarea class is used on the div, and not on the textarea box. -------------- */
			.textarea span.left { background-position: left -209px; width: 5px; height: 87px; }
			.textarea span.right { background-position: right -209px; width: 5px; height: 87px; }
			.textarea span.mid { width: 160px; background-position: -5px -209px; height: 81px; padding-top: 5px; }






		/* ----- Global dropdown class set on the div. -------------- */
		.dropdown { }
			.dropdown span { height: 22px; padding-top: 5px; float: left; }

			/* ----- Use this div to display your custom styling attributes. -------------- */
			/* ----- You should not apply styling attributes directly to the select, apply them here (.mid). -------------- */
			#dropdown_label { }
			.dropdown_label { }

				/* ----- Selects that scale horizontally in any browser. -------------- */
				/* ----- Left and right sides may have rounded corners. -------------- */
				/* ----- The dropdown class is used on the div, and not on the input box. -------------- */
				.dropdown span.left { background-position: 0px -60px; width: 5px;  }
				.dropdown span.right { background-position: -130px -60px; width: 23px;  }
				/* ----- Unlike input and textarea, you must specifiy a width both here, and on the select. -------------- */
				.dropdown span.mid { width: 120px; background-position: -5px -60px; height: 22px; padding-top: 5px;  }
				
					
				/* ----- Unlike input and textarea, you must specifiy a width both here, and on the mid class above. -------------- */
				.dropdown select { width: 150px; height: 27px; padding: 5px;  cursor: pointer; }
					#programmes select { width: 90px;  overflow: hidden;  }
					#videos .dropdown select { width: 90px;  overflow: hidden;  }










/*
|--------------------------------------------------------------------------
| Food TV > Front-End > CSS Forms > Error Messages
|--------------------------------------------------------------------------
|
| Use this section to display custom messgaes which appears ON the actual input.
| NOTE: Do not change the names of these classes.
|
*/

	/* ----- This can be used to switch backgrounds and icons for forums. -------------- */

	/* ----- Class used when a user clicks on an input. -------------- 
	.input span.input_focus_left {			background-position: 0px -122px; }
	.input span.input_focus_mid {			background-position: -3px -122px; }
	.input span.input_focus_right {			background-position: -589px -122px; }
	.input_focus {							padding-left: 19px; width: 196px; cursor: pointer; }

	/* ----- Class used when a user clicks on a dropdown. -------------- 
	.dropdown span.dropdown_focus_left {	background-position: 0px -100px; }
	.dropdown span.dropdown_focus_mid {		background-position: -3px -100px; padding-left: 19px; width: 181px; }
	.dropdown span.dropdown_focus_right {	background-position: -574px -100px; }

	/* ----- Class used when a user clicks on a textarea. -------------- 
	.textarea span.textarea_focus_left {	background-position: 0px -340px; }
	.textarea span.textarea_focus_mid {		background-position: -5px -340px; }
	.textarea span.textarea_focus_right {	background-position: -589px -340px; } 
	.textarea textarea { cursor: pointer; } */





	/* ----- Error messages for inputs. -------------- */
			/* ----- Class used when a user fills out an input incorrectly. -------------- */
			/* ----- This class is applied to the div which wraps the input class. -------------- */
			.val_error .input { }
				.val_error .input { }
				.val_error .error {						text-indent: 0px; }
					.val_error .input span.left {		background-position: left -297px; }
					.val_error .input span.mid {		background-position: -4px -297px; }
					.val_error .input span.right {		background-position: -474px -297px; }
					.val_error .input input {			padding-left: 19px; width: 141px; }





		/* ----- Error messages for dropdowns. -------------- */

			/* ----- Class used when a user fills out a dropdown incorrectly. -------------- */
			/* ----- This class is applied to the div which wraps the dropdown class. -------------- 
			.val_error .dropdown { }
				.val_error .dropdown { }
				.val_error .error {							text-indent: 0px; }
					.val_error .dropdown span.left {		background-position: left -144px; }
					.val_error .dropdown span.right {		background-position: -474px -144px; }
					.val_error .dropdown span.mid {			background-position: -3px -144px; padding-left: 19px; width: 141px; } */





		/* ----- Error messages for textarea. -------------- */

			/* ----- Class used when a user fills out a dropdown incorrectly. -------------- */
			/* ----- This class is applied to the div which wraps the dropdown class. -------------- */
			.val_error .textarea { }
				.val_error .textarea { }
				.val_error .error {								text-indent: -0px; }
					.val_error .textarea span.left {			background-position: left -349px; }
					.val_error .textarea span.mid {				background-position: -5px -349px; }
					.val_error .textarea span.right {			background-position: right -349px; }



			/* ----- Error messages text that is displayed when a user inputs something incorrectly.. -------------- */
			.error, .error_visible { 	font: 10px Arial, Helvetica, sans-serif; color: #e66455;
										margin: 0px; padding: 0px; height: 16px;  }










/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

/*
|--------------------------------------------------------------------------
| Food TV > Front-End > CSS Forms > Necessary Attributes
|--------------------------------------------------------------------------
|
| Do not edit below this line. Experienced CSS developers only.
|
*/

	/* ----- This class is referenced in JS as a place holder to change the div. -------------- */
	/* ----- No form attributes should be applied to it. -------------- */
	.val_class_holder { }

	form {visibility: visible/*hidden*/; }

		.global_input_wrapper { text-align: left; }
			.global_input_wrapper span { display: block; display: inline; float: left; }

			.input { width: 100%; }
				.input span { display: block; display: inline; float: left; }
					input { border: 0px; background: none; padding: 2px 0px; outline: none; width: 160px; }
							input.submit, input.submit_over { cursor: pointer; }
					.input span.left { 	width: 4px; }
					.input span.right { width: 4px; }
					.input span.mid { }

			.textarea { height: 100%; }
				.textarea span { }
					.textarea textarea { background: none; border: 0px; outline: none; }
					.textarea span.left { width: 4px; }
					.textarea span.right { width: 4px; }
					.textarea span.mid { }
					textarea { resize: none; overflow: hidden; }

			.dropdown { }
				.dropdown_label { }
				.dropdown span.left { width: 5px; }
				.dropdown span.mid { }
				.dropdown span.right { }
				#dropdown_label { cursor: pointer; }
					.dropdown select { display: inline; position: absolute; left: -3px; top: 0px; z-index: 2;
											-moz-opacity: 0; filter: alpha(opacity: 0); opacity: 0; cursor: pointer; }
					select { cursor: pointer; }

			.error { text-indent: -9999px; }
			.error_display { text-indent: -9999px; }