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

       /* need a darker grey color:gray; */
     }
     a { 
       text-decoration:none; color:blue;
     }
     a:hover { 
       color:darkblue; 
       border-top: 1px dashed blue; 
       border-bottom: 1px dashed blue; 
     }

     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 */
          
     }
     /* 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;
     }
 
     /* an abbreviation like html, ast, xml */ 
     abbr.tek-acronym {
       border-bottom: 1px dashed lightslategray; 
       text-decoration: none;
       font-style: italic; 
       color: darkslategray;
     }

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

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

     figcaption.code-caption { 
       color: white;
       background-color: lightslategray; 
       #background-color: tan; 
       # background-color: sienna; 
       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;
      margin-right: 3em;
      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";
    }