Tweaking text. Changed Table of contents from <p> to h2

demos/grids/grid-base-eng.html

@@ -103,7 +103,7 @@ <h1 id="wb-cont">CSS Grid System</h1>
 
 <div class="clear"></div>
 <div class="span-6 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul class="column-three">
 	<li><a href="#overview">Grid overview</a></li>
         <li><a href="#structure">Grid structure</a>
@@ -156,10 +156,37 @@ <h3>Do you have to use grids?</h3>
 	</ul>
 </div>
 <div class="clear"></div>
-<p>Grids by default do not have any form of decoration.</p>
-<p>For example, the table of contents at the top of this page is in a grid cell, but this entire sub section of information is not. That said, grids by default do not have any form of decoration. So although the table of contents is a visual box, that does not mean all grid cells are so easy to spot. Grid cells are actually invisible by default and decoration can be applied, if desired.</p>
+
+<h3>No left menu </h3>
+<p>If a pages has no left menu, there are two grid systems that can be used within the page.  An 8 column is the default and an optional 12 column can be called in at any location on the page by opening a <code>&lt;div class=&quot;grid-12&quot;&gt;</code>. </h3>
+<div class="span-3"> <img src="images/grids-8-12.gif" alt="Comparison of grid 8 and grid 12" width="340" height="180" /> </div>
+<div class="span-3"><p>Example page: <a class="button button-accent" href="grid-base-full-eng.html">No left menu grid options</a></p></div>
 <div class="clear"></div>
+<h3>With a left menu</h3>
+<p> There are two grid systems that can be used within a page that has a left menu.  An <strong>8-column system is the default</strong>, however because the left menu occupies the first 2 columns, the content area can occupy only the remaining six columns. An optional 12-column is available at any point on the page by simply opening a <code>&lt;div class=&quot;grid-12&quot;&gt;</code> within the content area.</p>
+<h3><strong>Why is 8 columns the default?</strong></h3>
+<p>Most complex sites have a left menu. The left menu takes up a certain number of grid cells, leaving the remaining space for the content area. The default design of this grid system allows for the left menu to be two columns wide while the content area is six. </p>
+<p>The content area, with it's six columns, nicely divides into two and three equal columns. As demonstrated below, a 12 column grid system that has a left menu, cannot divide the content as nicely, as the remaing cells cannot be divided by two, which is a basic design requirement. A 16-column grid system also has problems, as the remaining space cannot be divided into equal thirds. In fact, the only grid system that solved all design requirements was a 24-column grid system, but that seems  overcomplicated. Furthermore, text should not be put in the tinest grid cells, like a <code>span-1</code>,  and should only be used for indenting purposes or to hold an image so having 24 tiny grid cells was potentially going against accessibility requirements. The <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.0 requires text to increase up to 200% without breaking the layout and text inside a tiny box cannot effectively do this. Refer to: <a href="http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale">WCAG 2.0: Success Criterion 1.4.4</a></p>
+
+<div class="span-2"><img src="images/tick.gif" alt="Correct" class="image-actual margin-bottom-none">
+              <p class="background-light"> Both can divide the content area into thirds.</p>
+            <img src="images/grids-8-12-span2.gif" width="340" height="180" alt="Comparison of grid 8 and grid 12 with a left menu and the content area divided into thirds" /> </div>
+
+<div class="span-2"><img src="images/tick.gif" alt="Correct" class="image-actual margin-bottom-none">
+              <p class="background-light"> Both can create a right menu the same width as the left menu.</p>
+              <img src="images/grids-8-12-span2-4.gif" width="340" height="180" alt="Comparison of grid 8 and grid 12 with equal width left and right menus" /> </div>
 
