/* donation form fields */
.donation-product-catalog input[type="submit"],
.customer_profile_billing .form-item input,
.customer_profile_billing .form-item select,
.account.form-wrapper .form-item input,
.account.form-wrapper .form-item select,
.commerce_payment .form-item input,
.commerce_payment .form-item select,
.commerce_checkout_field_group__group_donation_info .form-item input,
.page-checkout form fieldset .form-item input,
.page-checkout form fieldset .form-item select {
  background-color: rgba(0,0,0,.25);
  background-image: none;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 7px;
  color: white;  
  display: inline-block;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1;
  height: auto;
  padding: 0.75em .65em;
  margin: 0 1em 0 0;
  transition: background-color 0.3s ease-in-out 0s, color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s;
  text-shadow: none;
} 

.donation-product-catalog input[type="submit"] {
  padding: 0.75em;
}

/* alternate donation buttons */
.donation-product-catalog input[type="submit"] {
	background-color: #FFA050;
	 border: 2px solid #FFA050;
	 box-shadow: 5px 5px 10px rgba(0,0,0,.3);
}

/* padding between rows for the checkout buttons */
.donation-product-catalog tr.row input[type="submit"] {
  margin-bottom: 1em;
}
.donation-product-catalog tr.row:last-child input[type="submit"] {
  margin-bottom: 0;
}

/* fixed width for monthly buttons */
.donation-product-catalog.pane-don-month input[type="submit"] {
  width: 215px;
}
.donation-product-catalog .commerce-product-title {
  font-size: 2em;
}

/* make the input fields white on the checkout pages so you can read them better */
.customer_profile_billing .form-item input,
.customer_profile_billing .form-item select,
.account.form-wrapper .form-item input,
.account.form-wrapper .form-item select,
.commerce_payment .form-item input,
.commerce_payment .form-item select,
.commerce_checkout_field_group__group_donation_info .form-item input,
.page-checkout form fieldset .form-item input,
.page-checkout form fieldset .form-item select {
  background-color: #fff;
  border: 2px solid #C2C2C2;
  color: #4e4e4e;
}  
.donation-product-catalog input[type="submit"]:hover,
.customer_profile_billing .form-item input:hover,
.account.form-wrapper .form-item input:hover,
.commerce_payment .form-item input:hover,
/*.customer_profile_billing .form-item select:hover,
.commerce_payment .form-item select:hover,*/
.commerce_checkout_field_group__group_donation_info .form-item input:hover,
.page-checkout form fieldset .form-item input:hover {
  background-color: rgba(255,255,255,0.3);
  background-image: none;
  color: white;
}
/* alternate donation buttons */
.donation-product-catalog input[type="submit"]:hover {
  background-color: #75D1C3;
   border: 2px solid #75D1C3;
}

.form-item-commerce-payment-payment-details-cardonfile-instance-default {
  display: none;
}
/* position relative to place submit button in field */
.custom-donation-products {
  margin-top: 1.5em;
  position: relative;
}

/* dontation form submit and other things that should look like buttons */

/*donation form submit buttons */
#cust-don-submit {
  position: absolute;
  right: 1px;
  bottom: -48px;
}
#cust-don-submit input {
    padding: 7px 15px;
  /* background-color: rgba(255,255,255,.5); */
  border: medium none;
  color: white;
}

.special-donations input[type="submit"],
.custom-donation-products input[type="submit"],
.special-donations .checkout-buttons input[type="submit"], 
input[type="submit"].checkout-continue,
.ajax-shopping-cart-checkout a,
.don-month-button a {
  background-color: #FFA050;
  border: 2px solid #FFA050;
  background-image: none;
  color: #fff;
  margin: 0 1em .5em 0;
  font-weight: bold;
  padding: .75em;
  text-shadow: none;
  font-size: 1.6rem;
  border-radius: 7px;
  transition: background-color 0.3s ease-in-out 0s, color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s;
}

