/* styles for forms */



/* -------------------------------------------------------

form-a:

all forms except send to a friend



form-b:

send to a friend only

------------------------------------------------------- */



/* all forms (form-a & form-b)

------------------------------------------------------- */

#form-a h2,

#form-b h2 {

clear:both;

float:left;

width:460px;

}

#form-a h2.paddingTop,

#form-b h2.paddingTop {

padding-top:12px;

}

#form-a p,

#form-b p {

font-size:1.1em;

}

#form-a input, #form-a select, #form-a textarea,

#form-b input, #form-b select, #form-b textarea {

float:left;

margin:0 6px 10px 0;

padding:2px;

font-family:Arial, Helvetica, sans-serif;

font-size:1.1em;

}



/* form element widths */

#form-a input.miniField, #form-a select.miniField,

#form-b input.miniField, #form-b select.miniField {

width:37px;

}

#form-a input.tinyField, select.tinyField,

#form-b input.tinyField, select.tinyField {

width:100px;

}

#form-a input.narrowField, #form-a select.narrowField,

#form-b input.narrowField, #form-b select.narrowField {

width:175px;

}

#form-a input.wideField, #form-a select.wideField, textarea.wideField,

#form-b input.wideField, #form-b select.wideField, textarea.wideField {

width:250px;

}



/* validation */

#form-a p.validation,

#form-b p.validation,

#form-a p.validation_long,

#form-b p.validation_long {

float:left;

padding:0;

margin:4px 0 0 0;

font-size:1.1em;

}

#form-a p.validation_long,

#form-b p.validation_long {
 
    display:none;
    margin:0px 0px 10px 130px;
    
}

.ie6 #form-a p.validation_long,
.ie6 #form-b p.validation_long,
.ie7 #form-a p.validation_long,
.ie7 #form-b p.validation_long {
    
    margin:0px 0px 0px 130px;
    float:none;
    
}

#form-a p.ie_err_donation {

    clear:both;

    width:460px;
    
}

#form-a p.validationFailed,

#form-b p.validationFailed {

float:left;

padding:0;

margin:4px 0 0 0;

color:#FF0000;

font-size:1.1em;

font-weight:bold;

}



/* form submit buttons */

#form-a .formButtonContainer,

#form-b .formButtonContainer {

width:460px;

float:left;

}

#form-a img.formButton,

#form-b img.formButton {

float:right;

margin:0 0 5px 0;

}



#form-a input.formButton,

#form-b input.formButton {

float:right;

margin:0 0 5px 0;

}



/* error message */

#form-a .errorMsg,

#form-b .errorMsg {

color:#FF0000;

font-weight:bold;

clear:both;

margin:0;

}



/* misc */

#form-a .mandatoryKey,

#form-b .mandatoryKey {

width:460px;

clear:both;

display:block;

}



/* useful classes */

#form-a .floatLeft,

#form-b .floatLeft {

float:left;

}

#form-a .floatRight,

#form-b .floatLeft {

float:right;

}

#form-a .clearBoth,

#form-b .clearBoth {

clear:both;

}



/* form-a only 

------------------------------------------------------- */



/* labels */

#form-a label {

clear:both;

float:left;

width:130px;

font-size:1.1em;

margin-top:4px;

}

#form-a label.fieldLabel {

display:block;

}

#form-a label.fieldLabelSmall {

display:block;

width:90px;

}

#form-a label.giftAidLabel {

width:420px;

clear:none;

margin-top:0;

}



/* widths for specific select dropdowns */

#form-a select.titleList {

width:106px;

}

#form-a select.countyList {

width:181px;

}

#form-a select.countryList {

width:256px;

}

#form-a select.cardList {

width:106px;

}

#form-a select.whereList {

width:181px;

}

#form-a select.questionList {

width:181px;

}

#form-a select.timeList {

width:106px;

}

#form-a select.quantityList {

width:70px;

}



/* credit card date dropdowns --------- */

#form-a select.ccDateListLeft {

float:left;

margin-right:6px;

display:inline;

width:43px;

}

#form-a select.ccDateListRight {

float:left;

display:inline;

clear:none;

width:57px;

}



/* checkboxes */

#form-a input.checkBox {

clear:both;

float:left;

}

#form-a .checkBoxField {

width:460px;

clear:both;

float:left;

margin:8px 0 18px 0;

}

#form-a .checkBoxField label {

clear:none;

width:420px;

float:left;

margin-top:0;

}

#form-a .checkBoxFieldNoMargin {

width:460px;

clear:both;

float:left;

margin:0;

}

#form-a .checkBoxFieldNoMargin label {

clear:none;

width:420px;

float:left;

margin-top:0;

}



/* radio buttons */

#form-a input.radioBtn {

clear:both;

padding:0;

margin:0 4px 4px 0;

}

#form-a label.radioLabel {

clear:none;

float:left;

margin:0 0 10px 0;

}

#form-a label.radioLabelLast {

clear:none;

float:left;

margin:0;

}



/* form section - dotted lines */

#form-a .formSection {

width:460px;

clear:both;

float:left;

margin:10px 0;

background:url(../img/misc/blue-dotted-tile.gif) left top repeat-x;

}

#form-a .formSectionInner {

float:left;

padding:10px 0 16px 0;

background:url(../img/misc/blue-dotted-tile.gif) left bottom repeat-x;

}

#form-a .dottedLine {

width:460px;

height:1px;

clear:both;

float:left;

background:url(../img/misc/blue-dotted-tile.gif) left top repeat-x;

margin:1em 0;

}



/* pound symbol next to donation amount */

#form-a label.fieldLabelPound {

display:block;

width:118px;

}

#form-a p.poundSign {

display:block;

width:12px;

float:left;

margin:4px 0 0 0;

