body { 
       margin-left:5%; margin-right:5%; 
       padding:0; 

       /* need a darker grey color:gray; */
     }
     a { 
       text-decoration:none; 
       /* the wren.io link color */
       color: #3399cc;
       /* color:blue; */
     }
     a:hover { 
       color:darkblue; 
       border-bottom: 1px dashed blue; 
       /* border-top: 1px dashed blue; */
     }

     p { 
       margin-left:2em; margin-right:2em; 
       padding:0; 
     }

     /* used or 1st 2nd etc */

     sup.ordinal {
       text-decoration: underline;  
       color: darkgray;
       font-style: italic;
       text-transform: uppercase; 
     }

     h1.page-title { 
       text-align: center;
       color: peru; 
       /* brown colours: 
          siena,maroon,peru,goldenrod,chocolate,
          burlywood */
          
     }
     /* tan: a light brown */
     h1 { color: lightslategray; }
     /* make these headings capital case */
     h2 { 
       text-transform: capitalize; 
       color: lightslategray;
     }
     h3 { 
       text-transform: capitalize; 
       color: lightslategray; 
     }
     
     h3.blog-index-title { color: chocolate; }

     /* the date that is at the top of each blog post */
     h3.blog-post-date { color: darkkhaki; }
     
     div.footer { 
       text-align: center;
       color: goldenrod; 
       width: 100%;
       /* brown colours: 
          siena,maroon,peru,goldenrod,chocolate,
          burlywood */
     }

     /* a list of blog posts */
     dl.blog-index {
       margin-left: 2em;
     }

     /* a list of documents in a folder */
     dl.doc-index {
       margin-left: 2em;
     }
 
     /* a list within a list */
     ul.sublist {
       list-style-type: none;
     }
 
     /* an abbreviation like html, ast, xml */ 
     abbr.tek-acronym {
       border-bottom: 1px dashed purple; 
       text-decoration: none;
       text-transform: uppercase;
       /* font-style: italic; */
       font-size: 0.8em;
       *color: purple;
     }

     /* a one line description of a document  */
     em.doc-description {
       margin-left: 2em;
       color: lightslategray;
     }

     /* this is for pretty printing nom code. But I need lots 
        of span tags in the code. I copied this from the wren.io
        inspect element code snippet. <code> wrapped in <pre>
        in the html there is lots of 
          <span class="punctuation">.</span> etc
          and in the css .punctuation { color: #999; }

        Normal text is black/grey

        the pre has background color #f5f2f0 which is an offwhite
        here are the colours: 
          punctuation: #999 (grey)
          function eg 'print': #DD4A68 (red)
          string: #690 (green)
          keyword: #07A (aqua)
          operator eg '=' : #9a6e3a (brown)
        */

     /* start of pretty print css */

     pre.nom-code { 
       background-color: #f5f2f0;
       border-radius: 10px;
     }

     code.language-nom {
       font-family: Consolas, Monaco, monospace;
       text-align: left;
       white-space: pre;
       word-spacing: normal;
       word-break: normal;
       word-wrap: normal;
       line-height: 1.5;
     }

     span.nom-command { color: #9a6e3a;  /* brown */ }
     /* displaying unknown commands */
     span.nom-unknown { color: orange; }
     span.nom-error { color: red; } 
     span.nom-word { color: #09C; }
     span.nom-keyword { color: #07A; }
     span.nom-string { color: #690; }
     span.nom-class { color: #2A0; }
     span.nom-punct { color: #AAA; }
     span.nom-comment { color: gray; }
     
     /* end of pretty print css */

     /* displaying commands */
     code.nom-command {
       font-family: Consolas, Monaco, monospace;
       font-size: 0.9em;
     }

     /* This is used for file names as well */
     code {
       font-family: Consolas, Monaco, monospace;
       font-size: 0.9em;
     }

     /* used for parse tokens in documents (text ending in *) */
     code.nom-token { 
       color: gray;
       font-size: 0.9em;
       font-style: italic;
     }

     /* a single line of code */
     pre.codeline { 
       margin-left:2em; 
       padding:0; 
     }

     figcaption.code-caption { 
       color: white;
       /* background-color: lightslategray; */
       background-color: #DD8811; 
       border-radius: 4px;
       padding-left: 1em; padding-bottom: 4px; padding-top: 4px;
       font-weight: normal; 
       width: 90% 
       /* border-bottom: 1px solid lightgrey; */
     }

     /* a centred element or image */
     .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
     }

     /* an element which floats to the left */
     .float-left {
       float: left; 
       /*width: 10%; */
       text-align: center;
       font-style: italic;
       font-size: smaller;
       text-indent: 0;
       border-none;
       /* border: thin silver solid; */
       margin: 0.5em;
       padding: 0.5em;
     }

     /* an element which floats to the right */
    .float-right {
      float: right; 
      /*width: 10%; */
      text-align: center;
      font-style: italic;
      font-size: smaller;
      text-indent: 0;
      border: none;
      /* border: thin silver solid; */
      margin: 0.5em;
      margin-right: 3em;
      padding: 0.5em;
    }

    img.image-right {
      width: 100px;
    }
    img.image-left {
      width: 100px;
    }

    .chess-piece {
      /* background-color:#fff; */
      border:1px solid black;    
      border-radius:50%;
      font-size: 1.5em;
      padding: 5px;
    }

    /* this is for the big curly quotes before a <blockquote> quotation 
       html is <blockquote>text<cite>person</cite></blockquote> */
    blockquote.quotation {
      font-family: Georgia, serif;
      font-size: 18px;
      font-style: italic;
      width: 500px;
      margin: 0.25em 0;
      padding: 0.35em 40px;
      line-height: 1.45;
      position: relative;
      color: #383838;
    }

    blockquote.quotation:before {
      display: block;
      padding-left: 10px;
      content: "\201C";
      font-size: 80px;
      position: absolute;
      left: -20px;
      top: -20px;
      color: #7a7a7a;
    }

    blockquote.quotation cite {
      color: #999999;
      font-size: 14px;
      display: block;
      margin-top: 5px;
    }

    blockquote.quotation cite:before {
      content: "\2014 \2009";
    }