/* Homepage CSS Document */
/* home page css*/
/*
-----------------------------------------------------------------------------------------------------------
File Name: home-middle-b5.css
Purpose: Cascading Style Sheets
Author/s: ME
Date: 
Start Date	 Completion Date	Last upd by			Description
----------	 ---------------	---------------	--------------------------------------------------------------
XXXX/XX/XX   YYYY/YY/YY         ME              Initial version
2012/04/10   2012/04/10         CP(N4)3         Add Static Banner - Style amendment
2012/05/22   2012/05/22         CP(N4)3         Modify item width
*/
#homeleftbar{

	width: 413px;
	float: left;
}
#homecontent{
	position: relative;
	clear:both;
	width: 1000px;
	overflow:hidden;
	margin-bottom: 30px;
}
#homeMenuHolder{
    /* width: 950px;  */
	width: 980px;            /* CP(N4)3 - 2012/05/22 - Modify item width */
	height:56px;
	margin-left: auto;
	margin-right: auto;
}
#homeMenu{
	position: absolute;
	/* width: 950px; */
	width: 980px;            /* CP(N4)3 - 2012/05/22 - Modify item width */
	height:56px;
	margin-top: 0px;

	margin-bottom: 0px;
	overflow:visible;
	z-index: 999;
}
#homeMenu table{
	float:left;	
}
#homeright{
	float: right;
	width: 582px;
}
.hometitle{
	margin-top:15px;
	margin-left: -1px;
}
#homeMore{
	float:right;
}
.homeDate{
	clear:both;
	width:100px;
	display:block;
	float:left;
	background-image: url(../image/home_whatsnew_bullet.gif);
	background-repeat: no-repeat;
	background-position: 90px 4px;
  /*font-size: 12px;*/
    font-size: 14px;
}
.homeNews{
	display:block;
	float:left;
	width:355px;
	margin-bottom:5px;
  /*font-size: 12px;*/
    font-size: 14px;	
}
#homeNewsHolder{
	margin-left:15px;
}
.holder {
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-size: 12px;
	color: #666;	
}
.holder a:link, 
.holder a:visited{
	color: #666;
	text-decoration:none;
}
.holder a:hover{
	color:#00B099;
	text-decoration:underline;
}
a:link.button,
a:visited.button{
	font-size: 12px;
	color: #666;
	display:block;
	width:45px;
	text-decoration:none;
	font-weight: bold;
	text-indent: 12px;
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
}
a:hover.button{
	color:#00B099;
	text-decoration:underline;
	font-weight: bold;
}
.more{
	display:block;
	background-image: url(../image/home_whatsnew_more.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#hotlinkTitle_up{
	clear:both;
	text-align:left;
	display:block;
	width:373px;
	height:34px;
	/*width:400px;
	height:40px;
	margin-left: 15px;
	background-image: url(../images/home_hotlink_up.gif);*/
    background-repeat: no-repeat;
	
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
    display: inline-block;
    white-space: nowrap;
    line-height:1em;
    position:relative;
    outline: none;
    overflow: visible;
    cursor: pointer;
    border-radius: 4px;
    -moz-border-radius: 4px; 
    -webkit-border-radius:4px; 
    box-shadow:1px 1px 2px 0 #CCCCCC;
    -moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
    -webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}

#hotlinkTitle_up_page{
	padding-left:200px;
}



