From b65bf920be38337c61919318fea77412dac2e013 Mon Sep 17 00:00:00 2001
From: Hri7566 <hri7566@gmail.com>
Date: Wed, 23 Oct 2024 02:26:39 -0400
Subject: [PATCH] beautify css

---
 screen.css | 1339 +++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 1104 insertions(+), 235 deletions(-)

diff --git a/screen.css b/screen.css
index 50b6cd6..02c067c 100755
--- a/screen.css
+++ b/screen.css
@@ -1,169 +1,742 @@
-* { image-rendering: pixelated; }
-* { margin: 0; }
-* { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
-html, body { width: 100%; height: 100%; overflow: hidden; font: 20pt verdana, "DejaVu Sans", sans-serif; color: white; text-shadow: #444 1px 1px; }
-body { position: absolute; }
-body {
-background: #3b5054; /* Old browsers */
-background: -moz-radial-gradient(center, ellipse cover,  #ecfafd 0%, #c5d5d8 100%); /* FF3.6+ */
-background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ecfafd), color-stop(100%,#c5d5d8)); /* Chrome,Safari4+ */
-background: -webkit-radial-gradient(center, ellipse cover,  #ecfafd 0%,#c5d5d8 100%); /* Chrome10+,Safari5.1+ */
-background: -o-radial-gradient(center, ellipse cover,  #ecfafd 0%,#c5d5d8 100%); /* Opera 12+ */
-background: -ms-radial-gradient(center, ellipse cover,  #ecfafd 0%,#c5d5d8 100%); /* IE10+ */
-background: radial-gradient(ellipse at center,  #ecfafd 0%,#c5d5d8 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecfafd', endColorstr='#c5d5d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
--webkit-transition: background 1000ms linear;
+* {
+    image-rendering: pixelated;
 }
 
-a { cursor: pointer; color: #f46; transition: color 0.25s; }
-a:hover { color: #e05; transition: color 0.25s; }
-.link { text-decoration: underline; cursor: pointer; color: #ffee00; }
+* {
+    margin: 0;
+}
 
-table { border: 0; padding: 0; margin: 0; }
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
 
-#names { position: fixed; top: 4px; left: 4px; font-size: 12px; width: 80%; }
-#names .name { float: left; position: relative; padding: 4px; margin: 2px; 
-	border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; 
-	min-width: 50px; text-align: center; cursor: pointer; line-height: 15px; }
-#names .name.me:after { content: "Me"; position: absolute; top: -4px; right: 50%; font-size: 10px; }
-#names .name.owner:before { content: url('/crown.png'); position: absolute; top: -8px; left: 4px; }
-#names .name.play { transform: translateY(-4px); -webkit-transform: translateY(-4px); }
-#names .name.muted-notes { color: #f88; }
-#names .name.muted-notes:after { content: "MUTE"; position: absolute; top: -4px; right: 50%; font-size: 8px; }
-#names .name.muted-chat { color: #f88; }
-#names .name.muted-chat:after { content: "MUTE"; position: absolute; top: -4px; right: 50%; font-size: 8px; }
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font: 20pt verdana, "DejaVu Sans", sans-serif;
+    color: white;
+    text-shadow: #444 1px 1px;
+}
 
-#piano { width: 95%; height: 20%; margin: auto; position: relative; overflow: hidden; padding-left: 1%; }
-#piano .key { float: left; width: 1.8%; height: 90%; border: 1px solid black; background: #fff; 
-	margin-left: -0.5%; margin-bottom: 100%;
-	box-shadow: 1px 2px 5px #000; -webkit-box-shadow: 1px 2px 5px #000; -moz-box-shadow: 1px 2px 5px #000;
-	border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
-	transition: background 4s ease-out; -webkit-transition: background 4s ease-out; -moz-transition: background 4s ease-out;
-	-o-transition: background 4s ease-out; padding: 0px;
-	overflow: hidden; }
-#piano .key.c, #piano .key.f { margin-left: 0; }
-#piano .key.sharp { width: 1.2%; height: 50%; background: #000; margin-left: -0.9%;
-	position: relative; }
+body {
+    position: absolute;
+}
 
-#piano .key.loading { background: #888; }
+body {
+    background: #3b5054; /* Old browsers */
+    background: -moz-radial-gradient(
+        center,
+        ellipse cover,
+        #ecfafd 0%,
+        #c5d5d8 100%
+    ); /* FF3.6+ */
+    background: -webkit-gradient(
+        radial,
+        center center,
+        0px,
+        center center,
+        100%,
+        color-stop(0%, #ecfafd),
+        color-stop(100%, #c5d5d8)
+    ); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(
+        center,
+        ellipse cover,
+        #ecfafd 0%,
+        #c5d5d8 100%
+    ); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(
+        center,
+        ellipse cover,
+        #ecfafd 0%,
+        #c5d5d8 100%
+    ); /* Opera 12+ */
+    background: -ms-radial-gradient(
+        center,
+        ellipse cover,
+        #ecfafd 0%,
+        #c5d5d8 100%
+    ); /* IE10+ */
+    background: radial-gradient(
+        ellipse at center,
+        #ecfafd 0%,
+        #c5d5d8 100%
+    ); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecfafd', endColorstr='#c5d5d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+    transition: background 1000ms linear;
+    -webkit-transition: background 1000ms linear;
+}
 
-#piano .key.play { transform: translateY(1%); -webkit-transform: translateY(1%); -webkit-box-shadow: 0px 1px 2px #000; }
+a {
+    cursor: pointer;
+    color: #f46;
+    transition: color 0.25s;
+}
 
-.ease-out { transition: left 0.1s ease-out; -webkit-transition: left 0.1s ease-out; -moz-transition: left 0.1s ease-out;
-	-o-transition: left 0.1s ease-out; }
-.ease-in { transition: left 0.1s ease-in; -webkit-transition: left 0.1s ease-in; -moz-transition: left 0.1s ease-in;
-	-o-transition: left 0.1s ease-in; }
-.slide-left { left: -100%; }
-.slide-right { left: 100%; }
+a:hover {
+    color: #e05;
+    transition: color 0.25s;
+}
+
+.link {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #ffee00;
+}
+
+table {
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+#names {
+    position: fixed;
+    top: 4px;
+    left: 4px;
+    font-size: 12px;
+    width: 80%;
+}
+
+#names .name {
+    float: left;
+    position: relative;
+    padding: 4px;
+    margin: 2px;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    min-width: 50px;
+    text-align: center;
+    cursor: pointer;
+    line-height: 15px;
+}
+
+#names .name.me:after {
+    content: "Me";
+    position: absolute;
+    top: -4px;
+    right: 50%;
+    font-size: 10px;
+}
+
+#names .name.owner:before {
+    content: url("/crown.png");
+    position: absolute;
+    top: -8px;
+    left: 4px;
+}
+
+#names .name.play {
+    transform: translateY(-4px);
+    -webkit-transform: translateY(-4px);
+}
+
+#names .name.muted-notes {
+    color: #f88;
+}
+
+#names .name.muted-notes:after {
+    content: "MUTE";
+    position: absolute;
+    top: -4px;
+    right: 50%;
+    font-size: 8px;
+}
+
+#names .name.muted-chat {
+    color: #f88;
+}
+
+#names .name.muted-chat:after {
+    content: "MUTE";
+    position: absolute;
+    top: -4px;
+    right: 50%;
+    font-size: 8px;
+}
+
+#piano {
+    width: 95%;
+    height: 20%;
+    margin: auto;
+    position: relative;
+    overflow: hidden;
+    padding-left: 1%;
+}
+
+#piano .key {
+    float: left;
+    width: 1.8%;
+    height: 90%;
+    border: 1px solid black;
+    background: #fff;
+    margin-left: -0.5%;
+    margin-bottom: 100%;
+    box-shadow: 1px 2px 5px #000;
+    -webkit-box-shadow: 1px 2px 5px #000;
+    -moz-box-shadow: 1px 2px 5px #000;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    transition: background 4s ease-out;
+    -webkit-transition: background 4s ease-out;
+    -moz-transition: background 4s ease-out;
+    -o-transition: background 4s ease-out;
+    padding: 0px;
+    overflow: hidden;
+}
+
+#piano .key.c,
+#piano .key.f {
+    margin-left: 0;
+}
+
+#piano .key.sharp {
+    width: 1.2%;
+    height: 50%;
+    background: #000;
+    margin-left: -0.9%;
+    position: relative;
+}
+
+#piano .key.loading {
+    background: #888;
+}
+
+#piano .key.play {
+    transform: translateY(1%);
+    -webkit-transform: translateY(1%);
+    box-shadow: 0px 1px 2px #000;
+    -webkit-box-shadow: 0px 1px 2px #000;
+}
+
+.slide {
+    left: 0;
+}
+
+.ease-out {
+    transition: left 0.1s ease-out;
+}
+
+.ease-in {
+    transition: left 0.1s ease-in;
+}
+
+.slide-left {
+    left: -100%;
+}
+
+.slide-right {
+    left: 100%;
+}
+
+.cursor {
+    width: 16px;
+    height: 24px;
+    background: url("/cursor.png");
+    position: absolute;
+    pointer-events: none;
+    margin-left: -2px;
+    margin-top: -2px;
+    left: 200%;
+    top: 100%;
+}
+
+.cursor .name {
+    display: inline;
+    position: relative;
+    left: 16px;
+    top: 8px;
+    pointer-events: none;
+    color: #fff;
+    background: #000;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    white-space: nowrap;
+    padding: 1px;
+    font-size: 10px;
+}
+
+.cursor.owner .name:after {
+    content: url("/crown.png");
+    position: relative;
+    top: -8px;
+    left: 0px;
+}
+
+.cursor .name {
+    display: inline-block;
+}
 
-.cursor { width: 16px; height: 24px; background: url('/cursor.png'); position: absolute; pointer-events: none;
-	margin-left: -2px; margin-top: -2px; left: 200%; top: 100%;}
-.cursor .name { display: inline; position: relative; left: 16px; top: 8px; pointer-events: none; color: #fff; background: #000;
-	border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; white-space:nowrap; padding: 1px; font-size: 10px; }
-.cursor.owner .name:after { content: url('/crown.png'); position: relative; top: -8px; left: 0px; }
-.cursor .name { display: inline-block; }
 /* .cursor .spotlight { display: none; position: relative; left: -14px; top: -9px; width: 32px; height: 32px;
 	 border: 4px solid white; -webkit-border-radius: 100%; } */
-.cursor { transition: top 100ms, left 100ms; }
+.cursor {
+    transition: top 100ms, left 100ms;
+}
 
-.participant-menu { display: none; position: fixed; background: black; width: 150px; font-size: 12px; padding: 0px; margin: 0px;
-	border-radius: 2px; }
-.participant-menu:last-child .menu-item:hover { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
-.participant-menu .info { height: 40px; text-align: center; line-height: 40px; font-size: 9px; color: rgba(255,255,255,0.9); overflow: hidden;
-	opacity: 0; transition: opacity 0.2s ease-out; user-select: text; }
-.participant-menu .info:hover { opacity: 1; transition: opacity 0.2s ease-out; }
-.participant-menu .menu-item { cursor: pointer; margin: 0px; padding: 15px 5px;
-	border-top: 1px solid rgba(255,255,255,0.3); }
-.participant-menu .menu-item:hover { background: rgba(255,255,255,0.4); }
-.participant-menu .menu-item.clicked { background: rgba(255,255,255,0.5); }
+.participant-menu {
+    display: none;
+    position: fixed;
+    background: black;
+    width: 150px;
+    font-size: 12px;
+    padding: 0px;
+    margin: 0px;
+    border-radius: 2px;
+}
 
-#crown { position: absolute; width: 16px; height: 16px; background: url('/crown.png') no-repeat; cursor: pointer;
-	font-size: 10px; }
-#crown span { margin-left: 16px; margin-top: 2px; }
+.participant-menu:last-child .menu-item:hover {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
 
-#room-notice { position: fixed; top: 20%; width: 100%; text-align: center; opacity: 0.5; font-size: 20px; pointer-events: none; display: none; }
-#room-notice p { margin: 1em; }
+.participant-menu .info {
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    font-size: 9px;
+    color: rgba(255, 255, 255, 0.9);
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+    user-select: text;
+}
 
-#bottom{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 60px; background: #9a9; margin-bottom: 3px; }
+.participant-menu .info:hover {
+    opacity: 1;
+    transition: opacity 0.2s ease-out;
+}
 
-#room, #room * { cursor: pointer; }
-#room { position: absolute; left: 0; top: 0; padding: 5px; width: 240px; height: 12px; background: #898; border: 1px solid #aba; cursor: pointer;
-	margin: 4px 24px; font-size: 12px; }
-#room .info { white-space: nowrap; line-height: 12px; overflow: hidden; height: 20px; }
+.participant-menu .menu-item {
+    cursor: pointer;
+    margin: 0px;
+    padding: 15px 5px;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.participant-menu .menu-item:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.participant-menu .menu-item.clicked {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+#crown {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: url("/crown.png") no-repeat;
+    cursor: pointer;
+    font-size: 10px;
+}
+
+#crown span {
+    margin-left: 16px;
+    margin-top: 2px;
+}
+
+#room-notice {
+    position: fixed;
+    top: 20%;
+    width: 100%;
+    text-align: center;
+    opacity: 0.5;
+    font-size: 20px;
+    pointer-events: none;
+    display: none;
+}
+
+#room-notice p {
+    margin: 1em;
+}
+
+#bottom {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 60px;
+    background: #9a9;
+    margin-bottom: 3px;
+}
+
+#room,
+#room * {
+    cursor: pointer;
+}
+
+#room {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 5px;
+    width: 240px;
+    height: 12px;
+    background: #898;
+    border: 1px solid #aba;
+    cursor: pointer;
+    margin: 4px 24px;
+    font-size: 12px;
+}
+
+#room .info {
+    white-space: nowrap;
+    line-height: 12px;
+    overflow: hidden;
+    height: 20px;
+}
+
+#room .info.lobby {
+    color: #eeffbb;
+}
+
+#room .info.not-visible {
+    color: #0d3761;
+}
 
