@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;
}
.subject-listing-item h3 a.selected {
	color:#222222;
	}
body #hkecl-container {
	  background: #0baacb url(images/rd_bkg.jpg) 50% 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 {
}

#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search-input {
  display: none;
}
#hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a {
}
.layout-3rd #hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a {
  display: block;
}
/**************************
 * Upper, treat in sepearate CSS
 **************************/
.ui-tooltip.favorites-pack-pull-down a {
  color: #666;
}
.ui-tooltip.favorites-pack-pull-down a:hover {
  color: #666;
  border-bottom: none;
}

/**************************
 * Columns Container
 **************************/
.layout-2nd.search #hkecl-columns-container {
margin-top: 0px;
z-index: 0;
}
.layout-2nd.search #hkecl-columns-container article{

}
.layout-2nd.search #hkecl-columns-container article .article-image-container a:hover {

}
#hkecl-columns-container a.visited{
	color:#58741A;
}
		/**************************
		 * Content & side bar
		 **************************/

		#hkecl-content {
				padding: 10px;
		}

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

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

		#hkecl-side {
				/*width: 100%;*/
		}
		.layout-2nd.search #hkecl-side {
					display:none;
				}
		.layout-2nd.search #hkecl-content {
						width: 100%;
				}
				
		@media all and (min-width: 605px) {
			.layout-3rd #hkecl-topbar ul.hkecl-menu-right li.hkecltb-search-input {
  display: block;
}
.layout-3rd #hkecl-topbar ul.hkecl-menu-right li.hkecltb-search a {
}
				#hkecl-side {
						padding-top: 70px;

				}

				#hkecl-content {
					padding: 20px;
						width: 100%;
				}

				#hkecl-side {
						width: 100%;
						display:none;
				}
				.layout-2nd #hkecl-side {
					width: 100%;
					display:block;
				}
		}


		@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 {

				}
		}

/**************************
 * 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;
	position: relative;
	top: -25px;
}
.layout-3rd .channel-favorites-pack {
	top: 0px;
}
#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.series #channel-pack {

}
@media all and (min-width: 650px) {
	#channel-pack {
  top: 0px;
		display: inline-block;
}
.layout-2nd.series #channel-pack {

}
	.layout-3rd #channel-pack {
top:20px;
	}
	#hkecl-topbar .fontscale-pack-top {

}
}
@media all and (min-width: 750px) {
	#channel-pack {
		
	}
	
	#hkecl-topbar .fontscale-pack-top {
  display: none;
}
}

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

#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;
}

#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 {

}

.hkecl-content .resources-center-listing-item {
	margin-bottom: 30px;
}

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

.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;
}
#div-related {
	width:100%;
	margin: 0px 0;
}
#div-subject-box {
	width:100%;
	text-align:left;
	margin: 0;
}

#div-related ul {
	width:100%;
	margin:auto;
	text-align: center;
}
#div-related ul li {
	display:inline-block;
	width:auto;
	text-align:left;
	vertical-align:text-top;
}
#div-related h3{
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  border-bottom: #999 2px dotted;
  margin: 0 0 10px 0;
}
#div-related .ad-box{
  border: 1px solid #ccc;
  height: auto;
  vertical-align: top;
  width: 286px;
  padding: 2px;
  margin: 20px 0 0 0;
}
#div-related ul li img{
	width:280px;
	display:block;
	margin: 0px;
	vertical-align:middle;
	margin: 0 auto 10px;
}
@media all and (min-width: 480px) {
#div-related ul li {
	display:inline-block;
	text-align:left;
}
#div-related ul li img{
	display:block;
}
#div-related .ad-box{
  margin: 20px;
}
}

@media all and (min-width: 650px) {
#div-related{
	width:100%;
	margin: 30px 0 0 0;
}
#div-subject-box {
	width:100%;
	margin: 0;
}
#div-related ul {
	
}
}

@media all and (min-width: 850px) {
#div-related ul li {
	display:inline-block;
}
}

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

.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: 50px;
}

@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-downloads {
		display: block;
		margin-bottom: 25px;
}

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

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



/** BREADCRUMBS */

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

.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/learn_bkg.jpg);
		}

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

		.hkecl-content .breadcrumb-neo.category-type-dir_sharing {
				background-image: url(images/sharing_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;
		}

}


/** Series **/
.hkecl-content .series_info {
	margin: -25px 0 30px -25px;
	display:none;
}
.hkecl-content .series_info img {
	width:100%;
	height:auto;
	margin-bottom: 10px;
}
.hkecl-content .series_info .series_desc {
	margin-left:25px;
	width:100%;
	padding-right: 20px;
}
.hkecl-content .series-articles {
	display: block;
max-width: 100%;

	/* margin: 20px 0; */
font-size: 81.25%;
	padding: 20px 0;
}
.hkecl-content .series-articles-block {
float:left;
}
.hkecl-content .series-articles-block.right {
	float:right;

	text-align:right;
}

.hkecl-content .series-articles .visited-article a{
	color:#58741A;
}

.hkecl-content .series-articles .visited-article a:hover{
	color: #C93;
}

@media all and (min-width: 650px) {
.hkecl-content .series_info .series_desc {
	width:100%;
}
}
@media all and (min-width: 800px) {
.hkecl-content .series-articles {
	max-width: 70%;
}
}
@media all and (min-width: 850px) {
.hkecl-content .series_info {
	display:block;
}
.hkecl-content .series_info img {
	max-width: 700px;
}
.hkecl-content .series_info .series_desc {
	width:100%;
}
}

/**************************
* 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: inside;
		/*float: left;*/
		padding-bottom: 20px;
}

#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;
}

.resources-type-anim, .resources-type-audio, .resources-type-docs, .resources-type-excel, .resources-type-form, .resources-type-image, .resources-type-pdf, .resources-type-ppt, .resources-type-video, .resources-type-web, .resources-type-word, .resources-type-zip {
background-repeat: no-repeat;
background-position: 5px 2px;
padding-left: 30px;
display: block;
border-bottom: 1px solid #fff;
padding-bottom: 1px;
border-bottom: 1px solid #fff;
padding-bottom: 2px;
}

.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;
}
#paginate_top{
	clear:both;
	width:100%;
	margin-top: 10px;
}

.hkecl-content-page{
	display:block;
	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: 50px;
}
.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: 50px;
}
.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;
}
/*


	article{
		border:1px solid;
		float: left;
		height: 300px;
		width: 226px;
		margin:5px;
		padding: 5px;
	}
	#hkecl-content {
		width: 100%;
	}
	#hkecl-side {
		display: none;
		width: 0;
	}
	.lblKeystage {
		background-color: #EDFFD8;
		border: 1px solid #999999;
	}
	.divTemp{
		border: 1px solid #C4C4C4;
		color: #C4C4C4;
		float: left;
		height: 850px;
		margin: 5px;
		padding: 50px;
		text-align: center;
		width: 48%;
		font-weight: bold;
	}
	.app_cate{
		background: none repeat scroll 0 0 #E7E5FF;
	}
	.app_desc{
		display:none;
	}
	.horizontallist li{
		float:left;
		margin: 2px;
		padding: 1px 5px;
	}
	#app_box{
		margin-top: 10px;
	}
	.highlight_article{
		background-color: #FFF9D3;
	}
	#app_more{
		display:none;
	}
	.visited-article a{
		color: #969696;
	}
*/