/* 
Website: http://piper
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.	

	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> <select id="dob"><option value="1">1</option><option value="2">2</option></select> <label for="dob-m" class="sr">Date of Birth (Month) <em>*</em></label> <select id="dob-m"><option value="1">Jan</option><option value="2">Feb</option></select> <label for="dob-y" class="sr">Date of Birth (Year) <em>*</em></label> <select id="dob-y"><option value="1979">1979</option><option value="1980">1980</option></select></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 { float: left; color: #333; padding: 0; margin: 0; width: 100%; }
.cssform em { font-weight: bold; font-style: normal; color: #f00;}
.cssform fieldset { width: 504px; margin: 10px 0 15px 0; padding: 10px 10px 0px 10px; border: 1px solid #ccc; background: #f7f7f7; z-index: 0;}
.cssform legend { padding: 0 2px 0 2px; font-weight: bold; margin: 0; color: #333; font-size: 1.4em; }
/*\*//*/ .cssform legend { display: inline-block; } /* IE Mac legend fix */
.cssform label { float: left; width: 145px; font-weight: bold; font-size: 1.1em; line-height: 1.6; vertical-align: top; }
.cssform fieldset ol { margin: 0; padding: 0; }
.cssform fieldset li { list-style: none; margin: 0; padding: 0px 0px 0px 5px; width: auto; } 
	/* Fieldset within a fieldset - used for groups of radio or checkmark boxes*/
	.cssform fieldset fieldset { margin: 5px 0 0px 0; padding: 0px 5px 5px 5px; background: #eee; border: 1px solid #ccc;}
	.cssform fieldset fieldset legend { padding: 0 0 2px 3px; font-weight: normal; font-size: 1.2em;}
	.cssform fieldset fieldset label { clear: left; float: left; display: block; margin-left: 123px; font-weight: normal;} /* Width plus 3 (html space) */

/*** Input fields & Submit buttons ***/
.cssform fieldset textarea, .cssform fieldset select { border: 1px solid #999; padding: 2px 2px; background: #fff url('images/input_bg.gif') repeat-x; }
input:focus, input[type=text]:focus, textarea:focus, input:active { border: 1px solid #777; background-color: #FFFFDC; background: #FFFFDC url('images/input_bg.gif') repeat-x; color:#000;}
input[type=checkbox] { margin: 5px 5px 0 0; }
input[type=radio] { padding: 0; margin: 0; }
input[type=text] { font-size: 1.1em; border: 0px; border: 1px solid #999; padding: 3px 2px 2px 3px; background: #fff url('images/input_bg.gif') repeat-x; }

/* submit buttons */
 .cssform input.submit { display: block; float: left; clear: left; overflow: visible; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #ddd url('images/submit_bg.gif') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #000; } /*For IE6*/
	input[type=submit] { display: block; float: left; clear: left; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; border: 1px solid #777; background: #ddd url('images/submit_bg.gif') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #000; }
	input[type=submit]:hover { border: 1px solid #555; background: #cecece url('images/submit_bg.gif') no-repeat 5px 50%; color: #000; }
	input[type=submit]:focus { background: #ddd url('images/submit_bg.gif') no-repeat 5px 50%; color: #000; }

 .cssform input.reset { display: block; float: left; overflow: visible; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #333; background: #666 url('images/reset_bg.gif') no-repeat 10% 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #000; } /*For IE6*/
	input[type=reset] { display: block; float: left; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #333; background: #666 url('images/reset_bg.gif') no-repeat 10% 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; margin: 0 15px 15px 0; color: #000; }
	input[type=reset]:hover { border: 1px solid #999; background: #eee url('images/reset_bg.gif') no-repeat 10% 50%; color: #000; }
	input[type=reset]:focus {  background: #ccc url('images/reset_bg.gif') no-repeat 10% 50%; color: #000; }

/* P&E Page Buttons */
.cssform input.dealerbutton { display: block; margin-left: 40px; overflow: visible; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/locator_bg.gif') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; } /*For IE6*/
	input.dealerbutton[type=button] { display: block; margin-left: 40px; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/locator_bg.gif') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; }
	input.dealerbutton[type=button]:hover { border: 1px solid #555; background: #ddd url('images/locator_bg.gif') no-repeat 5px 50%; color: #000; }
	input.dealerbutton[type=button]:focus {  background: #ddd url('images/locator_bg.gif') no-repeat 5px 50%; color: #000; }

.cssform input.specbutton { display: block; margin-left: 22px; overflow: visible; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/specdl_bg.gif') no-repeat 10% 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; } /*For IE6*/
	input.specbutton[type=button] { display: block; margin-left: 22px; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/specdl_bg.gif') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; }
	input.specbutton[type=button]:hover { border: 1px solid #555; background: #ddd url('images/specdl_bg.gif') no-repeat 5px 50%; color: #000; }
	input.specbutton[type=button]:focus {  background: #ddd url('images/specdl_bg.gif') no-repeat 5px 50%; color: #000; }

.cssform input.financebutton { display: block; margin-left: 42px; overflow: visible; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/ico_BuyNow.png') no-repeat 10% 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; } /*For IE6*/
	input.financebutton[type=button] { display: block; margin-left: 42px; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/ico_BuyNow.png') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; }
	input.financebutton[type=button]:hover { border: 1px solid #555; background: #ddd url('images/ico_BuyNow.png') no-repeat 5px 50%; color: #000; }
	input.financebutton[type=button]:focus {  background: #ddd url('images/ico_BuyNow.png') no-repeat 5px 50%; color: #000; }

.cssform input.buybutton { display: block; overflow: visible; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/ico_BuyNow.png') no-repeat 10% 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; } /*For IE6*/
	input.buybutton[type=button] { display: block; font-family: Arial, Verdana, Sans-serif; font-size: 1.2em; line-height: 1.2em; border: 1px solid #777; background: #C7C7C7 url('images/ico_BuyNow.png') no-repeat 5px 50%; padding: 5px 6px 4px 22px; text-align: center; text-decoration: none; color: #000; }
	input.buybutton[type=button]:hover { border: 1px solid #555; background: #ddd url('images/ico_BuyNow.png') no-repeat 5px 50%; color: #000; }
	input.buybutton[type=button]:focus {  background: #ddd url('images/ico_BuyNow.png') no-repeat 5px 50%; color: #000; }	
	
/* Brochure and Demo Request popup forms */
form#brochureRequest { width: 100%; margin-top: 115px; padding: 0; }
form#brochureRequest fieldset, form#demoRequest fieldset { margin: 0; padding: 0px; border: none; background: none;}
form#brochureRequest li, form#demoRequest li { width: 170px; margin-bottom: 6px; }
form#brochureRequest label, form#demoRequest label { font-size: 0.9em; font-weight: normal; color: #ccc; }
form#brochureRequest input, form#demoRequest input { width: 157px; margin-bottom: 0px; }
form#brochureRequest input.submit, form#demoRequest input.submit { width: 60px; padding: 0; height: 20px; float: left; margin: 10px 0 0 103px;}
form#brochureRequest input.checkbox, form#demoRequest input.checkbox { float: left; margin: 5px 5px 0 0; width: 15px; height: 15px;}
#requestNewsLabel { float: left; margin: 4px 0 0 0; }
form#demoRequest li#labelrow { margin-bottom: 0;  }
form#demoRequest { width: 100%; margin-top: 10px; padding: 0; }
form#demoRequest #demoStateLabel { float: left; width: 35px; }
form#demoRequest #demoZipLabel { float: left; width: 51px; }
form#demoRequest #demoCountryLabel { float: left; width: 50px; }
form#demoRequest #demoState {  clear: left; width: 20px; margin: 0 5px 0px 0;}
form#demoRequest #demoZip {  clear: left; width: 40px; margin: 0 5px 0 0;}
form#demoRequest #demoCountry { clear: left; width: 70px; margin: 0 5px 0 0;}

/* Brochure Request Form */
form#SelectFormType label { clear: left; float: left; display: block; width: auto; padding: 0 10px 10px 0; font-weight: normal; font-size: 1.2em; }
form#SelectFormType input[type=radio] { float: left; height: 20px; margin: 0px 7px 0 0; vertical-align: top;}
form#SelectFormType { margin: 0 0 10px 0; }
form#BrochureForm1 p, form#BrochureForm2 p { padding: 0; }
#label_mailing_list { width: 200px; }
#salutation { width: 28px; }
#address1, #address2 { width: 200px; }
#state { width: 100px; }
#zipcode { width: 45px; }
#phone, #fax, #custentity_company_phone { width: 85px; }
#companyname { width: 225px; }
#email { width: 225px; }

#PiperMatchForm #Comments { width: 250px; height: 80px; }

/* Dealer Network Forms */
#DomesticDealers #ZipCode { width: 75px; }