<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>{{title}}</title>
    <link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap.css'}}"/>
    <style>
      body {
        padding-top: 3rem; /* to make the container go all the way to the bottom of the navbar (a bit of margin on the headers too) */
      }
      table {
        border-collapse: separate;
        border-spacing: 25px 0;
        margin: 2rem 0 2rem;
      }
      thead {
        text-align: left;
      }
      td {
        padding: 3px 0 
      }
    </style>
    <link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap-responsive.css'}}"/>
    <link type="text/css" rel="stylesheet" href="{{asset 'css/pilcrow.css'}}"/>
    <link type="text/css" rel="stylesheet" href="{{asset 'css/hljs-github.min.css'}}"/>
  </head>
<body>

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" href="{{rootToC}}">TOP Integration v1.2.1</a>
        <div class="nav-collapse collapse">
          <ul class="nav">

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">How To <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="{{rootIntegration}}index.html">Get Started</a></li>
                <li><a href="{{rootIntegration}}scenarios/media/index.html">Play Content</a></li>
                <li><a href="{{rootIntegration}}supported/index.html">Supported</a>
                <li><a href="{{rootIntegration}}migration/index.html">Migration</a>
                <li><a href="{{rootIntegration}}scenarios/index.html">Scenarios</a>
                <li><a href="{{rootIntegration}}features/index.html">Features</a>
              </ul>
            </li>

            <li><a href="{{rootToC}}api/com/turner/top/sdk/TOP.html">API</a></li>
            <li><a href="{{rootToC}}examples/index.html">Examples</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    {{~> content}}
  </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="{{asset 'js/bootstrap.min.js'}}"></script>

  <script>
  
    function anchorNavbarOffsetHack()
    {
      scrollBy(0, -60); // navbar is about 56px high
    }

    // Fix anchor hidden under navbar with offset
    window.onhashchange = anchorNavbarOffsetHack;

    if (location.hash.length > 0)
      window.onload = anchorNavbarOffsetHack;

  </script>
</body>
</html>
