/*
 * This styling allows for consistent forms using a liquid layout.
 * It's actually a 3 column layout but has been balanced for forms as follows:
 *    Left column: 36% width, left-aligned text, suggested use is for form labels.
 *    Mid column: 3% width, abuts against the left column, suggested use is for required field merkers.
 *    Right column: 60% width, left-aligned text, suggested use is for verbose instructions and data entry.
 * Changing the width percentages will affect all forms.
 * Note that the widths purposely do not add up to 100% (to avoid broken layouts caused by percentage rounding).
 */
	


/*
 * This is the outer container for a styled form.
 * This has a liquid layout so you may contain this form's DIV in a narrowe (eg. fixed width) DIV if you wish.
 *
 * The "bdbcformclear" div may follow a form to ensure that no disruption is caused by hanging floats.
 */

	DIV.bdbcform
	{
		float: left;
		border: solid 1px black;
		width: 100%;
		background-color: #eeeeee;
	}

	DIV.bdbcformclear
	{
		clear: both;
	}


/*
 * The bdbcform div should only contain sub-divs of class "divider" or "row"
 */

	DIV.bdbcform DIV.row
	{
		float: left;
		width: 98%;
		border: dashed 0px red;
		padding: 6px 1% 6px 1%;
	}

	DIV.bdbcform DIV.divider
	{
		float: left;
		width: 100%;
		margin: 10px 0px 5px 0px;
		border-top: dashed 1px #999999;
		padding: 0px;
	}


/*
 * A row div can contain certain combinations of the following classes...
 * A single "widecell" (full width)
 * OR
 * An optional "leftcell", followed by an optional "midcell", with an optional "rightcell".
 * OR
 * An optional "leftmidcell", with an optional "rightcell".
 *
 * Note: since the "rightcell" is right-aligned, it does not need blank left/mid/leftmid cells to line up.
 */

	DIV.bdbcform DIV.widecell
	{
		float: left;
		text-align: left;
		width: 100%;
	}

	DIV.bdbcform DIV.leftcell
	{
		float: left;
		width: 26%;
		text-align: left;
		/* background-color: #ffcccc; */
	}

	DIV.bdbcform DIV.midcell
	{
		float: left;
		width: 3%;
		text-align: left; /* Edit: 28/09/2010 after David explained that some columns have double asterisk and look better when lined up to the left */
		/* background-color: #ccffcc; */
	}

	DIV.bdbcform DIV.leftmidcell
	{
		float: left;
		text-align: left;
		width: 29%;
		/* background-color: #ffffcc; */
	}

	DIV.bdbcform DIV.rightcell
	{
		float: right;
		width: 70%;
		text-align: left;
		/* background-color: #ccccff; */
	}


/*
 * H3 elements should be used (within rows) to style form sub-headings.
 * P elements should be used within a cell to separate paragraphs of text, input controls, etc.
 * Default List styling is also overridden here.
 */

	DIV.bdbcform H3
	{
		font-size: 1.1em;
		font-weight: bold;
		margin: 0px;
	}

	DIV.bdbcform P
	{
		margin: 0px 0px 10px 0px;
	}

	DIV.bdbcform UL, OL
	{
		margin-left: 16px;
		padding-left: 0px;
	}

	DIV.bdbcform UL LI
	{
		list-style-type: square;
	}


/*
 * The following classes may be applied, as necessary, to elements within the form cells.
 * Suggested use is for class="wide" to be applied to <INPUT type="text"> and <TEXTAREA> elements.
 * The "lowimportance", "mediumimportance" and "highimportance" should be applied to paragraphs of text.
 *		Lowimportance is effectively plain text.
 *		Mediumimportance is a warning or vital instruction.
 *		Highimportance is notification of an error (including both data entry errors and system errors).
 * (eg.)
 *		<p class="lowimportance">Please enter the delivery address</p>
 *		<p class="mediumimportance">This must be the same as your billing address</p>
 *		<p class="highimportance">The address you entered does not match the billing address</p>
 */

	DIV.bdbcform .wide
	{
		width: 97%;
		margin: 0px;
	}

	DIV.bdbcform .halfwidth
	{
		width: 50%;
		margin: 0px;
	}

	DIV.bdbcform .lowimportance
	{
	}

	DIV.bdbcform .mediumimportance
	{
		font-weight: bold;
	}

	DIV.bdbcform .highimportance
	{
		font-weight: bold;
		color: red;
	}


/*
 * At the moment we feel that labels should not be highlighted any differently from regular text.
 * We especially do not like emboldening labels.
 *
 * On the other hand, it may be that right-aligned labels are preferred so that they become as close as possible to their corresponding data entry (in the right column).
 * To allow for this, please enclose pure label text in a DIV whose class is "labeltext".
 * This will allow us to reformat all of the labels if an alternative style is adopted.
 */

	DIV.bdbcform .labeltext
	{
		text-align: right;
	}
	
	DIV.bdbcform .validatortext
	{
		color: #990000;
		font-weight: bold;
	}


/*
 * This styling for specific form controls
 */

DIV.bdbcform INPUT
{
	font-family: Arial,Sans-Serif;
	font-size: 1em;
}

DIV.bdbcform TEXTAREA
{
	font-family: Arial,Sans-Serif;
	font-size: 13px;
	font-size: 1em;
}

/*
 * I don't like these hidden button but David insists on using them. So here's the associated styling...
 */

.hiddenbutton
{
	border-width: 0px;
	width: 0px;
	height: 0px;
	position: absolute;
}