@charset "utf-8";

/* z-index sits between 100 - 1000 */

body,h1, h2, h3, h4, h5, h6 {
}
a {
color: #1c64ad;
text-decoration: none;
}
a:hover {
color: #c93;
cursor: pointer;
padding-bottom: 2px;
border-bottom: #c93 1px solid;
}

body #hkecl-container {
	background: #b1f582 url('images/etv/etv_BG(b1f582)_compressed.jpg') 100% 0 repeat-x;
}

.hkecl-page-container {
	background-color: #FFF;
}
.linebreak { border-bottom: dotted 3px #717171; margin:10px 0; display:block; }

/**************************
 * Top Bar
 **************************/

#hkecl-topbar .hkecl-page-container {
	background-color: #fff;

}

.hkecl-page-container {
}


/**************************
 * Upper, treat in sepearate CSS
 **************************/


/**************************
 * Columns Container
 **************************/
.layout-2nd.search #hkecl-columns-container {
margin-top: 0px;
z-index: 0;
}
.layout-2nd.search #hkecl-columns-container article{
	padding: .5em 0;
}
.layout-2nd.search #hkecl-columns-container article .article-image-container a:hover {
	border-bottom:none;
}
#hkecl-columns-container a.visited{
	color:#58741A;
}
		/**************************
		 * Content & side bar
		 **************************/

		#hkecl-content {
				/*padding: 20px;*/
		}

		#hkecl-side {
				/*padding: 15px;
				padding-top: 10px;*/
		}

		/* mobile */
		#hkecl-content {
				/*width: 100%;*/
		}

		#hkecl-side {
				/*width: 100%;*/
		}
		
		.layout-index #hkecl-content {
						/*background-image: url('images/banner_bkg04.jpg');*/
						background-repeat: no-repeat;
				}

		.layout-index #hkecl-content h2 {
				margin-bottom: 10px;
		}
				
		.layout-index #hkecl-columns-container {
						padding: 0;
				}
		
		.layout-2nd.search #hkecl-side {
					display:none;
				}
		.layout-2nd.search #hkecl-content {
						width: 100%;
				}
		
		.layout-2nd.no-side #hkecl-side {
				display: none;
		}
		
		.layout-2nd.no-side #hkecl-content {
				width: 100%;
		}
		
		.layout-3rd #hkecl-side {
					display:block;
					
				}
		.layout-3rd #hkecl-content {
						width: 100%;
				}
				
		@media all and (min-width: 650px) {
				#hkecl-side {
						padding-top: 70px;

				}

				#hkecl-content {
						width: 100%;
				}

				#hkecl-side {
						width: 100%;
						display:none;
				}
				.layout-2nd #hkecl-side {
					width: 100%;
					display:block;
				}
		}
		
		
		@media all and (min-width: 750px) {
			.layout-3rd #hkecl-side {}
			.layout-3rd #hkecl-content {}
		}

		@media all and (min-width: 850px) {
				#hkecl-content {

				}
				.layout-2nd #hkecl-content {
						width: 68%;
				}
				.layout-2nd #hkecl-side {
					width: 30%;
						display:block;
				}
		}

		@media all and (min-width: 960px) {
				#hkecl-content {

				}

				#hkecl-side {

				}
		}

.bootstrap-style table tr:nth-child(1) {
  background-color: #eee;
}
.bootstrap-style table th {
  font-weight: bold;
}
    
.read_more_content {
  display: none;
}
.read_more_label {
  font-weight: bold;
  font-size: 90%;
}
.read_more_label a {
  color: darkgrey !important;
}

.show_more_content {
  display: none;
}
.show_more_label {
  display: none;
  position: absolute;
  top: 2px;
  left: 0;
  right: auto;
  width: 90px;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  cursor: pointer;
}
.show_more_label:hover {
  background: rgba(0, 0, 0, 0.8);
}
.show_more_label span {
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  margin-top: 7%;
  font-size: 18pt;
}
@media all and (min-width: 480px) {
  .show_more_label {
    left: auto;
    right: 0;
    width: 60%;
    height: 50%;
  }
  .show_more_label span {
    margin-top: 24%;
    font-size: 24pt;
  }
}


/**************************
 * Pseudo Side
 **************************/

.channel-infostructure {
	position: relative;
}

		.channel-infostructure #content-body{

		}

		.channel-infostructure .channel-pseudo-side{

		}
		
		.layout-3rd #hkecl-content .channel-infostructure .channel-pseudo-side h2 {
			border-bottom: 1px solid #717171;
		}
		
@media all and (min-width: 800px) {
	
	.channel-infostructure {
	}

		.channel-infostructure #content-body{

		}

		.channel-infostructure .channel-pseudo-side{
			position: absolute;

		}

	.channel-infostructure #content-body{
		width: 68%;
		float: left;
		padding: 5px;
	}
	.channel-infostructure .channel-pseudo-side{
		margin-left: 71%;
		padding-top: 1px;
    width: 29%;
	}
	
	.channel-infostructure .channel-pseudo-side > div {
		display: block;
		margin-bottom: 25px;
	}
	
	.related-articles {
		width: 100%;
		display: block;
	}
	
	.comment-container {
		width: 70%;
		display: block;
	}
}



/**************************
 * Footer
 **************************/

#hkecl-footer .hkecl-page-container {

}

#hkecl-footer-content {
		color: #777;
		letter-spacing: 1px;

}




/**************************
 * FAVORITES CONTAINER OF INDEX PAGE
 **************************/

.channel-favorites-pack {
	text-align: center;
}

#hkecl-content h1, #hkecl-content h2, #hkecl-content .hkecl-h2 {
	font-size:200%;
		border-bottom: dotted 3px #717171;
}
.layout-3rd #hkecl-content h2 {
	font-size:150%;
	border-bottom: none;
	margin-top:30px;
}
ul, li {
	padding: 0;
}

h3 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#hkecl-side h2, .layout-3rd #hkecl-side h2, #hkecl-side .hkecl-h3 {
	border-bottom: 1px solid #717171;
}

#channel-pack {
	top: 60px;
}

.layout-2nd #channel-pack {
	/*top: 20px;*/
}


/* for etv, channel pack tune down a bit, due to Logo strips */
#channel-pack {
	top: 85px;
	margin-right: 0;
}