#simplePagerNav{
	/*position: absolute;*/
	/*width:382px;*/
	float: right;
}
#hotLinkPageNav{
    position: absolute;
    top: 602px;
    RIGHT: 0;
    Z-INDEX: 9999;

}
#hotlinkTitle_down{
	clear:both;
	text-align:left;
	display:block;
	width:380px;
	height:35px;
	/*margin-left: 15px;*/
	
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
    display: inline-block;
    white-space: nowrap;
    line-height:1em;
    position:relative;
    outline: none;
    overflow: visible;
    cursor: pointer;
    border-radius: 4px;
    -moz-border-radius: 4px; 
    -webkit-border-radius:4px; 
    box-shadow:1px 1px 2px 0 #CCCCCC;
    -moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
    -webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
	
}
#homeVideo{
	display:block;
	background-image: url(../image/banner_videobg-en.gif);
	background-repeat: repeat-x;
	/*
	padding: 4px;
	height: 55px;
    width: 224px;
    */
	padding: 0px; /* CP(N4)3 - 2012/04/10 - Add Static Banner - Style amendment */
	height: 63px; /* CP(N4)3 - 2012/04/10 - Add Static Banner - Style amendment */
	width: 241px; /* CP(N4)3 - 2012/04/10 - Add Static Banner - Style amendment */
	vertical-align: middle;
}
/* CP(N4)3 - 2012/04/10 - Add Static Banner - Style amendment */
#homeVideo a span img
{
     position:relative;
     left:15px;
     top:19px;
}
#homeVideo,
#homeVideo a:link,
#homeVideo a:visited{
	cursor:pointer;
	text-decoration: none;
}
.bannerTxt{
	margin-top:2px;
}

.bannerTxt,
.bannerTxt a:link,
.bannerTxt a:visited{
	display:block;
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-size: 11px;
	color: #666;
	font-weight: normal;
	padding-left:0px;
	text-align: left;
	text-decoration: none;
	vertical-align: middle;
}
.homeVideoIcon{
	float: left;
	margin-right:5px;
}
#emergency{
	margin:-160px 0px 0px -205px;
	top: 50%;
	left: 50%;
	position:absolute;
	z-index:9999;
	width:422px;
	display:table;
	background-color: #F00;
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
	background-image: url(../image/emergency_bg.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}
#emergency a:link,
#emergency a:visited{
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-size: 11px;
	color: #FFF;
	text-decoration: none;
}
#emergency a:hover{
	text-decoration:underline;	
}
#emergency .emclose a:link,
#emergency .emclose a:visited{
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}


.placeholderPic
{
	width:100%;
	border-radius: 5px;
}

/*Service shortcut at homepage*/
.homeShortCutItem
{
    width: 350px;
	height: 25px;
}

.homeShortCutItem a
{	
	text-decoration: none;
	display:block;
	height:100%;
	/*Raymond on 23Oct2018 - amend to darker color for web accessibility */
	/* color: #6C615D; */	
	color: #3F3836;
}

