/* 
Website: 
Name: Form stylesheet
Description: Form styles
Version: Alpha
Author: Jefte Puente
Author URI: http://www.artemisit.com
Comments: This document styles only form elements.
		  Please do not style any tags here, refer to core.css.
*/

/* 	WE CAN FINALLY STOP USING TABLES FOR FORMS! 
	First place the following scripts in the header and ensure the files are in the correct location.	

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/css.js"></script>

	This example markup has every form element available. Please copy and paste. Do not change the form class.
	Description of the technique at: http://www.alistapart.com/articles/prettyaccessibleforms
	
	<form action="#" class="cssform">
		<p>Please complete the form below. Mandatory fields marked <em>*</em></p>
		<fieldset>
			<legend>Delivery Details</legend>
			<ol>
				<li><label for="name">Name <em>*</em></label> <input id="name" /></li>
				<li><label for="address1">Address <em>*</em></label> <input id="address1" /></li>
				<li><label for="town-city">Town/City</label> <input id="town-city" /></li>
				<li><label for="county">County <em>*</em></label> <input id="county" /></li>
				<li><label for="postcode">Postcode <em>*</em></label> <input id="postcode" /></li>
				<li>
					<fieldset>
						<legend>Is this address also your invoice address? <em>*</em></legend>
						<label><input type="radio" name="invoice-address" /> Yes</label>
						<label><input type="radio" name="invoice-address" /> No</label>
					</fieldset>
	
				</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Other Information</legend>
			<ol>
				<li>
					<label for="dob">Date of Birth <span class="sr">(Day)</span> <em>*</em></label><input type="text" id="dob" /> 
					<label for="dob-m" class="sr">Date of Birth (Month) <em>*</em></label><input type="text" id="dob-m" /> 
					<label for="dob-y" class="sr">Date of Birth (Year) <em>*</em></label><input type="text" id="dob-y">
				</li>
				<li><label for="sex">Sex <em>*</em></label> <select id="sex"><option value="female">Female</option><option value="male">Male</option></select></li>
				<li>
					<fieldset>
						<legend>Which of the following sports do you enjoy?</legend>
						<label for="football"><input id="football" type="checkbox" /> Football</label>
	
						<label for="golf"><input id="golf" type="checkbox" /> Golf</label>
						<label for="rugby"><input id="rugby" type="checkbox" /> Rugby</label>
						<label for="tennis"><input id="tennis" type="checkbox" /> Tennis</label>
						<label for="basketball"><input id="basketball" type="checkbox" /> Basketball</label>
						<label for="boxing"><input id="boxing" type="checkbox" /> Boxing</label>
	
					</fieldset>
				</li>
				<li><label for="comments">Comments</label> <textarea id="comments" rows="7" cols="25"></textarea></li>
			</ol>
		</fieldset>
		<p><input type="submit" value="Submit order" /></p>
	</form>
	
	*/

