html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4 { font-size: 112.5%; }
h6 { font-size: 80%; }

body {
	background: #c3b75d;
	color: #c3b75d;
	padding: 1em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
}

a { color: darkblue; }
a:hover { color: darkred; }

body > header, #page, body > footer {
	width: 90%;
	margin: 1em auto;
	border-radius: 1em;
	background: rgba(213, 214, 182, 0.75);
	padding: 1em;
	text-align: center;
}

body > header {
	display: flex;
	color: blue;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: .5em;
}

body > header h1 a {
	text-decoration: none;
	color: #2d3496;
	font-style: italic;
}

body > header h2 {
	color: darkred;
}

body > footer {
	font-size: .9em;
	color: #666;
}

article nav {
	margin: .5em 0;
}

nav ul li {
	display: inline-block;
}

nav ul li a {
	color: #000;
	margin: .2em;
	border-radius: .5em;
	background: rgba(255, 255, 255, 0.5);
	padding: .4em .5em;
	font-size: 1.2em;
	display: inline-block;
}

nav ul li a:hover {
	background: #fff;
	color: darkred;
}

nav ul li.current a {
	box-shadow: 0px 0px 2px 2px #350;
	font-weight: bold;
}

[type=submit] {
	font-size: 112.5%;
}

[type=submit], [type=button] {
	box-shadow: 2px 2px 5px #666;
}

[type=submit], [type=button], input[type=text], input[type=password], select {
	padding: .3em .5em;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: .3em;
	cursor: pointer;
	transition: color .2s, box-shadow .2s;
}

dl select {
	width: auto;
}

[type=submit]:hover, [type=button]:hover, input[type=submit]:focus, input[type=button]:focus  {
	color: darkred;
	box-shadow: 0px 0px 5px 2px orange;
	outline: none;
}



label {
	cursor: pointer;
	display: block;
	padding: .3em .5em;
}
label:hover {
	background: rgba(255, 255, 255, 0.5);
	border-radius: .3em;
}

dd label {
	display: inline-block;
}

label strong {
	font-weight: bold;
}

small {
	color: #666;
	font-size: .9em;
	font-weight: normal;
	margin: .5rem 0;
	display: block;
}

input[type=text], input[type=password], select {
	width: 95%;
	font-size: 1.2em;
	cursor: unset;
	border: 2px solid #fff;
}

input[type=text]:focus, input[type=password]:focus, select:focus {
	box-shadow: 0px 0px 5px 2px orange;
	outline: none;

}

fieldset dl dt {
	font-weight: bold;
}

fieldset dl dd {
	margin: .5em;
}

fieldset {
	width: 50%;
	margin: 0 auto;
}

.info {
	margin: .8em 0;
	color: #666;
	font-size: .9em;
}

div.pic {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	width: 100%;
}

div.pic div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	text-align: center;
	flex-grow: 1;
}

/* Empty, just to make the image centered even if button is not there */
div.pic p {
	width: 2em;
}

div.pic div a {
	display: flex;
	justify-content: center;
	height: 100%;
	width: 100%;
	padding-top: 2em;
}

div.pic div a span {
	display: block;
	overflow: hidden;
	width: 2em;
	height: 2em;
	text-indent: -100em;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80%;
	opacity: 0.5;
	transition: opacity .2s;
}

div.pic div.next a span {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" fill="%23350" stroke="none" xmlns="http://www.w3.org/2000/svg"><path d="m256 8c137 0 248 111 248 248s-111 248-248 248-248-111-248-248 111-248 248-248zm-28.9 143.6 75.5 72.4h-182.6c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0l132.7-132.6c9.4-9.4 9.4-24.6 0-33.9l-132.7-132.8c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"/></svg>');
}

div.pic div.prev a span {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" fill="%23350" xmlns="http://www.w3.org/2000/svg"><path d="m256 504c-137 0-248-111-248-248s111-248 248-248 248 111 248 248-111 248-248 248zm28.9-143.6-75.5-72.4h182.6c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24h-182.6l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0l-132.7 132.6c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3z"/></svg>');
}

div.pic div a:hover span {
	opacity: 1;
	box-shadow: 0px 0px 5px #000;
}

.picture header h3 {
	color: #666;
}

