@charset "UTF-8";

	.card {
		display:inline-block;
		position:relative;
		width:6em;
		height:9em;
		border:2px solid black;
		border-radius:8px;
		background-color:white;
		-webkit-touch-callout: none; /* iOS Safari */
    	-webkit-user-select: none; /* Safari */
     	-khtml-user-select: none; /* Konqueror HTML */
       	-moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	}
	
	.card div {
		position:absolute;
		text-align:center;
	}
	
	.card.clickable { cursor:pointer; }
	
	.card.notallowed { background-color:lightpink; }
	
	.card.covered { background-image: url("cardback.gif"); }
	.card.covered div { display:none; }
	
	.card .left { left:0.2em; }
	.card .right { right:0.2em; }
	.card .top { top:0.2em; }
	.card .bottom { bottom:0.2em; transform: rotate(180deg); }
	
	.card .middle {
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
	}
	
	.card .symbol.middle {
		font-size:2em;
	}
	
	.card .number.symbol {
		font-size:1.8em;
	}
	
	.card .image {
		top:50%;
		left:50%;
		border:1px solid black;
		transform:translate(-50%, -50%);
		border-radius:0.3em;
	}
	
	.card.hearts span.suit, .card.diams span.suit, .card.hearts span.value, .card.diams span.value { color:red; }
	
	.card .image img { width:4em; }
	.card .image-symbol { font-size: 1.5em; }
	.card .image-symbol.top { top:0.8em; left:0.7em; }
	.card .image-symbol.bottom { bottom:0.8em; right:0.7em; }
	
	.card .number.symbol.pos1, .card .number.symbol.pos3, .card .number.symbol.pos5, .card .number.symbol.pos7 { left:0.6em; }
	.card .number.symbol.pos2, .card .number.symbol.pos4, .card .number.symbol.pos6, .card .number.symbol.pos8 { right:0.6em; }
	.card .number.symbol.pos1, .card .number.symbol.pos2 { top:0.2em; }
	.card .number.symbol.pos3, .card .number.symbol.pos4 { top:1.3em; }
	.card .number.symbol.pos5, .card .number.symbol.pos6 { bottom:1.3em; }
	.card .number.symbol.pos7, .card .number.symbol.pos8 { bottom:0.2em; }
	.card .number.symbol.pos9, .card .number.symbol.pos10 { left:50%; transform:translate(-50%, 0); }
	.card .number.symbol.pos9 { top:0.8em; }
	.card .number.symbol.pos10 { bottom:0.8em; }
	
	.card .number.symbol.pos5, .card .number.symbol.pos6, .card .number.symbol.pos7, .card .number.symbol.pos8, .card .number.symbol.pos10 { transform: rotate(180deg); }
	.card .number.symbol.pos10 { transform: translate(-50%, 0) rotate(180deg); }
	
	.card.number.n8 .number.symbol.pos5, .card.number.n8 .number.symbol.pos6, .card.number.n7 .number.symbol.pos5, .card.number.n7 .number.symbol.pos6 { bottom:1.9em; }
	.card.number.n8 .number.symbol.pos9 { top:1em; }
	.card.number.n8 .number.symbol.pos10, .card.number.n7 .number.symbol.pos10 { bottom:1em; }
	
	.card.A .image, .card.A .image-symbol, .card.A .number.symbol { display:none; }
	
	.card.K .image .queen, .card.K .image .jack, .card.K .number.symbol { display:none; }
	.card.Q .image .king, .card.Q .image .jack, .card.Q .number.symbol  { display:none; }
	.card.J .image .king, .card.J .image .queen, .card.J .number.symbol  { display:none; }
	
	.card.number .image, .card.number .image-symbol { display:none; }
	
	.card.number.n10 .symbol.middle { display:none; }
	.card.number.n9 .number.symbol.pos9, .card.number.n9 .number.symbol.pos10 { display:none; }
	.card.number.n8 .number.symbol.pos3, .card.number.n8 .number.symbol.pos4, .card.number.n8 .symbol.middle { display:none; }
	.card.number.n7 .number.symbol.pos3, .card.number.n7 .number.symbol.pos4, .card.number.n7 .number.symbol.pos9, .card.number.n7 .symbol.middle { display:none; }
	
	.card.clubs .red, .card.spades .red { display:none; }
	.card.hearts .black, .card.diams .black { display:none; }