@color: rgb(102, 204, 255);

@darkColor: darken(@color, 10%);
@x-darkColor: darken(@color, 15%);
@xx-darkColor: darken(@color, 20%);
@xxx-darkColor: darken(@color, 25%);
@xxxx-darkColor: darken(@color, 30%);

@lightColor: lighten(@color, 10%);
@x-lightColor: lighten(@color, 15%);
@xx-lightColor: lighten(@color, 20%);
@xxx-lightColor: lighten(@color, 25%);
@xxxx-lightColor: lighten(@color, 30%);

.captionColors {
	background-color: @xxxx-darkColor !important;
	color: @xxx-lightColor !important;

	a:any-link {
		color: @xxxx-lightColor !important;
		background-color: transparent !important;
		text-decoration: none !important;

		&:hover {
			text-decoration: underline !important;
		}
	}
}

a:any-link {
	color: @xxxx-darkColor !important;
	background-color: transparent !important;
	text-decoration: none !important;

	&:hover {
		text-decoration: underline !important;
	}
}

.rounded {
	border-radius: 0.5em !important;
	padding: 0.5em !important;
}

.lightlyRounded {
	border-radius: 0.25em !important;
	padding: 0.5em !important;
}

span.tablink {
	color: @xx-darkColor !important;
}

.lightRounded {
	border-radius: 0.25em !important;
	padding: 0.25em !important;
}

html {
	font-family: 'Arial', serif !important;
	line-height: 150%;

	// Use this font everywhere
	* {
		font-family: inherit !important;
	}
}

// Remove background color from SPAN in tables
table > tbody > tr > td span {
	background-color: transparent !important;
}

.siteheader {
	& > .blackheader a {
		color: darken(@xxxx-darkColor, 15%) !important;

		& > span {
			color: @xx-darkColor !important;
		}

		&:hover {
			text-decoration: none !important;
		}
	}
}

.tablesorter {
	background-color: transparent !important;

	thead tr,
	tfoot tr {
		background-color: @xx-lightColor !important;
	}
	thead tr th,
	tfoot tr th {
		background-color: @xx-lightColor !important;
		border-radius: 0px !important;
	}
}

#main {
	& > h1 {
		border-radius: 0.25em;
		padding: 0.5em;
		font-size: 1.5em;
		.captionColors();
	}

	// Make leaderboard main table align to the rest
	& > #maintable {
		width: auto !important;

		// Reduce size of the table toggles
		#tabletoggles {
			font-size: smaller;
		}
	}
}

#header {
	#bio {
		p {
			background-color: @xxx-lightColor;
			border-radius: 0.5em;
			padding: 0.75em;
			border: 1px solid @xx-lightColor;
			width: 100%;
		}
	}
	table {
		width: 100% !important;
	}

	#navbar {
		// Make header transparent and align log posts to the right with a smller font
		& > table {
			& > tbody {
				& > tr:nth-child(1) {
					background-color: transparent !important;

					& > td:nth-child(2) {
						* {
							font-style: normal;
							font-size: 90%;
						}
						text-align: right;
					}
				}
			}
		}
	}

	// Make main page look the same as the others
	table#player-mcp {
		& > tbody {
			& > tr:nth-child(1) {
				background-color: transparent !important;
			}
			& > tr:nth-child(2) {
				.captionColors();
				td {
					.rounded();
				}
			}
		}
	}

	table#blog-pod,
	table#current-events,
	table#rankings,
	table#more-reports,
	table#tennis-128,
	table#player-mcp,
	table#redux-1973 {
		border-spacing: 0.5em;
		border-collapse: inherit !important;

		thead {
			.captionColors();

			& > tr > th {
				.captionColors();
				.rounded();
			}
		}
	}
}

.navbar {
	background-color: @xxxx-darkColor;
	color: @xx-lightColor;
	padding: 0.5em;
	padding-top: 0.75em;
	padding-bottom: 0.75em;

	.dropbtn {
		color: @xxx-lightColor;
	}

	.dropdown-content {
		background-color: @xxxx-lightColor;

		.lightlyRounded();

		a {
			.lightlyRounded();

			&:hover {
				.captionColors();
				text-decoration: none !important;
			}
		}

		// Static items
		.dropdown-item {
			color: @darkColor;
			padding-left: 0.5em !important;
			font-style: normal;
			font-size: smaller;
		}
	}
	.dropdown:hover .dropbtn {
		color: @xx-lightColor;
	}
}

span.likelink {
	color: @xxx-darkColor !important;
}

#playersearch2 {
	input {
		outline: 2px solid @color;
		width: 50%;
		font-size: 110%;
	}
	input:focus {
		outline: 2px solid @color;
		width: 50%;
		font-size: 110%;
	}

	input::placeholder {
		content: 'Foo';
	}
}

li {
	background-color: @xxx-lightColor;
	width: 100%;
	border: 2px solid @x-lightColor;
	padding: 0.5em;
	margin: -2px;
	&:hover {
		background-color: @xxx-lightColor;
		width: 100%;
		border: 2px solid @x-lightColor;
		padding: 0.5em;
		margin: -2px;
	}
}

// Make Page Overview at the bottom 100% wide
#week-finals + p + p + h1 + p > table {
	width: 100% !important;
}

// Make Page Overview at the bottom 100% wide
#head-to-heads + p + p + h1 + p > table {
	width: 100% !important;
}