.layout-2nd.series #channel-pack {

}
@media all and (min-width: 650px) {
	#channel-pack {
		top: 10px;
		margin-right: 20px; /* reset for LINE 287, etv */
	}
	.layout-2nd.series #channel-pack {

	}
	.layout-3rd #channel-pack {
		top: 0px;
	}
	
	.layout-3rd.static-content #channel-pack {
		top: 40px;
	}
}

@media all and (min-width: 850px) {
	.layout-2nd.series #channel-pack {
	top: 20px;
}
}







/* fixed on topbar, already updated in topbar.css */
#hkecl-topbar .fontscale-pack-top .fontscale-pack{
	margin-top: 5px;
	margin-bottom: -5px;
}

#hkecl-side-menu-container .channel-menu-content {
	background-color:#4e0066;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 h2, #hkecl-side-menu-container .channel-menu-content .nav-item.level-1 a.hkecl-h3 {
		color: #fcf77a;
}

body.layout-index.hkecl-style-switcher-on #channel-nav {
	border-bottom: 5px solid #333333;
}

@media all and (min-width: 750px) { 
	body.layout-index.hkecl-style-switcher-on #channel-nav {
		border-bottom: none;
	}
}

body.hkecl-style-switcher-on #hkecl-side-menu-container .channel-menu-content .nav-item.level-1 h3, 
#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 a.hkecl-h3 {
		color: #fff;
}

body.hkecl-style-switcher-on #hkecl-upper{
	/*background-image: none;*/
}

body.layout-index.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li a {
	color: #fff;
}

body.layout-2nd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li,
body.layout-3rd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li {
	/*background: #646262;*/
	background: #646262;
}

@media all and (min-width: 750px) {
	body.layout-2nd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li,
	body.layout-3rd.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li {
		background: transparent;
	}
}

body.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.active, body.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.selected {
	background: #333333;
}

.layout-index.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.active, .layout-index.hkecl-style-switcher-on #hkecl-upper #channel-nav ul li.selected {
	background-color: #474747;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 span.role-mainpage{
		display: none;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-2 {
		float: left;
		width: 95%;
		display: inline-block;
		margin-right: 10px;
}
#hkecl-side-menu-container .nav-item.level-2 a.hkecl-h4 {
text-decoration: none;
color: #fcf77a;
}
#hkecl-side-menu-container .nav-item.level-2 ul {
margin: 0 0 0.3em 0;
padding:0px;
}



/**************************
 * INDEX
 **************************/

body.layout-index {
}


.hkecl-content ul.inline-list {

}

.hkecl-content ul.inline-list li{
	display: inline;
	float: left;
	margin-right: 20px;
}

.hkecl-content img {

}

.subject-show-more {
  margin-top: 30px;
  color:#ffffff;
}

.layout-etv .subject-show-more {
	font-size: 1.1em;
}

.subject-show-more a{
  background-color: #575757;
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 5px;
  color:#ffffff;
}
.subject-show-more a:hover{
color: #575757;
padding-bottom: 0px;
border-bottom:none;
background-color: #c7c7c7;
}

/**************************
 * 2ND
 **************************/


body.layout-2nd #hkecl-side {
	padding: 50px 15px 15px 15px;
}


@media all and (min-width: 850px) {

body.layout-2nd #hkecl-side {
	padding: 75px 0px 15px 15px;
}
}

/**************************
 * side columns
 **************************/

#latest-news {
		width: 100%;
		margin-bottom: 50px;
}


#hkecl-content .article-list.thumbnail-list article {
		/*margin-right: 10px;
		margin-left: 10px;*/
}


.channel-show-more {
		margin-top: 30px;
}

.channel-show-more a{
		background-color: #c7c7c7;
		width: 100%;
		display: block;
		text-align: center;
		border-radius: 5px;
		padding-bottom: 2px;
		color:#FFFFFF;
}

.channel-show-more a:hover{
		padding-bottom: 1px;
		color:#C93;
}


/**************************
 * 3RD
 **************************/


.layout-3rd .favorites-pack {
	text-align: left;
}

@media all and (min-width: 640px) {
	.layout-3rd .favorites-pack {
		text-align: right;
	}
}

.channel_activities_calendar {
	margin: 0px 5px 50px 0px;
}

#hkecl-side .channel_activities_calendar h3{
	border-bottom: none;
	padding-bottom: 10px;
}

.channel_activities_calendar .calendar-component{
	border: 1px solid #c7c7c7;
	border-radius: 10px;
	padding: 10px;
}
.channel_activities_calendar .calendar-list li {
padding: 5px 0px;
}
.channel_activities_calendar .calendar-list li div.calendar-list-content {
	width: 80%;
	padding-bottom: 5px;
	min-height: 45px;
}

@media all and (min-width: 400px) {
		.channel_activities_calendar .calendar-list li div.calendar-list-content {
				width: 85%;
		}
}
@media all and (min-width: 580px) {
		.channel-partners .article-list article .article-content-wrapper h4 {
				font-size: 90%;
				font-weight: normal;
		}
		.channel_activities_calendar .calendar-list li div.calendar-list-content {
	width: 90%;
}
}
@media all and (min-width: 850px) {
		.channel_activities_calendar .calendar-list li div.calendar-list-content {
				width: 75%;
		}
}

/**************************
 * tag cloud
 **************************/

.tag-cloud {
	margin: 0px 5px 50px 0px;
}

.tag-cloud .tag-cloud-component{
	border: 1px solid #c7c7c7;
	padding: 10px;
	min-height: 300px;
	margin: 25px 2px 5px 2px;
}

.tag-cloud .tag-cloud-component a{
	margin-right: 15px;
}

@media all and (min-width: 400px) {

}
@media all and (min-width: 580px) {

}
@media all and (min-width: 850px) {

}
/**************************
* comment box
**************************/
.channel-comment img {
		 width: auto;
}

.resources-download {
		display: block;
		margin-bottom: 25px;
}

.resources-download ul {
		padding-top: 3px;
		padding-left: 10px;
}

.reference-materials {
		display: block;
		margin-bottom: 25px;
}



/** BREADCRUMBS */

