/**
 * NICEFORMS.CSS
 * 
 * @note		This file holds core styles for layout and design of the niceforms wrappers.
 * 				These wrappers are inserted via JS and are around all form elements.
 * 				This document is commented in a method defined by cssDoc: http: //cssdoc.net/
 * @author		NavigationArts (tstephens@navigationarts.com)
 **/

@media screen {
	#content label {
		color: #333;
		font: normal 12px/12px Arial, Helvetica, sans-serif;
		cursor: pointer;
		display: block;
	}
		/**
		 * @note	contents of the label are written in the form field by JS.
		 **/
		#goToTheMap label,
		#receiveUpdates label {
			display: none; 
		}
	#content div.fieldGroup {
		overflow: auto; /* bad for opera, maybe a min height for certain types */
		padding: 0 0 10px 0;
	}
	#content div.fieldGroup div.field {
		overflow: auto; /* bad for opera, maybe a min height for certain types */
		padding: 0 0 1px 0;
	}
		#goToTheMap div.field,
		#receiveUpdates div.field {
			float: left;
		}

/**
 * @section	SELECT
 * @note	the SELECT is wrapped with two DIVs and the OPTIONS are written to DIV.jsSelectWrapperOptions.
 **/
	#content .jsSelectWrapper {
		width: 200px;
		height: 25px;
		background: url(../img/design/niceforms/selectBg.gif) repeat-x left top;
		font: 12px Arial, Helvetica, sans-serif;
	}
		/**
		 * @note	BG images are different in the right rail due to the different background color.
		 **/
		#contentRelated .jsSelectWrapper {
			background: url(../img/design/niceforms/selectBgRelated.gif) repeat-x left top;
			width: 250px;
		}
		/**
		 * @workaround	options were showing up on the left instead of the right.
		 **/
		* html #contentRelated .jsSelectWrapper {
			position: relative;
			z-index: 2000;
		}
		*+html #contentRelated .jsSelectWrapper {
			position: relative;
			z-index: 2000;
		}
	#content .jsSelectWrapperLeft {
		width: 8px;
		height: 25px;
		float: left;
		background: url(../img/design/niceforms/selectLeft.gif) no-repeat left top;
	}
		#contentRelated .jsSelectWrapperLeft {
			background: url(../img/design/niceforms/selectLeftRelated.gif) no-repeat left top;
		}
	#content .jsSelectWrapperRight {
		width: 26px;
		height: 25px;
		float: right;
		background: url(../img/design/niceforms/selectRight.gif) no-repeat left top;
	}
		#contentRelated .jsSelectWrapperRight {
			background: url(../img/design/niceforms/selectRightRelated.gif) no-repeat left top;
		}
	/**
	 * @note	this is the A that the user clicks to hide/show the drop down OPTIONS.
	 **/
	#content .jsSelectWrapperRight a {
		display: block;
		width: 26px;
		height: 25px;
	}
	#content .jsSelectWrapperCenter {
		width: 160px;
		margin-left: 5px;
		margin-right: 20px;
		color: #333;
		padding-top: 4px;
		cursor: pointer;
	}
		#contentRelated .jsSelectWrapperCenter {
			width: 240px;
		}
		* html #contentRelated .jsSelectWrapperCenter {
			width: 210px; /* @note	wrong width, but visually works for now */
		}
		*+html #contentRelated .jsSelectWrapperCenter {
			width: 216px;
		}
	/**
	 * @note	the container for the drop down OPTIONS. the OPTIONS are turned into an unordered list
	 * 			with each OPTION being an A.
	 **/
	#content .jsSelectWrapperOptions {
		display: none;
		position: absolute;
		margin-top: -1px;
		width: 200px;
		background: #fff;
		font-size: 12px;
		z-index: 1000;
		max-height: 200px;
		overflow-y: scroll;
	}
		#contentRelated .jsSelectWrapperOptions {
			width: 250px;
		}
			* html #contentRelated .jsSelectWrapperOptions {
				height: 200px;
				left: 0;
			}
			*+html #contentRelated .jsSelectWrapperOptions {
				height: 200px;
				left: 0;
			}
		#content .jsSelectWrapperOptions ul {
			border-top: 1px solid #ccc;
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#content .jsSelectWrapperOptions a {
			color: #333;
			text-decoration: none;
			display: block;
			padding: 3px 4px 3px 7px;
			border: 1px solid #ccc;
			border-width: 0 1px 1px 1px;
		}
		#content .jsSelectWrapperOptions a:hover,
		#content .jsSelectWrapperOptions a.selected {
			color: #000;
			background: #ddd;
			border-color: #ccc;
		}

