/*validated 2010 02 07*/
body { background:#FBEEB5 }
.row { float:left; clear:left; display:block; width:98%; margin-bottom:1px; border-bottom:3px dotted gray;  }
  .photogroup { float: left;  margin:0px 2px 0px 2px; } 
  /* 
  the following heights keep the photos in regular rows when there are notes underneath. 
  otherwise the next photo is sent to the next row under the next photo after the annoted one, 
  leaving empty spaces which look really awkward.
  */
  .photogroup0 { float: left;  margin:0px 5px 0px 5px; height:180px; padding:0px;}
  .photogroup1 { float: left;  margin:0px 5px 0px 5px; height:185px; padding:0px;}
  .photogroup2 { float: left;  margin:0px 5px 0px 5px; height:205px; padding:0px;}
  .photogroup3 { float: left;  margin:0px 5px 0px 5px; height:225px; padding:0px;}
  .photogroup4 { float: left;  margin:0px 5px 0px 5px; height:245px; padding:0px;} 
  .photogroup5 { float: left;  margin:0px 5px 0px 5px; height:265px; padding:0px;} 
  .photogroup6 { float: left;  margin:0px 5px 0px 5px; height:285px; padding:0px;} 
  .photogroup7 { float: left;  margin:0px 5px 0px 5px; height:305px; padding:0px;} 
  
    .photo { display:block; float:none;  text-align:center;  margin:0px; padding:0px; border:0px; }
    /*.glyphgroup { display:block; float:left; clear: left; margin:0px; width:115px; }*/
    .glyphgroup { display:block; float:left; clear: left; margin:0px; width:100px; }
       .glyph { float: left; margin:0px; text-align:left; padding:0px; }
    .caption { clear: left; text-align:center; margin:0px; font-size:10pt; }
.rowtext { float: left; clear: left; margin:0px; width:95%; font-size:10pt; }
hr { display:block; float:left; clear:left; width:95%; height:2px; margin-top:0px;border:2px dotted gray; }
.pagetext { float: left; clear: left; width:95%; font-size:10pt; }
.footer { float:left; clear:left; }