@media all and (min-width: 650px) {
	.layout-3rd .breadcrumb {
		width: 80%;
	}

	.layout-3rd.eng .breadcrumb {
		width: 80%;
	}
}

@media all and (min-width: 900px) {
	.layout-3rd .breadcrumb {
		width: 85%;
	}

	.layout-3rd.eng .breadcrumb {
		width: 85%;
	}
}



.hkecl-content h1 {
		margin-top: 10px;
}

.hkecl-content .main-category {
		display: block;
}

@media all and (min-width: 650px) {
		.hkecl-content .main-category {
				max-width: 60%;
		}
}

.hkecl-content .sub-category {
		font-size: 70%;
}

.hkecl-content .breadcrumb-neo {
		display: none;
		font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

@media all and (min-width: 850px) {

		.hkecl-content .main-category {
				display: none;
		}
		.hkecl-content .sub-category {
				font-size: 100%;
				margin-left: 0px;
		}

		.hkecl-content .breadcrumb-neo {
				display: block;
				margin-top: -25px;
				margin-left: -25px;
		}

		.hkecl-content .breadcrumb-neo {
				/*background-image: url(images/title_bkg.jpg);*/
				background-repeat: no-repeat;
				max-width: 700px;
				background-size: 100%;
				margin-bottom: 30px;
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_growth {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_learn {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_school {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo.category-type-dir_sharing {
				/*background-image: url(images/title_bkg.jpg);*/
		}

		.hkecl-content .breadcrumb-neo h2, .hkecl-content .breadcrumb-neo div {
				font-size: 175%;
				font-weight: bold;
				color: #FFF;
				height: 70px;
				padding: 10px;
				margin: 0;
				-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
				-moz-box-sizing: border-box;    /* Firefox, other Gecko */
				-ms-box-sizing: border-box;     /* for IE8 */
				box-sizing: border-box;         /* Opera/IE 8+ */
		}

		.hkecl-content .breadcrumb-neo ul {
			background-color: #f8931c;
		}

		.hkecl-content .breadcrumb-neo ul li{
			float: left;
			display: inline-block;
			padding: 5px;
			padding-left: 20px;
			/*list-style-position: outside;
			list-style-image: none;
			list-style-type: disc;*/
		}

		.hkecl-content .breadcrumb-neo ul li a:before{
			content: "  ";
		}

		.hkecl-content .breadcrumb-neo ul li.active a{
			color: #fcf77a;
		}

		.hkecl-content .breadcrumb-neo ul li a{
			color: #fff;
		}

		.hkecl-content .breadcrumb-neo ul li a:hover{
				color: #fcf77a;
				border-bottom: none;
		}

}


/**************************
* new css ken
**************************/
#content-body ol {
		/*list-style: decimal;*/
		margin-left: 25px;
		margin-top: 10px;
		margin-bottom: 10px;
}

#content-body ul {
		/*list-style: outside;*/
		margin-left: 25px;
		margin-top: 10px;
		margin-bottom: 10px;
}

#content-body li{
		list-style-type: disc;
		/*float: left;*/
		/*padding-bottom: 20px;*/
}

/* fixed on 2016-01-21 */

#content-body ol li{
		list-style-type: decimal;
}

#content-body div.autoanchors li {
	list-style-type: none;
}

#content-body li li{
		padding-bottom: 0px;
}


/* delete on 24 June 2013 due to bug created on other spans */
/*
span {
	padding-left:30px;
	vertical-align: text-top;

}
*/

.hkecl-columns-container h1,
.hkecl-columns-container h2,
.hkecl-columns-container h3,
.hkecl-columns-container h4,
.hkecl-columns-container h5,
.hkecl-columns-container h6
{
	color: #454545;
}

article .article-content-wrapper .visited-article a{
	color:#58741A;
}
article .article-content-wrapper .visited-article a:hover {
	color: #C93;
}

.hkecl-date-selector img.icon_previous {
	float: left;
}

.hkecl-date-selector img.icon_next {
	float: right;
}

#hkecl-side-menu-container .menu-content.channel-menu-content .nav-item.level-1 a:hover {
border-bottom: #fcf77a 1px solid;
cursor: pointer;
color:#fcf77a;
}

#hkecl-side-menu-container .channel-menu-content .nav-item.level-1 a.hkecl-h3:hover {
	color: #fff;
	border-bottom: #fff 1px solid;
}

#paginate_top{
	clear:both;
	width:100%;
	margin-top: 10px;
}

.hkecl-content-page{
	display:none;
	clear:both;
}


/**************************
* event calendar
**************************/

.event-calendar-component, .news-calendar-component {
	border: 1px solid #c7c7c7;
	border-radius: 10px;
	padding: 20px;
	width: 98%;
	min-height: 380px;
}
.calendar-list li div.calendar-list-content {
width: 75%;
min-height: 45px;
}
.event-calendar, .news-calendar {
		width: 100%;
		margin-bottom:20px;
}

.event-calendar h1, .news-calendar h1{
	border-bottom:none;
		margin-top: 0;
		margin-bottom: 5px;
}
#hkecl-content .event-calendar h2, #hkecl-content .news-calendar h2{
		border-bottom: none;
		margin-top: 0;
		margin-bottom: 5px;
}

.calendar-list li {
	margin-top:5px;
	min-height: 45px;
	float: left;
	width: 100%;
}
.calendar-prev{
  display: inline-block;
  width: 40px;
  float: left;
}

.calendar-next{
  display: inline-block;
  width: 40px;
  float: right;
}

a.calendar-prev:hover,
a.calendar-next:hover {
  border-bottom: none;
}

