Skip to content

Instantly share code, notes, and snippets.

@emilepetrone
Created June 17, 2011 03:17
Show Gist options
  • Save emilepetrone/1030806 to your computer and use it in GitHub Desktop.
Save emilepetrone/1030806 to your computer and use it in GitHub Desktop.
@font-face {
font-family:'DSDotsMedium';
src:url('/static/roommanager_assets/font/dsdots-webfont.svg#webfontUp10bL9H') format('svg'), url('/static/roommanager_assets/font/dsdots-webfont.eot?') format('eot'), url('/static/roommanager_assets/font/dsdots-webfont.woff') format('woff'), url('/static/roommanager_assets/font/dsdots-webfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
#songboard {
font-family:'DSDotsMedium', Helvetica, Arial, sans-serif;
color:#dbcb98;
text-align:center;
vertical-align:middle;
width:360px;
height:75px;
overflow:hidden;
position:relative;
}
#songboard_artist {
font-size:40px;
white-space:nowrap;
text-shadow:0 0 5px #f00;
position:relative;
top:50%;
margin-top:-30px;
}
#songboard_title {
font-size:15px;
white-space:nowrap;
text-shadow:0 0 5px #f00;
position:relative;
top:50%;
margin-top:0;
width:280px;
overflow:hidden;
left:35px;
}
#songboard_hotspot {
width:360px;
height:75px;
}
#songboard_add {
font-family:Helvetica, Arial, sans-serif;
color:white;
font-weight:bold;
font-size:14px;
text-shadow:1px 1px 1px #000;
text-align:center;
width:360px;
height:75px;
display:none;
}
#songboard_add .btn {
width:45px;
height:45px;
float:left;
margin:7px;
cursor:pointer;
position:relative;
}
#songboard_add .btn.queue {
margin-left:68px!important;
margin-right:-5px!important;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_queue.png');
}
#songboard_add .btn.itunes {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_itunes.png');
}
#songboard_add .btn.lastfm {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_lastfm.png');
}
#songboard_add .btn.spotify {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_spotify.png');
}
#songboard_add .btn:hover {
background-position:0 -45px;
}
#songboard_add .btn:active {
background-position:0 -90px;
}
#songboard_add .btn .text {
position:absolute;
bottom:-17px;
height:30px;
line-height:44px;
}
@-moz-document url-prefix() {
#songboard_artist {
top:0;
margin-top:0;
}
#songboard_title {
top:0;
margin-top:-5px;
}
}.record_pile {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/record_pile.png') 0 0 no-repeat;
width:70px;
height:46px;
}
a.become_dj {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/become_dj.png?d=20110519') 0 0 no-repeat;
width:75px;
height:92px;
display:block;
cursor:pointer;
}
a.become_dj:hover, a.invite_dj:hover {
background-position:-75px 0;
}
a.invite_dj {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/invite_dj.png?d=20110520') 0 0 no-repeat;
width:75px;
height:92px;
display:block;
cursor:pointer;
}
#btn_upvote {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/vote_btns.png') 0 0 no-repeat;
width:126px;
height:44px;
background-position:0 -90px;
cursor:pointer;
}
#btn_upvote:active {
background-position:0 -135px;
}
#btn_downvote {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/vote_btns.png') 0 0 no-repeat;
width:126px;
height:44px;
cursor:pointer;
}
#btn_downvote:active {
background-position:0 -45px;
}
#vote_needle {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/needle.png') 0 0 no-repeat;
width:16px;
height:77px;
}
.point_display {
background-color:#04638b;
padding:3px;
width:80px;
font-size:13px;
font-family:Helvetica, Arial, sans-serif;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
overflow:hidden;
color:#fff;
text-align:center;
margin-top:-20px;
position:relative;
box-shadow:0 0 3px #000;
-moz-box-shadow:0 0 3px #000;
-webkit-box-shadow:0 0 3px #000;
}
.spotlight_tip {
margin-left:-11px!important;
margin-top:82px!important;
}
.tiny_tooltip {
background-color:#000;
padding:3px;
white-space:nowrap;
font-size:11px;
font-family:Helvetica, Arial, sans-serif;
color:#fff;
margin-left:65px;
}
.you_marker {
background-color:#d21a21;
padding-top:9px;
width:48px;
height:38px;
font-size:12px;
font-family:Helvetica, Arial, sans-serif;
margin-left:40px;
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/red_bubble.png') 0 0 no-repeat;
}
.speak_bubble {
position:absolute;
z-index:400000;
}
.tooltip_info {
background-color:#04638b;
padding:5px;
width:120px;
font-size:12px;
font-family:Helvetica, Arial, sans-serif;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
overflow:hidden;
max-height:100px;
}
.tooltip_btn {
background-color:#d21a21;
display:block;
margin-top:2px;
color:#fff;
text-decoration:none;
}
.tooltip_btn:visited, .tooltip_btn:active, .tooltip_btn:link {
color:#fff;
text-decoration:none;
}
.tooltip_btn:hover, .tooltip_btn:visited:hover {
background-color:#750e12;
color:#fff;
text-decoration:none;
}
.gold {
background-color:#b99225;
}
.gold:hover, .gold:visited:hover {
background-color:#82661a;
color:#fff;
text-decoration:none;
}
.tipsy {
padding:5px;
position:absolute;
z-index:100000;
margin-left:-35px;
}
.tipsy-inner {
padding:5px 8px 4px 8px;
color:white;
max-width:200px;
text-align:center;
}
.tipsy-inner {
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
.tipsy-arrow {
position:absolute;
background:url('http://static.turntable.fm/roommanager_assets/props/chat_nib.png') no-repeat top left;
width:12px;
height:7px;
display:none;
}
.tipsy-n .tipsy-arrow {
top:0;
left:50%;
margin-left:-4px;
}
.tipsy-nw .tipsy-arrow {
top:0;
left:10px;
}
.tipsy-ne .tipsy-arrow {
top:0;
right:10px;
}
.tipsy-w .tipsy-arrow, .tipsy-s .tipsy-arrow, .tipsy-sw .tipsy-arrow {
bottom:2px;
right:40px;
background-position:bottom left;
}
.tipsy-se .tipsy-arrow {
bottom:0;
right:10px;
background-position:bottom left;
}
.tipsy-e .tipsy-arrow {
top:50%;
margin-top:-4px;
right:0;
width:5px;
height:9px;
background-position:top right;
}
.mv_container {
width:85px;
height:158px;
}
a.mute_btn {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/mute_btn.png') 0 0 no-repeat;
width:67px;
height:68px;
display:block;
cursor:pointer;
margin-left:13px;
}
.mute_btn_hover {
background-position:0 -68px!important;
}
.volume_container {
height:40px;
margin-bottom:8px;
margin-top:15px;
margin-right:13px;
}
.volume_bar {
float:right;
width:8px;
background-color:#ccc;
border:1px solid #ccc;
margin-left:5px;
cursor:pointer;
}
.volume_bar_hover {
background-color:#fff!important;
}
.volume_bar_empty {
background-color:transparent;
}
.volume_bar1 {
height:40px;
margin-top:0;
}
.volume_bar2 {
height:30px;
margin-top:10px;
}
.volume_bar3 {
height:20px;
margin-top:20px;
}
.volume_bar4 {
height:10px;
margin-top:30px;
}
#left_speaker {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/left_speaker.png') 0 0 no-repeat;
width:85px;
height:155px;
}
#right_speaker {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/right_speaker.png') 0 0 no-repeat;
width:85px;
height:155px;
}
#spotlight {
background:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/spotlight.png') 0 0 no-repeat;
width:140px;
height:122px;
}
* {
padding:0;
margin:0;
}
body {
font-family:Helvetica, Arial, sans-serif;
background:#000;
}
#sm2-container {
position:absolute;
top:-9999px;
left:-9999px;
}
#sm2-container.swf_timedout {
position:static;
}
#content h1 {
font-family:Helvetica, Verdana, sans-serif;
font-size:24pt;
color:white;
padding-top:5px;
padding-bottom:13px;
text-align:center;
text-shadow:1px 1px 1px #000;
}
.placeholder {
color:#999!important;
}
.create-btn {
width:175px;
height:50px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/create_room2.png');
display:inline-block;
background-position:top;
text-indent:-9999px;
margin:0 10px 0 0;
}
.create-btn:hover {
background-position:center;
}
.create-btn:active {
background-position:bottom;
}
.random-btn {
width:191px;
height:50px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/sprite_test2.png');
display:inline-block;
background-position:top;
text-indent:-9999px;
margin:0 10px 0 0;
}
.random-btn:hover {
background-position:center;
}
.random-btn:active {
background-position:bottom;
}
a {
outline:none;
}
#outer {
z-index:2;
position:relative;
width:760px;
height:700px;
margin:0 auto;
}
#header {
position:relative;
width:760px;
height:60px;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/header_bg.png') repeat-x;
}
#header .userauthContainer {
position:relative;
top:10px;
left:10px;
}
#content {
width:760px;
height:640px;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/gradient_bg.png') repeat-x top left;
}
.centeredImage {
text-align:center;
margin-top:0;
margin-bottom:0;
padding:60px 0 0 0;
}
.centeredButtons {
text-align:center;
margin-top:0;
margin-bottom:0;
padding:10px 0 0 0;
}
.roomIndex {
width:605px;
margin:auto;
}
.roomsHeader .roomSearch {
position:relative;
display:block;
width:100%;
height:59px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room_search_bar.png');
}
.roomsHeader .roomSearch input {
position:absolute;
left:40px;
top:21px;
width:530px;
height:17px;
border:0;
outline:0;
background:transparent;
color:white;
font-size:14px;
font-weight:bold;
}
.roomsHeader .roomSearch .clearSearch {
position:absolute;
right:16px;
top:16px;
width:26px;
height:25px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/clear_search_button.png');
display:none;
}
.roomsHeader .roomSearch .clearSearch.active {
display:block;
cursor:pointer;
}
.roomsList {
max-height:300px;
overflow-y:scroll;
}
.roomsList .roomsTable {
width:590px;
font-family:Helvetica, Verdana, sans-serif;
text-align:left;
border-collapse:collapse;
background-color:#F0F0F0;
}
.roomsList th {
font-size:14px;
font-weight:normal;
height:21px;
padding:6px;
background:black url('https://s3.amazonaws.com/static.turntable.fm/images/gradhead_2.png') repeat-x;
color:white;
border-right:1px solid #666;
border-left:1px solid #2d2d2d;
}
.roomsList th.listeners, .roomsList th.friends {
text-align:center;
}
.roomsList .roomRow {
cursor:pointer;
}
.roomsList .roomRow.odd {
background:#FFF;
}
.roomsList .roomRow.currentRoom {
cursor:default;
}
.roomsList .roomRow td {
padding:6px;
color:#2D2D2D;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
}
.roomsList .roomRow:hover td {
background:#e5e5e5;
}
.roomsList .roomRow .roomStats .nListeners {
font-size:1.5em;
font-weight:bold;
text-align:center;
color:#666;
}
.roomsList .roomRow .roomStats .numDJs {
font-size:.9em;
font-weight:bold;
text-align:center;
color:#666;
}
.roomsList .roomRow .roomtitles .roomInfo {
width:435px;
overflow:hidden;
white-space:nowrap;
}
.roomsList .roomRow .roomtitles .roomInfo .roomName {
color:#2D2D2D;
font-size:15px;
font-weight:bold;
}
.roomsList .roomRow.currentRoom .roomtitles .roomInfo .roomName {
color:#DF8536;
}
.roomsList .roomRow .roomtitles .roomInfo .roomDesc {
color:#666;
font-size:14px;
}
.roomList .roomRow .roomtitles .roomDesc {
font-weight:normal;
}
.roomsList .roomRow .roomtitles .songtitles {
font-size:12px;
color:#666;
}
.roomsList .roomRow .friends {
overflow-x:hidden;
padding:0;
}
#roomtable .searchresult {
font-weight:bold;
color:#d9a32a;
}
.roomsList img {
padding:0;
margin:0 3px 0 0;
border:3px solid #FFF;
}
.roomsList .searched img {
padding:0;
margin:0 3px 0 0;
border:3px solid #d9a32a;
}
.roomsList img:hover {
padding:0;
margin:0 3px 0 0;
border:3px solid #d9a32a;
}
#footer {
text-align:center;
width:100%;
color:#555;
font-size:11px;
padding-top:10px;
}
#footer a:visited:hover {
color:#555;
text-decoration:none;
}
#footer a:visited, #footer a:active, #footer a:link {
color:#555;
text-decoration:none;
}
.overlay .listRooms.modal {
width:605px;
height:423px;
border:3px black solid;
background:black;
padding:0;
font-size:medium;
font-weight:normal;
text-shadow:none;
}
.overlay .listRooms.modal .closeFooter {
position:absolute;
bottom:-12px;
width:100%;
height:45px;
text-align:center;
}
.overlay .listRooms.modal .closeFooter a.close, .overlay .listRooms.modal .closeFooter a.createRoom {
color:#D9A343;
text-decoration:underline;
font-size:18px;
cursor:pointer;
}
.overlay .booted.modal .unhappyFace {
margin:auto;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/unhappyface_booted.png');
width:90px;
height:90px;
}
#top-panel {
position:absolute;
z-index:20000;
width:100%;
}
#top-panel .header {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/header_bg.png');
position:absolute;
height:60px;
width:100%;
}
#top-panel .info {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/top_yellow_bar.png');
position:absolute;
top:60px;
height:42px;
width:100%;
color:black;
}
.roomTip {
position:absolute;
z-index:20001;
left:58px;
top:115px;
width:408px;
height:119px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/black_msg_bg.png');
display:none;
}
.roomTip .roomTipClose {
position:absolute;
left:-10px;
top:-10px;
width:31px;
height:30px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/black_msg_x.png');
cursor:pointer;
}
.roomTip .roomTipClose:hover {
background-position:0 -29px;
}
.roomTip .text {
margin:14px;
text-align:center;
color:white;
font-family:Helvetica, Arial, sans-serif;
letter-spacing:1px;
}
#right-panel {
position:absolute;
right:0;
top:100px;
width:233px;
}
.chat-container {
position:absolute;
top:351px;
height:251px;
width:100%;
}
.black-right-header {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/black_playlist_bg.png');
display:inline-block;
background-position:top;
height:25px;
width:100%;
margin:0;
}
.black-right-header .icon {
position:absolute;
top:6px;
left:6px;
}
.black-right-header .header-text {
position:absolute;
top:3px;
left:32px;
color:white;
font-weight:bold;
}
.chat-container {
overflow:hidden;
}
.chat-container .chatHeader {
position:relative;
z-index:1;
cursor:move;
}
.chat-container .chatHeader .chatsound {
position:absolute;
left:80px;
color:#2E9AEB;
line-height:24px;
font-size:12px;
cursor:pointer;
}
.chat-container .chatHeader .chatsound .dingOn, .chat-container .chatHeader .chatsound.checked .dingOff {
display:none;
}
.chat-container .chatHeader .chatsound.checked .dingOn {
display:block;
color:#FAC55E;
}
.chat-container .chatHeader .chatResizeIcon {
position:absolute;
right:3px;
top:5px;
width:10px;
height:13px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/chat_expand_sprite.png');
}
.chat-container .chatHeader .chatResizeIcon:hover, .chat-container .chatHeader.active .chatResizeIcon {
background-position:0 -13px;
}
.chat-container .messages {
background-color:white;
color:black;
position:absolute;
top:25px;
width:100%;
height:188px;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
}
.chat-container .messages .message {
padding:6px;
width:210px;
font-size:12px;
}
.chat-container .messages .message:nth-child(odd) {
background-color:#eee;
}
.chat-container .messages .message .speaker {
font-weight:bold;
}
.chat-container .input-box {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/chat_field.png');
width:233px;
height:40px;
position:absolute;
bottom:0;
left:0;
}
.chat-container .input-box input {
position:absolute;
top:12px;
left:20px;
width:190px;
height:15px;
background:transparent;
border:0;
outline:0;
}
#top-panel .info .room {
color:#503c03;
position:absolute;
left:13px;
top:10px;
}
#top-panel .info .room .title {
float:left;
white-space:nowrap;
padding-right:10px;
padding-top:1px;
}
#top-panel .info .room .name {
float:left;
font-weight:bold;
width:260px;
overflow:hidden;
padding-top:1px;
height:17px;
}
.remove-song {
background-color:#7a2a2a;
}
#top-panel .info .url {
color:#503c03;
float:right;
width:180px;
margin-top:8px;
margin-left:8px;
margin-right:5px;
}
#top-panel .info .url .title {
float:left;
margin-top:3px;
margin-right:4px;
}
#top-panel .info .url .copy-link {
width:94px;
height:21px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/url_form.png');
float:left;
}
#top-panel .info .url .copy-link input {
color:#503c03;
height:22px;
width:90px;
border:0;
outline:0;
background:transparent;
}
#top-panel .info .url .zeroClipContainer {
position:relative;
width:40px;
height:23px;
float:left;
}
#top-panel .info .url .zeroClipContainer .zeroClipButton {
width:40px;
height:23px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/copy_sprite.png');
cursor:pointer;
}
#top-panel .info .url .zeroClipButton.hover {
background-position:0 -23px;
}
#top-panel .info .url .zeroClipButton.active {
background-position:0 -46px;
}
#top-panel .info .share-on {
color:#503c03;
float:right;
width:140px;
margin-top:6px;
}
#top-panel .info .share-on .title {
float:left;
margin-top:5px;
margin-right:2px;
}
#top-panel .info .share-on .icon {
width:27px;
height:27px;
float:left;
cursor:pointer;
margin-left:1px;
margin-right:1px;
}
#top-panel .info .feedback {
margin-right:20px;
margin-top:5px;
float:right;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/feedback.png');
width:78px;
height:29px;
cursor:pointer;
}
#top-panel .info .feedback:hover {
background-position:0 -29px;
}
#top-panel .info .feedback:active {
background-position:0 -58px;
}
#top-panel .info .share-on .facebook {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/fb_sprite.png');
width:27px;
height:27px;
}
#top-panel .info .share-on .facebook:hover {
background-position:0 -27px;
}
#top-panel .info .share-on .facebook:active {
background-position:0 -54px;
}
#top-panel .info .share-on .twitter {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/twitter_sprite.png');
width:27px;
height:27px;
}
#top-panel .info .share-on .twitter:hover {
background-position:0 -27px;
}
#top-panel .info .share-on .twitter:active {
background-position:0 -54px;
}
#top-panel .info .share-on .email {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/email_sprite.png');
width:27px;
height:27px;
}
#top-panel .info .share-on .email:hover {
background-position:0 -27px;
}
#top-panel .info .share-on .email:active {
background-position:0 -54px;
}
#top-panel .header .logo {
position:absolute;
top:10px;
left:10px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/turntable_logo.png');
width:174px;
height:40px;
cursor:pointer;
}
#top-panel .header .userauthContainer {
position:absolute;
top:15px;
left:200px;
z-index:10;
}
#top-panel .header .room-buttons {
position:absolute;
top:15px;
right:20px;
width:209px;
height:33px;
}
#top-panel .header .room-buttons .list {
position:absolute;
width:97px;
height:32px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/list_rooms_sprite.png');
cursor:pointer;
}
#top-panel .header .room-buttons .list:hover {
background-position:0 -32px;
}
#top-panel .header .room-buttons .list:active {
background-position:0 -64px;
}
#top-panel .header .room-buttons .random {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/random_room_sprite.png');
width:112px;
height:32px;
position:absolute;
left:97px;
cursor:pointer;
}
#top-panel .header .room-buttons .random:hover {
background-position:0 -32px;
}
#top-panel .header .room-buttons .random:active {
background-position:0 -64px;
}
#top-panel .header .search {
display:none;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/search_rooms_top_field.png');
height:26px;
width:207px;
position:absolute;
top:19px;
right:13px;
}
#top-panel .header .search input {
position:absolute;
top:3px;
left:10px;
width:170px;
height:15px;
border:0;
outline:0;
background:transparent;
}
.addSongOverlay {
position:absolute;
z-index:10001;
left:117px;
top:192px;
width:265px;
height:86px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/gradient_bg.png');
font-family:Helvetica, Arial, sans-serif;
margin:auto;
border:8px solid #fbd863;
padding:10px;
color:white;
font-weight:bold;
font-size:14px;
text-shadow:1px 1px 1px #000;
text-align:center;
}
.addSongOverlay .close-x {
position:absolute;
width:30px;
height:29px;
top:0;
left:15px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/x_sprite.png');
cursor:pointer;
}
.addSongOverlay .close-x:hover {
background-position:0 30px;
}
.addSongOverlay .options {
width:100%;
height:70px;
margin-left:10px;
}
.addSongOverlay .btn {
width:45px;
height:45px;
float:left;
margin:7px;
cursor:pointer;
position:relative;
}
.addSongOverlay .btn.queue {
margin-right:2px!important;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_queue.png');
}
.addSongOverlay .btn.itunes {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_itunes.png');
}
.addSongOverlay .btn.lastfm {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_lastfm.png');
}
.addSongOverlay .btn.spotify {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/roommanager_assets/props/add_spotify.png');
}
.addSongOverlay .btn:hover {
background-position:0 -45px;
}
.addSongOverlay .btn:active {
background-position:0 -90px;
}
.addSongOverlay .btn .text {
position:absolute;
bottom:-17px;
height:30px;
line-height:44px;
}
#room-info-tab {
position:absolute;
top:99px;
display:none;
}
#room-info-tab .button {
background:url('https://s3.amazonaws.com/static.turntable.fm/images/room/room_info_sprite.png') 0 0 no-repeat;
width:108px;
height:24px;
position:absolute;
left:400px;
cursor:pointer;
}
#room-info-tab .button:hover {
background-position:0 -24px;
}
#room-info-tab .button:active {
background-position:0 -48px;
}
#room-info-tab .upbutton {
background:url('https://s3.amazonaws.com/static.turntable.fm/images/room/room_info_up_sprite.png') 0 0 no-repeat;
}
#room-info-tab .content {
position:absolute;
width:300px;
height:350px;
background-color:#e4bd33;
left:206px;
top:-350px;
font-size:12px;
color:#503C03;
}
#room-info-tab .infowrap {
padding-top:5px;
padding-bottom:5px;
position:relative;
}
#room-info-tab .description {
padding:5px;
padding-left:10px;
height:36px;
overflow:hidden;
text-overflow:ellipsis;
}
#room-info-tab .edit-description {
position:absolute;
left:10px;
display:none;
}
#room-info-tab .edit-description .edit {
width:280px;
height:43px;
}
#room-info-tab .edit-description-btn {
position:absolute;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/room/edit.png') 0 0 no-repeat;
padding-left:23px;
height:20px;
line-height:20px;
top:5px;
right:10px;
cursor:pointer;
}
#room-info-tab .creator {
padding:5px;
}
#room-info-tab .title {
font-weight:bold;
padding-bottom:5px;
padding-left:5px;
}
#room-info-tab .songlog {
width:100%;
height:250px;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
}
#room-info-tab .song {
padding:10px;
border-bottom:1px solid #e9bb22;
clear:both;
width:100%;
height:80px;
position:relative;
}
#room-info-tab .song.song2 {
background-color:#cfa71e;
}
#room-info-tab .thumbcontainer {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/record.png');
float:left;
width:75px;
height:75px;
}
#room-info-tab .thumbcontainer .thumb {
width:75px;
height:75px;
border:none;
}
#room-info-tab .thumbcontainer .nothumb {
display:none;
}
#room-info-tab .songinfo {
float:left;
height:75px;
}
#room-info-tab .songinfo .title {
font-size:15px;
font-weight:bold;
padding:0;
padding-left:5px;
overflow:hidden;
white-space:nowrap;
width:185px;
}
#room-info-tab .songinfo .details {
font-size:12px;
padding:5px;
padding-top:0;
overflow:hidden;
white-space:nowrap;
width:185px;
}
#room-info-tab .songinfo .score {
font-weight:bold;
}
#room-info-tab .songinfo .score.scorebad {
color:#7f321d;
}
#room-info-tab .songinfo .score.scoregood {
color:#5d7f2c;
}
#room-info-tab .songinfo .addSong .btn {
width:18px;
height:18px;
float:left;
margin:3px;
cursor:pointer;
}
#room-info-tab .addSong .btn.queue {
margin-right:2px!important;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/add_queue.png');
}
#room-info-tab .addSong .btn.itunes {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/add_itunes.png');
}
#room-info-tab .addSong .btn.lastfm {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/add_lastfm.png');
}
#room-info-tab .addSong .btn.spotify {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/add_spotify.png');
}
#room-info-tab .addSong .btn:hover {
background-position:0 -18px;
}
#room-info-tab .addSong .btn:active {
background-position:0 -36px;
}
.overlay {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/black_overlay.png');
text-align:center;
z-index:1000;
}
.overlay .modal {
margin:auto;
width:320px;
background-color:gray;
border:13px solid #fbd863;
padding:20px 45px;
text-align:center;
color:white;
font-size:18px;
text-shadow:1px 1px 1px #000;
position:relative;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/gradient_bg.png');
}
.overlay .welcome-modal {
width:350px;
font-size:16px;
text-align:left;
}
.overlay .welcome-modal ul {
padding-top:15px;
padding-left:20px;
padding-bottom:20px;
}
.overlay .welcome-modal li {
padding:5px;
}
.overlay .avatarsOverlay.modal {
width:470px;
}
.overlay .close-x {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/big_overlay_x_sprite.png');
width:40px;
height:39px;
position:absolute;
top:0;
left:15px;
cursor:pointer;
}
.overlay .close-x:hover {
background:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/big_overlay_x_sprite.png') 0 39px;
}
.overlay .centered-button {
margin:auto;
}
.avatarsOverlay.modal .djPointsMsg {
font-weight:normal;
font-size:14pt;
}
.avatarsOverlay.modal .djPointsMsg .djName {
font-weight:bold;
}
.avatarsOverlay.modal .djPointsMsg .djPoints {
font-weight:bold;
font-size:24pt;
}
.avatarsOverlay.modal .avatarTiers {
width:514px;
height:460px;
overflow-y:scroll;
margin-bottom:-20px;
text-align:left;
}
.avatarsOverlay.modal .avatarTiers .tier {
margin-top:20px;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList {
overflow:hidden;
width:100%;
text-align:center;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar {
float:left;
position:relative;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar .avatarImg {
position:relative;
cursor:pointer;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar.locked .avatarImg {
cursor:default;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar .avatarImg.shrink {
width:80%;
height:80%;
top:10%;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar .djName {
display:none;
position:absolute;
z-index:10;
bottom:3px;
width:100%;
height:12px;
text-align:center;
font-size:10pt;
color:#E6C14B;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar.currentAvatar .djName {
display:block;
}
.avatarsOverlay.modal .avatarTiers .tier .avatarList .avatar .lockedIcon {
position:absolute;
z-index:10;
left:50%;
top:50%;
display:block;
margin-left:-20px;
margin-top:-25px;
}
.overlay .modal h1, p {
margin:0;
padding:0;
}
.overlay .modal h1 {
font-size:30px;
}
.overlay .modal input.text {
height:30px;
text-align:left;
font-size:20px;
}
.overlay .modal input.roomName, .overlay .modal input::-webkit-input-placeholder {
width:277px;
}
.overlay .ok-button {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/ok_button.png');
width:89px;
height:54px;
cursor:pointer;
}
.overlay .ok-button:hover {
background:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/ok_button.png') 0 54px;
}
.overlay .ok-button:active {
background:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/ok_button.png') 0 108px;
}
.overlay .save-changes {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/save_changes_settings_sprite.png');
width:178px;
height:52px;
cursor:pointer;
}
.overlay .save-changes:hover {
background-position:0 52px;
}
.overlay .save-changes:active {
background-position:0 104px;
}
.overlay .create-room {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/overlay/create_room2.png');
width:175px;
height:50px;
cursor:pointer;
}
.overlay .create-room:hover {
background-position:0 50px;
}
.overlay .create-room:active {
background-position:0 100px;
}
.overlay .no-thanks {
text-decoration:underline;
cursor:pointer;
}
.overlay .createRoom div.type {
text-align:left;
position:relative;
}
.overlay .createRoom {
text-align:left;
}
.overlay .createRoom h1 {
text-align:center;
}
.overlay .createRoom .roomName {
width:300px;
text-align:left;
margin-top:10px;
padding-left:5px;
padding-right:5px;
}
.overlay .createRoom .tip {
font-size:12px;
margin-left:19px;
}
.overlay .createRoom .radios {
float:left;
padding-right:4px;
}
.overlay .createRoom div.roomtype {
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
.overlay .createRoom .roomtype-option {
border:1px solid #999;
padding:7px;
cursor:pointer;
}
.overlay .createRoom .roomtype-option-on {
border:1px solid #FBD863;
}
.overlay div.advanced {
padding-top:10px;
margin-bottom:-10px;
display:none;
}
.overlay div.advanced input.text {
display:inline;
width:40px;
height:18px;
font-size:15px;
}
.overlay div.show-advanced {
color:#FBD863;
cursor:pointer;
font-size:smaller;
text-align:center;
margin:20px;
}
.overlay p.cancel {
text-align:center;
}
.overlay .settingsOverlay input.text {
width:270px;
height:30px;
font-size:20px;
}
.overlay .settingsOverlay .field {
text-align:left;
margin-bottom:30px;
margin-left:20px;
}
.fbLogin {
position:relative;
width:108px;
height:30px;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/fb_login_icon.png') 10px 5px no-repeat;
border:1px solid black;
cursor:pointer;
}
.fbLogin span {
position:absolute;
top:6px;
right:20px;
font-weight:bold;
font-size:13pt;
}
#menuh {
position:absolute;
top:.3em;
left:5px;
width:120px;
font-size:small;
font-family:Helvetica, Arial, sans-serif;
color:white;
}
#menuh .menuItem {
display:none;
position:relative;
height:17px;
border:1px solid black;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/dropmenu_top.png') repeat-x;
padding:.3em;
cursor:pointer;
}
#menuh .menuItem.first, #menuh .menuItem.hover {
display:block;
}
#menuh .menuItem:hover {
background:url('https://s3.amazonaws.com/static.turntable.fm/images/dropmenu_bottom.png') repeat-x;
}
#menuh .menuItem .settingsHead {
position:absolute;
left:4px;
top:4px;
width:18px;
height:15px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/settings_head.png');
}
#menuh .menuItem .text {
margin-top:1px;
margin-left:30px;
width:98px;
overflow:hidden;
white-space:nowrap;
}
#menuh .menuItem .downArrow {
position:absolute;
top:7px;
right:3px;
width:12px;
height:10px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/down_arrow.png');
}
.playlist-container {
position:absolute;
width:100%;
top:-1px;
overflow:hidden;
}
.playlist-container .mainPane {
position:absolute;
top:25px;
width:100%;
height:326px;
background-color:#E7E7E7;
}
.playlist-container .search {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/playlist_search_field.png');
height:26px;
width:207px;
position:absolute;
}
.playlist-container .search input {
position:absolute;
top:5px;
left:10px;
border:0;
outline:0;
width:170px;
height:15px;
background:transparent;
}
.playlist-container .search .mag-glass {
position:absolute;
top:5px;
right:8px;
height:14px;
width:14px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/search_mag_glass.png');
}
.playlist-container .search .mag-glass.clearSearch {
top:4px;
right:6px;
width:17px;
height:17px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/clear_playlist_search.png');
cursor:pointer;
}
.playlist-container .songlist {
position:absolute;
width:100%;
background-color:white;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
}
.playlist-container .songlist .separator-in-queue {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/gray_nextup_separator.png');
width:100%;
height:24px;
position:relative;
}
.playlist-container .songlist .separator-in-queue .text {
position:absolute;
left:7px;
top:5px;
color:gray;
font-size:10px;
font-weight:bold;
}
.playlist-container .song, .playlist-container .uploading {
background-color:white;
border-bottom:1px solid #e6e6e6;
position:relative;
height:41px;
width:100%;
}
.playlist-container .song.nth-child-even, .playlist-container .uploading:nth-child(even) {
background-color:#f0f0f0;
}
.playlist-container .song:hover {
background-color:#E3E3E3;
}
.playlist-container .progress {
display:block;
position:absolute;
left:0;
top:0;
width:0;
height:100%;
}
.playlist-container .song .title, .playlist-container .processing .text, .playlist-container .uploading .text {
position:absolute;
left:50px;
top:8px;
width:150px;
height:14px;
font-size:12px;
font-weight:bold;
color:black;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.playlist-container .song .details, .playlist-container .uploading .details {
position:absolute;
top:21px;
left:50px;
font-size:11px;
color:gray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.playlist-container .song .goTop {
position:absolute;
left:9px;
top:12px;
width:15px;
height:18px;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/go-top.png') 0 -18px;
cursor:pointer;
}
.playlist-container .song.topSong .goTop {
display:none;
}
.playlist-container .song .goTop:hover, .playlist-container .song .goTop:active {
background-position:0 0;
}
.playlist-container .song .playSample {
position:absolute;
left:33px;
top:13px;
width:10px;
height:17px;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/play_button_sprite.png') 0 -17px;
cursor:pointer;
}
.playlist-container .song .playSample:hover {
background-position:0 0;
}
.playlist-container .song.currentSong .playSample, .playlist-container .song.currentPreview .playSample {
display:none;
}
.playlist-container .song .pauseSample {
display:none;
position:absolute;
left:32px;
top:15px;
width:12px;
height:14px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/pause_button_sprite.png');
cursor:pointer;
}
.playlist-container .song.currentPreview .pauseSample {
display:block;
}
.playlist-container .song.currentPreview .pauseSample:hover {
background-position:0 14px;
}
.playlist-container .song .progress {
display:none;
background-color:#FAC55D;
}
.playlist-container .song.currentSong .progress, .playlist-container .song.currentPreview .progress {
display:block;
}
.playlist-container .queueView .addSongsButton {
position:absolute;
background:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/add_songs_sprite.png');
left:12px;
top:6px;
width:208px;
height:29px;
cursor:pointer;
}
.playlist-container .queueView .addSongsButton:hover {
background-position:0 -29px;
}
.playlist-container .queueView .addSongsButton:active {
background-position:0 -58px;
}
.playlist-container .queueView .songlist {
top:42px;
height:284px;
}
.playlist-container .queueView .songlist .quicksandMirror {
display:none;
}
.playlist-container .queueView .emptyQueue .text {
margin:15px;
color:gray;
font-size:13px;
}
.playlist-container .queueView .topSongRecordIcon {
position:absolute;
z-index:10;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/record_icon.png');
left:0;
top:4px;
width:17px;
height:36px;
}
.playlist-container .queueView .queue.realPlaylist {
position:relative;
overflow:hidden;
}
.playlist-container .queueView .song {
cursor:move;
}
.playlist-container .queueView .song.currentSong {
background-color:#FEE8AF;
cursor:default;
z-index:1;
}
.playlist-container .queueView .song .remove {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/x_button_sprite.png');
height:12px;
width:12px;
cursor:pointer;
position:absolute;
top:2px;
right:8px;
}
.playlist-container .queueView .song .remove:hover, .playlist-container .queueView .song .remove:active {
background-position:0 12px;
}
.playlist-container .queueView .song.currentSong .remove {
display:none;
}
.playlist-container .queueView .song .handle {
display:none;
}
.playlist-container .queueView .song:hover .handle {
display:block;
position:absolute;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/move_handle_sprite.png');
left:6px;
top:15px;
width:7px;
height:11px;
}
.playlist-container .queueView .processing {
position:relative;
width:100%;
height:30px;
overflow:hidden;
background-color:#DFE0E0;
border-bottom:1px solid #E6E6E6;
}
.playlist-container .queueView .processing .loader {
position:absolute;
top:7px;
left:16px;
width:16px;
height:16px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/loader.gif');
}
.playlist-container .queueView .uploading .progress {
background-color:#96BD5E;
}
.playlist-container .queueView .mover {
position:absolute;
top:0;
left:0;
}
.playlist-container .queueView .mover.moverResizer {
position:relative;
}
.playlist-container .addSongsView .searchText {
position:absolute;
left:14px;
top:78px;
color:#111;
font-size:13px;
font-weight:bold;
}
.playlist-container .addSongsView .search {
position:absolute;
left:12px;
top:97px;
}
.playlist-container .addSongsView .orText {
position:absolute;
top:130px;
width:100%;
text-align:center;
color:#747474;
font-size:16px;
font-style:italic;
}
.playlist-container .addSongsView .upload-button {
position:absolute;
left:12px;
top:155px;
width:208px;
cursor:pointer;
}
.playlist-container .addSongsView .upload-button #pickfiles {
background-image:url('images/room/upload_music_sprite.png');
width:208px;
height:29px;
}
#pickfiles:hover, #pickfiles.hover {
background-position:0 -29px;
}
#pickfiles:active, #pickfiles.active {
background-position:0 -58px;
}
.playlist-container .addSongsView .cancelButton {
position:absolute;
left:76px;
top:210px;
width:81px;
height:28px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/cancel_button_sprite.png');
cursor:pointer;
}
.playlist-container .addSongsView .cancelButton:hover {
background-position:0 -28px;
}
.playlist-container .addSongsView .cancelButton:active {
background-position:0 -56px;
}
.playlist-container .addSongsView .poweredBy {
position:absolute;
left:82px;
top:260px;
width:69px;
height:25px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/medianet.png');
}
.playlist-container .searchView .input {
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/gray_playlist_search_bg.png');
height:77px;
width:100%;
position:absolute;
}
.playlist-container .searchView .input .search {
position:absolute;
left:13px;
top:10px;
}
.playlist-container .searchView .searchHeader {
position:absolute;
left:12px;
bottom:9px;
width:208px;
height:29px;
}
.playlist-container .searchView .searchHeader .numFilesAdded {
position:absolute;
bottom:8px;
left:5px;
color:black;
font-size:10pt;
font-weight:bold;
}
.playlist-container .searchView .searchHeader .doneButton {
position:absolute;
right:0;
bottom:4px;
width:61px;
height:22px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/room/done_button_sprite.png');
cursor:pointer;
}
.playlist-container .searchView .searchHeader .doneButton:hover {
background-position:0 -22px;
}
.playlist-container .searchView .searchHeader .doneButton:active {
background-position:0 -44px;
}
.playlist-container .searchView .songlist {
top:71px;
height:256px;
}
.playlist-container .searchView .song.addedToQueue {
background-color:#FEE8AF;
}
.playlist-container .searchView .song .addSong {
position:absolute;
left:8px;
top:13px;
width:17px;
height:17px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/add_song_sprite.png');
cursor:pointer;
}
.playlist-container .searchView .song .addSong:hover {
background-position:0 -17px;
}
.playlist-container .searchView .inMyQueue .song .addSong {
display:none;
}
.playlist-container .searchView .externQueue .song .goTop {
display:none;
}
.playlist-container .searchView .song .title, .playlist-container .searchView .song .details {
width:160px;
}
.playlist-container .searchView .emptySearchResults {
margin:15px;
color:#444;
font-size:12px;
}
.playlist-container .searchView .song .checkmark {
position:absolute;
top:13px;
left:8px;
width:18px;
height:18px;
background-image:url('https://s3.amazonaws.com/static.turntable.fm/images/playlist/checkmark.png');
}
.playlist-container .searchView .externQueue .song .checkmark {
cursor:pointer;
}
.playlist-container .searchView .song .addedToQueueTop {
position:absolute;
width:100%;
height:100%;
background-color:#DE8721;
}
.playlist-container .searchView .song .addedToQueueTop .text {
position:absolute;
left:25px;
top:12px;
}
.playlist-container .searchView .searchingBlocker {
position:absolute;
top:71px;
width:100%;
height:901px;
background-color:white;
padding-top:64px;
text-align:center;
color:#666;
font-size:18px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment