@charset "utf-8";
/* CSS Document */

/*MAIN*/

body
{
	background: #006600;
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 16px;
	margin: 0px;
}

div.container
{

	width: 1200px;
	height: 900px;
	border: 1px solid #FFF;
	border-radius: 10px;
	margin: 20px auto 0px auto;
	
}

div.clear
{
	clear: both;
}

div.buttons
{
	float: left;
}

div.new
{
	width: 68px;
	background: #960;
	padding: 5px;
	margin: 10px 0px 0px 10px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #000;
	cursor: pointer;
}

a
{ 
	text-decoration: none;
	color: #000;
}

/* PILE */

div.pile
{
	width: 100px;
	height: 150px;
	background: rgba(255,255,255,0.5);
	border-radius: 5px;
	float: left;
	margin: 15px;
}

div.pilewrapper
{
	margin: 10px 45px;
}


/*DECK*/

div.deck
{
	width: 350px;
	height: 200px;
	border: 1px solid #FFF;	
	border-radius: 5px;
	float: left;
	margin: 10px 10px 10px 10px;
	background: #900;
}


div.deck div.stock
{
	
}

div.deck div.waste
{
	
}

/*FOUNDATION*/

div.foundation
{
	width: 610px;
	height: 200px;
	border: 1px solid #FFF;	
	border-radius: 5px;
	float: right;
	margin: 10px 100px 10px 10px;
	background: #306;
}

/*TABLEAU*/


div.tableau
{
	width: 1000px;
	height: 650px;
	border: 1px solid #FFF;	
	border-radius: 5px;
	background: #960;
	margin: 10px auto;

}


/*CARD*/

div.card
{
	width: 98px;
	height: 148px;	
	background: #FFF;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 20px;
	font-weight: bold;
	position:relative;
	line-height: 15px;
	cursor: pointer;
}

div.card.selected
{
	background: red;
}

div.card.closed
{
	background: #09C;
}
div.value {}

div.value.top
{
	position: absolute;
	top: 10px ;
	left: 10px;

}

div.value.bottom
{
	transform:rotate(180deg);
	position: absolute;
	bottom: 10px;
	right: 10px;
}

div.hearts
{
	color: #900;
}

div.hearts div.suit:after
{
	content: "\2665";
}


div.diamonds
{
	color: #900;
}

div.diamonds div.suit:after
{
	content: "\2666";
}

div.spades
{
	color: #000;

}
div.spades div.suit:after
{
	content: "\2660";
}

div.clubs
{
	color: #000;
}

div.clubs div.suit:after
{
	content: "\2663";
}



/*CARD PLACEMENT*/
div.stock div.card, div.foundation div.card
{
	float: left;
	margin-bottom: -150px;	
}

div.waste div.card
{
	float: left;
	margin-right: -100px;
}

div.waste div.card.open
{
	margin-right: -80px;
}

div.tableau div.card
{
	margin-bottom: -105px;
}

div.tableau div.card.closed
{
	margin-bottom: -145px;	
}