<style>
#pun-title {
    background: #000 url(http://se.uploads.ru/QMND6.jpg) no-repeat center top;
    height: 200px;
}
#pun-title h1 {
    display:none;
}
#pun-navlinks {
    top: 160px;
}
#pun-navlinks + div {
    margin-top: 200px;
}
</style>

<style type="text/css">
input[type=range]#zvyk {-webkit-appearance: none;margin: 4px 0;}
input[type=range]#zvyk:focus {outline: none;}
input[type=range]#zvyk::-webkit-slider-runnable-track {height: 4px;cursor: pointer;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;background: rgba(47, 122, 205, 0.57);border-radius: 0.4px;border: 1px solid #006323;}
input[type=range]#zvyk::-webkit-slider-thumb {box-shadow: 2px 2px 9.7px rgba(232, 0, 237, 0.57), 0px 0px 2px rgba(250, 8, 255, 0.57);border: 2px solid #5c99c8;height: 12px;width: 12px;border-radius: 28px;background: #748a9d;cursor: pointer;-webkit-appearance: none;margin-top: -5px;}
input[type=range]#zvyk:focus::-webkit-slider-runnable-track {background: rgba(178, 206, 237, 0.57);}
input[type=range]#zvyk::-moz-range-track {height: 4px;cursor: pointer;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;background: rgba(47, 122, 205, 0.57);border-radius: 0.4px;border: 1px solid #006323;}
input[type=range]#zvyk::-moz-range-thumb {box-shadow: 2px 2px 9.7px rgba(232, 0, 237, 0.57), 0px 0px 2px rgba(250, 8, 255, 0.57);border: 2px solid #5c99c8;height: 12px;width: 12px;border-radius: 28px;background: #748a9d;cursor: pointer;}
input[type=range]#zvyk::-ms-track {height: 4px;cursor: pointer;background: transparent;border-color: transparent;color: transparent;}
input[type=range]#zvyk::-ms-fill-lower {background: rgba(17, 43, 72, 0.57);border: 1px solid #006323;border-radius: 0.8px;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;}
input[type=range]#zvyk::-ms-fill-upper {background: rgba(47, 122, 205, 0.57);border: 1px solid #006323;border-radius: 0.8px;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;}
input[type=range]#zvyk::-ms-thumb {box-shadow: 2px 2px 9.7px rgba(232, 0, 237, 0.57), 0px 0px 2px rgba(250, 8, 255, 0.57);border: 2px solid #5c99c8;height: 12px;width: 12px;border-radius: 28px;background: #748a9d;cursor: pointer;height: 4px;}
input[type=range]#zvyk:focus::-ms-fill-lower {background: rgba(47, 122, 205, 0.57);}
input[type=range]#zvyk:focus::-ms-fill-upper {background: rgba(178, 206, 237, 0.57);}
#radio:hover{opacity: 1;}
#zvyk,#tracks,#stop {position:relative;}
#tracks{display:none;text-align: left;}
#tracks li{cursor: pointer;}
#tracks li.active {background: #bddeee;}
#zvyk{margin-top: 4px;}
#pred, #sled {border: 0 none;cursor: pointer;height: 10px;position:relative;width: 21px;vertical-align: middle;
}
#stop {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -22px;
border: 0 none;cursor: pointer;display: inline-block;height: 31px;left: 13px;margin: 3px;width: 31px;
}
#pred {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 0;margin-right: -5px;}
#sled {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -11px;margin-left: 14px;}
#trk-list {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -85px;
border: 0 none;cursor: pointer;position:relative;height: 22px;width: 33px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var radio=new Audio(),i=0,radiolist=[
{n:'WGFM-Главный канал',u:'http://wargaming.fm/1?source=player',c:'http://samara11x11.ucoz.ru/TRANS-radio/WarGaming_FM.png'},
{n:'WGFM-второй канал',u:'http://wargaming.fm/2?source=player',c:'https://ru-wotp.wgcdn.co/dcont/fb/image/wgfm-logo.png'},
{n:'WGFM-Trance',u:'http://wargaming.fm/3?source=player',c:'http://samara11x11.ucoz.ru/TRANS-radio/WarGaming_FM.png'},
{n:'WGFM-Rock',u:'http://wargaming.fm/4?source=player',c:'https://ru-wotp.wgcdn.co/dcont/fb/image/wgfm-logo.png'}
];
var x='<ul>';for(i=0;i<radiolist.length;i++){var nz=radiolist[i].n,url=radiolist[i].u,cv=radiolist[i].c;x+='<li data-audio-url="'+url+'" data-cover-src="'+cv+'">'+(i+1)+'. '+nz+'</li>';}
x+='</ul>';$('#tracks').append(x);if(!localStorage['vl']){localStorage['vl']=0.5;}
radio.volume=localStorage['vl'];$('#zvyk').attr('value',localStorage['vl']*10);$('#zvyk').on('change keyup input',function(){localStorage['vl']=parseFloat(this.value/10)
radio.volume=localStorage['vl'];});function active(){$('#tracks li').each(function(i){var a=$(this).data('audio-url'),b=radio.src;if(a.indexOf(b)!=-1){$(this).addClass('active').siblings('li').removeClass('active');!localStorage['cN']?localStorage['at']=radiolist[0].u:localStorage['at']=radiolist[i].u}});}
radio.src=localStorage['at'];if(!localStorage['cN']){localStorage['cN']='stop';};function radioActive(){localStorage['cN']!='stop'?radio.play():radio.pause()};radioActive();function cover(){var c=$('#radio li.active').data('cover-src');if(c==='undefined'||c==''){$('#layer').css({'background':'url(https://forumstatic.ru/files/0012/72/15/53582.png)','background-size':'cover','-webkit-filter':'blur(1px)','filter':'blur(1px)'});}else{$('#layer').css({'background':'url('+c+')','background-size':'cover','-webkit-filter':'blur(1px)','filter':'blur(1px)'});}}
cover();$('#stop').on('click',function(){if(radio.paused){radio.play();localStorage['cN']='play';active();cover();$(this).css({'background-position':'0 -53px'});}else{radio.pause();localStorage['cN']='stop';$(this).css({'background-position':'0 -22px'});$('#zvyk').attr('value',localStorage['vl']*10);$('.b1, .b2, .b3').css('height','0');}});$('#sled').on('click',function(){i=$('#tracks').find('li.active').index();i=++i<radiolist.length?i:0;radio.src=radiolist[i].u;radioActive();active();cover();});$('#pred').on('click',function(){i=$('#tracks').find('li.active').index();i=--i>-1?i:radiolist.length-1;radio.src=radiolist[i].u;radioActive();active();cover();});$('#tracks li').on('click',function(){radio.src=$(this).data('audio-url');radioActive();active();$('#stop').trigger('click');});$('#trk-list').live('click',function(){$('#tracks').toggle('slow');});});
</script>
 
