@charset "UTF-8"; html { -webkit-text-stroke: 1px transparent; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; /* -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; */ } html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { margin: 0; padding: 0; } html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, ol, ul, li, video { border: 0; outline: none; vertical-align: baseline; image-rendering: auto; -ms-interpolation-mode: bicubic; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clear:before, .clear:after { content: ""; display: table; } .clear:after { clear: both; } html { height: 100%; } body { height: inherit; font-style: normal; font-weight: normal; } ul, ol { list-style: none; } a img { border: 0; } button, input { line-height: normal; -webkit-appearance: none; } button, input, select, textarea { font-family: inherit; font-style: normal; font-weight: normal; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; *overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: none; outline: none; border: none; } @font-face { font-family: "Icon"; src: url(../icons.eot); src: url(../icons.eot?#iefix) format("embedded-opentype"), url(../icons.woff) format("woff"), url(../icons.ttf) format("truetype"), url("Generated by IcoMoon#icon") format("svg"); font-weight: normal; font-style: normal; } .icon:before, .external-link:after { font-family: "Icon"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-help:before { content: '\e611'; } .icon-webcam:before { content: '\e613'; } .icon-share:before { content: '\e614'; } .icon-buy:before { content: '\e612'; } .icon-playlist:before { content: '\e61b'; } .icon-info:before { content: '\e61a'; } .icon-comment:before { content: '\e619'; } .icon-mini-player:before { content: '\e618'; } .icon-default-player:before { content: '\e617'; } .icon-fullscreen-player:before { content: '\e616'; } .icon-fullscreen-player.active:before { content: '\e615'; } .icon-facebook:before { content: '\e608'; } .icon-twitter:before { content: '\e60a'; } .icon-sms:before { content: '\e606'; } .icon-email:before { content: '\e605'; } .icon-submit:before { content: '\e603'; } .icon-itunes:before { content: '\e602'; } .icon-cosmox:before { content: '\e601'; } .icon-arrow-left:before { content: '\e60f'; } .icon-arrow-right:before { content: '\e60e'; } .icon-arrow-down:before { content: '\e60b'; } .icon-ondemand:before { content: '\e607'; } .icon-menu:before { content: '\e609'; } .icon-car:before { content: '\e60c'; } .icon-back:before { content: '\e60d'; } .icon-checkbox:before { content: '\e604'; } .icon-playbutton:before { content: '\e610'; } .external-link:after { content: '\e600'; } svg { width: 60px; height: 60px; } svg.tiny { width: 13px; height: 13px; } svg.small { width: 22px; height: 22px; } svg.medium { width: 32px; height: 32px; } svg.large { width: 50px; height: 50px; } svg.huge { width: 100px; height: 100px; } svg use { fill: #FFFFFF; } svg.gray use { fill: #808080; } html { color: #CCCCCC; font-size: 14px; font-family: "Open Sans", sans-serif; background-color: #282828; line-height: 19px; } body { background-color: #282828; } h1 { font-weight: normal; font-size: 30px; line-height: 38px; } h2 { font-weight: normal; font-size: 21px; line-height: 26px; } h3, .h3 { font-size: 18px; } h4, p { font-size: 14px; } .bigger { font-size: 18px; line-height: 26px; } .smaller { font-size: 13px; } .smallest { font-size: 12px; line-height: 16px; } a { color: #1EAAFF; text-decoration: none; } .feed.twitter a { text-decoration: underline; } .feed.twitter .icon-twitter { text-decoration: none; } .underline { text-decoration: underline; } a:active { background-color: transparent; } hr { height: 1px; margin: 4em 0; padding: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.3); background: none; display: block; } #header { background-color: #000000; } .inner { width: 320px; margin: auto; } .inline-list, .inline-list li { float: left; } .align-right { float: right; } .align-left { float: left; } .trim { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .any-surfer { position: absolute; clip: rect(0px, 0px, 0px, 0px); top: -10000px; } .spacer-bottom { margin-bottom: 15px; display: block; } .external-link:after { font-size: 19px; margin: 0 5px; vertical-align: text-top; } .not-supported { width: 100%; height: 100%; background-color: #262626; position: absolute; z-index: 1000; left: 0; top: 0; text-align: center; } .not-supported img { margin: 100px auto 0; } .not-supported p { width: 300px; margin: 30px auto; } #sm2-container { position: absolute; width: 0; height: 0; overflow: hidden; _overflow: hidden; } #sm2-container object, #sm2-container embed { width: 48px; height: 48px; max-width: 48px; max-height: 48px; } #sm2-container.swf_timedout { position: relative; width: 48px; height: 48px; } #sm2-container.swf_timedout, #sm2-container.swf_timedout object, #sm2-container.swf_timedout embed { min-width: 48px; min-height: 48px; } #sm2-container.swf_unblocked { width: 0; height: 0; } #sm2-container.swf_loaded object, #sm2-container.swf_loaded embed, #sm2-container.swf_unblocked object, #sm2-container.swf_unblocked embed { left: -9999em; top: -9999em; } #sm2-container.swf_error { display: none; } #channel-selector { padding: 8px 8px 0; } #channel-selector h3 { font-size: 14px; } #channel-selector h4 { font-size: 12px; } .toggle-channel-selector, .toggle-help { margin-bottom: 10px; padding: 10px; } .toggle-channel-selector { position: relative; float: left; } .toggle-channel-selector:before, .toggle-channel-selector:after { content: ''; position: absolute; background: #FFFFFF; -webkit-transition: all 650ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 650ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 650ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 650ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .toggle-channel-selector:before { width: 26px; height: 6px; left: 10px; top: 17px; } .toggle-channel-selector:after { width: 6px; height: 26px; left: 20px; top: 7px; } .toggle-channel-selector.active:before, .toggle-channel-selector.active:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .toggle-channel-selector span { margin-left: 38px; cursor: pointer; font-weight: bold; } .toggle-help { height: 39px; color: rgba(255, 255, 255, 0.5); overflow: hidden; float: right; -webkit-transition: all 450ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 450ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 450ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 450ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .toggle-help.active, .no-touch .toggle-help:hover { color: #FFFFFF; } .toggle-help:before { font-size: 30px; position: relative; top: -5px; left: -4px; } .channel-list { width: 308px; margin: 0 0 20px -2px; display: none; } .channel { width: 150px; padding: 10px; margin: 0 4px 4px 0; cursor: pointer; color: #FFFFFF; border-radius: 4px; background: #000000; } .no-touch .channel { -webkit-transition: background 250ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: background 250ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: background 250ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: background 250ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .no-touch .channel:hover, .channel.active { background: #2D2D2D; } .channel .logo { margin-right: 15px; float: left; } .channel .program { margin-top: -2px; color: #1EAAFF; -webkit-transition: color 100ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: color 100ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: color 100ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: color 100ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .channel.active .program { color: #FFFFFF; } .channel .content { display: none; } #player { height: 430px; overflow: hidden; position: relative; z-index: 1; color: #FFFFFF; background: #000000; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); clear: both; } .no-touch #player { -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } #player.mini-player { height: 130px; } #player:before, #player:after, #player-corner { z-index: 2; width: 20px; height: 20px; position: absolute; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjc5NjhGRDFEMzUxMUUzODEyMEYxQ0YwREVCNzlBRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjc5NjhGRTFEMzUxMUUzODEyMEYxQ0YwREVCNzlBRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ2Nzk2OEZCMUQzNTExRTM4MTIwRjFDRjBERUI3OUFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ2Nzk2OEZDMUQzNTExRTM4MTIwRjFDRjBERUI3OUFGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+RsiFaQAAAtlJREFUeNrt2r9vEnEYx3FYdKAyCGHAhpRKExmwI2GtTfgXWAmJHVj4L5QuJvQ/ECNuJF1A/pAu1Ya1dGuFdmnO5zHPkRM4fnyf4/j1+STvmxT7fS1ydw1YlhVY52R7VIxKU6dUmbqgOtQdZa2sDQGctiB1TFWoS6oPwMUARxeiClSbegagbodUjfoDQN2i1Dk1AKBuCaoBQP3yVBeAuoWpOgD1K1KPANQtR90CULe31A0AdYtTVwDUbZ+6BqBuKaoHQN2y1BMAdSsBUL9vANTfsXQBqL93BqByPwCofxTWB6Bu5wDUP9l+AKBuNQDqlvzvbR8AjfYTgLoVAKhbaPiVBoDGawJQtzMA6nYEQP16ANStBUDdqgDUPvIHoGofAKhbBoC6HQBQtwgAdXsZyGQySBFfXgHCuDBfYoAwLsaXd4AwLs2XE0AYd8KXEiCMK/HlEyCM+8yXFiCMa/HlFhDG9fhiUSlgLNwR29mAHwGycGdOwCZAFq7pBOxTIaDMXUjMhoBcATBzV7DdnIBtwMxdexLgM3UAnJklxWoMkKsBaGY1p9ko4AMVAZJrETFyBeSqgHKtOuo1CZD/e04Aa6yE/dVlFiD3HWBjNSZZuQFyeaANy7s5TQPs8ksT4P0z6JoAcl8BmKlPM5oFaO34I//SLJ95AJ+o7A7iZeXsakCut2MPXVNyZssrQO6aerMDePtyVstrQO6Kim8xXlzOaC0LkPtFHW4hHp/p96IeJoCWvMnLbRFeTs5k+QXIPVLFLcArylksvwHt6ht6xxKe9SXZL0D7ti+/Yfe2XS/O7hWgXWPNH4Ul3J6qrAsgN5AHj9E1govKzzTw+rzLALS7p76s+EVVUn6G+2Wdc5mAzrd9bXmX6sfL+5D8W23n27NNBhx9XXBJVahjKugBWFA+qyKf3ffzTH4DjnZHdagLqkydUu/lruA19UKQ9uSX4dPyZ8rydzryGSs7w189Q0neAsgWaQAAAABJRU5ErkJggg==); background-size: 40px 40px; } #player:before, #player:after { content: ''; bottom: 0; } #player:before { background-position: 0 20px; left: 0; } #player:after { background-position: 20px 20px; right: 0; } #player-corner { background-position: 20px 0; right: 0; } .player-logo { width: 75px; height: 50px; position: absolute; z-index: 0; left: 20px; top: 20px; } .no-touch .player-logo { -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } #radio-player, #ondemand-player, .background, .background:after { width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; } .background { background-size: cover; background-position: center 30%; } .background:after { content: ''; background: rgba(0, 0, 0, 0.4); background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.43) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.43))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.43) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.43) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.43) 100%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.43) 100%); } .info { width: 185px; position: absolute; left: 115px; top: 100px; } .info.mini-view { left: 335px; top: 20px; } .info h2 { font-size: 18px; } .info .performer { font-size: 14px; margin-bottom: -10px; } .info .artist-and-song { display: none !important; } .info .actions { margin: 20px 0 0 -13px; } .opera .info .actions { margin: 30px 0 0 -13px; } .info .actions a { height: 24px; margin-left: 14px; display: block; color: rgba(255, 255, 255, 0.8); -webkit-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .info .actions a.active, .no-touch .info .actions a:hover { color: #FFFFFF; } .info .action-buy:before { font-size: 40px; line-height: 22px; } .info .action-share:before { font-size: 22px; } .actions-popup { padding: 8px 4px; position: absolute; z-index: 9; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.8); display: none; } .opera .actions-popup { padding-top: 12px; } .actions-popup:after, .actions-popup:before { content: ''; position: absolute; top: -7px; left: 50%; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(255, 255, 255, 0.55); margin-left: -7px; } .actions-popup a { width: 22px; height: 22px; margin: 0 4px; display: block; font-size: 21px; text-shadow: none; color: #313233; -webkit-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .actions-popup .icon-cosmox { font-size: 19px; margin-top: 2px; } .no-touch .actions-popup a:hover { color: #1EAAFF; } .audio-controller a { width: 70px; height: 70px; position: absolute; left: -92px; background-image: url(../audiocontrols@2x.png); background-size: 350px 350px; } .mini-view .audio-controller a { width: 50px; height: 50px; background-size: 250px 250px; } .buffering-0 { background-position: -70px 0px; } .buffering-1 { background-position: -140px 0px; } .buffering-2 { background-position: -210px 0px; } .buffering-3 { background-position: -280px 0px; } .buffering-4 { background-position: 0px -70px; } .buffering-5 { background-position: -70px -70px; } .buffering-6 { background-position: -140px -70px; } .buffering-7 { background-position: -210px -70px; } .buffering-8 { background-position: -280px -70px; } .buffering-9 { background-position: 0px -140px; } .buffering-10 { background-position: -70px -140px; } .buffering-11 { background-position: -140px -140px; } .playing-0 { background-position: -210px -140px; } .playing-1 { background-position: -280px -140px; } .playing-2 { background-position: 0px -210px; } .playing-3 { background-position: -70px -210px; } .playing-4 { background-position: -140px -210px; } .playing-5 { background-position: -210px -210px; } .playing-6 { background-position: -280px -210px; } .playing-7 { background-position: 0px -280px; } .playing-8 { background-position: -70px -280px; } .playing-9 { background-position: -140px -280px; } .playing-10 { background-position: -210px -280px; } .playing-11 { background-position: -280px -280px; } .mini-view .buffering-0 { background-position: -50px 0px; } .mini-view .buffering-1 { background-position: -100px 0px; } .mini-view .buffering-2 { background-position: -150px 0px; } .mini-view .buffering-3 { background-position: -200px 0px; } .mini-view .buffering-4 { background-position: 0px -50px; } .mini-view .buffering-5 { background-position: -50px -50px; } .mini-view .buffering-6 { background-position: -100px -50px; } .mini-view .buffering-7 { background-position: -150px -50px; } .mini-view .buffering-8 { background-position: -200px -50px; } .mini-view .buffering-9 { background-position: 0px -100px; } .mini-view .buffering-10 { background-position: -50px -100px; } .mini-view .buffering-11 { background-position: -100px -100px; } .mini-view .playing-0 { background-position: -150px -100px; } .mini-view .playing-1 { background-position: -200px -100px; } .mini-view .playing-2 { background-position: 0px -150px; } .mini-view .playing-3 { background-position: -50px -150px; } .mini-view .playing-4 { background-position: -100px -150px; } .mini-view .playing-5 { background-position: -150px -150px; } .mini-view .playing-6 { background-position: -200px -150px; } .mini-view .playing-7 { background-position: 0px -200px; } .mini-view .playing-8 { background-position: -50px -200px; } .mini-view .playing-9 { background-position: -100px -200px; } .mini-view .playing-10 { background-position: -150px -200px; } .mini-view .playing-11 { background-position: -200px -200px; } #webcam-player { display: none; /*-webkit-transform-style: preserve-3d;*/ } @media screen and (max-width: 767px) { .logo-container { z-index: 7; top: -3px; } #player { border-radius: 0 20px 20px 20px; } #player #webcam-player { display: none; height: 100%; } #player #webcam-player #video { position: absolute; z-index: 3; height: 170px; left: 0; top: 80px; border-radius: 20px 20px 0 0; } #player #webcam-player #video_wrapper { z-index: 4; } #player #webcam-player .background { z-index: 5; } #player.has-webcam #webcam-player { display: block; } #player.has-ondemand #webcam-player { display: none; } #player.has-ondemand #webcam-player .background { z-index: 0; } #player.iswinphone #webcam-player { display: none; } #player.isandphone #webcamtoggle { display: block; } #player.isandphone .toggle-webcam { display: none; } .toggle-webcam { font-size: 13px; color: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); padding: 2px 5px; position: absolute; right: 30px; top: 30px; z-index: 5; -webkit-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .no-touch .toggle-webcam:hover { color: #FFFFFF; } .toggle-webcam:before { font-size: 20px; line-height: 18px; position: absolute; left: -25px; top: 2px; } .opera .toggle-webcam:before { top: 4px; } #radio-player, #ondemand-player { z-index: auto !important; } .info { z-index: 6; } #player-corner { top: 0; z-index: 5; } #radio-player > .background { z-index: 5; } .active-webcam #radio-player > .background { display: none !important; } .active-webcam #radio-player > .info { display: none; } .active-webcam #player-corner { top: 80px; z-index: 5; } .active-webcam .viewstates { display: block; } .active-webcam .viewstates > li a { display: none; } .active-webcam .viewstates > li:last-child a.icon-fullscreen-player { display: block; margin: 0; position: absolute; z-index: 8; top: -45px; right: 5px; } #toolbar { z-index: 9 !important; } #toolbar .toolbar-content { border-radius: 0 20px 20px 20px; } .audio-controller > a { display: block !important; } .toggle-webcam > * { display: none; } } #ondemand-player { position: absolute; display: none; } .has-ondemand #ondemand-player { display: block; } .has-ondemand .info .song { text-transform: capitalize; } .has-ondemand #webcam-player { display: none; } .playlist { width: 100%; height: 60px; bottom: 80px; position: absolute; background: rgba(255, 255, 255, 0.3); } .back-to-live { height: 60px; width: 100%; background-color: rgba(255, 255, 255, 0.9); padding: 10px 10px 10px 70px; color: #000; position: absolute; bottom: 20px; right: 0px; cursor: pointer; overflow: hidden; } .back-to-live:hover { background-color: white; } .playlist .timing { color: #000; left: 22px; margin-top: -10px; pointer-events: none; position: absolute; top: 50%; } .back-to-live .image { width: 60px; height: 60px; overflow: hidden; background-color: #CCC; position: absolute; top: 0px; left: 0px; background-position: 50% 50%; background-size: cover; } .back-to-live .play { width: 30px; height: 30px; position: absolute; top: 15px; left: 15px; background-image: url(../audiocontrols@IE-mobile.png); background-size: 150px 150px; } .back-to-live .label { font-weight: bold; text-transform: uppercase; } .back-to-live .nu-live-song { color: #666; } .playlist .controls { position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); } .playlist .controls .statusbar { width: 100%; height: 100%; position: relative; } .playlist .controls.dragging .statusbar { cursor: -moz-grabbing; cursor: grabbing; } .playlist .controls .statusbar .position, .playlist .controls .statusbar .loading { height: inherit; position: absolute; left: 0; top: 0; } .unavailable { background: #dc4242; color: #FFF; padding: 10px; width: 100%; margin: 10px 0px; text-align: center; font-weight: bold; -webkit-border-radius: 3px; border-radius: 3px; display: none; position: relative; } .playlist .controls .statusbar .position { background: #FFFFFF; } .playlist .controls .statusbar .loading { background: rgba(255, 255, 255, 0.5); } .playlist .controls .statusbar .position, .playlist .controls .statusbar .loading { width: 0; } .playlist .controls .statusbar .scrubbar { background: #ff0060; position: absolute; width: 4px; height: 100%; left: 0px; cursor: -moz-grab; cursor: grab; margin-left: -2px; } .playlist a { padding: 1em 3em; position: absolute; top: -140px; background: #FFF; } #toolbar { width: 100%; position: absolute; z-index: 0; left: 0; top: 0; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: -moz-transform 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: -o-transform 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: transform 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate(0, 370px); -moz-transform: translate(0, 370px); -ms-transform: translate(0, 370px); -o-transform: translate(0, 370px); transform: translate(0, 370px); } .active-toolbar #toolbar { z-index: 1; } .has-bottom-bar #toolbar { -webkit-transform: translate(0, 250px); -moz-transform: translate(0, 250px); -ms-transform: translate(0, 250px); -o-transform: translate(0, 250px); transform: translate(0, 250px); } .mini-player #toolbar, .mini-player.has-bottom-bar #toolbar { -webkit-transform: translate(0, 90px); -moz-transform: translate(0, 90px); -ms-transform: translate(0, 90px); -o-transform: translate(0, 90px); transform: translate(0, 90px); } .toolbar-header { height: 40px; line-height: 40px; padding: 0 20px; background: rgba(0, 0, 0, 0.3); } .toolbar-header h3 { font-weight: normal; max-width: 182px; margin-right: 10px; float: left; } .toolbar-header a { width: 36px; height: 36px; line-height: 34px; margin: 2px 0 0; padding: 6px; display: block; color: rgba(255, 255, 255, 0.5); -webkit-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .toolbar-header a:before { font-size: 22px; } .no-touch .toolbar-header a:hover, .toolbar-header .active { color: #FFFFFF; } .toolbar-header a.icon-playlist, .toolbar-header .hidden { display: none; } .has-ondemand .icon-playlist, .has-ondemand .icon-comment { display: none !important; } .has-ondemand.has-ondemand-playlist .icon-playlist, .has-ondemand .icon-info { display: block !important; } .logo-container { display: block; width: 90px; height: 70px; left: 2px; top: 2px; position: absolute; } .regio-selector { left: 108px; top: -342px; position: absolute; display: none; } .has-bottom-bar .regio-selector { top: -222px; } .regio-selector.active { background: none; /*height: 0px;*/ } .has-linked-channels .regio-selector { display: block; } .regio-selector a { width: 180px; height: 30px; line-height: 30px; margin: 0; padding: 0 10px; color: #FFFFFF; background: rgba(0, 0, 0, 0.9); -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .regio-selector .toggle { opacity: 0.6; } .no-touch .regio-selector:hover a, .regio-selector.active a { background: rgba(0, 0, 0, 0.9); opacity: 1; } .regio-list { box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); } .mini-player .regio-list { display: none; } .regio-list a { -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .no-touch .regio-list a:hover { color: #1EAAFF; } .volume { display: none; } .viewstates { display: none; } .toolbar-content { opacity: 0; display: none; height: 430px; padding: 25px; overflow: hidden; color: #000000; text-shadow: none; background: rgba(255, 255, 255, 0.9); -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate(320px, -410px); -moz-transform: translate(320px, -410px); -ms-transform: translate(320px, -410px); -o-transform: translate(320px, -410px); transform: translate(320px, -410px); } .active-toolbar .toolbar-content { opacity: 1; display: block; } .has-ondemand .toolbar-content { /*display: none;*/ } .toolbar-content h1 { font-weight: lighter; } .toggle-close-content { width: 30px; height: 30px; position: absolute; right: 23px; top: 19px; } .toggle-close-content.cookie, .toggle-close-content.browser { right: 10px; } .toggle-close-content.cookie:before, .toggle-close-content.browser:before { top: -2px; } .toggle-close-content.cookie:after, .toggle-close-content.browser:after { top: -9px; } .toggle-close-content:before, .toggle-close-content:after { content: ''; position: absolute; background: #808080; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .no-touch .toggle-close-content:hover:before, .no-touch .toggle-close-content:hover:after { background: #1EAAFF; } .toggle-close-content:before { width: 18px; height: 4px; top: 12px; left: 5px; } .toggle-close-content:after { width: 4px; height: 18px; top: 5px; left: 12px; } .info-view .thumb { width: 160px; height: 160px; overflow: hidden; background-color: #CCCCCC; background-position: center 30%; background-size: cover; } .info-view h1 { margin: 15px 0 3px; } .info-view h4 { margin-bottom: 3px; } .info-view .description { font-size: 13px; margin: 15px 0 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .info-view .link { color: #1EAAFF; } .login-view h1 { width: 85%; margin: 40px auto 30px; font-size: 36px; text-align: center; } .login-view a { padding: 10px 10px 10px 15px; margin-bottom: 10px; font-weight: bold; display: block; color: #FFFFFF; border-radius: 4px; background-color: #464243; background: linear-gradient(to bottom, #464243, #313131); } .no-touch .login-view a:hover { background-color: #313131; background: linear-gradient(to bottom, #313131, #464243); } .login-view .icon:before { font-size: 22px; margin-top: -2px; float: right; } .login-view .icon-facebook { background-color: #5879C0; background: linear-gradient(to bottom, #5879C0, #4E6CAC); } .no-touch .login-view .icon-facebook:hover { background-color: #4E6CAC; background: linear-gradient(to bottom, #4E6CAC, #5879C0); } .login-view .icon-twitter { color: #3287C7; background-color: #A7DBFF; background: linear-gradient(to bottom, #A7DBFF, #8CD3FD); } .no-touch .login-view .icon-twitter:hover { background-color: #8CD3FD; background: linear-gradient(to bottom, #8CD3FD, #A7DBFF); } .login-view .icon-sms { background-color: #9DD93D; background: linear-gradient(to bottom, #9DD93D, #96CF3E); } .no-touch .login-view .icon-sms:hover { background-color: #96CF3E; background: linear-gradient(to bottom, #96CF3E, #9DD93D); } .login-view .icon-sms .small { font-size: 11px; } .form-view { margin-top: 40px; position: relative; } .form-view .profile { margin-top: 3px; margin-right: 15px; float: left; } .form-view .name { font-weight: lighter; line-height: 26px; padding-top: 10px; } .form-view .name a { color: #000000; } .form-view .share { margin-top: 10px; } .form-view .checkbox { color: #313233; font-size: 20px; width: 18px; height: 18px; outline: none; margin: -2px 0 0 0; background: none; border: 1px solid transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; position: relative; } .form-view .share span { width: 18px; height: 18px; margin-right: 10px; border: 1px solid #B3B3B3; background: #FFFFFF; } .form-view .checkbox:before { position: absolute; display: none; top: -4px; } .form-view .checkbox.checked:before { display: block; } .IE input.checkbox { width: 24px !important; height: 24px !important; margin-left: -2px; } .IE .form-view .share span { border: none; } .form-view .textarea { width: 100%; height: 230px; margin-top: 30px; border: 1px solid #B3B3B3; background: #FFFFFF; position: relative; } .form-view .textarea:after, .form-view .textarea:before { content: ''; position: absolute; top: -15px; left: 50%; } .form-view .textarea:before { border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid; border-bottom-color: inherit; margin-left: -15px; } .form-view .textarea:after { border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #FFFFFF; margin-top: 1px; margin-left: -14px; } .form-view textarea { width: 100%; height: 170px; padding: 10px; } .form-view .submit { font-size: 30px; color: #1EAAFF; position: absolute; right: 15px; bottom: 15px; -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .form-view .submit.disabled { color: #CCCCCC; } .char-counter { color: #808080; text-align: right; position: absolute; bottom: 20px; right: 60px; } .form-view .orange { color: #CD7054; } .form-view .red { color: #E00; } .submit-status { padding: 10px; position: absolute; top: 0; } @media screen and (max-width: 767px) { .active-toolbar .toolbar-content { -webkit-transform: translate(0, -410px); -moz-transform: translate(0, -410px); -ms-transform: translate(0, -410px); -o-transform: translate(0, -410px); transform: translate(0, -410px); } .has-bottom-bar .toolbar-content { -webkit-transform: translate(320px, -290px); -moz-transform: translate(320px, -290px); -ms-transform: translate(320px, -290px); -o-transform: translate(320px, -290px); transform: translate(320px, -290px); } .has-bottom-bar.active-toolbar .toolbar-content { -webkit-transform: translate(0, -290px); -moz-transform: translate(0, -290px); -ms-transform: translate(0, -290px); -o-transform: translate(0, -290px); transform: translate(0, -290px); } .comment-form p { font-size: 13px; } } .toolbar-playlist { opacity: 0; width: 100%; z-index: -1; top: 40px; position: absolute; background: rgba(255, 255, 255, 0.3); -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .has-bottom-bar .toolbar-playlist { opacity: 1; } .has-ondemand .toolbar-playlist { display: none !important; } .playlist-controller { display: none; } .playlist-item { line-height: 29px; border-top: 1px solid rgba(0, 0, 0, 0.3); padding: 0 20px; clear: both; } .playlist-item:first-child { line-height: 30px; border-top: none; } .playlist-item .artist, .playlist-item .title { width: 40.5%; margin-right: 1.5%; float: left; } .playlist-item .time { width: 16%; text-align: right; float: right; } #content { min-height: 50px; margin-top: -20px; background-color: #2D2D2D; } #content .inner { padding: 20px 0px 40px; position: relative; } .content-view { clear: both; margin-top: 30px; } .content-toggle { padding: 8px 0; } .content-toggle:before { font-size: 18px; color: #808080; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); padding: 8px; -webkit-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .no-touch .content-toggle:hover:before, .content-toggle.active:before { color: #1EAAFF; } .content-toggle span { display: none; } .menu { margin-top: 14px; margin-right: 10px; float: left; } .opera .menu { margin-top: 16px; } .menu.hidden { margin-right: 90px; } .menu:before { font-size: 33px; text-shadow: none; color: #FFFFFF !important; } .menu.hidden:before { display: none; } .content-navigation { width: 80%; min-height: 45px; margin: 15px 0 20px 0; float: left; } .content-navigation a { font-size: 30px; color: #808080; line-height: 45px; -webkit-transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); width: 100%; float: left; } .content-navigation .active a { color: #FFFFFF; display: inline; } .back-toggle { color: #808080; line-height: 33px; position: absolute; top: 0; -webkit-transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 150ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .back-toggle:before { font-size: 33px; margin-right: 7px; float: left; } .no-touch .back-toggle:hover { color: #FFFFFF; } .content-information { clear: both; margin-bottom: 22px; margin-top: 16px; } .content-information .content-information-container { margin-bottom: 8px; } .content-information .content-information-item { height: 60px; background: #383838; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); } .content-information .content-information-item h1 { font-size: 42px; color: #FFFFFF; font-weight: lighter; line-height: 50px; padding-right: 10px; } .content-information .content-information-item p { font-size: 16px; color: #808080; clear: both; } .content-information .content-information-item p span { display: block; width: auto; position: relative; font-size: 14px; padding-right: 30px; } .content-information .content-information-item p span:only-child { padding-right: 0; } .content-information .content-information-item p strong { color: #FFFFFF; width: 30px; text-align: right; position: absolute; top: 0; right: 0; } .content-information .content-information-item-padding { padding: 5px 30px; } .content-information .content-information-item-padding > * { display: inline-block; vertical-align: middle; width: auto; } .content-information .content-information-item-icon { margin-left: 20px; } .content-information .content-information-item-icon svg { display: block; } .content-header { height: 40px; line-height: 40px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); position: relative; margin-bottom: 30px; margin-top: 30px; } #ondemand-playlist .content-header { height: auto; } .content-header h4 { text-align: center; } .content-header .content-toggle { position: absolute; padding: 0; top: 0; } .content-header .content-toggle:before { font-size: 10px; position: absolute; top: 8px; } .content-header .left { padding-left: 25px; left: 5px; } .content-header .right { padding-right: 25px; right: 5px; } .content-header .left:before { left: 0; } .content-header .right:before { right: 0; } .content-wrapper { -webkit-transition: all 500ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: all 500ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: all 500ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: all 500ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .content-wrapper.dimmed { opacity: 0.2; } .content-list { border-top: 1px solid #474747; } .content-list-item { border-bottom: 1px solid #474747; position: relative; padding: 17px; } #ondemand-playlist .content-list-item { padding-bottom: 0; padding-top: 0; } .content-list-item.current, .content-list-item.active { background: rgba(255, 255, 255, 0.05); } .content-list-item h3 { color: #FFFFFF; font-weight: normal; line-height: 26px; } .content-list-item .content-toggle { margin: 0 -5px 0 7px; float: right; } .content-list-item .content-toggle:before { position: relative; top: -5px; } #firstrun a { color: #fff; display: block; font-size: 46px; font-weight: normal; line-height: 1.3em; } #firstrun .controller { cursor: pointer; font-size: 30px; font-weight: normal; line-height: 1.2em; margin: 75px auto; padding-left: 100px; position: relative; width: 260px; } #firstrun .controller span { background-image: url(../audiocontrols@2x.png); background-size: 225px 225px; height: 45px; margin-left: -70px; position: absolute; top: 15px; width: 45px; } #firstrun .controller.first { margin: 50px auto; } #firstrun { background-color: #000; background-image: url("data:image/gif;base64,R0lGODlhAwADAPABABMTE////yH/C1hNUCBEYXRhWE1QAz94cAAh+QQFAAABACwAAAAAAwADAEACA0SOVwA7"); color: #fff; font-size: 12px; left: 0; line-height: 1.7em; position: absolute; top: 0; width: 100%; z-index: 9999; } #firstrun-splash { background-image: url(../header-background-mobile.gif); background-position: center bottom; background-repeat: repeat-x; margin: auto; text-align: center; width: 100%; } #firstrun-splash p { margin-top: 40px; } #firstrun-channels { background-color: #1f1f1f; } .inner { margin: auto; /*width: 280px;*/ width: 304px; } #firstrun br.tablet { display: none; } #firstrun br.mobile { display: block; } #firstrun-channels img { margin: 40px auto; } #firstrun-channels img.tablet { display: none; } #firstrun-channels img.mobile { margin-bottom: 50px; margin-left: 60px; } #firstrun h3 { font-size: 17px; font-weight: normal; } #firstrun-channels p { margin-top: 30px; } #firstrun-channels img { margin: 40px auto; } #firstrun-ondemand { padding-bottom: 40px; } #firstrun-ondemand img.mobile { margin: 40px auto 20px 60px; } #firstrun-ondemand img.tablet { display: none; } #firstrun-ondemand h3 { font-size: 13px; margin-bottom: 30px; } #firstrun-live { padding-bottom: 40px; } #firstrun-live .channel-list { display: block; } #firstrun-live .inline-list { display: block; } #firstrun-live img.mobile { margin: 40px auto 20px 60px; } #firstrun-live img.tablet { display: none; } #firstrun-live h3 { font-size: 13px; margin-bottom: 30px; } #firstrun-live img.mobile { margin: 40px auto 20px 60px; } #firstrun-interact { background-color: #1f1f1f; padding-bottom: 40px; } #firstrun-interact img.mobile { margin: 40px auto 20px 60px; } #firstrun-interact img.tablet { display: none; } #firstrun-interact p { margin-top: 30px; } #firstrun-listen { display: inline-block; } #cookie-policy { width: 100%; text-align: center; padding: 8px 50px 8px 14px; background-color: #333; position: relative; display: none; overflow: hidden; } #browser-policy { width: 100%; text-align: center; padding: 8px 50px 8px 14px; background-color: #222; position: relative; display: none; overflow: hidden; } .content-grid { float: left; } .content-grid.last { float: right; } .content-grid-item { width: 304px; height: 147px; margin-bottom: 8px; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); background-color: #383838; position: relative; overflow: hidden; padding: 15px; } .content-grid-item.new { border: 1px solid #105d8c; background-color: #1e5799; background: linear-gradient(to bottom, #1e5799, #173b51); } .content-grid-item.double { height: 310px; } .content-grid-item.triple { height: 473px; } .content-grid-item.quad { height: 636px; } .content-grid-item h1, .content-grid-item h2 { font-weight: lighter; } .content-grid-item h1 { color: #FFFFFF; font-size: 42px; line-height: 58px; } .content-grid-item h2 { font-size: 30px; line-height: 38px; margin-top: -5px; } .content-grid-item p, .content-grid-item .time, .content-grid-item .audio-toggle { color: #808080; } .content-grid-item.rss { cursor: pointer; } .content-grid-item.rss .body { color: #FFFFFF; font-size: 21px; line-height: 26px; } .toggle-new-feed-item { width: 304px; padding: 10px; margin: 0 auto 8px; text-align: center; display: block; color: #000000; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); background: #FFFFFF; -webkit-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -moz-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -o-transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); transition: color 300ms cubic-bezier(0.445, 0.045, 0.0355, 1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .no-touch .toggle-new-feed-item:hover { color: #1EAAFF; } .sticky { position: fixed; margin-left: -152px; z-index: 100; left: 50%; top: 0; } .toggle-new-feed-item .arrow-icon { float: right; } .toggle-new-feed-item .label { margin-left: 5px; cursor: pointer; } .referrer { color: #1EAAFF; position: absolute; bottom: 12px; } .referrer.left { left: 15px; } .referrer.right { right: 15px; } .referrer.icon:before { color: #808080; text-shadow: none; position: relative; margin-right: 5px; top: 1px; } .hasBackground { color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); } .hasBackground .image { width: 100%; height: 100%; position: absolute; z-index: 0; left: 0; top: 0; background-size: cover; background-position: center 30%; } .hasBackground:before { content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; bottom: 0; left: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: rgba(0, 0, 0, 0); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)); } .hasBackground .body { position: relative; display: block; width: 100%; overflow: hidden; } .hasBackground .body, .hasBackground .referrer { z-index: 2; } .program-guide { cursor: pointer; } .program-guide h2 { margin-bottom: 15px; } .program-guide li { width: 90%; padding: 10px; margin: auto; position: relative; } .program-guide .next, .program-guide .after { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .program-guide .previous { border-top: 1px solid rgba(255, 255, 255, 0.05); } .program-guide .trim { width: 79%; float: right; } .program-guide .current .trim { width: 69%; margin-top: -2px; color: #FFFFFF; font-size: 18px; line-height: 26px; } .program-guide .current { width: 100%; height: 73px; padding-top: 11px; background: rgba(255, 255, 255, 0.05); border-bottom: 3px solid rgba(255, 255, 255, 0.05); } .program-guide .status { height: 3px; background: #FFFFFF; position: absolute; bottom: -3px; left: 0; } .program-guide .thumb { width: 70px; height: 70px; margin: -11px 15px 0 -10px; background-color: rgba(255, 255, 255, 0.05); background-position: center 30%; background-size: cover; overflow: hidden; float: left; } .program-guide .referrer { color: #1EAAFF; text-decoration: underline; } .content-information .weather { border-bottom: 2px solid #333333; border-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* .weather h1 { font-size: 47px; display: inline-block; line-height: 36px; color: white; font-weight: lighter; width: 110px; text-align: center; text-indent: 20px; } .weather p { display: inline-block; float: right; color: $color-dark-gray; font-size: 16px; } .weather strong { color: $color-white; } */ .content-information .traffic { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: 2px solid #535353; background: #414141; } .traffic .link { cursor: pointer; } .traffic .status { display: none; } /* .traffic h1 { text-align: center; display: inline; line-height: 36px; font-size: 47px; font-weight: lighter; color: white; } .opera .traffic h1 { font-size: $font-42; //margin-top: 5px; } .traffic .tagline { display: inline-block; line-height: 18px; width: 40px; font-size: 16px; color: $color-dark-gray; } //.opera .traffic .tagline { // margin-top: 10px; //} */ .content-information .traffic-info { border-top-left-radius: 0px; border-top-right-radius: 0px; background: #414141; } /* .audio-toggle { height: 100%; line-height: $line-16; display: block; padding: 22px 10px; } .audio-toggle span{ display: inline-block; font-size: 16px; line-height: 18px; height: 36px; color: $color-dark-gray; vertical-align: middle; } .audio-toggle:active { background: $color-transparent-lightest-white; } */ .content-information .news { border-top-left-radius: 0px; border-top-right-radius: 0px; } .banner { padding: 2px; background: #383838; height: auto; } .banner > div { margin: 0px auto; } .banner span { color: #808080; padding: 5px 8px; display: block; } .banner-container > div { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; text-align: center; } .banner-container > div div { margin: 0px auto; } .list .content-grid-item.banner { padding: 1px; border: 1px solid #474747; } .list .content-grid-item.banner > div:not([class]) { margin: 0 auto; } .list .content-grid-item.banner + .content-grid-item { border: none; } h1.channel-title { line-height: 34px; margin-bottom: 25px; } #pebbleMOB640x150 { position: relative; margin-top: 10px; left: 50%; transform: translateX(-50%); } .content-header.ondemand { position: relative; padding: 0 15px; margin-bottom: 50px; margin-top: 50px; } .ondemand .content-grid-item { position: relative; padding: 0; width: 304px; } .grid .ondemand-item { color: #FFFFFF; width: inherit; height: inherit; position: absolute; z-index: 2; } .list.ondemand.content-grid { width: 100%; } .list .ondemand-item { color: #FFFFFF; } .list .content-grid-item { width: 100%; height: auto; border-top: 1px solid #474747; margin: 0; background-color: transparent; border-radius: 0; padding: 14px; } .list .body br { display: none; } .list .content-grid-item:last-child { border-bottom: 1px solid #474747; } .list .body .date { float: right; margin-top: 5px; } .grid .ondemand-item .body { padding: 15px; position: absolute; bottom: 0; } .ondemand-item .episodes { color: #cccccc; display: block; font-size: 14px; } .list .ondemand-item .episodes { float: right; display: inherit; margin-top: 5px; } .grid .only-list, .list .only-list { display: none; } .ondemand-item strong { font-weight: normal; font-size: 21px; line-height: 26px; } .list .content-grid-item .image, .list .content-grid-item .overlay { display: none !important; } .ondemand #sort-controls { position: relative; float: right; height: 23px; top: 50%; margin-top: -12px; } .ondemand #back-overview { background: url(../title-arrow-back.png) no-repeat 0px 0px; padding: 2px 0px 0px 34px; font-size: 17px; line-height: 20px; cursor: pointer; display: none; float: left; margin-top: 8px; height: 24px; } .ondemand #label-overview { float: left; } .entry-only { display: none; } .list .only-list.entry-only { display: none; } .entryonly .entry-only { display: block; } .entryonly .program-only { display: none; } .entryonly .only-list.entry-only { display: none; } .list .entryonly .entry-only { display: block; } .list .entryonly .entry-only { display: block; float: right; } .entryonly .collectionOnly { display: none; } .ondemand #sort-controls a { display: block; width: 23px; height: 23px; float: left; margin: 0px 4px; opacity: .3; } .ondemand #sort-controls a.active { opacity: 1; } .ondemand #sort-controls #grid-view { background: url(../sort-controls.png) no-repeat -23px 0px; } .ondemand #sort-controls #grid-view.active, .ondemand #sort-controls #grid-view:hover { background: url(../sort-controls.png) no-repeat 0px 0px; opacity: 1; } .ondemand #sort-controls #list-view { background: url(../sort-controls.png) no-repeat -68px 0px; } .ondemand #sort-controls #list-view.active, .ondemand #sort-controls #list-view:hover { background: url(../sort-controls.png) no-repeat -46px 0px; opacity: 1; } .grid .ondemand-item .title { font-size: 30px; font-weight: 300; line-height: 36px; margin-bottom: 8px; display: block; } .list .ondemand-item .title { font-size: 20px !important; line-height: 26px !important; font-weight: 400; float: left; width: 100%; padding-right: 10px; } .ondemand-item .date { display: block; color: #cccccc; font-size: 14px; } .ondemand-item .white { color: #FFF; font-weight: 500; } .ondemand .ondemand-item .arrow { position: relative; padding-right: 27px; background: url(../title-arrow.png) no-repeat 100% 60%; } .ondemand .overlay { background-color: rgba(0, 0, 0, 0); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)); position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: .8; } .ondemand .hasBackground:before { background: none; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ondemand #sort-controls #grid-view { background: url(../sort-controls@2x.png) no-repeat -23px 0px; background-size: 92px 23px; } .ondemand #sort-controls #grid-view.active, .ondemand #sort-controls #grid-view:hover { background: url(../sort-controls@2x.png) no-repeat 0px 0px; background-size: 92px 23px; opacity: 1; } .ondemand #sort-controls #list-view { background: url(../sort-controls@2x.png) no-repeat -68px 0px; background-size: 92px 23px; } .ondemand #sort-controls #list-view.active, .ondemand #sort-controls #list-view:hover { background: url(../sort-controls@2x.png) no-repeat -46px 0px; background-size: 92px 23px; opacity: 1; } .ondemand .ondemand-item .arrow { background: url(../title-arrow@2x.png) no-repeat 100% 60%; background-size: 20px 20px; } .ondemand #back-overview { background: url(../title-arrow-back@2x.png) no-repeat 0px 0px; background-size: 24px 24px; } } @media screen and (max-width: 700px) { .list .ondemand-item .body .episodes, .list .ondemand-item .body .date { opacity: 0.6; } .list .ondemand-item .body .collectionOnly { margin-left: 10px; } } .no-data { display: block; text-align: center; } .content-list-item .time { width: 40px; height: 40px; margin-right: 10px; line-height: 26px; overflow: hidden; float: left; } .content-list-item .program { width: 55%; } .content-list-item .description { display: none; } .content-list-item .content-toggle { margin-top: -25px; } .content-list-item.active .icon-playlist, .content-list-item.active .icon-playlist:before { color: #FFFFFF; } .current .icon-ondemand { color: #FFFFFF; cursor: pointer; } .current .icon-ondemand span { display: block; margin: -6px 2px 0 5px; } .current .icon-ondemand:before { display: none; } .continuo .content-list-item .time, .continuo .content-list-item .program, .continuo .content-list-item .description, .continuo .content-list-item a { display: none !important; } .program-playlist { width: 304px; margin-top: 22px; margin-left: -17px; color: #808080; text-transform: uppercase; display: none; } .continuo .content-list-item .program-playlist { margin-top: 0; } .active .program-playlist { display: block; } .program-playlist-item { padding: 9px 0px 9px 70px; position: relative; cursor: default; } .program-playlist-item:nth-child(odd) { background: rgba(0, 0, 0, 0.1); } .program-playlist .artist, .program-playlist .song, .program-playlist .performer { max-width: 89%; } .program-playlist .performer { text-transform: none; } .program-playlist h4 { color: #FFFFFF; } .program-playlist .full, .program-playlist .action-buy { display: none; } @media screen and (min-width: 768px) { .program-playlist-item .start-time { float: left; position: relative; margin-right: 15px; min-height: 22px; } } .inner.help { width: 100%; } .help h1, .help h2, .help h3, .help p, .help li, .help div { text-align: center; } .help h1, .help h2, .help h3 { color: #FFFFFF; font-weight: lighter; } .help h1 { margin-top: 1.5em; } .help h2 { margin-top: 0.5em; } .help h3 { font-size: 30px; font-weight: lighter; } .help p { margin: 2em 0 2.5em; } .help hr { width: 100%; } .help .bigger { margin-top: 1em; } .help .triple { margin-bottom: -3em; } /* .help .frame { padding: 30px; border-radius: $border-radius * 2; border: 2px solid $color-dark-gray; position: relative; display: block; clear: both; } .help .frame:before { width: 40px; line-height: 40px; font-size: $font-16; font-weight: bold; color: $color-white; content: 'TIP'; position: absolute; margin-left: -20px; top: -20px; left: 50%; border-radius: 50%; background: $color-dark-gray; } .help .frame p { margin-bottom: 0; } */ #footer { color: #474747; text-align: center; padding: 30px 0 40px; } #footer a { color: #FFFFFF; text-decoration: underline; } .no-touch #footer a:hover { text-decoration: none; } #footer span { margin: 0 5px; } #footer p { margin: 5px auto 40px; } .footer-plus-horizontal, .footer-plus-vertical { background: #FFFFFF; margin: auto; } .footer-plus-horizontal { width: 26px; height: 6px; } .footer-plus-vertical { width: 6px; height: 26px; margin-top: -16px; } .radioplus-apps { margin: 40px 0px; } .radioplus-apps .app-icon { display: block; margin: 20px auto; } .radioplus-apps #android { background: url(../android-icon.png) no-repeat; background-size: 159px 55px; width: 159px; height: 55px; } .radioplus-apps #ios { background: url(../ios-icon.png); background-size: 159px 47px; width: 159px; height: 47px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .radioplus-apps #android { background-image: url(../android-icon@2x.png); } .radioplus-apps #ios { background-image: url(../ios-icon@2x.png); } } body.fullscreen .usabilla_live_button_container { display: none; } #widget-vrt-cookiebalk2_videoID { display: none; } #widget-vrt-cookiebalk2_videoRadioPlus img { display: block !important; } /*! * smartbanner.js v1.9.0 * Copyright © 2017 Ain Tohvri, contributors. Licensed under GPL-3.0. */ .smartbanner { position: absolute; top: 0; left: 0; overflow-x: hidden; width: 100%; height: 84px; background: #f3f3f3; font-family: Helvetica, sans, sans-serif; } .smartbanner__exit { position: absolute; top: calc(50% - 6px); left: 9px; display: block; margin: 0; width: 12px; height: 12px; border: 0; text-align: center; color: black; } .smartbanner__exit::after, .smartbanner__exit::before { position: absolute; width: 1px; height: 12px; background: #767676; content: ' '; } .smartbanner__exit::before { transform: rotate(45deg); } .smartbanner__exit::after { transform: rotate(-45deg); } .smartbanner__icon { position: absolute; top: 10px; left: 30px; width: 64px; height: 64px; border-radius: 15px; background-size: 64px 64px; } .smartbanner__info { position: absolute; top: 10px; left: 104px; display: flex; overflow-y: hidden; width: 60%; height: 64px; align-items: center; color: black; } .smartbanner__info__title { font-size: 14px; } .smartbanner__info__author, .smartbanner__info__price { font-size: 12px; } .smartbanner__button { position: absolute; top: 32px; right: 10px; z-index: 1; display: block; padding: 0 10px; min-width: 10%; border-radius: 5px; background: #f3f3f3; color: #1474fc; font-size: 18px; text-align: center; text-decoration: none; } .smartbanner__button__label { text-align: center; } .smartbanner.smartbanner--android { background: #3d3d3d url("data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7"); box-shadow: inset 0 4px 0 #88b131; } .smartbanner.smartbanner--android .smartbanner__exit { left: 6px; margin-right: 7px; width: 17px; height: 17px; border-radius: 14px; background: #1c1e21; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 1px rgba(255, 255, 255, 0.3); color: #b1b1b3; font-family: 'ArialRoundedMTBold', Arial; font-size: 20px; -webkit-font-smoothing: subpixel-antialiased; line-height: 17px; text-shadow: 0 1px 1px #000; } .smartbanner.smartbanner--android .smartbanner__exit::after, .smartbanner.smartbanner--android .smartbanner__exit::before { top: 3px; left: 8px; width: 2px; height: 11px; background: #b1b1b3; } .smartbanner.smartbanner--android .smartbanner__exit:active, .smartbanner.smartbanner--android .smartbanner__exit:hover { color: #eee; } .smartbanner.smartbanner--android .smartbanner__icon { background-color: transparent; box-shadow: none; } .smartbanner.smartbanner--android .smartbanner__info { color: #ccc; text-shadow: 0 1px 2px #000; } .smartbanner.smartbanner--android .smartbanner__info__title { color: #fff; font-weight: bold; } .smartbanner.smartbanner--android .smartbanner__button { top: 30px; right: 20px; padding: 0; min-width: 12%; border-radius: 0; background: none; box-shadow: 0 0 0 1px #333, 0 0 0 2px #dddcdc; color: #d1d1d1; font-size: 14px; font-weight: bold; } .smartbanner.smartbanner--android .smartbanner__button:active, .smartbanner.smartbanner--android .smartbanner__button:hover { background: none; } .smartbanner.smartbanner--android .smartbanner__button__label { display: block; padding: 0 10px; background: #42b6c9; background: linear-gradient(to bottom, #42b6c9, #39a9bb); box-shadow: none; line-height: 24px; text-align: center; text-shadow: none; text-transform: none; } .smartbanner.smartbanner--android .smartbanner__button__label:active, .smartbanner.smartbanner--android .smartbanner__button__label:hover { background: #2ac7e1; } /*# sourceMappingURL=3.03cfde9783fc73d8a434.css.map*/