html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; height: 100%; } body { height: 100%; margin: 0; background-color: #000; color: #7ecaee; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; font-family: Ubuntu, trebuchet ms, lucida grande, lucida sans unicode, lucida sans, Tahoma, sans-serif; font-size: 16px; -webkit-font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures; line-height: 1.4; min-height: 100vh; } object { z-index: 100; } * { -webkit-box-sizing: border-box; box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } a { color: #fff; cursor: pointer; outline: 0; text-decoration: none; } a { background-color: transparent; } blockquote:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child { margin-top: 0; } h1 { font-size: 36px; } h1, h2, h3, h4, h5, h6 { color: #fff; font-family: ubuntu condensed, trebuchet ms, lucida grande, lucida sans unicode, lucida sans, Tahoma, sans-serif; font-weight: 400; margin: 0.6em 0; line-height: 1.2; } h1, h2, h3, h4, h5 { text-transform: uppercase; } blockquote:last-child, p:last-child { margin-bottom: 0; } p { margin: 0.75em 0; } .hotel-button, h5, h6, p { font-size: 16px; } blockquote, p, small { line-height: 1.4; } habbo-client-closed, habbo-client-error { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; height: 100%; position: absolute; top: 0; width: 100%; display: -ms-flexbox; padding: 48px 12px; z-index: 610; left: 0; } habbo-client-closed .client-error__background-frank, habbo-client-error .client-error__background-frank { background-image: url(https://images.habbo.com/habbo-web/america/en/assets/images/backgrounds/flash_error_bg.57539aa2.png); display: block; height: 368px; padding: 80px 17px 35px 242px; position: relative; width: 639px; } habbo-client-closed .client-error__background-frank .client-error__text-contents, habbo-client-error .client-error__background-frank .client-error__text-contents { height: 253px; position: absolute; text-align: left; } habbo-client-closed .client-error__background-frank .client-error__text-contents .client-error__title, habbo-client-error .client-error__background-frank .client-error__text-contents .client-error__title { text-align: left; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div, habbo-client-error .client-error__background-frank .client-error__hotel-button-div { bottom: 30px; float: right; position: absolute; right: 30px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button { display: inline-block; line-height: 1.2; text-align: center; background-color: #ffb900; border-color: #ffea00; color: #000; border-radius: 5px 0 0 5px; border-width: 2px 1px 2px 2px; border-style: solid; margin-bottom: 4px; text-transform: uppercase; -webkit-box-shadow: none; box-shadow: none; position: relative; margin-right: 20px; margin-top: -3px; padding: 6px 12px 6px 24px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:active, habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:hover, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:active, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:hover { border-bottom-style: solid; border-bottom-width: 2px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:hover, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:hover { background-color: #ffd400; border-color: #fffd70; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:hover:after, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:hover:after { border-color: transparent transparent transparent #ffd400; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button h5, habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button h6, habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button p, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button h5, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button h6, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button p { font-size: 16px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:before, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:before { border-width: 21px; top: -2px; border-color: transparent transparent transparent #ffea00; right: -43px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:after, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:after { border-width: 19px; top: 0; border-color: transparent transparent transparent #ffb900; right: -38px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:after, habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button:before, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:after, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button:before { border-style: solid; position: absolute; display: block; content: ""; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button .hotel-button__text, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button .hotel-button__text { position: relative; padding-right: 27px; text-align: right; line-height: 26px; } habbo-client-closed .client-error__background-frank .client-error__hotel-button-div .hotel-button .hotel-button__text:before, habbo-client-error .client-error__background-frank .client-error__hotel-button-div .hotel-button .hotel-button__text:before { background-image: url(https://images.habbo.com/habbo-web/america/en/assets/images/sprite.541175ea.png); background-position: -242px -434px; width: 21px; height: 26px; content: ""; display: block; margin-top: -13px; position: absolute; top: 50%; right: 0; } #advert-container { display: inline-block; left: 50%; margin-left: -370px; margin-top: -30px; position: fixed; height: 195px; width: 740px; background-image: url(/web-gallery/client/client_container.png); background-repeat: no-repeat no-repeat; z-index: 899; } #advert-container #timer { position: absolute; left: 6px; top: 76px; color: #fff; font-size: 10px; font-family: Verdana, sans-serif; visibility: visible; float: left; } #advert-container #close { position: absolute; right: 6px; top: 76px; color: #fff; font-size: 10px; font-family: Verdana, sans-serif; visibility: visible; float: right; } #advert-container #close a { color: #fff; font-weight: 700; } #advert-container .ad-holder { position: absolute; left: 6px; top: 91px; } .client-disconnect-overlay { z-index: 9990 !important; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-image: url(/web-gallery/disconnected/landing_super_bg.png); text-align: center; } .client-disconnect-overlay .client-landing-image, .client-loading-overlay .client-landing-image { z-index: 9991 !important; position: absolute; bottom: 0; } .client-loading-overlay .client-landing-left, .client-disconnect-overlay .client-landing-left { left: 0; height: 500px; width: 400px; background: url(/web-gallery/disconnected/landing_super_left.png); background-repeat: no-repeat; } .client-loading-overlay .client-landing-right, .client-disconnect-overlay .client-landing-right { right: 0; height: 700px; width: 388px; background: url(/web-gallery/disconnected/landing_super_right.png); background-repeat: no-repeat; } .client-loading-overlay .client-loading-logo, .client-disconnect-overlay .client-disconnect-logo { background: url(/web-gallery/disconnected/landing_logo_new.png); background-position: top center; background-repeat: no-repeat; width: 220px; height: 431px; margin-left: auto; margin-right: auto; margin-top: 5px; } .client-loading-overlay .client-loading-info, .client-disconnect-overlay .client-disconnect-info { z-index: 9999 !important; position: absolute; width: 300px; height: auto; margin-left: auto; margin-right: auto; bottom: 10px; left: 0; right: 0; } .client-disconnect-overlay .disconnect-box:first-child, .client-loading-overlay .loading-box:first-child { margin-top: 0; } .client-loading-overlay .loading-text, .client-disconnect-overlay .disconnect-text { font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; margin-top: 0; color: #fff; } .client-disconnect-overlay .disconnect-button { font-family: Tahoma, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 22px; display: block; width: 100%; } .client-loading-overlay .loading-box, .client-disconnect-overlay .disconnect-box { background: rgba(0, 0, 0, 0.2); padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; margin-top: 5px; border-bottom: 2px solid rgba(0, 0, 0, 0.4); } .client-loading-overlay .client-loading-info, .client-disconnect-overlay .client-disconnect-info { z-index: 9999 !important; position: absolute; width: 300px; height: auto; margin-left: auto; margin-right: auto; bottom: auto; left: 0; right: 0; } .client-loading-overlay .loading-text-massive, .client-disconnect-overlay .disconnect-text-massive { font-size: 40px !important; } .client-disconnect-overlay .disconnect-box:first-child, .client-loading-overlay .loading-box:first-child { margin-top: 0; } .client-disconnect-overlay .spacer-tiny { margin-top: 5px; } .client-disconnect-overlay .uppercase { text-transform: uppercase !important; } .client-disconnect-overlay .button-green, .client-disconnect-overlay .button-success, .client-disconnect-overlay .button-login { background: #00813e; border: 2px solid #8eda55; padding: 10px; display: inline-block; color: #fff; -webkit-box-shadow: 0 0 0 1px #323232; box-shadow: 0 0 0 1px #323232; } .client-disconnect-overlay .button-login:hover, .client-disconnect-overlay .button-green:hover, .client-disconnect-overlay .button-success:hover { background: #00ab54; border: 2px solid #b9f373; } .client-disconnect-overlay .spacer { margin-top: 20px; } .client-disconnect-overlay div.rounded, .client-disconnect-overlay div.rounded-done { padding: 10px !important; } .client-disconnect-overlay .centered { text-align: center !important; } .client-disconnect-overlay .btn-hover:hover { opacity: 0.8; cursor: pointer; } .client-disconnect-overlay .button { cursor: pointer; font-size: 25px; } .client-disconnect-overlay .button-green, .client-disconnect-overlay .button-success, .client-disconnect-overlay .button-login { background: #00813e; border: 2px solid #8eda55; padding: 10px; display: inline-block; color: #fff; -webkit-box-shadow: 0 0 0 1px #323232; box-shadow: 0 0 0 1px #323232; } .client-disconnect-overlay .button-login:hover, .client-disconnect-overlay .button-green:hover, .client-disconnect-overlay .button-success:hover { background: #00ab54; border: 2px solid #b9f373; } .client-disconnect-overlay .black-outline { -webkit-box-shadow: 0 0 0 1px #323232; box-shadow: 0 0 0 1px #323232; } .client-disconnect-overlay .rounded { border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -o-border-radius: 4px 4px 4px 4px; } #notification-center { position: absolute; right: 5px; top: 80px; z-index: 903; } #notification-center .alert { z-index: 904; color: #fff; width: 300px; background-color: #5cb864; padding: 10px; border-radius: 5px; text-align: center; margin-bottom: 10px; -webkit-transition: background 0.2s; transition: background 0.2s; } #notification-center .alert:hover { background-color: #4cae55; cursor: pointer; } #staff-tools { position: fixed; right: 200px; z-index: 901; } #staff-tools .response { background-color: #ffb900; border-color: #ffea00; color: #fff; border-radius: 5px; padding: 5px 10px; margin-bottom: 10px; display: none; } #staff-tools #navigation { background-color: rgba(11, 11, 10, 0.7); border: 2px solid #4d4b46; width: 280px; z-index: 901; border-radius: 0 0 5px 5px; border-top: 0; height: 69px; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; display: -webkit-box; display: -ms-flexbox; display: flex; } #staff-tools #navigation ul { margin: 0; padding: 0; list-style: none; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; display: -webkit-box; display: -ms-flexbox; display: flex; } #staff-tools #navigation ul li { display: inline-block; width: 50px; } #staff-tools .habbo-box { display: none; margin-top: 50px; z-index: 902; width: 400px; position: absolute; top: 80px; right: 220px; } #staff-tools .habbo-box.chatlog-container { width: 600px; } #staff-tools .habbo-box.chatlog-container .body { padding: 0 !important; } #staff-tools .habbo-box.chatlog-container .body #chatlogs { max-height: 400px; overflow: scroll; } #staff-tools .habbo-box.chatlog-container .body #chatlogs .chat { padding: 3px 5px; } #staff-tools .habbo-box.chatlog-container .body #chatlogs .chat:nth-child(odd) { background-color: #cbebf8; } #staff-tools .habbo-box.chatlog-container .body #chatlogs .chat:nth-child(even) { background-color: #fff; } #staff-tools .habbo-box .title { font-size: 14px; font-weight: 600; background: #477794; border: 1px solid #2b4758; text-align: center; padding: 8px; border-radius: 5px 5px 0 0; text-transform: inherit; margin-bottom: 0; cursor: pointer; } #staff-tools .habbo-box .title .close { float: right; height: 20px; width: 20px; background-color: #b8483a; border-radius: 3px; border: 1px solid #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: border 0.2s; transition: border 0.2s; } #staff-tools .habbo-box .title .close:hover { border: 1px solid #fff; } #staff-tools .habbo-box .body { color: #000; background: #e9e9e2; padding: 10px; border: 1px solid #000; border-top: 0; border-radius: 0 0 5px 5px; border-bottom: 2px solid #000; } #staff-tools .habbo-box .body p { font-size: 14px; } #staff-tools .habbo-box .body input[type="text"] { padding: 5px 10px; border: 1px solid #000; outline: none; height: 31px; width: 50%; } #staff-tools .habbo-box .body #clones { margin-top: 10px; } #staff-tools .habbo-box .body #user { padding: 10px 0; } #staff-tools .habbo-box .body #user p { margin-bottom: 0; } #staff-tools .habbo-box .body #staff, #staff-tools .habbo-box .body #clones, #staff-tools .habbo-box .body #user-clones { width: 100%; max-height: 400px; overflow: scroll; } #staff-tools .habbo-box .body #staff .user, #staff-tools .habbo-box .body #clones .user, #staff-tools .habbo-box .body #user-clones .user { cursor: pointer; width: 32%; background-image: -webkit-gradient( linear, left bottom, left top, from(#eeeeee), color-stop(50%, #eeeeee), color-stop(51%, white) ); background-image: linear-gradient(0deg, #eeeeee 0%, #eeeeee 50%, white 51%); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; border-radius: 3px; border: 1px solid #000; margin: 2px; } #staff-tools .habbo-box .body #staff .user .username, #staff-tools .habbo-box .body #clones .user .username, #staff-tools .habbo-box .body #user-clones .user .username { margin-bottom: 0; margin-top: 10px; font-weight: 600; text-align: center; } #staff-tools .habbo-box .body #staff .user img, #staff-tools .habbo-box .body #clones .user img, #staff-tools .habbo-box .body #user-clones .user img { margin-top: -10px; } #staff-tools .habbo-box .body #staff .user:hover, #staff-tools .habbo-box .body #clones .user:hover, #staff-tools .habbo-box .body #user-clones .user:hover { background-image: -webkit-gradient( linear, left bottom, left top, from(white), color-stop(50%, #eeeeee), color-stop(51%, #eeeeee) ); background-image: linear-gradient(0deg, white 0%, #eeeeee 50%, #eeeeee 51%); } #staff-tools .habbo-box .body #inventory { max-height: 400px; overflow: scroll; } #staff-tools .habbo-box .body #inventory .item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 53px; border: 1px solid #000; border-radius: 5px; height: 49px; background-color: #cbcbcb; margin: 5px; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #staff-tools .habbo-box .body #inventory .item div { position: relative; } #staff-tools .habbo-box .body #inventory .item div .amount { right: -10px; top: -7px; position: absolute; background: #fff; border: 1px solid #3e687f; padding: 0 1px; color: #3e687f; font-size: 12px; } #staff-tools .actions { margin-top: 10px; } #staff-tools .actions .button { border: 2px solid #000; width: 100px; text-align: center; padding: 5px; border-radius: 4px; font-size: 14px; display: inline-block; } #staff-tools .actions .button:hover { cursor: pointer; } #staff-tools .actions .button.button-silver { color: #000; background-image: -webkit-gradient( linear, left bottom, left top, from(#eeeeee), color-stop(50%, #eeeeee), color-stop(51%, white) ); background-image: linear-gradient(0deg, #eeeeee 0%, #eeeeee 50%, white 51%); } #staff-tools .actions .button.button-silver:hover { background-image: -webkit-gradient( linear, left bottom, left top, from(white), color-stop(50%, #eeeeee), color-stop(51%, #eeeeee) ); background-image: linear-gradient(0deg, white 0%, #eeeeee 50%, #eeeeee 51%); } #staff-tools .actions .button.button-green { color: #fff; background-image: -webkit-gradient( linear, left bottom, left top, from(#3f8d27), color-stop(50%, #3f8d27), color-stop(0%, #479e2d) ); background-image: linear-gradient( 0deg, #3f8d27 0%, #3f8d27 50%, #479e2d 0% ); } #staff-tools .actions .button.button-green:hover { background-image: -webkit-gradient( linear, left bottom, left top, from(#479e2d), color-stop(50%, #479e2d), color-stop(0%, #3f8d27) ); background-image: linear-gradient( 0deg, #479e2d 0%, #479e2d 50%, #3f8d27 0% ); } #client-player { position: absolute; width: calc(100% - 200px); } #client-player #container { background-color: red; width: 320px; float: left; } #client-player #container.minimize .player-min { top: 0; } #client-player #container.minimize .player { top: -110px; } #client-player #container .player-min { background-color: rgba(11, 11, 10, 0.7); border: 2px solid #4d4b46; border-radius: 0 0 5px 5px; border-top: 0; width: 160px; height: 45px; position: absolute; left: 80px; top: -45px; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 999; } #client-player #container .player-min .guy { background-image: url(/img/radio/guy.png); width: 31px; height: 30px; float: left; margin: 10px 8px; margin-bottom: 0; } #client-player #container .player-min .txt { height: 40px; line-height: 40px; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #client-player #container .player-min .handle { background-image: url(/img/radio/handle.png); width: 22px; height: 17px; position: absolute; right: 34px; top: 11px; cursor: e-resize; } #client-player #container .player-min .open { background-image: url(/img/radio/open.png); width: 19px; height: 20px; position: absolute; right: 12px; top: 10px; cursor: pointer; } #client-player #container .player-min .open:hover { background-position: center; } #client-player #container .player-min .open:active { height: 19px; top: 11px; background-position: bottom; } #client-player #container .player { background-color: rgba(11, 11, 10, 0.7); border: 2px solid #4d4b46; border-radius: 0 0 5px 5px; border-top: 0; width: 320px; height: 110px; position: absolute; float: left; -webkit-transition: all 0.5s; transition: all 0.5s; top: 0; z-index: 999; } #client-player #container .player .controls { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #client-player #container .player .controls input[type="range"] { -webkit-appearance: none; background: 0 0; } #client-player #container .player .controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; } #client-player #container .player .controls input[type="range"]:focus { outline: none; } #client-player #container .player .controls input[type="range"]::-ms-track { width: 100%; cursor: pointer; background: 0 0; border-color: transparent; color: transparent; } #client-player #container .player .controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid #000; height: 24px; width: 10px; border-radius: 3px; background: #fff; cursor: pointer; margin-top: -8px; -webkit-box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } #client-player #container .player .controls input[type="range"]::-moz-range-thumb { box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; border: 1px solid #000; height: 36px; width: 16px; border-radius: 3px; background: #fff; cursor: pointer; } #client-player #container .player .controls input[type="range"]::-ms-thumb { box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; border: 1px solid #000; height: 36px; width: 16px; border-radius: 3px; background: #fff; cursor: pointer; } #client-player #container .player .controls input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; -webkit-box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } #client-player #container .player .controls input[type="range"]:focus::-webkit-slider-runnable-track { background: #367ebd; } #client-player #container .player .controls input[type="range"]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } #client-player #container .player .controls input[type="range"]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: 0 0; border-color: transparent; border-width: 16px 0; color: transparent; } #client-player #container .player .controls input[type="range"]::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } #client-player #container .player .controls input[type="range"]:focus::-ms-fill-lower { background: #3071a9; } #client-player #container .player .controls input[type="range"]::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; } #client-player #container .player .controls input[type="range"]:focus::-ms-fill-upper { background: #367ebd; } #client-player #container .player .controls #volume-control { margin-top: 10px; } #client-player #container .player .habbo { margin-top: 4px; float: left; position: relative; overflow: hidden; height: 65px; } #client-player #container .player .btn { background-image: url(/img/radio/button.png); width: 52px; height: 52px; float: left; margin-left: 18px; margin-top: 16px; } #client-player #container .player .btn .play { background-image: url(/img/radio/play_pause.png); background-position: left top; width: 20px; height: 30px; float: left; margin-left: 17px; margin-top: 11px; } #client-player #container .player .btn .play:hover { background-position: left bottom; } #client-player #container .player .btn .pause { background-image: url(/img/radio/play_pause.png); background-position: right top; width: 22px; height: 30px; float: left; margin-left: 15px; margin-top: 11px; } #client-player #container .player .btn .pause:hover { background-position: right bottom; } #client-player #container .player .split { background-color: #bbb; width: 1px; height: 52px; float: left; margin-left: 16px; margin-top: 16px; margin-right: 12px; opacity: 0.4; } #client-player #container .player .info { background-repeat: no-repeat; background-position: 2px center; width: 100px; padding-left: 24px; height: 19px; line-height: 19px; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; margin-top: 4px; } #client-player #container .player .info.music { background-image: url(/img/radio/music.png); margin-top: 10px; } #client-player #container .player .info.room { background-image: url(/img/radio/room.png); background-position: left center; } #client-player #container .player .info.listeners { background-image: url(/img/radio/listeners.png); } #client-player #container .player .handle { background-image: url(/img/radio/handle.png); width: 22px; height: 17px; position: absolute; right: 12px; bottom: 12px; cursor: e-resize; } #client-player #container .player .close-button { background-image: url(/img/radio/close.png); width: 19px; height: 20px; position: absolute; right: 12px; top: 10px; cursor: pointer; } #client-player #container .player .close-button:hover { background-position: center; } #client-player #container .player .close-button:active { height: 19px; top: 11px; background-position: bottom; } #client-alerts { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; } #client-alerts .hotel-alert { z-index: 902; width: 350px; position: absolute; } #client-alerts .hotel-alert .title { font-size: 14px; font-weight: 600; background: #477794; border: 1px solid #2b4758; text-align: center; padding: 8px; border-radius: 5px 5px 0 0; text-transform: inherit; margin-bottom: 0; cursor: pointer; } #client-alerts .hotel-alert .title .close { float: right; height: 20px; width: 20px; background-color: #b8483a; border-radius: 3px; border: 1px solid #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: border 0.2s; transition: border 0.2s; } #client-alerts .hotel-alert .title .close:hover { border: 1px solid #fff; } #client-alerts .hotel-alert .body { color: #000; background: #e9e9e2; padding: 10px; border: 1px solid #000; border-top: 0; border-radius: 0 0 5px 5px; border-bottom: 2px solid #000; } #client-alerts .hotel-alert .body p { font-size: 13px; }