use default toc class and extend it to match site's requirements

contribute/spreadtheword.en.xhtml

@@ -15,10 +15,10 @@
 
     <module id="order-delay"/>
 
-    <div id="toc">
-      <p class="head"><strong><a href="#how-to-order">Order now</a></strong></p>
+    <div class="toc float-right">
+      <p class="head"><a href="#how-to-order">Order now</a></p>
 
-      <p><strong>Available promotion material</strong></p>
+      <p>Available promotion material</p>
       <ul>
         <li><a href="#fsfe-and-community">FSFE and our community</a></li>
         <li><a href="#freedom">Free Software and User Freedom</a></li>
@@ -29,9 +29,8 @@
         <li><a href="#childrensbook">Children's Book "Ada &amp; Zangemann"</a></li>
         <li><a href="#nocloud">"There is no cloud ..." - campaign</a></li>
         <li><a href="#dfd">"Document Freedom Day"- campaign</a></li>
-
       </ul>
-      <p><strong>Behind the scenes</strong></p>
+      <p>Behind the scenes</p>
       <ul>
         <li><a href="#feedback">Any Feedback?</a></li>
         <li><a href="#archives">Our Archive</a></li>

look/elements/table-of-contents.less

@@ -7,13 +7,18 @@ div.toc {
   box-shadow: -1px 0 @brand-primary;
 
   // Overwrite browser-default paddings/margins
-  margin-left: 20px;
-  padding-left: 20px;
+  margin: 0 20px 0 20px;
+  padding: 10px 0 1px 20px; // the bottom 1px does fix the collapsing margin
 
-  // Headline, usually "Content" or "Table of contents"
-  & > p {
+  // Normal headline/section, usually "Content" or "Table of contents"
+  p {
     font-weight: 700;
   }
+  // really large headline, useful for larger ToCs with multiple sections
+  p.head {
+    font-size: 1.15em;
+    text-align: center;
+  }
 
   // Smaller paddings for sub-levels
   ol, ul {

look/pages/spreadtheword.less

@@ -7,29 +7,6 @@
     clear: none;
   }
 
-  div#toc {
-    float: right;
-    clear: right;
-    border: solid 1px;
-    margin: .5em;
-    background: rgb(240, 240, 240);
-    width: 40%;
-    padding: 1em 1.5em 1.5em 1.5em;
-    margin: 1.5em;
-  }
-
-  div#toc p {
-    text-indent: 0.5em;
-    margin-top: 1.5em;
-  }
-
-  div#toc p.head {
-    font-size: 1.15em;
-    text-align: center;
-    margin-top: 0;
-    text-indent: 0;
-  }
-
   form#orderpromo {
     clear: both;
     margin: 2em 0 3em 0;