h1, h2 {
	font-family:	"Beleren", serif;
}

.set-symbol {
	float:			right;
	margin-right:	.5em;
}

ul {
	list-style:		none;
	margin:			0;
	padding:		0;
}
.card {
	clear:			left;
	margin-top:		1em;
	display: block;
}
li .box {
	/* I don't think this was avaliable when this template was originally made.*/
	display: flex;
	flex-direction: column;
}

.box {
	border:			1px solid rgb(192,192,192);
}
.test {
	float: left;
}

.card span {
	display:		block;
}

.card .name {
	font-weight:	bold;
	display:		inline;
	font-family:	"Beleren", serif;
	font-size:		larger;
}
.card .casting-cost {
	display:		inline;
	font-family:	"Magic Symbols", "Magic Symbols 2004", sans-serif;
	font-size:		larger;
	margin-left:	.5em;
	vertical-align:	middle;
}

.card .flavor-text {
	font-style:		italic;
}
.card .card-number {
	color:			rgb(128,128,128);
	font-size:		smaller;
}


.with-previews .card {
	margin-top:		1.1em;
	min-height:		100px;
	position:		relative;
}
.card .card-image {
	height:			100px;
	float: 			left;
	top:			3px;
	margin:			3px;
	border:			none;
}
.card .image {
	display:		block;
	border:			none;
}

span.symbol {
	display:		inline;
	vertical-align:	middle;
}

.fullcard {
	float:			left;
}
h2 {
	clear:			both;
}

/* image preview */
#preview-bg {
	background-color: rgb(0,0,0);
	width:			100%;
	height:			100%;
	cursor:			pointer;
	position:		absolute;
	opacity:		0.7;
	-moz-opacity:	0.7;
	filter:         alpha(opacity=70);
}
#preview-img {
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	width:			100%;
	height:			100%;
	cursor:			pointer;
	position:		absolute;
}
#preview {
	position:		fixed;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
}
* html #preview {
	position:		absolute;
}

@media print {
	li {
	  break-inside: avoid;
	}
}