/* Gallery stylesheet */

html {
	user-select: none;
}

body {
	margin: 0px;
	background: black;
	color: white;
	font-family: "Tahoma", "Verdana", "Arial", sans-serif;
}

.bar {
	position: fixed;
	margin: 0px;
	background: rgb(25,25,25);
	width: 100%;
	height: 75px;
}

.image-info-item {
	height: 50px;
	text-align: center;
	display: inline-block;
	margin: 12.5px;
}

.list-image {
	position: relative;
	height: 50px;
	top: 50%;
	transform: translate(0%,-50%);
	margin-left: 12.5px;
	border: 1px solid rgb(25,25,25);
	cursor: pointer;
}

.list-image[highlighted] {
	border: 1px solid white;
}

#back-button {
	position: fixed;
	left: 0px;
	background: url("/image/back.svg");
	width: 50px;
	height: 50px;
	cursor: pointer;
}

#center-image {
	position: absolute;
	display: inline-block;
	height: calc(100% - 50px);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#image-carousel {
	position: fixed;
	top: 75px;
	width: 100%;
	height: calc(100% - 150px);
	align-content: center;
}

#image-detail {
	position: fixed;
	right: 0px;
	align-content: center;
}

#image-info {
	text-align: center;
	align-items: center;
}

#image-list {
	display: flex;
	bottom: 0px;
	flex-direction: row;
	overflow-x: scroll;
}

#image-title {
	font-size: 50px;
	line-height: 50px;
	width: auto;
	height: 50px;
	margin: 12.5px;
	text-align: center;
}

#left-image {
	position: absolute;
	display: inline-block;
	height: calc(calc(100% - 50px) / 2);
	top: 50%;
	left: 0;
	transform: translate(-75%, -50%);
	cursor: w-resize;
}

#no-album {
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
}

#no-album-text {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#right-image {
	position: absolute;
	display: inline-block;
	height: calc(calc(100% - 50px) / 2);
	right: 0;
	top: 50%;
	transform: translate(75%, -50%);
	cursor: e-resize;
}