.article-list article .article-image-container img {
		width: 80px;
		height: auto;
}

body.layout-2nd .article-list article.no-thumbnail .article-image-container img {
		min-height: 150px;
}

.channel-content-block-2 .article-list.wide article .article-content-wrapper .article-title {
		font-size: 100%;
}

.article-list article .article-image-container {
		width: 100px;
}
.article-list article .article-content-wrapper {
		width: 100%;
		margin-left: 0px;
		margin-top: 0px;
		padding-left: 100px;
		padding-right: 5px;
		display: block;
		float: none;
}
.related-articles .article-list article .article-content-wrapper {
		width: 100%;
		margin-left: 0px;
		margin-top: -65px;
		padding-left: 100px;
		padding-right: 5px;
		display: block;
		float: none;
}

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

.article-list article {
		padding-bottom: 2px;
		min-width: 180px;
}
.article-list.wide article .article-image-container{
		margin-bottom: 5px;
		max-height: 200px;
}
		
.article-list.wide article .article-image-container img{
		height: auto;
		max-height: 200px;
		max-width: 250px;
		background-size: 100%;
}
		
.article-list.wide article .article-content-wrapper{
		position: relative;
		width: 100%;
		padding-left: 0px;
		margin: 0px;
		height: auto;
		min-height: 25px;
		margin-top: 0px;
		text-align: left;
}
.article-list.list-only article .article-image-container {
		display: none;
}
.article-list.list-only article .article-content-wrapper {
		float: left;
		display: inline-block;
		width: 95%;
		margin-top: 0px;
		padding-left: 0px;
		min-height: initial;
}		
.article-list.wide article .article-content-wrapper .favorites-pack {

}

@media all and (min-width: 480px) {
		.article-list.wide article .article-image-container {
				min-width: 150px;
				max-height: 180px;
				width: 200px;
				margin-bottom: 0px;
		}
		.article-list.wide article .article-content-wrapper{
				width: 98%;
				margin-left: 10px;
				padding-left: 210px;
				margin-top: -160px;
		}
		.article-list.wide article .article-image-container img{
				height: 150px;
				width: 180px;
		}
		.article-list.list-only article .article-content-wrapper {
				width: 95%;
				margin-top: 0px;
				padding-left: 0px;
				min-height: initial;
		}	
}

@media all and (min-width: 650px) {
		.article-list.wide article {
				margin-bottom: 20px;
				padding-bottom: 20px;
		}
		.channel-content-block-2 .article-list.wide article {
				margin-bottom: 0px;
				padding-bottom: 0px;
		}
		.article-list.wide article .article-content-wrapper{
				padding-right: 20px;
		}
		.article-list.list-only article .article-content-wrapper {
				width: 95%;
		}
}
				
@media all and (min-width: 950px) {
		.article-list.wide article .article-content-wrapper{
		
		}
}
		
		

.channel-partners .article-list .article-title{
}

.channel-partners .article-list.thumbnail-list article {
		width: 65px;
		height: 65px;
		min-width: 65px;
		margin: 5px;
		float: left;
}

.channel-partners .article-list.thumbnail-list article .article-image-container {
		min-width: 60px;
		padding-left: 2px;
		width: 100%;
}
.article-list.thumbnail-list article .article-content-wrapper {
		position: relative;
		width: 100%;
		display: inline-block;
		padding-left: 100px;
		margin-left: 0px;
		float:left;
}
.channel-partners .article-list.thumbnail-list article .article-image-container img{
		width: 60px;
		height: 60px;
		background-size: 100%;
}
.article-list.thumbnail-list.wide-thumbnail article .article-image-container img {
		width: 80px;
		height:auto;
}
.channel-partners .article-list article .article-content-wrapper .article-title {
		display: none;
}
@media all and (min-width: 480px) {
		.article-list.thumbnail-list article .article-content-wrapper {
				position: relative;
				width: 100%;
				display: inline-block;
				padding-left: 10px;
				margin-left: 0px;
				margin-top: 0px;
		}
}

		
.related-articles .article-list.thumbnail-list article .article-content-wrapper .article-title {

}



/*************************************************************************************
*
* resources-packages
*
**************************************************************************************/
div.resources-packages .align-left {
		float: left;
}
div.resources-packages .align-right {
		float: right;
}
div.resources-packages article {
		display: inline-block;
		float: left;
		margin: 0px;
		border: 1px solid #ccc;
		border-right: none;
		border-top: none;
		background-color: #fff;
}

/*
	IMAGE CONTAINER
*/

div.resources-packages article .article-image-container {
		text-align: center;
		padding: 5px;
		overflow: hidden;
}
		
		div.resources-packages article .article-image-container a,
		div.resources-packages article .article-image-container a:hover {
				border: none;
		}
		
		div.resources-packages article .article-image-container img {
				width: 100%;
				max-width: 250px;
				background-size: 100%;
				background-repeat: no-repeat;
		}
/*		
div.resources-packages article .article-image-container .app_url img {
	min-height:149px;
}
*/
/*
	CONTENT WRAPPER
*/