.date_selector {width:98%; text-align:center;display: inline-block;border-bottom: 2px dotted #c8c8c8;}
.date_selector img.icon_previous {background-image: url(images/arrow_left.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:left;}
.date_selector img.icon_next {background-image:url(images/arrow_right.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:right;}
.date_selector img.icon_previous.dim {background-image: url(images/arrow_left_dim.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:left;}
.date_selector img.icon_next.dim{background-image:url(images/arrow_right_dim.png); background-repeat:no-repeat; width:40px; height:40px;vertical-align:middle; float:right;}
.date_selector img:hover {
-moz-opacity:0.5;
opacity:0.5;

}
.date_selector a:hover {
	padding-bottom:0px;
}
#divPProducts {
display:inline-block;
width: 98%;
}
#divPProducts div.resources-packages article {
border: none;
background-color: #ffffff;
margin-bottom: 20px;
}

@media all and (min-width: 480px) {
.calendar-list li div.calendar-list-content {
width: 80%;
}
.event-calendar {
	width: 100%;
	float: left;
}
.event-calendar-component, .news-calendar-component {
	width: 95%;
}
}
@media all and (min-width: 700px) {
.event-calendar {
	width: 50%;
}
.calendar-list li div.calendar-list-content {
width: 78%;
}
.event-calendar-component, .news-calendar-component {
	min-height:600px;
}
}
@media all and (min-width: 900px) {
.calendar-list li div.calendar-list-content {
width: 85%;
}
}

/* ------------------------------------
combined dev_root.css

-------------------------------------- */
#app{
		margin-bottom:30px;
		min-height:800px;
	}
#app_more{
	display:none;
}
#divPProducts .article-list{
	padding-bottom:10px;
}
#tagcloud {
border: 1px solid #BFBFBF;
padding: 0.5em;
}
.tag {
float: left;
margin: 0.2em 0.5em;
font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}
#repo{
	display:none;
}
.layout-index #app_box div.article-title {
font-size:112.5%;
}

.items-break {
padding: 0 10px;
/* when tag keywords goes too long */
display: inline-block;
}




















/**************************
 * DEMO Style
 * to show Layout Wireframe
 **************************/

		.bootstrap-style.demo {
			margin-bottom: 50px;
			background-color: #FFF9D1;
			padding: 20px;
			border-radius: 15px;
			border: #F9DD71 1px solid;
			margin-right: -10px;
		}
		
		.bootstrap-style.demo h2 {
		}
		
		.bootstrap-style.demo ul {
		}
		
		.bootstrap-style.demo ul li {
			list-style-type: disc;
			list-style-position: inside;
		}
		
		.bootstrap-style.demo i {
			color: #DB7D43;
		}
		
		.layout-3rd #hkecl-content .bootstrap-style.demo .demo-title {
			border-bottom: dotted 3px #717171;
			padding-bottom: 10px;
		}
		
		/* STYLES FOR SHOWING HKECL FRAMEWORK */
		
		.layout-demo #hkecl-upper {
			background-color: #0f0 !important;
			background-image: url(images/layout-demo/hkecl-upper.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}
		
		.layout-demo #hkecl-content {
			background-color: #F00 !important;
			background-image: url(images/layout-demo/hkecl-content.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}
		
		.layout-demo #hkecl-side {
			background-color: #00F !important;
			background-image: url(images/layout-demo/hkecl-side.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
			margin-left: 10px;
		}
		
		.layout-demo.layout-demo-2 .hkecl-columns-container {
			padding-top: 40px !important;
			background-color: #0FF !important;
			background-image: url(images/layout-demo/hkecl-columns-container.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}
		
		.layout-demo #hkecl-container {
			background-color: #F7E7E7 !important;
			background-image: none !important;
		}
		
		.layout-demo #container2 {
			background-color: #A2A26A !important;
			background-image: url(images/layout-demo/promotional-area.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
		}
		
		.layout-demo.layout-demo-2 #hkecl-upper > *,
		.layout-demo.layout-demo-2 #hkecl-content > *,
		.layout-demo.layout-demo-2 #hkecl-side > *,
		.layout-demo.layout-demo-2 #container2 > * 
		{
			visibility: hidden !important;
		}

		/* Show article list */
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .region.region-content {
			visibility: visible !important;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .region.region-content > * {
			visibility: hidden !important;
		}
		
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .region.region-content .resources-packages > * {
			visibility: visible !important;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .region.region-sidebar-first {
			visibility: visible !important;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list {
			padding-top: 40px !important;
			background-color: #0CF !important;
			background-image: url(images/layout-demo/resources-packages.png) !important;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			border: 3px dashed;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-image-container,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-image-container{
			background-color: #0F1;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-image-container > *,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-image-container > *{
				visibility: hidden !important;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-content-wrapper,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-content-wrapper{
			background-color: #A8A7B9;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .article-content-wrapper > *,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list .article-content-wrapper > *{
					visibility: hidden !important;
		}
		
		
		/* Index page layout*/
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages,
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-side .article-list {
			visibility: visible !important;
		}
		
		.layout-demo.layout-demo-2.layout-demo-3 #hkecl-content .resources-packages .added-to-ebs .article-image-container {
			background-image: none;
		}

























/**************************
 * CUSTOM Styles Starts
 **************************/

@media screen and (min-width: 700px) {
	.layout-index .swiper-banner-image img {
		height: 220px;
	}
}

.layout-2nd div.resources-packages {
	margin-top: 0;
}

.layout-2nd .category-description {
	display: none;
}

.browse-sorting-option {
	text-align: right;
}

.kla-browsing-option select,
.browse-sorting-option select {
	background-color: #F0F0F0;
	padding: 3px 10px;
	border-radius: 5px;
}

.kla-browsing-option .indent {
}

.kla-browsing-option .indent-twice {
}	
.kla-browsing-option .indent-third {
}

.kla-browsing-option select{
	width: 100%;
}

@media screen and (min-width: 550px) {
.kla-browsing-option { width: 50%; float: left; }
.kla-browsing-option select {width: auto;}
.browse-sorting-option { margin-left: 50%; }
}
.browse-sorting-option select option{
}

/* MENU */

#hkecl-upper #channel-nav-sec .menu-content .nav-item.level-2 {
		min-height: 0px !important;
}

.browse-sorting-option {
	text-align: right;
	margin-top: 10px;
}

div.resources-packages article .article-content-wrapper .hkecl-channel-customized.resources-avaliable {
	display: block;
}

div.resources-packages.type-thumbnail-related-article article .article-content-wrapper .hkecl-channel-customized,
div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper .hkecl-channel-customized {
	display: none;
}

div.resources-packages.type-thumbnail-related-article article, div.resources-packages.type-thumbnail-related-article-2 article {
	position: relative;
}

@media all and (min-width: 480px) {
  div.resources-packages.type-thumbnail-related-article article {
    margin: 0 5px;
    width: 180px !important;
    float: none !important;
    vertical-align: text-top;
  }
}

div.resources-packages.type-thumbnail-small-5 article .article-content-wrapper p.desc,
div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper p.desc {
	display: none;
}

.layout-index div.resources-packages.type-thumbnail-small-2 article,
.layout-index div.resources-packages.type-thumbnail-small-5 article,
.layout-2nd div.resources-packages.type-thumbnail-small-2 article {
	border: none !important;
}

.layout-index div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.category-field,
.layout-index div.resources-packages.type-thumbnail-small-5 article .hkecl-channel-customized.category-field {
	display: block;
	text-align: left;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 5px;
}

.layout-index div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.category-field a,
.layout-index div.resources-packages.type-thumbnail-small-5 article .hkecl-channel-customized.category-field a {
	color: #669e1e;
}



















/*
	TTV RELATED VIDEO OVERLAY**/
div.resources-packages article .article-image-container a {
    padding: 0;
    /* height: 99.31px; */
}

div.resources-packages article .article-image-container {
	max-width: 380px !important;
}

div.resources-packages article .article-image-container img {
	max-width: 380px !important;
}

div.resources-packages article .article-image-container a .hkecl-channel-customized.vid-overlay{
		display: block !important;
		margin-top: -7px;
		position: relative;
		line-height: 20px;
		background-color: #000;
		margin-bottom: 10px;
}

div.resources-packages article .article-image-container a .hkecl-channel-customized.vid-overlay span{
		font-size: 12px;
		background-color: #000;
		color: #fff;
		padding: 1px 7px;
}

div.resources-packages article .article-image-container a .hkecl-channel-customized.vid-overlay .vid-view-counts{
		float: left;
		padding-left: 25px;
		background-image: url(//staticm1.hkedcity.net/article_list/css/images/view-counts.png);
		background-repeat: no-repeat;
		background-position: 5px 5px;
}



div.resources-packages article .article-image-container a .hkecl-channel-customized.vid-overlay .vid-length{
		float: right;
}

div.resources-packages.type-thumbnail-small-5 article .article-content-wrapper,
div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper {
	margin-top: -15px;
}



/* article page**/

#content-info {
}

#content-info span{
	display: block;
}

@media all and (min-width: 640px) {
	.video-bluepage-content-info #content-info {
		float: left;
		width: 60%;
	}
	
	.video-bluepage-content-info .favorites-pack {
		margin-left: 60%;
	}
}

@media all and (min-width: 800px) {
	.video-bluepage-content-info #content-info {
		float: left;
		width: 70%;
	}
	
	.video-bluepage-content-info .favorites-pack {
		margin-left: 70%;
	}
}

