@charset "utf-8";

article img {
	max-height: 100%;
}

body#imgviewer {
	padding: 0;
	max-width: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #808080;
}

body#imgviewer > input {
	display: none;
}

body#imgviewer > label > img, body#imgviewer > label > canvas {
	max-width: 100%;
	max-height: 100%;
	cursor: zoom-in;
	vertical-align: bottom;
	border-style: solid;
	border-color: #808080;
	box-sizing: border-box;
	background-color: white;

	border-width: 2em;
	padding: 1em;
}

@media (min-width: 880px) and (min-height: 880px) {
	body#imgviewer > label > img, body#imgviewer > label > canvas {
		border-width: 8em;
		padding: 4em;
	}
}

body#imgviewer > input:checked + label > img, body#imgviewer > input:checked + label > canvas {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
	border: none;
	padding: 0;
}

ul#gallery {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

ul#gallery > li {
	display: inline-block;
	margin: .25em;
	padding: 0;
}

ul#gallery > li > a > img, ul#gallery > li > a > canvas {
	vertical-align: bottom;
}