/*
OC Duffers
2/25/2011
optimized for 1024x768

5/10/2023 - optimized for cell phones
3/7/2024 - default to phone - modernize css (i.e. rem etc.)

*/
/* @import url("ocscreen.css"); */

* {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0rem;
}

html {
	background-color: #a7a7a7;
}

/* HTML ELEMENTS *************************************************************/
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 13pt;
	margin: 0;

	color: white;
	background-color: #a7a7a7;
	text-align: center;
	overflow-x: auto;

}

a {
	font-size: inherit;
	color: #a7a700;
}

a.edit {
	font-size: 1rem;
	color: white;
	text-decoration: underline;
}

a.phone,
a.phone2,
a.phone3 {
	color: white;
	text-decoration: none;
}

img {
	border: 0rem;
}

h1 {
	font-size: 1.5rem;
	color: white;
	margin: .9rem auto;
	text-align: center;
}

h2 {
	font-size: 1.3rem;
	color: #CCCCCC;
	margin: .9rem auto;
	text-align: center;
}

h3,
em {
	font-size: 1.2rem;
	color: #AAAAAA;
	margin: .9rem auto;
	text-align: center;
}

li {
	margin: 0rem 1.5rem 1rem;
}

/* FORM ELEMENTS *************************************************************/

input {
	color: black;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=number] {
	font-size: 1.2rem;
	min-width: 95%;
}

input[type=submit] {
	min-width: 10rem;
	font-size: 1.5rem;
	background-color: #a7a700;
	border: 3 solid black;
}

form .label {
	display: inline-block;
	min-width: 95%;
	text-align: center;
	font-size: 1.25rem;
	background-color: black;
}

form .label::after {
	content: "";
}

/* CLASSES *******************************************************************/
.leftColumn {
	float: none;
	width: 100%;
	overflow-x: auto;
	text-align: center;
	padding: 0rem .5rem;
	margin-bottom: 1rem;
}

.rightColumn {
	float: none;
	width: 100%;
	overflow-x: auto;
	text-align: center;
	color: #b1b1b1;
	background-color: #254e1e;

	padding: 1rem .5rem;
	margin: .0rem auto;
}

.plink {
	cursor: pointer;
	text-decoration: underline;
	color: white;
}

.button {
	font-size: 1.5rem;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	display: inline-block;

	height: 2.4rem;
	width: 85%;
	margin: .2rem Auto;
	padding: .05rem;

	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;

	color: black;

	background-image: none;
	background-color: white;
}

.button:hover {
	background-image: none;
	background-color: grey;
	color: black;
}

.button:active {
	background-image: none;
	background-color: red;
	color: inherit;

	position: relative;
	top: .3rem;
}

.buttonText {
	white-space: nowrap;
}

.hot {
	width: 85%;
	padding: .5rem Auto;

	background-image: none;
	background-color: purple;
	background-repeat: no-repeat;
}

.playerimg {
	padding: .3rem .3rem;
	height: 150px;
	cursor: pointer;
}

.pinkball {
	color: #ff8080;
}

.leaderball {
	color: #ffffff;
}

.golden {
	color: #ffd700;
}

.dnone {
	display: none;
}

.leftalign {
	text-align: left;
}

.leftalign {
	text-align: left;
}

.row {
	position: relative;
	display: block;
	top: 0rem;
	left: 0rem;
	width: 100%;
	overflow: hidden;
	margin-bottom: .5rem;
}

.row:nth-child(even) {
	background-color: #254E1E;
	padding: .5rem;
}

.row:nth-child(odd) {
	background-color: #153E0E;
	padding: .5rem;
}

.addGap6 {
	margin-bottom: .6rem;
}

.addGap12 {
	margin-bottom: 1.2rem;
}

.addGap18 {
	margin-bottom: 1.8rem;
}

/*phone only? */
.rightColumn td {
	text-align: left;
	font-size: 1.1rem;
}

.rightColumn td.tdnumeric {
	text-align: right;
	font-size: 1.1rem;
}

/* /phone only */

/* IDs ***********************************************************************/
#oclogo {
	display: none;
}

