Just a test page

.crm-contribute-widget {
font-size:12px;
font-family:Helvetica, Arial, sans;
padding:6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border:1px solid #96C0E7;
width:200px;
}
.crm-contribute-widget h5 {
font-size:14px;
padding:3px;
margin: 0px;
text-align:center;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}

.crm-contribute-widget .crm-amounts {
height:1em;
margin:.8em 0px;
fon-size:13px;
}
.crm-contribute-widget .crm-amount-low {
float:left;
}
.crm-contribute-widget .crm-amount-high {
float:right;
}
.crm-contribute-widget .crm-percentage {
margin:0px 30%;
text-align:center;
}
.crm-contribute-widget .crm-amount-bar {
background-color:#FFF;
width:100%;
display:block;
border:1px solid #CECECE;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
margin-bottom:.8em;
text-align:left;
}
.crm-contribute-widget .crm-amount-fill {
background-color:#2786C2;
height:1em;
display:block;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
-khtml-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
text-align:left;
}
.crm-contribute-widget .crm-amount-raised-wrapper {
margin-bottom:.8em;
}
.crm-contribute-widget .crm-amount-raised {
font-weight:bold;
}

.crm-contribute-widget .crm-logo {
text-align:center;
}

.crm-contribute-widget .crm-comments,
.crm-contribute-widget .crm-donors,
.crm-contribute-widget .crm-campaign {
font-size:11px;
margin-bottom:.8em;
}

.crm-contribute-widget .crm-contribute-button {
display:block;
background-color:#CECECE;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
text-align:center;
margin:0px 10% .8em 10%;
text-decoration:none;
color:#556C82;
padding:2px;
font-size:13px;
}

.crm-contribute-widget .crm-home-url {
text-decoration:none;
border:0px;
}

.crm-contribute-widget {
background-color: #96C0E7; /* background color */
border-color:#96C0E7; /* border color */
}

.crm-contribute-widget h5 {
color: #2786C2;
background-color: #B7E2FF;
} /* title */

.crm-contribute-widget .crm-amount-raised { color:#000; }
.crm-contribute-widget .crm-amount-bar /* progress bar */
background-color:#FFFFFF;
border-color:#CECECE;
}
.crm-contribute-widget .crm-amount-fill { background-color:#2786C2; }

.crm-contribute-widget a.crm-contribute-button { /* button color */
background-color:#FFFFFF;
}

.crm-contribute-widget .crm-contribute-button-inner { /* button text color */
padding:2px;
display:block;
color:#556C82;
}

.crm-contribute-widget .crm-comments,
.crm-contribute-widget .crm-donors,
.crm-contribute-widget .crm-campaign {
color:#FFFFFF /* other color*/
}

.crm-contribute-widget .crm-home-url {
color:#FFFFFF /* home page link color*/
}

// Cleanup functions for the document ready method
if ( document.addEventListener ) {
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
onReady();
};
} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
onReady();
}
};
}

if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( onReady, 1 );
}

// Mozilla, Opera and webkit support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", onReady, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);

// A fallback to window.onload, that will always work
window.attachEvent( "onload", onReady );
}

function onReady( ) {
var cpid = 2;
var jsonvar = eval('jsondata' + cpid);

var crmCurrency = jsonvar.currencySymbol;
document.getElementById('crm_cpid_'+cpid+'_title').innerHTML = jsonvar.title;
if ( jsonvar.money_target > 0 ) {
document.getElementById('crm_cpid_'+cpid+'_amt_hi').innerHTML = jsonvar.money_target_display;
document.getElementById('crm_cpid_'+cpid+'_amt_low').innerHTML = crmCurrency+jsonvar.money_low;
}
document.getElementById('crm_cpid_'+cpid+'_amt_raised').innerHTML = jsonvar.money_raised;
document.getElementById('crm_cpid_'+cpid+'_comments').innerHTML = jsonvar.about;
document.getElementById('crm_cpid_'+cpid+'_donors').innerHTML = jsonvar.num_donors;
document.getElementById('crm_cpid_'+cpid+'_btn_txt').innerHTML = jsonvar.button_title;
document.getElementById('crm_cpid_'+cpid+'_campaign').innerHTML = jsonvar.campaign_start;
if ( jsonvar.money_raised_percentage ) {
var moneyRaised = jsonvar.money_raised_percentage;
var percentWidth = moneyRaised.split('%');
if ( percentWidth[0] > 100 ) {
moneyRaised = '100%';
}
document.getElementById('crm_cpid_'+cpid+'_amt_fill').style.width = moneyRaised;
document.getElementById('crm_cpid_'+cpid+'_percentage').innerHTML = jsonvar.money_raised_percentage;
}

if ( !jsonvar.is_active ) {
document.getElementById('crm_cpid_'+cpid+'_button').innerHTML = jsonvar.home_url;
document.getElementById('crm_cpid_'+cpid+'_button').style.color = 'red';
}
}