-#room .info.lobby { color: #eeffbb; }
-#room .info.not-visible { color: #0d3761; }
 /* #room .info.crownsolo:after { content: url('/crownsolo.png'); position: relative; top: 2px; margin-left: 4px; }
  #room .info.no-chat:after { content: url('/no-chat.png'); position: relative; top: 2px; margin-left: 4px; } */
-#room .info.banned { color: rgba(255, 64, 64, 0.5); }
+#room .info.banned {
+    color: rgba(255, 64, 64, 0.5);
+}
 
-#room .expand { width: 24px; height: 100%; position: absolute; right: 0; top: 0; background: #aba url('/arrow.png') no-repeat center 0%; }
-#room .more { display: none; position: absolute; bottom: 100%; left: -1px; width: 100%; overflow: hidden; overflow-y: scroll; background: #898;
-	border: 1px solid #aba; max-height: 600px; }
-#room .more > div { margin: 0; padding: 3px 6px 0px 6px; width: 100%; height: 20px; }
-#room .more .info:hover { background: #aba; }
-#room .more .new { background: #9a9; }
-#room .more .new:hover { background: #cdc; }
+#room .expand {
+    width: 24px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #aba url("/arrow.png") no-repeat center 0%;
+}
 
-.ugly-button { height: 12px; font-size: 12px; background: rgba(170, 187, 170, 0.35); border: 1px solid #898; padding: 5px; cursor: pointer; line-height: 12px;
-	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; width: 100px; overflow: hidden; white-space:nowrap; }
-.ugly-button:hover { background: rgba(187, 204, 170, 0.35) }
-.ugly-button.stuck { background: rgba(204, 187, 170, 0.35); }
-#new-room-btn { position: absolute; left: 300px; top: 4px; }
-#play-alone-btn { position: absolute; left: 420px; top: 4px; }
-#sound-btn { position: absolute; left: 540px; top: 4px; }
-#room-settings-btn { position: absolute; left: 660px; top: 4px; display: none; }
-#midi-btn { position: absolute; left: 300px; top: 32px; }
-#record-btn { position: absolute; left: 420px; top: 32px; }
-#synth-btn { position: absolute; left: 540px; top: 32px; }
-#social #more-button { margin-top: 4px; width: 77px; height: 90px; border-radius: 5px; border: 1px solid #abb; cursor: pointer;
-	transition: all 0.25s; box-shadow: 1px 1px 8px #bb9; color: #788; text-shadow: none;
-	background: url('/web/20150317155006im_/http://www.multiplayerpiano.com/kitten1.png') 0px 4px no-repeat; background-color: #dee; }
-#social #more-button:hover { color: #899; background-color: #e8f8f0; transition: background-color 0.25s; }
+#room .more {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: -1px;
+    width: 100%;
+    overflow: hidden;
+    overflow-y: scroll;
+    background: #898;
+    border: 1px solid #aba;
+    max-height: 600px;
+}
 
