<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 20px;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {
    padding: 10px;
    font-size: 20px;
    text-align: center;
    background: #F5CAA3;
	height: 80px;
}

/* Style the top navigation bar */
.topnav {
	overflow: hidden;
	background-color: #FB7A04;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
/*.leftcolumn {   
    float: left;
	width: 40%;
	margin:0 auto;

}
.centercolumn {   
    float: center;
    width: 35%;
	background-color: #f1f1f1;
    padding-left: 20px;
}


.rightcolumn {
	
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
	margin:0 auto;
}
/* Left column */
.leftcolumn {   
    float:left;
	width: 100%;
	padding-left: 0px;

}

.rightcolumn {
	float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
	margin:0 auto;
}


/* Fake image */
.fakeimg {
    background-color: #99CCFF;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
}
.cardtroop {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
	height: 645px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
	
}

/* Footer */
.footer {
    padding: 5px;
    text-align: center;
    background: #F5CAA3;
    margin-top: 20px;
}
.tabletenant {
	width:70%;
	table-layout:auto;
	font-size:12px;
	border-style:double;
	border-collapse:collapse;
}
.tabledasboard {
	width:100%;
	table-layout:auto;
	font-size:12px;
	border-style:double;
	border-collapse:collapse;
}
.tablebill {
	width:70%;
	table-layout:auto;
	font-size:12px;
	border-style:double;
	border-collapse:collapse;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 800px) {
    .leftcolumn, .centercolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media (max-width: 400px) {
    .topnav a {
        float: none;
        width:100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h2>PHSSB PAYPRO</h2>
</div>

<div class="topnav">
  <a href="AdminIndex.html">Dashboard</a>
  <a href="RegTenant.html">Register Tenant</a>
  <a href="PropertiesTenant.html">Properties & Tenant</a>
  <a href="MinComplaint.html">Complaint</a>
  <a href="#" style="float:right">Sign Out</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="cardtroop">
      <h2 align="center">Admin Dashboard</h2>
      <h5 align="center">Title description, Feb 13, 2018</h5>
      <table class="tablebill" width="99%" border="0" align="center">
  <tr>
    <td colspan="7" bgcolor="#F5CAA3"><strong>Current Rental Billing</strong></td>
    </tr>
  <tr>
    <td colspan="7" align="center"><p><b>Your Amount Due as at 13 February 2018</b></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
    </tr>
  <tr>
    <td bgcolor="#F5CAA3"><strong>Item</strong></td>
    <td bgcolor="#F5CAA3"><strong>Type</strong></td>
    <td bgcolor="#F5CAA3"><strong>Date Invoiced</strong></td>
    <td bgcolor="#F5CAA3"><strong>Reference No.</strong></td>
    <td bgcolor="#F5CAA3"><strong>Amount</strong></td>
    <td bgcolor="#F5CAA3"><strong>Due Date</strong></td>
    <td bgcolor="#F5CAA3"><strong>Action</strong></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Reciept</td>
    <td>30/01/2018</td>
    <td>RL001718</td>
    <td>4,366.00</td>
    <td>28/02/2018</td>
    <td align="center"><a href="">PAY</a></td>
  </tr>
</table>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>

      <p><font size="2"><b>Descliamier</b><br>All information and record data is private as user personal. Also the payment made should be printout the hardcopy receipt for you personal record</font></p>
    </div>
   
  </div>
 
</div>

<div class="footer">
  <h4>Copyright &copy; 2018 PHSSB.com.my | Design: Sayyed_i0</h4>
</div>

</body>
</html>