/*
http://caniuse.com/css-variables/embed
https://drafts.csswg.org/css-variables/
:root {
	--White: rgb(248, 253, 221);
	--Blue: rgb(165, 213, 233);
	--Black: rgb(140, 141, 146);
	--Red: rgb(244, 146, 121);
	--Green: rgb(148, 187, 142);
	--Colorless: rgb(227, 218, 201);
	
	var-White: rgb(248, 253, 221);
	var-Blue: rgb(165, 213, 233);
	var-Black: rgb(140, 141, 146);
	var-Red: rgb(244, 146, 121);
	var-Green: rgb(148, 187, 142);
	var-Colorless: rgb(227, 218, 201);
}
*/
html {
	overflow-y: scroll;
}

body {
	margin: 0;
	background-color: black;
}

pre {
	background-color: white;
	margin: 0.5em;
}

textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
}

header+main {
	margin-top: 1.5cm;
}

header {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block !important;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

header>* {
	display: inline-block;
	vertical-align: top;
}

header>nav {
	width: 25%;
	height: 100%;
	box-sizing: border-box;
	padding: 0.25cm 0 0.25cm 0.25cm;
}

header details {
	width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px groove lightblue;
	margin: 0;
	border-radius: 0.25em;
	background-color: white;
	pointer-events: auto;
}

header details[open] {
	box-shadow: 0.125em 0.125em 0.25em rgba(127, 127, 127, 0.5);
}

header details>summary {
	margin: 0;
	padding: 0 0.5em;
	min-height: 1cm;
	line-height: 1cm;
	white-space: nowrap;
	font-family: myHeading, serif;
	font-weight: bold;
}

header ul {
	/*display: none;*/
	padding: 0;
	margin: 0;
	list-style-type: none;
}

header li>a {
	display: block;
	padding: 0.25em 0.5em;
	margin: 0;
}

header li.active {
	font-weight: bold;
}
/*
header .details:hover, header .details:focus, header .details:active {
	box-shadow: 0.125em 0.125em 0.25em rgba(127, 127, 127, 0.5);
}
header .details > .summary::before, header .details > .summary::before, header .details > .summary::before {
	content: "► ";
}
header .details:hover > .summary::before, header .details:focus > .summary::before, header .details:active > .summary::before {
	content: "▼ ";
}
header .details:hover > ul, header .details:focus > ul, header .details:active > ul {
	display: block !important;
}
*/
main {
	display: block;
	padding: 0.5em;
	background-color: white;
	overflow: auto;
}

h1 {
	font-size: 1.3em;
	margin: 0;
}

h2 {
	font-size: 1.1em;
	margin: 0;
}

h3 {
	font-size: 1.0em;
	margin: 0;
}

aside {
	float: right;
	width: 40%;
	margin-top: 0.5em;
}

@media ( max-width : 950px) {
	aside {
		display: none !important;
	}
	header>nav {
		width: 33.33%;
	}
}

input[type="text"], input[type="search"], select {
	width: 200px;
	height: 30px;
	box-sizing: border-box;
}

input, button, textarea, select {
	border-width: 1px;
	padding: 1px;
}

button {
	height: 30px;
}

input[type="number"], input[pattern] {
	text-align: right;
	background-color: rgba(220, 220, 220, 0.6);
	border: 0;
	margin: 0;
	color: black;
	text-shadow: none;
	font-family: myCode;
	box-sizing: border-box;
	display: block;
	width: 100%; /* 40px */
}

input[disabled] {
	background-color: transparent;
	text-align: center;
	pointer-events: none;
}

input[data-chat-id="input"] {
	width: 100%;
	text-align: left !important;
}

.searchColor {
	display: inline-table;
	table-layout: fixed;
	width: auto;
	height: 30px;
	box-sizing: border-box;
	vertical-align: bottom;
}

.searchColor>* {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.searchColor>*>* {
	margin: 0 2px;
	vertical-align: middle;
}

.searchColor>*>img {
	height: 25px;
}

ul {
	margin: 0;
}

.imageCache-info {
	position: absolute;
	top: 0;
	right: 0;
	border: 1px groove silver;
	border-radius: 0.25em;
	margin: 0.5em;
	padding: 0 0.25em;
	background-color: white;
	text-align: center;
	opacity: 0.8;
	font-size: 0.8em;
	white-space: pre-wrap;
}

fieldset, details {
	border: 1px groove silver;
	border-radius: 0.25em;
	margin: 0.5em 0 0 0;
	padding: 0.5em;
}

fieldset.search {
	background-color: rgba(220, 250, 220, 0.8);
}

fieldset.deck {
	background-color: rgba(220, 220, 250, 0.8);
}

fieldset.news {
	background-color: rgba(240, 230, 220, 0.8);
}

fieldset.colors {
	background-color: rgba(230, 230, 250, 0.8);
}

fieldset.export, fieldset.import {
	background-color: rgba(220, 220, 250, 0.8);
}

fieldset>legend {
	height: 1.25em;
	margin: -0.5em 0;
	padding: 0 0.25em;
}

details {
	padding: 0;
}

details>summary {
	padding: 0.5em;
	cursor: pointer;
}

details>summary:hover, header li:hover {
	background-image: linear-gradient(to bottom, rgba(127, 127, 127, 0.1),
		rgba(127, 127, 127, 0.05), transparent);
	background-image: -moz-linear-gradient(to bottom, rgba(127, 127, 127, 0.1),
		rgba(127, 127, 127, 0.05), transparent);
	background-image: -webkit-linear-gradient(to bottom, rgba(127, 127, 127, 0.1),
		rgba(127, 127, 127, 0.05), transparent);
	background-image: -ms-linear-gradient(to bottom, rgba(127, 127, 127, 0.1),
		rgba(127, 127, 127, 0.05), transparent);
	background-image: -o-linear-gradient(to bottom, rgba(127, 127, 127, 0.1),
		rgba(127, 127, 127, 0.05), transparent);
}

details>summary>* {
	display: inline;
}

details>div>p {
	margin: 0 0.5em;
}

.colors table {
	border-collapse: collapse;
}

.colors table th:first-child {
	padding: 0 12px 0 0;
	width: 64px;
	text-align: left;
}

.colors table *[data-category] {
	padding: 0 12px;
	width: 64px;
	text-align: right;
	text-shadow: 0px 0px 1px white;
}

.colors table td {
	font-family: myCode;
}

ul.cardList {
	margin: 0;
	padding: 0;
	text-align: left;
}

ul.cardList>li {
	margin: 0.25em;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

table.manager {
	width: 100%;
	table-layout: fixed;
	border-spacing: 0;
}

table.manager tr>* {
	width: 50%;
	vertical-align: top;
	padding: 0;
}

table.manager thead td {
	padding: 0;
	border: none;
}

table.manager thead select {
	width: 100%;
	display: block;
	border: 1px inset black;
}

table.manager thead a {
	line-height: 30px;
}

table.manager h3 {
	margin: 0;
	padding-left: 4px;
}

table.manager *[data-card-stock="0"] {
	opacity: 0.5;
}

*[draggable="true"], *[draggable="true"] code {
	cursor: move;
}

*[data-status] *[data-deck-no] {
	border-color: yellow;
}

table.checklist {
	width: 800px;
}

table.checklist tr:nth-child(even) {
	background-color: rgb(240, 240, 240);
}

table.checklist tr:nth-child(odd) {
	background-color: rgb(250, 250, 250);
}

table.checklist *[data-card-stock] {
	opacity: 0.7;
}

table.checklist *[data-card-stock="0"] {
	opacity: 1.0;
}

table .price {
	text-align: right;
	font-family: myCode;
}

*[data-select] {
	display: table;
	table-layout: fixed;
	border-spacing: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: smaller;
}

*[data-select]>* {
	display: table-cell;
	border: 1px outset silver;
	padding: 1px 3px;
	background-color: silver;
	font-weight: bold;
	cursor: pointer;
	font-size: 0.8em;
}

*[data-select]>*:first-child {
	width: 0.5em;
	text-align: center;
}

*[data-select]>*[data-select-current] {
	border-style: inset;
	color: white;
	background-color: gray;
}

/* Karte */
.cardList article {
	width: 80px;
	padding: 0;
	font-size: 0.6em;
	border-width: 1px;
	border-style: groove;
	border-radius: 0.25em;
}

.cardList article[data-clicked] {
	width: 314px;
	font-size: 1.2em;
	border-width: 2px;
}

/* Karte Bild */
.cardList article>img {
	background-color: black;
	color: white;
	width: 78px;
	height: 111px;
	display: block;
	margin: auto;
	border-width: 1px;
	border-style: groove;
	border-color: inherit;
	border-radius: 1px;
	font-size: 1.5em;
	line-height: 1em;
	text-align: left;
	white-space: pre-wrap;
	overflow: hidden;
}

.cardList article>img:hover {
	border-color: rgba(255, 255, 0, 0.9);
	border-style: outset;
}

.cardList article>img:active {
	border-style: inset;
}

.cardList article[data-clicked]>img {
	width: 312px;
	height: auto;
}

.cardList article a:hover {
	text-shadow: 1px 1px 1px yellow;
}

/* Karte Name */
.cardList article>h3 {
	display: table;
	width: 100%;
	height: 2.5em;
}

.cardList article[data-clicked]>h3 {
	border-spacing: 0.5em 0;
}

.cardList article>h3>* {
	display: table-cell;
	text-align: center;
	line-height: 1.25em;
	font-weight: normal;
	/*
	min-height: 32px;
	max-height: 32px;
	overflow: hidden;
	*/
}

/* Karte Optionen */
.cardList article nav {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 15px;
}

.cardList article[data-clicked] nav {
	height: 40px;
}

.cardList article nav>* {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	line-height: 0.9em;
	overflow: hidden;
}

.cardList article nav>*.clicked-show, .cardList article[data-clicked] nav>*.clicked-hide
	{
	display: none;
}

.cardList article nav>*.clicked-hide {
	width: auto;
}

.cardList article[data-clicked] nav>*.clicked-show {
	display: table-cell;
}

.cardList article nav>code {
	text-align: center;
}

.cardList article nav>.image, .cardList article nav>.button {
	width: 20px;
}

.cardList article[data-clicked] nav>.image {
	width: 60px;
}

.cardList article[data-clicked] nav>.button {
	width: 40px;
}

.cardList article nav img {
	display: block;
	vertical-align: bottom;
	max-width: 20px;
	max-height: 15px;
	font-size: 0.7em;
	font-weight: bold;
	padding: 1px;
	box-sizing: border-box;
}

.cardList article[data-clicked] nav img {
	max-width: 60px;
	max-height: 40px;
	font-size: 1.5em;
}

.cardList article input, .cardList article button {
	display: block;
	line-height: 0.5em;
	height: 15px;
	margin-left: auto;
}

.cardList article button {
	width: 20px;
}

.cardList article[data-clicked] input, .cardList article[data-clicked] button
	{
	width: 40px;
	height: 40px;
}

img.color {
	height: 1.3em;
	vertical-align: bottom;
	margin: 0 0.25em;
}

img.set-symbol {
	height: 1.3em;
	vertical-align: bottom;
	margin: 0 0.25em;
}

.pack>div {
	padding: 1em;
}

.pack .description {
	overflow: auto;
}

.pack .description img {
	display: block;
	height: 311px;
	float: right;
	margin: 0.25em;
}

.dci tbody th {
	text-align: left;
	white-space: nowrap;
}

.dci code {
	display: block;
	text-align: center;
}

.dci *[data-wins] {
	background: rgba(255, 255, 0, 0.3);
}

.dci *[data-wins="0"] {
	background: rgba(255, 0, 0, 0.3);
}

.dci *[data-losses="0"] {
	background: rgba(0, 255, 0, 0.3);
}

.dci *[data-wins="0"][data-losses="0"][data-draws="0"] {
	background: transparent;
}

.review-card {
	display: table;
	table-layout: fixed;
}

.review-card>* {
	display: table-cell;
	vertical-align: top;
	padding: 1em;
}

.review-card input[type="number"] {
	display: inline-block;
}

.review-card textarea {
	width: 800px;
	height: 100px;
}

/* Farben */
*[data-category="Land"] {
	background-color: rgba(200, 250, 150, 0.5);
}

*[data-category="Planeswalker"] {
	background-color: rgba(250, 150, 100, 0.3);
}

*[data-category="Creature"] {
	background-color: rgba(250, 200, 100, 0.5);
}

*[data-category="Artifact"] {
	background-color: rgba(200, 200, 250, 0.5);
}

*[data-category="Enchantment"] {
	background-color: rgba(250, 200, 250, 0.5);
}

*[data-category="Sorcery"] {
	background-color: rgba(250, 250, 150, 0.5);
}

*[data-category="Instant"] {
	background-color: rgba(150, 200, 200, 0.5);
}

*[data-category="Token"] {
	background-color: rgba(200, 200, 200, 0.4);
}

*[data-category="Emblem"] {
	background-color: rgba(250, 200, 200, 0.5);
}

*[data-category="Other"] {
	background-color: rgba(200, 200, 200, 0.5);
}

*[data-category="White"] {
	background-color: rgba(250, 250, 200, 0.6);
}

*[data-category="Blue"] {
	background-color: rgba(150, 150, 250, 0.6);
}

*[data-category="Black"] {
	background-color: rgba(50, 50, 50, 0.6);
}

*[data-category="Red"] {
	background-color: rgba(250, 100, 100, 0.6);
}

*[data-category="Green"] {
	background-color: rgba(100, 250, 100, 0.6);
}

*[data-category="Colorless"] {
	background-color: rgba(200, 200, 200, 0.6);
}

*[data-category="Sideboard"] {
	background-color: rgba(230, 180, 230, 0.6);
}

*[data-category="Common"], *[data-card-rarity="Common"] {
	border-color: rgb(220, 220, 220);
	background-color: rgba(250, 250, 250, 0.4);
}

*[data-category="Uncommon"], *[data-card-rarity="Uncommon"] {
	border-color: rgb(186, 212, 222);
	background-color: rgba(206, 232, 242, 0.5);
}

*[data-category="Rare"], *[data-card-rarity="Rare"] {
	border-color: rgb(220, 191, 119);
	background-color: rgba(230, 201, 129, 0.6);
}

*[data-category="Mythic Rare"], *[data-card-rarity="Mythic Rare"] {
	border-color: rgb(222, 104, 39);
	background-color: rgba(222, 104, 39, 0.4);
}

*[data-event-type="GPT"] {
	font-size: 0.8em;
}

*[data-event-type="PPTQ"] {
	font-size: 0.9em;
}

*[data-event-type="Grand Prix"] {
	font-size: 1.1em;
}

*[data-event-type="Pro Tour"], *[data-event-type="Magic Online Championship"]
	{
	font-size: 1.2em;
}

*[data-event-type="World Magic Cup"], *[data-event-type="World Championship"]
	{
	font-size: 1.3em;
}

.date {
	text-align: center;
	font-size: 1.0rem;
}

.nl2br {
	white-space: pre-wrap;
}

*[data-event-format~="Limited"] {
	color: darkgreen;
}

*[data-event-format~="Modern"] {
	color: darkred;
}

*[data-event-format~="Standard"] {
	color: darkblue;
}

*[data-event-format~="Legacy"] {
	color: purple;
}

*[data-event-format~="Limited"][data-event-format~="Standard"], *[data-event-format~="Limited"][data-event-format~="Modern"],
	*[data-event-format~="Standard"][data-event-format~="Modern"] {
	color: orange;
}

*[data-event-format~="Team"] {
	font-style: italic;
}

.bill thead {
	background-color: #EEF;
}

.bill tbody {
	background-color: #FFE;
}

.bill tfoot {
	background-color: #EFE;
}

.bill th, .bill td {
	padding: 2px 8px;
}

.bill table {
	border-collapse: collapse;
	margin: 0;
}

.bill tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.5);
}

.bill thead, .bill tbody, .bill tfoot {
	border: 2px silver outset;
}

.bill th {
	text-align: left;
}

.bill th.number {
	text-align: right;
}

.bill .euro:after {
	content: " €";
}

.bill .revenue {
	color: green;
}

.bill .expense {
	color: red;
}

.graph-wrapper {
	display: block;
	overflow: auto;
}

svg {
	display: block;
	background: silver;
}

svg .graph-axes path {
	stroke: #196F69;
	stroke-width: 2px;
}

svg .graph-values path, svg .graph-values rect {
	fill: white;
	stroke: gray;
}

svg .graph-values rect.win {
	fill: green;
}

svg .graph-values rect.draw {
	fill: orange;
}

svg .graph-values rect.loss {
	fill: red;
}

svg text {
	font-weight: bold;
	font-size: 1.3em;
	fill: white;
	stroke: black;
	font-family: sans-serif;
}

svg .graph-captions.dci text {
	font-size: 2em;
	dominant-baseline: hanging;
}

svg .graph-captions.year text {
	font-size: 3em;
	dominant-baseline: hanging;
}

svg .graph-captions.set text {
	dominant-baseline: hanging;
}

svg a {
	fill: rgb(63, 63, 255);
}