#Menu
{
	--font-size: 30px;
	--color1: #000000; /* background of the menu and text for input elements */
	--color2: #404040; /* background of menu elements */
	--color3: #606060; /* label background for checkboxes and numbers */
	--color4: #E0E0E0; /* text color and background of buttons */
	--color5: #FFFFFF; /* background of input elements */
	--margin: 6px;
	--radius: 6px;
	
	display: none; /* initial state */
	position: relative;
	font-size: var(--font-size);
	background-color: var(--color1);
	color: var(--color4);
	user-select: none;
	
	a { color: var(--color4) }

	/*
	#Menu could be the flex box container, however, cannot be set to display:none
	initially then. So it would appear shortly once loading the page until it's
	hidden by javascript update code.
	*/
	
	/* flex layout */

	&>div
	{
		width: 100%; height: 100%;
		display: flex;
		flex-direction: column;

		&>header
		{
			flex: 0 0 auto;
		}

		&>nav
		{
			flex: 0 1 auto;
			overflow-y: auto;
			margin-bottom: var(--margin);
		}

		&>button
		{
			position: absolute;
			bottom: 0; right: 0;
			margin: var(--gap);
		}
	}
	
	/* header style */

	header
	{
		padding: var(--margin);
		
		.Status
		{
			font-size: small;
			float: right;
			text-align: right;
		}
	}

	/* nav style */
	
	nav
	{
		/* sub item layout */
		
		.Tab /* headers of sub items */ 
		{
			font-size: inherit; /* remove user agent style from headings */
			font-weight: unset;
			padding: var(--margin);
			
			img
			{
				vertical-align: sub;
				filter: saturate(0.5);
				margin-right: 4px;
			}
		}

		.Tab + * /* sub item, which is toggled by click on .Tab */
		{
			display: none; /* initial state */
			padding-left: calc(2 * var(--margin)); /* indent */
		}

		.Tab, form, section /* elements that get a border with background color */
		{
			/* Collapsing of vertical margins is executed after toggle transition,
			so should be avoided, because results in unsmooth perception.
			The border is not visible, but required, because it avoids collapsing
			of the children's margin. */
			margin: var(--margin) var(--margin) 0; /* top, left & right, bottom */
			background-color: var(--color2);
			border: 1px solid var(--color2);
			border-radius: var(--radius);
		}
		
		form, section
		{
			/* This is because the elements don't get a top margin. By this it is
			possible to control the distance to a subsequent element by bottom 
			margin, e.g. the legend gets a smaller one. */
			padding-top: var(--margin);
		}
		
		/* elements of forms and sections */
		
		legend, select, output, hr, label, input
		{
			display: block;
			/* 'stretch' would do the job more smartly, but doesn't work on iOS */
			width: calc(100% - 2 * var(--margin));
			font-size: inherit;
			font-family: inherit;
			margin: 0 var(--margin) var(--margin);
		}
		legend
		{
			font-size: calc(0.5 * var(--font-size));
			margin-bottom: calc(0.5 * var(--margin)); /* make it closer to a subsequent element */
		}
		select
		{
			color: var(--color1);
		}
		output
		{
			font-size: calc(0.5 * var(--font-size));
		}
		hr /* separator */
		{
			border: unset;
			margin-bottom: calc(3 * var(--margin));
		}
		label /* container for checkbox and number */
		{
			line-height: 0; /* this makes the label width the same like the input's one it contains */
			background-color: var(--color3);
			border: solid 2px var(--color3);
		}
		input
		{
			color: var(--color1);
			
			&[type=checkbox] /* this has to be encapsulated by label */
			{
				display: inline-block;
				width: var(--font-size);
				height: var(--font-size);
				margin: 0;
				border: unset; /* the embodying label has a border already */
			}
			&[type=number] /* this has to be encapsulated by label */
			{
				display: inline-block;
				width: 4em;
				margin: 0;
				border: unset; /* the embodying label has a border already */
			}
			&[type=color]
			{
				height: var(--font-size);
			}
			&[type=submit]
			{
				border: unset;
				background-color: var(--color4);
				&:disabled { filter: contrast(0.2) }
			}
		}
	}
}