Add some CSS background text for frames and input.

Addresses #35.

Author: gkellogg

index.html

@@ -137,6 +137,20 @@
     color: #999;
     text-decoration: line-through;
   }
+  div.example > pre.frame:before {
+    content: "Frame";
+    float: right;
+    font: x-large Arial, sans-serif;
+    color: gray;
+    padding-top: -20px;
+  }
+  div.example > pre.input:before {
+    content: "Input";
+    float: right;
+    font: x-large Arial, sans-serif;
+    color: gray;
+    padding-top: -20px;
+  }
   .diff { font-weight:bold; color:#0a3; }
   .error a {
     color:  #ff4500;
@@ -389,7 +403,7 @@ <h3>Framing</h3>
 
     <p>For example, assume the following JSON-LD frame:</p>
     <pre id="sample-library-frame"
-         class="example" data-transform="updateExample"
+         class="example frame" data-transform="updateExample"
          data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
          data-frame-for="Flattened library objects"
          title="Sample library frame">
@@ -416,7 +430,7 @@ <h3>Framing</h3>
 
     <p>When using a flattened set of objects that match the frame components:</p>
     <pre id="flattened-library-objects"
-         class="example" data-transform="updateExample"
+         class="example input" data-transform="updateExample"
          title="Flattened library objects">
     <!--
     {
@@ -485,7 +499,7 @@ <h3>Framing</h3>
     <p>If <a>processing mode</a> is <code>json-ld-1.1</code>, or the <a>omit graph flag</a> is <code>true</code>,
       the top-level <code>@graph</code> <a>member</a> may be omitted.</p>
 
-    <pre class="example" data-transform="updateExample"
+    <pre class="example frame" data-transform="updateExample"
          data-frame="Sample library frame"
          data-result-for="Flattened library objects"
          data-options="omitGraph=true"
@@ -537,7 +551,7 @@ <h3>Default content</h3>
       used in the output document. It's purpose is for frame matching and
       finding default values. Note the <em>description</em> value for <em>Library</em> in the following example.</p>
     <pre id="sample-library-frame-with-default-value"
-         class="example nohighlight" data-transform="updateExample"
+         class="example frame nohighlight" data-transform="updateExample"
          data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
          data-frame-for="Flattened library objects"
          title="Sample library frame with @default value">
@@ -617,7 +631,7 @@ <h4>Object Embed Flag</h4>
         based on the default <code>@last</code> value of the <a>object embed flag</a>:</p>
 
       <pre id="sample-library-frame-with-explicit-embed-set-to-last"
-           class="example" data-transform="updateExample"
+           class="example frame" data-transform="updateExample"
            data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
            data-frame-for="Flattened library objects"
            title="Sample library frame with implicit @embed set to @last">
@@ -674,7 +688,7 @@ <h4>Object Embed Flag</h4>
          value of <code>@never</code>, the values for <em>Book</em> and <em>Chapter</em> will be excluded.</p>
 
       <pre id="sample-library-frame-with-explicit-embed-set-to-never"
-           class="example nohighlight" data-transform="updateExample"
+           class="example frame nohighlight" data-transform="updateExample"
            data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
            data-frame-for="Flattened library objects"
            title="Sample library frame with explicit @embed set to @never">
@@ -720,7 +734,7 @@ <h4>Object Embed Flag</h4>
         consider an alternate library example where books are doubly indexed.</p>
 
       <pre id="flattened-library-objects-with-double-index"
-           class="example" data-transform="updateExample"
+           class="example input" data-transform="updateExample"
            title="Flattened library objects with double index">
       <!--
       {
@@ -793,7 +807,7 @@ <h4>Object Embed Flag</h4>
         both properties will include expanded values.</p>
 
       <pre id="sample-library-frame-with-explicit-embed-set-to-always"
-           class="example nohighlight" data-transform="updateExample"
+           class="example frame nohighlight" data-transform="updateExample"
            data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
            data-frame-for="Flattened library objects with double index"
            title="Sample library frame with explicit @embed set to @always">
@@ -870,7 +884,7 @@ <h4>Explicit inclusion flag</h4>
         some properties from the input, but omit others.</p>
 
       <pre id="sample-library-frame-with-explicit-set-to-true"
-           class="example nohighlight" data-transform="updateExample"
+           class="example frame nohighlight" data-transform="updateExample"
            data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
            data-frame-for="Flattened library objects"
            title="Sample library frame with @explicit set to true">
@@ -946,7 +960,7 @@ <h4>Omit default flag</h4>
         See <a href="#default-content" class="sectionRef"></a> for a further discussion.</p>
 
       <pre id="sample-library-frame-with-default-value-and-omitDefault"
-           class="example nohighlight" data-transform="updateExample"
+           class="example frame nohighlight" data-transform="updateExample"
            data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
            data-frame-for="Flattened library objects"
            title="Sample library frame with @default value and @omitDefault">
@@ -971,7 +985,7 @@ <h4>Omit default flag</h4>
       <p>The resulting output will exclude properties for Book which are not explicitly
         listed in the <a>frame object</a>:</p>
 
-      <aside class="example ds-selector-tabs"
+      <aside class="example input ds-selector-tabs"
              title="Sample library output with @default value and @omitDefault">
         <div class="selectors">
           <a class="playground"
@@ -1041,7 +1055,7 @@ <h3>Reverse Framing</h3>
       Library example can be inverted using the following frame:</p>
 
     <pre id="inverted-library-frame"
-         class="example nohighlight" data-transform="updateExample"
+         class="example frame nohighlight" data-transform="updateExample"
          data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
          data-frame-for="Flattened library objects"
          title="Inverted library frame">
@@ -1129,7 +1143,7 @@ <h3>Framing Named Graphs</h3>
       is split between the <a>default graph</a>, and a graph named <code>http://example.org/graphs/books</code>:</p>
 
     <pre id="frame-with-named-graphs"
-         class="example nohighlight" data-transform="updateExample"
+         class="example frame nohighlight" data-transform="updateExample"
          data-content-type="application/ld+json;profile=http://www.w3.org/ns/json-ld#framed"
          data-frame-for="Flattened Input with named graphs"
          title="Frame with named graphs">
@@ -1148,7 +1162,7 @@ <h3>Framing Named Graphs</h3>
     </pre>
 
     <pre id="flattened-input-with-named-graphs"
-         class="example" data-transform="updateExample"
+         class="example input" data-transform="updateExample"
          title="Flattened Input with named graphs">
     <!--
     [{