<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

body {
    margin: 0;
    background-color: #596580;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #596580;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.home {
    background-color: #296677;
    color: white;
}

li a:hover:not(.home) {
    background-color: #505050;
    color: white;
}

</style>

</head>

<body>

<ul>
  <br>
  <li><a href="initial.htm" target="iframe">iOS Apps</a></li>
  <li><a href="courier.htm" target="iframe">Courier: Group Messages</a></li>
  <li><a href="ipv4calculator.htm" target="iframe">IPv4 VLSM Calculator</a></li>
  <li><a href="cantus.htm" target="iframe">Cantus: Simple Pitch Pipe</a></li>
  <li><a href="simple_race_track.htm" target="iframe">Simple Race Track</a></li>
  <li><a href="daniel-and-karen-collection.htm" target="iframe">Daniel and Karen Collection Sticker Pack</a></li>
  <li><a href="mailto:support@utili.us?Subject=support%20needed%20from%20Utili%20Apps" target="_top">Email for Support</a></i>
</ul>

<iframe height="750px" width="100%" src="initial.htm" name="iframe"></iframe>

<br>

<div align="right" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left: 100px">

</div>

</body>

</html>