/**
 * Forms stylesheet
 * 
 * Generic styling for form elements, including text inputs, radio buttons,
 * checkboxes and submit buttons. Should work for both hard-coded and magic
 * forms.
 * 
 */

/* Forms */
.content FORM {margin-top:20px;}
.content FORM P {clear:both;}
.content FORM P {zoom:1;}
.content FORM P:after {content:"."; display:block; height:0; width:0; overflow:hidden; clear:both; visibility:hidden;}
.content .fieldlabel {float:left; width:155px; margin:0 10px 0 0; font-weight:normal;}
.content INPUT.text, .content TEXTAREA.textarea, .content .password {border:1px solid #D6D2C9; background:#FFF!important; width:280px; padding:2px;}
.content INPUT.text, .content TEXTAREA.textarea {border-width:1px 1px 1px 1px; border-style:solid; border-color:#C4C4C4;}
.content .yui-gb INPUT.text, .content TEXTAREA.textarea, .content .password {width:206px!important;}
.content .short-field .text, .content .short-field .password {width:60px;}
.content SELECT {border:1px solid #D6D2C9;}
.content .radio, .content .checkbox, .content .checkbox-option {float:left; clear:left; margin:7px 5px 0 0;}
.content .radio {*margin:4px 5px 0 0;}
.content .checkbox, .content .checkbox-option {*margin:4px 5px 0 0;}
.content .fieldcontrol LABEL {display:block; float:left; margin:3px 0 0 0;} /* Labels for radio buttons */
.content .fieldrequired {color:#CC3333; font-weight:bold;}
.content .fieldindent {display:block; padding:0 0 0 165px;}
.content .fieldcontrol {display:block; padding:0 0 0 165px;}
.content .fieldcontrol LABEL {font-size:90%; margin-bottom:10px;}
.content .quiz-page .fieldcontrol {padding:0;}
.content .fieldcontrol BR {display:block; clear:both;}
.content .help {font-size:90%;}
.content .submit, .content .submit-hover, .content .action, .button-link A {cursor:pointer!important; color:#FFF!important; background-color:#9F9F9F; padding:4px 10px; border:none; text-transform:lowercase; font-size:110%; font-weight:bold; cursor:pointer; background-image:url('/static/site/graphics/general/nav-grad.png'); background-position:bottom left; background-repeat:repeat-x; _background:none; overflow:visible;}
.content .submit:hover, .content .submit-hover:hover, .content .action:hover, .button-link A:hover {color:#FFF!important;}
.content .action EM {font-style:normal; font-weight:bold; color:#FFF; white-space:nowrap;}

.content .membership-buttons {margin-top:30px;}
.content .membership-buttons P, .content P.minor-button {text-align:right; padding-right:180px;}
.content .membership-buttons #add-button, .content .minor-button .action, .content .minor-button .action:hover {background-color:#767b64!important;}
.content .minor-button {display:none} /* shown with javascript, as only functional if javascript present */

.content .accountNumber INPUT.text {width:15px;}
.content .sortCode INPUT.text {width:20px;}

.address-helper {margin-top:10px; padding-top:0; margin-bottom:20px;}
.address-helper .text {width:85px!important;}
.address-helper SELECT {position:relative; top:0;}
.address-helper, .billing-address-helper {padding:10px 0 15px 220px;}
.address-helper P, .billing-address-helper P {padding:0 0 0 0;}
.address-helper INPUT.submit, .billing-address-helper INPUT.submit {margin:0 0 0 10px;}

.debit-process .warning {color:#cc3333; border:1px solid #cc3333; padding:15px;}
.debit-process .address-helper FORM {margin-top:0;}
.debit-process .address-helper {padding:10px 0 15px 165px;}
.debit-process .address-helper .choose-address {margin-top:10px;}
.debit-process .donation-controls {text-align:right; padding-right:100px;}
.debit-process .donation-controls P {display:inline; clear:none; zoom:none; *padding:0 10px;}
.debit-process .donation-controls P:after {display:inline;}
.debit-process LABEL.invalid {font-weight:bold; color:#cc3333!important;}
.debit-process P.error-message {color:#cc3333; margin-top:5px; margin-left:165px; font-size:95%;}

.debit-process #errors {color:#cc3333; font-size:95%; margin-bottom:10px; outline:none;}
.debit-process #errors:focus {outline:none;}
.debit-process #errors P {font-weight:bold;}
.debit-process #errors UL {margin:0 0 30px!important;}
.debit-process #errors UL LI {margin-bottom:0;}

.debit-process .payment-form {position:relative; margin-bottom:20px;}
.debit-process .payment-form IMG {position:absolute; top:0; right:20px;}

.debit-process .other-donations {background:#EEF1EA; padding:15px; margin:20px 0;}
.content .debit-process INPUT.money {background: url("/static/site/graphics/pound.png") no-repeat scroll 2px 3px #ffffff;  padding-left:15px;
	border: 1px solid #C4C4C4; width: 267px; padding: 2px 2px 2px 15px}  

.donateForm {background:#f5f7ec; border:1px solid #b8b8b8; padding:8px 8px 13px 8px; width:590px;}
.donateForm FORM {margin-top:0;}
.donateForm .fieldcontrol {padding-left:0;}
.donateForm .donation-controls {padding-right:140px;}

/**
 * YUI radio buttons
 *
 * The form hijacking script we use to style polls, ratings etc. gives forms'
 * elements the following classes, which are then used to style them.
 */
LABEL.js.radio {cursor:pointer; height:21px; padding-left:36px; background:url('/static/site/graphics/general/js-radio.gif') 0 -100px no-repeat;}
.keeper-radio-button LABEL.js.radio {width:21px; overflow:hidden; padding:0; text-indent:-9999px;}
LABEL.js.radio.checked {background-position:0 -342px!important;}
LABEL.js.radio.checked.hovered {cursor:default; background-position:0 -342px!important;}
LABEL.js.radio.hovered {background-position:0 -221px!important;}

.newsletter-radios LABEL.js.radio {padding-left:26px; background:url('/static/site/graphics/general/js-radio-newsletter.gif') 0 -100px no-repeat;}
.newsletter-radios LABEL.js.radio.checked.hovered {background-position:0 -342px!important;}
.newsletter-radios LABEL.js.radio.hovered {background-position:0 -100px!important;}

.registration-page .address-helper {padding:0 0 10px 165px;}
.registration-page .address-helper .text {margin-right:10px;}