@media screen {

   html, body {
     margin: 0;
/*     padding: 0;                                                        */
/*     width: 100%;                                                     */
     border: 0;
     outline: 0;
/*     word-spacing: 0.6ex;*/
     font-size: 12px;               /* see settings & .userFont */
     font-family: Helvetica, sans-serif;
/*     color: #202020;*/
/*     color: #444444;            |* dark grey  *|                        */
     color: #222222;            /* dark grey  */
     background-color: #ffffff; /* white */
/*     box-sizing: content-box;                                           */
     box-sizing: border-box;
/*     scroll-behavior: smooth; |* only FF 20160723 *|                    */
     }
   input[type=button] {         /* override iOS 7 button look */
     -webkit-appearance: none;
     -moz-appearance: none;
     }
   body {
     -webkit-text-size-adjust: none;
     line-height: 1.4;
     overflow: -moz-scrollbars-none;   /* works on win/xp */
     -ms-overflow-style: none;         /* dunno            */
     }
   /* works in Safari/win,  Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/
      Opera
      Cordova might need overflow: scroll
   */
   ::-webkit-scrollbar {
     display: none;
     }
   .header {
     display: block;
     clear: both;
/*     background-color: #99ddee;  |* pale blue *|                        */
/*     background-color: #d45507;  |* brick red *|                        */
/*     background-color: #ba4804;  |* brick red darker *|                 */
/*     background-color: #bf4b05;  |* brick red darker *|                 */
/*     background-color: #8ec2b0;  |* dark lovat *|                       */
     background-color: #5fc6e8;  /* mid blue */
/*     background-color: #209dd3;  |* mid blue *|                         */
     color: #ffffff;                  /* white */
     font-size: 16pt;
     font-weight: bold;
     font-family: Helvetica, sans-serif;
     /* border: 1px #e56618 outset;*/
     /* border: 1px #0b5dbc outset;*/
     /* border: 1px #5fbce8 outset;*/
     border-bottom: 1px #5fbce8 outset;
/*     border-bottom: 1px #bbbbbb outset;  gives random artefacts                               */
/*     margin-bottom: 1px;                                                */
     /* border-radius: 60px; */
     background-image: url( images/dowserLogo.png );
     background-repeat: no-repeat;
     background-position: 14px 01px; /* left top */
     background-size: 30px 30px;
     width: auto;
     height: auto;
/*     padding-top: 1px;                                                  */
     padding-right: 14px;
/*     overflow: auto;                                                    */
     }
@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
       only screen and ( min-resolution: 2dppx ) {
   .header {
     background-image:    url( images/dowserLogo@2x.png );
     }
  }
@media only screen and ( -webkit-min-device-pixel-ratio: 3 ),
       only screen and ( min-resolution: 3dppx ) {
   .header {
     background-image:    url( images/dowserLogo@3x.png );
     }
  }
   .header span {
/*     background-color: #bf4b05;  |* brick red darker *|                 */
/*     background-color: #8ec2b0;  |* dark lovat *|                       */
/*     background-color: #209dd3;  |* mid blue *|                         */
     background-color: #5fc6e8;  /* mid blue */
     color: #ffffff;                  /* white */
     font-size: 16pt;
     position: relative;
     top: 1px;
     left: 56px;                   /* to jump over logo */
     }

   .userButton, #runDowser, .confirmBox, .yesButton, .noButton, .aboutButton, .userRoundButton {
     float: right;
/*     display: inline-block;                                             */
 /*    background-image: url( "" );     gets Resource interpreted as Image but transferred with MIME type text/css:  */
     background-image: none;     /* nukes FF Android gradient */
     background-color: #5fc6e8;  /* mid blue */
     color: #ffffff;                  /* white */
     font-family: Helvetica, sans-serif;
     font-size: 16pt;
     font-weight: bold;
     border-top: 1px #eeeeee outset;
     border-left: 1px #eeeeee outset;
     border-bottom: 1px #bbbbbb outset;
     border-right: 1px #bbbbbb outset;
     border-radius: 4px;
     margin-left: 8px;
/*     margin-bottom: 1px;                                                */
     padding: 1px 6px 1px 6px;
     height: 30px;
/*     width: auto;                                                       */
     min-width: 1.4em;
     cursor: pointer;
     text-align: center;
/*     line-height: 100%;                                                 */
     }
   .userButton:disabled, #runDowser:disabled {
     background-color: #999999;                  /* grey  */
     color: #ffffff;       /* white */
     cursor: default;
     }
   .yesButton {
/*     background-color: #13d815;       |* green *|                       */
/*     background-color: #13e005;       |* green *|                       */
/*     background-color: #00e920;       |* green *|                       */
/*     background-color: #00dd63;       |* blue green *|                  */
     background-color: #00e66f;       /* blue green */
     background-color: #00e67f;       /* blue green */
     color: #ffffff;                  /* white */
     }
   .noButton {
/*     background-color: #e81007;       |* dark red   *|                  */
/*     background-color: #f42c25;       |* dark red   *|                  */
/*     background-color: #f5433d;       |* dark red   *|                  */
/*     background-color: #ff531a;  |* pale dark orange, pointer is #ff470b*| */
     background-color: #ff6633;  /* paler dark orange, between #ff6633 and #ff794d */
     color: #ffffff;                  /* white */
     }
   #settings .userButton, #settings .userRoundButton {
     margin-top: 1px;
     box-shadow: 0 0 5px gray;
     }
   #settings .userRoundButton {
     box-sizing: content-box;
     border-radius: 50%;
