.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;
}
.subject-content .article-list.wide article .article-content-wrapper {
  margin-top: 0px;
}
@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;
}
.subject-content .article-list.wide article .article-content-wrapper {
  margin-top: 0px;
}		}

@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: 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: 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%;
		}
}


/*************************************************************************************
*
* 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;
}
}