div.resources-packages article .article-content-wrapper {
}
		
		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{
				padding: 0 5px;
				margin: 5px 0px;
				word-wrap: break-word; /* Internet Explorer 5.5+, 6, 7, 8 compability-mode */
				-ms-word-break: break-all; /* Internet Explorer 8 */
		}
		
		/*
			FIX FOR FAVORITES-PACK TO MAKE SURE THEY HEHAVE WELL IN <ARTICLE/>
		*/
		div.resources-packages article .article-content-wrapper .favorites-pack {
				margin: 0;
				padding: 0;	
		}
		div.resources-packages article .article-content-wrapper .favorites-pack div{
				margin: 0px 5px;
				padding: 0;
		}
		
		/*
			DEFAULT HIDE THE FAVPACK AS WELL AS ELEMENTS WITH .hkecl-channel-customized
		*/
		div.resources-packages article .hkecl-channel-customized,
		div.resources-packages article .article-content-wrapper .favorites-pack{
				display: none;
		}
		
		/*
			SHOW-MORE CLASS FOR BACKWARD-COMPATIBILITY, NOW USE AS TEXT-ALIGNMENT
		*/
		div.resources-packages article .article-content-wrapper .show-more{
				text-align: right;
		}

/*************************************************************************************
*
* VARIATIONS: SMALL & LIST STYLE
*
**************************************************************************************/

/*
	IMAGE CONTAINER
*/

div.resources-packages.type-thumbnail-small article .article-image-container,
div.resources-packages.type-list-item article .article-image-container {
		float: left;
		height: auto;
		margin-bottom: 0;
		width: 30%;
		min-width: 135px;
		max-height: 1000px;
		padding: 2px;
		float: left;
}

		div.resources-packages.type-thumbnail-small article .article-image-container img,
		div.resources-packages.type-list-item article .article-image-container img {
		}

/*
	CONTENT WRAPPER
*/

div.resources-packages.type-thumbnail-small article .article-content-wrapper,
div.resources-packages.type-list-item article .article-content-wrapper {
	padding-left: 140px;
}
		
		div.resources-packages.type-thumbnail-small article .article-content-wrapper .article-title, 
		div.resources-packages.type-thumbnail-small article .article-content-wrapper div, 
		div.resources-packages.type-thumbnail-small article .article-content-wrapper p,
		div.resources-packages.type-list-item article .article-content-wrapper .article-title, 
		div.resources-packages.type-list-item article .article-content-wrapper div, 
		div.resources-packages.type-list-item article .article-content-wrapper p {
				padding: 0 5px;
				/*min-width: 170px;*/
		}
		
		div.resources-packages.type-thumbnail-small article .article-content-wrapper p{
				display: none;
		}
		
		div.resources-packages.type-list-item article .article-content-wrapper p {
				display: block;
		}
		
/*************************************************************************************
*
* VARIATIONS: SECOND LEVEL LISTING
*
**************************************************************************************/

div.resources-packages.type-sec-level-listing {
		/*border: 1px #f00 solid;*/
}

div.resources-packages.type-sec-level-listing article{
		border-top: none; 
		border-right: none; 
		border-left: none; 
		border-bottom: 1px dotted #717171;
}

/*
	TTV RELATED VIDEO OVERLAY
*/
div.resources-packages.type-sec-level-listing article .article-image-container a {
		/*display: inline-block;*/ /* added to make sure the block is expanded and the relative position of the video text can be placed correctly */
}

div.resources-packages.type-sec-level-listing article .article-image-container a .hkecl-channel-customized.vid-overlay{
		display: none;
		margin-top: -28px;
		position: relative;
		line-height: 20px;
		background-color: #000;
}

div.resources-packages.type-sec-level-listing 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.type-sec-level-listing article .article-image-container a .hkecl-channel-customized.vid-overlay .vid-view-counts{
		float: left;
		padding-left: 25px;
		background-image: url(images/view-counts.png);
		background-repeat: no-repeat;
		background-position: 5px 5px;
}

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

div.resources-packages.type-sec-level-listing article .article-image-container img {
		opacity: 1;
		transition: opacity 0.5s;
		-webkit-transition: opacity 0.5s; /* Safari */
}

div.resources-packages.type-sec-level-listing article .article-image-container:hover img {
		opacity: 1;
}

div.resources-packages.type-sec-level-listing article .article-content-wrapper .article-title {
	font-size: 150%;
	margin: 0;
}

div.resources-packages.type-sec-level-listing article .article-content-wrapper div, 
div.resources-packages.type-sec-level-listing article .article-content-wrapper p,
div.resources-packages.type-sec-level-listing article .article-content-wrapper span {
		
}

div.resources-packages.type-sec-level-listing article .article-content-wrapper p {
		margin-bottom: 10px;
}

div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.upload-date,
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.resources-avaliable,
div.resources-packages.type-sec-level-listing article .article-content-wrapper .favorites-pack{
		display: block;
		text-align: right;
		min-height:50px;
}

