/* show.css */


header {display: flex; flex-direction: row-reverse;}
header h3 {margin: 0; padding-bottom: 1px; font-size: large; text-align: center;}
header #smLogo {display: none;}

/*main {width: 100%;}
#zoomdiv {text-align: center; position: relative; padding: 0 0 1em;}*/
/*#zoomdiv.small figure	{width: calc(var(--photoWidth) * var(--zoomratio_small));}
#zoomdiv.medium figure	{width: calc(var(--photoWidth) * var(--zoomratio_medium));}
#zoomdiv.large figure	{width: calc(var(--photoWidth) * var(--zoomratio_large));}*/
/*#zoomdiv.small  	{scale: var(--zoomratio_small); max-height: calc(100svh - 150px);}
#zoomdiv.medium .galImg {scale: var(--zoomratio_medium); max-height: calc(100svh - 150px);}
#zoomdiv.large .galImg 	{scale: var(--zoomratio_large); max-height: calc(100svh - 150px);}*/

#slidebody {width: auto !important;} /*unset zoomdiv.css*/
#slidebody figure {margin: 0 auto; padding: 7px; display: flex; align-items: center; justify-content: center; height: calc(100svh - 120px);}
.galImg {max-height: calc(100svh - 130px); cursor: auto; max-width: 100%; object-fit: contain;}
#lastImg  {/*z-index: 11;*/ display: none;}

#buttons {width: 100%; display: flex; justify-content: center; padding: 5px;}/* flex-direction: row-reverse; justify-content: space-between; page-break-after: 5px;*/
#buttons > div {width: calc(3 * 23px);}
/*#zoombuttons {align-self: flex-start;}*/
#rubric {display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 5px; width: 100%;}
#caption {font-family: var(--defaultBookFontFamily); font-size: large; text-align: center; font-weight: bold;} /*margin: 5px 0 0 0; width: 100%; height: 1.2em; overflow: hidden;*/
#w3c {position: absolute; bottom: 7px; right: 3px;}

@media screen 
{
	body.general {background-image: none; /*var(--galleryImage);*/ background-color: #25321D ;/*var(--galleryBackground);*/}
	header {background-color: var(--borderYellow); border-bottom: thin #996600 solid; background-image: var(--bookImage); background-repeat: repeat; border-radius: 5px; padding: 1px;}
	#caption {color: var(--galleryYellow);}
	#slidebody {background-image: url("/images/backgrounds/bg_gallery.jpg");  box-shadow: 2px 2px 4px Black;}
	#slidebody {border: thin solid var(--galleryYellow); border-radius: 7px; padding: 5px; margin: 2px auto; height: calc(100svh - 42px);}/*width: var(--screenWidth); max-width: 100%; */
	#status {font-size:xx-small; color: var(--galleryYellow); text-align: center; margin: 0; width: 100%;}
	/*#zoombuttons {position:absolute; bottom: 27px; left: 7px; z-index: 10;}*/
	#buttons > ul {list-style: none; display: flex; flex-direction: row;}/*width: calc(5 * 46px); height: 23px; *//*padding: 0; */
	li .btnhelp {margin-right: 10px;}
	li .btnup {margin-left: 10px;}

}
@media print 
{
	#caption {color: Black;}
	#status {display: none;}
	/*#zoombuttons {display: none;}*/
	#buttons {display: none;}
}

@media (pointer: fine), (pointer: none) {
	/*desktop*/ 
	header h3 {flex-basis: calc(100% - 23px - 23px); cursor: default;} /* text-indent: 23px;*/
	header span {background-image: url(/images/logos/icon_sg1.png); width: 23px; height: 23px; margin: 1px;}
}

@media (pointer: coarse)  
{
	/* mobile device */
/*	body.general {background-image: var(--galleryImage); background-color: var(--galleryBackground);}*/
	main {padding: 0;}
	header {width: 100%; height: 60px; display: flex; flex-direction: row; background-image: var(--bookImage); background-repeat: repeat;}
	header h3 {font-size: x-large; font-weight: bold; display: flex; justify-content: center; align-items: center;  flex-basis: calc(100% - 46px - 46px - 16px);}
	header span {background-image:var(--logo46); width: 46px; height: 46px; margin: 7px 4px 0;}
	.galImg {/*transform: translate(-50%, -50%) scale(100%);max-width: 100%; max-height: 100%;*/} 
	.btnup, .btnhelp {visibility: hidden;}
}

@media (pointer: coarse) and (orientation: landscape)
{	
	header {display: none;}
	#slidebody {height: 100svh;}
	#slidebody figure {height: calc(100svh - 60px);}
	#status {display: none;}
	.galImg {max-height: 100%;}

}

@media (pointer: fine) and (any-pointer: coarse) {
	/* touch desktop */
	header h3 {visibility: visible;}
}