/*////////////////////// panel containers ///////////////////*/ #on-air-now,#clips,#programmes,#collections,#end-of-stream{float:left;} .pages{float:left;} .page #on-air-now{margin-left:35px; margin-right:35px;} .page{border-bottom:1px solid #efefef;} #featured{margin-left:329px;margin-top:8px;} #featured #clips,#featured #programmes{margin:0;} #service-container{clear:left;overflow:hidden;position:relative;width:1020px;} .page{float:left;} /*///////////////////////// generic panel ////////////////*/ .panel {float: left; margin:0 0 16px 0; width:195px;height:30em;} .panel-inner {padding:0 9px;height:33em;} .panel-footer {margin:0 9px; clear: both;} .panel {width:193px;height:41em;background:url("../img/backgrounds/bgm_552_193.png") no-repeat 0 0;padding-top:3px;} .panel:hover, .panel:focus{width:193px;background:url("../img/backgrounds/bgm_552_193_hover.png") no-repeat 0 0;} .obituary .panel{height: 10em !important;} .obituary .panel-inner {height: 9em !important;} #on-air-now .panel .off-air .time {color: #5B9022; line-height: 1.0em; } #on-air-now .panel .off-air .countdown {line-height: 1.0em; margin-bottom: -1px; color: #535353; font-size: 0.85em; font-weight: bold;text-transform: uppercase; display: block;} #radio-0-container .panel-inner {padding:0 9px;height:28em;} /*///////////////////////// generic panel content ////////////////*/ .panel .service{ display:block;height:1.4em;background:#000;font-size:.85em;font-weight:bold;color:#fff;text-transform:uppercase;margin:0 0 3px 0;line-height:1.2em;padding:1px 3px 0px 3px; } .panel .proportion{background-color:#dcdcdc; margin-bottom:4px;height:4px; display:block;} .panel .proportion span{background:none repeat scroll 0 0 #bb1100;display:block;height:4px;} .panel .type-info{height:1.6em;text-transform:uppercase;font-weight:bold;} #service-container #on-air-now .panel .type-info {height:1.2em;line-height:1em} #service-container #on-air-now .panel .type-info{background-color:#bb1100;} #service-container #on-air-now .panel .offair .type-info{background-color:#5b8f21;margin-bottom:15px;} #service-container #on-air-now .off-air .type-info {padding-top:0;} .panel .type{font-size:.85em;font-weight:bold;text-transform:uppercase;margin:0 0 0 0;} .panel .duration{font-size:.85em;font-weight:bold;color:#6e6e6e;} /*.panel .off-air img:hover, .panel .off-air img:focus{filter:alpha(opacity=100);opacity:1;} */ .panel .short-description{clear:both;margin:6px 0;} .panel .sister-station{font-size:.85em;font-weight:bold;line-height:1.2em;margin:0 0 3px 8px;text-transform:uppercase;} .panel .brand , .panel .cta{font-size:1.5em;font-weight:bold;height:3.5em;line-height:1.1em;margin:8px 0 0 0; clear:both;} .panel .service-links{font-size:.85em;font-weight:bold;color:#000;text-transform:uppercase;line-height:1.1em;padding-bottom:0.2em; padding-top:4px;} .panel .console-link{display:block;position:relative;} .panel a:hover img, .panel a:focus img {opacity:0.8;} .panel .brand a {display: block; height: 3.4em; overflow: hidden;} .panel .cta{margin-top:40px;} #on-air-now h4 {height:1.8em;color: #3B3B3B; display: block; font-size: 0.85em; font-weight: bold; text-transform: uppercase; margin-bottom:-1.7em;} #on-air-now .short-description .no-h4 {border-top: 1px solid #999999;margin-top:1.6em;padding-top:2px;} #on-air-now .panel .time{font-size:.85em;font-weight:bold;line-height:1.2em;text-transform:uppercase;color:#535353;font-weight:bold;} #on-air-now .panel.offair .time{font-size:.85em;font-weight:bold;line-height:1.3em;text-transform:uppercase;color:#535353;font-weight:bold;display:block;padding-left:4px;} #on-air-now .listen-live{font-size:.85em;font-weight:bold;line-height:1.2em;text-transform:uppercase;color:#bb1100;font-weight:bold;} #on-air-now h3.next-on{color: #3B3B3B; display: inline; font-size: 0.85em; font-weight: bold; text-transform: uppercase;} .no-items{font-size:1.2em;font-weight:bold;margin:10em 0 10em 23em;} .broadcast-date {font-size: 0.9em; font-weight: bold;} .service-search {font-size: 0.9em; font-weight: bold; text-transform: uppercase;} #service-container #on-air-now .panel .time{font-size:.85em;color:#ffffff;} #service-container #on-air-now .panel .offair .time{font-size:.85em; } #service-container #on-air-now .listen-live{font-size:.85em;color:#ffffff;} /*/////////////////// radio-0 on-air now panels ////////////*/ #radio-0-container .panel .panel-inner .next-on{display:block;font-size:.85em;font-weight:bold;line-height:0.8em;text-transform:uppercase;color:#5b8f21;font-weight:bold;padding-left:4px;} #radio-0-container .panel .panel-inner .next-info {margin-left: 2px;border-left: 1px dotted black;} #radio-0-container #on-air-now .panel .console-link span.play-audio {background:url("../img/icons/play_32_audio.png") no-repeat 0 0 #f5f5f5; text-indent:-4500px; position:absolute;top:67px;left:0;height:26px; padding:6px 6px 0 30px;font-weight:bold;font-size:.9em;text-transform:uppercase; } #fav-playlists .console-link:focus span.play-audio, #fav-playlists .console-link:hover span.play-audio, {background:url("../img/icons/play_32_audio.png") no-repeat 0 0 #fff;display:block; color:#000; text-indent:0;} #radio-0-container #on-air-now .panel:hover .console-link span.play-audio, #radio-0-container #on-air-now .panel:focus .console-link span.play-audio {color:#fff;background:url("../img/icons/play_32_audio.png") no-repeat 0 0 #fff; text-indent:0; color: #000;} #radio-0-container #on-air-now .panel .console-link:hover span.play-audio, #radio-0-container #on-air-now .panel .console-link:focus span.play-audio {color:#fff;background:url("../img/icons/play_32_audio_hover.png") no-repeat 0 0 #000; text-indent:0;} #radio-0-container #on-air-now .panel:first-child, #radio-0-container #on-air-now .panel:nth-child(5n+6){clear:left;width:196px;height:30em;background:url("../img/backgrounds/bgm_404_196.png") no-repeat 0 0} #radio-0-container #on-air-now .panel {background:url("../img/backgrounds/bgm_404_195.png") no-repeat 0 0; height:30em;width:195px;} #radio-0-container #on-air-now .panel:hover, #radio-0-container #on-air-now .panel:focus{background:url("../img/backgrounds/bgm_404_195_hover.png") no-repeat 0 0} #radio-0-container #on-air-now .panel .off-air {background:url("../img/backgrounds/bgm_404_195.png") no-repeat 0 0} #radio-0-container #on-air-now .panel .live-info { display: block; background:url("../img/logos/logos_onairnow.png") top left no-repeat; height:1.9em; padding-left: 30px;} #radio-0-container #on-air-now .panel a.live-info:hover { text-decoration: none; } #radio-0-container #on-air-now .panel .listen-live { border-left: 1px dotted #000; padding: 4px; } #radio-0-container #on-air-now .panel .off-air .listen-live { display: block; padding: 0 0 0 4px;} /* place the icons for the stations we have */ #radio-0-container #on-air-now .panel.bbc_1xtra .live-info {background-position:0 -100px; padding-left: 42px;} #radio-0-container #on-air-now .panel.bbc_radio_two .live-info {background-position:0 -200px;} #radio-0-container #on-air-now .panel.bbc_radio_three .live-info {background-position:0 -300px;} #radio-0-container #on-air-now .panel.bbc_radio_four .live-info {background-position:0 -400px;} #radio-0-container #on-air-now .panel.bbc_radio_four_extra .live-info {background-position:0 -500px; padding-left: 42px;} #radio-0-container #on-air-now .panel.bbc_radio_five_live .live-info {background-position:0 -600px;padding-left: 42px;} #radio-0-container #on-air-now .panel.bbc_radio_five_live_sports_extra .live-info {background-position:0 -700px;padding-left: 42px} #radio-0-container #on-air-now .panel.bbc_6music .live-info {background-position:0 -800px;padding-left: 42px;} #radio-0-container #on-air-now .panel.bbc_asian_network .live-info {background-position:0 -900px;padding-left: 51px;} #radio-0-container #on-air-now .panel.bbc_world_service .live-info {background-position:0 -1000px;padding-left: 42px;} /* remove logo for local and national stations */ #radio-0-container #on-air-now .panel .live-info.regional, #radio-0-container #on-air-now .panel .live-info.local {background: none; padding-left: 0;} #radio-0-container #on-air-now .panel .regional .listen-live, #radio-0-container #on-air-now .panel .local .listen-live { border: none; } /* special rules for the only national stations with a logo */ #radio-0-container #on-air-now .panel.bbc_radio_scotland .live-info.regional { background:url("../img/logos/logos_onairnow.png") no-repeat; background-position:0 -1100px; padding-left: 32px;} #radio-0-container #on-air-now .panel.bbc_radio_ulster .live-info.regional { background:url("../img/logos/logos_onairnow.png") no-repeat; background-position:0 -1200px; padding-left: 32px;} #radio-0-container #on-air-now .panel.bbc_radio_ulster .listen-live, #radio-0-container #on-air-now .panel.bbc_radio_scotland .listen-live{ border-left: 1px dotted #000; padding: 4px; } #radio-0-container .panel .service a { color: #fff; display:block; background: #000; height:1.4em;line-height:1.2em;padding:1px 0px 0px 3px;} #radio-0-container .panel .service a:hover, #radio-0-container #on-air-now .panel .service a:focus { background: #444; text-decoration: none;} #radio-0-container .panel .service { background: none; padding: 0; margin-bottom: 4px; } /*/////////////////////////service on-air panel ////////////////////////*/ /*#on-air-now{top:0;left:16px;position:absolute;z-index:1000;margin:0;}*/ #radio-0-container #on-air-now .whats-on-message p .highlight-artist{font-weight:bold;} #service-container #on-air-now .panel .console-link span.play-audio{background:url("../img/icons/play_32_audio.png")#fff 0 0 no-repeat;position:absolute;top:130px;left:0;height:26px;padding:6px 6px 0 30px;font-weight:bold;font-size:.9em;text-transform:uppercase;} #service-container #on-air-now .panel .console-link:hover span.play-audio, #service-container #on-air-now .panel .console-link:focus span.play-audio, #service-container #on-air-now .panel:hover .console-link span.play-audio, #service-container #on-air-now .panel:focus .console-link span.play-audio {background: url("../img/icons/play_32_audio_hover.png") no-repeat scroll 0 0 #000;color:#fff;} #service-container .panel .heading{display:block;height:1.4em;background:#000;font-size:.85em;font-weight:bold;color:#fff;text-transform:uppercase;margin:0;line-height:1.2em;padding:1px 3px 0px 3px;position:relative; float:both;} #service-container #on-air-now .panel{width:320px;height:568px;background:url("../img/backgrounds/bgm_568_320.png") repeat-x 0 0;} #service-container #on-air-now .panel .panel-inner {margin:0 8px; padding: 0 8px; height:35em;} #service-container #on-air-now .panel .panel-inner.off-air{padding-top:0;} #service-container #on-air-now .panel .panel-footer {height: 100%; padding: 0 8px; margin:0 8px; border-top-width:0;} #service-container #on-air-now .panel .panel-footer .schedule{border-bottom:1px solid #000; display:block; font-weight:bold;padding-bottom: 6px; text-transform: uppercase;} #service-container #on-air-now .panel .proportion{margin:3px 0 0 0;} #service-container #on-air-now .panel .listen-live,#service-container #on-air-now .panel .next-on{margin:8px 0 8px 4px;} #service-container #on-air-now .panel .time{margin:8px 0 8px 4px;} #service-container #on-air-now .panel .brand{font-size:1.5em;font-weight:bold;line-height:1.1em;margin:0 0 2px 0;padding:17px 0 0 0;} #service-container #on-air-now .panel .offair .brand{margin:0 0 3px 0;padding:8px 0 0 0;} #service-container #on-air-now .panel .short-description{margin:0 0} #service-container #on-air-now .panel .real-time-message{height:4em;margin:0 0} #service-container #on-air-now .panel .next-on h3 {display:inline; text-transform:uppercase; font-size: 0.85em;} .panel .panel-inner .listen-live{font-size:.85em;font-weight:bold;line-height:1.2em;text-transform:uppercase;color:#ff6d01;font-weight:bold;} #service-container .panel .panel-inner .next-on{font-size:.85em;font-weight:bold;line-height:1.2em;text-transform:uppercase;color:#ffffff;font-weight:bold;padding-left:4px;} #service-container #on-air-now .panel .next-on{margin:0 0;position:relative;} #service-container #on-air-now .panel .next-on .time{margin-left:4px;color:#6e6e6e} #service-container #on-air-now .panel .next-on .title{border-top: 1px solid #3B3B3B; display:block; color:#535353;font-size:1.2em;font-weight:bold;} #service-container #on-air-now .panel .title-series {font-size:1.3em;color:#6e6e6e;font-weight:bold;} #service-container #on-air-now .panel .title-episode {font-weight:bold; color:#000;} #service-container #on-air-now .whats-on-message h4 {height:3.4em;color: #3B3B3B; display: block; font-size: 0.85em; font-weight: bold; text-transform: uppercase;padding-top:2.5em;} #service-container #on-air-now .whats-on-message p { border-top: 1px solid #999999; } /*//////////////////////// clips and programmes panels ///////////////////////*/ #service-container .panel .title-series {font-size:1.2em;color:#6e6e6e;font-weight:bold; padding-bottom:8px;} #service-container .panel .title-episode {font-weight:bold; color:#000;} #service-container #promos .panel.first:focus{width:194px;background:url("../img/backgrounds/bgm_552_194_hover.png") no-repeat 0 0;} #service-container .panel .service{display:none} #service-container .clip .panel-inner, #service-container .programme .panel-inner {padding-top: 17px;} #service-container .panel .clip-title,#service-container .panel .brand{font-size:1.5em;font-weight:bold;height:3.5em;letter-spacing:-0.1px;line-height:1.1em;margin:0 0 3px 0;color:#535353;} #service-container .panel .clip-title {margin-top:1px;} #service-container .panel .panel-details { height:18.8em; margin:0 8px;} #service-container .panel #on-now-tags .panel-details { height:auto; margin:0 8px;} #service-container .panel .more-from{font-size:30px;font-weight:bold;text-align:center;padding:8px 0;float:right;margin:0 8px;} #service-container .clip .more-from {margin:16px 0 0 0;font-family:georgia;font-style:italic;font-size:.85em; clear: both;text-align:left;font-weight:normal;float:none;} #service-container .panel .more-from a{display:block;font-family:arial,sans-serif;font-style:normal;font-weight:bold;text-transform:uppercase;} #service-container .panel .more-from a:hover, #service-container .panel .more-from a:focus{text-decoration:none;color:#5c5c5c;} #service-container .clip .more-from a:hover, #service-container .clip .more-from a:focus {text-decoration:underline;} #service-container .panel .more-from span{font-size:11px;display:block;text-transform:uppercase;} #episodes .page-0, #clips .page-0{background:url("../img/backgrounds/bgm_552_194_hover.png") no-repeat 0 0;padding-left:1px;} /*//////////////////////////// clips and programmes console link /////////////////////*/ /*position media icon over image*/ #service-container .programme .console-link span,#service-container .clip .console-link span {top:67px; height:32px;left:0; position:absolute; width:32px;} /*specify video or audio icon, hover rules*/ .console-link span.play-audio{background:url("../img/icons/play_32_audio.png") no-repeat scroll 0 0 #f5f5f5;} .panel:hover .console-link span.play-audio, .panel:focus .console-link span.play-audio {background-color:#000; background-image: url("../img/icons/play_32_audio_hover.png"); color:#fff;} .panel .console-link span.play-video { background: url("../img/icons/play_32_video.png") no-repeat scroll 0 0 #f5f5f5; } .panel:hover .console-link span.play-video, .panel:focus .console-link span.play-video{background-color:#fff;} .panel .console-link:hover span.play-video, .panel .console-link:focus span.play-video {background: url("../img/icons/play_32_video_hover.png") no-repeat scroll 0 0 #000;} #radio-0-container #on-air-now .whats-on-message p { border-top: 1px solid #999999; margin-top: 1.6em; padding-top: 0.1em;} /*///////////////// end of stream ///////////////////////*/ #service-container #end-of-stream{width:190px;} #service-container #end-of-stream h3{margin-top:102px} #service-container #end-of-stream h3,#service-container #end-of-stream p{font-size:1.2em;font-weight:normal;color:#3b3b3b;margin-left:8px;} #service-container #end-of-stream .latest{font-size:1.85em;font-weight:bold;margin:16px 0 16px 8px;line-height:1.2em} #service-container #end-of-stream h4{font-size:1.2em;margin:32px 0 0 8px;} #service-container #end-of-stream .service-links{float:none;font-size:1.4em;font-weight:bold;text-transform:capitalize;margin:16px 0 0 8px;} /*///////////////// off-air ////////////////////////////////////*/ #service-container #on-air-now .off-air h2 {font-size:1.5em;margin:0 0 2.5em;} #service-container .off-air a.schedule {text-transform:uppercase;font-weight:bold;} /* Category, formats + tags */ #service-container .panel ul.tags { line-height: 15px; padding-bottom:16px; } #service-container .panel ul.tags li a { color: #6e6e6e; } #service-container .panel ul.tags li a:hover { color: #000; } #service-container .panel ul.tags { margin-top: 16px; font-size: 11px; display: block; } #service-container .panel ul.tags li.genre, #service-container .panel ul.tags li.format, #on-now-tags { font-weight: bold; } #service-container #on-air-now .panel ul.tags li.first, #service-container #clips .panel ul.tags li.first, #service-container #featured #programmes ul .panel ul.tags li.first, #service-container #programmes .panel ul.tags li.first { background:transparent url("../img/icons/tag.png") no-repeat top left; padding-left: 20px; padding-bottom: 2px; padding-top: 3px; } /* Webcam */ .panel-inner.webcam{position:relative;} .panel .webcam .type-info {width:80%;} .webcam .proportion{width:80%;} .webcamlink{height:23px;position:absolute;left:243px;top:0;} a.webcamlink:hover, a.webcamlink:focus {border-bottom:2px solid #000} #service-container #on-air-now .panel:hover .console-link span.play-audio, #service-container #on-air-now .panel:focus .console-link span.play-audio { background: url("../img/icons/play_32_audio_hover.png") no-repeat scroll 0 0 #000000; color: #FFFFFF; }