/*
	CSS code to layout forms and form elements
*/

@import url(form-progress.css);

/*****************************************************************************************
 *			Fieldset styling
 ****************************************************************************************/
 
/************************
 * style fieldsets
 ************************/
#main fieldset {
	margin: 2em 0;
	padding: 0;
	border: none;
	display: block;
}

#main fieldset fieldset {
	margin: 0;
}

/************************
 * style the legend 
 ************************/
#main fieldset legend {
	color: #333;
	font-weight: normal;
	font-size: 160%;
	margin: 0 0 7px 0;
	padding: 0;
	line-height: 1em;
}
@media all { /* not mac ie */
	* html #main fieldset legend {
		position: relative;
		left: -8px;
	}
		/* ie7 only */
	*:first-child+html #main fieldset legend {
		position: relative;
		left: -8px;
	}
}



/*****************************************************************************************
 *			2 Column form layout
 ****************************************************************************************/
 
/************************
 * styling for form items (make each one a row)
 ************************/
 
 /* generic form item */
#main .formItem {
	padding: 7px 0 7px 175px; /* padding-left is width of first column */
	position: relative;
	color: #333;
}

/* the first form item */
body #main .firstFormItem {

}
/* the first form item in a nested fieldset */
body #main fieldset fieldset .firstFormItem {

}

/* child form items */
#main .formItem .formItem {

}

/* the first child form item */
#main .formItem .firstFormItem {
	padding-top: 0;
}



/************************
 * styling for form item labels (make them the first column)
 ************************/
 
/* make the control label appear in the leftmost column */
#main .formItem label {
	width: 150px;		/* width of first (label) column */
	margin: -0.1em 0 0 -175px;
	float: left; display: inline;
	padding: 2px 0;
	font-weight: bold;
	color: #333;
	line-height: 1.2em;
	position: relative;
}

html #main .formItem .control label {
		float: none;
}

#main .formItem .formItem label {

}

/* the (required) image */
#main label img {
	position: absolute;
	right: -20px;
	top: 3px;
}


/************************
 * styling for an important form item
 ************************/

/* make the form item text bigger with extra padding */
#main .importantFormItem {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* adjust the height of the required image */
#main .importantFormItem label img {
	top: 18px;
}

/* adjust the label for the changed padding */
#main .importantFormItem label {

}

#main .importantFormItem .control {
	font-size: 130%;
}




/*****************************************************************************************
 *			Styling for control elements
 ****************************************************************************************/

/* top level control items */
#main .formItem .control {
	display: block;
}

/* nested controls */
#main .formItem .control .control {
	float: left; /* put them in a horizontal line */
	margin: 0 7px 0 0;
}


/************************
 * Default control item appearance
 ************************/
 
#main .textbox input {
	margin: 0;
	display: block;
	padding: 2px !important;
	font-size: 1.1em;
	border: 1px solid #999;
}

#main .formItem textarea {
	margin: 0;
	padding: 2px;
	border: 1px solid #999;
}
#main .formItem select {
	margin: 0;
	display: block;
	padding: 1px !important;
	font-size: 1.1em;
	border: 1px solid #999;
}

#main .formItem .control label {
	float: none;
	vertical-align: middle;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: normal;
}

#main .formItem .control input {
	vertical-align: middle;
	padding: 0;
}

#main .formItem .control .control label {

}

#main .formItem .control .control input {

}

/* only mac ie \*//*/
	* html #main .formItem input,
	* html #main .formItem textarea,
	* html #main .formItem select { display: inline !important; }
/* end hack */


/************************
 * Control widths
 ************************/
 
/* standard width controls */
#main .textbox input,
#main .formItem textarea,
#main .formItem .shortHelp {
	width: 250px;
}
#main .formItem select {
	width: 257px;
}

/* small control widths */
#main .textbox .short input,
#main .formItem .short textarea,
#main .formItem input.short,
#main .formItem textarea.short,
#main .formItem .short .shortHelp {
	width: 100px;
}
#main .formItem .short select
#main .formItem select.short {
	width: 107px;
}

/* wide control widths */
#main .textbox .wide input,
#main .formItem .wide textarea,
#main .formItem input.wide,
#main .formItem textarea.wide,
#main .formItem .wide .shortHelp {
	width: 350px;
}
#main .formItem .wide select,
#main .formItem select.wide {
	width: 357px;
}





/*****************************************************************************************
 *			Specific control styles
 ****************************************************************************************/

/************************
 * buttons
 ************************/

/* only mac ie \*//*/
* html #main .buttons .control .control { float: left; clear: none;}
/* end hack */

#main .buttons {

}


/************************
 * Radio button
 ************************/
/* ie / win specific fix */
@media all { 
	/* only win ie */
	* html #main .formItem span.control {
		height: 0;
	}
}

/************************
 * OR form items
 ************************/