<div id="radio" style="position:fixed; right: 22px; top: 70px; z-index:20000;overflow-x:visible;width:171px;opacity: 0.9;text-align: center;">
<div id="layer" style="position:absolute;height:100px;top:-2px;opacity: 0.6;width:170px;"></div>
<button id="pred" title="Предыдущая станция"> </button><button id="stop" title="Вкл/Выкл"></button>
<button id="sled" title="Следующая станция"></button><br>
<input id="zvyk" min="0" max="10" value="" type="range" step="1" title="Громкость"><br>
<button id="trk-list" title="Показать список станций"></button>
<div id="tracks"></div>
</div>

<style>
.icon[data-new-topics]:before {
  background:url(http://sd.uploads.ru/zF2Gj.png) center center no-repeat!important;
  background-size:45px!important;margin:-12px!important;padding:12px!important;
}
</style>
<!--Установка фона -->
<style>
#pun {
background: url(http://s1.uploads.ru/tUnFm.png) repeat-y;
padding: 0;
}
 
#pun-navlinks + div {
    margin-top: 4px;
}
 
.punbb {
background: url(http://s2.uploads.ru/cKHhJ.png) 50% 0% no-repeat, url(http://s2.uploads.ru/UoC8l.jpg) 50% 100% no-repeat;
padding: 0 10px 10px 10px;
max-width: 1180px;
margin-top: 200px;
}
 
.punbb .section .container, 
.punbb .modmenu .container,
 #pun-ulinks .container,
.punbb .post-body, 
.punbb .post-links, 
.punbb td.tc2, 
.punbb td.tc3, 
.punbb .formal fieldset .post-box, 
#viewprofile li strong, 
#viewprofile li div, 
#setmods dd, 
.punbb .info-box, 
.punbb #pun-main .info-box .legend,
.punbb .main .container, 
.punbb .post .container, 
.punbb .post h3, 
.punbb-admin #pun-admain .adcontainer {
background: transparent;
}
 