/*      border: 2px #eeeeee solid;                                        */
     width: 30px;
     min-width: 0px;
     height: 30px;
     padding: 0px;
     background-repeat: no-repeat;
     background-position: 0.5px 0.5px; /* left top works for iOS & Opera desktop */
     background-position: 0px 0px; /* left top works for Android */
     background-size: 30px 30px;
     }
   #settings .userRoundButton.plus {
     background-image: url( images/roundButtonPlus.png );
     }
   #settings .userRoundButton.minus {
     background-image: url( images/roundButtonMinus.png );
     }
@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
       only screen and ( min-resolution: 2dppx ) {
   #settings .userRoundButton.plus {
     background-image: url( images/roundButtonPlus@2x.png );
     }
   }
@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
       only screen and ( min-resolution: 2dppx ) {
   #settings .userRoundButton.minus {
      background-image: url( images/roundButtonMinus@2x.png );
      }
    }
@media only screen and ( -webkit-min-device-pixel-ratio: 3 ),
       only screen and ( min-resolution: 3dppx ) {
   #settings .userRoundButton.plus {
      background-image: url( images/roundButtonPlus@3x.png );
      }
    }
@media only screen and ( -webkit-min-device-pixel-ratio: 3 ),
       only screen and ( min-resolution: 3dppx ) {
   #settings .userRoundButton.minus {
      background-image: url( images/roundButtonMinus@3x.png );
/*      background-position: 0.5px 0.5px; |* left top *|                  */
      }
    }
   .aboutButton {
/*     background-color: #ffff00;  |* yellow *|                           */
/*     background-color: #ffee00;  |* yellow *|                           */
/*     background-color: #ffe100;  |* yellow *|                           */
/*     background-color: #fae100;  |* yellow *|                           */
     color: #ffffff;                  /* white */
     }
   .confirmBox {  /* varies userButton */
     display: inline-block;
/*     box-sizing: border-box;                                            */
     cursor: default;
     padding: 2px;
     height: auto;
     margin-top: 1px;
/*     margin-bottom: 1px;          |* already padding 1px in header *|   */
     white-space: nowrap;
     }
   .confirmBox .text {  /* text */
     box-sizing: border-box;
     padding: 1.5px 6px 0px 6px;
     padding: 1.5px 2px 0px 2px;
     height: auto;
     text-align: center;
     font-size: 16pt;
     font-weight: bold;
     }
   .confirmBox input {  /* yes & no, varies userButton */
     float: none;
     display: inline;
     margin: 6px 2px 1px 2px;  /* top right bottom left */
     }
   .fleuron {
     height: 2.5em;
     background-image:    url( images/dowserFleuron.png ) ;
     background-repeat:   no-repeat;
     background-position: center center; /* left top */
     background-size:     21px 21px;
     }