.picture header h3 a {
	color: #669;
}

.examples {
	margin: 1rem auto;
	max-width: 40em;
}

.examples dl {
	margin: .8rem 0;
}

.examples dd, .examples dt {
	margin-bottom: .8rem;
}

.examples dt {
	font-weight: bold;
	text-align: left;
}

.examples input[type=button] {
	float: right;
}

.examples input[type=text], .admin input[type=text], .examples textarea {
	background: rgba(213, 214, 182, 0.5);
	border: 1px solid #fff;
	border-radius: .5em;
	font-family: "Courier New", Courier, monospace;
	width: calc(100% - 1em);
	font-size: 8pt;
	padding: .5em;
}

figure {
	display: inline-block;
	margin: 1em;
	vertical-align: middle;
	position: relative;
	min-width: 150px;
}

figure figcaption {
	font-size: small;
	margin-top: .5em;
}

#albumParent figcaption {
	display: flex;
	justify-content: stretch;
}

#albumParent figcaption button {
	font-size: 1.5em;
	cursor: pointer;
	color: #666;
	border: 1px solid #666;
	background: rgba(255, 255, 255, 0.5);
	margin-left: .2em;
}

#albumParent img {
	max-width: 100%;
}

form.new #albumImages figure:only-child figcaption input {
	visibility: hidden;
}

figure a:hover img {
	box-shadow: 0px 0px 10px #000;
	background: #fff;
}

figure span {
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	position: absolute;
	padding: .5em 1em;
	font-weight: bold;
	top: 1em;
	left: 0;
}

figure span.private {
	left: unset;
	right: 0;
	background: rgb(150, 0, 0);
	background: rgba(150, 0, 0, 0.75);
}

.pagination .selected {
	font-weight: bold;
	font-size: 125%;
}

form.admin, #albumParent {
	background: rgba(0, 0, 0, 0.25);
	padding: 1em;
	width: 50%;
	margin: .8em auto;
	border-radius: .8em;
	color: #fff;
}

dl.admin {
	background: rgba(0, 0, 0, 0.25);
	padding: .8em;
	border-radius: .8em;
	margin: .8em auto;
}

dl.admin button[type=submit] {
	border: 2px solid orange;
}

.admin p:nth-child(2n) {
	margin-top: 1rem;
}

.icon {
	background-position: .5em center;
	background-repeat: no-repeat;
	padding-left: 2.5em;
	background-size: 24px 24px;
}

.icon.upload {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%23b4dffb"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%235daf38" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g></g></svg>');
	background-size: 32px 32px;
	font-size: 2em;
	padding-left: 2em;
}

.icon.delete {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="%23F4900C" d="M35 19c0-2.062-.367-4.039-1.04-5.868-.46 5.389-3.333 8.157-6.335 6.868-2.812-1.208-.917-5.917-.777-8.164.236-3.809-.012-8.169-6.931-11.794 2.875 5.5.333 8.917-2.333 9.125-2.958.231-5.667-2.542-4.667-7.042-3.238 2.386-3.332 6.402-2.333 9 1.042 2.708-.042 4.958-2.583 5.208-2.84.28-4.418-3.041-2.963-8.333C2.52 10.965 1 14.805 1 19c0 9.389 7.611 17 17 17s17-7.611 17-17z"/><path fill="%23FFCC4D" d="M28.394 23.999c.148 3.084-2.561 4.293-4.019 3.709-2.106-.843-1.541-2.291-2.083-5.291s-2.625-5.083-5.708-6c2.25 6.333-1.247 8.667-3.08 9.084-1.872.426-3.753-.001-3.968-4.007C7.352 23.668 6 26.676 6 30c0 .368.023.73.055 1.09C9.125 34.124 13.342 36 18 36s8.875-1.876 11.945-4.91c.032-.36.055-.722.055-1.09 0-2.187-.584-4.236-1.606-6.001z"/></svg>');
}

