###START_MS_Page_Margin_Left__c###
.2
###END_MS_Page_Margin_Left__c###

###START_MS_Page_Margin_Right__c###
.2
###END_MS_Page_Margin_Right__c###

###START_Content__c###
<style type="text/css">a {
  color: #5D6975;
  text-decoration: underline;
}
body {
  position: relative;
//  width: 21cm;
//  height: 29.7cm;
  margin: 0 auto;
  color: #001028;
  background: #FFFFFF;
  font-family: Arial Unicode MS, sans-serif;
  font-size: 12px;
}

#logo {
  text-align: center;
}

#logo img {
  width: 90px;
}

h1 {
  border-top: 1px solid  #5D6975;
  border-bottom: 1px solid  #5D6975;
  color: #5D6975;
  font-size: 2.4em;
  line-height: 1.4em;
  font-weight: normal;
  text-align: center;
  margin: 0 0 0 0;
  background: url(https://c.na45.content.force.com/servlet/servlet.ImageServer?id=0153A000003kpt6&oid=00D30000000YAEz);
}

#project {
  float: left;
  text-align: left;
}

#company {
  float: right;
  text-align: right;
}

#project div,
#company div {
  white-space: nowrap;
}

#top, .totalsLabel {
     background: #F5F5F5;
  }
.topLabel {
     font-weight: bold;
  }
  table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,
table td {
  text-align: center;
  padding: 10px;
  text-align: right;
}

table th {
  padding: 5px 20px;
  color: #5D6975;
  border-bottom: 1px solid #C1CED9;
  white-space: nowrap;
  font-weight: normal;
}

table .service,
table .desc {
  text-align: left;
}

table td.service,
table td.desc {
  vertical-align: top;
}

table td.unit,
table td.qty,
table td.total {
  font-size: 1.2em;
}
.table591col0{text-align:left; vertical-align: top}
.table591col1{text-align:left; vertical-align: top}
.table591col2{text-align:right;font-size: 1.2em}
.table591col3{text-align:right;font-size: 1.2em}
.table591col4{text-align:right;font-size: 1.2em}

table td.grand {
  border-top: 1px solid #5D6975;;
}

#notices{
  color: #5D6975;
  font-size: 1.2em;
  float: left;
  text-align: left;
}
</style>
<table>
	<tbody>
		<tr>
			<td>
			<div id="logo"><img alt="" src="/servlet/servlet.ImageServer?id=0153A000003kpZQQAY&amp;oid=00D30000000YAEzEAO" /></div>
			</td>
		</tr>
		<tr>
			<td>
			<h1>INVOICE 3-2-1</h1>
			</td>
		</tr>
		<tr>
			<td id="top">
			<div id="company">
			<div>{{!opportunity.owner.companyName}}</div>

			<div>{{!opportunity.owner.street}}<br />
			{{!opportunity.owner.city}} {{!opportunity.owner.state}} {{!opportunity.owner.postalcode}}, {{!opportunity.owner.country}}</div>

			<div>{{!opportunity.owner.phone}}</div>

			<div><a href="mailto:">{{!opportunity.owner.email}}</a></div>
			</div>

			<div id="project">
			<div><span class="toplabel">PROJECT:</span><strong> {{!opportunity.name}}</strong></div>

			<div><span class="toplabel">CLIENT:</span> {{!opportunity.account.name}}</div>

			<div><span class="toplabel">ADDRESS:</span> {{!opportunity.account.billingstreet}}, {{!opportunity.account.billingstate}} {{!opportunity.account.billingpostalcode}}, {{!opportunity.account.billingcountry}}</div>

			<div><span class="toplabel">EMAIL:</span> <a href="mailto:">{{!opportunity.account.email}}</a></div>

			<div><span class="toplabel">DATE:</span> {{!DocumentDateTime MMMMM d, yyyy}}</div>
			</div>
			</td>
		</tr>
		<tr>
			<td>
			<table>
				<thead>
					<tr>
						<th class="service">SERVICE</th>
						<th class="desc">DESCRIPTION</th>
						<th>PRICE</th>
						<th>QTY</th>
						<th>TOTAL</th>
					</tr>
				</thead>
				<tbody><!--{{!
<lineitems><class>table591</class>
<listname>opportunitylineitems</listname>
<column>PricebookEntry.Product2.name</column>
<column>PricebookEntry.Product2.description</column>
<column prefix="$" format-number="#,###.##">unitprice</column>
<column format-number="#,###">quantity</column>
<column prefix="$" format-number="#,###.##">totalprice</column>
<orderby>sortorder, createddate desc</orderby>
</lineitems>
}}-->
					<tr>
						<td colspan="2"> </td>
						<td class="totalsLabel" colspan="2">SUBTOTAL</td>
						<td class="total">${{!opportunity.amount #,###.##}}</td>
					</tr>
					<tr>
						<td colspan="2"> </td>
						<td class="totalsLabel" colspan="2">GRAND TOTAL</td>
						<td class="grand total">${{!opportunity.amount #,###.##}}</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td>
			<div id="notices">
			<div>NOTICE:</div>

			<div>A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
			</div>
			</td>
		</tr>
	</tbody>
</table>
###END_Content__c###