<html> <head> <meta http-equiv=“Content-type” content=“text/html; charset=utf-8” /> <style> h1 {

text-align: center;
background-color: black;
color: white;
border-radius: 10px;

}

td {

padding: 5px;
vertical-align: top;
white-space: pre;

}

table {

border-spacing: 0px;
border-collapse: separate;
margin-bottom: 40px;

}

table td:first-child {

font-weight: bold;
white-space: nowrap;

}

table.items td:first-child {

font-weight: normal;

}

.summary > td {

white-space: nowrap;

}

.client {

float: left;

}

.summary {

float: right;

}

.items {

clear: both;
width: 100%;

} .items th {

padding: 4px;
background-color: #e9e9e9;
text-align: left;

} .items th:first-child {

border-radius: 5px 0px 0px 5px;

} .items th:last-child {

border-radius: 0px 5px 5px 0px;

} .notes {

white-space: pre;

} </style> </head> <body> <h1>%header%</h1>

<table class=“from”> <tr>

<td>From</td>
<td>%from%</td>

</tr> </table>

<table class=“client”> <tr>

<td>Client</td>
<td>%client%</td>

</tr> </table>

<table class=“summary”>

<tr>
  <td>Invoice Number</td>
  <td>%number%</td>
</tr>
<tr>
  <td>Date</td>
  <td>%date%</td>
</tr>
<tr>
  <td>Due date</td>
  <td>%due-date%</td>
</tr>
<tr>
  <td>Balance Due</td>
  <td>%balance%</td>
</tr>

</table>

<table class=“items”>

<tr>
  <th>Item</th>
  <th>Quantity</th>
  <th>Rate</th>
  <th>Amount</th>
</tr>
%items%

</table>

<h2>Notes</h2> <p class=“notes”>%notes%</p> </body> </html>