div#imagegridgallery {
  width: 180px;
  float: left;
}

div#imagegridgallery div.imagegrid img {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-width: 0px;
}

div#imagegridgallery div.imagegrid div.imagegridnext img {
  width: 25px;
  height: 25px;
  float: right;
}

div#imagegridgallery div.imagegrid div.imagegridback img {
  width: 25px;
  height: 25px;
  float: left;
}

div#galleryimagecontainer {
  height: 475px;
}

div#galleryimagecontainer img#placeholder {
  max-height: 475px; /* = height of div#galleryimagecontainer */
}

/* NEW STUFF */

div#slideshow {
position: relative;
/*border: 1px solid black;*/
/*z-index: inherit*//*-1*//*0*//*;*/
width: 100%;
height: 40em;
}

#slideshow #slideshowimg {
/*display: block;*/
position: relative;
max-width: 100%;
max-height: 28em;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border: 2px solid white;
}

#slideshow #slideshowimgcontainer {
	position: relative;
	top: -8.1em;
	/*margin-left: 2em;
	margin-right: 2em;*/
	margin-left: 2em;
	margin-right: 2em;
	line-height: 28em;
	height: 28em;
	text-align: center;
}


/* filmstrip */

#slideshow #filmstrip {
position: relative;
top: 30em;
margin: 0px;
padding: 0px;
white-space: nowrap;
overflow-x: scroll;
border: 0.065em solid white;
height: 8.1em;
}

#slideshow #filmstrip ul {
/*line-height: 8em;  to vertically center thumbnails */
}

#slideshow #filmstrip li {
/*border: 1px solid pink;*/
display: inline-block;
vertical-align: middle;
margin: 0px 0.5em 0px 0.5em;
padding: 0px;
}

#slideshow #filmstrip a {
border: 0.13em solid purple;
display: inline-block;
}

#slideshow #filmstrip a#currentslidelink {
border: 0.13em solid white;
}

/* controls */

#slideshow>#play, #slideshow #previous, #slideshow #next {
position: absolute;

}

#slideshow #play {
bottom: 10em;
left: 50%;
margin-left: -50px;
width: 100px;
text-align: center;
/*left: 0px;
right: 0px;*/
background-color: red;
}

#slideshow #previous, #slideshow #next {
line-height: 28em;
background: rgb(28,28,28); /* hi make it match how rgba background looks with page background*/
background: rgba(30,30,30,0.7);
}

#slideshow #next {
right: 0px;
}

@media (max-aspect-ratio: 1/1) { /* same @media as in fineart_stylesheet.css */
	#slideshow #slideshowimgcontainer {
      line-height: 20em;
      height: 20em;
	}

    #slideshow #previous, #slideshow #next {
      line-height: 20em;
    }
}