.special-donations input[type="submit"]:hover,
.custom-donation-products input[type="submit"]:hover,
.special-donations input[type="submit"].form-submit:hover,
input[type="submit"].checkout-continue:hover,
.ajax-shopping-cart-checkout a:hover,
.don-month-button a:hover {
  background-color: rgba(117,209,195,1);
  background-image: none;
  border: 2px solid #75D1C3;
}
.custom-donation-products .node-title h4 {
  font-size: 200%;
  color: white;
}
.or-monthly {
  color: white;
  font-size: 2em;
  margin-top: 60px;
  margin-bottom: 10px;
}

.don-month-button {
  margin-top: 5px;
  clear: both;
}

.don-month-button .content h3 {
  margin-bottom: 1.0em;
}

/* alternate display for monthly donation */
.don-month-button {
/*  margin-top: 60px;*/
  clear: both;
  background-color: rgba(255,255,255,0.9);
  font-size: 160%;
  width: 91%;
  padding: 1em;
  border-radius: 7px;
  color: #4e4e4e;
}
.don-month-button a {
  background-color: #ffa050;
  border: medium none;
  color: #fff;
  margin: -7px -10px 0 0;
  font-weight: bold;
  text-shadow: none;
  font-size: 1.6rem;
  border-radius: 7px;
  padding: 7px 15px;
  float: right;
  width: 133px;
}
.don-month-button a:hover {
  border: medium none;
}


/* darken some buttons so there's not so much orange */
.ajax-shopping-cart-checkout a {
  /*background-color: #eb7203;
  border: 2px solid #eb7203;
  */
  background-color: #53c5b4;
  border: 2px solid #53c5b4;
  box-shadow: 5px 5px 10px rgba(0,0,0,.3);
    margin-right: 0;
}


/*donation custom amount field */
.field-name-field-custom-amount input[type='text']{
  background-color: transparent;
  border: 2px solid white;
  border-radius: 7px;
  color: white;
  display: inline-block;
  font-size: 1.6em;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  line-height: 1;
  margin: 0;
  padding: .75em;
  height: auto;
  transition: background-color 0.3s ease-in-out 0s, color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s;
} 
.field-name-field-custom-amount input[type='text']:hover {
  background-color: rgba(255,255,255,0.3);
  background-image: none;
  color: white;
}
.field-name-field-custom-amount label {
  margin: 0 0 .5em .5em;
  display: none;
}

/*this takes the form labels and puts them inside the field like placeholder text */
.donation-product-catalog  .form-item,
.customer_profile_billing .form-item,
.commerce_payment .form-item,
.customer_profile_billing .form-item,
.account.form-wrapper .form-item,
.commerce_payment .form-item,
.special-donations .form-item,
.commerce_checkout_field_group__group_donation_info .form-item,
.page-checkout form fieldset .form-item  {
  position: relative;
}
.donation-product-catalog  .form-item label,
.customer_profile_billing .form-item label,
.commerce_payment .form-item label,
.customer_profile_billing .form-item label,
.account.form-wrapper .form-item label,
.commerce_payment .form-item label,
.special-donations .form-item label,
.commerce_checkout_field_group__group_donation_info .form-item label,
.page-checkout form fieldset .form-item label {
  left: 1.1em;
  position: absolute;
  top: 1.5em;
  z-index: 0;
  color: #9B9B9B;
  display: block;
  border: 1px solid transparent;
  background: transparent;
  font-size: 16px;
  font-weight: normal;
}
/* checkbox labels */
.commerce_checkout_field_group__group_donation_info .form-item.form-type-checkbox label,
.page-checkout .form-item.form-type-checkbox label {
  top: 0.3em;
  line-height: 1.25;
  left: 30px;
}

/* add some custom space above save card checkbox */
.form-item.form-item-commerce-payment-payment-details-cardonfile-instance-default {
  margin-top: 20px;
}

.donation-product-catalog  .form-item label.hide,
.customer_profile_billing .form-item label.hide,
.commerce_payment .form-item label.hide,
.customer_profile_billing .form-item label.hide,
.account.form-wrapper .form-item label.hide,
.commerce_payment .form-item label.hide,
.special-donations .form-item,
.commerce_checkout_field_group__group_donation_info .form-item label.hide,
.page-checkout form fieldset .form-item label.hide,
#edit-commerce-payment-payment-method,
.commerce_checkout_field_group__group_monthly_billing_info legend {
  display: none;
}

