#templateBackground
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 768px;
    margin: 0px auto;
    background-image: url(images/1024x768/ConcentrationBackground.png);
	background-repeat: no-repeat;
	background-size: 1024px 768px;
}

#divCardCount
{
    float: left;
	width: 420px;
    margin: 21px;
	text-align: left;
}
	#divCardCount button {
		border: 2px solid #000000;
		border-radius: 14px;
		background-color: rgba(255,255,255,0.84);
		font-size: 17px;
		-moz-box-shadow: 0px 0px 7px #000000;
		-webkit-box-shadow: 0px 0px 7px #000000;
		box-shadow: 0px 0px 7px #000000;
	}
	#divCardCount button: hover {
		background-color: rgba(255,255,255,0.91);
	}
	#divCardCount button: active {
		background-color: rgba(255,255,255,0.98);
	}
#divGameType
{
    float: right;
	width: 520px;
    margin: 21px;
	text-align: right;
}
	#divGameType button {
		border: 2px solid #000000;
		border-radius: 14px;
		background-color: rgba(255,255,255,0.84);
		font-size: 17px;
		-moz-box-shadow: 0px 0px 7px #000000;
		-webkit-box-shadow: 0px 0px 7px #000000;
		box-shadow: 0px 0px 7px #000000;
	}
	#divGameType button: hover {
		background-color: rgba(255,255,255,0.91);
	}
	#divGameType button: active {
		background-color: rgba(255,255,255,0.98);
	}
#divCardCount button.activated,
#divGameType button.activated {
	background-color: rgba(121,181,68,0.84);
}


.cardTable
{
    position: absolute;
    table-layout: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid #000000;
	-moz-box-shadow: 0px 0px 21px #000000;
	-webkit-box-shadow: 0px 0px 21px #000000;
	box-shadow: 0px 0px 21px #000000;
}

.card
{
	display: table-cell;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #0080FF;
    font-size: 21px;
    font-family: Sans-Serif;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000000;
	-moz-box-shadow: 0px 0px 7px #000000;
	-webkit-box-shadow: 0px 0px 7px #000000;
	box-shadow: 0px 0px 7px #000000;
}
	
	.hidecardtext {
		color: transparent !important;
	}
	.showcardtext {
		color: #0080FF !important;
	}
	
	.hidecardborder
	{
		border: 1px solid transparent !important;
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}
	.showcardborder
	{
		border: 1px solid #000000 !important;
		-moz-box-shadow: 0px 0px 7px #000000 !important;
		-webkit-box-shadow: 0px 0px 7px #000000 !important;
		box-shadow: 0px 0px 7px #000000 !important;
	}

/*
=================================================
iPhone (w/Retina Display)
=================================================
*/
@media only screen  
and (max-width : 960px) 
and (max-height : 640px) {
	#templateBackground
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 960px; /*mod*/
		height: 640px; /*mod*/
		margin: 0px auto;
		background-image: url(images/960x640/ConcentrationBackground.png); /*mod*/
		background-repeat: no-repeat;
		background-size: 960px 640px; /*mod*/
	}
	
	#divCardCount
	{
		float: left;
		width: 394px; /*mod*/
		margin: 19px; /*mod*/
		text-align: left;
	}
		#divCardCount button {
			border: 1px solid #000000; /*mod*/
			border-radius: 12px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 15px; /*mod*/
			-moz-box-shadow: 0px 0px 3px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 3px #000000; /*mod*/
			box-shadow: 0px 0px 3px #000000; /*mod*/
		}
		#divCardCount button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divCardCount button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divGameType
	{
		float: right;
		width: 488px; /*mod*/
		margin: 19px; /*mod*/
		text-align: right;
	}
		#divGameType button {
			border: 1px solid #000000; /*mod*/
			border-radius: 14px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 15px; /*mod*/
			-moz-box-shadow: 0px 0px 3px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 3px #000000; /*mod*/
			box-shadow: 0px 0px 3px #000000; /*mod*/
		}
		#divGameType button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divGameType button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divCardCount button.activated,
	#divGameType button.activated {
		background-color: rgba(121,181,68,0.84);
	}
	
	
	.cardTable
	{
		position: absolute;
		table-layout: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 19px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 19px #000000; /*mod*/
		box-shadow: 0px 0px 19px #000000; /*mod*/
	}
	
	.card
	{
		display: table-cell;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #0080FF;
		font-size: 19px; /*mod*/
		font-family: Sans-Serif;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 6px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 6px #000000; /*mod*/
		box-shadow: 0px 0px 6px #000000; /*mod*/
	}
		
		.hidecardtext {
			color: transparent !important;
		}
		
		.hidecardborder
		{
			border: 1px solid transparent !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
}