+
+<div class="span-2"><img src="images/x.gif" alt="Incorrect" class="image-actual margin-bottom-none">
+              <p class="background-light"> Only one can divide the content area in half.</p>
+              <img src="images/grids-8-12-span3.gif" width="340" height="180" alt="Comparison grid 8 and grid 12 with a left menu and dividing the content area in half (only possible in grid 8)" /> </div>
+<div class="clear"></div>
+<h3>12 column option </h3><div class="span-2 float-right">
+              <p class="background-light">A grid-12 living inside of the the default 8 column grid design.</p>
+              <img src="images/grids-8-12-grid12.gif" width="340" height="180" alt="Comparison of grid 8 and grid 12 nested in a grid 8" /> </div>
+<p>For complex or alternate layouts, you can call in a <code>grid-12</code> <strong class="color-attention">within the content area</strong>. Although the default grid system will likely meet the majority of all needs, this alternate grid version is available and can be easily activated.</p>
+
+<div class="clear"></div>
 <h2 id="structure">Grid structure</h2>
 <p>When there is a left menu, the grid system offers two grid layouts for the content ara: the <strong>six</strong> column layout and the <strong>twelve</strong> column layout.</p>
 <div class="clear"></div>

demos/grids/grid-border-eng.html

@@ -138,7 +138,7 @@ <h1 id="wb-cont">Borders</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-              <p>Table of contents</p>
+              <h2>Table of contents</h2>
               <ul>
                 <li><a href="#overview">Overview</a></li>
                 <li><a href="#css">CSS</a></li>

demos/grids/grid-button-eng.html

@@ -101,7 +101,7 @@ <h1 id="wb-cont">Buttons</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#overview">Overview</a></li>
 <li><a href="#base">Base classes</a></li>

demos/grids/grid-color-eng.html

@@ -101,7 +101,7 @@ <h1 id="wb-cont">Colour</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#background">Background colours</a></li>
 <li><a href="#font">Font colours</a></li>

demos/grids/grid-form-eng.html

@@ -115,7 +115,7 @@ <h1 id="wb-cont">Forms</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#overview">Overview</a></li>
 <li><a href="#checkboxes">Checkboxes and radio buttons</a></li>

demos/grids/grid-image-eng.html

@@ -102,7 +102,7 @@ <h1 id="wb-cont">Images</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#overview">Overview</a></li>
 <li><a href="#fluid">Fluid width images</a></li>

demos/grids/grid-message-eng.html

@@ -101,7 +101,7 @@ <h1 id="wb-cont">Messages</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#alert">Alert</a></li>
 <li><a href="#attention">Attention</a></li>

demos/grids/grid-module-eng.html

@@ -111,7 +111,7 @@ <h1 id="wb-cont">Modules</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 	<li><a href="#module">module</a></li>
     <li><a href="#related">module-related</a></li>
@@ -558,7 +558,7 @@ <h2 id="toc"><code>module-table-contents</code> style</h2>
 <p>Use the <code>module-table-contents</code> class to create a <strong>table of contents</strong>. For consistency and to keep things simple, table of contents should only use a <code>span-4</code> or a <code>span-6</code>. Each can have multiple columns of links. That is more than enough options while still adheres to a standard format.</p>
 
 <div class="span-4 module-table-contents">
-		<p>Table of contents</p>
+		<h2>Table of contents</h2>
 		<ul>
 			<li><a href="#toc">Fake link</a></li>
 			<li><a href="#toc">Fake link</a></li>
@@ -571,7 +571,7 @@ <h2 id="toc"><code>module-table-contents</code> style</h2>
 	<summary>View code</summary>
 <pre>
 &lt;div class=&quot;span-4 module-table-contents&quot;&gt;
-	&lt;p&gt;Table of contents&lt;/p&gt;
+	&lt;h2&gt;Table of contents&lt;/h2&gt;
 	&lt;ul&gt;
 		&lt;li&gt;&lt;a href=&quot;#toc&quot;&gt;Fake link&lt;/a&gt;&lt;/li&gt;
 		&lt;li&gt;&lt;a href=&quot;#toc&quot;&gt;Fake link&lt;/a&gt;&lt;/li&gt;
