/* musicshake_web page layout on top of the original Lite3 styles (2026-09-23) */
/* the editor fills the page (js/web-shim.js fit()); the 100px ad strip and the old share buttons are gone */
body { min-width: 0; min-height: 0; overflow: hidden; }
#footer, #share { display: none !important; }
#sitelinks { display: none !important; }   /* the page is the editor; links are in the menu bar and the site footer */
/* a finger dragging inside the editor or its windows moves them, it does not scroll or zoom the page */
#lite3, .dialog, #sidebar { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#lite3 input, .dialog input, .dialog textarea, #sidebar input { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
/* finger-size resize handles on touch screens for the windows that still resize (chords, instruments, effects;
   the editor itself no longer does) (the originals are 5px), placed just outside the edges so they never
   cover a window's title bar or its buttons */
@media (pointer: coarse) {
	.ui-resizable-n, .ui-resizable-s { height: 18px; }
	.ui-resizable-n { top: -18px; }
	.ui-resizable-s { bottom: -18px; }
	.ui-resizable-e, .ui-resizable-w { width: 18px; }
	.ui-resizable-e { right: -18px; }
	.ui-resizable-w { left: -18px; }
	.ui-resizable-se { width: 30px; height: 30px; right: -18px; bottom: -18px; z-index: 5; }
}

/* ---- menu bar: the same as on the other eng pages (rules copied from /css/ui.min.css, #header only) ---- */
#header-nav li.m > a.t {cursor: pointer;}
#header-nav li.m > a.t::after {content: " \25BE"; font-size: 0.8em;}
#header-nav li.m.open > a.t::after {content: " \25B4";}
#header {min-width: 0;}
#header-login {z-index: 3;
	background: #2a2a2a;
	padding-left: 12px;
	box-shadow: -12px 0 12px -6px #2a2a2a;
	white-space: nowrap;}
#header {display: flex; align-items: center; height: 35px;}
#header .logo {position: static; flex: none; padding: 0 10px; line-height: 0;}
#header .logo img {height: 18px; width: auto;}
#header-nav {margin-left: 0; flex: 1 1 auto; min-width: 0;
	overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
#header-nav::-webkit-scrollbar {display: none;}
#header-nav ul {display: flex; flex-wrap: nowrap; margin: 0; padding: 0;}
#header-nav li {float: none; flex: none;}
#header-nav li a {font-size: 12px; white-space: nowrap;}
#header-login {position: static; flex: none; height: 35px; line-height: 35px; padding: 0 12px;}
#header-login-fb, #header-login > a[href="/signup"] {display: none !important;}
#header-login a.notification .label {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
#header-login a.notification::before {content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 3px; vertical-align: -4px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23efefef' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");}
#header-login a.notification:hover::before {opacity: .8;}
#header .logo .logo-icon {display: none;}
@media (max-width: 700px) {
	#header .logo .logo-full {display: none;}
	#header .logo .logo-icon {display: block; width: 28px; height: 28px;}
	#header .logo {padding: 0 6px 0 8px;}
}
#header-nav li a {display: flex; align-items: center; height: 35px; line-height: 1;}
#header-login {display: flex; align-items: center; gap: 12px; line-height: 1;}
#header-login > a {display: inline-flex; align-items: center; height: 35px; margin-left: 0; font-size: 12px; line-height: 1;}
#header-login a.notification::before {vertical-align: middle;}
#header .logo {display: flex; align-items: center; height: 35px;}
#header .logo .logo-full {position: relative; top: -2px;}

