:root {
	/* Define color variables */
	--bone: rgb(252,249,242);
	--highlight-background-color: rgba(255,192,0,0.5);	/* rgba function parameters:
														red, green, blue, transparency
														where transparency takes value between
														0=fully transparent and 1=fully opaque */
	--highlight-text-color: rgb(0,0,255);

/* Begin define device specific display variables
	NOTES:
	1)	Values are always to be expressed as percentages (%) for responsive purposes
	2)	The value specified is the minimum width to be allotted to each book within any given row
	3)	If the book's intrinsic width is too wide for its allotted value, the book's container will
		be moved to a new row */

	/* mobile devices (iPhone, Galaxy, etc...) */
	--book-layout-width-allotment-mobile-portrait: 40%;
	--book-layout-width-allotment-mobile-landscape: 30%;

	/* tablets (iPad, landscape e-readers, etc...) */
	--book-layout-width-allotment-tablet-portrait: 30%;
	--book-layout-width-allotment-tablet-landscape: 20%;

	/* desktops */
	--book-layout-width-allotment-desktop: 20%;
/* End define device specific display variables

	/* Define variables for spacing between books, regardless of device */
	--book-layout-gap-horizontal: 5%;	/* Minimum spacing between books in a single row
										NOTE: can use either pixels (px) or percentages (%) but
										percentages are preferable since they can be more
										easily compared to a book's width allotment.
										See --book-layout-width-allotment... variables above */
	--book-layout-gap-vertical: 40px;	/* Vertical distance between rows of books
										NOTE: should always use pixels (px) since percentage is
										unpredictable as it depends on parent container's final
										dimensions */

	/* Begin variables for sub menu styling */
	--submenu-text-color: rgb(255,94,0);	/* vermillion */
	--sub-menu-background-color: rgba(64,64,64,0.5);	/* rgba function parameters:
														red, green, blue, transparency
														where transparency takes value between
														0=fully transparent and 1=fully opaque */
	/* NOTE: any unit can be used but pixels are preferable (e.g. not influenced by device viewport) */
	--sub-menu-vertical-spacing: 16px;	/* sub menu item spacing - value should be even number */
	--sub-menu-indent: 5px;	/* indent of sub menu items with respect to parent menu item */
	/* End variables for sub menu styling */

	/* BEGIN INTERNAL VARIABLES - DO NOT EDIT !!! */
	--sub-menu-vertical-margin: calc(var(--sub-menu-vertical-spacing)/2);
	/* END INTERNAL VARIABLES - DO NOT EDIT !!! */

	--block-margin-top: 10px;	/* arbitrary distance between multiple blocks appearing on a single page */
	--social-media-icon-height: 45px;	/* height of social media icons when more than one appearing inline
										(width will be adjusted automatically to maintain aspect ratio) */

	--schedule-light-highlight-color: rgb(212,237,240);	/* color to be used when highlighting cells
														in the schedule table */

	/* Begin variables for sponsor logo styling */
	--sponsor-left: 106px;	/* horizontal position from left edge of page
							(value can be any unit, e.g. px, %, em, etc...) */
	--sponsor-top: 75%;	/* vertical position of sponsor logo within space from bottom of banner
						to bottom of page (value can be any unit, e.g. px, %, em, etc...) */
	--sponsor-width: 20%;	/* width of sponsor logo with respect to the entire page width
							(value can be any unit, e.g. px, %, em, etc...) */
	--sponsor-rotation: -0deg;	/* display angle of sponsor logo
								Negative angles are counterclockwise from horizontal
								Positive angles are clockwise from horizontal */
	/* End variables for sponsor logo styling */
}
/*body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}*/

