diff --git a/components/lazcontrols/docs/lazcontrols.css b/components/lazcontrols/docs/lazcontrols.css
index 8f131246a2..4d08fb77fd 100644
--- a/components/lazcontrols/docs/lazcontrols.css
+++ b/components/lazcontrols/docs/lazcontrols.css
@@ -1,6 +1,6 @@
 /*
   fpdoc.css modified for LazControls documentation
-  Default font size is 11pt
+  Default font size is 12pt
   Font family fallbacks
   Removed border, added vertical margins on DL
   Added color and font weight for FILE
@@ -9,21 +9,18 @@
 
 body {
   background: white;
-  color: Black;
-  font-size: 11pt;
-  /* font-family: "Helvetica", "Arial", sans-serif; */
-  font-family: "San Francisco", "Roboto", "Segoe UI", "Helvetica", "Arial", sans-serif;
+  color: black;
+  font-size: 12pt;
+  font-family: "San Francisco", "Roboto", "Noto Sans", "Open Sans", "Segoe UI", "Helvetica", "Arial", sans-serif;
 }
 
 p, th, td, caption, h1, h2, h3, ul, ol, dl {
-  /* font-family: "Helvetica", "Arial", sans-serif; */
-  font-family: "San Francisco", "Roboto", "Segoe UI", "Helvetica", "Arial", sans-serif;
+  font-family: "San Francisco", "Roboto", "Noto Sans", "Open Sans", "Segoe UI", "Helvetica", "Arial", sans-serif;
   color: black;
 }
 
 tt, span.kw, pre {
-  /* font-family: "Courier New", Courier, monospace; */
-  font-family: "Menlo", "Roboto Mono", "JetBrains Mono", "Courier New", Courier, monospace;
+  font-family: "Menlo", "JetBrains Mono", "Roboto Mono", "Noto Sans Mono", "Inconsolata", "Courier New", Courier, monospace;
   font-size: 1em;
 }
 
@@ -83,7 +80,7 @@ span.cmt {
 
 /* directives in source fragments */
 span.dir {
-  color: darkyellow;
+  color: OrangeRed;
   font-style: italic;
 }
 
@@ -131,8 +128,6 @@ span.warning {
 /* !!!: How should we define this...? */
 span.file {
   color: darkgreen;
-  font-weight: bold;
-
 }
 
 table.remark {
@@ -188,18 +183,26 @@ dd {
 }
 
 /* for browsers in standards compliance mode */
-td p {
-  margin: 0;
+td p { margin: 0; }
+
+var { font-weight: bold; }
+
+span.toggletreeclose {
+    background: url(minus.png) center left no-repeat;
+    padding-left: 20px;
 }
 
-var {
- font-weight: bold;
+span.toggletreeopen {
+    background: url(plus.png) center left no-repeat;
+    padding-left: 20px;
 }
 
-hr.footer-sep {
-  margin-top: .667em;
-}
+li.classtree ul { display: block; }
+ul.classtreelist { list-style-type:none; }
+ul.classtreelist li { padding-left: 0px; }
+li.classtreeclosed ul { display: none; }
 
-td.footer-doc  { width: 40%; text-align: left; color: Black; }
-td.footer-ver  { width: 30%; text-align: center; color: Gray; }
-td.footer-date { width: 30%; text-align: right; color: Gray; }
+hr.footer-sep { margin-top: .667em; }
+td.footer-doc { width: 42%; text-align: left; font-weight: bold; color: Black; }
+td.footer-ver { width: 32%; text-align: center; color: Gray; }
+td.footer-date { width: 26%; text-align: right; color: Gray; }