--- doc/tmpl/css/main.css	2015/04/28 17:24:16	2738
+++ doc/tmpl/css/main.css	2017/06/02 18:56:03	3271
@@ -1,6 +1,6 @@
 /*
   CrudeDoc CSS Style
-  Copyright (c) 2015 Christian Schoenebeck. All rights reserved.
+  Copyright (c) 2015 - 2017 Christian Schoenebeck. All rights reserved.
   http://www.crudebyte.com
  */
 
@@ -12,6 +12,7 @@
     font-weight:200;
     font-size:17px;
     line-height:1.2;
+    background-color:#c1b5b5;
 }
 
 body {
@@ -24,6 +25,7 @@
     background:         linear-gradient(to left, #cbc3c2, #bfb2b0); /* Standard syntax */
     counter-reset:oli;
     counter-reset:codeline;
+    -webkit-text-size-adjust:100%;
 }
 
 
@@ -82,7 +84,10 @@
             transition: text-shadow 0.9s linear, color 0.9s linear;
 }
 
-header > menu a:hover {
+.no-touch header > menu a:hover,
+.touch header > menu a:focus,
+.touch header > menu a:active
+{
     color:#ffffff;
     text-shadow: 0px 0px 13px #ff9999;
     -webkit-transition: text-shadow 0.31s, color 0.31s; /* Safari */
@@ -115,6 +120,32 @@
     background:    -moz-linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* For Firefox 3.6 to 15 */
     background:         linear-gradient(rgba(251,251,251,1.0), rgba(186,186,186,1.0)); /* Standard syntax */
     box-shadow: 0px 10px 8px rgba(15,15,15,0.25);
+
+    -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
+            transition:         transform 0.16s ease, padding-left 0.2s ease;
+}
+
+.no-toc nav {
+    padding-left:56px;
+
+    -webkit-transition: -webkit-transform 0.16s ease, padding-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, padding-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, padding-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, padding-left 0.2s ease;
+            transition:         transform 0.16s ease, padding-left 0.2s ease;
+}
+
+nav > div.foldbtn {
+    display:block;
+    position:fixed;
+    top:33;
+    left:10;
+    color:#998952;
+    font-weight:200;
+    font-size:28px;
 }
 
 nav > ul {
@@ -162,6 +193,11 @@
     padding-right:5px;
 }
 
+.iOS
+nav > ul > li::before {
+    font-family:"Hiragino Mincho ProN";
+}
+
 nav > ul > li:first-child::before {
     content: "";
 }
@@ -301,6 +337,23 @@
     -webkit-border-bottom-left-radius: 11px;
     -moz-border-radius-bottomleft: 11px;
     border-bottom-left-radius: 11px;
+
+    -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
+            transition:         transform 0.16s ease, width 0.2s ease;
+}
+
+.no-toc aside {
+    overflow:hidden;
+    width:0;
+
+    -webkit-transition: -webkit-transform 0.16s ease, width 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, width 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, width 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, width 0.2s ease;
+            transition:         transform 0.16s ease, width 0.2s ease;
 }
 
 aside > div.toc {
@@ -384,7 +437,11 @@
     text-shadow: 0px 0px 8px #fbf1f1;
 }
 