/* ---- the editor's own toolbar (right side of its header): Save (new songs only), Install, bell, user id / Login, menu ---- */
#msw-toolbar { position: absolute; right: 0; top: 9px; display: flex; gap: 6px; align-items: center; font: bold 12px/1 arial, helvetica, sans-serif; }
#msw-toolbar a { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; color: #bbb; background: #333; border: 1px solid #444; cursor: pointer; text-decoration: none; white-space: nowrap; }
#msw-toolbar a:hover { color: #fff; border-color: #666; }
#msw-toolbar #autosave span { margin-left: 4px; color: #888; }
#msw-toolbar #autosave.on span { color: #3ddc5b; }
#msw-toolbar a.classic { color: #ff9d2e; }
#msw-toolbar a.save { color: #111; background: linear-gradient(#ffb14a, #f08a14); border-color: #b86a0e; }
#msw-toolbar a.save:hover { color: #000; border-color: #ffcf8a; }
#msw-toolbar a.install { color: #eee; }
#msw-toolbar a.install::before { content: ""; width: 12px; height: 12px; margin-right: 5px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9d2e' d='M11 3h2v10l3.5-3.5 1.4 1.4L12 16.8 6.1 10.9l1.4-1.4L11 13V3zM5 19h14v2H5z'/%3E%3C/svg%3E"); }
/* fixed in place: the header no longer moves the editor */
#lite3-header { cursor: default; }
@media (max-width: 640px) { #msw-toolbar a { padding: 0 7px; font-size: 11px; } #msw-toolbar a.classic .long, #msw-toolbar a.install .long { display: none; } }

/* ---- narrow editor (under 500px inside; #lite3.narrow set by web-shim.js fit()): the page never gets wider than
   the screen and the volume knob is hidden so the genre button and the three round buttons fit on one row */
html { overflow: hidden; }
#lite3.narrow #lite3-control-volume { display: none; }
#lite3.narrow #lite3-control .buttons { left: auto; right: 0; width: 148px; height: 44px; }
#lite3.narrow #lite3-control-shake { left: 52px; }
#lite3.narrow #lite3-control-menu { left: 104px; }
#lite3.narrow #lite3-control-genre { width: 150px; background-size: auto; }

/* post status window: the Flash-era ad frames (/ads/create-adsense-post-*.html) no longer exist */
#lite3-post-status .ad1, #lite3-post-status .ad2 { display: none !important; }

/* ---- Menu, Choose genre, Block variation, New song: popovers beside their button (web-shim.js popover()) ----
   the editor's own palette: near-black panels (#111/#1a1a1a) with the block's dark bevel, the orange accent of
   its titles and the Classic link, no blue */
#mask.msw-clear { background: transparent !important; opacity: 1 !important; cursor: default !important; }
.dialog.msw-pop {
	background: #161616; border: 1px solid #000; border-radius: 10px;
	box-shadow: inset 0 1px 0 #2e2e2e, 0 0 0 1px #2a2a2a, 0 14px 36px rgba(0, 0, 0, .75);
	overflow: hidden; min-width: 240px;
}
.dialog.msw-pop > .bg { display: none; }
.dialog.msw-pop > .top { background: linear-gradient(#2a2a2a, #1c1c1c); border-bottom: 1px solid #000; box-shadow: 0 1px 0 #262626; padding: 10px 14px; height: auto; }
.dialog.msw-pop > .top span { color: #ff9d2e; font: bold 12px/1.2 arial, helvetica, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.dialog.msw-pop > .top .close { top: 50%; transform: translateY(-50%); opacity: .6; }
.dialog.msw-pop > .top .close:hover { opacity: 1; }
.dialog.msw-pop > .content { background: transparent; }
.dialog.msw-pop .alist { padding: 6px; }
.dialog.msw-pop .alist > .pad, .dialog.msw-pop .alist > a { display: block; margin: 2px 0; padding: 9px 12px; border-radius: 6px; cursor: pointer; color: #ccc; text-decoration: none; border: 1px solid transparent; }
.dialog.msw-pop .alist > .pad:hover, .dialog.msw-pop .alist > a:hover { background: #222; border-color: #2e2e2e; }
.dialog.msw-pop .alist > .pad .label { color: #eee; font-size: 15px; margin: 0 0 2px; }
.dialog.msw-pop .alist > .pad:hover .label { color: #ff9d2e; }
.dialog.msw-pop .alist > .pad p { color: #888; font-size: 12px; margin: 0; }
.dialog.msw-pop .alist > a.selected { background: #2a1f10; border-color: #5a3b12; color: #ffb14a; }
.dialog.msw-pop .alist > a.selected:hover { background: #33250f; }
/* block variation list */
.dialog.msw-pop .itemlist .item { border-radius: 5px; color: #bbb; }
.dialog.msw-pop .itemlist .item:hover { background: #222; }
.dialog.msw-pop .itemlist .item.selected, .dialog.msw-pop .itemlist .item.selected * { background-color: #2a1f10; color: #ffb14a !important; }
.dialog.msw-pop .bottom { background: #111; border-top: 1px solid #000; box-shadow: inset 0 1px 0 #222; }

/* ---- installed app (html.app-standalone): the whole screen is the editor. The site's menu bar is hidden; its
   Login / user id / bell (#header-login) sit in the editor's toolbar and its links in the toolbar's menu, with the
   Classic version (js/web-shim.js toolbar()). In the browser the menu bar stays and the toolbar has Classic. ---- */
html.app-standalone #header { display: none !important; }
html:not(.app-standalone) #msw-toolbar a.sitemenu, html.app-standalone #msw-toolbar a.classic { display: none !important; }
#msw-toolbar { max-width: calc(100% - 150px); }
#msw-toolbar #header-login { position: static; display: flex; align-items: center; gap: 6px; height: auto; line-height: 1; padding: 0; margin: 0; background: none; box-shadow: none; text-align: left; z-index: auto; }
#msw-toolbar #header-login > a { display: inline-flex; align-items: center; height: 24px; margin: 0; padding: 0 10px; font: bold 12px/1 arial, helvetica, sans-serif; color: #ddd; }
#msw-toolbar #header-login > a:hover { color: #fff; }
#msw-toolbar #header-login > a.usermenu { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 24px; }
#msw-toolbar #header-login > a.usermenu span.icon { display: inline-block; width: 8px; height: 8px; margin-left: 6px; padding: 0; vertical-align: 1px; background: none; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(45deg) translateY(-2px); }
#msw-toolbar #header-login > a.usermenu.on { border-color: #ff9d2e; }
#msw-toolbar #header-login > a.notification { padding: 0 8px; }
#msw-toolbar #header-login > a.notification::before { margin-right: 3px; width: 15px; height: 15px; }
#msw-toolbar #header-login > a.notification .val { color: #aaa; }
#msw-toolbar #header-login > a.notification .val.highlight { color: #ff9d2e; }
#msw-toolbar a.sitemenu { width: 26px; padding: 0; justify-content: center; }
#msw-toolbar a.sitemenu::before { content: ""; width: 14px; height: 10px; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; background: linear-gradient(#ddd, #ddd) center / 100% 2px no-repeat; }
/* the site menu and the user menu: popovers in the editor's palette (as .msw-pop) */
#msw-sitemenu, #header-login-usermenu.msw-usermenu {
	position: fixed; z-index: 5000; background: #161616; border: 1px solid #000; border-radius: 10px; color: #ccc;
	box-shadow: inset 0 1px 0 #2e2e2e, 0 0 0 1px #2a2a2a, 0 14px 36px rgba(0, 0, 0, .75); padding: 6px; font: 14px/1.2 arial, helvetica, sans-serif;
}
#msw-sitemenu { min-width: 190px; }
#msw-sitemenu a, #header-login-usermenu.msw-usermenu .menu a { display: block; padding: 9px 12px; border-radius: 6px; color: #eee; font: bold 14px/1.2 arial, helvetica, sans-serif; text-decoration: none; }
#msw-sitemenu a:hover, #header-login-usermenu.msw-usermenu .menu a:hover { background: #222; color: #ff9d2e; text-decoration: none; }
#msw-sitemenu .sep { height: 1px; margin: 5px 6px; background: #2a2a2a; }
#msw-sitemenu a[target] { color: #999; font-weight: normal; font-size: 13px; }
#header-login-usermenu.msw-usermenu { display: flex; gap: 6px; align-items: flex-start; }
#header-login-usermenu.msw-usermenu .userimg { float: none; margin: 6px 0 0 6px; }
#header-login-usermenu.msw-usermenu .userimg img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
#header-login-usermenu.msw-usermenu .menu { float: none; width: 200px; margin: 0; }
@media (max-width: 640px) {
	#msw-toolbar { gap: 4px; max-width: calc(100% - 44px); }
	#msw-toolbar #header-login { gap: 4px; }
	#msw-toolbar #header-login > a { padding: 0 7px; font-size: 11px; }
	#msw-toolbar #header-login > a.usermenu { max-width: 84px; }
}