input::-webkit-input-placeholder {color: #ccc !important;}
input::-moz-placeholder {color: #fff !important;}
input:-moz-placeholder {color: #fff !important;}
input:-ms-input-placeholder {color: #fff !important;} 

@media screen and (max-width: 380px) {
  /* hide the placeholder text on small screens since it gets cut off */
  input::-webkit-input-placeholder {color: rgba(0,0,0,0) !important;}
  input::-moz-placeholder {color: rgba(0,0,0,0) !important;}
  input:-moz-placeholder {color: rgba(0,0,0,0) !important;}
  input:-ms-input-placeholder {color: rgba(0,0,0,0) !important;} 
}

.customer_profile_billing,
.commerce_payment {
    margin: 2.5em 0 0;
}

.customer_profile_billing legend,
.account.form-wrapper legend,
.commerce_payment legend {
    margin: 0 0 0 .25em;
  font-size: 2em;
  font-weight: bold;
}

/* billing field positioning */
div.addressfield-container-inline > div.form-item, 
.form-item-customer-profile-billing-field-email-und-0-email,
div.street-block > div.form-item,
.commerce_payment .form-item,
.commerce-credit-card-expiration {
  margin-right: 0; /*override commerce default*/
  padding-right: 0;
  margin-bottom: 0;
}
.form-item-customer-profile-billing-commerce-customer-address-und-0-name-line,
input#edit-customer-profile-billing-commerce-customer-address-und-0-thoroughfare { 
  width: 99%;
}
input#edit-customer-profile-billing-commerce-customer-address-und-0-locality { /*city*/
  border-radius: 7px 0 0 7px;
    margin-right: 0;
    width: 280px;
}
select#edit-customer-profile-billing-commerce-customer-address-und-0-administrative-area { /*state*/
  width: 115px;
  margin-right: 0;
    border-radius: 0;
  border-left: medium none;
  border-right: medium none;
    height: 51px;
}
input#edit-customer-profile-billing-commerce-customer-address-und-0-postal-code { /*zip*/
  border-radius: 0 7px 7px 0;
}

.form-item-commerce-payment-payment-method label.option {
  margin-top: -1.15em;
}
select#edit-commerce-payment-payment-details-credit-card-type { /*card type*/
  border-radius: 7px 0 0 7px;
    margin-right: 0;
    margin-bottom: 5px;
    height: 51px;
}
.form-item.form-type-select.form-item-commerce-payment-payment-details-credit-card-type {
  float: left;
  width: 32%;
}
input#edit-commerce-payment-payment-details-credit-card-number { /*card number*/
  border-radius: 0 7px 7px 0;
  border-left: medium none;
}
.form-item.form-type-textfield.form-item-commerce-payment-payment-details-credit-card-number {
  float: left;
  width: 60%;
}
.commerce-credit-card-expiration {
  float: left;
  padding-right: 0 !important;
  clear: both;
}
select#edit-commerce-payment-payment-details-credit-card-exp-month { /*month */
  border-radius: 7px 0 0 7px;
    margin-right: 0;
    height: 51px;
}
.commerce-month-year-divider {
  display: none;
}
select#edit-commerce-payment-payment-details-credit-card-exp-year { /*year*/
  margin-right: 0;
  margin-left: -3px;
    border-radius: 0;
  border-left: medium none;
  border-right: medium none;
    height: 51px;
}
input#edit-commerce-payment-payment-details-credit-card-code { /*security code*/
  border-radius: 0 7px 7px 0;
}
.form-item.form-type-textfield.form-item-commerce-payment-payment-details-credit-card-code {
  float: left;
  width: 70%;
}

/* format checkbox to save card info */
.form-item-commerce-payment-payment-details-cardonfile-instance-default {
  float: left;
  width: 100%;
}

/* hides the second address line in the billing information */
.form-item-customer-profile-billing-commerce-customer-address-und-0-premise {
  display: none;
}