/*
=================================================
Android Tablets [800x600]
=================================================
*/
@media only screen  
and (max-width : 800px)
and (max-height : 600px) {
	#templateBackground
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 800px; /*mod*/
		height: 600px; /*mod*/
		margin: 0px auto;
		background-image: url(images/960x640/ConcentrationBackground.png); /*mod*/
		background-repeat: no-repeat;
		background-size: 800px 600px; /*mod*/
	}
	
	#divCardCount
	{
		float: left;
		width: 328px; /*mod*/
		margin: 16px; /*mod*/
		text-align: left;
	}
		#divCardCount button {
			border: 1px solid #000000; /*mod*/
			border-radius: 11px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 13px; /*mod*/
			-moz-box-shadow: 0px 0px 2px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 2px #000000; /*mod*/
			box-shadow: 0px 0px 2px #000000; /*mod*/
		}
		#divCardCount button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divCardCount button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divGameType
	{
		float: right;
		width: 406px; /*mod*/
		margin: 16px; /*mod*/
		text-align: right;
	}
		#divGameType button {
			border: 1px solid #000000; /*mod*/
			border-radius: 11px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 13px; /*mod*/
			-moz-box-shadow: 0px 0px 2px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 2px #000000; /*mod*/
			box-shadow: 0px 0px 2px #000000; /*mod*/
		}
		#divGameType button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divGameType button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divCardCount button.activated,
	#divGameType button.activated {
		background-color: rgba(121,181,68,0.84);
	}
	
	
	.cardTable
	{
		position: absolute;
		table-layout: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 16px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 16px #000000; /*mod*/
		box-shadow: 0px 0px 16px #000000; /*mod*/
	}
	
	.card
	{
		display: table-cell;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #0080FF;
		font-size: 16px; /*mod*/
		font-family: Sans-Serif;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 5px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 5px #000000; /*mod*/
		box-shadow: 0px 0px 5px #000000; /*mod*/
	}
		
		.hidecardtext {
			color: transparent !important;
		}
		
		.hidecardborder
		{
			border: 1px solid transparent !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
}

/*
=================================================
Android Tablets [800x480]
=================================================
*/
@media only screen  
and (max-width : 800px)
and (max-height : 480px) {
	#templateBackground
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 800px; /*mod*/
		height: 480px; /*mod*/
		margin: 0px auto;
		background-image: url(images/960x640/ConcentrationBackground.png); /*mod*/
		background-repeat: no-repeat;
		background-size: 800px 480px; /*mod*/
	}
	
	#divCardCount
	{
		float: left;
		width: 328px; /*mod*/
		margin: 16px; /*mod*/
		text-align: left;
	}
		#divCardCount button {
			border: 1px solid #000000; /*mod*/
			border-radius: 11px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 13px; /*mod*/
			-moz-box-shadow: 0px 0px 2px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 2px #000000; /*mod*/
			box-shadow: 0px 0px 2px #000000; /*mod*/
		}
		#divCardCount button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divCardCount button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divGameType
	{
		float: right;
		width: 406px; /*mod*/
		margin: 16px; /*mod*/
		text-align: right;
	}
		#divGameType button {
			border: 1px solid #000000; /*mod*/
			border-radius: 11px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 13px; /*mod*/
			-moz-box-shadow: 0px 0px 2px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 2px #000000; /*mod*/
			box-shadow: 0px 0px 2px #000000; /*mod*/
		}
		#divGameType button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divGameType button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divCardCount button.activated,
	#divGameType button.activated {
		background-color: rgba(121,181,68,0.84);
	}
	
	
	.cardTable
	{
		position: absolute;
		table-layout: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 16px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 16px #000000; /*mod*/
		box-shadow: 0px 0px 16px #000000; /*mod*/
	}
	
	.card
	{
		display: table-cell;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #0080FF;
		font-size: 16px; /*mod*/
		font-family: Sans-Serif;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 5px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 5px #000000; /*mod*/
		box-shadow: 0px 0px 5px #000000; /*mod*/
	}
		
		.hidecardtext {
			color: transparent !important;
		}
		
		.hidecardborder
		{
			border: 1px solid transparent !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
}

