/******************************************************************************
 * FORM.CSS
 * Classes for laying out form controls in a table
 * WARNING!  Users should not rely on these styles when entering HTML
 * 
 * A form is laid out with a table in the following patterns
 * GRID - uses the table.grid pattern for *spreadsheet* style editing
 * DIALOG - uses either a table.groupbox (bordered) or a table.formbox (borderless) pattern
 * 
 * All form containers use vertical-align: top for the form elements to align
 *
 * Much of the CSS is designed to normalize the controls between the different browsers. 
 * For example, div.pad-text wraps input[type="text"].
 * 
 * NEVER set the border on any widgets (button, input, select, textarea) to ensure OS look
 * Font-sizes are not specified.  They are determined by the cascade and the definitions in base.css
 */

/* use these wrappers for controls that need to align vertically with other controls  */
/* by using divs to normalize them, the table container can apply padding evenly */
div.pad-button  { margin: 0px; }
div.pad-checkbox { margin: 0px; }
div.pad-plain { margin: 3px 0px; } /* used for plain text (no controls) */
div.pad-icons { margin: 4px 0px; }
div.pad-icons img { display: inline !important; }
div.pad-radio { margin: 0px; }
div.pad-select { margin: 0px; }
div.pad-text { margin: 0px; }
/* Don't use for w100 since any margin setting freaks out IE */
div.pad-textarea { margin: 0px; }

/* improves FF, IE (!6). no effect on SF, OP */
input[type="checkbox"],
input[type="radio"] { vertical-align: middle; }

/* Firefox adjustments */
.gecko input, 
.gecko textarea { padding: 2px 4px 0px 4px; }
.ff3 input, 
.ff3 textarea { padding: 1px 2px; }
.gecko div.pad-checkbox,
.gecko div.pad-radio { margin: 3px 0px; }
.gecko button,
.gecko input[type="button"],
.gecko input[type="submit"],
.gecko input[type="reset"] { padding: 0px .4em; }
.gecko input[type="checkbox"],
.gecko input[type="radio"] { margin: -2px .3em 2px 0px; }
.gecko option { padding: 0px 5px; }
.ff3 select { padding: 1px 0px; }

/* Internet Explorer adjustments */
.ie div.pad-plain { margin: 4px 0px; }
.ie div.pad-checkbox,
.ie div.pad-radio { margin: .1em 0px; }
.ie7 input { padding: 1px 0px 1px 4px; }
.ie6 input { padding: 1px 3px 1px 3px; }
/* input[type=] touchups don't work on IE6 */
.ie input[type="button"],
.ie input[type="submit"],
.ie input[type="reset"] { padding: 0px; }
/* when .w100 wraps a div.pad-text, input.w100 is off by 2px */ 
/* watch out for side effects when .w100 wraps a div.pad-text and a plain input */ 
.ie td.w100 div.pad-text { margin-right: 2px; } 
.ie7 textarea { padding: 2px 0px 2px 5px; }
.ie6 textarea { padding: 2px 0px 2px 4px; }
/* alas, IE ignores padding on options */
.ie select { margin-top: 1px; }
.ie option { padding: 0px 7px; }

/* Opera adjustments */
.opera input { padding-left: 2px; }
.opera textarea { padding-left: 2px; }
.opera input[type="checkbox"],
.opera input[type="radio"] { margin: 0px .3em 0px 0px; }
.opera button,
.opera input[type="button"],
.opera input[type="submit"],
.opera input[type="reset"] { padding: 0px .4em; }
/* a 10px L padding fixes opera */
.opera select { padding: 1px 10px 1px 0px; }
.opera option { padding-left: 2px; }

/* Safari adjustments */
.safari input { padding-left: 4px; }
.safari textarea { padding-left: 3px; }
.safari div.pad-checkbox,
.safari div.pad-radio { margin: 2px 0px; }
.safari input[type="checkbox"],
.safari input[type="radio"] { margin: 0px .3em 0px 0px; vertical-align: baseline;}
.safari button	{ padding: .2em .4em; }
/* optimized for 10pt font */
.safari div.pad-select { margin-top: 1px; }
.safari option { padding: 0px .3em; }

/* Fix the inheritance model for fonts on form controls 
 * IE* doesn't inherit fonts or fontsizes for form elements, so we have the following hack:
 */
.f12 button, .f12 input, .f12 label, .f12 select, .f12 textarea { font-size: 12pt; }
.f11 button, .f11 input, .f11 label, .f11 select, .f11 textarea { font-size: 11pt; }
.f10 button, .f10 input, .f10 label, .f10 select, .f10 textarea { font-size: 10pt; }
.f9 button, .f9 input, .f9 label, .f9 select, .f9 textarea { font-size: 9pt; }
.f8 button, .f8 input, .f8 label, .f8 select, .f8 textarea { font-size: 8pt; }

/* touchups for input.w100 and textarea.w100 controls that size to fit their container */
/* change the box model so width:100% uses the right parent dimensions */
textarea.w100, input.w100 { box-sizing: border-box; -moz-box-sizing: border-box; }

/* IE* is hard-wired to content-box so use the 99% hack */
.ie input.w100, .ie textarea.w100 { width: 99%; }

/* OP w100 textarea is smaller than it's text so touch it up */
.opera td.w100 div.pad-text  { margin-right: 4px; }

/* a formbox is a single cell borderless table of form controls */
/* used for popups or forms / pages that already provide a border pattern */
table.formbox td {
	border-width: 0px;
	padding: 1px 1px;
}

/* groupbox is a single cell bordered table that emulates a windows or mac groupbox */
/* used for for long, complex full-page forms that emulate a traditional dialog box */
table.groupbox td { 
	background-color: #F5F5F5;
	border: solid 1px #E1E1E1;
	padding: 4px 4px;
}

/* nested inside a formbox or groupbox to invisibly layout the controls */
table.controls td {
	padding: 4px 4px;
	vertical-align: top;
}

/* only force hide the border of a table.controls that is inside the groupbox */
/* so the groupbox can be nested inside a table.controls */
table.groupbox td table.controls td		{ border-width: 0px !important; }

/* a controls cell that contains a nested table splits the vertical padding in half */
table.controls td.table	{ padding: 4px 0px; }
table.controls td.table td	{ 
	background-color: inherit;	/* IE Ignores */
	border-width: 0px;
	color: inherit;				/* IE Ignores */
	padding: 0px 4px; 
}

/* prefix is for currency symbols and other right-justified column text before the value */
table.controls td.prefix { padding-right: 0px; text-align: right; }
/* for cells that should be centered */
table.controls td.center { text-align: center;}

/* touch up padding - overrides touchup.css to use vertical form px spacing */
table.controls .p, table.controls .pad { padding: 4px 4px !important;}
table.controls .pad-top { padding-top: 4px !important; }
table.controls .pad-top2 { padding-top: 8px !important; }
table.controls .pad-right { padding-right: 4px !important; }
table.controls .pad-bottom { padding-bottom: 4px !important; }
table.controls .pad-bottom2 { padding-bottom: 8px !important; }
table.controls .pad-left { padding-left: 4px !important; }