.icon.select {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="%230072ff"><path d="m39.87 48h-21.87a2 2 0 1 0 0 4h23.21a10.79 10.79 0 0 0 10.79-10.79v-23.31a2 2 0 0 0 -2.34-2 2.08 2.08 0 0 0 -1.66 2.1v21.87a8.13 8.13 0 0 1 -8.13 8.13z"/><path d="m43.71 56h-13.71a2 2 0 1 0 0 4h14.56a15.43 15.43 0 0 0 15.44-15.44v-2.56a2 2 0 0 0 -2.34-2 2.08 2.08 0 0 0 -1.66 2.11v1.6a12.29 12.29 0 0 1 -12.29 12.29z"/><path d="m12.24 44h23.52a8.24 8.24 0 0 0 8.24-8.24v-23.52a8.24 8.24 0 0 0 -8.24-8.24h-23.52a8.24 8.24 0 0 0 -8.24 8.24v23.52a8.24 8.24 0 0 0 8.24 8.24zm11.76-32a6 6 0 1 1 -6 6 6 6 0 0 1 6-6zm-8.18 13.61a1.51 1.51 0 0 1 1.82.09 10 10 0 0 0 12.73 0 1.51 1.51 0 0 1 1.82-.09 8.89 8.89 0 0 1 3.81 7.3 3.09 3.09 0 0 1 -3.09 3.09h-17.82a3.09 3.09 0 0 1 -3.09-3.09 8.89 8.89 0 0 1 3.82-7.3z"/><path d="m58 24a2 2 0 0 0 -2 2v8a2 2 0 0 0 4 0v-8a2 2 0 0 0 -2-2z"/></g></svg>');
}

.icon.zip {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 56 64" width="56" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m5.113-.026c-2.803 0-5.074 2.272-5.074 5.074v53.841c0 2.803 2.271 5.074 5.074 5.074h45.773c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.901-20.31h-31.946z" fill="%238199af" fill-rule="evenodd"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707z" fill="%23617f9b"/><path d="m37.074 0v14.561c0 1.656 1.104 5.791 6.104 5.791h12.799z" fill="%23fff" opacity=".5"/></g><path d="m18.438 53.906h-7.581c-.378 0-.756-.342-.756-.828 0-.18.054-.36.162-.504l6.68-9.345h-6.212c-.36 0-.648-.288-.648-.684 0-.36.288-.648.648-.648h7.454c.378 0 .756.342.756.829 0 .18-.054.36-.162.504l-6.68 9.345h6.338c.36 0 .648.288.648.648.001.395-.287.683-.647.683zm4.012.108c-.414 0-.738-.324-.738-.738v-10.767c0-.396.324-.721.774-.721.396 0 .72.324.72.721v10.767c0 .413-.324.738-.756.738zm8.839-4.879h-3.331v4.141c0 .414-.324.738-.756.738-.414 0-.738-.324-.738-.738v-10.299c0-.594.486-1.081 1.081-1.081h3.745c2.413 0 3.763 1.657 3.763 3.619s-1.387 3.62-3.764 3.62zm-.18-5.906h-3.151v4.573h3.151c1.422 0 2.395-.936 2.395-2.287-.001-1.35-.973-2.286-2.395-2.286z" fill="%23fff"/></svg>');
}

#albumParent {
	width: 90%;
}

#albumParent .add {
	border: none;
	border-radius: .2em;
	cursor: pointer;
	display: block;
	padding: .2em;
	padding-left: 2em;
	font-size: 1.7em;
	margin: .5rem auto;
	background-size: 32px 32px;
}

#albumParent img.loading, #albumParent span b {
	background: #fff;
	padding: .5em;
	border-radius: 1em;
	vertical-align: middle;
	color: #000;
	display: inline-block;
	line-height: 16px;
}

#albumParent img {
	box-shadow: 0px 0px 10px #000;
}

article h2 {
	margin-bottom: .5em;
	font-weight: bold;
}

.error {
	color: red;
	margin: .8em;
}

.picture figure img {
	max-width: 100%;
	max-height: 75vh;
}

@media screen and (max-width: 800px) {
	div.pic {
		flex-direction: column;
	}

	div.pic div {
		width: auto;
	}

	div.pic div a {
		padding: 0;
	}
}


.dropping::after {
    display: block;
    content: "";
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    border-radius: .5em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: none;
    z-index: 10000;
}

p.help {
	font-size: .9em;
	color: #eee;
	font-style: italic;
	text-shadow: 0px 0px 5px #000;
}