/* hides labels for select elements in the checkout forms (mainly state and expiration dropdowns) */
.customer_profile_billing .form-type-select label,
.commerce_payment .form-type-select label,
.page-checkout form fieldset .form-type-select label  {
  display: none; 
}

/*Hides the billing information and help text on the checkout review pane.*/
.checkout-review,
.checkout-help {
  display: none;
}

/* moves the description for the type of monthly donation up above select element */
#edit-field-preferred-monthly-billing .description {
  position: absolute;
  top: 10px;
}
select#edit-field-preferred-monthly-billing-und {
  margin-top: 30px;
}

/*This adds some padding to the fieldset wrapper so the form fields don't
bump up to the edge. Need to be sure form-item only applies to checkout stuff.*/
.form-item,
.commerce-credit-card-expiration {
  padding-top: 10px;
  padding-right: 10px;
  margin-top: 0;
}

/*Makes the text input fields be full width of the form.*/
.form-item input[type='text'] {
  width: 100%;
}




/* Event guest names multiple field input */
/* positioning - move the description to the top */
.field-name-field-event-guest-names .form-item {
  position: relative;
}
.field-name-field-event-guest-names .form-item .description {
    position: absolute;
    top: 0;
    font-size: 1.7em;
    padding: 0 20px 0 0;
}
/* add some space above the table to make room for the absolutely positioned description 
   Also adds some space before the "Add another guest" button 
*/
form .field-multiple-table {
    margin: 60px 0 20px;
}
/* do the same thing to the message you get when reordering */
.tabledrag-changed-warning.messages.warning {
    margin: 50px 0 -30px;
    font-size: 1.25em;
}
/* position the "Event Guest Names" title and make it bold */
.page-checkout form fieldset .form-item .field-multiple-table label {
  position: inherit;
  font-weight: bold;
  color: white;
}


/* hide the row weights thing and some other stuff */
.field-name-field-event-guest-names .tabledrag-toggle-weight-wrapper {
  display: none;
}
.commerce_checkout_field_group__group_event_attendees span.fieldset-legend {
  display: none;
}
.field-multiple-table th.field-label label {
  display: none;
}
.field-multiple-table .form-item {
  padding-bottom: 10px;
}
.field-multiple-table tr.even,
.field-multiple-table tr.odd {
  background-color: transparent;
}
/* use the white draggable icon */
.field-multiple-table a.tabledrag-handle .handle {
  background-position: 6px -36px;
}


/*This hides the radio for the payment method since there is only one. Need to make sure it doesn't apply everywhere.*/
/*.form-radios {
  display: none;
}*/

/*This is just here to get an idea of how the form will look when confined to a third of the page. Need to replace it
with real stuff in the right place.*/
#panels-ipe-display-panel-context-page-donation-checkout-page-donation-checkout-panel-context  {
  /*width: 50%;*/
  float: right;
}

/*Hides USD suffix after the field to add a custom amount and Cart Contents label from Cart summary.*/
#line-item-fields-field-custom-amount-add-more-wrapper span.field-suffix,
.cart_contents span.fieldset-legend {
  display: none;
}

/*Makes You gift and I'm giving... larger*/
#commerce-checkout-form-checkout h3,
.pane-don-cat h3 {
  font-size: 2.5em;
}
/*
Hides the cancel button*/
.checkout-cancel,
span.button-operator {
  display: none;
}

/*Hides Your Cart is Empty before a donation product is added*/
.cart-empty-page {
  display: none;
}

/*Makes the titles on the checkout pane (Billing Information and Payment) larger. */
#checkout-ajax-wrapper span.fieldset-legend,
#checkout-ajax-wrapper--2 span.fieldset-legend,
#commerce-checkout-form-checkout span.fieldset-legend {
  font-size: 1em;
}

/*Arranges the Custom Amount field and Submit button*/
#commerce-cart-add-to-cart-form-2 .form-text,
#commerce-cart-add-to-cart-form-20 .form-text,
#commerce-cart-add-to-cart-form-21 .form-text,
input#edit-line-item-fields-field-custom-amount-und-0-amount {
  float:left;
  width: 100%;
}

