@charset "utf-8";

/*
*
* NOTE: PLEASE LEAVE THIS NOTE IN YOUR PROJECT IF YOU USE THE PROVIDED ERROR MESSAGE IMAGE 
*
* Error message image (triangle with exclamation point) is modified version of the 		
* original created by Mark James as part of his Silk icon theme. 
* 
* Please see http://www.famfamfam.com/lab/icons/silk/ for more info. 
*
*/


/*
*
* Thank you for purchasing EasyAjax_Form. 
* 
* Please review the following notes before implementing into your project.  
* Your form will work well without changing a thing but I designed this tool
* so every designer could make it their own. 
*
* Make sure not to change the selector names of the required CSS rules 
* (.FAIL, #FORM_LOAD, etc) but feel free to test away with 
* new delcarations (property:value;).  If you would like to change the 
* selector names, see the advanced customization options in the 
* documentation.
*
* John Stevens
* JJStevens17@gmail.com
*
*/




/*
*
* Reccomended CSS for the EasyAjax_Form
*
*/


#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:500px;       /*NOTE: Using a min-height on this element looks better when the ajax loading overlay is applied.  Not supported in ie6*/
	width: 500px;           /*Use width to make room for validation error messages*/
	/*-moz-border-radius: 8px;*/      /*NOTE: these border radius rules are optional and not supported by internet explorer*/
	/*-webkit-border-radius: 8px;*/
}

* html #FormContainer{   /*IE6 CSS fix as IE6 does not support min-height*/		 
	height:500px;
	overflow: auto;    /*You may want to do overflow:hidden depending on the project.*/
}

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;
	color:#666;
}

label {                /*Not always needed but required if you use the example markup*/
	clear: both;
	float: left;
}

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

.captchaIMG {      /*Required for human checker field.*/
	background:transparent url(../images/EA_Form_RUhuman1.png) no-repeat scroll 0 0;  /*Replace this image with any you'd like to use (20px X 70px)*/
	display:block;
	float:left;
	height:20px;
	margin-left:15px; /*Optional*/
	margin-top:2px;  /*Optional*/
	width:70px;
}


/*
*
* 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 */
	background-color: #545454;        /*Take out background-color and opacity rules (the next three) to remove the 'modal' overlay.  Will only show icon*/
	opacity: .55;                     /*Adjust opacity of the overlay with the following three rules*/
	-moz-opacity:0.55;
	filter:alpha(opacity=55);
	/*z-index:1001;*/		          /*NOTE: z-index may need to be used if you are using serveral absolutely placed elements*/
	/*-moz-border-radius: 8px;*/      /*NOTE: these border radius rules are optional and not supported by internet explorer*/
	/*-webkit-border-radius: 8px;*/
}

.PASS {		/*Class that is added if input for this field is valid*/
	background: url(../images/EA_Form_Pass.png) 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.png) no-repeat scroll 0 0;  /* KEEP THIS NOTE: Image modified from the silk icon theme by Mark Jackson*/
	color:#f89b1a;
	font-size: 11px !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: #7fb8dd;  
	border: solid 1px #7fb8dd;
	padding:3px;
	color:#333;

}

.OPTIONAL {
	background: #7fb8dd;
	border: solid 1px #7fb8dd;
	padding:3px;
	color:#333;

}

.box {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#CCC;
	width: 200px;
	border: 1px solid #333;
	padding:3px;
	background: #333;
}