diff --git a/grids_docs.html b/grids_docs.html
index 583bdc8f..24b7fca1 100644
--- a/grids_docs.html
+++ b/grids_docs.html
@@ -6,6 +6,7 @@
 <link rel="stylesheet" type="text/css" media="all"  href="css/libraries.css" />
 <link rel="stylesheet" type="text/css" media="all"  href="css/template.css" />
 <link rel="stylesheet" type="text/css" media="all" href="css/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="css/grids_debug.css" />
 <link rel="stylesheet" type="text/css" media="all" href="css/content.css" />
 <style type="text/css">
 dt{font-weight:bold;}
diff --git a/module.html b/module.html
index cadef34b..026a6c6c 100644
--- a/module.html
+++ b/module.html
@@ -10,8 +10,7 @@
 <link rel="stylesheet" type="text/css" media="all" href="css/mod.css" />
 <link rel="stylesheet" type="text/css" media="all" href="css/mod_skins.css" />
 <!--<link rel="stylesheet" type="text/css" media="all" href="css/mod_debug.css" />
--->
-</head>
+--></head>
 <body>
 <div class="page">
 	<h1>Modules</h1>
@@ -20,6 +19,7 @@ <h2>Block Structures</h2>
 	<div class="line">
 		<div class="unit size1of3">
 			<div class="mod"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>mod </h3>
@@ -34,11 +34,12 @@ <h3>mod </h3>
 						</ul>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 		<div class="unit size1of3">
 			<div class="mod complex"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>complex</h3>
@@ -47,18 +48,19 @@ <h3>complex</h3>
 						<p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner. </p>
 						<ul class="simpleList">
 							<li>One image</li>
-							<li>Height and width only limited by image size</li>
+							<li>Height and width limited by image size</li>
 							<li>Compatible with any content</li>
 							<li>Choose when you require complex borders which cannot be simulated via css borders on mod and inner.</li>
 						</ul>
 						<p>Inspired by a conversation with Arnaud.</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 		<div class="unit size1of3 lastUnit">
 			<div class="mod pop"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>pop </h3>
@@ -67,14 +69,14 @@ <h3>pop </h3>
 						<p>Use for popups and other containers that need outside transparency.</p>
 						<ul class="simpleList">
 							<li>One image</li>
-							<li>Height and width only limited by image size</li>
+							<li>Height and width limited by image size</li>
 							<li>Compatible with any container, but not any content</li>
 							<li>Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)</li>
 						</ul>
 						<p>Inspired by Leslie Sommers mojo blocks.</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 	</div>
@@ -82,8 +84,9 @@ <h2>Block Skins</h2>
 	<h3>Contour</h3>
 	<div class="line">
 		<div class=" unit size1of3">
-			<h4>Extends mod only</h4>
+			<h4>Extends mod</h4>
 			<div class="mod grab"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>grab</h3>
@@ -92,9 +95,10 @@ <h3>grab</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod simpleExt"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>simpleExt</h3>
@@ -103,9 +107,10 @@ <h3>simpleExt</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod simple"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>simple</h3>
@@ -114,9 +119,10 @@ <h3>simple</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod noted"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>noted</h3>
@@ -125,9 +131,10 @@ <h3>noted</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod talk"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>talk</h3>
@@ -136,9 +143,10 @@ <h3>talk</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod me"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>me</h3>
@@ -147,9 +155,10 @@ <h3>me</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod basic nicole"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>basic</h3>
@@ -158,12 +167,13 @@ <h3>basic</h3>
 						<p>Must be combined with a background color or content, adds rounded corners.</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 		<div class=" unit size1of3">
 			<h4>Extends complex</h4>
 			<div class="mod complex excerpt">
+				<b class="top"><b class="tl"></b><b class="tr"></b></b>
 				<div class="inner">
 					<div class="hd section">
 						<h3>excerpt</h3>
@@ -175,31 +185,46 @@ <h3>excerpt</h3>
 						<p>Foot</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod complex flow"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
-						<h3>talk</h3>
+						<h3>flow</h3>
 					</div>
 					<div class="bd">
-						<p>Body</p>
+						<p><a href="#">Body</a></p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
+			<!--<div class="mod boo"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b>
+				<div class="inner">
+					<div class="hd">
+						<h3>flow</h3>
+					</div>
+					<div class="bd">
+						<p><a href="#">Body</a></p>
+					</div>
+				</div>
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+			</div>-->
 			<div class="mod complex photo"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="bd">
 						<img src="img/kakapo.png" alt="boo" />
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 		<div class=" unit size1of3 lastUnit">
 			<h4>Extends pop</h4>
 			<div class="mod pop sommers"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>sommers</h3>