@@ -585,7 +585,7 @@ <h2 id="toc"><code>module-table-contents</code> style</h2>
 
     <p>The ability to spread the list over multiple columns is achieved using the CSS3 <code>column-count</code> attribute.  IE9 and lower will only the list in a single column, as these browsers do not support column-count.  However, from an accessibility stance, this is a better approach is a table of contents is a singular thing and therefore should be a single list.  Historically the list is chopped into smaller lists and each one is placed in a grid cell to create the column effect, but this new approach is more symantcially correct and inline with accessible. </p>
 	<div class="span-4 module-table-contents">
-		<p>Table of contents</p>
+		<h2>Table of contents</h2>
 		<ul class="column-two">
 			<li><a href="#toc">Fake link</a></li>
 			<li><a href="#toc">Fake link</a></li>
@@ -602,7 +602,7 @@ <h2 id="toc"><code>module-table-contents</code> style</h2>
 	<summary>View code</summary>
 <pre>
 &lt;div class=&quot;span-4 module-table-contents&quot;&gt;
-	&lt;p&gt;Table of contents&lt;/p&gt;
+	&lt;h2&gt;Table of contents&lt;/h2&gt;
 	&lt;ul class=&quot;column-two&quot;&gt;
 		&lt;li&gt;&lt;a href=&quot;#toc&quot;&gt;Fake link&lt;/a&gt;&lt;/li&gt;
 		&lt;li&gt;&lt;a href=&quot;#toc&quot;&gt;Fake link&lt;/a&gt;&lt;/li&gt;
@@ -619,7 +619,7 @@ <h2 id="toc"><code>module-table-contents</code> style</h2>
 <div class="clear"></div>
 
     <div class="span-6 module-table-contents">
-		<p>Table of contents</p>
+		<h2>Table of contents</h2>
 		<ul class="column-three">
 			<li><a href="#toc">Fake link</a></li>
 			<li><a href="#toc">Fake link</a></li>
@@ -637,7 +637,7 @@ <h2 id="toc"><code>module-table-contents</code> style</h2>
 	<summary>View code</summary>
 <pre>
 &lt;div class=&quot;span-6 module-table-contents&quot;&gt;
-	&lt;p&gt;Table of contents&lt;/p&gt;
+	&lt;h2&gt;Table of contents&lt;/h2&gt;
 	&lt;ul class=&quot;column-three&quot;&gt;
 		&lt;li&gt;&lt;a href=&quot;#toc&quot;&gt;Fake link&lt;/a&gt;&lt;/li&gt;
 		&lt;li&gt;&lt;a href=&quot;#toc&quot;&gt;Fake link&lt;/a&gt;&lt;/li&gt;

demos/grids/grid-opacity-eng.html

@@ -101,7 +101,7 @@ <h1 id="wb-cont">Opacity</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#overview">Overview</a></li>
 <li><a href="#css">CSS</a></li>

demos/grids/grid-other-eng.html

@@ -102,7 +102,7 @@ <h1 id="wb-cont">Other</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 	<li><a href="#badges">Badges</a></li>
 	<li><a href="#invisible">Invisible</a></li>

demos/grids/grid-position-eng.html

@@ -100,7 +100,7 @@
 <h1 id="wb-cont">Positions and alignment</h1>
 
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 	<li><a href="#floats">Floats</a></li>
     <li><a href="#horizontal">Horizontal alignment</a></li>

demos/grids/grid-proximity-eng.html

@@ -100,7 +100,7 @@
 <h1 id="wb-cont">Proximity</h1>
 
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#overview">Overview</a></li>
 <li><a href="#padding">Padding</a></li>

demos/grids/grid-table-eng.html

@@ -102,7 +102,7 @@ <h1 id="wb-cont">Tables</h1>
 <div class="wet-boew-prettify all-pre linenums">
 
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#default">Default design</a></li>
 <li><a href="#supporting">Supporting classes</a>

demos/grids/grid-text-eng.html

@@ -101,7 +101,7 @@ <h1 id="wb-cont">Text</h1>
 
 <div class="wet-boew-prettify all-pre linenums">
 <div class="span-4 module-table-contents">
-<p>Table of contents</p>
+<h2>Table of contents</h2>
 <ul>
 <li><a href="#headings">Headings</a></li>
 <li><a href="#font">Font size</a></li>