/*---------------------------------------- Name: components.css Features:Components Css Style. Developed by:Benny,Tony Date Created:2012.12.20 11:00 Last Updated:2012.12.20 Copyright:www.PodBean.com 2012 All rights reserved. ----------------------------------------*/ /*----------Reset Jquery Mobile Style-----------*/ .ui-body-c{ text-shadow:none;} /*----------Custom PodBean Style-----------*/ a{ text-decoration:none;} .black{ background:#000 !important;} .gray{ background:#494949 !important;} #top-header{ position:relative;} .header-bar{ position:relative; z-index:2; background-color:#000; border-bottom:1px solid #3d3d3d;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,1);-ms-box-shadow:0 1px 2px 0 rgba(0,0,0,1); -o-box-shadow:0 1px 2px 0 rgba(0,0,0,1);box-shadow:0 1px 2px 0 rgba(0,0,0,1);} .header-bar .go-back{ display:inline-block;border-right:1px solid #3d3d3d; padding:5px 15px; color:#fff;} .header-bar .go-back:before{ font-family:"icon"; font-size:1.5em;content: "\e00a";} .header-bar .go-back:hover:before{color:#668e10;} .header-bar .share{ float:right; padding:10px 0 0;} .header-bar .share a{ margin-right:10px;} #top-header.fixed-area{ width:100%; position:fixed; top:0;} #top-header:before{content:""; position:absolute; top:0; left:0; width:100%; height:2px; overflow:hidden; background-image: -webkit-gradient(radial, center from(rgba(255,255,255,.2)), to(rgba(255,255,255,0))); background-image: -webkit-radial-gradient(center, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -moz-radial-gradient(center, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -ms-radial-gradient(center, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: -o-radial-gradient(center, rgba(255,255,255,.2), rgba(255,255,255,0)); background-image: radial-gradient(center, rgba(255,255,255,.2), rgba(255,255,255,0));} #top-header.fixed-area:after{content:""; position:absolute; bottom:1px; left:0; width:100%; height:1px; overflow:hidden; background-image: -webkit-gradient(radial, center from(rgba(255,255,255,.4)), to(rgba(255,255,255,0) 60%)); background-image: -webkit-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); background-image: -moz-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); background-image: -ms-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); background-image: -o-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); background-image: radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%);} #top-header.header-shadow{ box-shadow:0 2.5px 2.5px 0 rgba(0,0,0,.4);} #main-content.fluid-area{ margin-top:190px;/*margin-top:175px;*/} .usr-panel{ padding:10px 10px 10px 120px; border-bottom:2px solid #333; background-image:-moz-radial-gradient(center top,cover,rgba(255,255,255,.2),rgba(0,0,0,.2) 75%); background-image:-webkit-radial-gradient(center top,cover,rgba(255,255,255,.2),rgba(0,0,0,.2) 75%); background-image:-o-radial-gradient(center top,cover,rgba(255,255,255,.2),rgba(0,0,0,.2) 75%); background-image:-ms-radial-gradient(center top,cover,rgba(255,255,255,.2),rgba(0,0,0,.2) 75%); background-image:radial-gradient(center top,cover,rgba(255,255,255,.2),rgba(0,0,0,.2) 75%);} .usr-panel .avatar{ width:100px;display:block; float:left; margin-left:-110px;padding-bottom:2px; position:relative;} .usr-panel .avatar:before{content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; overflow:hidden; background-image: -webkit-gradient(radial, center from(rgba(255,255,255,.4)), to(rgba(255,255,255,0) 60%)); /* Saf4+, Chrome */ background-image: -webkit-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); /* Chrome 10+, Saf5.1+ */ background-image: -moz-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); /* FF3.6 */ background-image: -ms-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); /* IE10 */ background-image: -o-radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); /* Opera 11.10+ */ background-image: radial-gradient(center, rgba(255,255,255,.4), rgba(255,255,255,0) 60%);} .usr-panel .info{ margin:0; padding:0; list-style:none;} .usr-panel .info dt{ font-size:1.125em; font-weight:bold; color:#fff; line-height:1.4; margin-bottom:10px;} .usr-panel .info dd{ margin:0 5px 0 0; display:inline-block;} .detail-panel .share > a, .header-bar .share > a, .usr-panel .info dd > a{ display:inline-block; padding:3px 10px 5px 5px;line-height:1;font-family:"icon"; color:#fff; border-radius:12px; border:1px solid #484848; background-color:#000;} .detail-panel .share > a:hover, .header-bar .share > a:hover, .usr-panel .info dd > a:hover, .usr-panel .info dd > a:active{ box-shadow:inset 0 5px 0 rgba(255,255,255,.1);background-color:#668e10;} .detail-panel .share > a:before, .header-bar .share > a:before, .usr-panel .info dd > a:before{ font-size:1em; margin-right:5px;padding:3px 3px 5px;line-height:1;border-right:1px solid #484848; top:0;} .detail-panel .share > a.facebook:before, .header-bar .share > a.facebook:before, .usr-panel .info dd .facebook:before{ content: "\e026"} .detail-panel .share > a.twitter:before, .header-bar .share > a.twitter:before, .usr-panel .info dd .twitter:before{content: "\e025"} .usr-panel.detail-panel{ border-bottom:0; background-color:#191919;} .usr-panel.detail-panel .info{ padding-bottom:5px;} .usr-panel.detail-panel .info dt{ font-size:0.9375em; margin-bottom:0; line-height:1.2;} .usr-panel.detail-panel .info dd.iconi-clock:before{ font-size:1.25em !important; position:absolute; left:0; top:2px;} .usr-panel.detail-panel .info dd.iconi-loop:before{font-size:1.25em !important;position:absolute; left:0; top:1px;} .usr-panel.detail-panel .info dd{position:relative;font-size:0.75em;margin:0; padding:0 5px 0 15px; display:inline-block; color:#666;} .listview{} .listview .listview-tit{ font-size:1.125em;font-weight:bold; background-color:#000;color:#fff;margin:0; padding:2px 10px; -webkit-box-shadow:0 1px 5px 0 rgba(0,0,0,1);-moz-box-shadow:0 1px 5px 0 rgba(0,0,0,1);-ms-box-shadow:0 1px 5px 0 rgba(0,0,0,1); -o-box-shadow:0 1px 5px 0 rgba(0,0,0,1);box-shadow:0 1px 5px 0 rgba(0,0,0,1);position:relative; z-index:1;} .listview .listview-ul{ position:relative; z-index:0; background-color:#fff; margin:0 0 0; padding:0; list-style:none;} .listview .listview-ul li{ position:relative;} .listview .listview-ul li .episodes{ display:block;padding:10px 10px 10px 94px; border-bottom:1px solid #b0b0b0; background-image:-webkit-linear-gradient(rgba(254,254,254,0),rgba(227,227,227,1) 50%,rgba(220,220,220,1) 85%); background-image:-webkit-moz-gradient(rgba(254,254,254,0),rgba(227,227,227,1) 50%,rgba(220,220,220,1) 85%); background-image:-o-linear-gradient(rgba(254,254,254,0),rgba(227,227,227,1) 50%,rgba(220,220,220,1) 85%); background-image:-ms-linear-gradient(rgba(254,254,254,0),rgba(227,227,227,1) 50%,rgba(220,220,220,1) 85%); background-image:linear-gradient(rgba(254,254,254,0),rgba(227,227,227,1) 50%,rgba(220,220,220,1) 85%); } .listview .listview-ul li .episodes .tpage{ width:60px;margin-left:-82px; padding:5px; float:left; display:block; background-color:#fff; -webkit-box-shadow:0px 0px 2px 0 rgba(0,0,0,1);-moz-box-shadow:0px 0px 2px 0 rgba(0,0,0,1);-ms-box-shadow:0px 0px 2px 0 rgba(0,0,0,1); -o-box-shadow:0px 0px 2px 0 rgba(0,0,0,1);box-shadow:0px 0px 2px 0 rgba(0,0,0,1);} .listview .listview-ul li .episodes .info{ margin:0; padding:0 10px 0 0; list-style:none; font-weight:normal; text-shadow:0 1px 0 #fff;} .listview .listview-ul li .episodes .info dt{ font-size:0.9375em; color:#000; line-height:1.4;} .listview .listview-ul li .episodes .info .iconi-clock:before{ font-size:1.25em !important; position:absolute; left:0; top:2px;} .listview .listview-ul li .episodes .info .iconi-loop:before{font-size:1.25em !important;position:absolute; left:0; top:1px;} .listview .listview-ul li .episodes .info dd{ position:relative;font-size:0.9375em;margin:0; padding:0 5px 0 20px; display:inline-block; color:#666;} .listview .listview-ul li:hover .right-arrow{color:#fff;} .listview .listview-ul li .right-arrow{ position:absolute; z-index:2; right:10px; top:50%; margin-top:-10px; color:#535353;} .listview .listview-ul li .right-arrow:hover{color:#668e10;} .listview .listview-ul li .episodes:hover, .listview .listview-ul li .episodes:active{border-bottom:1px solid #4b5f21; background-image:-webkit-linear-gradient(#597127,#7b9c35 5%,#7b9c35 95%,#627c2b); background-image:-moz-linear-gradient(#597127,#7b9c35 5%,#7b9c35 95%,#627c2b); background-image:-o-linear-gradient(#597127,#7b9c35 5%,#7b9c35 95%,#627c2b); background-image:-ms-linear-gradient(#597127,#7b9c35 5%,#7b9c35 95%,#627c2b); background-image:linear-gradient(#597127,#7b9c35 5%,#7b9c35 95%,#627c2b);} .listview .listview-ul li .episodes:hover .info, .listview .listview-ul li .episodes:active .info{text-shadow:none;} .listview .listview-ul li .episodes:hover .info dt, .listview .listview-ul li .episodes:active .info dt{color:#fff;} .listview .listview-ul li .episodes:hover .info dd, .listview .listview-ul li .episodes:active .info dd{color:#fff;} .load-more{ background-color:;} .load-more a{ display:block; margin:5px auto;width:150px; height:28px; line-height:28px;font-size:0.9375em; color:#b3d465; background-color:#000; border-radius:15px; border:1px solid #404040; text-align:center;} /*detail*/ .detail-info{ color:rgba(255,255,255,.8); padding:10px 12px; line-height:1.2;} .detail-panel .player{ font-size:1.125em; padding:0 40px 0 16px;position:relative;display:inline-block;color:#fff;font-weight:bold; background-color:#668e10; border-radius:17px; box-shadow:0 1px 0 0 rgba(27,27,27,1),0 0 0 1px rgba(74,74,74,1),0 1px 0 1px rgba(74,74,74,1),inset 0 5px 0 rgba(255,255,255,.1); height:34px; line-height:34px; text-shadow:0 1px 0 rgba(0,0,0,.3);} .detail-panel .player:hover:before, .detail-panel .player:active:before{content:""; position:absolute; z-index:3; bottom:0; left:0;border-radius:15px; width:100%; height:100%; overflow:hidden; background-image:-moz-radial-gradient(center top,cover,rgba(255,255,255,.8) -10%,rgba(103,143,17,0)); background-image:-webkit-radial-gradient(center top,cover,rgba(255,255,255,.8) -10%,rgba(103,143,17,0)); background-image:-o-radial-gradient(center top,cover,rgba(255,255,255,.8) -10%,rgba(103,143,17,0)); background-image:-ms-radial-gradient(center top,cover,rgba(255,255,255,.8) -10%,rgba(103,143,17,0)); background-image:radial-gradient(center top,cover,rgba(255,255,255,.8) -10%,rgba(103,143,17,0)); } .detail-panel .player .iconi-play-2{ border-left:1px solid rgba(255,255,255,.2); box-shadow:-1px 0 0 rgba(0,0,0,.2); height:100%; position:absolute;top:0;right:0px; display:inline-block;font-style:normal; padding:0 2px;} .detail-panel .player .iconi-play-2:before{ position:relative;font-size:12px; padding:0 6px;top:0px;} /*---------add at 2013/03/12---------*/ .add-screen{ /*position:absolute; top:334px;*/ position:fixed; bottom:12px; z-index:999; width:220px; left:50%; margin-left:-110px;} .add-screen .close{ z-index:1000;position:absolute;top:9px; right:5px; width:20px; height:20px; display:block;-webkit-transform: rotate(45deg);transform: rotate(45deg); } .add-screen .close:before{ content:"."; position:absolute; top:5px; left:0; width:13px; height:3px; color:#fff; background-color:#fff;border-radius:.02em; overflow:hidden;} .add-screen .close:after{ content:"."; position:absolute; top:0px; left:5px; width:3px; height:13px; color:#fff; background-color:#fff;border-radius:.02em; overflow:hidden;} .add-screen .as-bg{ position:relative; background-color:rgba(0,0,0,.85); /*height:75px;*/ padding:8px 8px 8px 72px;box-shadow: 0 1px 10px rgba(0,0,0,.6);border-radius:2px; line-height:100%; border:1px solid rgba(255,255,255,.85);} .add-screen .as-bg:before{ z-index:998;content:"";position: absolute;bottom:-20px;left:50%;margin:0 0 0 -10px;border-left: 10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-top: 10px solid rgba(0,0,0,1);} .add-screen .as-bg:after{ z-index:997;content:"";position:absolute;bottom:-23px;left:50%;margin:0 0 0 -11px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid transparent;border-top:11px solid rgba(255,255,255,.85);} .add-screen .as-bg .ico-img{ float:left; margin-left:-64px;} .add-screen .as-bg .ico-img img{border-radius:8px;} .add-screen .as-bg .ico-info{ color:#fff; font-size:.875em;text-shadow:1px 1px 4px rgba(0,0,0,.65);} .add-screen .as-bg .ico-info .ico-screen{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAfCAYAAAFsXPaSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2RUY0QTA5RTY3ODRFMTExQkJCM0VERUREMzM4RjVEQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMTc2NDkzMDlCNTAxMUUxQjIwNzhGNjQ0NzE3NUNCRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMTc2NDkyRjlCNTAxMUUxQjIwNzhGNjQ0NzE3NUNCRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3REE1QzIyODU2OEZFMTExOTgzRkNDOUVERDMwMTI0NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RUY0QTA5RTY3ODRFMTExQkJCM0VERUREMzM4RjVEQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpWHBGkAAAI9SURBVHjaYvz//z8DMmBBYv9HFrAHYkaYwH8YB8QGCCBGdDOYoPQuZDNgWv7AVMD0M4MIgADCMAPJCYzIZp6ECsIw3J0MQBOuArEWyCQ0DAIMjP9x2AEFjAABxIBFpxOMzYDD2NXokiH/UcEHmNew2S3JguIAHH5mRFP0HyaJ0zssKCGDBgACCJtXcHmvFF2cFM0wcAkmzoTmkHVokfkfi5N1oWLMuEwHgWoglsAix4bN2SDQjsPZb9FTDXrKYWTAD/6jRyiyn+fj0SiBK6oS/pMGkmHOBgggYqJpNTZxRvwZBcWfjNgyPjEAZAAbORpB4CcQy+HSyA/EE4D4CY4M8BBUmiH7UQiI3xJp81OYjWwkaDoLxDKw4N2LFl8ngdgVS9pdhB6PD6ESb/FktxxseTUKOTFj0WgPZdcha1RBshVfCqpDNpwBKT/i08SP5GSSshgobj/gyl4SeDROwCju/xORyjGqCKiNL0jQBFcLEGDEFp3EFK0/odFKUD01LUUGk/GpZyQ9aAkWpsjgIBAHAfE79AilpaUw8AiIfYD4MjFxagnEW6DxRQ3wGYiZsVkkB8S3/1Mf3IMVBegWZpJh2HkC8ruAmAdf6r2HQ+N8IFYkIfXiawJgWLoFSRMoHo1JzDLfoK1C9FITw1JmJAE2aLvpPwGfoeNpWJrAdeilLXpxDUpVHkgSEhQUFHVYghqjcPiPrWAlEyBXCTjNxNZO4KHAUjaiqov/VCqSiKmWkC39TKHvCIEvQMyLLAAAcVFDam+ZrjUAAAAASUVORK5CYII="); display: inline-block; height: 15px; width: 15px; margin:2px 3px 0 3px; -webkit-background-size: 15px; vertical-align: top; background-position: 0% 50%; background-repeat: no-repeat no-repeat;} .add-screen .as-bg .ico-info .ico-screen-ios7{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REJFOUYyOTc0ODIzMTFFM0JCN0JCNUVGOTMwNzBBN0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REJFOUYyOTg0ODIzMTFFM0JCN0JCNUVGOTMwNzBBN0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQkU5RjI5NTQ4MjMxMUUzQkI3QkI1RUY5MzA3MEE3QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQkU5RjI5NjQ4MjMxMUUzQkI3QkI1RUY5MzA3MEE3QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqfIkskAAAEKSURBVHjaYvz//z8DBcAMiEEGnCbbBJADyMRGQPwDio3INYeRzBAwAuI9QPweyhcEYhcgPkeqQSwUWL4DiH9DxVihYiQ7golMy3cBcSw0/v9D2bugcka0coAh1ILdQBwNxH+R5P5CxXZD1RjSwgHpOCxHd8R2IM4i1lBGCrPhAiidQK4BTAwDDAbcAdiyYRoQR+FQ3wjE+wmY6QjEdaDoxSK3DIhnEXKAEhQvQxP/B8RPifDUEyA+gcUBUVBziSqI7gFxBZmhehuIK7GIW4wmwlEHjDpgyJSEpID3lHqCUgcUAzHzQDrgHxSPJsJRB4w6YPiVhEJA7EFlu4RIcYAutINBbbANXQAgwAAlDJfpQRwqCQAAAABJRU5ErkJggg==); display: inline-block; height: 15px; width: 15px; margin:2px 3px 0 3px; -webkit-background-size: 15px; vertical-align: top; background-position: 0% 50%; background-repeat: no-repeat no-repeat;} /*---------add at 2013/03/13---------*/ .ad-panel{ text-align:center;} .app-btn-fixed-height {height: 55px;} .app-btn-fixed-bottom {background-color: #27a154; z-index: 9999; padding: 18px 5px; position: fixed; left: 0; bottom: 0; width: 100%; text-align: center;} .app-btn-fixed-bottom a {color: #ffffff !important; font-weight: normal !important; font-size: 14px !important} @media only screen and (max-width: 767px){ /* Size for iPone all of the following */ } @media only screen and (max-width: 767px) and (min-width: 640px){ /* Vertical size for iPhone 5 and iPod touch (5th generation), high-resolution iPhone and iPod touch*/ } @media only screen and (max-width: 639px) and (min-width: 480px){ /* Horizontal size for iPhone and iPod touch */ } @media only screen and (max-width: 479px){ /* Vertical size for iPhone and iPod touch */ }