API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 18th, 2017
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 362.19 KB | None | 0 0
raw download clone embed print report
  1. @charset "UTF-8";
  2. * {
  3. margin: 0;
  4. padding: 0
  5. }
  6. body {
  7. overflow: hidden;
  8. font-family: 'Open Sans', sans-serif;
  9. font-weight: 400;
  10. font-size: 14px;
  11. background: #000;
  12. color: #eee
  13. }
  14. button,
  15. button:focus {
  16. outline: 0;
  17. border: none
  18. }
  19. .arrow-down {
  20. position: absolute;
  21. bottom: 0;
  22. width: 0;
  23. height: 0;
  24. border-right: 8px solid transparent;
  25. border-left: 8px solid transparent
  26. }
  27. .spinner {
  28. position: absolute
  29. }
  30. input:focus {
  31. outline: 0
  32. }
  33. ::-webkit-input-placeholder {
  34. color: #808691
  35. }
  36. :-moz-placeholder {
  37. color: #808691
  38. }
  39. ::-moz-placeholder {
  40. color: #808691
  41. }
  42. :-ms-input-placeholder {
  43. color: #808691
  44. }
  45. .focused {
  46. -webkit-box-shadow: inset 0 0 0 1px #009cdd!important;
  47. -moz-box-shadow: inset 0 0 0 1px #009cdd!important;
  48. box-shadow: inset 0 0 0 1px #009cdd!important
  49. }
  50. .icon {
  51. position: absolute;
  52. width: 30px;
  53. height: 30px;
  54. background: url('https://cdn.plug.dj/_/static/images/icons.e9a6ece717d5a82228750c644e59307031016547.png')
  55. }
  56. .icon-room {
  57. background-position: 0 0
  58. }
  59. .icon-population {
  60. background-position: -35px 0
  61. }
  62. .icon-waitlist {
  63. background-position: -70px 0
  64. }
  65. .icon-chat {
  66. background-position: -105px 0
  67. }
  68. .icon-chat-sound-on {
  69. background-position: -140px 0
  70. }
  71. .icon-chat-sound-off {
  72. background-position: -175px 0
  73. }
  74. .icon-chat-popout {
  75. background-position: -210px 0
  76. }
  77. .icon-private-chat {
  78. background-position: -245px 0
  79. }
  80. .icon-current-dj {
  81. background-position: -280px 0
  82. }
  83. .icon-playlist {
  84. background-position: 0 -35px
  85. }
  86. .icon-next-track {
  87. background-position: -35px -35px
  88. }
  89. .icon-dashboard-population {
  90. background-position: -70px -35px
  91. }
  92. .icon-search {
  93. background-position: -105px -35px
  94. }
  95. .icon-room-history {
  96. background-position: -140px -35px
  97. }
  98. .icon-delete {
  99. background-position: -175px -35px
  100. }
  101. .icon-shuffle {
  102. background-position: -210px -35px
  103. }
  104. .icon-support-grey {
  105. background-position: -245px -35px
  106. }
  107. .icon-current-dj-white {
  108. background-position: -280px -35px
  109. }
  110. .icon-timestamps-12 {
  111. background-position: 0 -70px
  112. }
  113. .icon-timestamps-24 {
  114. background-position: -35px -70px
  115. }
  116. .icon-timestamps-off {
  117. background-position: -70px -70px
  118. }
  119. .icon-emoji-on {
  120. background-position: -105px -70px
  121. }
  122. .icon-emoji-off {
  123. background-position: -140px -70px
  124. }
  125. .icon-mention {
  126. background-position: -175px -70px
  127. }
  128. .icon-mention-off {
  129. background-position: -210px -70px
  130. }
  131. .icon-facebook-selected {
  132. background-position: -245px -70px
  133. }
  134. .icon-facebook {
  135. background-position: -280px -70px
  136. }
  137. .icon-twitter {
  138. background-position: 0 -105px
  139. }
  140. .icon-twitter-selected {
  141. background-position: -35px -105px
  142. }
  143. .icon-edit-white {
  144. background-position: -70px -105px
  145. }
  146. .icon-edit-grey {
  147. background-position: -105px -105px
  148. }
  149. .icon-filter {
  150. background-position: -140px -105px
  151. }
  152. .icon-drag-handle {
  153. background-position: -175px -105px
  154. }
  155. .icon-refresh-video {
  156. background-position: -210px -105px
  157. }
  158. .icon-create-playlist {
  159. background-position: -245px -105px
  160. }
  161. .icon-import {
  162. background-position: -280px -105px
  163. }
  164. .icon-check-circle {
  165. background-position: 0 -140px
  166. }
  167. .icon-check-purple {
  168. background-position: -35px -140px
  169. }
  170. .icon-check-white {
  171. background-position: -70px -140px
  172. }
  173. .icon-locked {
  174. background-position: -105px -140px
  175. }
  176. .icon-unlocked {
  177. background-position: -140px -140px
  178. }
  179. .icon-swap {
  180. background-position: -175px -140px
  181. }
  182. .icon-share {
  183. background-position: -210px -140px
  184. }
  185. .icon-invite {
  186. background-position: -245px -140px
  187. }
  188. .icon-add {
  189. background-position: -280px -140px
  190. }
  191. .icon-add-friend {
  192. background-position: 0 -175px
  193. }
  194. .icon-check-grey {
  195. background-position: -35px -175px
  196. }
  197. .icon-skip {
  198. background-position: -70px -175px
  199. }
  200. .icon-plug-dj {
  201. background-position: -105px -175px
  202. }
  203. .icon-playlist-small {
  204. background-position: -140px -175px
  205. }
  206. .icon-support-white {
  207. background-position: -175px -175px
  208. }
  209. .icon-related {
  210. background-position: -210px -175px
  211. }
  212. .icon-play-next {
  213. background-position: -245px -175px
  214. }
  215. .icon-dj-waitlist {
  216. background-position: -280px -175px
  217. }
  218. .icon-join-waitlist {
  219. background-position: 0 -210px
  220. }
  221. .icon-staff {
  222. background-position: -35px -210px
  223. }
  224. .icon-ban {
  225. background-position: -70px -210px
  226. }
  227. .icon-community-users {
  228. background-position: -105px -210px
  229. }
  230. .icon-community-white {
  231. background-position: -140px -210px
  232. }
  233. .icon-community-grey {
  234. background-position: -175px -210px
  235. }
  236. .icon-join-booth {
  237. background-position: -210px -210px
  238. }
  239. .icon-leave-waitlist {
  240. background-position: -245px -210px
  241. }
  242. .icon-leave-booth {
  243. background-position: -280px -210px
  244. }
  245. .icon-volume-on {
  246. background-position: 0 -245px
  247. }
  248. .icon-volume-half {
  249. background-position: -35px -245px
  250. }
  251. .icon-volume-off {
  252. background-position: -70px -245px
  253. }
  254. .icon-drag-media {
  255. background-position: -105px -245px
  256. }
  257. .icon-clear-input {
  258. background-position: -140px -245px
  259. }
  260. .icon-chat-system {
  261. background-position: -175px -245px
  262. }
  263. .icon-settings-white {
  264. background-position: -210px -245px
  265. }
  266. .icon-dialog-close {
  267. background-position: -245px -245px
  268. }
  269. .icon-import-grey {
  270. background-position: -280px -245px
  271. }
  272. .icon-booth-locked {
  273. background-position: 0 -280px
  274. }
  275. .icon-grab-disabled {
  276. background-position: -35px -280px
  277. }
  278. .icon-meh-disabled {
  279. background-position: -70px -280px
  280. }
  281. .icon-woot-disabled {
  282. background-position: -105px -280px
  283. }
  284. .icon-grab {
  285. background-position: -140px -280px
  286. }
  287. .icon-meh {
  288. background-position: -175px -280px
  289. }
  290. .icon-woot {
  291. background-position: -210px -280px
  292. }
  293. .icon-import-big {
  294. background-position: -245px -280px
  295. }
  296. .icon-pv-white {
  297. background-position: -280px -280px
  298. }
  299. .icon-waitlist-full {
  300. background-position: 0 -315px
  301. }
  302. .icon-unignore {
  303. background-position: -35px -315px
  304. }
  305. .icon-ignore {
  306. background-position: -70px -315px
  307. }
  308. .icon-mute {
  309. background-position: -105px -315px
  310. }
  311. .icon-ignored {
  312. background-position: -140px -315px
  313. }
  314. .icon-event-calendar {
  315. background-position: -175px -315px
  316. }
  317. .icon-x-small {
  318. background-position: -210px -315px
  319. }
  320. .icon-join-community {
  321. background-position: -245px -315px
  322. }
  323. .icon-news-more {
  324. background-position: -280px -315px
  325. }
  326. .icon-chat-admin {
  327. background-position: 0 -350px;
  328. width: 15px;
  329. height: 15px
  330. }
  331. .icon-chat-ambassador {
  332. background-position: -15px -350px;
  333. width: 15px;
  334. height: 15px
  335. }
  336. .icon-chat-leader {
  337. background-position: -15px -350px;
  338. width: 15px;
  339. height: 15px
  340. }
  341. .icon-chat-volunteer {
  342. background-position: -15px -350px;
  343. width: 15px;
  344. height: 15px
  345. }
  346. .icon-chat-host {
  347. background-position: -35px -350px;
  348. width: 15px;
  349. height: 15px
  350. }
  351. .icon-chat-cohost {
  352. background-position: -35px -350px;
  353. width: 15px;
  354. height: 15px
  355. }
  356. .icon-chat-manager {
  357. background-position: -50px -350px;
  358. width: 15px;
  359. height: 15px
  360. }
  361. .icon-chat-bouncer {
  362. background-position: -70px -350px;
  363. width: 15px;
  364. height: 15px
  365. }
  366. .icon-chat-dj {
  367. background-position: -85px -350px;
  368. width: 15px;
  369. height: 15px
  370. }
  371. .icon-soundcloud-favorites {
  372. background-position: -105px -350px;
  373. width: 15px;
  374. height: 15px
  375. }
  376. .icon-soundcloud-sets {
  377. background-position: -120px -350px;
  378. width: 15px;
  379. height: 15px
  380. }
  381. .icon-check-blue {
  382. background-position: -140px -350px;
  383. width: 15px;
  384. height: 15px
  385. }
  386. .icon-chat-subscriber {
  387. background-position: -175px -350px;
  388. width: 15px;
  389. height: 15px
  390. }
  391. .icon-star-white {
  392. background-position: -210px -350px
  393. }
  394. .icon-friends-grey {
  395. background-position: -245px -350px
  396. }
  397. .icon-friends-white {
  398. background-position: -280px -350px
  399. }
  400. .icon-history-positive {
  401. background-position: 0 -365px;
  402. width: 15px;
  403. height: 15px
  404. }
  405. .icon-history-negative {
  406. background-position: -15px -365px;
  407. width: 15px;
  408. height: 15px
  409. }
  410. .icon-history-grabs {
  411. background-position: -35px -365px;
  412. width: 15px;
  413. height: 15px
  414. }
  415. .icon-history-listeners {
  416. background-position: -50px -365px;
  417. width: 15px;
  418. height: 15px
  419. }
  420. .icon-time {
  421. background-position: -70px -365px;
  422. width: 15px;
  423. height: 15px
  424. }
  425. .icon-room-history-row {
  426. background-position: -85px -365px;
  427. width: 15px;
  428. height: 15px
  429. }
  430. .icon-menu-arrow {
  431. background-position: -105px -365px;
  432. width: 15px;
  433. height: 15px
  434. }
  435. .icon-arrow-down-blue {
  436. background-position: -120px -365px;
  437. width: 15px;
  438. height: 15px
  439. }
  440. .icon-soundcloud-tracks {
  441. background-position: -140px -365px;
  442. width: 15px;
  443. height: 15px
  444. }
  445. .icon-chat-silver-subscriber {
  446. background-position: -175px -365px;
  447. width: 15px;
  448. height: 15px
  449. }
  450. .icon-arrow-left {
  451. background-position: 0 -385px
  452. }
  453. .icon-arrow-down {
  454. background-position: -35px -385px
  455. }
  456. .icon-arrow-up {
  457. background-position: -70px -385px
  458. }
  459. .icon-arrow-right {
  460. background-position: -105px -385px
  461. }
  462. .icon-join-waitlist-big {
  463. width: 32px;
  464. background-position: -140px -385px
  465. }
  466. .icon-leave-waitlist-big {
  467. background-position: -175px -385px
  468. }
  469. .icon-leave-booth-big {
  470. background-position: -210px -385px
  471. }
  472. .icon-waitlist-full-big {
  473. width: 31px;
  474. background-position: -245px -385px
  475. }
  476. .icon-x-white {
  477. background-position: -280px -385px
  478. }
  479. .icon-user-white {
  480. background-position: 0 -420px
  481. }
  482. .icon-user-grey {
  483. background-position: -35px -420px
  484. }
  485. .icon-users-white {
  486. background-position: -70px -420px
  487. }
  488. .icon-users-grey {
  489. background-position: -105px -420px
  490. }
  491. .icon-inventory-white {
  492. background-position: -140px -420px
  493. }
  494. .icon-inventory-grey {
  495. background-position: -175px -420px
  496. }
  497. .icon-history-white {
  498. background-position: -210px -420px
  499. }
  500. .icon-history-grey {
  501. background-position: -245px -420px
  502. }
  503. .icon-booth-locked-big {
  504. background-position: -280px -420px
  505. }
  506. .icon-facebook-white {
  507. background-position: 0 -455px
  508. }
  509. .icon-twitter-white {
  510. background-position: -35px -455px
  511. }
  512. .icon-email-white {
  513. background-position: -70px -455px
  514. }
  515. .icon-facebook-f-white {
  516. background-position: -105px -455px
  517. }
  518. .icon-google-white {
  519. background-position: -140px -455px
  520. }
  521. .icon-pp-small {
  522. background-position: -175px -455px
  523. }
  524. .icon-sub-small {
  525. background-position: -210px -455px
  526. }
  527. .icon-credit-card {
  528. background-position: -245px -455px
  529. }
  530. .icon-gift {
  531. background-position: -280px -455px
  532. }
  533. .icon-unlocked-grey {
  534. background-position: 0 -490px
  535. }
  536. .icon-locked-grey {
  537. background-position: -35px -490px
  538. }
  539. .icon-store-grey {
  540. background-position: -70px -490px
  541. }
  542. .icon-store-white {
  543. background-position: -105px -490px
  544. }
  545. .icon-settings-grey {
  546. background-position: -140px -490px
  547. }
  548. .icon-playback-snooze {
  549. background-position: -175px -490px
  550. }
  551. .icon-sunburst {
  552. width: 90px;
  553. height: 57px;
  554. background-position: -210px -490px
  555. }
  556. .icon-event-calendar-grey {
  557. background-position: 0 -525px
  558. }
  559. .icon-news-grey {
  560. background-position: -35px -525px
  561. }
  562. .icon-about-grey {
  563. background-position: -70px -525px
  564. }
  565. .icon-about-white {
  566. background-position: -105px -525px
  567. }
  568. .icon-logout-grey {
  569. background-position: -140px -525px
  570. }
  571. .icon-logout-white {
  572. background-position: -175px -525px
  573. }
  574. .icon-youtube {
  575. width: 55px;
  576. height: 20px;
  577. background-position: 0 -560px
  578. }
  579. .icon-soundcloud {
  580. width: 54px;
  581. height: 35px;
  582. background-position: -70px -560px
  583. }
  584. .icon-site-logo {
  585. width: 123px;
  586. height: 33px;
  587. background-position: -175px -560px
  588. }
  589. .icon-soundcloud-big {
  590. width: 105px;
  591. height: 52.5px;
  592. background-position: 0 -595px
  593. }
  594. .icon-youtube-big {
  595. width: 105px;
  596. height: 52.5px;
  597. background-position: -105px -595px
  598. }
  599. .icon-arrow-down-grey {
  600. background-position: -210px -595px
  601. }
  602. .icon-arrow-up-grey {
  603. background-position: -245px -595px
  604. }
  605. .icon-mute-big {
  606. background-position: -280px -595px
  607. }
  608. .icon-clock-orange {
  609. background-position: -245px -630px
  610. }
  611. .icon-x-grey {
  612. background-position: -280px -630px
  613. }
  614. .icon-badge-pp {
  615. width: 43px;
  616. height: 43px;
  617. background-position: 0 -665px
  618. }
  619. .icon-badge-sub {
  620. width: 43px;
  621. height: 43px;
  622. background-position: -44px -665px
  623. }
  624. .icon-chat-sitemod {
  625. background-position: -103px -664px;
  626. width: 15px;
  627. height: 15px
  628. }
  629. .icon-chat-plot {
  630. background-position: -120px -679px;
  631. width: 15px;
  632. height: 15px
  633. }
  634. .icon-chat-promoter {
  635. background-position: -103px -679px;
  636. width: 15px;
  637. height: 15px
  638. }
  639. .icon-badge-facebook {
  640. width: 37px;
  641. height: 37px;
  642. background-position: -175px -665px
  643. }
  644. .icon-badge-twitter {
  645. width: 37px;
  646. height: 37px;
  647. background-position: -214px -665px
  648. }
  649. .icon-badge-instagram {
  650. width: 37px;
  651. height: 37px;
  652. background-position: -253px -665px
  653. }
  654. .icon-badge-bt-g {
  655. width: 45px;
  656. height: 45px;
  657. background-position: 0 -735px
  658. }
  659. .icon-badge-ea-g {
  660. width: 45px;
  661. height: 45px;
  662. background-position: -70px -735px
  663. }
  664. .icon-badge-og-g {
  665. width: 45px;
  666. height: 45px;
  667. background-position: -140px -735px
  668. }
  669. .icon-badge-ss-g {
  670. width: 45px;
  671. height: 45px;
  672. background-position: -210px -735px
  673. }
  674. .icon-level-ep {
  675. width: 36px;
  676. height: 36px;
  677. background-position: 0 -805px
  678. }
  679. .icon-level-community {
  680. width: 36px;
  681. height: 36px;
  682. background-position: -70px -805px
  683. }
  684. .icon-level-avatar {
  685. width: 36px;
  686. height: 36px;
  687. background-position: -140px -805px
  688. }
  689. .icon-level-vibes {
  690. width: 36px;
  691. height: 36px;
  692. background-position: -210px -805px
  693. }
  694. .icon-level-profile {
  695. width: 33px;
  696. height: 36px;
  697. background-position: -280px -805px
  698. }
  699. .avi {
  700. position: absolute;
  701. width: 150px;
  702. height: 150px;
  703. background: url('https://cdn.plug.dj/_/static/images/sheets/avatars.23a4ff92a0ff6962e4fddfd875f2eef5b4cd2db6.png')
  704. }
  705. .avi.t {
  706. background-image: url('https://cdn.plug.dj/_/static/images/sheets/avatars_t.76b6df3c9c5951bcfe60a280fa90a164543e6df5.png')
  707. }
  708. .avi.s {
  709. background-image: url('https://cdn.plug.dj/_/static/images/sheets/avatars_s.07842ab4100218b0e32676abce7ce5694d689843.png')
  710. }
  711. .avi.e {
  712. background-image: url('https://cdn.plug.dj/_/static/images/sheets/avatars_e.8ebd4d29700316e9d217d361d8e9342f1c730e2a.png')
  713. }
  714. .avi-ba01 {
  715. background-position: 0 0
  716. }
  717. .avi-ba02 {
  718. background-position: -150px 0
  719. }
  720. .avi-tastycat {
  721. background-position: -300px 0
  722. }
  723. .avi-tastycat02 {
  724. background-position: -450px 0
  725. }
  726. .avi-admin01 {
  727. background-position: -600px 0
  728. }
  729. .avi-admin02 {
  730. background-position: -750px 0
  731. }
  732. .avi-admin03 {
  733. background-position: -900px 0
  734. }
  735. .avi-admin04 {
  736. background-position: -1050px 0
  737. }
  738. .avi-admin05 {
  739. background-position: -1200px 0
  740. }
  741. .avi-admin06 {
  742. background-position: -1350px 0
  743. }
  744. .avi-admin07 {
  745. background-position: -1500px 0
  746. }
  747. .avi-admin08 {
  748. background-position: -1650px 0
  749. }
  750. .avi-steve01 {
  751. background-position: -1800px 0
  752. }
  753. .avi-ba03 {
  754. background-position: -1950px 0
  755. }
  756. .avi-ba04 {
  757. background-position: -2100px 0
  758. }
  759. .avi-classic01 {
  760. background-position: 0 -150px
  761. }
  762. .avi-classic02 {
  763. background-position: -150px -150px
  764. }
  765. .avi-classic03 {
  766. background-position: -300px -150px
  767. }
  768. .avi-classic04 {
  769. background-position: -450px -150px
  770. }
  771. .avi-classic05 {
  772. background-position: -600px -150px
  773. }
  774. .avi-classic06 {
  775. background-position: -750px -150px
  776. }
  777. .avi-classic07 {
  778. background-position: -900px -150px
  779. }
  780. .avi-classic08 {
  781. background-position: -1050px -150px
  782. }
  783. .avi-classic09 {
  784. background-position: -1200px -150px
  785. }
  786. .avi-classic10 {
  787. background-position: -1350px -150px
  788. }
  789. .avi-classic11 {
  790. background-position: -1500px -150px
  791. }
  792. .avi-classic12 {
  793. background-position: -1650px -150px
  794. }
  795. .avi-classic13 {
  796. background-position: -1800px -150px
  797. }
  798. .avi-classic14 {
  799. background-position: -1950px -150px
  800. }
  801. .avi-classic15 {
  802. background-position: -2100px -150px
  803. }
  804. .avi-base01 {
  805. background-position: 0 -300px
  806. }
  807. .avi-base02 {
  808. background-position: -150px -300px
  809. }
  810. .avi-base03 {
  811. background-position: -300px -300px
  812. }
  813. .avi-base04 {
  814. background-position: -450px -300px
  815. }
  816. .avi-base05 {
  817. background-position: -600px -300px
  818. }
  819. .avi-base06 {
  820. background-position: -750px -300px
  821. }
  822. .avi-base07 {
  823. background-position: -900px -300px
  824. }
  825. .avi-base08 {
  826. background-position: -1050px -300px
  827. }
  828. .avi-base09 {
  829. background-position: -1200px -300px
  830. }
  831. .avi-base10 {
  832. background-position: -1350px -300px
  833. }
  834. .avi-base11 {
  835. background-position: -1500px -300px
  836. }
  837. .avi-base12 {
  838. background-position: -1650px -300px
  839. }
  840. .avi-base13 {
  841. background-position: -1800px -300px
  842. }
  843. .avi-base14 {
  844. background-position: -1950px -300px
  845. }
  846. .avi-base15 {
  847. background-position: -2100px -300px
  848. }
  849. .avi-rave01 {
  850. background-position: 0 -450px
  851. }
  852. .avi-rave02 {
  853. background-position: -150px -450px
  854. }
  855. .avi-rave03 {
  856. background-position: -300px -450px
  857. }
  858. .avi-rave04 {
  859. background-position: -450px -450px
  860. }
  861. .avi-rave05 {
  862. background-position: -600px -450px
  863. }
  864. .avi-rave06 {
  865. background-position: -750px -450px
  866. }
  867. .avi-rave07 {
  868. background-position: -900px -450px
  869. }
  870. .avi-rave08 {
  871. background-position: -1050px -450px
  872. }
  873. .avi-rave09 {
  874. background-position: -1200px -450px
  875. }
  876. .avi-rave10 {
  877. background-position: -1350px -450px
  878. }
  879. .avi-rave11 {
  880. background-position: -1500px -450px
  881. }
  882. .avi-rave12 {
  883. background-position: -1650px -450px
  884. }
  885. .avi-rave13 {
  886. background-position: -1800px -450px
  887. }
  888. .avi-rave14 {
  889. background-position: -1950px -450px
  890. }
  891. .avi-rave15 {
  892. background-position: -2100px -450px
  893. }
  894. .avi-hiphop01 {
  895. background-position: 0 -600px
  896. }
  897. .avi-hiphop02 {
  898. background-position: -150px -600px
  899. }
  900. .avi-hiphop03 {
  901. background-position: -300px -600px
  902. }
  903. .avi-hiphop04 {
  904. background-position: -450px -600px
  905. }
  906. .avi-hiphop05 {
  907. background-position: -600px -600px
  908. }
  909. .avi-hiphop06 {
  910. background-position: -750px -600px
  911. }
  912. .avi-hiphop07 {
  913. background-position: -900px -600px
  914. }
  915. .avi-hiphop08 {
  916. background-position: -1050px -600px
  917. }
  918. .avi-hiphop09 {
  919. background-position: -1200px -600px
  920. }
  921. .avi-hiphop10 {
  922. background-position: -1350px -600px
  923. }
  924. .avi-hiphop11 {
  925. background-position: -1500px -600px
  926. }
  927. .avi-hiphop12 {
  928. background-position: -1650px -600px
  929. }
  930. .avi-hiphop13 {
  931. background-position: -1800px -600px
  932. }
  933. .avi-hiphop14 {
  934. background-position: -1950px -600px
  935. }
  936. .avi-hiphop15 {
  937. background-position: -2100px -600px
  938. }
  939. .avi-country01 {
  940. background-position: 0 -750px
  941. }
  942. .avi-country02 {
  943. background-position: -150px -750px
  944. }
  945. .avi-country03 {
  946. background-position: -300px -750px
  947. }
  948. .avi-country04 {
  949. background-position: -450px -750px
  950. }
  951. .avi-country05 {
  952. background-position: -600px -750px
  953. }
  954. .avi-country06 {
  955. background-position: -750px -750px
  956. }
  957. .avi-country07 {
  958. background-position: -900px -750px
  959. }
  960. .avi-country08 {
  961. background-position: -1050px -750px
  962. }
  963. .avi-country09 {
  964. background-position: -1200px -750px
  965. }
  966. .avi-country10 {
  967. background-position: -1350px -750px
  968. }
  969. .avi-country11 {
  970. background-position: -1500px -750px
  971. }
  972. .avi-country12 {
  973. background-position: -1650px -750px
  974. }
  975. .avi-country13 {
  976. background-position: -1800px -750px
  977. }
  978. .avi-country14 {
  979. background-position: -1950px -750px
  980. }
  981. .avi-country15 {
  982. background-position: -2100px -750px
  983. }
  984. .avi-rock01 {
  985. background-position: 0 -900px
  986. }
  987. .avi-rock02 {
  988. background-position: -150px -900px
  989. }
  990. .avi-rock03 {
  991. background-position: -300px -900px
  992. }
  993. .avi-rock04 {
  994. background-position: -450px -900px
  995. }
  996. .avi-rock05 {
  997. background-position: -600px -900px
  998. }
  999. .avi-rock06 {
  1000. background-position: -750px -900px
  1001. }
  1002. .avi-rock07 {
  1003. background-position: -900px -900px
  1004. }
  1005. .avi-rock08 {
  1006. background-position: -1050px -900px
  1007. }
  1008. .avi-rock09 {
  1009. background-position: -1200px -900px
  1010. }
  1011. .avi-rock10 {
  1012. background-position: -1350px -900px
  1013. }
  1014. .avi-rock11 {
  1015. background-position: -1500px -900px
  1016. }
  1017. .avi-rock12 {
  1018. background-position: -1650px -900px
  1019. }
  1020. .avi-rock13 {
  1021. background-position: -1800px -900px
  1022. }
  1023. .avi-rock14 {
  1024. background-position: -1950px -900px
  1025. }
  1026. .avi-rock15 {
  1027. background-position: -2100px -900px
  1028. }
  1029. .avi-80s01 {
  1030. background-position: 0 -1050px
  1031. }
  1032. .avi-80s02 {
  1033. background-position: -150px -1050px
  1034. }
  1035. .avi-80s03 {
  1036. background-position: -300px -1050px
  1037. }
  1038. .avi-80s04 {
  1039. background-position: -450px -1050px
  1040. }
  1041. .avi-80s05 {
  1042. background-position: -600px -1050px
  1043. }
  1044. .avi-80s06 {
  1045. background-position: -750px -1050px
  1046. }
  1047. .avi-80s07 {
  1048. background-position: -900px -1050px
  1049. }
  1050. .avi-80s08 {
  1051. background-position: -1050px -1050px
  1052. }
  1053. .avi-80s09 {
  1054. background-position: -1200px -1050px
  1055. }
  1056. .avi-80s10 {
  1057. background-position: -1350px -1050px
  1058. }
  1059. .avi-80s11 {
  1060. background-position: -1500px -1050px
  1061. }
  1062. .avi-80s12 {
  1063. background-position: -1650px -1050px
  1064. }
  1065. .avi-80s13 {
  1066. background-position: -1800px -1050px
  1067. }
  1068. .avi-80s14 {
  1069. background-position: -1950px -1050px
  1070. }
  1071. .avi-80s15 {
  1072. background-position: -2100px -1050px
  1073. }
  1074. .avi-2014hw01 {
  1075. background-position: 0 -1200px
  1076. }
  1077. .avi-2014hw02 {
  1078. background-position: -150px -1200px
  1079. }
  1080. .avi-2014hw03 {
  1081. background-position: -300px -1200px
  1082. }
  1083. .avi-2014hw04 {
  1084. background-position: -450px -1200px
  1085. }
  1086. .avi-2014hw05 {
  1087. background-position: -600px -1200px
  1088. }
  1089. .avi-2014hw06 {
  1090. background-position: -750px -1200px
  1091. }
  1092. .avi-2014hw07 {
  1093. background-position: -900px -1200px
  1094. }
  1095. .avi-2014hw08 {
  1096. background-position: -1050px -1200px
  1097. }
  1098. .avi-2014hw09 {
  1099. background-position: -1200px -1200px
  1100. }
  1101. .avi-2014hw10 {
  1102. background-position: -1350px -1200px
  1103. }
  1104. .avi-2014hw11 {
  1105. background-position: -1500px -1200px
  1106. }
  1107. .avi-2014hw12 {
  1108. background-position: -1650px -1200px
  1109. }
  1110. .avi-2014hw13 {
  1111. background-position: -1800px -1200px
  1112. }
  1113. .avi-2014hw14 {
  1114. background-position: -1950px -1200px
  1115. }
  1116. .avi-2014hw15 {
  1117. background-position: -2100px -1200px
  1118. }
  1119. .avi-robot01 {
  1120. background-position: 0 -1350px
  1121. }
  1122. .avi-robot02 {
  1123. background-position: -150px -1350px
  1124. }
  1125. .avi-robot03 {
  1126. background-position: -300px -1350px
  1127. }
  1128. .avi-robot04 {
  1129. background-position: -450px -1350px
  1130. }
  1131. .avi-robot05 {
  1132. background-position: -600px -1350px
  1133. }
  1134. .avi-robot06 {
  1135. background-position: -750px -1350px
  1136. }
  1137. .avi-robot07 {
  1138. background-position: -900px -1350px
  1139. }
  1140. .avi-robot08 {
  1141. background-position: -1050px -1350px
  1142. }
  1143. .avi-robot09 {
  1144. background-position: -1200px -1350px
  1145. }
  1146. .avi-robot10 {
  1147. background-position: -1350px -1350px
  1148. }
  1149. .avi-robot11 {
  1150. background-position: -1500px -1350px
  1151. }
  1152. .avi-robot12 {
  1153. background-position: -1650px -1350px
  1154. }
  1155. .avi-robot13 {
  1156. background-position: -1800px -1350px
  1157. }
  1158. .avi-robot14 {
  1159. background-position: -1950px -1350px
  1160. }
  1161. .avi-robot15 {
  1162. background-position: -2100px -1350px
  1163. }
  1164. .avi-zoo01 {
  1165. background-position: 0 -1500px
  1166. }
  1167. .avi-zoo02 {
  1168. background-position: -150px -1500px
  1169. }
  1170. .avi-zoo03 {
  1171. background-position: -300px -1500px
  1172. }
  1173. .avi-zoo04 {
  1174. background-position: -450px -1500px
  1175. }
  1176. .avi-zoo05 {
  1177. background-position: -600px -1500px
  1178. }
  1179. .avi-zoo06 {
  1180. background-position: -750px -1500px
  1181. }
  1182. .avi-zoo07 {
  1183. background-position: -900px -1500px
  1184. }
  1185. .avi-zoo08 {
  1186. background-position: -1050px -1500px
  1187. }
  1188. .avi-zoo09 {
  1189. background-position: -1200px -1500px
  1190. }
  1191. .avi-zoo10 {
  1192. background-position: -1350px -1500px
  1193. }
  1194. .avi-zoo11 {
  1195. background-position: -1500px -1500px
  1196. }
  1197. .avi-zoo12 {
  1198. background-position: -1650px -1500px
  1199. }
  1200. .avi-zoo13 {
  1201. background-position: -1800px -1500px
  1202. }
  1203. .avi-zoo14 {
  1204. background-position: -1950px -1500px
  1205. }
  1206. .avi-zoo15 {
  1207. background-position: -2100px -1500px
  1208. }
  1209. .avi-nightcore {
  1210. background-position: -1650px -150px
  1211. }
  1212. .avi-warrior01 {
  1213. background-position: 0 -1650px
  1214. }
  1215. .avi-warrior02 {
  1216. background-position: -150px -1650px
  1217. }
  1218. .avi-warrior03 {
  1219. background-position: -300px -1650px
  1220. }
  1221. .avi-warrior04 {
  1222. background-position: -450px -1650px
  1223. }
  1224. .avi-warrior05 {
  1225. background-position: -600px -1650px
  1226. }
  1227. .avi-warrior06 {
  1228. background-position: -750px -1650px
  1229. }
  1230. .avi-warrior07 {
  1231. background-position: -900px -1650px
  1232. }
  1233. .avi-warrior08 {
  1234. background-position: -1050px -1650px
  1235. }
  1236. .avi-warrior09 {
  1237. background-position: -1200px -1650px
  1238. }
  1239. .avi-island-t01 {
  1240. background-position: 0 0
  1241. }
  1242. .avi-island-t02 {
  1243. background-position: -150px 0
  1244. }
  1245. .avi-island-t03 {
  1246. background-position: -300px 0
  1247. }
  1248. .avi-island-t04 {
  1249. background-position: -450px 0
  1250. }
  1251. .avi-sea-t01 {
  1252. background-position: 0 -150px
  1253. }
  1254. .avi-sea-t02 {
  1255. background-position: -150px -150px
  1256. }
  1257. .avi-sea-t03 {
  1258. background-position: -300px -150px
  1259. }
  1260. .avi-sea-t04 {
  1261. background-position: -450px -150px
  1262. }
  1263. .avi-diner-t01 {
  1264. background-position: 0 -300px
  1265. }
  1266. .avi-diner-t02 {
  1267. background-position: -150px -300px
  1268. }
  1269. .avi-diner-t03 {
  1270. background-position: -300px -300px
  1271. }
  1272. .avi-diner-t04 {
  1273. background-position: -450px -300px
  1274. }
  1275. .avi-beach-t01 {
  1276. background-position: 0 -450px
  1277. }
  1278. .avi-beach-t02 {
  1279. background-position: -150px -450px
  1280. }
  1281. .avi-beach-t03 {
  1282. background-position: -300px -450px
  1283. }
  1284. .avi-beach-t04 {
  1285. background-position: -450px -450px
  1286. }
  1287. .avi-nyc-t01 {
  1288. background-position: 0 -600px
  1289. }
  1290. .avi-nyc-t02 {
  1291. background-position: -150px -600px
  1292. }
  1293. .avi-nyc-t03 {
  1294. background-position: -300px -600px
  1295. }
  1296. .avi-nyc-t04 {
  1297. background-position: -450px -600px
  1298. }
  1299. .avi-2014winter-s01 {
  1300. background-position: 0 0
  1301. }
  1302. .avi-2014winter-s02 {
  1303. background-position: -150px 0
  1304. }
  1305. .avi-2014winter-s03 {
  1306. background-position: -300px 0
  1307. }
  1308. .avi-2014winter-s04 {
  1309. background-position: -450px 0
  1310. }
  1311. .avi-2014winter-s05 {
  1312. background-position: -600px 0
  1313. }
  1314. .avi-2014winter-s06 {
  1315. background-position: -750px 0
  1316. }
  1317. .avi-2014winter-s07 {
  1318. background-position: -900px 0
  1319. }
  1320. .avi-2014winter-s08 {
  1321. background-position: -1050px 0
  1322. }
  1323. .avi-2014winter-s09 {
  1324. background-position: -1200px 0
  1325. }
  1326. .avi-2014winter-s10 {
  1327. background-position: -1350px 0
  1328. }
  1329. .avi-zoo-s01 {
  1330. background-position: 0 -150px
  1331. }
  1332. .avi-zoo-s02 {
  1333. background-position: -150px -150px
  1334. }
  1335. .avi-zoo-s03 {
  1336. background-position: -300px -150px
  1337. }
  1338. .avi-zoo-s04 {
  1339. background-position: -450px -150px
  1340. }
  1341. .avi-zoo-s05 {
  1342. background-position: -600px -150px
  1343. }
  1344. .avi-zoo-s06 {
  1345. background-position: -750px -150px
  1346. }
  1347. .avi-hiphop-s01 {
  1348. background-position: -900px -150px
  1349. }
  1350. .avi-hiphop-s02 {
  1351. background-position: -1050px -150px
  1352. }
  1353. .avi-robot-s01 {
  1354. background-position: -1200px -150px
  1355. }
  1356. .avi-robot-s02 {
  1357. background-position: -1350px -150px
  1358. }
  1359. .avi-warrior-s01 {
  1360. background-position: 0 -300px
  1361. }
  1362. .avi-warrior-s02 {
  1363. background-position: -150px -300px
  1364. }
  1365. .avi-warrior-s03 {
  1366. background-position: -300px -300px
  1367. }
  1368. .avi-warrior-s04 {
  1369. background-position: -450px -300px
  1370. }
  1371. .avi-warrior-s05 {
  1372. background-position: -600px -300px
  1373. }
  1374. .avi-warrior-s06 {
  1375. background-position: -750px -300px
  1376. }
  1377. .avi-island-s01 {
  1378. background-position: -900px -300px
  1379. }
  1380. .avi-island-s02 {
  1381. background-position: -1050px -300px
  1382. }
  1383. .avi-island-s03 {
  1384. background-position: -1200px -300px
  1385. }
  1386. .avi-island-s04 {
  1387. background-position: -1350px -300px
  1388. }
  1389. .avi-island-s05 {
  1390. background-position: 0 -450px
  1391. }
  1392. .avi-island-s06 {
  1393. background-position: -150px -450px
  1394. }
  1395. .avi-island-s07 {
  1396. background-position: -300px -450px
  1397. }
  1398. .avi-sea-s01 {
  1399. background-position: -300px -450px
  1400. }
  1401. .avi-sea-s02 {
  1402. background-position: -450px -450px
  1403. }
  1404. .avi-sea-s03 {
  1405. background-position: -600px -450px
  1406. }
  1407. .avi-sea-s04 {
  1408. background-position: -750px -450px
  1409. }
  1410. .avi-sea-s05 {
  1411. background-position: -900px -450px
  1412. }
  1413. .avi-sea-s06 {
  1414. background-position: -1050px -450px
  1415. }
  1416. .avi-sea-s07 {
  1417. background-position: -1200px -450px
  1418. }
  1419. .avi-diner-s01 {
  1420. background-position: -1350px -450px
  1421. }
  1422. .avi-diner-s02 {
  1423. background-position: 0 -600px
  1424. }
  1425. .avi-diner-s03 {
  1426. background-position: -150px -600px
  1427. }
  1428. .avi-diner-s04 {
  1429. background-position: -300px -600px
  1430. }
  1431. .avi-diner-s05 {
  1432. background-position: -450px -600px
  1433. }
  1434. .avi-diner-s06 {
  1435. background-position: -600px -600px
  1436. }
  1437. .avi-diner-s07 {
  1438. background-position: -750px -600px
  1439. }
  1440. .avi-diner-s08 {
  1441. background-position: -900px -600px
  1442. }
  1443. .avi-diner-s09 {
  1444. background-position: -1050px -600px
  1445. }
  1446. .avi-diner-s10 {
  1447. background-position: -1200px -600px
  1448. }
  1449. .avi-beach-s01 {
  1450. background-position: -1350px -600px
  1451. }
  1452. .avi-beach-s02 {
  1453. background-position: 0 -750px
  1454. }
  1455. .avi-beach-s03 {
  1456. background-position: -150px -750px
  1457. }
  1458. .avi-beach-s04 {
  1459. background-position: -300px -750px
  1460. }
  1461. .avi-beach-s05 {
  1462. background-position: -450px -750px
  1463. }
  1464. .avi-beach-s06 {
  1465. background-position: -600px -750px
  1466. }
  1467. .avi-beach-s07 {
  1468. background-position: -750px -750px
  1469. }
  1470. .avi-nyc-s01 {
  1471. background-position: -900px -750px
  1472. }
  1473. .avi-nyc-s02 {
  1474. background-position: -1050px -750px
  1475. }
  1476. .avi-nyc-s03 {
  1477. background-position: -1200px -750px
  1478. }
  1479. .avi-nyc-s04 {
  1480. background-position: -1350px -750px
  1481. }
  1482. .avi-nyc-s05 {
  1483. background-position: 0 -900px
  1484. }
  1485. .avi-nyc-s06 {
  1486. background-position: -150px -900px
  1487. }
  1488. .avi-nyc-s07 {
  1489. background-position: -300px -900px
  1490. }
  1491. .avi-dragon-e01 {
  1492. background-position: 0 0
  1493. }
  1494. .avi-dragon-e02 {
  1495. background-position: -150px 0
  1496. }
  1497. .avi-dragon-e03 {
  1498. background-position: -300px 0
  1499. }
  1500. .avi-dragon-e04 {
  1501. background-position: -450px 0
  1502. }
  1503. .avi-island-e01 {
  1504. background-position: 0 -150px
  1505. }
  1506. .avi-island-e02 {
  1507. background-position: -150px -150px
  1508. }
  1509. .avi-sea-e01 {
  1510. background-position: -300px -150px
  1511. }
  1512. .avi-sea-e02 {
  1513. background-position: -450px -150px
  1514. }
  1515. .avi-diner-e01 {
  1516. background-position: 0 -300px
  1517. }
  1518. .avi-diner-e02 {
  1519. background-position: -150px -300px
  1520. }
  1521. .avi-beach-e01 {
  1522. background-position: -300px -300px
  1523. }
  1524. .avi-beach-e02 {
  1525. background-position: -450px -300px
  1526. }
  1527. .avi-nyc-e01 {
  1528. background-position: 0 -450px
  1529. }
  1530. .avi-nyc-e02 {
  1531. background-position: -150px -450px
  1532. }
  1533. .thumb {
  1534. overflow: hidden;
  1535. border: 2px solid #89be6c;
  1536. border-radius: 50%
  1537. }
  1538. .offline .thumb {
  1539. border: 2px solid #555d70
  1540. }
  1541. .thumb .background {
  1542. position: absolute;
  1543. top: 0;
  1544. left: 0;
  1545. z-index: 1;
  1546. width: 100%;
  1547. height: 100%;
  1548. background: #282c35
  1549. }
  1550. .thumb .avi {
  1551. z-index: 2
  1552. }
  1553. .thumb.small {
  1554. position: absolute;
  1555. top: 0;
  1556. left: 0;
  1557. width: 27px;
  1558. height: 27px
  1559. }
  1560. .thumb.small .avi {
  1561. top: -13px;
  1562. left: -14px;
  1563. background-size: 836px
  1564. }
  1565. .thumb.small .avi.s {
  1566. background-size: 557px
  1567. }
  1568. .thumb.small .avi.e,
  1569. .thumb.small .avi.t {
  1570. background-size: 223px
  1571. }
  1572. .thumb.medium {
  1573. position: absolute;
  1574. width: 36px;
  1575. height: 36px
  1576. }
  1577. .thumb.medium .avi {
  1578. top: -16px;
  1579. left: -19px;
  1580. background-size: 1115px
  1581. }
  1582. .thumb.medium .avi.s {
  1583. background-size: 743px
  1584. }
  1585. .thumb.medium .avi.e,
  1586. .thumb.medium .avi.t {
  1587. background-size: 297px
  1588. }
  1589. .thumb.large {
  1590. position: absolute;
  1591. width: 82px;
  1592. height: 82px;
  1593. border-width: 3px
  1594. }
  1595. .thumb.large .avi {
  1596. top: -33px;
  1597. left: -33px
  1598. }
  1599. .thumb.small .avi-ba01 {
  1600. background-position: 0 0
  1601. }
  1602. .thumb.medium .avi-ba01 {
  1603. background-position: 0 0
  1604. }
  1605. .thumb.large .avi-ba01 {
  1606. background-position: 0 0
  1607. }
  1608. .thumb.small .avi-ba02 {
  1609. background-position: -56px 0
  1610. }
  1611. .thumb.medium .avi-ba02 {
  1612. background-position: -75px 0
  1613. }
  1614. .thumb.large .avi-ba02 {
  1615. background-position: -150px 0
  1616. }
  1617. .thumb.small .avi-tastycat {
  1618. background-position: -112px 0
  1619. }
  1620. .thumb.medium .avi-tastycat {
  1621. background-position: -149px 0
  1622. }
  1623. .thumb.large .avi-tastycat {
  1624. background-position: -300px 0
  1625. }
  1626. .thumb.small .avi-tastycat02 {
  1627. background-position: -168px 0
  1628. }
  1629. .thumb.medium .avi-tastycat02 {
  1630. background-position: -223px 0
  1631. }
  1632. .thumb.large .avi-tastycat02 {
  1633. background-position: -450px 0
  1634. }
  1635. .thumb.small .avi-admin01 {
  1636. background-position: -223px 0
  1637. }
  1638. .thumb.medium .avi-admin01 {
  1639. background-position: -298px 0
  1640. }
  1641. .thumb.large .avi-admin01 {
  1642. background-position: -600px 0
  1643. }
  1644. .thumb.small .avi-admin02 {
  1645. background-position: -279px 0
  1646. }
  1647. .thumb.medium .avi-admin02 {
  1648. background-position: -372px 0
  1649. }
  1650. .thumb.large .avi-admin02 {
  1651. background-position: -750px 0
  1652. }
  1653. .thumb.small .avi-admin03 {
  1654. background-position: -335px 0
  1655. }
  1656. .thumb.medium .avi-admin03 {
  1657. background-position: -446px 0
  1658. }
  1659. .thumb.large .avi-admin03 {
  1660. background-position: -900px 0
  1661. }
  1662. .thumb.small .avi-admin04 {
  1663. background-position: -391px 0
  1664. }
  1665. .thumb.medium .avi-admin04 {
  1666. background-position: -521px 0
  1667. }
  1668. .thumb.large .avi-admin04 {
  1669. background-position: -1050px 0
  1670. }
  1671. .thumb.small .avi-admin05 {
  1672. background-position: -446px 0
  1673. }
  1674. .thumb.medium .avi-admin05 {
  1675. background-position: -595px 0
  1676. }
  1677. .thumb.large .avi-admin05 {
  1678. background-position: -1200px 0
  1679. }
  1680. .thumb.small .avi-admin06 {
  1681. background-position: -502px 0
  1682. }
  1683. .thumb.medium .avi-admin06 {
  1684. background-position: -669px 0
  1685. }
  1686. .thumb.large .avi-admin06 {
  1687. background-position: -1350px 0
  1688. }
  1689. .thumb.small .avi-admin07 {
  1690. background-position: -558px 0
  1691. }
  1692. .thumb.medium .avi-admin07 {
  1693. background-position: -744px 0
  1694. }
  1695. .thumb.large .avi-admin07 {
  1696. background-position: -1500px 0
  1697. }
  1698. .thumb.small .avi-admin08 {
  1699. background-position: -614px 0
  1700. }
  1701. .thumb.medium .avi-admin08 {
  1702. background-position: -818px 0
  1703. }
  1704. .thumb.large .avi-admin08 {
  1705. background-position: -1650px 0
  1706. }
  1707. .thumb.small .avi-steve01 {
  1708. background-position: -669px 0
  1709. }
  1710. .thumb.medium .avi-steve01 {
  1711. background-position: -892px 0
  1712. }
  1713. .thumb.large .avi-steve01 {
  1714. background-position: -1800px 0
  1715. }
  1716. .thumb.small .avi-ba03 {
  1717. background-position: -725px 0
  1718. }
  1719. .thumb.medium .avi-ba03 {
  1720. background-position: -967px 0
  1721. }
  1722. .thumb.large .avi-ba03 {
  1723. background-position: -1950px 0
  1724. }
  1725. .thumb.small .avi-ba04 {
  1726. background-position: -781px 0
  1727. }
  1728. .thumb.medium .avi-ba04 {
  1729. background-position: -1041px 0
  1730. }
  1731. .thumb.large .avi-ba04 {
  1732. background-position: -2100px 0
  1733. }
  1734. .thumb.small .avi-classic01 {
  1735. background-position: 0 -56px
  1736. }
  1737. .thumb.medium .avi-classic01 {
  1738. background-position: 0 -75px
  1739. }
  1740. .thumb.large .avi-classic01 {
  1741. background-position: 0 -150px
  1742. }
  1743. .thumb.small .avi-classic02 {
  1744. background-position: -56px -56px
  1745. }
  1746. .thumb.medium .avi-classic02 {
  1747. background-position: -75px -75px
  1748. }
  1749. .thumb.large .avi-classic02 {
  1750. background-position: -150px -150px
  1751. }
  1752. .thumb.small .avi-classic03 {
  1753. background-position: -112px -56px
  1754. }
  1755. .thumb.medium .avi-classic03 {
  1756. background-position: -149px -75px
  1757. }
  1758. .thumb.large .avi-classic03 {
  1759. background-position: -300px -150px
  1760. }
  1761. .thumb.small .avi-classic04 {
  1762. background-position: -168px -56px
  1763. }
  1764. .thumb.medium .avi-classic04 {
  1765. background-position: -223px -75px
  1766. }
  1767. .thumb.large .avi-classic04 {
  1768. background-position: -450px -150px
  1769. }
  1770. .thumb.small .avi-classic05 {
  1771. background-position: -223px -56px
  1772. }
  1773. .thumb.medium .avi-classic05 {
  1774. background-position: -298px -75px
  1775. }
  1776. .thumb.large .avi-classic05 {
  1777. background-position: -600px -150px
  1778. }
  1779. .thumb.small .avi-classic06 {
  1780. background-position: -279px -56px
  1781. }
  1782. .thumb.medium .avi-classic06 {
  1783. background-position: -372px -75px
  1784. }
  1785. .thumb.large .avi-classic06 {
  1786. background-position: -750px -150px
  1787. }
  1788. .thumb.small .avi-classic07 {
  1789. background-position: -335px -56px
  1790. }
  1791. .thumb.medium .avi-classic07 {
  1792. background-position: -446px -75px
  1793. }
  1794. .thumb.large .avi-classic07 {
  1795. background-position: -900px -150px
  1796. }
  1797. .thumb.small .avi-classic08 {
  1798. background-position: -391px -56px
  1799. }
  1800. .thumb.medium .avi-classic08 {
  1801. background-position: -521px -75px
  1802. }
  1803. .thumb.large .avi-classic08 {
  1804. background-position: -1050px -150px
  1805. }
  1806. .thumb.small .avi-classic09 {
  1807. background-position: -446px -56px
  1808. }
  1809. .thumb.medium .avi-classic09 {
  1810. background-position: -595px -75px
  1811. }
  1812. .thumb.large .avi-classic09 {
  1813. background-position: -1200px -150px
  1814. }
  1815. .thumb.small .avi-classic10 {
  1816. background-position: -502px -56px
  1817. }
  1818. .thumb.medium .avi-classic10 {
  1819. background-position: -669px -75px
  1820. }
  1821. .thumb.large .avi-classic10 {
  1822. background-position: -1350px -150px
  1823. }
  1824. .thumb.small .avi-classic11 {
  1825. background-position: -558px -56px
  1826. }
  1827. .thumb.medium .avi-classic11 {
  1828. background-position: -744px -75px
  1829. }
  1830. .thumb.large .avi-classic11 {
  1831. background-position: -1500px -150px
  1832. }
  1833. .thumb.small .avi-classic12 {
  1834. background-position: -614px -56px
  1835. }
  1836. .thumb.medium .avi-classic12 {
  1837. background-position: -818px -75px
  1838. }
  1839. .thumb.large .avi-classic12 {
  1840. background-position: -1650px -150px
  1841. }
  1842. .thumb.small .avi-classic13 {
  1843. background-position: -669px -56px
  1844. }
  1845. .thumb.medium .avi-classic13 {
  1846. background-position: -892px -75px
  1847. }
  1848. .thumb.large .avi-classic13 {
  1849. background-position: -1800px -150px
  1850. }
  1851. .thumb.small .avi-classic14 {
  1852. background-position: -725px -56px
  1853. }
  1854. .thumb.medium .avi-classic14 {
  1855. background-position: -967px -75px
  1856. }
  1857. .thumb.large .avi-classic14 {
  1858. background-position: -1950px -150px
  1859. }
  1860. .thumb.small .avi-classic15 {
  1861. background-position: -781px -56px
  1862. }
  1863. .thumb.medium .avi-classic15 {
  1864. background-position: -1041px -75px
  1865. }
  1866. .thumb.large .avi-classic15 {
  1867. background-position: -2100px -150px
  1868. }
  1869. .thumb.small .avi-base01 {
  1870. background-position: 0 -112px
  1871. }
  1872. .thumb.medium .avi-base01 {
  1873. background-position: 0 -149px
  1874. }
  1875. .thumb.large .avi-base01 {
  1876. background-position: 0 -300px
  1877. }
  1878. .thumb.small .avi-base02 {
  1879. background-position: -56px -112px
  1880. }
  1881. .thumb.medium .avi-base02 {
  1882. background-position: -75px -149px
  1883. }
  1884. .thumb.large .avi-base02 {
  1885. background-position: -150px -300px
  1886. }
  1887. .thumb.small .avi-base03 {
  1888. background-position: -112px -112px
  1889. }
  1890. .thumb.medium .avi-base03 {
  1891. background-position: -149px -149px
  1892. }
  1893. .thumb.large .avi-base03 {
  1894. background-position: -300px -300px
  1895. }
  1896. .thumb.small .avi-base04 {
  1897. background-position: -168px -112px
  1898. }
  1899. .thumb.medium .avi-base04 {
  1900. background-position: -223px -149px
  1901. }
  1902. .thumb.large .avi-base04 {
  1903. background-position: -450px -300px
  1904. }
  1905. .thumb.small .avi-base05 {
  1906. background-position: -223px -112px
  1907. }
  1908. .thumb.medium .avi-base05 {
  1909. background-position: -298px -149px
  1910. }
  1911. .thumb.large .avi-base05 {
  1912. background-position: -600px -300px
  1913. }
  1914. .thumb.small .avi-base06 {
  1915. background-position: -279px -112px
  1916. }
  1917. .thumb.medium .avi-base06 {
  1918. background-position: -372px -149px
  1919. }
  1920. .thumb.large .avi-base06 {
  1921. background-position: -750px -300px
  1922. }
  1923. .thumb.small .avi-base07 {
  1924. background-position: -335px -112px
  1925. }
  1926. .thumb.medium .avi-base07 {
  1927. background-position: -446px -149px
  1928. }
  1929. .thumb.large .avi-base07 {
  1930. background-position: -900px -300px
  1931. }
  1932. .thumb.small .avi-base08 {
  1933. background-position: -391px -112px
  1934. }
  1935. .thumb.medium .avi-base08 {
  1936. background-position: -521px -149px
  1937. }
  1938. .thumb.large .avi-base08 {
  1939. background-position: -1050px -300px
  1940. }
  1941. .thumb.small .avi-base09 {
  1942. background-position: -446px -112px
  1943. }
  1944. .thumb.medium .avi-base09 {
  1945. background-position: -595px -149px
  1946. }
  1947. .thumb.large .avi-base09 {
  1948. background-position: -1200px -300px
  1949. }
  1950. .thumb.small .avi-base10 {
  1951. background-position: -502px -112px
  1952. }
  1953. .thumb.medium .avi-base10 {
  1954. background-position: -669px -149px
  1955. }
  1956. .thumb.large .avi-base10 {
  1957. background-position: -1350px -300px
  1958. }
  1959. .thumb.small .avi-base11 {
  1960. background-position: -558px -112px
  1961. }
  1962. .thumb.medium .avi-base11 {
  1963. background-position: -744px -149px
  1964. }
  1965. .thumb.large .avi-base11 {
  1966. background-position: -1500px -300px
  1967. }
  1968. .thumb.small .avi-base12 {
  1969. background-position: -614px -112px
  1970. }
  1971. .thumb.medium .avi-base12 {
  1972. background-position: -818px -149px
  1973. }
  1974. .thumb.large .avi-base12 {
  1975. background-position: -1650px -300px
  1976. }
  1977. .thumb.small .avi-base13 {
  1978. background-position: -669px -112px
  1979. }
  1980. .thumb.medium .avi-base13 {
  1981. background-position: -892px -149px
  1982. }
  1983. .thumb.large .avi-base13 {
  1984. background-position: -1800px -300px
  1985. }
  1986. .thumb.small .avi-base14 {
  1987. background-position: -725px -112px
  1988. }
  1989. .thumb.medium .avi-base14 {
  1990. background-position: -967px -149px
  1991. }
  1992. .thumb.large .avi-base14 {
  1993. background-position: -1950px -300px
  1994. }
  1995. .thumb.small .avi-base15 {
  1996. background-position: -781px -112px
  1997. }
  1998. .thumb.medium .avi-base15 {
  1999. background-position: -1041px -149px
  2000. }
  2001. .thumb.large .avi-base15 {
  2002. background-position: -2100px -300px
  2003. }
  2004. .thumb.small .avi-rave01 {
  2005. background-position: 0 -168px
  2006. }
  2007. .thumb.medium .avi-rave01 {
  2008. background-position: 0 -223px
  2009. }
  2010. .thumb.large .avi-rave01 {
  2011. background-position: 0 -450px
  2012. }
  2013. .thumb.small .avi-rave02 {
  2014. background-position: -56px -168px
  2015. }
  2016. .thumb.medium .avi-rave02 {
  2017. background-position: -75px -223px
  2018. }
  2019. .thumb.large .avi-rave02 {
  2020. background-position: -150px -450px
  2021. }
  2022. .thumb.small .avi-rave03 {
  2023. background-position: -112px -168px
  2024. }
  2025. .thumb.medium .avi-rave03 {
  2026. background-position: -149px -223px
  2027. }
  2028. .thumb.large .avi-rave03 {
  2029. background-position: -300px -450px
  2030. }
  2031. .thumb.small .avi-rave04 {
  2032. background-position: -168px -168px
  2033. }
  2034. .thumb.medium .avi-rave04 {
  2035. background-position: -223px -223px
  2036. }
  2037. .thumb.large .avi-rave04 {
  2038. background-position: -450px -450px
  2039. }
  2040. .thumb.small .avi-rave05 {
  2041. background-position: -223px -168px
  2042. }
  2043. .thumb.medium .avi-rave05 {
  2044. background-position: -298px -223px
  2045. }
  2046. .thumb.large .avi-rave05 {
  2047. background-position: -600px -450px
  2048. }
  2049. .thumb.small .avi-rave06 {
  2050. background-position: -279px -168px
  2051. }
  2052. .thumb.medium .avi-rave06 {
  2053. background-position: -372px -223px
  2054. }
  2055. .thumb.large .avi-rave06 {
  2056. background-position: -750px -450px
  2057. }
  2058. .thumb.small .avi-rave07 {
  2059. background-position: -335px -168px
  2060. }
  2061. .thumb.medium .avi-rave07 {
  2062. background-position: -446px -223px
  2063. }
  2064. .thumb.large .avi-rave07 {
  2065. background-position: -900px -450px
  2066. }
  2067. .thumb.small .avi-rave08 {
  2068. background-position: -391px -168px
  2069. }
  2070. .thumb.medium .avi-rave08 {
  2071. background-position: -521px -223px
  2072. }
  2073. .thumb.large .avi-rave08 {
  2074. background-position: -1050px -450px
  2075. }
  2076. .thumb.small .avi-rave09 {
  2077. background-position: -446px -168px
  2078. }
  2079. .thumb.medium .avi-rave09 {
  2080. background-position: -595px -223px
  2081. }
  2082. .thumb.large .avi-rave09 {
  2083. background-position: -1200px -450px
  2084. }
  2085. .thumb.small .avi-rave10 {
  2086. background-position: -502px -168px
  2087. }
  2088. .thumb.medium .avi-rave10 {
  2089. background-position: -669px -223px
  2090. }
  2091. .thumb.large .avi-rave10 {
  2092. background-position: -1350px -450px
  2093. }
  2094. .thumb.small .avi-rave11 {
  2095. background-position: -558px -168px
  2096. }
  2097. .thumb.medium .avi-rave11 {
  2098. background-position: -744px -223px
  2099. }
  2100. .thumb.large .avi-rave11 {
  2101. background-position: -1500px -450px
  2102. }
  2103. .thumb.small .avi-rave12 {
  2104. background-position: -614px -168px
  2105. }
  2106. .thumb.medium .avi-rave12 {
  2107. background-position: -818px -223px
  2108. }
  2109. .thumb.large .avi-rave12 {
  2110. background-position: -1650px -450px
  2111. }
  2112. .thumb.small .avi-rave13 {
  2113. background-position: -669px -168px
  2114. }
  2115. .thumb.medium .avi-rave13 {
  2116. background-position: -892px -223px
  2117. }
  2118. .thumb.large .avi-rave13 {
  2119. background-position: -1800px -450px
  2120. }
  2121. .thumb.small .avi-rave14 {
  2122. background-position: -725px -168px
  2123. }
  2124. .thumb.medium .avi-rave14 {
  2125. background-position: -967px -223px
  2126. }
  2127. .thumb.large .avi-rave14 {
  2128. background-position: -1950px -450px
  2129. }
  2130. .thumb.small .avi-rave15 {
  2131. background-position: -781px -168px
  2132. }
  2133. .thumb.medium .avi-rave15 {
  2134. background-position: -1041px -223px
  2135. }
  2136. .thumb.large .avi-rave15 {
  2137. background-position: -2100px -450px
  2138. }
  2139. .thumb.small .avi-hiphop01 {
  2140. background-position: 0 -223px
  2141. }
  2142. .thumb.medium .avi-hiphop01 {
  2143. background-position: 0 -298px
  2144. }
  2145. .thumb.large .avi-hiphop01 {
  2146. background-position: 0 -600px
  2147. }
  2148. .thumb.small .avi-hiphop02 {
  2149. background-position: -56px -223px
  2150. }
  2151. .thumb.medium .avi-hiphop02 {
  2152. background-position: -75px -298px
  2153. }
  2154. .thumb.large .avi-hiphop02 {
  2155. background-position: -150px -600px
  2156. }
  2157. .thumb.small .avi-hiphop03 {
  2158. background-position: -112px -223px
  2159. }
  2160. .thumb.medium .avi-hiphop03 {
  2161. background-position: -149px -298px
  2162. }
  2163. .thumb.large .avi-hiphop03 {
  2164. background-position: -300px -600px
  2165. }
  2166. .thumb.small .avi-hiphop04 {
  2167. background-position: -168px -223px
  2168. }
  2169. .thumb.medium .avi-hiphop04 {
  2170. background-position: -223px -298px
  2171. }
  2172. .thumb.large .avi-hiphop04 {
  2173. background-position: -450px -600px
  2174. }
  2175. .thumb.small .avi-hiphop05 {
  2176. background-position: -223px -223px
  2177. }
  2178. .thumb.medium .avi-hiphop05 {
  2179. background-position: -298px -298px
  2180. }
  2181. .thumb.large .avi-hiphop05 {
  2182. background-position: -600px -600px
  2183. }
  2184. .thumb.small .avi-hiphop06 {
  2185. background-position: -279px -223px
  2186. }
  2187. .thumb.medium .avi-hiphop06 {
  2188. background-position: -372px -298px
  2189. }
  2190. .thumb.large .avi-hiphop06 {
  2191. background-position: -750px -600px
  2192. }
  2193. .thumb.small .avi-hiphop07 {
  2194. background-position: -335px -223px
  2195. }
  2196. .thumb.medium .avi-hiphop07 {
  2197. background-position: -446px -298px
  2198. }
  2199. .thumb.large .avi-hiphop07 {
  2200. background-position: -900px -600px
  2201. }
  2202. .thumb.small .avi-hiphop08 {
  2203. background-position: -391px -223px
  2204. }
  2205. .thumb.medium .avi-hiphop08 {
  2206. background-position: -521px -298px
  2207. }
  2208. .thumb.large .avi-hiphop08 {
  2209. background-position: -1050px -600px
  2210. }
  2211. .thumb.small .avi-hiphop09 {
  2212. background-position: -446px -223px
  2213. }
  2214. .thumb.medium .avi-hiphop09 {
  2215. background-position: -595px -298px
  2216. }
  2217. .thumb.large .avi-hiphop09 {
  2218. background-position: -1200px -600px
  2219. }
  2220. .thumb.small .avi-hiphop10 {
  2221. background-position: -502px -223px
  2222. }
  2223. .thumb.medium .avi-hiphop10 {
  2224. background-position: -669px -298px
  2225. }
  2226. .thumb.large .avi-hiphop10 {
  2227. background-position: -1350px -600px
  2228. }
  2229. .thumb.small .avi-hiphop11 {
  2230. background-position: -558px -223px
  2231. }
  2232. .thumb.medium .avi-hiphop11 {
  2233. background-position: -744px -298px
  2234. }
  2235. .thumb.large .avi-hiphop11 {
  2236. background-position: -1500px -600px
  2237. }
  2238. .thumb.small .avi-hiphop12 {
  2239. background-position: -614px -223px
  2240. }
  2241. .thumb.medium .avi-hiphop12 {
  2242. background-position: -818px -298px
  2243. }
  2244. .thumb.large .avi-hiphop12 {
  2245. background-position: -1650px -600px
  2246. }
  2247. .thumb.small .avi-hiphop13 {
  2248. background-position: -669px -223px
  2249. }
  2250. .thumb.medium .avi-hiphop13 {
  2251. background-position: -892px -298px
  2252. }
  2253. .thumb.large .avi-hiphop13 {
  2254. background-position: -1800px -600px
  2255. }
  2256. .thumb.small .avi-hiphop14 {
  2257. background-position: -725px -223px
  2258. }
  2259. .thumb.medium .avi-hiphop14 {
  2260. background-position: -967px -298px
  2261. }
  2262. .thumb.large .avi-hiphop14 {
  2263. background-position: -1950px -600px
  2264. }
  2265. .thumb.small .avi-hiphop15 {
  2266. background-position: -781px -223px
  2267. }
  2268. .thumb.medium .avi-hiphop15 {
  2269. background-position: -1041px -298px
  2270. }
  2271. .thumb.large .avi-hiphop15 {
  2272. background-position: -2100px -600px
  2273. }
  2274. .thumb.small .avi-country01 {
  2275. background-position: 0 -279px
  2276. }
  2277. .thumb.medium .avi-country01 {
  2278. background-position: 0 -372px
  2279. }
  2280. .thumb.large .avi-country01 {
  2281. background-position: 0 -750px
  2282. }
  2283. .thumb.small .avi-country02 {
  2284. background-position: -56px -279px
  2285. }
  2286. .thumb.medium .avi-country02 {
  2287. background-position: -75px -372px
  2288. }
  2289. .thumb.large .avi-country02 {
  2290. background-position: -150px -750px
  2291. }
  2292. .thumb.small .avi-country03 {
  2293. background-position: -112px -279px
  2294. }
  2295. .thumb.medium .avi-country03 {
  2296. background-position: -149px -372px
  2297. }
  2298. .thumb.large .avi-country03 {
  2299. background-position: -300px -750px
  2300. }
  2301. .thumb.small .avi-country04 {
  2302. background-position: -168px -279px
  2303. }
  2304. .thumb.medium .avi-country04 {
  2305. background-position: -223px -372px
  2306. }
  2307. .thumb.large .avi-country04 {
  2308. background-position: -450px -750px
  2309. }
  2310. .thumb.small .avi-country05 {
  2311. background-position: -223px -279px
  2312. }
  2313. .thumb.medium .avi-country05 {
  2314. background-position: -298px -372px
  2315. }
  2316. .thumb.large .avi-country05 {
  2317. background-position: -600px -750px
  2318. }
  2319. .thumb.small .avi-country06 {
  2320. background-position: -279px -279px
  2321. }
  2322. .thumb.medium .avi-country06 {
  2323. background-position: -372px -372px
  2324. }
  2325. .thumb.large .avi-country06 {
  2326. background-position: -750px -750px
  2327. }
  2328. .thumb.small .avi-country07 {
  2329. background-position: -335px -279px
  2330. }
  2331. .thumb.medium .avi-country07 {
  2332. background-position: -446px -372px
  2333. }
  2334. .thumb.large .avi-country07 {
  2335. background-position: -900px -750px
  2336. }
  2337. .thumb.small .avi-country08 {
  2338. background-position: -391px -279px
  2339. }
  2340. .thumb.medium .avi-country08 {
  2341. background-position: -521px -372px
  2342. }
  2343. .thumb.large .avi-country08 {
  2344. background-position: -1050px -750px
  2345. }
  2346. .thumb.small .avi-country09 {
  2347. background-position: -446px -279px
  2348. }
  2349. .thumb.medium .avi-country09 {
  2350. background-position: -595px -372px
  2351. }
  2352. .thumb.large .avi-country09 {
  2353. background-position: -1200px -750px
  2354. }
  2355. .thumb.small .avi-country10 {
  2356. background-position: -502px -279px
  2357. }
  2358. .thumb.medium .avi-country10 {
  2359. background-position: -669px -372px
  2360. }
  2361. .thumb.large .avi-country10 {
  2362. background-position: -1350px -750px
  2363. }
  2364. .thumb.small .avi-country11 {
  2365. background-position: -558px -279px
  2366. }
  2367. .thumb.medium .avi-country11 {
  2368. background-position: -744px -372px
  2369. }
  2370. .thumb.large .avi-country11 {
  2371. background-position: -1500px -750px
  2372. }
  2373. .thumb.small .avi-country12 {
  2374. background-position: -614px -279px
  2375. }
  2376. .thumb.medium .avi-country12 {
  2377. background-position: -818px -372px
  2378. }
  2379. .thumb.large .avi-country12 {
  2380. background-position: -1650px -750px
  2381. }
  2382. .thumb.small .avi-country13 {
  2383. background-position: -669px -279px
  2384. }
  2385. .thumb.medium .avi-country13 {
  2386. background-position: -892px -372px
  2387. }
  2388. .thumb.large .avi-country13 {
  2389. background-position: -1800px -750px
  2390. }
  2391. .thumb.small .avi-country14 {
  2392. background-position: -725px -279px
  2393. }
  2394. .thumb.medium .avi-country14 {
  2395. background-position: -967px -372px
  2396. }
  2397. .thumb.large .avi-country14 {
  2398. background-position: -1950px -750px
  2399. }
  2400. .thumb.small .avi-country15 {
  2401. background-position: -781px -279px
  2402. }
  2403. .thumb.medium .avi-country15 {
  2404. background-position: -1041px -372px
  2405. }
  2406. .thumb.large .avi-country15 {
  2407. background-position: -2100px -750px
  2408. }
  2409. .thumb.small .avi-rock01 {
  2410. background-position: 0 -335px
  2411. }
  2412. .thumb.medium .avi-rock01 {
  2413. background-position: 0 -446px
  2414. }
  2415. .thumb.large .avi-rock01 {
  2416. background-position: 0 -900px
  2417. }
  2418. .thumb.small .avi-rock02 {
  2419. background-position: -56px -335px
  2420. }
  2421. .thumb.medium .avi-rock02 {
  2422. background-position: -75px -446px
  2423. }
  2424. .thumb.large .avi-rock02 {
  2425. background-position: -150px -900px
  2426. }
  2427. .thumb.small .avi-rock03 {
  2428. background-position: -112px -335px
  2429. }
  2430. .thumb.medium .avi-rock03 {
  2431. background-position: -149px -446px
  2432. }
  2433. .thumb.large .avi-rock03 {
  2434. background-position: -300px -900px
  2435. }
  2436. .thumb.small .avi-rock04 {
  2437. background-position: -168px -335px
  2438. }
  2439. .thumb.medium .avi-rock04 {
  2440. background-position: -223px -446px
  2441. }
  2442. .thumb.large .avi-rock04 {
  2443. background-position: -450px -900px
  2444. }
  2445. .thumb.small .avi-rock05 {
  2446. background-position: -223px -335px
  2447. }
  2448. .thumb.medium .avi-rock05 {
  2449. background-position: -298px -446px
  2450. }
  2451. .thumb.large .avi-rock05 {
  2452. background-position: -600px -900px
  2453. }
  2454. .thumb.small .avi-rock06 {
  2455. background-position: -279px -335px
  2456. }
  2457. .thumb.medium .avi-rock06 {
  2458. background-position: -372px -446px
  2459. }
  2460. .thumb.large .avi-rock06 {
  2461. background-position: -750px -900px
  2462. }
  2463. .thumb.small .avi-rock07 {
  2464. background-position: -335px -335px
  2465. }
  2466. .thumb.medium .avi-rock07 {
  2467. background-position: -446px -446px
  2468. }
  2469. .thumb.large .avi-rock07 {
  2470. background-position: -900px -900px
  2471. }
  2472. .thumb.small .avi-rock08 {
  2473. background-position: -391px -335px
  2474. }
  2475. .thumb.medium .avi-rock08 {
  2476. background-position: -521px -446px
  2477. }
  2478. .thumb.large .avi-rock08 {
  2479. background-position: -1050px -900px
  2480. }
  2481. .thumb.small .avi-rock09 {
  2482. background-position: -446px -335px
  2483. }
  2484. .thumb.medium .avi-rock09 {
  2485. background-position: -595px -446px
  2486. }
  2487. .thumb.large .avi-rock09 {
  2488. background-position: -1200px -900px
  2489. }
  2490. .thumb.small .avi-rock10 {
  2491. background-position: -502px -335px
  2492. }
  2493. .thumb.medium .avi-rock10 {
  2494. background-position: -669px -446px
  2495. }
  2496. .thumb.large .avi-rock10 {
  2497. background-position: -1350px -900px
  2498. }
  2499. .thumb.small .avi-rock11 {
  2500. background-position: -558px -335px
  2501. }
  2502. .thumb.medium .avi-rock11 {
  2503. background-position: -744px -446px
  2504. }
  2505. .thumb.large .avi-rock11 {
  2506. background-position: -1500px -900px
  2507. }
  2508. .thumb.small .avi-rock12 {
  2509. background-position: -614px -335px
  2510. }
  2511. .thumb.medium .avi-rock12 {
  2512. background-position: -818px -446px
  2513. }
  2514. .thumb.large .avi-rock12 {
  2515. background-position: -1650px -900px
  2516. }
  2517. .thumb.small .avi-rock13 {
  2518. background-position: -669px -335px
  2519. }
  2520. .thumb.medium .avi-rock13 {
  2521. background-position: -892px -446px
  2522. }
  2523. .thumb.large .avi-rock13 {
  2524. background-position: -1800px -900px
  2525. }
  2526. .thumb.small .avi-rock14 {
  2527. background-position: -725px -335px
  2528. }
  2529. .thumb.medium .avi-rock14 {
  2530. background-position: -967px -446px
  2531. }
  2532. .thumb.large .avi-rock14 {
  2533. background-position: -1950px -900px
  2534. }
  2535. .thumb.small .avi-rock15 {
  2536. background-position: -781px -335px
  2537. }
  2538. .thumb.medium .avi-rock15 {
  2539. background-position: -1041px -446px
  2540. }
  2541. .thumb.large .avi-rock15 {
  2542. background-position: -2100px -900px
  2543. }
  2544. .thumb.small .avi-80s01 {
  2545. background-position: 0 -391px
  2546. }
  2547. .thumb.medium .avi-80s01 {
  2548. background-position: 0 -521px
  2549. }
  2550. .thumb.large .avi-80s01 {
  2551. background-position: 0 -1050px
  2552. }
  2553. .thumb.small .avi-80s02 {
  2554. background-position: -56px -391px
  2555. }
  2556. .thumb.medium .avi-80s02 {
  2557. background-position: -75px -521px
  2558. }
  2559. .thumb.large .avi-80s02 {
  2560. background-position: -150px -1050px
  2561. }
  2562. .thumb.small .avi-80s03 {
  2563. background-position: -112px -391px
  2564. }
  2565. .thumb.medium .avi-80s03 {
  2566. background-position: -149px -521px
  2567. }
  2568. .thumb.large .avi-80s03 {
  2569. background-position: -300px -1050px
  2570. }
  2571. .thumb.small .avi-80s04 {
  2572. background-position: -168px -391px
  2573. }
  2574. .thumb.medium .avi-80s04 {
  2575. background-position: -223px -521px
  2576. }
  2577. .thumb.large .avi-80s04 {
  2578. background-position: -450px -1050px
  2579. }
  2580. .thumb.small .avi-80s05 {
  2581. background-position: -223px -391px
  2582. }
  2583. .thumb.medium .avi-80s05 {
  2584. background-position: -298px -521px
  2585. }
  2586. .thumb.large .avi-80s05 {
  2587. background-position: -600px -1050px
  2588. }
  2589. .thumb.small .avi-80s06 {
  2590. background-position: -279px -391px
  2591. }
  2592. .thumb.medium .avi-80s06 {
  2593. background-position: -372px -521px
  2594. }
  2595. .thumb.large .avi-80s06 {
  2596. background-position: -750px -1050px
  2597. }
  2598. .thumb.small .avi-80s07 {
  2599. background-position: -335px -391px
  2600. }
  2601. .thumb.medium .avi-80s07 {
  2602. background-position: -446px -521px
  2603. }
  2604. .thumb.large .avi-80s07 {
  2605. background-position: -900px -1050px
  2606. }
  2607. .thumb.small .avi-80s08 {
  2608. background-position: -391px -391px
  2609. }
  2610. .thumb.medium .avi-80s08 {
  2611. background-position: -521px -521px
  2612. }
  2613. .thumb.large .avi-80s08 {
  2614. background-position: -1050px -1050px
  2615. }
  2616. .thumb.small .avi-80s09 {
  2617. background-position: -446px -391px
  2618. }
  2619. .thumb.medium .avi-80s09 {
  2620. background-position: -595px -521px
  2621. }
  2622. .thumb.large .avi-80s09 {
  2623. background-position: -1200px -1050px
  2624. }
  2625. .thumb.small .avi-80s10 {
  2626. background-position: -502px -391px
  2627. }
  2628. .thumb.medium .avi-80s10 {
  2629. background-position: -669px -521px
  2630. }
  2631. .thumb.large .avi-80s10 {
  2632. background-position: -1350px -1050px
  2633. }
  2634. .thumb.small .avi-80s11 {
  2635. background-position: -558px -391px
  2636. }
  2637. .thumb.medium .avi-80s11 {
  2638. background-position: -744px -521px
  2639. }
  2640. .thumb.large .avi-80s11 {
  2641. background-position: -1500px -1050px
  2642. }
  2643. .thumb.small .avi-80s12 {
  2644. background-position: -614px -391px
  2645. }
  2646. .thumb.medium .avi-80s12 {
  2647. background-position: -818px -521px
  2648. }
  2649. .thumb.large .avi-80s12 {
  2650. background-position: -1650px -1050px
  2651. }
  2652. .thumb.small .avi-80s13 {
  2653. background-position: -669px -391px
  2654. }
  2655. .thumb.medium .avi-80s13 {
  2656. background-position: -892px -521px
  2657. }
  2658. .thumb.large .avi-80s13 {
  2659. background-position: -1800px -1050px
  2660. }
  2661. .thumb.small .avi-80s14 {
  2662. background-position: -725px -391px
  2663. }
  2664. .thumb.medium .avi-80s14 {
  2665. background-position: -967px -521px
  2666. }
  2667. .thumb.large .avi-80s14 {
  2668. background-position: -1950px -1050px
  2669. }
  2670. .thumb.small .avi-80s15 {
  2671. background-position: -781px -391px
  2672. }
  2673. .thumb.medium .avi-80s15 {
  2674. background-position: -1041px -521px
  2675. }
  2676. .thumb.large .avi-80s15 {
  2677. background-position: -2100px -1050px
  2678. }
  2679. .thumb.small .avi-2014hw01 {
  2680. background-position: 0 -446px
  2681. }
  2682. .thumb.medium .avi-2014hw01 {
  2683. background-position: 0 -595px
  2684. }
  2685. .thumb.large .avi-2014hw01 {
  2686. background-position: 0 -1200px
  2687. }
  2688. .thumb.small .avi-2014hw02 {
  2689. background-position: -56px -446px
  2690. }
  2691. .thumb.medium .avi-2014hw02 {
  2692. background-position: -75px -595px
  2693. }
  2694. .thumb.large .avi-2014hw02 {
  2695. background-position: -150px -1200px
  2696. }
  2697. .thumb.small .avi-2014hw03 {
  2698. background-position: -112px -446px
  2699. }
  2700. .thumb.medium .avi-2014hw03 {
  2701. background-position: -149px -595px
  2702. }
  2703. .thumb.large .avi-2014hw03 {
  2704. background-position: -300px -1200px
  2705. }
  2706. .thumb.small .avi-2014hw04 {
  2707. background-position: -168px -446px
  2708. }
  2709. .thumb.medium .avi-2014hw04 {
  2710. background-position: -223px -595px
  2711. }
  2712. .thumb.large .avi-2014hw04 {
  2713. background-position: -450px -1200px
  2714. }
  2715. .thumb.small .avi-2014hw05 {
  2716. background-position: -223px -446px
  2717. }
  2718. .thumb.medium .avi-2014hw05 {
  2719. background-position: -298px -595px
  2720. }
  2721. .thumb.large .avi-2014hw05 {
  2722. background-position: -600px -1200px
  2723. }
  2724. .thumb.small .avi-2014hw06 {
  2725. background-position: -279px -446px
  2726. }
  2727. .thumb.medium .avi-2014hw06 {
  2728. background-position: -372px -595px
  2729. }
  2730. .thumb.large .avi-2014hw06 {
  2731. background-position: -750px -1200px
  2732. }
  2733. .thumb.small .avi-2014hw07 {
  2734. background-position: -335px -446px
  2735. }
  2736. .thumb.medium .avi-2014hw07 {
  2737. background-position: -446px -595px
  2738. }
  2739. .thumb.large .avi-2014hw07 {
  2740. background-position: -900px -1200px
  2741. }
  2742. .thumb.small .avi-2014hw08 {
  2743. background-position: -391px -446px
  2744. }
  2745. .thumb.medium .avi-2014hw08 {
  2746. background-position: -521px -595px
  2747. }
  2748. .thumb.large .avi-2014hw08 {
  2749. background-position: -1050px -1200px
  2750. }
  2751. .thumb.small .avi-2014hw09 {
  2752. background-position: -446px -446px
  2753. }
  2754. .thumb.medium .avi-2014hw09 {
  2755. background-position: -595px -595px
  2756. }
  2757. .thumb.large .avi-2014hw09 {
  2758. background-position: -1200px -1200px
  2759. }
  2760. .thumb.small .avi-2014hw10 {
  2761. background-position: -502px -446px
  2762. }
  2763. .thumb.medium .avi-2014hw10 {
  2764. background-position: -669px -595px
  2765. }
  2766. .thumb.large .avi-2014hw10 {
  2767. background-position: -1350px -1200px
  2768. }
  2769. .thumb.small .avi-2014hw11 {
  2770. background-position: -558px -446px
  2771. }
  2772. .thumb.medium .avi-2014hw11 {
  2773. background-position: -744px -595px
  2774. }
  2775. .thumb.large .avi-2014hw11 {
  2776. background-position: -1500px -1200px
  2777. }
  2778. .thumb.small .avi-2014hw12 {
  2779. background-position: -614px -446px
  2780. }
  2781. .thumb.medium .avi-2014hw12 {
  2782. background-position: -818px -595px
  2783. }
  2784. .thumb.large .avi-2014hw12 {
  2785. background-position: -1650px -1200px
  2786. }
  2787. .thumb.small .avi-2014hw13 {
  2788. background-position: -669px -446px
  2789. }
  2790. .thumb.medium .avi-2014hw13 {
  2791. background-position: -892px -595px
  2792. }
  2793. .thumb.large .avi-2014hw13 {
  2794. background-position: -1800px -1200px
  2795. }
  2796. .thumb.small .avi-2014hw14 {
  2797. background-position: -725px -446px
  2798. }
  2799. .thumb.medium .avi-2014hw14 {
  2800. background-position: -967px -595px
  2801. }
  2802. .thumb.large .avi-2014hw14 {
  2803. background-position: -1950px -1200px
  2804. }
  2805. .thumb.small .avi-2014hw15 {
  2806. background-position: -781px -446px
  2807. }
  2808. .thumb.medium .avi-2014hw15 {
  2809. background-position: -1041px -595px
  2810. }
  2811. .thumb.large .avi-2014hw15 {
  2812. background-position: -2100px -1200px
  2813. }
  2814. .thumb.small .avi-robot01 {
  2815. background-position: 0 -502px
  2816. }
  2817. .thumb.medium .avi-robot01 {
  2818. background-position: 0 -669px
  2819. }
  2820. .thumb.large .avi-robot01 {
  2821. background-position: 0 -1350px
  2822. }
  2823. .thumb.small .avi-robot02 {
  2824. background-position: -56px -502px
  2825. }
  2826. .thumb.medium .avi-robot02 {
  2827. background-position: -75px -669px
  2828. }
  2829. .thumb.large .avi-robot02 {
  2830. background-position: -150px -1350px
  2831. }
  2832. .thumb.small .avi-robot03 {
  2833. background-position: -112px -502px
  2834. }
  2835. .thumb.medium .avi-robot03 {
  2836. background-position: -149px -669px
  2837. }
  2838. .thumb.large .avi-robot03 {
  2839. background-position: -300px -1350px
  2840. }
  2841. .thumb.small .avi-robot04 {
  2842. background-position: -168px -502px
  2843. }
  2844. .thumb.medium .avi-robot04 {
  2845. background-position: -223px -669px
  2846. }
  2847. .thumb.large .avi-robot04 {
  2848. background-position: -450px -1350px
  2849. }
  2850. .thumb.small .avi-robot05 {
  2851. background-position: -223px -502px
  2852. }
  2853. .thumb.medium .avi-robot05 {
  2854. background-position: -298px -669px
  2855. }
  2856. .thumb.large .avi-robot05 {
  2857. background-position: -600px -1350px
  2858. }
  2859. .thumb.small .avi-robot06 {
  2860. background-position: -279px -502px
  2861. }
  2862. .thumb.medium .avi-robot06 {
  2863. background-position: -372px -669px
  2864. }
  2865. .thumb.large .avi-robot06 {
  2866. background-position: -750px -1350px
  2867. }
  2868. .thumb.small .avi-robot07 {
  2869. background-position: -335px -502px
  2870. }
  2871. .thumb.medium .avi-robot07 {
  2872. background-position: -446px -669px
  2873. }
  2874. .thumb.large .avi-robot07 {
  2875. background-position: -900px -1350px
  2876. }
  2877. .thumb.small .avi-robot08 {
  2878. background-position: -391px -502px
  2879. }
  2880. .thumb.medium .avi-robot08 {
  2881. background-position: -521px -669px
  2882. }
  2883. .thumb.large .avi-robot08 {
  2884. background-position: -1050px -1350px
  2885. }
  2886. .thumb.small .avi-robot09 {
  2887. background-position: -446px -502px
  2888. }
  2889. .thumb.medium .avi-robot09 {
  2890. background-position: -595px -669px
  2891. }
  2892. .thumb.large .avi-robot09 {
  2893. background-position: -1200px -1350px
  2894. }
  2895. .thumb.small .avi-robot10 {
  2896. background-position: -502px -502px
  2897. }
  2898. .thumb.medium .avi-robot10 {
  2899. background-position: -669px -669px
  2900. }
  2901. .thumb.large .avi-robot10 {
  2902. background-position: -1350px -1350px
  2903. }
  2904. .thumb.small .avi-robot11 {
  2905. background-position: -558px -502px
  2906. }
  2907. .thumb.medium .avi-robot11 {
  2908. background-position: -744px -669px
  2909. }
  2910. .thumb.large .avi-robot11 {
  2911. background-position: -1500px -1350px
  2912. }
  2913. .thumb.small .avi-robot12 {
  2914. background-position: -614px -502px
  2915. }
  2916. .thumb.medium .avi-robot12 {
  2917. background-position: -818px -669px
  2918. }
  2919. .thumb.large .avi-robot12 {
  2920. background-position: -1650px -1350px
  2921. }
  2922. .thumb.small .avi-robot13 {
  2923. background-position: -669px -502px
  2924. }
  2925. .thumb.medium .avi-robot13 {
  2926. background-position: -892px -669px
  2927. }
  2928. .thumb.large .avi-robot13 {
  2929. background-position: -1800px -1350px
  2930. }
  2931. .thumb.small .avi-robot14 {
  2932. background-position: -725px -502px
  2933. }
  2934. .thumb.medium .avi-robot14 {
  2935. background-position: -967px -669px
  2936. }
  2937. .thumb.large .avi-robot14 {
  2938. background-position: -1950px -1350px
  2939. }
  2940. .thumb.small .avi-robot15 {
  2941. background-position: -781px -502px
  2942. }
  2943. .thumb.medium .avi-robot15 {
  2944. background-position: -1041px -669px
  2945. }
  2946. .thumb.large .avi-robot15 {
  2947. background-position: -2100px -1350px
  2948. }
  2949. .thumb.small .avi-zoo01 {
  2950. background-position: 0 -558px
  2951. }
  2952. .thumb.medium .avi-zoo01 {
  2953. background-position: 0 -744px
  2954. }
  2955. .thumb.large .avi-zoo01 {
  2956. background-position: 0 -1500px
  2957. }
  2958. .thumb.small .avi-zoo02 {
  2959. background-position: -56px -558px
  2960. }
  2961. .thumb.medium .avi-zoo02 {
  2962. background-position: -75px -744px
  2963. }
  2964. .thumb.large .avi-zoo02 {
  2965. background-position: -150px -1500px
  2966. }
  2967. .thumb.small .avi-zoo03 {
  2968. background-position: -112px -558px
  2969. }
  2970. .thumb.medium .avi-zoo03 {
  2971. background-position: -149px -744px
  2972. }
  2973. .thumb.large .avi-zoo03 {
  2974. background-position: -300px -1500px
  2975. }
  2976. .thumb.small .avi-zoo04 {
  2977. background-position: -168px -558px
  2978. }
  2979. .thumb.medium .avi-zoo04 {
  2980. background-position: -223px -744px
  2981. }
  2982. .thumb.large .avi-zoo04 {
  2983. background-position: -450px -1500px
  2984. }
  2985. .thumb.small .avi-zoo05 {
  2986. background-position: -223px -558px
  2987. }
  2988. .thumb.medium .avi-zoo05 {
  2989. background-position: -298px -744px
  2990. }
  2991. .thumb.large .avi-zoo05 {
  2992. background-position: -600px -1500px
  2993. }
  2994. .thumb.small .avi-zoo06 {
  2995. background-position: -279px -558px
  2996. }
  2997. .thumb.medium .avi-zoo06 {
  2998. background-position: -372px -744px
  2999. }
  3000. .thumb.large .avi-zoo06 {
  3001. background-position: -750px -1500px
  3002. }
  3003. .thumb.small .avi-zoo07 {
  3004. background-position: -335px -558px
  3005. }
  3006. .thumb.medium .avi-zoo07 {
  3007. background-position: -446px -744px
  3008. }
  3009. .thumb.large .avi-zoo07 {
  3010. background-position: -900px -1500px
  3011. }
  3012. .thumb.small .avi-zoo08 {
  3013. background-position: -391px -558px
  3014. }
  3015. .thumb.medium .avi-zoo08 {
  3016. background-position: -521px -744px
  3017. }
  3018. .thumb.large .avi-zoo08 {
  3019. background-position: -1050px -1500px
  3020. }
  3021. .thumb.small .avi-zoo09 {
  3022. background-position: -446px -558px
  3023. }
  3024. .thumb.medium .avi-zoo09 {
  3025. background-position: -595px -744px
  3026. }
  3027. .thumb.large .avi-zoo09 {
  3028. background-position: -1200px -1500px
  3029. }
  3030. .thumb.small .avi-zoo10 {
  3031. background-position: -502px -558px
  3032. }
  3033. .thumb.medium .avi-zoo10 {
  3034. background-position: -669px -744px
  3035. }
  3036. .thumb.large .avi-zoo10 {
  3037. background-position: -1350px -1500px
  3038. }
  3039. .thumb.small .avi-zoo11 {
  3040. background-position: -558px -558px
  3041. }
  3042. .thumb.medium .avi-zoo11 {
  3043. background-position: -744px -744px
  3044. }
  3045. .thumb.large .avi-zoo11 {
  3046. background-position: -1500px -1500px
  3047. }
  3048. .thumb.small .avi-zoo12 {
  3049. background-position: -614px -558px
  3050. }
  3051. .thumb.medium .avi-zoo12 {
  3052. background-position: -818px -744px
  3053. }
  3054. .thumb.large .avi-zoo12 {
  3055. background-position: -1650px -1500px
  3056. }
  3057. .thumb.small .avi-zoo13 {
  3058. background-position: -669px -558px
  3059. }
  3060. .thumb.medium .avi-zoo13 {
  3061. background-position: -892px -744px
  3062. }
  3063. .thumb.large .avi-zoo13 {
  3064. background-position: -1800px -1500px
  3065. }
  3066. .thumb.small .avi-zoo14 {
  3067. background-position: -725px -558px
  3068. }
  3069. .thumb.medium .avi-zoo14 {
  3070. background-position: -967px -744px
  3071. }
  3072. .thumb.large .avi-zoo14 {
  3073. background-position: -1950px -1500px
  3074. }
  3075. .thumb.small .avi-zoo15 {
  3076. background-position: -781px -558px
  3077. }
  3078. .thumb.medium .avi-zoo15 {
  3079. background-position: -1041px -744px
  3080. }
  3081. .thumb.large .avi-zoo15 {
  3082. background-position: -2100px -1500px
  3083. }
  3084. .thumb.small .avi-nightcore {
  3085. background-position: -614px -56px
  3086. }
  3087. .thumb.medium .avi-nightcore {
  3088. background-position: -818px -80px
  3089. }
  3090. .thumb.large .avi-nightcore {
  3091. background-position: -1652px -150px
  3092. }
  3093. .thumb.small .avi-warrior01 {
  3094. background-position: 0 -613.2225px
  3095. }
  3096. .thumb.medium .avi-warrior01 {
  3097. background-position: 0 -817.63px
  3098. }
  3099. .thumb.large .avi-warrior01 {
  3100. background-position: 0 -1650px
  3101. }
  3102. .thumb.small .avi-warrior02 {
  3103. background-position: -55.7475px -613.2225px
  3104. }
  3105. .thumb.medium .avi-warrior02 {
  3106. background-position: -74.33px -817.63px
  3107. }
  3108. .thumb.large .avi-warrior02 {
  3109. background-position: -150px -1650px
  3110. }
  3111. .thumb.small .avi-warrior03 {
  3112. background-position: -111.495px -613.2225px
  3113. }
  3114. .thumb.medium .avi-warrior03 {
  3115. background-position: -148.66px -817.63px
  3116. }
  3117. .thumb.large .avi-warrior03 {
  3118. background-position: -300px -1650px
  3119. }
  3120. .thumb.small .avi-warrior04 {
  3121. background-position: -167.2425px -613.2225px
  3122. }
  3123. .thumb.medium .avi-warrior04 {
  3124. background-position: -222.99px -817.63px
  3125. }
  3126. .thumb.large .avi-warrior04 {
  3127. background-position: -450px -1650px
  3128. }
  3129. .thumb.small .avi-warrior05 {
  3130. background-position: -222.99px -613.2225px
  3131. }
  3132. .thumb.medium .avi-warrior05 {
  3133. background-position: -297.32px -817.63px
  3134. }
  3135. .thumb.large .avi-warrior05 {
  3136. background-position: -600px -1650px
  3137. }
  3138. .thumb.small .avi-warrior06 {
  3139. background-position: -278.7375px -613.2225px
  3140. }
  3141. .thumb.medium .avi-warrior06 {
  3142. background-position: -371.65px -817.63px
  3143. }
  3144. .thumb.large .avi-warrior06 {
  3145. background-position: -750px -1650px
  3146. }
  3147. .thumb.small .avi-warrior07 {
  3148. background-position: -334.485px -613.2225px
  3149. }
  3150. .thumb.medium .avi-warrior07 {
  3151. background-position: -445.98px -817.63px
  3152. }
  3153. .thumb.large .avi-warrior07 {
  3154. background-position: -900px -1650px
  3155. }
  3156. .thumb.small .avi-warrior08 {
  3157. background-position: -390.2325px -613.2225px
  3158. }
  3159. .thumb.medium .avi-warrior08 {
  3160. background-position: -520.31px -817.63px
  3161. }
  3162. .thumb.large .avi-warrior08 {
  3163. background-position: -1050px -1650px
  3164. }
  3165. .thumb.small .avi-warrior09 {
  3166. background-position: -445.98px -613.2225px
  3167. }
  3168. .thumb.medium .avi-warrior09 {
  3169. background-position: -594.64px -817.63px
  3170. }
  3171. .thumb.large .avi-warrior09 {
  3172. background-position: -1200px -1650px
  3173. }
  3174. .thumb.small .avi-island-t01 {
  3175. background-position: 0 0
  3176. }
  3177. .thumb.medium .avi-island-t01 {
  3178. background-position: 0 0
  3179. }
  3180. .thumb.large .avi-island-t01 {
  3181. background-position: 0 0
  3182. }
  3183. .thumb.small .avi-island-t02 {
  3184. background-position: -55.7475px 0
  3185. }
  3186. .thumb.medium .avi-island-t02 {
  3187. background-position: -74.33px 0
  3188. }
  3189. .thumb.large .avi-island-t02 {
  3190. background-position: -150px 0
  3191. }
  3192. .thumb.small .avi-island-t03 {
  3193. background-position: -111.495px 0
  3194. }
  3195. .thumb.medium .avi-island-t03 {
  3196. background-position: -148.66px 0
  3197. }
  3198. .thumb.large .avi-island-t03 {
  3199. background-position: -300px 0
  3200. }
  3201. .thumb.small .avi-island-t04 {
  3202. background-position: -167.2425px 0
  3203. }
  3204. .thumb.medium .avi-island-t04 {
  3205. background-position: -222.99px 0
  3206. }
  3207. .thumb.large .avi-island-t04 {
  3208. background-position: -450px 0
  3209. }
  3210. .thumb.small .avi-sea-t01 {
  3211. background-position: 0 -55.7475px
  3212. }
  3213. .thumb.medium .avi-sea-t01 {
  3214. background-position: 0 -74.33px
  3215. }
  3216. .thumb.large .avi-sea-t01 {
  3217. background-position: 0 -150px
  3218. }
  3219. .thumb.small .avi-sea-t02 {
  3220. background-position: -55.7475px -55.7475px
  3221. }
  3222. .thumb.medium .avi-sea-t02 {
  3223. background-position: -74.33px -74.33px
  3224. }
  3225. .thumb.large .avi-sea-t02 {
  3226. background-position: -150px -150px
  3227. }
  3228. .thumb.small .avi-sea-t03 {
  3229. background-position: -111.495px -55.7475px
  3230. }
  3231. .thumb.medium .avi-sea-t03 {
  3232. background-position: -148.66px -74.33px
  3233. }
  3234. .thumb.large .avi-sea-t03 {
  3235. background-position: -300px -150px
  3236. }
  3237. .thumb.small .avi-sea-t04 {
  3238. background-position: -167.2425px -55.7475px
  3239. }
  3240. .thumb.medium .avi-sea-t04 {
  3241. background-position: -222.99px -74.33px
  3242. }
  3243. .thumb.large .avi-sea-t04 {
  3244. background-position: -450px -150px
  3245. }
  3246. .thumb.small .avi-diner-t01 {
  3247. background-position: 0 -111.495px
  3248. }
  3249. .thumb.medium .avi-diner-t01 {
  3250. background-position: 0 -148.66px
  3251. }
  3252. .thumb.large .avi-diner-t01 {
  3253. background-position: 0 -300px
  3254. }
  3255. .thumb.small .avi-diner-t02 {
  3256. background-position: -55.7475px -111.495px
  3257. }
  3258. .thumb.medium .avi-diner-t02 {
  3259. background-position: -74.33px -148.66px
  3260. }
  3261. .thumb.large .avi-diner-t02 {
  3262. background-position: -150px -300px
  3263. }
  3264. .thumb.small .avi-diner-t03 {
  3265. background-position: -111.495px -111.495px
  3266. }
  3267. .thumb.medium .avi-diner-t03 {
  3268. background-position: -148.66px -148.66px
  3269. }
  3270. .thumb.large .avi-diner-t03 {
  3271. background-position: -300px -300px
  3272. }
  3273. .thumb.small .avi-diner-t04 {
  3274. background-position: -167.2425px -111.495px
  3275. }
  3276. .thumb.medium .avi-diner-t04 {
  3277. background-position: -222.99px -148.66px
  3278. }
  3279. .thumb.large .avi-diner-t04 {
  3280. background-position: -450px -300px
  3281. }
  3282. .thumb.small .avi-beach-t01 {
  3283. background-position: 0 -167.2425px
  3284. }
  3285. .thumb.medium .avi-beach-t01 {
  3286. background-position: 0 -222.99px
  3287. }
  3288. .thumb.large .avi-beach-t01 {
  3289. background-position: 0 -450px
  3290. }
  3291. .thumb.small .avi-beach-t02 {
  3292. background-position: -55.7475px -167.2425px
  3293. }
  3294. .thumb.medium .avi-beach-t02 {
  3295. background-position: -74.33px -222.99px
  3296. }
  3297. .thumb.large .avi-beach-t02 {
  3298. background-position: -150px -450px
  3299. }
  3300. .thumb.small .avi-beach-t03 {
  3301. background-position: -111.495px -167.2425px
  3302. }
  3303. .thumb.medium .avi-beach-t03 {
  3304. background-position: -148.66px -222.99px
  3305. }
  3306. .thumb.large .avi-beach-t03 {
  3307. background-position: -300px -450px
  3308. }
  3309. .thumb.small .avi-beach-t04 {
  3310. background-position: -167.2425px -167.2425px
  3311. }
  3312. .thumb.medium .avi-beach-t04 {
  3313. background-position: -222.99px -222.99px
  3314. }
  3315. .thumb.large .avi-beach-t04 {
  3316. background-position: -450px -450px
  3317. }
  3318. .thumb.small .avi-nyc-t01 {
  3319. background-position: 0 -222.99px
  3320. }
  3321. .thumb.medium .avi-nyc-t01 {
  3322. background-position: 0 -297.32px
  3323. }
  3324. .thumb.large .avi-nyc-t01 {
  3325. background-position: 0 -600px
  3326. }
  3327. .thumb.small .avi-nyc-t02 {
  3328. background-position: -55.7475px -222.99px
  3329. }
  3330. .thumb.medium .avi-nyc-t02 {
  3331. background-position: -74.33px -297.32px
  3332. }
  3333. .thumb.large .avi-nyc-t02 {
  3334. background-position: -150px -600px
  3335. }
  3336. .thumb.small .avi-nyc-t03 {
  3337. background-position: -111.495px -222.99px
  3338. }
  3339. .thumb.medium .avi-nyc-t03 {
  3340. background-position: -148.66px -297.32px
  3341. }
  3342. .thumb.large .avi-nyc-t03 {
  3343. background-position: -300px -600px
  3344. }
  3345. .thumb.small .avi-nyc-t04 {
  3346. background-position: -167.2425px -222.99px
  3347. }
  3348. .thumb.medium .avi-nyc-t04 {
  3349. background-position: -222.99px -297.32px
  3350. }
  3351. .thumb.large .avi-nyc-t04 {
  3352. background-position: -450px -600px
  3353. }
  3354. .thumb.small .avi-2014winter-s01 {
  3355. background-position: 0 0
  3356. }
  3357. .thumb.medium .avi-2014winter-s01 {
  3358. background-position: 0 0
  3359. }
  3360. .thumb.large .avi-2014winter-s01 {
  3361. background-position: 0 0
  3362. }
  3363. .thumb.small .avi-2014winter-s02 {
  3364. background-position: -56px 0
  3365. }
  3366. .thumb.medium .avi-2014winter-s02 {
  3367. background-position: -75px 0
  3368. }
  3369. .thumb.large .avi-2014winter-s02 {
  3370. background-position: -150px 0
  3371. }
  3372. .thumb.small .avi-2014winter-s03 {
  3373. background-position: -112px 0
  3374. }
  3375. .thumb.medium .avi-2014winter-s03 {
  3376. background-position: -149px 0
  3377. }
  3378. .thumb.large .avi-2014winter-s03 {
  3379. background-position: -300px 0
  3380. }
  3381. .thumb.small .avi-2014winter-s04 {
  3382. background-position: -168px 0
  3383. }
  3384. .thumb.medium .avi-2014winter-s04 {
  3385. background-position: -223px 0
  3386. }
  3387. .thumb.large .avi-2014winter-s04 {
  3388. background-position: -450px 0
  3389. }
  3390. .thumb.small .avi-2014winter-s05 {
  3391. background-position: -223px 0
  3392. }
  3393. .thumb.medium .avi-2014winter-s05 {
  3394. background-position: -298px 0
  3395. }
  3396. .thumb.large .avi-2014winter-s05 {
  3397. background-position: -600px 0
  3398. }
  3399. .thumb.small .avi-2014winter-s06 {
  3400. background-position: -279px 0
  3401. }
  3402. .thumb.medium .avi-2014winter-s06 {
  3403. background-position: -372px 0
  3404. }
  3405. .thumb.large .avi-2014winter-s06 {
  3406. background-position: -750px 0
  3407. }
  3408. .thumb.small .avi-2014winter-s07 {
  3409. background-position: -335px 0
  3410. }
  3411. .thumb.medium .avi-2014winter-s07 {
  3412. background-position: -446px 0
  3413. }
  3414. .thumb.large .avi-2014winter-s07 {
  3415. background-position: -900px 0
  3416. }
  3417. .thumb.small .avi-2014winter-s08 {
  3418. background-position: -391px 0
  3419. }
  3420. .thumb.medium .avi-2014winter-s08 {
  3421. background-position: -521px 0
  3422. }
  3423. .thumb.large .avi-2014winter-s08 {
  3424. background-position: -1050px 0
  3425. }
  3426. .thumb.small .avi-2014winter-s09 {
  3427. background-position: -446px 0
  3428. }
  3429. .thumb.medium .avi-2014winter-s09 {
  3430. background-position: -595px 0
  3431. }
  3432. .thumb.large .avi-2014winter-s09 {
  3433. background-position: -1200px 0
  3434. }
  3435. .thumb.small .avi-2014winter-s10 {
  3436. background-position: -502px 0
  3437. }
  3438. .thumb.medium .avi-2014winter-s10 {
  3439. background-position: -669px 0
  3440. }
  3441. .thumb.large .avi-2014winter-s10 {
  3442. background-position: -1350px 0
  3443. }
  3444. .thumb.small .avi-zoo-s01 {
  3445. background-position: 0 -56px
  3446. }
  3447. .thumb.medium .avi-zoo-s01 {
  3448. background-position: 0 -75px
  3449. }
  3450. .thumb.large .avi-zoo-s01 {
  3451. background-position: 0 -150px
  3452. }
  3453. .thumb.small .avi-zoo-s02 {
  3454. background-position: -56px -56px
  3455. }
  3456. .thumb.medium .avi-zoo-s02 {
  3457. background-position: -75px -75px
  3458. }
  3459. .thumb.large .avi-zoo-s02 {
  3460. background-position: -150px -150px
  3461. }
  3462. .thumb.small .avi-zoo-s03 {
  3463. background-position: -112px -56px
  3464. }
  3465. .thumb.medium .avi-zoo-s03 {
  3466. background-position: -149px -75px
  3467. }
  3468. .thumb.large .avi-zoo-s03 {
  3469. background-position: -300px -150px
  3470. }
  3471. .thumb.small .avi-zoo-s04 {
  3472. background-position: -168px -56px
  3473. }
  3474. .thumb.medium .avi-zoo-s04 {
  3475. background-position: -223px -75px
  3476. }
  3477. .thumb.large .avi-zoo-s04 {
  3478. background-position: -450px -150px
  3479. }
  3480. .thumb.small .avi-zoo-s05 {
  3481. background-position: -223px -56px
  3482. }
  3483. .thumb.medium .avi-zoo-s05 {
  3484. background-position: -298px -75px
  3485. }
  3486. .thumb.large .avi-zoo-s05 {
  3487. background-position: -600px -150px
  3488. }
  3489. .thumb.small .avi-zoo-s06 {
  3490. background-position: -279px -56px
  3491. }
  3492. .thumb.medium .avi-zoo-s06 {
  3493. background-position: -372px -75px
  3494. }
  3495. .thumb.large .avi-zoo-s06 {
  3496. background-position: -750px -150px
  3497. }
  3498. .thumb.small .avi-hiphop-s01 {
  3499. background-position: -335px -56px
  3500. }
  3501. .thumb.medium .avi-hiphop-s01 {
  3502. background-position: -446px -75px
  3503. }
  3504. .thumb.large .avi-hiphop-s01 {
  3505. background-position: -900px -150px
  3506. }
  3507. .thumb.small .avi-hiphop-s02 {
  3508. background-position: -391px -56px
  3509. }
  3510. .thumb.medium .avi-hiphop-s02 {
  3511. background-position: -521px -75px
  3512. }
  3513. .thumb.large .avi-hiphop-s02 {
  3514. background-position: -1050px -150px
  3515. }
  3516. .thumb.small .avi-robot-s01 {
  3517. background-position: -446px -56px
  3518. }
  3519. .thumb.medium .avi-robot-s01 {
  3520. background-position: -595px -75px
  3521. }
  3522. .thumb.large .avi-robot-s01 {
  3523. background-position: -1200px -150px
  3524. }
  3525. .thumb.small .avi-robot-s02 {
  3526. background-position: -502px -56px
  3527. }
  3528. .thumb.medium .avi-robot-s02 {
  3529. background-position: -669px -75px
  3530. }
  3531. .thumb.large .avi-robot-s02 {
  3532. background-position: -1350px -150px
  3533. }
  3534. .thumb.small .avi-warrior-s01 {
  3535. background-position: 0 -112px
  3536. }
  3537. .thumb.medium .avi-warrior-s01 {
  3538. background-position: 0 -149px
  3539. }
  3540. .thumb.large .avi-warrior-s01 {
  3541. background-position: 0 -300px
  3542. }
  3543. .thumb.small .avi-warrior-s02 {
  3544. background-position: -56px -112px
  3545. }
  3546. .thumb.medium .avi-warrior-s02 {
  3547. background-position: -75px -149px
  3548. }
  3549. .thumb.large .avi-warrior-s02 {
  3550. background-position: -150px -300px
  3551. }
  3552. .thumb.small .avi-warrior-s03 {
  3553. background-position: -112px -112px
  3554. }
  3555. .thumb.medium .avi-warrior-s03 {
  3556. background-position: -149px -149px
  3557. }
  3558. .thumb.large .avi-warrior-s03 {
  3559. background-position: -300px -300px
  3560. }
  3561. .thumb.small .avi-warrior-s04 {
  3562. background-position: -168px -112px
  3563. }
  3564. .thumb.medium .avi-warrior-s04 {
  3565. background-position: -223px -149px
  3566. }
  3567. .thumb.large .avi-warrior-s04 {
  3568. background-position: -450px -300px
  3569. }
  3570. .thumb.small .avi-warrior-s05 {
  3571. background-position: -223px -112px
  3572. }
  3573. .thumb.medium .avi-warrior-s05 {
  3574. background-position: -298px -149px
  3575. }
  3576. .thumb.large .avi-warrior-s05 {
  3577. background-position: -600px -300px
  3578. }
  3579. .thumb.small .avi-warrior-s06 {
  3580. background-position: -279px -112px
  3581. }
  3582. .thumb.medium .avi-warrior-s06 {
  3583. background-position: -372px -149px
  3584. }
  3585. .thumb.large .avi-warrior-s06 {
  3586. background-position: -750px -300px
  3587. }
  3588. .thumb.small .avi-island-s01 {
  3589. background-position: -335px -112px
  3590. }
  3591. .thumb.medium .avi-island-s01 {
  3592. background-position: -446px -149px
  3593. }
  3594. .thumb.large .avi-island-s01 {
  3595. background-position: -900px -300px
  3596. }
  3597. .thumb.small .avi-island-s02 {
  3598. background-position: -391px -112px
  3599. }
  3600. .thumb.medium .avi-island-s02 {
  3601. background-position: -521px -149px
  3602. }
  3603. .thumb.large .avi-island-s02 {
  3604. background-position: -1050px -300px
  3605. }
  3606. .thumb.small .avi-island-s03 {
  3607. background-position: -446px -112px
  3608. }
  3609. .thumb.medium .avi-island-s03 {
  3610. background-position: -595px -149px
  3611. }
  3612. .thumb.large .avi-island-s03 {
  3613. background-position: -1200px -300px
  3614. }
  3615. .thumb.small .avi-island-s04 {
  3616. background-position: -502px -112px
  3617. }
  3618. .thumb.medium .avi-island-s04 {
  3619. background-position: -669px -149px
  3620. }
  3621. .thumb.large .avi-island-s04 {
  3622. background-position: -1350px -300px
  3623. }
  3624. .thumb.small .avi-island-s05 {
  3625. background-position: 0 -168px
  3626. }
  3627. .thumb.medium .avi-island-s05 {
  3628. background-position: 0 -223px
  3629. }
  3630. .thumb.large .avi-island-s05 {
  3631. background-position: 0 -450px
  3632. }
  3633. .thumb.small .avi-island-s06 {
  3634. background-position: -56px -168px
  3635. }
  3636. .thumb.medium .avi-island-s06 {
  3637. background-position: -75px -223px
  3638. }
  3639. .thumb.large .avi-island-s06 {
  3640. background-position: -150px -450px
  3641. }
  3642. .thumb.small .avi-island-s07 {
  3643. background-position: -112px -168px
  3644. }
  3645. .thumb.medium .avi-island-s07 {
  3646. background-position: -149px -223px
  3647. }
  3648. .thumb.large .avi-island-s07 {
  3649. background-position: -300px -450px
  3650. }
  3651. .thumb.small .avi-sea-s01 {
  3652. background-position: -112px -168px
  3653. }
  3654. .thumb.medium .avi-sea-s01 {
  3655. background-position: -149px -223px
  3656. }
  3657. .thumb.large .avi-sea-s01 {
  3658. background-position: -300px -450px
  3659. }
  3660. .thumb.small .avi-sea-s02 {
  3661. background-position: -168px -168px
  3662. }
  3663. .thumb.medium .avi-sea-s02 {
  3664. background-position: -223px -223px
  3665. }
  3666. .thumb.large .avi-sea-s02 {
  3667. background-position: -450px -450px
  3668. }
  3669. .thumb.small .avi-sea-s03 {
  3670. background-position: -223px -168px
  3671. }
  3672. .thumb.medium .avi-sea-s03 {
  3673. background-position: -298px -223px
  3674. }
  3675. .thumb.large .avi-sea-s03 {
  3676. background-position: -600px -450px
  3677. }
  3678. .thumb.small .avi-sea-s04 {
  3679. background-position: -279px -168px
  3680. }
  3681. .thumb.medium .avi-sea-s04 {
  3682. background-position: -372px -223px
  3683. }
  3684. .thumb.large .avi-sea-s04 {
  3685. background-position: -750px -450px
  3686. }
  3687. .thumb.small .avi-sea-s05 {
  3688. background-position: -335px -168px
  3689. }
  3690. .thumb.medium .avi-sea-s05 {
  3691. background-position: -446px -223px
  3692. }
  3693. .thumb.large .avi-sea-s05 {
  3694. background-position: -900px -450px
  3695. }
  3696. .thumb.small .avi-sea-s06 {
  3697. background-position: -391px -168px
  3698. }
  3699. .thumb.medium .avi-sea-s06 {
  3700. background-position: -521px -223px
  3701. }
  3702. .thumb.large .avi-sea-s06 {
  3703. background-position: -1050px -450px
  3704. }
  3705. .thumb.small .avi-sea-s07 {
  3706. background-position: -446px -168px
  3707. }
  3708. .thumb.medium .avi-sea-s07 {
  3709. background-position: -595px -223px
  3710. }
  3711. .thumb.large .avi-sea-s07 {
  3712. background-position: -1200px -450px
  3713. }
  3714. .thumb.small .avi-diner-s01 {
  3715. background-position: -502px -168px
  3716. }
  3717. .thumb.medium .avi-diner-s01 {
  3718. background-position: -669px -223px
  3719. }
  3720. .thumb.large .avi-diner-s01 {
  3721. background-position: -1350px -450px
  3722. }
  3723. .thumb.small .avi-diner-s02 {
  3724. background-position: 0 -223px
  3725. }
  3726. .thumb.medium .avi-diner-s02 {
  3727. background-position: 0 -298px
  3728. }
  3729. .thumb.large .avi-diner-s02 {
  3730. background-position: 0 -600px
  3731. }
  3732. .thumb.small .avi-diner-s03 {
  3733. background-position: -56px -223px
  3734. }
  3735. .thumb.medium .avi-diner-s03 {
  3736. background-position: -75px -298px
  3737. }
  3738. .thumb.large .avi-diner-s03 {
  3739. background-position: -150px -600px
  3740. }
  3741. .thumb.small .avi-diner-s04 {
  3742. background-position: -112px -223px
  3743. }
  3744. .thumb.medium .avi-diner-s04 {
  3745. background-position: -149px -298px
  3746. }
  3747. .thumb.large .avi-diner-s04 {
  3748. background-position: -300px -600px
  3749. }
  3750. .thumb.small .avi-diner-s05 {
  3751. background-position: -168px -223px
  3752. }
  3753. .thumb.medium .avi-diner-s05 {
  3754. background-position: -223px -298px
  3755. }
  3756. .thumb.large .avi-diner-s05 {
  3757. background-position: -450px -600px
  3758. }
  3759. .thumb.small .avi-diner-s06 {
  3760. background-position: -223px -223px
  3761. }
  3762. .thumb.medium .avi-diner-s06 {
  3763. background-position: -298px -298px
  3764. }
  3765. .thumb.large .avi-diner-s06 {
  3766. background-position: -600px -600px
  3767. }
  3768. .thumb.small .avi-diner-s07 {
  3769. background-position: -279px -223px
  3770. }
  3771. .thumb.medium .avi-diner-s07 {
  3772. background-position: -372px -298px
  3773. }
  3774. .thumb.large .avi-diner-s07 {
  3775. background-position: -750px -600px
  3776. }
  3777. .thumb.small .avi-diner-s08 {
  3778. background-position: -335px -223px
  3779. }
  3780. .thumb.medium .avi-diner-s08 {
  3781. background-position: -446px -298px
  3782. }
  3783. .thumb.large .avi-diner-s08 {
  3784. background-position: -900px -600px
  3785. }
  3786. .thumb.small .avi-diner-s09 {
  3787. background-position: -391px -223px
  3788. }
  3789. .thumb.medium .avi-diner-s09 {
  3790. background-position: -521px -298px
  3791. }
  3792. .thumb.large .avi-diner-s09 {
  3793. background-position: -1050px -600px
  3794. }
  3795. .thumb.small .avi-diner-s10 {
  3796. background-position: -446px -223px
  3797. }
  3798. .thumb.medium .avi-diner-s10 {
  3799. background-position: -595px -298px
  3800. }
  3801. .thumb.large .avi-diner-s10 {
  3802. background-position: -1200px -600px
  3803. }
  3804. .thumb.small .avi-beach-s01 {
  3805. background-position: -502px -223px
  3806. }
  3807. .thumb.medium .avi-beach-s01 {
  3808. background-position: -669px -298px
  3809. }
  3810. .thumb.large .avi-beach-s01 {
  3811. background-position: -1350px -600px
  3812. }
  3813. .thumb.small .avi-beach-s02 {
  3814. background-position: 0 -279px
  3815. }
  3816. .thumb.medium .avi-beach-s02 {
  3817. background-position: 0 -372px
  3818. }
  3819. .thumb.large .avi-beach-s02 {
  3820. background-position: 0 -750px
  3821. }
  3822. .thumb.small .avi-beach-s03 {
  3823. background-position: -56px -279px
  3824. }
  3825. .thumb.medium .avi-beach-s03 {
  3826. background-position: -75px -372px
  3827. }
  3828. .thumb.large .avi-beach-s03 {
  3829. background-position: -150px -750px
  3830. }
  3831. .thumb.small .avi-beach-s04 {
  3832. background-position: -112px -279px
  3833. }
  3834. .thumb.medium .avi-beach-s04 {
  3835. background-position: -149px -372px
  3836. }
  3837. .thumb.large .avi-beach-s04 {
  3838. background-position: -300px -750px
  3839. }
  3840. .thumb.small .avi-beach-s05 {
  3841. background-position: -168px -279px
  3842. }
  3843. .thumb.medium .avi-beach-s05 {
  3844. background-position: -223px -372px
  3845. }
  3846. .thumb.large .avi-beach-s05 {
  3847. background-position: -450px -750px
  3848. }
  3849. .thumb.small .avi-beach-s06 {
  3850. background-position: -223px -279px
  3851. }
  3852. .thumb.medium .avi-beach-s06 {
  3853. background-position: -298px -372px
  3854. }
  3855. .thumb.large .avi-beach-s06 {
  3856. background-position: -600px -750px
  3857. }
  3858. .thumb.small .avi-beach-s07 {
  3859. background-position: -279px -279px
  3860. }
  3861. .thumb.medium .avi-beach-s07 {
  3862. background-position: -372px -372px
  3863. }
  3864. .thumb.large .avi-beach-s07 {
  3865. background-position: -750px -750px
  3866. }
  3867. .thumb.small .avi-nyc-s01 {
  3868. background-position: -335px -279px
  3869. }
  3870. .thumb.medium .avi-nyc-s01 {
  3871. background-position: -446px -372px
  3872. }
  3873. .thumb.large .avi-nyc-s01 {
  3874. background-position: -900px -750px
  3875. }
  3876. .thumb.small .avi-nyc-s02 {
  3877. background-position: -391px -279px
  3878. }
  3879. .thumb.medium .avi-nyc-s02 {
  3880. background-position: -521px -372px
  3881. }
  3882. .thumb.large .avi-nyc-s02 {
  3883. background-position: -1050px -750px
  3884. }
  3885. .thumb.small .avi-nyc-s03 {
  3886. background-position: -446px -279px
  3887. }
  3888. .thumb.medium .avi-nyc-s03 {
  3889. background-position: -595px -372px
  3890. }
  3891. .thumb.large .avi-nyc-s03 {
  3892. background-position: -1200px -750px
  3893. }
  3894. .thumb.small .avi-nyc-s04 {
  3895. background-position: -502px -279px
  3896. }
  3897. .thumb.medium .avi-nyc-s04 {
  3898. background-position: -669px -372px
  3899. }
  3900. .thumb.large .avi-nyc-s04 {
  3901. background-position: -1350px -750px
  3902. }
  3903. .thumb.small .avi-nyc-s05 {
  3904. background-position: 0 -335px
  3905. }
  3906. .thumb.medium .avi-nyc-s05 {
  3907. background-position: 0 -446px
  3908. }
  3909. .thumb.large .avi-nyc-s05 {
  3910. background-position: 0 -900px
  3911. }
  3912. .thumb.small .avi-nyc-s06 {
  3913. background-position: -56px -335px
  3914. }
  3915. .thumb.medium .avi-nyc-s06 {
  3916. background-position: -75px -446px
  3917. }
  3918. .thumb.large .avi-nyc-s06 {
  3919. background-position: -150px -900px
  3920. }
  3921. .thumb.small .avi-nyc-s07 {
  3922. background-position: -112px -335px
  3923. }
  3924. .thumb.medium .avi-nyc-s07 {
  3925. background-position: -149px -446px
  3926. }
  3927. .thumb.large .avi-nyc-s07 {
  3928. background-position: -300px -900px
  3929. }
  3930. .thumb.small .avi-dragon-e01 {
  3931. background-position: 0 0
  3932. }
  3933. .thumb.medium .avi-dragon-e01 {
  3934. background-position: 0 0
  3935. }
  3936. .thumb.large .avi-dragon-e01 {
  3937. background-position: 0 0
  3938. }
  3939. .thumb.small .avi-dragon-e02 {
  3940. background-position: -55.7475px 0
  3941. }
  3942. .thumb.medium .avi-dragon-e02 {
  3943. background-position: -74.33px 0
  3944. }
  3945. .thumb.large .avi-dragon-e02 {
  3946. background-position: -150px 0
  3947. }
  3948. .thumb.small .avi-dragon-e03 {
  3949. background-position: -111.495px 0
  3950. }
  3951. .thumb.medium .avi-dragon-e03 {
  3952. background-position: -148.66px 0
  3953. }
  3954. .thumb.large .avi-dragon-e03 {
  3955. background-position: -300px 0
  3956. }
  3957. .thumb.small .avi-dragon-e04 {
  3958. background-position: -167.2425px 0
  3959. }
  3960. .thumb.medium .avi-dragon-e04 {
  3961. background-position: -222.99px 0
  3962. }
  3963. .thumb.large .avi-dragon-e04 {
  3964. background-position: -450px 0
  3965. }
  3966. .thumb.small .avi-island-e01 {
  3967. background-position: 0 -55.7475px
  3968. }
  3969. .thumb.medium .avi-island-e01 {
  3970. background-position: 0 -74.33px
  3971. }
  3972. .thumb.large .avi-island-e01 {
  3973. background-position: 0 -150px
  3974. }
  3975. .thumb.small .avi-island-e02 {
  3976. background-position: -55.7475px -55.7475px
  3977. }
  3978. .thumb.medium .avi-island-e02 {
  3979. background-position: -74.33px -74.33px
  3980. }
  3981. .thumb.large .avi-island-e02 {
  3982. background-position: -150px -150px
  3983. }
  3984. .thumb.small .avi-sea-e01 {
  3985. background-position: -111.495px -55.7475px
  3986. }
  3987. .thumb.medium .avi-sea-e01 {
  3988. background-position: -148.66px -74.33px
  3989. }
  3990. .thumb.large .avi-sea-e01 {
  3991. background-position: -300px -150px
  3992. }
  3993. .thumb.small .avi-sea-e02 {
  3994. background-position: -167.2425px -55.7475px
  3995. }
  3996. .thumb.medium .avi-sea-e02 {
  3997. background-position: -222.99px -74.33px
  3998. }
  3999. .thumb.large .avi-sea-e02 {
  4000. background-position: -450px -150px
  4001. }
  4002. .thumb.small .avi-diner-e01 {
  4003. background-position: 0 -111.495px
  4004. }
  4005. .thumb.medium .avi-diner-e01 {
  4006. background-position: 0 -148.66px
  4007. }
  4008. .thumb.large .avi-diner-e01 {
  4009. background-position: 0 -300px
  4010. }
  4011. .thumb.small .avi-diner-e02 {
  4012. background-position: -55.7475px -111.495px
  4013. }
  4014. .thumb.medium .avi-diner-e02 {
  4015. background-position: -74.33px -148.66px
  4016. }
  4017. .thumb.large .avi-diner-e02 {
  4018. background-position: -150px -300px
  4019. }
  4020. .thumb.small .avi-beach-e01 {
  4021. background-position: -111.495px -111.495px
  4022. }
  4023. .thumb.medium .avi-beach-e01 {
  4024. background-position: -148.66px -148.66px
  4025. }
  4026. .thumb.large .avi-beach-e01 {
  4027. background-position: -300px -300px
  4028. }
  4029. .thumb.small .avi-beach-e02 {
  4030. background-position: -167.2425px -111.495px
  4031. }
  4032. .thumb.medium .avi-beach-e02 {
  4033. background-position: -222.99px -148.66px
  4034. }
  4035. .thumb.large .avi-beach-e02 {
  4036. background-position: -450px -300px
  4037. }
  4038. .thumb.small .avi-nyc-e01 {
  4039. background-position: 0 -167.2425px
  4040. }
  4041. .thumb.medium .avi-nyc-e01 {
  4042. background-position: 0 -222.99px
  4043. }
  4044. .thumb.large .avi-nyc-e01 {
  4045. background-position: 0 -450px
  4046. }
  4047. .thumb.small .avi-nyc-e02 {
  4048. background-position: -55.7475px -167.2425px
  4049. }
  4050. .thumb.medium .avi-nyc-e02 {
  4051. background-position: -74.33px -222.99px
  4052. }
  4053. .thumb.large .avi-nyc-e02 {
  4054. background-position: -150px -450px
  4055. }
  4056. .thumb.small .avi-sea-e02 {
  4057. top: -8px
  4058. }
  4059. .thumb.small .avi-80s01,
  4060. .thumb.small .avi-zoo-s01 {
  4061. top: -9px
  4062. }
  4063. .thumb.small .avi-ba04 {
  4064. top: -10px
  4065. }
  4066. .thumb.small .avi-2014winter-s01,
  4067. .thumb.small .avi-2014winter-s10,
  4068. .thumb.small .avi-ba01,
  4069. .thumb.small .avi-ba03,
  4070. .thumb.small .avi-beach-s01,
  4071. .thumb.small .avi-dragon-e01,
  4072. .thumb.small .avi-dragon-e02,
  4073. .thumb.small .avi-dragon-e03,
  4074. .thumb.small .avi-dragon-e04,
  4075. .thumb.small .avi-island-e01,
  4076. .thumb.small .avi-island-t02,
  4077. .thumb.small .avi-robot01,
  4078. .thumb.small .avi-sea-s01,
  4079. .thumb.small .avi-warrior-s04,
  4080. .thumb.small .avi-warrior05,
  4081. .thumb.small .avi-zoo01 {
  4082. top: -11px
  4083. }
  4084. .thumb.small .avi-2014winter-s04,
  4085. .thumb.small .avi-2014winter-s06,
  4086. .thumb.small .avi-80s05,
  4087. .thumb.small .avi-80s08,
  4088. .thumb.small .avi-ba01,
  4089. .thumb.small .avi-ba03,
  4090. .thumb.small .avi-base05,
  4091. .thumb.small .avi-classic08,
  4092. .thumb.small .avi-hiphop01,
  4093. .thumb.small .avi-hiphop08,
  4094. .thumb.small .avi-warrior-s05,
  4095. .thumb.small .avi-warrior-s06,
  4096. .thumb.small .avi-warrior04,
  4097. .thumb.small .avi-warrior08,
  4098. .thumb.small .avi-warrior09 {
  4099. top: -12px
  4100. }
  4101. .thumb.small .avi-80s02,
  4102. .thumb.small .avi-80s11,
  4103. .thumb.small .avi-80s15,
  4104. .thumb.small .avi-base06,
  4105. .thumb.small .avi-classic11,
  4106. .thumb.small .avi-country15,
  4107. .thumb.small .avi-hiphop-s02,
  4108. .thumb.small .avi-hiphop02,
  4109. .thumb.small .avi-hiphop15,
  4110. .thumb.small .avi-rave06,
  4111. .thumb.small .avi-rave07,
  4112. .thumb.small .avi-robot11,
  4113. .thumb.small .avi-rock09,
  4114. .thumb.small .avi-sea-t01,
  4115. .thumb.small .avi-zoo-s06,
  4116. .thumb.small .avi-zoo08 {
  4117. top: -14px
  4118. }
  4119. .thumb.small .avi-2014hw14,
  4120. .thumb.small .avi-2014winter-s02,
  4121. .thumb.small .avi-base02,
  4122. .thumb.small .avi-base15,
  4123. .thumb.small .avi-beach-s05,
  4124. .thumb.small .avi-classic05,
  4125. .thumb.small .avi-classic09,
  4126. .thumb.small .avi-country11,
  4127. .thumb.small .avi-hiphop09,
  4128. .thumb.small .avi-hiphop11,
  4129. .thumb.small .avi-hiphop12,
  4130. .thumb.small .avi-rave09,
  4131. .thumb.small .avi-rave12,
  4132. .thumb.small .avi-rave14,
  4133. .thumb.small .avi-rave15,
  4134. .thumb.small .avi-robot06,
  4135. .thumb.small .avi-robot09,
  4136. .thumb.small .avi-robot14,
  4137. .thumb.small .avi-rock02,
  4138. .thumb.small .avi-sea-s02,
  4139. .thumb.small .avi-sea-s03,
  4140. .thumb.small .avi-sea-s04,
  4141. .thumb.small .avi-zoo06,
  4142. .thumb.small .avi-zoo07 {
  4143. top: -15px
  4144. }
  4145. .thumb.small .avi-2014winter-s05,
  4146. .thumb.small .avi-80s12,
  4147. .thumb.small .avi-80s13,
  4148. .thumb.small .avi-base13,
  4149. .thumb.small .avi-base14,
  4150. .thumb.small .avi-country12,
  4151. .thumb.small .avi-country13,
  4152. .thumb.small .avi-diner-s06,
  4153. .thumb.small .avi-diner-s07,
  4154. .thumb.small .avi-hiphop13,
  4155. .thumb.small .avi-hiphop14,
  4156. .thumb.small .avi-rave13,
  4157. .thumb.small .avi-robot12,
  4158. .thumb.small .avi-robot13,
  4159. .thumb.small .avi-rock14,
  4160. .thumb.small .avi-zoo-s04,
  4161. .thumb.small .avi-zoo02,
  4162. .thumb.small .avi-zoo09,
  4163. .thumb.small .avi-zoo12 {
  4164. top: -16px
  4165. }
  4166. .thumb.small .avi-2014hw12,
  4167. .thumb.small .avi-2014hw13,
  4168. .thumb.small .avi-80s14,
  4169. .thumb.small .avi-base12,
  4170. .thumb.small .avi-country14,
  4171. .thumb.small .avi-island-s03 {
  4172. top: -17px
  4173. }
  4174. .thumb.small .avi-beach-s06,
  4175. .thumb.small .avi-beach-s07,
  4176. .thumb.small .avi-diner-e02,
  4177. .thumb.small .avi-rock12 {
  4178. top: -18px
  4179. }
  4180. .thumb.small .avi-sea-e01 {
  4181. top: -20px
  4182. }
  4183. .thumb.small .avi-diner-e01 {
  4184. top: -21px
  4185. }
  4186. .thumb.small .avi-nyc-e02 {
  4187. top: -25px
  4188. }
  4189. .thumb.small .avi-diner-s01 {
  4190. left: -13px
  4191. }
  4192. .thumb.small .avi-beach-e01,
  4193. .thumb.small .avi-diner-t03,
  4194. .thumb.small .avi-nyc-t03,
  4195. .thumb.small .avi-nyc-t04 {
  4196. left: -15px
  4197. }
  4198. .thumb.small .avi-2014winter-s07 {
  4199. top: -10px;
  4200. left: -19px
  4201. }
  4202. .thumb.small .avi-2014winter-s08 {
  4203. top: -11px;
  4204. left: -10px
  4205. }
  4206. .thumb.small .avi-zoo-s03 {
  4207. top: -11px;
  4208. left: -15px
  4209. }
  4210. .thumb.small .avi-island-s01 {
  4211. top: -11px;
  4212. left: -18px
  4213. }
  4214. .thumb.small .avi-admin01,
  4215. .thumb.small .avi-admin03,
  4216. .thumb.small .avi-admin05,
  4217. .thumb.small .avi-admin07,
  4218. .thumb.small .avi-classic04,
  4219. .thumb.small .avi-hiphop07,
  4220. .thumb.small .avi-island-t03 {
  4221. top: -12px;
  4222. left: -15px
  4223. }
  4224. .thumb.small .avi-80s03,
  4225. .thumb.small .avi-robot-s01,
  4226. .thumb.small .avi-rock03 {
  4227. top: -14px;
  4228. left: -15px
  4229. }
  4230. .thumb.small .avi-base09 {
  4231. top: -15px;
  4232. left: -14px
  4233. }
  4234. .thumb.small .avi-classic07 {
  4235. top: -15px;
  4236. left: -15px
  4237. }
  4238. .thumb.small .avi-diner-s02,
  4239. .thumb.small .avi-diner-s03 {
  4240. top: -15px;
  4241. left: -17px
  4242. }
  4243. .thumb.small .avi-diner-t04 {
  4244. top: -18px;
  4245. left: -15px
  4246. }
  4247. .thumb.small .avi-classic03 {
  4248. top: -19px;
  4249. left: -13px
  4250. }
  4251. .thumb.small .island-s02 {
  4252. left: -8px
  4253. }
  4254. .thumb.small .avi-2014hw03,
  4255. .thumb.small .avi-2014hw07,
  4256. .thumb.small .avi-2014hw08,
  4257. .thumb.small .avi-2014hw11,
  4258. .thumb.small .avi-2014hw12,
  4259. .thumb.small .avi-2014hw13,
  4260. .thumb.small .avi-2014hw15,
  4261. .thumb.small .avi-2014winter-s03,
  4262. .thumb.small .avi-80s07,
  4263. .thumb.small .avi-base03,
  4264. .thumb.small .avi-base07,
  4265. .thumb.small .avi-beach-s04,
  4266. .thumb.small .avi-beach-t03,
  4267. .thumb.small .avi-country03,
  4268. .thumb.small .avi-hiphop03,
  4269. .thumb.small .avi-rave03,
  4270. .thumb.small .avi-rave04,
  4271. .thumb.small .avi-robot03,
  4272. .thumb.small .avi-robot07,
  4273. .thumb.small .avi-robot15,
  4274. .thumb.small .avi-sea-t03,
  4275. .thumb.small .avi-tastycat,
  4276. .thumb.small .avi-tastycat02,
  4277. .thumb.small .avi-warrior03 {
  4278. left: -15px
  4279. }
  4280. .thumb.small .avi-warrior-s02 {
  4281. left: -18px
  4282. }
  4283. .thumb.medium .avi-sea-e02 {
  4284. top: -11px
  4285. }
  4286. .thumb.medium .avi-80s01,
  4287. .thumb.medium .avi-rave01,
  4288. .thumb.medium .avi-warrior05 {
  4289. top: -12px
  4290. }
  4291. .thumb.medium .avi-ba02,
  4292. .thumb.medium .avi-ba04,
  4293. .thumb.medium .avi-dragon-e01,
  4294. .thumb.medium .avi-dragon-e02,
  4295. .thumb.medium .avi-dragon-e03,
  4296. .thumb.medium .avi-dragon-e04,
  4297. .thumb.medium .avi-hiphop01 {
  4298. top: -13px
  4299. }
  4300. .thumb.medium .avi-country02,
  4301. .thumb.medium .avi-zoo-s01 {
  4302. top: -14px
  4303. }
  4304. .thumb.medium .avi-ba01,
  4305. .thumb.medium .avi-ba03,
  4306. .thumb.medium .avi-classic08,
  4307. .thumb.medium .avi-hiphop05,
  4308. .thumb.medium .avi-island-s04,
  4309. .thumb.medium .avi-warrior-s04,
  4310. .thumb.medium .avi-warrior04,
  4311. .thumb.medium .avi-zoo01 {
  4312. top: -15px
  4313. }
  4314. .thumb.medium .avi-80s09,
  4315. .thumb.medium .avi-beach-e01,
  4316. .thumb.medium .avi-country02,
  4317. .thumb.medium .avi-country06,
  4318. .thumb.medium .avi-country10,
  4319. .thumb.medium .avi-hiphop10,
  4320. .thumb.medium .avi-rave11,
  4321. .thumb.medium .avi-rock03,
  4322. .thumb.medium .avi-rock11,
  4323. .thumb.medium .avi-zoo05 {
  4324. top: -17px
  4325. }
  4326. .thumb.medium .avi-80s07,
  4327. .thumb.medium .avi-80s10,
  4328. .thumb.medium .avi-80s11,
  4329. .thumb.medium .avi-base06,
  4330. .thumb.medium .avi-base11,
  4331. .thumb.medium .avi-beach-t01,
  4332. .thumb.medium .avi-classic02,
  4333. .thumb.medium .avi-classic10,
  4334. .thumb.medium .avi-classic11,
  4335. .thumb.medium .avi-country03,
  4336. .thumb.medium .avi-country09,
  4337. .thumb.medium .avi-country11,
  4338. .thumb.medium .avi-hiphop03,
  4339. .thumb.medium .avi-hiphop15,
  4340. .thumb.medium .avi-rave02,
  4341. .thumb.medium .avi-rave05,
  4342. .thumb.medium .avi-rave06,
  4343. .thumb.medium .avi-rave12,
  4344. .thumb.medium .avi-robot02,
  4345. .thumb.medium .avi-robot03,
  4346. .thumb.medium .avi-robot04,
  4347. .thumb.medium .avi-robot05,
  4348. .thumb.medium .avi-robot07,
  4349. .thumb.medium .avi-robot08,
  4350. .thumb.medium .avi-robot10,
  4351. .thumb.medium .avi-rock09,
  4352. .thumb.medium .avi-rock13,
  4353. .thumb.medium .avi-rock15,
  4354. .thumb.medium .avi-tastycat,
  4355. .thumb.medium .avi-tastycat02,
  4356. .thumb.medium .avi-warrior07,
  4357. .thumb.medium .avi-zoo03,
  4358. .thumb.medium .avi-zoo04 {
  4359. top: -18px
  4360. }
  4361. .thumb.medium .avi-80s03,
  4362. .thumb.medium .avi-80s04,
  4363. .thumb.medium .avi-classic06,
  4364. .thumb.medium .avi-country15,
  4365. .thumb.medium .avi-hiphop-s02,
  4366. .thumb.medium .avi-hiphop02,
  4367. .thumb.medium .avi-rave14,
  4368. .thumb.medium .avi-rave15,
  4369. .thumb.medium .avi-robot-s01,
  4370. .thumb.medium .avi-rock02,
  4371. .thumb.medium .avi-zoo-s02,
  4372. .thumb.medium .avi-zoo08 {
  4373. top: -19px
  4374. }
  4375. .thumb.medium .avi-2014hw15,
  4376. .thumb.medium .avi-2014winter-s03,
  4377. .thumb.medium .avi-80s06,
  4378. .thumb.medium .avi-80s15,
  4379. .thumb.medium .avi-base09,
  4380. .thumb.medium .avi-base15,
  4381. .thumb.medium .avi-beach-s05,
  4382. .thumb.medium .avi-classic05,
  4383. .thumb.medium .avi-classic07,
  4384. .thumb.medium .avi-country13,
  4385. .thumb.medium .avi-diner-s08,
  4386. .thumb.medium .avi-diner-s09,
  4387. .thumb.medium .avi-diner-s10,
  4388. .thumb.medium .avi-diner-t04,
  4389. .thumb.medium .avi-hiphop06,
  4390. .thumb.medium .avi-hiphop11,
  4391. .thumb.medium .avi-hiphop13,
  4392. .thumb.medium .avi-rave09,
  4393. .thumb.medium .avi-robot06,
  4394. .thumb.medium .avi-robot11,
  4395. .thumb.medium .avi-rock14,
  4396. .thumb.medium .avi-sea-t01,
  4397. .thumb.medium .avi-zoo-s05,
  4398. .thumb.medium .avi-zoo-s06 {
  4399. top: -20px
  4400. }
  4401. .thumb.medium .avi-2014hw14,
  4402. .thumb.medium .avi-2014winter-s09,
  4403. .thumb.medium .avi-80s02,
  4404. .thumb.medium .avi-base02,
  4405. .thumb.medium .avi-base14,
  4406. .thumb.medium .avi-classic09,
  4407. .thumb.medium .avi-hiphop09,
  4408. .thumb.medium .avi-hiphop12,
  4409. .thumb.medium .avi-rave13,
  4410. .thumb.medium .avi-robot09,
  4411. .thumb.medium .avi-sea-s03,
  4412. .thumb.medium .avi-sea-s04,
  4413. .thumb.medium .avi-zoo02,
  4414. .thumb.medium .avi-zoo06,
  4415. .thumb.medium .avi-zoo07,
  4416. .thumb.medium .avi-zoo09 {
  4417. top: -21px
  4418. }
  4419. .thumb.medium .avi-2014hw12,
  4420. .thumb.medium .avi-80s12,
  4421. .thumb.medium .avi-80s13,
  4422. .thumb.medium .avi-base13,
  4423. .thumb.medium .avi-classic01,
  4424. .thumb.medium .avi-country12,
  4425. .thumb.medium .avi-country14,
  4426. .thumb.medium .avi-island-s03,
  4427. .thumb.medium .avi-robot12,
  4428. .thumb.medium .avi-robot13,
  4429. .thumb.medium .avi-robot14,
  4430. .thumb.medium .avi-rock12,
  4431. .thumb.medium .avi-zoo-s04 {
  4432. top: -22px
  4433. }
  4434. .thumb.medium .avi-2014hw13,
  4435. .thumb.medium .avi-2014winter-s02,
  4436. .thumb.medium .avi-80s14,
  4437. .thumb.medium .avi-base12,
  4438. .thumb.medium .avi-beach-s06,
  4439. .thumb.medium .avi-beach-s07,
  4440. .thumb.medium .avi-classic03,
  4441. .thumb.medium .avi-diner-s06,
  4442. .thumb.medium .avi-diner-s07,
  4443. .thumb.medium .avi-hiphop14,
  4444. .thumb.medium .avi-zoo12 {
  4445. top: -23px
  4446. }
  4447. .thumb.medium .avi-diner-e01 {
  4448. top: -27px
  4449. }
  4450. .thumb.medium .avi-nyc-e02 {
  4451. top: -32px
  4452. }
  4453. .thumb.medium .avi-island-s02 {
  4454. left: -11px
  4455. }
  4456. .thumb.medium .avi-2014winter-s08 {
  4457. left: -13px
  4458. }
  4459. .thumb.medium .avi-classic03 {
  4460. left: -17px
  4461. }
  4462. .thumb.medium .avi-ba04,
  4463. .thumb.medium .avi-sea-s07 {
  4464. left: -18px
  4465. }
  4466. .thumb.medium .avi-2014hw02,
  4467. .thumb.medium .avi-2014hw05,
  4468. .thumb.medium .avi-2014hw11,
  4469. .thumb.medium .avi-2014hw13,
  4470. .thumb.medium .avi-nyc-s06,
  4471. .thumb.medium .avi-nyc-t02 {
  4472. left: -20px
  4473. }
  4474. .thumb.medium .avi-island-s01 {
  4475. left: -24px
  4476. }
  4477. .thumb.medium .avi-2014winter-s07,
  4478. .thumb.medium .avi-warrior-s02 {
  4479. left: -25px
  4480. }
  4481. .thumb.medium .avi-diner-s01 {
  4482. top: -19px;
  4483. left: -18px
  4484. }
  4485. .thumb.medium .avi-diner-s02,
  4486. .thumb.medium .avi-diner-s03 {
  4487. top: -21px;
  4488. left: -23px
  4489. }
  4490. .thumb.medium .avi-diner-e02 {
  4491. top: -22px;
  4492. left: -19px
  4493. }
  4494. .thumb.medium .avi-sea-e01 {
  4495. top: -23px;
  4496. left: -18px
  4497. }
  4498. .thumb.large .avi80s01,
  4499. .thumb.large .warrior05 {
  4500. top: -20px
  4501. }
  4502. .thumb.large .avi-dragon-e01,
  4503. .thumb.large .avi-dragon-e02,
  4504. .thumb.large .avi-dragon-e03,
  4505. .thumb.large .avi-dragon-e04,
  4506. .thumb.large .avi-rave01 {
  4507. top: -21px
  4508. }
  4509. .thumb.large .avi-ba01,
  4510. .thumb.large .avi-ba03,
  4511. .thumb.large .avi-sea-s05 {
  4512. top: -24px
  4513. }
  4514. .thumb.large .avi-country04,
  4515. .thumb.large .avi-hiphop05 {
  4516. top: -26px
  4517. }
  4518. .thumb.large .avi-warrior04 {
  4519. top: -27px
  4520. }
  4521. .thumb.large .avi-zoo01 {
  4522. top: -27px
  4523. }
  4524. .thumb.large .avi-hiphop07,
  4525. .thumb.large .avi-island01,
  4526. .thumb.large .avi-island02,
  4527. .thumb.large .avi-rave07 {
  4528. top: -29px
  4529. }
  4530. .thumb.large .avi-hiphop08,
  4531. .thumb.large .avi-island-t02,
  4532. .thumb.large .avi-rave08,
  4533. .thumb.large .avi-sea-s01,
  4534. .thumb.large .avi-warrior02 {
  4535. top: -30px
  4536. }
  4537. .thumb.large .avi-rock03 {
  4538. top: -32px
  4539. }
  4540. .thumb.large .avi-robot13,
  4541. .thumb.large .avi-zoo-s06 {
  4542. top: -35px
  4543. }
  4544. .thumb.large .avi-robot14,
  4545. .thumb.large .avi-rock02 {
  4546. top: -36px
  4547. }
  4548. .thumb.large .avi-country03,
  4549. .thumb.large .avi-country11,
  4550. .thumb.large .avi-hiphop12,
  4551. .thumb.large .avi-rave09,
  4552. .thumb.large .avi-rave15,
  4553. .thumb.large .avi-rock07,
  4554. .thumb.large .avi-rock09,
  4555. .thumb.large .avi-zoo-s05,
  4556. .thumb.large .avi-zoo06,
  4557. .thumb.large .avi-zoo07 {
  4558. top: -37px
  4559. }
  4560. .thumb.large .avi-robot11,
  4561. .thumb.large .avi-zoo02,
  4562. .thumb.large .avi-zoo09 {
  4563. top: -38px
  4564. }
  4565. .thumb.large .avi-robot12 {
  4566. top: -39px
  4567. }
  4568. .thumb.large .avi-2014winter-s02,
  4569. .thumb.large .avi-diner-s08,
  4570. .thumb.large .avi-robot09,
  4571. .thumb.large .avi-sea-e01,
  4572. .thumb.large .avi-sea-t01,
  4573. .thumb.large .avi-zoo-s04 {
  4574. top: -40px
  4575. }
  4576. .thumb.large .avi-2014hw14,
  4577. .thumb.large .avi-2014winter-s03,
  4578. .thumb.large .avi-classic09,
  4579. .thumb.large .avi-zoo12 {
  4580. top: -41px
  4581. }
  4582. .thumb.large .avi-diner-e01 {
  4583. top: -43px
  4584. }
  4585. .thumb.large .avi-2014hw12,
  4586. .thumb.large .avi-diner-s06,
  4587. .thumb.large .avi-diner-s07,
  4588. .thumb.large .avi-rock12 {
  4589. top: -44px
  4590. }
  4591. .thumb.large .avi-island-s03 {
  4592. top: -46px
  4593. }
  4594. .thumb.large .avi-2014winter-s05,
  4595. .thumb.large .avi-sea-s03,
  4596. .thumb.large .avi-sea-s04 {
  4597. top: -48px
  4598. }
  4599. .thumb.large .avi-nyc-e02 {
  4600. top: -53px
  4601. }
  4602. .thumb.large .avi-island-t03 {
  4603. top: -20px;
  4604. left: -34px
  4605. }
  4606. .thumb.large .avi-ba02,
  4607. .thumb.large .avi-ba04,
  4608. .thumb.large .avi-hiphop01 {
  4609. top: -23px;
  4610. left: -34px
  4611. }
  4612. .thumb.large .avi-sea-e02 {
  4613. top: -25px;
  4614. left: -34px
  4615. }
  4616. .thumb.large .avi-rock01,
  4617. .thumb.large .avi-zoo-s01 {
  4618. top: -26px;
  4619. left: -34px
  4620. }
  4621. .thumb.large .avi-classic08 {
  4622. top: -27px;
  4623. left: -34px
  4624. }
  4625. .thumb.large .avi-country01,
  4626. .thumb.large .avi-country02,
  4627. .thumb.large .avi-warrior06 {
  4628. top: -28px;
  4629. left: -34px
  4630. }
  4631. .thumb.large .avi-warrior-s04,
  4632. .thumb.large .avi-warrior-s05 {
  4633. top: -30px;
  4634. left: -34px
  4635. }
  4636. .thumb.large .avi-classic04,
  4637. .thumb.large .avi-hiphop04,
  4638. .thumb.large .avi80s08 {
  4639. top: -30px;
  4640. left: -34px
  4641. }
  4642. .thumb.large .avi-2014winter-s08 {
  4643. top: -31px;
  4644. left: -22px
  4645. }
  4646. .thumb.large .avi-admin01,
  4647. .thumb.large .avi-admin03,
  4648. .thumb.large .avi-admin05,
  4649. .thumb.large .avi-admin07,
  4650. .thumb.large .avi-warrior-s06 {
  4651. top: -31px;
  4652. left: -34px
  4653. }
  4654. .thumb.large .avi-island-s01 {
  4655. top: -31px;
  4656. left: -44px
  4657. }
  4658. .thumb.large .avi-rock10 {
  4659. top: -34px;
  4660. left: -34px
  4661. }
  4662. .thumb.large .avi-rock13,
  4663. .thumb.large .avi-rock15 {
  4664. top: -35px;
  4665. left: -34px
  4666. }
  4667. .thumb.large .avi-hiphop02,
  4668. .thumb.large .avi80s14,
  4669. .thumb.large .avi80s15 {
  4670. top: -38px;
  4671. left: -34px
  4672. }
  4673. .thumb.large .avi-base06,
  4674. .thumb.large .avi-base09,
  4675. .thumb.large .avi-base15,
  4676. .thumb.large .avi-country12,
  4677. .thumb.large .avi-country13,
  4678. .thumb.large .avi-country14,
  4679. .thumb.large .avi-country15,
  4680. .thumb.large .avi-diner-e02,
  4681. .thumb.large .avi-hiphop-s02,
  4682. .thumb.large .avi-rave14,
  4683. .thumb.large .avi-robot06,
  4684. .thumb.large .avi80s12,
  4685. .thumb.large .avi80s13 {
  4686. top: -39px;
  4687. left: -34px
  4688. }
  4689. .thumb.large .avi-classic03 {
  4690. top: -42px;
  4691. left: -30px
  4692. }
  4693. .thumb.large .avi-2014hw13,
  4694. .thumb.large .avi-base02,
  4695. .thumb.large .avi-base12,
  4696. .thumb.large .avi-base13,
  4697. .thumb.large .avi-base14,
  4698. .thumb.large .avi-hiphop09,
  4699. .thumb.large .avi-hiphop14,
  4700. .thumb.large .avi-rave13,
  4701. .thumb.large .avi-rock14 {
  4702. top: -42px;
  4703. left: -34px
  4704. }
  4705. .thumb.large .avi-diner-s02,
  4706. .thumb.large .avi-diner-s03 {
  4707. top: -43px;
  4708. left: -43px
  4709. }
  4710. .thumb.large .avi-beach-s06,
  4711. .thumb.large .avi-beach-s07 {
  4712. top: -46px;
  4713. left: -34px
  4714. }
  4715. .thumb.large .avi-island-s02 {
  4716. left: -17px
  4717. }
  4718. .thumb.large .avi-2014winter-s03,
  4719. .thumb.large .avi-admin02,
  4720. .thumb.large .avi-admin04,
  4721. .thumb.large .avi-admin06,
  4722. .thumb.large .avi-admin08,
  4723. .thumb.large .avi-beach-e01,
  4724. .thumb.large .avi-beach-s01,
  4725. .thumb.large .avi-beach-s03,
  4726. .thumb.large .avi-beach-s04,
  4727. .thumb.large .avi-beach-s05,
  4728. .thumb.large .avi-beach-t01,
  4729. .thumb.large .avi-beach-t03,
  4730. .thumb.large .avi-beach-t04,
  4731. .thumb.large .avi-classic06,
  4732. .thumb.large .avi-classic07,
  4733. .thumb.large .avi-diner-t03,
  4734. .thumb.large .avi-hiphop03,
  4735. .thumb.large .avi-island-e02,
  4736. .thumb.large .avi-island-s04,
  4737. .thumb.large .avi-nyc-s02,
  4738. .thumb.large .avi-nyc-s03,
  4739. .thumb.large .avi-nyc-s04,
  4740. .thumb.large .avi-nyc-s05,
  4741. .thumb.large .avi-nyc-s06,
  4742. .thumb.large .avi-nyc-t01,
  4743. .thumb.large .avi-nyc-t02,
  4744. .thumb.large .avi-nyc-t03,
  4745. .thumb.large .avi-nyc-t04,
  4746. .thumb.large .avi-rave04,
  4747. .thumb.large .avi-rave06,
  4748. .thumb.large .avi-rock08,
  4749. .thumb.large .avi-sea-s07,
  4750. .thumb.large .avi-sea-t03,
  4751. .thumb.large .avi-warrior08 .thumb.large .avi-warrior09,
  4752. .thumb.large .avi80s06,
  4753. .thumb.large .avi80s07,
  4754. .thumb.large .avi80s09,
  4755. .thumb.large .avi80s10 {
  4756. left: -34px
  4757. }
  4758. .thumb.large .avi-warrior-s02 {
  4759. left: -46px
  4760. }
  4761. .thumb.large .avi-2014winter-s07 {
  4762. left: -47px
  4763. }
  4764. .jspContainer {
  4765. position: relative;
  4766. overflow: hidden
  4767. }
  4768. .jspPane {
  4769. position: absolute
  4770. }
  4771. .jspVerticalBar {
  4772. position: absolute;
  4773. top: 0;
  4774. right: 0;
  4775. width: 16px;
  4776. height: 100%;
  4777. background: red
  4778. }
  4779. .jspHorizontalBar {
  4780. position: absolute;
  4781. bottom: 0;
  4782. left: 0;
  4783. width: 100%;
  4784. height: 16px;
  4785. background: red
  4786. }
  4787. .jspCap {
  4788. display: none
  4789. }
  4790. .jspHorizontalBar .jspCap {
  4791. float: left
  4792. }
  4793. .jspTrack {
  4794. position: relative;
  4795. background: #dde
  4796. }
  4797. .jspDrag {
  4798. position: relative;
  4799. top: 0;
  4800. left: 0;
  4801. background: #bbd;
  4802. cursor: pointer
  4803. }
  4804. .jspHorizontalBar .jspDrag,
  4805. .jspHorizontalBar .jspTrack {
  4806. float: left;
  4807. height: 100%
  4808. }
  4809. .jspArrow {
  4810. display: block;
  4811. margin: 0;
  4812. padding: 0;
  4813. background: #50506d;
  4814. text-indent: -20000px;
  4815. cursor: pointer
  4816. }
  4817. .jspArrow.jspDisabled {
  4818. background: #80808d;
  4819. cursor: default
  4820. }
  4821. .jspVerticalBar .jspArrow {
  4822. height: 16px
  4823. }
  4824. .jspHorizontalBar .jspArrow {
  4825. float: left;
  4826. width: 16px;
  4827. height: 100%
  4828. }
  4829. .jspVerticalBar .jspArrow:focus {
  4830. outline: 0
  4831. }
  4832. .jspCorner {
  4833. float: left;
  4834. height: 100%;
  4835. background: #eeeef4
  4836. }
  4837. .jspHorizontalBar,
  4838. .jspTrack,
  4839. .jspVerticalBar {
  4840. background: #111317
  4841. }
  4842. .jspDrag {
  4843. background: #282c35;
  4844. -webkit-box-shadow: inset 0 0 0 1px #111317;
  4845. -moz-box-shadow: inset 0 0 0 1px #111317;
  4846. box-shadow: inset 0 0 0 1px #111317
  4847. }
  4848. .jspDrag:hover,
  4849. .jspTrack .jspActive,
  4850. .jspTrack .jspHover {
  4851. background: #323742
  4852. }
  4853. .jspTrack {
  4854. margin: 0 1px 0 1px
  4855. }
  4856. .jspHorizontalBar>.jspDisabled,
  4857. .jspHorizontalBar>.jspDisabled:hover,
  4858. .jspVerticalBar>.jspDisabled,
  4859. .jspVerticalBar>.jspDisabled:hover {
  4860. background-color: transparent
  4861. }
  4862. .jspVerticalBar .jspArrow {
  4863. height: 10px
  4864. }
  4865. .jspHorizontalBar .jspArrow {
  4866. width: 10px
  4867. }
  4868. .jspArrowUp {
  4869. background-position: 0 0
  4870. }
  4871. .jspArrowDown {
  4872. background-position: -64px 0!important
  4873. }
  4874. .jspArrowLeft {
  4875. background-position: -96px 0!important
  4876. }
  4877. .jspArrowRight {
  4878. background-position: -32px 0!important
  4879. }
  4880. .jspVerticalBar {
  4881. width: 12px;
  4882. opacity: 0;
  4883. transition: all .3s ease-in
  4884. }
  4885. .jspVerticalBar.hover {
  4886. opacity: 1;
  4887. transition: all 0s
  4888. }
  4889. .jspHorizontalBar {
  4890. display: none
  4891. }
  4892. h1.page-name {
  4893. position: fixed;
  4894. top: 0;
  4895. left: 0;
  4896. color: #000;
  4897. font-size: 10px
  4898. }
  4899. #app {
  4900. position: absolute;
  4901. top: 0;
  4902. left: 0;
  4903. width: 100%;
  4904. overflow: hidden
  4905. }
  4906. .app-left {
  4907. position: absolute;
  4908. top: 54px;
  4909. left: 0;
  4910. overflow: hidden
  4911. }
  4912. .app-right {
  4913. position: absolute;
  4914. top: 54px;
  4915. right: 0;
  4916. z-index: 2;
  4917. width: 345px
  4918. }
  4919. .modal {
  4920. position: fixed;
  4921. top: 0;
  4922. right: 0;
  4923. bottom: 0;
  4924. left: 0;
  4925. z-index: 800000;
  4926. display: block;
  4927. background: rgba(17, 19, 23, .5);
  4928. text-align: center;
  4929. white-space: nowrap
  4930. }
  4931. .modal:before {
  4932. display: inline-block;
  4933. box-sizing: border-box;
  4934. margin-right: -.25em;
  4935. height: 100%;
  4936. content: '';
  4937. vertical-align: middle
  4938. }
  4939. .modal-view {
  4940. position: relative;
  4941. display: inline-block;
  4942. margin: 0 auto;
  4943. vertical-align: middle;
  4944. white-space: normal
  4945. }
  4946. .left-meta {
  4947. position: absolute;
  4948. top: 0;
  4949. left: 0;
  4950. z-index: 25;
  4951. height: 54px
  4952. }
  4953. .right-meta {
  4954. position: absolute;
  4955. top: 0;
  4956. right: 0;
  4957. z-index: 30;
  4958. width: 345px;
  4959. height: 54px
  4960. }
  4961. .bar-value {
  4962. font-weight: 300;
  4963. font-size: 18px
  4964. }
  4965. .bar-count {
  4966. font-size: 18px
  4967. }
  4968. .bar-value-label {
  4969. color: #808691
  4970. }
  4971. .bar-divider {
  4972. position: absolute;
  4973. top: 13px;
  4974. left: 0;
  4975. width: 1px;
  4976. height: 28px;
  4977. background: #323742
  4978. }
  4979. .dark-label {
  4980. color: #555d70
  4981. }
  4982. .waitlist-total {
  4983. font-size: 14px
  4984. }
  4985. .bar-button {
  4986. position: absolute;
  4987. top: 0;
  4988. left: 53px;
  4989. height: 54px;
  4990. cursor: pointer
  4991. }
  4992. .loading-box {
  4993. position: fixed;
  4994. top: 0;
  4995. right: 0;
  4996. bottom: 0;
  4997. left: 0;
  4998. text-align: center;
  4999. white-space: nowrap;
  5000. background: #1c1f25;
  5001. z-index: 100000
  5002. }
  5003. .loading-box:before {
  5004. display: inline-block;
  5005. box-sizing: border-box;
  5006. margin-right: -.25em;
  5007. height: 100%;
  5008. content: '';
  5009. vertical-align: middle
  5010. }
  5011. .loading-box .content {
  5012. position: relative;
  5013. display: inline-block;
  5014. overflow: hidden;
  5015. margin: 0 auto;
  5016. width: 1150px;
  5017. height: 390px;
  5018. vertical-align: middle;
  5019. white-space: normal
  5020. }
  5021. .loading-box .content .logo {
  5022. position: relative;
  5023. display: inline-block;
  5024. margin: 0 auto;
  5025. width: 640px;
  5026. height: 158px;
  5027. background: url('https://cdn.plug.dj/_/static/images/plugdj_logo_big.0a1cd1b76fb41d094d4cfa21a65ad6194f294d1a.png');
  5028. z-index: 10
  5029. }
  5030. .loading-box .content .connecting {
  5031. position: absolute;
  5032. display: inline-block;
  5033. left: 500px;
  5034. bottom: 103px;
  5035. font-size: 42px;
  5036. z-index: 5
  5037. }
  5038. .loading-box .content .spinner {
  5039. left: 329px;
  5040. top: 265px
  5041. }
  5042. .loading-box .version {
  5043. position: absolute;
  5044. right: 17px;
  5045. bottom: 15px;
  5046. font-size: 16px;
  5047. color: #808691
  5048. }
  5049. .loading-box a {
  5050. position: absolute;
  5051. left: 17px;
  5052. bottom: 15px;
  5053. font-size: 16px;
  5054. text-decoration: none;
  5055. color: #eee
  5056. }
  5057. .loading-box a:visited {
  5058. color: #eee
  5059. }
  5060. .loading-box a:hover {
  5061. color: #009cdd;
  5062. text-decoration: underline
  5063. }
  5064. .loading-box .content .spotlight {
  5065. position: absolute;
  5066. display: inline-block;
  5067. bottom: 0;
  5068. left: 163px;
  5069. width: 342px;
  5070. height: 351px;
  5071. background: url('https://cdn.plug.dj/_/static/images/spotlight.e21241c0bb8b16daea80d1ed0e404115172f7132.jpg') no-repeat
  5072. }
  5073. .loading-box .content .spotlight .avatar {
  5074. position: absolute;
  5075. bottom: 80px;
  5076. left: 94px;
  5077. overflow: hidden;
  5078. width: 150px;
  5079. height: 150px
  5080. }
  5081. .loading-box .content .spotlight .avatar.wide {
  5082. left: 19px;
  5083. width: 300px
  5084. }
  5085. .loading-box .content .spotlight .avatar img {
  5086. position: absolute;
  5087. top: 0;
  5088. left: 0
  5089. }
  5090. .loading-box .content .spotlight .avatar.epic img {
  5091. height: 150px
  5092. }
  5093. #app-menu {
  5094. position: absolute;
  5095. top: 0;
  5096. left: -127px;
  5097. z-index: 98000;
  5098. width: 180px;
  5099. height: 54px;
  5100. border-right: 1px solid #0a0a0a;
  5101. background: #282c35;
  5102. -webkit-box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  5103. -moz-box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  5104. box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  5105. transition: left .1s ease-in
  5106. }
  5107. #app-menu .button {
  5108. position: absolute;
  5109. top: 0;
  5110. left: 0;
  5111. width: 100%;
  5112. height: 100%;
  5113. cursor: pointer
  5114. }
  5115. #app-menu.open {
  5116. left: 0;
  5117. height: 100%;
  5118. -webkit-box-shadow: 2px 0 10px 0 rgba(10, 10, 10, .35);
  5119. -moz-box-shadow: 2px 0 10px 0 rgba(10, 10, 10, .35);
  5120. box-shadow: 2px 0 10px 0 rgba(10, 10, 10, .35);
  5121. transition: left .15s ease-out
  5122. }
  5123. #app-menu .button i {
  5124. top: 11px;
  5125. left: 139px;
  5126. width: 30px;
  5127. transition: all .1s ease-in
  5128. }
  5129. #app-menu.open .button i {
  5130. left: 12px;
  5131. width: 125px;
  5132. transition: all .15s ease-out
  5133. }
  5134. #app-menu .list {
  5135. position: absolute;
  5136. top: 53px;
  5137. left: -53px;
  5138. width: 180px;
  5139. background: #282c35;
  5140. color: #808691;
  5141. font-weight: 400;
  5142. font-size: 16px;
  5143. transition: all .2s ease-in
  5144. }
  5145. #app-menu.open .list {
  5146. left: 0;
  5147. transition: all 50ms ease-out
  5148. }
  5149. #app-menu .list .item {
  5150. position: relative;
  5151. width: 100%;
  5152. height: 55px;
  5153. -webkit-box-shadow: inset 0 -1px 0 0 #323742;
  5154. -moz-box-shadow: inset 0 -1px 0 0 #323742;
  5155. box-shadow: inset 0 -1px 0 0 #323742;
  5156. cursor: pointer
  5157. }
  5158. #app-menu .list .item:hover {
  5159. background: #1c1f25;
  5160. color: #eee
  5161. }
  5162. #app-menu .list .item i {
  5163. position: relative;
  5164. top: 12px;
  5165. float: left;
  5166. margin-right: -9px;
  5167. margin-left: 9px
  5168. }
  5169. #app-menu .list .item span {
  5170. position: relative;
  5171. top: 16px;
  5172. float: left;
  5173. margin-left: 15px
  5174. }
  5175. #app-menu .list .item.community {
  5176. display: none
  5177. }
  5178. #app-menu .list .item.community i {
  5179. margin-right: -11px;
  5180. margin-left: 11px
  5181. }
  5182. #app-menu .list .logout {
  5183. position: absolute;
  5184. bottom: 9px;
  5185. left: 9px;
  5186. width: 158px;
  5187. height: 47px;
  5188. border: 1px solid #444a59;
  5189. background: 0 0;
  5190. text-align: center;
  5191. cursor: pointer
  5192. }
  5193. #app-menu .list .logout:hover {
  5194. border: 1px solid #eee;
  5195. background: #1c1f25;
  5196. color: #eee
  5197. }
  5198. #app-menu .list .logout div {
  5199. position: relative;
  5200. top: 10px;
  5201. display: inline-block;
  5202. margin: 0 auto;
  5203. text-align: left
  5204. }
  5205. #app-menu .list .logout i {
  5206. position: relative;
  5207. top: 0;
  5208. float: left;
  5209. margin-right: 0;
  5210. margin-left: -5px
  5211. }
  5212. #app-menu .list .logout span {
  5213. position: relative;
  5214. top: 3px;
  5215. float: left;
  5216. margin-left: 6px
  5217. }
  5218. #app-menu .list .logout.guest {
  5219. display: none
  5220. }
  5221. #app-menu .signup {
  5222. display: none
  5223. }
  5224. #app-menu .signup.guest {
  5225. position: absolute;
  5226. z-index: 7;
  5227. margin-left: 10%;
  5228. width: 80%;
  5229. height: 45px;
  5230. display: block;
  5231. background: #555d70;
  5232. -webkit-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  5233. -moz-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  5234. box-shadow: inset 0 2px 0 -1px #0a0a0a;
  5235. text-align: center;
  5236. cursor: pointer;
  5237. z-index: 5;
  5238. background: #009cdd;
  5239. bottom: 58px
  5240. }
  5241. #app-menu .signup.guest span {
  5242. position: absolute;
  5243. top: 13px;
  5244. left: 0;
  5245. width: 100%;
  5246. font-size: 14px;
  5247. color: #fff
  5248. }
  5249. #app-menu .alreadyHaveAccount {
  5250. display: none
  5251. }
  5252. #app-menu .alreadyHaveAccount.guest {
  5253. display: block;
  5254. color: #fff;
  5255. margin: 0 auto;
  5256. text-align: center;
  5257. font-size: 13px;
  5258. bottom: 30px;
  5259. margin-left: 5%;
  5260. width: 90%;
  5261. position: absolute
  5262. }
  5263. #app-menu .login {
  5264. display: none
  5265. }
  5266. #app-menu .login.guest {
  5267. display: block
  5268. }
  5269. #app-menu .login.guest a,
  5270. #app-menu .login.guest a:visited {
  5271. font-size: 13px;
  5272. margin: 0 auto;
  5273. display: block;
  5274. cursor: pointer;
  5275. color: #fff;
  5276. text-align: center;
  5277. text-decoration: underline;
  5278. position: absolute;
  5279. bottom: 10px;
  5280. margin-left: 5%;
  5281. width: 90%
  5282. }
  5283. #app-menu .login.guest a:hover {
  5284. color: #30c8fc;
  5285. text-decoration: underline
  5286. }
  5287. #app-menu .list a {
  5288. color: #808691;
  5289. text-decoration: none
  5290. }
  5291. #app-menu .list a:hover {
  5292. color: #eee
  5293. }
  5294. #app-menu .list a:visited {
  5295. color: #808691
  5296. }
  5297. #app-menu.in-room .list .item.community {
  5298. display: block
  5299. }
  5300. #app-menu .list .item .android-badge:hover,
  5301. #app-menu .list .item .ios:hover {
  5302. color: #282c35
  5303. }
  5304. #app-menu .appbadges {
  5305. padding-top: 10px;
  5306. padding-left: 20px
  5307. }
  5308. #app-menu .android-badge {
  5309. width: 131px;
  5310. height: 45px;
  5311. background: url('https://cdn.plug.dj/_/static/images/index/android.240a7c9ad7a4e1412d793a8061500922926f7151.png') no-repeat;
  5312. background-size: 131px 45px
  5313. }
  5314. #app-menu .iphone-badge {
  5315. width: 131px;
  5316. height: 45px;
  5317. margin-top: 4px;
  5318. background: url('https://cdn.plug.dj/_/static/images/index/ios.903d9daf5f8a45ff1e0cc6836e7c77f241b25c60.png') no-repeat;
  5319. background-size: 131px 45px
  5320. }
  5321. .badge-box {
  5322. width: 30px;
  5323. height: 30px;
  5324. border-radius: 6px;
  5325. background: #282c35
  5326. }
  5327. .badge-box.no-badge i {
  5328. position: absolute;
  5329. top: 5px;
  5330. left: 5px;
  5331. width: 16px;
  5332. height: 16px;
  5333. border: 2px solid #444a59;
  5334. border-radius: 50%
  5335. }
  5336. .bdg {
  5337. position: absolute;
  5338. top: 0;
  5339. left: 0;
  5340. width: 30px;
  5341. height: 30px;
  5342. background: url('https://cdn.plug.dj/_/static/images/sheets/badges_small.657f64a56ef35e24bc62d628fb8fbd2ceb316ccb.png')
  5343. }
  5344. .bdg.large {
  5345. width: 70px;
  5346. height: 70px;
  5347. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_big.bbb73788b7e5bd235cb60c4f17b4e3bb07d6d344.png')
  5348. }
  5349. .bdg.s {
  5350. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_s_small.2f53e2c11ece2056df1d9e937060a29bbf983474.png')
  5351. }
  5352. .bdg.s.large {
  5353. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_s_big.21e975c3547c6df01f47aba52ea67ac7fffb1185.png')
  5354. }
  5355. .bdg.g {
  5356. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_g_small.3a9d31b93a3bdeb264020a977040f58ef2b6e313.png')
  5357. }
  5358. .bdg.g.large {
  5359. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_g_big.58d386156aa4256ce3e7dad8a59e2da854aa4b2f.png')
  5360. }
  5361. .bdg.e {
  5362. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_e_small.f02c6a6d691f9c22a883836c0a499b5ce5f3e94a.png')
  5363. }
  5364. .bdg.e.large {
  5365. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_e_big.94e62cc126e8257a9bcd4916b7343ec8c7d64b2f.png')
  5366. }
  5367. .bdg.o {
  5368. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_o_small.c7904fb0d82da47bb23f6bc47c237a096b00a175.png')
  5369. }
  5370. .bdg.o.large {
  5371. background-image: url('https://cdn.plug.dj/_/static/images/sheets/badges_o_big.6191a6a1ef5d58a59b6b6d38cc33f4937784f571.png')
  5372. }
  5373. .bdg-winter01 {
  5374. background-position: 0 0
  5375. }
  5376. .bdg-winter01.large {
  5377. background-position: 0 0
  5378. }
  5379. .bdg-winter02 {
  5380. background-position: -30px 0
  5381. }
  5382. .bdg-winter02.large {
  5383. background-position: -70px 0
  5384. }
  5385. .bdg-winter03 {
  5386. background-position: -60px 0
  5387. }
  5388. .bdg-winter03.large {
  5389. background-position: -140px 0
  5390. }
  5391. .bdg-winter04 {
  5392. background-position: -90px 0
  5393. }
  5394. .bdg-winter04.large {
  5395. background-position: -210px 0
  5396. }
  5397. .bdg-winter05 {
  5398. background-position: -120px 0
  5399. }
  5400. .bdg-winter05.large {
  5401. background-position: -280px 0
  5402. }
  5403. .bdg-winter06 {
  5404. background-position: -150px 0
  5405. }
  5406. .bdg-winter06.large {
  5407. background-position: -350px 0
  5408. }
  5409. .bdg-winter07 {
  5410. background-position: -180px 0
  5411. }
  5412. .bdg-winter07.large {
  5413. background-position: -420px 0
  5414. }
  5415. .bdg-raveb01 {
  5416. background-position: -210px 0
  5417. }
  5418. .bdg-raveb01.large {
  5419. background-position: -490px 0
  5420. }
  5421. .bdg-raveb02 {
  5422. background-position: -240px 0
  5423. }
  5424. .bdg-raveb02.large {
  5425. background-position: -560px 0
  5426. }
  5427. .bdg-raveb03 {
  5428. background-position: -270px 0
  5429. }
  5430. .bdg-raveb03.large {
  5431. background-position: -630px 0
  5432. }
  5433. .bdg-food01 {
  5434. background-position: -300px 0
  5435. }
  5436. .bdg-food01.large {
  5437. background-position: -700px 0
  5438. }
  5439. .bdg-food02 {
  5440. background-position: -330px 0
  5441. }
  5442. .bdg-food02.large {
  5443. background-position: -770px 0
  5444. }
  5445. .bdg-food03 {
  5446. background-position: -360px 0
  5447. }
  5448. .bdg-food03.large {
  5449. background-position: -840px 0
  5450. }
  5451. .bdg-food04 {
  5452. background-position: -390px 0
  5453. }
  5454. .bdg-food04.large {
  5455. background-position: -910px 0
  5456. }
  5457. .bdg-food05 {
  5458. background-position: -420px 0
  5459. }
  5460. .bdg-food05.large {
  5461. background-position: -980px 0
  5462. }
  5463. .bdg-animals01 {
  5464. background-position: 0 -30px
  5465. }
  5466. .bdg-animals01.large {
  5467. background-position: 0 -70px
  5468. }
  5469. .bdg-tiki01 {
  5470. background-position: -30px -30px
  5471. }
  5472. .bdg-tiki01.large {
  5473. background-position: -70px -70px
  5474. }
  5475. .bdg-tiki02 {
  5476. background-position: -60px -30px
  5477. }
  5478. .bdg-tiki02.large {
  5479. background-position: -140px -70px
  5480. }
  5481. .bdg-style01 {
  5482. background-position: -90px -30px
  5483. }
  5484. .bdg-style01.large {
  5485. background-position: -210px -70px
  5486. }
  5487. .bdg-style02 {
  5488. background-position: -120px -30px
  5489. }
  5490. .bdg-style02.large {
  5491. background-position: -280px -70px
  5492. }
  5493. .bdg-isle01 {
  5494. background-position: -150px -30px
  5495. }
  5496. .bdg-isle01.large {
  5497. background-position: -350px -70px
  5498. }
  5499. .bdg-isle02 {
  5500. background-position: -180px -30px
  5501. }
  5502. .bdg-isle02.large {
  5503. background-position: -420px -70px
  5504. }
  5505. .bdg-isle03 {
  5506. background-position: -210px -30px
  5507. }
  5508. .bdg-isle03.large {
  5509. background-position: -490px -70px
  5510. }
  5511. .bdg-isle04 {
  5512. background-position: -240px -30px
  5513. }
  5514. .bdg-isle04.large {
  5515. background-position: -560px -70px
  5516. }
  5517. .bdg-isle05 {
  5518. background-position: -270px -30px
  5519. }
  5520. .bdg-isle05.large {
  5521. background-position: -630px -70px
  5522. }
  5523. .bdg-isle06 {
  5524. background-position: -300px -30px
  5525. }
  5526. .bdg-isle06.large {
  5527. background-position: -700px -70px
  5528. }
  5529. .bdg-isle07 {
  5530. background-position: -330px -30px
  5531. }
  5532. .bdg-isle07.large {
  5533. background-position: -770px -70px
  5534. }
  5535. .bdg-isle08 {
  5536. background-position: -360px -30px
  5537. }
  5538. .bdg-isle08.large {
  5539. background-position: -840px -70px
  5540. }
  5541. .bdg-isle09 {
  5542. background-position: -390px -30px
  5543. }
  5544. .bdg-isle09.large {
  5545. background-position: -910px -70px
  5546. }
  5547. .bdg-isle10 {
  5548. background-position: -420px -30px
  5549. }
  5550. .bdg-isle10.large {
  5551. background-position: -980px -70px
  5552. }
  5553. .bdg-seab01 {
  5554. background-position: 0 -60px
  5555. }
  5556. .bdg-seab01.large {
  5557. background-position: 0 -140px
  5558. }
  5559. .bdg-seab02 {
  5560. background-position: -30px -60px
  5561. }
  5562. .bdg-seab02.large {
  5563. background-position: -70px -140px
  5564. }
  5565. .bdg-seab03 {
  5566. background-position: -60px -60px
  5567. }
  5568. .bdg-seab03.large {
  5569. background-position: -140px -140px
  5570. }
  5571. .bdg-seab04 {
  5572. background-position: -90px -60px
  5573. }
  5574. .bdg-seab04.large {
  5575. background-position: -210px -140px
  5576. }
  5577. .bdg-seab05 {
  5578. background-position: -120px -60px
  5579. }
  5580. .bdg-seab05.large {
  5581. background-position: -280px -140px
  5582. }
  5583. .bdg-seab06 {
  5584. background-position: -150px -60px
  5585. }
  5586. .bdg-seab06.large {
  5587. background-position: -350px -140px
  5588. }
  5589. .bdg-seab07 {
  5590. background-position: -180px -60px
  5591. }
  5592. .bdg-seab07.large {
  5593. background-position: -420px -140px
  5594. }
  5595. .bdg-seab08 {
  5596. background-position: -210px -60px
  5597. }
  5598. .bdg-seab08.large {
  5599. background-position: -490px -140px
  5600. }
  5601. .bdg-seab09 {
  5602. background-position: -240px -60px
  5603. }
  5604. .bdg-seab09.large {
  5605. background-position: -560px -140px
  5606. }
  5607. .bdg-seab10 {
  5608. background-position: -270px -60px
  5609. }
  5610. .bdg-seab10.large {
  5611. background-position: -630px -140px
  5612. }
  5613. .bdg-dinerb01 {
  5614. background-position: -300px -60px
  5615. }
  5616. .bdg-dinerb01.large {
  5617. background-position: -700px -140px
  5618. }
  5619. .bdg-dinerb02 {
  5620. background-position: -330px -60px
  5621. }
  5622. .bdg-dinerb02.large {
  5623. background-position: -770px -140px
  5624. }
  5625. .bdg-dinerb03 {
  5626. background-position: -360px -60px
  5627. }
  5628. .bdg-dinerb03.large {
  5629. background-position: -840px -140px
  5630. }
  5631. .bdg-dinerb04 {
  5632. background-position: -390px -60px
  5633. }
  5634. .bdg-dinerb04.large {
  5635. background-position: -910px -140px
  5636. }
  5637. .bdg-dinerb05 {
  5638. background-position: -420px -60px
  5639. }
  5640. .bdg-dinerb05.large {
  5641. background-position: -980px -140px
  5642. }
  5643. .bdg-countryb01 {
  5644. background-position: 0 -90px
  5645. }
  5646. .bdg-countryb01.large {
  5647. background-position: 0 -210px
  5648. }
  5649. .bdg-robotb01 {
  5650. background-position: -30px -90px
  5651. }
  5652. .bdg-robotb01.large {
  5653. background-position: -70px -210px
  5654. }
  5655. .bdg-zoob01 {
  5656. background-position: -60px -90px
  5657. }
  5658. .bdg-zoob01.large {
  5659. background-position: -140px -210px
  5660. }
  5661. .bdg-hiphopb01 {
  5662. background-position: -90px -90px
  5663. }
  5664. .bdg-hiphopb01.large {
  5665. background-position: -210px -210px
  5666. }
  5667. .bdg-80sb01 {
  5668. background-position: -120px -90px
  5669. }
  5670. .bdg-80sb01.large {
  5671. background-position: -280px -210px
  5672. }
  5673. .bdg-warriorb01 {
  5674. background-position: -150px -90px
  5675. }
  5676. .bdg-warriorb01.large {
  5677. background-position: -350px -210px
  5678. }
  5679. .bdg-dinerb06 {
  5680. background-position: -180px -90px
  5681. }
  5682. .bdg-dinerb06.large {
  5683. background-position: -420px -210px
  5684. }
  5685. .bdg-beachb01 {
  5686. background-position: -210px -90px
  5687. }
  5688. .bdg-beachb01.large {
  5689. background-position: -490px -210px
  5690. }
  5691. .bdg-beachb02 {
  5692. background-position: -240px -90px
  5693. }
  5694. .bdg-beachb02.large {
  5695. background-position: -560px -210px
  5696. }
  5697. .bdg-beachb03 {
  5698. background-position: -270px -90px
  5699. }
  5700. .bdg-beachb03.large {
  5701. background-position: -630px -210px
  5702. }
  5703. .bdg-beachb04 {
  5704. background-position: -300px -90px
  5705. }
  5706. .bdg-beachb04.large {
  5707. background-position: -700px -210px
  5708. }
  5709. .bdg-beachb05 {
  5710. background-position: -330px -90px
  5711. }
  5712. .bdg-beachb05.large {
  5713. background-position: -770px -210px
  5714. }
  5715. .bdg-nycb01 {
  5716. background-position: -360px -90px
  5717. }
  5718. .bdg-nycb01.large {
  5719. background-position: -840px -210px
  5720. }
  5721. .bdg-nycb02 {
  5722. background-position: -390px -90px
  5723. }
  5724. .bdg-nycb02.large {
  5725. background-position: -910px -210px
  5726. }
  5727. .bdg-nycb03 {
  5728. background-position: -420px -90px
  5729. }
  5730. .bdg-nycb03.large {
  5731. background-position: -980px -210px
  5732. }
  5733. .bdg-nycb04 {
  5734. background-position: 0 -120px
  5735. }
  5736. .bdg-nycb04.large {
  5737. background-position: 0 -280px
  5738. }
  5739. .bdg-nycb05 {
  5740. background-position: -30px -120px
  5741. }
  5742. .bdg-nycb05.large {
  5743. background-position: -70px -280px
  5744. }
  5745. .bdg-isle-e01 {
  5746. background-position: 0 0
  5747. }
  5748. .bdg-isle-e01.large {
  5749. background-position: 0 0
  5750. }
  5751. .bdg-isle-e02 {
  5752. background-position: -30px 0
  5753. }
  5754. .bdg-isle-e02.large {
  5755. background-position: -70px 0
  5756. }
  5757. .bdg-seab-e01 {
  5758. background-position: -60px 0
  5759. }
  5760. .bdg-seab-e01.large {
  5761. background-position: -140px 0
  5762. }
  5763. .bdg-seab-e02 {
  5764. background-position: -90px 0
  5765. }
  5766. .bdg-seab-e02.large {
  5767. background-position: -210px 0
  5768. }
  5769. .bdg-seab-e03 {
  5770. background-position: -120px 0
  5771. }
  5772. .bdg-seab-e03.large {
  5773. background-position: -280px 0
  5774. }
  5775. .bdg-dinerb-e01 {
  5776. background-position: -150px 0
  5777. }
  5778. .bdg-dinerb-e01.large {
  5779. background-position: -350px 0
  5780. }
  5781. .bdg-dinerb-e02 {
  5782. background-position: -180px 0
  5783. }
  5784. .bdg-dinerb-e02.large {
  5785. background-position: -420px 0
  5786. }
  5787. .bdg-countryb-e01 {
  5788. background-position: -210px 0
  5789. }
  5790. .bdg-countryb-e01.large {
  5791. background-position: -490px 0
  5792. }
  5793. .bdg-countryb-e02 {
  5794. background-position: -240px 0
  5795. }
  5796. .bdg-countryb-e02.large {
  5797. background-position: -560px 0
  5798. }
  5799. .bdg-robotb-e01 {
  5800. background-position: -270px 0
  5801. }
  5802. .bdg-robotb-e01.large {
  5803. background-position: -630px 0
  5804. }
  5805. .bdg-robotb-e02 {
  5806. background-position: -300px 0
  5807. }
  5808. .bdg-robotb-e02.large {
  5809. background-position: -700px 0
  5810. }
  5811. .bdg-zoob-e01 {
  5812. background-position: -330px 0
  5813. }
  5814. .bdg-zoob-e01.large {
  5815. background-position: -770px 0
  5816. }
  5817. .bdg-zoob-e02 {
  5818. background-position: -360px 0
  5819. }
  5820. .bdg-zoob-e02.large {
  5821. background-position: -840px 0
  5822. }
  5823. .bdg-raveb-e01 {
  5824. background-position: -390px 0
  5825. }
  5826. .bdg-raveb-e01.large {
  5827. background-position: -910px 0
  5828. }
  5829. .bdg-raveb-e02 {
  5830. background-position: -420px 0
  5831. }
  5832. .bdg-raveb-e02.large {
  5833. background-position: -980px 0
  5834. }
  5835. .bdg-hiphopb-e01 {
  5836. background-position: 0 -30px
  5837. }
  5838. .bdg-hiphopb-e01.large {
  5839. background-position: 0 -70px
  5840. }
  5841. .bdg-hiphopb-e02 {
  5842. background-position: -30px -30px
  5843. }
  5844. .bdg-hiphopb-e02.large {
  5845. background-position: -70px -70px
  5846. }
  5847. .bdg-80sb-e01 {
  5848. background-position: -60px -30px
  5849. }
  5850. .bdg-80sb-e01.large {
  5851. background-position: -140px -70px
  5852. }
  5853. .bdg-80sb-e02 {
  5854. background-position: -90px -30px
  5855. }
  5856. .bdg-80sb-e02.large {
  5857. background-position: -210px -70px
  5858. }
  5859. .bdg-warriorb-e01 {
  5860. background-position: -120px -30px
  5861. }
  5862. .bdg-warriorb-e01.large {
  5863. background-position: -280px -70px
  5864. }
  5865. .bdg-warriorb-e02 {
  5866. background-position: -150px -30px
  5867. }
  5868. .bdg-warriorb-e02.large {
  5869. background-position: -350px -70px
  5870. }
  5871. .bdg-beachb-e01 {
  5872. background-position: -180px -30px
  5873. }
  5874. .bdg-beachb-e01.large {
  5875. background-position: -420px -70px
  5876. }
  5877. .bdg-beachb-e02 {
  5878. background-position: -210px -30px
  5879. }
  5880. .bdg-beachb-e02.large {
  5881. background-position: -490px -70px
  5882. }
  5883. .bdg-nycb-e01 {
  5884. background-position: -240px -30px
  5885. }
  5886. .bdg-nycb-e01.large {
  5887. background-position: -560px -70px
  5888. }
  5889. .bdg-nycb-e02 {
  5890. background-position: -270px -30px
  5891. }
  5892. .bdg-nycb-e02.large {
  5893. background-position: -630px -70px
  5894. }
  5895. .bdg-bt-g {
  5896. background-position: 0 0
  5897. }
  5898. .bdg-bt-g.large {
  5899. background-position: 0 0
  5900. }
  5901. .bdg-ea-g {
  5902. background-position: -30px 0
  5903. }
  5904. .bdg-ea-g.large {
  5905. background-position: -70px 0
  5906. }
  5907. .bdg-og-g {
  5908. background-position: -60px 0
  5909. }
  5910. .bdg-og-g.large {
  5911. background-position: -140px 0
  5912. }
  5913. .bdg-ss-g {
  5914. background-position: -90px 0
  5915. }
  5916. .bdg-ss-g.large {
  5917. background-position: -210px 0
  5918. }
  5919. .bdg-plot-g {
  5920. background-position: -120px 0
  5921. }
  5922. .bdg-plot-g.large {
  5923. background-position: -280px 0
  5924. }
  5925. .bdg-ba-g {
  5926. background-position: -150px 0
  5927. }
  5928. .bdg-ba-g.large {
  5929. background-position: -350px 0
  5930. }
  5931. .bdg-admin-g {
  5932. background-position: -180px 0
  5933. }
  5934. .bdg-admin-g.large {
  5935. background-position: -420px 0
  5936. }
  5937. .bdg-2015bday-g {
  5938. background-position: -210px 0
  5939. }
  5940. .bdg-2015bday-g.large {
  5941. background-position: -490px 0
  5942. }
  5943. .bdg-dragon-g01 {
  5944. background-position: -240px 0
  5945. }
  5946. .bdg-dragon-g01.large {
  5947. background-position: -560px 0
  5948. }
  5949. .bdg-dragon-g02 {
  5950. background-position: -270px 0
  5951. }
  5952. .bdg-dragon-g02.large {
  5953. background-position: -630px 0
  5954. }
  5955. .bdg-subyearly-g {
  5956. background-position: -300px 0
  5957. }
  5958. .bdg-subyearly-g.large {
  5959. background-position: -700px 0
  5960. }
  5961. .bdg-s20-g {
  5962. background-position: -330px 0
  5963. }
  5964. .bdg-s20-g.large {
  5965. background-position: -770px 0
  5966. }
  5967. .bdg-s50-g {
  5968. background-position: -360px 0
  5969. }
  5970. .bdg-s50-g.large {
  5971. background-position: -840px 0
  5972. }
  5973. .bdg-s100-g {
  5974. background-position: -390px 0
  5975. }
  5976. .bdg-s100-g.large {
  5977. background-position: -910px 0
  5978. }
  5979. .bdg-s200-g {
  5980. background-position: -420px 0
  5981. }
  5982. .bdg-s200-g.large {
  5983. background-position: -980px 0
  5984. }
  5985. .bdg-2014wbb-g {
  5986. background-position: 0 -30px
  5987. }
  5988. .bdg-2014wbb-g.large {
  5989. background-position: 0 -70px
  5990. }
  5991. .bdg-raveset-g {
  5992. background-position: -30px -30px
  5993. }
  5994. .bdg-raveset-g.large {
  5995. background-position: -70px -70px
  5996. }
  5997. .bdg-hiphopset-g {
  5998. background-position: -60px -30px
  5999. }
  6000. .bdg-hiphopset-g.large {
  6001. background-position: -140px -70px
  6002. }
  6003. .bdg-countryset-g {
  6004. background-position: -90px -30px
  6005. }
  6006. .bdg-countryset-g.large {
  6007. background-position: -210px -70px
  6008. }
  6009. .bdg-rockset-g {
  6010. background-position: -120px -30px
  6011. }
  6012. .bdg-rockset-g.large {
  6013. background-position: -280px -70px
  6014. }
  6015. .bdg-80sset-g {
  6016. background-position: -150px -30px
  6017. }
  6018. .bdg-80sset-g.large {
  6019. background-position: -350px -70px
  6020. }
  6021. .bdg-robotset-g {
  6022. background-position: -180px -30px
  6023. }
  6024. .bdg-robotset-g.large {
  6025. background-position: -420px -70px
  6026. }
  6027. .bdg-zooset-g {
  6028. background-position: -210px -30px
  6029. }
  6030. .bdg-zooset-g.large {
  6031. background-position: -490px -70px
  6032. }
  6033. .bdg-2014hwset-g {
  6034. background-position: -240px -30px
  6035. }
  6036. .bdg-2014hwset-g.large {
  6037. background-position: -560px -70px
  6038. }
  6039. .bdg-warriorset-g {
  6040. background-position: -270px -30px
  6041. }
  6042. .bdg-warriorset-g.large {
  6043. background-position: -630px -70px
  6044. }
  6045. .bdg-islandset-g {
  6046. background-position: -300px -30px
  6047. }
  6048. .bdg-islandset-g.large {
  6049. background-position: -700px -70px
  6050. }
  6051. .bdg-seaset-g {
  6052. background-position: -330px -30px
  6053. }
  6054. .bdg-seaset-g.large {
  6055. background-position: -770px -70px
  6056. }
  6057. .bdg-dinerset-g {
  6058. background-position: -360px -30px
  6059. }
  6060. .bdg-dinerset-g.large {
  6061. background-position: -840px -70px
  6062. }
  6063. .bdg-beachset-g {
  6064. background-position: -390px -30px
  6065. }
  6066. .bdg-beachset-g.large {
  6067. background-position: -910px -70px
  6068. }
  6069. .bdg-nycset-g {
  6070. background-position: -420px -30px
  6071. }
  6072. .bdg-nycset-g.large {
  6073. background-position: -980px -70px
  6074. }
  6075. .bdg-2017bday-g {
  6076. background-position: 0 -60px
  6077. }
  6078. .bdg-2017bday-g.large {
  6079. background-position: 0 -140px
  6080. }
  6081. .bdg-winter-s01 {
  6082. background-position: 0 0
  6083. }
  6084. .bdg-winter-s01.large {
  6085. background-position: 0 0
  6086. }
  6087. .bdg-winter-s02 {
  6088. background-position: -30px 0
  6089. }
  6090. .bdg-winter-s02.large {
  6091. background-position: -70px 0
  6092. }
  6093. .bdg-winter-s03 {
  6094. background-position: -60px 0
  6095. }
  6096. .bdg-winter-s03.large {
  6097. background-position: -140px 0
  6098. }
  6099. .bdg-raveb-s01 {
  6100. background-position: -90px 0
  6101. }
  6102. .bdg-raveb-s01.large {
  6103. background-position: -210px 0
  6104. }
  6105. .bdg-raveb-s02 {
  6106. background-position: -120px 0
  6107. }
  6108. .bdg-raveb-s02.large {
  6109. background-position: -280px 0
  6110. }
  6111. .bdg-raveb-s03 {
  6112. background-position: -150px 0
  6113. }
  6114. .bdg-raveb-s03.large {
  6115. background-position: -350px 0
  6116. }
  6117. .bdg-raveb-s04 {
  6118. background-position: -180px 0
  6119. }
  6120. .bdg-raveb-s04.large {
  6121. background-position: -420px 0
  6122. }
  6123. .bdg-food-s01 {
  6124. background-position: -210px 0
  6125. }
  6126. .bdg-food-s01.large {
  6127. background-position: -490px 0
  6128. }
  6129. .bdg-food-s02 {
  6130. background-position: -240px 0
  6131. }
  6132. .bdg-food-s02.large {
  6133. background-position: -560px 0
  6134. }
  6135. .bdg-food-s03 {
  6136. background-position: -270px 0
  6137. }
  6138. .bdg-food-s03.large {
  6139. background-position: -630px 0
  6140. }
  6141. .bdg-animals-s01 {
  6142. background-position: -300px 0
  6143. }
  6144. .bdg-animals-s01.large {
  6145. background-position: -700px 0
  6146. }
  6147. .bdg-animals-s02 {
  6148. background-position: -330px 0
  6149. }
  6150. .bdg-animals-s02.large {
  6151. background-position: -770px 0
  6152. }
  6153. .bdg-animals-s03 {
  6154. background-position: -360px 0
  6155. }
  6156. .bdg-animals-s03.large {
  6157. background-position: -840px 0
  6158. }
  6159. .bdg-tiki-s01 {
  6160. background-position: -390px 0
  6161. }
  6162. .bdg-tiki-s01.large {
  6163. background-position: -910px 0
  6164. }
  6165. .bdg-tiki-s02 {
  6166. background-position: -420px 0
  6167. }
  6168. .bdg-tiki-s02.large {
  6169. background-position: -980px 0
  6170. }
  6171. .bdg-style-s01 {
  6172. background-position: 0 -30px
  6173. }
  6174. .bdg-style-s01.large {
  6175. background-position: 0 -70px
  6176. }
  6177. .bdg-style-s02 {
  6178. background-position: -30px -30px
  6179. }
  6180. .bdg-style-s02.large {
  6181. background-position: -70px -70px
  6182. }
  6183. .bdg-style-s03 {
  6184. background-position: -60px -30px
  6185. }
  6186. .bdg-style-s03.large {
  6187. background-position: -140px -70px
  6188. }
  6189. .bdg-style-s04 {
  6190. background-position: -90px -30px
  6191. }
  6192. .bdg-style-s04.large {
  6193. background-position: -210px -70px
  6194. }
  6195. .bdg-style-s05 {
  6196. background-position: -120px -30px
  6197. }
  6198. .bdg-style-s05.large {
  6199. background-position: -280px -70px
  6200. }
  6201. .bdg-style-s06 {
  6202. background-position: -150px -30px
  6203. }
  6204. .bdg-style-s06.large {
  6205. background-position: -350px -70px
  6206. }
  6207. .bdg-food-s04 {
  6208. background-position: -180px -30px
  6209. }
  6210. .bdg-food-s04.large {
  6211. background-position: -420px -70px
  6212. }
  6213. .bdg-isle-s01 {
  6214. background-position: -210px -30px
  6215. }
  6216. .bdg-isle-s01.large {
  6217. background-position: -490px -70px
  6218. }
  6219. .bdg-isle-s02 {
  6220. background-position: -240px -30px
  6221. }
  6222. .bdg-isle-s02.large {
  6223. background-position: -560px -70px
  6224. }
  6225. .bdg-isle-s03 {
  6226. background-position: -270px -30px
  6227. }
  6228. .bdg-isle-s03.large {
  6229. background-position: -630px -70px
  6230. }
  6231. .bdg-isle-s04 {
  6232. background-position: -300px -30px
  6233. }
  6234. .bdg-isle-s04.large {
  6235. background-position: -700px -70px
  6236. }
  6237. .bdg-isle-s05 {
  6238. background-position: -330px -30px
  6239. }
  6240. .bdg-isle-s05.large {
  6241. background-position: -770px -70px
  6242. }
  6243. .bdg-isle-s06 {
  6244. background-position: -360px -30px
  6245. }
  6246. .bdg-isle-s06.large {
  6247. background-position: -840px -70px
  6248. }
  6249. .bdg-isle-s07 {
  6250. background-position: -390px -30px
  6251. }
  6252. .bdg-isle-s07.large {
  6253. background-position: -910px -70px
  6254. }
  6255. .bdg-isle-s08 {
  6256. background-position: -420px -30px
  6257. }
  6258. .bdg-isle-s08.large {
  6259. background-position: -980px -70px
  6260. }
  6261. .bdg-isle-s09 {
  6262. background-position: 0 -60px
  6263. }
  6264. .bdg-isle-s09.large {
  6265. background-position: 0 -140px
  6266. }
  6267. .bdg-seab-s01 {
  6268. background-position: -30px -60px
  6269. }
  6270. .bdg-seab-s01.large {
  6271. background-position: -70px -140px
  6272. }
  6273. .bdg-seab-s02 {
  6274. background-position: -60px -60px
  6275. }
  6276. .bdg-seab-s02.large {
  6277. background-position: -140px -140px
  6278. }
  6279. .bdg-seab-s03 {
  6280. background-position: -90px -60px
  6281. }
  6282. .bdg-seab-s03.large {
  6283. background-position: -210px -140px
  6284. }
  6285. .bdg-seab-s04 {
  6286. background-position: -120px -60px
  6287. }
  6288. .bdg-seab-s04.large {
  6289. background-position: -280px -140px
  6290. }
  6291. .bdg-seab-s05 {
  6292. background-position: -150px -60px
  6293. }
  6294. .bdg-seab-s05.large {
  6295. background-position: -350px -140px
  6296. }
  6297. .bdg-seab-s06 {
  6298. background-position: -180px -60px
  6299. }
  6300. .bdg-seab-s06.large {
  6301. background-position: -420px -140px
  6302. }
  6303. .bdg-dinerb-s01 {
  6304. background-position: -210px -60px
  6305. }
  6306. .bdg-dinerb-s01.large {
  6307. background-position: -490px -140px
  6308. }
  6309. .bdg-dinerb-s02 {
  6310. background-position: -240px -60px
  6311. }
  6312. .bdg-dinerb-s02.large {
  6313. background-position: -560px -140px
  6314. }
  6315. .bdg-dinerb-s03 {
  6316. background-position: -270px -60px
  6317. }
  6318. .bdg-dinerb-s03.large {
  6319. background-position: -630px -140px
  6320. }
  6321. .bdg-dinerb-s04 {
  6322. background-position: -300px -60px
  6323. }
  6324. .bdg-dinerb-s04.large {
  6325. background-position: -700px -140px
  6326. }
  6327. .bdg-countryb-s01 {
  6328. background-position: -330px -60px
  6329. }
  6330. .bdg-countryb-s01.large {
  6331. background-position: -770px -140px
  6332. }
  6333. .bdg-robotb-s01 {
  6334. background-position: -360px -60px
  6335. }
  6336. .bdg-robotb-s01.large {
  6337. background-position: -840px -140px
  6338. }
  6339. .bdg-zoob-s01 {
  6340. background-position: -390px -60px
  6341. }
  6342. .bdg-zoob-s01.large {
  6343. background-position: -910px -140px
  6344. }
  6345. .bdg-hiphopb-s01 {
  6346. background-position: -420px -60px
  6347. }
  6348. .bdg-hiphopb-s01.large {
  6349. background-position: -980px -140px
  6350. }
  6351. .bdg-80sb-s01 {
  6352. background-position: 0 -90px
  6353. }
  6354. .bdg-80sb-s01.large {
  6355. background-position: 0 -210px
  6356. }
  6357. .bdg-warriorb-s01 {
  6358. background-position: -30px -90px
  6359. }
  6360. .bdg-warriorb-s01.large {
  6361. background-position: -70px -210px
  6362. }
  6363. .bdg-dinerb-s05 {
  6364. background-position: -60px -90px
  6365. }
  6366. .bdg-dinerb-s05.large {
  6367. background-position: -140px -210px
  6368. }
  6369. .bdg-beachb-s01 {
  6370. background-position: -90px -90px
  6371. }
  6372. .bdg-beachb-s01.large {
  6373. background-position: -210px -210px
  6374. }
  6375. .bdg-beachb-s02 {
  6376. background-position: -120px -90px
  6377. }
  6378. .bdg-beachb-s02.large {
  6379. background-position: -280px -210px
  6380. }
  6381. .bdg-beachb-s03 {
  6382. background-position: -150px -90px
  6383. }
  6384. .bdg-beachb-s03.large {
  6385. background-position: -350px -210px
  6386. }
  6387. .bdg-beachb-s04 {
  6388. background-position: -180px -90px
  6389. }
  6390. .bdg-beachb-s04.large {
  6391. background-position: -420px -210px
  6392. }
  6393. .bdg-beachb-s05 {
  6394. background-position: -210px -90px
  6395. }
  6396. .bdg-beachb-s05.large {
  6397. background-position: -490px -210px
  6398. }
  6399. .bdg-nycb-s01 {
  6400. background-position: -240px -90px
  6401. }
  6402. .bdg-nycb-s01.large {
  6403. background-position: -560px -210px
  6404. }
  6405. .bdg-nycb-s02 {
  6406. background-position: -270px -90px
  6407. }
  6408. .bdg-nycb-s02.large {
  6409. background-position: -630px -210px
  6410. }
  6411. .bdg-nycb-s03 {
  6412. background-position: -300px -90px
  6413. }
  6414. .bdg-nycb-s03.large {
  6415. background-position: -700px -210px
  6416. }
  6417. .bdg-nycb-s04 {
  6418. background-position: -330px -90px
  6419. }
  6420. .bdg-nycb-s04.large {
  6421. background-position: -770px -210px
  6422. }
  6423. .bdg-nycb-s05 {
  6424. background-position: -360px -90px
  6425. }
  6426. .bdg-nycb-s05.large {
  6427. background-position: -840px -210px
  6428. }
  6429. .bdg-nycb-s06 {
  6430. background-position: -390px -90px
  6431. }
  6432. .bdg-nycb-s06.large {
  6433. background-position: -910px -210px
  6434. }
  6435. .bdg-animal-o01 {
  6436. background-position: 0 0
  6437. }
  6438. .bdg-animal-o01.large {
  6439. background-position: 0 0
  6440. }
  6441. .bdg-animal-o02 {
  6442. background-position: -30px 0
  6443. }
  6444. .bdg-animal-o02.large {
  6445. background-position: -70px 0
  6446. }
  6447. .bdg-animal-o03 {
  6448. background-position: -60px 0
  6449. }
  6450. .bdg-animal-o03.large {
  6451. background-position: -140px 0
  6452. }
  6453. .bdg-animal-o04 {
  6454. background-position: -90px 0
  6455. }
  6456. .bdg-animal-o04.large {
  6457. background-position: -210px 0
  6458. }
  6459. .bdg-animal-o05 {
  6460. background-position: -120px 0
  6461. }
  6462. .bdg-animal-o05.large {
  6463. background-position: -280px 0
  6464. }
  6465. .bdg-animal-o06 {
  6466. background-position: -150px 0
  6467. }
  6468. .bdg-animal-o06.large {
  6469. background-position: -350px 0
  6470. }
  6471. .bdg-animal-o07 {
  6472. background-position: -180px 0
  6473. }
  6474. .bdg-animal-o07.large {
  6475. background-position: -420px 0
  6476. }
  6477. .bdg-animal-o08 {
  6478. background-position: -210px 0
  6479. }
  6480. .bdg-animal-o08.large {
  6481. background-position: -490px 0
  6482. }
  6483. .bdg-animal-o09 {
  6484. background-position: -240px 0
  6485. }
  6486. .bdg-animal-o09.large {
  6487. background-position: -560px 0
  6488. }
  6489. .bdg-animal-o10 {
  6490. background-position: -270px 0
  6491. }
  6492. .bdg-animal-o10.large {
  6493. background-position: -630px 0
  6494. }
  6495. .bdg-animal-o11 {
  6496. background-position: -300px 0
  6497. }
  6498. .bdg-animal-o11.large {
  6499. background-position: -700px 0
  6500. }
  6501. .bdg-animal-o12 {
  6502. background-position: -330px 0
  6503. }
  6504. .bdg-animal-o12.large {
  6505. background-position: -770px 0
  6506. }
  6507. .bdg-animal-o13 {
  6508. background-position: -360px 0
  6509. }
  6510. .bdg-animal-o13.large {
  6511. background-position: -840px 0
  6512. }
  6513. .bdg-animal-o14 {
  6514. background-position: -390px 0
  6515. }
  6516. .bdg-animal-o14.large {
  6517. background-position: -910px 0
  6518. }
  6519. .bdg-bud-o01 {
  6520. background-position: -420px 0
  6521. }
  6522. .bdg-bud-o01.large {
  6523. background-position: -980px 0
  6524. }
  6525. .bdg-bud-o02 {
  6526. background-position: 0 -30px
  6527. }
  6528. .bdg-bud-o02.large {
  6529. background-position: 0 -70px
  6530. }
  6531. .bdg-bud-o03 {
  6532. background-position: -30px -30px
  6533. }
  6534. .bdg-bud-o03.large {
  6535. background-position: -70px -70px
  6536. }
  6537. .bdg-lucha-o01 {
  6538. background-position: -60px -30px
  6539. }
  6540. .bdg-lucha-o01.large {
  6541. background-position: -140px -70px
  6542. }
  6543. .bdg-lucha-o02 {
  6544. background-position: -90px -30px
  6545. }
  6546. .bdg-lucha-o02.large {
  6547. background-position: -210px -70px
  6548. }
  6549. .bdg-lucha-o03 {
  6550. background-position: -120px -30px
  6551. }
  6552. .bdg-lucha-o03.large {
  6553. background-position: -280px -70px
  6554. }
  6555. .bdg-lucha-o04 {
  6556. background-position: -150px -30px
  6557. }
  6558. .bdg-lucha-o04.large {
  6559. background-position: -350px -70px
  6560. }
  6561. .bdg-lucha-o05 {
  6562. background-position: -180px -30px
  6563. }
  6564. .bdg-lucha-o05.large {
  6565. background-position: -420px -70px
  6566. }
  6567. .bdg-monster-o01 {
  6568. background-position: -210px -30px
  6569. }
  6570. .bdg-monster-o01.large {
  6571. background-position: -490px -70px
  6572. }
  6573. .bdg-monster-o02 {
  6574. background-position: -240px -30px
  6575. }
  6576. .bdg-monster-o02.large {
  6577. background-position: -560px -70px
  6578. }
  6579. .bdg-monster-o03 {
  6580. background-position: -270px -30px
  6581. }
  6582. .bdg-monster-o03.large {
  6583. background-position: -630px -70px
  6584. }
  6585. .bdg-monster-o04 {
  6586. background-position: -300px -30px
  6587. }
  6588. .bdg-monster-o04.large {
  6589. background-position: -700px -70px
  6590. }
  6591. .bdg-monster-o05 {
  6592. background-position: -330px -30px
  6593. }
  6594. .bdg-monster-o05.large {
  6595. background-position: -770px -70px
  6596. }
  6597. .bdg-space-o01 {
  6598. background-position: -360px -30px
  6599. }
  6600. .bdg-space-o01.large {
  6601. background-position: -840px -70px
  6602. }
  6603. .bdg-space-o02 {
  6604. background-position: -390px -30px
  6605. }
  6606. .bdg-space-o02.large {
  6607. background-position: -910px -70px
  6608. }
  6609. .bdg-space-o03 {
  6610. background-position: -420px -30px
  6611. }
  6612. .bdg-space-o03.large {
  6613. background-position: -980px -70px
  6614. }
  6615. .bdg-space-o04 {
  6616. background-position: 0 -60px
  6617. }
  6618. .bdg-space-o04.large {
  6619. background-position: 0 -140px
  6620. }
  6621. .bdg-space-o05 {
  6622. background-position: -30px -60px
  6623. }
  6624. .bdg-space-o05.large {
  6625. background-position: -70px -140px
  6626. }
  6627. .bdg-admin-o01 {
  6628. background-position: -60px -60px
  6629. }
  6630. .bdg-admin-o01.large {
  6631. background-position: -140px -140px
  6632. }
  6633. .bdg-warrior-o01 {
  6634. background-position: -90px -60px
  6635. }
  6636. .bdg-warrior-o01.large {
  6637. background-position: -210px -140px
  6638. }
  6639. .bdg-warrior-o02 {
  6640. background-position: -120px -60px
  6641. }
  6642. .bdg-warrior-o02.large {
  6643. background-position: -280px -140px
  6644. }
  6645. .bdg-warrior-o03 {
  6646. background-position: -150px -60px
  6647. }
  6648. .bdg-warrior-o03.large {
  6649. background-position: -350px -140px
  6650. }
  6651. .bdg.e.bdg-beachb-e01 {
  6652. background: url('https://cdn.plug.dj/_/static/images/badges/beachb-e01.d705c09ed5b0f78d4e69534ad5f0fec570db2bb6.gif') 0 0 no-repeat;
  6653. border-radius: 6px
  6654. }
  6655. .bdg.e.bdg-beachb-e01.large {
  6656. background: url('https://cdn.plug.dj/_/static/images/badges/beachb-e01_big.36dda7682e4c649e60d50ca8b37bf617f23188ca.gif') 0 0 no-repeat;
  6657. border-radius: 16px
  6658. }
  6659. .bdg.e.bdg-beachb-e02 {
  6660. background: url('https://cdn.plug.dj/_/static/images/badges/beachb-e02.df2c34cbbeba511a9930b90fc2d20ebe168de0d9.gif') 0 0 no-repeat;
  6661. border-radius: 6px
  6662. }
  6663. .bdg.e.bdg-beachb-e02.large {
  6664. background: url('https://cdn.plug.dj/_/static/images/badges/beachb-e02_big.be07f69dfbd048b8d2a4990b288e0c94a54c14e9.gif') 0 0 no-repeat;
  6665. border-radius: 16px
  6666. }
  6667. .bdg.e.bdg-nycb-e01 {
  6668. background: url('https://cdn.plug.dj/_/static/images/badges/nycb-e01.428d2ea117f05e9b616b248be2f6e183e6973f76.gif') 0 0 no-repeat;
  6669. border-radius: 6px
  6670. }
  6671. .bdg.e.bdg-nycb-e01.large {
  6672. background: url('https://cdn.plug.dj/_/static/images/badges/nycb-e01_big.61b8367ef3a16a14335145d950bd5df13a159637.gif') 0 0 no-repeat;
  6673. border-radius: 16px
  6674. }
  6675. .bdg.e.bdg-nycb-e02 {
  6676. background: url('https://cdn.plug.dj/_/static/images/badges/nycb-e02.7f3cbd744eaf20af40d1ffded5350d3a6cb72ea9.gif') 0 0 no-repeat;
  6677. border-radius: 6px
  6678. }
  6679. .bdg.e.bdg-nycb-e02.large {
  6680. background: url('https://cdn.plug.dj/_/static/images/badges/nycb-e02_big.7958bc6cde90621fad8384ed96df83aa75e9491f.gif') 0 0 no-repeat;
  6681. border-radius: 16px
  6682. }
  6683. #chat {
  6684. position: absolute;
  6685. top: 0;
  6686. left: 0;
  6687. z-index: 2;
  6688. width: 100%;
  6689. height: 100%
  6690. }
  6691. #chat-header {
  6692. position: absolute;
  6693. top: 0;
  6694. left: 0;
  6695. width: 100%;
  6696. height: 46px;
  6697. border-bottom: #1c1f25 1px solid
  6698. }
  6699. #chat-header .divider {
  6700. position: absolute;
  6701. top: 0;
  6702. left: 80px;
  6703. width: 265px;
  6704. height: 1px;
  6705. background: #1c1f25
  6706. }
  6707. .chat-header-button {
  6708. position: relative;
  6709. top: 8px;
  6710. float: left;
  6711. margin-right: 19px;
  6712. width: 30px;
  6713. height: 30px;
  6714. cursor: pointer
  6715. }
  6716. #chat-sound-button {
  6717. margin-left: 13px
  6718. }
  6719. #chat-popout-button {
  6720. float: right;
  6721. margin-right: 9px
  6722. }
  6723. #chat.level-1 #chat-mentions-button,
  6724. #chat.level-1 #chat-popout-button {
  6725. display: none
  6726. }
  6727. #chat.level-1 #chat-header .divider {
  6728. left: 0!important;
  6729. width: 345px!important
  6730. }
  6731. #chat-messages {
  6732. position: absolute;
  6733. top: 47px;
  6734. left: 0;
  6735. overflow-x: hidden;
  6736. overflow-y: auto;
  6737. width: 100%;
  6738. border-bottom: #1c1f25 1px solid;
  6739. color: #eee;
  6740. font-size: 12px;
  6741. font-family: Roboto, sans-serif
  6742. }
  6743. #chat-input {
  6744. position: absolute;
  6745. bottom: 10px;
  6746. left: 10px;
  6747. width: 326px;
  6748. height: 30px;
  6749. background: #282c35
  6750. }
  6751. #chat-input.muted #chat-input-field {
  6752. display: none
  6753. }
  6754. #chat-input.muted .mute-message {
  6755. position: absolute;
  6756. top: 6px;
  6757. left: 10px;
  6758. color: #f46b40;
  6759. font-size: 14px
  6760. }
  6761. #chat-input-field {
  6762. position: absolute;
  6763. top: 7px;
  6764. left: 10px;
  6765. width: 305px;
  6766. outline: 0;
  6767. border: 0;
  6768. background: 0 0;
  6769. color: #eee;
  6770. font-weight: 400;
  6771. font-size: 12px;
  6772. font-family: Roboto, sans-serif
  6773. }
  6774. #chat .cm:nth-child(2n+1) {
  6775. background-color: #111317
  6776. }
  6777. #chat .emote,
  6778. #chat .log,
  6779. #chat .mention,
  6780. #chat .message,
  6781. #chat .moderation,
  6782. #chat .promo,
  6783. #chat .system,
  6784. #chat .user-action,
  6785. #chat .welcome {
  6786. position: relative;
  6787. clear: left;
  6788. min-height: 46px;
  6789. width: 100%;
  6790. word-wrap: break-word
  6791. }
  6792. #chat .log,
  6793. #chat .moderation,
  6794. #chat .promo,
  6795. #chat .system,
  6796. #chat .user-action,
  6797. #chat .welcome {
  6798. min-height: 26px
  6799. }
  6800. #chat-messages .badge-box {
  6801. position: relative;
  6802. z-index: 1;
  6803. float: left;
  6804. overflow: hidden;
  6805. margin: 8px
  6806. }
  6807. #chat .msg {
  6808. position: relative;
  6809. padding: 5px 8px 6px 46px
  6810. }
  6811. #chat .log .msg,
  6812. #chat .moderation .msg,
  6813. #chat .promo .msg,
  6814. #chat .user-action .msg,
  6815. #chat .welcome .msg {
  6816. padding: 5px 8px 6px 10px
  6817. }
  6818. #chat .from {
  6819. position: relative;
  6820. margin-bottom: 3px
  6821. }
  6822. #chat-messages .from .icon {
  6823. position: relative;
  6824. top: 1px;
  6825. z-index: 0;
  6826. float: left;
  6827. margin-right: 4px
  6828. }
  6829. #chat-messages .from .icon.icon-chat-dj {
  6830. top: 2px
  6831. }
  6832. #chat-messages .from.ambassador .icon.icon-chat-silver-subscriber,
  6833. #chat-messages .from.ambassador .icon.icon-chat-subscriber,
  6834. #chat-messages .from.ambassador.has-staff .icon.icon-chat-ambassador,
  6835. #chat-messages .from.dj .icon.icon-chat-silver-subscriber,
  6836. #chat-messages .from.dj .icon.icon-chat-subscriber,
  6837. #chat-messages .from.plot .icon.icon-chat-silver-subscriber,
  6838. #chat-messages .from.plot .icon.icon-chat-subscriber,
  6839. #chat-messages .from.plot.has-staff .icon.icon-chat-plot #chat-messages .from.promoter .icon.icon-chat-silver-subscriber,
  6840. #chat-messages .from.promoter .icon.icon-chat-subscriber,
  6841. #chat-messages .from.promoter.has-staff .icon.icon-chat-promoter,
  6842. #chat-messages .from.sitemod .icon.icon-chat-silver-subscriber,
  6843. #chat-messages .from.sitemod .icon.icon-chat-subscriber,
  6844. #chat-messages .from.sitemod.has-staff .icon.icon-chat-sitemod,
  6845. #chat-messages .from.staff .icon.icon-chat-silver-subscriber,
  6846. #chat-messages .from.staff .icon.icon-chat-subscriber {
  6847. margin-right: 0
  6848. }
  6849. #chat-messages .from.admin.has-staff .icon.icon-chat-admin {
  6850. margin-right: 2px;
  6851. margin-left: -2px
  6852. }
  6853. #chat-messages .icon.icon-chat-ambassador {
  6854. margin-left: -4px
  6855. }
  6856. #chat-messages .icon.icon-chat-plot,
  6857. #chat-messages .icon.icon-chat-promoter,
  6858. #chat-messages .icon.icon-chat-sitemod {
  6859. margin-left: -2px
  6860. }
  6861. #chat-messages .from.plot.has-sub .icon.icon-chat-plot,
  6862. #chat-messages .from.promoter.has-sub .icon.icon-chat-promoter,
  6863. #chat-messages .from.sitemod.has-sub .icon.icon-chat-sitemod {
  6864. margin-left: 2px
  6865. }
  6866. #chat-messages .from.plot.has-staff.has-sub .icon.icon-chat-plot,
  6867. #chat-messages .from.promoter.has-staff.has-sub .icon.icon-chat-promoter,
  6868. #chat-messages .from.sitemod.has-staff.has-sub .icon.icon-chat-sitemod {
  6869. margin-left: -2px
  6870. }
  6871. #chat .from .un {
  6872. color: #777f92;
  6873. font-weight: 700
  6874. }
  6875. #chat .promo .from .un {
  6876. color: #c59840
  6877. }
  6878. #chat-messages .text {
  6879. position: relative
  6880. }
  6881. #chat-messages .timestamp {
  6882. position: relative;
  6883. display: none;
  6884. float: right;
  6885. color: #555d70;
  6886. font-size: 11px
  6887. }
  6888. .is-admin .name {
  6889. color: #42a5dc
  6890. }
  6891. .is-ambassador .name {
  6892. color: #89be6c
  6893. }
  6894. .is-sitemod .name {
  6895. color: #e74c3c
  6896. }
  6897. .is-plot .name {
  6898. color: #e67e22
  6899. }
  6900. .is-promoter .name {
  6901. color: #1abc9c
  6902. }
  6903. .is-staff .name {
  6904. color: #ac76ff
  6905. }
  6906. .is-dj .name {
  6907. color: #ac76ff
  6908. }
  6909. .is-subscriber .name {
  6910. color: #c59840
  6911. }
  6912. .is-subscriber.silver .name {
  6913. color: #8694b2
  6914. }
  6915. .is-you .name {
  6916. color: #ffdd6f
  6917. }
  6918. #chat .from.admin .un {
  6919. color: #42a5dc
  6920. }
  6921. #chat .from.ambassador .un {
  6922. color: #89be6c
  6923. }
  6924. #chat .from.sitemod .un {
  6925. color: #e74c3c
  6926. }
  6927. #chat .from.plot .un {
  6928. color: #e67e22
  6929. }
  6930. #chat .from.promoter .un {
  6931. color: #1abc9c
  6932. }
  6933. #chat .from.staff .un {
  6934. color: #ac76ff
  6935. }
  6936. #chat .from.dj .un {
  6937. color: #ac76ff
  6938. }
  6939. #chat .from.subscriber .un {
  6940. color: #c59840
  6941. }
  6942. #chat .from.you .un {
  6943. color: #ffdd6f
  6944. }
  6945. #chat .from.gift .un {
  6946. color: #eee
  6947. }
  6948. #chat .system .from .un {
  6949. color: #42a5dc
  6950. }
  6951. #chat-messages .clickable {
  6952. cursor: pointer
  6953. }
  6954. #chat .text a {
  6955. color: #009cdd
  6956. }
  6957. #chat .text a:visited {
  6958. color: #009cdd
  6959. }
  6960. #chat .emote .text {
  6961. font-style: oblique
  6962. }
  6963. #chat .user-action {
  6964. color: #ffdd6f
  6965. }
  6966. #chat .promo {
  6967. color: #eee
  6968. }
  6969. #chat .moderation {
  6970. color: #ac76ff
  6971. }
  6972. #chat .moderation .from {
  6973. color: #ac76ff
  6974. }
  6975. #chat .system {
  6976. padding: 6px 0 7px;
  6977. background: #212328;
  6978. color: #fff
  6979. }
  6980. #chat .system .timestamp {
  6981. color: #42a5dc
  6982. }
  6983. #chat .mention.is-admin {
  6984. background: #0a0a0a;
  6985. background: -moz-linear-gradient(-45deg, #42a5dc 0, #0a0a0a 13%, #0a0a0a 100%);
  6986. background: -webkit-gradient(left top, right bottom, color-stop(0, #42a5dc), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  6987. background: -webkit-linear-gradient(-45deg, #42a5dc 0, #0a0a0a 13%, #0a0a0a 100%);
  6988. background: -o-linear-gradient(-45deg, #42a5dc 0, #0a0a0a 13%, #0a0a0a 100%);
  6989. background: -ms-linear-gradient(-45deg, #42a5dc 0, #0a0a0a 13%, #0a0a0a 100%);
  6990. background: linear-gradient(135deg, #42a5dc 0, #0a0a0a 13%, #0a0a0a 100%)
  6991. }
  6992. #chat .mention.is-ambassador {
  6993. background: #0a0a0a;
  6994. background: -moz-linear-gradient(-45deg, #89be6c 0, #0a0a0a 13%, #0a0a0a 100%);
  6995. background: -webkit-gradient(left top, right bottom, color-stop(0, #89be6c), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  6996. background: -webkit-linear-gradient(-45deg, #89be6c 0, #0a0a0a 13%, #0a0a0a 100%);
  6997. background: -o-linear-gradient(-45deg, #89be6c 0, #0a0a0a 13%, #0a0a0a 100%);
  6998. background: -ms-linear-gradient(-45deg, #89be6c 0, #0a0a0a 13%, #0a0a0a 100%);
  6999. background: linear-gradient(135deg, #89be6c 0, #0a0a0a 13%, #0a0a0a 100%)
  7000. }
  7001. #chat .mention.is-sitemod {
  7002. background: #0a0a0a;
  7003. background: -moz-linear-gradient(-45deg, #e74c3c 0, #0a0a0a 13%, #0a0a0a 100%);
  7004. background: -webkit-gradient(left top, right bottom, color-stop(0, #e74c3c), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7005. background: -webkit-linear-gradient(-45deg, #e74c3c 0, #0a0a0a 13%, #0a0a0a 100%);
  7006. background: -o-linear-gradient(-45deg, #e74c3c 0, #0a0a0a 13%, #0a0a0a 100%);
  7007. background: -ms-linear-gradient(-45deg, #e74c3c 0, #0a0a0a 13%, #0a0a0a 100%);
  7008. background: linear-gradient(135deg, #e74c3c 0, #0a0a0a 13%, #0a0a0a 100%)
  7009. }
  7010. #chat .mention.is-plot {
  7011. background: #0a0a0a;
  7012. background: -moz-linear-gradient(-45deg, #e67e22 0, #0a0a0a 13%, #0a0a0a 100%);
  7013. background: -webkit-gradient(left top, right bottom, color-stop(0, #e67e22), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7014. background: -webkit-linear-gradient(-45deg, #e67e22 0, #0a0a0a 13%, #0a0a0a 100%);
  7015. background: -o-linear-gradient(-45deg, #e67e22 0, #0a0a0a 13%, #0a0a0a 100%);
  7016. background: -ms-linear-gradient(-45deg, #e67e22 0, #0a0a0a 13%, #0a0a0a 100%);
  7017. background: linear-gradient(135deg, #e67e22 0, #0a0a0a 13%, #0a0a0a 100%)
  7018. }
  7019. #chat .mention.is-promoter {
  7020. background: #0a0a0a;
  7021. background: -moz-linear-gradient(-45deg, #1abc9c 0, #0a0a0a 13%, #0a0a0a 100%);
  7022. background: -webkit-gradient(left top, right bottom, color-stop(0, #1abc9c), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7023. background: -webkit-linear-gradient(-45deg, #1abc9c 0, #0a0a0a 13%, #0a0a0a 100%);
  7024. background: -o-linear-gradient(-45deg, #1abc9c 0, #0a0a0a 13%, #0a0a0a 100%);
  7025. background: -ms-linear-gradient(-45deg, #1abc9c 0, #0a0a0a 13%, #0a0a0a 100%);
  7026. background: linear-gradient(135deg, #1abc9c 0, #0a0a0a 13%, #0a0a0a 100%)
  7027. }
  7028. #chat .mention.is-dj,
  7029. #chat .mention.is-staff {
  7030. background: #0a0a0a;
  7031. background: -moz-linear-gradient(-45deg, #ac76ff 0, #0a0a0a 13%, #0a0a0a 100%);
  7032. background: -webkit-gradient(left top, right bottom, color-stop(0, #ac76ff), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7033. background: -webkit-linear-gradient(-45deg, #ac76ff 0, #0a0a0a 13%, #0a0a0a 100%);
  7034. background: -o-linear-gradient(-45deg, #ac76ff 0, #0a0a0a 13%, #0a0a0a 100%);
  7035. background: -ms-linear-gradient(-45deg, #ac76ff 0, #0a0a0a 13%, #0a0a0a 100%);
  7036. background: linear-gradient(135deg, #ac76ff 0, #0a0a0a 13%, #0a0a0a 100%)
  7037. }
  7038. #chat .mention.is-subscriber {
  7039. background: #0a0a0a;
  7040. background: -moz-linear-gradient(-45deg, #c59840 0, #0a0a0a 13%, #0a0a0a 100%);
  7041. background: -webkit-gradient(left top, right bottom, color-stop(0, #c59840), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7042. background: -webkit-linear-gradient(-45deg, #c59840 0, #0a0a0a 13%, #0a0a0a 100%);
  7043. background: -o-linear-gradient(-45deg, #c59840 0, #0a0a0a 13%, #0a0a0a 100%);
  7044. background: -ms-linear-gradient(-45deg, #c59840 0, #0a0a0a 13%, #0a0a0a 100%);
  7045. background: linear-gradient(135deg, #c59840 0, #0a0a0a 13%, #0a0a0a 100%)
  7046. }
  7047. #chat .mention.is-subscriber.silver {
  7048. background: #0a0a0a;
  7049. background: -moz-linear-gradient(-45deg, #8694b2 0, #0a0a0a 13%, #0a0a0a 100%);
  7050. background: -webkit-gradient(left top, right bottom, color-stop(0, #8694b2), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7051. background: -webkit-linear-gradient(-45deg, #8694b2 0, #0a0a0a 13%, #0a0a0a 100%);
  7052. background: -o-linear-gradient(-45deg, #8694b2 0, #0a0a0a 13%, #0a0a0a 100%);
  7053. background: -ms-linear-gradient(-45deg, #8694b2 0, #0a0a0a 13%, #0a0a0a 100%);
  7054. background: linear-gradient(135deg, #8694b2 0, #0a0a0a 13%, #0a0a0a 100%)
  7055. }
  7056. #chat .mention.is-you {
  7057. background: #0a0a0a;
  7058. background: -moz-linear-gradient(-45deg, #ffdd6f 0, #0a0a0a 13%, #0a0a0a 100%);
  7059. background: -webkit-gradient(left top, right bottom, color-stop(0, #ffdd6f), color-stop(13%, #0a0a0a), color-stop(100%, #0a0a0a));
  7060. background: -webkit-linear-gradient(-45deg, #ffdd6f 0, #0a0a0a 13%, #0a0a0a 100%);
  7061. background: -o-linear-gradient(-45deg, #ffdd6f 0, #0a0a0a 13%, #0a0a0a 100%);
  7062. background: -ms-linear-gradient(-45deg, #ffdd6f 0, #0a0a0a 13%, #0a0a0a 100%);
  7063. background: linear-gradient(135deg, #ffdd6f 0, #0a0a0a 13%, #0a0a0a 100%)
  7064. }
  7065. #chat .mention.is-admin:nth-child(2n+1) {
  7066. background: #111317;
  7067. background: -moz-linear-gradient(-45deg, #42a5dc 0, #111317 13%, #111317 100%);
  7068. background: -webkit-gradient(left top, right bottom, color-stop(0, #42a5dc), color-stop(13%, #111317), color-stop(100%, #111317));
  7069. background: -webkit-linear-gradient(-45deg, #42a5dc 0, #111317 13%, #111317 100%);
  7070. background: -o-linear-gradient(-45deg, #42a5dc 0, #111317 13%, #111317 100%);
  7071. background: -ms-linear-gradient(-45deg, #42a5dc 0, #111317 13%, #111317 100%);
  7072. background: linear-gradient(135deg, #42a5dc 0, #111317 13%, #111317 100%)
  7073. }
  7074. #chat .mention.is-ambassador:nth-child(2n+1) {
  7075. background: #111317;
  7076. background: -moz-linear-gradient(-45deg, #89be6c 0, #111317 13%, #111317 100%);
  7077. background: -webkit-gradient(left top, right bottom, color-stop(0, #89be6c), color-stop(13%, #111317), color-stop(100%, #111317));
  7078. background: -webkit-linear-gradient(-45deg, #89be6c 0, #111317 13%, #111317 100%);
  7079. background: -o-linear-gradient(-45deg, #89be6c 0, #111317 13%, #111317 100%);
  7080. background: -ms-linear-gradient(-45deg, #89be6c 0, #111317 13%, #111317 100%);
  7081. background: linear-gradient(135deg, #89be6c 0, #111317 13%, #111317 100%)
  7082. }
  7083. #chat .mention.is-sitemod:nth-child(2n+1) {
  7084. background: #111317;
  7085. background: -moz-linear-gradient(-45deg, #e74c3c 0, #111317 13%, #111317 100%);
  7086. background: -webkit-gradient(left top, right bottom, color-stop(0, #e74c3c), color-stop(13%, #111317), color-stop(100%, #111317));
  7087. background: -webkit-linear-gradient(-45deg, #e74c3c 0, #111317 13%, #111317 100%);
  7088. background: -o-linear-gradient(-45deg, #e74c3c 0, #111317 13%, #111317 100%);
  7089. background: -ms-linear-gradient(-45deg, #e74c3c 0, #111317 13%, #111317 100%);
  7090. background: linear-gradient(135deg, #e74c3c 0, #111317 13%, #111317 100%)
  7091. }
  7092. #chat .mention.is-plot:nth-child(2n+1) {
  7093. background: #111317;
  7094. background: -moz-linear-gradient(-45deg, #e67e22 0, #111317 13%, #111317 100%);
  7095. background: -webkit-gradient(left top, right bottom, color-stop(0, #e67e22), color-stop(13%, #111317), color-stop(100%, #111317));
  7096. background: -webkit-linear-gradient(-45deg, #e67e22 0, #111317 13%, #111317 100%);
  7097. background: -o-linear-gradient(-45deg, #e67e22 0, #111317 13%, #111317 100%);
  7098. background: -ms-linear-gradient(-45deg, #e67e22 0, #111317 13%, #111317 100%);
  7099. background: linear-gradient(135deg, #e67e22 0, #111317 13%, #111317 100%)
  7100. }
  7101. #chat .mention.is-promoter:nth-child(2n+1) {
  7102. background: #111317;
  7103. background: -moz-linear-gradient(-45deg, #1abc9c 0, #111317 13%, #111317 100%);
  7104. background: -webkit-gradient(left top, right bottom, color-stop(0, #1abc9c), color-stop(13%, #111317), color-stop(100%, #111317));
  7105. background: -webkit-linear-gradient(-45deg, #1abc9c 0, #111317 13%, #111317 100%);
  7106. background: -o-linear-gradient(-45deg, #1abc9c 0, #111317 13%, #111317 100%);
  7107. background: -ms-linear-gradient(-45deg, #1abc9c 0, #111317 13%, #111317 100%);
  7108. background: linear-gradient(135deg, #1abc9c 0, #111317 13%, #111317 100%)
  7109. }
  7110. #chat .mention.is-dj:nth-child(2n+1),
  7111. #chat .mention.is-staff:nth-child(2n+1) {
  7112. background: #111317;
  7113. background: -moz-linear-gradient(-45deg, #ac76ff 0, #111317 13%, #111317 100%);
  7114. background: -webkit-gradient(left top, right bottom, color-stop(0, #ac76ff), color-stop(13%, #111317), color-stop(100%, #111317));
  7115. background: -webkit-linear-gradient(-45deg, #ac76ff 0, #111317 13%, #111317 100%);
  7116. background: -o-linear-gradient(-45deg, #ac76ff 0, #111317 13%, #111317 100%);
  7117. background: -ms-linear-gradient(-45deg, #ac76ff 0, #111317 13%, #111317 100%);
  7118. background: linear-gradient(135deg, #ac76ff 0, #111317 13%, #111317 100%)
  7119. }
  7120. #chat .mention.is-subscriber:nth-child(2n+1) {
  7121. background: #111317;
  7122. background: -moz-linear-gradient(-45deg, #c59840 0, #111317 13%, #111317 100%);
  7123. background: -webkit-gradient(left top, right bottom, color-stop(0, #c59840), color-stop(13%, #111317), color-stop(100%, #111317));
  7124. background: -webkit-linear-gradient(-45deg, #c59840 0, #111317 13%, #111317 100%);
  7125. background: -o-linear-gradient(-45deg, #c59840 0, #111317 13%, #111317 100%);
  7126. background: -ms-linear-gradient(-45deg, #c59840 0, #111317 13%, #111317 100%);
  7127. background: linear-gradient(135deg, #c59840 0, #111317 13%, #111317 100%)
  7128. }
  7129. #chat .mention.is-subscriber.silver:nth-child(2n+1) {
  7130. background: #111317;
  7131. background: -moz-linear-gradient(-45deg, #8694b2 0, #111317 13%, #111317 100%);
  7132. background: -webkit-gradient(left top, right bottom, color-stop(0, #8694b2), color-stop(13%, #111317), color-stop(100%, #111317));
  7133. background: -webkit-linear-gradient(-45deg, #8694b2 0, #111317 13%, #111317 100%);
  7134. background: -o-linear-gradient(-45deg, #8694b2 0, #111317 13%, #111317 100%);
  7135. background: -ms-linear-gradient(-45deg, #8694b2 0, #111317 13%, #111317 100%);
  7136. background: linear-gradient(135deg, #8694b2 0, #111317 13%, #111317 100%)
  7137. }
  7138. #chat .mention.is-you:nth-child(2n+1) {
  7139. background: #111317;
  7140. background: -moz-linear-gradient(-45deg, #ffdd6f 0, #111317 13%, #111317 100%);
  7141. background: -webkit-gradient(left top, right bottom, color-stop(0, #ffdd6f), color-stop(13%, #111317), color-stop(100%, #111317));
  7142. background: -webkit-linear-gradient(-45deg, #ffdd6f 0, #111317 13%, #111317 100%);
  7143. background: -o-linear-gradient(-45deg, #ffdd6f 0, #111317 13%, #111317 100%);
  7144. background: -ms-linear-gradient(-45deg, #ffdd6f 0, #111317 13%, #111317 100%);
  7145. background: linear-gradient(135deg, #ffdd6f 0, #111317 13%, #111317 100%)
  7146. }
  7147. #chat .system {
  7148. -webkit-box-shadow: inset 0 0 0 1px #42a5dc;
  7149. -moz-box-shadow: inset 0 0 0 1px #42a5dc;
  7150. box-shadow: inset 0 0 0 1px #42a5dc
  7151. }
  7152. #chat-messages .system .badge-box {
  7153. background: 0 0
  7154. }
  7155. #chat .welcome {
  7156. color: #ac76ff
  7157. }
  7158. #chat .log .text {
  7159. color: #d1d1d1;
  7160. font-weight: 700
  7161. }
  7162. #chat .delete-button {
  7163. position: absolute;
  7164. top: 6px;
  7165. right: 4px;
  7166. z-index: 5;
  7167. display: none;
  7168. padding: 10px 10px;
  7169. background: #444a59;
  7170. font-size: 11px;
  7171. cursor: pointer
  7172. }
  7173. #chat .delete-button:hover {
  7174. background: #f04f30
  7175. }
  7176. #chat-suggestion {
  7177. position: absolute;
  7178. bottom: 41px;
  7179. left: 10px;
  7180. z-index: 37;
  7181. display: none;
  7182. width: 326px;
  7183. height: 21px;
  7184. background: #1c1f25
  7185. }
  7186. #chat-suggestion-items {
  7187. position: absolute;
  7188. top: 0;
  7189. left: 0;
  7190. width: 100%
  7191. }
  7192. .chat-suggestion-item {
  7193. position: relative;
  7194. overflow: hidden;
  7195. margin-top: 1px;
  7196. width: 100%;
  7197. height: 37px;
  7198. white-space: nowrap;
  7199. cursor: pointer
  7200. }
  7201. .chat-suggestion-item-line {
  7202. position: absolute;
  7203. bottom: -1px;
  7204. width: 100%;
  7205. height: 1px;
  7206. background: #323742;
  7207. opacity: .5
  7208. }
  7209. .chat-suggestion-item .image {
  7210. position: relative;
  7211. top: 3px;
  7212. float: left;
  7213. margin-right: 9px;
  7214. margin-left: 5px;
  7215. width: 27px;
  7216. height: 27px
  7217. }
  7218. .chat-suggestion-item .value {
  7219. position: relative;
  7220. top: 9px;
  7221. float: left
  7222. }
  7223. .chat-suggestion-item.emo .image {
  7224. top: 9px;
  7225. margin-right: 0;
  7226. margin-left: 8px;
  7227. height: 21px
  7228. }
  7229. .chat-suggestion-item .image .icon-mention {
  7230. top: 1px;
  7231. left: 1px
  7232. }
  7233. #chat .disconnect {
  7234. position: absolute;
  7235. top: 0;
  7236. left: 0;
  7237. z-index: 300;
  7238. width: 100%;
  7239. height: 100%;
  7240. background-color: #0a0a0a;
  7241. opacity: .91
  7242. }
  7243. #chat .disconnect span {
  7244. position: absolute;
  7245. top: 50%;
  7246. left: 5%;
  7247. width: 90%;
  7248. color: #eee;
  7249. text-align: center;
  7250. font-size: 18px
  7251. }
  7252. #chat-messages .cimg {
  7253. position: relative;
  7254. margin: 4px 0;
  7255. max-width: 100%;
  7256. max-height: 200px;
  7257. vertical-align: text-top
  7258. }
  7259. #chat-messages .iph {
  7260. color: #1c1f25
  7261. }
  7262. #chat .moderation .badge-box {
  7263. background: 0 0
  7264. }
  7265. #chat .badge-box .icon-gift,
  7266. #chat .badge-box .icon-locked-grey,
  7267. #chat .badge-box .icon-unlocked-grey {
  7268. top: 1px
  7269. }
  7270. #chat .badge-box .icon-ban,
  7271. #chat .badge-box .icon-skip {
  7272. top: 1px;
  7273. left: 1px
  7274. }
  7275. #chat .badge-box .icon-mute {
  7276. top: 1px;
  7277. left: -2px
  7278. }
  7279. #chat .badge-box .icon-join-booth,
  7280. #chat .badge-box .icon-leave-waitlist {
  7281. left: 1px
  7282. }
  7283. #chat .badge-box .icon-chat-bouncer,
  7284. #chat .badge-box .icon-chat-cohost,
  7285. #chat .badge-box .icon-chat-host,
  7286. #chat .badge-box .icon-chat-manager,
  7287. #chat .badge-box .icon-chat-silver-subscriber,
  7288. #chat .badge-box .icon-chat-subscriber {
  7289. top: 7px;
  7290. left: 7px
  7291. }
  7292. #chat .badge-box .icon-chat-dj {
  7293. top: 8px;
  7294. left: 7px
  7295. }
  7296. #chat .badge-box .icon-arrow-down,
  7297. #chat .badge-box .icon-arrow-up {
  7298. top: 10px
  7299. }
  7300. .is-guest .chat-header-button {
  7301. display: none
  7302. }
  7303. .is-guest #chat-header {
  7304. height: 1px
  7305. }
  7306. .is-guest #chat-messages {
  7307. top: 1px
  7308. }
  7309. #dashboard {
  7310. z-index: 80;
  7311. background: #111317
  7312. }
  7313. #dashboard .cover {
  7314. position: absolute;
  7315. top: 0;
  7316. left: 0;
  7317. width: 100%;
  7318. height: 100%
  7319. }
  7320. #dashboard .search {
  7321. position: relative;
  7322. margin-bottom: 15px;
  7323. left: 0;
  7324. height: 40px;
  7325. background: #0a0a0a;
  7326. -webkit-box-shadow: inset 0 0 0 1px #323742;
  7327. -moz-box-shadow: inset 0 0 0 1px #323742;
  7328. box-shadow: inset 0 0 0 1px #323742
  7329. }
  7330. #dashboard .search.hidden {
  7331. display: none
  7332. }
  7333. #dashboard .search input {
  7334. position: absolute;
  7335. top: 0;
  7336. padding-left: 40px;
  7337. width: 90%;
  7338. height: 100%;
  7339. border: 0;
  7340. background: 0 0;
  7341. color: #eee;
  7342. font-weight: 400;
  7343. font-size: 16px;
  7344. font-family: "Open Sans", sans-serif
  7345. }
  7346. #dashboard .search i {
  7347. top: 5px;
  7348. left: 7px
  7349. }
  7350. .communities .box {
  7351. position: relative;
  7352. left: 0;
  7353. overflow: auto;
  7354. width: 100%
  7355. }
  7356. .communities .grid {
  7357. position: relative;
  7358. top: 0;
  7359. left: 0
  7360. }
  7361. #dashboard .tab-menu {
  7362. margin-top: 15px
  7363. }
  7364. .tab-menu {
  7365. position: relative;
  7366. padding-bottom: 15px;
  7367. height: 40px
  7368. }
  7369. .tab-menu button {
  7370. position: relative;
  7371. display: block;
  7372. float: left;
  7373. overflow: hidden;
  7374. width: 50%;
  7375. height: 100%;
  7376. background: #282c35;
  7377. -webkit-box-shadow: inset 1px 0 0 0 #0a0a0a;
  7378. -moz-box-shadow: inset 1px 0 0 0 #0a0a0a;
  7379. box-shadow: inset 1px 0 0 0 #0a0a0a;
  7380. color: #808691;
  7381. text-overflow: ellipsis;
  7382. white-space: nowrap;
  7383. font-weight: 400;
  7384. font-size: 18px;
  7385. font-family: "Open Sans", sans-serif;
  7386. cursor: pointer
  7387. }
  7388. .tab-menu button:hover {
  7389. background: #323742;
  7390. color: #eee
  7391. }
  7392. .tab-menu button.selected {
  7393. background: #925aff;
  7394. color: #eee;
  7395. cursor: default
  7396. }
  7397. .tab-menu button:first-child {
  7398. -webkit-box-shadow: none;
  7399. -moz-box-shadow: none;
  7400. box-shadow: none
  7401. }
  7402. .is-guest #dashboard .tab-menu {
  7403. display: none
  7404. }
  7405. .is-guest #dashboard .search {
  7406. margin-top: 15px
  7407. }
  7408. .communities .grid .cell {
  7409. position: relative;
  7410. float: left;
  7411. overflow: hidden;
  7412. margin: 0 15px 15px 0;
  7413. width: 250px;
  7414. height: 300px;
  7415. background: #1c1f25;
  7416. cursor: pointer
  7417. }
  7418. .communities .grid .cell .bar {
  7419. position: absolute;
  7420. top: 0;
  7421. left: 0;
  7422. z-index: 3;
  7423. width: 100%;
  7424. height: 43px;
  7425. background: #1c1f25
  7426. }
  7427. .communities .grid .cell .population {
  7428. position: absolute;
  7429. top: 12px;
  7430. left: 10px
  7431. }
  7432. .communities .grid .cell .population .friends {
  7433. display: none
  7434. }
  7435. .communities .grid .cell .population .friends .divider,
  7436. .communities .grid .cell .population .guests .divider {
  7437. position: relative;
  7438. float: left;
  7439. width: 1px;
  7440. height: 24px;
  7441. background: #323742;
  7442. margin-right: 4px;
  7443. margin-top: -2px
  7444. }
  7445. .communities .grid .cell .population.has-friends .friends {
  7446. display: block;
  7447. margin-right: 9px
  7448. }
  7449. .communities .grid .cell .population .people {
  7450. margin-right: 10px
  7451. }
  7452. .communities .grid .cell .population div {
  7453. position: relative;
  7454. float: left;
  7455. height: 20px
  7456. }
  7457. .communities .grid .cell .population div i {
  7458. position: relative;
  7459. top: -4px;
  7460. float: left
  7461. }
  7462. .communities .grid .cell .population div span {
  7463. position: relative;
  7464. float: left;
  7465. font-size: 15px
  7466. }
  7467. .communities .grid .cell .population div.friends span,
  7468. .communities .grid .cell .population div.guests span {
  7469. margin-left: -3px
  7470. }
  7471. .communities .grid .cell .population div.guests span {
  7472. color: #666e81
  7473. }
  7474. .favorite {
  7475. position: absolute;
  7476. cursor: pointer
  7477. }
  7478. .favorite i:hover,
  7479. .favorite.selected i {
  7480. opacity: 1
  7481. }
  7482. .communities .grid .cell .favorite {
  7483. top: 0;
  7484. right: 0;
  7485. width: 43px;
  7486. height: 43px;
  7487. background: #282c35
  7488. }
  7489. .communities .grid .cell .favorite i {
  7490. top: 7px;
  7491. left: 7px;
  7492. z-index: 3;
  7493. opacity: .2
  7494. }
  7495. .communities .grid .cell .favorite i:hover,
  7496. .communities .grid .cell .favorite.selected i {
  7497. opacity: 1
  7498. }
  7499. .communities .grid .cell .media {
  7500. position: absolute;
  7501. top: 19px;
  7502. left: -2px;
  7503. z-index: 0;
  7504. width: 254px;
  7505. height: 191px;
  7506. background: url('https://cdn.plug.dj/_/static/images/dashboard.5babb34b5dd422ed833d0bc3576e8a31dc88b42c.png') no-repeat -250px 0
  7507. }
  7508. .communities .grid .cell.tastycat .media {
  7509. background-position: 0 0
  7510. }
  7511. .communities .grid .cell.ultra .media {
  7512. background-position: -500px 0
  7513. }
  7514. .communities .grid .cell.plutotv .media {
  7515. background-position: -750px 0
  7516. }
  7517. .communities .grid .cell .media img {
  7518. position: absolute;
  7519. top: 0;
  7520. left: 0;
  7521. width: 100%;
  7522. height: 100%
  7523. }
  7524. .communities .grid .cell .meta {
  7525. position: relative;
  7526. z-index: 2;
  7527. margin-top: 186px;
  7528. width: 100%;
  7529. height: 90px;
  7530. background: #1c1f25;
  7531. transition: all .25s ease-in
  7532. }
  7533. .communities .grid .cell .meta div {
  7534. position: relative;
  7535. float: left;
  7536. overflow: hidden;
  7537. margin-left: 10px;
  7538. max-height: 50px;
  7539. width: 230px;
  7540. text-overflow: ellipsis;
  7541. white-space: nowrap
  7542. }
  7543. .communities .grid .cell .meta .now-playing {
  7544. margin-top: 29px;
  7545. max-height: 40px;
  7546. width: 230px;
  7547. color: #808691;
  7548. transition: all .25s ease-in
  7549. }
  7550. .communities .grid .cell .meta .now-playing i {
  7551. position: relative;
  7552. float: left;
  7553. margin-top: -4px;
  7554. margin-right: 3px;
  7555. height: 21px
  7556. }
  7557. .communities .grid .cell .meta .friends {
  7558. margin-top: 0;
  7559. height: 0;
  7560. transition: all .25s ease-in
  7561. }
  7562. .communities .grid .cell .meta .friends .image {
  7563. display: none;
  7564. overflow: visible;
  7565. margin-right: 6px;
  7566. margin-left: 0;
  7567. max-height: none;
  7568. width: 31px;
  7569. height: 31px
  7570. }
  7571. .communities .grid .cell .meta .friends .image .thumb {
  7572. position: absolute;
  7573. margin-left: 0;
  7574. max-height: none;
  7575. width: 27px;
  7576. height: 27px
  7577. }
  7578. .communities .grid .cell .meta .friends .more {
  7579. position: relative;
  7580. top: 6px;
  7581. display: none;
  7582. float: left
  7583. }
  7584. .communities .grid .cell .meta .divider {
  7585. margin-top: 6px;
  7586. margin-bottom: 0;
  7587. height: 1px;
  7588. background: #323742;
  7589. transition: all .25s ease-in
  7590. }
  7591. .communities .grid .cell .meta .room {
  7592. margin-top: 7px;
  7593. margin-left: 10px;
  7594. width: 230px;
  7595. font-size: 18px
  7596. }
  7597. .communities .grid .cell .meta .room .icon-locked-grey {
  7598. position: relative;
  7599. float: left;
  7600. margin-top: -2px;
  7601. margin-left: -7px
  7602. }
  7603. .communities .grid .cell .nsfw {
  7604. position: absolute;
  7605. right: 54px;
  7606. top: 13px;
  7607. z-index: 5
  7608. }
  7609. .communities .grid .cell .meta .host {
  7610. margin-top: 1px;
  7611. margin-left: 10px;
  7612. width: 230px;
  7613. color: #777f92;
  7614. font-size: 12px
  7615. }
  7616. .communities .grid .cell.is-private .meta .host {
  7617. margin-top: -3px
  7618. }
  7619. .communities .grid .cell .meta .join {
  7620. position: absolute;
  7621. bottom: -80px;
  7622. float: none;
  7623. margin-left: 14px;
  7624. width: 220px;
  7625. height: 40px;
  7626. border: 1px solid #808691;
  7627. background: #1c1f25;
  7628. transition: all .25s ease-in
  7629. }
  7630. .communities .grid .cell .meta .join .label {
  7631. position: relative;
  7632. top: 6px;
  7633. float: none;
  7634. margin: 0 auto;
  7635. width: 180px;
  7636. font-size: 18px
  7637. }
  7638. .communities .grid .cell .meta .join i {
  7639. position: relative;
  7640. float: left;
  7641. margin-top: -1px;
  7642. margin-right: 7px
  7643. }
  7644. .communities .grid .cell:hover>.meta {
  7645. margin-top: 43px;
  7646. height: 257px;
  7647. background: rgba(28, 31, 37, .9);
  7648. transition: all .15s ease-out
  7649. }
  7650. .communities .grid .cell:hover>.meta .now-playing {
  7651. margin-top: 26px;
  7652. white-space: normal;
  7653. transition: all .15s ease-out
  7654. }
  7655. .communities .grid .cell:hover>.meta .room {
  7656. white-space: normal;
  7657. transition: all .15s ease-out
  7658. }
  7659. .communities .grid .cell:hover>.meta .join {
  7660. bottom: 14px;
  7661. transition: all .15s ease-out
  7662. }
  7663. .communities .grid .cell:hover>.meta .friends {
  7664. margin-top: 10px;
  7665. height: 32px;
  7666. transition: all .15s ease-out
  7667. }
  7668. .communities .grid .cell:hover .meta .friends .image {
  7669. display: block
  7670. }
  7671. .communities .grid .cell:hover .meta .friends .more {
  7672. display: block
  7673. }
  7674. .communities .grid .cell.no-media .media {
  7675. left: 0;
  7676. width: 250px
  7677. }
  7678. .communities .grid .cell.no-media .now-playing {
  7679. color: #eee
  7680. }
  7681. .grid .bottom-gutter {
  7682. position: relative;
  7683. float: left;
  7684. width: 100%;
  7685. height: 15px;
  7686. background: 0 0
  7687. }
  7688. #dashboard-border {
  7689. position: absolute;
  7690. top: 0;
  7691. left: 0;
  7692. z-index: 1
  7693. }
  7694. #dashboard-border .app-header .left {
  7695. position: absolute;
  7696. top: 0;
  7697. left: 54px;
  7698. height: 53px
  7699. }
  7700. #dashboard-border .app-header .support {
  7701. position: absolute;
  7702. top: 0;
  7703. right: 0;
  7704. width: 345px;
  7705. height: 53px;
  7706. background: #323742;
  7707. font-size: 16px;
  7708. cursor: pointer
  7709. }
  7710. #dashboard-border .app-header .subscribe {
  7711. position: absolute;
  7712. top: 0;
  7713. right: 0;
  7714. width: 345px;
  7715. height: 53px;
  7716. background: #323742;
  7717. font-size: 16px;
  7718. cursor: pointer
  7719. }
  7720. #dashboard-border .app-header .support:hover {
  7721. background: #444a59
  7722. }
  7723. #dashboard-border .app-header .subscribe:hover {
  7724. background: #444a59
  7725. }
  7726. #dashboard-border .app-header .support a {
  7727. color: #eee;
  7728. text-decoration: none
  7729. }
  7730. #dashboard-border .app-header .subscribe a {
  7731. color: #eee;
  7732. text-decoration: none
  7733. }
  7734. #dashboard-border .app-header .support a:visited {
  7735. color: #eee
  7736. }
  7737. #dashboard-border .app-header .subscribe a:visited {
  7738. color: #eee
  7739. }
  7740. #dashboard-border .app-header .support i {
  7741. position: relative;
  7742. float: left;
  7743. margin: -2px 10px 0 96px
  7744. }
  7745. #dashboard-border .app-header .subscribe i {
  7746. position: relative;
  7747. float: left;
  7748. margin: -2px 10px 0 96px
  7749. }
  7750. #dashboard-border .app-header .support .button {
  7751. position: absolute;
  7752. top: 0;
  7753. left: 0;
  7754. padding-top: 16px;
  7755. width: 100%;
  7756. height: 36px
  7757. }
  7758. #dashboard-border .app-header .subscribe button {
  7759. position: absolute;
  7760. top: 0;
  7761. left: 0;
  7762. width: 100%;
  7763. height: 100%;
  7764. background: #009cdd;
  7765. color: #eee;
  7766. font-weight: 400;
  7767. font-size: 18px;
  7768. font-family: "Open Sans", sans-serif;
  7769. cursor: pointer
  7770. }
  7771. #dialog-container {
  7772. position: fixed;
  7773. top: 0;
  7774. right: 0;
  7775. bottom: 0;
  7776. left: 0;
  7777. z-index: 999999;
  7778. display: none;
  7779. background: rgba(17, 19, 23, .5);
  7780. text-align: center;
  7781. white-space: nowrap
  7782. }
  7783. #dialog-container:before {
  7784. display: inline-block;
  7785. box-sizing: border-box;
  7786. margin-right: -.25em;
  7787. height: 100%;
  7788. content: '';
  7789. vertical-align: middle
  7790. }
  7791. .dialog {
  7792. position: relative;
  7793. display: inline-block;
  7794. margin: 0 auto;
  7795. width: 510px;
  7796. background: #282c35;
  7797. -webkit-box-shadow: 0 0 5px #000;
  7798. -moz-box-shadow: 0 0 5px #000;
  7799. box-shadow: 0 0 5px #000;
  7800. vertical-align: middle;
  7801. white-space: normal
  7802. }
  7803. .dialog .icon-dialog-close {
  7804. top: 13px;
  7805. right: 12px;
  7806. cursor: pointer
  7807. }
  7808. .dialog .dialog-body .divider {
  7809. position: absolute;
  7810. left: 0;
  7811. width: 100%;
  7812. height: 1px;
  7813. background: #282c35
  7814. }
  7815. .dialog-frame {
  7816. position: relative;
  7817. width: 100%;
  7818. height: 55px
  7819. }
  7820. .dialog-body {
  7821. position: relative;
  7822. width: 100%;
  7823. background: #111317
  7824. }
  7825. .dialog-frame .title {
  7826. position: absolute;
  7827. top: 7px;
  7828. left: 0;
  7829. width: 100%;
  7830. text-align: center;
  7831. font-size: 28px
  7832. }
  7833. .dialog-body .message {
  7834. position: absolute;
  7835. top: 38px;
  7836. left: 5%;
  7837. width: 90%;
  7838. text-align: center;
  7839. font-size: 16px
  7840. }
  7841. .dialog-frame .button {
  7842. position: relative;
  7843. float: left;
  7844. width: 50%;
  7845. height: 100%;
  7846. cursor: pointer
  7847. }
  7848. .dialog-frame .button span {
  7849. position: absolute;
  7850. top: 12px;
  7851. left: 0;
  7852. width: 100%;
  7853. text-align: center;
  7854. font-size: 22px
  7855. }
  7856. .dialog-frame .button.cancel {
  7857. color: #808691
  7858. }
  7859. .dialog-frame .button.submit {
  7860. color: #eee;
  7861. background: #00b5e6;
  7862. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  7863. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  7864. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  7865. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  7866. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  7867. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%)
  7868. }
  7869. .dialog.destructive .button.submit {
  7870. color: #eee;
  7871. background: #f46b40;
  7872. background: -moz-linear-gradient(top, #f46b40 0, #f04f30 100%);
  7873. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f46b40), color-stop(100%, #f04f30));
  7874. background: -webkit-linear-gradient(top, #f46b40 0, #f04f30 100%);
  7875. background: -o-linear-gradient(top, #f46b40 0, #f04f30 100%);
  7876. background: -ms-linear-gradient(top, #f46b40 0, #f04f30 100%);
  7877. background: linear-gradient(to bottom, #f46b40 0, #f04f30 100%)
  7878. }
  7879. #dialog-alert,
  7880. #dialog-confirm {
  7881. width: 510px;
  7882. height: 256px
  7883. }
  7884. #dialog-sos {
  7885. width: 510px;
  7886. height: 285px
  7887. }
  7888. .dialog-body a,
  7889. .dialog-body a:visited {
  7890. position: relative;
  7891. display: inline-block;
  7892. margin-top: 4px;
  7893. color: #009cdd
  7894. }
  7895. #dialog-alert .dialog-body,
  7896. #dialog-confirm .dialog-body {
  7897. height: 146px
  7898. }
  7899. #dialog-sos .dialog-body {
  7900. height: 175px
  7901. }
  7902. #dialog-alert .dialog-frame .button.submit {
  7903. width: 100%
  7904. }
  7905. #dialog-media-update {
  7906. height: 246px
  7907. }
  7908. #dialog-media-update .dialog-body {
  7909. height: 136px
  7910. }
  7911. .dialog-input-container {
  7912. position: absolute;
  7913. width: 100%;
  7914. height: 46px
  7915. }
  7916. .dialog-input-label {
  7917. position: absolute;
  7918. top: 11px;
  7919. left: 0;
  7920. width: 80px;
  7921. color: #eee;
  7922. text-align: right;
  7923. font-size: 18px
  7924. }
  7925. .dialog-input-background {
  7926. position: absolute;
  7927. left: 90px;
  7928. height: 100%;
  7929. background: #212328;
  7930. -webkit-box-shadow: inset 0 0 0 1px #444a59;
  7931. -moz-box-shadow: inset 0 0 0 1px #444a59;
  7932. box-shadow: inset 0 0 0 1px #444a59
  7933. }
  7934. .dialog-input-background input {
  7935. position: absolute;
  7936. top: 8px;
  7937. left: 10px;
  7938. outline: 0;
  7939. border: 0;
  7940. background: 0 0;
  7941. color: #eee;
  7942. font-weight: 400;
  7943. font-size: 20px;
  7944. font-family: "Open Sans", sans-serif
  7945. }
  7946. #dialog-media-update .dialog-input-background {
  7947. width: 310px
  7948. }
  7949. #dialog-media-update .dialog-input-background input {
  7950. width: 290px
  7951. }
  7952. #dialog-media-update .dialog-input-container.artist {
  7953. top: 15px
  7954. }
  7955. #dialog-media-update .dialog-input-container.title {
  7956. bottom: 15px
  7957. }
  7958. #dialog-media-update .swap {
  7959. position: absolute;
  7960. top: 40px;
  7961. right: 30px;
  7962. width: 49px;
  7963. height: 49px;
  7964. background: #323742;
  7965. cursor: pointer
  7966. }
  7967. #dialog-media-update .swap i {
  7968. top: 10px;
  7969. left: 10px
  7970. }
  7971. #dialog-delete,
  7972. #dialog-import-tt,
  7973. #dialog-playlist-create,
  7974. #dialog-playlist-rename {
  7975. height: 207px
  7976. }
  7977. #dialog-playlist-delete {
  7978. height: 247px
  7979. }
  7980. #dialog-playlist-delete .dialog-body {
  7981. height: 137px
  7982. }
  7983. #dialog-playlist-delete .dialog-body .message {
  7984. top: 21px;
  7985. color: #f04f30
  7986. }
  7987. #dialog-playlist-delete .dialog-input-container {
  7988. top: 67px
  7989. }
  7990. #dialog-playlist-delete .dialog-body .dialog-input-label {
  7991. top: 10px;
  7992. width: 253px
  7993. }
  7994. #dialog-playlist-delete .dialog-body .dialog-input-background {
  7995. left: 270px;
  7996. width: 130px
  7997. }
  7998. #dialog-playlist-delete .dialog-body .dialog-input-background input {
  7999. width: 110px
  8000. }
  8001. #dialog-delete .dialog-body,
  8002. #dialog-import-tt .dialog-body,
  8003. #dialog-playlist-create .dialog-body,
  8004. #dialog-playlist-rename .dialog-body {
  8005. height: 97px
  8006. }
  8007. #dialog-import-tt .dialog-input-container,
  8008. #dialog-playlist-create .dialog-input-container,
  8009. #dialog-playlist-rename .dialog-input-container {
  8010. top: 25px
  8011. }
  8012. #dialog-import-tt .dialog-input-background,
  8013. #dialog-playlist-create .dialog-input-background,
  8014. #dialog-playlist-rename .dialog-input-background {
  8015. width: 380px
  8016. }
  8017. #dialog-import-tt .dialog-input-background input,
  8018. #dialog-playlist-create .dialog-input-background input,
  8019. #dialog-playlist-rename .dialog-input-background input {
  8020. width: 360px
  8021. }
  8022. #dialog-import-tt.importing .dialog-input-container {
  8023. display: none
  8024. }
  8025. #dialog-import-tt.importing .import-progress-bar {
  8026. position: absolute;
  8027. top: 0;
  8028. left: 0;
  8029. width: 100%;
  8030. height: 97px
  8031. }
  8032. #dialog-import-tt.importing .import-progress-bar .progress-bar {
  8033. position: absolute;
  8034. top: 0;
  8035. left: 0;
  8036. width: 0;
  8037. height: 100%;
  8038. background: #925aff
  8039. }
  8040. #dialog-import-tt.importing .import-count {
  8041. position: absolute;
  8042. top: 20px;
  8043. left: 5%;
  8044. width: 90%;
  8045. color: #eee;
  8046. text-align: center;
  8047. font-size: 16px
  8048. }
  8049. #dialog-import-tt.importing .import-item {
  8050. position: absolute;
  8051. bottom: 20px;
  8052. left: 5%;
  8053. overflow: hidden;
  8054. width: 90%;
  8055. text-align: center;
  8056. text-overflow: ellipsis;
  8057. white-space: nowrap;
  8058. font-size: 16px
  8059. }
  8060. #dialog-import-tt.importing .import-time {
  8061. position: absolute;
  8062. top: 111px;
  8063. left: 0;
  8064. width: 100%;
  8065. text-align: center;
  8066. font-size: 20px
  8067. }
  8068. #dialog-preview.youtube {
  8069. width: 484px;
  8070. height: 452px
  8071. }
  8072. #dialog-preview.soundcloud {
  8073. width: 480px;
  8074. height: 316px
  8075. }
  8076. #dialog-preview.tutorial {
  8077. width: 854px;
  8078. height: 565px
  8079. }
  8080. #dialog-preview .dialog-frame .button.submit {
  8081. width: 100%;
  8082. background: 0 0;
  8083. color: #808691
  8084. }
  8085. #dialog-preview.youtube .dialog-body {
  8086. width: 484px;
  8087. height: 342px
  8088. }
  8089. #dialog-preview.soundcloud .dialog-body {
  8090. width: 480px;
  8091. height: 206px
  8092. }
  8093. #dialog-preview.tutorial .dialog-body {
  8094. width: 854px;
  8095. height: 510px
  8096. }
  8097. #dialog-preview .dialog-body .message {
  8098. top: 9px;
  8099. left: 10px;
  8100. overflow: hidden;
  8101. width: 464px;
  8102. text-overflow: ellipsis;
  8103. white-space: nowrap
  8104. }
  8105. #dialog-preview .dialog-body .preview-frame {
  8106. position: absolute;
  8107. top: 40px;
  8108. left: 0;
  8109. background: #000
  8110. }
  8111. #dialog-preview.youtube .preview-frame {
  8112. width: 484px;
  8113. height: 302px
  8114. }
  8115. #dialog-preview.soundcloud .preview-frame {
  8116. width: 480px;
  8117. height: 166px
  8118. }
  8119. #dialog-preview.tutorial .preview-frame {
  8120. top: 0;
  8121. width: 854px;
  8122. height: 510px
  8123. }
  8124. #dialog-user-role {
  8125. width: 550px
  8126. }
  8127. #dialog-user-role .dialog-body {
  8128. height: 350px
  8129. }
  8130. #dialog-user-role .dialog-body .image {
  8131. position: absolute;
  8132. top: 18px;
  8133. left: 23px
  8134. }
  8135. #dialog-user-role .dialog-body .name {
  8136. position: absolute;
  8137. top: 24px;
  8138. left: 75px;
  8139. font-size: 20px
  8140. }
  8141. #dialog-user-role .role-menu {
  8142. position: absolute;
  8143. top: 17px;
  8144. right: 26px;
  8145. z-index: 10;
  8146. width: 150px;
  8147. height: 43px;
  8148. background: #282c35;
  8149. font-size: 16px
  8150. }
  8151. #dialog-user-role .role-menu .selected {
  8152. position: absolute;
  8153. top: 10px;
  8154. left: 4px;
  8155. width: 146px
  8156. }
  8157. #dialog-user-role .role-menu .selected span {
  8158. position: absolute;
  8159. left: 25px
  8160. }
  8161. #dialog-user-role .role-menu .selected .rank {
  8162. top: 4px;
  8163. left: 4px
  8164. }
  8165. #dialog-user-role .role-menu .selected .icon-arrow-down-blue {
  8166. top: 4px;
  8167. right: 8px
  8168. }
  8169. #dialog-user-role .role-menu .menu {
  8170. position: absolute;
  8171. top: -52px;
  8172. left: 0;
  8173. display: none;
  8174. width: 100%
  8175. }
  8176. #dialog-user-role .role-menu .menu ul {
  8177. margin: 0;
  8178. padding: 0;
  8179. width: 100%;
  8180. list-style-type: none
  8181. }
  8182. #dialog-user-role .role-menu .menu li {
  8183. position: relative;
  8184. width: 100%;
  8185. height: 30px;
  8186. border-top: 1px solid #1c1f25;
  8187. background: #282c35;
  8188. cursor: pointer
  8189. }
  8190. #dialog-user-role .role-menu .menu li i {
  8191. top: 7px;
  8192. left: 8px
  8193. }
  8194. #dialog-user-role .role-menu .menu li span {
  8195. top: 6px;
  8196. left: 30px;
  8197. font-size: 13px
  8198. }
  8199. #dialog-user-role .role-menu .menu li:hover {
  8200. background: #282c35
  8201. }
  8202. #dialog-user-role .dialog-body .divider {
  8203. top: 75px
  8204. }
  8205. #dialog-user-role .dialog-body ul {
  8206. position: absolute;
  8207. top: 95px;
  8208. margin: 0;
  8209. padding: 0;
  8210. width: 50%;
  8211. list-style-type: none;
  8212. font-size: 16px
  8213. }
  8214. #dialog-user-role .dialog-body li {
  8215. position: relative;
  8216. height: 30px
  8217. }
  8218. #dialog-user-role .dialog-body li i {
  8219. top: 4px;
  8220. left: 5px
  8221. }
  8222. #dialog-user-role .dialog-body li span {
  8223. position: absolute;
  8224. top: 0;
  8225. left: 33px;
  8226. white-space: nowrap
  8227. }
  8228. #dialog-user-role .dialog-body ul.left {
  8229. left: 20px
  8230. }
  8231. #dialog-user-role .dialog-body ul.right {
  8232. right: -5px
  8233. }
  8234. .dialog.choice {
  8235. width: 510px;
  8236. height: 560px
  8237. }
  8238. .dialog.choice .dialog-body {
  8239. height: 450px
  8240. }
  8241. .dialog.choice .divider {
  8242. position: absolute;
  8243. top: 75px;
  8244. left: 0;
  8245. width: 100%;
  8246. height: 1px;
  8247. background: #282c35
  8248. }
  8249. .dialog.choice ul {
  8250. position: absolute;
  8251. top: 90px;
  8252. left: 10%;
  8253. margin: 0;
  8254. padding: 0;
  8255. width: 80%;
  8256. list-style-type: none
  8257. }
  8258. .dialog.choice li {
  8259. position: relative;
  8260. width: 100%;
  8261. height: 69px;
  8262. cursor: pointer
  8263. }
  8264. .dialog.choice li:hover {
  8265. background: #1c1f25
  8266. }
  8267. .dialog.choice li.selected {
  8268. background: #282c35
  8269. }
  8270. .dialog.choice li .radio {
  8271. position: absolute;
  8272. top: 20px;
  8273. left: 20px;
  8274. width: 30px;
  8275. height: 30px;
  8276. border-radius: 50%;
  8277. background: #282c35
  8278. }
  8279. .dialog.choice li.selected .radio {
  8280. background: #0a0a0a
  8281. }
  8282. .dialog.choice li i {
  8283. top: 1px;
  8284. left: 2px;
  8285. display: none
  8286. }
  8287. .dialog.choice li.selected i {
  8288. display: block
  8289. }
  8290. .dialog.choice li span {
  8291. position: absolute;
  8292. top: 25px;
  8293. left: 75px
  8294. }
  8295. .dialog.no-submit .button.submit {
  8296. background: #1c1f25!important;
  8297. color: #555d70!important;
  8298. cursor: default!important
  8299. }
  8300. #dialog-ban-user,
  8301. #dialog-mute-user {
  8302. height: 600px
  8303. }
  8304. #dialog-ban-user .dialog-body,
  8305. #dialog-mute-user .dialog-body {
  8306. height: 490px
  8307. }
  8308. #dialog-ban-user ul,
  8309. #dialog-mute-user ul {
  8310. top: 131px
  8311. }
  8312. #dialog-ban-user .username,
  8313. #dialog-mute-user .username {
  8314. position: relative;
  8315. top: 23px;
  8316. width: 100%;
  8317. color: #f04f30;
  8318. text-align: center;
  8319. font-size: 20px
  8320. }
  8321. #dialog-ban-user .duration,
  8322. #dialog-mute-user .duration {
  8323. position: absolute;
  8324. top: 76px;
  8325. left: 0;
  8326. width: 100%;
  8327. height: 40px;
  8328. border-bottom: 1px #282c35 solid;
  8329. font-size: 20px
  8330. }
  8331. #dialog-ban-user .duration .toggle,
  8332. #dialog-mute-user .duration .toggle {
  8333. position: relative;
  8334. top: 0;
  8335. float: left;
  8336. width: 33%;
  8337. height: 40px;
  8338. background: #111317;
  8339. cursor: pointer
  8340. }
  8341. #dialog-ban-user .duration .toggle.day,
  8342. #dialog-mute-user .duration .toggle.medium {
  8343. width: 34%
  8344. }
  8345. #dialog-ban-user .duration .toggle.day,
  8346. #dialog-ban-user .duration .toggle.forever,
  8347. #dialog-mute-user .duration .toggle.long,
  8348. #dialog-mute-user .duration .toggle.medium {
  8349. -webkit-box-shadow: inset 1px 0 0 #323742;
  8350. -moz-box-shadow: inset 1px 0 0 #323742;
  8351. box-shadow: inset 1px 0 0 #323742
  8352. }
  8353. #dialog-ban-user .duration .toggle:hover,
  8354. #dialog-mute-user .duration .toggle:hover {
  8355. background: #1c1f25
  8356. }
  8357. #dialog-ban-user .duration .toggle.selected,
  8358. #dialog-mute-user .duration .toggle.selected {
  8359. background: #282c35;
  8360. cursor: default
  8361. }
  8362. #dialog-ban-user .duration .toggle.selected:hover,
  8363. #dialog-mute-user .duration .toggle.selected:hover {
  8364. background: #282c35
  8365. }
  8366. #dialog-ban-user .duration .toggle span,
  8367. #dialog-mute-user .duration .toggle span {
  8368. position: absolute;
  8369. top: 6px;
  8370. left: 0;
  8371. width: 100%;
  8372. text-align: center
  8373. }
  8374. #dialog-ban-user.bouncer .duration .toggle.forever {
  8375. display: none
  8376. }
  8377. #dialog-ban-user.bouncer .duration .toggle {
  8378. width: 50%
  8379. }
  8380. #dialog-waitlist-ban-user {
  8381. height: 600px;
  8382. width: 650px
  8383. }
  8384. #dialog-waitlist-ban-user .dialog-body {
  8385. height: 490px
  8386. }
  8387. #dialog-waitlist-ban-user ul {
  8388. top: 131px
  8389. }
  8390. #dialog-waitlist-ban-user .username {
  8391. position: relative;
  8392. top: 23px;
  8393. width: 100%;
  8394. color: #f04f30;
  8395. text-align: center;
  8396. font-size: 20px
  8397. }
  8398. #dialog-waitlist-ban-user .duration {
  8399. position: absolute;
  8400. top: 76px;
  8401. left: 0;
  8402. width: 100%;
  8403. height: 40px;
  8404. border-bottom: 1px #282c35 solid;
  8405. font-size: 14px
  8406. }
  8407. #dialog-waitlist-ban-user .duration .toggle {
  8408. position: relative;
  8409. top: 0;
  8410. float: left;
  8411. width: 25%;
  8412. height: 40px;
  8413. background: #111317;
  8414. cursor: pointer;
  8415. text-align: center;
  8416. padding-top: 10px;
  8417. border-bottom: 1px solid #282c35;
  8418. box-sizing: border-box
  8419. }
  8420. #dialog-waitlist-ban-user .duration .toggle:nth-child(2) {
  8421. border-left: 1px solid #282c35
  8422. }
  8423. #dialog-waitlist-ban-user .duration .toggle.day,
  8424. #dialog-waitlist-ban-user .duration .toggle.forever {
  8425. -webkit-box-shadow: inset 1px 0 0 #323742;
  8426. -moz-box-shadow: inset 1px 0 0 #323742;
  8427. box-shadow: inset 1px 0 0 #323742
  8428. }
  8429. #dialog-waitlist-ban-user .duration .toggle:hover {
  8430. background: #1c1f25
  8431. }
  8432. #dialog-waitlist-ban-user .duration .toggle.selected {
  8433. background: #282c35;
  8434. cursor: default
  8435. }
  8436. #dialog-waitlist-ban-user .duration .toggle.selected:hover {
  8437. background: #282c35
  8438. }
  8439. #dialog-waitlist-ban-user.bouncer .duration .toggle.forever {
  8440. display: none
  8441. }
  8442. #dialog-waitlist-ban-user.bouncer .duration .toggle {
  8443. width: 33%
  8444. }
  8445. #dialog-skip .username {
  8446. position: relative;
  8447. top: 9px;
  8448. width: 100%;
  8449. text-align: center;
  8450. font-size: 20px
  8451. }
  8452. #dialog-skip .media {
  8453. position: absolute;
  8454. top: 40px;
  8455. left: 5%;
  8456. overflow: hidden;
  8457. width: 90%;
  8458. text-align: center;
  8459. text-overflow: ellipsis;
  8460. white-space: nowrap
  8461. }
  8462. #dialog-room-create {
  8463. width: 600px;
  8464. height: 470px
  8465. }
  8466. #dialog-room-create.choice .dialog-body {
  8467. height: 360px
  8468. }
  8469. #dialog-room-create .dialog-body .dialog-input-container {
  8470. top: 22px
  8471. }
  8472. #dialog-room-create .dialog-body .dialog-input-label {
  8473. top: 9px;
  8474. width: 75px
  8475. }
  8476. #dialog-room-create .dialog-body .dialog-input-background {
  8477. left: 85px;
  8478. width: 345px
  8479. }
  8480. #dialog-room-create .dialog-body .dialog-input-background input {
  8481. width: 325px
  8482. }
  8483. #dialog-room-create .dialog-body .private {
  8484. color: #f04f30
  8485. }
  8486. #dialog-room-create.choice ul {
  8487. left: 5%;
  8488. width: 90%;
  8489. text-align: left
  8490. }
  8491. #dialog-room-create.choice li span {
  8492. top: 23px;
  8493. font-size: 18px
  8494. }
  8495. #dialog-room-create .url {
  8496. position: absolute;
  8497. top: 235px;
  8498. left: 49px;
  8499. font-size: 18px
  8500. }
  8501. #dialog-room-create .url .value {
  8502. margin-left: 24px;
  8503. color: #808691
  8504. }
  8505. #dialog-room-create .status {
  8506. position: absolute;
  8507. top: 21px;
  8508. right: 15px;
  8509. padding: 12px 16px;
  8510. background: 0 0;
  8511. color: #eee;
  8512. text-align: center;
  8513. text-transform: uppercase;
  8514. font-weight: 600;
  8515. font-size: 18px
  8516. }
  8517. #dialog-room-create.checking .status {
  8518. padding-left: 44px
  8519. }
  8520. #dialog-room-create.available .status {
  8521. color: #67a952
  8522. }
  8523. #dialog-room-create.unavailable .status {
  8524. color: #f04f30
  8525. }
  8526. #dialog-room-create.empty .status {
  8527. display: none
  8528. }
  8529. #dialog-room-create .message {
  8530. top: 278px;
  8531. color: #808691;
  8532. text-align: left
  8533. }
  8534. .dialog-menu-container label {
  8535. position: absolute;
  8536. top: 3px;
  8537. left: 41px
  8538. }
  8539. .dialog.unavailable .button.submit {
  8540. background: #1c1f25;
  8541. color: #555d70;
  8542. cursor: default
  8543. }
  8544. #dialog-restricted-media {
  8545. width: 700px;
  8546. height: 497px
  8547. }
  8548. #dialog-restricted-media .dialog-body {
  8549. height: 387px
  8550. }
  8551. #dialog-restricted-media .media-name {
  8552. position: absolute;
  8553. top: 15px;
  8554. left: 5%;
  8555. overflow: hidden;
  8556. width: 90%;
  8557. color: #f04f30;
  8558. text-align: center;
  8559. text-overflow: ellipsis;
  8560. white-space: nowrap
  8561. }
  8562. #dialog-restricted-media .divider {
  8563. top: 48px;
  8564. height: 39px
  8565. }
  8566. #dialog-restricted-media .message {
  8567. top: 58px;
  8568. left: 5%;
  8569. width: 90%;
  8570. font-size: 14px
  8571. }
  8572. #dialog-restricted-media .dialog-frame .button.submit {
  8573. width: 100%
  8574. }
  8575. #dialog-restricted-media .media-list {
  8576. position: absolute;
  8577. top: 87px;
  8578. text-align: left
  8579. }
  8580. #dialog-restricted-media .media-list .meta {
  8581. position: relative;
  8582. margin-right: 10px;
  8583. margin-left: 90px;
  8584. width: auto;
  8585. height: 54px;
  8586. border-bottom: 1px solid #282c35
  8587. }
  8588. #dialog-restricted-media .media-list .row {
  8589. cursor: pointer
  8590. }
  8591. #dialog-restricted-media.no-alternative {
  8592. height: 198px
  8593. }
  8594. #dialog-restricted-media.no-alternative .dialog-body {
  8595. height: 88px
  8596. }
  8597. #dialog-restricted-media.no-alternative .media-list {
  8598. display: none
  8599. }
  8600. #dialog-level-up .dialog-frame:first-child {
  8601. height: 127px
  8602. }
  8603. #dialog-level-up .avi {
  8604. position: absolute;
  8605. top: -42px;
  8606. left: -60px;
  8607. width: 162px;
  8608. height: 192px;
  8609. background: url('https://cdn.plug.dj/_/static/images/levelup/avi.b2d9e5c4b94f75cf2015edc489b4f6ef776755b5.png') no-repeat
  8610. }
  8611. #dialog-badge-unlocked .bdg {
  8612. position: relative;
  8613. top: 92px;
  8614. display: inline-block;
  8615. margin: 0 auto
  8616. }
  8617. #dialog-level-up .dialog-frame .title {
  8618. top: 45px;
  8619. right: 0;
  8620. left: auto;
  8621. width: 80%;
  8622. color: #00b5e6
  8623. }
  8624. #dialog-badge-unlocked .dialog-body,
  8625. #dialog-level-up .dialog-body {
  8626. height: 253px;
  8627. text-align: center
  8628. }
  8629. #dialog-badge-unlocked .icon-dialog-close,
  8630. #dialog-level-up .icon-dialog-close {
  8631. display: none
  8632. }
  8633. #dialog-badge-unlocked .dialog-body .sunburst,
  8634. #dialog-level-up .dialog-body .sunburst {
  8635. position: absolute;
  8636. top: 14px;
  8637. left: 141px;
  8638. width: 226px;
  8639. height: 225px;
  8640. background: url('https://cdn.plug.dj/_/static/images/levelup/sunburst.98ea72ebd4576accdfc255d61ed84acdce413abe.png') no-repeat;
  8641. opacity: .8
  8642. }
  8643. #dialog-level-up .dialog-body .avp.pp {
  8644. position: relative;
  8645. top: 92px;
  8646. display: inline-block;
  8647. margin: 0 auto;
  8648. width: 70px;
  8649. height: 70px;
  8650. border-radius: 50%;
  8651. background: url('https://cdn.plug.dj/_/static/images/levelup/ep.8cd03e60eec33d3462c0a8b87b0fd2e1a43fdfe8.png') no-repeat;
  8652. -webkit-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .75);
  8653. -moz-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .75);
  8654. box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .75)
  8655. }
  8656. #dialog-level-up .dialog-body .avp {
  8657. position: relative;
  8658. top: 2px;
  8659. display: inline-block;
  8660. margin: 0 auto;
  8661. width: 266px;
  8662. height: 200px
  8663. }
  8664. #dialog-level-up .dialog-body .avp.rhc {
  8665. background: url('https://cdn.plug.dj/_/static/images/levelup/rhc.36c8bed84fbba116176d2db74b667e8c5c81678d.png') no-repeat
  8666. }
  8667. #dialog-level-up .dialog-body .avp.rock {
  8668. background: url('https://cdn.plug.dj/_/static/images/levelup/rock.0de10909b9b40bf424ad593deafbfb2b50cef3cd.png') no-repeat
  8669. }
  8670. #dialog-level-up .dialog-body .avp.eighties {
  8671. background: url('https://cdn.plug.dj/_/static/images/levelup/80s.ae33cca091a4e3c735b7dfba0e987c032b5d756f.png') no-repeat
  8672. }
  8673. #dialog-level-up .dialog-body .avp.robot {
  8674. background: url('https://cdn.plug.dj/_/static/images/levelup/robot.cd58663ae9ecce835917a331954f27d0cb356bc9.png') no-repeat
  8675. }
  8676. #dialog-level-up .dialog-body .avp.zoo {
  8677. background: url('https://cdn.plug.dj/_/static/images/levelup/zoo.3c8048479a995b00645930ce149eab67e2623768.png') no-repeat
  8678. }
  8679. #dialog-level-up .dialog-body .avp.warrior {
  8680. background: url('https://cdn.plug.dj/_/static/images/levelup/warrior.d3012e5c82b61097ad965214e661a4a885c46520.png') no-repeat
  8681. }
  8682. #dialog-level-up .dialog-body .avp.original {
  8683. background: url('https://cdn.plug.dj/_/static/images/levelup/original.3951e49ec677cf83d689bccdd04c49c8d339307c.png') no-repeat
  8684. }
  8685. #dialog-level-up .dialog-body .avp.community {
  8686. position: relative;
  8687. top: 67px;
  8688. display: inline-block;
  8689. margin: 0 auto;
  8690. width: 119px;
  8691. height: 118px;
  8692. background: url('https://cdn.plug.dj/_/static/images/levelup/community.8e10ab1f3842a6dd6cedee3e4cee780b44d6b26b.png') no-repeat
  8693. }
  8694. #dialog-level-up .dialog-body .avp.profile {
  8695. position: relative;
  8696. top: 72px;
  8697. display: inline-block;
  8698. margin: 0 auto;
  8699. width: 94px;
  8700. height: 108px;
  8701. background: url('https://cdn.plug.dj/_/static/images/levelup/profile.e248169f99a5c481d2bfd24132bd4be696bbc6d0.png') no-repeat
  8702. }
  8703. #dialog-level-up .dialog-body .reward {
  8704. position: absolute;
  8705. top: auto;
  8706. bottom: 32px;
  8707. left: 0;
  8708. width: 100%;
  8709. font-size: 16px
  8710. }
  8711. #dialog-badge-unlocked .dialog-body .message {
  8712. position: relative;
  8713. top: auto;
  8714. left: auto;
  8715. margin: 110px auto 0;
  8716. width: 80%
  8717. }
  8718. #dialog-level-up.no-cancel .dialog-frame .button.submit {
  8719. width: 100%
  8720. }
  8721. #dialog-purchase {
  8722. width: 630px;
  8723. height: 346px
  8724. }
  8725. #dialog-purchase .dialog-body {
  8726. height: 236px
  8727. }
  8728. #dialog-purchase .left {
  8729. position: relative;
  8730. float: left;
  8731. width: 50%;
  8732. height: 100%;
  8733. text-align: center
  8734. }
  8735. #dialog-purchase.avatar .left {
  8736. background: #535d80;
  8737. background: -moz-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  8738. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #535d80), color-stop(56%, #32324d), color-stop(73%, #1a1a1a), color-stop(100%, #73716d));
  8739. background: -webkit-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  8740. background: -o-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  8741. background: -ms-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  8742. background: linear-gradient(to bottom, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%)
  8743. }
  8744. #dialog-purchase.badge .left {
  8745. background: url('https://cdn.plug.dj/_/static/images/badgeunlock.e29b0b600ad1d35e79321d284a5625b2ee62431b.png') no-repeat
  8746. }
  8747. #dialog-purchase .left .avatar-box {
  8748. position: relative;
  8749. top: 5px;
  8750. display: inline-block;
  8751. overflow: hidden;
  8752. margin: 0 auto;
  8753. width: 220px;
  8754. height: 217px
  8755. }
  8756. #dialog-purchase .left .avatar-box.wide {
  8757. width: 100%
  8758. }
  8759. #dialog-purchase .left .avatar-box img {
  8760. position: absolute;
  8761. display: none
  8762. }
  8763. #dialog-purchase.badge .left .bdg {
  8764. position: relative;
  8765. top: 83px;
  8766. display: block;
  8767. margin: 0 auto
  8768. }
  8769. #dialog-purchase.badge .left .no-badge {
  8770. position: relative;
  8771. top: 87px;
  8772. display: block;
  8773. margin: 0 auto;
  8774. width: 50px;
  8775. height: 50px;
  8776. border: 4px solid #444a59;
  8777. border-radius: 50%
  8778. }
  8779. #dialog-purchase .right {
  8780. position: relative;
  8781. float: left;
  8782. width: 50%;
  8783. height: 100%;
  8784. text-align: center;
  8785. font-size: 20px
  8786. }
  8787. #dialog-purchase .right div {
  8788. position: relative;
  8789. margin: 20px auto 6px;
  8790. width: 90%;
  8791. height: 26px
  8792. }
  8793. #dialog-purchase .right .unlock-type {
  8794. margin-top: 15px;
  8795. margin-bottom: 25px
  8796. }
  8797. #dialog-purchase .right .unlock-type i {
  8798. position: relative;
  8799. display: inline-block
  8800. }
  8801. #dialog-purchase .right .unlock-type span {
  8802. position: relative;
  8803. top: -9px;
  8804. color: #808691;
  8805. font-size: 16px
  8806. }
  8807. #dialog-purchase .right .label {
  8808. position: absolute;
  8809. top: 0;
  8810. left: 0;
  8811. width: 45%;
  8812. color: #808691;
  8813. text-align: right
  8814. }
  8815. #dialog-purchase .right .value {
  8816. position: absolute;
  8817. top: 0;
  8818. right: 0;
  8819. width: 50%;
  8820. text-align: right
  8821. }
  8822. #dialog-purchase .right div.divider {
  8823. margin: 20px auto;
  8824. height: 1px;
  8825. background: #808691
  8826. }
  8827. #dialog-purchase .right div.balance {
  8828. margin-top: 0
  8829. }
  8830. #dialog-purchase.pp-and-sub {
  8831. width: 945px
  8832. }
  8833. #dialog-purchase.pp-and-sub .left {
  8834. width: 315px
  8835. }
  8836. #dialog-purchase.pp-and-sub .right {
  8837. width: 315px
  8838. }
  8839. #dialog-purchase .right.sub {
  8840. background: url('https://cdn.plug.dj/_/static/images/subscribe/subscribe_dialog.f99fc6f648e1c636d8a430e32884d7e3ddcee9bb.png') no-repeat
  8841. }
  8842. #dialog-purchase .right.cash {
  8843. text-align: left
  8844. }
  8845. #dialog-purchase .right.cash div {
  8846. height: auto
  8847. }
  8848. #dialog-purchase .right.cash .name {
  8849. margin-top: 28px;
  8850. font-size: 26px
  8851. }
  8852. #dialog-purchase .right.cash .description {
  8853. font-size: 16px
  8854. }
  8855. #dialog-purchase .right.cash .info {
  8856. margin-top: 10px
  8857. }
  8858. #dialog-purchase .right.cash .info .currency {
  8859. margin-right: -3px;
  8860. font-size: 22px
  8861. }
  8862. #dialog-purchase .right.cash .info .amount {
  8863. font-weight: 600;
  8864. font-size: 32px
  8865. }
  8866. .dialog-frame .button.submit.subscribe {
  8867. color: #eee;
  8868. background: #c59840;
  8869. background: -moz-linear-gradient(top, #c59840 0, #94720c 100%);
  8870. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c59840), color-stop(100%, #94720c));
  8871. background: -webkit-linear-gradient(top, #c59840 0, #94720c 100%);
  8872. background: -o-linear-gradient(top, #c59840 0, #94720c 100%);
  8873. background: -ms-linear-gradient(top, #c59840 0, #94720c 100%);
  8874. background: linear-gradient(to bottom, #c59840 0, #94720c 100%)
  8875. }
  8876. #dialog-purchase .dialog-frame .button.submit.purchase {
  8877. color: #eee;
  8878. background: #89be6c;
  8879. background: -moz-linear-gradient(top, #89be6c 0, #67a952 100%);
  8880. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #89be6c), color-stop(100%, #67a952));
  8881. background: -webkit-linear-gradient(top, #89be6c 0, #67a952 100%);
  8882. background: -o-linear-gradient(top, #89be6c 0, #67a952 100%);
  8883. background: -ms-linear-gradient(top, #89be6c 0, #67a952 100%);
  8884. background: linear-gradient(to bottom, #89be6c 0, #67a952 100%)
  8885. }
  8886. #dialog-purchase.pp-and-sub .dialog-frame .button {
  8887. width: 315px
  8888. }
  8889. #dialog-purchase.username .left {
  8890. background: #111317;
  8891. background: -moz-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  8892. background: -webkit-gradient(left top, left bottom, color-stop(0, #111317), color-stop(46%, #1c1f25), color-stop(100%, #0f1114));
  8893. background: -webkit-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  8894. background: -o-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  8895. background: -ms-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  8896. background: linear-gradient(to bottom, #111317 0, #1c1f25 46%, #0f1114 100%)
  8897. }
  8898. #dialog-purchase .username-box {
  8899. position: relative;
  8900. margin: 20px auto 0;
  8901. width: 90%;
  8902. height: 200px
  8903. }
  8904. #dialog-purchase .username-box input {
  8905. position: relative;
  8906. padding: 1em .75em;
  8907. width: 234px;
  8908. border: 0;
  8909. background: #282c35;
  8910. color: #eee;
  8911. font-weight: 400;
  8912. font-size: 14px;
  8913. font-family: "Open Sans", sans-serif
  8914. }
  8915. #dialog-purchase .username-box .container {
  8916. position: relative;
  8917. margin: 62px auto 0;
  8918. width: 90%
  8919. }
  8920. #dialog-purchase .username-box .container .spinner {
  8921. top: 24px;
  8922. right: 3px;
  8923. z-index: 5
  8924. }
  8925. #dialog-purchase .username-box .container.available .url {
  8926. display: block
  8927. }
  8928. #dialog-purchase .username-box .container .url {
  8929. position: relative;
  8930. display: none;
  8931. margin-top: 5px;
  8932. width: 234px;
  8933. color: #808691;
  8934. text-align: left;
  8935. overflow-wrap: break-word
  8936. }
  8937. #dialog-purchase .left .notice a,
  8938. #dialog-purchase .left .notice a:visited {
  8939. position: relative;
  8940. display: inline-block;
  8941. margin-top: 4px;
  8942. color: #009cdd
  8943. }
  8944. #dialog-gift-send .dialog-body {
  8945. height: 291px
  8946. }
  8947. #dialog-gift-send .info {
  8948. position: absolute;
  8949. top: 24px;
  8950. left: 0;
  8951. width: 100%;
  8952. text-align: center;
  8953. font-size: 20px
  8954. }
  8955. #dialog-gift-send .divider {
  8956. top: 75px
  8957. }
  8958. #dialog-gift-send .minimum {
  8959. position: absolute;
  8960. top: 93px;
  8961. left: 0;
  8962. width: 100%
  8963. }
  8964. #dialog-gift-send .amount {
  8965. position: relative;
  8966. top: 136px;
  8967. margin: 0 auto;
  8968. width: 230px
  8969. }
  8970. #dialog-gift-send .amount i {
  8971. top: 0;
  8972. left: 0
  8973. }
  8974. #dialog-gift-send .amount input {
  8975. top: 9px;
  8976. width: 170px
  8977. }
  8978. #dialog-gift-send .amount .dialog-input-background {
  8979. left: 60px;
  8980. width: 150px
  8981. }
  8982. #dialog-gift-send #recaptcha {
  8983. position: absolute;
  8984. top: 198px;
  8985. left: 103px
  8986. }
  8987. #dialog-gift-receive .dialog-body {
  8988. height: 250px
  8989. }
  8990. #dialog-gift-receive .sender {
  8991. position: absolute;
  8992. top: 20px;
  8993. left: 0;
  8994. width: 100%;
  8995. text-align: center;
  8996. font-size: 20px
  8997. }
  8998. #dialog-gift-receive .gift-card {
  8999. position: absolute;
  9000. top: 65px;
  9001. left: 105px;
  9002. width: 300px;
  9003. height: 160px;
  9004. background: url('https://cdn.plug.dj/_/static/images/giftcard.5978354056d85a8b97b476f9b660dd6e1602e1f2.png')
  9005. }
  9006. #dialog-gift-receive .amount {
  9007. position: absolute;
  9008. top: 61px;
  9009. left: 37px;
  9010. width: 263px;
  9011. height: 50px
  9012. }
  9013. #dialog-gift-receive .amount .box {
  9014. position: relative;
  9015. margin: 0 auto
  9016. }
  9017. #dialog-gift-receive .amount .box i {
  9018. position: relative;
  9019. top: 14px;
  9020. display: inline-block;
  9021. margin-right: 5px
  9022. }
  9023. #dialog-gift-receive .amount .box span {
  9024. position: relative;
  9025. display: inline-block;
  9026. font-size: 20px
  9027. }
  9028. #dialog-forced-offer {
  9029. border: 1px solid #fff
  9030. }
  9031. #dialog-forced-offer .dialog-body {
  9032. height: 180px;
  9033. background: #fff
  9034. }
  9035. #dialog-forced-offer h2 {
  9036. font-weight: 400;
  9037. font-size: 19px;
  9038. color: #000
  9039. }
  9040. #dialog-forced-offer a {
  9041. color: #30c8fc;
  9042. text-decoration: underline;
  9043. cursor: pointer;
  9044. font-weight: 400;
  9045. font-size: 16px
  9046. }
  9047. #dialog-forced-offer .android {
  9048. margin-right: 10px;
  9049. display: inline-block
  9050. }
  9051. #dialog-forced-offer .iphone {
  9052. display: inline-block
  9053. }
  9054. #dialog-forced-offer .appsAvailable {
  9055. padding: 20px 0 15px
  9056. }
  9057. #dialog-forced-offer #alreadyDownloadedLink {
  9058. padding: 10px 0 0
  9059. }
  9060. #dialog-forced-offer .android-badge {
  9061. width: 151px;
  9062. height: 45px;
  9063. background: url('https://cdn.plug.dj/_/static/images/index/android.240a7c9ad7a4e1412d793a8061500922926f7151.png') no-repeat;
  9064. background-size: 151px 45px
  9065. }
  9066. #dialog-forced-offer .iphone-badge {
  9067. width: 152px;
  9068. height: 45px;
  9069. background: url('https://cdn.plug.dj/_/static/images/index/ios.903d9daf5f8a45ff1e0cc6836e7c77f241b25c60.png') no-repeat;
  9070. background-size: 152px 45px
  9071. }
  9072. #dj-button {
  9073. position: absolute;
  9074. top: 450px;
  9075. height: 61px;
  9076. width: 230px;
  9077. background: #282c35;
  9078. border-radius: 4px 4px 4px 4px;
  9079. cursor: pointer;
  9080. line-height: 59px;
  9081. z-index: 8
  9082. }
  9083. #dj-button .left {
  9084. position: absolute;
  9085. left: 0;
  9086. top: 0;
  9087. width: 72px;
  9088. height: 100%;
  9089. border-radius: 4px 0 0 4px;
  9090. background: #00b5e6;
  9091. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9092. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  9093. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9094. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9095. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9096. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%)
  9097. }
  9098. #dj-button .left .icon-current-dj-white {
  9099. left: 22px;
  9100. top: 17px
  9101. }
  9102. #dj-button .left .icon-join-waitlist-big {
  9103. left: 20px;
  9104. top: 16px
  9105. }
  9106. #dj-button .left .icon-leave-booth-big {
  9107. left: 23px;
  9108. top: 16px
  9109. }
  9110. #dj-button .left .icon-booth-locked-big,
  9111. #dj-button .left .icon-leave-waitlist-big,
  9112. #dj-button .left .icon-waitlist-full-big {
  9113. left: 22px;
  9114. top: 16px
  9115. }
  9116. #dj-button span {
  9117. margin-left: 77px;
  9118. width: 148px;
  9119. font-size: 20px;
  9120. line-height: 22px;
  9121. font-weight: 300;
  9122. text-align: center;
  9123. display: inline-block;
  9124. vertical-align: middle
  9125. }
  9126. #dj-button.is-full,
  9127. #dj-button.is-locked {
  9128. cursor: default
  9129. }
  9130. #dj-button.is-full .left,
  9131. #dj-button.is-locked .left {
  9132. background: #444a59
  9133. }
  9134. #dj-button.is-leave .left,
  9135. #dj-button.is-quit .left {
  9136. background: #f46b40;
  9137. background: -moz-linear-gradient(top, #f46b40 0, #f04f30 100%);
  9138. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f46b40), color-stop(100%, #f04f30));
  9139. background: -webkit-linear-gradient(top, #f46b40 0, #f04f30 100%);
  9140. background: -o-linear-gradient(top, #f46b40 0, #f04f30 100%);
  9141. background: -ms-linear-gradient(top, #f46b40 0, #f04f30 100%);
  9142. background: linear-gradient(to bottom, #f46b40 0, #f04f30 100%)
  9143. }
  9144. #dj-button .spinner {
  9145. top: 16px;
  9146. left: 36px
  9147. }
  9148. .video-only #dj-button {
  9149. border-radius: 0
  9150. }
  9151. .video-only #dj-button .left {
  9152. border-radius: 0
  9153. }
  9154. .dropdown {
  9155. position: relative;
  9156. float: left;
  9157. width: 300px;
  9158. height: 39px;
  9159. background: #282c35;
  9160. font-size: 16px;
  9161. cursor: pointer;
  9162. z-index: 99
  9163. }
  9164. .dropdown.open dd {
  9165. display: block
  9166. }
  9167. .dropdown.open .icon-arrow-down-grey {
  9168. display: none
  9169. }
  9170. .dropdown.open .icon-arrow-up-grey {
  9171. display: block
  9172. }
  9173. .dropdown dt {
  9174. position: relative;
  9175. width: 100%;
  9176. height: 100%;
  9177. -webkit-box-shadow: inset -39px 0 0 0 #444a59;
  9178. -moz-box-shadow: inset -39px 0 0 0 #444a59;
  9179. box-shadow: inset -39px 0 0 0 #444a59
  9180. }
  9181. .dropdown dt span {
  9182. position: relative;
  9183. top: 9px;
  9184. margin-left: 15px
  9185. }
  9186. .dropdown dd {
  9187. position: relative;
  9188. display: none;
  9189. background: #1c1f25;
  9190. max-height: 412px;
  9191. overflow-x: hidden;
  9192. overflow-y: auto
  9193. }
  9194. .dropdown dd .row {
  9195. position: relative;
  9196. width: 100%;
  9197. height: 39px;
  9198. color: #808691
  9199. }
  9200. .dropdown dd .row.selected {
  9201. display: none
  9202. }
  9203. .dropdown dd .row span {
  9204. position: relative;
  9205. top: 9px;
  9206. margin-left: 15px
  9207. }
  9208. .dropdown dd .row:hover {
  9209. background: #323742;
  9210. color: #eee
  9211. }
  9212. .dropdown dt i {
  9213. position: relative;
  9214. top: 5px;
  9215. float: right;
  9216. margin-right: 4px
  9217. }
  9218. .dropdown dt .icon-arrow-up-grey {
  9219. top: 4px;
  9220. display: none
  9221. }
  9222. .dropdown.disabled {
  9223. cursor: default
  9224. }
  9225. .dropdown.disabled dt i {
  9226. display: none
  9227. }
  9228. .dropdown.disabled dt {
  9229. -webkit-box-shadow: none;
  9230. -moz-box-shadow: none;
  9231. box-shadow: none
  9232. }
  9233. .dropdown span.level {
  9234. position: absolute!important;
  9235. top: 11px!important;
  9236. right: 15px;
  9237. margin-left: 0!important;
  9238. font-size: 12px;
  9239. font-family: Roboto, sans-serif;
  9240. text-align: right
  9241. }
  9242. .dropdown dt span.level {
  9243. right: 47px;
  9244. color: #808691
  9245. }
  9246. @keyframes emojiNodeInserted {
  9247. from {
  9248. clip: rect(1px, auto, auto, auto)
  9249. }
  9250. to {
  9251. clip: rect(0, auto, auto, auto)
  9252. }
  9253. }
  9254. @-moz-keyframes emojiNodeInserted {
  9255. from {
  9256. clip: rect(1px, auto, auto, auto)
  9257. }
  9258. to {
  9259. clip: rect(0, auto, auto, auto)
  9260. }
  9261. }
  9262. @-webkit-keyframes emojiNodeInserted {
  9263. from {
  9264. clip: rect(1px, auto, auto, auto)
  9265. }
  9266. to {
  9267. clip: rect(0, auto, auto, auto)
  9268. }
  9269. }
  9270. @-ms-keyframes emojiNodeInserted {
  9271. from {
  9272. clip: rect(1px, auto, auto, auto)
  9273. }
  9274. to {
  9275. clip: rect(0, auto, auto, auto)
  9276. }
  9277. }
  9278. @-o-keyframes emojiNodeInserted {
  9279. from {
  9280. clip: rect(1px, auto, auto, auto)
  9281. }
  9282. to {
  9283. clip: rect(0, auto, auto, auto)
  9284. }
  9285. }
  9286. #chat-messages>div {
  9287. animation-duration: 1ms;
  9288. -o-animation-duration: 1ms;
  9289. -ms-animation-duration: 1ms;
  9290. -moz-animation-duration: 1ms;
  9291. -webkit-animation-duration: 1ms;
  9292. animation-name: emojiNodeInserted;
  9293. -o-animation-name: emojiNodeInserted;
  9294. -ms-animation-name: emojiNodeInserted;
  9295. -moz-animation-name: emojiNodeInserted;
  9296. -webkit-animation-name: emojiNodeInserted
  9297. }
  9298. span.emoji {
  9299. display: -moz-inline-box;
  9300. -moz-box-orient: vertical;
  9301. display: inline-block;
  9302. vertical-align: bottom;
  9303. width: 1em;
  9304. height: 1em;
  9305. background-size: 1em;
  9306. background-repeat: no-repeat;
  9307. text-indent: -9999px;
  9308. background-position: 50%, 50%;
  9309. background-size: contain
  9310. }
  9311. span.emoji-sizer {
  9312. width: 16px;
  9313. height: 16px
  9314. }
  9315. span.emoji-outer {
  9316. display: -moz-inline-box;
  9317. display: inline-block;
  9318. width: 16px;
  9319. height: 16px
  9320. }
  9321. span.emoji-inner {
  9322. display: -moz-inline-box;
  9323. display: inline-block;
  9324. background: url('https://cdn.plug.dj/_/static/images/emoji/sheet_apple_64.9e49508d393f52b91cd713bf158f43edd8067ea0.png');
  9325. text-indent: -9999px;
  9326. width: 100%;
  9327. height: 100%;
  9328. vertical-align: bottom
  9329. }
  9330. img.emoji {
  9331. width: 1em;
  9332. height: 1em
  9333. }
  9334. span.gemoji-plug {
  9335. background-image: url('https://cdn.plug.dj/_/static/images/emoji/sheet_gemoji_plug_16.9c50116d31ce8b656a905409c4dbf1a20b10d691.png');
  9336. background-repeat: no-repeat
  9337. }
  9338. span.gemoji-plug-metal {
  9339. background-position: -5px -5px
  9340. }
  9341. span.gemoji-plug-octocat {
  9342. background-position: -31px -5px
  9343. }
  9344. span.gemoji-plug-shipit,
  9345. span.gemoji-plug-squirrel {
  9346. background-position: -5px -31px
  9347. }
  9348. span.gemoji-plug-troll,
  9349. span.gemoji-plug-trollface {
  9350. background-position: -31px -31px
  9351. }
  9352. #footer {
  9353. position: absolute;
  9354. left: 0;
  9355. z-index: 90;
  9356. width: 100%;
  9357. height: 54px;
  9358. background: #282c35;
  9359. -webkit-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9360. -moz-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9361. box-shadow: inset 0 2px 0 -1px #0a0a0a
  9362. }
  9363. #footer .dark-label {
  9364. color: #808691
  9365. }
  9366. #playlist-button {
  9367. position: absolute;
  9368. top: 0;
  9369. left: 0;
  9370. z-index: 100;
  9371. width: 53px;
  9372. height: 54px;
  9373. -webkit-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9374. background: #ac76ff;
  9375. background: -moz-linear-gradient(top, #ac76ff 0, #925aff 100%);
  9376. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ac76ff), color-stop(100%, #925aff));
  9377. background: -webkit-linear-gradient(top, #ac76ff 0, #925aff 100%);
  9378. background: -o-linear-gradient(top, #ac76ff 0, #925aff 100%);
  9379. background: -ms-linear-gradient(top, #ac76ff 0, #925aff 100%);
  9380. background: linear-gradient(to bottom, #ac76ff 0, #925aff 100%);
  9381. -moz-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9382. box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9383. cursor: pointer
  9384. }
  9385. #playlist-button i {
  9386. top: 14px;
  9387. left: 12px
  9388. }
  9389. #footer .bar-button {
  9390. overflow: hidden
  9391. }
  9392. #footer .bar-button .section {
  9393. position: relative;
  9394. float: left;
  9395. height: 100%
  9396. }
  9397. #footer .bar-button .section span {
  9398. position: relative;
  9399. top: 15px;
  9400. float: left
  9401. }
  9402. #footer .bar-button .section .chevron {
  9403. position: relative;
  9404. top: 27px;
  9405. float: right;
  9406. padding: 1px;
  9407. width: 52px;
  9408. height: 0;
  9409. text-align: center;
  9410. -webkit-transform: rotate(270deg);
  9411. -moz-transform: rotate(270deg);
  9412. -ms-transform: rotate(270deg);
  9413. -o-transform: rotate(270deg);
  9414. transform: rotate(270deg)
  9415. }
  9416. #footer .bar-button .section .chevron:before {
  9417. position: absolute;
  9418. top: 0;
  9419. left: 0;
  9420. width: 51%;
  9421. height: 100%;
  9422. background: #323742;
  9423. content: '';
  9424. -webkit-transform: skew(0deg, 18deg);
  9425. -moz-transform: skew(0deg, 18deg);
  9426. -ms-transform: skew(0deg, 18deg);
  9427. -o-transform: skew(0deg, 18deg);
  9428. transform: skew(0deg, 18deg)
  9429. }
  9430. #footer .bar-button .section .chevron:after {
  9431. position: absolute;
  9432. top: 0;
  9433. right: 0;
  9434. width: 49%;
  9435. height: 100%;
  9436. background: #323742;
  9437. content: '';
  9438. -webkit-transform: skew(0deg, -17deg);
  9439. -moz-transform: skew(0deg, -17deg);
  9440. -ms-transform: skew(0deg, -17deg);
  9441. -o-transform: skew(0deg, -17deg);
  9442. transform: skew(0deg, -17deg)
  9443. }
  9444. ​ #your-active-playlist {
  9445. margin-right: -11px;
  9446. white-space: nowrap
  9447. }
  9448. #your-active-playlist span {
  9449. margin-right: -10px;
  9450. margin-left: 4px
  9451. }
  9452. #footer .bar-button.no-playlist #your-active-playlist {
  9453. display: none
  9454. }
  9455. #your-active-playlist i {
  9456. position: relative;
  9457. top: 13px;
  9458. float: left;
  9459. margin-left: 6px
  9460. }
  9461. #your-next-media {
  9462. display: none
  9463. }
  9464. #your-next-media i {
  9465. position: absolute;
  9466. top: 13px;
  9467. left: 6px
  9468. }
  9469. #your-next-media.in-history {
  9470. color: #f46b40
  9471. }
  9472. #footer .bar-button .section:last-child {
  9473. position: absolute;
  9474. display: none
  9475. }
  9476. #footer .bar-button .section:last-child span {
  9477. position: absolute;
  9478. left: 42px;
  9479. float: none;
  9480. overflow: hidden;
  9481. text-overflow: ellipsis;
  9482. white-space: nowrap
  9483. }
  9484. #footer-user {
  9485. position: absolute;
  9486. right: 0;
  9487. width: 345px;
  9488. height: 100%
  9489. }
  9490. #footer-user .buttons {
  9491. position: absolute;
  9492. top: 1px;
  9493. left: 0;
  9494. width: 100%;
  9495. height: 53px
  9496. }
  9497. #footer-user .buttons .button {
  9498. position: relative;
  9499. float: left;
  9500. width: 20%;
  9501. height: 100%;
  9502. -webkit-box-shadow: inset 1px 0 0 0 #0a0a0a;
  9503. -moz-box-shadow: inset 1px 0 0 0 #0a0a0a;
  9504. box-shadow: inset 1px 0 0 0 #0a0a0a;
  9505. text-align: center;
  9506. cursor: pointer
  9507. }
  9508. #footer-user .buttons .button:hover {
  9509. background: #323742
  9510. }
  9511. #footer-user .buttons .button.inventory:hover {
  9512. -webkit-box-shadow: inset 1px 0 0 0 #323742;
  9513. -moz-box-shadow: inset 1px 0 0 0 #323742;
  9514. box-shadow: inset 1px 0 0 0 #323742
  9515. }
  9516. #footer-user .buttons .button .icon {
  9517. position: relative;
  9518. top: 12px;
  9519. left: auto;
  9520. display: inline-block
  9521. }
  9522. #footer-user .buttons .button .bdg {
  9523. position: relative;
  9524. top: 12px;
  9525. left: auto;
  9526. display: inline-block
  9527. }
  9528. #footer-user .buttons .button .no-badge {
  9529. position: absolute;
  9530. top: 17px;
  9531. left: 25px;
  9532. width: 16px;
  9533. height: 16px;
  9534. border: 2px solid #444a59;
  9535. border-radius: 50%
  9536. }
  9537. #footer-user .buttons .button.store:hover {
  9538. background: #00b5e6;
  9539. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9540. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  9541. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9542. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9543. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  9544. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%)
  9545. }
  9546. #footer-user .buttons .button.settings .icon {
  9547. top: 11px
  9548. }
  9549. #footer-user .button.inventory .image {
  9550. position: relative;
  9551. margin: 0 auto;
  9552. width: 61px;
  9553. height: 100%
  9554. }
  9555. #footer-user .thumb {
  9556. top: 6px;
  9557. left: 11px;
  9558. border: 2px solid transparent
  9559. }
  9560. #footer-user .buttons .button .count {
  9561. position: absolute;
  9562. top: 5px;
  9563. right: 6px;
  9564. display: none;
  9565. padding: 0 6px;
  9566. min-width: 10px;
  9567. border-radius: 12px;
  9568. background: #db182e;
  9569. text-align: center;
  9570. font-size: 12px
  9571. }
  9572. #footer-user .buttons .button.notify .count {
  9573. display: block
  9574. }
  9575. #footer-user .info {
  9576. position: absolute;
  9577. top: -54px;
  9578. left: 0;
  9579. display: none;
  9580. width: 345px;
  9581. height: 54px;
  9582. background: #323742
  9583. }
  9584. #footer-user .info.showing {
  9585. display: block
  9586. }
  9587. #footer-user .info .name {
  9588. position: absolute;
  9589. top: 5px;
  9590. left: 10px;
  9591. overflow: hidden;
  9592. width: 230px;
  9593. text-overflow: ellipsis;
  9594. white-space: nowrap;
  9595. font-weight: 400;
  9596. font-size: 15px
  9597. }
  9598. #footer-user .info .name i {
  9599. position: relative;
  9600. top: 3px;
  9601. display: none;
  9602. margin-right: 4px
  9603. }
  9604. #footer-user .info .name span {
  9605. position: relative;
  9606. display: inline
  9607. }
  9608. #footer-user .info.is-admin .name i,
  9609. #footer-user .info.is-ambassador .name i,
  9610. #footer-user .info.is-plot .name i,
  9611. #footer-user .info.is-promoter .name i,
  9612. #footer-user .info.is-sitemod .name i,
  9613. #footer-user .info.is-staff .name i {
  9614. display: inline-block
  9615. }
  9616. #footer-user .info.is-staff .name i.icon-chat-dj {
  9617. top: 4px
  9618. }
  9619. #footer-user .info .meta {
  9620. position: absolute;
  9621. top: 28px;
  9622. left: 10px;
  9623. width: 230px;
  9624. white-space: nowrap;
  9625. font-size: 16px
  9626. }
  9627. #footer-user .info .meta div {
  9628. position: relative;
  9629. display: inline-block;
  9630. margin-right: 9px
  9631. }
  9632. #footer-user .info .meta .label {
  9633. margin-right: 5px;
  9634. color: #808691
  9635. }
  9636. #footer-user .info .meta div.bar {
  9637. position: relative;
  9638. display: inline-block;
  9639. margin-top: 5px;
  9640. margin-right: 4px;
  9641. width: 150px;
  9642. height: 12px;
  9643. background: #555d70
  9644. }
  9645. #footer-user .info .bar .progress {
  9646. position: absolute;
  9647. top: 0;
  9648. left: 0;
  9649. float: none;
  9650. width: 0;
  9651. height: 100%;
  9652. background: #009cdd
  9653. }
  9654. #footer-user .info.boosted .bar .progress {
  9655. background: #009cdd;
  9656. background: -moz-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  9657. background: -webkit-gradient(left top, right top, color-stop(0, #009cdd), color-stop(70%, #009bdd), color-stop(100%, #db182f));
  9658. background: -webkit-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  9659. background: -o-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  9660. background: -ms-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  9661. background: linear-gradient(to right, #009cdd 0, #009bdd 70%, #db182f 100%)
  9662. }
  9663. #footer-user .info .bar .value {
  9664. position: absolute;
  9665. top: -1px;
  9666. left: 0;
  9667. width: 100%;
  9668. text-align: center;
  9669. font-weight: 600;
  9670. font-size: 10px
  9671. }
  9672. #footer-user .info.is-admin .meta div.bar {
  9673. display: none
  9674. }
  9675. #footer-user .info .points {
  9676. position: absolute;
  9677. top: 6px;
  9678. right: 0;
  9679. width: 100px
  9680. }
  9681. #footer-user .info .points i {
  9682. position: relative;
  9683. top: -4px;
  9684. float: left;
  9685. margin-right: 2px
  9686. }
  9687. #footer-user .info.is-admin .points {
  9688. width: 135px
  9689. }
  9690. #footer-user .info .pp {
  9691. position: absolute;
  9692. top: 23px;
  9693. left: 0
  9694. }
  9695. #footer-user .info.is-admin .pp {
  9696. right: 10px
  9697. }
  9698. #footer-user .back,
  9699. #footer-user .signup {
  9700. position: absolute;
  9701. z-index: 7;
  9702. display: none;
  9703. width: 100%;
  9704. height: 100%;
  9705. background: #555d70;
  9706. -webkit-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9707. -moz-box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9708. box-shadow: inset 0 2px 0 -1px #0a0a0a;
  9709. text-align: center;
  9710. cursor: pointer
  9711. }
  9712. #footer-user .signup {
  9713. z-index: 5;
  9714. background: #009cdd
  9715. }
  9716. #footer-user .back span,
  9717. #footer-user .signup span {
  9718. position: absolute;
  9719. top: 13px;
  9720. left: 0;
  9721. width: 100%;
  9722. font-size: 20px
  9723. }
  9724. #footer-user.showing .back {
  9725. display: block
  9726. }
  9727. #footer-user.showing .buttons {
  9728. display: none
  9729. }
  9730. .app-right .friends {
  9731. position: absolute;
  9732. top: 0;
  9733. left: 0;
  9734. display: none;
  9735. width: 100%;
  9736. height: 100%;
  9737. background: #0a0a0a
  9738. }
  9739. .app-right .friends .header {
  9740. position: absolute;
  9741. top: 0;
  9742. left: 0;
  9743. display: none;
  9744. width: 345px;
  9745. height: 47px;
  9746. background: #282c35;
  9747. cursor: pointer
  9748. }
  9749. .app-right .friends.has-requests .header {
  9750. display: block
  9751. }
  9752. .app-right .friends .header i {
  9753. position: absolute;
  9754. top: 21px;
  9755. left: 14px;
  9756. width: 6px;
  9757. height: 6px;
  9758. border-radius: 50%;
  9759. background: #db182e
  9760. }
  9761. .app-right .friends .header span {
  9762. position: absolute;
  9763. top: 14px;
  9764. left: 30px
  9765. }
  9766. .app-right .friends .list-header {
  9767. position: absolute;
  9768. top: 0;
  9769. left: 0;
  9770. width: 100%;
  9771. height: 48px;
  9772. border-bottom: #1c1f25 1px solid;
  9773. font-size: 18px
  9774. }
  9775. .app-right .friends.has-requests .list-header {
  9776. top: 47px
  9777. }
  9778. .app-right .friends .list-header .icon {
  9779. position: relative;
  9780. top: 10px;
  9781. float: left;
  9782. margin-left: 6px
  9783. }
  9784. .app-right .friends .list-header .count {
  9785. position: relative;
  9786. top: 11px;
  9787. float: left;
  9788. margin-left: 2px
  9789. }
  9790. .app-right .friends .list-header .title {
  9791. position: relative;
  9792. top: 11px;
  9793. float: left;
  9794. margin-left: 7px
  9795. }
  9796. .app-right .friends .list-header .input-background {
  9797. position: absolute;
  9798. top: 9px;
  9799. right: 17px;
  9800. width: 115px;
  9801. height: 30px;
  9802. background: #0a0a0a;
  9803. -webkit-box-shadow: inset 0 0 0 1px #444a59;
  9804. -moz-box-shadow: inset 0 0 0 1px #444a59;
  9805. box-shadow: inset 0 0 0 1px #444a59
  9806. }
  9807. .app-right .friends .list-header input {
  9808. position: absolute;
  9809. top: 6px;
  9810. left: 8px;
  9811. width: 108px;
  9812. outline: 0;
  9813. border: 0;
  9814. background: 0 0;
  9815. color: #eee;
  9816. font-weight: 400;
  9817. font-size: 13px;
  9818. font-family: "Open Sans", sans-serif
  9819. }
  9820. .app-right .friends .list-header .clear-filter {
  9821. position: absolute;
  9822. top: 11px;
  9823. right: 20px;
  9824. display: none;
  9825. overflow: hidden;
  9826. width: 23px;
  9827. height: 23px;
  9828. cursor: pointer
  9829. }
  9830. .app-right .friends .list-header .clear-filter .icon-clear-input {
  9831. top: -2px;
  9832. left: -8px
  9833. }
  9834. .app-right .friends .list-header .divider {
  9835. position: absolute;
  9836. top: 0;
  9837. left: 0;
  9838. width: 285px;
  9839. height: 1px;
  9840. background: #1c1f25
  9841. }
  9842. .app-right .friends.has-requests .list-header .divider {
  9843. display: none
  9844. }
  9845. #dashboard-border .app-right .friends .list-header .divider {
  9846. width: 100%
  9847. }
  9848. .app-right .friends .list {
  9849. position: absolute;
  9850. top: 49px;
  9851. left: 0;
  9852. overflow-x: hidden;
  9853. overflow-y: auto;
  9854. width: 345px
  9855. }
  9856. .app-right .friends.has-requests .list {
  9857. top: 96px
  9858. }
  9859. .app-right .friends .list .row {
  9860. position: relative;
  9861. float: left;
  9862. width: 100%;
  9863. height: 41px
  9864. }
  9865. .app-right .friends .list .row .image {
  9866. position: relative;
  9867. top: 5px;
  9868. float: left;
  9869. margin-left: 9px;
  9870. width: 31px;
  9871. height: 31px
  9872. }
  9873. .app-right .friends .list .row .name {
  9874. position: relative;
  9875. float: left
  9876. }
  9877. .app-right .friends .list .row .name i {
  9878. position: relative;
  9879. float: left;
  9880. margin-top: 2px;
  9881. margin-right: 5px
  9882. }
  9883. .app-right .friends .list .row.is-ambassador .name i {
  9884. margin-left: -1px
  9885. }
  9886. .app-right .friends .list .row.is-sitemod .name i {
  9887. margin-left: -1px
  9888. }
  9889. .app-right .friends .list .row.is-plot .name i {
  9890. margin-left: -1px
  9891. }
  9892. .app-right .friends .list .row.is-promoter .name i {
  9893. margin-left: -1px
  9894. }
  9895. .app-right .friends .list .row.is-offline .name span {
  9896. color: #808691
  9897. }
  9898. .app-right .friends .list .row.is-offline .image i {
  9899. -webkit-filter: grayscale(100%);
  9900. -moz-filter: grayscale(100%);
  9901. filter: grayscale(100%);
  9902. opacity: .5
  9903. }
  9904. .app-right .friends .list .row .name span {
  9905. position: relative;
  9906. float: left;
  9907. overflow: hidden;
  9908. width: 140px;
  9909. text-overflow: ellipsis;
  9910. white-space: nowrap
  9911. }
  9912. .app-right .friends .list .row.is-admin .name span,
  9913. .app-right .friends .list .row.is-ambassador .name span,
  9914. .app-right .friends .list .row.is-plot .name span,
  9915. .app-right .friends .list .row.is-promoter .name span,
  9916. .app-right .friends .list .row.is-sitemod .name span {
  9917. width: 119px
  9918. }
  9919. .app-right .friends .list .row .room {
  9920. position: absolute;
  9921. top: 0;
  9922. right: 0;
  9923. overflow: hidden;
  9924. width: 140px;
  9925. color: #808691;
  9926. text-overflow: ellipsis;
  9927. white-space: nowrap
  9928. }
  9929. .app-right .friends .list .row.clickable .room {
  9930. cursor: pointer
  9931. }
  9932. .app-right .friends .list .row.clickable .room:hover {
  9933. text-decoration: underline
  9934. }
  9935. .app-right .friends .list .row .meta {
  9936. position: relative;
  9937. top: 11px;
  9938. float: left;
  9939. margin-left: 6px;
  9940. width: 280px;
  9941. height: 30px
  9942. }
  9943. .app-header {
  9944. position: absolute;
  9945. top: 0;
  9946. left: 0;
  9947. z-index: 20;
  9948. overflow: hidden;
  9949. width: 100%;
  9950. height: 54px;
  9951. background: #1c1f25;
  9952. -webkit-box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  9953. -moz-box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  9954. box-shadow: inset 0 -2px 0 -1px #0a0a0a
  9955. }
  9956. #room-bar {
  9957. width: 500px
  9958. }
  9959. #room-bar .icon-room {
  9960. top: 13px;
  9961. left: 7px
  9962. }
  9963. #room-bar .favorite {
  9964. top: 12px;
  9965. right: 0;
  9966. width: 30px;
  9967. height: 30px
  9968. }
  9969. #room-bar .favorite i {
  9970. top: 0;
  9971. left: 0
  9972. }
  9973. #room-name {
  9974. position: absolute;
  9975. top: 7px;
  9976. left: 44px;
  9977. overflow: hidden;
  9978. text-overflow: ellipsis;
  9979. white-space: nowrap
  9980. }
  9981. #room-host {
  9982. position: absolute;
  9983. top: 29px;
  9984. left: 44px;
  9985. overflow: hidden;
  9986. white-space: nowrap;
  9987. font-size: 12px
  9988. }
  9989. #now-playing-bar {
  9990. position: absolute;
  9991. height: 54px
  9992. }
  9993. #now-playing-bar i {
  9994. top: 12px;
  9995. left: 10px
  9996. }
  9997. #now-playing-media {
  9998. position: absolute;
  9999. top: 7px;
  10000. left: 47px;
  10001. overflow: hidden;
  10002. text-overflow: ellipsis;
  10003. white-space: nowrap
  10004. }
  10005. #now-playing-dj {
  10006. position: absolute;
  10007. top: 29px;
  10008. left: 47px;
  10009. overflow: hidden;
  10010. white-space: nowrap;
  10011. font-size: 12px
  10012. }
  10013. #now-playing-time {
  10014. position: absolute;
  10015. top: 5px;
  10016. right: 64px;
  10017. width: auto;
  10018. height: auto
  10019. }
  10020. #now-playing-time i {
  10021. position: relative;
  10022. top: 3px;
  10023. float: left;
  10024. margin-right: 20px
  10025. }
  10026. #now-playing-time span {
  10027. float: right;
  10028. text-align: right;
  10029. font-weight: 300
  10030. }
  10031. #now-playing-time span.elapsing {
  10032. color: #f04f30
  10033. }
  10034. #history-button {
  10035. position: absolute;
  10036. right: 0;
  10037. width: 54px;
  10038. height: 54px;
  10039. background: #282c35;
  10040. -webkit-box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  10041. -moz-box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  10042. box-shadow: inset 0 -2px 0 -1px #0a0a0a;
  10043. cursor: pointer
  10044. }
  10045. #history-button.selected {
  10046. background: #111317;
  10047. -webkit-box-shadow: none;
  10048. -moz-box-shadow: none;
  10049. box-shadow: none
  10050. }
  10051. #history-button i {
  10052. top: 13px;
  10053. left: 11px
  10054. }
  10055. #history-button.selected i {
  10056. left: 12px
  10057. }
  10058. .header-panel-button {
  10059. position: absolute;
  10060. top: 0;
  10061. height: 54px;
  10062. border-right: #0a0a0a 1px solid;
  10063. text-align: center;
  10064. white-space: nowrap;
  10065. cursor: pointer
  10066. }
  10067. .header-panel-button.selected {
  10068. border-right: none;
  10069. background-color: #0a0a0a;
  10070. cursor: default
  10071. }
  10072. .header-panel-button .box {
  10073. position: relative;
  10074. top: 13px;
  10075. display: inline-block;
  10076. margin: 0 auto
  10077. }
  10078. #chat-button {
  10079. left: 0;
  10080. width: 80px
  10081. }
  10082. #chat-button i {
  10083. position: relative;
  10084. top: 13px;
  10085. display: inline-block;
  10086. margin: 0 auto
  10087. }
  10088. #users-button i,
  10089. #waitlist-button i {
  10090. position: relative;
  10091. float: left;
  10092. margin-right: 6px
  10093. }
  10094. #users-button span,
  10095. #waitlist-button span {
  10096. position: relative;
  10097. top: 1px;
  10098. float: left;
  10099. font-weight: 400;
  10100. font-size: 18px
  10101. }
  10102. #users-button span.guest-count {
  10103. position: absolute;
  10104. top: 17px;
  10105. left: 38px;
  10106. float: none;
  10107. color: #808691;
  10108. font-size: 10px;
  10109. display: none
  10110. }
  10111. #users-button.has-guests span.bar-count {
  10112. top: -5px
  10113. }
  10114. #users-button.has-guests span.guest-count {
  10115. top: 17px;
  10116. display: block
  10117. }
  10118. #users-button {
  10119. left: 80px;
  10120. width: 105px
  10121. }
  10122. #waitlist-button {
  10123. left: 185px;
  10124. width: 100px
  10125. }
  10126. #waitlist-button .count {
  10127. top: 5px;
  10128. color: #808691;
  10129. font-size: 14px
  10130. }
  10131. #friends-button {
  10132. left: 285px;
  10133. width: 60px
  10134. }
  10135. #friends-button i {
  10136. position: relative;
  10137. top: 13px;
  10138. display: inline-block;
  10139. margin: 0 auto
  10140. }
  10141. #friends-button .request-count {
  10142. position: absolute;
  10143. top: 8px;
  10144. right: 4px;
  10145. display: none;
  10146. padding: 0 6px;
  10147. min-width: 10px;
  10148. border-radius: 12px;
  10149. background: #db182e;
  10150. text-align: center;
  10151. font-size: 12px
  10152. }
  10153. #friends-button.notify .request-count {
  10154. display: block
  10155. }
  10156. .level-1 #chat-button {
  10157. z-index: 10;
  10158. width: 345px
  10159. }
  10160. .level-1 #chat-button i {
  10161. top: 9px;
  10162. margin-top: 4px
  10163. }
  10164. #chat-button span {
  10165. display: none;
  10166. margin-left: 4px;
  10167. font-size: 20px
  10168. }
  10169. .level-1 #chat-button span {
  10170. display: inline-block
  10171. }
  10172. #history-panel {
  10173. position: absolute;
  10174. top: 0;
  10175. left: 0;
  10176. z-index: 18;
  10177. display: none;
  10178. background: rgba(17, 19, 23, .95)
  10179. }
  10180. #history-panel .divider {
  10181. position: fixed;
  10182. top: 54px;
  10183. left: 0;
  10184. height: 1px;
  10185. background: #1c1f25
  10186. }
  10187. .media-list.history {
  10188. position: absolute;
  10189. top: 0;
  10190. left: 0;
  10191. height: 100%
  10192. }
  10193. .media-list.history .row {
  10194. height: 75px
  10195. }
  10196. .media-list.history .meta {
  10197. height: 74px;
  10198. margin-left: 107px
  10199. }
  10200. .media-list.history .meta .name {
  10201. right: 2px;
  10202. width: 20%;
  10203. text-align: right
  10204. }
  10205. .media-list.history .row.selected {
  10206. background: rgba(50, 35, 76, .9)
  10207. }
  10208. .media-list.history .meta .timestamp {
  10209. top: 39px;
  10210. right: 2px;
  10211. color: #808691;
  10212. text-align: right;
  10213. font-weight: 400
  10214. }
  10215. .media-list.history .meta .author {
  10216. left: 2px;
  10217. width: 76%
  10218. }
  10219. .media-list.history .meta span {
  10220. top: 15px
  10221. }
  10222. .media-list.history img {
  10223. margin-top: 7px;
  10224. width: 80px;
  10225. height: 60px
  10226. }
  10227. .media-list.history .score {
  10228. position: absolute;
  10229. top: 39px;
  10230. left: 109px;
  10231. width: 50%;
  10232. height: 24px;
  10233. font-weight: 400;
  10234. font-size: 14px
  10235. }
  10236. .media-list.history .score .item {
  10237. position: relative;
  10238. float: left;
  10239. margin-right: 15px
  10240. }
  10241. .media-list.history .score span {
  10242. position: relative;
  10243. float: left
  10244. }
  10245. .media-list.history .icon {
  10246. position: relative;
  10247. float: left;
  10248. top: 2px;
  10249. margin-left: -3px;
  10250. margin-right: 5px
  10251. }
  10252. .media-list.history .icon-history-listeners {
  10253. top: 3px
  10254. }
  10255. .media-list.history .score .positive {
  10256. color: #90ad2f
  10257. }
  10258. .media-list.history .score .negative {
  10259. color: #c42e3b
  10260. }
  10261. .media-list.history .score .grabs span {
  10262. color: #aa74ff
  10263. }
  10264. .media-list .actions div i,
  10265. .media-list.history .actions div i {
  10266. top: 13px;
  10267. left: 12px;
  10268. cursor: pointer
  10269. }
  10270. .media-list.history .actions {
  10271. top: 11px;
  10272. width: 54px
  10273. }
  10274. #user-history .media-list.history {
  10275. width: 100%
  10276. }
  10277. #playlist-import-panel {
  10278. position: absolute;
  10279. top: 185px;
  10280. left: 9px;
  10281. display: block;
  10282. width: 521px
  10283. }
  10284. #playlist-import-panel .button {
  10285. position: absolute;
  10286. background: #555d70;
  10287. font-size: 16px;
  10288. cursor: pointer
  10289. }
  10290. #import-youtube {
  10291. position: absolute;
  10292. top: 0;
  10293. left: 0;
  10294. width: 250px
  10295. }
  10296. #import-soundcloud {
  10297. position: absolute;
  10298. top: 0;
  10299. left: 271px;
  10300. width: 250px
  10301. }
  10302. #import-youtube .icon-youtube-big {
  10303. top: 14px
  10304. }
  10305. #import-soundcloud .icon-soundcloud-big {
  10306. top: 0
  10307. }
  10308. #import-youtube .youtube-input {
  10309. position: absolute;
  10310. top: 73px;
  10311. left: 0;
  10312. width: 250px;
  10313. height: 46px;
  10314. background: #212328;
  10315. -webkit-box-shadow: inset 0 0 0 1px #444a59;
  10316. -moz-box-shadow: inset 0 0 0 1px #444a59;
  10317. box-shadow: inset 0 0 0 1px #444a59
  10318. }
  10319. #import-youtube .button {
  10320. top: 5px;
  10321. right: 5px;
  10322. height: 36px;
  10323. text-align: center;
  10324. padding: 0 5px
  10325. }
  10326. #import-youtube .button span {
  10327. position: relative;
  10328. top: 6px
  10329. }
  10330. #youtube-input-field {
  10331. position: absolute;
  10332. top: 11px;
  10333. left: 11px;
  10334. width: 155px;
  10335. outline: 0;
  10336. border: 0;
  10337. background: 0 0;
  10338. color: #eee;
  10339. font-size: 16px;
  10340. font-family: 'Open Sans', sans-serif
  10341. }
  10342. #playlist-import-panel .bar-divider {
  10343. top: 4px;
  10344. left: 260px;
  10345. height: 270px
  10346. }
  10347. #playlist-import-panel.no-soundcloud {
  10348. width: 250px
  10349. }
  10350. #playlist-import-panel.no-soundcloud #import-soundcloud {
  10351. display: none
  10352. }
  10353. #playlist-import-panel.no-soundcloud .bar-divider {
  10354. display: none
  10355. }
  10356. #import-soundcloud .button {
  10357. width: 250px;
  10358. height: 46px;
  10359. text-align: center
  10360. }
  10361. #import-soundcloud .button i {
  10362. position: relative;
  10363. display: inline-block;
  10364. top: 14px;
  10365. margin-right: 6px
  10366. }
  10367. #import-soundcloud .button span {
  10368. position: relative;
  10369. display: inline-block;
  10370. top: 12px
  10371. }
  10372. #import-soundcloud-favorites {
  10373. top: 73px
  10374. }
  10375. #import-soundcloud-tracks {
  10376. top: 139px
  10377. }
  10378. #import-soundcloud-sets {
  10379. top: 205px
  10380. }
  10381. #import-turntable {
  10382. position: absolute;
  10383. top: 305px;
  10384. width: 250px;
  10385. height: 46px
  10386. }
  10387. #import-turntable i {
  10388. top: 7px;
  10389. left: 31px
  10390. }
  10391. #import-turntable span {
  10392. position: absolute;
  10393. top: 11px;
  10394. left: 75px
  10395. }
  10396. #tt-import {
  10397. position: absolute;
  10398. top: 0;
  10399. left: 0;
  10400. z-index: 10;
  10401. width: 100%;
  10402. height: 100%;
  10403. opacity: 0;
  10404. cursor: pointer
  10405. }
  10406. #media-panel {
  10407. position: relative;
  10408. margin-top: 54px;
  10409. margin-left: 256px;
  10410. width: auto;
  10411. height: auto
  10412. }
  10413. #media-panel .header {
  10414. position: relative;
  10415. width: 100%;
  10416. height: 54px;
  10417. border-bottom: #111317 1px solid
  10418. }
  10419. #media-panel .header .button {
  10420. position: absolute;
  10421. height: 54px;
  10422. cursor: pointer
  10423. }
  10424. #media-panel .header .button span {
  10425. position: absolute;
  10426. top: 15px;
  10427. font-size: 16px
  10428. }
  10429. #playlist-activate-button {
  10430. right: 162px;
  10431. padding: 0 16px 0 8px;
  10432. background: #32234c;
  10433. text-align: center
  10434. }
  10435. #playlist-activate-button i {
  10436. position: relative;
  10437. display: inline-block;
  10438. top: 13px
  10439. }
  10440. #playlist-activate-button span {
  10441. position: relative!important;
  10442. display: inline-block;
  10443. top: 4px!important;
  10444. color: #ac76ff
  10445. }
  10446. #playlist-activate-button.active {
  10447. background: 0 0;
  10448. cursor: default
  10449. }
  10450. #playlist-activate-button.active i {
  10451. margin-right: 8px
  10452. }
  10453. #playlist-edit-button {
  10454. right: 108px;
  10455. width: 54px;
  10456. background: #555d70
  10457. }
  10458. #playlist-edit-button:hover {
  10459. background: #00b5e6;
  10460. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  10461. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  10462. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  10463. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  10464. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  10465. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%)
  10466. }
  10467. #playlist-edit-button i {
  10468. top: 13px;
  10469. left: 12px
  10470. }
  10471. #playlist-shuffle-button {
  10472. right: 54px;
  10473. width: 54px;
  10474. background: #444a59
  10475. }
  10476. #playlist-shuffle-button:hover {
  10477. background: #ac76ff;
  10478. background: -moz-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10479. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ac76ff), color-stop(100%, #925aff));
  10480. background: -webkit-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10481. background: -o-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10482. background: -ms-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10483. background: linear-gradient(to bottom, #ac76ff 0, #925aff 100%)
  10484. }
  10485. #playlist-shuffle-button i {
  10486. top: 12px;
  10487. left: 12px
  10488. }
  10489. #playlist-delete-button {
  10490. right: 0;
  10491. width: 54px;
  10492. background: #323742;
  10493. -webkit-box-shadow: inset -2px 0 0 -1px #0a0a0a;
  10494. -moz-box-shadow: inset -2px 0 0 -1px #0a0a0a;
  10495. box-shadow: inset -2px 0 0 -1px #0a0a0a
  10496. }
  10497. #playlist-delete-button:hover {
  10498. background: #f46b40;
  10499. background: -moz-linear-gradient(top, #f46b40 0, #f04f30 100%);
  10500. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f46b40), color-stop(100%, #f04f30));
  10501. background: -webkit-linear-gradient(top, #f46b40 0, #f04f30 100%);
  10502. background: -o-linear-gradient(top, #f46b40 0, #f04f30 100%);
  10503. background: -ms-linear-gradient(top, #f46b40 0, #f04f30 100%);
  10504. background: linear-gradient(to bottom, #f46b40 0, #f04f30 100%)
  10505. }
  10506. #playlist-delete-button i {
  10507. top: 12px;
  10508. left: 12px
  10509. }
  10510. #media-panel .header .back {
  10511. left: 0;
  10512. width: 100px;
  10513. background: #323742
  10514. }
  10515. #media-panel .header .back i {
  10516. top: 13px;
  10517. left: 10px
  10518. }
  10519. #media-panel .header .back span {
  10520. left: 43px;
  10521. font-size: 17px
  10522. }
  10523. #media-panel .header .title {
  10524. position: absolute;
  10525. top: 9px;
  10526. left: 50px;
  10527. overflow: hidden;
  10528. height: 38px;
  10529. text-overflow: ellipsis;
  10530. white-space: nowrap;
  10531. font-size: 25px
  10532. }
  10533. #media-panel .header.with-back .icon-search {
  10534. left: 114px
  10535. }
  10536. #media-panel .header.with-back .title {
  10537. left: 155px
  10538. }
  10539. #media-panel .header.import-with-back .icon-import-big {
  10540. left: 114px
  10541. }
  10542. #media-panel .header.import-with-back .title {
  10543. left: 158px
  10544. }
  10545. #media-panel .header.history .title {
  10546. left: 52px
  10547. }
  10548. #media-panel .header.no-icon .title {
  10549. left: 15px
  10550. }
  10551. #media-panel .header .icon-search {
  10552. top: 13px;
  10553. left: 12px
  10554. }
  10555. #media-panel .header .icon-room-history {
  10556. top: 12px;
  10557. left: 13px
  10558. }
  10559. #media-panel .header .icon-import-big {
  10560. top: 14px;
  10561. left: 13px
  10562. }
  10563. #media-panel .header .import-button {
  10564. right: 0;
  10565. width: 162px;
  10566. background: #ac76ff;
  10567. background: -moz-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10568. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ac76ff), color-stop(100%, #925aff));
  10569. background: -webkit-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10570. background: -o-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10571. background: -ms-linear-gradient(top, #ac76ff 0, #925aff 100%);
  10572. background: linear-gradient(to bottom, #ac76ff 0, #925aff 100%)
  10573. }
  10574. #media-panel .header .import-button span {
  10575. width: 100%;
  10576. text-align: center
  10577. }
  10578. #media-panel .header.import .title {
  10579. left: 57px
  10580. }
  10581. .media-list {
  10582. position: relative;
  10583. z-index: 1;
  10584. overflow: auto;
  10585. width: 100%;
  10586. height: 300px;
  10587. font-size: 14px
  10588. }
  10589. .media-list .container {
  10590. position: relative;
  10591. top: 0;
  10592. left: 0;
  10593. width: 100%;
  10594. height: 100%
  10595. }
  10596. .media-list .row {
  10597. position: relative;
  10598. overflow: hidden;
  10599. margin: 0;
  10600. padding: 0;
  10601. width: 100%;
  10602. height: 55px
  10603. }
  10604. .media-list .row.selected {
  10605. background: #32234c
  10606. }
  10607. .media-list .row.now-playing {
  10608. height: 53px;
  10609. border-bottom: #ac76ff 2px solid!important;
  10610. background: #925aff!important
  10611. }
  10612. .media-list .row.now-playing.in-history {
  10613. color: #eee
  10614. }
  10615. .media-list .row.in-history {
  10616. color: #f46b40
  10617. }
  10618. .media-list.drag-over .playlist-media .row {
  10619. cursor: ns-resize
  10620. }
  10621. .media-list img {
  10622. position: relative;
  10623. float: left;
  10624. margin-top: 10px;
  10625. margin-left: 15px;
  10626. width: 47px;
  10627. height: 35px
  10628. }
  10629. .media-list .meta {
  10630. position: relative;
  10631. margin-right: 10px;
  10632. margin-left: 90px;
  10633. width: auto;
  10634. height: 54px;
  10635. border-bottom: #282c35 1px solid
  10636. }
  10637. .media-list .meta span {
  10638. position: absolute;
  10639. top: 18px;
  10640. overflow: hidden;
  10641. text-overflow: ellipsis;
  10642. white-space: nowrap;
  10643. font-size: 14px
  10644. }
  10645. .media-list.import-playlist-list .meta {
  10646. margin-right: 35px;
  10647. margin-left: 0
  10648. }
  10649. .media-list .meta .author {
  10650. left: 2px;
  10651. width: 34%
  10652. }
  10653. .media-list .meta .title {
  10654. left: 36%;
  10655. width: 51%
  10656. }
  10657. .media-list .meta .duration {
  10658. right: 2px;
  10659. width: 11%;
  10660. text-align: right
  10661. }
  10662. .media-list .has-playlists .meta .author,
  10663. .media-list .has-playlists .meta .title {
  10664. top: 8px
  10665. }
  10666. .media-list .has-playlists .icon-playlist-small {
  10667. top: 22px;
  10668. left: -5px;
  10669. z-index: 0
  10670. }
  10671. .media-list .has-playlists .playlists {
  10672. top: 27px;
  10673. left: 23px
  10674. }
  10675. .media-list .playlists a {
  10676. color: #ac76ff;
  10677. text-decoration: none
  10678. }
  10679. .media-list .playlists a:hover {
  10680. text-decoration: underline
  10681. }
  10682. .media-list .row.now-playing .meta span {
  10683. font-weight: 700
  10684. }
  10685. .media-list .row.now-playing .meta .playlists a {
  10686. color: #32234c
  10687. }
  10688. .media-list .row.selected .meta {
  10689. border-bottom: none
  10690. }
  10691. .media-list .row.now-playing .meta {
  10692. border-bottom: none
  10693. }
  10694. .media-list.import-playlist-list .row {
  10695. height: 38px;
  10696. cursor: pointer
  10697. }
  10698. .media-list.import-playlist-list .meta {
  10699. left: 20px;
  10700. height: 37px
  10701. }
  10702. .media-list.import-playlist-list .meta span {
  10703. top: 9px;
  10704. left: 2px;
  10705. cursor: pointer
  10706. }
  10707. .media-list .actions {
  10708. position: absolute;
  10709. top: 0;
  10710. right: 0;
  10711. width: 108px;
  10712. height: 54px;
  10713. background: #111317;
  10714. cursor: default
  10715. }
  10716. .media-list .selected .actions {
  10717. background: #32234c
  10718. }
  10719. .media-list .actions.none {
  10720. width: 0!important
  10721. }
  10722. .playlist-media .actions {
  10723. width: 270px
  10724. }
  10725. .playlist-media-first-item .actions,
  10726. .playlist-media-last-item .actions {
  10727. width: 216px
  10728. }
  10729. .playlist-media.only-one .playlist-media-last-item .actions {
  10730. width: 216px
  10731. }
  10732. .playlist-media-first-item.now-playing .actions {
  10733. width: 108px
  10734. }
  10735. .media-list.import-media .actions,
  10736. .media-list.search-playlists .actions {
  10737. width: 56px
  10738. }
  10739. .media-list .actions div {
  10740. position: relative;
  10741. float: left;
  10742. width: 54px;
  10743. height: 54px
  10744. }
  10745. .media-list .row.now-playing .actions {
  10746. top: 1px;
  10747. background: #925aff
  10748. }
  10749. .playlist-media .playlist-media-last-item .actions .move-to-bottom {
  10750. display: none
  10751. }
  10752. .playlist-overlay-help {
  10753. margin-left: 15px;
  10754. line-height: 30px
  10755. }
  10756. .drag-row-line {
  10757. position: absolute;
  10758. z-index: 999;
  10759. width: 100%;
  10760. height: 2px;
  10761. background-color: #eee;
  10762. cursor: ns-resize
  10763. }
  10764. .drag-media-box {
  10765. position: absolute;
  10766. z-index: 9999;
  10767. width: 85px;
  10768. height: 56px;
  10769. background: #925aff;
  10770. -webkit-box-shadow: 2px 2px 3px #000;
  10771. -moz-box-shadow: 2px 2px 3px #000;
  10772. box-shadow: 2px 2px 3px #000;
  10773. pointer-events: none
  10774. }
  10775. .drag-media-corner {
  10776. position: absolute;
  10777. top: 0;
  10778. left: 0;
  10779. width: 0;
  10780. height: 0;
  10781. border-top: 15px solid #fff;
  10782. border-right: 15px solid transparent
  10783. }
  10784. .drag-media-label {
  10785. position: absolute;
  10786. top: 13px;
  10787. right: 2px;
  10788. width: 50px;
  10789. color: #fff;
  10790. text-align: center;
  10791. font-weight: 400;
  10792. font-size: 21px
  10793. }
  10794. .drag-media-box i {
  10795. top: 13px;
  10796. left: 9px
  10797. }
  10798. #news {
  10799. position: absolute;
  10800. top: 0;
  10801. left: 0;
  10802. width: 100%;
  10803. height: 100%
  10804. }
  10805. #news i.icon-news-grey {
  10806. top: 12px;
  10807. left: 8px;
  10808. display: none
  10809. }
  10810. #news .label {
  10811. position: absolute;
  10812. top: 14px;
  10813. left: 36px;
  10814. color: #444a59;
  10815. font-size: 18px
  10816. }
  10817. #news .list {
  10818. position: absolute;
  10819. top: 0;
  10820. height: 53px;
  10821. left: 95px;
  10822. overflow: hidden
  10823. }
  10824. #news .list .row {
  10825. position: relative;
  10826. width: 97%;
  10827. height: 53px
  10828. }
  10829. #news .list .row a {
  10830. position: relative;
  10831. float: left;
  10832. clear: right;
  10833. color: #eee;
  10834. text-decoration: none;
  10835. font-size: 16px;
  10836. width: 100%;
  10837. margin-top: 6px;
  10838. text-overflow: ellipsis;
  10839. white-space: nowrap;
  10840. overflow: hidden
  10841. }
  10842. #news .list .row a:visited {
  10843. color: #eee
  10844. }
  10845. #news .list .row a:hover {
  10846. text-decoration: underline
  10847. }
  10848. #news .list .row .desc {
  10849. position: relative;
  10850. float: left;
  10851. color: #808691;
  10852. width: 100%;
  10853. text-overflow: ellipsis;
  10854. white-space: nowrap;
  10855. overflow: hidden
  10856. }
  10857. #toast-notifications {
  10858. position: absolute;
  10859. top: 54px;
  10860. z-index: 120000;
  10861. width: 360px
  10862. }
  10863. #toast-notifications .notification {
  10864. position: absolute;
  10865. top: 0;
  10866. left: 0;
  10867. margin-top: 7px;
  10868. width: 360px;
  10869. height: 85px;
  10870. -webkit-box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, .75);
  10871. -moz-box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, .75);
  10872. box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, .75);
  10873. opacity: 0;
  10874. cursor: pointer
  10875. }
  10876. #toast-notifications .notification .left {
  10877. position: relative;
  10878. float: left;
  10879. width: 60px;
  10880. height: 85px;
  10881. background: #282c35;
  10882. -webkit-box-shadow: 2px 0 10px 0 rgba(10, 10, 10, .35);
  10883. -moz-box-shadow: 2px 0 10px 0 rgba(10, 10, 10, .35);
  10884. box-shadow: 2px 0 10px 0 rgba(10, 10, 10, .35);
  10885. z-index: 3
  10886. }
  10887. #toast-notifications .notification .left .icon {
  10888. top: 27px;
  10889. left: 16px
  10890. }
  10891. #toast-notifications .notification .right {
  10892. position: relative;
  10893. top: 1px;
  10894. float: right;
  10895. width: 300px;
  10896. height: 84px;
  10897. background: #1c1f25;
  10898. z-index: 2;
  10899. overflow: hidden
  10900. }
  10901. #toast-notifications .notification .right span {
  10902. position: absolute;
  10903. top: 32px;
  10904. left: 20px;
  10905. width: 270px;
  10906. font-size: 12px;
  10907. word-wrap: break-word
  10908. }
  10909. #toast-notifications .notification .left .icon.icon-mute-big {
  10910. left: 14px;
  10911. top: 29px
  10912. }
  10913. #playback {
  10914. position: absolute;
  10915. top: 54px;
  10916. z-index: 2;
  10917. width: 484px;
  10918. height: 271px
  10919. }
  10920. #playback .background {
  10921. position: absolute;
  10922. top: 0;
  10923. left: 0;
  10924. z-index: 0;
  10925. width: 100%;
  10926. height: 100%
  10927. }
  10928. .video-only #playback .background {
  10929. display: none
  10930. }
  10931. #playback .background img {
  10932. position: absolute;
  10933. top: 0
  10934. }
  10935. .video-only #playback {
  10936. left: 0
  10937. }
  10938. .video-only #playback .background {
  10939. background: #000
  10940. }
  10941. #playback-container {
  10942. position: absolute;
  10943. top: 0;
  10944. left: 0;
  10945. z-index: 4;
  10946. width: 484px;
  10947. height: 271px
  10948. }
  10949. #sc-frame,
  10950. #scvis-frame,
  10951. #sync-frame,
  10952. #yt-frame {
  10953. position: absolute;
  10954. top: 0;
  10955. left: 0;
  10956. z-index: 5;
  10957. width: 100%;
  10958. height: 100%
  10959. }
  10960. #no-dj {
  10961. position: absolute;
  10962. top: 0;
  10963. left: 0;
  10964. width: 484px;
  10965. height: 271px;
  10966. background: #0a0a0a
  10967. }
  10968. .video-only #no-dj {
  10969. background: #000
  10970. }
  10971. #no-dj .avatar {
  10972. position: absolute;
  10973. top: 15px;
  10974. left: 167px;
  10975. width: 108px;
  10976. height: 125px;
  10977. background: url('https://cdn.plug.dj/_/static/images/community/nobodyplayingavatar.0dfb38877a36fa8cc02b974d27a2669ced073e0c.png') no-repeat
  10978. }
  10979. #no-dj .message {
  10980. position: absolute;
  10981. top: 168px;
  10982. width: 100%;
  10983. height: 100px;
  10984. text-align: center
  10985. }
  10986. #no-dj .message .title {
  10987. font-weight: 700;
  10988. font-size: 26px
  10989. }
  10990. #no-dj .message .label {
  10991. font-weight: 400;
  10992. font-size: 18px
  10993. }
  10994. #playback-controls {
  10995. position: absolute;
  10996. top: 0;
  10997. left: 0;
  10998. z-index: 30;
  10999. display: none;
  11000. height: 56px
  11001. }
  11002. #playback-controls .button {
  11003. position: relative;
  11004. float: left;
  11005. width: 33%;
  11006. height: 100%;
  11007. text-align: center;
  11008. cursor: pointer
  11009. }
  11010. #playback-controls .button.hd {
  11011. width: 34%
  11012. }
  11013. #playback-controls.no-hd .button {
  11014. width: 50%
  11015. }
  11016. #playback-controls.no-hd .button.hd {
  11017. display: none
  11018. }
  11019. #playback-controls .button .box {
  11020. position: relative;
  11021. top: 11px;
  11022. display: inline-block;
  11023. margin: 0 auto;
  11024. text-align: left;
  11025. font-size: 24px;
  11026. white-space: nowrap;
  11027. overflow: hidden
  11028. }
  11029. #playback-controls .button .box .icon {
  11030. position: relative;
  11031. top: 2px;
  11032. float: left;
  11033. margin-right: 5px;
  11034. margin-left: -4px
  11035. }
  11036. #playback-controls .button.hd {
  11037. background: rgba(28, 31, 37, .7)
  11038. }
  11039. #playback-controls .button.refresh {
  11040. background: rgba(0, 181, 230, .7)
  11041. }
  11042. #playback-controls .button.snooze {
  11043. background: rgba(172, 118, 255, .7)
  11044. }
  11045. #playback-controls .button.hd strong {
  11046. font-weight: 700
  11047. }
  11048. #playback-controls.snoozed .button.snooze {
  11049. display: none
  11050. }
  11051. #playback-controls.snoozed .button {
  11052. width: 50%
  11053. }
  11054. #playback-controls.no-hd.snoozed .button {
  11055. width: 100%
  11056. }
  11057. #playback-controls .button.hd .divider {
  11058. position: relative;
  11059. margin: 0 6px;
  11060. width: 1px;
  11061. height: 24px;
  11062. background: #eee;
  11063. display: inline-block;
  11064. top: 3px
  11065. }
  11066. #playback-buffering {
  11067. position: absolute;
  11068. left: 0;
  11069. z-index: 15;
  11070. width: 100%;
  11071. height: 28px;
  11072. text-align: center;
  11073. font-size: 24px
  11074. }
  11075. #playback-block {
  11076. position: absolute;
  11077. top: 0;
  11078. left: 0;
  11079. z-index: 20;
  11080. display: none;
  11081. width: 100%;
  11082. height: 100%;
  11083. background: #000;
  11084. opacity: 0
  11085. }
  11086. #playlist-panel {
  11087. position: absolute;
  11088. top: 0;
  11089. left: 0;
  11090. display: none;
  11091. overflow: hidden;
  11092. height: 54px;
  11093. background: #111317
  11094. }
  11095. #playlist-menu {
  11096. position: absolute;
  11097. top: 54px;
  11098. left: 0;
  11099. width: 256px;
  11100. height: 300px;
  11101. background: #1c1f25
  11102. }
  11103. #playlist-menu .menu {
  11104. position: absolute;
  11105. top: 54px;
  11106. left: 0;
  11107. z-index: 1;
  11108. overflow: auto;
  11109. width: 100%;
  11110. font-size: 14px
  11111. }
  11112. #playlist-menu .menu .container {
  11113. position: relative;
  11114. top: 0;
  11115. left: 0;
  11116. width: 100%;
  11117. height: 100%
  11118. }
  11119. #playlist-menu span {
  11120. position: absolute
  11121. }
  11122. #playlist-menu .title {
  11123. position: absolute;
  11124. top: 9px;
  11125. left: 15px;
  11126. color: #555d70;
  11127. white-space: nowrap;
  11128. font-size: 25px
  11129. }
  11130. #playlist-menu .slimScrollDiv {
  11131. top: 94px
  11132. }
  11133. #playlist-menu .menu .row {
  11134. position: relative;
  11135. overflow: hidden;
  11136. width: 100%;
  11137. height: 40px;
  11138. cursor: pointer
  11139. }
  11140. #playlist-menu .menu .row.selected {
  11141. background: #32234c;
  11142. cursor: default
  11143. }
  11144. #playlist-menu .menu .row .name {
  11145. top: 10px;
  11146. left: 42px;
  11147. overflow: hidden;
  11148. width: 160px;
  11149. text-overflow: ellipsis;
  11150. white-space: nowrap
  11151. }
  11152. #playlist-menu .menu .row .count {
  11153. top: 10px;
  11154. right: 10px;
  11155. color: #ac76ff;
  11156. font-weight: 400
  11157. }
  11158. #playlist-menu .menu .row .activate-button {
  11159. position: absolute;
  11160. top: 4px;
  11161. left: 6px;
  11162. width: 30px;
  11163. height: 30px
  11164. }
  11165. #playlist-menu .menu .row .activate-button .icon {
  11166. top: 0;
  11167. left: 0
  11168. }
  11169. #playlist-menu .menu .row.drag-over {
  11170. cursor: copy
  11171. }
  11172. #playlist-menu .menu .row.drag-over .name {
  11173. color: #ac76ff
  11174. }
  11175. #playlist-menu .menu .row.selected.drag-over {
  11176. cursor: no-drop
  11177. }
  11178. #playlist-menu .menu .row.selected.drag-over .name {
  11179. color: #fff
  11180. }
  11181. #playlist-menu .button {
  11182. position: absolute;
  11183. bottom: 0;
  11184. width: 128px;
  11185. height: 54px;
  11186. text-align: center;
  11187. cursor: pointer
  11188. }
  11189. #playlist-menu .button i {
  11190. position: relative;
  11191. display: inline-block;
  11192. top: 12px;
  11193. margin-left: -4px
  11194. }
  11195. #playlist-menu .button span {
  11196. position: relative;
  11197. display: inline-block;
  11198. top: 3px
  11199. }
  11200. #playlist-import {
  11201. left: 0;
  11202. z-index: 50;
  11203. background: #323742
  11204. }
  11205. #playlist-import:hover {
  11206. background: #ac76ff;
  11207. background: -moz-linear-gradient(top, #ac76ff 0, #925aff 100%);
  11208. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ac76ff), color-stop(100%, #925aff));
  11209. background: -webkit-linear-gradient(top, #ac76ff 0, #925aff 100%);
  11210. background: -o-linear-gradient(top, #ac76ff 0, #925aff 100%);
  11211. background: -ms-linear-gradient(top, #ac76ff 0, #925aff 100%);
  11212. background: linear-gradient(to bottom, #ac76ff 0, #925aff 100%)
  11213. }
  11214. #playlist-create {
  11215. right: 0;
  11216. z-index: 55;
  11217. background: #444a59
  11218. }
  11219. #playlist-create:hover {
  11220. background: #00b5e6;
  11221. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11222. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  11223. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11224. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11225. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11226. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%)
  11227. }
  11228. #playlist-create.drag-over {
  11229. width: 256px;
  11230. background: #00b5e6;
  11231. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11232. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  11233. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11234. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11235. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11236. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%);
  11237. cursor: copy;
  11238. text-align: left
  11239. }
  11240. #playlist-create.drag-over .drop-zone {
  11241. display: block
  11242. }
  11243. #playlist-create.drag-over i {
  11244. position: absolute;
  11245. top: 11px;
  11246. left: 37px
  11247. }
  11248. #playlist-create.drag-over span {
  11249. position: absolute;
  11250. top: 19px;
  11251. left: 74px;
  11252. line-height: 16px
  11253. }
  11254. #playlist-create .drop-zone {
  11255. display: none;
  11256. margin: 5px;
  11257. padding: 22px;
  11258. padding-bottom: 17px;
  11259. width: 196px;
  11260. height: 0;
  11261. border: 3px dashed #fff;
  11262. background: 0 0;
  11263. cursor: copy
  11264. }
  11265. .pop-menu {
  11266. position: absolute;
  11267. z-index: 500;
  11268. width: 205px;
  11269. height: 48px;
  11270. background: #111317;
  11271. color: #eee
  11272. }
  11273. .pop-menu .bar {
  11274. position: absolute;
  11275. top: 0;
  11276. left: 0;
  11277. width: 100%;
  11278. height: 48px;
  11279. background: #323742
  11280. }
  11281. .pop-menu .bar .icon-add {
  11282. top: 10px;
  11283. left: 9px
  11284. }
  11285. .pop-menu.grab .bar .icon-grab-disabled {
  11286. top: 9px;
  11287. left: 9px
  11288. }
  11289. .pop-menu .bar .bar-divider {
  11290. top: 0;
  11291. left: 47px;
  11292. height: 48px;
  11293. background: #111317
  11294. }
  11295. .pop-menu .bar .title {
  11296. position: absolute;
  11297. top: 13px;
  11298. left: 65px;
  11299. font-weight: 400;
  11300. font-size: 16px
  11301. }
  11302. .pop-menu .menu {
  11303. position: absolute;
  11304. top: 48px;
  11305. left: 0;
  11306. overflow-x: hidden;
  11307. overflow-y: auto;
  11308. width: 100%
  11309. }
  11310. .pop-menu.up .menu {
  11311. top: 0
  11312. }
  11313. .pop-menu.up .bar {
  11314. top: auto;
  11315. bottom: 0
  11316. }
  11317. .pop-menu ul {
  11318. position: absolute;
  11319. top: 0;
  11320. left: 0;
  11321. margin: 0;
  11322. padding: 0;
  11323. width: 100%;
  11324. background: #111317;
  11325. list-style-type: none
  11326. }
  11327. .pop-menu li {
  11328. position: relative;
  11329. overflow: hidden;
  11330. width: 100%;
  11331. height: 31px;
  11332. list-style-type: none;
  11333. cursor: pointer
  11334. }
  11335. .pop-menu li:hover {
  11336. background: #32234c
  11337. }
  11338. .pop-menu li.create:hover {
  11339. background: #00b5e6;
  11340. background: -moz-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11341. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b5e6), color-stop(100%, #009cdd));
  11342. background: -webkit-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11343. background: -o-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11344. background: -ms-linear-gradient(top, #00b5e6 0, #009cdd 100%);
  11345. background: linear-gradient(to bottom, #00b5e6 0, #009cdd 100%)
  11346. }
  11347. .pop-menu li span {
  11348. position: absolute;
  11349. top: 5px;
  11350. left: 39px;
  11351. overflow: hidden;
  11352. width: 146px;
  11353. height: 19px;
  11354. text-overflow: ellipsis;
  11355. white-space: nowrap;
  11356. cursor: pointer
  11357. }
  11358. .pop-menu li i {
  11359. top: 0;
  11360. left: 5px
  11361. }
  11362. .pop-menu li .icon-create-playlist {
  11363. top: -1px
  11364. }
  11365. #room {
  11366. left: 0;
  11367. z-index: 6;
  11368. background: #0a0a0a
  11369. }
  11370. #dialog-container.is-preview {
  11371. right: 345px
  11372. }
  11373. .room-background {
  11374. position: absolute;
  11375. top: 0;
  11376. left: 0;
  11377. z-index: -5;
  11378. width: 1600px;
  11379. height: 900px
  11380. }
  11381. .room-background .torch {
  11382. position: absolute;
  11383. top: 451px;
  11384. left: 305px;
  11385. width: 93px;
  11386. height: 184px;
  11387. background: url('https://cdn.plug.dj/_/static/images/community/theme/beach/torchesleft.35717bd6c469c14f3004b4c9ca75e8a44bd9df67.gif') no-repeat
  11388. }
  11389. .room-background .torch.right {
  11390. left: 1201px;
  11391. background: url('https://cdn.plug.dj/_/static/images/community/theme/beach/torchesright.191a2bf8505ea651ddee3868f36750d228914b58.gif') no-repeat
  11392. }
  11393. #room .app-right {
  11394. background: #0a0a0a
  11395. }
  11396. #avatars-container {
  11397. position: absolute;
  11398. top: 400px;
  11399. left: 0;
  11400. z-index: 6;
  11401. width: 805px;
  11402. height: 338px
  11403. }
  11404. #audience {
  11405. position: absolute;
  11406. top: 0;
  11407. left: 0;
  11408. z-index: 1;
  11409. width: 805px;
  11410. height: 207px
  11411. }
  11412. #audience-canvas {
  11413. position: absolute;
  11414. top: 0;
  11415. left: 0
  11416. }
  11417. #dj-booth {
  11418. position: absolute;
  11419. top: 76px;
  11420. left: 233px;
  11421. z-index: 2;
  11422. width: 340px;
  11423. height: 275px
  11424. }
  11425. #dj-canvas {
  11426. position: absolute;
  11427. top: 0;
  11428. left: 0;
  11429. width: 340px;
  11430. height: 275px
  11431. }
  11432. .video-only .room-background {
  11433. display: none
  11434. }
  11435. .video-only #avatars-container {
  11436. display: none
  11437. }
  11438. #room-settings-menu {
  11439. position: absolute;
  11440. top: 0;
  11441. left: 0;
  11442. width: 220px;
  11443. height: 100%;
  11444. background: #1c1f25
  11445. }
  11446. #room-settings-menu .title {
  11447. position: relative;
  11448. margin: 10px;
  11449. margin-bottom: 15px;
  11450. width: 200px;
  11451. color: #808691;
  11452. font-size: 28px
  11453. }
  11454. #room-settings-menu .item {
  11455. position: relative;
  11456. width: 100%;
  11457. height: 46px;
  11458. cursor: pointer
  11459. }
  11460. #room-settings-menu .item.selected {
  11461. background: #32234c;
  11462. cursor: default
  11463. }
  11464. #room-settings-menu .item i {
  11465. top: 8px;
  11466. left: 4px
  11467. }
  11468. #room-settings-menu .item .label {
  11469. position: absolute;
  11470. top: 12px;
  11471. left: 40px;
  11472. font-size: 16px
  11473. }
  11474. #room-settings {
  11475. z-index: 600;
  11476. display: none;
  11477. background: #111317
  11478. }
  11479. #room-settings .general-settings {
  11480. position: absolute;
  11481. top: 0;
  11482. height: 100%
  11483. }
  11484. #room-settings .general-settings .panel {
  11485. position: relative;
  11486. float: left;
  11487. width: 100%
  11488. }
  11489. #room-settings .general-settings .name {
  11490. display: none;
  11491. height: 70px
  11492. }
  11493. #room-settings .general-settings.is-host .name {
  11494. display: block
  11495. }
  11496. #room-settings .general-settings .description {
  11497. height: 275px
  11498. }
  11499. #room-settings .general-settings .welcome {
  11500. height: 150px
  11501. }
  11502. #room-settings .general-settings .panel .title {
  11503. position: relative;
  11504. margin-top: 10px;
  11505. margin-left: 10px;
  11506. float: left;
  11507. color: #808691;
  11508. text-transform: uppercase;
  11509. font-size: 13px
  11510. }
  11511. #room-settings .general-settings .panel .count {
  11512. position: relative;
  11513. float: left;
  11514. margin-top: 10px;
  11515. margin-left: 15px;
  11516. color: #808691;
  11517. font-size: 13px;
  11518. font-weight: 600
  11519. }
  11520. #room-settings .general-settings .panel .count.limit {
  11521. color: #f04f30
  11522. }
  11523. #room-settings .general-settings .edit {
  11524. position: absolute;
  11525. top: 5px;
  11526. right: 4px;
  11527. display: none;
  11528. width: auto;
  11529. color: #808691;
  11530. font-size: 13px;
  11531. cursor: pointer
  11532. }
  11533. #room-settings .general-settings.is-host .edit {
  11534. display: block
  11535. }
  11536. #room-settings .general-settings .edit span {
  11537. float: left;
  11538. margin-top: 5px;
  11539. text-transform: uppercase
  11540. }
  11541. #room-settings .general-settings .edit i {
  11542. position: relative;
  11543. top: 0;
  11544. float: right
  11545. }
  11546. #room-settings .general-settings .value {
  11547. position: absolute;
  11548. top: 34px;
  11549. left: 10px;
  11550. width: 420px;
  11551. word-wrap: break-word;
  11552. font-size: 15px
  11553. }
  11554. #room-settings .general-settings .description .value {
  11555. overflow-x: hidden;
  11556. overflow-y: auto;
  11557. height: 235px
  11558. }
  11559. #room-settings .general-settings .input-background {
  11560. position: absolute;
  11561. top: 34px;
  11562. left: 10px;
  11563. width: 432px;
  11564. height: 33px;
  11565. background: #323742
  11566. }
  11567. #input-room-name {
  11568. position: absolute;
  11569. top: 5px;
  11570. left: 10px;
  11571. width: 412px;
  11572. outline: 0;
  11573. border: 0;
  11574. background: 0 0;
  11575. color: #eee;
  11576. font-weight: 400;
  11577. font-size: 15px;
  11578. font-family: "Open Sans", sans-serif
  11579. }
  11580. #room-settings .general-settings .description .input-background {
  11581. height: 175px
  11582. }
  11583. #room-settings .general-settings .welcome .input-background {
  11584. height: 93px
  11585. }
  11586. #room-settings .general-settings textarea {
  11587. position: absolute;
  11588. top: 1px;
  11589. left: 1px;
  11590. padding: 5px;
  11591. width: 400px;
  11592. outline: 0;
  11593. border: 0;
  11594. background: 0 0;
  11595. color: #eee;
  11596. font-weight: 400;
  11597. font-size: 15px;
  11598. font-family: "Open Sans", sans-serif
  11599. }
  11600. #room-settings .general-settings .description textarea {
  11601. height: 223px;
  11602. max-height: 223px;
  11603. min-height: 223px
  11604. }
  11605. #room-settings .general-settings .welcome textarea {
  11606. height: 80px;
  11607. min-height: 80px;
  11608. max-height: 80px
  11609. }
  11610. #room-settings .general-settings a,
  11611. #room-settings .general-settings a:visited {
  11612. color: #009cdd
  11613. }
  11614. #room-settings .general-settings .option button {
  11615. position: relative;
  11616. float: left;
  11617. width: 45%;
  11618. height: 39px;
  11619. background: #282c35;
  11620. color: #808691;
  11621. text-transform: uppercase;
  11622. font-size: 16px;
  11623. font-family: "Open Sans", sans-serif;
  11624. cursor: default
  11625. }
  11626. #room-settings .general-settings .option button.off {
  11627. margin-left: 10px;
  11628. background: #009cdd;
  11629. color: #eee
  11630. }
  11631. #room-settings .general-settings .option .title {
  11632. position: relative;
  11633. float: left;
  11634. margin-bottom: 5px;
  11635. margin-left: 10px;
  11636. width: 100%;
  11637. height: 20px;
  11638. color: #808691;
  11639. text-transform: uppercase;
  11640. font-size: 13px
  11641. }
  11642. #room-settings .general-settings .wait-list button i {
  11643. position: relative;
  11644. top: 3px;
  11645. display: inline-block;
  11646. margin-left: -2px
  11647. }
  11648. #room-settings .general-settings .option {
  11649. position: relative;
  11650. float: left;
  11651. width: 39%;
  11652. margin-top: 10px;
  11653. margin-bottom: 20px
  11654. }
  11655. #room-settings .general-settings .option.chat-level {
  11656. width: 20%
  11657. }
  11658. #room-settings .general-settings .option.enabled>button.off {
  11659. background: #282c35;
  11660. color: #808691
  11661. }
  11662. #room-settings .general-settings .option.enabled>button.on {
  11663. background: #f04f30;
  11664. color: #eee
  11665. }
  11666. #room-settings .general-settings.is-manager .option button.on {
  11667. cursor: pointer
  11668. }
  11669. #room-settings .general-settings.is-manager .option.enabled button.off {
  11670. cursor: pointer
  11671. }
  11672. #room-settings .general-settings.is-manager .option.enabled button.on {
  11673. cursor: default
  11674. }
  11675. #room-settings .general-settings .option .dropdown {
  11676. width: 98%;
  11677. margin-left: 10px
  11678. }
  11679. #search {
  11680. position: absolute;
  11681. top: 0;
  11682. left: 53px;
  11683. overflow-x: hidden;
  11684. width: 500px;
  11685. height: 54px;
  11686. background: #323742;
  11687. -webkit-box-shadow: inset -2px 2px 0 -1px #0a0a0a;
  11688. -moz-box-shadow: inset -2px 2px 0 -1px #0a0a0a;
  11689. box-shadow: inset -2px 2px 0 -1px #0a0a0a
  11690. }
  11691. #search-bar {
  11692. position: absolute;
  11693. top: 7px;
  11694. left: 7px;
  11695. width: 568px;
  11696. height: 41px;
  11697. background: #111317;
  11698. -webkit-box-shadow: inset 0 0 0 1px #444a59;
  11699. -moz-box-shadow: inset 0 0 0 1px #444a59;
  11700. box-shadow: inset 0 0 0 1px #444a59
  11701. }
  11702. #search-bar .icon-search {
  11703. top: 6px;
  11704. left: 6px
  11705. }
  11706. #search-input {
  11707. position: absolute;
  11708. top: 5px;
  11709. left: 39px;
  11710. width: 410px;
  11711. height: 31px
  11712. }
  11713. #search input {
  11714. position: absolute;
  11715. top: 1px;
  11716. left: 0;
  11717. outline: 0;
  11718. border: 0;
  11719. background: 0 0;
  11720. color: #eee;
  11721. font-size: 20px;
  11722. font-family: 'Open Sans', sans-serif
  11723. }
  11724. #search-input input {
  11725. width: 100%
  11726. }
  11727. #clear-search {
  11728. position: absolute;
  11729. top: 8px;
  11730. right: 112px;
  11731. display: none;
  11732. overflow: hidden;
  11733. width: 23px;
  11734. height: 23px
  11735. }
  11736. #search .icon-clear-input {
  11737. top: -2px;
  11738. left: -2px
  11739. }
  11740. #filter {
  11741. position: absolute;
  11742. top: 0;
  11743. right: 0;
  11744. width: 165px
  11745. }
  11746. .filter-or {
  11747. position: absolute;
  11748. top: 12px;
  11749. color: #808691;
  11750. font-size: 20px
  11751. }
  11752. #filter-bar {
  11753. position: absolute;
  11754. top: 7px;
  11755. right: 7px;
  11756. width: 125px;
  11757. height: 41px;
  11758. background: #111317;
  11759. -webkit-box-shadow: inset 0 0 0 1px #444a59;
  11760. -moz-box-shadow: inset 0 0 0 1px #444a59;
  11761. box-shadow: inset 0 0 0 1px #444a59
  11762. }
  11763. #filter-bar .icon-filter {
  11764. top: 6px;
  11765. left: 9px
  11766. }
  11767. #filter-input {
  11768. position: absolute;
  11769. top: 5px;
  11770. left: 45px;
  11771. width: 80px;
  11772. height: 31px
  11773. }
  11774. #filter-input-field {
  11775. left: 47px
  11776. }
  11777. #filter-input input {
  11778. width: 65%
  11779. }
  11780. #clear-filter {
  11781. position: absolute;
  11782. top: 8px;
  11783. right: 4px;
  11784. display: none;
  11785. overflow: hidden;
  11786. width: 23px;
  11787. height: 23px
  11788. }
  11789. #search-suggestion {
  11790. position: absolute;
  11791. top: 46px;
  11792. left: 60px;
  11793. z-index: 901;
  11794. display: none;
  11795. width: 442px;
  11796. background: #111317
  11797. }
  11798. #search-suggestion ul {
  11799. margin: 0;
  11800. padding: 0;
  11801. width: 100%;
  11802. background: #111317;
  11803. list-style-type: none
  11804. }
  11805. #search-suggestion li {
  11806. position: relative;
  11807. width: 100%;
  11808. height: 30px;
  11809. background: #111317;
  11810. color: #eee;
  11811. cursor: pointer
  11812. }
  11813. #search-suggestion li.selected {
  11814. background: #32234c
  11815. }
  11816. #search-suggestion li .query {
  11817. position: absolute;
  11818. top: 5px;
  11819. left: 41px;
  11820. width: 373px
  11821. }
  11822. #search-suggestion li .bold {
  11823. font-weight: 700
  11824. }
  11825. #search-menu {
  11826. position: absolute;
  11827. top: 8px;
  11828. left: 500px;
  11829. z-index: 500;
  11830. width: 106px;
  11831. height: 39px;
  11832. overflow: hidden
  11833. }
  11834. #search-menu .selected {
  11835. position: absolute;
  11836. top: -4px;
  11837. left: 0;
  11838. width: 100%;
  11839. height: 46px
  11840. }
  11841. #search-menu .bar-divider {
  11842. top: 0;
  11843. height: 39px;
  11844. background: #444a59;
  11845. z-index: 3
  11846. }
  11847. #search-menu span {
  11848. position: absolute;
  11849. left: 28px;
  11850. font-size: 12px
  11851. }
  11852. #search-menu .menu span {
  11853. top: 16px
  11854. }
  11855. #search-menu i {
  11856. top: 15px;
  11857. left: 13px
  11858. }
  11859. #search-menu .menu {
  11860. position: absolute;
  11861. top: 39px;
  11862. left: 0;
  11863. display: none
  11864. }
  11865. #search-menu .icon-soundcloud {
  11866. top: 6px
  11867. }
  11868. #search-menu:hover {
  11869. height: 139px;
  11870. border-right: 1px solid #444a59;
  11871. transition: height .15s ease-out
  11872. }
  11873. #search-menu:hover>.menu {
  11874. display: block;
  11875. background: #111317
  11876. }
  11877. #search-menu:hover>.selected {
  11878. background: #111317
  11879. }
  11880. #search-menu ul {
  11881. margin: 0;
  11882. padding: 0;
  11883. width: 106px;
  11884. height: 90px;
  11885. background: #111317;
  11886. list-style-type: none
  11887. }
  11888. #search-menu li {
  11889. position: relative;
  11890. width: 106px;
  11891. height: 48px;
  11892. border-top: 1px solid #1c1f25;
  11893. border-left: 1px solid #444a59;
  11894. border-right: 1px solid #444a59;
  11895. background: #111317;
  11896. cursor: pointer
  11897. }
  11898. #search-menu li:hover {
  11899. background: #2d313a
  11900. }
  11901. #search-menu li.last {
  11902. border-bottom: 1px solid #444a59
  11903. }
  11904. #search-menu .icon-playlist {
  11905. top: 9px;
  11906. left: 36px
  11907. }
  11908. #search-menu .icon-menu-arrow {
  11909. top: 17px;
  11910. right: 2px;
  11911. left: auto
  11912. }
  11913. #search-menu .selected .icon-playlist {
  11914. top: 9px;
  11915. left: 36px
  11916. }
  11917. #search-menu .selected .icon-soundcloud {
  11918. top: 7px
  11919. }
  11920. .sign-up-overlay {
  11921. position: fixed;
  11922. top: 0;
  11923. right: 0;
  11924. bottom: 0;
  11925. left: 0;
  11926. z-index: 150000;
  11927. display: none;
  11928. background: rgba(17, 19, 23, .7);
  11929. text-align: center;
  11930. white-space: nowrap
  11931. }
  11932. .sign-up-overlay.showing {
  11933. display: block
  11934. }
  11935. .sign-up-overlay a,
  11936. .sign-up-overlay a:visited {
  11937. color: #eee;
  11938. text-decoration: none
  11939. }
  11940. .sign-up-overlay a:hover {
  11941. color: #30c8fc;
  11942. text-decoration: underline
  11943. }
  11944. .sign-up-overlay .forgot-password a {
  11945. text-decoration: underline
  11946. }
  11947. .sign-up-overlay .box {
  11948. position: relative;
  11949. display: inline-block;
  11950. overflow: hidden;
  11951. margin: 0 auto;
  11952. width: 326px;
  11953. height: 360px;
  11954. background: #1c1f25;
  11955. vertical-align: middle;
  11956. white-space: normal;
  11957. transition: all .2s ease-out
  11958. }
  11959. .sign-up-overlay:before {
  11960. display: inline-block;
  11961. box-sizing: border-box;
  11962. margin-right: -.25em;
  11963. height: 100%;
  11964. content: '';
  11965. vertical-align: middle
  11966. }
  11967. .sign-up-overlay .mode {
  11968. position: absolute;
  11969. top: 57px;
  11970. left: 0;
  11971. width: 100%;
  11972. transition: all .2s ease-out
  11973. }
  11974. .sign-up-overlay .mode.login-mode {
  11975. left: 600px;
  11976. transition: all .2s ease-out
  11977. }
  11978. .sign-up-overlay.login .mode.register-mode {
  11979. left: -600px;
  11980. transition: all .2s ease-out
  11981. }
  11982. .sign-up-overlay.login .mode.login-mode {
  11983. left: 0;
  11984. transition: all .2s ease-out
  11985. }
  11986. .sign-up-overlay input {
  11987. z-index: 1;
  11988. height: 57px;
  11989. border: 0;
  11990. background: #111317;
  11991. -webkit-box-shadow: inset 0 0 0 1px #323742;
  11992. -moz-box-shadow: inset 0 0 0 1px #323742;
  11993. box-shadow: inset 0 0 0 1px #323742;
  11994. color: #eee;
  11995. font-size: 20px;
  11996. font-family: "Open Sans", sans-serif
  11997. }
  11998. .sign-up-overlay input:focus {
  11999. -webkit-box-shadow: inset 0 0 0 1px #009cdd!important;
  12000. -moz-box-shadow: inset 0 0 0 1px #009cdd!important;
  12001. box-shadow: inset 0 0 0 1px #009cdd!important
  12002. }
  12003. .sign-up-overlay button {
  12004. position: relative;
  12005. display: inline-block;
  12006. padding: 0 25px;
  12007. height: 57px;
  12008. background: #009cdd;
  12009. color: #eee;
  12010. white-space: nowrap;
  12011. font-weight: 400;
  12012. font-size: 20px;
  12013. font-family: "Open Sans", sans-serif;
  12014. cursor: pointer
  12015. }
  12016. .sign-up-overlay .buttons {
  12017. position: relative;
  12018. height: 57px;
  12019. white-space: nowrap
  12020. }
  12021. .sign-up-overlay .buttons button {
  12022. float: left;
  12023. background: #323742
  12024. }
  12025. .sign-up-overlay .buttons button:hover {
  12026. background: #444a59
  12027. }
  12028. .sign-up-overlay .buttons button.selected {
  12029. background: #555d70;
  12030. cursor: default
  12031. }
  12032. .sign-up-overlay .or-circle {
  12033. position: absolute;
  12034. top: 9px;
  12035. z-index: 15;
  12036. padding: 10px;
  12037. border-radius: 50%;
  12038. background: #1c1f25;
  12039. text-transform: uppercase
  12040. }
  12041. .sign-up-overlay .username {
  12042. position: relative;
  12043. margin: 12px auto 0
  12044. }
  12045. .sign-up-overlay .username .container .spinner {
  12046. right: 15px;
  12047. top: 29px;
  12048. z-index: 5
  12049. }
  12050. .sign-up-overlay .username .url {
  12051. display: none
  12052. }
  12053. .sign-up-overlay .username input {
  12054. position: relative;
  12055. padding: 0 20px
  12056. }
  12057. .username .container.available input,
  12058. .username .container.available input:focus {
  12059. -webkit-box-shadow: inset 0 0 0 1px #67a952!important;
  12060. -moz-box-shadow: inset 0 0 0 1px #67a952!important;
  12061. box-shadow: inset 0 0 0 1px #67a952!important
  12062. }
  12063. .username .container.unavailable input,
  12064. .username .container.unavailable input:focus {
  12065. -webkit-box-shadow: inset 0 0 0 1px #f04f30!important;
  12066. -moz-box-shadow: inset 0 0 0 1px #f04f30!important;
  12067. box-shadow: inset 0 0 0 1px #f04f30!important
  12068. }
  12069. .sign-up-overlay .social-login {
  12070. position: relative;
  12071. margin: 12px auto 0;
  12072. height: 57px
  12073. }
  12074. .sign-up-overlay .or {
  12075. position: relative;
  12076. margin: 6px auto;
  12077. text-transform: uppercase
  12078. }
  12079. .sign-up-overlay .email-login {
  12080. position: relative;
  12081. margin: 0 auto;
  12082. width: 302px
  12083. }
  12084. .sign-up-overlay .email-login input {
  12085. position: relative;
  12086. margin-top: 12px;
  12087. padding: 0 20px;
  12088. display: none
  12089. }
  12090. .sign-up-overlay .email-login button {
  12091. position: relative
  12092. }
  12093. .sign-up-overlay .box.show-email .register-mode .email-login button {
  12094. position: relative;
  12095. margin-top: 6px
  12096. }
  12097. .sign-up-overlay .box.show-email .email-login input {
  12098. display: block
  12099. }
  12100. .sign-up-overlay .box.show-email .login-mode .email-login button {
  12101. margin-top: 12px
  12102. }
  12103. .sign-up-overlay .email-login input.email {
  12104. margin-top: 0
  12105. }
  12106. .sign-up-overlay .notice {
  12107. position: relative;
  12108. margin: 12px auto;
  12109. color: #808691;
  12110. font-size: 12px
  12111. }
  12112. .sign-up-overlay .forgot {
  12113. position: relative;
  12114. margin-top: 12px
  12115. }
  12116. .sign-up-overlay .forgot a {
  12117. text-decoration: underline
  12118. }
  12119. .sign-up-overlay .forgot a:hover {
  12120. color: #30c8fc
  12121. }
  12122. .sign-up-overlay .login-facebook {
  12123. position: relative;
  12124. display: inline-block;
  12125. padding: 0 16px 0 66px;
  12126. min-width: 200px;
  12127. height: 57px;
  12128. background: #3b5998;
  12129. -webkit-box-shadow: inset 50px 0 0 0 rgba(10, 10, 10, .2);
  12130. -moz-box-shadow: inset 50px 0 0 0 rgba(10, 10, 10, .2);
  12131. box-shadow: inset 50px 0 0 0 rgba(10, 10, 10, .2);
  12132. white-space: nowrap;
  12133. font-size: 20px;
  12134. cursor: pointer
  12135. }
  12136. .sign-up-overlay .login-facebook .icon-facebook-f-white {
  12137. position: absolute;
  12138. top: 13px;
  12139. left: 10px
  12140. }
  12141. .sign-up-overlay .login-facebook span {
  12142. position: relative;
  12143. top: 14px
  12144. }
  12145. .sign-up-overlay.login .box {
  12146. margin-bottom: 84px;
  12147. height: 261px;
  12148. transition: all .2s ease-out
  12149. }
  12150. .sign-up-overlay.login .box.show-email {
  12151. margin-bottom: 170px;
  12152. height: 397px;
  12153. transition: all .2s ease-out
  12154. }
  12155. .sign-up-overlay .box.show-email {
  12156. margin-bottom: 0;
  12157. height: 585px;
  12158. transition: all .2s ease-out
  12159. }
  12160. .sign-up-overlay .box.show-email #register-recaptcha {
  12161. display: inline-block;
  12162. margin: 12px auto 0
  12163. }
  12164. #register-recaptcha {
  12165. position: relative;
  12166. display: none
  12167. }
  12168. .social-menu {
  12169. position: absolute;
  12170. top: 0;
  12171. width: 54px;
  12172. height: 54px
  12173. }
  12174. .social-menu .icon {
  12175. top: 16px;
  12176. left: 16px
  12177. }
  12178. #androidbadge-menu {
  12179. display: none;
  12180. right: 145px;
  12181. top: 16px
  12182. }
  12183. #iosbadge-menu {
  12184. display: none;
  12185. right: 99px;
  12186. top: 15px
  12187. }
  12188. #playlist-meta.sub #androidbadge-menu {
  12189. display: block
  12190. }
  12191. #playlist-meta.sub #iosbadge-menu {
  12192. display: block
  12193. }
  12194. #facebook-menu {
  12195. right: 177px
  12196. }
  12197. #twitter-menu {
  12198. right: 120px
  12199. }
  12200. #playlist-meta.sub #facebook-menu {
  12201. right: 69px
  12202. }
  12203. #playlist-meta.sub #twitter-menu {
  12204. right: 12px
  12205. }
  12206. #subscribebtn-menu {
  12207. right: 0
  12208. }
  12209. #playlist-meta.sub #subscribebtn-menu {
  12210. display: none
  12211. }
  12212. body.is-guest #subscribebtn-menu {
  12213. display: none
  12214. }
  12215. #signupbtn-menu {
  12216. right: 0;
  12217. display: none
  12218. }
  12219. body.is-guest #signupbtn-menu {
  12220. display: block
  12221. }
  12222. #facebook-menu li {
  12223. background: #3b5998
  12224. }
  12225. #twitter-menu li {
  12226. background: #1dadea
  12227. }
  12228. .social-menu .arrow-down {
  12229. position: absolute
  12230. }
  12231. #facebook-menu .arrow-down {
  12232. border-top: 8px solid #3b5998
  12233. }
  12234. #twitter-menu .arrow-down {
  12235. border-top: 8px solid #1dadea
  12236. }
  12237. #facebook-menu .arrow-down {
  12238. left: 103px
  12239. }
  12240. #twitter-menu .arrow-down {
  12241. left: 160px
  12242. }
  12243. .social-menu .menu {
  12244. position: absolute
  12245. }
  12246. #facebook-menu .menu {
  12247. top: -149px;
  12248. left: -81px;
  12249. width: 199px;
  12250. height: 156px
  12251. }
  12252. #twitter-menu .menu {
  12253. top: -117px;
  12254. left: -138px;
  12255. width: 199px;
  12256. height: 124px
  12257. }
  12258. #facebook-menu .invite-only {
  12259. top: -110px;
  12260. height: 118px
  12261. }
  12262. #twitter-menu .invite-only {
  12263. top: -78px;
  12264. height: 86px
  12265. }
  12266. .social-menu .menu.invite-only li:nth-child(2) {
  12267. display: none
  12268. }
  12269. .social-menu ul {
  12270. width: 100%;
  12271. overflow: hidden;
  12272. list-style-type: none
  12273. }
  12274. .social-menu li {
  12275. position: relative;
  12276. width: 100%;
  12277. height: 38px
  12278. }
  12279. #facebook-menu li:first-child {
  12280. height: 70px
  12281. }
  12282. #facebook-menu li {
  12283. border-bottom: 1px solid #3b5998
  12284. }
  12285. #twitter-menu li {
  12286. border-bottom: 1px solid #1dadea
  12287. }
  12288. .social-menu .menu .icon-share {
  12289. top: 4px;
  12290. left: 12px
  12291. }
  12292. .social-menu .menu .icon-invite {
  12293. top: 4px;
  12294. left: 13px
  12295. }
  12296. .social-menu li .social-item {
  12297. position: absolute;
  12298. top: 9px;
  12299. left: 56px;
  12300. text-align: left;
  12301. font-weight: 400;
  12302. cursor: pointer
  12303. }
  12304. .social-menu li .social-item:hover {
  12305. text-decoration: underline
  12306. }
  12307. .social-menu .menu {
  12308. display: none
  12309. }
  12310. .social-menu:hover>.menu {
  12311. display: block
  12312. }
  12313. .social-menu:hover>.icon {
  12314. opacity: 1
  12315. }
  12316. #twitter-follow {
  12317. position: absolute;
  12318. top: 9px;
  12319. left: 9px
  12320. }
  12321. #fb-page {
  12322. position: absolute;
  12323. top: -100px;
  12324. left: -250px
  12325. }
  12326. #facebook-menu #fb-page {
  12327. top: -1px;
  12328. left: -1px
  12329. }
  12330. .social-menu .android-badge {
  12331. width: 24px;
  12332. height: 24px;
  12333. background: url('https://cdn.plug.dj/_/static/images/icons/android.1943a51ed9ecea7ac35729302453277d9eaf3217.png') no-repeat;
  12334. background-size: 24px 24px
  12335. }
  12336. .social-menu .iphone-badge {
  12337. width: 24px;
  12338. height: 24px;
  12339. background: url('https://cdn.plug.dj/_/static/images/icons/ios.09bc5cc30ecc9e3dc952fccc5293197cdac37b2d.png') no-repeat;
  12340. background-size: 24px 24px
  12341. }
  12342. .social-menu .subscribe {
  12343. position: relative;
  12344. top: 0;
  12345. float: right;
  12346. padding: 15px 15px;
  12347. background: #009cdd;
  12348. color: #eee;
  12349. font-weight: 400;
  12350. font-size: 18px;
  12351. font-family: "Open Sans", sans-serif;
  12352. cursor: pointer
  12353. }
  12354. .social-menu .subscribe a,
  12355. .social-menu .subscribe a:visited {
  12356. color: #eee;
  12357. text-decoration: none
  12358. }
  12359. .social-menu .subscribe a:hover {
  12360. text-decoration: underline
  12361. }
  12362. .social-menu .signup {
  12363. position: relative;
  12364. top: 0;
  12365. float: right;
  12366. padding: 15px 15px;
  12367. background: #009cdd;
  12368. color: #eee;
  12369. font-weight: 400;
  12370. font-size: 18px;
  12371. font-family: "Open Sans", sans-serif;
  12372. cursor: pointer;
  12373. width: 115px
  12374. }
  12375. .social-menu .signup a,
  12376. .social-menu .signup a:visited {
  12377. color: #eee;
  12378. text-decoration: none
  12379. }
  12380. .social-menu .signup a:hover {
  12381. text-decoration: underline
  12382. }
  12383. #tooltip {
  12384. position: absolute;
  12385. top: 100px;
  12386. left: 100px;
  12387. z-index: 9000000;
  12388. pointer-events: none
  12389. }
  12390. #tooltip span {
  12391. padding: 4px 8px;
  12392. background: #555d70;
  12393. white-space: nowrap;
  12394. font-weight: 600;
  12395. font-size: 12px;
  12396. font-family: Roboto, sans-serif;
  12397. pointer-events: none
  12398. }
  12399. #tooltip .corner {
  12400. position: absolute;
  12401. bottom: -12px;
  12402. left: 0;
  12403. z-index: -1;
  12404. width: 0;
  12405. height: 0;
  12406. border-top: 10px solid #555d70;
  12407. border-right: 10px solid transparent;
  12408. border-bottom: 10px solid transparent;
  12409. border-left: 10px solid #555d70;
  12410. pointer-events: none
  12411. }
  12412. #tooltip.right .corner {
  12413. right: 0;
  12414. left: auto;
  12415. border-top: 10px solid #555d70;
  12416. border-right: 10px solid #555d70;
  12417. border-left: 10px solid transparent
  12418. }
  12419. #tooltip.purple span {
  12420. background: #925aff
  12421. }
  12422. #tooltip.purple .corner {
  12423. border-top: 10px solid #925aff;
  12424. border-left: 10px solid #925aff
  12425. }
  12426. #tooltip.right.purple .corner {
  12427. border-top: 10px solid #925aff;
  12428. border-right: 10px solid #925aff;
  12429. border-left: 10px solid transparent
  12430. }
  12431. #tooltip.blue span {
  12432. background: #009cdd
  12433. }
  12434. #tooltip.blue .corner {
  12435. border-top: 10px solid #009cdd;
  12436. border-left: 10px solid #009cdd
  12437. }
  12438. #tooltip.right.blue .corner {
  12439. border-top: 10px solid #009cdd;
  12440. border-right: 10px solid #009cdd;
  12441. border-left: 10px solid transparent
  12442. }
  12443. #tooltip.orange span {
  12444. background: #f04f30
  12445. }
  12446. #tooltip.orange .corner {
  12447. border-top: 10px solid #f04f30;
  12448. border-left: 10px solid #f04f30
  12449. }
  12450. #tooltip.right.orange .corner {
  12451. border-top: 10px solid #f04f30;
  12452. border-right: 10px solid #f04f30;
  12453. border-left: 10px solid transparent
  12454. }
  12455. #tooltip.green span {
  12456. background: #67a952
  12457. }
  12458. #tooltip.green .corner {
  12459. border-top: 10px solid #67a952;
  12460. border-left: 10px solid #67a952
  12461. }
  12462. #tooltip.right.green .corner {
  12463. border-top: 10px solid #67a952;
  12464. border-right: 10px solid #67a952;
  12465. border-left: 10px solid transparent
  12466. }
  12467. #tutorial {
  12468. position: absolute;
  12469. top: 0;
  12470. left: 0;
  12471. width: 100%;
  12472. height: 100%;
  12473. background: #1c1f25;
  12474. font-size: 16px
  12475. }
  12476. #tutorial .section {
  12477. position: relative;
  12478. float: left;
  12479. margin-left: 6%;
  12480. margin-top: 25px;
  12481. width: 88%
  12482. }
  12483. #tutorial .intro {
  12484. clear: right
  12485. }
  12486. #tutorial .intro .avi {
  12487. position: relative;
  12488. float: left;
  12489. width: 84px;
  12490. height: 128px;
  12491. margin-right: 15px;
  12492. background: url('https://cdn.plug.dj/_/static/images/tutorial_avi.ce5d713541724dfad1c3125db5f706c965d523c4.png') no-repeat
  12493. }
  12494. #tutorial .intro {
  12495. clear: left
  12496. }
  12497. #tutorial .intro span {
  12498. position: relative;
  12499. float: left;
  12500. top: 36px;
  12501. width: 170px
  12502. }
  12503. #tutorial .info .title {
  12504. position: relative;
  12505. width: 100%
  12506. }
  12507. #tutorial .info .description {
  12508. position: relative;
  12509. width: 100%;
  12510. color: #808691;
  12511. margin-top: 10px
  12512. }
  12513. #tutorial .links .title {
  12514. position: relative;
  12515. width: 100%;
  12516. color: #808691;
  12517. float: left;
  12518. margin-bottom: 5px
  12519. }
  12520. #tutorial .links span {
  12521. position: relative;
  12522. float: left;
  12523. clear: left;
  12524. margin-top: 10px;
  12525. cursor: pointer
  12526. }
  12527. #tutorial .links span:hover {
  12528. text-decoration: underline
  12529. }
  12530. #user-lists,
  12531. #waitlist {
  12532. position: absolute;
  12533. top: 0;
  12534. z-index: 3;
  12535. display: none;
  12536. width: 100%;
  12537. height: 100%
  12538. }
  12539. #user-lists .header,
  12540. #waitlist .header {
  12541. position: absolute;
  12542. top: 0;
  12543. left: 0;
  12544. width: 345px;
  12545. height: 46px;
  12546. border-bottom: #1c1f25 1px solid
  12547. }
  12548. #user-lists .header .divider {
  12549. position: absolute;
  12550. top: 0;
  12551. height: 1px;
  12552. background: #1c1f25
  12553. }
  12554. #user-lists .header .divider.left {
  12555. left: 0;
  12556. width: 80px
  12557. }
  12558. #user-lists .header .divider.right {
  12559. right: 0;
  12560. width: 160px
  12561. }
  12562. #user-lists .header .button {
  12563. position: relative;
  12564. top: 4px;
  12565. float: left;
  12566. width: 42px;
  12567. height: 42px;
  12568. cursor: pointer
  12569. }
  12570. #user-lists .header .button.bans,
  12571. #user-lists .header .button.mutes,
  12572. #user-lists .header .button.waitlist-bans {
  12573. display: none
  12574. }
  12575. #user-lists .header.manager .button.bans,
  12576. #user-lists .header.manager .button.mutes,
  12577. #user-lists .header.manager .button.waitlist-bans {
  12578. display: block
  12579. }
  12580. #user-lists .header .button.room.selected {
  12581. border-bottom: 1px solid #808691
  12582. }
  12583. #user-lists .header .button.staff.selected {
  12584. border-bottom: 1px solid #ac76ff
  12585. }
  12586. #user-lists .header .button.bans.selected {
  12587. border-bottom: 1px solid #f04f30
  12588. }
  12589. #user-lists .header .button.waitlist-bans.selected {
  12590. border-bottom: 1px solid #f04f30
  12591. }
  12592. #user-lists .header .button.mutes.selected {
  12593. border-bottom: 1px solid #f04f30
  12594. }
  12595. #user-lists .header .button.ignored.selected {
  12596. border-bottom: 1px solid #f04f30
  12597. }
  12598. #user-lists .header .button.trolls.selected {
  12599. border-bottom: 1px solid #db182e
  12600. }
  12601. #user-lists .header .button.room i {
  12602. top: 5px;
  12603. left: 6px
  12604. }
  12605. #user-lists .header .button.staff i {
  12606. top: 5px;
  12607. left: 6px
  12608. }
  12609. #user-lists .header .button.bans i,
  12610. #user-lists .header .button.waitlist-bans i {
  12611. top: 5px;
  12612. left: 8px
  12613. }
  12614. #user-lists .header .button.mutes i {
  12615. top: 5px;
  12616. left: 5px
  12617. }
  12618. #user-lists .header .button.ignored i {
  12619. top: 5px;
  12620. left: 4px
  12621. }
  12622. #user-lists .header .button.trolls span {
  12623. position: absolute;
  12624. top: 6px;
  12625. left: 6px
  12626. }
  12627. #user-lists .list-header {
  12628. position: absolute;
  12629. top: 47px;
  12630. left: 0;
  12631. width: 345px;
  12632. height: 48px;
  12633. border-bottom: #1c1f25 1px solid
  12634. }
  12635. #user-lists .list-header .title {
  12636. position: relative;
  12637. top: 11px;
  12638. margin-left: 12px;
  12639. font-size: 18px
  12640. }
  12641. #user-lists .list-header .count {
  12642. position: relative;
  12643. top: 11px;
  12644. margin-left: 8px;
  12645. font-size: 14px
  12646. }
  12647. #user-lists .list-header .input-background {
  12648. position: absolute;
  12649. top: 9px;
  12650. right: 17px;
  12651. width: 115px;
  12652. height: 30px;
  12653. background: #0a0a0a;
  12654. -webkit-box-shadow: inset 0 0 0 1px #444a59;
  12655. -moz-box-shadow: inset 0 0 0 1px #444a59;
  12656. box-shadow: inset 0 0 0 1px #444a59
  12657. }
  12658. #user-lists .list-header input {
  12659. position: absolute;
  12660. top: 6px;
  12661. left: 8px;
  12662. width: 76px;
  12663. outline: 0;
  12664. border: 0;
  12665. background: 0 0;
  12666. color: #eee;
  12667. font-weight: 400;
  12668. font-size: 13px;
  12669. font-family: "Open Sans", sans-serif
  12670. }
  12671. #user-lists .list-header .clear-filter {
  12672. position: absolute;
  12673. top: 11px;
  12674. right: 20px;
  12675. display: none;
  12676. overflow: hidden;
  12677. width: 23px;
  12678. height: 23px;
  12679. cursor: pointer
  12680. }
  12681. #user-lists .list-header .clear-filter .icon-clear-input {
  12682. top: -2px;
  12683. left: -2px
  12684. }
  12685. #user-lists .list {
  12686. position: absolute;
  12687. top: 96px;
  12688. left: 0;
  12689. overflow-x: hidden;
  12690. overflow-y: auto;
  12691. width: 345px
  12692. }
  12693. #user-lists .list .user {
  12694. position: relative;
  12695. width: 100%;
  12696. height: 30px;
  12697. cursor: pointer
  12698. }
  12699. #user-lists .list .user:hover {
  12700. background-color: #1c1f25
  12701. }
  12702. #user-lists .list.room .user i {
  12703. top: 7px;
  12704. left: 12px
  12705. }
  12706. #user-lists .list.room .user i.icon-chat-dj {
  12707. top: 8px
  12708. }
  12709. #user-lists .list.room .user .icon-woot {
  12710. top: -1px;
  12711. right: 9px;
  12712. left: auto
  12713. }
  12714. #user-lists .list.room .user .icon-grab {
  12715. top: -1px;
  12716. right: 8px;
  12717. left: auto
  12718. }
  12719. #user-lists .list .user .name {
  12720. position: absolute;
  12721. top: 5px;
  12722. left: 38px;
  12723. font-size: 14px
  12724. }
  12725. #user-lists .list.staff .group {
  12726. position: relative;
  12727. margin-top: 16px;
  12728. width: 100%;
  12729. height: 36px;
  12730. border-top: 1px solid #282c35;
  12731. border-bottom: 1px solid #1c1f25;
  12732. background: #111317
  12733. }
  12734. #user-lists .list.staff .group:first-child {
  12735. margin-top: 0;
  12736. border-top: 1px solid #0a0a0a
  12737. }
  12738. #user-lists .list.staff .group i {
  12739. top: 9px;
  12740. left: 16px
  12741. }
  12742. #user-lists .list.staff .group.bouncer i,
  12743. #user-lists .list.staff .group.dj i,
  12744. #user-lists .list.staff .group.manager i {
  12745. top: 10px
  12746. }
  12747. #user-lists .list.staff .group span {
  12748. position: absolute;
  12749. top: 6px;
  12750. left: 45px;
  12751. font-size: 16px
  12752. }
  12753. #user-lists .list.staff .user .name {
  12754. left: 45px
  12755. }
  12756. #user-lists .list.bans .user,
  12757. #user-lists .list.mutes .user {
  12758. height: 50px
  12759. }
  12760. #user-lists .list.bans .user .name,
  12761. #user-lists .list.ignored .user .name,
  12762. #user-lists .list.mutes .user .name {
  12763. top: 5px;
  12764. left: 17px
  12765. }
  12766. #user-lists .list.bans .user .timestamp,
  12767. #user-lists .list.mutes .user .expires {
  12768. position: absolute;
  12769. top: 5px;
  12770. right: 17px;
  12771. color: #444a59;
  12772. text-align: right;
  12773. font-weight: 400;
  12774. font-size: 12px
  12775. }
  12776. #user-lists .list.bans .user .duration {
  12777. position: absolute;
  12778. top: 26px;
  12779. right: 17px;
  12780. color: #444a59;
  12781. text-align: right;
  12782. font-weight: 400;
  12783. font-size: 12px
  12784. }
  12785. #user-lists .list.bans .user .label,
  12786. #user-lists .list.mutes .user .label {
  12787. position: relative;
  12788. top: 24px;
  12789. margin-left: 17px;
  12790. color: #925aff;
  12791. font-size: 12px
  12792. }
  12793. #user-lists .list.bans .user .moderator,
  12794. #user-lists .list.mutes .user .moderator {
  12795. position: relative;
  12796. top: 24px;
  12797. margin-left: 1px;
  12798. color: #808691;
  12799. font-size: 12px
  12800. }
  12801. #user-lists .list.bans .user .unban,
  12802. #user-lists .list.mutes .user .unmute {
  12803. position: absolute;
  12804. top: 26px;
  12805. right: 17px;
  12806. display: none;
  12807. color: #009cdd;
  12808. text-align: right;
  12809. font-size: 12px
  12810. }
  12811. #user-lists .list.bans .user:hover>.unban,
  12812. #user-lists .list.ignored .user:hover>.unignore,
  12813. #user-lists .list.mutes .user:hover>.unmute {
  12814. display: block
  12815. }
  12816. #user-lists .list.bans .user:hover>.duration {
  12817. display: none
  12818. }
  12819. #user-lists .list.ignored .user .unignore {
  12820. position: absolute;
  12821. top: 6px;
  12822. right: 17px;
  12823. display: none;
  12824. color: #009cdd;
  12825. text-align: right;
  12826. font-size: 12px
  12827. }
  12828. #user-lists .list .room {
  12829. position: absolute;
  12830. top: 25px;
  12831. left: 17px;
  12832. color: #808691
  12833. }
  12834. #user-lists .list.bans .icon-x-white {
  12835. right: 5px;
  12836. top: 10px;
  12837. display: none
  12838. }
  12839. #waitlist .header .title {
  12840. position: relative;
  12841. top: 11px;
  12842. margin-left: 17px;
  12843. font-size: 18px
  12844. }
  12845. #waitlist .header .position {
  12846. position: absolute;
  12847. top: 10px;
  12848. right: 17px;
  12849. text-align: right
  12850. }
  12851. #waitlist .header .position .current {
  12852. font-size: 18px
  12853. }
  12854. #waitlist .header .count {
  12855. color: #808691;
  12856. font-size: 14px
  12857. }
  12858. #waitlist .list {
  12859. position: absolute;
  12860. top: 47px;
  12861. left: 0;
  12862. overflow-x: hidden;
  12863. overflow-y: auto;
  12864. width: 345px
  12865. }
  12866. #waitlist .list .user {
  12867. position: relative;
  12868. overflow: hidden;
  12869. width: 100%;
  12870. height: 41px;
  12871. background: #0a0a0a
  12872. }
  12873. #waitlist .list .user .icon-drag-handle {
  12874. top: 5px;
  12875. left: 6px;
  12876. display: none
  12877. }
  12878. #waitlist .list.manager .user .icon-drag-handle {
  12879. display: block
  12880. }
  12881. #waitlist .list.manager.single .user .icon-drag-handle {
  12882. display: none
  12883. }
  12884. #waitlist .list .user .icon-drag-handle:hover {
  12885. cursor: -webkit-grab;
  12886. cursor: -moz-grab
  12887. }
  12888. #waitlist .list .user .meta {
  12889. position: absolute;
  12890. top: 0;
  12891. left: 18px;
  12892. overflow: hidden;
  12893. width: 310px;
  12894. height: 40px;
  12895. text-overflow: ellipsis;
  12896. white-space: nowrap
  12897. }
  12898. #waitlist .list.manager .user .meta {
  12899. cursor: -webkit-grab;
  12900. cursor: -moz-grab;
  12901. left: 43px;
  12902. width: 286px;
  12903. border-bottom: 1px solid #282c35
  12904. }
  12905. #waitlist .list.manager.single .user .meta {
  12906. cursor: default
  12907. }
  12908. #waitlist .list .user .position {
  12909. position: relative;
  12910. top: 9px;
  12911. float: left;
  12912. color: #808691;
  12913. font-weight: 600;
  12914. font-size: 16px
  12915. }
  12916. #waitlist .list .user .image {
  12917. position: relative;
  12918. top: 5px;
  12919. float: left;
  12920. margin-left: 9px;
  12921. width: 31px;
  12922. height: 31px
  12923. }
  12924. #waitlist .list .user .name {
  12925. position: relative;
  12926. top: 9px;
  12927. float: left;
  12928. margin-left: 6px;
  12929. font-size: 16px
  12930. }
  12931. #waitlist .list .user .name i {
  12932. position: relative;
  12933. top: 3px;
  12934. display: none;
  12935. float: left;
  12936. margin-right: 4px
  12937. }
  12938. #waitlist .list .user .name span {
  12939. position: relative;
  12940. float: left;
  12941. width: 200px;
  12942. overflow: hidden;
  12943. text-overflow: ellipsis;
  12944. white-space: nowrap
  12945. }
  12946. #waitlist .list .user .meta.is-admin .name span,
  12947. #waitlist .list .user .meta.is-ambassador .name span,
  12948. #waitlist .list .user .meta.is-plot .name span,
  12949. #waitlist .list .user .meta.is-promoter .name span,
  12950. #waitlist .list .user .meta.is-sitemod .name span {
  12951. width: 180px
  12952. }
  12953. #waitlist .list .user .meta.is-admin .name i,
  12954. #waitlist .list .user .meta.is-ambassador .name i,
  12955. #waitlist .list .user .meta.is-plot .name i,
  12956. #waitlist .list .user .meta.is-promoter .name i,
  12957. #waitlist .list .user .meta.is-sitemod .name i,
  12958. #waitlist .list .user .meta.is-staff .name i {
  12959. display: block
  12960. }
  12961. #waitlist .list .user .meta.is-staff .name i.icon-chat-dj {
  12962. top: 4px
  12963. }
  12964. #waitlist .list .user:last-child>.meta {
  12965. border-bottom: none
  12966. }
  12967. #waitlist .header .divider {
  12968. position: absolute;
  12969. top: 0;
  12970. width: 185px;
  12971. height: 1px;
  12972. background: #1c1f25
  12973. }
  12974. #waitlist .header .divider.left {
  12975. width: 185px;
  12976. left: 0
  12977. }
  12978. #waitlist .header .divider.right {
  12979. width: 60px;
  12980. right: 0
  12981. }
  12982. #waitlist .list .user .icon-woot-disabled {
  12983. position: relative;
  12984. float: right;
  12985. margin-right: 10px;
  12986. top: 5px;
  12987. display: none;
  12988. cursor: pointer
  12989. }
  12990. #waitlist .list .user .icon-x-white {
  12991. position: relative;
  12992. float: right;
  12993. top: 6px;
  12994. margin-right: 1px;
  12995. display: none;
  12996. cursor: pointer
  12997. }
  12998. #waitlist .list.manager.bouncer .user .icon-x-white {
  12999. margin-right: 1px
  13000. }
  13001. #waitlist .list .user.locked .icon-x-white,
  13002. #waitlist .list.bouncer .user .icon-x-white,
  13003. #waitlist .list.manager .user.locked .icon-x-white {
  13004. margin-right: 9px
  13005. }
  13006. #waitlist .list.bouncer .user:hover>.icon-x-white,
  13007. #waitlist .list.manager .user:hover>.icon-woot-disabled {
  13008. display: block
  13009. }
  13010. #waitlist .list.manager .user:hover .name span {
  13011. width: 160px
  13012. }
  13013. #waitlist .list .user.locked:hover>.icon-woot-disabled {
  13014. display: none
  13015. }
  13016. #waitlist .list .user.sortable-dragging .icon-woot-disabled,
  13017. #waitlist .list .user.sortable-dragging>.icon-x-white {
  13018. display: none
  13019. }
  13020. #waitlist .list .user.sortable-dragging .meta {
  13021. border-bottom: none
  13022. }
  13023. #waitlist .list .sortable-placeholder {
  13024. background: #111317
  13025. }
  13026. #user-view {
  13027. display: none;
  13028. z-index: 500;
  13029. background: #111317
  13030. }
  13031. #user-view .user-content {
  13032. position: absolute;
  13033. top: 0;
  13034. height: 100%
  13035. }
  13036. .user-content .header {
  13037. position: relative;
  13038. width: 100%;
  13039. height: 21px;
  13040. -webkit-box-shadow: inset 0 1px 0 0 #555d70;
  13041. -moz-box-shadow: inset 0 1px 0 0 #555d70;
  13042. box-shadow: inset 0 1px 0 0 #555d70
  13043. }
  13044. .user-content .header span {
  13045. position: relative;
  13046. text-transform: uppercase;
  13047. top: 4px;
  13048. color: #555d70;
  13049. font-weight: 400
  13050. }
  13051. #user-menu {
  13052. position: absolute;
  13053. top: 0;
  13054. left: 0;
  13055. max-width: 220px;
  13056. width: 22%;
  13057. height: 100%;
  13058. background: #1c1f25
  13059. }
  13060. #user-menu .avatar {
  13061. position: relative;
  13062. overflow: hidden;
  13063. width: 100%;
  13064. height: 250px;
  13065. background: #535d80;
  13066. background: -moz-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13067. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #535d80), color-stop(56%, #32324d), color-stop(73%, #1a1a1a), color-stop(100%, #73716d));
  13068. background: -webkit-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13069. background: -o-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13070. background: -ms-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13071. background: linear-gradient(to bottom, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%)
  13072. }
  13073. #user-menu .avatar img {
  13074. position: absolute;
  13075. top: 10px;
  13076. left: 0
  13077. }
  13078. #user-menu .item {
  13079. position: relative;
  13080. width: 100%;
  13081. height: 46px;
  13082. cursor: pointer
  13083. }
  13084. #user-menu .item.selected {
  13085. background: #32234c;
  13086. cursor: default
  13087. }
  13088. #user-menu .item i {
  13089. top: 8px;
  13090. left: 5px
  13091. }
  13092. #user-menu .item.played i,
  13093. #user-menu .item.settings i {
  13094. left: 4px
  13095. }
  13096. #user-menu .item .label {
  13097. position: absolute;
  13098. top: 12px;
  13099. left: 40px;
  13100. font-size: 16px
  13101. }
  13102. #user-menu .item .count {
  13103. position: absolute;
  13104. top: 17px;
  13105. right: 6px;
  13106. display: none;
  13107. padding: 0 6px;
  13108. min-width: 10px;
  13109. border-radius: 12px;
  13110. background: #db182e;
  13111. text-align: center;
  13112. font-size: 12px
  13113. }
  13114. #user-menu .item.notify .count {
  13115. display: block
  13116. }
  13117. .user-content.communities .top {
  13118. position: relative;
  13119. top: 12px;
  13120. min-height: 43px
  13121. }
  13122. .user-content.communities button {
  13123. position: relative;
  13124. top: 0;
  13125. display: none;
  13126. float: left;
  13127. margin-right: 15px;
  13128. padding: 10px 25px;
  13129. min-width: 230px;
  13130. background: #009cdd;
  13131. color: #eee;
  13132. font-weight: 400;
  13133. font-size: 18px;
  13134. font-family: "Open Sans", sans-serif;
  13135. cursor: pointer
  13136. }
  13137. .user-content.communities .message {
  13138. position: relative;
  13139. color: #808691;
  13140. font-size: 16px
  13141. }
  13142. .user-content.communities .message a,
  13143. .user-content.communities .message a:visited {
  13144. color: #eee;
  13145. text-decoration: none
  13146. }
  13147. .user-content.communities .message a:hover {
  13148. text-decoration: underline
  13149. }
  13150. .user-content.communities .box {
  13151. position: relative;
  13152. top: 0;
  13153. margin-top: 25px
  13154. }
  13155. .user-content.communities.no-create .top button {
  13156. display: none
  13157. }
  13158. .user-content.communities.no-create .top,
  13159. .user-content.communities.none-created .top {
  13160. background: url('https://cdn.plug.dj/_/static/images/community/background.892bc86f530eb3f7a53a2cc60f0c0be481798175.jpg') no-repeat;
  13161. -webkit-box-shadow: inset 0 0 20px 10px #111317;
  13162. -moz-box-shadow: inset 0 0 20px 10px #111317;
  13163. box-shadow: inset 0 0 20px 10px #111317;
  13164. text-align: center
  13165. }
  13166. .user-content.communities.no-create .top .message {
  13167. top: 400px;
  13168. font-size: 18px
  13169. }
  13170. .user-content.communities.none-created .top .message {
  13171. top: 378px;
  13172. margin: 0 auto;
  13173. width: 85%;
  13174. text-align: center;
  13175. font-size: 18px
  13176. }
  13177. .user-content.communities.none-created .top button {
  13178. top: 365px;
  13179. display: inline-block;
  13180. float: none;
  13181. margin: 0 auto
  13182. }
  13183. .user-content.communities .grid .cell.cta button {
  13184. position: absolute;
  13185. top: 210px;
  13186. left: 0;
  13187. display: block;
  13188. float: none;
  13189. width: 100%;
  13190. height: 90px
  13191. }
  13192. .user-content.communities .grid .cell.cta i {
  13193. top: 0;
  13194. left: 0;
  13195. width: 250px;
  13196. height: 210px;
  13197. background: url('https://cdn.plug.dj/_/static/images/createcommunity.481c5e3b1468b15a83fb371d75aa4e97f1f97cbb.png') no-repeat -250px 0;
  13198. display: block
  13199. }
  13200. .user-content .box {
  13201. position: relative;
  13202. width: 100%
  13203. }
  13204. .user-content .grid .cell {
  13205. position: relative;
  13206. float: left;
  13207. overflow: hidden;
  13208. margin: 0 15px 15px 0;
  13209. width: 185px;
  13210. height: 205px;
  13211. background: #1c1f25;
  13212. text-align: center;
  13213. cursor: pointer
  13214. }
  13215. .user-content.communities .grid .cell {
  13216. position: relative;
  13217. float: left;
  13218. overflow: hidden;
  13219. margin: 0 15px 15px 0;
  13220. width: 250px;
  13221. height: 300px;
  13222. background: #1c1f25;
  13223. text-align: left;
  13224. cursor: pointer
  13225. }
  13226. .user-content .grid .cell .top {
  13227. position: absolute;
  13228. top: 0;
  13229. left: 0;
  13230. background: #282c35;
  13231. background: -moz-linear-gradient(top, #282c35 0, #1c1f25 56%, #111317 73%, #282c35 100%);
  13232. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #282c35), color-stop(56%, #1c1f25), color-stop(73%, #111317), color-stop(100%, #282c35));
  13233. background: -webkit-linear-gradient(top, #282c35 0, #1c1f25 56%, #111317 73%, #282c35 100%);
  13234. background: -o-linear-gradient(top, #282c35 0, #1c1f25 56%, #111317 73%, #282c35 100%);
  13235. background: -ms-linear-gradient(top, #282c35 0, #1c1f25 56%, #111317 73%, #282c35 100%);
  13236. background: linear-gradient(to bottom, #282c35 0, #1c1f25 56%, #111317 73%, #282c35 100%);
  13237. width: 100%;
  13238. height: 165px
  13239. }
  13240. .user-content .grid .cell:hover>.top {
  13241. background: #535d80;
  13242. background: -moz-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13243. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #535d80), color-stop(56%, #32324d), color-stop(73%, #1a1a1a), color-stop(100%, #73716d));
  13244. background: -webkit-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13245. background: -o-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13246. background: -ms-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13247. background: linear-gradient(to bottom, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%)
  13248. }
  13249. .user-content .grid .cell .top .avatar {
  13250. position: relative;
  13251. top: 7px;
  13252. overflow: hidden;
  13253. margin: 0 auto;
  13254. width: 150px;
  13255. height: 150px
  13256. }
  13257. .user-content .grid .cell .top .avatar.wide {
  13258. width: 100%
  13259. }
  13260. .user-content .grid .cell .top .avatar img {
  13261. position: absolute;
  13262. top: 0;
  13263. left: 0
  13264. }
  13265. .user-content .grid .cell .top .avatar img.epic {
  13266. height: 150px
  13267. }
  13268. .user-content .tab-menu {
  13269. top: 15px
  13270. }
  13271. .user-content .tab-menu button {
  13272. width: 33%
  13273. }
  13274. .user-content .tab-menu button:first-child {
  13275. -webkit-box-shadow: none;
  13276. -moz-box-shadow: none;
  13277. box-shadow: none
  13278. }
  13279. #user-inventory.user-content .tab-menu button:last-child {
  13280. width: 34%
  13281. }
  13282. #user-inventory .avatars,
  13283. #user-inventory .badges,
  13284. #user-inventory .history {
  13285. position: relative
  13286. }
  13287. #user-inventory .box {
  13288. top: 15px
  13289. }
  13290. #user-inventory .box .header {
  13291. position: relative;
  13292. float: left;
  13293. margin-bottom: 15px
  13294. }
  13295. #user-inventory .avatars .grid .cell {
  13296. height: 175px
  13297. }
  13298. #user-inventory .grid .cell .top {
  13299. height: 100%
  13300. }
  13301. #user-inventory .avatars .grid .cell.selected {
  13302. cursor: default
  13303. }
  13304. #user-inventory .avatars .grid .cell.selected .top {
  13305. background: #535d80;
  13306. background: -moz-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13307. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #535d80), color-stop(56%, #32324d), color-stop(73%, #1a1a1a), color-stop(100%, #73716d));
  13308. background: -webkit-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13309. background: -o-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13310. background: -ms-linear-gradient(top, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%);
  13311. background: linear-gradient(to bottom, #535d80 0, #32324d 56%, #1a1a1a 73%, #73716d 100%)
  13312. }
  13313. #user-inventory .badges .grid .cell {
  13314. width: 185px;
  13315. height: 140px
  13316. }
  13317. #user-inventory .badges .grid .cell .bdg {
  13318. position: relative;
  13319. top: 35px;
  13320. display: block;
  13321. margin: 0 auto
  13322. }
  13323. #user-inventory .badges .grid .cell .no-badge {
  13324. position: relative;
  13325. top: 41px;
  13326. display: block;
  13327. margin: 0 auto;
  13328. width: 50px;
  13329. height: 50px;
  13330. border: 4px solid #444a59;
  13331. border-radius: 50%
  13332. }
  13333. #user-inventory .badges .grid .cell:hover {
  13334. background: #282c35
  13335. }
  13336. #user-inventory .badges .grid .cell.selected {
  13337. background: #282c35;
  13338. -webkit-box-shadow: inset 0 0 0 2px #00b5e6;
  13339. -moz-box-shadow: inset 0 0 0 2px #00b5e6;
  13340. box-shadow: inset 0 0 0 2px #00b5e6;
  13341. cursor: default
  13342. }
  13343. #user-inventory .badges .grid .cell .top {
  13344. background: #111317
  13345. }
  13346. #user-inventory .history .legend {
  13347. position: relative;
  13348. margin-top: 15px;
  13349. width: 100%;
  13350. height: 19px;
  13351. color: #555d70;
  13352. font-weight: 600;
  13353. text-transform: uppercase
  13354. }
  13355. #user-inventory .history .legend .item {
  13356. position: absolute;
  13357. top: 0;
  13358. left: 0;
  13359. width: 150px
  13360. }
  13361. #user-inventory .history .legend .item {
  13362. text-align: center
  13363. }
  13364. #user-inventory .history .legend span {
  13365. position: relative
  13366. }
  13367. #user-inventory .history .legend .meta .col.date span,
  13368. #user-inventory .history .legend .meta .col.id span {
  13369. margin-left: 15px
  13370. }
  13371. #user-inventory .history .legend .meta .col.price span {
  13372. margin-left: 23px
  13373. }
  13374. #user-inventory .history .list {
  13375. position: relative;
  13376. width: 100%
  13377. }
  13378. #user-inventory .history .list .row {
  13379. position: relative;
  13380. float: left;
  13381. height: 150px;
  13382. border-bottom: 1px solid #323742;
  13383. background: #1c1f25;
  13384. text-align: left
  13385. }
  13386. #user-inventory .history .list .row:last-child {
  13387. border: none
  13388. }
  13389. #user-inventory .history .list .row .item {
  13390. position: absolute;
  13391. top: 0;
  13392. left: 0;
  13393. width: 150px;
  13394. height: 100%;
  13395. background: #282c35
  13396. }
  13397. #user-inventory .history .legend .meta,
  13398. #user-inventory .history .list .row .meta {
  13399. position: absolute;
  13400. top: 0;
  13401. left: 150px;
  13402. overflow: hidden;
  13403. height: 100%
  13404. }
  13405. #user-inventory .history .legend .meta .col,
  13406. #user-inventory .history .list .row .meta .col {
  13407. position: relative;
  13408. float: left;
  13409. width: 33%;
  13410. height: 100%
  13411. }
  13412. #user-inventory .history .legend .item .col:before,
  13413. #user-inventory .history .legend .meta .col:before,
  13414. #user-inventory .history .list .row .meta .col:before {
  13415. display: inline-block;
  13416. box-sizing: border-box;
  13417. margin-right: -.25em;
  13418. height: 100%;
  13419. content: '';
  13420. vertical-align: middle
  13421. }
  13422. #user-inventory .history .legend .meta .col:last-child,
  13423. #user-inventory .history .list .row .meta .col:last-child {
  13424. width: 34%
  13425. }
  13426. #user-inventory .history .list .row .meta .col.price i {
  13427. position: relative;
  13428. display: inline-block;
  13429. top: 8px;
  13430. margin-left: 15px
  13431. }
  13432. #user-inventory .history .list .row .meta .col span {
  13433. position: relative;
  13434. font-size: 20px
  13435. }
  13436. #user-inventory .history .list .row .meta .col.date span,
  13437. #user-inventory .history .list .row .meta .col.id span {
  13438. margin-left: 15px
  13439. }
  13440. #user-inventory .history .list .row .meta .col.date,
  13441. #user-inventory .history .list .row .meta .col.id {
  13442. -webkit-box-shadow: -1px 0 0 0 rgba(50, 55, 66, .5);
  13443. -moz-box-shadow: -1px 0 0 0 rgba(50, 55, 66, .5);
  13444. box-shadow: -1px 0 0 0 rgba(50, 55, 66, .5)
  13445. }
  13446. #user-inventory .history .list .row.bundle .item {
  13447. background: url('https://cdn.plug.dj/_/static/images/winter/bundletransaction.b391eb7fd886544027056b035fda09f4c4b69963.png') no-repeat
  13448. }
  13449. #user-inventory .history .list .row.bundle .item span {
  13450. position: absolute;
  13451. bottom: 8px;
  13452. left: 0;
  13453. width: 150px;
  13454. text-transform: uppercase;
  13455. white-space: nowrap;
  13456. font-weight: 700;
  13457. font-size: 16px
  13458. }
  13459. #user-inventory .history .list .row.avatar {
  13460. height: 160px
  13461. }
  13462. #user-inventory .history .list .row.badge {
  13463. height: 100px
  13464. }
  13465. #user-inventory .history .list .row.misc {
  13466. height: 130px
  13467. }
  13468. #user-inventory .history .list .row.badge .item i {
  13469. position: relative;
  13470. top: 15px;
  13471. display: block;
  13472. margin: 0 auto
  13473. }
  13474. #user-inventory .history .list .row.bundle .item {
  13475. text-align: center
  13476. }
  13477. #user-inventory .history .list .row .price span.cash-span {
  13478. margin-left: 21px
  13479. }
  13480. #user-inventory .history .list .row.misc .misc-username {
  13481. position: relative;
  13482. top: 40px;
  13483. display: block;
  13484. margin-left: 28px;
  13485. width: 100px;
  13486. height: 50px;
  13487. background: url('https://cdn.plug.dj/_/static/images/misc/username.6fe1e15c31876e556e15132b4f7896d5bb87a14c.png') no-repeat
  13488. }
  13489. #user-friends .tab-menu {
  13490. top: 15px;
  13491. margin-left: 2%;
  13492. width: 96%
  13493. }
  13494. #user-friends .tab-menu button {
  13495. width: 50%
  13496. }
  13497. #user-friends .tab-menu button:first-child {
  13498. -webkit-box-shadow: none;
  13499. -moz-box-shadow: none;
  13500. box-shadow: none
  13501. }
  13502. #user-friends .tab-menu button .count {
  13503. position: absolute;
  13504. top: 12px;
  13505. display: none;
  13506. margin-left: 10px;
  13507. padding: 0 6px;
  13508. min-width: 10px;
  13509. border-radius: 12px;
  13510. background: #db182e;
  13511. color: #eee;
  13512. text-align: center;
  13513. font-size: 12px
  13514. }
  13515. #user-friends .tab-menu.has-requests button .count {
  13516. display: inline-block
  13517. }
  13518. .user-content.friends .section {
  13519. top: 15px;
  13520. width: 96%
  13521. }
  13522. .user-content.friends .section.requests {
  13523. top: 0
  13524. }
  13525. #user-friends .count-box {
  13526. position: relative;
  13527. margin-top: 7px;
  13528. float: left;
  13529. height: 40px
  13530. }
  13531. #user-friends .count-box i {
  13532. position: relative;
  13533. float: left;
  13534. margin-right: 6px
  13535. }
  13536. #user-friends .count-box span {
  13537. position: relative;
  13538. top: 1px;
  13539. float: left;
  13540. font-weight: 400;
  13541. font-size: 18px
  13542. }
  13543. #user-friends .count-box .total {
  13544. top: 5px;
  13545. color: #808691;
  13546. font-size: 14px
  13547. }
  13548. #user-friends .search-box {
  13549. position: relative;
  13550. float: right;
  13551. height: 40px;
  13552. margin-bottom: 1px
  13553. }
  13554. #user-friends .search {
  13555. position: relative;
  13556. width: 100%;
  13557. height: 40px;
  13558. background: #0a0a0a;
  13559. -webkit-box-shadow: inset 0 0 0 1px #323742;
  13560. -moz-box-shadow: inset 0 0 0 1px #323742;
  13561. box-shadow: inset 0 0 0 1px #323742
  13562. }
  13563. #user-friends .search input {
  13564. position: absolute;
  13565. top: 0;
  13566. padding-left: 40px;
  13567. width: 90%;
  13568. height: 100%;
  13569. border: 0;
  13570. background: 0 0;
  13571. color: #eee;
  13572. font-weight: 400;
  13573. font-size: 16px;
  13574. font-family: "Open Sans", sans-serif
  13575. }
  13576. #user-friends .search i {
  13577. top: 5px;
  13578. left: 7px
  13579. }
  13580. #user-friends .box {
  13581. position: relative;
  13582. left: 0;
  13583. float: left;
  13584. margin-top: 15px;
  13585. width: 100%
  13586. }
  13587. #user-friends .list {
  13588. position: relative;
  13589. width: 100%
  13590. }
  13591. #user-friends .list .row {
  13592. position: relative;
  13593. float: left;
  13594. margin-bottom: 4px;
  13595. width: 100%;
  13596. height: 120px;
  13597. background: #1c1f25
  13598. }
  13599. #user-friends .list .row .image {
  13600. position: absolute;
  13601. top: 16px;
  13602. left: 16px;
  13603. width: 88px;
  13604. height: 88px
  13605. }
  13606. #user-friends .list .row .meta {
  13607. position: absolute;
  13608. top: 16px;
  13609. left: 120px;
  13610. height: 88px
  13611. }
  13612. #user-friends .list .row .name {
  13613. position: relative;
  13614. float: left;
  13615. margin-top: 10px;
  13616. width: 100%
  13617. }
  13618. #user-friends .list .row .name i {
  13619. position: relative;
  13620. float: left;
  13621. margin-top: 2px;
  13622. margin-right: 5px
  13623. }
  13624. #user-friends .list .row.is-ambassador .name i {
  13625. margin-left: -1px
  13626. }
  13627. #user-friends .list .row.is-sitemod .name i {
  13628. margin-left: -1px
  13629. }
  13630. #user-friends .list .row.is-plot .name i {
  13631. margin-left: -1px
  13632. }
  13633. #user-friends .list .row.is-promoter .name i {
  13634. margin-left: -1px
  13635. }
  13636. #user-friends .list .row.is-offline .image i {
  13637. opacity: .5;
  13638. -webkit-filter: grayscale(100%);
  13639. filter: grayscale(100%);
  13640. -moz-filter: grayscale(100%)
  13641. }
  13642. #user-friends .list .row .name span {
  13643. position: relative;
  13644. float: left;
  13645. overflow: hidden;
  13646. width: 90%;
  13647. text-overflow: ellipsis;
  13648. white-space: nowrap
  13649. }
  13650. #user-friends .list .row .level {
  13651. position: relative;
  13652. float: left;
  13653. margin-top: 5px;
  13654. width: 100%
  13655. }
  13656. #user-friends .list .row .level span {
  13657. position: relative;
  13658. float: left
  13659. }
  13660. #user-friends .list .row .level .label {
  13661. margin-right: 6px;
  13662. color: #808691
  13663. }
  13664. #user-friends .list .row .joined {
  13665. position: relative;
  13666. float: left;
  13667. margin-top: 4px;
  13668. width: 100%;
  13669. color: #555d70
  13670. }
  13671. #user-friends .list .row .buttons {
  13672. position: absolute;
  13673. top: 0;
  13674. right: 0;
  13675. width: 125px;
  13676. height: 100%
  13677. }
  13678. #user-friends .list .row .buttons button {
  13679. position: absolute;
  13680. left: 0;
  13681. padding-left: 39px;
  13682. width: 100%;
  13683. height: 59px;
  13684. background: #2d313a;
  13685. color: #eee;
  13686. text-align: left;
  13687. font-weight: 400;
  13688. font-size: 16px;
  13689. font-family: "Open Sans", sans-serif;
  13690. cursor: pointer
  13691. }
  13692. #user-friends .list .row .buttons.no-profile button.positive {
  13693. display: none
  13694. }
  13695. #user-friends .list .row .buttons.no-profile button.negative {
  13696. height: 100%
  13697. }
  13698. #user-friends .list .row .buttons.no-profile button.negative i {
  13699. top: 45px
  13700. }
  13701. #user-friends .list .row .buttons button i {
  13702. top: 15px;
  13703. left: 7px
  13704. }
  13705. #user-friends .requests .list .row .buttons button.positive i {
  13706. left: 8px
  13707. }
  13708. #user-friends .list .row .buttons button.negative {
  13709. bottom: 0;
  13710. padding-left: 38px
  13711. }
  13712. #user-friends .list .row .buttons button.positive:hover {
  13713. background: #009cdd
  13714. }
  13715. #user-friends .list .row .buttons button.negative:hover {
  13716. background: #f04f30
  13717. }
  13718. @media (min-width: 1500px) {
  13719. #user-friends .list .row {
  13720. width: 49%
  13721. }
  13722. #user-friends .list .row:nth-child(2n+1) {
  13723. width: 50%;
  13724. margin-right: 1%
  13725. }
  13726. }
  13727. #user-profile {
  13728. position: absolute;
  13729. top: 0;
  13730. left: 0;
  13731. width: 100%;
  13732. height: 100%
  13733. }
  13734. #the-user-profile .container {
  13735. position: absolute;
  13736. top: 0;
  13737. left: 0;
  13738. width: 100%;
  13739. height: 100%
  13740. }
  13741. .user-content .section {
  13742. position: relative;
  13743. margin-left: 2%;
  13744. width: 97%
  13745. }
  13746. .user-content.profile .meta {
  13747. margin-top: 12px;
  13748. margin-bottom: 15px;
  13749. height: 140px
  13750. }
  13751. .user-content.profile .experience {
  13752. margin-bottom: 15px
  13753. }
  13754. .user-content.profile .notifications {
  13755. margin-bottom: 10px
  13756. }
  13757. .user-content.profile .notifications .header {
  13758. margin-bottom: 15px
  13759. }
  13760. .user-content.profile .notifications .row {
  13761. position: relative;
  13762. margin-top: 10px;
  13763. width: 100%;
  13764. height: 49px;
  13765. background: #282c35;
  13766. cursor: pointer
  13767. }
  13768. .user-content.profile .notifications .row .label {
  13769. position: absolute;
  13770. top: 14px;
  13771. left: 14px;
  13772. font-size: 15px;
  13773. white-space: nowrap
  13774. }
  13775. .user-content.profile .notifications .row .label strong {
  13776. font-weight: 700
  13777. }
  13778. .user-content.profile .notifications .row .timestamp {
  13779. position: absolute;
  13780. top: 14px;
  13781. right: 40px;
  13782. color: #555d70;
  13783. text-align: right;
  13784. font-size: 15px
  13785. }
  13786. .user-content.profile .notifications .row .icon-clear-input {
  13787. position: absolute;
  13788. top: 10px;
  13789. right: 6px;
  13790. opacity: .7
  13791. }
  13792. .user-content.profile .notifications .row .icon-clear-input:hover {
  13793. opacity: 1
  13794. }
  13795. .user-content.profile .notifications .row a {
  13796. position: absolute;
  13797. top: 0;
  13798. left: 0;
  13799. color: #eee;
  13800. text-decoration: none
  13801. }
  13802. .user-content.profile .notifications .row a:visited {
  13803. color: #eee
  13804. }
  13805. .user-content.profile .notifications .row a:hover {
  13806. text-decoration: underline
  13807. }
  13808. .user-content.profile .meta .left {
  13809. position: relative;
  13810. float: left;
  13811. margin-right: 2%;
  13812. width: 40%
  13813. }
  13814. .user-content.profile .meta .badge-box {
  13815. position: relative;
  13816. display: inline-block;
  13817. margin-right: 4px
  13818. }
  13819. .user-content.profile .meta .username {
  13820. position: relative;
  13821. top: -7px;
  13822. display: inline-block;
  13823. font-size: 21px
  13824. }
  13825. .user-content.profile .meta .info {
  13826. position: relative;
  13827. margin-top: 1px;
  13828. width: 100%;
  13829. height: 22px
  13830. }
  13831. .user-content.profile .meta .info .role {
  13832. position: relative;
  13833. float: left;
  13834. margin-right: 25px
  13835. }
  13836. .user-content.profile .meta .info .role i {
  13837. position: relative;
  13838. float: left;
  13839. margin-top: 4px
  13840. }
  13841. .user-content.profile .meta .info .role span {
  13842. position: relative;
  13843. float: left;
  13844. margin-left: 4px;
  13845. font-size: 16px
  13846. }
  13847. .user-content.profile .meta .info .sub {
  13848. position: relative;
  13849. display: none;
  13850. float: left
  13851. }
  13852. .user-content.profile .meta .sub i {
  13853. position: relative;
  13854. float: left;
  13855. margin-top: 4px
  13856. }
  13857. .user-content.profile .meta .sub span {
  13858. position: relative;
  13859. float: left;
  13860. margin-left: 4px;
  13861. color: #c59840;
  13862. font-size: 16px
  13863. }
  13864. .user-content.profile .meta.silver .sub span {
  13865. color: #8694b2
  13866. }
  13867. .user-content.profile .meta.is-subscriber .info .sub {
  13868. display: block
  13869. }
  13870. .user-content.profile .meta .blurb {
  13871. position: relative;
  13872. margin-top: 4px
  13873. }
  13874. .user-content.profile .meta .blurb .arrow-up {
  13875. position: relative;
  13876. margin-left: 15px;
  13877. width: 0;
  13878. height: 0;
  13879. border-right: 6px solid transparent;
  13880. border-bottom: 6px solid #282c35;
  13881. border-left: 6px solid transparent
  13882. }
  13883. .user-content.profile .meta .blurb .box {
  13884. position: relative;
  13885. overflow: hidden;
  13886. padding: 7px;
  13887. min-width: 240px;
  13888. min-height: 38px;
  13889. max-width: 300px;
  13890. max-height: 38px;
  13891. width: 90%;
  13892. background: #282c35;
  13893. cursor: pointer
  13894. }
  13895. .user-content.profile .meta .blurb input {
  13896. position: relative;
  13897. display: none;
  13898. padding: 7px;
  13899. min-width: 240px;
  13900. min-height: 38px;
  13901. max-width: 300px;
  13902. max-height: 38px;
  13903. width: 90%;
  13904. border: none;
  13905. background: #282c35;
  13906. -webkit-box-shadow: inset 0 0 0 1px #009cdd;
  13907. -moz-box-shadow: inset 0 0 0 1px #009cdd;
  13908. box-shadow: inset 0 0 0 1px #009cdd;
  13909. color: #eee;
  13910. font-weight: 400;
  13911. font-size: 14px;
  13912. font-family: 'Open Sans', sans-serif
  13913. }
  13914. .user-content.profile .meta .joined {
  13915. position: relative;
  13916. margin-top: 6px;
  13917. margin-left: 2px;
  13918. color: #444a59;
  13919. font-size: 16px
  13920. }
  13921. .user-content.profile .points {
  13922. position: relative;
  13923. float: left;
  13924. margin-top: 70px;
  13925. width: 58%
  13926. }
  13927. .user-content.profile .points .pp {
  13928. position: relative;
  13929. left: 5%;
  13930. float: left;
  13931. width: 95%
  13932. }
  13933. .user-content.profile .points i {
  13934. top: 3px
  13935. }
  13936. .user-content.profile .points .value {
  13937. position: absolute;
  13938. left: 45px;
  13939. font-size: 22px
  13940. }
  13941. .user-content.profile .points .label {
  13942. position: absolute;
  13943. top: 28px;
  13944. left: 45px;
  13945. color: #444a59;
  13946. text-transform: uppercase;
  13947. white-space: nowrap;
  13948. font-weight: 400
  13949. }
  13950. .user-content.profile .points.boosted {
  13951. margin-top: 10px
  13952. }
  13953. .user-content.profile .points.boosted>.boost {
  13954. display: block
  13955. }
  13956. .user-content.profile .points .boost {
  13957. position: relative;
  13958. display: none;
  13959. float: left;
  13960. width: 100%;
  13961. height: 60px
  13962. }
  13963. .user-content.profile .meta.online .status span {
  13964. color: #89be6c
  13965. }
  13966. .user-content.profile .meta.offline .status span {
  13967. color: #555d70
  13968. }
  13969. .user-content.profile .meta.is-admin .role span {
  13970. color: #42a5dc
  13971. }
  13972. .user-content.profile .meta.is-ambassador .role span {
  13973. color: #89be6c
  13974. }
  13975. .user-content.profile .meta.is-sitemod .role span {
  13976. color: #e74c3c
  13977. }
  13978. .user-content.profile .meta.is-plot .role span {
  13979. color: #e67e22
  13980. }
  13981. .user-content.profile .meta.is-promoter .role span {
  13982. color: #1abc9c
  13983. }
  13984. .user-content.profile .meta.is-staff .role span {
  13985. color: #ac76ff
  13986. }
  13987. .user-content.profile .meta.is-none .role {
  13988. display: none
  13989. }
  13990. .user-content.profile .link {
  13991. position: absolute;
  13992. bottom: 0;
  13993. left: 0;
  13994. display: none;
  13995. font-size: 16px
  13996. }
  13997. .user-content.profile .meta .link .label {
  13998. color: #808691
  13999. }
  14000. .user-content.profile .meta .link .url {
  14001. margin-left: 7px
  14002. }
  14003. .user-content.profile .meta.unlocked .link {
  14004. display: block
  14005. }
  14006. .user-content.profile .meta.unlocked {
  14007. height: 179px
  14008. }
  14009. .user-content.profile .meta .link .url a,
  14010. .user-content.profile .meta .link .url a:visited {
  14011. color: #eee;
  14012. text-decoration: none
  14013. }
  14014. .user-content.profile .meta .link .url a:hover {
  14015. text-decoration: underline
  14016. }
  14017. .subscribe-button {
  14018. position: relative;
  14019. top: 5px;
  14020. float: right;
  14021. margin-left: 10px;
  14022. padding: 6px;
  14023. background: #323742;
  14024. color: #eee;
  14025. text-align: center;
  14026. white-space: nowrap;
  14027. cursor: pointer
  14028. }
  14029. .subscribe-button:hover {
  14030. background: #444a59
  14031. }
  14032. .subscribe-button .icon {
  14033. position: relative;
  14034. top: 2px!important;
  14035. display: inline-block;
  14036. margin: 0 7px 0 3px
  14037. }
  14038. .subscribe-button span {
  14039. position: relative;
  14040. top: -13px;
  14041. display: inline-block;
  14042. margin-right: 4px
  14043. }
  14044. .subscribed .subscribe-button {
  14045. display: none
  14046. }
  14047. .user-content.profile .points .subscribe-button {
  14048. position: absolute;
  14049. top: -1px;
  14050. right: 10px;
  14051. left: auto
  14052. }
  14053. #user-rollover {
  14054. position: absolute;
  14055. z-index: 60001;
  14056. width: 300px;
  14057. background: #282c35;
  14058. -webkit-box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .5);
  14059. -moz-box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .5);
  14060. box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .5)
  14061. }
  14062. .user-rollover-modal {
  14063. position: fixed;
  14064. top: 0;
  14065. right: 0;
  14066. bottom: 0;
  14067. left: 0;
  14068. z-index: 60000;
  14069. display: block;
  14070. background: #000;
  14071. opacity: 0
  14072. }
  14073. #user-rollover.chat {
  14074. z-index: 1000001
  14075. }
  14076. #user-rollover .meta {
  14077. position: relative;
  14078. width: 100%;
  14079. height: 103px
  14080. }
  14081. #user-rollover .meta .thumb {
  14082. top: 8px;
  14083. left: 8px
  14084. }
  14085. #user-rollover .meta .username {
  14086. position: absolute;
  14087. top: 17px;
  14088. left: 108px;
  14089. overflow: hidden;
  14090. width: 180px;
  14091. text-overflow: ellipsis;
  14092. white-space: nowrap;
  14093. font-size: 16px
  14094. }
  14095. #user-rollover .meta .status {
  14096. position: absolute;
  14097. top: 45px;
  14098. left: 108px
  14099. }
  14100. #user-rollover .meta .status i {
  14101. position: relative;
  14102. top: 2px;
  14103. float: left;
  14104. width: 9px;
  14105. height: 9px;
  14106. border-radius: 50%
  14107. }
  14108. #user-rollover .meta.online .status i {
  14109. border: 2px solid #89be6c
  14110. }
  14111. #user-rollover .meta.subscriber .status i {
  14112. width: 15px;
  14113. height: 15px;
  14114. border: none;
  14115. border-radius: 0;
  14116. background: url('https://cdn.plug.dj/_/static/images/icons.e9a6ece717d5a82228750c644e59307031016547.png') -175px -350px
  14117. }
  14118. #user-rollover .meta.subscriber.silver .status i {
  14119. background: url('https://cdn.plug.dj/_/static/images/icons.e9a6ece717d5a82228750c644e59307031016547.png') -175px -365px
  14120. }
  14121. #user-rollover .meta.offline .status i {
  14122. border: 2px solid #555d70
  14123. }
  14124. #user-rollover .meta .status span {
  14125. position: relative;
  14126. float: left;
  14127. margin-left: 4px;
  14128. text-transform: uppercase;
  14129. font-weight: 600;
  14130. font-size: 12px
  14131. }
  14132. #user-rollover .meta.subscriber .status {
  14133. top: 44px
  14134. }
  14135. #user-rollover .meta.subscriber .status span {
  14136. top: 1px
  14137. }
  14138. #user-rollover .meta.online .status span {
  14139. color: #89be6c
  14140. }
  14141. #user-rollover .meta.subscriber .status span {
  14142. color: #c59840
  14143. }
  14144. #user-rollover .meta.subscriber.silver .status span {
  14145. color: #8694b2
  14146. }
  14147. #user-rollover .meta.offline .status span {
  14148. color: #555d70
  14149. }
  14150. #user-rollover .meta .joined {
  14151. position: absolute;
  14152. top: 69px;
  14153. left: 109px;
  14154. color: #808691;
  14155. font-weight: 400;
  14156. font-size: 12px
  14157. }
  14158. #user-rollover .meta .user-id {
  14159. position: absolute;
  14160. top: 81px;
  14161. left: 109px;
  14162. font-size: 12px;
  14163. font-weight: 400
  14164. }
  14165. #user-rollover .meta.has-id .status {
  14166. top: 42px
  14167. }
  14168. #user-rollover .meta.has-id .joined {
  14169. top: 62px
  14170. }
  14171. #user-rollover .info {
  14172. position: relative;
  14173. width: 100%;
  14174. height: 45px;
  14175. background: #1c1f25;
  14176. font-weight: 400
  14177. }
  14178. #user-rollover .info .badge-box {
  14179. position: relative;
  14180. top: 7px;
  14181. float: left;
  14182. margin-left: 8px
  14183. }
  14184. #user-rollover .info .level {
  14185. position: relative;
  14186. top: 13px;
  14187. float: left;
  14188. margin-left: 8px
  14189. }
  14190. #user-rollover .info .level .label {
  14191. margin-right: 4px;
  14192. color: #808691
  14193. }
  14194. #user-rollover .info .role {
  14195. position: relative;
  14196. top: 13px;
  14197. float: right;
  14198. margin-right: 11px
  14199. }
  14200. #user-rollover .info .role i {
  14201. position: relative;
  14202. float: left;
  14203. margin-top: 2px
  14204. }
  14205. #user-rollover .info .role i.icon-chat-dj {
  14206. margin-top: 3px
  14207. }
  14208. #user-rollover .info .role span {
  14209. position: relative;
  14210. float: left;
  14211. margin-left: 4px
  14212. }
  14213. #user-rollover.is-admin .info .role span {
  14214. color: #42a5dc
  14215. }
  14216. #user-rollover.is-ambassador .info .role span {
  14217. color: #89be6c
  14218. }
  14219. #user-rollover.is-sitemod .info .role span {
  14220. color: #e74c3c
  14221. }
  14222. #user-rollover.is-plot .info .role span {
  14223. color: #e67e22
  14224. }
  14225. #user-rollover.is-promoter .info .role span {
  14226. color: #1abc9c
  14227. }
  14228. #user-rollover.is-staff .info .role span {
  14229. color: #ac76ff
  14230. }
  14231. #user-rollover.is-none .info .role {
  14232. display: none
  14233. }
  14234. #user-rollover .actions {
  14235. position: relative;
  14236. display: none;
  14237. width: 100%
  14238. }
  14239. #user-rollover.expand .actions {
  14240. display: block
  14241. }
  14242. #user-rollover .actions .action {
  14243. position: relative;
  14244. display: none;
  14245. float: left;
  14246. height: 44px;
  14247. text-align: center;
  14248. cursor: pointer
  14249. }
  14250. #user-rollover .actions .action:hover {
  14251. background: #323742
  14252. }
  14253. #user-rollover .actions .action i {
  14254. position: relative;
  14255. top: 8px;
  14256. display: inline-block;
  14257. margin: 0 auto
  14258. }
  14259. #user-rollover .actions .giftsub {
  14260. width: 100%;
  14261. -webkit-box-shadow: inset 0 -2px 0 -1px #1c1f25;
  14262. -moz-box-shadow: inset 0 -2px 0 -1px #1c1f25;
  14263. box-shadow: inset 0 -2px 0 -1px #1c1f25
  14264. }
  14265. #user-rollover .actions .giftsub i {
  14266. top: 12px
  14267. }
  14268. #user-rollover .actions .giftsub span {
  14269. position: relative;
  14270. display: inline-block;
  14271. font-size: 16px;
  14272. color: #c59840;
  14273. top: 11px;
  14274. margin-left: 9px
  14275. }
  14276. #user-rollover.can-giftsub .actions .giftsub {
  14277. display: block
  14278. }
  14279. #user-rollover.self .actions .giftsub {
  14280. -webkit-box-shadow: none;
  14281. -moz-box-shadow: none;
  14282. box-shadow: none
  14283. }
  14284. #user-rollover .actions .skip {
  14285. width: 100%;
  14286. -webkit-box-shadow: inset 0 -2px 0 -1px #1c1f25;
  14287. -moz-box-shadow: inset 0 -2px 0 -1px #1c1f25;
  14288. box-shadow: inset 0 -2px 0 -1px #1c1f25
  14289. }
  14290. #user-rollover .actions .skip i {
  14291. top: 7px
  14292. }
  14293. #user-rollover.can-skip .actions .skip {
  14294. display: block
  14295. }
  14296. #user-rollover.self .actions .skip {
  14297. -webkit-box-shadow: none;
  14298. -moz-box-shadow: none;
  14299. box-shadow: none
  14300. }
  14301. #user-rollover .actions .mention {
  14302. -webkit-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14303. -moz-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14304. box-shadow: inset 2px 0 0 -1px #1c1f25
  14305. }
  14306. #user-rollover .actions .gift {
  14307. -webkit-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14308. -moz-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14309. box-shadow: inset 2px 0 0 -1px #1c1f25
  14310. }
  14311. #user-rollover .actions .ignore {
  14312. -webkit-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14313. -moz-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14314. box-shadow: inset 2px 0 0 -1px #1c1f25
  14315. }
  14316. #user-rollover .actions .friend {
  14317. -webkit-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14318. -moz-box-shadow: inset 2px 0 0 -1px #1c1f25;
  14319. box-shadow: inset 2px 0 0 -1px #1c1f25
  14320. }
  14321. #user-rollover.can-friend .actions .friend,
  14322. #user-rollover.can-gift .actions .gift,
  14323. #user-rollover.can-ignore .actions .ignore,
  14324. #user-rollover.can-mention .actions .mention {
  14325. display: block;
  14326. width: 100%
  14327. }
  14328. #user-rollover.can-gift.can-friend .actions .action.friend,
  14329. #user-rollover.can-gift.can-friend .actions .action.gift,
  14330. #user-rollover.can-gift.can-ignore .actions .action.gift,
  14331. #user-rollover.can-gift.can-ignore .actions .action.ignore,
  14332. #user-rollover.can-ignore.can-friend .actions .action.friend,
  14333. #user-rollover.can-ignore.can-friend .actions .action.ignore,
  14334. #user-rollover.can-mention.can-friend .actions .action.friend,
  14335. #user-rollover.can-mention.can-friend .actions .action.mention,
  14336. #user-rollover.can-mention.can-gift .actions .action.gift,
  14337. #user-rollover.can-mention.can-gift .actions .action.mention,
  14338. #user-rollover.can-mention.can-ignore .actions .action.ignore,
  14339. #user-rollover.can-mention.can-ignore .actions .action.mention {
  14340. width: 50%
  14341. }
  14342. #user-rollover.can-gift.can-ignore.can-friend .actions .action.friend,
  14343. #user-rollover.can-gift.can-ignore.can-friend .actions .action.gift,
  14344. #user-rollover.can-mention.can-gift.can-friend .actions .action.friend,
  14345. #user-rollover.can-mention.can-gift.can-friend .actions .action.mention,
  14346. #user-rollover.can-mention.can-gift.can-ignore .actions .action.ignore,
  14347. #user-rollover.can-mention.can-gift.can-ignore .actions .action.mention,
  14348. #user-rollover.can-mention.can-ignore.can-friend .actions .action.friend,
  14349. #user-rollover.can-mention.can-ignore.can-friend .actions .action.mention {
  14350. width: 33%
  14351. }
  14352. #user-rollover.can-gift.can-ignore.can-friend .actions .action.ignore,
  14353. #user-rollover.can-mention.can-gift.can-friend .actions .action.gift,
  14354. #user-rollover.can-mention.can-gift.can-ignore .actions .action.gift,
  14355. #user-rollover.can-mention.can-ignore.can-friend .actions .action.ignore {
  14356. width: 34%
  14357. }
  14358. #user-rollover.can-mention.can-gift.can-ignore.can-friend .actions .action.friend,
  14359. #user-rollover.can-mention.can-gift.can-ignore.can-friend .actions .action.gift,
  14360. #user-rollover.can-mention.can-gift.can-ignore.can-friend .actions .action.ignore,
  14361. #user-rollover.can-mention.can-gift.can-ignore.can-friend .actions .action.mention {
  14362. width: 25%
  14363. }
  14364. #user-rollover .actions .mention i {
  14365. top: 7px
  14366. }
  14367. #user-rollover .actions .mod-dj {
  14368. -webkit-box-shadow: inset 0 2px 0 -1px #1c1f25;
  14369. -moz-box-shadow: inset 0 2px 0 -1px #1c1f25;
  14370. box-shadow: inset 0 2px 0 -1px #1c1f25
  14371. }
  14372. #user-rollover .actions .mod-staff {
  14373. -webkit-box-shadow: inset 1px 1px 0 0 #1c1f25;
  14374. -moz-box-shadow: inset 1px 1px 0 0 #1c1f25;
  14375. box-shadow: inset 1px 1px 0 0 #1c1f25
  14376. }
  14377. #user-rollover .actions .mod-mute {
  14378. -webkit-box-shadow: inset 1px 1px 0 0 #1c1f25;
  14379. -moz-box-shadow: inset 1px 1px 0 0 #1c1f25;
  14380. box-shadow: inset 1px 1px 0 0 #1c1f25
  14381. }
  14382. #user-rollover .actions .mod-ban,
  14383. #user-rollover .actions .mod-waitlist-ban {
  14384. -webkit-box-shadow: inset 1px 1px 0 0 #1c1f25;
  14385. -moz-box-shadow: inset 1px 1px 0 0 #1c1f25;
  14386. box-shadow: inset 1px 1px 0 0 #1c1f25
  14387. }
  14388. #user-rollover.can-ban .actions .mod-ban,
  14389. #user-rollover.can-booth .actions .mod-dj,
  14390. #user-rollover.can-mute .actions .mod-mute,
  14391. #user-rollover.can-staff .actions .mod-staff,
  14392. #user-rollover.can-waitlist-ban .actions .mod-waitlist-ban {
  14393. display: block;
  14394. width: 100%
  14395. }
  14396. #user-rollover.can-booth.can-ban .actions .action.mod-ban,
  14397. #user-rollover.can-booth.can-ban .actions .action.mod-dj,
  14398. #user-rollover.can-booth.can-mute .actions .action.mod-dj,
  14399. #user-rollover.can-booth.can-mute .actions .action.mod-mute,
  14400. #user-rollover.can-booth.can-staff .actions .action.mod-dj,
  14401. #user-rollover.can-booth.can-staff .actions .action.mod-staff,
  14402. #user-rollover.can-mute.can-ban .actions .action.mod-ban,
  14403. #user-rollover.can-mute.can-ban .actions .action.mod-mute,
  14404. #user-rollover.can-staff.can-ban .actions .action.mod-ban,
  14405. #user-rollover.can-staff.can-ban .actions .action.mod-staff,
  14406. #user-rollover.can-staff.can-mute .actions .action.mod-mute,
  14407. #user-rollover.can-staff.can-mute .actions .action.mod-staff {
  14408. width: 50%
  14409. }
  14410. #user-rollover.can-booth.can-mute.can-ban .actions .action.mod-ban,
  14411. #user-rollover.can-booth.can-mute.can-ban .actions .action.mod-dj,
  14412. #user-rollover.can-booth.can-staff.can-ban .actions .action.mod-ban,
  14413. #user-rollover.can-booth.can-staff.can-ban .actions .action.mod-dj,
  14414. #user-rollover.can-booth.can-staff.can-mute .actions .action.mod-dj,
  14415. #user-rollover.can-booth.can-staff.can-mute .actions .action.mod-mute,
  14416. #user-rollover.can-staff.can-mute.can-ban .actions .action.mod-ban,
  14417. #user-rollover.can-staff.can-mute.can-ban .actions .action.mod-staff {
  14418. width: 33%
  14419. }
  14420. #user-rollover.can-booth.can-mute.can-ban .actions .action.mod-mute,
  14421. #user-rollover.can-booth.can-staff.can-ban .actions .action.mod-staff,
  14422. #user-rollover.can-booth.can-staff.can-mute .actions .action.mod-staff,
  14423. #user-rollover.can-staff.can-mute.can-ban .actions .action.mod-mute {
  14424. width: 34%
  14425. }
  14426. #user-rollover.can-booth.can-staff.can-mute.can-ban .actions .action.mod-ban,
  14427. #user-rollover.can-booth.can-staff.can-mute.can-ban .actions .action.mod-dj,
  14428. #user-rollover.can-booth.can-staff.can-mute.can-ban .actions .action.mod-mute,
  14429. #user-rollover.can-booth.can-staff.can-mute.can-ban .actions .action.mod-staff,
  14430. #user-rollover.can-booth.can-staff.can-mute.can-ban.can-waitlist-ban .actions .action.mod-waitlist-ban {
  14431. width: 20%
  14432. }
  14433. #user-rollover .arrow-down {
  14434. bottom: -8px;
  14435. left: 142px;
  14436. border-top: 8px solid #1c1f25
  14437. }
  14438. #user-rollover.expand.self .arrow-down {
  14439. border-top: 8px solid #1c1f25
  14440. }
  14441. #user-rollover.expand .arrow-down,
  14442. #user-rollover.expand.self.can-skip .arrow-down {
  14443. border-top: 8px solid #282c35
  14444. }
  14445. #user-rollover.expand.can-skip.chat .arrow-down,
  14446. #user-rollover.expand.chat .arrow-down,
  14447. #user-rollover.expand.self.can-skip.chat .arrow-down {
  14448. top: 17px;
  14449. right: -8px;
  14450. bottom: auto;
  14451. left: auto;
  14452. border-top: 8px solid transparent;
  14453. border-right: 0 solid transparent;
  14454. border-bottom: 8px solid transparent;
  14455. border-left: 8px solid #282c35
  14456. }
  14457. #user-rollover.expand.can-skip.chat.upwards .arrow-down,
  14458. #user-rollover.expand.chat.upwards .arrow-down,
  14459. #user-rollover.expand.self.can-skip.chat.upwards .arrow-down {
  14460. top: auto;
  14461. bottom: 13px;
  14462. border-left: 8px solid #282c35
  14463. }
  14464. #user-rollover.expand.self.upwards .arrow-down {
  14465. border-left: 8px solid #1c1f25
  14466. }
  14467. #user-rollover .shop-avatar {
  14468. position: absolute;
  14469. top: 0;
  14470. left: 0;
  14471. z-index: 10;
  14472. display: none;
  14473. width: 100%;
  14474. height: 100%;
  14475. background: rgba(17, 19, 23, .9);
  14476. cursor: pointer
  14477. }
  14478. #user-rollover .shop-avatar .icon-store-white {
  14479. position: absolute;
  14480. top: 27px;
  14481. left: 27px
  14482. }
  14483. #user-rollover.can-shop .thumb:hover>.shop-avatar {
  14484. display: block
  14485. }
  14486. #user-settings .tab-menu {
  14487. top: 15px;
  14488. margin-left: 2%;
  14489. width: 96%
  14490. }
  14491. #user-settings .tab-menu button {
  14492. width: 50%
  14493. }
  14494. #user-settings .tab-menu button:first-child {
  14495. -webkit-box-shadow: none;
  14496. -moz-box-shadow: none;
  14497. box-shadow: none
  14498. }
  14499. .user-content.settings .header {
  14500. float: left;
  14501. margin: 35px 0 8px 0
  14502. }
  14503. .user-content.settings .header:first-child {
  14504. margin: 0 0 8px 0
  14505. }
  14506. .user-content.settings .section {
  14507. top: 15px;
  14508. width: 96%
  14509. }
  14510. #user-settings .left {
  14511. position: relative;
  14512. float: left;
  14513. width: 50%
  14514. }
  14515. #user-settings .right {
  14516. position: relative;
  14517. float: right;
  14518. width: 50%
  14519. }
  14520. #user-settings .container {
  14521. position: relative
  14522. }
  14523. #user-settings .container .item {
  14524. position: relative;
  14525. margin-top: 6px;
  14526. height: 25px;
  14527. cursor: pointer
  14528. }
  14529. #user-settings .container .item i {
  14530. top: 2px;
  14531. left: 0;
  14532. display: none
  14533. }
  14534. #user-settings .container .item.selected i {
  14535. display: block
  14536. }
  14537. #user-settings .container .item span {
  14538. position: absolute;
  14539. left: 17px;
  14540. margin-left: 10px;
  14541. color: #808691
  14542. }
  14543. #user-settings .container .item.s-bg {
  14544. display: none
  14545. }
  14546. #user-settings .container .cap {
  14547. position: relative;
  14548. top: 6px;
  14549. width: 149px;
  14550. height: 68px
  14551. }
  14552. #user-settings .container .cap .title {
  14553. position: relative;
  14554. color: #808691
  14555. }
  14556. #user-settings .container .cap .value {
  14557. position: relative;
  14558. float: right;
  14559. color: #808691;
  14560. text-align: right
  14561. }
  14562. #user-settings .container .cap .counts {
  14563. position: relative;
  14564. margin-top: 5px;
  14565. margin-left: 3px;
  14566. max-width: 145px;
  14567. height: 25px;
  14568. text-align: justify;
  14569. -ms-text-justify: distribute-all-lines;
  14570. text-justify: distribute-all-lines
  14571. }
  14572. #user-settings .container .cap .counts .count {
  14573. display: inline-block;
  14574. width: 23px;
  14575. height: 15px;
  14576. vertical-align: top;
  14577. font-size: 14px
  14578. }
  14579. #user-settings .container .cap .counts .stretch {
  14580. display: inline-block;
  14581. width: 135px;
  14582. font-size: 0;
  14583. line-height: 0
  14584. }
  14585. #user-settings .container .cap .slider {
  14586. position: relative;
  14587. width: 150px;
  14588. height: 18px
  14589. }
  14590. #user-settings .container .cap .slider .bar {
  14591. position: absolute;
  14592. top: 5px;
  14593. left: 0;
  14594. width: 100%;
  14595. height: 6px;
  14596. border-radius: 10px;
  14597. background: #282c35
  14598. }
  14599. #user-settings .container .cap .slider .circle {
  14600. position: absolute;
  14601. top: 0;
  14602. left: 115px;
  14603. width: 15px;
  14604. height: 15px;
  14605. border-radius: 50%;
  14606. background: #808691
  14607. }
  14608. #user-settings .container .cap .slider .hit {
  14609. position: absolute;
  14610. top: 0;
  14611. left: 7.5px;
  14612. width: 100%;
  14613. height: 17px;
  14614. cursor: pointer
  14615. }
  14616. #user-settings .container label {
  14617. position: absolute;
  14618. top: 8px;
  14619. color: #808691;
  14620. font-size: 16px
  14621. }
  14622. #user-settings .container .refresh {
  14623. position: absolute;
  14624. top: 85px;
  14625. color: #808691
  14626. }
  14627. #user-settings .container button {
  14628. position: absolute;
  14629. top: 37px;
  14630. max-width: 300px;
  14631. width: 90%;
  14632. height: 39px;
  14633. background: #282c35;
  14634. color: #808691;
  14635. font-size: 16px;
  14636. font-family: "Open Sans", sans-serif;
  14637. cursor: pointer
  14638. }
  14639. #user-settings .container button:hover {
  14640. background: #f04f30;
  14641. color: #eee
  14642. }
  14643. #user-settings .container .dropdown {
  14644. position: absolute;
  14645. top: 37px;
  14646. float: none;
  14647. max-width: 300px;
  14648. width: 90%
  14649. }
  14650. #user-settings .container .subscribe-button {
  14651. position: absolute;
  14652. top: 37px;
  14653. float: none;
  14654. padding: 2px 0;
  14655. left: -10px;
  14656. max-width: 300px;
  14657. width: 90%
  14658. }
  14659. #user-settings .container .subscribe-button span {
  14660. top: -8px
  14661. }
  14662. #user-settings .container .left label.subscribe-label {
  14663. top: 148px
  14664. }
  14665. #user-settings .container .left .subscribe-button {
  14666. top: 177px
  14667. }
  14668. #user-store .tab-menu button {
  14669. width: 33%
  14670. }
  14671. #user-store .tab-menu button:first-child {
  14672. -webkit-box-shadow: none;
  14673. -moz-box-shadow: none;
  14674. box-shadow: none
  14675. }
  14676. #user-store .tab-menu button:last-child {
  14677. width: 34%
  14678. }
  14679. #user-store .avatars,
  14680. #user-store .badges,
  14681. #user-store .misc {
  14682. position: relative
  14683. }
  14684. #user-view .menu-points {
  14685. position: relative;
  14686. z-index: 10;
  14687. margin: 15px 0;
  14688. height: 39px
  14689. }
  14690. #user-view .menu-points .your-points {
  14691. position: relative;
  14692. display: none;
  14693. float: right;
  14694. margin-top: 10px;
  14695. margin-right: 4px;
  14696. color: #555d70;
  14697. font-size: 16px
  14698. }
  14699. #user-view .menu-points .points {
  14700. position: relative;
  14701. top: 3px;
  14702. float: right
  14703. }
  14704. #user-view .menu-points .points .icon {
  14705. position: relative;
  14706. top: 3px;
  14707. float: right;
  14708. margin-right: 2px
  14709. }
  14710. #user-view .menu-points .points .value {
  14711. position: relative;
  14712. float: right;
  14713. margin-top: 7px;
  14714. margin-right: 10px;
  14715. font-size: 16px
  14716. }
  14717. #user-store .header {
  14718. margin-bottom: 15px
  14719. }
  14720. #user-store .grid .cell .price {
  14721. position: relative;
  14722. top: 172px;
  14723. display: inline-block;
  14724. overflow: hidden;
  14725. font-size: 20px
  14726. }
  14727. #user-store .grid .cell .price .icon-pp-small {
  14728. position: relative;
  14729. top: -1px;
  14730. float: left;
  14731. margin-left: -6px
  14732. }
  14733. #user-store .grid .cell .price .icon-sub-small {
  14734. position: relative;
  14735. top: -1px;
  14736. float: left;
  14737. margin-right: 1px
  14738. }
  14739. #user-store .grid .cell .price .label {
  14740. position: relative;
  14741. top: 0;
  14742. float: left
  14743. }
  14744. #user-store .grid .cell .price .label.or {
  14745. top: 2px;
  14746. margin-right: 6px;
  14747. font-size: 15px
  14748. }
  14749. #user-store .grid .cell .price .label.only {
  14750. top: 3px;
  14751. color: #c59840;
  14752. font-size: 15px
  14753. }
  14754. #user-store .grid .cell .icon-locked-grey {
  14755. right: 4px;
  14756. bottom: 4px
  14757. }
  14758. #user-store .badges .grid .cell .top {
  14759. background: url('https://cdn.plug.dj/_/static/images/badgebg.11c3e716ad95c5345d292b113a4d223bb2b70e80.png') no-repeat
  14760. }
  14761. #user-store .badges .grid .cell:hover>.top {
  14762. background: url('https://cdn.plug.dj/_/static/images/badgebghover.51d0ef82889130d4adaaaf067133dbb3fe025a1c.png') no-repeat
  14763. }
  14764. #user-store .badges .grid .cell .top .bdg {
  14765. position: relative;
  14766. top: 49px;
  14767. display: block;
  14768. margin: 0 auto
  14769. }
  14770. #user-store .badges .grid .cell .top .no-badge {
  14771. position: relative;
  14772. top: 54px;
  14773. display: block;
  14774. margin: 0 auto;
  14775. width: 50px;
  14776. height: 50px;
  14777. border: 4px solid #444a59;
  14778. border-radius: 50%
  14779. }
  14780. #user-view .menu-points .dropdown {
  14781. width: 240px
  14782. }
  14783. #user-store .misc .grid .cell {
  14784. height: 245px
  14785. }
  14786. #user-store .misc .grid .cell .title-bar {
  14787. position: absolute;
  14788. top: 0;
  14789. left: 0;
  14790. width: 100%;
  14791. height: 40px;
  14792. background: #1c1f25
  14793. }
  14794. #user-store .misc .grid .cell .title-bar span {
  14795. position: relative;
  14796. top: 9px;
  14797. font-weight: 400;
  14798. font-size: 16px
  14799. }
  14800. #user-store .misc .grid .cell .top {
  14801. top: 40px;
  14802. text-align: center
  14803. }
  14804. #user-store .misc .grid .cell .top {
  14805. background: #111317;
  14806. background: -moz-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  14807. background: -webkit-gradient(left top, left bottom, color-stop(0, #111317), color-stop(46%, #1c1f25), color-stop(100%, #0f1114));
  14808. background: -webkit-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  14809. background: -o-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  14810. background: -ms-linear-gradient(top, #111317 0, #1c1f25 46%, #0f1114 100%);
  14811. background: linear-gradient(to bottom, #111317 0, #1c1f25 46%, #0f1114 100%)
  14812. }
  14813. #user-store .misc .grid .cell:hover>.top {
  14814. background: #001727;
  14815. background: -moz-linear-gradient(top, #001727 0, #044777 46%, #001626 100%);
  14816. background: -webkit-gradient(left top, left bottom, color-stop(0, #001727), color-stop(46%, #044777), color-stop(100%, #001626));
  14817. background: -webkit-linear-gradient(top, #001727 0, #044777 46%, #001626 100%);
  14818. background: -o-linear-gradient(top, #001727 0, #044777 46%, #001626 100%);
  14819. background: -ms-linear-gradient(top, #001727 0, #044777 46%, #001626 100%);
  14820. background: linear-gradient(to bottom, #001727 0, #044777 46%, #001626 100%)
  14821. }
  14822. #user-store .misc .grid .cell .misc-username {
  14823. position: absolute;
  14824. top: 51px;
  14825. left: 51px;
  14826. width: 100px;
  14827. height: 50px;
  14828. background: url('https://cdn.plug.dj/_/static/images/misc/username.6fe1e15c31876e556e15132b4f7896d5bb87a14c.png') no-repeat
  14829. }
  14830. #user-store .misc .grid .cell .misc-boost2x {
  14831. position: absolute;
  14832. top: 33px;
  14833. left: 55px;
  14834. width: 75px;
  14835. height: 75px;
  14836. background: url('https://cdn.plug.dj/_/static/images/misc/boost2x.d77ea44c0fe071bb1c3679c1a9bdfb635e61a9e3.png') no-repeat
  14837. }
  14838. #user-store .misc .grid .cell .misc-boost3x {
  14839. position: absolute;
  14840. top: 16px;
  14841. left: 62px;
  14842. width: 60px;
  14843. height: 110px;
  14844. background: url('https://cdn.plug.dj/_/static/images/misc/boost3x.0c14863fc83cae6a2fa78dfb7439b0059268658e.png') no-repeat
  14845. }
  14846. #user-store .misc .grid .cell .top .level {
  14847. position: absolute;
  14848. bottom: 14px;
  14849. left: 0;
  14850. width: 100%
  14851. }
  14852. #user-store .misc .grid .cell .price {
  14853. top: 212px
  14854. }
  14855. #user-store .grid .cell .top .expires {
  14856. position: absolute;
  14857. top: 0;
  14858. left: 0;
  14859. z-index: 1;
  14860. width: 100%;
  14861. height: 24px;
  14862. background: #323742
  14863. }
  14864. #user-store .grid .cell .top .expires span {
  14865. position: relative;
  14866. top: 2px;
  14867. color: #f46b40;
  14868. font-size: 12px;
  14869. font-family: Roboto, sans-serif
  14870. }
  14871. #user-view .banner {
  14872. position: relative;
  14873. margin: 15px 0;
  14874. width: 585px;
  14875. height: 70px;
  14876. background: url('https://cdn.plug.dj/_/static/images/subscribe/bannerbg.23a67fab37c84d6e7eb58571ff0644019153a71b.png') -350px 0 no-repeat;
  14877. cursor: pointer
  14878. }
  14879. #user-view .banner .avatars {
  14880. position: absolute;
  14881. top: 0;
  14882. right: 20px;
  14883. overflow: hidden;
  14884. width: 200px;
  14885. height: 70px;
  14886. background: url('https://cdn.plug.dj/_/static/images/subscribe/banneravatars.66896bea47dfb77ae5f9212916ae25d1330990dc.png') no-repeat
  14887. }
  14888. #user-view .banner div {
  14889. position: absolute;
  14890. top: 17px;
  14891. left: 0;
  14892. width: 365px;
  14893. text-align: center;
  14894. text-shadow: 1px 1px 1px #0a0a0a;
  14895. line-height: 20px
  14896. }
  14897. #user-view .banner .title {
  14898. position: relative;
  14899. color: #eee;
  14900. font-weight: 700;
  14901. font-size: 24px
  14902. }
  14903. #user-view .banner .cta {
  14904. position: relative;
  14905. display: block;
  14906. color: #eee;
  14907. font-weight: 600
  14908. }
  14909. @media (min-width: 1385px) {
  14910. #user-view .banner {
  14911. width: 785px;
  14912. background-position: -200px 0
  14913. }
  14914. #user-view .banner .avatars {
  14915. width: 390px;
  14916. background-position: -199px 0
  14917. }
  14918. #user-view .banner div {
  14919. width: 375px
  14920. }
  14921. }
  14922. @media (min-width: 1585px) {
  14923. #user-view .banner {
  14924. width: 985px;
  14925. background-position: 0 0
  14926. }
  14927. #user-view .banner .avatars {
  14928. width: 470px;
  14929. background-position: -589px 0
  14930. }
  14931. #user-view .banner div {
  14932. width: 495px
  14933. }
  14934. }
  14935. .experience .xp {
  14936. position: relative;
  14937. margin-top: 10px;
  14938. width: 100%;
  14939. height: 55px
  14940. }
  14941. .experience .xp .current-level {
  14942. position: absolute;
  14943. top: 0;
  14944. left: 0;
  14945. font-size: 14px
  14946. }
  14947. .experience .xp .next-level {
  14948. position: absolute;
  14949. top: 0;
  14950. right: 0;
  14951. color: #444a59;
  14952. text-align: right;
  14953. font-size: 14px
  14954. }
  14955. .experience .xp strong {
  14956. font-size: 16px
  14957. }
  14958. .experience .xp .bar {
  14959. position: absolute;
  14960. bottom: 0;
  14961. left: 0;
  14962. width: 100%;
  14963. height: 30px;
  14964. background: #282c35
  14965. }
  14966. .experience .xp .bar .progress {
  14967. position: absolute;
  14968. top: 0;
  14969. left: 0;
  14970. width: 50%;
  14971. height: 100%;
  14972. background: #009cdd
  14973. }
  14974. .experience.boosted .xp .bar .progress {
  14975. background: #009cdd;
  14976. background: -moz-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  14977. background: -webkit-gradient(left top, right top, color-stop(0, #009cdd), color-stop(70%, #009bdd), color-stop(100%, #db182f));
  14978. background: -webkit-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  14979. background: -o-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  14980. background: -ms-linear-gradient(left, #009cdd 0, #009bdd 70%, #db182f 100%);
  14981. background: linear-gradient(to right, #009cdd 0, #009bdd 70%, #db182f 100%)
  14982. }
  14983. .experience .xp .bar .value {
  14984. position: absolute;
  14985. top: 5px;
  14986. left: 0;
  14987. width: 99%;
  14988. text-align: center;
  14989. font-weight: 700;
  14990. font-size: 15px
  14991. }
  14992. .experience .levels {
  14993. position: relative;
  14994. margin-top: 20px;
  14995. width: 100%;
  14996. height: 90px;
  14997. overflow: hidden;
  14998. clear: both;
  14999. white-space: nowrap
  15000. }
  15001. .experience .levels .level {
  15002. overflow: hidden;
  15003. width: 90px;
  15004. height: 90px;
  15005. border-radius: 12px;
  15006. background: #282c35;
  15007. text-align: center
  15008. }
  15009. .experience .levels .boxes {
  15010. margin: -90px 0 0 90px
  15011. }
  15012. .experience .levels .box {
  15013. width: 20%;
  15014. float: left;
  15015. min-width: 90px
  15016. }
  15017. .experience .levels .box .level {
  15018. float: right
  15019. }
  15020. .experience .levels .level .icon-sunburst {
  15021. top: 0;
  15022. left: 0;
  15023. z-index: 1
  15024. }
  15025. .experience .levels .level .label {
  15026. position: relative;
  15027. width: 100%;
  15028. height: 57px;
  15029. background: #444a59
  15030. }
  15031. .experience .levels .level .label i {
  15032. position: relative;
  15033. display: inline-block;
  15034. margin: 0 auto;
  15035. margin-top: 12px
  15036. }
  15037. .experience .levels .level .label i.icon-sunburst {
  15038. position: absolute;
  15039. top: 0;
  15040. left: 0;
  15041. margin: 0;
  15042. display: block
  15043. }
  15044. .experience .levels .level .value {
  15045. position: relative;
  15046. display: inline-block;
  15047. margin: 0 auto;
  15048. margin-top: 2px
  15049. }
  15050. .experience .levels .level .value i {
  15051. position: relative;
  15052. display: inline-block;
  15053. float: left;
  15054. margin-right: 2px;
  15055. margin-left: -7px
  15056. }
  15057. .experience .levels .level .value span {
  15058. position: relative;
  15059. float: left;
  15060. margin-top: 2px;
  15061. font-weight: 400;
  15062. font-size: 19px
  15063. }
  15064. .experience .levels .level.earned.ep .label,
  15065. .experience .levels .level.earned.pp .label {
  15066. background: #009cdd
  15067. }
  15068. .experience .levels .level.earned.community .label {
  15069. background: #aa1b67
  15070. }
  15071. .experience .levels .level.earned.avatar .label {
  15072. background: #925aff
  15073. }
  15074. .experience .levels .level.earned.vibes .label {
  15075. background: #34a311
  15076. }
  15077. .experience .levels .level.earned.profile .label {
  15078. background: #d89800
  15079. }
  15080. .experience .levels .level.earned .icon-locked {
  15081. display: none
  15082. }
  15083. .experience .levels .level.mystery .label {
  15084. background: #444a59
  15085. }
  15086. .experience .levels .level.mystery .label span {
  15087. position: relative;
  15088. top: 5px;
  15089. color: #808691;
  15090. font-weight: 700;
  15091. font-size: 36px
  15092. }
  15093. .experience .description {
  15094. position: relative;
  15095. margin-top: 15px;
  15096. font-size: 16px
  15097. }
  15098. #volume {
  15099. position: absolute;
  15100. top: 27px;
  15101. right: 64px;
  15102. z-index: 10;
  15103. width: 30px;
  15104. height: 25px
  15105. }
  15106. #volume .button {
  15107. position: absolute;
  15108. top: 0;
  15109. right: 36px;
  15110. z-index: 3;
  15111. overflow: hidden;
  15112. width: 30px;
  15113. height: 30px;
  15114. cursor: pointer
  15115. }
  15116. #volume .button i {
  15117. top: -3px;
  15118. left: 0
  15119. }
  15120. #volume span {
  15121. position: absolute;
  15122. top: 2px;
  15123. right: 0;
  15124. font-weight: 300
  15125. }
  15126. #volume .slider {
  15127. position: absolute;
  15128. top: 0;
  15129. right: 64px;
  15130. z-index: 5;
  15131. display: none;
  15132. width: 115px;
  15133. height: 25px
  15134. }
  15135. #volume .slider .hit {
  15136. position: absolute;
  15137. top: 8px;
  15138. left: 14.5px;
  15139. z-index: 3;
  15140. width: 100px;
  15141. height: 23px;
  15142. cursor: pointer
  15143. }
  15144. #volume .slider .line {
  15145. position: absolute;
  15146. top: 12px;
  15147. left: 8px;
  15148. z-index: 1;
  15149. width: 100px;
  15150. height: 1px;
  15151. background: #808691
  15152. }
  15153. #volume .slider .circle {
  15154. position: absolute;
  15155. top: 6px;
  15156. left: 46px;
  15157. z-index: 2;
  15158. width: 13px;
  15159. height: 13px;
  15160. border-radius: 50%;
  15161. background: #eee
  15162. }
  15163. #vote {
  15164. position: absolute;
  15165. top: 450px;
  15166. width: 256px;
  15167. height: 61px;
  15168. z-index: 9
  15169. }
  15170. #vote .crowd-response {
  15171. position: relative;
  15172. float: left;
  15173. margin-right: 1px;
  15174. width: 84px;
  15175. height: 61px;
  15176. background: #282c35;
  15177. text-align: center;
  15178. cursor: pointer
  15179. }
  15180. #vote .crowd-response .top {
  15181. position: relative;
  15182. display: inline-block;
  15183. overflow: hidden;
  15184. height: 37px;
  15185. width: 100%
  15186. }
  15187. #vote .crowd-response .top i {
  15188. position: relative;
  15189. display: inline-block;
  15190. margin: 0 -4px 0 -8px;
  15191. top: 3px
  15192. }
  15193. #vote .crowd-response .top .label {
  15194. position: relative;
  15195. display: inline-block;
  15196. top: -6px
  15197. }
  15198. #meh {
  15199. background: #c42e3b;
  15200. background: -moz-linear-gradient(top, #c42e3b 0, #bf2935 100%);
  15201. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c42e3b), color-stop(100%, #bf2935));
  15202. background: -webkit-linear-gradient(top, #c42e3b 0, #bf2935 100%);
  15203. background: -o-linear-gradient(top, #c42e3b 0, #bf2935 100%);
  15204. background: -ms-linear-gradient(top, #c42e3b 0, #bf2935 100%);
  15205. background: linear-gradient(to bottom, #c42e3b 0, #bf2935 100%)
  15206. }
  15207. #woot {
  15208. background: #90ad2f;
  15209. background: -moz-linear-gradient(top, #90ad2f 0, #84a233 100%);
  15210. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #90ad2f), color-stop(100%, #84a233));
  15211. background: -webkit-linear-gradient(top, #90ad2f 0, #84a233 100%);
  15212. background: -o-linear-gradient(top, #90ad2f 0, #84a233 100%);
  15213. background: -ms-linear-gradient(top, #90ad2f 0, #84a233 100%);
  15214. background: linear-gradient(to bottom, #90ad2f 0, #84a233 100%)
  15215. }
  15216. #grab {
  15217. background: #aa74ff;
  15218. background: -moz-linear-gradient(top, #aa74ff 0, #925aff 100%);
  15219. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aa74ff), color-stop(100%, #925aff));
  15220. background: -webkit-linear-gradient(top, #aa74ff 0, #925aff 100%);
  15221. background: -o-linear-gradient(top, #aa74ff 0, #925aff 100%);
  15222. background: -ms-linear-gradient(top, #aa74ff 0, #925aff 100%);
  15223. background: linear-gradient(to bottom, #aa74ff 0, #925aff 100%)
  15224. }
  15225. #woot {
  15226. border-radius: 4px 0 0 4px
  15227. }
  15228. #woot .bottom {
  15229. border-radius: 0 0 0 4px
  15230. }
  15231. #meh {
  15232. border-radius: 0 4px 4px 0
  15233. }
  15234. #meh .bottom {
  15235. border-radius: 0 0 4px 0
  15236. }
  15237. #vote .bottom {
  15238. position: absolute;
  15239. top: 37px;
  15240. left: 0;
  15241. width: 100%;
  15242. height: 24px
  15243. }
  15244. #meh .bottom,
  15245. #meh.selected {
  15246. background: #c42e3b
  15247. }
  15248. #woot .bottom,
  15249. #woot.selected {
  15250. background: #90ad2f
  15251. }
  15252. #grab .bottom,
  15253. #grab.selected {
  15254. background: #aa74ff
  15255. }
  15256. #vote .crowd-response.selected {
  15257. -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .41);
  15258. -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, .41);
  15259. box-shadow: inset 0 0 4px rgba(0, 0, 0, .41);
  15260. cursor: default
  15261. }
  15262. #woot.selected .bottom {
  15263. background: 0 0
  15264. }
  15265. #grab.selected .bottom {
  15266. background: 0 0
  15267. }
  15268. #meh.selected .bottom {
  15269. background: 0 0
  15270. }
  15271. #vote .crowd-response.disabled {
  15272. cursor: default
  15273. }
  15274. #vote .crowd-response.disabled .bottom {
  15275. background: #444a59
  15276. }
  15277. #woot.crowd-response.disabled.active .bottom {
  15278. background: #90ad2f
  15279. }
  15280. #grab.crowd-response.disabled.active .bottom {
  15281. background: #aa74ff
  15282. }
  15283. #meh.crowd-response.disabled.active .bottom {
  15284. background: #c42e3b
  15285. }
  15286. #vote .crowd-response .value {
  15287. position: absolute;
  15288. top: 3px;
  15289. left: 0;
  15290. width: 100%;
  15291. text-align: center;
  15292. font-weight: 600;
  15293. font-size: 13px
  15294. }
  15295. .video-only #woot {
  15296. border-radius: 0
  15297. }
  15298. .video-only #woot .bottom {
  15299. border-radius: 0
  15300. }
  15301. .video-only #meh {
  15302. border-radius: 0
  15303. }
  15304. .video-only #meh .bottom {
  15305. border-radius: 0
  15306. }
  15307. .video-only #grab {
  15308. border-radius: 0
  15309. }
  15310. .video-only #vote .crowd-response:last-child {
  15311. margin-right: 0
  15312. }
  15313. .video-only #vote {
  15314. width: 100%
  15315. }
  15316. #video-only-dj {
  15317. position: relative;
  15318. float: left;
  15319. width: 81px;
  15320. height: 61px;
  15321. margin-right: 1px;
  15322. background: #282c35;
  15323. text-align: center;
  15324. cursor: pointer
  15325. }
  15326. #video-only-dj.nobody {
  15327. display: none
  15328. }
  15329. #video-only-dj:hover {
  15330. background: #2d313a
  15331. }
  15332. #video-only-dj .icon-skip {
  15333. position: relative;
  15334. margin: 16px auto 0;
  15335. display: none
  15336. }
  15337. #video-only-dj .image {
  15338. position: relative;
  15339. margin: 0 auto;
  15340. width: 61px;
  15341. height: 100%
  15342. }
  15343. #video-only-dj .thumb {
  15344. top: 10px;
  15345. left: 11px
  15346. }
  15347. #video-only-dj.djing .icon-skip {
  15348. display: inline-block
  15349. }
  15350. #video-only-dj.djing .image {
  15351. display: none
  15352. }
  15353. #welcome {
  15354. position: fixed;
  15355. top: 0;
  15356. right: 0;
  15357. bottom: 0;
  15358. left: 0;
  15359. z-index: 10000100;
  15360. background: #1c1f25;
  15361. text-align: center;
  15362. white-space: nowrap;
  15363. font-size: 18px
  15364. }
  15365. #welcome:before {
  15366. display: inline-block;
  15367. box-sizing: border-box;
  15368. margin-right: -.25em;
  15369. height: 100%;
  15370. content: '';
  15371. vertical-align: middle
  15372. }
  15373. #welcome .welcome-content {
  15374. position: relative;
  15375. display: inline-block;
  15376. margin: 0 auto;
  15377. width: 1000px;
  15378. vertical-align: middle;
  15379. white-space: normal
  15380. }
  15381. #welcome .welcome-content .icon-site-logo {
  15382. position: relative;
  15383. display: inline-block;
  15384. margin: 0 auto 10px
  15385. }
  15386. #welcome .welcome-content h1 {
  15387. font-size: 32px
  15388. }
  15389. #welcome .welcome-content h2 {
  15390. margin: 10px auto;
  15391. font-weight: 400;
  15392. font-size: 24px
  15393. }
  15394. #welcome .welcome-content h3 {
  15395. margin: -10px auto 20px;
  15396. font-weight: 400;
  15397. font-size: 24px
  15398. }
  15399. #welcome .welcome-content ul {
  15400. margin: 20px auto 0;
  15401. width: 685px;
  15402. list-style-type: none
  15403. }
  15404. #welcome .welcome-content li {
  15405. position: relative;
  15406. margin-bottom: 30px;
  15407. width: 100%;
  15408. text-align: left
  15409. }
  15410. #welcome .welcome-content li div {
  15411. position: relative;
  15412. display: inline-block;
  15413. vertical-align: middle
  15414. }
  15415. #welcome .welcome-content li .left {
  15416. width: 40px;
  15417. height: 30px
  15418. }
  15419. #welcome .welcome-content li .right {
  15420. width: 640px
  15421. }
  15422. #welcome .welcome-content li .right .blue {
  15423. color: #30c8fc;
  15424. font-weight: 600
  15425. }
  15426. #welcome .welcome-content button {
  15427. position: relative;
  15428. padding: 0 25px;
  15429. min-width: 250px;
  15430. height: 57px;
  15431. background: #009cdd;
  15432. color: #eee;
  15433. white-space: nowrap;
  15434. font-weight: 400;
  15435. font-size: 20px;
  15436. font-family: "Open Sans", sans-serif;
  15437. cursor: pointer
  15438. }
  15439. .osx #welcome .welcome-content li div .right .blue {
  15440. font-weight: 400
  15441. }
  15442. .osx #welcome .welcome-content button {
  15443. font-weight: 300
  15444. }
  15445. .osx #welcome .welcome-content h2,
  15446. .osx #welcome .welcome-content h3 {
  15447. font-weight: 300
  15448. }
  15449. #walkthrough {
  15450. position: fixed;
  15451. top: 0;
  15452. right: 0;
  15453. bottom: 0;
  15454. left: 0;
  15455. z-index: 10000020;
  15456. text-align: center;
  15457. white-space: nowrap;
  15458. font-size: 18px
  15459. }
  15460. .wt-cover {
  15461. position: fixed;
  15462. top: 0;
  15463. right: 0;
  15464. bottom: 0;
  15465. left: 0;
  15466. z-index: 10000000;
  15467. background: rgba(17, 19, 23, .9)
  15468. }
  15469. #walkthrough .container {
  15470. position: absolute;
  15471. top: 0;
  15472. left: 0;
  15473. width: 100%;
  15474. height: 100%
  15475. }
  15476. #walkthrough .container:before {
  15477. display: inline-block;
  15478. box-sizing: border-box;
  15479. margin-right: -.25em;
  15480. height: 100%;
  15481. content: '';
  15482. vertical-align: middle
  15483. }
  15484. #walkthrough .step {
  15485. position: absolute;
  15486. display: none;
  15487. visibility: visible!important;
  15488. margin: 0 auto;
  15489. padding: 25px;
  15490. width: 400px;
  15491. background: #282c35;
  15492. -webkit-box-shadow: 0 0 5px #000;
  15493. -moz-box-shadow: 0 0 5px #000;
  15494. box-shadow: 0 0 5px #000;
  15495. vertical-align: middle;
  15496. text-align: left;
  15497. white-space: normal;
  15498. -webkit-animation-name: wt-fade-in;
  15499. -moz-animation-name: wt-fade-in;
  15500. animation-name: wt-fade-in;
  15501. -webkit-animation-duration: .5s;
  15502. -moz-animation-duration: .5s;
  15503. animation-duration: .5s;
  15504. -webkit-animation-timing-function: ease-in-out;
  15505. -moz-animation-timing-function: ease-in-out;
  15506. animation-timing-function: ease-in-out;
  15507. border: 5px solid #009cdd
  15508. }
  15509. #walkthrough .container h1 {
  15510. margin: 0 0 10px;
  15511. font-weight: 700;
  15512. font-size: 26px
  15513. }
  15514. #walkthrough .container p {
  15515. margin: 0 0 20px
  15516. }
  15517. #walkthrough a {
  15518. color: #00b5e6;
  15519. text-decoration: none;
  15520. font-weight: 700;
  15521. cursor: pointer
  15522. }
  15523. #walkthrough a:hover {
  15524. text-decoration: underline
  15525. }
  15526. .osx #walkthrough .container h1 {
  15527. font-weight: 600
  15528. }
  15529. .osx #walkthrough a {
  15530. font-weight: 600
  15531. }
  15532. #walkthrough .step span.back {
  15533. float: left
  15534. }
  15535. #walkthrough .step span.next {
  15536. float: right
  15537. }
  15538. #walkthrough .mode {
  15539. position: relative;
  15540. margin-bottom: 10px;
  15541. padding: 10px 15px;
  15542. background: #1c1f25;
  15543. color: #808691;
  15544. text-align: center;
  15545. cursor: pointer
  15546. }
  15547. #walkthrough .mode:hover {
  15548. background: #323742;
  15549. -webkit-box-shadow: inset 0 0 0 1px #009cdd;
  15550. -moz-box-shadow: inset 0 0 0 1px #009cdd;
  15551. box-shadow: inset 0 0 0 1px #009cdd;
  15552. color: #fff
  15553. }
  15554. #walkthrough .mode.selected {
  15555. background: #009cdd;
  15556. color: #eee;
  15557. cursor: default
  15558. }
  15559. #walkthrough .mode.video-mode {
  15560. margin-bottom: 0
  15561. }
  15562. #walkthrough .step.wt-mode span.back,
  15563. #walkthrough .step.wt-mode span.next {
  15564. margin-top: 25px
  15565. }
  15566. .is-wt #user-rollover {
  15567. display: none!important
  15568. }
  15569. .is-wt #app-menu .button,
  15570. .is-wt #history-button,
  15571. .is-wt .bar-button,
  15572. .is-wt .favorite {
  15573. cursor: default!important
  15574. }
  15575. .wt-1 #app-menu,
  15576. .wt-2 #app-menu,
  15577. .wt-3 #app-menu,
  15578. .wt-5 #app-menu,
  15579. .wt-6 #app-menu,
  15580. .wt-7 #app-menu,
  15581. .wt-8 #app-menu,
  15582. .wt-9 #app-menu {
  15583. z-index: 10000025;
  15584. background: #0a0a0a
  15585. }
  15586. .wt-4 #app-menu {
  15587. z-index: 10000025
  15588. }
  15589. .wt-1 #app-menu .button,
  15590. .wt-2 #app-menu .button,
  15591. .wt-3 #app-menu .button,
  15592. .wt-5 #app-menu .button,
  15593. .wt-6 #app-menu .button,
  15594. .wt-7 #app-menu .button,
  15595. .wt-8 #app-menu .button,
  15596. .wt-9 #app-menu .button {
  15597. opacity: .14
  15598. }
  15599. .wt-1 .app-header,
  15600. .wt-2 .app-header,
  15601. .wt-3 .app-header,
  15602. .wt-4 .app-header,
  15603. .wt-5 .app-header,
  15604. .wt-6 .app-header,
  15605. .wt-7 .app-header,
  15606. .wt-8 .app-header,
  15607. .wt-9 .app-header {
  15608. z-index: 10000023;
  15609. background: #0a0a0a
  15610. }
  15611. .wt-1 #room-bar,
  15612. .wt-2 #room-bar,
  15613. .wt-3 #room-bar,
  15614. .wt-4 #room-bar,
  15615. .wt-5 #room-bar,
  15616. .wt-6 #room-bar,
  15617. .wt-7 #room-bar,
  15618. .wt-8 #room-bar,
  15619. .wt-9 #room-bar {
  15620. opacity: .14
  15621. }
  15622. .wt-1 #now-playing-bar,
  15623. .wt-2 #now-playing-bar,
  15624. .wt-3 #now-playing-bar,
  15625. .wt-4 #now-playing-bar,
  15626. .wt-5 #now-playing-bar,
  15627. .wt-6 #now-playing-bar,
  15628. .wt-7 #now-playing-bar,
  15629. .wt-8 #now-playing-bar,
  15630. .wt-9 #now-playing-bar {
  15631. background: #1c1f25
  15632. }
  15633. .wt-1 #history-button,
  15634. .wt-2 #history-button,
  15635. .wt-3 #history-button,
  15636. .wt-4 #history-button,
  15637. .wt-5 #history-button,
  15638. .wt-6 #history-button,
  15639. .wt-7 #history-button,
  15640. .wt-8 #history-button,
  15641. .wt-9 #history-button {
  15642. background: #0a0a0a
  15643. }
  15644. .wt-1 #history-button i,
  15645. .wt-2 #history-button i,
  15646. .wt-3 #history-button i,
  15647. .wt-4 #history-button i,
  15648. .wt-5 #history-button i,
  15649. .wt-6 #history-button i,
  15650. .wt-7 #history-button i,
  15651. .wt-8 #history-button i,
  15652. .wt-9 #history-button i {
  15653. opacity: .14
  15654. }
  15655. .wt-1 #header-panel-bar,
  15656. .wt-2 #header-panel-bar,
  15657. .wt-4 #header-panel-bar,
  15658. .wt-5 #header-panel-bar,
  15659. .wt-6 #header-panel-bar,
  15660. .wt-7 #header-panel-bar,
  15661. .wt-8 #header-panel-bar,
  15662. .wt-9 #header-panel-bar {
  15663. opacity: .14
  15664. }
  15665. .wt-1 #playback,
  15666. .wt-2 #playback,
  15667. .wt-3 #playback,
  15668. .wt-4 #playback,
  15669. .wt-5 #playback,
  15670. .wt-6 #playback,
  15671. .wt-7 #playback,
  15672. .wt-8 #playback,
  15673. .wt-9 #playback {
  15674. z-index: 10000010
  15675. }
  15676. .wt-2 #avatars-container {
  15677. z-index: 10000012
  15678. }
  15679. .wt-3 .app-right {
  15680. z-index: 10000015
  15681. }
  15682. .wt-5 #footer,
  15683. .wt-6 #footer {
  15684. z-index: 10000007
  15685. }
  15686. .wt-5 #playlist-meta,
  15687. .wt-6 #playlist-meta {
  15688. background: #0a0a0a
  15689. }
  15690. .wt-5 #playlist-button,
  15691. .wt-5 #playlist-meta .bar-button,
  15692. .wt-5 .social-menu,
  15693. .wt-6 #playlist-button,
  15694. .wt-6 #playlist-meta .bar-button,
  15695. .wt-6 .social-menu {
  15696. opacity: .14
  15697. }
  15698. .wt-7 #vote {
  15699. z-index: 10000007
  15700. }
  15701. .wt-8 #dj-button {
  15702. z-index: 10000006
  15703. }
  15704. #walkthrough .wt-welcome {
  15705. top: 70px;
  15706. right: 250px
  15707. }
  15708. #walkthrough .wt-mode {
  15709. top: 80px;
  15710. right: 150px
  15711. }
  15712. #walkthrough .wt-chat {
  15713. right: 100px
  15714. }
  15715. #walkthrough .wt-guest,
  15716. #walkthrough .wt-meta {
  15717. bottom: 70px;
  15718. right: 20px
  15719. }
  15720. #walkthrough .wt-explore,
  15721. #walkthrough .wt-menu {
  15722. top: 70px;
  15723. left: 20px
  15724. }
  15725. .wt-1 .wt-welcome,
  15726. .wt-2 .wt-mode,
  15727. .wt-3 .wt-chat,
  15728. .wt-4 .wt-menu,
  15729. .wt-5 .wt-guest,
  15730. .wt-6 .wt-meta,
  15731. .wt-7 .wt-vote,
  15732. .wt-8 .wt-dj,
  15733. .wt-9 .wt-explore {
  15734. display: inline-block!important
  15735. }
  15736. @keyframes wt-fade-in {
  15737. 0% {
  15738. transform: scale(0);
  15739. opacity: 0
  15740. }
  15741. 60% {
  15742. transform: scale(1.1)
  15743. }
  15744. 80% {
  15745. transform: scale(.9);
  15746. opacity: 1
  15747. }
  15748. 100% {
  15749. transform: scale(1);
  15750. opacity: 1
  15751. }
  15752. }
  15753. @-webkit-keyframes wt-fade-in {
  15754. 0% {
  15755. -webkit-transform: scale(0);
  15756. opacity: 0
  15757. }
  15758. 60% {
  15759. -webkit-transform: scale(1.1)
  15760. }
  15761. 80% {
  15762. -webkit-transform: scale(.9);
  15763. opacity: 1
  15764. }
  15765. 100% {
  15766. -webkit-transform: scale(1);
  15767. opacity: 1
  15768. }
  15769. }
  15770. .osx body {
  15771. font-weight: 300
  15772. }
  15773. .osx .tab-menu button {
  15774. font-weight: 300
  15775. }
  15776. .osx #dashboard .search input {
  15777. font-weight: 300
  15778. }
  15779. .osx #user-friends .search input {
  15780. font-weight: 300
  15781. }
  15782. .osx #footer-user .name {
  15783. font-weight: 400
  15784. }
  15785. .osx #footer-user .bar .value {
  15786. font-weight: 400
  15787. }
  15788. #user-avatars .avatar-store .meta select {
  15789. font-weight: 300
  15790. }
  15791. .osx .user-content.profile .meta .status span {
  15792. font-weight: 400
  15793. }
  15794. .osx .user-content.profile .meta .blurb input {
  15795. font-weight: 300
  15796. }
  15797. .osx #dialog-room-create .status {
  15798. font-weight: 400
  15799. }
  15800. .osx #dialog-room-create .message {
  15801. font-weight: 400
  15802. }
  15803. .osx .dialog-input-background input {
  15804. font-weight: 400
  15805. }
  15806. .osx #user-settings .container button {
  15807. font-weight: 300
  15808. }
  15809. .osx #search input {
  15810. font-weight: 300
  15811. }
  15812. .osx #youtube-input-field {
  15813. font-weight: 300
  15814. }
  15815. .osx #input-room-name {
  15816. font-weight: 300
  15817. }
  15818. .osx #room-settings .general-settings textarea {
  15819. font-weight: 300
  15820. }
  15821. .osx #user-lists .list-header input {
  15822. font-weight: 300
  15823. }
  15824. .osx .app-right .friends .list-header input {
  15825. font-weight: 300
  15826. }
  15827. .osx #chat-messages {
  15828. font-weight: 400
  15829. }
  15830. .osx #waitlist .list .user .position {
  15831. font-weight: 400
  15832. }
  15833. .osx .playlist-overlay-help h2 {
  15834. font-weight: 600
  15835. }
  15836. .osx #user-friends .list .row .buttons button {
  15837. font-weight: 300
  15838. }
  15839. .osx #user-store .grid .cell.bundle .background .cta {
  15840. font-weight: 400
  15841. }
  15842. .osx #user-inventory .history .legend {
  15843. font-weight: 400
  15844. }
  15845. .osx .content.success h1 {
  15846. margin: 40px auto 60px
  15847. }
  15848. .osx .content.success .wallet {
  15849. margin: 0 auto 50px
  15850. }
  15851. .osx #dialog-purchase .username-box input {
  15852. font-weight: 300
  15853. }
  15854. .osx #dialog-purchase .username-box .status {
  15855. font-weight: 400
  15856. }
  15857. .osx #dialog-purchase .right.cash .info .amount {
  15858. font-weight: 400
  15859. }
  15860. .osx #room-settings .general-settings .panel .count {
  15861. font-weight: 400
  15862. }
  15863. .osx #user-view .banner .title {
  15864. font-weight: 600
  15865. }
  15866. .osx #user-view .banner .cta {
  15867. font-weight: 400
  15868. }
  15869. .osx .sign-up-overlay button {
  15870. font-weight: 300
  15871. }
  15872. .osx .sign-up-overlay input {
  15873. font-weight: 300
  15874. }
  15875. .osx .sign-up-overlay .top-bar h1 {
  15876. font-weight: 400
  15877. }
  15878. .index.win .communities .grid .cell .top span {
  15879. top: 16px
  15880. }
  15881. .ultra #volume {
  15882. display: none
  15883. }
  15884. .ultra #now-playing-time {
  15885. opacity: 0!important
  15886. }
  15887. .ultra #dj-button {
  15888. display: none
  15889. }
  15890. .ultra #vote {
  15891. display: none
  15892. }
  15893. .plutotv #volume {
  15894. display: none
  15895. }
  15896. .plutotv #now-playing-time {
  15897. opacity: 0!important
  15898. }
  15899. .plutotv #dj-button {
  15900. display: none
  15901. }
  15902. .plutotv #vote {
  15903. display: none
  15904. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!