/***********************************
 * MArcomage CSS stylesheet - card *
 ***********************************/

/*
	card layout: 

	<div class="karta [?]_class [?]_cost {with_bgimage}">
		<div class="[cost]">[value]</div> {+}
		<h5>[name]</h5>
		<img src="[path]" width="80px" height="60px" alt="" />
		<p><b>[keywords]</b></p>
		<p>[effect]</p>
	</div>
*/


div.karta /* card */
{
	width: 86px;
	border-color: white;
	border-style: ridge;
	border-radius: 7px;
	margin: 1.5ex 0.5ex 0.7ex 0.5ex;
	font-size: x-small;
	text-align: left;
	color: black;
	min-height: 18px;
}

tr.hand div.karta /* add extra margin when cards are displayed in the "hand" part of the game section*/
{
	margin: 1.5ex 3ex 0.7ex 3ex;
}

div.history div.karta /* add extra margin when cards are displayed in the "history" part of the game section*/
{
	margin: 1.5ex 0.5ex 0.7ex 0.5ex;
}


/* background color, based on cost */
div.karta.bricks_cost { background-color: #bc8f8f; } /* RosyBrown */
div.karta.gem_cost    { background-color: #00bfff; } /* DeepSkyBlue */
div.karta.rec_cost    { background-color: #8fbc8f; } /* DarkSeaGreen */
div.karta.mixed_cost  { background-color: #b8860b; } /* DarkGoldenRod */
div.karta.zero_cost   { background-color: #dcdcdc; } /* Gainsboro */

/* background image, based on cost */
div.karta.bricks_cost.with_bgimage { background-image: url('../img/card/bricks_bg.png'); }
div.karta.gem_cost.with_bgimage    { background-image: url('../img/card/gems_bg.png');    }
div.karta.rec_cost.with_bgimage    { background-image: url('../img/card/recruits_bg.png');    }
div.karta.mixed_cost.with_bgimage  { background-image: url('../img/card/mixed_bg.png');  }
div.karta.zero_cost.with_bgimage   { background-image: url('../img/card/zero_bg.png');   }

/* background image, based on cost - foil version */
div.karta.bricks_cost.with_bgimage.foil { background-image: url('../img/card/foil_bricks_bg.png'); }
div.karta.gem_cost.with_bgimage.foil    { background-image: url('../img/card/foil_gems_bg.png');    }
div.karta.rec_cost.with_bgimage.foil    { background-image: url('../img/card/foil_recruits_bg.png');    }
div.karta.mixed_cost.with_bgimage.foil  { background-image: url('../img/card/foil_mixed_bg.png');  }
div.karta.zero_cost.with_bgimage.foil   { background-image: url('../img/card/foil_zero_bg.png');   }

/* card title */
div.karta > h5
{
	font-weight: normal;
	font-size: x-small;
	margin: 0.5ex;
	color: black;
	text-shadow: none;
}


/* resource cost */
div.all, div.null, div.rek, div.gemy, div.tehla
{
	padding: 2px 0px 0px 0px;
	font-weight: bold;
	background-position: center center;
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	text-align: center;
	float: right;	
}
div.karta > div.tehla { background-image: url('../img/card/bricks_cost.png');   }
div.karta > div.all   { background-image: url('../img/card/mixed_cost.png');     }
div.karta > div.null  { background-image: url('../img/card/zero_cost.png');    }
div.karta > div.gemy  { background-image: url('../img/card/gems_cost.png');    }
div.karta > div.rek   { background-image: url('../img/card/recruits_cost.png'); }


/* border around the card image, based on rarity */
div.karta                > img { border-style: ridge; border-radius: 5px; }
div.karta.common_class   > img { border-color: Lime; }
div.karta.uncommon_class > img { border-color: #8b0000; } /* DarkRed */
div.karta.rare_class     > img { border-color: Yellow; }
div.karta.no_class       > img { border-color: White; }


/* card mini flags */
div.miniflags
{
	float: left;
	margin-top: -63px;
	margin-left: 3px;
}

/* card mini flags images */
div.miniflags > img
{
	border: thin solid white;
}

/* set distance of the card text from the card image (if miniflags setting is active) */
div.karta > div.clear_floats + p
{
	margin-top: 0.5ex;
}


/* set distance of the card text from the card border (left and right) */
div.karta > p, div.karta > p + div
{
	padding: 0ex 0.5ex 0ex 0.5ex;
}

/* set bottom distance of the card text from the card border */
div.karta > p + div
{
	padding-bottom: 0.5ex;
}

/* override default link font color within the card */
div.karta a
{
	color: inherit;
}

/* hidden card layout */
div.hidden_card
{
	width: 86px;
	height: 100px;
	border-color: white;
	border-style: ridge;
	border-radius: 7px;
	margin: 1ex 0.5ex 0.7ex 0.5ex;
	background-color: black;
	background-image: url('../img/card/hidden_card.png');
	background-repeat: repeat;
}

/* keyword insignia layout */
img.insignia
{
	border: thin solid black;
	vertical-align: middle;
}