:link, :visited, :active
{
	color: blue; 
}

:root
{
	--font-head:	56px;
	--font-subhead:	32px;
	--font-vlarge:	25px;
	--font-larger:	20px;
	--font-large:	18px;
	--font-medium:	16px;
	--font-small:	14px;
	--font-normal:	var(--font-small);
}

body
{
	width: 770px;
	margin: 0;
	border: none;
	padding: 10px;
	text-align: center;
	vertical-align: top;

	font-family: Arial, Tahoma, Helvetica, Verdana, sans-serif;
/*	font-family: "Times New Roman", Times, Georgia, Palatino, serif; */
/*	font-family: "Courier New", monospace; */
	font-size: var(--font-normal);
	font-weight: normal;
	color: black;
	background-color: white;
}

header,
section,
form
{
	display: contents;
}

figure, pre
{
	margin: 0;
}

img
{
	border: none;
	width: 100%;
/*	border: 1px solid red; */
}

a.svg
{
	position: relative;
	display: inline-block;

	&::after
	{
		content: ""; 
		position: absolute; 
		top: 0; right: 0; bottom: 0; left: 0;
	}
}

.BigLogoPage, .MediumLogoPage
{
	display: grid;						/* block grid */
	grid-template: none / 350px 1fr;	/* rows as needed */
    column-gap: 20px;

	main
	{
		grid-column: 1 / -1;
	}
	footer
	{
		grid-column: 1 / -1;
	}

	.HeadGroup
	{
		grid-row: 1;
		grid-column: 1;
	}
}

.BigLogoPage .Logo
{
	grid-row: 1 / span 7;
	grid-column: 2;

	object
	{
		width: 400px; height: 400px;
	}
}
.MediumLogoPage .Logo
{
	grid-row: 2 / 10;
	grid-column: 1;

	object
	{
		width: 300px; height: 300px;
	}
}

.TopPage
{
	.Instructors
	{
		grid-row: 2 / span 7;
		grid-column: 1;
	}
	.AdultInstructors
	{
		grid-row: 9;
		grid-column: 1;
	}
	.SpringSeminar
	{
		grid-row: 8;
		grid-column: 2;
	}
	.ClassAges
	{
		grid-row: 9;
		grid-column: 2;
	}
}

.ZoomPage
{
	.OnlineClasses
	{
		grid-row: 3;
		grid-column: 1;
	}
	.ZoomLink
	{
		grid-row: 5;
		grid-column: 1;
	}
	.ZoomCode
	{
		grid-row: 6;
		grid-column: 1;
	}
	.ZoomMeeting
	{
		grid-row: 9;
		grid-column: 1;
	}
	.ClassTimes
	{
		grid-row: 9;
		grid-column: 2;
	}
	.ErraticSchedule
	{
		grid-row: 10;
		grid-column: 1 / -1;
	}
}

.VideoPage
{
	.VideoHead
	{
		grid-row: 1;
		grid-column: 2;
	}
	.VideoDescription
	{
		grid-row: 2;
		grid-column: 2;
	}
	.NotStreaming
	{
		grid-row: 3;
		grid-column: 2;
	}
	.StartSmall
	{
		grid-row: 4;
		grid-column: 2;
	}
}