.layout-3rd #hkecl-content .channel-infostructure .channel-pseudo-side h2 {
	border-bottom: dotted 3px #717171;
	margin-bottom: 10px;
	font-size: 180%;
}

.layout-3rd .channel-pseudo-side h2 {
	background-image: url(images/etv/icon_download.png);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: 0 7px;
}

.eng.layout-3rd #hkecl-content .channel-infostructure .channel-pseudo-side h2 {
	font-size: 130%;
	background-position: 0 0;
}

#hkecl-content .related-articles h2 {
	font-size: 180%;
	border-bottom: dotted 3px #717171;
	margin-bottom: 10px;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 {
	margin-left: 20px;
	margin-top: 0;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 article {
	padding-bottom: 10px;
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 article .article-image-container a {
	position: relative;
	display: inline-block;
	/*background-color: transparent;*/ /* remove background-color for thumbnails */
}

.layout-3rd div.resources-packages.type-thumbnail-related-article-2 article .article-image-container span.play-button {
	background-image: url(images/etv/play-button.png);
	background-repeat: no-repeat;
	/*background-position: -20px -10px;*/
	background-position: 0 0;
	background-size: 100%;
	position: absolute;
	height: 100%;
	width: 100%;
	display: inline-block;
	left: 0;
}

.resources-download > div {
	border: #B5B5B5 solid 1px;
	padding: 10px 0 0;
}

.related-articles.resources-download > div {
	border: 0;
	padding: 0;
}

    .resources-list, .resources-list-2 {
			margin-bottom: 10px;
			padding: 0 10px;
		}
		
		.resources-list li{
      display: inline-block;
      margin-right: 10px;
		}
		
		.download-control {
			text-align: center;
			padding: 8px 10px 6px;
			background: #F1F1F1;
		}

		.eng .download-control {
			font-size: 75%;
		}

		@media all and (min-width: 960px) {
			.eng .download-control {
				font-size: 99%;
			}
		}
		
		.ui-dialog .download-control .btn{
			color: #fff;
		}
		
		.download-control .btn {
			padding: 5px 25px;
			border-radius: 5px;
		}
		
		.download-control .btn:hover {
			border-bottom: none;
			color: #fff;
		}
		
		.account-highlight {
			font-weight: bold;
			color: #ff0;
		}



.layout-3rd .ui-widget-overlay {
	opacity: 0.7;
}

.layout-3rd .ui-dialog {
	background-color: #F6F6F6;
}

.layout-3rd .ui-dialog .ui-dialog-title {
	font-size: 32px;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	color: #ABABAB;
}

.layout-3rd .ui-dialog .ui-widget-content {
	background-color: #F6F6F6;
}

.layout-3rd .ui-dialog .ui-widget-content img{
	width: 100%;
}

.layout-3rd .ui-draggable .ui-dialog-titlebar {
	background-image: none;
	background-color: 
	transparent;border: none;
}

.layout-3rd .etv-preview-popup-content {
	padding-top:20px;
}

.layout-3rd .ui-dialog-buttonpane{
	border: none;
}
.layout-3rd .ui-dialog-buttonpane .ui-dialog-buttonset{
	float: none;
	text-align: center;
}
.layout-3rd .ui-dialog .ui-dialog-buttonpane button {
	padding: 5px 25px 5px 25px;
	border-radius: 5px;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	-o-transition:color .2s ease-out, background .3s ease-in;
	-ms-transition:color .2s ease-out, background .3s ease-in;
	-moz-transition:color .2s ease-out, background .3s ease-in;
	-webkit-transition:color .2s ease-out, background .3s ease-in;/* ...and now override with proper CSS property */
	transition:color .2s ease-out, background .3s ease-in;
	
	/*background-image: url(images/etv/icon_download.png);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: 2px 0px;*/
}
.layout-3rd .ui-dialog .ui-dialog-buttonpane button:hover {
	background-color: #0a85ba;
	opacity: 0.7;
}
.layout-3rd .ui-dialog .ui-dialog-titlebar-close {
	border-width: 1px;
	border-radius: 2px;
	background-position: -95px -128px;
	cursor: pointer;
}

.layout-3rd .ui-dialog .video-section {
  position: relative;
}

.layout-3rd .ui-dialog #dialogue_content_video .ui-dialog-change-preview {
  height: 70% !important;
  max-height: 360px;
}

.layout-3rd .ui-dialog .ui-dialog-change-preview {
	position: absolute;
  top: 0;
  display: inline-block;
  width: 5%;
  height: 98%;
  cursor: pointer;
  color: rgba(255,255,255,0.2);
  font-size: 18pt;
}

.layout-3rd .ui-dialog .ui-dialog-change-preview:hover {
	background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.8);
}

