/* Common styles used in WebControls, PGE's customized extensions to server controls

Overview
========
All web controls will emit the "web_control_enevelope" class name first, then a classname 
that is specific to the type of control (e.g. "DateControl", "EmailControl"), and, finally, 
if specified in the control declaration or via run time code, a specific class name 
(using the CssClass property of the control).  So, for example, if no CssClass is explicitly 
set at design time for a Phone control, then the class will be rendered as 
"web_control_envelope PhoneControl". If a class is explicitly set, for example "MyPhoneClass", 
then it will render as "web_control_envelope PhoneControl MyPhoneClass".

Css Class Names
===============
Following is a list of class names that will automatically be emitted for server controls
from the WebControls library and the elements they are applied to:
	web_control_envelope		  - the span that wraps the whole thing
	web_control_label			  - the label text
	web_control_control_container - the container that houses the main control
	web_control_error			  - error messages
	web_control_header			  - the header
	web_control_suffix			  - the suffix 
	web_control_teaser			  - the teaser

How To / Basic idea
=================
The first section of this css file includes class definitions for the "highest level
classes" (i.e. the list above). 

The second section includes class definitions for classes that override the "highest
level classes" for a specific type of control. An example of the how a label might
be overriden for an EmailControl to be Aqua with a Lime background is as follows:
	.EmailControl .web_control_label
	{
		color: Aqua;
		background-color: Lime;
	}

So, the syntax is:
	.{control name} .{high-level style name}
	{
	}

For styling that is specific to some instances of a type of control (but not all),
create a class definition and declare that definition on the web control itself [in
the CssClass property]. For example to declare a purple and blue email control (where
the label text is blue and the control text is purple), create a class like the
following and put that className on the CssClass property of the control:
	.MyPurpleAndBlueEmail .web_control_label
	{
		color: Blue;
	}
	.MyPurpleAndBlueEmail .web_control_control_container input
	{
		color: Purple;
	}

In the above case, the class names rendered on the control will be:
	class="web_control_envelope EmailControl MyPinkAndBlueEmail"

The Blue color of the label will override the Aqua color set in the above
EmailControl class, but the background will still be lime green. The text
color within the rendered "input" control will be Purple.

How To Create Multiple Controls with Aligning Labels/Controls
=============================================================
The trick to get control labels to align to a specific width is to put the label into the
left margin of the web_control_control_container. So, make the left margin of the
control container and the width of the label the same size. Do as follows:

	.tabular .web_control_label
	{
		width: 130px;
	}
	
	.tabular .web_control_control_container
	{
		margin: 0 0 0 130px;
	}

And then, in the aspx, use the "tabular" class name in the CssClass attribute
of each control you want to align this way:
    <nrwc:EmailControl ID="EmailControl1" runat="server" Label="asdfxyz" CssClass="tabular" />
    <br />
    <nrwc:PhoneControl ID="PhoneControl1" runat="server" Label="Phone No." CssClass="tabular" />
    <br />
    <nrwc:StateControl ID="StateControl1" runat="server" Label="State or Province" CssClass="tabular" />
    <br />
    <nrwc:DateControl ID="DateControl1" runat="server" Label="Date" CssClass="tabular" />


*/



/* Used to style the container around the web control and all
of its child controls */
.web_control_envelope
{
	font-family:Arial, Helvetica, Sans-Serif, Times New Roman;
	clear: both; /* default to unfloating this item and surrounding content */
	width: 500px; /* default to arbitrary width. Pages will generally want to override this. */
}

.web_control_envelope div.clear, .web_control_envelope .web_control_error_messages
{
	clear: both;
}

.web_control_container img
{
	float: left;
}

.web_control_error
{
	color: red;
	font-size: 12px;
	font-weight:bold;
	width:auto;
	float: left; 
	display: block;
}

.web_control_header
{
	font-size: 12px;
	color: #242424; 
	display: block;
}


/* Generally, the web_control_control_container will float just to the right of the
   label control. The label control's "float: left" will cause this. */
.web_control_control_container
{
	/* see: http://www.velocityreviews.com/forums/t588432-how-to-prevent-a-floatleft-div-from-wrapping.html for
       an explanation of the overflow: hidden. The idea is to prevent the web_control_control_container from
	   wrapping to the line below the label. */
	overflow: hidden;
}


.web_control_container
{
	clear: left;
}

.web_control_label
{
	font-size: 12px;
	color: #242424; 
	float:left;
	display: block;
	float: left;
}

/* if a label control is in an element classed as web_control_label or is classed itself
	as web_control_label, give it a top margin to bring the text down to align to the
	bottom of the input control */
.web_control_label label, label.web_control_label, span.web_control_suffix, .web_control_phone_extension_label
{
	margin-top: 6px;
}

.composite_control_separator { margin-top: 3px; }

/* Used to style the text that appears after a control, typically a TextBox.
Suffix text is often used as an example of intended usage. 
StyleGuide: Caption? no direct correlation... I winged it! I shrunk the web_control_label and lightened it
*/
.web_control_suffix
{
	font-size: 10px;
	color: #616161; /* colorGray2 */
    padding-left: 6px;
}

/* Used to style another bit of text that appears before any label. */
.web_control_teaser
{
}


/* begin definition of styles specific to RadioListControl control */

.RadioListControl_Vertical .web_control_label
{
    /* remove the float */
    float: none;
    display: inline; 
}

.RadioListControl_Vertical .web_control_control_container label,
	.RadioListControl_Horizontal .web_control_control_container label
{
	font-size: 12px;
	color: #242424; /* colorGray1 */
}

.RadioListControl_Vertical table
{
	display: inline;
}
/* end definition of styles specific to RadioListControl control */


.EmailControl input
{
    width: 220px;
}

.PhoneControl .web_control_phone_extension_label
{
	font-size: 12px;
	color: #242424; 
	font-weight: normal;
}

.PhoneControl input.areacode,
.PhoneControl input.regioncode
{
    width: 24px;
}

.PhoneControl input.phonenumber
{
    width: 30px;
}

.PhoneControl input.extension
{
    width: 50px;
}

.DateControl input.year
{
    width: 30px;
}

.DateControl input.month,
.DateControl input.day,
.DateControl input.hour,
.DateControl input.minute,
.DateControl input.second
{
    width: 15px;
}

.SSNControl input.ssn1
{
    width: 24px;
}

.SSNControl input.ssn2
{
    width: 15px;
}

.SSNControl input.ssn3
{
    width: 30px;
}

.Zipcode5Control input
{
	width: 40px;
}
/*
KC - commented out until it's confirmed that we use the progress bar.
.ProgressBarControl
{
    position:relative;
    z-index:3;
    border-style:None;
    width:300px;
    text-align:center;
}

.ProgressBarControl br
{
    clear: both;
}

.ProgressBarControl .progress_text
{
    position:absolute;
    z-index:3;
    top:0px;
    left:0px;
    width:100%;
    text-align:center;
}

.ProgressBarControl .progress_bar
{
    position:absolute;
    z-index:1;
    top:20px;
    height:15px;
}

/ width is dynamic depending on the progress /
.ProgressBarControl .progress_bar_done
{
    left:0px;
}

/ left is dynamic depending on the progress /
.ProgressBarControl .progress_bar_remaining
{
    width:1%;
}
*/
/* sometimes the label area needs to be supressed */
/*.no_label .web_control_control_container
{
	margin-left: 0px;
}*/
.no_label .web_control_label
{
	width: 0px;
}