/*
=================================================
Mobile Firefox [800x402] viewport for [800x480] Android Tablets
=================================================
*/
@media only screen  
and (max-width : 800px)
and (max-height : 402px) {
	#templateBackground
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 800px; /*mod*/
		height: 402px; /*mod*/
		margin: 0px auto;
		background-image: url(images/960x640/ConcentrationBackground.png); /*mod*/
		background-repeat: no-repeat;
		background-size: 800px 402px; /*mod*/
	}
	
	#divCardCount
	{
		float: left;
		width: 328px; /*mod*/
		margin: 16px; /*mod*/
		text-align: left;
	}
		#divCardCount button {
			border: 1px solid #000000; /*mod*/
			border-radius: 11px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 13px; /*mod*/
			-moz-box-shadow: 0px 0px 2px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 2px #000000; /*mod*/
			box-shadow: 0px 0px 2px #000000; /*mod*/
		}
		#divCardCount button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divCardCount button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divGameType
	{
		float: right;
		width: 406px; /*mod*/
		margin: 16px; /*mod*/
		text-align: right;
	}
		#divGameType button {
			border: 1px solid #000000; /*mod*/
			border-radius: 11px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 13px; /*mod*/
			-moz-box-shadow: 0px 0px 2px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 2px #000000; /*mod*/
			box-shadow: 0px 0px 2px #000000; /*mod*/
		}
		#divGameType button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divGameType button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divCardCount button.activated,
	#divGameType button.activated {
		background-color: rgba(121,181,68,0.84);
	}
	
	
	.cardTable
	{
		position: absolute;
		table-layout: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 16px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 16px #000000; /*mod*/
		box-shadow: 0px 0px 16px #000000; /*mod*/
	}
	
	.card
	{
		display: table-cell;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #0080FF;
		font-size: 16px; /*mod*/
		font-family: Sans-Serif;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 5px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 5px #000000; /*mod*/
		box-shadow: 0px 0px 5px #000000; /*mod*/
	}
		
		.hidecardtext {
			color: transparent !important;
		}
		
		.hidecardborder
		{
			border: 1px solid transparent !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
}

/*
=================================================
iPhone, Android, and other smartphones [480x320]
=================================================
*/
@media only screen  
and (max-width : 480px) {
	#templateBackground
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 480px; /*mod*/
		height: 320px; /*mod*/
		margin: 0px auto;
		background-image: url(images/480x320/ConcentrationBackground.png); /*mod*/
		background-repeat: no-repeat;
		background-size: 480px 320px; /*mod*/
	}
	
	#divCardCount
	{
		float: left;
		width: 180px; /*mod*/
		margin: 9px; /*mod*/
		text-align: left;
	}
		#divCardCount button {
			border: 1px solid #000000; /*mod*/
			border-radius: 7px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 9px; /*mod*/
			-moz-box-shadow: 0px 0px 3px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 3px #000000; /*mod*/
			box-shadow: 0px 0px 3px #000000; /*mod*/
		}
		#divCardCount button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divCardCount button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divGameType
	{
		float: right;
		width: 260px; /*mod*/
		margin: 9px; /*mod*/
		text-align: right;
	}
		#divGameType button {
			border: 1px solid #000000; /*mod*/
			border-radius: 7px; /*mod*/
			background-color: rgba(255,255,255,0.84);
			font-size: 9px; /*mod*/
			-moz-box-shadow: 0px 0px 3px #000000; /*mod*/
			-webkit-box-shadow: 0px 0px 3px #000000; /*mod*/
			box-shadow: 0px 0px 3px #000000; /*mod*/
		}
		#divGameType button: hover {
			background-color: rgba(255,255,255,0.91);
		}
		#divGameType button: active {
			background-color: rgba(255,255,255,0.98);
		}
	#divCardCount button.activated,
	#divGameType button.activated {
		background-color: rgba(121,181,68,0.84);
	}
	
	
	.cardTable
	{
		position: absolute;
		table-layout: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 9px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 9px #000000; /*mod*/
		box-shadow: 0px 0px 9px #000000; /*mod*/
	}
	
	.card
	{
		display: table-cell;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #0080FF;
		font-size: 14px; /*mod*/
		font-family: Sans-Serif;
		text-align: center;
		vertical-align: middle;
		border: 1px solid #000000; /*mod*/
		-moz-box-shadow: 0px 0px 3px #000000; /*mod*/
		-webkit-box-shadow: 0px 0px 3px #000000; /*mod*/
		box-shadow: 0px 0px 3px #000000; /*mod*/
	}
		
		.hidecardtext {
			color: transparent !important;
		}
		
		.hidecardborder
		{
			border: 1px solid transparent !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
}