/* Global */
body,html {
	margin-top: 0px;
	margin-bottom: 5px;
	font-family: Verdana, Arial;
	font-size: 12pt;
	color: black;
/*	background-color: #F6EAD5;*/
	background-color: var(--bone);
/*	background-image: url("../images/marbled.png");
	background-repeat: no-repeat;*/
	/*background-size: cover;*/
}
html {
	overflow: -moz-scrollbars-vertical;
}
.menu * {	/* set default font color for all text appearing within the menu */
	color: white;
}
.menu ul > li a {
	color: rgb(255,69,0);	/* vermillion */
	color: var(--submenu-text-color);
}
a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.menu > li > a[href="#"]:hover {
	text-decoration: none;
	cursor: default;
}
.highlighted-link {
	background-color: var(--highlight-background-color);
	color: var(--highlight-text-color);
}
.disabled-link {
	cursor: default;
	pointer-events: none;
	text-decoration: none;
	color: grey;
}
.menu ul > li .disabled-link {
	color: grey;
}
.centered {
	width: 100%;
	text-align: center;
}
.page_content {
	font-family: Georgia, Verdana, Arial;
/*	font-size: 14pt;*/
/*	font-size: 1.1em;*/
	/*width: 50%;*/
	width: 80%;
	margin: 0 auto;
}
.page_title {
	/*font-weight: bold;*/
/*	font-size: 1.45em;*/
	font-size: 44pt;
}
.page_detail {
/*	background-color: white;*/
}
.page_detail p {
	margin: 0;
	padding: 0.5em;
}

#banner {
	/*position: fixed;*/
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	/*border: 1px solid blue;	/* while testing */
}
#banner img {
	min-width: 100%;
	height: auto;
}
.menu_container {
	position: absolute;
	top: 0px;
/*	left: 0px;*/
	right: 0px;
	z-index: 999;	/* ensures navigation menu is always displayed above other controls */
	width: 80%;
}
.menu {
	display: table;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}
.menu li {
	display: inline-block;
	font-size: 11pt;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	/*padding: 0 5px;	/* TB LR */
}
.menu li li {
	display: block;	/* display sub menu items vertically */
	margin: var(--sub-menu-vertical-margin) 0;	/* TB LR */	/* vertically separate sub menu items */
	text-align: left;
	margin-left: var(--sub-menu-indent);	/* indent sub menu items */
	margin-right: 5px;	/* horizontal space between sub menu item RHE and border of containing element */
}
.menu li:before {	/* top-level menu items prefixed by vertical pipe separator */
	content: "|";
	padding-right: 3px;
}
.menu li:first-child:before {	/* no separator prefix for first menu item */
	content: "";
}
.menu li li:before {	/* since sub menu displayed vertically, remove prefix separator */
	content: "";
	padding-right: 0px;
}
.menu li ul {	/* sub menu container */
	position: absolute;	/* necessary to prevent sub menu from vertically stretching parent menu item */
	background-color: var(--sub-menu-background-color);	/* highlight sub menus */
	padding-left: 0;
	margin-left: 12px;	/* vertically align sub menu with parent menu item */
	display: none;	/* initially hide sub menus */
}
.menu li:hover ul, .menu li ul:hover,	/* for desktop */
.menu li:focus ul, .menu li ul:focus, .menu li:focus-within ul, .menu li:active ul, .menu li ul:active {	/* for mobile devices */
	display: block;	/* show sub menus when hovering over parent list item */
}
.menu li a:first-child:nth-last-child(2):hover {
	/*text-decoration: none;	/* do not show top-level menu items containing sub menus as clickable */
}
/*	Modify styles for mobile devices	*/
@media all and (min-width:0px) and (max-width: 1023px) {
	.menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		list-style: none;
		padding: 0;
		margin: 0;
		gap: 1em;
	}
	.menu > li {
		position: relative;
		white-space: nowrap;
	}
	.menu > li > a {
		font-weight: bold;
		font-size: 11pt;
		color: var(--submenu-text-color);
		text-decoration: none;
		padding: 0.5em;
	}
	.menu > li > a:hover {
		text-decoration: underline;
	}
	.menu li:before {	/* remove vertical pipe separator from top-level menu items */
		content: "";
		padding-right: 0px;
	}
}

.social_media {
	position: absolute;
	bottom: 10px;
	max-width: 50px;
	height: auto;
	margin-left: 10px;
	margin-top: auto;
}
.SiteFooter {
	margin-top: 20px;
	font-size: 8pt;
	color: black;
	text-align: center;
}
.condensed {
	width: 50%;
}
#announcement {
	font-size: 32pt;
	line-height: 1.3em;
