mpp-frontend-dev/screen.css

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

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

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%); -webkit-box-shadow: 0px 1px 2px #000; }

.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%; }

.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; }

.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); }

#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.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 .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; }

.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; }


#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%;
	-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;
    padding: 4px;
    background: none;
    border: 1px solid #f84;
    border-radius: 4px;
	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);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}