/*
 * template.css
 * Define the structure in html templates
 * 
 */


/* =============================================================================
   Command header (include all structure and content css)
   ========================================================================== */

#common_header {
	
	height: 32px;
	width: auto;
	background-color:#000;
	z-index: 99;
	
}


#common_header_content {
	width: 960px;
	margin: 0px auto;
	height: 32px;
	color: #cccccc;
	font-size: 14px;
	line-height: 28px;
	font-family: Helvetica,Arial,"LiHei Pro",微軟正黑體,MS Gothic,sans-serif;
}

#left_header {
	float: left;
	/*width: 450px;*/
	padding-top: 2px;
	
}

#left_header ul li {
	float: left;
	margin-right: 9px;
}

#right_header {
	float: right;
	/*width: 490px;*/
	padding-top: 2px;
	
}

#right_header ul li {
	float: right;
	margin-right: 9px;
}

#right_header ul li.no_margin {
    margin-right: 0px !important;
}

#common_header_content a {
	
	color: #cccccc;
	text-decoration: none;
	outline: none;
	
}

#common_header_content a.highlight {
	color: #ee9225;
}

#common_header_content a:hover {
	
	color: #ee9225;
	text-decoration: none;
	outline: none;
}

.nowid_menu {
	position: relative;
	width: 200px;
	z-index: 99;
}

.nowid_menu > a{
	color: #f19a07 !important;
	text-decoration: none;
	min-width: 110px;
	display: block;
	text-align: center;
}

.nowid_menu .menu {
	display: none;
	position: absolute;
	top: 29px;
	z-index: 99;
	width: 200px;
	text-align: center;
	border: 1px solid #000;
	
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom--left-radius: 10px;
	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom--right-radius: 10px;
	border-bottom-right-radius: 10px;
	
	/*
	-moz-box-shadow: 1px 1px 1px #000;
	-webkit-box-shadow: 1px 1px 1px #000;
	box-shadow: 1px 1px 1px #000;
	*/
	
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0) inset,  1px 1px 2px rgba(5, 5, 5, 0.3), 0 0px 0 rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0) inset,  1px 1px 2px rgba(5, 5, 5, 0.3), 0 0px 0 rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 1px 2px inset, rgba(5, 5, 5, 0.3) 1px 1px 2px, rgba(0, 0, 0, 0.6) 0px 0px 0px;
	
	background-color: #2d2c2d;
}


.nowid_menu .menu ul li {
	float: none !important;
	text-align: center;
	height: 36px;
	z-index: 99;
	margin: 0px !important;
	line-height: 36px;
}


.nowid_menu .menu ul li.last a{
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom--left-radius: 10px;
	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom--right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.nowid_menu .menu ul li a{
	width: 100%;
	display: block;
	height: 36px;
	background-color: #2d2c2d;
	color: #c7c7c7;
	
}

.nowid_menu .menu ul li a .now {
	font-size: 19px;
}

.nowid_menu .menu ul li a:hover {
	
	background-color: #8c8a8c;
	color: #2d2c2d !important;
}




/* =============================================================================
   Container
   ========================================================================== */

#container {
    margin:0 auto;
    position:relative;
}

#main {
    
}

.box-960-center {
    /*margin:0 auto;*/
    position:relative;
    width: 100%;
}

.box-788 {
    margin:0 auto;
    position:relative;
    width: 788px;
}

.box-628 {
    margin:0 auto;
    position:relative;
    width: 640px;
}

.box-308 {
    margin:0 auto;
    position:relative;
    width: 308px;
}

.box-148 {
    margin:0 auto;
    position:relative;
    width: 160px;
}




/* =============================================================================
   Header
   ========================================================================== */

#header {

    width: 100%;
    background-image: url('../../img/user-guide-images/template/header_grad.png');
    background-repeat: repeat-x;
    height: 90px;
    
}

#header.with-banner {
    
    height: auto !important;
    background-image: url('../../img/user-guide-images/template/header_grad_long.png');
    
}

.header-box {
    padding-top: 26px;
}

#header.with-banner .header-box {
    padding-top: 0px;
}
.top-banner {
    text-align: center;
    margin: 0px auto 10px auto;
    padding-top: 12px;
    height: 90px;
}

.logo {
    display: block;
    background-image: url('../../img/user-guide-images/template/logo.png');
    background-repeat: no-repeat;
    width: 114px;
    height: 49px;
    margin-top: 0px;
    float: left;
    vertical-align: baseline;
}

#main {
    background-color: #191919;
    min-height: 620px;
	margin-top:30px;
	margin-left: 15px;margin-right: 15px;
}

/* =============================================================================
   Breadcrumb bar
   ========================================================================== */

.breadcrumb-bar {
    height: 47px;
    line-height: 47px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.breadcrumb-bar a {
    color: #d4d4d4;
    text-decoration: none;
}

.breadcrumb-bar a:hover {
    color: #F29907;
    text-decoration: underline;
}


/* =============================================================================
   Program box
   ========================================================================== */

.program-section {
    
    background-color: #000;
    margin-bottom: 12px;
}

.program-player {
   
}
.program-info {
    width: 210px;
    padding: 20px 12px;
}
.program-name {
    margin-top: 36px;
}
.program-episode {
    margin-top: 36px;
    height: auto !important;
}
.program-episode-synopsis {
    margin-top: 12px;
}



/* =============================================================================
   Program support box
   ========================================================================== */

.program-support-section {
    margin-bottom: 12px;
}

.program-synopsis {
    width: 657px;
}


/* =============================================================================
   Home page program box
   ========================================================================== */
.home-program-section {
    
}



/* =============================================================================
   Home page promotion slide show box
   ========================================================================== */

.home-promotion-section{
    background-color: #000;
    margin-bottom: 12px;
}



/* =============================================================================
   Program page content
   ========================================================================== */

.program-selection-section {
    margin-top: 24px;
    
}

.program-select-section {
    width: 764px;
    margin-left:24px;
}

.program-icon-section {
    margin: 24px 0px 24px 12px;   
}

.program-icon-section.no-top-margin {
	margin: 0px 0px 24px 12px;
}


.channel-menu-section {
    position: relative;
}


.channel-menu-section.overlay {
	
	position: fixed;
	top: 24px;
	
}

/* =============================================================================
   Search result page
   ========================================================================== */

.search-header {
    
    margin: 0px 12px 36px 12px;
    color: #8a8a8a;
    font-size: 30px;
}


.search-result-section {
    margin-bottom: 24px;
    position: relative;
}


.search-result-title {
    border-bottom: 1px solid #8a8a8a;
    font-size: 30px;
    color: #8a8a8a;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.no-result-error {
	font-size: 14px;
	color: #fff;
}


/* =============================================================================
   Live TV page
   ========================================================================== */

.live-program-name {
	
	margin-top: 12px;
}


.live-epg-box {
	
	position: relative;
	
}

.coming-up {
	font-size: 13px;
	color: #d4d4d4;
	margin-bottom: 12px;
}

.full-epg {
	
	color: #d4d4d4;
	margin-bottom: 12px;
	margin-top:12px;
}

.full-epg .more-button {
	font-size: 13px !important;
	font-weight: normal;
}

.live-epg-grad {
	height: 40px;
	width: 100%;
	z-index: 3;
	position: absolute;
	bottom: 0px;

	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 67%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(67%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 67%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 67%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 67%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 67%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */



}

/* =============================================================================
   Player box
   ========================================================================== */

.program-player {
	width: 720px;
	height: 406px;
	position: relative;
}

.program-cat-info {
	margin-top: 12px;
	font-size: 14px;
	color: #999999;
	position: relative;
	padding-left: 32px;
	line-height: 20px;
}

.program-cat-logo {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	position: absolute;
	left: 0px;
	
}

.program-cat-logo-large {
	width: 24px;
	height: 24px;
	margin-right: 12px;
	position: absolute;
	left: 0px;
	
}

.btn-margin-top {
	margin-top: 24px;
	display: block;
}

.btn-center {
	text-align:center;
	position: relative;
	min-height: 23px;
	margin-left: auto;
	margin-right: auto;
}

.btn-left {
	position: absolute;
	left: 80px;
	
}

.btn-right {
	position: absolute;
	right: 80px;
}


/* Channel page*/

.live-logo {
	margin-bottom: 24px;
}
.btn-watch-live {
	width: 148px;
	height: 38px;
	background-image: url('../../img/user-guide-images/ui/btn-watch-live.png');
	display: block;
	margin-bottom: 24px;
}

.btn-watch-live:hover {
	background-position: center;
}
.btn-watch-live:active {
	background-position: bottom;
}

.channel-description {
	font-size: 12px;
	line-height: 24px;
	color:#a5a5a5;
}



.classification_table {
	color: #A5A5A5;
    font-size: 14px;
    line-height: 24px;
}

.classification_table td {
	padding-bottom: 60px;
}

.classification_table .cat-logo {
	vertical-align: top;
	width: 56px;
	padding-left: 12px;
	padding-right:30px
}

#footer { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #050505), color-stop(1, #181818));
		background-image: -moz-linear-gradient(center top, #050505 0%, #181818 100%);
		background-image: -ms-linear-gradient(center top, #050505 0%, #181818 100%);
		border-top: 1px solid #252525; height: 18px; color: #999; padding: 15px 0 ; margin-top: 12px; background-color:#000;}
#footer span { float: right }
#footer a, #footer a:hover { color: inherit; text-decoration: none; }
#footer a:hover { text-decoration: underline; }


.side-ad {
	margin-bottom: 12px;
}

.long-ad {
	margin-bottom: 12px;
}


/* =============================================================================
   Ondemand movie
   ========================================================================== */


#expandable .parent {
	position: relative;
}

#expandable .child {
	display: none;
}

#expandable a.expand {
	position: absolute;
	display: block;
	top: 4px;
	left: 0;
	width: 9px;
	height: 9px;
	background: url(../../img/user-guide-images/ui/arrow-01.png) no-repeat;
	text-indent: -9999px;
}

#expandable a.expand:hover {
	cursor: pointer;
	background: url(../../img/user-guide-images/ui/arrow-01-hover.png) no-repeat;
}

#expandable a.expand.active {
	background: url(../../img/user-guide-images/ui/arrow-02.png) no-repeat;
}

#expandable a.expand.active:hover {
	background: url(../../img/user-guide-images/ui/arrow-02-hover.png) no-repeat;
}

#expandable li:hover {
/*	background: #8a8a8a;
	border-radius: 6px;*/
}

#expandable li label:hover {
	color: #fff;
}

#expandable li input:hover {
	cursor: pointer;
}


/* =============================================================================
   now player feature 
   ========================================================================== */
.dimmed {
	opacity: 0;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}
.dimmed.show {
	opacity: 1;
}
.header-box {
    padding-top: 22px;
}
.features-title, .features-desc {
	color: #FFF;
}
.features-desc {
    transition: all 1.6s ease-in-out;
    -webkit-transition: all 1.6s ease-in-out;
    -moz-transition: all 1.6s ease-in-out;
    -o-transition: all 1.6s ease-in-out;
	padding-bottom: 40px;
	opacity: 0;
}
.features-desc.show {
	opacity: 1;
}
.app-section {
	padding-bottom: 20px;
	font-weight: lighter;
}
.app-section .main {
	background: #303030;
	padding: 0px 5px 5px;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.app-section .main .tabs {
	
}
.app-section .main .tabs .tab {
	float: left;
	background: none;
	padding: 18px 0px;
	margin-right: 4px;
	width: 198px;
	text-align: center;
	margin: 0px;
    position: relative;
}
.app-section .main .tabs .tab:last-of-type {
	border-right: 0px;
}
.app-section .main .tabs .tab a {
	color: #fff;
	font-size: 15px;
}
.app-section .main .tabs .tab .seperate-line {
	width: 2px;
	height: 15px;
	position: absolute;
	right: 0px;
	top: 20px;
	background: #191919;
}
/* 
.app-section .main .tabs .tab:hover {
	background: #3e3e3e;
}
 */
.app-section .main .tabs .tab.active a {
	color: #f18e35;
}
.app-section .main .tabs .tab.tab-gettingstarted {
/*	width: 299px;*/
	width: 33%;
}
.app-section .main .tabs .tab.tab-userguide {
/*	width: 198px;*/
	width: 33%;
}
.app-section .main .tabs .tab.tab-videotutorial {
	width: 228px;
}
.app-section .main .tabs .tab.tab-faq {
/*	width: 218px;*/
	width: 33%;
}

.app-section .main .main-content {
	background: #191919;
	padding: 0px 46px 20px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.block-fw {
	color: #FFF;
	background: #3e3e3e;
    transition: 1.6s ease-in-out;
    -webkit-transition: 1.6s ease-in-out;
    -moz-transition: 1.6s ease-in-out;
    -o-transition: 1.6s ease-in-out;
    transition-delay: 0.3s;
}
.block-bg-left {
	background-position: 0px 160px !important;
	margin: 0px 36px 20px;
    opacity: 0;
    margin-top: 20px;
}
.block-bg-left.show {
	background-position: 0px 60px !important;
    opacity: 1;
}
.block-bg-left h2, .block-bg-right h2 {
	font-size: 26px;
	color: #f18e35;
	font-weight: lighter;
    margin-bottom: 0px;
}
.block-bg-left .content p, .block-bg-right .content p {
	font-size: 16px;
    line-height: 22px;
}
.block-bg-left .content p a, .block-bg-right .content p a {
	color: #f18e35;
}
.block-bg-left .content {
	width: 46%;
	float: right;
}
.block-bg-right {
	background-position: 374px 200px !important;
	margin: 0px 36px 20px;
    opacity: 0;
    margin-top: 20px;
}
.block-bg-right.show {
	background-position: 374px 0px !important;
    opacity: 1;
}
.block-bg-right .content {
	width: 46%;
	float: left;
}
.block-bg-left .content, .block-bg-right .content {
    transition: 1.6s ease-in-out;
    -webkit-transition: 1.6s ease-in-out;
    -moz-transition: 1.6s ease-in-out;
    -o-transition: 1.6s ease-in-out;
    transition-delay: 0.3s;
}
.block-top {
	padding-top: 30px;
	padding-bottom: 0px;
}
.block-bottom {
	padding: 0px 50px 20px;
}
.block-bottom.show {
    opacity: 1;
}
.block-bottom .bottom-content {
	font-size: 16px;
    opacity: 0;
    transition: 1.6s ease-in-out;
    -webkit-transition: 1.6s ease-in-out;
    -moz-transition: 1.6s ease-in-out;
    -o-transition: 1.6s ease-in-out;
}
.block-bottom.show .bottom-content {
    opacity: 1;
}
.bottom-text {
	color: #999999;
    padding: 14px 36px;
    font-size: 12px;
    line-height: 20px;
    opacity: 0;
    transition: all 1.6s ease-in-out;
    -webkit-transition: all 1.6s ease-in-out;
    -moz-transition: all 1.6s ease-in-out;
    -o-transition: all 1.6s ease-in-out;
}
.bottom-text.show {
	opacity: 1;
}
.bottom-text a {
	color: #f18e35;
}
.features-desc {
	background: url("../../img/user-guide-images/ui/bg_gradient.png") center center no-repeat;
}
.features-desc .top-banner {
	background: url("../../img/user-guide-images/template/nowplayer/top_banner.png") no-repeat;
	background-position: 400px 40px ;
	height: auto;
	margin: 50px auto 10px auto;
}
.features-desc .content {
	width: 310px;
	height: 400px;
	padding: 4px 30px 0px;
	text-align: left;
}
.features-desc .content .desc1 {
	font-size: 20px;
	line-height: 24px;
}
.features-desc .content .desc2 {
	font-size: 16px;
	line-height: 22px;
}

.user-guide {
/* 	background: url("../../img/user-guide-images/ui/bg_gradient.png") center center no-repeat; */
	background: url("../../img/user-guide-images/template/nowplayer/bkg_texture.png") top center no-repeat;
	
}
.user-guide .top-banner {
/* 	background: url("../../img/user-guide-images/template/nowplayer/features_top.png") no-repeat; */
	background: url("../../img/user-guide-images/template/nowplayer/bg_gettingstarted.png") no-repeat;
	background-position: top center;
	height: 500px;
	margin: 50px auto 38px auto;
}
.user-guide .top-banner .content {
	text-align: left;
    padding-top: 375px;
}
.user-guide .top-banner .content .title {
	color: #f18e35;
	font-size: 36px;
	margin: 0px;
}
.user-guide .top-banner .content .desc {
	color: #ffffff;
	font-size: 18px;
	margin: 0px;
    line-height: 22px;
    margin-bottom: 12px;
	letter-spacing: 0.03em;
}
.user-guide .top-banner .left-text {
	width: 324px;
	height: 125px;
	float: left;
    margin-left: 60px;
}
.user-guide .top-banner .right-text {
	width: 360px;
	height: 125px;
	float: left;
    margin-left: 40px;
}
/* ====== block 1 ====== */
.block-1 {
	height: 294px;
	background: url("../../img/user-guide-images/template/nowplayer/img_itsfree.png") no-repeat;
	border-top: 1px solid #646464; 
}
.block-1 .content {
	padding-top: 110px;
}
.block-1.show {
    background-position: 374px 70px !important;
}
.block-1.show .content {
	padding-top: 30px !important;
}
/* ====== block 2 ====== */
.block-2 {
	height: 258px;
	background: url("../../img/user-guide-images/template/nowplayer/img_nowid.png") no-repeat;
	border-top: 1px solid #646464; 
}
.block-2 .content {
	padding-top: 60px;
}
.block-2.show .content {
	padding-top: 40px !important;
}
/* ====== block 3 ====== */
.block-3 {
	height: 400px;
	background: url("../../img/user-guide-images/template/nowplayer/img_supported.png") no-repeat;
	background-position: 470px 210px !important;
	border-top: 1px solid #646464; 
}
.block-3.show {
	background-position: 470px 110px !important;
}
.block-3 .content {
	padding-top: 110px;
}
.block-3.show .content {
	padding-top: 20px !important;
}
/* ======= more content ====== */
.block-fw hr.more-hr {
	margin: 0px 50px ;
}
.more-content {
	display: none;
    margin: 0px 50px 40px;
    padding: 0px 0px 20px;
    border-bottom: 1px solid #CCC;
}

/* =============================================================================
   now player user guide 
   ========================================================================== */
.bg-userguide .block-fw {
	color: #FFF;
/* 	background: none; */
	margin: 0px 36px 0px;
	font-size: 16px;
	border-bottom: 0px solid #434343;
	padding: 40px 0px 0px;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition-delay: 0s;
}
.bg-userguide .block-fw.active {
	border-bottom: 1px solid #f38e25;
}
.bg-userguide .block-fw p {
	margin: 0px 0px 20px 0px;
    font-size: 16px;
    line-height: 24px;
}
.bg-userguide .block-fw .header-1 {
	color: #f38e25;
	font-size: 24px;
	margin-bottom: 10px;
}
.bg-userguide .block-fw .header-2 {
	color: #f38e25;
	font-size: 26px;
	margin-bottom: 10px;
}
.bg-userguide .block-fw .content .more a {
	color: #FFF;
}
.bg-userguide .block-fw .content .more a:hover {
	border-bottom: 1px solid #FFF;
}
.bg-userguide .breakline {
	margin: 0px 40px;
}
.block-left .content {
	width: 35%;
    padding-bottom: 40px;
	margin-left:10%
}
.block-right .content {
	width: 40%;
	float: right;
    padding-bottom: 0px;
    padding-right: 10%;
}
.bg-userguide .block-fw .content {
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}

.bg-userguide .block-fw.show {
	border-bottom: 1px solid #434343;
}
.bg-userguide .block-fw .more-content {
	display: none;
	padding: 40px 0px 0px;
	margin: 0px;
	border-top: 1px solid #f38e25;
	border-bottom: none;
}
.bg-userguide .block-fw .content .btn-more a {
	color: #fff;
	padding-right: 20px;
	background: url('../../img/user-guide-images/ui/arrow-01.png') right center no-repeat;
}
.bg-userguide .block-fw.active .content .btn-more a {
	background: url('../../img/user-guide-images/ui/arrow-02.png') right center no-repeat;
}
.bg-userguide .block-fw .more-content .btn-close {
	text-align: center;
    margin-top: 60px;
	margin-bottom: 8px;
}
.bg-userguide .block-fw .more-content .btn-close a {
	padding-right: 20px;
	color: #fff;
	font-size: 14px;
	background: url('../../img/user-guide-images/ui/arrow-03.png') right center no-repeat;
}

.bg-userguide .block-fw .more-content {
	margin-bottom: 20px;
}
.bg-userguide .block-fw .more-content .more-img {
	float: left;
    width: 270px;
    padding: 0px 40px;
}
.bg-userguide .block-fw .more-content .more-con {
	float: right;
	width: 428px;
}
.bg-userguide .block-fw .more-content .more-con .more-con-t {
	color: #f38e25;
	font-size: 20px;
	margin-bottom: 10px;
}
.bg-userguide .block-fw .more-content .more-con .more-con-subcon {
	padding-left: 40px;
}
.bg-userguide .block-fw .more-content .more-con .more-con-subcon.ic-subtitle {
	background: url('../../img/user-guide-images/ui/cat-1.png') left top no-repeat;
}
.ug-1 {
	height: 394px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_1.png") no-repeat;
    background-position: 328px 160px;
}
.ug-1.show {
    background-position: 70% 30px !important
}
.ug-1 .content {
	padding-top: 160px;
}
.ug-1.show .content {
	padding-top: 110px;
}
.ug-2 {
	height: 420px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_2.png") no-repeat;
    background-position: 18px 150px;
}
.ug-2.show {
    background-position: 28% 60px !important;
}
.ug-2 .content {
	padding-top: 150px;
}
.ug-2.show .content {
	padding-top: 100px;
}
.ug-3 {
	height: 360px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_3.png") no-repeat;
    background-position: 324px 140px;
}
.ug-3.show {
    background-position: 72% 40px !important;
}
.ug-3 .content {
	padding-top: 140px;
}
.ug-3.show .content {
	padding-top: 90px;
}

.ug-4 {
	height: 380px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_4.png") no-repeat;
    background-position: 390px 160px;
}
.ug-4.show {
    background-position: 75% 60px !important;
}
.ug-4 .content {
	padding-top: 150px;
}
.ug-4.show .content {
	padding-top: 100px;
}
.ug-5 {
	height: 540px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_5.png") no-repeat;
    background-position: 30px 160px;
}
.ug-5.show {
    background-position: 28% 60px !important;
}
.ug-5 .content {
	padding-top: 150px;
}
.ug-5.show .content {
	padding-top: 100px;
}
.ug-6 {
	height: 580px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_6.png") no-repeat;
    background-position: 328px 120px;
    border-bottom: 0px !important;
}
.ug-6.show {
    background-position: 70% 40px !important;
}
.ug-6 .content {
	padding-top: 190px;
}
.ug-6.show .content {
	padding-top: 140px;
}


.ug-1-tc {
	height: 394px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_1_tc.png") no-repeat;
    background-position: 328px 160px;
}
.ug-1-tc.show {
    background-position: 70% 30px !important
}
.ug-1-tc .content {
	padding-top: 160px;
}
.ug-1-tc.show .content {
	padding-top: 110px;
}
.ug-2-tc {
	height: 420px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_2_tc.png") no-repeat;
    background-position: 18px 150px;
}
.ug-2-tc.show {
    background-position: 28% 60px !important;
}
.ug-2-tc .content {
	padding-top: 150px;
}
.ug-2-tc.show .content {
	padding-top: 100px;
}
.ug-3-tc {
	height: 360px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_3_tc.png") no-repeat;
    background-position: 324px 140px;
}
.ug-3-tc.show {
    background-position: 72% 40px !important;
}
.ug-3-tc .content {
	padding-top: 140px;
}
.ug-3-tc.show .content {
	padding-top: 90px;
}

.ug-4-tc {
	height: 380px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_4_tc.png") no-repeat;
    background-position: 390px 160px;
}
.ug-4-tc.show {
    background-position: 75% 60px !important;
}
.ug-4-tc .content {
	padding-top: 150px;
}
.ug-4-tc.show .content {
	padding-top: 100px;
}
.ug-5-tc {
	height: 540px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_5_tc.png") no-repeat;
    background-position: 30px 160px;
}
.ug-5-tc.show {
    background-position: 28% 60px !important;
}
.ug-5-tc .content {
	padding-top: 150px;
}
.ug-5-tc.show .content {
	padding-top: 100px;
}
.ug-6-tc {
	height: 580px;
	background: url("../../img/user-guide-images/template/nowplayer/userguide_6_tc.png") no-repeat;
    background-position: 328px 120px;
    border-bottom: 0px !important;
}
.ug-6-tc.show {
    background-position: 70% 40px !important;
}
.ug-6-tc .content {
	padding-top: 190px;
}
.ug-6.show .content {
	padding-top: 140px;
}


.bg-userguide .block-fw p.more {
    background: url("../../img/user-guide-images/template/nowplayer/more-btn.png") no-repeat;
    background-position: 50px 5px;
    width: 60px;
}
.nav-back {
    /*margin: 0px 40px 20px;*/
    padding-top: 25px;
}
.nav-back .back-btn a {
	color: #f38e25;
    font-size: 16px;
}
.bg-userguide .block-ugd {
	color: #FFF;
	margin: 20px 0 40px;
	font-size: 16px;
	border-bottom: 0px solid #434343;
	padding: 20px 0px 0px;
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition-delay: 0s;
}
.bg-userguide .block-ugd.block-right .content {
    width: 40%;
    padding-right: 0px;
	margin-left:40%;
	float:left
}


.bg-userguide .block-ugd .content {
    transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.bg-userguide .block-ugd.active {
	border-bottom: 1px solid #f38e25;
}
.bg-userguide .block-ugd p {
    margin: 0px 0px 22px 0px;
    font-size: 14px;
    line-height: 20px;
}
.bg-userguide .block-ugd p a {
	color: #f38e25;
	text-decoration: underline;
}
.bg-userguide .block-ugd p.note {
	font-size: 12px;
}
.bg-userguide .block-ugd .header-1 {
	color: #f38e25;
	font-size: 24px;
	margin-bottom: 10px;
}
.bg-userguide .block-ugd .header-2 {
	color: #f38e25;
	font-size: 20px;
	margin-bottom: 10px;
}
.bg-userguide .block-ugd-noimage {
	color: #FFF;
	/*margin: 0px 40px;*/
	font-size: 16px;
	border-bottom: 0px solid #434343;
	padding: 0px 0px 0px;
}
.bg-userguide .block-ugd-noimage .header {
	color: #f38e25;
	font-size: 26px;
	margin-bottom: 10px;
    margin-top: 20px;
}
/* ========== userguide home ========== */
.ugd-home-1 {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-1.png") no-repeat;
    background-position: -10px 120px;
}
.ugd-home-1.show {
    background-position: -10px 20px !important;
}
.ugd-home-1 .content {
	padding-top: 110px;
}
.ugd-home-1.show .content {
	padding-top: 60px;
}
.ugd-home-2 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-2.png") no-repeat;
    background-position: -10px 120px;
}
.ugd-home-2.show {
    background-position: -10px 20px !important;
}
.ugd-home-2 .content {
	padding-top: 110px;
}
.ugd-home-2.show .content {
	padding-top: 60px;
}
.ugd-home-3 {
	height: 240px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-3.png") no-repeat;
    background-position: -10px 120px;
}
.ugd-home-3.show {
    background-position: -10px 20px !important;
}
.ugd-home-3 .content {
	padding-top: 110px;
}
.ugd-home-3.show .content {
	padding-top: 60px;
}
.ugd-home-4 {
	height: 248px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-4.png") no-repeat;
    background-position: 40px 130px;
}
.ugd-home-4.show {
    background-position: 40px 30px !important;
}
.ugd-home-4 .content {
	padding-top: 110px;
}
.ugd-home-4.show .content {
	padding-top: 60px;
}
.ugd-home-5 {
	height: 380px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-5.png") no-repeat;
    background-position: 40px 130px;
}
.ugd-home-5.show {
    background-position: 40px 30px !important;
}
.ugd-home-5 .content {
	padding-top: 142px;
}
.ugd-home-5.show .content {
	padding-top: 92px;
}

.ugd-home-1-tc {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-1_tc.png") no-repeat;
    background-position: -10px 120px;
}
.ugd-home-1-tc.show {
    background-position: -10px 20px !important;
}
.ugd-home-1-tc .content {
	padding-top: 110px;
}
.ugd-home-1-tc.show .content {
	padding-top: 60px;
}
.ugd-home-2-tc {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-2_tc.png") no-repeat;
    background-position: -10px 120px;
}
.ugd-home-2-tc.show {
    background-position: -10px 20px !important;
}
.ugd-home-2-tc .content {
	padding-top: 110px;
}
.ugd-home-2-tc.show .content {
	padding-top: 60px;
}
.ugd-home-3-tc {
	height: 240px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-3_tc.png") no-repeat;
    background-position: -10px 120px;
}
.ugd-home-3-tc.show {
    background-position: -10px 20px !important;
}
.ugd-home-3-tc .content {
	padding-top: 110px;
}
.ugd-home-3-tc.show .content {
	padding-top: 60px;
}
.ugd-home-4-tc {
	height: 248px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-4_tc.png") no-repeat;
    background-position: 40px 130px;
}
.ugd-home-4-tc.show {
    background-position: 40px 30px !important;
}
.ugd-home-4-tc .content {
	padding-top: 110px;
}
.ugd-home-4-tc.show .content {
	padding-top: 60px;
}
.ugd-home-5-tc {
	height: 380px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-home-5_tc.png") no-repeat;
    background-position: 40px 130px;
}
.ugd-home-5-tc.show {
    background-position: 40px 30px !important;
}
.ugd-home-5-tc .content {
	padding-top: 142px;
}
.ugd-home-5-tc.show .content {
	padding-top: 92px;
}
/* ========== userguide my now ========== */
.ugd-mynow-1 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-1.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-mynow-1.show {
    background-position: 46px 20px !important;
}
.ugd-mynow-1 .content {
	padding-top: 110px;
}
.ugd-mynow-1.show .content {
	padding-top: 60px;
}
.ugd-mynow-2 {
	height: 250px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-2.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-mynow-2.show {
    background-position: 46px 20px !important;
}
.ugd-mynow-2 .content {
	padding-top: 80px;
}
.ugd-mynow-2.show .content {
	padding-top: 30px;
}
.ugd-mynow-3 {
	height: 236px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-3.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-mynow-3.show {
    background-position: 46px 20px !important;
}
.ugd-mynow-3 .content {
	padding-top: 106px;
}
.ugd-mynow-3.show .content {
	padding-top: 56px;
}
.ugd-mynow-4 {
	height: 250px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-4.png") no-repeat;
    background-position: 46px 130px;
}
.ugd-mynow-4.show {
    background-position: 46px 30px !important;
}
.ugd-mynow-4 .content {
	padding-top: 90px;
}
.ugd-mynow-4.show .content {
	padding-top: 40px;
}
.ugd-mynow-5 {
	height: 310px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-5.png") no-repeat;
    background-position: 46px 130px;
}
.ugd-mynow-5.show {
    background-position: 46px 30px !important;
}
.ugd-mynow-5 .content {
	padding-top: 90px;
}
.ugd-mynow-5.show .content {
	padding-top: 40px;
}

.ugd-mynow-1-tc {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-1_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-mynow-1-tc.show {
    background-position: 46px 20px !important;
}
.ugd-mynow-1-tc .content {
	padding-top: 110px;
}
.ugd-mynow-1-tc.show .content {
	padding-top: 60px;
}
.ugd-mynow-2-tc {
	height: 250px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-2_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-mynow-2-tc.show {
    background-position: 46px 20px !important;
}
.ugd-mynow-2-tc .content {
	padding-top: 80px;
}
.ugd-mynow-2-tc.show .content {
	padding-top: 30px;
}
.ugd-mynow-3-tc {
	height: 236px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-3_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-mynow-3-tc.show {
    background-position: 46px 20px !important;
}
.ugd-mynow-3-tc .content {
	padding-top: 106px;
}
.ugd-mynow-3-tc.show .content {
	padding-top: 56px;
}
.ugd-mynow-4-tc {
	height: 250px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-4_tc.png") no-repeat;
    background-position: 46px 130px;
}
.ugd-mynow-4-tc.show {
    background-position: 46px 30px !important;
}
.ugd-mynow-4-tc .content {
	padding-top: 90px;
}
.ugd-mynow-4-tc.show .content {
	padding-top: 40px;
}
.ugd-mynow-5-tc {
	height: 310px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-mynow-5_tc.png") no-repeat;
    background-position: 46px 130px;
}
.ugd-mynow-5-tc.show {
    background-position: 46px 30px !important;
}
.ugd-mynow-5-tc .content {
	padding-top: 90px;
}
.ugd-mynow-5-tc.show .content {
	padding-top: 40px;
}
/* ========== userguide on demand ========== */
.ugd-ondemand-1 {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-ondemand-1.png") no-repeat;
    background-position: 0px 120px;
}
.ugd-ondemand-1.show {
    background-position: 0px 20px !important;
}
.ugd-ondemand-1 .content {
	padding-top: 110px;
}
.ugd-ondemand-1.show .content {
	padding-top: 60px;
}
.ugd-ondemand-2 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-ondemand-2.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-ondemand-2.show {
    background-position: 46px 20px !important;
}
.ugd-ondemand-2 .content {
	padding-top: 110px;
}
.ugd-ondemand-2.show .content {
	padding-top: 60px;
}
.ugd-ondemand-3 {
	height: 240px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-ondemand-3.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-ondemand-3.show {
    background-position: 46px 20px !important;
}
.ugd-ondemand-3 .content {
	padding-top: 54px;
}
.ugd-ondemand-3.show .content {
	padding-top: 4px;
}

.ugd-ondemand-1-tc {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-ondemand-1_tc.png") no-repeat;
    background-position: 0px 120px;
}
.ugd-ondemand-1-tc.show {
    background-position: 0px 20px !important;
}
.ugd-ondemand-1-tc .content {
	padding-top: 110px;
}
.ugd-ondemand-1-tc.show .content {
	padding-top: 60px;
}
.ugd-ondemand-2-tc {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-ondemand-2_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-ondemand-2-tc.show {
    background-position: 46px 20px !important;
}
.ugd-ondemand-2-tc .content {
	padding-top: 110px;
}
.ugd-ondemand-2-tc.show .content {
	padding-top: 60px;
}
.ugd-ondemand-3-tc {
	height: 240px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-ondemand-3_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-ondemand-3-tc.show {
    background-position: 46px 20px !important;
}
.ugd-ondemand-3-tc .content {
	padding-top: 54px;
}
.ugd-ondemand-3-tc.show .content {
	padding-top: 4px;
}
/* ========== userguide playing video ========== */
.ugd-playingvideo-1 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-playingvideo-1.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-playingvideo-1.show {
    background-position: 46px 20px !important;
}
.ugd-playingvideo-1 .content {
	padding-top: 90px;
}
.ugd-playingvideo-1.show .content {
	padding-top: 40px;
}
.ugd-playingvideo-2 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-playingvideo-2.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-playingvideo-2.show {
    background-position: 46px 20px !important;
}
.ugd-playingvideo-2 .content {
	padding-top: 130px;
}
.ugd-playingvideo-2.show .content {
	padding-top: 80px;
}
.ugd-playingvideo-3 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-playingvideo-3.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-playingvideo-3.show {
    background-position: 46px 20px !important;
}
.ugd-playingvideo-3 .content {
	padding-top: 130px;
}
.ugd-playingvideo-3.show .content {
	padding-top: 80px;
}
.ugd-playingvideo-4 {
	height: 256px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-playingvideo-4.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-playingvideo-4.show {
    background-position: 46px 20px !important;
}
.ugd-playingvideo-4 .content {
	padding-top: 130px;
}
.ugd-playingvideo-4.show .content {
	padding-top: 80px;
}
.ugd-playingvideo-hbo {
	height: 460px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-playingvideo-hbo.png") no-repeat;
    background-position: 0px 120px;
}
.ugd-playingvideo-hbo.show {
    background-position: 0px 20px !important;
}
.ugd-playingvideo-hbo .content {
	padding-top: 34px;
}
.ugd-playingvideo-hbo.show .content {
	padding-top: 0px;
}

.ugd-playingvideo-hbo-tc {
	height: 460px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-playingvideo-hbo_tc.png") no-repeat;
    background-position: 0px 120px;
}
.ugd-playingvideo-hbo-tc.show {
    background-position: 0px 20px !important;
}
.ugd-playingvideo-hbo-tc .content {
	padding-top: 34px;
}
.ugd-playingvideo-hbo-tc.show .content {
	padding-top: 0px;
}

.ic-content.ic-watchontv {
	background: url("../../img/user-guide-images/template/nowplayer/ic_watchontv.png") no-repeat;
	background-position: 0px 4px;
}
.ic-content.ic-subtitlesandaudio {
	background: url("../../img/user-guide-images/template/nowplayer/ic_subtitlesandaudio.png") no-repeat;
	background-position: 0px 4px;
}
.ic-content.ic-backward10sec {
	background: url("../../img/user-guide-images/template/nowplayer/ic_backward10sec.png") no-repeat;
	background-position: 0px 4px;
}
.ic-content.ic-minimizevideo {
	background: url("../../img/user-guide-images/template/nowplayer/ic_minimizevideo.png") no-repeat;
	background-position: 0px 4px;
}
.block-ugd .content .ic-content {
	padding-left: 54px;
}
/* ========== userguide tv guide ========== */
.ugd-tvguide-1 {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-1.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-1.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-1 .content {
	padding-top: 116px;
}
.ugd-tvguide-1.show .content {
	padding-top: 66px;
}
.ugd-tvguide-2 {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-2.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-2.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-2 .content {
	padding-top: 110px;
}
.ugd-tvguide-2.show .content {
	padding-top: 60px;
}
.ugd-tvguide-3 {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-3.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-3.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-3 .content {
	padding-top: 100px;
}
.ugd-tvguide-3.show .content {
	padding-top: 50px;
}
.ugd-tvguide-4 {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-4.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-4.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-4 .content {
	padding-top: 90px;
}
.ugd-tvguide-4.show .content {
	padding-top: 30px;
}
.ugd-tvguide-5 {
	height: 460px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-5.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-5.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-5 .content {
	padding-top: 74px;
}
.ugd-tvguide-5.show .content {
	padding-top: 40px;
}

.ugd-tvguide-1-tc {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-1_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-1-tc.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-1-tc .content {
	padding-top: 116px;
}
.ugd-tvguide-1-tc.show .content {
	padding-top: 66px;
}
.ugd-tvguide-2-tc {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-2_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-2-tc.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-2-tc .content {
	padding-top: 110px;
}
.ugd-tvguide-2-tc.show .content {
	padding-top: 60px;
}
.ugd-tvguide-3-tc {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-3_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-3-tc.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-3-tc .content {
	padding-top: 100px;
}
.ugd-tvguide-3-tc.show .content {
	padding-top: 50px;
}
.ugd-tvguide-4-tc {
	height: 246px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-4_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-4-tc.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-4-tc .content {
	padding-top: 90px;
}
.ugd-tvguide-4-tc.show .content {
	padding-top: 30px;
}
.ugd-tvguide-5-tc {
	height: 460px;
	background: url("../../img/user-guide-images/template/nowplayer/ugd-tvguide-5_tc.png") no-repeat;
    background-position: 46px 120px;
}
.ugd-tvguide-5-tc.show {
    background-position: 46px 20px !important;
}
.ugd-tvguide-5-tc .content {
	padding-top: 74px;
}
.ugd-tvguide-5-tc.show .content {
	padding-top: 40px;
}


.bg-userguide .block-ugd .content .ic-content {
	padding-left: 54px;
    min-height: 38px;
}
.ic-content.ic-addwatchlist {
	background: url("../../img/user-guide-images/template/nowplayer/ic_addwatchlist.png") no-repeat;
	background-position: 0px 4px;
}
.ic-content.ic-otherstimes {
	background: url("../../img/user-guide-images/template/nowplayer/ic_othertimes.png") no-repeat;
	background-position: 0px 4px;
}
.ic-content.ic-ondemand {
	background: url("../../img/user-guide-images/template/nowplayer/ic_ondemand.png") no-repeat;
	background-position: 0px 4px;
}
.ic-content.ic-recording {
	background: url("../../img/user-guide-images/template/nowplayer/ic_recording.png") no-repeat;
	background-position: 0px 4px;
}


/* =============================================================================
   now player faq 
   ========================================================================== */
.app-section-faq .main .main-content {
	padding: 30px 24px 20px;
}
.faq-section {
	padding-top: 20px;
	padding-bottom: 20px;
}
.faq-list {
}
.faq-list .faq-cat {
	background: #4f5052;
	padding: 12px 40px 12px 40px;
	cursor: pointer;
	font-size: 16px;
	color: #FFF;
    position: relative;
}
.faq-list .faq-answers {
	background: #222223;
	padding: 20px 20px 10px 40px;
	display: none;
	font-size: 20px;
	color: #FFF;
}
.faq-list .faq-answers li {
	padding-bottom: 20px;
}
.faq-list .faq-block {
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
	opacity: 0;
    margin-bottom: 4px;
}
.faq-list .faq-block.show {
	opacity: 1;
}
.ic-plus {
	height: 20px;
	width: 20px;
	background: url(../../img/user-guide-images/ui/icon_plus_w.png) center center no-repeat;
}

.faq-list .faq-block .ic-plus {
    position: absolute;
    right: 10px;
    top: 14px;
    margin-right: 0px;
    color: #ecf0f1;
	background: url("../../img/user-guide-images/ui/icon_plus_w.png") center center no-repeat;
    width: 20px;
    height: 20px;
    border: 0;
    font-size: 1.5em;
/*     position: relative; */
    outline: none;
    margin-top: -2px;
}
.faq-list .faq-block.active .ic-plus {
	background: url("../../img/user-guide-images/ui/icon_plus_c_w.png") center center no-repeat;
}
/* 
.faq-list .faq-block .ic-plus span {
    content: "";
    position: absolute;
    transition: 0.6s;
    background: #fff;
}
.faq-list .faq-block .ic-plus span:first-of-type {
    top: 10%;
    bottom: 10%;
    width: 2px;
    left: 48%;
}
.faq-list .faq-block.active .ic-plus span:first-of-type {
	top: 50%;
	bottom: 50%;
}
.faq-list .faq-block .ic-plus span:last-of-type {
    left: 10%;
    right: 10%;
    height: 2px;
    top: 44%;
}
 */

.faq-list .faq-block.active .ic-plus{
}
.faq-list .faq-answers .faq-qt, .faq-list .faq-answers .faq-at {
	margin: 0px 0px 4px 0px;
	font-size: 16px;
}
.faq-list .faq-answers .faq-qt a, .faq-list .faq-answers .faq-at a {
	color: #f18e35;
}
.faq-list .faq-answers .faq-qt {
	margin-bottom: 8px;
    line-height: 24px;
}
.faq-list .faq-answers .faq-at {
	padding-left: 20px;
    line-height: 22px;
    color: #999999;
    margin-bottom: 12px;
}
@media (max-width: 960px) {
	.formobile {
		width: 95%;
		margin: 0px auto;
	}
	
	.formobile .bg-userguide .block-ugd .header-2 {
	    line-height: 24px;
	}
	
	/* FAQ */
	.faq-list .faq-cat {
	    padding: 12px 30px 12px 16px;
		position: relative;
	}
	.faq-list .faq-answers {
    	padding: 20px 20px 10px 20px;
	}
	.faq-list .faq-block .ic-plus {
		position: absolute;
		right: 10px;
		top: 14px;
	}
	
	/* User Guide */
	.formobile .block-left .content, .formobile .block-right .content {
		width: 100%;
		float: none;
		padding-right: 0px;
		padding-left: 0px;
		padding-top: 300px;
	}
	.formobile .block-left.show .content, .formobile .block-right.show .content {
		padding-top: 300px;
	}
	.formobile .ug-1, .formobile .ug-2, .formobile .ug-3, .formobile .ug-4, .formobile .ug-5, .formobile .ug-6,
	.formobile .ug-1-tc, .formobile .ug-2-tc, .formobile .ug-3-tc, .formobile .ug-4-tc, .formobile .ug-5-tc, .formobile .ug-6-tc {
		height: auto;
		background-position: center 20px;
	}	
	.formobile .ug-1.show, .formobile .ug-2.show, .formobile .ug-3.show, .formobile .ug-4.show, .formobile .ug-5.show, .formobile .ug-6.show,
	.formobile .ug-1-tc.show, .formobile .ug-2-tc.show, .formobile .ug-3-tc.show, .formobile .ug-4-tc.show, .formobile .ug-5-tc.show, .formobile .ug-6-tc.show {
		background-position: center 20px !important;
	}
	.formobile .ug-5.show .content, .formobile .ug-5-tc.show .content {
		padding-top: 400px;
	}
	.formobile .ug-6.show .content, .formobile .ug-6-tc.show .content {
		padding-top: 500px;
	}
	
	/* User Guide Detail */
	.formobile .ugd-home-1, .formobile .ugd-home-2, .formobile .ugd-home-3, .formobile .ugd-home-4, .formobile .ugd-home-5,
	.formobile .ugd-home-1-tc, .formobile .ugd-home-2-tc, .formobile .ugd-home-3-tc, .formobile .ugd-home-4-tc, .formobile .ugd-home-5-tc {
		height: auto;
		background-position: center 20px;
	}	
	.formobile .ugd-home-1.show, .formobile .ugd-home-2.show, .formobile .ugd-home-3.show, .formobile .ugd-home-4.show, .formobile .ugd-home-5.show,
	.formobile .ugd-home-1-tc.show, .formobile .ugd-home-2-tc.show, .formobile .ugd-home-3-tc.show, .formobile .ugd-home-4-tc.show, .formobile .ugd-home-5-tc.show {
		background-position: center 20px !important;
	}
	.formobile .bg-userguide .block-ugd.block-left .content, .formobile .bg-userguide .block-ugd.block-right .content {
		width: 100%;
		padding-right: 0px;
		margin-left: 0
	}
	
	/* User Guide My Now */
	.formobile .ugd-mynow-1, .formobile .ugd-mynow-2, .formobile .ugd-mynow-3, .formobile .ugd-mynow-4, .formobile .ugd-mynow-5,
	.formobile .ugd-mynow-1-tc, .formobile .ugd-mynow-2-tc, .formobile .ugd-mynow-3-tc, .formobile .ugd-mynow-4-tc, .formobile .ugd-mynow-5-tc {
		background-position: center 20px !important;
		height: auto;
	}
	
	/* User Guide On Demand */
	.formobile .ugd-ondemand-1, .formobile .ugd-ondemand-2, .formobile .ugd-ondemand-3, .formobile .ugd-ondemand-4, .formobile .ugd-ondemand-5,
	.formobile .ugd-ondemand-1-tc, .formobile .ugd-ondemand-2-tc, .formobile .ugd-ondemand-3-tc, .formobile .ugd-ondemand-4-tc, .formobile .ugd-ondemand-5-tc {
		background-position: center 20px !important;
		height: auto;
	}
	
	/* User Guide Video Playing */
	.formobile .ugd-playingvideo-1, .formobile .ugd-playingvideo-2, .formobile .ugd-playingvideo-3, .formobile .ugd-playingvideo-4, .formobile .ugd-playingvideo-5,
	.formobile .ugd-playingvideo-1-tc, .formobile .ugd-playingvideo-2-tc, .formobile .ugd-playingvideo-3-tc, .formobile .ugd-playingvideo-4-tc, .formobile .ugd-playingvideo-5-tc {
		background-position: center 20px !important;
		height: auto;
	}
	/* User Guide TV Guide */
	.formobile .ugd-tvguide-1, .formobile .ugd-tvguide-2, .formobile .ugd-tvguide-3, .formobile .ugd-tvguide-4, .formobile .ugd-tvguide-5,
	.formobile .ugd-tvguide-1-tc, .formobile .ugd-tvguide-2-tc, .formobile .ugd-tvguide-3-tc, .formobile .ugd-tvguide-4-tc, .formobile .ugd-tvguide-5-tc {
		background-position: center 20px !important;
		height: auto;
	}
	
	.formobile .nav-back {
    	margin: 0px 40px 20px;
    	padding-top: 0px;
	}
	
	.block-left .content { margin-left:0}
}
@media (max-width: 600px) {
	.formobile {
		width: 100%;
		margin: 0px auto;
	}
	.formobile .bg-userguide .block-fw {
		margin: 20px;
	}
	.formobile .block-left.show .content, .formobile .block-right.show .content {
		padding-top: 300px;
	}
	.formobile .ug-5.show .content {
		padding-top: 400px;
	}
	.formobile .ug-6.show .content {
		padding-top: 500px;
	}
	.formobile .bg-userguide .block-fw .header-2 {
		line-height: 34px;
	}
}
@media (max-width: 500px) {
	.formobile {
	    padding-top: 0px;
	}
	.formobile .block-left.show .content, .formobile .block-right.show .content {
		padding-top: 340px;
	}
	.formobile .ug-1.show, .formobile .ug-2.show, .formobile .ug-3.show, .formobile .ug-4.show, .formobile .ug-5.show, .formobile .ug-6.show,
	.formobile .ug-1-tc.show, .formobile .ug-2-tc.show, .formobile .ug-3-tc.show, .formobile .ug-4-tc.show, .formobile .ug-5-tc.show, .formobile .ug-6-tc.show {
		background-size: 240px;
	}
	.formobile .ug-1.show .content, .formobile .ug-2.show .content, .formobile .ug-3.show .content, .formobile .ug-4.show .content, .formobile .ug-5.show .content, .formobile .ug-6.show .content,
	.formobile .ug-1-tc.show .content, .formobile .ug-2-tc.show .content, .formobile .ug-3-tc.show .content, .formobile .ug-4-tc.show .content, .formobile .ug-5-tc.show .content, .formobile .ug-6-tc.show .content {
		padding-top: 220px;
	}
	.formobile .ug-5.show .content, .formobile .ug-5-tc.show .content {
		padding-top: 280px;
	}
	.formobile .ug-6.show .content, .formobile .ug-6-tc.show .content {
		padding-top: 300px;
	}
	/* User Guide Detail */
	.formobile .ugd-home-1.show, .formobile .ugd-home-2.show, .formobile .ugd-home-3.show, .formobile .ugd-home-4.show, .formobile .ugd-home-5.show,
	.formobile .ugd-home-1-tc.show, .formobile .ugd-home-2-tc.show, .formobile .ugd-home-3-tc.show, .formobile .ugd-home-4-tc.show, .formobile .ugd-home-5-tc.show {
		background-size: contain;
	}
	.formobile .ugd-home-1.show .content, .formobile .ugd-home-2.show .content, .formobile .ugd-home-3.show .content,
	.formobile .ugd-home-1-tc.show .content, .formobile .ugd-home-2-tc.show .content, .formobile .ugd-home-3-tc.show .content {
	    padding-top: 300px;
	}
	.formobile .ugd-home-4.show .content, .formobile .ugd-home-4-tc.show .content {
	    padding-top: 400px;
	}
	.formobile .ugd-home-5.show .content, .formobile .ugd-home-5-tc.show .content {
	    padding-top: 360px;
	}
	/* User Guide My Now */
	.formobile .ugd-mynow-1, .formobile .ugd-mynow-2, .formobile .ugd-mynow-3, .formobile .ugd-mynow-4, .formobile .ugd-mynow-5, {
		background-size: contain;
	}
	.formobile .ugd-mynow-1 .content, .formobile .ugd-mynow-2 .content, .formobile .ugd-mynow-3 .content, .formobile .ugd-mynow-4 .content, .formobile .ugd-mynow-5 .content,
	.formobile .ugd-mynow-1-tc .content, .formobile .ugd-mynow-2-tc .content, .formobile .ugd-mynow-3-tc .content, .formobile .ugd-mynow-4-tc .content, .formobile .ugd-mynow-5-tc .content {
	    padding-top: 280px !important;
	}
	/* User Guide On Demand */
	.formobile .ugd-ondemand-1, .formobile .ugd-ondemand-2, .formobile .ugd-ondemand-3, .formobile .ugd-ondemand-4, .formobile .ugd-ondemand-5 {
		background-size: contain;
	}
	.formobile .ugd-ondemand-1 .content, .formobile .ugd-ondemand-2 .content, .formobile .ugd-ondemand-3 .content, .formobile .ugd-ondemand-4 .content, .formobile .ugd-ondemand-5 .content,
	.formobile .ugd-ondemand-1-tc .content, .formobile .ugd-ondemand-2-tc .content, .formobile .ugd-ondemand-3-tc .content, .formobile .ugd-ondemand-4-tc .content, .formobile .ugd-ondemand-5-tc .content {
		padding-top: 340px !important;
	}
	/* User Guide Video Playing */
	.formobile .ugd-playingvideo-1, .formobile .ugd-playingvideo-2, .formobile .ugd-playingvideo-3, .formobile .ugd-playingvideo-4, .formobile .ugd-playingvideo-5 {
		background-size: contain;
	}
	.formobile .ugd-playingvideo-1 .content, .formobile .ugd-playingvideo-2 .content, .formobile .ugd-playingvideo-3 .content, .formobile .ugd-playingvideo-4 .content, .formobile .ugd-playingvideo-5 .content,
	.formobile .ugd-playingvideo-1-tc .content, .formobile .ugd-playingvideo-2-tc .content, .formobile .ugd-playingvideo-3-tc .content, .formobile .ugd-playingvideo-4-tc .content, .formobile .ugd-playingvideo-5-tc .content {
		padding-top: 340px !important;
	}
	/* User Guide TV Guide */
	.formobile .ugd-tvguide-1, .formobile .ugd-tvguide-2, .formobile .ugd-tvguide-3, .formobile .ugd-tvguide-4, .formobile .ugd-tvguide-5 {
		background-size: contain;
	}
	.formobile .ugd-tvguide-1 .content, .formobile .ugd-tvguide-2 .content, .formobile .ugd-tvguide-3 .content, .formobile .ugd-tvguide-4 .content, .formobile .ugd-tvguide-5 .content,
	.formobile .ugd-tvguide-1-tc .content, .formobile .ugd-tvguide-2-tc .content, .formobile .ugd-tvguide-3-tc .content, .formobile .ugd-tvguide-4-tc .content, .formobile .ugd-tvguide-5-tc .content {
		padding-top: 340px !important;
	}
}
@media (max-width: 400px) {
	/* User Guide Detail */
	.formobile .ugd-home-1.show, .formobile .ugd-home-2.show, .formobile .ugd-home-3.show, .formobile .ugd-home-4.show, .formobile .ugd-home-5.show {
		background-size: contain;
	}
	.formobile .ugd-home-1.show .content, .formobile .ugd-home-2.show .content, .formobile .ugd-home-3.show .content, .formobile .ugd-home-4.show .content, .formobile .ugd-home-5.show .content,
	.formobile .ugd-home-1-tc.show .content, .formobile .ugd-home-2-tc.show .content, .formobile .ugd-home-3-tc.show .content, .formobile .ugd-home-4-tc.show .content, .formobile .ugd-home-5-tc.show .content {
	    padding-top: 240px;
	}
	.formobile .ugd-home-4.show .content, .formobile .ugd-home-4-tc.show .content {
	    padding-top: 300px;
	}
	.formobile .ugd-home-5.show .content, .formobile .ugd-home-5-tc.show .content {
	    padding-top: 280px;
	}
	/* User Guide My Now */
	.formobile .ugd-mynow-1, .formobile .ugd-mynow-2, .formobile .ugd-mynow-3, .formobile .ugd-mynow-4, .formobile .ugd-mynow-5 {
		background-size: contain;
	}
	.formobile .ugd-mynow-1 .content, .formobile .ugd-mynow-2 .content, .formobile .ugd-mynow-3 .content, .formobile .ugd-mynow-4 .content, .formobile .ugd-mynow-5 .content,
	.formobile .ugd-mynow-1-tc .content, .formobile .ugd-mynow-2-tc .content, .formobile .ugd-mynow-3-tc .content, .formobile .ugd-mynow-4-tc .content, .formobile .ugd-mynow-5-tc .content {
		padding-top: 260px !important;  
	}
	/* User Guide On Demand */
	.formobile .ugd-ondemand-1, .formobile .ugd-ondemand-2, .formobile .ugd-ondemand-3, .formobile .ugd-ondemand-4, .formobile .ugd-ondemand-5 {
		background-size: contain;
	}
	.formobile .ugd-ondemand-1 .content, .formobile .ugd-ondemand-2 .content, .formobile .ugd-ondemand-3 .content, .formobile .ugd-ondemand-4 .content, .formobile .ugd-ondemand-5 .content,
	.formobile .ugd-ondemand-1-tc .content, .formobile .ugd-ondemand-2-tc .content, .formobile .ugd-ondemand-3-tc .content, .formobile .ugd-ondemand-4-tc .content, .formobile .ugd-ondemand-5-tc .content {
		padding-top: 280px !important;  
	}
	/* User Guide Video Playing */
	.formobile .ugd-playingvideo-1, .formobile .ugd-playingvideo-2, .formobile .ugd-playingvideo-3, .formobile .ugd-playingvideo-4, .formobile .ugd-playingvideo-5 {
		background-size: contain;
	}
	.formobile .ugd-playingvideo-1 .content, .formobile .ugd-playingvideo-2 .content, .formobile .ugd-playingvideo-3 .content, .formobile .ugd-playingvideo-4 .content, .formobile .ugd-playingvideo-5 .content,
	.formobile .ugd-playingvideo-1-tc .content, .formobile .ugd-playingvideo-2-tc .content, .formobile .ugd-playingvideo-3-tc .content, .formobile .ugd-playingvideo-4-tc .content, .formobile .ugd-playingvideo-5-tc .content {
		padding-top: 280px !important;  
	}
	/* User Guide TV Guide */
	.formobile .ugd-tvguide-1, .formobile .ugd-tvguide-2, .formobile .ugd-tvguide-3, .formobile .ugd-tvguide-4, .formobile .ugd-tvguide-5 {
		background-size: contain;
	}
	.formobile .ugd-tvguide-1 .content, .formobile .ugd-tvguide-2 .content, .formobile .ugd-tvguide-3 .content, .formobile .ugd-tvguide-4 .content, .formobile .ugd-tvguide-5 .content,
	.formobile .ugd-tvguide-1-tc .content, .formobile .ugd-tvguide-2-tc .content, .formobile .ugd-tvguide-3-tc .content, .formobile .ugd-tvguide-4-tc .content, .formobile .ugd-tvguide-5-tc .content {
		padding-top: 260px !important;  
	}
}
@media (max-width: 310px) {
	.formobile .block-left.show .content, .formobile .block-right.show .content {
		padding-top: 180px !important;  
	}
	.formobile .ugd-home-4.show .content, .formobile .ugd-home-4-tc.show .content {
	    padding-top: 220px;
	}
	.formobile .ugd-home-5.show .content, .formobile .ugd-home-5-tc.show .content {
	    padding-top: 220px;
	}
	.formobile .ug-1.show, .formobile .ug-2.show, .formobile .ug-3.show, .formobile .ug-4.show, .formobile .ug-5.show, .formobile .ug-6.show,
	.formobile .ug-1-tc.show, .formobile .ug-2-tc.show, .formobile .ug-3-tc.show, .formobile .ug-4-tc.show, .formobile .ug-5-tc.show, .formobile .ug-6-tcshow {
		background-size: 240px;
	}
	.formobile .ug-5.show .content, .formobile .ug-5-tc.show .content {
		padding-top: 260px !important;  
	}
	.formobile .ug-6.show .content, .formobile .ug-6-tc.show .content {
		padding-top: 300px !important;  
	}
	.formobile .ugd-home-4.show .content, .formobile .ugd-home-4-tc.show .content {
	    padding-top: 220px !important; 
	}
	.formobile .ugd-home-5.show .content, .formobile .ugd-home-5-tc.show .content {
	    padding-top: 200px !important; 
	}
}