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

   h1.page-title { 
     text-align: center;
     color: peru; 
     /* brown colours: 
        siena,maroon,peru,goldenrod,chocolate,
        burlywood */
   }

   h1 { color: lightslategray; }
   h2 { 
     text-transform: capitalize; 
     color: lightslategray;
   }
   h3 { 
     text-transform: capitalize; 
     color: lightslategray; 
   }
   /* darkkhaki khaki */
   
   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;
   }

   /* an abbreviation like html, ast, xml */ 
   abbr.tek-acronym {
    /* border-bottom: 1px dotted #000; */ 
     border-bottom: 1px dashed #000;
   }

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

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

   /* 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;
    padding: 0.5em;
  }

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

  /* 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";
  }