/************************************************************************************************/
/*																																															*/
/*	This is the "Base" skin for the CABS AutoForm.																							*/
/*																																															*/
/*	To create a new skin, copy this file into the site's App_Theme folder and name it will the	*/
/*	mask AF_[Skin].css.  All instances of "Base_" in this file should be replaced with					*/
/*	"[Skin]_".  All available CSS classes (selectors) available are listed here, so the					*/
/*	included comments should be complete.																												*/
/*																																															*/
/************************************************************************************************/

.Base_AF
/*****
/*****	This class applies to the entire form.  It is implemented via a DIV
/*****	that wraps the whole shabang.
*****/
{
	margin-bottom: 12px;
	padding: 12px;
	position: relative;
}

.Base_AF_TitleBar
/*****
/*****	This applies to a DIV that wraps both the title and the menu.
*****/
{
	background-color: Silver;
	position: relative;
	height: 35px;
}

.Base_AF_Title
/*****
/*****	This applies to a DIV that wraps the text for the title.  This DIV
/*****	is embedded inside the title bar DIV.
*****/
{
	color: Navy;
	font-size: 130%;
	/* font-weight: bold; */
	position: absolute;
	left: 8px;
	top: 6px;
}

.Base_AF_Menu
/*****
/*****	This applies to a DIV that wraps all of the controls in the form menu.
/*****	This DIV is embedded inside the title bar DIV after the title DIV.
*****/
{
	position: absolute;
	top: 7px;
	right: 8px;
}

.Base_AF_UserFeedback
/*****
/*****	This applies to a DIV that appears after the title bar DIV only when there
/*****	is a validation failure, action confirmation, or action failure message set.
*****/
{
	margin: 18px;
	padding: 12px;
	border: solid 1px Navy;
}

.Base_AF_ValidationFailure
/*****
/*****	This applies to a DIV inside the user feedback div that holds a form
/*****	input validation failure message.
*****/
{
	color: Red;
}

.Base_AF_ActionConfirmation
/*****
/*****	This applies to a DIV inside the user feedback div that holds a form
/*****	action confirmation message.
*****/
{
	color: Green;
}

.Base_AF_ActionFailure
/*****
/*****	This applies to a DIV inside the user feedback div that holds a form
/*****	action failure message.
*****/
{
	color: Red;
}

.Base_AF_FormInfo
/*****
/*****	This applies to a DIV that follows the user feedback DIV, and holds an
/*****	informational message for the user.  If the message is not present, this
/*****	is not present.
*****/
{
	background-color: #e0e0e0;
	font-style: italic;
	margin: 8px;
	padding: 4px;
	padding-left: 25px;
	padding-right: 25px;
	font-size: 100%;
	font-family: Monospace;
	border: dotted navy 1px;
}
.Base_AF_FormInfo:hover
{
	border: solid red 1px;
}

.Base_AF_FormWrapper
/*****
/*****	This applies to a DIV that follows the form info DIV, and wraps the rest of
/*****	the form.
*****/
{
}

.Base_AF_SectionWrapper
/*****
/*****	This applies to a DIV that wraps a section of the form.
*****/
{
	margin-top: 6px;
	margin-bottom: 6px;
}

.Base_AF_SectionWrapper[formsect="1"]
/*****
/*****	This applies to the DIV that wraps ONLY the FIRST section of the form.
/*****	(The same effect can be obtained by using the first-child pseudo-element,
/*****	but using the formsect attribute allows you to select the first, second, etc.
/*****	section.  Note, too, that the formsect attribute can also be used for 
/*****	section labels, fields, field labels, field input wrappers, and field
/*****	inputs.
*****/
{
	padding: 0;
	border: none;
}

.Base_AF_SectionLabelWrapper
/*****
/*****	This applies to a DIV that wraps the label for a form section.
*****/
{
}

.Base_AF_SectionLabel
/*****
/*****	This applies to a SPAN that wraps the label for a form section.
*****/
{
	font-size: 120%;
	font-weight: bold;
}

.Base_AF_SectionLabel[helpavailable="true"]
/*****
/*****	Section Labels and Field Labels support the attribute "helpavailable".  If true,
/*****	there is an attached RadTooltip.  Use this attribute to alter the label.
*****/
{
	border-bottom: dotted blue 1px;
	cursor: help;
}

.Base_AF_Field
/*****
/*****	This applies to a DIV that wraps a row on the form.  This wraps both the label
/*****	and the form field (which is also in a DIV - see below).
*****/
{
	position: relative;
}

.Base_AF_Field[valid="false"]
/*****
/*****	Checking the valid="false" attribute can be done on the Field, Field Label, 
/*****	Field Input Wrapper, and Field Input.
*****/
{
	/* border: dotted #ff8888 1px; */
}

.Base_AF_FieldLabelWrapper_la
/*****
/*****	This applies to an DIV that wraps a form label when the field is designated
/*****	that the label is left-aligned.
*****/
{
	position: absolute;
	left: 0;
	top: 1px;
	width: 150px;
	text-align: right;
	padding: 1px;
}

.Base_AF_FieldLabelWrapper_la[formsect="2"]
/*****
/*****	This applies to an DIV that wraps a form label when the field is designated
/*****	that the label is left-aligned.
*****/
{
}

.Base_AF_FieldLabel_la
/*****
/*****	This applies to an SPAN that wraps a form label when the field is designated
/*****	that the label is left-aligned.
*****/
{
	color: Maroon;
}

.Base_AF_FieldLabel_la[valid="false"]
{
	color: Red;
}