.BigLogoPage header .Logo
{
	padding-top: var(--font-normal);
}
.MediumLogoPage header .Logo
{
	padding: var(--font-normal) 0;
}
header
{
	font-size: var(--font-normal);
	font-weight: normal;

	hgroup
	{
		margin: 0;
		font-size: var(--font-head);
		font-weight: bold;

		div
		{
			margin: 0;
			font-size: var(--font-subhead);
			font-weight: normal;
		}
	}

	figure.Instructors
	{
		figcaption
		{
			font-size: var(--font-large);
		}
	}
	.AdultInstructors
	{
		padding: var(--font-normal) 0;
	}
	.SpringSeminar
	{
		padding-bottom: var(--font-medium);

		b
		{
			font-size: var(--font-subhead);
			font-weight: bold;
			color: red;
		}
	}
	.ClassAges
	{
		padding: var(--font-normal) 0;
		text-align: left;
	}

	.OnlineClasses
	{
	/*	padding: var(--font-large) 0; */
		font-size: var(--font-large);
	}
	.ZoomLink
	{
/*		margin-bottom: -20px; */
		text-align: left;
		font-size: var(--font-large);

		a
		{
			margin: 0;
			font-size: var(--font-vlarge);
			font-weight: bold;
			color: red;
		}
	}
	.ZoomCode
	{
		text-align: left;

		div b
		{
			font-size: var(--font-large);
			font-weight: bold;
		}
	}
	.ZoomMeeting
	{
		text-align: left;
	}
	.ClassTimes
	{
		text-align: right;

		span
		{
			font-size: var(--font-large);

			b
			{
				font-weight: bold;
			}
		}
	}
	.ErraticSchedule
	{
		padding: 5px 0;
		text-align:  left;
		font-size: var(--font-medium);

		b
		{
			font-weight: bold;
			text-transform: uppercase;
		}
	}

	.VideoDescription
	{
		text-align: left;
		font-size: var(--font-large);
	}
}
.NotStreaming
{
	padding-top: var(--font-normal);
	font-size: var(--font-normal);
}
.StartSmall
{
	padding-top: var(--font-normal);
	text-align: left;
	font-size: var(--font-normal);
}

main
{
	padding: 15px 0;
	text-align: left;
	font-size: var(--font-medium);
	font-weight: normal;

	h1
	{
		margin: 0;
		font-size: var(--font-subhead);
		font-weight: normal;
	}
	h2
	{
		display: inline;
		font-size: var(--font-larger);
		font-weight: normal;
	}
	h1 b, 
	h2 b
	{
		font-weight: bold;
		text-transform: uppercase;
	}

	.Outdoors
	{
		display: none;
		text-align: left;
	}
}

table
{
	table-layout: fixed;
	width: 90%;
	border-collapse: collapse;
	justify-self: center;
	text-align: center;
}

.VideoTable
{
	th, td
	{
		border: 1px solid;
		padding: 2px 4px;
	}
	th:first-child
	{
		width: 50%;

		/* has to have <div>, or above width applies to grid width 
			rather than <th> width.  WTF ?? */
		> div
		{
			display: grid;						/* block grid */
			grid-template: 3fr / 2fr;
			font-weight: normal;

			.Event
			{
				grid-column: 1;
				grid-row: 1;
				text-align: left;
			}
			.Division
			{
				grid-column: 1;
				grid-row: 2;
				text-align: left;
			}
			.Length
			{
				grid-column: 1;
				grid-row: 3;
				text-align: left;
			}
			.Size
			{
				grid-column: 2;
				grid-row: 1;
				text-align: right;
			}
			.Dimensions
			{
				grid-column: 2;
				grid-row: 2;
				text-align: right;
			}
			.Bandwidth
			{
				grid-column: 2;
				grid-row: 3;
				text-align: right;
			}
		}
	}
	thead th
	{
		> div
		{
			display: grid;						/* block grid */
			grid-template: 3fr / 1fr;
			font-weight: normal;

			.Size
			{
				grid-row: 1;
			}
			.Dimensions
			{
				grid-row: 2;
			}
			.Bandwidth
			{
				grid-row: 3;
			}
		}
	}
	tbody th
	{
			.Length::before
			{
				Content: "Duration:  ";
			}
	}
	tbody td
	{
		&[colspan]
		{
			text-align: left;
		}
	}
}

footer
{
	display: grid;						/* block grid */
	grid-template: none / 1fr;			/* rows as needed, one column */

	.WhyZoom
	{
		grid-row: 5;
		grid-column: 1;
	}
	.AnyQuestions
	{
		grid-row: 1;
		grid-column: 1;
	}
}

footer
{
	text-align: left;
	font-size: var(--font-medium);
	font-weight: normal;

	.WhyZoom
	{
		padding: var(--font-medium) 0;
	}
	.AnyQuestions
	{
		padding: var(--font-medium) 0;
	}
}