div.resources-packages.type-sec-level-listing article .article-content-wrapper div.hkecl-channel-customized.vid-author {
		display: block;
		/*color: #325a37;*/
}

		
/*************************************************************************************
*
* VARIATIONS: LEVEL COMPONENTS
*
**************************************************************************************/
#hkecl-content .level-selection{
	margin-bottom:30px;
}
#hkecl-content .level-selection a{
line-height: 30px;
margin: 5px 0px 0 0;
padding: 0px 3px;
vertical-align: top;
display: inline-block;
}
#hkecl-content .level-selection a.btn{
		border:1px #eee solid;
		background:none;
		color:#666;
}
#hkecl-content .level-selection a:hover{
		background:#FFFBC3;
		color:#000;
}
#hkecl-content .level-selection a.btn img{
		height: 20px;
    margin-top: 5px;
    vertical-align: top;
    width: 20px;
}

#hkecl-content .level-selection a.btn.selected{
		border:1px #F60 solid;
		color:#000;
}

div.resources-packages article .hkecl-channel-customized.level-overlay{
		/*display: block;*/
		text-align: left;
		height: 25px;
}

div.resources-packages article .hkecl-channel-customized.level-overlay img{
		width: 12px;
		height: 12px;
}

.event-calendar .calendar-list-content .hkecl-channel-customized.level-overlay{
		
}
.event-calendar .calendar-list-content .hkecl-channel-customized.level-overlay img{
		width: 12px;
		height: 12px;
}
div.resources-packages article .hkecl-channel-customized.level-overlay div{
		display: block;
		width: auto;
		float:right;
		color:#6A3906;
		font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
		font-weight: bold;
}
div.resources-packages article.hkecl-level-recommended .hkecl-channel-customized.level-overlay img.hkecl-level-recommended{
		display: inline-block;
		margin-top: -2px;
}
#hkecl-content .level-selection img.hkecl-level-pp, div.resources-packages article.hkecl-level-pp .hkecl-channel-customized.level-overlay img.hkecl-level-pp{
		/* background:#f9c637 url(images/graphic-level-pp.png) 50% 50% no-repeat; */
		display: inline-block;
		margin-top: -2px;
}
#hkecl-content .level-selection img.hkecl-level-ps, div.resources-packages article.hkecl-level-ps .hkecl-channel-customized.level-overlay img.hkecl-level-ps{
		/* background:#94d27f url(images/graphic-level-ps.png) 50% 50% no-repeat; */
		display: inline-block;
		margin-top: -2px;
}
#hkecl-content .level-selection img.hkecl-level-ss, div.resources-packages article.hkecl-level-ss .hkecl-channel-customized.level-overlay img.hkecl-level-ss {
		/* background:#81aae0 url(images/graphic-level-ss.png) 50% 50% no-repeat; */
		display: inline-block;
		margin-top: -2px;
}

#divPProducts .level-selection{
		margin:10px 0;
}
#divPProducts .level-selection img.hkecl-level-pp, #divPProducts .level-selection img.hkecl-level-ps, #divPProducts .level-selection img.hkecl-level-ss {
		width: 16px;
		height: 16px;
}
#divPProducts div.resources-packages article .article-image-container {
		padding: 0px;
		margin: 5px 0px 0px 0px;
}
#divPProducts div.resources-packages article .article-image-container img {
		max-width: 80px;
		max-height: 100px;
		width: auto;
}
/*
#hkecl-content .level-selection a.btn.selected span.hkecl-level-pp{
	background:#f9c637 url(images/whitedot.png) 50% 50% no-repeat;
}
#hkecl-content .level-selection a.btn.selected span.hkecl-level-ps{
	background:#94d27f url(images/whitedot.png) 50% 50% no-repeat;
}
#hkecl-content .level-selection a.btn.selected span.hkecl-level-ss {
	background:#81aae0 url(images/whitedot.png) 50% 50% no-repeat;
} */
#hkecl-content .level-selection img.hkecl-level-all, div.resources-packages article.hkecl-level-all .article-image-container .hkecl-channel-customized.level-overlay img.hkecl-level-all {
		background:#81aae0 url(images/graphic-level-all.png) 50% 50% no-repeat;
		display: inline-block;
		margin-top: 2px;
}

/*************************************************************************************
*
* COLUMNS: SMALL
*
**************************************************************************************/

div.resources-packages.type-thumbnail-small article {
		width: 100%;
		padding: 15px;
}

div.resources-packages.type-thumbnail-small article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-thumbnail-small article:nth-child(n+1),
div.resources-packages.type-thumbnail-small article:last-child{
		border-right: 1px solid #ccc;
}

/* 2-Column's border setting */
@media all and (min-width: 480px) {
		div.resources-packages.type-thumbnail-small article .article-content-wrapper,
		div.resources-packages.type-list-item article .article-content-wrapper {
			padding-left: 0px;
		}
		div.resources-packages.type-thumbnail-small article {
				width: 50%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}
		
		div.resources-packages.type-thumbnail-small article .article-content-wrapper .article-title, 
		div.resources-packages.type-thumbnail-small article .article-content-wrapper div, 
		div.resources-packages.type-thumbnail-small article .article-content-wrapper p {
				min-width: auto;
		}
		
		div.resources-packages.type-thumbnail-small article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}
		
		div.resources-packages.type-thumbnail-small article .article-image-container img {
				/*width: 200px;
				height: 150px;*/
		}
		
		/*reset*/
		div.resources-packages.type-thumbnail-small article:nth-child(-n+1){
				border-top: none;
		}
		
		div.resources-packages.type-thumbnail-small article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-right: none;
		}
		
		/* new*/
		div.resources-packages.type-thumbnail-small article:nth-child(-n+2){
				border-top: 1px solid #ccc;
		}
		
		div.resources-packages.type-thumbnail-small article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-right: 1px solid #ccc;
		}
}

