/***** GLOBAL *****/
:root {
	--bg: black;
	--fg: white;
	--link: gold;
	--tip: red;
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: Verdana;
	font-size: 14pt;
}

.container {
	display: grid;
	grid-template-columns: 230px auto 100px;
	grid-template-rows: (80px auto);
	grid-template-areas:
		'top top top'
		'menu content fill';
	padding: 0;
	margin: 0;
	grid-row-gap: 9px;
}
/***** END GLOBAL *****/

/***** TOP *****/
.top {
	grid-area: top;
	top: 0;
	padding: 0 5 0 5;
	margin: 0;
	background-color: var(--bg);
	color: var(--fg);
	font-style: Verdana;
	font-size: 12pt;
}

.top .title {
	font-family: Franklin Gothic Book, Helvetica;
	font-size: 20pt;
	font-weight: bold;
	color: var(--fg);
}

.top a {
	font-family: Verdana;
	font-size: 14pt;
	text-decoration: none;
	color: var(--link);
}

.top hover {
	font-weight: bold;
}

.top .navbar {
	display: grid;
	grid-template-columns: 60% 10% 10% 10% 10%;
	grid-template-areas: 'logo one two three four';
}
/***** END TOP *****/

/***** MENU *****/
.menu {
	grid-area: menu;
	padding: 0 0 0 0;
	top: 130px;
	min-width: 175px;
	min-height: 84vh;
	background-color: var(--bg);
	color: var(--fg);
}

.menu .title {
	font-family: Franklin Gothic Book, Helvetica;
	font-size: 16pt;
	font-weight: bold;
	text-indent: 10;
}

.menu .header {
	font-family: Verdana;
	font-size: 14pt;
	font-weight: bold;
	text-indent: 20;
}

.menu a {
	font-family: Verdana;
	font-size: 12pt;
	text-decoration: none;
	color: var(--link);
}

.menu a:hover {
	font-weight: bold;
}

.menu hr {
	width: 75%;
	margin-left: 0;
}

.menu .nav_input {
	position: absolute;
	opacity: 0;
}

.menu .nav_label {
	position: relative;
	display: flex;
	align-items: left;
	font-family: Franklin Gothic Book, Helvetica;
	font-size: 14pt;
}

.menu .nav_sub {
	display: none;
}

.menu .nav_input:checked ~ .nav_sub {
	display: block;
	margin-left: -25px;
}
/***** END MENU *****/

/***** CONTENT *****/
.content {
	grid-area: content;
	padding: 10 30 0 30;
	min-height: 500px;
	font-family: Verdana;
	font-size: 12pt;
	background-color: var(--fg);
	color: var(--bg);
}

.content .txt {
	margin: 0 10 0 0;
}

.content .title {
	font-family: Franklin Gothic Book, Helvetica;
	font-size: 18pt;
	font-weight: bold;
}

.content .header {
	font-famliy: Franklin Gothic Book, Helvetica;
	font-size: 14pt;
	font-weight: bold;
	color: black;
	text-decoration: underline;
}

.content .tip {
	font-family: Verdana;
	font-size: 12pt;
	font-weight: bold;
	color: var(--tip);
}

.content td {
	color: black;
	font-family: Verdana;
	font-size: 12pt;
}

/*
.content li {
	background-image: url('/music/images/dot.png');
	background-repeat: no-repeat;
	background-position-y: center;
}
*/

.content .lii {
	background-image: url('/music/images/dot.png');
	background-repeat: no-repeat;
	background-position-y: top;
	color: black;
	font-weight: normal;
	padding-left: 20px;
	display: black;
}

.content ul {
	margin-top: 0;
}

.content li {
	margin-left: -20;
}

.content .i20 {
	margin-left: 20;
}

.content .ingr {
	display: block;
/*	float: left; */
	width: 60%;
	margin: 5 0 10 0;
	padding: 10 0 10 10;
	border: 2px solid black;
	border-radius: 20px;
	background-color: lightyellow;
	color: black;
}

.content .ingr_h {
	font-weight: bold;
}

.content .dire {
	display: block;
	float: left;
	width: 100%;
}

.content .dire_h {
	margin-left: -40;
	font-weight: bold;
}

.content .note {
	display: block;
	float: left;
	width: 100%;
}

/***** END CONTENT *****/

/***** BOX *****/
.box {
	display: inline-block;
	float: right;
	min-width: 30%;
	margin: 35 0 10 10;
	padding: 10 0 10 10;
	border: 2px solid black;
	border-radius: 20px;
	background-color: var(--bg);
	color: var(--fg);
}

.box a {
	font-family: Verdana;
	font-size: 12pt;
	color: var(--link);
	text-decoration: none;
}

.box a:hover {
	font-weight: bold;
}

.box .header {
	font-family: Franklin Gothic Book, Helvetica;
	font-size: 14pt;
	font-weight: normal;
	color: var(--fg);
}

.box a {
	margin-left: 10;
}
/***** END BOX *****/

/***** FILL *****/
.fill {
	background-color: var(--bg);
	color: var(--fg);
}
/***** END FILL *****/