+#room .more > div {
+    margin: 0;
+    padding: 3px 6px 0px 6px;
+    width: 100%;
+    height: 20px;
+}
 
-#tooltip { position: absolute; pointer-events: none; background: #000; color: #fff; font-size: 10px; }
-.knob { cursor: pointer; }
-.switched-on { background: #ff8; }
+#room .more .info:hover {
+    background: #aba;
+}
 
-#status { position: absolute; left: 0px; bottom: 10px; width: 320px; height: 20px; padding: 5px; font-size: 20px; font-weight: 800;
-	line-height: 20px; pointer-events: none; }
-#status .number { font-size: 35px; }
+#room .more .new {
+    background: #9a9;
+}
 
-#volume { position: absolute; right: 20px; top: 0px; width: 100px; height: 40px; margin: 10px; }
-#volume-slider { width: 100%; height: 100%; background: url("volume2.png") no-repeat; background-position: 50% 50%;
-	-webkit-appearance: none; }
+#room .more .new:hover {
+    background: #cdc;
+}
 
-#volume-label { position: absolute; right: 30px; bottom: 10px; font-size: 10px; color: #ccc; }
+.ugly-button {
+    height: 12px;
+    font-size: 12px;
+    background: rgba(170, 187, 170, 0.35);
+    border: 1px solid #898;
+    padding: 5px;
+    cursor: pointer;
+    line-height: 12px;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+}
 
-#banner { width: 468px; height: 60px; position: absolute; right: 0; top: 0; font-size: 18px; display: none; }
-#banner a { color: #ffdd00; }
+.ugly-button:hover {
+    background: rgba(187, 204, 170, 0.35);
+}
 
-#quota { width: 100%; height: 3px; position: fixed; bottom: 0; left: 0; background: #f80; }
-#quota .value { width: 100%; height: 100%; display: block; background: #fd0; }
+.ugly-button.stuck {
+    background: rgba(204, 187, 170, 0.35);
+}
 
-.relative { position: relative; width: 100%; height: 100%; }
+#new-room-btn {
+    position: absolute;
+    left: 300px;
+    top: 4px;
+}
 