@@ -208,7 +233,7 @@ <h3>sommers</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 	</div>
@@ -216,6 +241,7 @@ <h2>Background Objects</h2>
 	<div class="line">
 		<div class="unit size1of3">
 			<div class="mod highlight"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>highlight</h3>
@@ -224,9 +250,10 @@ <h3>highlight</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod universe"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>universe</h3>
@@ -235,11 +262,12 @@ <h3>universe</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 		<div class="unit size1of3">
 			<div class="mod comment"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>comment</h3>
@@ -248,9 +276,10 @@ <h3>comment</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod foo"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>foo</h3>
@@ -259,11 +288,12 @@ <h3>foo</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
-		<div class="unit size1of3">
+		<div class="unit size1of3 lastUnit">
 			<div class="mod nicole"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>nicole</h3>
@@ -272,9 +302,10 @@ <h3>nicole</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 			<div class="mod login"> 
+				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd">
 						<h3>login</h3>
@@ -283,7 +314,7 @@ <h3>login</h3>
 						<p>Body</p>
 					</div>
 				</div>
-				<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
+				<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
 			</div>
 		</div>
 	
diff --git a/template.html b/template.html
index 9be7c648..b4b93a94 100644
--- a/template.html
+++ b/template.html
@@ -5,17 +5,18 @@
 <title>Template Documentation</title>
 <link rel="stylesheet" type="text/css" media="all"  href="css/libraries.css" />
 <link rel="stylesheet" type="text/css" media="all"  href="css/template.css" />
+<!--<link rel="stylesheet" type="text/css" media="all"  href="css/template_debug.css" />-->
 <link rel="stylesheet" type="text/css" media="all" href="css/grids.css" />
 <link rel="stylesheet" type="text/css" media="all" href="css/content.css" />
 </head>
 <body>
 <h1>Template</h1>
-<div id="page"><!-- what does yui call "main"? -->
-	<div id="hd">
+<div class="page">
+	<div class="head">
 		<h2>Head</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	</div>
-	<div id="bd">
+	<div class="body">
 		<div class="leftCol">
 			<h2>Left Column</h2>
 			<p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
@@ -41,7 +42,7 @@ <h2>Main Content</h2>
 			<p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of "leftCol" and "rightCol" are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
 		</div>
 	</div>
-	<div id="ft">
+	<div class="foot">
 		<h2>Foot</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>		
 	</div>	
diff --git a/template_docs.html b/template_docs.html
index b45b9b72..2ec0ff7f 100644
--- a/template_docs.html
+++ b/template_docs.html
@@ -27,19 +27,19 @@ <h2>Base Classes</h2>
 	</thead>
 	<tbody>
 	<tr class="odd">
-		<th scope="row"><code>#page</code></th>
+		<th scope="row"><code>page</code></th>
 		<td>Main wraps site content. It can be extended via the classes <code>oldSchool</code> and <code>liquid</code> to provide 750px and full width layouts respectively.</td>
 	</tr>
 	<tr class="even">
-		<th scope="row"><code>#hd</code></th>
+		<th scope="row"><code>head</code></th>
 		<td>Site header, generally contains custom code. (e.g. horizontal navigation, logo, search box)</td>
 	</tr>
 	<tr class="odd">
-		<th scope="row"><code>#bd</code></th>
+		<th scope="row"><code>body</code></th>
 		<td>Main content area, body of the page.</td>
 	</tr>
 	<tr class="even">
-		<th scope="row"><code>#ft<strong></strong></code></th>
+		<th scope="row"><code>foot<strong></strong></code></th>
 		<td>Site footer, generally contains custom code.</td>
 	</tr>
 	<tr class="odd">
@@ -72,33 +72,33 @@ <h2>Base Classes</h2>
 	</tr>
 	<tr class="odd">
 		<th scope="row"><code>oldSchool</code></th>
-		<td>Extends <code>#main</code> to create a <strong>750px</strong> layout.</td>
+		<td>Extends <code>page</code> to create a <strong>750px</strong> layout.</td>
 	</tr>
 	<tr class="even">
 		<th scope="row"><code>liquid</code></th>
