﻿/* City of Jacksonville UI Framework 
   Stylesheet:	forms.css
   Description:	This stylesheet creates basic styles for form elements.
   Author:		Richard Baker; richb@coj.net
                Sherry McGuire; smcguire@coj.net
   Modified:	05/15/2008  */

/* WIDTHS - these may need to be chagned based on design.
-------------------------------------------------------------------------------- */
	fieldset.vert ol li label				{width:10em;} 			/* width of label to accomodate text of 'average' text lengths. */
	fieldset.vert ol li.btn					{margin-left:10.9em;}   /* margin-left to line up under controls */
	fieldset.vert ol.option li				{margin-left:10em;} 	/* Must match label width above. Make optons line up since the <input> comes before the <label> */
	fieldset.vert ul.error 					{margin-left:11.5em;} 	/* Make errors line up.  = Label width + 1em (for bullet gutter) + .0em+/- just for aesthetics */
	fieldset.vert ol li span.error			{margin-left:13.52em;}	/* Margin-left = ((font-size * error-font-percentage) * (font-size / label-width-in-ems)) ex: ((13px * 0.8)*(13px / 10em)) */
	.multiline								{width:50%; height:5em;}/* Make mutliline textboxes have room for entry */

/* Generic / All Forms ***********************************************************
-------------------------------------------------------------------------------- */
	fieldset 								{}
	fieldset .trim							{padding:0 3px;}

/* Verticle Form *****************************************************************
-------------------------------------------------------------------------------- */
	fieldset.vert							{border:0;}
	fieldset.vert ol						{}
	fieldset.vert ol li						{margin:8px 0px; overflow:auto; clear:both;} /* overflow:auto - Forces LI to wrap the floated label. Seems to be FFX only */  /* clear:both    - Forces LI to see vertical space; but does not wrap */																				
	fieldset.vert ol li.first				{}
	fieldset.vert ol li.last				{}
	fieldset.vert ol li label				{float:left; text-align:right; padding:0 10px 0 0;} /* see WIDTHS section ABOVE */
	fieldset.vert ol li input				{}
	fieldset.vert ol li span.error			{display:block; overflow:hidden;}
/* Options mixed with other form elements */
	fieldset.vert ol li.option				{}
	fieldset.vert ol li.option label		{}
	fieldset.vert ol li.option label.prompt	{float:none; display:inline; width:auto; text-align:left; padding:0 15px 0 0px;}
	fieldset.vert ol li.option input		{}
	fieldset.vert ol li.option span.error	{display:inline; margin-left:.4em;}
/* 'Option' Form elements if they're in a stand alone block */
	fieldset.vert ol.option					{}
	fieldset.vert ol.option li				{margin-top:2px; margin-bottom:2px; display:block;} /* see WIDTHS section ABOVE */
	fieldset.vert ol.option li.first		{}
	fieldset.vert ol.option li.last			{}
	fieldset.vert ol.option li label		{float:none; display:inline; width:auto; text-align:left; padding:0 0 0 5px;}
	fieldset.vert ol.option li input		{}
	fieldset.vert ol.option li span.error	{display:inline; margin-left:.4em;}
/* errors */
	fieldset.vert ul.error 					{}/* see WIDTHS section ABOVE */

/* Horizontal / Wrapping Form ****************************************************
-------------------------------------------------------------------------------- */
	fieldset.horiz							{border:0;}
	fieldset.horiz ol						{}
	fieldset.horiz ol li					{float:left; margin:0px 15px 5px 0; white-space:nowrap; overflow:hidden;} /* Height to allow for span.error */
	fieldset.horiz ol li.single				{float:none;} /* Must clear the float to prevent the LI from collapsing and ignroing some width formatting of elements inside */
	fieldset.horiz ol li.first				{}
	fieldset.horiz ol li.last				{margin-right:0;}
	fieldset.horiz ol li label				{display:block;}
	fieldset.horiz ol li span.error			{display:block; white-space:normal; height:auto;}
	fieldset.horiz ol li.btn				{padding-top:17px;}
/* Options mixed with other form elements */
    fieldset.horiz ol li span.option label  {float:none; display:inline !important; width:auto; text-align:left; padding:0 15px 0 5px;}
    
    
/* 'Option' Form elements if they're in a stand alone block */
	fieldset.horiz ol.option				{}
	fieldset.horiz ol.option li				{}
	fieldset.horiz ol.option li.first		{}
	fieldset.horiz ol.option li.last		{}
	fieldset.horiz ol.option li label		{display:inline;}
	fieldset.horiz ol.option li input		{}

/* Errors (General) **************************************************************
-------------------------------------------------------------------------------- */
	fieldset ul.error,
	fieldset span.error						{color:#f00;}
/* Error block - unordered list */
	fieldset ul.error						{margin:.5em 0 .5em 2em;}
	fieldset ul.error li					{list-style: disc outside;}
/* Inline error - span */
	fieldset span.error						{font-size:80%;}

/* Field Specifics ***************************************************************
-------------------------------------------------------------------------------- */
	.multiline								{}/* see WIDTHS section ABOVE */

/* Common Field Widths ***********************************************************
-------------------------------------------------------------------------------- */
	.zip5									{width:3.2em;}
	.zip4									{width:2.7em;}
	.mi										{width:1.2em;}
	.streetNum								{width:6em;}
	.streetName								{}
	.streetDir								{}
	.city									{}
	.ph3									{width:2em;}
	.ph4									{width:2.5em;}
	.phext									{width:3em;}