-.notification { position: absolute; }
-.notification-body { background: #fea; border-color: #fea; padding: 10px; position: relative; left: 0; top: 0;
-	color: #444; font-size: 12px; text-shadow: #ccc 1px 1px;
-	border-radius: 6px; box-shadow: 2px 2px 5px rgba(0,0,0,0.25); }
-.notification-body:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -3px; border-top: 10px solid transparent;
-    border-top-color: inherit; border-left: 6px solid transparent; border-right: 6px solid transparent; }
-.title { border-bottom: 1px solid #f84; font-size: 16px; font-weight: bold; padding-bottom: 5px; margin-bottom: 8px; }
-.notification .x { position: absolute; right: 4px; top: 0px; cursor: pointer; font-size: 20px; color: #f84; text-shadow: none; }
-.notification .x:hover { font-weight: bold; }
-.notification.classic .notification-body { width: 400px; background: #fea; border-color: #fea;}
-.notification.short .title { display: none; }
+#play-alone-btn {
+    position: absolute;
+    left: 420px;
+    top: 4px;
+}
 
-.notification h1 { font-size: 14px; font-weight: bold; padding-top: 8px; padding-bottom: 8px; text-decoration: underline;}
-.notification .connection { padding: 8px; margin: 8px; background: #fed; border: 1px solid #f84; cursor: pointer; font-family: monospace; }
-.notification .connection.enabled { background: #dfd; }
-.notification .connection:after { content: "OFF"; font-size: 10px; color: #a44; float: right; }
-.notification .connection.enabled:after { content: "ON"; font-size: 10px; color: #4a4; float: right; }
-.notification .connection:hover { font-weight: bold; }
+#sound-btn {
+    position: absolute;
+    left: 540px;
+    top: 4px;
+}
 
-.notification ul { list-style-type: upper-roman; }
+#room-settings-btn {
+    position: absolute;
+    left: 660px;
+    top: 4px;
+    display: none;
+}
+
+#midi-btn {
+    position: absolute;
+    left: 300px;
+    top: 32px;
+}
+
+#record-btn {
+    position: absolute;
+    left: 420px;
+    top: 32px;
+}
+
+#synth-btn {
+    position: absolute;
+    left: 540px;
+    top: 32px;
+}
+
+#social #more-button {
+    margin-top: 4px;
+    width: 77px;
+    height: 90px;
+    border-radius: 5px;
+    border: 1px solid #abb;
+    cursor: pointer;
+    transition: all 0.25s;
+    box-shadow: 1px 1px 8px #bb9;
+    color: #788;
+    text-shadow: none;
+    background: url("/web/20150317155006im_/http://www.multiplayerpiano.com/kitten1.png")
+        0px 4px no-repeat;
+    background-color: #dee;
+}
+
+#social #more-button:hover {
+    color: #899;
+    background-color: #e8f8f0;
+    transition: background-color 0.25s;
+}
+
+#tooltip {
+    position: absolute;
+    pointer-events: none;
+    background: #000;
+    color: #fff;
+    font-size: 10px;
+}
+
+.knob {
+    cursor: pointer;
+}
+
+.switched-on {
+    background: #ff8;
+}
+
+#status {
+    position: absolute;
+    left: 0px;
+    bottom: 10px;
+    width: 320px;
+    height: 20px;
+    padding: 5px;
+    font-size: 20px;
+    font-weight: 800;
+    line-height: 20px;
+    pointer-events: none;
+}
+
+#status .number {
+    font-size: 35px;
+}
+
+#volume {
+    position: absolute;
+    right: 20px;
+    top: 0px;
+    width: 100px;
+    height: 40px;
+    margin: 10px;
+}
+
+#volume-slider {
+    width: 100%;
+    height: 100%;
+    background: url("volume2.png") no-repeat;
+    background-position: 50% 50%;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+#volume-label {
+    position: absolute;
+    right: 30px;
+    bottom: 10px;
+    font-size: 10px;
+    color: #ccc;
+}
+
+#banner {
+    width: 468px;
+    height: 60px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 18px;
+    display: none;
+}
+
+#banner a {
+    color: #ffdd00;
+}
+
+#quota {
+    width: 100%;
+    height: 3px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #f80;
+}
+
+#quota .value {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background: #fd0;
+}
+
+.relative {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.notification {
+    position: absolute;
+}
+
+.notification-body {
+    background: #fea;
+    border-color: #fea;
+    padding: 10px;
+    position: relative;
+    left: 0;
+    top: 0;
+    color: #444;
+    font-size: 12px;
+    text-shadow: #ccc 1px 1px;
+    border-radius: 6px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
+}
+
+.notification-body:after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -3px;
+    border-top: 10px solid transparent;
+    border-top-color: inherit;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+}
+
+.title {
+    border-bottom: 1px solid #f84;
+    font-size: 16px;
+    font-weight: bold;
+    padding-bottom: 5px;
+    margin-bottom: 8px;
+}
+
+.notification .x {
+    position: absolute;
+    right: 4px;
+    top: 0px;
+    cursor: pointer;
+    font-size: 20px;
+    color: #f84;
+    text-shadow: none;
+}
+
+.notification .x:hover {
+    font-weight: bold;
+}
+
+.notification.classic .notification-body {
+    width: 400px;
+    background: #fea;
+    border-color: #fea;
+}
+
+.notification.short .title {
+    display: none;
+}
+
+.notification h1 {
+    font-size: 14px;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    text-decoration: underline;
+}
+
+.notification .connection {
+    padding: 8px;
+    margin: 8px;
+    background: #fed;
+    border: 1px solid #f84;
+    cursor: pointer;
+    font-family: monospace;
+}
+
+.notification .connection.enabled {
+    background: #dfd;
+}
+
+.notification .connection:after {
+    content: "OFF";
+    font-size: 10px;
+    color: #a44;
+    float: right;
+}
+
+.notification .connection.enabled:after {
+    content: "ON";
+    font-size: 10px;
+    color: #4a4;
+    float: right;
+}
+
+.notification .connection:hover {
+    font-weight: bold;
+}
+
+.notification ul {
+    list-style-type: upper-roman;
+}
 
 .notification .pack {
     margin: 1px;
@@ -171,110 +744,406 @@ table { border: 0; padding: 0; margin: 0; }
     background: none;
     border: 1px solid #f84;
     border-radius: 4px;
-	cursor: pointer;
-	font-family: monospace;
+    cursor: pointer;
+    font-family: monospace;
 }
