/* Gallery */
#gallery
{
	margin-top: 1em;
	text-align: center;
}

#gallery figure
{
	position: relative;
	display: inline-block;
	color: white;
	text-align: center;
	vertical-align: top;
	background-color: gray;
}

#gallery figure img { height: 100%; }

#gallery figcaption
{
	position: absolute;
	top: .4em;
	left: .1em;
	width: 95%;
	padding-right: 2%;
	padding-left: 2%;
	text-align: left;
	text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; /* adds an outline to text */
	background-color: rgba(255,255,255,.3);
	box-shadow:  0 0 3px 3px rgba(255,255,255,.3);
	border-radius: 4px;
}

#thumbnails
{
	display: block;
	overflow-x: auto;
	overflow-y: hidden; /* fixes an issue with firefox */
	margin-bottom: 1em;
	white-space: nowrap;
}

#thumbnails > div
{
	display: inline-block;
	margin: 0 60px;
	padding: 5px 10px 6px 10px;
}

#thumbnails > div::before
{
	content: "";
	display: block;
	position: relative;
	top: 45px;
	right: 15px;
	height: 10px;
	width: calc(100% + 30px);
	background-color: #531;
	border-radius: 5px;
	opacity: .75;
}

#thumbnails .group { position: relative; }

#thumbnails .group span
{
	position: absolute;
	top: -1em;
	text-shadow: 1px 1px 0 #FEC, -1px 1px 0 #FEC;
	font-size: 0.8em;
	font-weight: bold;
	z-index: 2;
	transform: rotate(-5deg);
}

#thumbnails figure
{
	height: 80px;
	margin: 0 2px;
	white-space: normal;
	border-radius: 5px;
	box-shadow: 0 7px 5px -5px black, 1px 1px 0 0.5px gray;
	opacity: .9;
	transition: .2s;
}

.hover #thumbnails figure:hover, .touch #thumbnails figure:active
{
	top: 2px;
	cursor: pointer;
	box-shadow: 0 2px 5px -1px black, 1px 1px 0 0.5px gray;
	opacity: 1;
}

#thumbnails figure img { border-radius: 4px; }
#thumbnails figcaption { font-size: .5em; }

#thumbnails .selected
{
	opacity: 1;
	transform: scale(0.8) rotate(7deg);
}

#photo
{
	position: relative;
	display: block;
}

#photo figure
{
	display: none;
	max-height: 300px;
	height: calc((100vw - 40px) * .66);
	margin: .1em 0 .4em 0;
	border-radius: 7px;
	box-shadow: 0 8px 5px -5px black, 1px 1px 0 0.5px gray;
}

#photo .selected { display: inline-block; }


/* story pane, only shows on wide screens */
@media screen and (min-width: 966px)
{
	#photo p {
		display: inline-block;
		position: absolute;
		background-color: #DDD;
		background-image: url("assets/leather.jpg");
		border-style: solid;
		border-color: gray;
		border-width: 2px 1px 1px 2px;
		border-radius: 6px;
		box-shadow: 0 0 4px 0 gray inset;
		top: -.5em;
		color: black;
		text-align: left;
		padding: .5em;
	}
	@media screen and (max-width:1500px)
	{
		#photo p {
		right: calc( 50% - 50vw + .5em );
			width: calc( 50vw - 230px - 1.5em );
		}
	}
	@media screen and (min-width:1501px)
	{
		#photo p
		{
			right: calc( 50% - 750px + .5em );
			width: calc( 750px - 230px - 1.5em );
		}
	}
}
@media screen and (max-width: 965px)
{
	#photo p { display: none;}
}


#filter
{
	display: block;
	position: relative;
	width: 8.7em;
	margin: 0 auto 1em auto;
	padding: .2em .7em;
	appearance: none;
	-webkit-appearance: none;
	background-color: #FEC;
	background-image: url("assets/menu-icon.png"), url("assets/paper.jpg");
	background-size: .8em, auto;
	background-repeat: no-repeat, repeat;
	background-position: calc(100% - .5em) center;
	border: none;
	border-radius: 4px;
	box-shadow: 0 8px 5px -5px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
	font-size: 1em;
	text-align: center;
}

.touch #filter { margin: 1em auto 2em auto; }
.hover #filter { margin: 0 auto 1em auto; }

#filter:focus { outline: none; }

.hover #filter:hover, .touch #filter:active
{
	top: 2px;
	box-shadow: 0 6px 5px -5px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
	text-shadow: -1px -1px 2px #DCB, 1px 1px 2px #DCB, 1px -1px 1px #DCB, -1px 1px 1px #DCB;
	cursor: context-menu;
	transition: all .1s;
}

/* button formatting */
#photo_buttons
{
	display: block;
	position: relative;
	top: -1.2em;
	z-index: 1;
}

#photo_buttons span
{
	z-index: 1;
	display: inline-block;
	position: relative;
	height: 1.4em;
	width: 5em;
	background-color: #DDD;
	background-image: url("assets/leather.jpg");
	font-size: .9em;
	border-radius: 4px;
	box-shadow: 0 8px 5px -5px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
	cursor: pointer;
}

.touch #photo_buttons span { margin: 0 .7em; }
.hover #photo_buttons span { margin: 0 .2em; }

#photo_buttons span::after { content: "--"; }

#gallery.b #photo_buttons span.previous::after
{
	content: "<<";
	letter-spacing: -0.2em;
}

#gallery.f #photo_buttons span.next::after
{
	content: ">>";
	letter-spacing: -0.2em;
}

.hover .b #photo_buttons span.previous:hover, .touch .b #photo_buttons span.previous:active,
.hover .f #photo_buttons span.next:hover, .touch .f #photo_buttons span.next:active
{
	top: 2px;
	transition: .2s;
	text-shadow: 0 0 1px black;
	box-shadow: 0 2px 5px -1px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
}

/* set expanded photo format */
#photo figure img
{
	max-height: 300px;
	border-radius: 7px;
}

/* stop font getting too large on image */
/* less than optimal width of 510px */

@media screen and (max-width: 509px)
{
	#photo figure { font-size: 4.4vw; }
}

/* optimal width or greater */

@media screen and (min-width : 510px)
{
	#photo figure { font-size: 1em; }
}