@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
       only screen and ( min-resolution: 2dppx ) {
   .fleuron {
     background-image:    url( images/dowserFleuron@2x.png ) ;
     }
  }
@media only screen and ( -webkit-min-device-pixel-ratio: 3 ),
       only screen and ( min-resolution: 3dppx ) {
   .fleuron {
     background-image:    url( images/dowserFleuron@3x.png ) ;
     }
  }
   .section {
     clear: both;
     display: block;
     width: auto;
/*     margin: 1px 14px 1px 1px;   |* right margin to accommodate slider *| */
     margin: 0px;
     padding: 0.8em 1px 1em 1px;
     }
   #dowserContainer {
     position: relative;
/*     width: 100%;                                                       */
     width: auto;
     visibility: hidden;
/*     border: black solid thin;                                          */
     padding-bottom: 0px;
     }
   #dowserCanvasContainer {
     width: auto;
/*     border: red solid thin;                                            */
     }
   #dowserBackgroundCanvas {
     position: absolute;
/*     border: blue solid thin;                                           */

     }
   #dowserMiddleCanvas {
     position: absolute;
     }
   #dowserCanvas {
     position: relative;
/*     border: green solid thin;                                          */
     }
   #runDowser {
/*     background-color: #00e66f;       |* blue green *|                  */
/*     background-color: #00e920;       |* green *|                       */
/*     background-color: #00e600;       |* green *|                       */
/*     background-color: #00df60;       |* blue green *|                  */
/*     background-color: #00db69;       |* blue green *|                  */
/*     background-color: #00e660;       |* blue green *|                  */
/*     background-color: #00e920;       |* green *|                       */
/*     background-color: #00e960;       |* blue-green *|                  */
/*     background-color: #5fc6e8;                  |* mid blue *|         */
/*     background-color: #fae100;  |* yellow *|                           */
/*     background-color: #ff470b;  |* dark orange, pointer *|             */
/*     background-color: #ff570b;  |* dark orange, pointer *|             */
/*     background-color: #ff470b;  |* dark orange, pointer *|             */
/*     background-color: #ff4a0b;  |* dark orange, pointer *|             */
     background-color: #ff4c0b;  /* dark orange, pointer */
     background-color: #fae100;  /* yellow */
     background-color: #5fc6e8;  /* mid blue */
     background-color: #00e66f;       /* blue green */
     color: #ffffff;                  /* white */
/*     color: #fae100;  |* yellow *|                                      */
     position: absolute;
     top: 15px;
     z-index: 1;
     }
   .runDowser {
     position: static;
     }
   .runDowserLHS {
     left: 6px;
     right: auto;
     }
   .runDowserRHS {
     left: auto;
     right: 14px;
     }
   #logUserEntry {
     display: none;
     clear: both;
     padding: 0px 0px 0px 14px;
     margin: 10px 1px 1px 0px;
     }
   #logUserEntry td {
     vertical-align: top;
     }
   #logUserEntry textarea {
     float: none;
     vertical-align: top;
     font-family: Helvetica, sans-serif;
     font-size: 10pt;
     width: 100%;
     margin: 0px;
     padding: 2px 0px 2px 4px;
     border: 1px #666666 solid;
     border-radius: 4px;
     resize: vertical;
     }
   .logHeaderMenu {
     clear: both;
     text-align: right;     /* elsewhere this is done with float */
     margin-bottom: -1px;          /* nothing else will work */
     }
   .logHeaderMenu input, .logHeaderMenu .confirmBox {
     margin-top: 8px;
     float: none;
     vertical-align: top;
/*     vertical-align: bottom;                                            */
/*     height: auto;                                                      */
     }
   #sendButton {
     background-color: #fae100;   /* yellow */
     }
   #log {
     padding: 0px 2px 0.5em 2px
     }
   #logBody table {
     border-collapse: collapse;
     border-spacing: 0px;
     width: 100%;
     }
   #logBody td {
     padding: 2px 4px 2px 3px;
     vertical-align: top;
     letter-spacing: 0.5px;
/*     border: 1px black solid;                                           */
     }
   #logs tr:nth-child( odd ) {   /* odd rows */
     background-color: #dddddd;           /* grey     */
     color: #666666;                      /* unselected */
     }
   #logs tr:nth-child( even ) {   /* even rows */
     background-color: #eeeeee;           /* pale grey */
     color: #666666;                      /* unselected */
     }
   #logs tr.seld {   /* rows when selected */
/*     background-color: #666666;  |* dark grey         *|                */
/*     background-color: #f7921c;  |* mid orange        *|                */
/*     background-color: #ffe366;  |* pale orange-brown *|                */
/*     background-color: #ff531a;  |* pale dark orange, pointer is #ff470b*|*/
/*     background-color: #fbaf83;  |* pink brown        *|                */
/*     background-color: #ffff00;  |* yellow            *|                */
/*     background-color: #1502e0;  |* darker RoyalBlue purplish    *|     */
/*     background-color: #1502ef;  |* RoyalBlue purplish    *|            */
/*     background-color: #fae100;  |* yellow *|                           */
/*     background-color: #ffe100;  |* yellow *|                           */
/*     background-color: #ffee00;  |* yellow *|                           */
/*     background-color: #666666;  |* dark grey         *|                */
/*     background-color: #777777;  |* dark grey         *|                */
/*     color: #222222;                                                    */
/*     color: white;                                                      */
     color: black;                               /* selected */
/*     border-bottom: 2px outset #1502ef;                                 */
/*     border-bottom: 1px solid #ffffff;                                  */
     }
/*   #logs tr.seld:last-child {   |* last row when selected *|            */
/*     border-bottom: 0px none; |* solve rendering problem & looks better *|
/*     }                                                                  */

   #logEllipsisTop, #logEllipsisEnd {
     font-size: 250%;
     font-weight: bold;
     line-height: 40%;
     letter-spacing: 0.1em !important;
     padding: 2px 0px 2px 0.1em !important;
     text-align: left;
     vertical-align: middle;
     background-color: #ffffff;
     width: 1%;
     }
   #logHeadSel {
/*     padding: 0px 2px 2px 0px !important;                               */
     padding: 1px 2px 2px 0px !important;
     background-color: #ffffff;          /* white, overrides grey */
     width: 1% !important;
     }
   .logMessage, .settingsMessage {
     font-weight: bold;
     line-height: 40%;
     text-align: left;
     vertical-align: middle !important;
     width: 100%;
/*     color: #e81007;          |* dark red  *| */
/*     color: #00d933;          |* green     *| */
     color: #ff470b;          /* DarkOrange */
     width: 100%;
     }
   .sel {
     padding: 1px 2px 0.8em 0px !important;
     background-color: #ffffff;          /* white, overrides grey */
     border-bottom: 2px solid white;
     vertical-align: top;
     width: 1% !important;
     }
   .sel input {
     cursor: pointer;
     }
   .sel input:disabled {
     cursor: default;
     }
   .time {
     text-align: right;
     font-feature-settings: "tnum";  // Open Type font feature, if font has it
     width: 1%;
     }
   .que {
     width: 100%;
/*     white-space: pre;                                                */
     white-space: pre-wrap;
     }
   .ans, .ansCur, .notAns {
     text-align: right;
     width: 1%;
     }
   .ans div, .ansCur div, .notAns div {
/*     width: auto;                                                     */
     width: 2em;  /* longest lexeme is "yes"  */ /* makes them look a column */
/*     height: 1.5em;                                                   */
     height: auto;
     padding: 0px 0px 0px 1px;
     text-align: center;
     vertical-align: middle;
     font-weight: bold;
     border: 2px solid #888888;           /* unselected */
     border-radius: 4px;
     color: #888888;                      /* unselected */
     background-color: #ffffff;    /* white, unselected */
     }
   #logs tr.seld .ans div {   /* rows when selected */
     color: #222222;                               /* selected */
/*     background-color: #ccffff;         |* pale blue, selected *|       */
     border: 2px solid #222222;                    /* selected */
     }
   .ansCur div {                      /* current answer log line, always selected */
     color: #d45507;               /* brick red */
     background-color: #ccffff;    /* pale blue */
     border: 2px solid #222222;                    /* selected */
     }
   .notAns div {
     visibility: hidden;
     }
   .aboutPara {
     margin: 0px 2px 0px 2px;
     margin: 0px 2px 0px 2em;
     }
   .aboutPara ul {
     list-style-type: disc;
     padding-left: 2em;
     padding-left: 0em;
     }
   .aboutPara ul li {
     padding-bottom: 0.2em;
     }
   .aboutPara ul ol {
/*    list-style-type: decimal;*/
/*     list-style-type: lower-alpha;*/
     padding-left: 1.2em;
     }
   .aboutPara ul ol ol {
/*     list-style-type: lower-alpha;*/
     padding-left: 1.2em;
     }
   .aboutPara ol {
/*     list-style-position: inside;                                       */
     list-style-position: outside;
/*     list-style-type: decimal;*/
     padding-left: 2em;
     padding-left: 0em;
     }
   .aboutPara ol li {
     padding-bottom: 0.2em;
     }
   .aboutPara ol ol {
     padding-top: 0.1em;
/*     list-style-type: lower-alpha;*/
     padding-left: 1.2em;
     }
   .aboutPara input {
     float: none;
     height: 80%;
     height: 90%;
     font-size: 90%;
     font-size: 100%;
     margin: 0px 0.1em 0px 0.1em;
     }

   .aboutPara span.addedToLog {
     margin-left: 0.5em;
     color: #ff470b;          /* DarkOrange */
     }

   #settings {
     margin: 8px 14px 0px 14px;
     }
   #settings table {
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0px;
     }
   #settings td {
     vertical-align: top;
     padding: 1px 0px 8px 0px;
     border-top: 1px #777777 solid;
     }
   #settings td.settingDesc {
     width: 40%;
     padding-right: 10px;
     }
   #settings td.settingValue {
     width: 100%;
     margin-right: 0.8em;
     margin-right: 10px;
     }
   #settings .userButton {
     clear: none;
     margin-left: 0.8em;
     border-radius: 3px;
     }
   #settings .settingsMessage {
     position: relative;
     top: -1px;
     left: 0.5em;
     }
   #sendLogEmailValue {    /* because width pushes buttons out */
/*     overflow: hidden;                                                  */
     /* These are technically the same, but use both */
     overflow-wrap: break-word;
     word-wrap: break-word;
     -ms-word-break: break-all;
     /* This is the dangerous one in WebKit, as it breaks things wherever */
     word-break: break-all;
     /* Instead use this non-standard one: */
     word-break: break-word;
     /* Adds a hyphen where the word breaks, if supported (No Blink) */
/*     -ms-hyphens: auto;                                                 */
/*     -moz-hyphens: auto;                                                */
/*     -webkit-hyphens: auto;                                             */
/*     hyphens: auto;                                                     */
     }
   #sendLogEmailEntry {
     resize: both;
     }

   #footer {
     margin: 0.8em 16px 50em 14px;
     border-top: 1px solid #777777;
     }

   } /* eo @media screen */