/* ---------- ---------- ---------- Tags ---------- ---------- ---------- */
body, html {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-color: #887777;
	font-size: 16px;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0.2em 0;
}

p {
	font-size:  80%;
	line-height: 1.5em;
}

hr {
	margin: 0;
	padding: 0;
}

ul {
	margin: 0.4em 0;
	padding: 0;
	font-size: 85%;
	line-height: 1.5em;
}

ul li {
	margin-left: 1em;
	color: #333333;
}

.hidden {
	display: none !important;
}

/* ---------- ---------- ---------- Structure ---------- ---------- ---------- */
#wrapper {
	width: 300px;
	margin: 20px auto 0 auto;
}

/* ---------- ---------- ---------- Showcase ---------- ---------- ---------- */
.showcase {
	width: 100%;
	height: 410px;
	padding: 10px;
	position: relative;
}

.showcase .rateableCard {
	display: block;
	width: 280px;
	height: 390px;
	position: absolute;
	background-color: #F0F0F0;
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

.showcase .rateableCard img {
	width: 280px;
	height: 280px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background-image: url("/reloading.gif");
	background-repeat: no-repeat;
	background-position: center;
}

.showcase .rateableCard:last-of-type {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.showcase .rateableCard > span {
	display: block;
	margin: 0.3em;
	color: #000000;
}

.showcase .rateableCard .info .id {
	font-weight: bold;
}

.showcase .rateableCard[data-vote]:not([data-vote=""]) .info:before {
	position: absolute;
	z-index: 1;
	top: 30px;
	left: 5px;
	display: block;
	font-size: 70px;
	opacity: 40%;
}

.showcase .rateableCard[data-vote="up"] .info:before {
	content: '💙';
}

.showcase .rateableCard[data-vote="down"] .info:before {
	content: '🗑';
}

.showcase .rateableCard .forms,
.navigation {
	text-align: center;
	position: relative;
}

.showcase .rateableCard .forms form,
.navigation form {
	display: inline-block;
}

.showcase .rateableCard[data-rotation] {
	z-index: 10;
}

/* ---------- ---------- ---------- Gallery ---------- ---------- ---------- */
.gallery .rateableImage {
	width: 92px;
	height: 92px;
	background-color: #FFFFFF;
	display: inline-block;
	margin: 4px;
	position: relative;
}

.gallery .rateableImage img {
	width: 92px;
	height: 92px;
}

.gallery .rateableImage[data-vote]:not([data-vote=""]):before {
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 2px;
	display: block;
	opacity: 40%;
}

.gallery .rateableImage[data-vote="up"]:before {
	content: '💙';
}

.gallery .rateableImage[data-vote="down"]:before {
	content: '🗑';
}

/* ---------- ---------- ---------- Buttons ---------- ---------- ---------- */
button {
	border-radius:  10px;
	width:  110px;
	height:  60px;
	padding:  13px 10px 18px 10px;
	margin:  5px;
	vertical-align:  center;
	font-weight:  bold;
	font-size: 0.9em;
	border:  0;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
	background-color: #777777;
	cursor: pointer;
}

button span {
	width:  100%;
	height:  100%;
	padding:  0.3em 0 0.2em 0;
	margin:  0;
	border-radius:  10px;
	background-color:  #FFFFFF;
	color: #000000 !important;
	display:  inline-block;
}

form input[name="action"][value="up"] + button {
	background-color: #77AA77;
}

form input[name="action"][value="up"] + button span:before {
	content: '💙';
	padding-right: 0.2em;
}

form input[name="action"][value="down"] + button span:before {
	content: '🗑';
	padding-right: 0.2em;
}

form input[name="action"][value="down"] + button {
	background-color: #AA7777;
}

*[data-vote="up"] input[name="action"][value="up"] + button:not(:active),
*[data-vote="down"] input[name="action"][value="down"] + button:not(:active),
button:active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
	border:  0;
}

*[data-vote="up"] input[name="action"][value="up"] + button:active,
*[data-vote="down"] input[name="action"][value="down"] + button:active {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 1);
}

/* ---------- ---------- ---------- Documents ---------- ---------- ---------- */
.document {
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 0.3em 0.5em 1em 0.5em;
}

.document h3 + p {
	margin-top: 0;
}

.document p + h3 {
	margin-top: 2em;
}

.math {
	font-family: monospace;
	background-color: #BBBBBB;
	color: #000000;
	font-size: 80%;
	padding: 0.1em 0.4em;
	white-space: nowrap;
}

.note {
	font-size: 0.8em;
	color: #333333;
}

/* ---------- ---------- ---------- Links ---------- ---------- ---------- */
a, a:link, a:visited {
	color: #FF9999;
	text-decoration:  none;
}

a:hover {
	color:  #AA8888;
}

a:active {
	color:  #FF9999;
}

a[target="_blank"]:after
{
	content: "↗";
}

a.brand {
	color: #77AA77;
}

/* ---------- ---------- ---------- Heatmaps ---------- ---------- ---------- */
.heatmap.block
{
	display: inline-block;
	width: 10px;
	height: 10px;
}

.heatmap.views.level-0 {
	background-color: #000000;
}

.heatmap.views.level-1 {
	background-color: #1D2B29;
}

.heatmap.views.level-2 {
	background-color: #334C43;
}

.heatmap.views.level-3 {
	background-color: #496B58;
}

.heatmap.views.level-4 {
	background-color: #608B69;
}

.heatmap.views.level-5 {
	background-color: #77AA77;
}

.heatmap.views.level-6 {
	background-color: #8EB686;
}

.heatmap.views.level-7 {
	background-color: #A5C295;
}

.heatmap.views.level-8 {
	background-color: #BACDA5;
}

.heatmap.views.level-9 {
	background-color: #CED8B5;
}

.heatmap.views.level-10 {
	background-color: #DFE2C6;
}

.heatmap.views.level-11 {
	background-color: #EBEAD7;
}

.heatmap.score.level-0 {
	background-color: #000000;
}

.heatmap.score.level-1 {
	background-color: #3D1C07;
}

.heatmap.score.level-2 {
	background-color: #763F10;
}

.heatmap.score.level-3 {
	background-color: #AB6A1D;
}

.heatmap.score.level-4 {
	background-color: #B18027;
}

.heatmap.score.level-5 {
	background-color: #B79530;
}

.heatmap.score.level-6 {
	background-color: #BCA93A;
}

.heatmap.score.level-7 {
	background-color: #C2BC45;
}

.heatmap.score.level-n1 {
	background-color: #1F2C48;
}

.heatmap.score.level-n2 {
	background-color: #3F528B;
}

.heatmap.score.level-n3 {
	background-color: #6173CC;
}

.heatmap.score.level-n4 {
	background-color: #747AD4;
}

.heatmap.score.level-n5 {
	background-color: #8A87DB;
}

.heatmap.score.level-n6 {
	background-color: #A49AE2;
}

.heatmap.score.level-n7 {
	background-color: #BCADE8;
}