Here is more less all classes (except #financial-report which is the id) for front-end displaying. Its really up to you how you want to look. You can add stylesheets to your theme css file or any other css file that is included and wont be changed over the time.
#financial-report -> main container for report
.finance-income -> container for holding all income records
.finance-row -> a single record row
.finance-row span -> a placeholder for amount
.finance-expenses -> container for holding all expense records
.finance-row -> a single record row
.finance-row span -> a place holder for amount
.financial-totals -> totals table (if you're using it)
.total-row -> single row
.total-row span -> place holder for number
.total-row-bold -> bold row, to emphasise grand total
.total-row-bold span -> place holder for number
An example how you can style it:
#financial-report { width: 100%;}
.finance-income, .finance-expenses { width:100%; padding: 10px 0; }
/* to get it align to right */
.finance-income span, .finance-expenses span {float: right; font-weight: bold;}
Maybe with some update ill bring some predefined stylesheets but i found that for each site you still have to adjust all that to make it look good.
Hope this helps :)