-aside > div.toc > ul > li:hover {
+
+.no-touch aside > div.toc > ul > li:hover,
+.touch aside > div.toc > ul > li:focus,
+.touch aside > div.toc > ul > li:active
+{
     background-color:rgba(255,0,0,0.22);
     -webkit-transition: background-color 0.25s; /* Safari */
        -moz-transition: background-color 0.25s;
@@ -393,7 +450,10 @@
             transition: background-color 0.25s linear;
 }
 
-aside > div.toc > ul > li > ul > li:hover {
+.no-touch aside > div.toc > ul > li > ul > li:hover,
+.touch aside > div.toc > ul > li > ul > li:focus,
+.touch aside > div.toc > ul > li > ul > li:active
+{
     list-style-type:disc;
 }
 
@@ -470,7 +530,10 @@
     border-bottom-right-radius: 11px;
 }
 
-aside > div.toc > div.buttons > *:not(.disabled):hover {
+.no-touch aside > div.toc > div.buttons > *:not(.disabled):hover,
+.touch aside > div.toc > div.buttons > *:not(.disabled):focus,
+.touch aside > div.toc > div.buttons > *:not(.disabled):active
+{
     background-color:rgba(255,0,0,0.21);
     -webkit-transition: background-color 0.25s; /* Safari */
        -moz-transition: background-color 0.25s;
@@ -484,6 +547,11 @@
     font-size:15px;
 }
 
+.iOS
+aside > div.toc > div.buttons .arrow {
+    font-family:"Hiragino Mincho ProN";
+}
+
 
 
 /* Article */
@@ -503,6 +571,22 @@
     border-left-style:solid;
     border-left-width:1px;
     border-left-color:#898989;
+
+    -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
+            transition:         transform 0.16s ease, margin-left 0.2s ease;
+}
+
+.no-toc article {
+    margin-left:0px;
+
+    -webkit-transition: -webkit-transform 0.16s ease, margin-left 0.2s ease;
+         -o-transition:      -o-transform 0.16s ease, margin-left 0.2s ease;
+        -ms-transition:     -ms-transform 0.16s ease, margin-left 0.2s ease;
+       -moz-transition:    -moz-transform 0.16s ease, margin-left 0.2s ease;
+            transition:         transform 0.16s ease, margin-left 0.2s ease;
 }
 
 article h1 {
@@ -547,6 +631,17 @@
     font-weight:300;
 }
 
+article p {
+    clear:both;
+}
+
+/* automatically center the 1st paragraph (block) directly after a h1 type header (since that header type is centered as well) */
+article h1 + p {
+    display:table; /*HACK: "block" would stretch the entire page width */
+    margin-left:auto;
+    margin-right:auto;
+}
+
 article a {
     font-weight:400;
     color:#1ba1dd;
@@ -560,7 +655,14 @@
     text-decoration:none;
 }
 
-article a:hover {
+article li img {
+    float:left;
+}
+
+.no-touch article a:hover,
+.touch article a:focus,
+.touch article a:active
+{
     text-decoration:underline;
 }
 
@@ -738,7 +840,7 @@
 }
 
 article th {
-    background-color:#e8e2e2;
+    background-color:#e0e0ff;
     padding:0px 8px 0px 8px;
     margin:0 0 0 0;
     border:3px solid white;
@@ -787,6 +889,10 @@
     max-width:         calc(100% - 145px);
 }
 
+article td > note {
+    display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
+}
+
 article note.important {
     border-left:solid 10px #ff4141;
 }
@@ -805,7 +911,7 @@
 article p img {
     display:inline-block;
     float:left;
-    margin:4px 20px 0px 0px;
+    margin:4px 20px 19px 0px;
     padding:0 0 0 0;
     /*border:solid 1px #8e8e8e;*/
     border:none;
@@ -868,10 +974,11 @@
     padding:0px;
     margin:0px;
     font-family:CRDCour;
+    font-size:15px;
     color:#000000;
 }
 
-article > dir {
+article > dir, example > dir {
     padding-left:66px;
     background-position:36px top;
 }
@@ -889,6 +996,7 @@
     background-repeat:no-repeat;
     background-position:2px top;
     font-family:CRDCour;
+    font-size:15px;
     color:#6f6f6f;
 }
 
@@ -919,6 +1027,11 @@
     content: "◀ ";
 }
 
+.iOS
+article > ul.docpager > li:nth-child(1) > a:before {
+    font-family:"Hiragino Mincho ProN";
+}
+
 article > ul.docpager > li:nth-child(2) {
     text-align:center;
     padding-left:10px;
@@ -929,6 +1042,11 @@
     content: "▲ ";
 }
 
+.iOS
+article > ul.docpager > li:nth-child(2) > a:before {
+    font-family:"Hiragino Mincho ProN";
+}
+
 article > ul.docpager > li:nth-child(3) {
     text-align:right;
     padding-left:10px;
@@ -938,6 +1056,11 @@
     content: " ▶";
 }
 
+.iOS
+article > ul.docpager > li:nth-child(3) > a:after {
+    font-family:"Hiragino Mincho ProN";
+}
+
 article > .endline {
     font-family:CRDSans;
     font-size:16px;
@@ -984,6 +1107,9 @@
     border:0;
 }
 
-footer a:hover {
+.no-touch footer a:hover,
+.touch footer a:focus,
+.touch footer a:active
+{
     text-decoration:underline;
 }