#duffers {
	position: absolute;
	left: 18px;
	top: 9px;
	width: 211px;
}

#template {
	min-height: 76.8rem;
	width: 100%;
	/*max-width: 600px;*/
	margin: 0rem 0rem;
	background-color: #356e2c;
}

#hdrbg {
	width: 100%;
}

#header,
#editheader {
	position: relative;
	width: 100%;
	height: 130px;
	color: white;
	background-color: transparent;
	/*background-image: url('/images/headerbg.png');
	background-repeat: no-repeat;*/
	z-index: 1;
	padding: 0rem 0rem;
	margin-bottom: .5rem;
	overflow: visible;
}

#pros {
	padding: 0rem .5rem;
}

#subs {
	display: none;
	padding: 0rem .5rem;
}

#target {
	display: none;
	position: absolute;
	z-index: 99;
	width: 72px;
	height: 72px;
	left: 0rem;
	top: 0rem;
	background-image: url('../images/target.png');
}


#content {
	position: relative;
	width: 100%;
	min-height: 250px;
	/*max-height: 636px;*/
	color: white;
	background-color: transparent;
	z-index: 2;
	margin-bottom: 5px;
	overflow: auto;
}

#mainimage img {
	max-width: 95vw;
}

#navLinks {
	position: absolute;
	top: 36px;
	right: 0px;
	width: 206px;
	color: #b1b1b1;
	padding: 9px 9px;
	background-color: #254e1e;
	text-align: center;
	min-height: 306px;
}

#edtNavLinks {
	position: absolute;
	top: 0rem;
	left: 0rem;
	width: 480px;
	color: white;
	padding: 9px 9px;
	text-align: left;
}

#edtNavLinks a {
	color: #a7a700;
	font-size: 1em;
}

#imgview {
	text-align: center;
	display: none;
	z-index: 50;
	position: absolute;
	left: 0rem;
	top: 0rem;
	width: 100%;
	min-height: 100%;
}

#ivbg {
	position: absolute;
	left: 0rem;
	top: 0rem;
	z-index: -10;
	width: 100%;
	min-height: 100%;
	background-color: black;
	opacity: .5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

#ivclose {
	cursor: pointer;
}

#fullsched {
	display: none;
}

#results {
	padding: 0rem 5px;
}

#ytd {
	padding: 0rem 2%;
}

/* TABLE Elements - for responsive screen should be default ******************/
table.resptable {
	width: 100%;
}

table {
	font-size: inherit;
	border-collapse: collapse;
	margin: 0rem auto;
	text-align: center;
}

tr {
	vertical-align: middle;
}

tr:nth-child(even) {
	background-color: #153E0E;
}

tr:nth-child(odd) {
	background-color: #254E1E;
}

th {
	font-size: inherit;
	padding: .5% .5% 1%;
	background-color: #000000;
	vertical-align: middle;
}

th.sortcol {
	cursor: pointer;
	/*text-decoration: underline;*/
	color: #a7a700;
}

th.sortcol.ascending::after {
	/*text-decoration: none;*/
	content: " \2191";
}

th.sortcol.descending::after {
	/*text-decoration: none;*/
	content: " \2193"
}

td {
	vertical-align: top;
	padding: .5% .5% 1%;
	font-size: inherit;
	/*text-align:left;*/
}

td.img {
	text-align: center;
}

td.sched {
	padding: .1rem .1rem;
}

td.edit {
	text-align: left;
	vertical-align: middle;
}

th.edit {
	text-align: right;
}

.tdnumeric {
	text-align: right;
	padding-right: .6rem;
}

.middle {
	vertical-align: middle;
}

@media only screen and (max-width: 800px) {

	/* PHONE TABLE Elements ****************************************/
	a.phone2,
	a.phone3,
	a.email2 {
		padding-left: 4.6em;
	}

	tr {
		vertical-align: middle;

	}

	tr:nth-child(even) {
		background-color: #153E0E;
	}

	tr:nth-child(odd) {
		background-color: #254E1E;
	}

	.resptable th {
		display: none;
	}

	.resptable td {
		display: block;
		padding: .5% .5% 1%;
		font-size: inherit;
		text-align: left;
		empty-cells: show;
	}

	.resptable td:last-child {
		margin-bottom: .25em;
	}

	.resptable td.img::before {
		content: "";
	}

	.resptable td::before {
		float: left;
		min-width: 5rem;
		content: attr(data-cell) ": ";
	}

	td.img {
		text-align: left;
	}

	td.sched {
		padding: .1rem .1rem;
	}

	td.edit {
		text-align: left;
		vertical-align: middle;
	}

	th.edit {
		text-align: right;
	}

	.tdnumeric {
		text-align: right;
		padding-right: .6rem;
	}

	.middle {
		vertical-align: middle;
	}

	/* responsive */
	table {
		width: 100%;
	}

}


/* DESKTOP ######################################################################################## */
@media only screen and (min-width: 800px) {

	/* HTML ELEMENTS *************************************************************/
	body {
		font-size: 11pt;
		margin: 0rem;
		overflow: visible;
	}

	/* FORM ELEMENTS *************************************************************/

	input[type=text],
	input[type=tel],
	input[type=email],
	input[type=number] {
		font-size: 1rem;
		min-width: 4rem;
		border: 0;
	}

	input[type=submit] {
		font-size: 1rem;
		min-width: 5rem;
	}

	form .label {
		display: inline-block;
		text-align: end;
		vertical-align: text-bottom;
		padding-left: .5rem;
		min-width: 5rem;
		font-size: 1rem;
	}

	form .label::after {
		content: ":\a0";
	}


	/* CLASSES *******************************************************************/
	.leftColumn {
		float: left;
		width: 80%;
		overflow: hidden;
		text-align: center;
		padding: 0rem 1.5rem;
	}

	.rightColumn {
		float: right;
		width: 20%;
		overflow: visible;
		text-align: left;
		color: #b1b1b1;
		padding: 1rem;
		background-color: #254e1e;
		margin-top: 3.2rem;
	}

	.rightColumn td {
		text-align: left;
		font-size: 1rem;
	}

	.rightColumn td.tdnumeric {
		text-align: right;
		font-size: 1rem;
	}

	.button {
		font-size: inherit;
		font-family: inherit;

		width: 80px;
		height: 84px;
		margin: 0rem .3rem;
		padding: 24px 6px 16px 0px;

		background-image: url('../images/golfballbd.png');
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: center;
	}

	.button:hover {
		background-image: url('../images/golfballrd.png');
		background-repeat: no-repeat;
		background-color: transparent;
		/*color: black;*/
	}

	.button:active {
		background-image: url('../images/golfball.png');
		background-repeat: no-repeat;
		background-color: transparent;
		/*color: inherit;
		position: relative;
		top: 3px;*/
	}

	.buttonText {
		white-space: pre;
	}

	.hot {
		background-image: url('../images/golfball.gif');
		background-repeat: no-repeat;
	}

	.playerimg {
		padding: 3px 3px;
		height: 150px;
		cursor: pointer;
	}

	/* IDs ***********************************************************************/
	#oclogo {
		display: block;
		position: absolute;
		left: 18px;
		top: 32px;
		width: 174px;
	}

	#duffers {
		position: absolute;
		left: 210px;
		top: 9px;
		width: 211px;
	}

	#hdrbg {
		width: 100%;
	}

	#template {
		min-height: 768px;
		max-width: 1280px;
		margin: 0rem auto;
		background-color: #356e2c;
		padding-bottom: 18px;

		/*border: 1px solid #ffff00;*/
	}

	#menu {
		min-height: 84px;
	}

	#pros {
		padding: 0rem 1.8rem;
	}

	#subs {
		display: none;
		padding: 0rem 1.8rem;
	}

	/*
	#header,
	#editheader {
		position: relative;
		width: 100%;
		height: 130px;
		color: white;
		background-color: transparent;
		/*background-image: url('/images/headerbg.png');
		background-repeat: no-repeat;* /
		z-index: 1;
		padding: 0rem 0rem;
		margin-bottom: 5px;
		overflow: visible;
	}
	*/
}