<!DOCTYPE html>
<html lang="en">
  <head>     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>{application}</title>
    <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABGwAAARsBjfdO5QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJMSURBVEiJxdZfaI9RGAfwj22IjGEthiimxJ3SSk2SXCk3lOLChQs3qymS3YioFbmZGxcrV4ikkCTjRrlxofn/J4Qp/zMt82dzcc7b791se3+/31751uk973Oe5/mec55znufwnzCuRP0pWIMlqIv27/EQnfiS6+xQi2P4joER2k90YHZepPPxbBTCoe0FFuRBfLEE0qSdHCtpNX6VQfw5y3FFxng9KsuY8GQZBzeL+GuqP4A7eDyMXlccS/Ah6o8Jb6OT1pTsjMK2Hk7Jj0bZ2SynWSuGq/F7LSXrSvUvpfpP4vd4EX4zUYdPOIUazMF9/EZ/JJkU9e7gQh6kCS75++TuxP5h5HvyJG4WVpc4fyqc3Bq8S8n7sDZPYmjAPrzy9yofoQUz8iZNcBdbIlGfwuq3yjm2Q3ERt7EK04WtbsQ9Ocd2KGpxzuBt7kc7JuZBUIkVmDDCeIsQ6yfYOILONOwW8n3R2C6s5jlWlmIYUadQSleXYnja4AJ/HutRNYpNBZpwQEgwiX3rKDaDME8hdp14nXLyBoewKKXfgDZ0R51vuI6bCne76ArXiMWp/2XYiwepSd0Q8ne/kD4vY4OQPhMsxtJiSbOwKxIlu/ADm/JyPhyW40ok68UR4XHXFydyQgjTmFElxK9JqL/9sXVgbkpvocLd7sVBTC2HsEJ4yvYYnCi6sW4Uu834GHV/46WQ6bYo8v0+K848TXpLyFpZqFd49iStBzOLISZcl2bhtTggFIFi0Z4ibVNm3BuwA+NLsKkWyue2cgj/Of4AiebN88P8fu4AAAAASUVORK5CYII=">

    <style>
      html, body {
        background-image: repeating-linear-gradient(60deg, beige, beige 40pt, ivory 40pt, ivory 80pt);
        margin: 0pt;
        padding: 0pt;
      }

      #container {
        width: 60%;
        min-width: 400pt;
        background-color: linen;
        color: black;
        margin: 15pt auto;
        padding: 1pt 25pt 60pt 25pt;
        font-family: Verdana, Geneva, Tahoma, sans-serif !important;
        font-size: 15pt;
        letter-spacing: 0.8pt;
        border: 1pt solid grey;
        border-radius: 55pt 0pt 0pt 0pt;
        box-shadow: 0pt 4pt 8pt 0pt black, 0pt 6pt 20pt 0pt grey;
      }

      #logo {
        margin: 40pt 0pt 60pt 5pt;
        text-align: center;
        color: grey;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 15pt;
        font-weight: lighter;
      }

      #logo img {
        border: 0pt !important;
      }

      #container a {
        color: darkred;
        text-decoration: none;
      }

      #container img {
        border: 1pt solid grey;
        border-radius: 5pt;
      }

      #content {
        padding: 0pt;
        margin: 20pt 60pt;
      }

      ul {
        padding: 0pt;
        margin: 20pt 30pt;
      }

      footer p {
        color: black;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: lighter;
        font-size: 12pt;
        padding: 10pt 15pt;
        margin: 35pt 0pt 0pt 0pt;
        text-align: center;
      }

      footer a {
        color: darkred;
      }

      pre {
        font-family: Monospace;
        font-size: 9pt;
        background: black;
        color: white;
        padding: 15pt;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="logo">
        <img alt="bones" src="data:image/png;base64,[encoded data, 10128 characters]" />
        <p>Minimalist PHP framework that follows the KISS principle</p>
      </div>
      <div id="content">
        <h1>Table of Contents</h1>
        <ul>
        <!-- open(toc) -->
        <li><a href="#{id}">{title}</a></li>
        <!-- close(toc) -->
        </ul>
        <!-- open(pages) -->
        <h2><a name="{id}">{id}. {title}</a></h2>
        <div>{text}</div>
        <!-- close(pages) -->
      </div>
    </div>

    <footer>
      <p>Powered by 
        <a href="./"><strong>{application}</strong></a> &minus; Minimalist PHP framework that follows the KISS principle
      </p>
    </footer>
  </body>
</html>
