/* making spaces */
.crm-contribution-main-form-block {
 margin-top:0px;

}
.crm-contribution-main-form-block .price_set-section {
 margin-top:30px;
}
.crm-contribution-main-form-block #amount_sum_label {
 font-weight:bold;
 font-size: 14px!important;
}
/* lines up top of all new buttons */
#priceset.crm-section  {
    padding: 15px;
    border:1px solid #ccc;
}
.crm-contribution-main-form-block .is_recur-section {
 padding-left:15px;
 padding-right:15px;
 padding-bottom:20px;
 border:1px solid #ccc;
 margin-top:20px;
}
.crm-contribution-main-form-block .email-5-section {
 padding-top:15px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:20px;
 border:1px solid #ccc;
 margin-top:20px;
}
.crm-contribution-main-form-block #onBehalfOfOrg {
 margin-top:30px;
}
.crm-contribution-main-form-block .crm-credit_card_type-icons {
    margin-top:20px;
    margin-bottom:20px;
}
.crm-contribution-main-form-block .crm-credit_card_type-icon-visa,
.crm-contribution-main-form-block .crm-credit_card_type-icon-mastercard {
 background-color: #0274be;
 color: white;
 padding: 14px 25px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 cursor: pointer;
 border-radius: 4px;
 border: 1px solid #ccc;
 text-decoration:none;
 margin-left:20px;
}
.crm-contribution-main-form-block .crm-credit_card_type-icon-visa {
 margin-left:0px;
}
/* Add hover effect for better user experience */
.crm-contribution-main-form-block .crm-credit_card_type-icon-visa:hover,
.crm-contribution-main-form-block .crm-credit_card_type-icon-mastercard:hover {
 background-color: #333333;
}
.crm-contribution-main-form-block .credit_card_info-group {
 padding-top:0px;
 margin-top:30px;
}
.crm-contribution-main-form-block .billing_name_address-group {
 padding-top:0px;
 margin-top:30px;
}
.crm-contribution-main-form-block .crm-profile-name-Donation_Bottom {
 padding-top:0px;
 margin-top:30px;
 margin-top:20px;
}

/* prevents various sections from overlapping or wrapping weirdly if the description includes
images or divs, not a bad candidate for basic Civi css */
#crm-container.crm-public .crm-section, .crm-section {
 display: flow-root;
}
/* Styling the buttons */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="radio"] + label,
.price-set-option-content input[type="checkbox"],
.price-set-option-content input[type="checkbox"] + label {
 float:left;
 width:180px;
 margin:4px;
 background-color:#e9e1ef;
 border-radius:4px;
 border:1px solid #D0D0D0;
 overflow:auto;
 padding:23px 6px;
}
/* Styling the labels
 * This section is really really weird.
 * I am really not sure why CIVICRM wants BOTH, it
 * even looks very bad when one selects radio buttons.
 * So I am using the LABELS as the amounts and hide
 * (below) the ACTUAL amounts!
 */
.price-set-option-content label,
.price-set-option-content label span,
.price-set-option-content input[type="checkbox"] + label {
 text-align:center;
 font-size: 20px;
 display:block;
}
/* Alternate text styles for the amounts,
 * if both labels and amounts are shown for a field
 * (don't want everything to be large)
 * I am sorry, CIVICRM, but this is really really stupid.
 * whacking this.
 */
.price-set-option-content input[type="radio"] + label .crm-price-amount-amount {
 font-size: 0px;
 display:none;
}
/* make Total Amount same size as button text */
#crm-container.crm-public .calc-value {
 font-size: 32px;
}
#crm-container.crm-public .crm-title {
    display:none;
}
/* puts the normal input controls out of sight */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="checkbox"],
span.crm-price-amount-label-separator {
 position:fixed;
 top:-50px;
}

/* Style for hovered item */
.price-set-option-content input[type="radio"]:hover + label,
.price-set-option-content input[type="radio"]:hover + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:hover + label {
 background-color:#eee6f4;
}

/* Style for selected item */
.price-set-option-content input[type="radio"]:checked + label,
.price-set-option-content input[type="radio"]:checked + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:checked + label {
 background: #0274be;;
 color:#fff !important;
}