/* scene41:  layers, composited with opacity, a mask image and a saved layer. */

body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20dp;
	background-color: #10182880;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-top: 8dp;
}

.cell {
	width: 220dp;
	margin-right: 8dp;
}

.label {
	font-size: 16dp;
	color: #a0b0c8;
	margin: 0 0 4dp 0;
}

/* Two opaque squares overlapping:  as a group the overlap stays as light as the rest. */
.pair {
	position: relative;
	width: 200dp;
	height: 120dp;
	filter: opacity(0.5);
}

.plain {
	filter: none;
	opacity: 0.5;
}

.square {
	position: absolute;
	width: 110dp;
	height: 90dp;
}

.yellow {
	left: 0;
	top: 0;
	background-color: #ffd35a;
}

.blue {
	left: 70dp;
	top: 30dp;
	background-color: #33507a;
}

.red {
	left: 40dp;
	top: 60dp;
	background-color: #7a2d33;
}

/* The mask image's alpha (a soft disc) cuts the panel out. */
.masked {
	width: 200dp;
	height: 120dp;
	padding: 12dp;
	background-color: #24344e;
	mask-image: image(maskFade.png);
	font-size: 17dp;
}

/* A group at 0.6 holding another group at 0.5. */
.outer {
	position: relative;
	width: 200dp;
	height: 150dp;
	filter: opacity(0.6);
}

.inner {
	position: absolute;
	left: 30dp;
	top: 20dp;
	width: 170dp;
	height: 130dp;
	filter: opacity(0.5);
}

/* A hard-edged shadow:  RmlUi draws it into a layer and keeps that layer as a texture. */
.shadowed {
	width: 200dp;
	height: 100dp;
	padding: 12dp;
	background-color: #24344e;
	border: 2dp #ffd35a;
	box-shadow: 8dp 8dp 0 #000000c0;
}

.muted {
	color: #a0b0c8;
}