@charset "utf-8";
/*
Designer: KLP
File: yahtzee_scorecard.css
Date: 8/9/21
Path: Path: OD\Subjects\Programming\JavaScript\Projects\YahtzeeJS2021-22\YahtzeeJS-Stage4

Styles for the scorecard
Scorecard is not clickable until game starts

*/
div#scoreCard {
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF5BC;
	margin-top: 10px;
	border-radius: 10px;
	height: 350px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid lightgray;
	padding-bottom: 15px;
	/*possibly use this as game-on indicator?*/
	/*	border-top: 3px solid red;*/ 
}

div#scoreCard h2 {
	text-align: center;
	margin-bottom: 2px;
}

div#leftScore,
div#rightScore {
	border: 1px solid lightgray;
	border-radius: 10px;
	width: 45%;
	padding: 10px;
}

div#leftScore {
	float: left;
	margin-bottom: 10px;
}

div#rightScore {
		float: right;
		width: 45%;
}

div #leftScore table{
	float: right;
}

div #rightScore table{
	float: left;
}

/*eureka: use padding for columns, not margins for rows*/
div#leftScore table td,
div#rightScore table td {
	padding-bottom: 2px;
	font-size: .9em;
}

div#leftScore table tr td:first-child,
div#rightScore table tr td:first-child {
	text-align: right;
	font-weight: bold;
	padding-right: 5px;
	width: 60%;
}

div#leftScore table tr td:nth-child(2),
div#rightScore table tr td:nth-child(2) {
	background-color: white;
	width: 40%;
	text-align: right;
}

div#leftScore table tr td,
div#rightScore table tr td {
	margin-bottom: 5px;
	background-color: #f7e580;
}

div#leftScore table tr td.gap{
	padding-bottom: 10px;
}

div#rightScore table tr td.gap{
	padding-bottom: 35px;
}

div#scoreCard h3#grandTotal {
		text-align: center;
		clear: both;
}

div#scoreCard.inactive td{
	cursor:default;
}