<html> <head>

<title><%= title %></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

<!-- TODO: most of the css before the '*' can be removed. -->

<style>
  #container{ margin: 0 auto; width: 800px; }

  /* Debug borders */
  /* p, li, dt, dd, div, pre, h1, h2, h3, h4, h5, h6 { border: 1px solid red; } */

  body { font-size: 14px; line-height: 20px; margin: 1em 5% 1em 5%; font-family: Verdana, Arial, Helvetica, sans-serif; }
  a { color: #336; text-decoration: underline; }
  a:visited { color: #334; }
  em { font-style: italic; }
  strong { font-weight: bold; }
  tt { color: navy; }

  h1, h2, h3, h4, h5, h6 { color: #223; margin-top: 1.2em; margin-bottom: 0.5em; line-height: 1.3; }
  h1 { border-bottom: 2px solid silver; }
  h2 { border-bottom: 2px solid silver; padding-top: 0.5em; }

  hr { color: #ccc; margin-top: 1.6em; }

  p { color: #222; text-align: justify; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.4em; }

  /* pre { padding: 10; margin: 0; font-family: monospace; font-size: 0.9em; } */

  pre.pass { color: green; }
  pre.fail { color: red; }
  pre.error { color: red; font-weight: bold; }

  span#author { color: #527bbd; font-weight: bold; font-size: 1.1em; }
  span#email { }
  span#revision { }

  div#footer { font-size: small; border-top: 2px solid silver; padding-top: 0.5em; margin-top: 4.0em; }
  div#footer-text { float: left; padding-bottom: 0.5em; }
  div#footer-badges { float: right; padding-bottom: 0.5em; }

  /* Block element content. */
  div.content { padding: 0; }

  /* Block element titles. */
  h1.title { font-weight: bold; text-align: left; font-size: 3em; margin-top: 1.0em; margin-bottom: 0.5em; }

  /* Block element titles. */
  div.title, caption.title { font-weight: bold; text-align: left; margin-top: 1.0em; margin-bottom: 0.5em; }
  div.title + * { margin-top: 0; }
  td div.title:first-child { margin-top: 0.0em; }
  div.content div.title:first-child { margin-top: 0.0em; }
  div.content + div.title { margin-top: 0.0em; }
  div.sidebarblock > div.content { background: #ffffee; border: 1px solid silver; padding: 0.5em; }

  img { border-style: none; }

  dl { margin-top: 0.8em; margin-bottom: 0.8em; }
  dt { margin-top: 0.5em; margin-bottom: 0; font-style: italic; }
  dd > *:first-child { margin-top: 0; }
  ul, ol { list-style-position: outside; }

  thead { font-weight: bold; }
  tfoot { font-weight: bold; }

  *{margin:0;padding:0;}
  html,body{height:100%;color:black;}
  body{background-color:white;font:13.34px helvetica,arial,freesans,clean,sans-serif;*font-size:small;}
  table{font-size:inherit;font:100%;}
  select,input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}
  select,option{padding:0 .25em;}
  optgroup{margin-top:.5em;}
  input.text{padding:1px 0;}
  pre,code{font:12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;}
  body *{line-height:1.4em;}
  p{margin:1em 0;}
  img{border:0;}
  abbr{border-bottom:none;}

  .wikistyle h1,.wikistyle h2,.wikistyle h3,.wikistyle h4,.wikistyle h5,.wikistyle h6{border:0!important;}
  .wikistyle h1{font-size:170%!important;border-top:4px solid #aaa!important;padding-top:.5em!important;margin-top:1.5em!important;}
  .wikistyle h1:first-child{margin-top:0!important;padding-top:.25em!important;border-top:none!important;}
  .wikistyle h2{font-size:150%!important;margin-top:1.5em!important;border-top:4px solid #e0e0e0!important;padding-top:.5em!important;}
  .wikistyle h3{margin-top:1em!important;}
  .wikistyle p{margin:1em 0!important;line-height:1.5em!important;}
  .wikistyle ul{margin:1em 0 1em 2em!important;}
  .wikistyle ol{margin:1em 0 1em 2em!important;}
  .wikistyle ul ul,.wikistyle ul ol,.wikistyle ol ol,.wikistyle ol ul{margin-top:0!important;margin-bottom:0!important;}
  .wikistyle blockquote{margin:1em 0!important;border-left:5px solid #ddd!important;padding-left:.6em!important;color:#555!important;}
  .wikistyle dt{font-weight:bold!important;margin-left:1em!important;}
  .wikistyle dd{margin-left:2em!important;margin-bottom:1em!important;}
  .wikistyle table{margin:1em 0!important;}
  .wikistyle table th{border-bottom:1px solid #bbb!important;padding:.2em 1em!important;}
  .wikistyle table td{border-bottom:1px solid #ddd!important;padding:.2em 1em!important;}
  .wikistyle pre{margin:1em 0!important;font-size:90%!important;background-color:#f8f8ff!important;border:1px solid #dedede!important;padding:.5em!important;line-height:1.5em!important;color:#444!important;overflow:auto!important;}
  .wikistyle pre code{padding:0!important;font-size:100%!important;background-color:#f8f8ff!important;border:none!important;}
  .wikistyle code{font-size:90%!important;background-color:#f8f8ff!important;color:#444!important;padding:0 .2em!important;border:1px solid #dedede!important;}
  .wikistyle pre.console{margin:1em 0!important;font-size:90%!important;background-color:black!important;padding:.5em!important;line-height:1.5em!important;color:white!important;}
  .wikistyle pre.console code{padding:0!important;font-size:100%!important;background-color:black!important;border:none!important;color:white!important;}
  .wikistyle pre.console span{color:#888!important;}
  .wikistyle pre.console span.command{color:yellow!important;}
</style>

<% if css %>
<link rel="stylesheet" href="<%= css %>" type="text/css">
<% end %>

<!-- JQuery is needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" language="javascript"></script>

<!-- Highlight.js -->
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/github.min.css">

<script>
  $(document).ready(function() {
    $('pre').each(function(i, e) {hljs.highlightBlock(e)});
  });
</script>

</head>

<body class=“wikistyle”>

<!-- Side Table of Contents -->
<div id="sidebar" style="position: fixed; top: 10; right: 10; background: white;">
  <a href="javascript: toc_toggle();">
    <!-- TODO: find a preminatn image on web to use -->
    <!-- <img src="http://www.cdnjs.com/images/poweredbycloudflare.png" style="border: none;" alt="TOC" align="right"/> -->
  </a>

  <div id="toc_side" class="toc">
  </div>
</div>

<div id="container">
  <div id="header">
    <!-- TODO: find a preminatn image on web to use -->
    <!-- <img src="http://www.cdnjs.com/images/poweredbycloudflare.png" align="left" style="padding-right: 10px;" alt=""/> -->

    <div style="font-size: 2em"><%= title %></div>

    <h1>Table of Contents</h1>

    <div class="toc">
    </div>
  </div>

  <div id="content">
    <%= spec %>
  </div>
</div>

<br/><br/><br/>

</body>

</html>

<script src=“../assets/scripts/spec.js” type=“text/javascript” language=“javascript”></script>

<script type=“text/javascript” language=“javascript”>

/*****************************************************************
 * $.toc()
 * by rebecca murphey
 * rmurphey gmail com
 *
 * This function is called on its own and takes as an argument
 * a list of selectors with which it will build a table of
 * contents. 
 *
 * The first selector will make up the top level of the TOC;
 * the second selector will make up the second level of the TOC;
 * etc.
 *
 * This function returns a div containing nested unordered lists;
 * each list item is linked to an anchor tag added before the item
 * on the page.
 *
 * usage: $.toc('h1,h2,h3').prependTo('body');
 ************************************************************************/
(function($) { 
  $.toc = function(tocList) {
    $(tocList).addClass('jquery-toc');
    var tocListArray = tocList.split(',');
    $.each(tocListArray, function(i,v) { tocListArray[i] = $.trim(v); });
    var $elements = $('.jquery-toc');
    $('body').append('<div></div>');
    var $toc = $('body div:last');
    var lastLevel = 1;
    $toc.append('<ul class="jquery-toc-1"></ul>');
    $elements.each(function() {
      var $e = $(this);
      var text = $e.text();
      var anchor = text.replace(/ /g,'-');
      $e.before('<a name="' + anchor + '"></a>');
      var level;
      $.each(tocListArray, function(i,v) { 
        if (v.match(' ')) {
          var vArray = v.split(' '); 
          var e = vArray[vArray.length - 1];
        } else { e = v; }
        if ($e.is(e)) { level = i+1; } 
      });
      var className = 'jquery-toc-' + level;
      var li = '<li><a href="#' + anchor + '">' + text + '</a></li>';
      if (level == lastLevel) {
        $('ul.' + className + ':last',$toc).append(li);
      } else if (level > lastLevel) {
        var parentLevel = level - 1;
        var parentClassName = 'jquery-toc-' + parentLevel;
        $('ul.' + parentClassName + ':last',$toc).
          append('<ul class="' + className + '"></ul>');
        $('ul.' + className + ':last',$toc).append(li);
      } else if (level < lastLevel) {
        $('ul.' + className + ':last',$toc).append(li);
      }
      lastLevel = level;
    });
    var $toc_ul = $('ul.jquery-toc-1',$toc);
    $toc.remove();
    return($toc_ul);
 }
})(jQuery);

</script>

<script>

function toc_toggle() {
  $('#toc_side').toggle();
  $("pre").addClass("pass");
  $("pre:contains('FAIL:')").addClass("fail");
  $("pre:contains('ERROR:')").addClass("error");
};

$.toc('#content h1,h2,h3,h4').appendTo('.toc');

toc_toggle();

</script>