-.notification .pack.enabled { background: #dfd; cursor: not-allowed; font-weight: bolder; }
-.notification .pack:after { content: ""; font-size: 10px; color: #a44; float: right; }
-.notification .pack.enabled:after { content: "Selected"; font-size: 10px; color: #4a4; float: right; }
-.notification .pack:hover { font-weight: bold; }
 
-#modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; }
-#modal .bg { width: 100%; height: 100%; background: #48a; opacity: 0.5; position: absolute; left: 0; top: 0; }
-#modal, #modal * { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
-
-.dialog { background: #cdc; width: 400px; height: 100px; position: fixed; left: 50%; top: 50%; 
-	margin-left: -200px; margin-top: -50px; padding: 10px; border: 1px solid #9a9; overflow: hidden;
-	border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
-	box-shadow: 0px 0px 8px #000; -webkit-box-shadow: 0px 0px 8px #000; -moz-box-shadow: 0px 0px 8px #000; }
-.dialog p { margin: 10px; font-size: 20px; }
-.dialog input.text { font-size: 20px; height: 20px; width: 75%; }
-.dialog input.checkbox { margin: 0 5px; }
-.dialog .submit { background: #fe4; border: none; padding: 7px 40px 20px 30px; font-size: 20px; color: #fff;
-	text-shadow: #444 2px 2px 2px;
-	border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
-	box-shadow: inset 0px 0px 4px #000; -webkit-box-shadow: inset 0px 0px 4px #000; -moz-box-shadow: inset 0px 0px 4px #000;
-	transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -o-transition: all 0.25s;
-	position: absolute; bottom: -10px; right: -10px; }
-.dialog .submit:hover { background: #ff8; transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s;
-	-o-transition: all 0.25s; }
-
-#room-settings { height: 400px; margin-top: -200px; }
-
-#chat { display: none; opacity: 1; }
-#chat { position: fixed; bottom: 64px; left: 0; width: 100%; vertical-align: bottom; font-size: 13px; color: white; text-shadow: #888 1px 1px; }
-#chat, #chat * { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
-#chat ul { list-style: none; margin: 4px; padding: 0; background-attachment: local; }
-#chat li { padding: 2px; opacity: 0; }
-#chat li .name { font-weight: bold; margin-right: 10px; }
-#chat li .message { margin-right: 6px; }
-#chat li .quote { color: #789922; }
-#chat input { margin: 4px; width: 99%; border: 1px solid #fff; background: none; text-shadow: #888 1px 1px; color: #fff; 
-	border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
-#chat input::-webkit-input-placeholder { color: #ccc; }
-#chat input:-moz-placeholder { color: #ccc; }
-#chat input:focus { outline: none; border: 1px solid #ff8; }
-#chat.chatting { background: rgba(64,80,80,0.75); border-radius: 5px; box-shadow: 1px 1px 5px #888; transition: all 0.1s; }
-#chat.chatting li { display: list-item !important; opacity: 1 !important; text-shadow: #aaa 1px 1px; }
-#chat.chatting ul { max-height: 50em; overflow-y: scroll; overflow-x: hidden; word-wrap: break-word; }
-
-#social { position: fixed; top: 4px; right: 6px; width: 80px; font-size: 12px; }
-#social #more-button { margin-top: 4px; width: 77px; height: 90px; border-radius: 5px; border: 1px solid #abb; cursor: pointer;
-	transition: all 0.25s; box-shadow: 1px 1px 8px #bb9; color: #788; text-shadow: none;
-	background: url('kitten1.png') 0px 4px no-repeat; background-color: #dee; }
-#social #more-button:hover { color: #899; background-color: #e8f8f0; transition: background-color 0.25s; }
-#social .fb-like { position: absolute; right: 0px; }
-#social #inclinations { margin-top: 50px; margin-bottom: 20px; }
-
-#more { display: none; width: 1250px; margin: 0 auto; padding: 0px; border-radius: 10px; font-size: 15px; border: 1px solid #b0c0c0;
-	color: #566; background: #bcc; box-shadow: 1px 1px 8px #899; position: fixed; top: 50px; right: 50px; text-shadow: none; }
-#more div { margin: 0px; padding: 0px; }
-#more .items { margin-left: 1%; }
-#more .items .item { width: 33%; float: left; background: #cdd; transition: background 0.25s; }
-#more .items .item:hover { background: #d0e0e0; transition: background 0.25s; }
-#more .items .item .content { height: 200px; padding: 10px; border-right: 1px solid #bcc; border-bottom: 1px solid #bcc; }
-#more .items .item .content p { margin-top: 1em; margin-bottom: 1em; }
-#more .header { padding: 5px 10px; }
-#more .footer { clear: both; padding: 5px 10px; font-size: 12px; }
-
-#email:before { content: url('envelope.png'); margin: 4px; }
-
-
-#room-notice { z-index: 1; }
-#cursors { z-index: 2; }
-#chat { z-index: 100; }
-#social { z-index: 200; }
-#names { z-index: 300; }
-#piano { z-index: 400; }
-#piano .key { z-index: 401; }
-#piano .key.sharp { z-index: 402; }
-#bottom { z-index: 500; }
-#crown { z-index: 600; }
-.notification { z-index: 700; }
-#cursors .cursor { z-index: 800; }
-#chat.chatting { z-index: 900; }
-.participant-menu { z-index: 1000; }
-#modal { z-index: 10000; }
-#tooltip { z-index: 20000; }
-
-
-.clear { clear: both; }
-
-.spin { animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite;
-	-o-animation: spin 1s linear infinite; -ms-animation: spin 1s linear infinite; }
-@-webkit-keyframes spin {
-0% { -webkit-transform: rotate(0deg);}
-100% { -webkit-transform: rotate(360deg);}
+.notification .pack.enabled {
+    background: #dfd;
+    cursor: not-allowed;
+    font-weight: bolder;
 }
-@-moz-keyframes spin {
-0% { -moz-transform: rotate(0deg);}
-100% { -moz-transform: rotate(360deg);}
+
+.notification .pack:after {
+    content: "";
+    font-size: 10px;
+    color: #a44;
+    float: right;
 }
-@-o-keyframes spin {
-0% { -o-transform: rotate(0deg);}
-100% { -o-transform: rotate(360deg);}
+
+.notification .pack.enabled:after {
+    content: "Selected";
+    font-size: 10px;
+    color: #4a4;
+    float: right;
 }
-@-ms-keyframes spin {
-0% { -ms-transform: rotate(0deg);}
-100% { -ms-transform: rotate(360deg);}
+
+.notification .pack:hover {
+    font-weight: bold;
+}
+
+#modal {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: none;
+}
+
+#modal .bg {
+    width: 100%;
+    height: 100%;
+    background: #48a;
+    opacity: 0.5;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+#modal,
+#modal * {
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+}
+
+.dialog {
+    background: #cdc;
+    width: 400px;
+    height: 100px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin-left: -200px;
+    margin-top: -50px;
+    padding: 10px;
+    border: 1px solid #9a9;
+    overflow: hidden;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    box-shadow: 0px 0px 8px #000;
+    -webkit-box-shadow: 0px 0px 8px #000;
+    -moz-box-shadow: 0px 0px 8px #000;
+}
+
+.dialog p {
+    margin: 10px;
+    font-size: 20px;
+}
+
+.dialog input.text {
+    font-size: 20px;
+    height: 20px;
+    width: 75%;
+}
+
+.dialog input.checkbox {
+    margin: 0 5px;
+}
+
+.dialog .submit {
+    background: #fe4;
+    border: none;
+    padding: 7px 40px 20px 30px;
+    font-size: 20px;
+    color: #fff;
+    text-shadow: #444 2px 2px 2px;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    box-shadow: inset 0px 0px 4px #000;
+    -webkit-box-shadow: inset 0px 0px 4px #000;
+    -moz-box-shadow: inset 0px 0px 4px #000;
+    transition: all 0.25s;
+    -webkit-transition: all 0.25s;
+    -moz-transition: all 0.25s;
+    -o-transition: all 0.25s;
+    position: absolute;
+    bottom: -10px;
+    right: -10px;
+}
+
+.dialog .submit:hover {
+    background: #ff8;
+    transition: all 0.25s;
+    -webkit-transition: all 0.25s;
+    -moz-transition: all 0.25s;
+    -o-transition: all 0.25s;
+}
+
+#room-settings {
+    height: 400px;
+    margin-top: -200px;
+}
+
+#chat {
+    display: none;
+    opacity: 1;
+}
+
+#chat {
+    position: fixed;
+    bottom: 64px;
+    left: 0;
+    width: 100%;
+    vertical-align: bottom;
+    font-size: 13px;
+    color: white;
+    text-shadow: #888 1px 1px;
+}
+
+#chat,
+#chat * {
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+}
+
+#chat ul {
+    list-style: none;
+    margin: 4px;
+    padding: 0;
+    background-attachment: local;
+}
+
+#chat li {
+    padding: 2px;
+    opacity: 0;
+}
+
+#chat li .name {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+#chat li .message {
+    margin-right: 6px;
+}
+
+#chat li .quote {
+    color: #789922;
+}
+
+#chat input {
+    margin: 4px;
+    width: 99%;
+    border: 1px solid #fff;
+    background: none;
+    text-shadow: #888 1px 1px;
+    color: #fff;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+}
+
+#chat input::-webkit-input-placeholder {
+    color: #ccc;
+}
+
+#chat input:-moz-placeholder {
+    color: #ccc;
+}
+
+#chat input:focus {
+    outline: none;
+    border: 1px solid #ff8;
+}
+
+#chat.chatting {
+    background: rgba(64, 80, 80, 0.75);
+    border-radius: 5px;
+    box-shadow: 1px 1px 5px #888;
+    transition: all 0.1s;
+}
+
+#chat.chatting li {
+    display: list-item !important;
+    opacity: 1 !important;
+    text-shadow: #aaa 1px 1px;
+}
+
+#chat.chatting ul {
+    max-height: 50em;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-wrap: break-word;
+}
+
+#social {
+    position: fixed;
+    top: 4px;
+    right: 6px;
+    width: 80px;
+    font-size: 12px;
+}
+
+#social #more-button {
+    margin-top: 4px;
+    width: 77px;
+    height: 90px;
+    border-radius: 5px;
+    border: 1px solid #abb;
+    cursor: pointer;
+    transition: all 0.25s;
+    box-shadow: 1px 1px 8px #bb9;
+    color: #788;
+    text-shadow: none;
+    background: url("kitten1.png") 0px 4px no-repeat;
+    background-color: #dee;
+}
+
+#social #more-button:hover {
+    color: #899;
+    background-color: #e8f8f0;
+    transition: background-color 0.25s;
+}
+
+#social .fb-like {
+    position: absolute;
+    right: 0px;
+}
+
+#social #inclinations {
+    margin-top: 50px;
+    margin-bottom: 20px;
+}
+
+#more {
+    display: none;
+    width: 1250px;
+    margin: 0 auto;
+    padding: 0px;
+    border-radius: 10px;
+    font-size: 15px;
+    border: 1px solid #b0c0c0;
+    color: #566;
+    background: #bcc;
+    box-shadow: 1px 1px 8px #899;
+    position: fixed;
+    top: 50px;
+    right: 50px;
+    text-shadow: none;
+}
+
+#more div {
+    margin: 0px;
+    padding: 0px;
+}
+
+#more .items {
+    margin-left: 1%;
+}
+
+#more .items .item {
+    width: 33%;
+    float: left;
+    background: #cdd;
+    transition: background 0.25s;
+}
+
+#more .items .item:hover {
+    background: #d0e0e0;
+    transition: background 0.25s;
+}
+
+#more .items .item .content {
+    height: 200px;
+    padding: 10px;
+    border-right: 1px solid #bcc;
+    border-bottom: 1px solid #bcc;
+}
+
+#more .items .item .content p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+#more .header {
+    padding: 5px 10px;
+}
+
+#more .footer {
+    clear: both;
+    padding: 5px 10px;
+    font-size: 12px;
+}
+
+#email:before {
+    content: url("envelope.png");
+    margin: 4px;
+}
+
+#room-notice {
+    z-index: 1;
+}
+
+#cursors {
+    z-index: 2;
+}
+
+#chat {
+    z-index: 100;
+}
+
+#social {
+    z-index: 200;
+}
+
+#names {
+    z-index: 300;
+}
+
+#piano {
+    z-index: 400;
+}
+
+#piano .key {
+    z-index: 401;
+}
+
+#piano .key.sharp {
+    z-index: 402;
+}
+
+#bottom {
+    z-index: 500;
+}
+
+#crown {
+    z-index: 600;
+}
+.notification {
+    z-index: 700;
+}
+
+#cursors .cursor {
+    z-index: 800;
+}
+
+#chat.chatting {
+    z-index: 900;
+}
+
+.participant-menu {
+    z-index: 1000;
+}
+
+#modal {
+    z-index: 10000;
+}
+
+#tooltip {
+    z-index: 20000;
+}
+
+.clear {
+    clear: both;
+}
+
+.spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }