Accept tests affected by adding instance details section.

10 files changed, 712 insertions, 134 deletions

diff --git a/html-test/ref/Bug26.html b/html-test/ref/Bug26.html
index 8b9e5a7b..e56d3821 100644
--- a/html-test/ref/Bug26.html
+++ b/html-test/ref/Bug26.html
@@ -147,9 +147,11 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug26.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >C</a
-		      > ()</span
+		    ><div id="control.i:ic:C-45-1912746692-45-1" class="instance expander" onclick="toggleSection('i:ic:C-45-1912746692-45-1')"
+		      ><a href=""
+			>C</a
+			> ()</div
+		      ></span
 		    ></td
 		  ><td class="doc"
 		  ><p
@@ -160,6 +162,20 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug26.html");};
 		      ></p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:C-45-1912746692-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >c_f</a
+			  > :: ()</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/Bug7.html b/html-test/ref/Bug7.html
index f1a80c82..77a159d0 100644
--- a/html-test/ref/Bug7.html
+++ b/html-test/ref/Bug7.html
@@ -106,12 +106,14 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Bar</a
-		      > <a href=""
-		      >Foo</a
-		      > <a href=""
-		      >Foo</a
+		    ><div id="control.i:id:Bar-45--45-1104323998-45-1" class="instance expander" onclick="toggleSection('i:id:Bar-45--45-1104323998-45-1')"
+		      ><a href=""
+			>Bar</a
+			> <a href=""
+			>Foo</a
+			> <a href=""
+			>Foo</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -119,6 +121,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
 		    >Just one instance</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Bar-45--45-1104323998-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -142,12 +150,14 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Bar</a
-		      > <a href=""
-		      >Foo</a
-		      > <a href=""
-		      >Foo</a
+		    ><div id="control.i:ic:Bar-45--45-1104323998-45-1" class="instance expander" onclick="toggleSection('i:ic:Bar-45--45-1104323998-45-1')"
+		      ><a href=""
+			>Bar</a
+			> <a href=""
+			>Foo</a
+			> <a href=""
+			>Foo</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -155,6 +165,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug7.html");};
 		    >Just one instance</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Bar-45--45-1104323998-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/Hash.html b/html-test/ref/Hash.html
