.autoplay .menu {	display: none; }

div.top.menu {
	position: relative;
	top: 12px;
	width: 100%;
}
nav {
	position: absolute;
	right: 0;
	top: 6px;
	margin-left: 12px;
  	font-size: 24px;
}

.banner img:not(.bottom img)  { z-index: 1;}

.menu ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.menu li {
	height: 32px;
  display: block;
  float: left;
  padding: 12px;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

.menu li a {
	color: var(--c-menu-blue);
	text-decoration: none;
	text-shadow: #000 1px 2px 2px;
}

.menu li a:hover {
	color: white;
}
.menu li:hover,
.menu li:focus-within {
  cursor: pointer;
}

.menu ul li ul {
	visibility: hidden;
	opacity: 0;
	min-width: 5rem;
	position: absolute;
	transition: all 0.5s ease;
	margin-top: 1rem;
	border: 1px solid #222;
	border-radius: 0 0 6px 6px;
	left: 0;
	display: none;
}

/* 
.menu ul li:hover > ul,
.menu ul li:focus-within > ul,
.menu ul li ul:hover,
.menu ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}
 */
 
.menu ul li.open ul {
  visibility: visible;
  opacity: 1;
  display: block
}

.menu li.kebab {
	width: 42px;
	height: 38px;
	position: relative;
	margin-top: 12px;
	border-style: none;
	text-shadow: revert;
	background-image: url( /assets/images/buttons/widget-blue.svg );
	background-repeat: no-repeat;
}

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

.menu ul li ul li {
	height: 32px;
  clear: both;
  width: 100%;
}

.menu li.user {              /* user profile button in the menu header.php */
	display: none;
	width: 42px;
	height: 38px;
	margin-top: 12px;
	margin-left: 14px;
	color: rgba(0,0,0,0);
	border-style: none;
	background-image: url( /assets/images/buttons/profileBlue.svg );
	background-repeat: no-repeat;
}
.menu li.user:hover {              /* user profile button in the menu header.php */
	background-image: url( /assets/images/buttons/profileWhite.svg );
}

.menu ul.dropdown {
	background: rgba(80,160,220,0.5);
	position: absolute;
	left: -52px;
	top: 34px;
	margin-top: 2px;
	margin-bottom: 32px;
	padding-bottom: 32px;
	padding-left: 22px;
	padding-right: 22px;
}

.menu .user ul.dropdown {
	left: -92px;
}

.menu .signin { 
	display: block;
	width: 42px;
	height: 38px;
	margin-top: 14px;
	margin-left: 14px;
	background-image: url( /assets/images/buttons/power0Blue.svg );
	background-repeat: no-repeat;
}
.menu .signin:hover {
	background-image: url( /assets/images/buttons/power0W.svg );
}
.menu.signed-in .signin { display: none; }
.menu.signed-in .user { display: block; }

.menu .kebab ul.dropdown > li.mini { display: none; }
.menu .kebab ul.dropdown > li.mobile { display: none; }

.toy .menu ul.top-menu > li.fat {display: block;}
.toy .menu ul.top-menu > li.mini {display: block;}
.toy .menu .kebab ul.dropdown > li.mini { display: none; }
.toy .menu .kebab ul.dropdown > li.mobile { display: none; }

@media only screen and (max-width: 920px) {
	.menu .kebab ul.dropdown > li.mini { display: none; }
	.menu .kebab ul.dropdown > li.mobile { display: none; }
}

@media only screen and (max-width: 640px) {
	.menu ul.top-menu > li.fat {display: none;}
	.menu .kebab ul.dropdown > li.mobile { display: block; }
	.menu .kebab ul.dropdown > li.mini { display: none; }
	
}

@media only screen and (max-width: 440px) {
	nav { right: -88px;} /* cludge */
	.toy .menu ul.top-menu > li.mini {display: none;}
	.toy .menu ul.top-menu > li.fat {display: none;}
	.toy .menu .kebab ul.dropdown > li.mobile { display: block; }
	.toy .menu .kebab ul.dropdown > li.mini { display: block; }
}

@media only screen and (max-width: 400px) {
	.menu .kebab ul.dropdown > li.mobile { display: block; }
	.menu .kebab ul.dropdown > li.mini { display: none; }
}

@media only screen and (max-width: 360px) {
	.menu ul.top-menu > li.mini {display: none;}
	.menu .kebab ul.dropdown > li.mobile { display: block; }
	.menu .kebab ul.dropdown > li.mini { display: block; }
}