<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
    <meta content='width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0' name='viewport' />
    <link rel="stylesheet" href="jQuery/jquery.mobile-1.4.0.min.css" />
    <script src='jQuery/jquery-1.7.1.min.js' type='text/javascript'></script>
    <script src="jQuery/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
    <title>
      VPS Control Center
    </title>
    <style>
/* Generic pane rules from http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/ */
      body { margin: 0 }
      .row, .col { overflow: hidden; position: absolute; }
      .row { left: 0; right: 0; }
      .col { top: 0; bottom: 0; }
      .scroll-x { overflow-x: auto; }
      .scroll-y { overflow-y: hidden; }
      .header.row { height: 50px; top: 0; }
      .body.row { top: 50px; bottom: 0px; }
      .footer.row { height: 25px; bottom: 0; }
    </style>
  </head>
  <body>
  <div id="nav" class="header row" style="text-align:center;background-color:black">
    <a href="Main.html" target="controls" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-gear ui-shadow ui-btn-b">Main</a>
    <a href="/LFOs" target="controls" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-gear ui-shadow ui-btn-b">LFOs</a>
    <a href="/ADSR" target="controls" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-gear ui-shadow ui-btn-b">ADSR</a>
    <a href="/fullstop" target="_top" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-arrow-d ui-shadow ui-btn-e">Stop</a>
  </div>

  <div class="body row scroll-y" style="background-color:gray;text-align:center;">
    <iframe name="controls" style="height:100%; width: 100%; "></iframe>
  </div>

  <!--div id="nav" class="footer row">  </div-->
  </body>
</html>
