Fix additional element section

* Add informative/normative label to additional elements
* Make the additional element section unnumbered
* Make elements link cold in print media

#213
#212
#220

css/smpte.css

@@ -495,6 +495,8 @@ code:hover {
   #sec-elements a {
     color: currentColor;
     text-decoration: none;
+    pointer-events: none;
+    cursor: default;
   }
 
   @page:first {

doc/main.html

@@ -670,7 +670,8 @@ <h4>Additional elements section</h4>
         <ul>
           <li>an <code>id</code> attribute whose value is prefixed with <code>element-</code>;</li>
           <li>a <code>title</code> attribute that provides a short description of the element;</li>
-          <li>a <code>href</code> attribute that links to the element, as detailed below.</li>
+          <li>a <code>href</code> attribute that links to the element, as detailed below; and</li>
+          <li>a <code>class</code> attribute that contains the token <code>informative</code> if the element is informative.</li>
         </ul>
 
         <p>
@@ -2276,7 +2277,7 @@ <h3>Sample Workflow </h3>
 
   <section id="sec-elements">
     <ol>
-      <li><a id="element-sample-text" title="Sample text element" href="elements/sample.txt"></a></li>
+      <li><a id="element-sample-text" title="Sample text element" class="informative" href="elements/sample.txt"></a></li>
       <li><a id="element-url" title="Sample URL element"
       href="https://github.com/SMPTE/html-pub/tree/631ed7a0312fa183c356a7b742129ce46f92736f"></a></li>
     </ol>

smpte.js

@@ -532,7 +532,7 @@ function insertElementsAnnex(docMetadata) {
     return;
   }
 
-  sec.classList.add("annex");
+  sec.classList.add("unnumbered");
 
   const intro = document.createElement("p");
   intro.innerText = "This annex lists non-prose elements of this document."
@@ -578,14 +578,11 @@ function insertElementsAnnex(docMetadata) {
     }
 
     e.parentElement.insertBefore(
-      document.createTextNode(` ${e.title} (${isAbsoluteLink ? "url:" : "file:"} `),
+      document.createTextNode(` ${e.title} ${e.classList.contains("informative")? "(informative)" : "(normative)"}. ${isAbsoluteLink ? "url:" : "file:"} <`),
       e
     );
 
-    e.parentElement.insertBefore(
-      document.createTextNode(")"),
-      null
-    );
+    e.parentElement.insertBefore(document.createTextNode(">."), null);
 
   }
 }