/*****
 *****	This file contains the CSS information for the Base skin for Auto Lists
 *****	and Auto Forms within Smart Forms.
 *****
 *****	To create a new Smart Form skin, copy this file into the Application's theme
 *****	and name it as SmartForm_[SkinName].css.  All instances of "Base_" must be
 *****	relaced with "[SkinName]_".
 *****
 *****/
 
/*****
 *****	First, the Auto Form:
 *****/
 
.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_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;
	background-color: #eaf1fd;
}

.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.
*****/
{
	margin-bottom: 12px;
}

.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;
	padding: 4px;
	background-color: #e2ecfd;
	margin: 2px;
	border-top: solid 1px #f0f0f0;
	border-left: solid 1px #f0f0f0;
	border-right: solid 1px #c0c0c0;
	border-bottom: solid 1px #c0c0c0;
}

.Base_AF_Field[granted="true"]
{
	background-color: #affab4;
}

.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
/*****
/*****	This applies to an DIV that wraps a form label when the field is designated
/*****	that the label is left-aligned.
*****/
{
	float: left;
	padding-top: 2px;
	width: 150px;
	text-align: right;
	padding-right: 4px;
}

.Base_AF_FieldLabelWrapper[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
/*****
/*****	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[valid="false"]
{
	color: Red;
}

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

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

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

.Base_AF_FieldInputWrapper[formsect="2"]
{
}

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

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

/**********
/**********	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_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;
}

/*****
 *****	Now for the Auto List
 *****/
 
.Base_AL_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_AL_ActionConfirmation
/*****
/*****	This applies to a DIV inside the user feedback div that holds a form
/*****	action confirmation message.
*****/
{
	color: Green;
}

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