/* This is used to assist with creating appropriate output for mobile devices. */
@viewport {
   width:device-width;
   zoom:1.0;
}
:root {
   --main-color:black;
   --main-background-color:white;
   --main-font-family:Century Gothic, Trebuchet MS, sans-serif;
   --main-padding:5rem 5rem 5rem 5rem;
   --website-heading-color:white;
   --website-heading-background-color:#464646;
   --website-middle-background-color:white;
   --website-footer-background-color:#DBD5D9;
   --forms-background-color:dimgray;
   --centrepiece-background-color:gray;
   --centrepiece-td-color:lime;
   --centrepiece-td-background-color:black;
   --communications-background-color:#060;
   --ribbon-background-color:#550;
   --ribbon-color:white;
   --ribbon-heading-color:lime;
   --ribbon-option-background-color:orange;
   --ribbon-hover-background-color:brown;
   --restriction-color:var(--main-color);
   --restriction-background-color:blue;
   --response-color:yellow;
   --response-background-color:black;
   --manual-heading-color:darkblue;
   --manual-minor-heading-color:green;
   --manual-href-color:green;
   --manual-plus-color:darkgreen;
   --manual-background-color:#ff4;
   --screen-dump-color:var(--main-color);
   --screen-dump-background-color:#0080ff;
   --mobile-ul-color:DarkBlue;

   --large-image-width:400px;
   --medium-image-width:200px;

   --base-font-size-unitless:20;
   --base-font-size:20px;
   --base-line-height:1.0em;
   --h1-font-size:2.5em;
   --h2-font-size:2.0em;
   --h3-font-size:1.2em;
   --h4-font-size:1.1em;
   --page-font-size:12pt;
   --foot-font-size:12pt;
   --forms-font-size:14pt;
   --ribbon-font-size:8pt;
   --manual-heading-font-size:20pt;

   --mwp-spacing-50:min(3.0rem, 5vw);
   --mwp-spacing-20:min(1.0rem, 1vw);
   --mwp-root-padding-top:0px;
   --mwp-root-padding-bottom:0px;
   --mwp-root-padding-right:var(--mwp-spacing-20);
   --mwp-root-padding-left:var(--mwp-spacing-20);
   --mwp-base-color:#f9f9f9;
   --mwp-contrast-color:#111111;
   --mwp-body-font-family:"Inter", sans-serif;
   --mwp-medium-font-size:1.05rem;
   --mwp-content-size: 620px;
   --mwp-wide-size: 1280px;
   --mwp-main-table-padding: 5rem;

   --typewriter-font-family:'Courier New', 'Courier', monospace;

   --contact-width: 200px;
   --contact-message-width:500px;
   --contact-message-height:200px;

   --mobile-padding: var(--mwp-spacing-50);
   --mobile-opacity: 0.5;
}
html {
   height:100%;
   font-size:var(--base-font-size); /* This sets the font size for use in "rem" units. */
}
body {
   font-family:var(--main-font-family);
   font-size:var(--base-font-size);
   font-weight:normal;
   background-color:var(--main-background-color);
   color:var(--main-color);
   margin:0px;
   height:100%;
}
div.non-mobile-only-block {
   display:block;
}
div.large-mobile-only-block {
   display:none;
}
div.medium-mobile-only-block {
   display:none;
}
div.mobile-only-block {
   display:none;
}
div.non-mobile-only {
   display:flex;
}
div.large-mobile-only {
   display:none;
}
div.medium-mobile-only {
   display:none;
}
div.mobile-only {
   display:none;
}
p.non-mobile-only {
   display:block;
}
p.large-mobile-only {
   display:none;
}
p.medium-mobile-only {
   display:none;
}
p.mobile-only {
   display:none;
}
td.non-mobile-only {
   display:table-cell;
}
td.large-mobile-only {
   display:none;
}
td.medium-mobile-only {
   display:none;
}
td.mobile-only {
   display:none;
}
tr.non-mobile-only {
   display:table-row;
}
tr.large-mobile-only {
   display:none;
}
tr.medium-mobile-only {
   display:none;
}
tr.mobile-only {
   display:none;
}
form.non-mobile-only {
   display:table;
   pointer-events:auto;
}
form.large-mobile-only {
   display:none;
   pointer-events:none;
}
form.medium-mobile-only {
   display:none;
   pointer-events:none;
}
form.mobile-only {
   display:none;
   pointer-events:none;
}
table.non-mobile-only {
   display:table;
   border-spacing:0px;
   border-collapse:collapse;
}
table.large-mobile-only {
   display:none;
   pointer-events:none;
}
table.medium-mobile-only {
   display:none;
   pointer-events:none;
}
table.mobile-only {
   display:none;
   pointer-events:none;
}
/* This is used to ensure that the padding and borders are included in the
 * calculation of an element's size. */
*, *:before, *:after {
   box-sizing: border-box;
}
table {
   clear:both;
}
p, li, div, h1, h2, h3, h4, h5, h6 {
   margin-top:6.0pt;
   margin-right:0cm;
   margin-bottom:3.0pt;
   margin-left:0cm;
}
ul {
   padding-inline-start:40px;
}
h1 {
   font-size:var(--h1-font-size);
   clear:both;
}
h2 {
   font-size:var(--h2-font-size);
   clear:both;
}
h3 {
   font-size:var(--h3-font-size);
   clear:both;
}
h4, h5, h6 {
   font-size:var(--h4-font-size:1.1em);
   clear:both;
}
img {
   border:2px inset dimgray;
}
.hidden {
   display:none;
}
.loader {
   position: relative;
   left: 50%;
   width: 100px;
   height: 100px;
   animation: cycling 1s infinite;
}
@keyframes cycling {
   0%   { background:url(/images/bicycle1r.png) 0 0 no-repeat; background-size: 50% 50%; }
   12%  { background:url(/images/bicycle2r.png) 0 0 no-repeat; background-size: 50% 50%; }
   25%  { background:url(/images/bicycle3r.png) 0 0 no-repeat; background-size: 50% 50%; }
   37%  { background:url(/images/bicycle4r.png) 0 0 no-repeat; background-size: 50% 50%; }
   50%  { background:url(/images/bicycle5r.png) 0 0 no-repeat; background-size: 50% 50%; }
   62%  { background:url(/images/bicycle6r.png) 0 0 no-repeat; background-size: 50% 50%; }
   75%  { background:url(/images/bicycle7r.png) 0 0 no-repeat; background-size: 50% 50%; }
   87%  { background:url(/images/bicycle8r.png) 0 0 no-repeat; background-size: 50% 50%; }
   100% { background:url(/images/bicycle1r.png) 0 0 no-repeat; background-size: 50% 50%; }
}
.anecdote h6 {
   display:table;
   margin:0;
   color:white;
   background-color:blue;
   font-size: 0.7em;
   font-weight:bold;
}
.anecdote p { display:none; color:blue; }
.anecdote:hover p { display:inline; }

/* Override the standard link colours so that they will look reasonable against
 * the background that we are using. */
a:link {
   color:blue;
   text-underline-offset: 0.1em;
   text-decoration:underline;
   text-decoration-thickness: initial;
}
a:visited {
   color:purple;
   text-underline-offset: 0.1em;
   text-decoration:underline;
   text-decoration-thickness: initial;
}
a:hover {
   color:DarkOrange;
   text-underline-offset: 0.1em;
   text-decoration:underline;
   text-decoration-thickness: initial;
}

/* Underline styles */
a:where([class*='page-selector']) {
   overflow: hidden;
   display: block;
   position: relative;
   padding: 0.2em 0;
}

/* Fade in */
a:where([class*='page-selector'])::after {
   content: '';
   position: absolute;
   bottom: 1px;
   left: 0;
   width: 100%;
   height: 0.2em;
   opacity: 1;
   transform: translate3d(-100%, 0, 0);
   transition: opacity 300ms, transform 300ms;
}

a:where([class*='page-selector']):hover::after, a:where([class*='page-selector']):focus::after {
   background-color: DarkOrange;
   opacity: 1;
   transform: translate3d(0, 0, 0);
}

a:where([class*='page-selector']):active::after {
   background-color: purple;
   opacity: 1;
   transform: translate3d(0, 0, 0);
}

/* And when we want to use the original colours for hyper-text links. */
.no_href_colour a:link {
   color:inherit;
   text-decoration:none;
}
.no_href_colour a:visited {
   color:purple;
   text-decoration:none;
}
.no_href_colour a:hover {
   color:lime;
   text-decoration:underline;
}

/* WEBSITE */

.menu-decoration {
}
.scrolling-images {
   height:110px;
   overflow:hidden;
   position:relative;
}
.scrolling-images h3 {
   position:absolute;
   width:100%;
   height:100%;
   margin:0;
   line-height:100px;
   text-align:center;
   transform:translateX(100%);
   animation:scrolling-images 10s linear infinite;
}
@keyframes scrolling-images {
   0% { transform:translateX(20%); }
   50% { transform:translateX(20%); }
   100% { transform:translateX(20%); }
}
ul.scrolling-images {
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: row;
   width: 900px;
   overflow-x: auto;
}
ul.scrolling-images li {
   list-style:none;
   flex: 0 0 auto;
   width: 150px;
   height: 150px;
}
textarea.contact {
   width:var(--contact-message-width);
   height:var(--contact-message-height);
}
a.hyperlink:link {
   color:blue;
   text-decoration:underline;
}
a.hyperlink:visited {
   color:purple;
   text-decoration:underline;
}
a.hyperlink:hover {
   color:green;
}
a.hyperlink_on_dark:link {
   color:CornflowerBlue;
   text-decoration:underline;
}
a.hyperlink_on_dark:visited {
   color:LightPink;
   text-decoration:underline;
}
a.hyperlink_on_dark:hover {
   color:LimeGreen;
}
/* The pages are arranged within a table of class "bodyTable". */
.bodyTable {
   padding:0px;
   border-collapse:collapse;
   border-width:0px;
   border-spacing:0px;
   margin:0px;
   height:100%;
   width:100%;
}
/* Within the "bodyTable" there is the "bannerTable" which holds the section menu. */
.bannerTable {
   padding:0px;
   border-collapse:collapse;
   border-width:0px;
   border-spacing:0px;
   width:100%;
}
/* Then there is the "middleTable" that contains the stuff unique to the page. */
.middleTable {
   background-color:var(--website-middle-background-color);
   font-size:var(--page-font-size);
   padding:0px;
   border-collapse:collapse;
   border-spacing:0px;
   border-width:0px;
   margin:0px;
   width:100%;
}
/* Finally, there is the "footTable" that contains the copyright stuff. */
.footTable {
   background-color:var(--website-footer-background-color);
   font-size:var(--foot-font-size);
   padding:0px;
   border-collapse:collapse;
   border-width:0px;
   border-spacing:0px;
   margin:0px;
   width:100%;
}
.largeImg {
   width:500px;
}
/* The widths given for images of the screen dumps from the software for use on
 * the website.  These are overridden for mobile devices. */
.screen {
   width:500px;
}
.large_screen {
   width:700px;
}
/* These are used when swapping images over in the one spot.  The "fading" set
 * are used to swap by means of changing the opacity, while the "swapping" is
 * a special class used for changing images by just swapping the image.  In the
 * fading class, there need to be two images, that which is coming and that
 * which is going.  The "fading" division can be used for both fading and
 * swapping.  The fading images need to be given the classes "fading" and one
 * of "fading_first" or "fading_second", and then, unless the "fading" division
 * is in a <td>, "fading_position".*/
div.fading {
   position:relative;
   margin:0 auto auto 0;
}
img.fading {
   transition: opacity 1s linear;
   border:0;
   margin:0 auto auto 0;
}
/* The position information has been separated out because it screws things up
 * when used in a <td>, but is required when used in a <span style='float:...'>.
 * Actually, <td> is to be avoided, because nothing works unless the text-align
 * is set to left or right. */
img.fading_position {
   top:0;
   left:0;
}
/* This is used for the first of the two images; it needs its position to be
 * "relative". */
img.fading_first {
   position:relative;
}
/* This is used for the second of the two images; it needs its position to be
 * "absolute". */
img.fading_second {
   position:absolute;
}
/* It is much simpler for swapping images. */
img.swapping {
   position:relative;
   top:0;
   left:0;
   border:0;
   margin:0 auto auto 0;
}
/* Used for the drop down list of links within a page. */
.drop_down_button {
   background-color:beige;
   color:var(--main-color);
   font-weight:bold;
   padding:0px 20px 0px 20px;
   font-size:16px;
   border:2px inset white;
}
/* The "position:relative" is required to ensure that the "drop_down_items"
 * fit within the left and right margins of this button. */
.drop_down_div {
   position:relative;
   margin:0 auto;
}
/* As you move over the button, it will be highlighted. */
.drop_down_div:hover .drop_down_button {
   background-color:dimgray;
   color:var(--main-color);
}
/* Without the "z-index" member, the background becomes transluent.
 * The "overflow:auto" ensures that the items do not overflow past the
 * "max-height" and provides a scrollbar when needed.
 * The "display:none" hides the menu until the "drop_down_div" is
 * hovered over.
 * The "position:absolute" is necessary to allow it to drop down over the main
 * part of the page.  Without it, when it drops down, the heading section is
 * deepened to accommodate it.
 * The "margin:0pt" is required to ensure that the drop down list is contiguous
 * with the button.  Otherwise, there is a small gap. */
.drop_down_items {
   min-width:160px;
   max-height:400px;
   overflow:auto;
   color:var(--main-color);
   display:none;
   position:absolute;
   background-color:#f1f1f1;
   box-shadow:0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index:2;
   margin:0pt;
}
/* When you hover over the button, the "display" changes from "none" to
 * "block", causing the items to appear.
 *
 * This applies to the "drop_down_items", while the "drop_down_div" is hovered
 * over.  As the "drop_down_items" are within the "drop_down_div", then once
 * they are displayed, the cursor may be moved over them and still be hovering
 * over the "drop_down_div".
 *
 * The "focus-within" is used to allow the items to be presented via the
 * keyboard, when "focus" is on the button which is included "within" this
 * division. */
.drop_down_div:hover .drop_down_items, .drop_down_div:focus-within .drop_down_items  {
   display:block;
}
/* There may be elements other than "a"s in the drop down list. */
.drop_down_items a, .drop_down_items p {
   color:var(--main-color);
   font-size:var(--page-font-size);
   padding:0px;
   text-decoration:none;
   display:block;
   white-space:normal;
}
/* As you move down the list of items, the item hovered over will be highlighted. */
.drop_down_items a:hover, {
   background-color:#ddd;
}
/* WordPress imitation classes. */
.motto {
   text-align: center;
   vertical-align: middle;
   font-family: Cardo;
   font-weight: 400;
   padding: 2rem 2rem 2rem 2rem;
}
.sub-motto {
   text-align: center;
   vertical-align: middle;
   font-weight: 400;
   padding: 1rem 1rem 1rem 1rem;
}

