<!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: #ADD8E6;
	height: 80px;
}

/* Style the top navigation bar */
.topnav {
	overflow: hidden;
	background-color: #036;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    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: #aaa;
    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: #ADD8E6;
    margin-top: 20px;
}

.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="UserIndex.html">Dashboard</a>
  <a href="BillReceipt.html">Bill &amp; Receipt</a>
  <a href="UserComplaint.html">Complaint</a>
  <a href="Help.html">Help</a>
  <a href="#" style="float:right">Sign Out</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="cardtroop">
      <h2 align="center">Bill &amp; Receipt</h2>
      <h5 align="center">Title description, Feb 13, 2018</h5>
      <p>&nbsp;</p>
   
      <table class="tablebill" border="0" align="center">
  <tr>
    <td width="30%" align="center"><b>
      <form action="">
      <select>
  		 <option value="volvo" selected>-</option>
 		 <option value="jan">January</option>
 		 <option value="feb">February</option>
 		 <option value="mar">March</option>
         <option value="mar">April</option>
         <option value="mar">May</option>
         <option value="mar">Jun</option>
         <option value="mar">July</option>
         <option value="mar">August</option>
         <option value="mar">September</option>
         <option value="mar">October</option>
         <option value="mar">November</option>
         <option value="mar">Dicember</option>
	  </select>
      <input type="number" min="1990" max="2099" step="1" value="2018" />
      <button type="search" value="Search">Search</button>
      </form></b></td>
  </tr>
  </table>
  </br>
        
      <table class="tablebill" border="1" align="center">
  <tr>
    <td width="5%" bgcolor="#99CCFF"><b>UNIT</b></td>
    <td width="20%" bgcolor="#99CCFF"><b>DETAILS</b></td>
    <td width="5%" bgcolor="#99CCFF"><b>MONTHS</b></td>
    <td width="5%" bgcolor="#99CCFF"><b>AMOUNT (RM)</b></td>
    <td width="5%" bgcolor="#99CCFF"><b>STATUS</b></td>
    <td width="5%" bgcolor="#99CCFF"><b>RECEIPT</b></td>
  </tr>
  <tr>
    <td>A-G-12</td>
    <td>MESRA VILLA</td>
    <td>APRIL</td>
    <td>1800</td>
    <td>OUTSTANDING</td>
    <td><button type="button">Not Avialable</button></td>
  </tr>
  <tr>
    <td>A-G-12</td>
    <td>MESRA VILLA</td>
    <td>MARCH</td>
    <td>1800</td>
    <td>PAID</td>
    <td><button type="button">Print</button></td>
  </tr>
  <tr>
    <td>A-G-12</td>
    <td>MESRA VILLA</td>
    <td>FEBRUARY</td>
    <td>1800</td>
    <td>PAID</td>
    <td><button type="button">Print</button></td>
  </tr>
  <tr>
    <td>A-G-12</td>
    <td>MESRA VILLA</td>
    <td>JANUARY</td>
    <td>1800</td>
    <td>PAID</td>
    <td><button type="button">Print</button></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><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 class="centercolumn">
    <div class="card">
      <h2>Anouncement & Notice</h2>
      <p>&nbsp;</p>
    </div>
  </div>
  -->

</div>

<div class="footer">
  <h4>Copyright &copy; 2018 PHSSB.com.my | Design: Sayyed_i0</h4>
</div>

</body>
</html>