#homeShortCut{
	position:relative;
	background-color: #FFF;
	display: block;
	height: 167px;
	margin-top: 1px;
	background: #F1ECE9;
    background: -webkit-linear-gradient(left, #F1ECE9 , #CCC9C2);
    background: -moz-linear-gradient(right, #F1ECE9, #CCC9C2);
    background: linear-gradient(to right, #F1ECE9 , #CCC9C2);
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-weight: bold;
	border-radius: 5px;
}

#homeShortCutBox
{
	position:absolute;
	bottom:35px;
	left:8px;
}

#homeShortCutTitle
{
	font-weight:bold;
	font-size:13pt;
	position:absolute;
	top:3px;
	left:10px;
	color: #C5342D;
}

/*FindUs at homepage*/
#homeFindUs{
	position: relative;
	background-color: #FFF;
	display: block;
	background: #F1ECE9;
    background: -webkit-linear-gradient(left, #F1ECE9 , #CCC9C2);
    background: -moz-linear-gradient(right, #F1ECE9, #CCC9C2);
    background: linear-gradient(to right, #F1ECE9 , #CCC9C2);
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-weight: bold;
	border-radius: 5px;
}

/*Add for gallery panels*/
.homeRedGrad{    
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='red', endColorstr='#b3212b');/*For IE7-8-9*/ 
    background: -webkit-linear-gradient(red, #b3212b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, #b3212b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, #b3212b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, #b3212b); /* Standard syntax (must be last) */
}

.homeGalleryTitleBar
{
	height: 28px;
}

.homeGalleryContent
{	
	height: calc(100% - 28px);
}

.homeGalleryTitleText, .homeGalleryMore
{
	color: #C5342D;	
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
	font-size: 13pt;
	height:100%;
}

.homeGalleryTitleText
{
	font-weight:bold;	
	float:left;
	padding: 5px 0 0 0;
	height:90%;
}

.TitleDec
{
	background-image: url(../image/title_decoration.png);
	background-repeat: repeat-x;
	height:30px;
}

.homeGalleryMore
{
	float:right;
	padding: 5px 5px 0 0;
	height:90%;
}


.homeGalleryMore a, .homeGalleryMore a:hover,.homeGalleryMore a:visited
{
	color:white;
	text-decoration:none;
}
.homeGalleryMore a:hover
{
	text-decoration:underline;
}

#homeGalleryMoreWithPlay
{
	float:right;
	padding:0px;
}

#homeGalleryMoreWithPlay a,#homeGalleryMoreWithPlay a:hover,#homeGalleryMoreWithPlay a:visited
{
	float:left;	
	padding-top:5px;
}

#homeGalleryMoreWithPlay div
{
	float:right;
}

.homeGalleryContent
{
	clear:both;	

}

#homeVideoImgHolder{
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
	height:100%;
	/*background img url to be set at asp*/
	margin: 10px 0 0 0;
}

#homeVideoImgHolder img{
	border:0px;
	margin: 60px 0 60px 150px;
}

#homeVideoPanel
{
	height: 300px;
	background: #F1ECE9;
    background: -webkit-linear-gradient(left, #F1ECE9 , #CCC9C2);
    background: -moz-linear-gradient(right, #F1ECE9, #CCC9C2);
    background: linear-gradient(to right, #F1ECE9 , #CCC9C2);
	border-radius: 5px;
	padding: 10px 10px 10px 10px;
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif;
    font-weight: bold;
}

#homeVideoPanel  .homeGalleryContent
{
	width: 393px;
	height: 230px;
}


#homeGalleryText {
	margin-bottom: 16px;    margin-top: 16px;
	font-size: 14px;
	height: 54px;
}

#homePhotoPanel .homeGalleryContent
{
	padding-left:4%;
}

#homePublicPanel
{
	background: #F1ECE9;
    background: -webkit-linear-gradient(left, #F1ECE9 , #CCC9C2);
    background: -moz-linear-gradient(right, #F1ECE9, #CCC9C2);
    background: linear-gradient(to right, #F1ECE9 , #CCC9C2);
	border-radius: 5px;
	width: 430px;
}
#homePublicPanel .homeGalleryContent
{
	padding-left:25px;
}


.homePhotoImgHolder{
	background-color:black;
	width:220px;
	height:120px;
	position:relative;	
	display:inline-block;
	margin:8px;
}

.homePhotoItem
{
	position: absolute;
	width: 100%; height:100%;
	left:0;
    right:0;
    margin:auto;
}

.homePublicImgHolder
{
	background-color:black;
	width:135px;
	height:180px;
	position:relative;	
	display:inline-block;
	margin:10px;
}

.homePublicItem
{
	position: absolute;
	width: 100%; height:100%;
	top:0;
    bottom:0;
    margin:auto;
}

#rollingBannerContainer{
	width: 580px;
	height: 180px;
	margin-bottom: 20px;	
}

.rollingBannerImg{
    float: left;
	width: 580px;	
}

.rollingBannerBar{
	float: right;
	height: 50%;
	width: 17px;	
}

.rollingBannerBar input{	
	height: 100%;
	width: 100%;
	background-size:100% 100%;
	background-repeat:no-repeat;
	border:0 none;
	cursor: pointer;
}
 
.homePhotoItem , .homePublicItem{
	 border:0px;
}