<html>
  <head>
    <link rel="kinetic-stylesheet" type="text/css"
          tal:attributes="href
          string:${context/@@absolute_url}/++resource++coreplugin.kss"/>
    <link rel="stylesheet" type="text/css"
          tal:attributes="href
          string:${context/@@absolute_url}/++resource++demo.css"/>
    <metal:header use-macro="context/@@header_macros/header_resources" />
    <style type="text/css">
      div.nested { border: 1px solid green; padding: 0.4em; }
      .selected { background-color: cyan; }
    </style>
  </head>
  <body>
    <div id="global-links">
      <ul>
        <li><a href=".">All demos</a></li>
        <li><a href="javascript:void(createLoggingPane(true))">Show logging
      pane</a></li>
        <li><a href="./++resource++coreplugin.kss">View KSS resource</a></li>
      </ul>
    </div>  
    <h2>Selectors</h2>
    <p>We test the selectors which are used in KSS. The selectors allow you to
      specify what node to take action on etc.</p> 
    <h3>
      <code>parentnode()</code> with node in path
    </h3>
    <div class="help">
        Click the text link.
    </div>
    <div id="target">Target
      <a class="button click cursorPointer" href="#" id="parentnodeok">Click me!</a>
    </div>
    <div class="help">
        Clicking the text link below should not update the target.
    </div>
    <div>
      <a  class="button click cursorPointer" href="#" id="parentnodenotok">Click me!</a>
    </div>



    <div class="nested" id="nesteddivs0">
      <div class="nested" id="nesteddivs1">
        <div class="nested" id="nesteddivs2">
          <a href="#" id="parentnodechain" class="button click cursorPointer" >Click me!</a>
        </div>
      </div>
    </div>
  </body>
</html>
