body {
    margin-left: 15px;
    background-color: #000081;
    color: #ffffff;
}

/* LINK COLORS */
/* See here for how to indicate color e.g. #nnnnnn  https://www.w3schools.com/cssref/css_colors_legal.php
 * a:visited { color: #FFFACD;  }
*/
/* See here for color names https://www.w3schools.com/colors/colors_names.asp */
  a:link { color: #ADFF2F;  }
  a:visited { color: #BDB76B;  }
  a:hover { color: hotpink;  }
  a:active { color: hotpink; }


p {
    background: transparent none repeat scroll 0% 50%;
    line-height: 115%;
    margin-bottom: 5px;
}

img.floatright {
  display: block;
  margin-left: auto;
}

/* "Flexbox" CSS container for Photos
 * Displays multiple photos in a row
 * See https://www.w3schools.com/css/css3_flexbox.asp
 * I was using photos with width 205 / proportional height.
 * SAMPLE DIV
 *   <div class="PhotoRow">
 *   <div><a href XXX><img style="border: 0px solid ; width: 205px; height: 115px;" src="EUPresidencyDiaryPhotos/PHOTO_1.jpg" align="top"></a><br>
 *   Festival de Colombia<br>(<span style="font-style: italic;">click to open in new tab)</span>
 *   </div>
 *   <div><a href XXX><img style="border: 0px solid ; width: 205px; height: 115px;" src="EUPresidencyDiaryPhotos/PHOTO_2.jpg" align="top"></a><br>
 *   Festival de Colombia<br>(<span style="font-style: italic;">click to open in new tab)</span>
 *   </div>
 *   </div>
 */
.PhotoRow {
  display: flex;
  margin-left: 20px;
}
.PhotoRow div {
  margin-right: 15px;
  padding: 1px;
}