/* 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 (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): My saved songs, Auto save, Classic Flash version ---- */
#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; }
@media (max-width: 640px) { #msw-toolbar a { padding: 0 7px; font-size: 11px; } #msw-toolbar a.classic .long { display: none; } }

/* ---- phones / narrow editor: the page never gets wider than the screen, and the bottom control row (built for
   a 500px editor: genre 170px + volume + three buttons from x=330) folds into two rows. #lite3.narrow is set by
   web-shim.js fit() when the editor's inside width is under 500px. */
html { overflow: hidden; }
#lite3.narrow #lite3-control { height: 110px; }
#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-volume { top: 72px; left: 0; }

/* 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; }