.mwp-group {
   box-sizing:border-box;
}
.mwp-has-global-padding {
   padding-right:var(--mwp-root-padding-right);
   padding-left:var(--mwp-root-padding-left);
}
.mwp-navigation {
   --navigation-layout-justification-setting: flex-start;
   --navigation-layout-direction: row;
   --navigation-layout-wrap: nowrap;
   --navigation-layout-justify: flex-start;
   --navigation-layout-align: center;
   white-space:nowrap;
   position: relative;
}
.mwp-navigation a:where(:not([class*=mwp-has-text-decoration])) {
   text-decoration: none;
}
.mwp-navigation a:where(:not([class*=mwp-has-text-decoration])):active, .mwp-navigation a:where(:not([class*=mwp-has-text-decoration])):focus {
   text-decoration: none;
}
a.page-selector {
   text-underline-offset: 0.4em;
   text-decoration-thickness: 0.2em;
}
.mwp-navigation-container,  {
   gap: inherit
}
.mwp-navigation-container {
   align-items: var(--navigation-layout-align, initial);
   display: flex;
   flex-direction: var(--navigation-layout-direction, initial);
   flex-wrap: var(--navigation-layout-wrap, wrap);
   justify-content: var(--navigation-layout-justify, initial);
   list-style: none;
   margin: 0;
   padding-left: 0
}
.mwp-navigation-container:only-child, {
   flex-grow: 1
}
@keyframes overlay-menu-fade-in-animation {
   0% {
      opacity: 0;
      transform: translateY(.5em)
   }
   to {
      opacity: 1;
      transform: translateY(0)
   }
}
.mwp-navigation ul {
   margin-top:0;
   margin-bottom:0;
   margin-left:0;
   padding-left:0;
}
.mwp-navigation ul, .mwp-navigation ul li {
   list-style:none;
   padding:0;
}
body .mwp {
   background-color:var(--mwp-base-color);
   color:var(--mwp-contrast-color);
   font-family:var(--mwp-body-font-family);
   font-size:var(--mwp-medium-font-size);
   font-style:normal;
   font-weight:400;
   line-height:1.55;
}
:where(body .mwp-is-layout-constrained) > :first-child {
   margin-block-start:0;
}
:where(body .mwp-is-layout-constrained) > :last-child {
   margin-block-end:0;
}
:where(body .mwp-is-layout-constrained) > * {
   margin-block-start:1.2rem;
   margin-block-end:0;
}
:where(.mwp-navigation) {
   font-weight:500;
}
body .mwp-is-layout-constrained > .mwp-alignwide {
   max-width:var(--mwp-wide-size);
}
body .mwp-is-layout-constrained > * {
   max-width:var(--mwp-content-size);
   margin-left:auto !important;
   margin-right:auto !important;
}
/* END WordPress imitation classes. */
/* This is the div that holds the heading for the website pages. */
div.menuBlack {
   border-bottom:solid medium #F9FFF6;
}
.menuBlack {
   background-color:var(--website-heading-background-color);
   color:var(--website-heading-color);
   font-size:var(--page-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
/* HINDSIGHT: A section of my website is dedicated to the Hindsight Safety Factor. */
.hindsight {
   font-family:"Andale Mono", "Rockwell", serif;
   font-size:16pt;
   font-weight:bold;
   color:#550055;
}
p.caption {
   font-size:var(--page-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
   font-style:italic;
}
div.safety {
   text-align:center;
   font-family:var(--typewriter-font-family);
   font-size:14pt;
   font-weight:normal;
}
.headMenu {
   background-color:var(--website-footer-background-color);
   font-size:var(--page-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
/* END HINDSIGHT */
/* RCW */
tr.weekdays td {
   width:100px;
   text-align:center;
}
tr.week td {
   width:100px;
   height:65px;
   color:var(--main-color);
}
.joke {
   background-color:#DDDDDD;
   font-size:var(--base-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
/* END RCW */

/* END WEBSITE */

/* HTTP INTERFACE */

/* Each page of the Http interface has a heading. */
table.heading {
   margin-top:0px;
   width:100%;
   border-spacing:0px;
   border:none;
   padding:0px;
   border-collapse:collapse;
}
table.heading th {
   padding:0px;
}
table.heading > tbody > tr, table.heading > tbody > tr > td {
   white-space:nowrap;
   padding:0px;
}
/* And within that heading is a ribbon menu. */
select.ribbon {
   background-color:var(--ribbon-option-background-color);
   color:var(--ribbon-color);
   border:none;
   margin:0px;
   text-transform:uppercase;
   font-family:'Century Gothic', 'Trebuchet MS', sans-serif;
   font-size:var(--page-font-size);
   font-weight:bold;
   width:200px;
}
select.ribbon:hover {
   background-color:var(--ribbon-hover-background-color);
   color:var(--ribbon-color);
}
select.ribbon option {
   background-color:var(--ribbon-option-background-color);
   color:var(--ribbon-color);
   border:none;
   font-size:var(--page-font-size);
}
select.ribbon option:hover {
   background-color:var(--ribbon-hover-background-color);
   color:var(--ribbon-color);
}
table.ribbon {
   background-color:var(--ribbon-background-color);
   border:none;
   border-spacing:0px;
   padding:0px;
   margin:0px;
}
table.ribbon th {
   white-space:nowrap;
   color:var(--ribbon-heading-color);
   font-size:var(--page-font-size);
   text-transform:uppercase;
   border:0px;
}
table.ribbon th > a {
   color:var(--ribbon-heading-color);
   text-decoration:none;
} 
table.ribbon th:hover {
   background-color:var(--ribbon-hover-background-color);
} 
table.ribbon td {
   white-space:nowrap;
   font-size:var(--ribbon-font-size);
   text-align:center;
   color:var(--ribbon-color);
   padding:0px;
   background-color:var(--ribbon-background-color);
   text-align:right;
}
table.ribbon td > a:link, table.ribbon  td > a:visited {
   display:block;
   font-size:var(--page-font-size);
   color:var(--ribbon-color);
   font-weight:bold;
   background-color:var(--ribbon-option-background-color);
   text-decoration:none;
   text-transform:uppercase;
   visibility:visible;
}
table.ribbon td > a:hover, table.ribbon  td > a:active {
   display:block;
   font-size:var(--page-font-size);
   color:var(--ribbon-color);
   font-weight:bold;
   background-color:var(--ribbon-hover-background-color);
   text-decoration:none;
   text-transform:uppercase;
   visibility:visible;
}
/* Tables for presenting most of the menus. */
table.menus {
   margin-left:auto;
   margin-right:auto;
   border-spacing:1px;
   padding:0px;
   border:10px;
   border-style:outset;
   border-color:gray;
   width:90%;
   background-color:var(--main-background-color);
}
table.menus th {
   color:var(--ribbon-heading-color);
   font-size:20.0pt;
   text-shadow:1px 0px darkgreen, 0px 1px green,
               2px 1px darkgreen, 1px 2px green,
               3px 2px darkgreen, 2px 3px green,
               4px 3px darkgreen, 3px 4px green,
               5px 4px darkgreen;
   border:1px inset gray;
}
/* The ">" indicates that we are only concerned with the "a" elements that are
 * direct children of the "th" element. */
table.menus th > a {
   color:var(--ribbon-heading-color);
   text-decoration:none;
} 
table.menus td {
   font-size:var(--base-font-size);
   color:var(--main-color);
   background-color:var(--main-background-color);
   border:1px inset gray;
}
/* But for the mobile interface, we have only a home link at the bottom of the page. */
table.mobile_heading {
   display:none;
   margin-top:0px;
   width:100%;
   border-spacing:0px;
   border:none;
   padding:0px;
   border-collapse:collapse;
}
p.mobile_portrait_heading {
   display:none;
}
/* Tables for presenting the menu of manuals. */
table.manuals {
   border-spacing:1px;
   padding:0px;
   border:10px;
   border-style:outset;
   border-color:gray;
   width:90%;
   background-color:var(--main-background-color);
}
table.manuals th {
   font-size:var(--base-font-size);
   border:1px inset gray;
}
table.manuals td {
   font-size:var(--base-font-size);
   text-align:center;
   color:var(--main-color);
   background-color:var(--main-background-color);
   border:1px inset gray;
}
/* When the menu is not the main purpose of the page: */
table.little_menus {
   margin-left:0px;
   margin-right:auto;
   border:none;
   border-spacing:1px;
   padding:0px;
   border-collapse:collapse;
   background-color:var(--ribbon-option-background-color);
}
table.little_menus th {
   white-space:nowrap;
   color:var(--ribbon-heading-color);
   font-size:var(--page-font-size);
   text-transform:uppercase;
   border:0px;
}
table.little_menus th > a {
   color:var(--ribbon-heading-color);
   text-decoration:none;
} 
table.little_menus td {
   white-space:nowrap;
   font-size:var(--ribbon-font-size);
   text-align:center;
   color:var(--main-color);
   padding:0px;
   background-color:var(--ribbon-option-background-color);
}
table.little_menus td > a:link, table.little_menus  td > a:visited {
   display:block;
   font-size:var(--page-font-size);
   color:var(--main-color);
   font-weight:bold;
   background-color:var(--ribbon-option-background-color);
   text-decoration:none;
   text-transform:uppercase;
   visibility:visible;
}
table.little_menus td > a:hover, table.little_menus  td > a:active {
   display:block;
   font-size:var(--page-font-size);
   color:var(--main-color);
   font-weight:bold;
   background-color:var(--ribbon-hover-background-color);
   text-decoration:none;
   text-transform:uppercase;
   visibility:visible;
}
/* There is a "home" image that is specified as a class, "home", while the
 * actual image referenced in the corresponding "img" element is ignored. */
img.home {
   width:23px;
   height:22px;
   background:url(/navigate.png);
}
/* Used for most forms. */
table.forms {
   margin-left:auto;
   margin-right:auto;
   border-spacing:0px;
   padding:10px;
   border:25px outset white;
   border-image:url(border.png) 29 29 27 31 stretch;
   background-color:var(--forms-background-color);
   line-height:250%;
   box-shadow:0 0 5px yellow, 5px 6px 5px 0px black;
}
table.forms td {
   font-size:var(--forms-font-size);
   background-color:var(--forms-background-color);
}
table.forms input {
   font-size:var(--forms-font-size);
}
table.forms input[type=text], input[type=number], textarea {
   transition:all .1s ease;
   outline:none;
   padding:3px 0px 3px 3px;
   margin:5px 1px 3px 0px;
   border:2px solid black;
}
table.forms input[type=text]:focus, input[type=number]:focus, textarea:focus {
   box-shadow:0 0 5px yellow;
   padding:3px 0px 3px 3px;
   margin:5px 1px 3px 0px;
   border:2px solid blue;
}
/* But we treat radio button forms differently. */
/* This makes the standard radio button invisible. */
.forms_radio input[type=radio] {
   visibility:hidden;
}
/* This sets the "off" image to a 1em round (50% border) brown circle at the left. */
.forms_radio {
   width:18px;
   height:18px;
   background-color:brown;
   margin:3px 3px;
   position:relative;
   border-radius:50%;
   float:left;
}
/* This sets the "off" image to a <1em round (50% border) black circle within
 * the larger brown circle.  Since we are reducing the size by 0.1em, we need
 * to offset it from the top and left by half that amount. */
.forms_radio label {
   display:block;
   width:14px;
   height:14px;
   border-radius:50%;
   transition:all 0.5s;
   cursor:pointer;
   position:absolute;
   top:2px;
   left:2px;
   background-color:black;
}
/* Now, when we hover over it, we want it to be a little bigger. */
.forms_radio input[type=radio]:hover + label {
   width:16px;
   height:16px;
   position:absolute;
   top:1px;
   left:1px;
}
/* And, if it is checked, it is to be yellow. */
.forms_radio input[type=radio]:checked + label {
   background-color:yellow;
}
/* Similarly, we treat check boxes differently. */
/* This makes the standard checkbox button invisible. */
.forms_checkbox input[type=checkbox] {
   visibility:hidden;
}
/* This sets the "off" image to a 40 x 10 rounded brown slot at the left. */
.forms_checkbox {
   width:40px;
   height:10px;
   background-color:brown;
   margin:0px 12px;
   position:relative;
   border-radius:3px;
}
/* This sets the "off" image to a 20 dark red black circle at the left of the
 * brown slow. */
.forms_checkbox label {
   display:block;
   width:20px;
   height:20px;
   border-radius:50%;
   transition:all .2s ease;
   cursor:pointer;
   position:absolute;
   top:-5px;
   left:-3px;
   background-color:darkred;
}
/* Now, when we hover over it, we want it to be a little bigger. */
.forms_checkbox input[type=checkbox]:hover + label {
   width:22px;
   height:22px;
   position:absolute;
   top:-6px;
   left:-4px;
}
/* And, if it is checked, it is to be dark green and to the right. */
.forms_checkbox input[type=checkbox]:checked + label {
   left:27px;
   background-color:darkgreen;
}
/* This is used to present database information. */
table.databases {
   border-spacing:1px;
   padding:0px;
   border:10px;
   border-style:outset;
   border-color:dimgray;
   width:90%;
   background-color:var(--main-background-color);
}
table.databases th {
   font-size:var(--base-font-size);
   border:1px solid black;
}
table.databases td {
   font-size:var(--base-font-size);
   color:var(--main-color);
   background-color:var(--main-background-color);
   border:1px solid black;
}
/* This is used to present and obtain restrictions to the presentation of the database. */
table.restrictions {
   border-spacing:1px;
   padding:0px;
   border:1px;
   border-style:outset;
   border-color:gray;
   width:30%;
   background-color:var(--restriction-background-color);
}
table.restrictions th {
   font-size:var(--base-font-size);
   border:1px inset gray;
   padding:2px;
}
table.restrictions td {
   font-size:var(--base-font-size);
   color:var(--restriction-color);
   background-color:var(--restriction-background-color);
   border:1px inset gray;
   padding:2px;
}
table.restriction_forms {
   margin-left:0px;
   margin-right:auto;
   border-spacing:1px;
   padding:0px;
   border:10px;
   border-style:outset;
   border-color:black;
   background-color:var(--main-background-color);
}
table.restriction_forms th {
   font-size:var(--base-font-size);
   border:1px solid black;
}
table.restriction_forms td {
   font-size:var(--base-font-size);
   color:var(--main-color);
   background-color:var(--main-background-color);
   border:1px solid black;
}
.match_indication {
   float:right;
   color:yellow;
}
/* This is an attempt to exploit the fancy things we can do with a table. */
table.centrepiece {
   margin-left:auto;
   margin-right:auto;
   border-spacing:0px;
   padding:10px;
   border:25px outset white;
   border-image:url(border.png) 27 26 27 26 round;
   background-color:var(--centrepiece-background-color);
   line-height:250%;
   box-shadow:0 0 5px yellow, 5px 6px 5px 5px black, inset 4px 5px 2px 2px black;
}
table.centrepiece th {
   padding:5px 0px 5px 0px;
   font-size:30.0pt;
   text-shadow:0px 1px 0px #bbb, 1px 0px 0px #999, 0px 2px 0px #bbb, 2px 0px 0px #999;
   border:2px solid gray;
}
table.centrepiece td {
   padding:0px 10px 0px 10px;
   font-size:30.0pt;
   color:var(--centrepiece-td-color);
   background-color:var(--centrepiece-td-background-color);
   border:2px solid black;
}
/* This is used to present the text from the terminal interface to a serial port. */
table.terminal {
   margin-left:auto;
   margin-right:auto;
   border-spacing:0px;
   border:20px;
   border-style:outset;
   border-color:orange;
   border-radius:25px;
}
table.terminal th {
   font-size:30.0pt;
   border:2px solid black;
}
table.terminal td {
   font-family:var(--typewriter-font-family);
   font-size:var(--base-font-size);
   color:yellow;
   background-color:black;
   border:2px solid gray;
}
/* The class for the table presenting the machine information. */
table.machines {
   border-spacing:1px;
   padding:0px;
   border:1px;
   border-style:outset;
   border-color:gray;
   width:90%;
   background-color:var(--main-background-color);
}
table.machines th {
   font-size:var(--base-font-size);
   border:1px inset gray;
}
table.machines td {
   font-size:var(--base-font-size);
   text-align:right;
   color:var(--main-color);
   border:1px inset gray;
   background-color:var(--main-background-color);
}
/* The class for the table presenting the serial communications. */
table.communications_input {
   border:1px inset gray;
   background-color:var(--communications-background-color);
   width:90%;
}
table.communications_input td {
   padding:0px 5px 0px 5px;
}
table.communications_output {
   border:1px inset gray;
   background-color:var(--communications-background-color);
   width:90%;
}
table.communications_output td {
   padding:0px 5px 0px 5px;
}
/* The class for the table presenting the PLC memory. */
table.plc_memory {
   border-spacing:1px;
   padding:0px;
   border:1px;
   border-style:outset;
   border-color:gray;
   width:90%;
}
table.plc_memory th {
   font-size:var(--base-font-size);
   border:1px inset gray;
}
table.plc_memory td {
   font-size:var(--base-font-size);
   text-align:right;
   color:var(--main-color);
   border:1px inset gray;
}
/* The class for the table presenting the Movement Controller's threads. */
table.task_table {
   border-spacing:1px;
   padding:0px;
   border:1px;
   border-style:outset;
   border-color:gray;
   width:100%;
}
table.task_table th {
   font-size:var(--base-font-size);
   border:1px inset gray;
}
table.task_table td {
   font-size:var(--base-font-size);
   color:var(--main-color);
   border:1px inset gray;
}
/* The class for presenting the name of the software, such as "Movement Controller". */
.product_heading {
   font-size:40.0pt;
   font-weight:bold;
   text-align:center;
   clear:both;
   text-shadow:1px 0px silver, 0px 1px dimgray,
               2px 1px silver, 1px 2px dimgray,
               3px 2px silver, 2px 3px dimgray,
               4px 3px silver, 3px 4px dimgray,
               5px 4px silver, 4px 5px dimgray,
               6px 5px silver;
}
/* The class for presenting the name of the page. */
.window_heading {
   text-align:center;
   font-weight:bold;
   font-size:16.0pt;
   clear:both;
   text-shadow:1px 1px #999;
}
.window_heading:first-letter {
   color:crimson;
   font-size:60pt;
   line-height:60px;
   font-family:Georgia; 
   vertical-align:middle;
   text-shadow:1px 0px #f0f, 0px 1px #b0b,
               2px 1px #f0f, 1px 2px #b0b,
               3px 2px #f0f, 2px 3px #b0b,
               4px 3px #f0f, 3px 4px #b0b,
               5px 4px #f0f;
}
.window_heading:after {
   content:'\2748';
   font-size:20pt;
   padding-left:10px;
   position:relative;
   top:1px;
   color:darkblue;
   text-shadow:1px 1px #04c;
}
.window_sub_heading {
   font-size:14.0pt;
   font-weight:bold;
   clear:both;
}

/* INNOVATIONS */
/* These is used to present to the HTTP operator the response from the Movement Controller software. */
table.confirmations {
   margin-left:auto;
   margin-right:auto;
   border-spacing:0px;
   border:20px;
   border-style:outset;
   border-color:blue;
}
table.confirmations th {
   font-size:var(--base-font-size);
   border:2px solid black;
}
table.confirmations td {
   font-size:var(--base-font-size);
   color:var(--response-color);
   background-color:var(--response-background-color);
   border:2px solid gray;
}
table.responses {
   border-spacing:0px;
   border:20px;
   border-style:outset;
   border-color:red;
}
table.responses th {
   font-size:30.0pt;
   border:2px solid black;
}
table.responses td {
   font-size:30.0pt;
   color:var(--response-color);
   background-color:var(--response-background-color);
   border:2px solid gray;
}
/* END INNOVATIONS */

/* REPORTS:  The following styles are used in presenting the reports. 
 *           The reports from the HTTP interface to my software are generated
 *           by running the operator interface, with special command-line
 *           parameters that instruct it to present the required report in HTML
 *           format, then to exit immediately. */
/* This is used when viewing reports.  When the report is generated, the HTML
 * file that contains it has a "body" element with class "report". */
.report {
   white-space:pre;
   margin-top:0px;
   margin-bottom:0px;
   line-height:0.7em;
   padding:0px;
   font-family:var(--typewriter-font-family);
}
/* END REPORTS */

/* MANUALS:  The following styles are used in presenting the manuals.
 *           The manuals are prepared by the word-processor (wp), and are
 *           delivered through the HTTP interface to my software. */
/* When the word-processor (wp) generates the HTML versions of the manuals, it
 * sets the class for the "body" element (and a "div" element that contains all
 * within the body) to "manual". */
.manual {
   background-color:var(--manual-background-color);
}
.manual h1, .manual h2, .manual h3, .manual h4, .manual h5, .manual h6 {
   color:var(--manual-heading-color);
}
a.manual {
   color:var(--manual-href-color);
}
div.manual h1, div.manual h2, div.manual h3, div.manual h4, div.manual h5, div.manual h6 {
   color:var(--manual-heading-color);
}
body.manual h1, body.manual h2, body.manual h3, body.manual h4, body.manual h5, body.manual h6 {
   color:var(--manual-heading-color);
}
/* Remove the heading section from manuals when viewing via a mobile device. */
div.manual pre {
   display:inline;
}
/* Limit the width of images in the manuals when viewing via a mobile device. */
div.manual img {
   width:500px;
}
/* Since h4, h5, and h6 all share the same font size, we differentiate between
 * them by placing something before them. */
div.manual h4:before {
   content:'> ';
   font-size:var(--manual-heading-font-size);
   padding-left:10px;
   position:relative;
   top:1px;
   color:var(--manual-heading-color);
}
div.manual h5:before {
   content:'\226b ';
   font-size:var(--manual-heading-font-size);
   padding-left:10px;
   position:relative;
   top:1px;
   color:var(--manual-heading-color);
}
div.manual h6:before {
   content:'\22d9 ';
   font-size:var(--manual-heading-font-size);
   padding-left:10px;
   position:relative;
   top:1px;
   color:var(--manual-heading-color);
}
/* Should we exceed the six levels of headings provided for, then we resort to
 * the "minor_heading" class for any other headings in the manuals. */
.minor_heading {
   color:var(--manual-minor-heading-color);
   font-weight:bold;
}
p.minor_heading:before {
   font-size:var(--manual-heading-font-size);
   content:'\22d9o ';
   color:var(--manual-heading-color);
}
/* These are used as the classes for the "div"s that contain the contents for
 * the corresponding headings in the manuals.  They indent the text
 * accordingly. */
.section01 {
   margin-left:10pt;
}
.section02 {
   margin-left:20pt;
}
.section03 {
   margin-left:30pt;
}
.section04 {
   margin-left:40pt;
}
.section05 {
   margin-left:50pt;
}
.section06 {
   margin-left:60pt;
}
.section07 {
   margin-left:70pt;
}
.section08 {
   margin-left:80pt;
}
.section09 {
   margin-left:90pt;
}
.section10 {
   margin-left:100pt;
}
/* The "expand" class is used within the manuals to allow the table of contents
 * to be expanded or collapsed.  These two classes are applied to the plus or
 * minus sign that precedes the section title, which, itself, is given the
 * class, "table_of_contents". */
p.expand {
   font-family:var(--typewriter-font-family);
   font-size:var(--manual-heading-font-size);
   font-weight:bold;
   color:var(--manual-plus-color);
}
p.collapse {
   font-family:var(--typewriter-font-family);
   font-size:var(--manual-heading-font-size);
   font-weight:bold;
   color:var(--manual-plus-color);
}
p.table_of_contents {
   font-size:var(--page-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
   display:inline;
}
/* In the manuals, where we present what is on a display, using characters, we
 * use this class for the table that contains the display representation. */
.screen_dump {
   border:2px inset dimgray;
   margin-left:0;
   margin-right:auto;
   font-family:var(--typewriter-font-family);
   font-size:8.0pt;
   color:var(--screen-dump-color);
   background-color:var(--screen-dump-background-color);
}
.literal {
   font-size:var(--base-font-size);
}
/* END MANUALS */

/* END HTTP INTERFACE */

/* This is used when we need to present text that has a fixed pitch.  The "tt"
 * tag has been deprecated, in favour of the "kbd" tag.  */
kbd, pre {
   font-family:var(--typewriter-font-family);
}
/* Much like "kbd" and "pre", this is used when we need to present text that has
 * a fixed pitch.  The "white-space:pre;" preserves the white space. */
.character {
   white-space:pre;
   font-family:var(--typewriter-font-family);
}
#focus_table:focus-visible {
   outline:none;
}

/* UNUSED, as far as I can see. */
.content {
   background-color:var(--website-footer-background-color);
   font-size:var(--foot-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
.foot-bar {
   background-color:var(--website-footer-background-color);
   font-size:var(--foot-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
.foot-copy {
   background-color:var(--website-footer-background-color);
   font-size:var(--foot-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
.foot-source {
   background-color:var(--website-footer-background-color);
   font-size:var(--foot-font-size);
   margin-top:1.0pt;
   margin-bottom:1.0pt;
}
.view-as-svg {
   font-style:italic;
}
.reload_button {
   background-color:beige;
   color:var(--main-color);
   font-weight:bold;
   padding:0px 5px 0px 5px;
   font-size:16px;
   border:2px inset white;
}
table.frame {
   border-spacing:0px;
   border-collapse:collapse;
   padding:0px;
   border:0px;
   margin:0px;
}
/* END UNUSED */

/* ADAPTATIONS FOR MOBILE DEVICES */
@media screen and (max-width:411.99px) {
   body {
      overflow-y:auto;
   }
   div.heading, table.heading {
      display:none;
   }
   p.mobile_portrait_heading {
      display:inline;
   }   
   table.mobile_heading {
      display:table;
   }
   div.non-mobile-only-block {
      display:none;
   }
   div.mobile-only-block {
      display:block;
   }
   div.large-mobile-only {
      display:none;
   }
   div.medium-mobile-only {
      display:none;
   }
   div.non-mobile-only {
      display:none;
   }
   div.mobile-only {
      display:flex;
   }
   p.large-mobile-only {
      display:none;
   }
   p.medium-mobile-only {
      display:none;
   }
   p.non-mobile-only {
      display:none;
   }
   p.mobile-only {
      display:block;
   }
   td.large-mobile-only {
      display:none;
   }
   td.medium-mobile-only {
      display:none;
   }
   td.non-mobile-only {
      display:none;
   }
   td.mobile-only {
      display:table-cell;
   }
   tr.large-mobile-only {
      display:none;
   }
   tr.medium-mobile-only {
      display:none;
   }
   tr.non-mobile-only {
      display:none;
   }
   tr.mobile-only {
      display:table-row;
   }
   form.large-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.mobile-only {
      display:table;
      pointer-events:auto;
   }
   table.large-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.mobile-only {
      display:table;
   }
   /* Remove the heading section from manuals when viewing via a mobile device. */
   div.manual > pre {
      display:none;
   }
   /* Limit the width of images in the manuals when viewing via a mobile device. */
   div.manual img {
      width:50vw;
   }
   .literal {
      font-size:4.0pt;
   }
   .section01 {
      margin-left:0pt;
   }
   .section02 {
      margin-left:0pt;
   }
   .section03 {
      margin-left:0pt;
   }
   .section04 {
      margin-left:0pt;
   }
   .section05 {
      margin-left:0pt;
   }
   .section06 {
      margin-left:0pt;
   }
   .section07 {
      margin-left:0pt;
   }
   .section08 {
      margin-left:0pt;
   }
   .section09 {
      margin-left:0pt;
   }
   .section10 {
      margin-left:0pt;
   }
   .largeImg {
      width:50vw;
   }
   /* The widths given for images of the screen dumps from the software for use on
    * the website.  These are overridden for mobile devices. */
   .screen {
      width:50vw;
   }
   .large_screen {
      width:90vw;
   }
   table.screen_dump {
      border:2px inset dimgray;
      margin-left:0;
      margin-right:auto;
      font-family:var(--typewriter-font-family);
      font-size:4.0pt;
      color:var(--screen-dump-color);
      background-color:var(--screen-dump-background-color);
   }
   ul {
      padding-inline-start:10px;
      color:var(--mobile-ul-color);
   }
   :root {
      --main-padding:5rem 1rem 5rem 1rem;
      --mobile-padding: 0;
      --mobile-opacity: 0;
      --mwp-main-table-padding: 0rem;
      --contact-width: 100px;
      --contact-message-width:200px;
      --contact-message-height:350px;
      --large-image-width:150px;
      --medium-image-width:75px;
      --base-font-size-unitless:14;
      --base-font-size:14px;
      --page-font-size:9pt;
      --foot-font-size:9pt;
   }
}
@media screen (min-width:412.00px) and (max-width:602px) {
   body {
      overflow-y:auto;
   }
   div.heading, table.heading {
      display:none;
   }
   p.mobile_portrait_heading {
      display:inline;
   }   
   table.mobile_heading {
      display:table;
   }
   div.non-mobile-only-block {
      display:none;
   }
   div.mobile-only-block {
      display:block;
   }
   div.large-mobile-only {
      display:none;
   }
   div.medium-mobile-only {
      display:none;
   }
   div.non-mobile-only {
      display:none;
   }
   div.mobile-only {
      display:flex;
   }
   p.large-mobile-only {
      display:none;
   }
   p.medium-mobile-only {
      display:none;
   }
   p.non-mobile-only {
      display:none;
   }
   p.mobile-only {
      display:block;
   }
   td.large-mobile-only {
      display:none;
   }
   td.medium-mobile-only {
      display:none;
   }
   td.non-mobile-only {
      display:none;
   }
   td.mobile-only {
      display:table-cell;
   }
   tr.large-mobile-only {
      display:none;
   }
   tr.medium-mobile-only {
      display:none;
   }
   tr.non-mobile-only {
      display:none;
   }
   tr.mobile-only {
      display:table-row;
   }
   form.large-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.mobile-only {
      display:table;
      pointer-events:auto;
   }
   table.large-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.mobile-only {
      display:table;
   }
   /* Remove the heading section from manuals when viewing via a mobile device. */
   div.manual > pre {
      display:none;
   }
   /* Limit the width of images in the manuals when viewing via a mobile device. */
   div.manual img {
      width:50vw;
   }
   .literal {
      font-size:4.0pt;
   }
   .section01 {
      margin-left:0pt;
   }
   .section02 {
      margin-left:0pt;
   }
   .section03 {
      margin-left:0pt;
   }
   .section04 {
      margin-left:0pt;
   }
   .section05 {
      margin-left:0pt;
   }
   .section06 {
      margin-left:0pt;
   }
   .section07 {
      margin-left:0pt;
   }
   .section08 {
      margin-left:0pt;
   }
   .section09 {
      margin-left:0pt;
   }
   .section10 {
      margin-left:0pt;
   }
   .largeImg {
      width:50vw;
   }
   /* The widths given for images of the screen dumps from the software for use on
    * the website.  These are overridden for mobile devices. */
   .screen {
      width:50vw;
   }
   .large_screen {
      width:90vw;
   }
   table.screen_dump {
      border:2px inset dimgray;
      margin-left:0;
      margin-right:auto;
      font-family:var(--typewriter-font-family);
      font-size:4.0pt;
      color:var(--screen-dump-color);
      background-color:var(--screen-dump-background-color);
   }
   ul {
      padding-inline-start:10px;
      color:var(--mobile-ul-color);
   }
   :root {
      --main-padding:5rem 1rem 5rem 1rem;
      --mobile-padding: 0;
      --mobile-opacity: 0;
      --mwp-main-table-padding: 0rem;
      --contact-width: 100px;
      --contact-message-width:200px;
      --contact-message-height:350px;
      --large-image-width:150px;
      --medium-image-width:75px;
      --base-font-size-unitless:16;
      --base-font-size:16px;
      --page-font-size:10pt;
      --foot-font-size:10pt;
   }
}
@media screen and (min-width:602.01px) and (max-width:834px) {
   body {
      overflow-y:auto;
   }
   div.heading, table.heading {
      display:none;
   }
   table.mobile_heading {
      display:table;
   }
   p.mobile_portrait_heading {
      display:none;
   }
   div.non-mobile-only-block {
      display:none;
   }
   div.medium-mobile-only-block {
      display:block;
   }
   div.large-mobile-only {
      display:none;
   }
   div.medium-mobile-only {
      display:flex;
   }
   div.non-mobile-only {
      display:none;
   }
   div.mobile-only {
      display:none;
   }
   p.large-mobile-only {
      display:none;
   }
   p.medium-mobile-only {
      display:block;
   }
   p.non-mobile-only {
      display:none;
   }
   p.mobile-only {
      display:none;
   }
   td.large-mobile-only {
      display:none;
   }
   td.medium-mobile-only {
      display:table-cell;
   }
   td.non-mobile-only {
      display:none;
   }
   td.mobile-only {
      display:none;
   }
   tr.large-mobile-only {
      display:none;
   }
   tr.medium-mobile-only {
      display:table-row;
   }
   tr.non-mobile-only {
      display:none;
   }
   tr.mobile-only {
      display:none;
   }
   form.large-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.medium-mobile-only {
      display:table;
      pointer-events:auto;
   }
   form.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.mobile-only {
      display:none;
      pointer-events:none;
   }
   table.large-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.medium-mobile-only {
      display:table;
      pointer-events:auto;
   }
   table.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.mobile-only {
      display:none;
      pointer-events:none;
   }
   /* Remove the heading section from manuals when viewing via a mobile device. */
   div.manual > pre {
      display:none;
   }
   /* Limit the width of images in the manuals when viewing via a mobile device. */
   div.manual img {
      width:50vw;
   }
   .literal {
      font-size:6.0pt;
   }
   .section01 {
      margin-left:0pt;
   }
   .section02 {
      margin-left:0pt;
   }
   .section03 {
      margin-left:0pt;
   }
   .section04 {
      margin-left:0pt;
   }
   .section05 {
      margin-left:0pt;
   }
   .section06 {
      margin-left:0pt;
   }
   .section07 {
      margin-left:0pt;
   }
   .section08 {
      margin-left:0pt;
   }
   .section09 {
      margin-left:0pt;
   }
   .section10 {
      margin-left:0pt;
   }
   .largeImg {
      width:50vw;
   }
   /* The widths given for images of the screen dumps from the software for use on
    * the website.  These are overridden for mobile devices. */
   .screen {
      width:50vw;
   }
   .large_screen {
      width:90vw;
   }
   table.screen_dump {
      border:2px inset dimgray;
      margin-left:0;
      margin-right:auto;
      font-family:var(--typewriter-font-family);
      font-size:6.0pt;
      color:var(--screen-dump-color);
      background-color:var(--screen-dump-background-color);
   }
   ul {
      padding-inline-start:10px;
      color:var(--mobile-ul-color);
   }
   :root {
      --main-padding:5rem 1rem 5rem 1rem;
      --mobile-padding: 0;
      --mobile-opacity: 0;
      --mwp-main-table-padding: 0rem;
      --contact-width: 100px;
      --contact-message-width:350px;
      --contact-message-height:350px;
      --large-image-width:250px;
      --medium-image-width:125px;
      --base-font-size-unitless:16;
      --base-font-size:16px;
      --page-font-size:10pt;
      --foot-font-size:10pt;
   }
}
@media screen and (min-width:832.01px) and (max-width:980px) {
   div.non-mobile-only-block {
      display:none;
   }
   div.large-mobile-only-block {
      display:block;
   }
   div.medium-mobile-only-block {
      display:none;
   }
   div.mobile-only-block {
      display:none;
   }
   div.non-mobile-only {
      display:none;
   }
   div.large-mobile-only {
      display:flex;
   }
   div.medium-mobile-only {
      display:none;
   }
   div.mobile-only {
      display:none;
   }
   p.large-mobile-only {
      display:block;
   }
   p.medium-mobile-only {
      display:none;
   }
   p.non-mobile-only {
      display:none;
   }
   p.mobile-only {
      display:none;
   }
   td.large-mobile-only {
      display:table-cell;
   }
   td.medium-mobile-only {
      display:none;
   }
   td.non-mobile-only {
      display:none;
   }
   td.mobile-only {
      display:none;
   }
   tr.large-mobile-only {
      display:table-row;
   }
   tr.medium-mobile-only {
      display:none;
   }
   tr.non-mobile-only {
      display:none;
   }
   tr.mobile-only {
      display:none;
   }
   form.large-mobile-only {
      display:table;
      pointer-events:auto;
   }
   form.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   form.mobile-only {
      display:none;
      pointer-events:none;
   }
   table.large-mobile-only {
      display:table;
      pointer-events:auto;
   }
   table.medium-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.non-mobile-only {
      display:none;
      pointer-events:none;
   }
   table.mobile-only {
      display:none;
      pointer-events:none;
   }
   :root {
      --main-padding:5rem 1rem 5rem 1rem;
      --mobile-padding: 0;
      --mobile-opacity: 0;
      --mwp-main-table-padding: 0rem;
      --contact-width: 100px;
      --contact-message-width:350px;
      --contact-message-height:350px;
      --large-image-width:250px;
      --medium-image-width:125px;
      --base-font-size-unitless:16;
      --base-font-size:16px;
      --page-font-size:10pt;
      --foot-font-size:10pt;
   }
}
@media screen and (min-width:980.01px) and (max-width:1224px) {
   :root {
      --base-font-size-unitless:16;
      --base-font-size:16px;
      --mobile-padding: var(--mwp-spacing-20);
   }
}