<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- disable zooming -->
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
  <title>Stylus Functional Tests</title>
  <style media="screen">

    html, body {
        margin:0;
        padding:0;

        height:100%;
        width: 100%;
        /* See http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling */
        position:fixed;
        overflow: hidden;
        font-size: 18px;
        background:gray;
        font-family:arial,sans-serif;
        color:#FFF;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-overflow-scrolling: auto;
        user-select: none;
        touch-action: manipulation;
    }

    .site {
        display: flex;
        min-height: 100%;
        flex-direction: column;
    }
/*

    .interactive {
        -ms-content-zooming: none;
        touch-action: none;
    }
 */

    main {
        flex-grow: 1;
        overflow: hidden;
        position:relative
    }

    .container {
        position:absolute;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }
    </style>

    <script src=".././3rdparty/all.js"></script>
	<script src="../../lib/bootstrap.js"></script>
</head>
<body class="site" oncontextmenu="return false" >
<main id="main" class="container">
    <canvas id="canvas" width="100%" height="100%" style="position: absolute; z-index:10000; user-select: none;">
	    Get a better browser, bro.
    </canvas>
</main>
<script>
    Bootstrap.import('./main.js')
</script>
</body>
</html>