@charset "utf-8";

  body {background: white; color: black;
        background-image: url(Steven.Pemberton.jpg);
        background-repeat: no-repeat; background-position: top left; 
        background-size: 10em 10em;
        font-family: sans-serif; padding: 0; margin: 0; font-size: 100%}
  h1, h2, h3, h4, h5, h6 {font-family: sans-serif}
  body > h1, body > h2, body > h3, body > h4, body > h5, body > h6 {clear: right} 
  h1 { font-size: 200%;
      margin-top: 5em; /* This is related to the height of the bg image */
      text-align: right; 
     /* writing-mode: tb-rl; direction: rtl; */
      background-color: black; color: white;
      padding: 7px 1em 0.4em 0;
     }
  h1 a {color: white}
  h2 { background-color: black; color: white; text-align: right;
        font-size: 150%; padding-right: 20%
      }
  h3 {  background-color: transparent; color: black; text-align: right;
       	border-bottom-width: 1pt;
	border-bottom-style: solid;
	border-color: black;
	padding: 2pt 20% 2pt 2pt;
        margin-left: 2%; font-size: 100%;
     }

  table {margin-left: 1%}

  p {margin-left: 4%; margin-right: 4%; margin-top: 1em; margin-bottom: 0; 
     width: 90%; font-size: 100%}
  p.cite {text-align: right; margin-right: 4%;}
  p.sub {margin-top: 0; text-indent: 2em; } 

  a {text-decoration: none}
  a.talk, span.talk, .project { font-weight: bold }
  .hidden { display: none}
  a:hover {color: red}
  h1 a:hover {color: yellow}

  .review {font-style: italic; font-size: inherit; 
           display: inline-block; outline: thin gray solid}
  .review:before {content: "“"; color: blue; }
  .review:after {content: "”"; color: blue; }

  ul {margin-left: 8%; margin-right: 8%}
  img {float: right; border: none}

  .contents {
    font-size: 80%; margin-left: 2%; width: 30%; 
    border: thin blue solid; padding: 0 0 1em 0;
    text-align: left; float: left; 
  }

  .contents h2 { margin: 0 0 0.5em 0; font-size: 120%; 
                 color: white; background-color: blue}
  .contents p { margin: 0 0 0 2em; text-indent: -1em }
  /* .contents p {margin: 0 1em 0 5em; padding: 0 0 0 0; text-indent: -4em; width: 90%} */

  .bio {width: 30%; margin-left: 2%; margin-right: 1em; padding-bottom: 1em; float: right; border: thin black solid}
  .bio h2 { margin: 0 0 0.5em 0; font-size: 120%; 
                 color: white; background-color: blue}

  .contact {background-color: #ddf; width: 30%; font-size: 80%;
       border: thin black solid; float: left; margin-left: 2%; 
       padding: 0; margin-top: 0em; margin-bottom: 1em;}
  .contact p { margin: 0 1em 0.7ex 1em }
  .contact h2 {margin: 0 0 0.5em 0; font-size: 150%; background-color: blue}
  .contact h3 {font-size: 120%; border: none; text-align: right; margin: 0;
        border-bottom-width: thin;
        border-bottom-style: solid;
	       border-color: black;

   }

  .news {width: 65%; border: thin black solid; margin-top: 1em; margin-left: 1em; clear: left; padding-bottom: 1em  }
  .news h2 {margin-top: 0}

  blockquote { margin-left: 1em; font-size: 100%;}
  blockquote p {margin-left: 0em; }
  div.quotes {
             border-left: 1em solid #ee6
  }
  body > div.quotes {margin-left: 4%}