width: 18%;

}

@media all and (max-width: 625px) {

    .donate-sidebar { display: none; }

    .content-with-donate-sidebar {

        align: center;

        width: 100%;

    }

}

p.footnote {

    font-size: 85%;

}

h1 { margin-top: .75em; margin-bottom: .5em; }

h2 { margin-top: .75em; margin-bottom: .5em; }

h3 { margin-top: .6em; margin-bottom: .4em; }

#mainContent h1 { border-bottom: 1px solid #00334b; }

#mainContent h2 { border-bottom: 1px solid #aaa; }

#mainContent ul, #mainContent ol { padding-left: 1.5em; }

#mainContent img { margin: 3px; }

.internalNavigate { width: 19%; float: right; }

#mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }

.internalNavigate ul li { margin-top: .3em; margin-bottom: .3em; }

/* Header */

#conservancyheader {

  height: 140px;

/*  background-color: #d1ff96; */

/*  background-color: #92CC58; */

/*  background-color: #BDD8A2; */

/*  background-color: #92cc58; */

/*  background-color: #b5cd9d; */

  background-color: #ffffff;

  border-bottom: 1px solid #808080;

}

#conservancyheader h1 {

  text-indent: -5000px;

  margin: 0; /* hide in favor of image */

}

#logobutton {

  display: block;

  position: absolute; left: 17px; top: 10px; height: 120px; width: 933px;

  background: url(/img/conservancy-header.png)  left center no-repeat;

}

/* Navigation bar */

#navbar-outer { background: #577632; }

#navbar { margin-left: 104px; margin-top: 3px; float: left; display: inline; }

#navbar ul { list-style: none; }

#navbar-clear { clear: both; border-bottom: 1px solid #808080; }

#navbar li.supporter a {

  display: block;

  background: #fafafe;

  padding: .2em .8em;

  margin-right: 3px;

  border: 1px solid #808080;

  font-size: .8em;

  background: url(/img/nav-bg-campaign.png) bottom repeat-x;

  border-color: #ffffff;

}

#navbar li a {

  display: block;

  background: #fafafe;

  padding: .2em .8em;

  margin-right: 3px;

  border: 1px solid #808080;

  font-size: .8em;

  background: #fff url(/img/nav-bg.png) bottom repeat-x;

  border-color: #ffffff;

}

#navbar li:hover a { background: #577632; color: #fff; }

#navbar li.supporter:hover a { background: #577632; color: #CE1F1F; }

#navbar li { float: left; display: inline; margin-bottom: 3px; }

#mainContent {

    margin-left: 50px;

    margin-right: 50px;

}

#progressbar {

    height: 30px;

}

#progressbar .ui-widget-header {

    background: rgb(206, 31, 31);

}

#fundraiser-percentage {

    float: right;

    align: center;

    margin-right: 40%;

    font-style: bold;

    color: green;

}

.content-with-donate-sidebar {

    align: left;

    width: 80%;

}

#container {

    width: 100%;

    overflow: hidden;

}

#container #mainContent {

    background: #fffff;

    margin-left: 210px;

    margin-right: 50px;

}

#container #sidebar {

    width: 200px;

    float: left;

    background-color: #ccd4a3; 

}

#container #sidebar li {

    text-align: center;

    list-style: none;

    padding: 3px 10px 3px 10px; 

    margin: 5px; 

    border: 1px solid #CCC;

    background: #fff url(/img/nav-bg.png) bottom repeat-x;

}

#container #sidebar li:hover a { background: #577632; color: #fff; }

#container #sidebar.Directors ul li.Directors,

#container #sidebar.Eval ul li.Eval,

#container #sidebar.Overview ul li.Overview,

#container #sidebar.Contact ul li.Contact,

#container #sidebar.Officers ul li.Officers,

#container #sidebar.Staff ul li.Staff,

#container #sidebar.Outside ul li.Outside,

#container #sidebar.Filings ul li.Filings,

#container #sidebar.License ul li.License,

#container #sidebar.Current ul li.Current,

#container #sidebar.Services ul li.Services,

#container #sidebar.Applying ul li.Applying,

#container #sidebar.VMwareLawsuitAppeal ul li.VMwareLawsuitAppeal,

#container #sidebar.VMwareLawsuitFAQ ul li.VMwareLawsuitFAQ,

#container #sidebar.AboutCompliance ul li.AboutCompliance

{

    color: #000033;

    font-weight: bold;

    background: #fff url(/img/nav-bg-up.png) top repeat-x;

}

#container #sidebar h2 {

    text-align: center;

    font-size: 150%;

    margin: 1.5em 0 0.8em 0;

}

#container #sidebar hr {

    width: 75%;

    float: center;

    clear: all;

}

/* Navbar Submenus (currently unused) */

#navbar li ul { display: none; border: 1px solid #444; }

#navbar li:hover ul { display: block; position: absolute; }

#navbar li ul li { float: none; }

#navbar li ul li a { border: 0px; margin: 0px; }

.shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }

.columns {

    width: 100%;

    overflow: hidden;

}

.column-small {

    width: 31%;

 }

.column-large {

    margin-left: 35%;

    margin-right: 50px;

}

.column-left { float: left; }

.column-right { float: right; }

.column h2 { font-size: 1.25em; }

.column h3 { font-size: 1.1em; }

.column hr { width: 50%; align: center; }