.layout-3rd .ui-dialog .ui-dialog-change-preview span {
  top: 50%;
}

.layout-3rd .ui-dialog .ui-dialog-change-preview.preview-prev {
	left: 0;
  text-align: left;
}
.layout-3rd .ui-dialog .ui-dialog-change-preview.preview-next {
	right: 0;
  text-align: right;
}


/* Tab */
.layout-3rd #content-body #tabs {
	border: none;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav {
	margin-bottom: 0;
	background-image: none;
	background-color: transparent;
	border: none;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-panel {
	border: #B5B5B5 solid 1px;
	padding: 5px;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li {
	list-style-type: none;
	padding: 0;
	margin: 0 4px -1px 4px;
	border: 1px solid #ababab;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li.ui-state-hover {
	background: rgb(245, 245, 245) 0% 20% repeat-x;
}


.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li.ui-state-active {
	border-bottom: 1px solid #fff;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li.ui-state-default a:hover {
	border-bottom: none;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li a {
	padding: 3px 10px 3px 35px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	-o-transition: none;
	-ms-transition: none;
	-moz-transition: none;
	-webkit-transition: none;/* ...and now override with proper CSS property */
	transition: none;
	font-size: 130%;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-weight: bold;
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li:nth-child(1) a{
	background-image: url(images/etv/tab-nav-icon1.png);
}

.layout-3rd #content-body #tabs.ui-tabs .ui-tabs-nav li:nth-child(2) a{
	background-image: url(images/etv/tab-nav-icon2.png);
}

#hkecl-content .ui-widget-content a {
	color: #1c64ad;
}

#hkecl-content .ui-widget-content a:hover {
	color: #c93;
}

#hkecl-content .subtitles {
	
}

#hkecl-content .subtitles li {
	margin-bottom: 5px;
	list-style-type: none;
}

.subtitle-time {
	display: block;
	width: 80px;
	float: left;
}

.subtitle-text {
	display: block;
	margin-left: 80px;
}

@media all and (min-width: 650px) {
	.subtitles {
	}
	
	.subtitles li {
	}
	
	.subtitle-time {
		
	}
	
	.subtitle-text {
	}
}



/*** tooltip for resources download */
.layout-3rd .resources-tooltip.ui-tooltip /*, .layout-3rd .arrow:after*/ {
	background-color:#000;
	color :#fff;
	border: none;
}

.resources-tooltip.left .ui-tooltip-content {
}

.resources-tooltip .ui-tooltip-content::after {
	content: '';
	position: absolute;
	border-style: solid;
	display: block;
	width: 0;
}
.resources-tooltip.left .ui-tooltip-content:after {
	top: 7px;
	right: -5px;
	border-color: transparent #000;
	border-width: 5px 0 5px 5px;
}










.etv-apps-download {
	background-image: url(images/etv/etv_appsBG_compressed.png);
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: -40px;
	margin-top: 50px;
	position: relative;
	background-repeat: no-repeat;
	background-color: #8B21AB;
	padding-top: 120px;
}


.etv-apps-download ul {}

.etv-apps-download ul li {
	text-align: center;
}

.etv-apps-download ul li:first-child{
	text-align: left;
}

.etv-apps-download ul li span {color: #FFF;font-family: "Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";font-size: 120%;font-weight: bold;padding-left: 20px;}

.etv-apps-download ul li a{
}

.etv-apps-download ul li a:hover{
	border-bottom: none;
}

@media all and (min-width: 600px) {
	.etv-apps-download ul li {
			float: left;
			display: inline;
			margin-left: 20px;
	}
	.etv-apps-download ul li:first-child {
			float: none;
			display: block;
			margin-left: 20px;
	}
}



@media all and (min-width: 650px) {
	.etv-apps-download {
		margin-bottom: -20px;
	}
	
	.etv-apps-download ul li {
		margin-left: calc(45% - 250px);
	}
}

@media all and (min-width: 850px) {
	.etv-apps-download ul li {
		margin-left: 5%;
	}
	
	.etv-apps-download ul li:first-child {
		float: left;
	}
	
	.etv-apps-download ul li:first-child span {
		margin-top: 30%;
		display: inline-block;
	}
}




/* Tag Keywords */

/* when tag keywords goes too long */
#tag_p a {
	display: inline-block;
	line-height: 1.4em;
}

#tag_p a:hover {
	padding-bottom: 0;
	margin-bottom: 0;
	line-height: 1.2em; /*changed to 1.2 for ie11, 1.3em;*/
}

















/* BANNER EDIT */

#hkecl-upper {
	background-position: 0px 60px;
	background-repeat: no-repeat;
}

@media screen and (min-width: 700px) {
	
	.swiper-overlay {
		padding-top: 5px !important;
	}
	.swiper-pagination {
		bottom: 0 !important;
		top: auto !important;
	}
	
	.swiper-container.swiper-banner { 
		height: 220px !important;
	}
	.swiper-banner-image img {width:680px; height:220px;}
}
@media all and (min-width: 750px) {
		.layout-index #hkecl-upper {
			min-height: 330px !important;
		}
}
@media screen and (min-width: 800px) {
	#hkecl-upper #promotion-area {
		min-height: 0 !important;
	}
}

