body {
	background-color: #5c87b2;
	font-size: 1em;
	font-family: Segoe UI,Verdana,Helvetica,Sans-Serif;
	margin: 0;
	padding: 0;
	min-width: 1280px;
	color: #365F91;
}

p {
	margin-bottom: 20px;
	line-height: 1.5em;
}

/* Headings ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	color: #365F91;
}

h1 {
	font-size: 2em;
	padding-bottom: 0;
	margin-bottom: 6px;
	border-bottom: 2px solid silver;
}

h2 {
	font-size: 1.5em;
	padding: 0 0 10px 0;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1.1em;
}

h5, h6 {
	font-size: 1em;
}

/* Links -------------------------------------------------------------*/
a {
	padding: 2px 2px 2px 2px;
	color: #BAD430;
}

	a img {
		border: solid 1px #bad430;
	}

	a:hover, a.nav-link:hover {
		color: yellow; /*#B5985C; */
		text-decoration: underline;
	}

	a.selected {
		border-bottom: solid 3px #BAD430;
	}

#page {
	width: 100%;
	padding: 0 16px;
}

#header, #mainmenu ul {
	padding: 0;
	font-size: 14pt;
}

#mainmenu li {
	display: inline;
	margin: 8px 2px 0 0;
	padding: 4px 4px 0 4px;
	list-style: none;
	vertical-align: top;
}

	#mainmenu li img {
		margin-left: -14px;
		margin-top: -6px;
	}

#mainmenu .rightside {
	margin-right: 24px;
	margin-top: -.3em;
	float: right;
}

nav {
	margin-top: -16px;
	margin-bottom: 60px;
}

.nav-link {
	color: whitesmoke;
}

.navbar-brand {
	visibility: hidden;
	margin-top: 20px;
}

	.navbar-brand:hover {
		visibility: visible;
	}

#footer {
	text-align: center;
	color: #fff;
	padding: 1em;
	line-height: normal;
	font-size: .9em;
}

#Play101, #Play301, #Play501, #Play701, #Play1001 {
	background: white url(../images/gameboard.gif) no-repeat top center;
	margin-top: -64px;
	height: 100%;
	min-height: 1000px;
	font-size: 16pt;
}

#PlayTactics, #PlayCricket, #PlayKiller {
	background: white url(../images/tacticsboard.gif) no-repeat top center;
	margin-top: -64px;
	height: 100%;
	min-height: 1000px;
	font-size: 16pt;
}

#gameheader {
	width: 100%;
	margin: 16px auto;
	font-size: 28pt;
	font-family: 'Comic Sans MS';
	text-align: center;
}

	#gameheader .p1 {
		float: left;
		/*text-align:right;*/
		padding: -16px 0 0 0;
		width: 41%;
		font-size: 150%;
	}

	#gameheader .gametype {
		float: left;
		width: 18%;
		font-weight: bold;
		font-size: 150%;
		color: green;
	}

	#gameheader .p2 {
		float: left;
		/*text-align:left; */
		padding: -16px 0 0 0;
		width: 41%;
		font-size: 150%;
	}

	#gameheader .p1wins, #gameheader .p2wins {
		margin-top: -90px;
		font-size: 80%;
		color: #B5985C;
	}

	#gameheader .p1wins {
		float: left;
	}

	#gameheader .p2wins {
		float: right;
	}

#scoresheet {
	font-size: 32pt;
	width: 100%;
}

.scoreform {
	background-color: #d2d200;
	padding: 16px;
	font-size: 22pt;
	width: 100%;
	border: solid 1px lightgray;
	overflow: hidden;
}

	.scoreform input {
		/*font-size:18pt;*/
		text-align: center;
	}

.form {
	background-color: #d2d200;
	margin: 48px auto;
	padding: 24px;
	font-size: 18pt;
	width: 70%;
	border: solid 1px black;
	overflow: hidden;
	border-radius: 12px;
}

	.form input {
		font-size: 22pt;
		text-align: center;
	}

	.form fieldset {
		padding: 24px;
		border: solid 1px black;
		border-radius: 8px;
		background-color: #f4fae5;
	}

	.form .form-footer {
		text-align: center;
	}

	.form button {
		margin-top: 24px;
		font-size: 22pt !important;
	}

.winner {
	width: 60%;
	margin-left: 20%;
	color: orange;
	border: 4px solid white;
	padding:3%;
	border-radius:60%;
	background-color: #d2d200;
	text-align: center;
}

	.winner button {
		font-size: 115%;
	}

/*.winner {
	width: 100%;
	height: 100%;
	padding: 32px;
	margin-left: 0;
	color: orange;
	border: 1px solid orangered;
	background-color: #f4fae5;
	text-align: center;
}

	.winner button {
		margin: 12px;
	}
*/
.score1, .score2 {
	width: 24%;
}
/*
.score2 {
	margin-left:1%;
}*/

#S1, #S2 {
	/*border-color: #0a58ca;*/
	width: 50%;
	margin: 10px 0 4px 0;
	border: solid 2px black;
	box-shadow: lightgray 4px 4px;
}

.greyout {
	background-color: lightgray;
	border: none;
}

.recordedscore1, .recordedscore2 {
	width: 16%;
}

/*.score1:first-child, .score2:first-child {
	font-size: 9px !important;
	color: red;
}*/

.scoreform .score1, .scoreform .score2, .fastscore, .centerpart {
	float: left;
	text-align: center;
}

.centerpart {
	width: 7%;
	padding-bottom: 8px;
	font-weight: bold;
}

.stats {
	font-size: 70%;
	color: Gray;
}

table.fastscore tr {
	line-height: 1;
}

.fastscore {
	width: 17%;
	margin-top: 12px;
	font-size: 90%;
	border: solid 1px white;
}

table.fastscore tr {
	line-height: 1;
}

.fastscore {
	z-index: -1;
	width: 22%;
	margin-top: 4px;
	font-size: 80%;
	border: solid 1px gray;
	border-collapse: collapse;
}

	.fastscore th, .fastscore td {
		line-height: 1.1em;
		text-align: center;
	}

	.fastscore a, .fastscore a:visited {
		z-index: -1;
		color: white;
		margin: 0;
		padding: 2px;
		text-decoration: none;
		font-weight: 400;
	}

		.fastscore a:hover {
			color: #0d6efd;
		}

.fastscore-finish {
	color: orangered !important;
	font-weight: 500 !important;
}

.remainder1 {
	width: 31%;
}

.remainder2 {
	width: 31%;
}

.winner {
	width: 100%;
	height: 100%;
	padding: 32px;
	margin-left: 0;
	color: orange;
	border: 1px solid orangered;
	background-color:#f4fae5;
	text-align: center;
}

	.winner button {
		margin: 12px;
	}

#tickssheet, .rowofticks {
	font-size: 32pt;
	width: 100%;
	font-family: 'Comic Sans MS';
}

	.rowofticks .centrepart {
		font-size: 110%;
		vertical-align: bottom;
		text-align: center;
	}

	.rowofticks:hover {
	}

	.rowofticks .tickscore {
		width: 15%;
		text-align: center;
	}

	.rowofticks .ticks {
		width: 29%;
		overflow: hidden;
		font-size: 150%;
		vertical-align: top;
		line-height: 100%;
		color: black;
	}

		.rowofticks .ticks.right {
			text-align: right;
		}


		.rowofticks .ticks.left {
			text-align: left;
		}

			.rowofticks .ticks.right:hover,
			.rowofticks .ticks.left:hover {
				background-color: whitesmoke;	/* #e0f9f6 ;
												/*border:dotted 1px lightblue;*/
				opacity: 0.98;
			}

.numberclosed {
	opacity: 0.3;
}

.strikeright {
	background-color: transparent;
	background-image: gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, transparent), color-stop(.48, transparent), color-stop(.5, #000), color-stop(.52, transparent), color-stop(1, transparent));
	background-image: repeating-linear-gradient(168deg, transparent 0%, transparent 48%, #000 50%, transparent 52%, transparent 100%);
	/*background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 2px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 2px), rgba(0,0,0,0) 100%);*/
}

.strikeleft {
	background-color: transparent;
	background-image: gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, transparent), color-stop(.48, transparent), color-stop(.5, #000), color-stop(.52, transparent), color-stop(1, transparent));
	background-image: repeating-linear-gradient(16deg, transparent 0%, transparent 48%, #000 50%, transparent 52%, transparent 100%);
	/*background: linear-gradient(to top right, rgba(0,0,0,0) 10%, rgba(0,0,0,0) calc(50% - 2px), rgba(0,0,0,1) 40%, rgba(0,0,0,0) calc(50% + 2px), rgba(0,0,0,0) 90%);*/
}

/* Message styles ----------------------------------------------------*/
/*div.message { background:Gray;color:White;padding:.4em;margin-bottom:1.5em;}

.message { height:16px; margin:0; padding:0 0 4px; width:100%;}*/
.message, .usermessage, .errormessage {
	font-size: 28px;
	text-align: left;
	width: 100%;
	padding: 0;
	color: #808080;
}

.success {
	padding: 3px 0 3px 40px;
	border: solid 1px #d2d200;
	background: #fdffef url(../images/success.gif) no-repeat 8px center;
}

.warning {
	padding: 3px 0 3px 40px;
	border: solid 1px #ffbd6f;
	background: #ffe9cf url(../images/warning.gif) no-repeat 8px center;
}

.error {
	padding: 3px 0 3px 40px;
	border: solid 1px #ff876f;
	background: #ffbcaf url(../images/stop.gif) no-repeat 8px center;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
	color: #ff0000;
}

.field-validation-valid {
	display: none;
}

.input-validation-error {
	border: 1px solid #ff0000;
	background-color: #ffeeee;
}

.validation-summary-errors {
	font-weight: bold;
	color: #ff0000;
}

.validation-summary-valid {
	display: none;
}

#rules {
	font-size: smaller;
}