.column h2 a { text-decoration: none; color: #000000; }

.column h2 a:hover { text-decoration: underline; }

{% block content %}

<div class="donate-sidebar">

<table style="background-color:#afe478;width:100%;">

<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">

<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Donate Now!</h1></div>

<!--

<script type="text/javascript" src="https://js.balancedpayments.com/v1/balanced.js"></script>

<script type="text/javascript">

   // FOR DEMONSTRATION PURPOSES ONLY - if you already have a server you can POST to, replace

   //                                   the URL with the URL to post to.

   // go to http://requestb.in/

   // click create new request bin and COPY that URL without the ?inspect at the end

   var requestBinURL = 'http://requestb.in/1dk2x8y1';  // make sure it doesn't end in ?inspect

   var marketplaceUri = '/v1/marketplaces/TEST-MPMp7ZUPDpbj69vk2wGHRVY';

   //var marketplaceUri = 'https://www.balancedpayments.com/marketplaces/TEST-MPMp7ZUPDpbj69vk2wGHRVY';

   balanced.init(marketplaceUri);

var cardData = {

  "name": "Bernhard Riemann",                 // Optional

  "card_number": "4111 1111 1111 1111",

  "expiration_month": 4,

  "expiration_year": 2014,

};

function evbind(el, ev, handler) {

if(el.addEventListener) {

el.addEventListener(ev, handler, false);

} else if(el.attachEvent) {

el.attachEvent('on'+ev, function() {handler.apply(el);});

}

}

/*

   function responseCallbackHandler(response) {

      alert(response.status);

      switch (response.status) {

        case 400:

            // missing or invalid field - check response.error for details

            console.log(response.error);

            break;

        case 404:

            // your marketplace URI is incorrect

            console.log(response.error);

            break;

        case 201:

            // WOO HOO! MONEY!

            // response.data.uri == URI of the bank account resource you

            // should store this bank account URI to later credit it

            console.log(response.data);

            var $form = $("#bank-account-form");

            // the uri is an opaque token referencing the tokenized bank account

            var bank_account_uri = response.data['uri'];

            // append the token as a hidden field to submit to the server

            $('<input>').attr({

               type: 'hidden',

               value: bank_account_uri,

               name: 'balancedBankAccountURI'

            }).appendTo($form);

            $form.attr({action: requestBinURL});

            $form.get(0).submit();

        break;

    default:

        console.log(response.status);

        }

    }

   //alert('allo?');

   var tokenizeInstrument = function(e) {

        alert('what"s going on?');

        e.preventDefault();

        var $form = $('#bank-account-form');

        var bankAccountData = {

            name: $form.find('.ba-name').val(),

            account_number: $form.find('.ba-an').val(),

            bank_code: $form.find('.ba-rn').val(),

            type: $form.find('select').val()

        };

        balanced.bankAccount.create(bankAccountData, responseCallbackHandler);

    };

   $('#bank-account-form').submit(tokenizeInstrument);

*/

</script>

-->

<h3>Support NPO Accounting Project Now!</h3>

$<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span> raised toward<br/>

our $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|intcomma  }}</span> goal.<br/>

<p style="font-size: 75%">(Progress bar updated daily.)</p>

<a id="donate" style="text-decoration:none"></a>

<h3>Help us reach our goal:</h3>

<!-- PayPal start -->

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

<input type="hidden" name="cmd" value="_s-xclick">

<input type="hidden" name="hosted_button_id" value="3VRTJALJ5PQRW">

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" style="border:0" name="submit" alt="Donate Now!">

<img alt="" style="border:0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

</form>

<!-- PayPal end -->

<!-- Balanced start -

<div class="container">

- <form action="#" method="POST" id="bank-account-form" class="form-horizontal" onsubmit="balanced.card.create(cardData, function(response) { alert(response.status); });"> -

<form action="#" method="POST" id="bank-account-form" class="form-horizontal">

    <fieldset>

        <legend>Bank Account Information</legend>

        <p><label>Account Holder's Name

            <input type="text"

                   autocomplete="off"

                   placeholder="Bank Account Holder's name"

                   class="ba-name"

                   name="ba_name"

                   value="4111 1111 1111 1111">

        </label></p>

        <p><label>Routing Number

            <input type="text"

                   autocomplete="off"

                   placeholder="Routing Number"

                   class="ba-rn"

                   name="ba_rn"

                   value="4">

        </label></p>

        <p><label>Account Number

            <input type="text"

                   autocomplete="off"

                   placeholder="Account Number"

                   class="ba-an"

                   name="ba_an"

                   value="2014">

        </label></p>

        <p><label>Account Something

            <input type="text"

                   autocomplete="off"

                   placeholder="Account Something"

                   class="ba-as"

                   name="ba_as"

                   value="something someone">

        </label></p>

        <p><label>Account Type

            <select name="ba_type">

                <option value='' disabled selected style='display:none;'>

                    Select Account Type

                </option>

                <option value="checking" default>CHECKING</option>

                <option value="savings">SAVINGS</option>

            </select>

        </label></p>

        <button type="submit" class="btn">

            Tokenize

        </button>

    </fieldset>

</form>

</div>

<script type="text/javascript">

evbind(document.getElementById('bank-account-form'), 'submit',

  function(e) {

    e.preventDefault();

    console.log(this.ba_as.value);

    balanced.card.create(

 {

  "name": this.ba_as.value,

  "card_number": this.ba_name.value,

  "expiration_month": this.ba_rn.value,

  "expiration_year": this.ba_an.value,

/*

  "name": "Bernhard Riemann",                 // Optional

  "card_number": "4111 1111 1111 1111",

  "expiration_month": 4,

  "expiration_year": 2014,

*/

 },

    function(response) {

      console.log(response);

      console.log(response.data.uri);

      $.ajax("/campaign/?token=" + response.data.uri + '&amount=' + document.getElementById('bank-account-form').ba_an.value);

      alert(response.status);

    });

});

</script>

- Balanced end -->