* { font-family:Helvetica,Tahoma,Arial,sans-serif; } .play{ width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid rgb(0, 0, 0); display: inline-block; position: relative; top: 7px; left: 30px; } .stop { width: 25px; height: 25px; border-radius: 50%; position: absolute; top: 9px; left: 25px; } .stop::before { position: absolute; background: rgb(0, 0, 0); content: ""; top: 2.4px; left: 2.4px; width: 22px; height: 22px; } .mute, .unmute{ width: 10px; height: 10px; background: #000; position: relative; font-size: 20px; top: 6px; left: 8px; } .unmute{ left:12px; } .mute:before{ content: ''; position: absolute; width: 2px; height: 2px; border-style: double; border-color: #000; border-width: 0.500em 0.500em 0 0; -webkit-border-radius: 0 3.125em 0 0; -moz-border-radius: 0 3.125em 0 0; border-radius: 0 3.125em 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); left: 16px; top: -0.1em; } .mute:after, .unmute:after{ content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #000 transparent transparent; border-width: 10px 10px 10px 10px; left: -6px; margin-top: -5px; } .pointer{ cursor: pointer; } .volumechanger { display: none; position: absolute; width: 64px; background-color: #ffa204; height: 23px; left: -64px; border-radius: 5px 0 0 5px; z-index: 2; } #btn-mute:hover > .volumechanger{ display: block; } #volume-slider { -webkit-appearance: none; border-radius: 5px; box-shadow: inset 0 0 5px #DFDFDF; background: #BDBDBD; height: 10px; vertical-align: middle; width: 60px; display: inline-block; margin-top: 7px; } #volume-slider::-moz-range-track { -moz-appearance: none; border-radius: 5px; box-shadow: inset 0 0 5px #DFDFDF; background: #BDBDBD; height: 10px; border:0; } #volume-slider::-webkit-slider-thumb { -webkit-appearance: none !important; border-radius: 20px; background: #DFDFDF; box-shadow:inset 0 0 10px rgba(000,000,000,0.5); border: 1px solid #BDBDBD; height: 20px; width: 20px; } #volume-slider::-moz-range-thumb { -moz-appearance: none; border-radius: 20px; background: #DFDFDF; box-shadow:inset 0 0 10px rgba(000,000,000,0.5); border: 1px solid #BDBDBD; height: 20px; width: 20px; } .volumeseeker{ position: absolute; top: 5px; left: 4px; right: 4px; bottom: 5px; border-radius: 5px; background: #DEDEDE; background: -moz-linear-gradient(top, #DEDEDE 0%, #F2F2F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(100%,#f2f2f2)); background: -webkit-linear-gradient(top, #dedede 0%,#f2f2f2 100%); background: -o-linear-gradient(top, #dedede 0%,#f2f2f2 100%); background: -ms-linear-gradient(top, #dedede 0%,#f2f2f2 100%); background: linear-gradient(to bottom, #DEDEDE 0%,#F2F2F2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#dedede", endColorstr="#f2f2f2",GradientType=0 ); box-shadow: inset 0 0 5px #A4A4A4; } .volumeseeker .seek{ background: #ff8914; /* Old browsers */ background: -moz-linear-gradient(top, #ff8914 0%, #ff7200 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8914), color-stop(100%,#ff7200)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff8914 0%,#ff7200 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff8914 0%,#ff7200 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff8914 0%,#ff7200 100%); /* IE10+ */ background: linear-gradient(to bottom, #ff8914 0%,#ff7200 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8914', endColorstr='#ff7200',GradientType=0 ); /* IE6-9 */ height: 100%; border-radius: 5px; } @-webkit-keyframes ajax-loader-rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes ajax-loader-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ajax-loader-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ajax-loader{ width: 25px; height: 25px; border: 4px solid rgb(0, 0, 0); border-right-color: transparent; border-radius: 50%; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -ms-animation: spin 1s linear infinite; -o-animation: spin 1s linear infinite; animation: spin 1s linear infinite; left: 22px; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } 50% { -moz-transform: rotate(180deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } 50% { -ms-transform: rotate(180deg); } to { -ms-transform: rotate(360deg); } } @-o-keyframes spin { from { -o-transform: rotate(0deg); } 50% { -o-transform: rotate(180deg); } to { -o-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } 50% { transform: rotate(180deg); } to { transform: rotate(360deg); } } /* TYPE 1 : Normal widget */ #media-audio-player.type-1{ display: inline-block; width: auto; background-color: rgba(32, 32, 32, 0.72); color: white; padding: 3px 0 3px 0; border-radius: 10; box-shadow: 1px 1px 10px black; margin: 10px; } /* TYPE 2 : Bottom page stip */ #media-audio-player{ display: inline-block; width: 100%; background-color: rgba(32, 32, 32, 0.72); color: white; padding: 3px 0 3px 0; box-shadow: 1px 1px 10px black; position: fixed; bottom: 0; height: 90px; } /* Popout player */ #media-audio-player.type-3{ width: 100%; height: 100%; background-color: rgba(32, 32, 32, 1); color: white; } #media-audio-player #inner.type-1{ min-width: 500px; color: white; } #media-audio-player #inner{ min-width: 400px; width: 80%; margin: 0 auto; } #media-audio-player #inner.type-3{ display: inline-block; min-width: 400px; width: 600px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -300px; } #media-audio-player #inner h1,#media-audio-player #inner h3, #media-audio-player #inner h2, #media-audio-player #inner h4, #media-audio-player #inner h5{ margin:0; padding:0; display:inline; margin-left: 80px; } .regular_text{ text-decoration: initial; cursor: pointer; color:white; } h2 .radio_title{ color: #ffb330 !important; } #inner .logo{ height: 76px; width: 76px; float: left; } #media-controls{ display: inline-block; } #current-song { width: auto; margin-left: 80px; position: relative; top: -5px; height: 40px; display: inline-block !important; max-width: 500px; } #current-song a { color: white; } #listeners{ position: relative; color: #FFB330; left: 22px; } .hexagon { position: relative; width: 76px; height: 43.88px; background-color: #ffb330; margin: 21.94px 0; display: inline-block; float: right; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 38px solid transparent; border-right: 38px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 21.94px solid #ffb330; } .hexagon:after { top: 100%; width: 0; border-top: 21.94px solid #ffb330; left:0px; } /**/ .hexagon-small { position: relative; width: 40px; height: 23.09px; background-color: #ffb330; margin: 11.55px 0; display: inline-block; float: right; margin-right: 5px; bottom: 9px; } .hexagon-small:before, .hexagon-small:after { content: ""; position: absolute; width: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; } .hexagon-small:before { bottom: 100%; border-bottom: 11.55px solid #ffb330; } .hexagon-small:after { top: 100%; width: 0; border-top: 11.55px solid #ffb330; left:0; } .hexagon:hover, .hexagon-small:hover{ background-color: #ffa204; } .hexagon:hover:before{ border-bottom: 21.94px solid #ffa204; } .hexagon:hover:after{ border-top: 21.94px solid #ffa204; } .hexagon-small:hover:before{ border-bottom: 11.55px solid #ffa204; } .hexagon-small:hover:after{ border-top: 11.55px solid #ffa204; } .icon-screens { position: relative; width: 16px; height: 16px; top: 3px; left: 12px; } .icon-screens-rectangle-1 { background-color: #000; border: #000 1px solid; width: 11px; height: 7px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; top: 2px; right: 0; } .icon-screens-rectangle-2 { background-color: #fff; border: #000 1px solid; width: 11px; height: 7px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; position: absolute; bottom: 2px; left: 0; } .flipper{ position: absolute; width: 76px; height: 76px; z-index: 1; } .coverart{ width: 76px; height: 76px; } .imageflipper{ width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transition-duration: 400ms; transition-duration: 400ms; } .flipper:hover .imageflipper{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .face.back { display: block; -webkit-transform: rotateY( 180deg ); transform: rotateY(180deg); box-sizing: border-box; color: white; text-align: center; background-color: #aaa; } .listeners-icon{ z-index: 1; overflow: hidden; padding: 0px; position: relative; height: 20px; display: inline-block; top: -2px; } .listeners-icon::before, .listeners-icon::after, .listeners-icon .licon::before, .listeners-icon .licon::after { content: ""; position: absolute; top: 50%; } .licon{ display: block; border: 0px none; color: #FFB330; height: 20px; width: 100px; } .licon::before, .licon::after { margin: -8px 0px 0px; background: none repeat scroll 0% 0% #FFB330; } .licon::after { left: 8px; width: 6px; height: 10px; margin-top: -6px; border-radius: 5px / 5px 5px 10px 10px; } .licon::before { left: 3px; width: 16px; height: 5px; margin-top: 2px; border-radius: 5px 5px 0px 0px; } .djazz{ opacity: 0.3; top: -7px; position: relative; }