#main .orFormItems {
	padding-left: 0;
	border: 1px dashed #ccc;
	padding-top: 0;
}

#main .orFormItems p {
	margin: 7px 0 7px 7px;
}

#main .orFormItems .formItem {
	padding-top: 32px;
	padding-bottom: 7px;
	background: url(../images/backgrounds/bg_formItem_or.gif) left top no-repeat;
}
#main .orFormItems .formItem label {
	margin-left: -168px;
}

#main .orFormItems .firstFormItem {
	background-image: none;
	padding-top: 7px;
}

#main .orFormItems .formItem .formItem {
	background-image: none;
	padding-top: 7px;
}

#main .orFormItems .formItem .firstFormItem {
	padding-top: 0;
}

#main .followingOrFormItem {

}


/************************
 * CONTAINER form items
 ************************/
#page #main .containerFormItem {
	padding-left: 0;
}




/*****************************************************************************************
 *			focus highlighting
 ****************************************************************************************/

/* style the label when the associated control has focus */
#main .formItem label.arbHasFocus {

}

#main .textbox input.arbHasFocus,
#main .textarea textarea.arbHasFocus {
	border: 1px solid #000;
}

#page #main .formItem select.arbHasFocus {
	border: 1px solid #000;
}


/*****************************************************************************************
 *			error highlighting
 ****************************************************************************************/
 
#main .errorItem label {
	color: #EA5200;
}

#main .errorItem input,
#main .errorItem textarea {
	border: 1px solid #EA5200;
	color: #EA5200;
}
#main .errorItem select {
	border: 1px solid #EA5200;
}




/*****************************************************************************************
 *			inline status messages
 ****************************************************************************************/
#main .formItem .status {
	margin: 0.5em 0 0 0;
}

#main .formItem .errorStatus {
	color: #EA5200;
	bac\kground: url(../images/icons/ico_form_error_inline.gif) 0 5px no-repeat;
	padding: 0 0 0 21px;
	display: block;
	line-height: 2;
	vertical-align: bottom;
}
@media all {
	* html #main .formItem .errorStatus { background-position: 3px 0; }
}




/*****************************************************************************************
 *			disabled controls
 ****************************************************************************************/
#main .disabled label {
	color: #666;
}

#main .disabled input,
#main .disabled textarea,
#main .disabled select {
	background-color: #eee;
	border: 1px solid #ccc;
	color: #666
}



/*****************************************************************************************
 *			help styling
 ****************************************************************************************/

/************************
 * short help
 ************************/

#content .formItem .shortHelp {
	font-size: 90%;
	color: #777;
}

#main .formItem .shortHelp p,
#main .formItem p.shortHelp {
	margin: 0;
	padding: 0;
}

/* help inside a control */
#main .formItem .control .shortHelp {
	margin-left: 0;
}

/************************
 * long help
 ************************/

/* no js styling for help text */
#content .formItem .longHelp {
	position: absolute;
	padding: 7px;
	background-color: #FFFAE6;
	width: 250px;
	color:#725A00;
	font-size: 90%;
	padding: 1px 0 0 10px;
	top: -3px;
	right: -267px;
	z-index: 5;
}

/* style the help icon */
#content .formItem .longHelpIcon {
	position: absolute;
	width: 24px;
	height: 24px;
	top: -3px;
	right: -27px;
	background: url(../images/buttons/but_information_small.gif) 3px 3px no-repeat;
}

#content .formItem .longHelpIcon p {
	position: absolute;
	top: -1000em;
	left: -1000em;
}

#content .formItem .longHelpIcon .longHelp {
	top: -3000px;
	left: 24px;
	background: url(../images/backgrounds/bg_form_help-top-left.gif) top left no-repeat;
}

#content .formItem .InnerThreeLongHelp {
	padding: 7px;
	background: url(../images/backgrounds/bg_form_help-bottom-right.gif) right bottom no-repeat;
}

#content .formItem .arbHover .longHelp {
	top: -1px;
}

#content .formItem .InnerThreeLongHelp p {
	position: static;
	margin: 0;
	padding: 0;
}






/*****************************************************************************************
 *			print link styling
 ****************************************************************************************/

/* we have an empty div with id=print-link in the html, hide it */
#main div#print-link {
	display: none;
}

/* javascript replaces the above div with an a tag with id="print-link" */
#main a#print-link {
	margin-left: auto;
	display: block;
	background-image: url(../images/buttons/but_print.gif);
	height: 23px;
	width: 97px;
}

/*****************************************************************************************
 *			misc styling
 ****************************************************************************************/

/************************
 * clearfix (float clearing) for controls
 ************************/
/*ClearFix for good browsers*/
html > body .formItem:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* only mac ie \*//*/
* html .control { display: inline-block !important; }
*//* end hack */

/* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac \*/
* html .formItem {height: 1%;}
.formItem {display: block;}
/* End hide from IE-mac */