/*	width: 150%;*/
}

#schedule {
	border-collapse: collapse;
	text-align: center;
}
#schedule th:nth-child(1) {
	width: 20%;
}
#schedule th:nth-child(2) {
	width: 40%;
}
#schedule th:nth-child(3) {
	width: 40%;
}


#schedule th, #schedule td {
	border: 1px solid;
}
#schedule th {
	background-color: rgb(166,202,236);
	padding-top: 1em;
}
#schedule td {
	/*background-color: rgb(220,234,247);*/
	padding: 5px 0px;
}

#icon_layout {
	width: 60%;
	margin: auto;
	margin-top: 2em;
}
#icon_layout img {
	height: 120px;
	width: auto;
}
#icon_layout tr:nth-child(2n-1) {
	text-align: left;
}
#icon_layout tr:nth-child(2n) {
	text-align: right;
}
#author_layout {
	width: 80%;
	margin: auto;
}
#author_layout img {
	width: 100%;
	height: auto;
}
#book_layout {
/*	width: 100%;*/
	margin: auto;
}
#book_layout img {
	width: 100%;
	height: auto;
}
#sponsor_layout {
	width: 100%;
	text-align: center;
	margin: auto;
	margin-top: 2em;
}
#sponsor_layout img {
	width: 50%;
	height: auto;
	padding: 10px 0;	/* TB LR */
}
.icon-list {
	width: 50%;
	margin: 0 auto;
	text-align: center;
}
.icon-list img {
	height: var(--social-media-icon-height);
	width: auto;
	padding: 10px;
}
.interview_trailer {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	height: auto;
	margin-top: 2em;	/* Set this to suit */
}

/* Site Content */
#main {
	position: absolute;
	width: 100%;
	font-family: Verdana, Arial;
	font-size: 12pt;
	color: black;
	text-align: left;
	top: 8em;
	/*border: 1px solid red;	/* while testing */
}
#directions {
	position: relative;
	text-align: center;
}
#directions table {
	margin: 0 auto;
}
.hide {
	display: none;
	visibility: hidden;
}
#contest_layout {
	/*border: 1px solid;	/* while testing */
}
#contest_layout td {
	/*border: 1px solid red;	/* while testing */
	/*min-width: 50%;
	max-width: 50%;
/*	width: 50%;*/
	text-align: center;
}
#contest_layout img {
	max-width: 80%;
	height: auto;
	/*padding: 5% 10%;	/* TB LR */
}
.contest_title {
	min-width: 50%;
	text-align: right;
	padding-right: 3%;
	font-family: Arial, Verdana;
/*	font-size: 3em;*/
	font-size: 30pt;
	color: white;
	background-color: rgb(13,58,80);
}
#watermark {
	position: absolute;
	left: 40%;
	top: 50%;
	opacity: 0.5;
	color: red;
	transform: rotate(-30deg);
	font-size: 4em;
}
#wip {
	text-align: center;
}
.book_review {
	display: flex;
	flex-wrap: wrap;
	gap: var(--book-layout-gap-vertical) var(--book-layout-gap-horizontal); /* [row gap] [column gap] */
	align-items: center;
}
.book_review div {
	width: var(--book-layout-width-allotment-desktop);
	margin: auto;
}
.book_review img {
	width: 100%;
	height: auto;
}
/* Begin styles for mobile devices (iPhone, Galaxy, etc...) */
@media screen
  and (min-device-width: 320px)
  and (max-device-height: 920px)
  and (orientation: portrait) {
	.book_review div {
		width: var(--book-layout-width-allotment-mobile-portrait);
		margin: auto;
	}
}
@media screen
  and (min-device-width: 320px)
  and (max-device-height: 920px)
  and (orientation: landscape) {
	.book_review div {
		width: var(--book-layout-width-allotment-mobile-landscape);
		margin: auto;
	}
}
/* End styles for mobile devices (iPhone, Galaxy, etc...) */
/* Begin styles for tablets (iPad, landscape e-readers, etc...) */
@media screen
  and (min-device-width: 768px)
  and (min-device-height: 768px)
  and (max-device-height: 1080px)
  and (orientation: portrait) {
	.book_review div {
		width: var(--book-layout-width-allotment-tablet-portrait);
		margin: auto;
	}
}
@media screen
  and (min-device-width: 768px)
  and (min-device-height: 768px)
  and (max-device-height: 1080px)
  and (orientation: landscape) {
	.book_review div {
		width: var(--book-layout-width-allotment-tablet-landscape);
		margin: auto;
	}
}
/* End styles for tablets (iPad, landscape e-readers, etc...) */
iframe {
	width: 100%;
	border: none;	/* in lieu of deprecated iframe frameborder="0" attribute */
	margin: 0;	/* in lieu of deprecated iframe marginheight="0" and marginwidth="0" attributes */
}
.block-margin-top {
	margin-top: var(--block-margin-top);
}
#mc_embed_signup {
	width: 80%;
	margin: 0 auto;
	background-color: white;
	/*border: thin solid black;*/
}
.scoring_section table {
	border-collapse: collapse;
}
.scoring_section th, .scoring_section td {
	border: 1px solid;
	padding: 2px 5px;	/* TB LR */
}
.scoring_info {
	width: 80%;
	padding: 10px 0;	/* TB LR */
	margin: auto;
}
.scoring_info span {
	padding: 0 5px;	/* TB LR */
}
.scoring_info span:first-child {
	display: table-cell;
	font-weight: 700;
	white-space: nowrap;
}
.scoring_info span:last-child {
	display: table-cell;
	width: 100%;
	border-bottom: 1px solid black;
}
.section_total {
	width: 100%;
	padding: 10px 0;	/* TB LR */
}
.section_total span {
	padding: 0 5px;	/* TB LR */
}
.section_total span:first-child {
	display: table-cell;
	white-space: nowrap;
	font-weight: 700;
}
.section_total span:last-child {
	display: table-cell;
	width: 20%;
	border-bottom: 1px solid black;
}
.scoring_section {
	margin-top: 10px;
}
.score_summary table {
	border-collapse: collapse;
	width: 50%;
	margin: auto;
}
.score_summary td {
	border: 1px solid;
	padding: 2px 5px;	/* TB LR */
}
.score_summary td:first-child {
	width: 80%;
}

