<!--
/*-----------------------------------------------------------------------
  Cascading Style Sheet for "El Refugio" website Slideshows. 
  (C) Ian McInnes, 2020                                                 
------------------------------------------------------------------------*/

h1 { text-align: center; }

nav.sidebar
{
  position:fixed;
  width:140px;
  left:6px;
  margin:10px;
  top:80px;
}

main
{
  position:absolute;
  margin:10px;
  width:auto;
  left:140px;
  top:0px;
}

/* table of slides */
table.slideshow
{
  border:2px solid Tan;
  border-radius:10px;
  margin:0 auto;
  width:100%;
  padding-bottom:10px;
  margin-bottom:1em;
  margin-bottom:1em;
}
table.slideshow tr { height:165px; }
table.slideshow td { padding:10px; }
table.slideshow tr.blank { border-bottom:0px; }
table.slideshow td.image { width:180px; left:10px; }
table.slideshow td.text { padding-right:5px; }

/* 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.slideshow td.image [id]
{
  left:5px;
  top:5px;
  position:relative;
  float:left;
  width:160px;
  height:120px;
  background-repeat:no-repeat;
}
table.slideshow td.image [id]:hover { outline:5px solid Red; }
table.slideshow td.image [id]:active
{
  width:800px;
  height:600px;
  left:5px;
  top:5px;
  outline:2px dotted White;
  position:fixed;
  z-index:1000;
}

a.prev { background-image:url('Icons/ArrowL.png'); float:left; }
a.next { background-image:url('Icons/ArrowR.png'); float:right; }
a.prev, a.next
{
  display:block;
  width:60px;
  height:46px;
  margin-top:1em;
}
a.prev:hover, a.next:hover { filter:brightness(135%); }

/* Icons to display high-resolution image in separate window */
a.zoom
{
  background-image:url('Icons/Zoom.png');
  float:right;
  display:block;
  width:32px;
  height:32px;
  margin:8px;
}
a.zoom:hover { filter:brightness(135%); }
-->