-		<td>Extends <code>#main</code> to create a <strong>full-width</strong> liquid layout.</td>
+		<td>Extends <code>page</code> to create a <strong>full-width</strong> liquid layout.</td>
 	</tr>
 	</tbody>
 </table>
 </div>
 <h2>Basic template</h2>
-<pre>&lt;div id=&quot;main&quot;&gt;<br />	&lt;div id=&quot;hd&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br />	&lt;div id=&quot;bd&quot;&gt;&lt;!-- Body --&gt;<br />		&lt;div class=&quot;leftCol&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;<br />		&lt;div class=&quot;rightCol&quot;&gt;&lt;!-- Right Column (optional region) --&gt;&lt;/div&gt;<br />		&lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;<br />	&lt;/div&gt;<br />	&lt;div id=&quot;ft&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt;	<br />&lt;/div&gt;</pre>
+<pre>&lt;div class=&quot;page&quot;&gt;<br />	&lt;div class=&quot;head&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br />	&lt;div class=&quot;body&quot;&gt;&lt;!-- Body --&gt;<br />		&lt;div class=&quot;leftCol&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;<br />		&lt;div class=&quot;rightCol&quot;&gt;&lt;!-- Right Column (optional region) --&gt;&lt;/div&gt;<br />		&lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;<br />	&lt;/div&gt;<br />	&lt;div class=&quot;foot&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt;	<br />&lt;/div&gt;</pre>
 <h2>Full width template, 2 columns, gmail style (160px left column width)</h2>
-<pre>&lt;div id=&quot;main <strong>liquid</strong>&quot;&gt;<br />	&lt;div id=&quot;hd&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br />	&lt;div id=&quot;bd&quot;&gt;&lt;!-- Body --&gt;<br />		&lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;<br />		&lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;
-		<strong>&lt;!-- note: right column has been removed --&gt;</strong><br />	&lt;/div&gt;<br />	&lt;div id=&quot;ft&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt;	<br />&lt;/div&gt;</pre>
+<pre>&lt;div class=&quot;page <strong>liquid</strong>&quot;&gt;<br />	&lt;div class=&quot;head&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br />	&lt;div class=&quot;body&quot;&gt;&lt;!-- Body --&gt;<br />		&lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;
+		<strong>&lt;!-- note: right column has been removed --&gt;</strong><br />		&lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;<br />	&lt;/div&gt;<br />	&lt;div class=&quot;foot&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt;	<br />&lt;/div&gt;</pre>
 <h2>Goals</h2>
 <p>In object oriented CSS the most important goal is to have a single template from which all pages are built.  This eases CMS development because by having a single starting point all pages can be made into any other page. Users of the CMS do not have traps in which a page they have built cannot be morphed into a different page type.  Another goal of and OO template is to have each section (column, header, etc) control it's own destiny.  Practically, that means that if you want to add a left column to the template, the only required action should be actually adding the column to the HTML.  You never want to write CSS in such a way that changes are required higher in the DOM tree in order to make child elements behave properly.  Looping through the dom is costly for CMS development. Similarly, if you want to have a different left column width, it should be accomplished by <em>extending the left column object</em> by adding an additional class.   </p>
 <h3>Extending an object</h3>
 <pre>&lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt; ... &lt;/div&gt;</pre>
 
 <h2>Customizing the template</h2>
-<p>You may not find the default and extended widths of columns or pages match your site. In this case you can extend the column or #main objects to allow custom widths. For performance reasons, you should avoid customizing templates whenever possible.</p>
+<p>You may not find the default and extended widths of columns or pages match your site. In this case you can extend the column or page objects to allow custom widths. For performance reasons, you should avoid customizing templates whenever possible.</p>
 <h3>Columns</h3>
 <p><code>myColumn</code> extends column objects to allow for custom column widths.</p>
 <pre>.myColumn{width:400px;}</pre>
 <h3>Main page</h3>
-<p><code>myPage</code> extends <code>#main</code>. <code>!important</code> is required so a class can overwrite an ID.</p>
-<pre>.myPage{width:1050px !important;}</pre>
+<p><code>myPage</code> extends <code>page</code>.</p>
+<pre>.myPage{width:1050px;}</pre>
 <h2>Known Issues</h2>
 <ul>
 	<li><strong>Source order</strong> - the right column is before the main content in the source order. This choice was made in order to allow the columns to be completely independent objects and to have one unique template rather than multiple starting points for a site. This speeds and simplifies CMS development and enhances usability for those creating pages within the CMS. Skip to content links and navigational items marked up as lists are strongly encouraged.</li>