@media screen and (min-width: 950px) {
	.swiper-overlay {
		padding-top: 0 !important;
	}
}

@media screen and (min-width: 700px) {
	.layout-index .swiper-banner-image img {
		height: 220px;
	}
}


/* video thumbnail, should work with JS complementary action */
div.resources-packages article .article-image-container > a {
	width: 100%;
	background: #000;
	display: block;
}

div.resources-packages .content-counts {
	margin-left: 0;
}



/*** 2nd page Category FILTER  ***/

.searching-panel {
	/* background: #EFEFEF; */
	border-radius: 0;
	padding: 40px 20px 5px;
	/* margin-top: 60px; */
	font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 85%;
}

.eng .searching-panel {
	font-size: 75%;
}

.layout-2nd .searching-panel {
	padding-top: 10px;
	/* padding-bottom: 20px; */
	padding: 0;
	margin-right: 35px;
}

.browse-sorting-option {
	/* margin-left: calc(100% - 110px); 
	padding-top: 0;
	position: absolute;
	top: 0;
	right: 0;*/
}

.searching-panel p.searching-title {
	display: block;
	font-weight: bold;
	color: #747474;
	margin-bottom: 10px;
	margin-top: 5px;
}

@media screen and (min-width: 560px) {
	.layout-2nd .searching-panel {
		/*width: calc(100% - 110px);
		float: left;*/
		
	}
	
	.browse-sorting-option {
		/* margin-left: calc(100% - 110px); */
	}
}


@media screen and (min-width: 700px) {
	.searching-panel p.searching-title {
		/* display: block; */
	}
	.searching-panel {
		margin-left: -30px;
	}

	.layout-2nd .searching-panel {
		margin-left: 0;
	}

	.layout-2nd .searching-panel {
		
	}
	
	.browse-sorting-option {
		
	}
}

.searching-panel .left-hand-side {
}

.searching-panel .right-hand-side {
}

@media screen and (min-width: 700px) {
	.searching-panel .left-hand-side {
		width: 40%;
		float: left;
	}
	
	.searching-panel .right-hand-side {
		margin-left: 40%;
	}
	
	.searching-panel ul.searching-keywords li{
		/*display: block !important;*/
		margin-bottom: 0 !important;
	}

}


.searching-panel ul.searching-keywords {
}


.searching-panel ul.searching-keywords {
		margin-top: 5px;
		margin-bottom: 5px;
		display: block;
}

.searching-panel ul.searching-keywords li{
		display: inline;
		margin-right: 5px;
		margin-bottom: 5px;
		padding: 3px 5px 0 5px;
		cursor: pointer;
}

.searching-panel ul.searching-keywords li label{
		cursor: pointer;
		font-weight: normal;
}

.searching-panel ul.searching-keywords li input {
		width: auto;
		vertical-align: sub;
		margin-bottom: 5px;
}

		.bootstrap-style .searching-panel ul.searching-keywords li input,
		.bootstrap-style .searching-panel ul.searching-keywords li input[type="radio"],
		.bootstrap-style .searching-panel ul.searching-keywords li input[type="checkbox"]
		{
				margin: 0 5px 0 0;
		}

.searching-panel ul.searching-keywords li {
		/* border: 1px #D4D2D3 solid; */
		border-radius: 3px;
		color: #676767;
		-o-transition:color .2s ease-out, background .3s ease-in;
		-ms-transition:color .2s ease-out, background .3s ease-in;
		-moz-transition:color .2s ease-out, background .3s ease-in;
		-webkit-transition:color .2s ease-out, background .3s ease-in;
		/* ...and now override with proper CSS property */
		transition:color .2s ease-out, background .3s ease-in;
		background: transaprent;
		min-width: 120px;
}

.searching-panel ul.searching-keywords li:hover {
	background-color: #FFFBC3;
	color: #000;
}

.searching-panel ul.searching-keywords li.selected {
		/* border: #FF7400 solid 1px; */
		color: #676767;
		/* background: #F49020; */
}


/**************************************************
 * CATEGORIES INDEX PAGE
 *
**************************************************/

.etv-categories-container {
	/* background-color: #77aaba; */
	/* background-image: url(ETVprogram_vBG.jpg); */
	background-repeat: no-repeat;
	margin: -20px -25px -25px;
	background-size: 100%;
	padding: 30px;
}

.etv-categories {
	font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
	font-size: 1.8em;
	color: #fff;
}

	.etv-categories:nth-child(1){
	}
	
	.etv-categories:nth-child(2){
	}
	
	.etv-categories:nth-child(3){
	}
  
	.etv-categories:nth-child(4){
	}
	
	@media all and (min-width: 800px) {
			.etv-categories-container {
				/*background-image: url(ETVprogram_hBG.jpg);*/
			}
		
			.etv-categories {
				float: left;
			}
		
			.etv-categories:nth-child(1){
				width: 25%;
			}
			
			.etv-categories:nth-child(2){
				width: 25%;
			}
			
			.etv-categories:nth-child(3){
				width: 25%;
			}
      
			.etv-categories:nth-child(4){
				width: 25%;
			}
	}

