/*  '.graphic img' OK if you have a single image otherwise $@#^&!
    AKA: floated elements unexpectedly falling down to the left
    '.graphic img:first-of-type' > Does not solve problem
    For the time being all images get unique class names
*/  
.before  
  { /* img size: 650 x 283 */
    float: left;
    margin: 15px 20px 20px 15px;
  }
aside
  {
  	  width: 275px;  /*  960 - (650 + 15 +20 = 275)  */
  	  float:left;
  }
.graphic h1
  {
    font-size: 1.75em;
    margin: 0.6em 0 0.3em 1.35em;
/*  When not in 'aside' container
    margin: 0.5em 0;  Also determines vertical positioning of img
    padding: 0.5em 0;  Four '<li>'s fall into <h1> row
*/
  }
.graphic p
  {
/*  clear: left;  Why? > .graphic h1 > outline: 1px solid yellow;
    ? Did not remove when float removed and 'aside added ?
*/
    margin: 0 15px 0 0; 
  }
.graphic h2
  {
    font-size: 1.35em;
    margin: 0.75em 0.4em 0.6em 1em;  /*  Set vertical position/spacing  */
  }
.graphic ul
  {
    list-style-type: none;  /*  Remove bullets  */
  }
.graphic ul li
  { /*  In place of too many paragraphs  */
    padding-bottom: 1.35em; 
  }
.camera
 {
    clear: both;
    float: left;
    margin: 0 0 0 5px;
 }
.after
  {
    margin: 10px 0 0  7px;    
  }
figcaption
  {
    text-align: center;
    font-size: 0.925em;
    color: #32232e;
    margin: 0.25em 0.5em 0 0.5em;
  }
/*  --------  */
.text
  {
    clear: both ; /*  Else its text will float up into '.graphic'  */
    margin-top: 2em;
  }
.text h1
  {
    text-align: center;
    font-size: 1.35em;
  }
.text p
  {
    margin: 1em 2em 0;
    line-height: 1.5em;  /*  More space between lines of text to improve readability  */
  }
.text pre
  {
    font-family: 'Courier New', 'Lucida Sans Typewriter', 'Lucida Console',monospace;
    font-size: 0.925em;
    margin: 1em 0 0 5em;
  }