.Base_AF_FieldLabel_la[helpavailable="true"]
{
	cursor: help;
	border-bottom: dotted 1px blue;
}

.Base_AF_FieldLabel_la[required="true"]
{
	font-weight: bold;
}

.Base_AF_FieldInputWrapper_la
/*****
/*****	This applies to a DIV that wraps a form field when the field is designated
/*****	that the label is left-aligned.
*****/
{
	position: relative;
	margin-right: 190px;
	left: 165px;
	min-height: 26px;
}

.Base_AF_FieldInputWrapper_la[formsect="2"]
{
}

.Base_AF_FieldInput_la
/*****
/*****	This applies to the form input control when the field is designated that the
/*****	label is left-aligned.
*****/
{
}

.Base_AF_FieldInput_la[valid="false"]
{
	background-color: #ffdddd;
}

.Base_AF_FieldLabelWrapper_ra
/*****
/*****	This applies to a DIV that wraps a form label when the field is designated
/*****	that the label is right-aligned.
*****/
{
	position: absolute;
	width: 145px;
	right: 0;
	top: 4px;
	text-align: left;
}

.Base_AF_FieldLabel_ra
/*****
/*****	This applies to a SPAN that wraps a form label when the field is designated
/*****	that the label is right-aligned.
*****/
{
	color: Maroon;
}

.Base_AF_FieldLabel_ra[valid="false"]
{
	color: Red;
}

.Base_AF_FieldLabel_ra[helpavailable="true"]
{
	cursor: help;
	border-bottom: dotted blue 1px;
}

.Base_AF_FieldLabel_ra[required="true"]
{
	font-weight: bold;
}

.Base_AF_FieldInputWrapper_ra
/*****
/*****	This applies to a DIV that wraps a form field when the field is designated
/*****	that the label is right-aligned.
*****/
{
	position: relative;
	margin-right: 150px;
	left: 0px;
	text-align: right;
}

.Base_AF_FieldInput_ra
/*****
/*****	This applies to the form input control when the field is designated that the
/*****	label is right-aligned.
*****/
{
}

.Base_AF_FieldLabelWrapper_ta
/*****
/*****	This applies to a DIV that wraps a form label when the field is designated
/*****	that the label is top-aligned.
*****/
{
}

.Base_AF_FieldLabel_ta
/*****
/*****	This applies to a SPAN that wraps a form label when the field is designated
/*****	that the label is top-aligned.
*****/
{
	color: Maroon;
}

.Base_AF_FieldLabel_ta[valid="false"]
{
	color: Red;
}

.Base_AF_FieldLabel_ta[helpavailable="true"]
{
	cursor: help;
	border-bottom: dotted blue 1px;
}

.Base_AF_FieldLabel_ta[required="true"]
{
	font-weight: bold;
}

.Base_AF_FieldInputWrapper_ta
/*****
/*****	This applies to a DIV that wraps a form field when the field is designated
/*****	that the label is top-aligned.
*****/
{
}

.Base_AF_FieldInput_ta
/*****
/*****	This applies to the form input control when the field is designated that the
/*****	label is top-aligned.
*****/
{
}

.Base_AF_FieldInput_ta[valid="false"]
{
	background-color: #ffdddd;
}

.Base_AF_FieldInputWrapper_nl
/*****
/*****	This applies to a DIV that wraps a form field when the field is designated
/*****	that there is no label present.
*****/
{
}

.Base_AF_FieldInput_nl
/*****
/*****	This applies to the form input control when the field is designated that there
/*****	is no label present.
*****/
{
}

/**********
/**********	The following classes are used for the help panels in the in-page admin form.
/**********	They are not yet programmatically added or configured.  That would make it
/**********	a TBD.
**********/

.Base_AF_HelpPanel
{
	width: 325px;
}

.Base_AF_HelpPanelTitle
{
	font-weight: bold; 
	background-color: Navy; 
	color: Yellow; 
	padding: 3px;
}

.Base_AF_HelpPanelContent
{
	padding: 6px;
}

.Base_AF_ToolTip
{
	width: 350px;
}

.Base_AF_ReqIndicator
/*****
/*****	This is used on a DIV that contains a "* - Required" message, which is displayed
/*****	only if/when there are required fields present.
/*****	The FormMode must be set for user input.
*****/
{
	font-weight: bold;
	color: Maroon;
	margin-top: 18px;
}

.Base_AF_WildcardIndicator
/*****
/*****	This is used on a DIV that contains a "# - Wilecards (*) allowed" message, which is displayed
/*****	only if/when there are wildcard fields present.
/*****	The FormMode must be set for searching.
*****/
{
	font-weight: bold;
	color: Maroon;
	margin-top: 18px;
}

.Base_AF_TabStrip
/*****
/*****	If there are tabs, then a tab strip is rendered inside a DIV with this class.
*****/
{
	margin-top: 12px;
}

.Base_AF_TabFolder
/*****
/*****	If there are tabs, each section of the form that is to be in a tab folder will
/*****	be wrapped in a DIV with this class.
*****/
{
	border: solid 1px silver;
	padding: 18px;
}

.Base_AF_SecondaryCommand
/*****
/*****	If a control has a secondary command, it is rendered as a text span with an
/*****	onclick event, using this class.
*****/
{
	text-decoration: underline;
	font-size: 90%;
	cursor: pointer;
	color: Blue;
}

.Base_AF_SecondaryCommand:hover
{
	color: Red;
}

.Base_AF_SecondaryCommand[calculating="true"]
{
	cursor:wait;
}