/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
NEW FlexForm - form styles - s.gutierrez

The "flexform" is able to be styled completely for each specific form. These are the default values and can be copied and overridden on any new combo form etc. This will allow us to share one common form while having the ability to style it as needed.
  
Each section of the form is in it's own div with a class named after the field it represents. 
(Ex: .fname is the div surrounding the label and form field for the first name)

You can style the div as a whole (.fname), then target the label (.fname label) and/or form field type (.fname input).

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#flexform {margin:0em .5em;}
#flexform h3 {
	font-size: 1em;
	font-weight:normal;
	margin:0em 0em .8em 19em; /* left = width of label plus label padding - aligns h3 with inputs */
	padding:0em;
}
#defaultmessage {}/* if you don't want the default text at the top of the form, display:none; */

/* give the label a width to act like a td, float left so the input will sit next to label, clear left to clear the previous section and make a new "row" */
#flexform label {
	width:17.2em;
	float:left; 
	clear:left;
	padding-right:1em;
	font-weight:bold;
	font-size: 1.1em;
	color:#3e3e3e;
}

/* setting heights for form fields allows consistency across browsers, especially with positioning (although, IE might sometimes still need a little tweaking as usual */
#flexform input {height:1.3em;}
html>body #flexform select {height:1.7em;} /*ie7 doesn't work well with the height - cuts off text */

#flexform input, #flexform select, #flexform textarea {
	padding:.2em;
	margin-bottom:.7em;
	font-size: 1.1em;
	color: #3e3e3e;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#flexform .interestterm select  {/*override styles in dd control*/
	font-weight:normal; 
}
/* When IE works, input can be generically added here like textarea, then overridden for radio/checks */
#flexform textarea, #flexform select {
	background-color: #cae0ee;
	border: 1px solid #344e5d;	
}
/* IE ignores */
html>body #flexform input { 
	background-color: #cae0ee;
	border: 1px solid #344e5d;	
}
/* IE ignores - in IE, when applying background color and border from radio/checks its hard to see radio and check buttons */
html>body #flexform .cbagree input, html>body #flexform .citizen input, html>body #flexform .age input { 
	border: none;	
}
/*until IE gets the above right, we have to say which inputs we want to have background and borders */
*html #flexform .fname input, *html #flexform .lname input, 
*html #flexform .address input, *html #flexform .city input, 
*html #flexform .state input, *html #flexform .zip input, 
*html #flexform .email input, *html #flexform .phone input, 
*html #flexform .phonealt input, *html #flexform .grad input, 
*html #flexform .howheardother input, *html #flexform .collegename input, 
*html #flexform .collegemajor input {
	background-color: #cae0ee;
	border: 1px solid #344e5d;
}

/* Add space above and below any div */
#flexform .grad, #flexform .program, #flexform .cbagree, 
#flexform .comments, #flexform .saplocation, #flexform .citizen, #flexform .age { 
	clear:both;
	margin:.9em 0em;
}

/* labels with LONGER text - Give a large width to the label to account for the text, 
remove the float to allow the input to sit underneath to label */
#flexform .grad label, #flexform .program label, 
#flexform .cbagree label, #flexform .comments label, 
#flexform .location label, #flexform .saplocation label {
	float:none; 
	width:38.1em;
}
#flexform .citizen label, #flexform .age label {
	width:20.8em;
}
/*For items underneath/next to LONGER labels ///////////////////// */
	#flexform .gradym, #flexform .saplocation select, #flexform .location select {
		margin-left:18.2em;	
	}
	*html #flexform .saplocation select, *html #flexform .location select {
		margin-left:20.3em;	
	}
	#flexform .program select {
		margin-left:0em;	
	}
	#flexform .gradym label {
		float:none;	
		padding-right:.5em; padding-left:1.5em;
		font-weight:normal; 
		position:relative; bottom:.4em;
	}
	/* adds space above/below form fields under longer text */
	#flexform .gradym select, #flexform .program select, 
	#flexform .comments textarea, #flexform .location select, 
	#flexform .saplocation select {
		margin-top:.25em; margin-bottom:.4em;
	}
	#flexform .citizenRad label, #flexform .ageRad label {
		width:10px;
		font-weight:normal; 
		position:relative; 
		bottom:.1em; 
		padding-right:2em;
		padding-left:.2em;
		font-size:1.2em;
		float:none;
	}
	
/*aligns dashes in phone numbers*/
#flexform .phone span, #flexform .phonealt span {
	vertical-align:top;
}
*html #flexform .phone span, *html #flexform .phonealt span {
	vertical-align:middle;/* IE */
}
/*zero out padding for radio/checkboxes*/
#flexform .cbagree input, #flexform .citizenRad input, #flexform .ageRad input {
	padding:0; margin:0;
}



/* //// if needed set EXTRA styling needed for specific form fields //////// */
#flexform .zip input {
	width:7.5em;
}
#flexform .submit {
	clear:both; 
	margin-top:2.5em; 
	text-align:center;
}
/*override default flexform input styles*/
#flexform .submit input {
	background-color:#ffffff; 
	width:80px; 
	height:28px; 
}



/* THESE FLEX FORM STYLES ARE EXAMPLES OF HOW FURTHER CUSTOMIZATION CAN BE ACCOMPLISHED */
/* if needed completely REMOVE a form div you don't need */
	/* Ex: #flexform .zip  { display:none; } */


/* special PLACEMENT for specific form fields can be acheived using positioning - assuming the form field isn't too wide to fit on the same line */
	/*Ex:	
	#flexform .zip {
		position:absolute;
	}
	#flexform .zip label {
		position:absolute;
		top:-58px;
		left:36px;
		z-index:10000;
	}
	#flexform .zip input {
		position:absolute;
		top:-57px;
		left:280px;
		z-index:10000;	
	}*/
	/* IE needs 3 more pixels added from top - other browsers might be 1 px off but close enough*/
	/* *html #flexform .zip label, *html #flexform .zip input {top:287px;}*/
	 
	
	/* Can also add a customized image to divide b/w 2 labels ex: ('/')*/
	/*Ex:
	#flexform .zip label {
		background-image:url(/Schools/AIU/images/layout/flexform_divider.gif); 
		background-repeat: no-repeat;
		background-position: left center;
		padding-left:1em;	
	}*/
	

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
END NEW FlexForm - form styles
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/