<!DOCTYPE html>
<html>
  <head>
    <title>Stories</title>
    <style>
      /* page css */
      div.page {
        margin: 0px;
        padding: 0px;
        font-size: 100%;
        font-family: Arial, Helvetica, sans-serif;
      }
      div.page p:not([class]) {
        margin-bottom: 1em;
        margin-top: 1em;
      }
      div.page {
        width: 100%;
        display: flex;
        flex-direction: row;
      }
      /* sidebar css */
      div.sidebar {
        min-width: 200px;
        height: calc(100vh - 20px);
        overflow-y: visible;
        overflow-x: hidden;
        scroll-behavior: smooth;
      }
      div.sidebar > ol {
        padding: 4px;
      }
      div.sidebar div:first-child {
        background-color: lightcoral;
        cursor: pointer;
      }
      div.sidebar div[data-hide="true"] {
        display: none;
      }
      div.sidebar dd {
        margin-left: 1em;
        padding: 4px;
        cursor: pointer;
        border-radius: 4px;
        margin-bottom: 4px;
      }
      div.sidebar dd:nth-child(even) {
        background-color: lightgray;
      }
      div.sidebar dd:nth-child(odd) {
        background-color: lightblue;
      }
      div.sidebar a {
        color: black;
      }
      div.sidebar dd[data-selected] {
        background-color: green;
      }

      /* content css */
      div.content {
        width: 100%;
        padding: 20px;
      }
    </style>
    <script src="./stories.js"></script>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <taler-stories id="container"></taler-stories>
  </body>
</html>