/*
	
		.etv-categories .etv-categories-title {
			margin: 0.5em 0;
			-webkit-text-fill-color: #fff; /* Will override color (regardless of order) */
			-webkit-text-stroke-width: 0px;
			-webkit-text-stroke-color: black;
			font-size: 1.2em;
			font-weight: bold;
		}
		
				.etv-categories:nth-child(1) .etv-categories-title {
					/*text-shadow: 2px 2px 4px #ff0fd3 !important;*/
				}
				
				.etv-categories:nth-child(2) .etv-categories-title {
					/*text-shadow: 2px 2px 4px #386b1f !important;*/
					margin-top: 1em;
				}
				
				.etv-categories:nth-child(3) .etv-categories-title {
					/*text-shadow: 2px 2px 4px #ff6c11 !important;*/
					margin-top: 1em;
				}
        
				.etv-categories:nth-child(4) .etv-categories-title {
					/*text-shadow: 2px 2px 4px #ff6c11 !important;*/
					margin-top: 1em;
				}
		
		.etv-categories ul {
			/* margin-left: 25px; */
		}
		
		.etv-categories .etv-categories-items {
			font-size: 0.65em;
			/* line-height: 1.8em; */
			/* margin: 0.8em 0; */
		}
		
		@media all and (min-width: 800px) {
			.etv-categories .etv-categories-items {
				font-size: 0.65em;
				line-height: 1.8em;
				margin: 0.8em 0;
			}
			
			.etv-categories:nth-child(1) .etv-categories-title {
				margin-top: 0.5em;
			}

			.etv-categories:nth-child(2) .etv-categories-title {
				margin-top: 0.5em;
			}

			.etv-categories:nth-child(3) .etv-categories-title {
				margin-top: 0.5em;
			}
      
			.etv-categories:nth-child(4) .etv-categories-title {
				margin-top: 0.5em;
			}
		}

		.etv-categories .etv-categories-items a {
			color: #fff;
			/*text-shadow: 2px 2px 4px #000000 !important;*/
			font-weight: bold;
		}

		.etv-categories:nth-child(1) .etv-categories-items a:hover {
			color: #ecc8f7;
			border-bottom: #ecc8f7 1px solid;
		}

		.etv-categories:nth-child(2) .etv-categories-items a:hover {
			color: #97ff97;
			border-bottom: #97ff97 1px solid;
		}

		.etv-categories:nth-child(3) .etv-categories-items a:hover {
			color: #fbc09a;
			border-bottom: #fbc09a 1px solid;
		}
    
		.etv-categories:nth-child(4) .etv-categories-items a:hover {
			color: #98dafb;
			border-bottom: #98dafb 1px solid;
		}
*/


		.etv-categories .etv-categories-title {
			margin: 0.5em 0;
			/* -webkit-text-fill-color: #fff; */ /* Will override color (regardless of order) */
			-webkit-text-stroke-width: 0px;
			-webkit-text-stroke-color: black;
			font-size: 0.98em;
			font-weight: bold;
		}
		
				.etv-categories:nth-child(1) .etv-categories-title {
					/*text-shadow: 2px 2px 2px #bab0b0 !important;*/
					color: #81006b;
					font-weight: bold;
				}
				
				.etv-categories:nth-child(2) .etv-categories-title {
					/*text-shadow: 2px 2px 2px #bab0b0 !important;*/
					margin-top: 1em;
					color: #006300;
					font-weight: bold;
				}
				
				.etv-categories:nth-child(3) .etv-categories-title {
					/*text-shadow: 2px 2px 2px #bab0b0 !important;*/
					margin-top: 1em;
					color: #d96709;
					font-weight: bold;
				}
        
				.etv-categories:nth-child(4) .etv-categories-title {
					/*text-shadow: 2px 2px 2px #bab0b0 !important;*/
					margin-top: 1em;
					color: #0993d7;
					font-weight: bold;
				}
		
		.etv-categories ul {
			/* margin-left: 25px; */
		}
		
		.etv-categories .etv-categories-items {
			font-size: 0.65em;
			/* line-height: 1.8em; */
			/* margin: 0.8em 0; */
		}
		
		@media all and (min-width: 800px) {
			.etv-categories .etv-categories-items {
				font-size: 0.65em;
				line-height: 1.8em;
				margin: 0.8em 0;
			}

			.etv-categories:nth-child(2) .etv-categories-title {
				margin-top: 0.5em;
			}

			.etv-categories:nth-child(3) .etv-categories-title {
				margin-top: 0.5em;
			}
      
			.etv-categories:nth-child(4) .etv-categories-title {
				margin-top: 0.5em;
			}
		}

		.etv-categories .etv-categories-items a {
			color: #5f6de7;
			/*text-shadow: 2px 2px 4px #bbbbbb !important;*/
			font-weight: bold;
		}

		.etv-categories:nth-child(1) .etv-categories-items a {
			color: #cb0098;
		}

		.etv-categories:nth-child(1) .etv-categories-items a:hover {
			color: #8718a9;
			border-bottom: #8718a9 1px solid;
		}

		.etv-categories:nth-child(2) .etv-categories-items a {
			color: #009800;
		}

		.etv-categories:nth-child(2) .etv-categories-items a:hover {
			color: #1b6b1b;
			border-bottom: #1b6b1b 1px solid;
		}


		.etv-categories:nth-child(3) .etv-categories-items a {
			color: #e36702;
		}

		.etv-categories:nth-child(3) .etv-categories-items a:hover {
			color: #bc642b;
			border-bottom: #bc642b 1px solid;
		}
    
		.etv-categories:nth-child(4) .etv-categories-items a {
			color: #0298e3;
		}

		.etv-categories:nth-child(4) .etv-categories-items a:hover {
			color: #2a8bbb;
			border-bottom: #2a8bbb 1px solid;
		}

.layout-3rd #hkecl-side {
	display: none;
}

/**************************************************
 * FRONTPAGE CATEGORY FIELD POSITION FIX (BILINGUAL)
 * WORK WITH JS
 *
**************************************************/
.layout-index div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.category-field, 
.layout-index div.resources-packages.type-thumbnail-small-5 article .hkecl-channel-customized.category-field {
}

.layout-index div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.category-field a, 
.layout-index div.resources-packages.type-thumbnail-small-5 article .hkecl-channel-customized.category-field a {
}

@media all and (min-width: 480px) {
	.layout-index div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.category-field, 
	.layout-index div.resources-packages.type-thumbnail-small-5 article .hkecl-channel-customized.category-field {
			height: 2.5em;
			font-size: 0.92em;
			line-height: 1.3em;
			position: relative;
	}

	.layout-index div.resources-packages.type-thumbnail-small-2 article .hkecl-channel-customized.category-field a, 
	.layout-index div.resources-packages.type-thumbnail-small-5 article .hkecl-channel-customized.category-field a {
			display: inline-block;
			position: absolute;
			bottom: 0;
	}
}

/* english fix for etv, english title on traditional chinese layout */
div.resources-packages article .article-content-wrapper .article-title, 
div.resources-packages article .article-content-wrapper div, 
div.resources-packages article .article-content-wrapper p {
	-ms-word-break: normal !important;
}