diff --git a/doc/site/css/style.css b/doc/site/css/style.css
index 85a4cb8de..55d1ca75b 100644
--- a/doc/site/css/style.css
+++ b/doc/site/css/style.css
@@ -1,94 +1,149 @@
-div.container { max-width: 75em; }
-
-/* ul > li > ul > li { */
-/*   list-style-type:none; */
-/* } */
-
-div#nav { padding-top: 2em; }
-/* div#nav ul { margin-top: 0; margin-left: 1em; margin-bottom: 0; } */
-/* div#nav ul li { list-style: none; padding-bottom: 0.1em; } */
-div#nav ul li.current {
-  /* list-style: square; */
-  font-weight:bold;
-}
-
-div#nav ul li.current {
-  /* list-style: square; */
-  font-weight:bold;
-}
-
-ul.nav ul {
-  padding-left:30px;
-}
-/* ul.nav ul li { */
-/*   list-style:none; */
-/* } */
-
-ul.nav li a {
-  padding:4px 10px;
-}
-
-code {
-    color: #226600;
-    font-weight:bold;
-}
-
-pre {
-    background: #F8F8F8; /* The same as the GitHub background color since I'm using their syntax.css */
-    padding: 0 2em 0 2em;
-}
-
-.description {
-    font-size: 1.2em;
-    margin-bottom: 30px;
-    margin-top: 30px;
-    font-style: italic;
-}
-
-.download {
-    float: right;
-}
-.downloadoption {
-    background: #eee;
-    padding: 10px 0 10px 0; /* Keep image and text away from top and bottom */
-    margin-bottom: 10px; /* Ensure there is some whitespace between options */
-}
-.downloadoptionimage {
-    float: left;
-    width: 90px;
-    margin-left: 10px; /* Offset from left border a little */
-}
-.downloadoptiontext {
-    padding-left: 110px; /* Offset from image */
-    padding-right: 10px; /* Offset from right border of the download option */
-}
-
-.screenshotframe {
-    text-align: center; /* The screenshot and it's border should be in the center of the page */
-}
-.screenshot {
-    border: 10px solid #F8F8F8; /* Soft grey border */
-}
-
+/* from https://github.com/blaenk/blaenk.github.io/blob/source/provider/scss/_article.scss */
 #toc {
-    float:right;
-    font-size:small;
-    margin:2em 0 1em 1em;
-    border:thin solid #ddd;
-    background-color:#f0f0f0;
+		max-width:40%;
+    margin-top: 1em;
 }
-#toc ul {
-    list-style-type: none;
-    padding:0 1em 0 1em;
+#toc p {
+		font-weight: bold;
+		margin-top: 0;
 }
-
-#footer {
-    padding-top: 1em;
-    /* font-size: 70%; */
+#toc > ol {
+		margin-left: 0;
+		margin-top: 5px;
+		/* font-size: 14px; */
+}
+#toc ol {
+		padding-left:0;
+		/* margin-left:1em; */
+}
+#toc > ol > li > a {
+		display:none;
+}
+#toc > ol (@media screen and (max-width: 600px)) {
+		font-size: 13px;
+}
+#toc > ol ol {
+		counter-reset: item;
+}
+#toc > ol > li > ol ol {
+		font-size:95%;
+}
+#toc li {
+		margin-top: 0;
+		display: block;
+}
+#toc li (@media screen and (max-width: 600px)) {
+		line-height: 1.69;
+}
+#toc > ol > li > ol > li:before {
+		content: counters(item, ".") ". ";
+		counter-increment: item;
+}
+#toc > ol > li > ol > li > ol > li {
+		padding-left:2em;
+}
+#toc > ol > li > ol > li > ol > li > ol li {
+		padding-left:1em;
+}
+#toc.right-toc {
+    float: right;
+    /* margin-left: 15px; */
+		margin:0 0 2em 2em;
+    padding: 0;
+}
+#toc.right-toc (@media screen and (max-width: 600px)) {
+		float: none;
+		padding: 0;
+		margin-left: 0;
+		margin-top: 10px;
+}
+#toc:after {
+		clear: both;
+}
+/* */
+h2 {
+		margin-top:1.5em;
+}
+footer {
+    padding: 1em;
     color: gray;
     text-align: center;
+    /* font-size: 70%; */
 }
 
+
+/* div.container { max-width: 75em; } */
+
+/* /\* ul > li > ul > li { *\/ */
+/* /\*   list-style-type:none; *\/ */
+/* /\* } *\/ */
+
+/* div#nav { padding-top: 2em; } */
+/* /\* div#nav ul { margin-top: 0; margin-left: 1em; margin-bottom: 0; } *\/ */
+/* /\* div#nav ul li { list-style: none; padding-bottom: 0.1em; } *\/ */
+/* div#nav ul li.current { */
+/*   /\* list-style: square; *\/ */
+/*   font-weight:bold; */
+/* } */
+
+/* div#nav ul li.current { */
+/*   /\* list-style: square; *\/ */
+/*   font-weight:bold; */
+/* } */
+
+/* ul.nav ul { */
+/*   padding-left:30px; */
+/* } */
+/* /\* ul.nav ul li { *\/ */
+/* /\*   list-style:none; *\/ */
+/* /\* } *\/ */
+
+/* ul.nav li a { */
+/*   padding:4px 10px; */
+/* } */
+
+/* code { */
+/*     color: #226600; */
+/*     font-weight:bold; */
+/* } */
+
+/* pre { */
+/*     background: #F8F8F8; /\* The same as the GitHub background color since I'm using their syntax.css *\/ */
+/*     padding: 0 2em 0 2em; */
+/* } */
+
+/* .description { */
+/*     font-size: 1.2em; */
+/*     margin-bottom: 30px; */
+/*     margin-top: 30px; */
+/*     font-style: italic; */
+/* } */
+
+/* .download { */
+/*     float: right; */
+/* } */
+/* .downloadoption { */
+/*     background: #eee; */
+/*     padding: 10px 0 10px 0; /\* Keep image and text away from top and bottom *\/ */
+/*     margin-bottom: 10px; /\* Ensure there is some whitespace between options *\/ */
+/* } */
+/* .downloadoptionimage { */
+/*     float: left; */
+/*     width: 90px; */
+/*     margin-left: 10px; /\* Offset from left border a little *\/ */
+/* } */
+/* .downloadoptiontext { */
+/*     padding-left: 110px; /\* Offset from image *\/ */
+/*     padding-right: 10px; /\* Offset from right border of the download option *\/ */
+/* } */
+
+/* .screenshotframe { */
+/*     text-align: center; /\* The screenshot and it's border should be in the center of the page *\/ */
+/* } */
+/* .screenshot { */
+/*     border: 10px solid #F8F8F8; /\* Soft grey border *\/ */
+/* } */
+
 /* .alert { */
 /*     width:50%;  */
 /*     margin:1em;  */