/*** General Form Styles ***/
.cssform { color: #333; padding: 0; margin: 0; width: 700px; z-index: 0; font-size: 12px;}
.cssform em { font-weight: bold; font-style: normal; color: #f00;}
.cssform fieldset { margin: 10px 0 15px 0; padding: 10px 10px 10px 10px; border: none; background: #FFFFFF; width: 630px; }
.cssform legend { padding: 0 2px 0 0px; font-weight: bold; font-size: 16px; line-height: 1.2em; letter-spacing: 0px; color: #000450; }
/*\*//*/ .cssform legend { display: inline-block; } /* IE Mac legend fix */
.cssform label { display: inline-block; height: auto; margin: 0 20px 0 0; width: 130px; font-weight: bold; font-size: 13px; line-height: 1.6; vertical-align: top; color: #333; text-align: right;}
.cssform fieldset ol { margin: 0; padding: 0; }
.cssform fieldset li { list-style: none; padding: 5px 5px 5px 5px;} 
.cssform fieldset p { margin: 5px 5px 5px 5px; font-size: 1.2em; }
	/* Fieldset within a fieldset - used for groups of radio or checkmark boxes*/
	.cssform fieldset fieldset { margin: 0px 0 10px 0; padding: 10px 8px 15px 8px; background: #F3F3E9;}
	.cssform fieldset fieldset legend { padding: 0 0 2px 0px; font-weight: bold; font-size: 1.4em; color: #333;}
	.cssform fieldset fieldset label { clear: left; float: left; display: block; margin-left: 0px; font-weight: normal;} 
	
/* lost password links */
.cssform #lost {float: left; height: 30px; font-size: 1.1em;}
	.cssform #lost a { display: block; float: left; clear: left; margin: 0 0 3px 0; padding: 0; height: 15px; width: 90px; }
/* Other Width forms */
.validation_row .cssform { width: 538px; margin: 0 0 0 12px; }
.row .cssform { margin: 0 0 0 0; padding: 0; }

/*** Input fields & Submit buttons ***/
.cssform fieldset textarea, .cssform fieldset select { border: 1px solid #6F77C0; padding: 2px 2px; }
input:focus, textarea:focus, input:active { background: #FFFFCC; color:#000; padding: 2px 2px; border: 1px solid #6F77C0;}
input[type=checkbox] { padding: 0; margin: 0 5px 0 0; }
input[type=radio] { padding: 0; margin: 0;  }
input[type=text] { border: 1px solid #6F77C0; padding: 2px; }

/* submit buttons */
 .cssform input.submit { display: block; float: left; overflow: visible; font-family: Helvetica, Arial, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #6F77C0; background: #fff url('/intranet/images/submit_bg.gif') no-repeat 10px 50%; padding: 8px 10px 8px 30px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #787BA5; font-weight: bold;} /*For IE6*/
	input[type=submit] { display: block; float: left; font-family: Helvetica, Arial, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #6F77C0; background: #fff url('/intranet/images/submit_bg.gif') no-repeat 10px 50%; padding: 8px 10px 8px 30px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #787BA5; font-weight: bold;}
	input[type=submit]:hover { border: 1px solid #6F77C0; background: #F8FAFF url('/intranet/images/submit_bg.gif') no-repeat 10px 50%; color: #000450; }
	input[type=submit]:focus { background: #F8FAFF url('/intranet/images/submit_bg.gif') no-repeat 10px 50%; color: #000450; }

 .cssform input.reset { display: block; float: left; overflow: visible; font-family: Helvetica, Arial, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #6F77C0; background: #fff url('/intranet/images/reset_bg.gif') no-repeat 10px 50%; padding: 8px 10px 8px 30px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #787BA5; font-weight: bold;} /*For IE6*/
	input[type=reset] { display: block; float: left; font-family: Helvetica, Arial, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #6F77C0; background: #fff url('/intranet/images/reset_bg.gif') no-repeat 10px 50%%; padding: 8px 10px 8px 30px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #787BA5; font-weight: bold;}
	input[type=reset]:hover { border: 1px solid #6F77C0; background: #F8FAFF url('/intranet/images/reset_bg.gif') no-repeat 10px 50%; color: #000450; }
	input[type=reset]:focus {  background: #F8FAFF url('/intranet/images/reset_bg.gif') no-repeat 10px 50%; color: #000450; }

#inlineSelect { height: 22px; float: left; margin:0; }	
#inlineSelect select { float: left; margin: 0 5px 0 0;}
input.inlineSubmit { display: block; font-size: 1.1em; line-height: 1.3em; height: 23px; width: 43px; padding: 2px 2px 2px 18px; background: #f2f2f2 url('/intranet/images/submit_bg.gif') no-repeat 2px 3px;}
input.inlineSubmit:hover { padding: 2px 2px 2px 18px; background: #eee url('/intranet/images/submit_bg.gif') no-repeat 2px 3px; color: #444;}
input.inlineSubmit:focus { background: #ccc url('/intranet/images/submit_bg.gif') no-repeat 2px 3px; color: #fff;}
input.inlineReset {}	
	
/* Donate */
body#Donate .cssform fieldset { margin: 0 0 20px 0; width: 450px; height: 115px; }
body#Donate .cssform .donateLabel { width: 405px; float: left; display: block;}
body#Donate .cssform #first { margin: 0 0 5px 0; }
body#Donate .cssform label input { margin: 0px 0 5px 10px; }
body#Donate .cssform label input.donateRadio { margin: 0; line-height: 1.0em; }

#BillState, #State { margin-right: 10px; width: 20px; }
#BillZip, #Zip {width: 40px; }
#BillAddress, #Address { width: 240px; }
#BillTelephone, #Telephone { width: 80px; }

.cssform fieldset fieldset #ConsentLabel { width: 580px; text-align: left; margin-left: 5px; } 
.cssform fieldset fieldset #ConsentLabel em { } 

#Phone, #CellPhone, #WorkPhone { width: 80px;  }
#State { width: 15px; }
#Address { width: 280px; }
#Name { width: 220px; }
#City { width: 200px; }
#Email { width: 200px; }