@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%;
       }
  .body { max-width: 150ex; margin: auto; }
  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: 0; 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}
  .talk, .project { font-weight: bold }
  .talk a.talk {font-style: italic}
  .hidden { display: none}
  a:hover {color: red}
  h1 a:hover {color: yellow}

  .review {font-style: italic; font-size: 100%;
           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}

  .section {max-width: 120ex; border: thin black solid;
	    margin: auto; margin-top: 1em; clear: left; padding-bottom: 1em }
  .section h2 {margin-top: 0}

  .contents {
      width: 50%; margin: auto; font-size: 100%;
      border: thin blue solid; padding: 0 0 1em 0;
      text-align: left;
  }

  .contents h2 { margin: 0 0 0.5em 0; text-align: center; padding: 0;
                 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%} */

  .news {}
  
  .bio {margin: auto; margin-top: 1em; padding-bottom: 1em; border: thin black solid}
  .bio h2 { margin: 0 0 0.5em 0; font-size: 120%; 
            color: white; background-color: blue}
  .wrong {color: green; text-decoration: line-through}

  .contact {background-color: #ddf; width: 35%; font-size: 100%;
	    border: thin black solid; margin: auto; margin-top: 1em; margin-bottom: 1em;
	    padding: 0; }
  .contact p { margin: 0 1em 0.7ex 1em }
  .contact h2 {margin: auto; margin-bottom: 0.5em; 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;

   }
   .contact .clean {background-color: green; color: white}

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