/**
 * @section	CHECKBOX
 * @note	the checkbox is wrapped with a DIV. the DIV has a background image that indicates if the checkbox
 * 			is checked or not.
 **/	
	#content .jsCheckboxWrapper,
	#navSigninAccount .jsCheckboxWrapper {
		background: url(../img/design/niceforms/checkboxAccount.gif) 0 0 no-repeat;
		cursor: pointer;
		float: left;
		height: 13px;
		padding: 0 5px 0 0;
		width: 13px;
	}
	#navSigninAccount .jsCheckboxWrapper {
		padding: 0 2px 0 0;
	}
		#content .jsCheckboxWrapper.checked,
		#navSigninAccount .jsCheckboxWrapper.checked { background-position: 0 -12px; }

/**
 * @section	RADIO BUTTON
 * @note	much like the checkbox, it's wrapped in a DIV with a BG image.
 **/	
	#content .jsRadioWrapper {
		background: url(../img/design/niceforms/checkboxAccount.gif) 0 0 no-repeat;
		cursor: pointer;
		float: left;
		height: 13px;
		padding: 0 5px 0 0;
		width: 13px;
	}
		#content .jsRadioWrapper.checked { background-position: 0 -12px; }

/**
 * @section	SUBMIT BUTTON
 * @note	the following classes are inserted via JS. they turn the regular looking
 *			INPUT into a designed one. this is accomplished via two 'cap' (background)
 *			images in the WRAPPER SPANs, and a background image on the INPUT.
 **/
	#content .jsSubmitWrapperLeft,
	#content .jsButtonWrapperLeft {
		background: url(../img/design/niceforms/submitLeft.gif) top left no-repeat;
		display: block;
		height: 25px;
		padding: 0 0 0 7px;
		float: left;
	}
		#contentRelated .jsSubmitWrapperLeft,
		#contentRelated .jsButtonWrapperLeft {
			background: url(../img/design/niceforms/submitLeftRelated.gif) top left no-repeat;
			margin-left: 10px;
		}
		/**
		 * @workaround	IE6 double float bug.
		 **/
		* html #contentRelated .jsSubmitWrapperLeft,
		* html #contentRelated .jsButtonWrapperLeft {
			zoom: 1;
			margin-left: 5px;
		}
	
	#content .jsSubmitWrapperRight,
	#content .jsButtonWrapperRight {
		background: url(../img/design/niceforms/submitRight.gif) top right no-repeat;
		display: block;
		height: 25px;
		padding: 0 7px 0 0;
		float: left;
	}
		#contentRelated .jsSubmitWrapperRight,
		#contentRelated .jsButtonWrapperRight {
			background: url(../img/design/niceforms/submitRightRelated.gif) top right no-repeat;
		}
	
	#content .jsSubmitWrapperLeft .jsSubmitWrapperRight input,
	#content .jsButtonWrapperLeft .jsButtonWrapperRight input {
		background: url(../img/design/niceforms/submitBg.gif) repeat-x left top;
		border: none;
		color: #666;
		cursor: pointer;
		font: normal 12px/12px Tahoma, Arial, Helvetica, sans-serif;
		height: 25px;
		margin: 0;
		padding: 2px 0 6px 0;
	}
		#contentRelated .jsSubmitWrapperLeft .jsSubmitWrapperRight input,
		#contentRelated .jsButtonWrapperLeft .jsButtonWrapperRight input {
			background: url(../img/design/niceforms/submitBgRelated.gif) repeat-x left top;
		}
		/**
		 * @workaround	IE6 didn't like all these being grouped together.
		 **/
		* html #content .jsSubmitWrapperLeft .jsSubmitWrapperRight input,
		* html #content .jsButtonWrapperLeft .jsButtonWrapperRight input { overflow: visible; }
		*+html #content .jsSubmitWrapperLeft .jsSubmitWrapperRight input,
		*+html #content .jsButtonWrapperLeft .jsButtonWrapperRight input { overflow: visible; }

