@charset "utf-8";


#FormContainer {		/*This is the parent of the <form>, usally a wrapping div.  Name it whatever you want, but keep in mind the following*/
	position:relative;		/*NOTE: You need to give this element a positioning context to constrain the loading overlay (during ajax)*/
	padding: 10px 5px;	    /*NOTE: Left and right padding on this element is reccommended for responses from the server side script.*/
	min-height:290px;       /*NOTE: Using a min-height on this element looks better when the ajax loading overlay is applied.  Not supported in ie6*/
	margin-top:15px;
	margin-left:30px;
	height:490px;
	width: 628px;           /*Use width to make room for validation error messages*/
	background-image: url(images/formback.jpg);
	background-repeat:no-repeat;
}

#FormContainer p {
	text-align:center;
/*		  margin-bottom: 2em; */
	  }
#FormContainer h1 {
	font-size: 16px;
	color: #333;
	/* 	margin-bottom: 0; */
	margin-left:170px;
	font-weight:bolder;
	text-align:left;
	margin-top: 5px;
	  }		
.req_input {		
		  color: red;	
		  font-size: .8em;

}

.req_input2 {
	color: red;
	font-size: 0.8em;
	margin-left:170px;
	margin-bottom:20px;
	width:170px;
	margin-right: auto;
}

input, textarea, select {  /*Reccomended in order to align validation pass/fail messages next to each form field.  You can also style each individual field with a float: left.  If left out, error message will fall below the field.*/
	float: left;
}

.formComments {
	width:300px;
	height:60px;
	margin-bottom:10px;
	border: solid 1px #CCC;
	font-size: 14px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;

}
/*
input[type="text"], select {   /*input[type="text"] not supported in IE6, text input will display at default IE6 width
		  width: 140px;	
	  }
	  textarea {
		  width: 340px;
		  height: 100px;
	  }
*/


.SubmitButton {     /*Pushes the submit button under the last input area (in this case the <textarea> and aligns it */
	clear: both;
	margin-left: 170px;
	margin-top: 10px;
	width:80px;
	height:28px;

}


.SubmitButton:hover{ text-decoration:none; color:#6d98b3}

label {                /*Not always needed but required if you use the example markup*/
	clear: both;
	float: left;
	/* display: block; */
	width: 150px;
	margin-bottom: 0.7em;
	margin-left:20px;
	text-align: left;

}


form {                    /*Not always needed but ensures that your form will fade properly during Ajax communication*/
	display: inline-block;
	text-align: center;
}


/*
*
* Required CSS for the EasyAjax_Form 
*
*/

.AJAX_TIMEOUT {		/*Style Ajax timeout error*/
	font-weight: bold;
	color: red;
}

.AJAX_RESPONSE {		/*Style successful responses from server side script*/
	font-weight: bold;	
}

#FORM_LOAD {		/*This acts as a modal type overlay added during ajax processing. It's attached to the form's parent element.*/
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	height: 100%;
	width: 100%;
	background: url(images/EA_Form_Load.gif) no-repeat center;    /*NOTE: CUSTOMIZE YOUR LOADING IMAGE AT www.ajaxload.info */
}

.PASS {		/*Class that is added if input for this field is valid*/
	background: url(images/EA_Form_Pass.gif) no-repeat scroll 0 0;
	height:16px;					/*height should be equal to the height of your validation pass imaage*/
	margin-left:7px;                
	width:23px;						/*width needs to accomodate your validation pass image.*/
	float:left;                    
}

.FAIL {		/*Class that is added if input for this field is not valid*/
	background: url(images/EA_Form_Error.gif) no-repeat scroll 0 0;  /* KEEP THIS NOTE: Image modified from the silk icon theme by Mark Jackson*/
	color:red;
	font-size: 14px !important;     
	height:16px;
	margin-left:7px;
	padding-left:20px;       /*Padding should be equal to the width of your error image plus whatever padding between the image and error message.*/
	float:left;
}

/*
*
* Required IE6 fixes  
*
*/

* html #FORM_LOAD {
	height: 488px;		/*
						* NOTE: Width and height may have to be set for this IE6 fix.  Unfortunately you will have to some testing here.  
						* IE6 will be dead soon!  Without setting the width, you may get a small gap in your ajax overlay on ie6.
						*/
      
}


/*
*
* Style EasyAjax Form Class Markers.
*
* All remaining EasyAjax Form classes are used primarily as markers for the EA_Form javaScript Object but
* you can also give them CSS values to visually group fields that are alike.  Any marker class that you 
* add to the html class attributes for input fields (including textarea, select, etc.) can be used in this way.
*
*/

.REQUIRED {                   
	background: #ffffe6;  
	border: solid 1px #CCC;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

.OPTIONAL {
	border: solid 1px #CCC;
	background-color: #FFF;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}