/*-----------------------------------------------------------------------
  Cascading Style Sheet for "Personal Pension Fiasco" Pages containing
  details of events - i.e. DetailsSW and DetailsTPO.

  (C) Ian C McInnes, 2020                                                 
------------------------------------------------------------------------*/

/* set the width of the audio controls to the width of the content area*/
audio { margin:0 auto; width:100%; }

/* table of details for a given day in Details SW/TPO */
table.eventdetails
{
  border:2px solid MidnightBlue;
  background-color:MintCream;
  border-radius:10px;
  margin:0 auto;
  width:100%;
  padding:10px;
  margin-bottom:1em;
}
table.eventdetails caption
{
  text-align:center;
  font:20px Verdana, Sans-serif;
  color:Blue;
}
table.eventdetails tr { border:0px; height:158px; }
table.eventdetails tr.short { border:0px; height:0px; }
table.eventdetails tr.appendix { height:0px; border-bottom:groove 1px; }
table.eventdetails tr.appendix-noborder { height:0px; border-bottom:0px; }
table.eventdetails tr.double { border:0px; height:308px; }
table.eventdetails tr.treble { border:0px; height:458px; }
table.eventdetails td.image { width:170px; left:10px; }

/* common specifications for normal, hover, and active images for all slideshow tables */
/* - we target all elements within table image cells having an id attribute */
table.eventdetails td.image [id]
{
  left:5px;
  margin-top:5px;
  position:relative;
  float:left;
  width:150px;
  height:150px;
  background-repeat: no-repeat;
}
table.eventdetails td.image [id]:hover { outline:5px solid Blue; }
/* The height of each popup image is always the full viewport height; for landscape images, */
/* this enables mouse off to be recognised underneath the maximised image. */
table.eventdetails td.image [id]:active
{
  height:100vh;
  left:5px;
  top:0px;
  background-size:contain;
  outline:2px solid Black;
  position:fixed;
  z-index:1000;
}
-->