index 0c9f4e2c..745a7cf4 100644
--- a/html-test/ref/Hash.html
+++ b/html-test/ref/Hash.html
@@ -278,41 +278,99 @@ window.onload = function () {pageLoad();setSynopsis("mini_Hash.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Hash</a
-		      > <a href=""
-		      >Float</a
+		    ><div id="control.i:ic:Hash-45--45-2126105278-45-1" class="instance expander" onclick="toggleSection('i:ic:Hash-45--45-2126105278-45-1')"
+		      ><a href=""
+			>Hash</a
+			> <a href=""
+			>Float</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Hash-45--45-2126105278-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >hash</a
+			  > :: <a href=""
+			  >Float</a
+			  > -&gt; <a href=""
+			  >Int</a
+			  ></p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Hash</a
-		      > <a href=""
-		      >Int</a
+		    ><div id="control.i:ic:Hash-45--45-2126105269-45-2" class="instance expander" onclick="toggleSection('i:ic:Hash-45--45-2126105269-45-2')"
+		      ><a href=""
+			>Hash</a
+			> <a href=""
+			>Int</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Hash-45--45-2126105269-45-2" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >hash</a
+			  > :: <a href=""
+			  >Int</a
+			  > -&gt; <a href=""
+			  >Int</a
+			  ></p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    >(<a href=""
-		      >Hash</a
-		      > a, <a href=""
-		      >Hash</a
-		      > b) =&gt; <a href=""
-		      >Hash</a
-		      > (a, b)</span
+		    ><div id="control.i:ic:Hash-45-1562016313-45-3" class="instance expander" onclick="toggleSection('i:ic:Hash-45-1562016313-45-3')"
+		      >(<a href=""
+			>Hash</a
+			> a, <a href=""
+			>Hash</a
+			> b) =&gt; <a href=""
+			>Hash</a
+			> (a, b)</div
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Hash-45-1562016313-45-3" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >hash</a
+			  > :: (a, b) -&gt; <a href=""
+			  >Int</a
+			  ></p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/HiddenInstances.html b/html-test/ref/HiddenInstances.html
index 9edd70d1..6c01a17c 100644
--- a/html-test/ref/HiddenInstances.html
+++ b/html-test/ref/HiddenInstances.html
@@ -81,10 +81,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >VisibleClass</a
-		      > <a href=""
-		      >Int</a
+		    ><div id="control.i:ic:VisibleClass-45--45-2124522046-45-1" class="instance expander" onclick="toggleSection('i:ic:VisibleClass-45--45-2124522046-45-1')"
+		      ><a href=""
+			>VisibleClass</a
+			> <a href=""
+			>Int</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -93,12 +95,20 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:VisibleClass-45--45-2124522046-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >VisibleClass</a
-		      > <a href=""
-		      >VisibleData</a
+		    ><div id="control.i:ic:VisibleClass-45--45-1067567935-45-2" class="instance expander" onclick="toggleSection('i:ic:VisibleClass-45--45-1067567935-45-2')"
+		      ><a href=""
+			>VisibleClass</a
+			> <a href=""
+			>VisibleData</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -106,6 +116,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 		    >Should be visible</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:VisibleClass-45--45-1067567935-45-2" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -129,10 +145,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Num</a
-		      > <a href=""
-		      >VisibleData</a
+		    ><div id="control.i:id:Num-45-5833280-45-1" class="instance expander" onclick="toggleSection('i:id:Num-45-5833280-45-1')"
+		      ><a href=""
+			>Num</a
+			> <a href=""
+			>VisibleData</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -141,12 +159,86 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Num-45-5833280-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >(+)</a
+			  > :: <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >(-)</a
+			  > :: <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >(*)</a
+			  > :: <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >negate</a
+			  > :: <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >abs</a
+			  > :: <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >signum</a
+			  > :: <a href=""
+			  >VisibleData</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >fromInteger</a
+			  > :: <a href=""
+			  >Integer</a
+			  > -&gt; <a href=""
+			  >VisibleData</a
+			  ></p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >VisibleClass</a
-		      > <a href=""
-		      >VisibleData</a
+		    ><div id="control.i:id:VisibleClass-45--45-1067567935-45-2" class="instance expander" onclick="toggleSection('i:id:VisibleClass-45--45-1067567935-45-2')"
+		      ><a href=""
+			>VisibleClass</a
+			> <a href=""
+			>VisibleData</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -154,6 +246,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstances.html")
 		    >Should be visible</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:VisibleClass-45--45-1067567935-45-2" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/HiddenInstancesB.html b/html-test/ref/HiddenInstancesB.html
index f117a8fd..a360730f 100644
--- a/html-test/ref/HiddenInstancesB.html
+++ b/html-test/ref/HiddenInstancesB.html
@@ -81,10 +81,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Foo</a
-		      > <a href=""
-		      >Bar</a
+		    ><div id="control.i:ic:Foo-45--45-1068927686-45-1" class="instance expander" onclick="toggleSection('i:ic:Foo-45--45-1068927686-45-1')"
+		      ><a href=""
+			>Foo</a
+			> <a href=""
+			>Bar</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -92,6 +94,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
 		    >Should be visible</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Foo-45--45-1068927686-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -115,10 +123,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Foo</a
-		      > <a href=""
-		      >Bar</a
+		    ><div id="control.i:id:Foo-45--45-1068927686-45-1" class="instance expander" onclick="toggleSection('i:id:Foo-45--45-1068927686-45-1')"
+		      ><a href=""
+			>Foo</a
+			> <a href=""
+			>Bar</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -126,6 +136,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_HiddenInstancesB.html"
 		    >Should be visible</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Foo-45--45-1068927686-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/QuasiExpr.html b/html-test/ref/QuasiExpr.html
index 935a450f..5c8b1bfa 100644
--- a/html-test/ref/QuasiExpr.html
+++ b/html-test/ref/QuasiExpr.html
@@ -109,15 +109,53 @@ window.onload = function () {pageLoad();setSynopsis("mini_QuasiExpr.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Show</a
-		      > <a href=""
-		      >Expr</a
+		    ><div id="control.i:id:Show-45-5839412-45-1" class="instance expander" onclick="toggleSection('i:id:Show-45-5839412-45-1')"
+		      ><a href=""
+			>Show</a
+			> <a href=""
+			>Expr</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Show-45-5839412-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >showsPrec</a
+			  > :: <a href=""
+			  >Int</a
+			  > -&gt; <a href=""
+			  >Expr</a
+			  > -&gt; <a href=""
+			  >ShowS</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >show</a
+			  > :: <a href=""
+			  >Expr</a
+			  > -&gt; <a href=""
+			  >String</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >showList</a
+			  > :: [<a href=""
+			  >Expr</a
+			  >] -&gt; <a href=""
+			  >ShowS</a
+			  ></p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -175,15 +213,53 @@ window.onload = function () {pageLoad();setSynopsis("mini_QuasiExpr.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Show</a
-		      > <a href=""
-		      >BinOp</a
+		    ><div id="control.i:id:Show-45-5839300-45-1" class="instance expander" onclick="toggleSection('i:id:Show-45-5839300-45-1')"
+		      ><a href=""
+			>Show</a
+			> <a href=""
+			>BinOp</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Show-45-5839300-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >showsPrec</a
+			  > :: <a href=""
+			  >Int</a
+			  > -&gt; <a href=""
+			  >BinOp</a
+			  > -&gt; <a href=""
+			  >ShowS</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >show</a
+			  > :: <a href=""
+			  >BinOp</a
+			  > -&gt; <a href=""
+			  >String</a
+			  ></p
+			><p class="src"
+			><a href=""
+			  >showList</a
+			  > :: [<a href=""
+			  >BinOp</a
+			  >] -&gt; <a href=""
+			  >ShowS</a
+			  ></p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/SpuriousSuperclassConstraints.html b/html-test/ref/SpuriousSuperclassConstraints.html
index d0d0401e..12a34b25 100644
--- a/html-test/ref/SpuriousSuperclassConstraints.html
+++ b/html-test/ref/SpuriousSuperclassConstraints.html
@@ -85,29 +85,105 @@ Fix spurious superclass constraints bug.</pre
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Functor</a
-		      > (<a href=""
-		      >SomeType</a
-		      > f)</span
+		    ><div id="control.i:id:Functor-45-1786401847-45-1" class="instance expander" onclick="toggleSection('i:id:Functor-45-1786401847-45-1')"
+		      ><a href=""
+			>Functor</a
+			> (<a href=""
+			>SomeType</a
+			> f)</div
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Functor-45-1786401847-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >fmap</a
+			  > :: (a -&gt; b) -&gt; <a href=""
+			  >SomeType</a
+			  > f a -&gt; <a href=""
+			  >SomeType</a
+			  > f b</p
+			><p class="src"
+			><a href=""
+			  >(&lt;$)</a
+			  > :: a -&gt; <a href=""
+			  >SomeType</a
+			  > f b -&gt; <a href=""
+			  >SomeType</a
+			  > f a</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Applicative</a
-		      > f =&gt; <a href=""
-		      >Applicative</a
-		      > (<a href=""
-		      >SomeType</a
-		      > f)</span
+		    ><div id="control.i:id:Applicative-45-1786377800-45-2" class="instance expander" onclick="toggleSection('i:id:Applicative-45-1786377800-45-2')"
+		      ><a href=""
+			>Applicative</a
+			> f =&gt; <a href=""
+			>Applicative</a
+			> (<a href=""
+			>SomeType</a
+			> f)</div
+		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Applicative-45-1786377800-45-2" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >pure</a
+			  > :: a -&gt; <a href=""
+			  >SomeType</a
+			  > f a</p
+			><p class="src"
+			><a href=""
+			  >(&lt;*&gt;)</a
+			  > :: <a href=""
+			  >SomeType</a
+			  > f (a -&gt; b) -&gt; <a href=""
+			  >SomeType</a
+			  > f a -&gt; <a href=""
+			  >SomeType</a
+			  > f b</p
+			><p class="src"
+			><a href=""
+			  >(*&gt;)</a
+			  > :: <a href=""
+			  >SomeType</a
+			  > f a -&gt; <a href=""
+			  >SomeType</a
+			  > f b -&gt; <a href=""
+			  >SomeType</a
+			  > f b</p
+			><p class="src"
+			><a href=""
+			  >(&lt;*)</a
+			  > :: <a href=""
+			  >SomeType</a
+			  > f a -&gt; <a href=""
+			  >SomeType</a
+			  > f b -&gt; <a href=""
+			  >SomeType</a
+			  > f a</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/Test.html b/html-test/ref/Test.html
index 77599195..6e68fbff 100644
--- a/html-test/ref/Test.html
+++ b/html-test/ref/Test.html
@@ -1531,27 +1531,83 @@ window.onload = function () {pageLoad();setSynopsis("mini_Test.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >D</a
-		      > <a href=""
-		      >Float</a
+		    ><div id="control.i:ic:D-45--45-2126042836-45-1" class="instance expander" onclick="toggleSection('i:ic:D-45--45-2126042836-45-1')"
+		      ><a href=""
+			>D</a
+			> <a href=""
+			>Float</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:D-45--45-2126042836-45-1" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >d</a
+			  > :: <a href=""
+			  >T</a
+			  > <a href=""
+			  >Float</a
+			  > b</p
+			><p class="src"
+			><a href=""
+			  >e</a
+			  > :: (<a href=""
+			  >Float</a
+			  >, <a href=""
+			  >Float</a
+			  >)</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >D</a
-		      > <a href=""
-		      >Int</a
+		    ><div id="control.i:ic:D-45--45-2126042843-45-2" class="instance expander" onclick="toggleSection('i:ic:D-45--45-2126042843-45-2')"
+		      ><a href=""
+			>D</a
+			> <a href=""
+			>Int</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:D-45--45-2126042843-45-2" class="inst-details hide"
+		    ><div class="subs methods"
+		      ><p class="caption"
+			>Methods</p
+			><p class="src"
+			><a href=""
+			  >d</a
+			  > :: <a href=""
+			  >T</a
+			  > <a href=""
+			  >Int</a
+			  > b</p
+			><p class="src"
+			><a href=""
+			  >e</a
+			  > :: (<a href=""
+			  >Int</a
+			  >, <a href=""
+			  >Int</a
+			  >)</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/TypeFamilies.html b/html-test/ref/TypeFamilies.html
index 5dfa3b5e..3b0ffdab 100644
--- a/html-test/ref/TypeFamilies.html
+++ b/html-test/ref/TypeFamilies.html
@@ -213,10 +213,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Assoc</a
-		      > * <a href=""
-		      >X</a
+		    ><div id="control.i:id:Assoc-45--45-94738534-45-1" class="instance expander" onclick="toggleSection('i:id:Assoc-45--45-94738534-45-1')"
+		      ><a href=""
+			>Assoc</a
+			> * <a href=""
+			>X</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -225,12 +227,40 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Assoc-45--45-94738534-45-1" class="inst-details hide"
+		    ><div class="subs associated-types"
+		      ><p class="caption"
+			>Associated Types</p
+			><p class="src"
+			><span class="keyword"
+			  >data</span
+			  > <a href=""
+			  >AssocD</a
+			  > (<a href=""
+			  >X</a
+			  > :: k)</p
+			><p class="src"
+			><span class="keyword"
+			  >type</span
+			  > <a href=""
+			  >AssocT</a
+			  > (<a href=""
+			  >X</a
+			  > :: k) :: *</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Test</a
-		      > * <a href=""
-		      >X</a
+		    ><div id="control.i:id:Test-45--45-94757499-45-2" class="instance expander" onclick="toggleSection('i:id:Test-45--45-94757499-45-2')"
+		      ><a href=""
+			>Test</a
+			> * <a href=""
+			>X</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -239,22 +269,36 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Test-45--45-94757499-45-2" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >(&gt;&lt;)</a
-		      > <a href=""
-		      >X</a
-		      > <a href=""
-		      >XX</a
-		      > <a href=""
-		      >XXX</a
+		    ><div id="control.i:id:-62--60--45-1434405301-45-3" class="instance expander" onclick="toggleSection('i:id:-62--60--45-1434405301-45-3')"
+		      ><a href=""
+			>(&gt;&lt;)</a
+			> <a href=""
+			>X</a
+			> <a href=""
+			>XX</a
+			> <a href=""
+			>XXX</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:-62--60--45-1434405301-45-3" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
 		    ><span class="keyword"
@@ -425,10 +469,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Assoc</a
-		      > * <a href=""
-		      >Y</a
+		    ><div id="control.i:id:Assoc-45--45-94738565-45-1" class="instance expander" onclick="toggleSection('i:id:Assoc-45--45-94738565-45-1')"
+		      ><a href=""
+			>Assoc</a
+			> * <a href=""
+			>Y</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -437,12 +483,40 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Assoc-45--45-94738565-45-1" class="inst-details hide"
+		    ><div class="subs associated-types"
+		      ><p class="caption"
+			>Associated Types</p
+			><p class="src"
+			><span class="keyword"
+			  >data</span
+			  > <a href=""
+			  >AssocD</a
+			  > (<a href=""
+			  >Y</a
+			  > :: k)</p
+			><p class="src"
+			><span class="keyword"
+			  >type</span
+			  > <a href=""
+			  >AssocT</a
+			  > (<a href=""
+			  >Y</a
+			  > :: k) :: *</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Test</a
-		      > * <a href=""
-		      >Y</a
+		    ><div id="control.i:id:Test-45--45-94757468-45-2" class="instance expander" onclick="toggleSection('i:id:Test-45--45-94757468-45-2')"
+		      ><a href=""
+			>Test</a
+			> * <a href=""
+			>Y</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -451,6 +525,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Test-45--45-94757468-45-2" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
 		    ><span class="keyword"
@@ -671,10 +751,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Test</a
-		      > * <a href=""
-		      >Y</a
+		    ><div id="control.i:ic:Test-45--45-94757468-45-1" class="instance expander" onclick="toggleSection('i:ic:Test-45--45-94757468-45-1')"
+		      ><a href=""
+			>Test</a
+			> * <a href=""
+			>Y</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -683,12 +765,20 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Test-45--45-94757468-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Test</a
-		      > * <a href=""
-		      >X</a
+		    ><div id="control.i:ic:Test-45--45-94757499-45-2" class="instance expander" onclick="toggleSection('i:ic:Test-45--45-94757499-45-2')"
+		      ><a href=""
+			>Test</a
+			> * <a href=""
+			>X</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -696,6 +786,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    >Doc for: instance Test X</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Test-45--45-94757499-45-2" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -937,10 +1033,12 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Assoc</a
-		      > * <a href=""
-		      >Y</a
+		    ><div id="control.i:ic:Assoc-45--45-94738565-45-1" class="instance expander" onclick="toggleSection('i:ic:Assoc-45--45-94738565-45-1')"
+		      ><a href=""
+			>Assoc</a
+			> * <a href=""
+			>Y</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -949,12 +1047,40 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Assoc-45--45-94738565-45-1" class="inst-details hide"
+		    ><div class="subs associated-types"
+		      ><p class="caption"
+			>Associated Types</p
+			><p class="src"
+			><span class="keyword"
+			  >data</span
+			  > <a href=""
+			  >AssocD</a
+			  > (<a href=""
+			  >Y</a
+			  > :: k)</p
+			><p class="src"
+			><span class="keyword"
+			  >type</span
+			  > <a href=""
+			  >AssocT</a
+			  > (<a href=""
+			  >Y</a
+			  > :: k) :: *</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >Assoc</a
-		      > * <a href=""
-		      >X</a
+		    ><div id="control.i:ic:Assoc-45--45-94738534-45-2" class="instance expander" onclick="toggleSection('i:ic:Assoc-45--45-94738534-45-2')"
+		      ><a href=""
+			>Assoc</a
+			> * <a href=""
+			>X</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc"
@@ -962,6 +1088,32 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 		    >Doc for: instance Assoc X</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:Assoc-45--45-94738534-45-2" class="inst-details hide"
+		    ><div class="subs associated-types"
+		      ><p class="caption"
+			>Associated Types</p
+			><p class="src"
+			><span class="keyword"
+			  >data</span
+			  > <a href=""
+			  >AssocD</a
+			  > (<a href=""
+			  >X</a
+			  > :: k)</p
+			><p class="src"
+			><span class="keyword"
+			  >type</span
+			  > <a href=""
+			  >AssocT</a
+			  > (<a href=""
+			  >X</a
+			  > :: k) :: *</p
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -1087,19 +1239,27 @@ window.onload = function () {pageLoad();setSynopsis("mini_TypeFamilies.html");};
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><a href=""
-		      >(&gt;&lt;)</a
-		      > <a href=""
-		      >X</a
-		      > <a href=""
-		      >XX</a
-		      > <a href=""
-		      >XXX</a
+		    ><div id="control.i:ic:-62--60--45-1434405301-45-1" class="instance expander" onclick="toggleSection('i:ic:-62--60--45-1434405301-45-1')"
+		      ><a href=""
+			>(&gt;&lt;)</a
+			> <a href=""
+			>X</a
+			> <a href=""
+			>XX</a
+			> <a href=""
+			>XXX</a
+			></div
 		      ></span
 		    ></td
 		  ><td class="doc empty"
 		  >&nbsp;</td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:ic:-62--60--45-1434405301-45-1" class="inst-details hide"
+		    ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/ocean.css b/html-test/ref/ocean.css
index 9ad9f9d2..428040bc 100644
--- a/html-test/ref/ocean.css
+++ b/html-test/ref/ocean.css
@@ -146,15 +146,21 @@ ul.links li a {
   background-image: url(plus.gif);
   background-repeat: no-repeat;
 }
-p.caption.collapser,
-p.caption.expander {
-  background-position: 0 0.4em;
-}
 .collapser, .expander {
   padding-left: 14px;
   margin-left: -14px;
   cursor: pointer;
 }
+p.caption.collapser,
+p.caption.expander {
+  background-position: 0 0.4em;
+}
+
+.instance.collapser, .instance.expander {
+  margin-left: 0px;
+  background-position: left center;
+}
+
 
 pre {
   padding: 0.25em;