/**
 * @section	INPUT TEXT AND PASSWORD
 * @note	the following classes are inserted via JS. they turn the regular looking
 *			INPUT into a designed one. this is accomplished via two 'cap' (background)
 *			images in the WRAPPER SPANs, and a background image on the INPUT.
 **/
	#content .jsTextWrapperLeft,
	#content .jsPasswordWrapperLeft {
		background: url(../img/design/niceforms/textLeft.gif) top left no-repeat;
		display: block;
		height: 23px;
		padding: 0 0 0 6px;
		/*float: left;*/
	}
		#contentRelated .jsTextWrapperLeft,
		#contentRelated .jsPasswordWrapperLeft {
			background: url(../img/design/niceforms/textLeftRelated.gif) top left no-repeat;
			float: left;
		}
		#navSigninAccount .jsTextWrapperLeft,
		#navSigninAccount .jsPasswordWrapperLeft {
			background: url(../img/design/niceforms/textLeftAccount.gif) top left no-repeat;
			display: block;
			height: 18px;
			padding: 0 0 0 10px;
		}
	
	#content .jsTextWrapperRight,
	#content .jsPasswordWrapperRight {
		background: url(../img/design/niceforms/textRight.gif) top right no-repeat;
		display: block;
		height: 23px;
		padding: 0 6px 0 0;
		float: left;
	}
		#contentRelated .jsTextWrapperRight,
		#contentRelated .jsPasswordWrapperRight {
			background: url(../img/design/niceforms/textRightRelated.gif) top right no-repeat;
			float: left;
		}
		#navSigninAccount .jsTextWrapperRight,
		#navSigninAccount .jsPasswordWrapperRight {
			background: url(../img/design/niceforms/textRightAccount.gif) top right no-repeat;
			display: block;
			height: 18px;
			padding: 0 10px 0 0;
		}
	
	#content .jsTextWrapperLeft     .jsTextWrapperRight     input,
	#content .jsPasswordWrapperLeft .jsPasswordWrapperRight input {
		background: url(../img/design/niceforms/textBg.gif) repeat-x left top;
		border: none;
		color: #666;
		font: 12px/12px normal Tahoma, Arial, Helvetica, sans-serif;
		height: 15px;
		padding: 4px 0;
		width: 310px;
		float: left;
	}
		* html #content .jsTextWrapperLeft     .jsTextWrapperRight     input,
		* html #content .jsPasswordWrapperLeft .jsPasswordWrapperRight input { padding: 6px 0 2px 0; }
		*+html #content .jsTextWrapperLeft     .jsTextWrapperRight     input,
		*+html #content .jsPasswordWrapperLeft .jsPasswordWrapperRight input { padding: 6px 0 2px 0; }
		
		#contentRelated .jsTextWrapperLeft     .jsTextWrapperRight     input,
		#contentRelated .jsPasswordWrapperLeft .jsPasswordWrapperRight input {
			background: url(../img/design/niceforms/textBgRelated.gif) repeat-x left top;
		}
		
		#goToTheMap .jsTextWrapperLeft .jsTextWrapperRight input {
			width: 170px;
			padding: 6px 0 4px 0;
			font-size: 10px;
		}
		
		#receiveUpdates .jsTextWrapperLeft .jsTextWrapperRight input {
			width: 170px;
			padding: 4px 0 6px 0;
		}
		
		#navSigninAccount .jsTextWrapperLeft     .jsTextWrapperRight     input,
		#navSigninAccount .jsPasswordWrapperLeft .jsPasswordWrapperRight input {
			background: url(../img/design/niceforms/textBgAccount.gif) repeat-x left top;
			border: none;
			color: #fff;
			font: 10px/10px normal Tahoma, Arial, Helvetica, sans-serif;
			height: 10px;
			padding: 4px 0;
			width: 310px;
		}
			/**
			 * @workaround	to get the INPUTs to display within the SPANs without odd spacing.
			 * 				IE6 didn't like all these being grouped together.
			 **/
			* html #navSigninAccount .jsTextWrapperLeft     .jsTextWrapperRight     input,
			* html #navSigninAccount .jsPasswordWrapperLeft .jsPasswordWrapperRight input { float: left; }
			*+html #navSigninAccount .jsTextWrapperLeft     .jsTextWrapperRight     input,
			*+html #navSigninAccount .jsPasswordWrapperLeft .jsPasswordWrapperRight input { float: left; }

/**
 * @section	TEXTAREA
 * @note	two wrapper DIVs are inserted which contain 'cap' images to the left and right. the background
 * 			image of the TEXTAREA allows for the width to be flexible.
 **/
	#content .jsTextareaWrapperLeft {
		background: url(../img/design/niceforms/textareaLeft.gif) top left no-repeat;
		display: block;
		height: 150px;
		padding: 0 0 0 6px;
		width: 316px;
	}
	
	#content .jsTextareaWrapperRight {
		background: url(../img/design/niceforms/textareaRight.gif) top right no-repeat;
		display: block;
		height: 150px;
		padding: 0 6px 0 0;
	}
	
	#content .jsTextareaWrapperLeft .jsTextareaWrapperRight textarea {
		width: 309px;
		height: 142px;
		background: url(../img/design/niceforms/textareaBg.gif) left top repeat-x;
		border: none;
		padding: 4px 0;
		color: #666;
		font: 12px/12px normal Tahoma, Arial, Helvetica, sans-serif;
		display: block;
	}
		/**
		 * @workaround	needed hasLayout to make the BG image line up.
		 **/
		* html #content .jsTextareaWrapperLeft .jsTextareaWrapperRight textarea {
			float: left;
			overflow: hidden;
		}
		*+html #content .jsTextareaWrapperLeft .jsTextareaWrapperRight textarea {
			float: left;
			overflow: hidden;
		}
}