@charset "utf-8";

/*
|--------------------------------------------------------------------------
| AMEDIA CREATIVE FRAMEWORK > CSS FORMS
|--------------------------------------------------------------------------
|
| @package		Amedia Creative
| @subpackage	CSS/HTML Framework
| @company		Amedia Creative, Inc.
| @phone		310/651/8733
| @fax			310/388/1210
| @author		Joey Avino
| @email		joey@amediacreative.com
| @link			http://www.amediacreative.com
| @copyright	2008 Amedia Creative, Inc.
|
*/

/*
|--------------------------------------------------------------------------
| AMEDIA CREATIVE FRAMEWORK > 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 { }
	.file span { }

	.dropdown span { }
	.textarea span { }

	
/*
|--------------------------------------------------------------------------
| AMEDIA CREATIVE FRAMEWORK > CSS FORMS > USER SPECIFIED 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 { width: 480px; }
		.val_class_holder { display: block; }

		/* ----- 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 {  width: 225px; }
		.global_input_wrapper div.right { width: 225px; }

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

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

		/* ----- Set your font and width attributes of your input here. -------------- */
		input { width: 215px; }

			/* ----- This class is used for the submit buttons of inputs -------------- */
			input.submit { 	width: 91px; height: 28px; }

			/* ----- On mouseover state decalred in HTML for submit buttons -------------- */
			input.submit_over { width: 91px; height: 28px; }

			/* ----- 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 { }
			.input span.right { }
			.input span.mid { }

		/* ----- 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 { height: 152px; }

			/* ----- Set your default textarea attributs here. -------------- */
			.textarea textarea { padding: 12px; height: 128px; overflow-y: auto; width: 470px; }

			/* ----- 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 { }
			.textarea span.right { }
			.textarea span.mid { width: 470px; }

		/* ----- Global dropdown class set on the div. -------------- */
		.dropdown { }

			/* ----- 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 { }
				.dropdown span.right { }
				/* ----- Unlike input and textarea, you must specifiy a width both here, and on the select. -------------- */
				.dropdown span.mid { width: 200px; height: 20px; }
				
					
				/* ----- Unlike input and textarea, you must specifiy a width both here, and on the mid class above. -------------- */
				.dropdown select { width: 215px; }





		/* ----- Validation Stars. -------------- */
		.global_input_wrapper .val_req_star { float: right; margin-top: -20px; position: relative;
												left: 10px; display: none !important; }



		/* ----- File Box. -------------- */
		iframe.upload_photo { width: 210px; height: 40px; /*margin-left: 30px;*/ }


			/* ----- On mouseover state decalred in HTML for submit buttons -------------- */
			input.submit_over { width: 91px; height: 28px; }

			/* ----- 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. -------------- */
			.file span.left { }
			.file span.right { }
			/* ----- Unlike input and textarea, you must specifiy a width both here, and on the select. -------------- */
			.file span.mid { width: 200px; }








/*
|--------------------------------------------------------------------------
| AMEDIA CREATIVE FRAMEWORK > CSS FORMS > User Preview Custom
|--------------------------------------------------------------------------
|
*/

	/* ----- User Preview. -------------- */
	#user_preview { width: 320px; }
		#user_preview .left { padding: 0; }						
		#user_preview .global_input_wrapper { width: auto; }
			#user_preview .global_input_wrapper div.left { width: 90px; }
				#user_preview .global_input_wrapper div.submit_wrapper { width: 90px; }
					#user_preview span.mid { width: 75px; }
						#user_preview .val_error span.mid { padding-left: 19px; width: 56px; }

					#user_preview input.submit { width: 100px; }
				#user_preview .global_input_wrapper div.left .submit { margin-top: -3px; }
				#user_preview .global_input_wrapper div.left .submit_over { margin-top: -3px; }











/*
|--------------------------------------------------------------------------
| AMEDIA CREATIVE FRAMEWORK > 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 { }
	.input span.input_focus_mid { }
	.input span.input_focus_right {	}
	.input_focus {							padding-left: 19px; width: 196px; }

	/* ----- Class used when a user clicks on a dropdown. -------------- */
	.dropdown span.dropdown_focus_left { }
	.dropdown span.dropdown_focus_mid {		padding-left: 19px; width: 196px; }
	.dropdown span.dropdown_focus_right { }

	/* ----- Class used when a user clicks on a textarea. -------------- */
	.textarea span.textarea_focus_left { }
	.textarea span.textarea_focus_mid {	}
	.textarea span.textarea_focus_right { } 
	.textarea textarea { }




	/* ----- 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 { }
					.val_error .input span.mid { }
					.val_error .input span.right { }
					.val_error .input input { padding-left: 19px; width: 196px; }




		/* ----- 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 { }
					.val_error .dropdown span.right { }
					.val_error .dropdown span.mid {			padding-left: 19px; width: 179px; }




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

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


		/* ----- Error messages for file. -------------- */

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



			/* ----- Error messages text that is displayed when a user inputs something incorrectly.. -------------- */
			.error, .error_visible { margin: 0px; padding: 0px; height: 16px;  }



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

/*
|--------------------------------------------------------------------------
| AMEDIA CREATIVE FRAMEWORK > 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 { }

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

			.input { }
				.input span { }
					input { border: 0px; background: none; padding: 3px 0px; outline: none; }
							input.submit, input.submit_over { cursor: pointer; }
					.input span.left { 	width: 5px; }
					.input span.right { width: 5px; }
					.input span.mid { }

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

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

			.file { }
				.file span { }
					.file span.left { width: 5px; }
					.file span.right { width: 5px; }
					.file span.mid { padding-top: 1px; cursor: pointer; }
						.file input.file_input { display: inline; position: absolute; left: 5px; top: 0px; z-index: 2;
											-moz-opacity: 0; filter: alpha(opacity: 0); opacity: 0; }

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