.score_summary p {
	width: 80%;
	padding: 10px 0;	/* TB LR */
	margin: auto;
}
.score_summary span {
	padding: 0 5px;	/* TB LR */
}
.score_summary span:nth-child(1) {
	display: table-cell;
	white-space: nowrap;
	padding-top: 10px;
}
.score_summary span:nth-child(2) {
	display: table-cell;
	width: 100%;
	border-bottom: 1px solid black;
}
.inline {
	display: inline-block;
	margin-right: 1em;
}
.light-highlight {
	background-color: var(--schedule-light-highlight-color);
}
#guests {
	width: 60%;
	margin: auto;
	margin-top: 2em;
	text-align: center;
}
#guests img {
	height: 120px;
	width: auto;
}
.bio {
	width: 80%;
	margin: auto;
	font-family: Candara, sans-serif;
}
.bio h2 {
	text-align: center;
	text-transform: uppercase;
	font-style: italic;
}
.bio img {
	display: block;
	width: 50%;
	height: auto;
	margin: auto;
	margin-bottom: 1em;
}
.bio div {
	width: 80%;
	margin: auto;
}
.bio p {
	text-align: justify;
	line-height: 150%;
	font-weight: bold;
}
.bio a:link, .bio a:visited {
	text-decoration: underline;
}
.bio a:link {
	color: blue;
}
.bio a:visited {
	color: purple;
}
#sponsor_image {
	position: absolute;
	left: var(--sponsor-left);
	top: var(--sponsor-top);
	width: var(--sponsor-width);
	height: auto;
	transform: rotate(var(--sponsor-rotation));
}
#judge_panel {
	width: 100%;
	margin: auto;
	margin-top: 1em;
	text-align: center;
}
#judge_panel figure {
	width: 100%;
	margin: 0;
}
#judge_panel img {
	height: 200px;
	width: auto;
}