/* ==========================================================================
   Custom Styles for Organic Consumers Association
   ========================================================================== */

body, .main-container, .header-container,.footer-container  {background-color: #669966;} /* Background Color */
body.ocf-donate, .ocf-donate .main-container, .ocf-donate .header-container,.ocf-donate .footer-container  {background-color: #93BECF;}


.main aside {background: none repeat scroll 0 0 #015150;} /* Header, aside, and footer background */
.header-container .wrapper {background-color: #015150; text-align: center;}
.ocf-donate .header-container .wrapper {background-color: #015289; text-align: center;}


nav a {background: none repeat scroll 0 0 #FEFDF9;} 
.main aside {border-top: 1px solid #FEFDF9;}
.footer-container {border-top: 1px solid #669966; font-size: 12px; line-height: 1.2;}
.ocf-donate .footer-container {border-top: 0;}
.footer-container a {color: #ffffff; font-weight: bold; text-decoration: underline;}
.header-container {border-bottom: 0; margin-top: 10px;}
.main {background-color: #ffffff; 
}
.inner {padding: 5px 15px;}
.main article {margin: 0 3%; width: 94%;}

.header-container header h1 {
    background-image: url('https://salsa3.salsalabs.com/o/50865/images/OCAbanner960n.jpg'); 
background-repeat:no-repeat;
background-position:center; 
width: 100%;

    min-width: 960px; height: 72px;font-size: 0; line-height: 0; text-indent: -9999px; margin: 0 auto;}
    
 .newbanner .header-container header h1 {
    background-image: url(' https://salsa3.salsalabs.com/o/50865/images/OCA-new-web-full.png'); 
height: 120px;}  
   
.ocf-donate .header-container header h1 {
    background-image: url('https://salsa3.salsalabs.com/o/50865/images/OCF-banner-full.jpg'); 
}
.paid-for {font-size: 12px; color: #ffffff; width: 320px; text-align: center; margin: 0 auto;}

.header-container {
    box-shadow: none;
}

/* ==========================================================================
   Donation Page Styles
   ========================================================================== */
   
   
.salsa.donation legend {background-color: #015150;}
.ocf-donate .salsa.donation legend {background-color: #015289;}
#salsaDonationHeader {width: 50%; float: left;}
.orderform {width:40%;float:right;}
#salsaDonationFooter {clear: both;}
#submit p {font-style: italic;}
.salsa #submitContribution, .salsa input[type="submit"], .salsa #submitZipCode, #salsa-unsubscribe-form input[type="submit"], .submitButton {width: auto; height: 50px; font-size: 22px;}
.paypal-explainer, .mail-phone {font-color: #999; width: 90%; background-color: #EEE; border: 2px solid #CCC; padding: 10px;
  -webkit-border-radius: 12px;
          border-radius: 12px;  background-clip: padding-box; margin-bottom: 1em;}
          .paypal-explainer img {float: left; margin: 0 10px 10px 0;}
.salsa #donation_amount #recurrence {
    margin-bottom: 0;
}
  .mobile-paypal-explainer {display: none;}
  
  #donation_amount input {border: 1px solid #ccc !important;width:auto;height:auto;}
  
.salsa.donation textarea {
    width: 195px; height: 100px;
}
#recurring_options p {font-size: 12px;}
  
  /* ==========================================================================
   P2P Campaign Styles
   ========================================================================== */
 
 .funds {width: 250px; float: right;}
 #donation_table {width: 100%;}
 #donation_table tr td {width: 400px;}
 #cardtypes {list-style-type: none;}


/* ==========================================================================
   Advocacy Page Styles
   ========================================================================== */
   
   .actions #info-page, .actions #target-page {min-width: 320px;}
   .actions .floated-form {width: 300px; float: right; margin-left: 15px; background-color: #F7F7F7; padding: 10px; border: 1px solid #DDDDDD;}
   .actions .floated-form .submit {margin-left: 8px;}
   .actions .floated-form h2 {margin: 0;}
   .actions .letter-floated-form {width: 410px; float: right; margin-left: 15px; margin-bottom: 15px; background-color: #F7F7F7; padding: 10px; border: 1px solid #DDDDDD;}
   .actions .petitionContent {
    background-color: #669966;
    border: 2px solid #015150;
    color: #FFFFFF;
    max-height: 600px;
    overflow: auto;
    padding: 17px;
}
.actions #info-page h2 {margin: 0;}
.salsa textarea#Comment {
    width: 250px;
}

.actions .signatures {height: 450px; overflow-y: scroll;}

.actions .signatures::-webkit-scrollbar {
    -webkit-appearance: none;
}

.actions .signatures::-webkit-scrollbar:vertical {
    width: 11px;
}

.actions .signatures::-webkit-scrollbar:horizontal {
    height: 11px;
}

.actions .signatures::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.actions.salsa textarea {
    width: 250px;
}

.actions.salsa input.wide {
    width: 250px;
}

.actions.salsa #signers-page.GreenBorder {margin: 10px auto; border: 2px solid #015150; padding: 5px;}

.actions #webformInput tr {border-bottom: 1px solid #ccc;}
.actions #webformInput table {border-collapse: collapse;}
.actions #webformInput td {padding-top: 5px;}

/* ==========================================================================
   TAF Page Share
   ========================================================================== */
   
#share-panel {float: right; width: 290px; text-align: center; padding: 10px; background-color: #F7F7F7;}   

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media screen and (max-width: 1080px) {
  .header-container header h1 {background-image: url('https://salsa3.salsalabs.com/o/50865/images/OCA-web-lg.jpg'); min-width: 610px !important;
    }
    .newbanner .header-container header h1 {background-image: url('https://salsa3.salsalabs.com/o/50865/images/OCA-new-web-lg.png'); height: 72px; min-width: 610px !important;
    }
  
   .ocf-donate .header-container header h1 {background-image: url('  https://salsa3.salsalabs.com/o/50865/images/OCF-web-lg.jpg'); min-width: 610px !important;
    }

}
@media screen and (max-width: 860px) {
  #salsaDonationHeader, .orderform  {width: 100%; float: none;}
  .actions .letter-floated-form  {width: 90%; float: none;}
  .orderform {margin-top: 10px; clear: both;}
}
@media screen and (max-width: 730px) {
  .header-container header h1 {background-image: url('https://salsa3.salsalabs.com/o/50865/images/OCA-web-sm.jpg') !important; }
  .newbanner .header-container header h1 {background-image: url('https://salsa3.salsalabs.com/o/50865/images/OCA-new-web-sm.png') !important; }
  .ocf-donate .header-container header h1 {background-image: url(' https://salsa3.salsalabs.com/o/50865/images/OCF-web-sm.jpg') !important; }
 

}
@media screen and (max-width: 690px) {
  .header-container header h1, .ocf-donate .header-container header h1, .newbanner .header-container header h1 {background-size: 100%;min-width: 280px !important;}
.actions .floated-form {width: 96%; }

}

@media screen and (max-width: 480px) {
    .header-container header h1 {height: 50px;}
      .paypal-explainer img {float: none; margin: 0 auto;}
      .actions .floated-form {width: 260px; }
  #salsaDonationHeader p,.salsa .paypal-explainer, .mail-phone, #salsaDonationHeader ul {display: none;}
  .mobile-paypal-explainer {display: block;}
  .wrapper {width: 96%; margin: 0 2%;}
  .salsa.donation legend {font-size: 14px; width: 90%}
  .employment-note {width: 75%;}
  #donation_amount input[type="radio"] {
    border: 1px solid #666666 !important; 
  }
  .salsa.actions #description img {height: 100%; width: 100%;}
    #donation_amount input[type="radio"]:active {
    border: 1px solid #000000 !important; color: #000000 !important;
  }
  #share-panel {
    width: 95% !important;
  }
 /*  #donation_amount input[type="radio"]:checked {background-color: #333333; border: 2px solid #000000} */
  
  .actions #target-page {float: left !important;}
  .actions .floated-form, .actions .letter-floated-form {float: left !important;}
  .salsa textarea, .salsa input.wide {width: 220px !important;}
  .letter-floated-form, #postalCodeForm {width: 280px;}
  .actions .petitionContent {
    width: 240px;
}
iframe, .salsa p, .salsa h1 {width: 90%;}
  .description p {clear: left;}
    #signupheader{
      width:100%;
      float:none;
    }
    
    form#signup{
      width:100%;
      clear:both;
    }
    
    h1.title{
      max-width:100%;
    }
    
    .mobile-text{
      display:none;
    }
    
}