#pun-ulinks li, 
#pun-announcement h2 span, 
li#onlinelist, 
#pun-help .formal .info-box h3.legend span,
.punbb .main .container, 
.punbb .post .container, 
.punbb .post h3, 
.punbb-admin #pun-admain .adcontainer,
.punbb td, 
.punbb fieldset, 
#viewprofile ul, 
#profilenav ul, 
.punbb .post .post-body,
.punbb .container, 
.punbb .post-body, .post h3, 
#pun-title,
.punbb .post h3 span, 
.post-links ul, 
.post-links, .usertable table,
#pun-ulinks li a, 
#pun-announcement h2, 
li#onlinelist div, 
#pun-help .formal .info-box h3.legend {
border-color: rgb(74, 19, 19);
}
 
#pun-ulinks .container {
border-bottom: 1px solid rgb(74, 19, 19);
}
</style>

<!--Установка фона -->
<style>
#pun {
background: url(http://s1.uploads.ru/dUlcN.png) repeat-y;
padding: 0;
}
 
#pun-navlinks + div {
    margin-top: 4px;
}
 
.punbb {
background: url(http://s3.uploads.ru/4DEFW.png) 50% 0% no-repeat, url(http://s9.uploads.ru/zWtHg.png) 50% 100% no-repeat;
padding: 0 10px 10px 10px;
max-width: 1180px;
margin-top: 200px;
}
 
.punbb .section .container, 
.punbb .modmenu .container,
 #pun-ulinks .container,
.punbb .post-body, 
.punbb .post-links, 
.punbb td.tc2, 
.punbb td.tc3, 
.punbb .formal fieldset .post-box, 
#viewprofile li strong, 
#viewprofile li div, 
#setmods dd, 
.punbb .info-box, 
.punbb #pun-main .info-box .legend,
.punbb .main .container, 
.punbb .post .container, 
.punbb .post h3, 
.punbb-admin #pun-admain .adcontainer {
background: transparent;
}
 
#pun-ulinks li, 
#pun-announcement h2 span, 
li#onlinelist, 
#pun-help .formal .info-box h3.legend span,
.punbb .main .container, 
.punbb .post .container, 
.punbb .post h3, 
.punbb-admin #pun-admain .adcontainer,
.punbb td, 
.punbb fieldset, 
#viewprofile ul, 
#profilenav ul, 
.punbb .post .post-body,
.punbb .container, 
.punbb .post-body, .post h3, 
#pun-title,
.punbb .post h3 span, 
.post-links ul, 
.post-links, .usertable table,
#pun-ulinks li a, 
#pun-announcement h2, 
li#onlinelist div, 
#pun-help .formal .info-box h3.legend {
border-color: rgb(74, 19, 19);
}
 
#pun-ulinks .container {
border-bottom: 1px solid rgb(74, 19, 19);
}
</style>