/*  Copyright © 2025 Grand Woodcrafters. All rights reserved.
	Page Styles 
	Logo Colors:
		- blue: 		#2D2F96		hsl(239,54%,38%)
		- orange: 		#FA973A		hsl(29,95%,60%)
		- light gray: 	#D9D9D9		hsl(0,0%,85%)
		- dark gray:	#677580		hsl(206,11%,45%)
		- black: 		#051014		hsl(196,60%,5%)
	Basic Colors:
		- black:		#000000		hsl(0,0%,0%)
		- gray:			#F2F2F2		hsl(0,0%,95%)
		- white:		#FFFFFF		hsl(0,0%,100%)
		- green:		#008000		hsl(120,100%,25%)
*/
body {
	min-width: 250px;
	max-width: 1200px;
	background: hsl(0,0%,100%);
	font-family: Arial, sans-serif;
	color: hsl (196,60%,5%);
}
#PageHead {
	display: flex;
	flex-flow: row wrap;
	height: 140px;
}
#ClubLogo {
	background: hsl(0,0%,100%) url(../Graphics/ClubLogo.jpg) no-repeat center center;
	background-size: contain;
	flex: 0 0 14%;
}
#Banner {
	background: hsl(0,0%,100%) url(../Graphics/Banner.jpg) no-repeat center center;
	background-size: contain;
	flex: 0 0 70%;
	text-align: center;
	text-decoration: none;
	color: hsl(206,11%,45%);
	font-weight: 900;
	font-size: 3em;
}
#Banner span {
	vertical-align: 40%;
}
#LogIn {
	flex: 0 0 16%;
	background: hsl(0,0%,100%);
	text-align: center;
}
#LogIn a {
	color: hsl(239,54%,38%);
}
#PageFoot {
	width: 100%;
	background: hsl(0,0%,100%);
	clear: both;
	font-size: medium;
	font-weight: normal;
	color: hsl(0,0%,85%);
}
.download {
	color: hsl(239,54%,38%);
	text-decoration: underline;
}
.live {
	color: hsl(239,54%,38%);
	margin-left: 40px;
}
.live:hover, .download:hover {
	cursor: pointer;
}
button, .button, input[type='button'], input[type='submit'], input[type='reset'] {
	background-image: linear-gradient(to bottom, SandyBrown, Maroon);
	color: hsl(0,0%,100%);
	font-size: 15px;
	padding: 5px 10px;
	border: 1px solid black;
	border-radius: 3px;
	margin: 5px 5px;
	cursor: pointer;
    transition: background-color 0.3s ease;
}
nav {
	background-image: linear-gradient(to bottom, SandyBrown, Maroon);
	color: hsl(0,0%,100%);
	transition: background-color 0.3s ease;
}
button:hover, .button:hover, input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover {
	background: SandyBrown;
	font-weight: bold;
}
button:active, .button:active, input[type='button']:active, input[type='submit']:active, input[type='reset']:active {
	background: Maroon;
	font-weight: bold;
}
th {
    background-color: hsl(0,0%,85%);
    color: hsl(196,60%,5%);
	font-size: 15px;
	font-weight: 450;
	text-align: left;
}
td {
    background-color: hsl(0,0%,95%);
    color: hsl(196,60%,5%);
	font-size: 14px;
	font-weight: 400;
}
td {
    background-color: hsl(0,0%,95%);
    color: hsl(196,60%,5%);
	font-size: 14px;
	font-weight: 400;
}
 tr:nth-child(odd) {
    background-color: hsl(0,0%,95%); /* Light gray background */
}
  tr:nth-child(even) {
    background-color: hsl(0,0%,100%); /* White background */
}
.invoice {
  border-collapse: collapse;
}
.bottom-border-row td, .bottom-border-row th {
  border-bottom: 2px solid red;
}

.message-highlight {
  background-color: yellow;
  padding: 5px 10px;
  font-weight: bold;
} 

a:link {
  color: hsl(239,54%,38%);
}
a:visited {
  color: hsl(29,95%,60%);
}
table.booklist a:link {
  color: hsl(239, 60%, 40%);
  text-decoration: none;
  font-size: 1.05em;
}
table.booklist a:visited {
  color: hsl(239, 60%, 40%);
  text-decoration: none;
  font-size: 1.05em;
}
table.booklist a:hover {
	color: hsl(239, 75%, 75%);
}
.console-table {
	table-layout: fixed;
	border-collapse: collapse;
}
.col-small {
	width: 15%;
}
.clrbuttonback {
	background-color: hsl(0, 0%, 100%);
}
h1, h2, h3 {
  margin-top: 8px;
  margin-bottom: 0;
}
.header-left {
	margin-left: -20px;
}
h4 {
  margin-top: 8px;
  margin-bottom: 0;
  margin-left: -16px;
}
ul, li {
  margin: 0;
  padding: 0;
}
input {
  background-color: hsl(0,0%,95%);
}
pre {
  font-family: Arial, sans-serif;
}
text-green {
	color: hsl(120,100%,25%);
}
@media (max-width: 899px) {
	#Banner {
		font-weight: normal;
	}
	#PageHead {
		height: 100px;
	}
}
@media (max-width: 760px) {
	#PageHead {
		height: 75px;
	}
}
@media (max-width: 600px) {
	#PageHead {
		height: 60px;
	}
	#Banner {
		font-size: x-large;
	}
}
@media (max-width: 450px) {
	#PageHead {
		height: 45px;
	}
	#Banner {
		font-size: large;
	}
	#LogIn {
		font-size: smaller;
	}
}
@media (max-width: 360px) {
	body {
		min-width: 240px;
		max-width: 360px;
		font: bold medium Arial, sans-serif;
	}
	img {
		position: absolute;
		visibility: hidden;
	}
	p {
		width: 100%;
	}
	#PageHead {
		width: 100%;
	}
	#Banner {
		flex: 0 0 65%;
		height: 30px;
		background-image: none;
		font-size: medium;
		color: hsl(0,0%,0%);
	}
	#Menu {
		width: 100%;
		font-size: medium;
	}
}

/* Tinymce speciifc formatting */
.tox-editor-header, .tox-promotion, .tox-toolbar-overlord, .tox-toolbar__primary, .tox-menubar{
	background-color: hsl(0,0%,85%) !important;
}

.tox-editor-container{
	border: 3px solid hsl(206,11%,45%) !important;
}