/* 3-Column's border setting */
@media all and (min-width: 640px) {
		div.resources-packages.type-thumbnail-small article {
				width: 32%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}
		
		div.resources-packages.type-thumbnail-small article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}
		
		div.resources-packages.type-thumbnail-small article .article-image-container img {
				/*width: 160px;
				height: 120px;*/
		}
		
		/*reset*/
		div.resources-packages.type-thumbnail-small article:nth-child(-n+2){
				border-top: none;
		}
		
		div.resources-packages.type-thumbnail-small article:nth-child(n+2),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-right: none;
		}
		
		/* new*/
		div.resources-packages.type-thumbnail-small article:nth-child(-n+3){
				border-top: 1px solid #ccc;
		}
		
		div.resources-packages.type-thumbnail-small article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-right: 1px solid #ccc;
		}
}

@media all and (min-width: 850px) {
		div.resources-packages.type-thumbnail-small article {
				width: 24%;
		}
		
		/*reset*/
		div.resources-packages.type-thumbnail-small article:nth-child(-n+3){
				border-top: none;
		}
		
		div.resources-packages.type-thumbnail-small article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-right: none;
		}
		
		/* new*/
		div.resources-packages.type-thumbnail-small article:nth-child(-n+4){
				border-top: 1px solid #ccc;
		}
		
		div.resources-packages.type-thumbnail-small article:nth-child(4n+4),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-right: 1px solid #ccc;
		}
}


/*************************************************************************************
*
* COLUMNS: SMALL, 1,2,3,4 cols
*
**************************************************************************************/

div.resources-packages {
	margin-top: 20px;
}

div.resources-packages.type-thumbnail-small-2 article {
		width: 100%;
		padding: 15px;
		margin: 10px 1%;
}

div.resources-packages.type-thumbnail-small-2 article {
	border: 1px solid #eadec6 !important;
	padding: 5px !important;
}

div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-thumbnail-small-2 article:nth-child(n+1),
div.resources-packages.type-thumbnail-small-2 article:last-child{
		border-right: 1px solid #ccc;
}