/* for ajax shopping cart checkout button */
.pane.don-page-cart {
  clear: both;
}
.pane.don-page-cart .content {
  /* margin-bottom: 30px;*/
}

/* cancel and go back buttons */
.checkout-buttons {
  margin-top: 2em;
}

.checkout-buttons .checkout-cancel, 
.checkout-buttons .checkout-back {
  border: 0;
  background: none;
  color: white !important;
  padding: 15px 6px !important;
  font-size: 16px;
  font-weight: normal;
  text-shadow: none;
}
.checkout-buttons .checkout-cancel:hover, 
.checkout-buttons .checkout-back:hover {
  color: #75D1C3;
}

.extra-don-intro {
  font-size: 3em;
  padding-bottom: 30px;
  font-weight: bold;
  line-height: 1.2;
}

/* possible go back button with arrow instead of text 
.checkout-buttons {
  position: relative;
  margin-bottom: 50px;
}
.checkout-buttons .checkout-cancel,
.checkout-buttons .checkout-back {
  border: 2px solid white;
  background: none;
  color: #4e4e4e !important;
  padding: 12px 0 !important;
  text-shadow: none;
  border-radius: 7px;
  background-image: url('../img/button-back.png');
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
  position: absolute;
  left: 0;
  font-size: 0;
  height: 48px;
  width: 65px;
}
.checkout-buttons .checkout-cancel:hover, 
.checkout-buttons .checkout-back:hover {
  background-image: url('../img/button-back.png');
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
}
.checkout-buttons input[type="submit"].checkout-continue {
  position: absolute;
  left: 80px;
}
*/

/*Hides the title of the Honoree pane*/
.commerce_checkout_field_group__group_donation_info span.fieldset-legend {
  display: none;
}

/* honoree fields */
.commerce_checkout_field_group__group_donation_info .form-item {
  margin-bottom: 0;
}
#edit-field-donation-honor-add {
  float: left;
  width: 50%;
}
#edit-field-donation-honor-city {
  float: left;
  width: 50%;
}

#edit-field-donation-honor-add .form-item {
  padding-right: 0;
}
#edit-field-donation-honor-add .form-item input {
  border-radius: 7px 0 0 7px;
  margin-right: 0;
}
#edit-field-donation-honor-city .form-item {

}
#edit-field-donation-honor-city .form-item input {
  border-radius: 0 7px 7px 0;
  border-left: medium none;
  margin-right: 0;
}

/*special donations specific styling */
.special-donations table {
  margin: 0 auto;
}
.special-donations td.col {
  padding-right: 60px;
}
.special-donations .spec-don-description {
  text-align: center;
  font-size: 2.25rem;
  color: #7F7F7F;
  margin: 40px 0;
}
.special-donations .commerce-price {
  display: inline-block;
  float: left;
  background-color: transparent;
  background-image: none;
  border: 2px solid #4e4e4e;
  border-radius: 7px 0 0 7px;
  color: #4e4e4e;
  font-weight: normal;
  line-height: 1;
  padding: 1.4rem;
  border-right: medium none;
  width: 70px;
  margin-left: 25px; /*fake centering */
}
.special-donations .add-to-cart-form {
  display: inline-block;
  float: left;
}
.special-donations input[type="submit"] {
  border-radius: 0 7px 7px 0;
  width: 110px; /*helps fake centering */
}

@media screen and (max-width: 1024px) {
  .special-donations td.col {
    padding-right: 30px;
  }
}

