/***********************************
 * 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;
	-moz-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/bricks_cost.jpg'); }
div.karta.gem_cost.with_bgimage    { background-image: url('../img/gem_cost.jpg');    }
div.karta.rec_cost.with_bgimage    { background-image: url('../img/rec_cost.jpg');    }
div.karta.mixed_cost.with_bgimage  { background-image: url('../img/mixed_cost.jpg');  }
div.karta.zero_cost.with_bgimage   { background-image: url('../img/zero_cost.jpg');   }


/* 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/tehly.png');   }
div.karta > div.all   { background-image: url('../img/all.png');     }
div.karta > div.null  { background-image: url('../img/null.png');    }
div.karta > div.gemy  { background-image: url('../img/gemy.png');    }
div.karta > div.rek   { background-image: url('../img/reckuts.png'); }


/* border around the card image, based on rarity */
div.karta                > img { border-style: ridge; -moz-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; }


/* 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;
}

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