/* 2-Column's border setting */
@media all and (min-width: 480px) {
	div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper,
	div.resources-packages.type-list-item article .article-content-wrapper {
		padding-left: 0px;
	}
		div.resources-packages.type-thumbnail-small-2 article {
				width: 48%;
				margin: 10px 1%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}

		div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper .article-title,
		div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper div,
		div.resources-packages.type-thumbnail-small-2 article .article-content-wrapper p {
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-2 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-2 article .article-image-container img {
				/*width: 200px;
				height: 150px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+1){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-2 article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small-2 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+2){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-2 article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small-2 article:last-child{
				border-right: 1px solid #ccc;
		}
}

/* 3-Column's border setting */
@media all and (min-width: 650px) {
		div.resources-packages.type-thumbnail-small-2 article {
				width: 31%;
				padding: 25px;
				/*margin-bottom: 0px;*/ /*only for smallest layout */
				border-top: none; /*only for smallest layout */
				margin: 10px 1%;
		}

		div.resources-packages.type-thumbnail-small-2 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-2 article .article-image-container img {
				/*width: 160px;
				height: 120px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+2){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-2 article:nth-child(n+2),
		div.resources-packages.type-thumbnail-small-2 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+3){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-2 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-2 article:last-child{
				border-right: 1px solid #ccc;
		}
}


@media all and (min-width: 850px) {
		div.resources-packages.type-thumbnail-small-2 article {
				width: 23%;
				margin: 10px 1%;
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+3){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-2 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-2 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-2 article:nth-child(-n+4){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-2 article:nth-child(4n+4),
		div.resources-packages.type-thumbnail-small-2 article:last-child{
				border-right: 1px solid #ccc;
		}
}


/*************************************************************************************
*
* COLUMNS: SMALL, 1,2,4 cols
*
**************************************************************************************/

div.resources-packages {
	margin-top: 20px;
}

div.resources-packages.type-thumbnail-small-3 article {
		width: 100%;
		padding: 15px;
		margin: 10px 1%;
}

div.resources-packages.type-thumbnail-small-3 article {
	border: 1px solid #eadec6 !important;
	padding: 5px !important;
}

div.resources-packages.type-thumbnail-small-3 article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-thumbnail-small-3 article:nth-child(n+1),
div.resources-packages.type-thumbnail-small-3 article:last-child{
		border-right: 1px solid #ccc;
}

/* 2-Column's border setting */
@media all and (min-width: 480px) {
	div.resources-packages.type-thumbnail-small-3 article .article-content-wrapper,
	div.resources-packages.type-list-item article .article-content-wrapper {
		padding-left: 0px;
	}
		div.resources-packages.type-thumbnail-small-3 article {
				width: 48%;
				margin: 10px 1%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}

		div.resources-packages.type-thumbnail-small-3 article .article-content-wrapper .article-title,
		div.resources-packages.type-thumbnail-small-3 article .article-content-wrapper div,
		div.resources-packages.type-thumbnail-small-3 article .article-content-wrapper p {
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-3 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-3 article .article-image-container img {
				/*width: 200px;
				height: 150px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-3 article:nth-child(-n+1){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-3 article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small-3 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-3 article:nth-child(-n+2){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-3 article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small-3 article:last-child{
				border-right: 1px solid #ccc;
		}
}

/* 4-Column's border setting */

@media all and (min-width: 850px) {
		div.resources-packages.type-thumbnail-small-3 article {
				width: 23%;
				margin: 10px 1%;
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-3 article:nth-child(-n+3){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-3 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-3 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-3 article:nth-child(-n+4){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-3 article:nth-child(4n+4),
		div.resources-packages.type-thumbnail-small-3 article:last-child{
				border-right: 1px solid #ccc;
		}
}



/*************************************************************************************
*
* COLUMNS: SMALL, 1,2 cols
*
**************************************************************************************/

div.resources-packages {
	margin-top: 20px;
}

div.resources-packages.type-thumbnail-small-4 article {
		width: 100%;
		padding: 15px;
		margin: 10px 1%;
}

div.resources-packages.type-thumbnail-small-4 article {
		border: 1px solid #eadec6 !important;
		padding: 5px !important;
}

div.resources-packages.type-thumbnail-small-4 article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-thumbnail-small-4 article:nth-child(n+1),
div.resources-packages.type-thumbnail-small-4 article:last-child{
		border-right: 1px solid #ccc;
}

/* 2-Column's border setting */
@media all and (min-width: 480px) {
	div.resources-packages.type-thumbnail-small-4 article .article-content-wrapper,
	div.resources-packages.type-list-item article .article-content-wrapper {
		padding-left: 0px;
	}
		div.resources-packages.type-thumbnail-small-4 article {
				width: 48%;
				margin: 10px 1%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}

		div.resources-packages.type-thumbnail-small-4 article .article-content-wrapper .article-title,
		div.resources-packages.type-thumbnail-small-4 article .article-content-wrapper div,
		div.resources-packages.type-thumbnail-small-4 article .article-content-wrapper p {
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-4 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-4 article .article-image-container img {
				/*width: 200px;
				height: 150px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-4 article:nth-child(-n+1){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-4 article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small-4 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-4 article:nth-child(-n+2){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-4 article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small-4 article:last-child{
				border-right: 1px solid #ccc;
		}
}



/*************************************************************************************
*
* COLUMNS: SMALL, 1,2,3 cols
*
**************************************************************************************/

div.resources-packages {
	margin-top: 20px;
}

div.resources-packages.type-thumbnail-small-5 article {
		width: 100%;
		padding: 15px;
		margin: 10px 1%;
}

div.resources-packages.type-thumbnail-small-5 article {
	border: 1px solid #eadec6 !important;
	padding: 5px !important;
}

div.resources-packages.type-thumbnail-small-5 article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-thumbnail-small-5 article:nth-child(n+1),
div.resources-packages.type-thumbnail-small-5 article:last-child{
		border-right: 1px solid #ccc;
}

/* 2-Column's border setting */
@media all and (min-width: 480px) {
	div.resources-packages.type-thumbnail-small-5 article .article-content-wrapper,
	div.resources-packages.type-list-item article .article-content-wrapper {
		padding-left: 0px;
	}
		div.resources-packages.type-thumbnail-small-5 article {
				width: 48%;
				margin: 10px 1%;
				padding: 25px;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}

		div.resources-packages.type-thumbnail-small-5 article .article-content-wrapper .article-title,
		div.resources-packages.type-thumbnail-small-5 article .article-content-wrapper div,
		div.resources-packages.type-thumbnail-small-5 article .article-content-wrapper p {
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-5 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-5 article .article-image-container img {
				/*width: 200px;
				height: 150px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-5 article:nth-child(-n+1){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-5 article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small-5 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-5 article:nth-child(-n+2){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-5 article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small-5 article:last-child{
				border-right: 1px solid #ccc;
		}
}

/* 3-Column's border setting */
@media all and (min-width: 650px) {
		div.resources-packages.type-thumbnail-small-5 article {
				width: 31%;
				padding: 25px;
				/*margin-bottom: 0px;*/ /*only for smallest layout */
				border-top: none; /*only for smallest layout */
				margin: 10px 1%;
		}

		div.resources-packages.type-thumbnail-small-5 article .article-image-container {
				clear: both;
				float: initial;
				width: auto;
				min-width: auto;
		}

		div.resources-packages.type-thumbnail-small-5 article .article-image-container img {
				/*width: 160px;
				height: 120px;*/
		}

		/*Reset due to column change */
		div.resources-packages.type-thumbnail-small-5 article:nth-child(-n+2){
				border-top: none;
		}

		div.resources-packages.type-thumbnail-small-5 article:nth-child(n+2),
		div.resources-packages.type-thumbnail-small-5 article:last-child{
				border-right: none;
		}

		/* New border */
		div.resources-packages.type-thumbnail-small-5 article:nth-child(-n+3){
				border-top: 1px solid #ccc;
		}

		div.resources-packages.type-thumbnail-small-5 article:nth-child(3n+3),
		div.resources-packages.type-thumbnail-small-5 article:last-child{
				border-right: 1px solid #ccc;
		}
}

/*************************************************************************************
*
* VARIATIONS: LARGE THUMBNAIL: 1, 2, 3
*
**************************************************************************************/

@media all and (min-width: 480px) {
		div.resources-packages.type-thumbnail-large article {
				width: 46%;
				margin-left: 2%;
				margin-right: 2%;
		}
}

@media all and (min-width: 780px) {
		div.resources-packages.type-thumbnail-large article {
				width: 31%;
				margin-right: 1%;
				margin-left: 1%;
		}
}


div.resources-packages.type-thumbnail-large article,
div.resources-packages.type-thumbnail-large article:nth-child(3n+3), div.resources-packages.type-thumbnail-large article:last-child,
div.resources-packages.type-thumbnail-large article:nth-child(-n+3),
div.resources-packages.type-thumbnail-large article:nth-child(2n+2), div.resources-packages.type-thumbnail-large article:last-child{
		border: none;
}

div.resources-packages.type-thumbnail-large article .article-content-wrapper .favorites-pack {
	display: block;
}

/*************************************************************************************
*
* VARIATIONS: RELATED ARTICLES
*
**************************************************************************************/

/*
	IMAGE CONTAINER
*/

div.resources-packages.type-thumbnail-related-article article .article-image-container {
		float: left;
		height: auto;
		margin-bottom: 0;
		width: 90px;
		min-width: 90px;
		max-height: 1000px;
		padding: 2px;
		float: left;
}

		div.resources-packages.type-thumbnail-related-article article .article-image-container img {
			width: 80px;
		}

/*
	CONTENT WRAPPER
*/

div.resources-packages.type-thumbnail-related-article article .article-content-wrapper {
	margin-left: 90px;
}
		div.resources-packages.type-thumbnail-related-article article .article-content-wrapper .article-title {
			font-size: 100%;
			margin-top: 0;
		}
		
		div.resources-packages.type-thumbnail-related-article article .article-content-wrapper .article-title, 
		div.resources-packages.type-thumbnail-related-article article .article-content-wrapper div, 
		div.resources-packages.type-thumbnail-related-article article .article-content-wrapper p {
				padding: 0 5px;
				/*min-width: 170px;*/
		}
		
		
		div.resources-packages.type-thumbnail-related-article article .article-content-wrapper p{
				display: none;
		}



@media all and (min-width: 480px) {
	
	div.resources-packages.type-thumbnail-related-article article .article-image-container{
			width: 100%;
			clear: both;
	}
	div.resources-packages.type-thumbnail-related-article article .article-content-wrapper{
			margin-left: 0;
	}
	
}

div.resources-packages.type-thumbnail-related-article article .article-image-container a .hkecl-channel-customized.vid-overlay {
	display: none !important;
}


/*************************************************************************************
*
* COLUMNS: RELATED ARTICLES
*
**************************************************************************************/

div.resources-packages.type-thumbnail-related-article article {
		width: 100%;
		padding: 0 0 20px 0;
}

/* 3-Column's border setting */
@media all and (min-width: 480px) {
		div.resources-packages.type-thumbnail-related-article article {
				width: 125px;
				float: left;
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}
		
		div.resources-packages.type-thumbnail-related-article article .article-image-container {
				clear: both;
				float: none;
				float: initial;
				width: auto;
				min-width: auto;
		}
		
		div.resources-packages.type-thumbnail-related-article article .article-image-container img {
				/*width: 160px;
				height: 120px;*/
				max-width: 80px;
		}
}

div.resources-packages.type-thumbnail-related-article article .article-image-container img {
		width: 100%; /* on demand uplift the width = 80px by c.au*/
}



/*************************************************************************************
*
* VARIATIONS: RELATED ARTICLES (side bar)
*
**************************************************************************************/

/*
	IMAGE CONTAINER
*/

div.resources-packages.type-thumbnail-related-article-2 article .article-image-container {
		float: left;
		height: auto;
		margin-bottom: 0;
		width: 90px;
		min-width: 90px;
		max-height: 1000px;
		padding: 2px;
		float: left;
}

		div.resources-packages.type-thumbnail-related-article-2 article .article-image-container img {
			width: 80px;
		}

/*
	CONTENT WRAPPER
*/

		div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper {
			margin-left: 90px;
		}
		div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper .article-title {
			font-size: 100%;
			margin-top: 0;
		}
		
		div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper .article-title, 
		div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper div, 
		div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper p {
				padding: 0 5px;
				/*min-width: 170px;*/
		}
		
		
		div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper p{
				display: none;
		}



@media all and (min-width: 480px) {
	
	div.resources-packages.type-thumbnail-related-article-2 article .article-image-container{

	}
	div.resources-packages.type-thumbnail-related-article-2 article .article-content-wrapper{

	}
	
}

div.resources-packages.type-thumbnail-related-article-2 article .article-image-container a .hkecl-channel-customized.vid-overlay {
	display: none !important;
}


/*************************************************************************************
*
* COLUMNS: RELATED ARTICLES (side bar)
*
**************************************************************************************/

div.resources-packages.type-thumbnail-related-article-2 article {
		width: 100%;
		padding: 0 0 20px 0;
}

/* 3-Column's border setting */
@media all and (min-width: 480px) {
		div.resources-packages.type-thumbnail-related-article-2 article {
				margin-bottom: 0px; /*only for smallest layout */
				border-top: none; /*only for smallest layout */
		}
		
		div.resources-packages.type-thumbnail-related-article-2 article .article-image-container {
				/*clear: both;
				float: initial;
				width: auto;
				min-width: auto;*/
		}
		
		div.resources-packages.type-thumbnail-related-article-2 article .article-image-container img {
				/*width: 160px;
				height: 120px;*/
				max-width: 80px;
		}
}

div.resources-packages.type-thumbnail-related-article-2 article .article-image-container img {
		width: 100%; /* on demand uplift the width = 80px by c.au*/
}



/*************************************************************************************
*
* COLUMNS: SECOND LEVEL LISTING
*
**************************************************************************************/

div.resources-packages.type-sec-level-listing article{
		width:  100%;
		padding: 10px 0 10px 0;
}

@media all and (min-width: 550px) { /* 500 or 550*/
		div.resources-packages.type-sec-level-listing article .article-image-container {
				float: left;
				width: 20%;
				min-width: 200px;
				padding: 0;
		}
		
		div.resources-packages.type-sec-level-listing article .article-content-wrapper{
				margin-left: 210px;
		}
		
		div.resources-packages.type-sec-level-listing article .article-content-wrapper .article-title {
			font-size: 150%;
		}
}





/*************************************************************************************
*
* LIST ITEM
*
**************************************************************************************/

div.resources-packages.type-list-item article {
		width: 96%;
		min-width: 150px;
		padding: 5px; /* 2013Sept5 */
}

div.resources-packages.type-list-item article:nth-child(-n+1){
		border-top: 1px solid #ccc;
}

div.resources-packages.type-list-item article:nth-child(n+1),
div.resources-packages.type-list-item article:last-child{
		border-right: 1px solid #ccc;
}

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

		div.resources-packages.type-list-item article {
				padding: 2px;
		}

		div.resources-packages.type-list-item article .article-image-container{
				max-width: 90px;
				min-width: 90px;
				padding: 0px 0px 0px 10px;
		}

		div.resources-packages.type-list-item article .article-content-wrapper{
				/*margin-left: 22%;*/
				margin-left: 110px;
		}

		div.resources-packages.type-list-item article .article-content-wrapper h4,
		div.resources-packages.type-list-item article .article-content-wrapper div,
		div.resources-packages.type-list-item article .article-content-wrapper p {
				min-width: 170px;
				margin: 2px 0;
		}

		div.resources-packages.type-list-item article .article-content-wrapper div.app_group{
				display: inline;
		}

		div.resources-packages.type-list-item article .article-content-wrapper .further-info{
				margin-left: 0;
				float: right;
				width: 170px;
				margin-top: -40px;
		}

		div.resources-packages.type-list-item article .article-content-wrapper .further-info.newline{
				margin-top: 0;
		}

		.schpage_state_no_figures div.resources-packages.type-list-item article .article-content-wrapper .further-info.newline{
				width: 150px;
				min-width: 150px;
		}
}

.schpage_state_no_figures div.resources-packages.type-list-item article .article-content-wrapper .further-info .package-type{
		float: none;
}

.schpage_state_no_figures div.resources-packages article .article-content-wrapper .further-info .package-type{
		padding-left: 0;
}

.schpage_state_no_figures div.resources-packages article .article-content-wrapper .further-info{
		text-align: right;
}


div.resources-packages.type-list-item article .hkecl-channel-customized.level-overlay{
	display: none;
}

div.resources-packages.type-list-item article .hkecl-channel-customized.category-overlay{
	display: block;
	text-align: left;
	height: 25px;
}

div.resources-packages.type-list-item article .hkecl-channel-customized.category-series,
div.resources-packages.type-list-item article .hkecl-channel-customized.eworks-articleadmin-status,
div.resources-packages.type-list-item article .hkecl-channel-customized.eworks-articleadmin-others{
	display: block;
}



/*************************************************************************************
*
* Designer over-write
*
**************************************************************************************/
div.resources-packages article {
		border: none;
		/*background-color: #f3f3f3;*/
		margin: 0;
}
body.layout-2nd div.resources-packages article {
		background-color: #fff;
}
div.resources-packages article.recommended {
		background-color: #FFF39A;
}
div.resources-packages.type-thumbnail-small article:nth-child(-n+1), div.resources-packages.type-thumbnail-small article:nth-child(n+1),
div.resources-packages.type-thumbnail-small article:last-child{
		border-left: none;
		border-right: 1px solid #fff;
		border-top: none;
		border-bottom: 15px solid #fff;
}
div.resources-packages.type-thumbnail-small article {
		width: 100%;
		margin: 0;
		padding: 5px;
}
@media (min-width: 480px) {
		div.resources-packages.type-thumbnail-small article {
				width: 50%;
				margin: 0;
				padding: 10px;
		}
		div.resources-packages.type-thumbnail-small article:nth-child(-n+1), div.resources-packages.type-thumbnail-small article:nth-child(n+1),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-left: none;
				border-right: 15px solid #fff;
				border-top: none;
				border-bottom: 15px solid #fff;
		}
		div.resources-packages.type-thumbnail-small article:nth-child(-n+2), div.resources-packages.type-thumbnail-small article:nth-child(2n+2),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-left: none;
				border-right: 15px solid #fff;
				border-top: none;
				border-bottom: 15px solid #fff;
		}
}

@media (min-width: 640px) {
		div.resources-packages.type-thumbnail-small article {
				width: 33%;
				margin: 0;
				padding: 10px;
		}
		div.resources-packages.type-thumbnail-small article:nth-child(-n+3), div.resources-packages.type-thumbnail-small article:nth-child(3n+3), div.resources-packages.type-thumbnail-small article:last-child {
				border-left: none;
				border-right: 15px solid #fff;
				border-top: none;
				border-bottom: 15px solid #fff;
		}
}

@media (min-width: 850px) {
		div.resources-packages.type-thumbnail-small article {
				width: 25%;
				margin: 0;
		}		
		div.resources-packages.type-thumbnail-small article:nth-child(-n+4), div.resources-packages.type-thumbnail-small article:nth-child(4n+4),
		div.resources-packages.type-thumbnail-small article:last-child{
				border-left: none;
				border-right: 15px solid #fff;
				border-top: none;
				border-bottom: 15px solid #fff;
		}
}

/***********************************************************************************
 *
 * FUNCTIONAL:
 *
**************************************************************************************/

		/****************************************
		*
		* VIDEO TYPE, WITH OVERLAY (hkecl-articles-type-videos)
		* Works with maintain_aspect_ratio_v2() since English Campus
		*
		****************************************/
		
		div.resources-packages article.hkecl-articles-type-videos .article-image-container {
			padding: 0px !important;
		}
		
		div.resources-packages article.hkecl-articles-type-videos .article-image-container a {
			padding: 0;
		}
		
		div.resources-packages article.hkecl-articles-type-videos .article-image-container img {
			max-width: 450px !important;
		}
		
		div.resources-packages article.hkecl-articles-type-videos .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.hkecl-articles-type-videos .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.hkecl-articles-type-videos .article-image-container a .hkecl-channel-customized.vid-overlay .vid-view-counts{
			float: left;
			padding-left: 25px;
			background-image: url(images/view-counts.png);
			background-repeat: no-repeat;
			background-position: 5px 5px;
		}
		
		div.resources-packages article.hkecl-articles-type-videos .article-image-container a .hkecl-channel-customized.vid-overlay .vid-length{
			float: right;
		}
		
		/* video thumbnail, should work with JS complementary action */
		div.resources-packages.type-thumbnail-small-2 article.hkecl-articles-type-videos .article-image-container > a {
			width: 100%;
			background: #000;
			display: block;
		}

		/*************************************************************************************
		*
		* eBook Icon
		* 1) width will be reduced, but will not enlarged
		*
		**************************************************************************************/
		
		div.resources-packages article.hkecl-articles-type-ebooks .article-image-container {
			height: 235px;
			line-height: 235px;
			padding: 0;
		}
		
		div.resources-packages article.hkecl-articles-type-ebooks .article-image-container img {
				max-width: 210px;
				max-height: 210px;
				width: auto;
				vertical-align: middle;
				margin-bottom: 0.25em;
		}
		
		@media (min-width: 480px) {
				div.resources-packages article.hkecl-articles-type-ebooks .article-image-container {
					height: 185px;
					line-height: 185px;
				}
				
				div.resources-packages article.hkecl-articles-type-ebooks .article-image-container img {
						max-width: 160px;
						max-height: 160px;
				}
		}
				
				/*************************************************************************************
				* eBook Icon presentation at .type-thumbnail-related-article
				**************************************************************************************/
				
				div.resources-packages.type-thumbnail-related-article article.hkecl-articles-type-ebooks {
				}
				
				div.resources-packages.type-thumbnail-related-article article.hkecl-articles-type-ebooks .article-image-container {
					height: auto;
					line-height: 25px;
					/* width: 100%; */
				}
					
					div.resources-packages.type-thumbnail-related-article article.hkecl-articles-type-ebooks .article-image-container img {
						width: 100%;
						height: auto;
					}
		
				div.resources-packages.type-thumbnail-related-article article.hkecl-articles-type-ebooks .article-content-wrapper {
				}
				
				@media (min-width: 480px) {
					
					div.resources-packages.type-thumbnail-related-article article.hkecl-articles-type-ebooks .article-image-container {
					}

						div.resources-packages.type-thumbnail-related-article article.hkecl-articles-type-ebooks .article-image-container img {
							max-height: 280px;
						}
				}
				
		/*************************************************************************************
		*
		* up-lift max-width constraints of 250px
		*
		**************************************************************************************/
		
		div.resources-packages.no-max-width-constraints article .article-image-container,
		div.resources-packages.no-max-width-constraints article .article-image-container img {
			max-width: 380px !important;
		}