@media screen and (max-width: 980px) {
  input::-webkit-input-placeholder {color: #ccc !important;}

  .ajax-shopping-cart-checkout a {
    background-color: #75D1C3;
    border: 2px solid #75D1C3;
  }
  .ajax-shopping-cart-checkout a:hover {
    background-color: #9EDFD5;
    border: 2px solid #9EDFD5;
  }
}


@media screen and (max-width: 900px) {
  .special-donations .commerce-price {
    width: auto;
  }
  .special-donations input[type="submit"] {
    width: 100px;
  }
}


@media screen and (max-width: 800px) { 
/* move fields onto one line each */
  .special-donations table {
    margin: 0 15%;
    width: 100%;
  }
  .special-donations td.col {
    padding-right: 0;
    width: 100%;
    float: left;
    margin-bottom: 20px;
  }
  .special-donations .spec-don-description {
    text-align: right;
    display: inline;
    float: left;
    width: 270px;
    margin: 13px 0;
  }
  .special-donations .commerce-price {
    width: 70px;
  }
  .special-donations .add-to-cart-form {

  }
}

@media screen and (max-width: 560px) {
  /* alternate display for monthly donation */
  .don-month-button {
    margin-top: 40px;
    width: 87%;
  }
  .don-month-button a {
    margin: 10px 0 0 0;
    float: none;
    display: block;
  }
}

@media screen and (max-width: 460px) {
  .special-donations table {
    margin: 0;
  }
  .special-donations .spec-don-description {
    width: 100%;
    text-align: center;
    display: block;
    float: none;
  }
  .special-donations .commerce-price {
    width: 70px;
    margin-left: 28%;
  }
}
@media screen and (max-width: 400px) {
  .special-donations .commerce-price {
    margin-left: 20%;
  }
}

@media screen and (max-width: 380px) {

  /* make everything fit screen full width */
  .page-donate table.col-4 {
    width: 93%;
  }
  .donation-product-catalog table td {
  display: block;
  margin-bottom: 1em;
  }
  .donation-product-catalog input[type="submit"]{
  display: block;
  width: 100%;
  }
  .form-item {
    padding-right: 0;
  }
  .special-donations input[type="submit"], 
  .custom-donation-products input[type="submit"], 
  .special-donations .checkout-buttons input[type="submit"], 
  input[type="submit"].checkout-continue, 
  .ajax-shopping-cart-checkout a, 
  .don-month-button a {
  display: block;
  width: 85%;
  }
  input[type="submit"].checkout-continue {
    width: 100%;
  }
  .don-month-button .content h3 {
  margin-bottom: .5em;
  }
  .ajax-shopping-cart-total,
  .cart-product-total {
    margin-bottom: .5em;
  }
  div.addressfield-container-inline > div.form-item {
    float: none;
  }

  .not-front.page-checkout #edit-customer-profile-billing .form-item input[type='text'] {
    width: 95%;
  }
  #edit-field-donation-honor-add,
  #edit-field-donation-honor-city,
  .form-item.form-type-select.form-item-commerce-payment-payment-details-credit-card-type,  
  .form-item.form-type-textfield.form-item-commerce-payment-payment-details-credit-card-number,
  .form-item.form-type-textfield.form-item-commerce-payment-payment-details-credit-card-code
   {
    width: 100%;
  }
  #edit-field-donation-honor-add .form-item input,
  #edit-field-donation-honor-city .form-item input,
  .not-front.page-checkout #edit-customer-profile-billing input#edit-customer-profile-billing-commerce-customer-address-und-0-locality,
  select#edit-customer-profile-billing-commerce-customer-address-und-0-administrative-area,
  .not-front.page-checkout #edit-customer-profile-billing input#edit-customer-profile-billing-commerce-customer-address-und-0-postal-code,
  .not-front.page-checkout select#edit-commerce-payment-payment-details-credit-card-type,
  .not-front.page-checkout #edit-customer-profile-billing .form-item input[type='text'],
  input#edit-commerce-payment-payment-details-credit-card-number,
  input#edit-commerce-payment-payment-details-credit-card-code,
   {
    float: none;
    width: 100%;
    border-radius: 7px;
    border: 2px solid #C2C2C2;
  }
  select#edit-commerce-payment-payment-details-credit-card-exp-year {
    border-radius: 0 7px 7px 0;
    border-right: 2px solid #C2C2C2;;
  }
  #cust-don-submit {
      right: 1px;
  }

  /* alternate display for monthly donation */
  .don-month-button {
    width: 80%;
  }
}