<!-- Begin inline CSS -->
<style type="text/css" >
.NMA-mobile-logo{
width:57%;
}
.NMA-other-logo{
width: 25%;
}
.headerWrap {
border-radius: 15px;
background: floralwhite;
margin:1%;
padding: 1%;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.inline-flexDiv {
display: inline-flex;
width: 100%;
}
.memberDetail {
padding: 1%;
width: 50%;
border-radius: 10px;
padding: 1%;
background: white;
}
.memberDetail2 {
border-radius: 15px;
background: floralwhite;
margin:1%;
padding: 1%;
}
.detailContent {
padding: 1%;
}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
</head>
<body>
<div id="pg1" class="headerWrap">
<div class="inline-flexDiv">
<img src="{!$Resource.MemberCommunityLogos+'/Logos/NSWNMA-logo-no_bg.png'}" />
<div class="">
<span>CompanyName</span><br/>
<span>50 O'Dea Ave WATERLOO NSW 2017</span><br/>
<span>Ph:</span>
<span>1895 367 962</span>
<span>Fax:</span>
<span>02 5789 1414</span><br/>
</div>
</div>
<br/>
<div class="memberDetail">
<span>{!member.Name}</span><br/>
<span>50</span><br/>
<span>o'Dea</span><br/>
<span>WATERLOO NSW 2017</span>
</div>
</div>
<div class="memberDetail2">
<span class="detailContent">MEMBER NO.:{!member.Member_Number__c}</span><br/>
<span class="detailContent">ESTABLISHMENT: TEST Estab</span><br/>
<span class="detailContent">TOTAL AMOUNT: {!totalAmount}</span><br/>
</div>
<hr/>
<div>FISCAL YEAR PAYMENT HISTORY</div>
<table>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Receipt No</th>
</tr>
<apex:repeat value="{!member.Transactions__r}" var="trans">
<tr>
<td><apex:outputText value="{0, date, dd/MM/yyyy}">
<apex:param value="{!trans.createddate}" /></apex:outputText>
</td>
<td>{!trans.Transaction_Reference__c}</td>
<td>${!trans.Amount__c}</td>
</tr>
</apex:repeat>
</table>
</body>