html
 {
   border: none;
   padding: 0;
   margin: 0;
   height: 100%;
   background-color: #e0e0ff;
 }
body
 { background-color: #f0f0ff;
   color: black;
   margin: 0.5em;
   padding: 0.5em;
   border: 1px solid blue;
 }

body.patternViewPage
 { margin: 0;
   padding: 0;
   border: none;
 }

body p, body li
     { max-width: 30em;
     }

li { margin-top: 0.3em;
   }

pre, table.code
 { padding-left: 1.3487%;
   padding-right: 0;
   background-color: transparent;
   background-image: url("pictures/holes.png");
   background-repeat: repeat-y;
   background-position: top left;
   background-size: 1.3487%;
   margin-left: 2em;
   margin-right: 2em;
 }
pre code
 { display: block;
 }
pre code, tr.code
 {
   margin-bottom: 0;
   background-image: url("pictures/lp.png");
   background-position: top right;
   background-repeat: repeat-y;
   background-size: 100%;
   padding-bottom: 2em;
   padding-top: 1em;
   padding-left: 0.5em;
   font-family: courier, monospace;
   font-size: 12px;
   line-height: 12px;
 }

/* for narrow displays */
@media (max-device-width: 600px)
{
    button, select, input
    { font-size: large;
      min-height: 10mm;
      min-width: 15mm;
    }
    textarea
    { max-width: 98%;
    }
}