/* STRUCTURE */

* {
	font-size: 12px;
	line-height: 13px;
}

::-webkit-scrollbar { /* WIDTH */
	width: 0rem;
	height: 0rem;
}

::-webkit-scrollbar-track { /* BACKGROUND */
	background: white; 
}

::-webkit-scrollbar-thumb { /* HANDLE */
	background: white; 
	border: 0rem;
}

body {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: red;*/
}

.case {
	position: fixed;
	top: 0rem;
	left: 0;
	width: calc(100vw - 0rem);
	height: calc(100vh + 0rem);
	margin: 0rem 0rem 0rem 0rem;

	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	align-items: center;
}

.plaque {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.5rem;

	background: rgb(255,255,255);

	z-index: 1;
}

.shelf {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.5rem;

	background-color: white;
	border-right: 1px dashed black;

	z-index: 1;
}

.shelf.last {
	border-right: 1px solid rgba(255,255,255,0);
}

.shelf:hover {
	background-color: rgb(245,245,245);
}

.shelf:hover,
.shelf:hover > li,
.shelf:hover > button {
	/*background-color: white;*/
	/*color: rgb(150,150,150);*/
	/*opacity: 0.6;*/
}

/*.expand:hover,
.expand:hover > li,
.expand:hover > button {
	color: black;
	opacity: 1;
}*/

.shrink {
	width: auto;
}

.item {
	padding: 0rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;

    overflow: hidden;
}

img,
video {
	width: calc(100%);
	margin: calc(0.25rem - 1px) 0 calc(0.25rem - 0px) 0;

	outline: solid black 1px;
	outline-line-style: inset;
}

ul > img {
	width: calc(100% + 1rem - 1px);

	margin-top: calc(-2px);
	margin-left: calc(-1rem);
	margin-bottom: -1.5px;
}

ul > img.img-margin {
	margin-top: calc(1rem - 2px);
}

.shelf.expand > ul.open > img {
	margin-bottom: -3px;
}

.frame {
	height: 6vw;

	background-color: white;
	border: 1px solid black;
}

ul > .frame {
	margin-top: calc(-0.5rem + 3px);
	margin-left: calc(-1rem - 1px);
}

.frame.open {
	padding: 0;
	margin-top: calc(-0.5rem - 1px);
}

.picture {
	/*width: 100%;*/
	/*height: 100%;*/
	/*zoom: 0.1;*/
	width: 1000%;
	height: 1000%;
	transform: scale(0.1) translate(-450%,-450%);
	border: none;
}

.expand {
	width: 50vw;
}

.expand .frame {
	height: 30vw;
}

.expand .picture {
	/*zoom: 0.3;*/
	width: 335%;
	height: 335%;
	transform: scale(0.3) translate(-117%,-117%);
}

.expand-type,
.expand-type a,
.expand-type span {
	font-size: 1.5rem;
	line-height: 1.583333rem;
}

li.expand-type {
	margin-left: 0.5rem;
}



/* TYPE */

.underline {
	text-decoration: underline;
}

.strike {
	text-decoration: underline;
	text-underline-offset: -0.35rem;
	text-decoration-skip-ink: none;
}

span.small,
.small {
	font-size: 1rem;
	line-height: 0rem;
}

ul.indent {
	margin-top: -0.5rem;
	padding: 0.25rem 0rem 0rem 1rem;

	border-left: 1px solid black;
}

li {
	list-style-type: "— ";
	list-style-position: outside;
}

p.caption {
	margin-top: -2px;

	font-family: sans-serif;
	font-size: 0.75rem;
	line-height: 0.75rem;
}

p.caption-indent {
	max-width: 80%;
	padding: 0.2rem 0.3rem;
	margin: -0rem -1rem 0.5rem -1rem;

	font-family: sans-serif;
	font-size: 0.75rem;
	line-height: 0.75rem;

	/*background-color: red;*/
	/*outline: 1px solid black;*/
}

.caption > a,
.caption-indent > a {
	font-size: 0.75rem;
	line-height: 0.75rem;
}

.expand-type > p.caption {
}




/* COLLAPSE BUTTON */

button {
	display: block;
	width: fit-content;
	padding: 0.2rem 0.3rem;
	margin-top: 0.5rem;
	margin-bottom: calc(0.5rem - 1px);

	font-family: sans-serif;
	font-size: 0.75rem;
	text-align: left;
	line-height: 0.75rem;
	letter-spacing: 0;

	background-color: rgba(255,255,255,0);
	color: black;
}

.button-open {
	border: 1px solid black;
}

.button-open:hover {
	border: 1px dashed black;
}

.button-closed {
	border: 1px dashed black;
}

.button-closed:hover {
	border: 1px solid black;
}

span.plus,
span.minus {
	font-family: sans-serif;
	font-size: 0.75rem;

	line-height: 0rem;
	vertical-align: 1px;
	margin-left: 0.1rem;
}

.button-hover {} /* only adding this for js */

.closed {
	display: none;
}

.open {
	display: auto;
}




/* CURSOR */

.shelf {
	cursor: zoom-in;
}

.expand {
	cursor: zoom-out;
}

.expand-type,
.expand-type a,
.expand-type span {
	/*cursor: text;*/
}

a {
	cursor: alias;
}

button {
	cursor: pointer;
}





@media only screen and (max-width: 1080px) {

	.case {
		height: 100vh;
		grid-template-columns: repeat(9, 1fr);
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.shelf {
		width: 20vw;

/*		border: none;
		outline: 1px dashed black;*/
	}

	.shrink {
		width: auto;
	}

	.expand {
		width: 60vw;
	}

	.frame {
		height: 12vw;
	}

	.expand .frame {
		height: 36vw;
	}

}

@media only screen and (max-width: 680px) {

	.case {
		height: 100vh;
		grid-template-columns: repeat(9, 1fr);
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.shelf {
		width: 40vw;

/*		border: none;
		outline: 1px dashed black;*/
	}

	.shrink {
		width: auto;
	}

	.expand {
		width: 80vw;
	}

	.frame {
		height: 24vw;
	}

	.expand .frame {
		height: 48vw;
	}

}