/* CSS preferred by Roel */
/* <link rel="stylesheet" href="/modules/media/?do=inline&id=1b87c18f-4df7-46c5-be93-b64e509b7b23"> */

/* margin-top for separating elements vertically*/
.margin-8 { margin-top: 8px; }
.margin-16 { margin-top: 16px; }
.margin-24 { margin-top: 24px; }
.margin-32 { margin-top: 32px; }
.margin-40 { margin-top: 40px; }

/* table */
	/* class = altrows alternating rows */
table.altrows, table.altrows th, table.altrows td { 
	border: 0px solid; 
	vertical-align:top; }
table.altrows { 
	border-collapse: collapse; 
	margin-bottom: 2.4em; }
table.altrows tbody tr:nth-child(even) { background-color: #eef; }
table.altrows thead th, tbody td { padding: .8em; }
table.altrows thead th { 
	background-color: #0C2340; 
	color: #fff; }

/* details summary */
	/* used for disclaimers in calendar events such as sports and trips */
details summary { 
	display: list-item; 
	margin-top:40px; 
}

/* video player */
.video-container { 
	position: relative; 
	padding-bottom: 56.25%; /* 16:9 */ 
	height: 0; }
.video-container iframe { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; }

/* pricing */
	/* flexbox with classes priceContainer (flexbox container), priceInfo (header and broad information as list), and priceItem (details and price as list) */	
div.priceContainer { 
	display: flex; 
	flex-direction: column; }
div.priceBlock { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 1.5em; 
	margin-bottom: 1.5em; }
div.priceInfo {
	padding: 0 1em; 
	font-weight: normal; 
	margin-bottom: -1.5em; }
div.priceItem {
	background-color: #EEE; 
	border-radius: .5em; }

	/* calculating widths for 2, 3, and 4-column layouts - defined in parent "priceBlock" div */
div.col2 div.priceItem, div.col2 div.menuItem { flex-basis:calc((100% - 1.5em) / 2); }
div.col3 div.priceItem { flex-basis:calc((100% - 3em) / 3); }
div.col4 div.priceItem { flex-basis:calc((100% - 4.5em) / 4); }

	/* priceItem and priceInfo details */
div.priceItem h4 { 
	background-color: #0C2340; 
	color: #fff; 
	margin-top: 0px; 
	border-radius: .5em .5em 0 0; 
	padding: .5em 1em; }
div.priceItem p, div.priceItem ul, div.priceInfo ul { 
	margin: .5em 1em; 
	padding: 0; }
div.priceInfo ul li, div.priceItem ul li { 
	list-style: none; 
	border-bottom: 1px solid #CCC; 
	padding: .5em .5em; }
div.priceInfo ul li:last-child, div.priceItem ul li:last-child { border-bottom: 0 none #CCC; }

	/* prices, called out in bold, red text, aligned left, centered, or float right */
span.priceLeft, span.priceRight, span.priceCenter { font-weight: bold; color: #A6192E; } 
span.priceRight { float: right; text-align: right; }
span.priceCenter { text-align: center; }

/* food menu for Tun Alley et al */
div.menuItem {
	background-color: #EEE; 
	border-radius: .5em; }
div.menuItem p { margin: -1.6em 1em 1em 1em; font-size: .8em;}
div.menuItem h4 { 
	color: #0C2340; 
	margin-top: 0px; 
	border-radius: .5em .5em 0 0; 
	padding: .5em 1em; }
div.menuItem ul { 
	margin: .5em 1em; 
	padding: 0; }
div.menuItem ul li { 
	list-style: none; 
	border-bottom: 1px solid #CCC; 
	padding: .5em .5em; }
div.menuItem ul li:last-child { border-bottom: 0 none #CCC; }


/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
	.priceBlock {
		flex-direction: column; } }