* { box-sizing: border-box; }

body{
	font-family:Arial;
	background-color:rgb(57, 48, 110);
	color:aliceblue;
	padding:0px;
	margin:0px;
}

button#export {
	position:absolute;
	right:0;
	margin:5px;
}

button#toggle-small-items {
	position:absolute;
	right:0;
	margin:40px 5px 0px 0px;
}



#container {
	xborder:1px solid grey;
	max-width:800px;
	width:100%;
	margin:auto;
}

#items {
	xborder:1px solid red;
	width:100%;
	padding:20px;
	xbackground-color: rgba(0,0,0,0.2);
	
}

[draggable="true"] {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.item {
	xborder:1px solid grey;
	height: 200px;
	xbackground-color:rgba(0, 0, 0, 0);
	xpadding:5px;
	margin-bottom:20px;
	position:relative;
	box-shadow:5px 5px 0px 0px rgba(0,0,0,0.3);
}

.item.small {
	height: 50px;
}

.image, .thumb {
	position:absolute;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	z-index:0;
}

.overlay {
	position:absolute;
	width:100%;
	height:100%;
	z-index:0;
}

.overlay.dark {
	background-color:rgba(0, 0, 0, 0.2);
}

.overlay.bright {
	background-color:rgba(255, 255, 255, 0.1);
}

.number {
	xborder:1px solid grey;
	display:inline-block;
	position:relative;
	padding:5px;
	background-color:rgba(0, 0, 0, 0.8);
	xwidth:40px;
	xheight:100%;
	text-align:center;
	xfont-weight:bold;
	font-size:1.5em;
	font-size:2em;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.8);

}

.name {
	xborder:1px solid rgb(80, 80, 80);
	display:inline-block;
	position:relative;
	padding:5px;
	background-color:rgba(0,0,0,0.8);
	font-size:2em;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.8);

}