ul.menu {
	height: 69px;
	position: absolute;
	top: 6px;
	right: 12px;
}
ul.menu li {
	text-align: center;
	display: block;
	float: left;
	padding-left: 24px;
	padding-right: 4px;
}
ul.menu li a {
	color: var(--c-menu-blue);
	text-shadow: #000 1px 2px 2px;
	text-decoration: none;
}
ul.menu li a:hover {
	color: white;
}
.autoplay .menu {
	display: none;
}
.menu { display: flex; }
.menu ul > li {
	display: inline-block;
}
.menu li:nth-child(n+4) { display: none; }
.menu li.kebab {
	display: inline-block;
}
.menu li.user {
	display: inline-block;
}

/* https://css-tricks.com/useful-nth-child-recipies/ */
.menu ul > li:nth-child(-n+4) {
	display: none;
}

.menu li.kebab {
	position: relative;
	height: 32px;
	width: 48px;
	border-style: none;
	text-shadow: revert;
	background-image: url( /assets/images/buttons/widget-blue.svg );
	background-repeat: no-repeat;
	background-position: 4px;
	background-size: 24;
}

.menu li.kebab:hover {
	background-image: url( /assets/images/buttons/widget-white.svg );
}

.menu li.kebab ul.sub-menu {
	display: none;
	position: absolute;
	top: 32px;
	left: -88px;
	z-index: 12;
	background-color: rgba(0,0,0,0.125);
}

.menu li.kebab:hover ul.sub-menu {
/* 
	display: block;
 */
}
.menu li.kebab.open ul.sub-menu {
	display: block;
}

.menu li.kebab ul.sub-menu > li {
	width: 94px;
	height: 32px;
	margin-top: 6px;
	margin-left: 12px;
	text-align: left;
}
.menu li.kebab ul.sub-menu > li:nth-child(n+4) {
	display: inline-block;
}

.menu li.user {
	padding-left:0;
}

.menu li.user:hover {
/* 
	background-image: url( /assets/images/buttons/profileWhite.svg );
 */
}

.menu li.user.signed-in {
	position: relative;
	height: 32px;
	border-style: none;
	padding-left: 24px;
	text-shadow: revert;
	background-image: url( /assets/images/buttons/profileBlue.svg );
	background-repeat: no-repeat;
	background-position: 4px;
	background-size: 24;
}

.menu li.user.signed-in:hover {
	background-image: url( /assets/images/buttons/profileWhite.svg );
}

.menu li.user.signed-in ul > li:nth-child(-n+4) {
	display: block;
}

.menu li.user ul.sub-menu {
	display: none;
	position: absolute;
	top: 32px;
	left: -88px;
	z-index: 12;
	background-color: rgba(0,0,0,0.125);
}

/* 
.menu li.user:hover ul.sub-menu {
	display: block;
}

 */
.menu li.user.signed-in.open ul.sub-menu {
	display: block;
}

.menu li.user ul.sub-menu > li {
	width: 94px;
	height: 32px;
	margin-top: 8px;
	margin-left: 12px;
	text-align: left;
}

/* when not signed in */
.menu a.signin {
	border-style: none;
	width: 32px;
	height: 24px;
	text-shadow: revert;
	background-image: url( /assets/images/buttons/power0Blue.svg );
	background-repeat: no-repeat;
	background-position: 4px 0;
	background-size: 28px;
}
.menu a.signin:hover {
	background-image: url( /assets/images/buttons/power0W.svg );
}
.menu a.mui-signout {              /* the user is signed in */
	width: 48px;
	background-image: url(  /assets/images/buttons/power0Amber.svg );
	background-repeat: no-repeat;
	background-position: 4px 0;
	background-size: 28px;
}
.menu a.mui-signout:hover {
	background-image: url( /assets/images/buttons/power0Red.svg );
}

.signin-text { display: none; }
.signin-text: hover {  color: blue; }

.menu-list.open {
	width: 100%;
}
.menu-container {
	font-size: 24px;
}
.menu-widget {
	position: absolute;
	right: -18px;
	top: 24px;
	color: #70d0ff;
}
ul.menu .menu-comments { display:none; }

.dialog input.checkbox {
	width: 24px;
	margin-top: -2px;
	height: 24px;
}
@media only screen and (max-width: 920px) {
	.menu li:nth-child(n+5) { display: none; }
	.menu li.kebab {
		display: block;
	}
	.menu li.user {
		display: block;
	}
	.menu li.kebab ul.sub-menu li { display: block; }
	.menu li.kebab ul.sub-menu > li:nth-child(n+5) {
		display: block;
	}

	.menu-list {
		display: none;
	}
	.menu-list.open {
		position: absolute;
		top: 52px;
		width: 326px;
		right: -18px;
		padding-top: 24px;
		padding: 12px;
		display: flex;
		flex-flow: column;
		background-color: rgba(15, 74, 101, 0.85);
		z-index: 4; 
	}

	.menu ul > li {
		display: inline-block;
		position: relative;
		margin-top: 2px;
		padding: 16px;
		background-color: rgba(45, 124, 181, 0.85);
		z-index: 4; 
/* 
		border-radius: 8px;
		border-style: solid;
		border-color: white;
		border-width: 2px;
 */
	 }

	.menu ul > li a {
		position: absolute;
		top: 0;
/* 
		margin-top: 0;
 */
	 }

	.menu a {
		color: var(--c-panel-title);
		text-decoration: none;
	}

	.menu .signin {
		height: 38px;
		width: 64px;
		background-size: 24;
	}

}

@media only screen and (max-width: 680px) {
	ul.menu {	top: -6px; }
	.toy ul.menu {	top: -16px; }
	.menu li.kebab { display: block; }
	
	.menu li:nth-child(n+4) { display: none; }
	.menu li.kebab {
		display: block;
	}
	.menu li.user {
		display: block;
	}
	.menu li.kebab ul.sub-menu li { display: block; }
	.menu li.kebab ul.sub-menu > li:nth-child(n+4) {
		display: block;
	}
	
	img.badge {
		width: 48px;
		margin-left: 12px;
	}
	body.toy .banner {
		height: 68px;
	}

}

@media only screen and (max-width: 480px) {
	.menu li.signin {
		padding-right: 28px;  /* cramped on the right on tiny screens */
	}
}