font-size:1.3em;

font-weight:bold;

}



/* gift aid logo */

#form-a .giftAidLogo {

margin:18px 0 0 0;

float:left;

}

#form-a p.clearBothPaddingTop {

clear:both;

padding:1em 0 0 0;

margin:0;

}



/* other amount field */

#form-a .otherAmountField {

clear:both;

float:left;

width:460px;

padding-top:12px;

}

/* other amount field (with radio btn) */

#form-a .otherAmountFieldRadio {

clear:both;

float:left;

width:460px;

padding:7px 0 10px 0;

}



/* date field */

#form-a .dateField {

width:100px;

}



/* newsletter signup form */

#form-a .checkBoxGroup {

width:460px;

clear:both;

float:left;

margin:10px 0;

}

#form-a .checkBoxLabel {

float:left;

clear:none;

margin-top:0;

}

#form-a p.choosePrompt {

float:left;

margin:0 4px 0 0;

padding:0;

}

#form-a .pValidation p.validation, #form-a .pValidation p.validationFailed {

margin-top:0;

}



/* form-b - send to friend

------------------------------------------------------- */



/* labels */

#form-b label {

clear:both;

float:left;

width:35px;

font-size:1.1em;

margin-top:4px;

}



#form-b .fieldsLeft, #form-b .fieldsRight {

float:left;

margin-bottom:10px;

}

#form-b .fieldsRight {

width:285px;

}

#form-b input.floatedFieldLeft {

margin:0 15px 0 0;

width:110px;

}

#form-b input.floatedFieldRight {

margin:0 6px 0 0;

width:180px;

}

#form-b p.confirmMsg {

font-size:1.2em;

}



/* browser specific styles start

------------------------------------------------------- */



/* ie6 ----------------- */

.ie6 #form-a select.titleList {

width:108px;

}

.ie6 #form-a select.countyList {

width:183px;

}

.ie6 #form-a select.countryList {

width:258px;

}

.ie6 #form-a select.cardList {

width:108px;

}

.ie6 #form-a select.whereList {

width:183px;

}

.ie6 #form-a select.ccDateListLeft {

width:45px;

}

.ie6 #form-a .checkBoxLabel {

margin-top:3px;

}

.ie6 #form-a label.radioLabel {

margin:3px 0 0 0;

}

.ie6 #form-a label.radioLabelLast {

margin:3px 0 0 0;

}

.ie6 #form-a label.dataProtectLabel {

height:31px;

}

.ie6 #form-a select.questionList {

width:183px;

}

.ie6 #form-a select.timeList {

width:108px;

}

.ie6 #form-a .checkBoxFieldNoMargin {

margin:6px 0 0 0;

}

.ie6 #form-a .otherAmountFieldRadio {

padding-top:1px;

}

.ie6 #form-a .otherAmountFieldRadio label {

padding-top:4px;

}



/* ie7 ----------------- */

.ie7 #form-c .nameEmailPair {

margin:0 0 22px 0;

}

.ie7 #form-a label.radioLabel {

margin:4px 0 0 0;

}

.ie7 #form-a label.radioLabelLast {

margin:4px 0 0 0;

}

.ie7 #form-a select.titleList {

width:108px;

}

.ie7 #form-a select.countyList {

width:183px;

}

.ie7 #form-a select.countryList {

width:258px;

}

.ie7 #form-a select.cardList {

width:108px;

}

.ie7 #form-a select.whereList {

width:183px;

}

.ie7 #form-a select.ccDateListLeft {

width:45px;

}

.ie7 #form-a select.questionList {

width:183px;

}

.ie7 #form-a textarea.wideField {

width:252px;

}

.ie7 #form-a select.timeList {

width:108px;

}

.ie7 #form-a .checkBoxLabel {

margin-top:3px;

}

.ie7 #form-a .checkBoxFieldNoMargin {

margin:6px 0 0 0;

}

.ie7 #form-a .otherAmountFieldRadio {

padding-top:1px;

}

.ie7 #form-a .otherAmountFieldRadio label {

padding-top:4px;

}



/* ie8 ----------------- */

.ie8 #form-a select.titleList {

width:108px;

}

.ie8 #form-a select.countyList {

width:183px;

}

.ie8 #form-a select.countryList {

width:258px;

}

.ie8 #form-a select.cardList {

width:108px;

}

.ie8 #form-a select.whereList {

width:183px;

}

.ie8 #form-a select.ccDateListLeft {

width:45px;

}

.ie8 #form-a select.questionList {

width:183px;

}

.ie8 #form-a select.timeList {

width:108px;

}



/* webkit (safari and chrome) */

.webkit #form-a select.titleList {

width:108px;

}

.webkit #form-a select.countyList {

width:183px;

}

.webkit #form-a select.countryList {

width:258px;

}

.webkit #form-a select.cardList {

width:108px;

}

.webkit #form-a select.whereList {

width:183px;

}

.webkit #form-a select.ccDateListLeft {

width:45px;

}

.webkit #form-a textarea.wideField {

width:252px;

}

.webkit #form-a select.questionList {

width:183px;

}

.webkit #form-a select.timeList {

width:108px;

}

/* webkit (safari on mac only) */

.mac.webkit #form-a .otherAmountFieldRadio {

padding-top:5px;

}



/* firefox on mac */

.mac.gecko #form-a select.titleList {

width:108px;

}

.mac.gecko #form-a select.countyList {

width:183px;

}

.mac.gecko #form-a select.countryList {

width:258px;

}

.mac.gecko #form-a select.cardList {

width:108px;

}

.mac.gecko #form-a select.whereList {

width:183px;

}

.mac.gecko #form-a select.ccDateListLeft {

width:45px;

}



/* browser specific styles end

------------------------------------------------------- */