@charset "UTF-8";
/* Hang Seng Bank Tablet/Desktop Document */

/* ------------------------------------------------- */
/* Main Container Styles --------------------------- */
/* ------------------------------------------------- */
#page{
	position:relative;
	margin:0 auto;
	padding:0;
	width:980px;
	height:100%;
}

#navContainer{
	position:absolute;
	top:65px;
	left:0;
	margin:0;
	padding:0;
	width:100%;
	z-index:999;
}

/* >>> END Main Container Styles ------------------- */


/* ------------------------------------------------- */
/* Header Styles ----------------------------------- */
/* ------------------------------------------------- */

/* Header -------------------------- */
#header{
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:65px;
}
/* Branding ------------------------ */
#branding{
	position:absolute;
	margin:0;
	padding:0;
	width:247px;
	height:60px;	
	background:url(../images/ebanking.gif);
	left:10px;	
}
/* Banner -------------------------- */
#headerBanner{
	position:absolute;
	margin:0;
	padding:0;
	top:0;
	right:0;
}

/* >>> END Header Styles --------------------------- */


/* Landing */

#logon-content1{
	margin:0 auto;
	width:800px;
}

#logon-content1-left{
	margin-left:3px;
}

#logon-content1-left-top{
	width:494px;
	height:7px;
	background:url(../images/bg-logonBox1-topBottom.png) no-repeat;
}

#logon-content1-left-middle{
	width:454px;
	height:395px;
	background:url(../images/bg-logonBox1-middle.png) repeat-Y;
}

#logon-content1-left-bottom{
	padding: 10px 15px;
	width:464px;
	height:40px;
	background:url(../images/bg-logonBox1-topBottom.png) 0 bottom no-repeat;
}

#logon-content1-left-middle H1{
	margin-bottom:0.3em;
	font-size:1em;
	color:#000;
	text-shadow:1px 1px 2px #FFF;
}

#logon-content1-left-middle H2{
	margin:0.3em 0;
	font-size:1em;
	color:#000;
	text-shadow:1px 1px 2px #FFF;
}

#logon-content1-left-middle P{
	margin-bottom:0.5em;
	color:#000;
}

.logon-content1-left-bottom-table{width:100%}
.logon-content1-left-bottom-table TD{
	padding:5px;
	padding-left: 40px;
	height:30px;
	border-left:1px solid #FFF;
	border-right:1px solid #CCC;
	background:url(../images/icon-logon-lightBulb.png) 5px no-repeat;
	font-size:12px;
}

#logon-content1-right{
	margin-left:5px;
}

#logon-content1-right-top{
	width:294px;
	height:7px;
	background:url(../images/bg-logonBox2-topBottom.png) no-repeat;
}

#logon-content1-right-middle{
	width:294px;
	/*height:468px;*/
	background:url(../images/bg-logonBox2-middle.png) repeat-Y;
}

#logon-content1-right-bottom{
	width:294px;
	height:7px;
	background:url(../images/bg-logonBox2-topBottom.png) 0 bottom no-repeat;
}

.logon-right-table{
	margin:0 auto;
	width:276px;
}


#logon-content1-right H1{
	padding-left:5px;
	color:#FFF;
	text-shadow:0 -1px 1px #557f2b;
	font-size:16px;
}

#logon-content1-right H2{
	padding-left:5px;
	font-size:14px;
}

#logon-content1-right UL{
	margin:0px;
	padding-left:18px;
	font-size:10px;
	color:#000;
}

#logon-content1-right LI{}

.logon-form-table{width:100%;}
.logon-form-table TD{vertical-align:middle;}

.logon-form-table LABEL{
	color:#FFF;
	text-shadow:0 -1px 1px #557f2b;
	white-space:nowrap;
}

.logon-form-table INPUT[type="text"], .logon-form-table INPUT[type="password"]{
	padding:5px 2%;
	width:96%;
	border:1px solid #999;
	-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
}

.logon-form-table TD{
	padding:5px;
}

#btn-logon-continue{
	display:block;
	padding:0;
	padding-top:7px;
	width:275px;
	height:27px;
	background:url(../images/btn-logon-continue.png) no-repeat;
	color:#FFF;
	text-shadow:0 -1px 1px #c8af90;
	text-align:center;
	cursor:pointer;
}


#logon-registrationBox{
	width:274px;
	height:160px;
	background:url(../images/bg-logonBox2-newRegistration.png) no-repeat;
}

#logon-registrationBox H2{
	padding:6px 7px;
	color:#FFF;
	text-shadow:0 -1px 1px #557f2b;
	font-size:14px;
}

#logon-registrationBox P.middleMsg{
	padding:25px 20px 25px 135px;
}

#btn-logon-register{
	display:block;
	padding:12px 35px 10px 0;
	font-weight:bold;
	text-align:center;
}

#logon-content2{
	margin:5px auto 0;
	width:800px;
}

.logon-bottom-table{
	margin-left:3px;
	width:795px;
}

.logon-bottom-table TD.leftSide{
	width:399px;
	height:157px;
	background:url(../images/bg-logonBox3-left.png) no-repeat;
	vertical-align:top;
}

.logon-bottom-table TD.rightSide{
	width:386px;
	height:157px;
	background:url(../images/bg-logonBox3-right-whatsnew.png) no-repeat;
	vertical-align:top;
}

#logon-demoWatchlist H2{
	margin-top:20px;
	color:#000;
	font-size:22px;
	font-weight:normal;
}

#btn-logon-playnow{
	display:block;
	margin:0 auto;
	padding: 13px 0 0 70px;
	width:205px;
	height:42px;
	background:url(../images/btn-logon-demo-playnow.png) no-repeat;
	color:#FFF;
	text-shadow:0 -1px 1px rgba(0,0,0,0.5);
	font-size:22px;
	text-align:left;
	cursor:pointer;
}

#logon-demoWatchlist P{
	color:#000;
}

#logon-whatsnew{
	padding-left:10px;
}

#logon-whatsnew-text{
	width:170px;
}

#logon-whatsnew H2{
	margin-top:20px;
	color:#f99c3f;
	text-shadow:1px 1px 2px #FFF;
	font-size:1em;
}
#logon-whatsnew P{color:#000;}

/* Landing */

.landing-bottom-table{
	margin-left:3px;
	margin-bottom:5px;
	width:615px;
}

.landing-bottom-table TD.leftSide{
	width:307px;
	height:157px;
	background:url(../images/bg-landingTop-left.png) no-repeat;
	vertical-align:top;
}

.landing-bottom-table TD.rightSide{
	width:298px;
	height:157px;
	background:url(../images/bg-landingTop-right-whatsnew.png) no-repeat;
	vertical-align:top;
}

#landing-demoWatchlist H2{
	margin-top:20px;
	color:#000;
	font-size:20px;
	font-weight:normal;
}

#btn-landing-playnow{
	display:block;
	margin:0 auto;
	padding: 0;
	width:275px;
	height:54px;
	background:url(../images/btn-logon-demo-playnow.png) no-repeat;
	color:#FFF;
	text-shadow:0 -1px 1px rgba(0,0,0,0.5);
	font-size:22px;
	text-align:center;
	cursor:pointer;
}

#btn-landing-playnow span{
	display:block;
	padding-top:10px;
}

#landing-demoWatchlist P{
	color:#000;
}

#landing-whatsnew{
	padding-left:10px;
}

#landing-whatsnew-text{
	width:150px;
}

#landing-whatsnew H2{
	margin-top:20px;
	color:#f99c3f;
	text-shadow:1px 1px 2px #FFF;
	font-size:1em;
}
#landing-whatsnew P{color:#000;}



/* ------------------------------------------------- */
/* Content Specific Styles ------------------------- */
/* ------------------------------------------------- */

#middle_title{
	position:absolute;
	display:block;
	margin:0;
	z-index:1000;	
	left:155px;
	top:115px;
}

/* add by Kenneth */
#middle_title_dummy{
	position:relative;
	display:block;
	margin:0;
	height:58px;
	padding:47px 0 0 166px; 
}

/* kimkind edited */
#middle{
	position:relative;
	display:block;
	margin:0;
	padding:0 0 0 155px;
	min-height:0;
}

#middle2{
	position:relative;
	display:block;
	margin:0;
	padding:0 26px;
}

#contents-legacy{
	position:relative;
	margin:0;
	padding:0 2px;
	width:792px;
	height:500px;
}

#contents{
	position:relative;
	margin:0;
	padding:0;
	width:626px;
	height:auto;
}

#contents>h2{
	margin-top:-2px;
	margin-bottom:10px;
	padding: 20px 20px;
	background:url(../images/headingBar-1.jpg) no-repeat;
	font-size:16px;
	color:#FFF;
	line-height:1em;
	text-shadow:0px -1px 1px #588212;
}

#contents2{
	position:relative;
	margin:0;
	padding:0;
	width:497px;
	height:auto;
}

#contents2>h2{
	margin-top:-2px;
	margin-bottom:10px;
	padding: 20px 20px;
	background:url(../images/headingBar-2.png) no-repeat;
	font-size:16px;
	color:#FFF;
	line-height:1em;
	text-shadow:0px -1px 1px #588212;
}

#contents3{
	position:relative;
	margin:0;
	padding:0;
	width:795px;
	height:auto;
}

#contents3>h2{
	margin-top:-2px;
	padding: 20px 20px;
	background:url(../images/headingBar-3.png) no-repeat;
	font-size:16px;
	color:#FFF;
	line-height:1em;
	text-shadow:0px -1px 1px #588212;
}

#contents4{
	position:relative;
	margin:0;
	padding:0;
	width:929px;
	height:auto;
}

#contents4>h2{
	margin-top:0px;
	padding: 20px 20px;
	background:url(../images/headingBar-4.png) no-repeat;
	font-size:16px;
	color:#FFF;
	line-height:1em;
	text-shadow:0px -1px 1px #588212;
}

#text-updateTime{
	padding-right:3px;
	margin-bottom:1em;
	color:#000;
	font-size:0.85em;
	text-align:right;
}

#text-info{
	padding-right:3px;
	margin-bottom:0.3em;
	color:#000;
	font-size:0.85em;
	text-align:right;
}

#myPortfolio-updateBtn{
	position:absolute;
	top:10px;
	right:20px;
	display:block;
}

#myPortfolio-updateBtn a{
	display:block;
	margin:0;
	padding: 11px 0 0 0;
	width:98px;
	height:22px;
	background:url(../images/btn-set1.png) 0 -80px no-repeat;
	text-align:center;
	font-size:0.85em;
	font-weight:bold;
	line-height:1em;
	color:#FFF;
	text-shadow:0px -1px 1px #333;
	cursor:pointer;
	-khtml-user-select:none;
}

#contents #errorMessage{
	margin:0;
	padding:0 10px 10px;
}

#contentBox, #messageBox{
	margin-bottom:10px;
}

#contentBox-middle-sysMsg{
	width:100%;
	background:#DDD;
	background:url(../images/bg-contentBox-middle.png) 1px top repeat-y;
}

#contentBox-middle-sysMsg-border{
	margin-left:5px;
	width:613px;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	background:url(../images/bg-contentBox-middle-sysMsg.png) repeat-x;
}

#contentBox-middle-sysMsg-border>p{
	margin:0;
	padding:14px;
	color:#FFF;
	font-size:0.85em;
	text-align:left;
}

#contentBox-middle-topShadow{
	width:100%;
	height:10px;
	background:url(../images/bg-contentBox-middle-topShadow.png) no-repeat;
}

#contentBox2-middle-topShadow{
	height:10px;
	background:url(../images/bg-contentBox2-middle-topShadow.png) no-repeat;
}

#contentBox2-middle-sysMsg{
	width:100%;
	background:#DDD;
	background:url(../images/bg-contentBox2-middle.png) 0 top repeat-y;
}

#contentBox2-middle-sysMsg{
	width:100%;
	background:#DDD;
	background:url(../images/bg-contentBox2-middle.png) 0 top repeat-y;
}

#contentBox2-middle-sysMsg-border{
	margin-left:4px;
	width:489px;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	background:url(../images/bg-contentBox-middle-sysMsg.png) repeat-x;
}

#contentBox2-middle-sysMsg-border>p{
	margin:0;
	padding:14px;
	color:#FFF;
	font-size:0.85em;
	text-align:left;
	text-shadow:0px -1px 1px #0d5271;
}
#contentBox3{
	position:relative;
}

#contentBox3-middle-topShadow{
	margin:0 auto;
	width:787px;
	height:10px;
	background:url(../images/bg-contentBox3-middle-topShadow.png) center top no-repeat;
	text-align:center;
}

#contentBox4-middle-topShadow{
	margin:0 auto;
	width:787px;
	height:10px;
	background:url(../images/bg-contentBox4-middle-topShadow.png) center top no-repeat #DDD;
	text-align:center;
}

#contentBox-middle-message{
	width:100%;
	background:url(../images/bg-contentBox-middle-message.png) no-repeat;
}

#contentBox-middle-message2{
	width:100%;
	background:url(../images/bg-contentBox-middle-message2.png) no-repeat;
}

#contentBox-middle-messageBorder{
	margin-left:5px;
	width:613px;
	border-top:1px solid #BBB;
	border-bottom:1px solid #BBB;
}

#contentBox-middle-message p, #contentBox-middle-message2 p{
	margin:0;
	padding:10px 20px;
	color:#000;
	font-size:0.85em;
	text-shadow:1px 1px 2px #FFF;
}

#contentBox2-messageContainer{
	position:relative;
	margin:0;
	padding:0;
	background:url(../images/bg-contentBox2-middle.png) 0 top repeat-y;
}

#contentBox2-middle-message, #contentBox2-middle-message2{
	margin-left:4px;
	width:489px;
	background:#CECFCE;
}

#contentBox2-middle-message{background:url(../images/bg-contentBox3-middle-topShadow.png) center top no-repeat #CECFCE;}
/* start edited by hanks to fix log */
#contentBox2-middle-message p, #contentBox2-middle-message2 p{
	margin:0;
	padding:1em 21px;
	color:#000;
	font-size:0.85em;
	text-align:left;
	text-shadow:1px 1px 2px #FFF;
}

#contentBox2-middle-message table, #contentBox2-middle-message2 table{
	padding:12px 21px;
	background:#EDEFED;
}

#contentBox2-error-message { margin:0; padding:0; }
#contentBox2-error-message td { padding: 12px 21px 0 21px; }

/* end hanks */
#contentBox2-middle-messageBorder{
	margin-left:0px;
	width:489px;
	border-top:1px solid #AAA;
	border-bottom:1px solid #AAA;
}

#contentBox3-middle-message, #contentBox3-middle-message2, #contentBox3-middle-sysMsg{
	margin:0 auto;
	width:787px;
	background:#CECFCE;
	text-align:center;
}

#contentBox3-middle-message{background:url(../images/bg-contentBox3-middle-topShadow.png) center top no-repeat #CECFCE;}
#contentBox3-middle-sysMsg{background:url(../images/bg-contentBox3-middle-sysMsg.png) repeat-x;}

#contentBox3-middle-message p, #contentBox3-middle-message2 p{
	margin:0;
	padding:15px;
	color:#000;
	font-size:0.85em;
	text-align:left;
	text-shadow:1px 1px 2px #FFF;
}

 #contentBox3-middle-sysMsg p{
	margin:0;
	padding:14px;
	color:#FFF;
	font-size:0.85em;
	text-align:left;
	text-shadow:0px -1px 1px #0d5271;
}

#contentBox3-middle-messageBorder{
	margin-left:0px;
	width:787px;
	border-top:1px solid #AAA;
	border-bottom:1px solid #AAA;
}

#contentBox-top, #messageBox-top{
	position:relative;
	margin:0;
	padding:20px 20px 9px 20px;
	background:url(../images/bg-contentBox-top.png) no-repeat;
}

#contentBox-top>h2, #messageBox-top>h2{
	font-size:16px;
	color:#000;
	line-height:1em;
	text-shadow:1px 1px 2px #FFF;
}

#contentBox4-top{
	margin:0;
	padding:0;
	height:10px;
	background:url(../images/bg-contentBox4-topBottom.png) left top no-repeat;
}

#contentBox4-middle{
	position:relative;
	margin:0;
	padding:0;
	background:url(../images/bg-contentBox4-middle.png) repeat-y;
}

#contentBox4-bottom{
	margin:0;
	padding:0;
	height:10px;
	background:url(../images/bg-contentBox4-topBottom.png) left bottom no-repeat;
}

#contentBox4-middle .borderBox{
	margin-left:6px;
	padding:10px 16px;
	width:886px;
	height:auto;
	border-bottom:1px solid #CCC;
}

#contentBox4-middle .paddingBox{
	padding:20px;
}

#contentBox4-middle .shadowBox{
	margin-left:6px;
	padding:10px 16px;
	width:886px;
	background:url(../images/bg-contentBox4-middle-topShadow.png) center bottom no-repeat;
}

#contentBox4-middle p{
	font-size:0.85em;
	color:#000;
}


#messageBox-bottom{
	margin:0;
	padding: 17px 20px;
	width:584px;
	background:url(../images/bg-contentBox-bottom-notice.png) left bottom no-repeat;
}

#messageBox-bottom>p{
	font-size:1em;
	color:#000;
	font-weight:bold;
	line-height:1em;
	text-shadow:1px 1px 2px #FFF;
}

#contentBox3-body-header {
	color: black;
    font-size: 16px;
    font-weight: bold;
    height: 1em;
    line-height: 1em;
    margin: 0 2px;
    padding: 3px 16px 8px;
    text-shadow: 1px 1px 2px white;
    padding-top: 5px;
}

/* Content Info Box */
.contentInfoBox-btn{
	margin:0;
	padding:0;
}

.contentInfoBox-btn a{
	display:block;
	padding:14px 0 0 14px;
	color:#3d82c1;
	font-size:0.85em;
	font-weight:bold;
	line-height:1.2em;
	text-shadow:1px 1px 2px #FFF;
	cursor:pointer;
	-khtml-user-select:none;
}

.contentInfoBox-btn a.on{
	width:364px;
	height:48px;
	background:url(../images/bg-contentInfoBox-top.png) no-repeat;
}

.contentInfoBox-btn a.off{
	width:165px;
	height:27px;
	background:url(../images/btn-contentInfoBox.png) no-repeat;
}


.contentInfoBox-middle{
	position:relative;
	display:none;
	margin:0;
	padding:10px 20px;
	width:338px;
	min-height:20px;
	background:url(../images/bg-contentInfoBox-middle.png) repeat-y;
}

.contentInfoBox-bottom{
	display:none;
	margin:0;
	padding:0;
	width:378px;
	height:20px;
	background:url(../images/bg-contentInfoBox-bottom.png) left bottom repeat-y;
}


#btn-serviceHour{
	position:absolute;
	top:11px;
	right:4px;
	margin:0;
	padding:0;

}

#btn-serviceHour a{
	display:block;
	margin:0;
	padding:10px 0 0 32px;
	background:url(../images/btn-serviceHour.png) no-repeat;
	width:107px;
	height:23px;
	color:#FFF;
	font-size:0.8em;
	font-weight:bold;
	line-height:1em;
	text-shadow:0px -1px 1px #457115;
	cursor:pointer;
}

#contentBox-middle{
	position:relative;
	margin:0;
	padding:10px 20px;
	background:url(../images/bg-contentBox-middle.png) 1px top repeat-y;
}
#contentBox-bottom{
	margin:0;
	padding:0;
	height:15px;
	background:url(../images/bg-contentBox-bottom.png) 1px bottom no-repeat;
}

#contentBox2-top2{
	position:relative;
	margin:0;
	padding:0;
	height:25px;
	background:url(../images/bg-contentBox2-top.png) 0 top no-repeat;
}

#contentBox2-middle{
	position:relative;
	margin:0;
	padding:0px 20px 10px;
	background:url(../images/bg-contentBox2-middle.png) 0 top repeat-y;
}
#contentBox2-bottom{
	margin:0;
	padding:0;
	height:59px;
	background:url(../images/bg-contentBox2-bottom.png) 0 bottom no-repeat;
}

#contentBox2-top3{
	position:relative;
	margin:0;
	padding:0;
	height:10px;
	background:url(../images/bg-contentBox6-top.png) 0 top no-repeat;
}

#contentBox3-top{
	position:relative;
	margin:0;
	padding:0;
	height:25px;
	background:url(../images/bg-contentBox3-top.png) 0 top no-repeat;
}
#contentBox3-middle{
	position:relative;
	margin:0;
	padding:0;
	background:url(../images/bg-contentBox3-middle.png) 0 top repeat-y;
}
#contentBox3-bottom{
	margin:0;
	padding:0;
	height:59px;
	background:url(../images/bg-contentBox3-bottom.png) 0 bottom no-repeat;
}

/* Kimkind added */
/* Add new id for the system msg page of order page with mini portlet. */
#contentBox3-middle-for-mini-portlet{
	position:relative;
	margin:0;
	padding:0;
	background:url(../images/bg-contentBox2-middle.png) 0 top repeat-y;
}

/* Kimkind added */
/* Add new id for the system msg page of order page with mini portlet. */
#contentBox3-middle-sysMsg-for-mini-portlet
{
	margin:0 auto;
	width:489px;
	background:#DDD;
	text-align:center;
	background:url(../images/bg-contentBox3-middle-sysMsg.png) repeat-x;
}

/* Kimkind added */
/* Add new id for the system msg page of order page with mini portlet. */
#contentBox3-middle-sysMsg-for-mini-portlet p{
	margin:0;
	padding:14px;
	color:#FFF;
	font-size:12px;
	text-align:left;
	text-shadow:0px -1px 1px #0d5271;
}

.accountNumTable td{
	padding:10px 15px;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	background:#DDD;
}

.greyTable td{
	padding:10px 15px;
	border-bottom:1px solid #CCC;
	background:#EDEFED;
}

#importantNotes{
	margin-bottom: 20px;
	font-size:0.85em;
}

/* edited by hanks */
#importantNotes p{
	padding: 0 5px;
}
/* end */

#importantNotes table td{
	padding:5px 0;
	vertical-align:top;
}

#importantNotes>h3{
	color:#000;
	font-size:1em;
}

#importantNotes>ol{
	margin:0;
	margin-left:18px;
	padding:0;
	color:#000;
}

/* Add for EBPP */
#importantNotes.noMarginBottom{
	margin-bottom:0px;
	padding-left: 20px;
	padding-right: 20px;
}
#importantNotes2{
	padding: 20px;
	font-size:0.85em;
}

#importantNotes2 table td{
	padding:5px 0;
	vertical-align:top;
}

#importantNotes2>h3{
	color:#000;
	font-size:1em;
}

#importantNotes2>ol{
	margin:0;
	margin-left:18px;
	padding:0;
	color:#000;
}

#importantNotes2>ol>li{
	padding:3px 0 3px 10px;
}

#importantNotes3{
	margin: 0 10px;
	padding: 10px;
	border-bottom:1px solid #ccc;
}

#importantNotes3 p{
	margin-bottom:1em;
	color:#000;
}

#ackLinks{
	margin:0;
	padding:10px 0;
	text-align:left;
}
#ackLinks ul{ 
	padding-left:20px;
	color:#3D82C1;
}

#ackLinks li{
	color:#3D82C1;
}

#suggestRate{
	margin-bottom:20px;
	width:578px;
	height:136px;
	background:url(../images/bg-suggestRate-orange.png) no-repeat;
}

#suggestRate>p{
	margin: 0;
	padding:10px 15px;
	color:#FFF;
	text-shadow:0px -1px 1px #967120;
}

#suggestRate-currency, #suggestRate-rate{
	margin:0;
	padding:10px;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	text-shadow:0px -1px 1px #999933;
}

#suggestRate-currency{border-right:1px solid #c39a00;}
#suggestRate-rate{border-left:1px solid #FFF;}

#suggestRate-btn{
	padding-top:0px;
}

.buySellTable{display:none;}

.contentGroup{
	padding:10px 0;
	/*border-bottom:1px solid #CCC;*/
}

.contentGroup.last{
	border:none;
}

.termText{
	margin:15px 0;
}

/* start edited by hanks to fix log */
.termText p{
	margin-bottom:1.3em;
	color:#000;
	font-size:0.85em;
	line-height:1.3em;
	text-align:justify;
	padding:0 5px;
}
/* end hanks */

#contentInfoBox-enqDepRate-btn-refresh{
	position:absolute;
	bottom:0px;
	right:20px;
}

/* Foreign Currency: Buy/Sell */
#securityCodeBox{
	height:110px;
	font-size:0.85em;
}

#securityCodeBox input#securityCode{
	margin-bottom:20px;
	width:80%;
}

#securityCodeBox .paddingBox{
	display:block;
	float:left;
	padding:10px;
	height:80px;
}

#securityCodeContent1{
	width:150px;
}

#securityCodeContent2{
	width:170px;
}

#securityCodeContent3{
	width:190px;	
}

#securityCodeBox .separator-right{
	border-right:1px solid #CCC;
}

#securityCodeBox .separator-left{
	border-left:1px solid #FFF;
}

#securityCodeBox .bottomMargin{
	margin-bottom:1em;
}

/* Service Hour overlay */
#overlay-serviceHour{
	position:absolute;
	top: 23px;
	right: 0;
	width:494px;
	min-height:30px;
	z-index:9101;
}

#overlay-serviceHour .top{
	width:100%;
	height:18px;
	background:url(../images/overlay-serviceHour-bg-topBottom.png) 0 0 no-repeat;
}

#overlay-serviceHour .middle{
	width:100%;
	min-height:10px;
	background:url(../images/overlay-serviceHour-bg-middle.png) repeat-y;
	text-align:center;
}

#overlay-serviceHour .bottom{
	width:100%;
	height:10px;
	background:url(../images/overlay-serviceHour-bg-topBottom.png) 0 bottom no-repeat;
}

#overlay-serviceHour TABLE{
	margin: 0 auto;
	width:476px;
	text-align:left;
}

#overlay-serviceHour TABLE TH{
	padding:10px;
	background:#e3e1e1;
	color:#000;
	text-shadow:1px 1px 2px #FFF, 0 -1px 1px rgba(0,0,0,0.2);
	font-size:0.85em;
	vertical-align:top;
	border-bottom:1px solid #CCC;
}

#overlay-serviceHour TABLE TD{
	padding:10px;
	background:#FFF;
	color:#000;
	font-size:0.85em;
	vertical-align:top;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}


#overlay-serviceHour TABLE TD.lastItem{
	border-right:none;
}

#overlay-serviceHour #commentBox{
	margin: 0 auto;
	padding:10px;
	width:456px;
	background:#e3e1e1;
	text-align:left;
}

#overlay-serviceHour #commentBox P{
	color:#000;
	font-size:0.8em;
	text-shadow:1px 1px 2px #FFF;
}

/* Time deposit */
#contentBox-middle-message-td{
	padding:10px 0;
	width:100%;
}

#contentBox-middle-messageBorder-td{
	margin-left:5px;
	width:613px;
	border-top:1px solid #BBB;
	border-bottom:1px solid #BBB;
	background:#CECFCE;
}
#contentBox-middle-message-td p {
	margin:0;
	padding:10px 20px;
	color:#000;
	font-size:0.85em;
	text-shadow:1px 1px 2px #FFF;
}


/* Watch List */

.watchlistButtonTable{
	padding:15px 0;
}

.watchlistButtonTable td{
	padding:10px;
	width:50%;
	border-left:1px solid #FFF;
	border-right:1px solid #999;
	vertical-align:top;
}

.watchlistButtonTable p{
	margin:1em 0;
	font-size:0.85em;
}

#watchlist-editBtn{
	position:absolute;
	top:5px;
	right:20px;
}

#watchlist-cancelBtn{
	position:absolute;
	top:5px;
	right:85px;
}

#watchlist-doneBtn{
	position:absolute;
	top:5px;
	right:20px;
}

.watchlistDataTable{
	width:787px;
}


.watchlistDataTable th{
	padding:10px 0;
	font-size:0.85em;
	color:#FFF;
	text-align:center;
}

.watchlistDataTable tr.greenRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #58901C;
	text-shadow:0px -1px 1px #477714;
}
.watchlistDataTable tr.yellowRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #e1ac02;
	text-shadow:0px -1px 1px #a08e33;
}
.watchlistDataTable tr.blueRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #036EA7;
	text-shadow:0px -1px 1px #024264;
}
.watchlistDataTable tr.orangeRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #f68e13;
	text-shadow:0px -1px 1px #a68c01;
}

.watchlistDataTable tr.cyanRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #2db6a4;
	text-shadow:0px -1px 1px #1f7f71;
}

.watchlistDataTable td{
	padding:5px 5px;
	background: #FFF;
	border-bottom:1px solid #CCC;
	font-size:0.85em;
	color:#000;
	text-align:center;
}

.watchlistDataTable tr.greenRow td{
	padding:5px 5px;
	background: #f1f7e7;
	border-bottom:1px solid #CCC;
	font-size:0.85em;
	color:#000;
	text-align:center;
}

.watchlistDataTable tr.yellowRow td{
	padding:5px 5px;
	background: #f5f0d2;
	border-bottom:1px solid #CCC;
	font-size:0.85em;
	color:#000;
	text-align:center;
}

.watchlistDataTable tr.blueRow td{
	padding:5px 5px;
	background: #eff6fa;
	border-bottom:1px solid #CCC;
	font-size:0.85em;
	color:#000;
	text-align:center;
}


.watchlistDataTable .up{
	padding-left:12px;
	color:#65a125;
	background:url(../images/arrow-up.png) left center no-repeat;
}

.watchlistDataTable .down{
	padding-left:12px;
	color:#ff3c3c;
	background:url(../images/arrow-down.png) left center no-repeat;
}

.watchlistDataTable .noChange{
	padding-left:12px;
	color:#000;
}

.table-cell{
	position:relative;
}


.table-whiteCorner{
	position:absolute;
	display:block;
	top:-6px;
	left:5px;
	width:14px;
	height:13px;
	background:url(../images/table-whiteCorner.png) left center no-repeat;
}

.watchlist-input-code{
	padding:5px;
	width:60px;
	color:#000;
	font-size:0.85em;
	border-radius:5px;
}

.watchlist-input-tab{
	padding:3px;
	width:70%;
	border:1px solid #CCC;
	color:#000;
	font-size:0.7em;
	border-radius:3px;
	resize:none;
}

/* Order Status */

.orderStatusDataTable{
	width:787px;
}


.orderStatusDataTable th{
	/*position:relative;*/
	padding:10px 2px;
	border-right:1px solid #AAA;
	border-bottom:1px solid #AAA;
	font-size:0.85em;
	color:#000;
	text-align:left;
	vertical-align:top;
}

.orderStatusDataTable tr.greyRow th{
	background: #CECFCE;
	text-shadow:1px 1px 2px #FFF;
}
.orderStatusDataTable tr.yellowRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #e1ac02;
	text-shadow:0px -1px 1px #a08e33;
}
.orderStatusDataTable tr.blueRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #209acd;
	text-shadow:0px -1px 1px #176d91;
}
.orderStatusDataTable tr.orangeRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #f68e13;
	text-shadow:0px -1px 1px #a68c01;
}

.orderStatusDataTable tr.cyanRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #2db6a4;
	text-shadow:0px -1px 1px #1f7f71;
}

.orderStatusDataTable td{
	padding:5px 2px;
	background: #FFF;
	border-bottom:1px solid #CCC;
	border-right: 1px solid #CCC;
	font-size:0.85em;
	color:#000;
	text-align:left;
}

.orderStatusDataTable tr.greenRow td{
	background: #f1f7e7;
}

.orderStatusDataTable tr.yellowRow td{
	background: #f5f0d2;
}

.orderStatusDataTable tr.orangeRow td{
	background: #ffeed9;
}

.orderStatusDataTable tr.blueRow td{
	background: #e7f6f7;
}


.orderStatusDataTable .up{
	padding-left:12px;
	color:#65a125;
	font-size:0.8em;
	font-weight:bold;
	background:url(../images/arrow-up.png) left center no-repeat;
}

.orderStatusDataTable .down{
	padding-left:12px;
	color:#ff3c3c;
	font-size:0.8em;
	font-weight:bold;
	background:url(../images/arrow-down.png) left center no-repeat;
}

.orderStatusDataTable .noChange{
	padding-left:12px;
	color:#000;
	font-size:0.8em;
	font-weight:bold;
}

/* My Portfolio */
#myPortfolio-rightBtn{
	position:absolute;
	top:15px;
	right:15px;
}

.myPortfolioDataTable{
	width:100%;
}


.myPortfolioDataTable th{
	padding:10px 5px;
	border:1px solid #AAA;
	border-left:none;
	font-size:0.85em;
	color:#000;
	text-align:left;
	vertical-align:top;
}

.myPortfolioDataTable tr.greyRow th{
	background: #CECFCE;
	text-shadow:1px 1px 2px #FFF;
}

.myPortfolioDataTable tr.greyRow td{
	padding:20px 5px;
	background: #EDEFED;
	font-size:1em;
}

.myPortfolioDataTable tr.yellowRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #e1ac02;
	text-shadow:0px -1px 1px #a08e33;
}
.myPortfolioDataTable tr.blueRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #209acd;
	text-shadow:0px -1px 1px #176d91;
}
.myPortfolioDataTable tr.orangeRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #f68e13;
	text-shadow:0px -1px 1px #a68c01;
}

.myPortfolioDataTable tr.cyanRow th{
	background: url(../images/table-topShadow.png) left top repeat-x #2db6a4;
	text-shadow:0px -1px 1px #1f7f71;
}

.myPortfolioDataTable td{
	padding:5px 5px;
	background: #FFF;
	border-right: 1px solid #DDD;
	border-bottom:1px solid #CCC;
	font-size:0.85em;
	color:#000;
	text-align:right;
}

.myPortfolioDataTable tr.greenRow td{
	background: #f1f7e7;
}

.myPortfolioDataTable tr.yellowRow td{
	background: #f5f0d2;
}

.myPortfolioDataTable tr.sumRow td{
	padding-top:20px;
	padding-bottom:20px;
	border-right:none;
}


.myPortfolioDataTable .up{
	padding-left:12px;
	color:#65a125;
	font-size:0.8em;
	font-weight:bold;
	background:url(../images/arrow-up.png) left center no-repeat;
}

.myPortfolioDataTable .down{
	padding-left:12px;
	color:#ff3c3c;
	font-size:0.8em;
	font-weight:bold;
	background:url(../images/arrow-down.png) left center no-repeat;
}

.myPortfolioDataTable .noChange{
	padding-left:12px;
	color:#000;
	font-size:0.8em;
	font-weight:bold;
}

/* Ming Poon added for my Portfolio styling*/
#myPortfolioImportantNotes td{
	padding:4px;
}

/* FAQ Legacy styles */
.faq-legacy{}

.faq-legacy p{font-size:14px !important;}

.faq-legacy td{
	padding:5px;
}

.faq-legacy .TITLE2{
	color: white;
	font-weight: bold;
}

.faq-legacy .DarkGrey{
	background-color: #898989;
}

.faq-legacy .LightGrey{
	background-color: #EDEFED;
}

.faq-legacy a.p2gfaqBoldLink{
	color: #000;
	font-weight: bold;
}

.faq-legacy a.p2gfaqLightLink{
	color: #000;
}

.faq-legacy a.p2gfaqBoldLink:hover, .faq-legacy a.p2gfaqLightLink:hover{
	color: #3d82c1;
	text-decoration:underline;
}

.faq-legacy .BlackTitle{
	color: #000;
	font-weight: bold;
}

.faq-legacy .Question{
	color: #06C;
	font-weight: bold;
}

.faq-legacy .CONTENT, .faq-legacy .CONTENT td{
	color: #000;
}

.faq-legacy .portletLink{color: #06C;}
.faq-legacy .portletLink:hover{text-decoration:underline;}

.faq-legacy .greyheader1{
	background-color: #666;
	color: white;
	font-style: italic;
	font-weight: bold;
}

.faq-legacy .greyheader2{
	background-color: #666;
	color: white;
	font-size:1em;
	font-weight: bold;
	text-align: center;
}

.faq-legacy .lightgreycontent{
	background-color: #E3E3E3;
	color: #000;
	font-size: 14px;
	text-align: center;
}


/* >>> END Content Specific Styles ----------------- */







/* ------------------------------------------------- */
/* Footer Styles ----------------------------------- */
/* ------------------------------------------------- */
/*
#footer{
	position:relative;
	margin-bottom:20px;
	padding:10px 3px;
	width:100%;
	height:30px;
	text-align:left;
}
*/

#footer p{
	font-size:0.7em;;
	color:#000;
}

#footer{
	position:absolute;
	left:0;
	bottom:0;
	padding:10px 1%;
	width:98%;
	height:30px;
	text-align:left;
	z-index:-1;	
}

#footer #logo-HSBCGroup{
	display:block;
	position:absolute;
	top:22px;
	right:5px;
	width:119px;
	height:12px;
}

#footer a{
	color:#000;
	text-decoration:underline;
	cursor:pointer;
}

#footer a:hover{color:#3d82c1;}


/* >>> END Footer Styles --------------------------- */

/* start 15 oct 2011 Travis Customer Authentication Phase 1*/
#idv-footer{
	position:relative;
	margin-bottom:20px;
	padding:30px 3px;
	width:100%;
	height:30px;
	text-align:left;
}

/* For RCC input box */
ul.dualPasswordFields {
    padding: 0 !important;
    margin: 0;
}

ul.dualPasswordFields li {
    list-style: none !important;
    float: left;
    width: 30px;
    margin-right: 10px;
    text-align: center;
}

ul.dualPasswordFields li div {
    font-size: 10px;
}

ul.dualPasswordFields input[type=password] {
    width: 30px;
    height: 14px;   
    padding: 5px 0;
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
}

ul.dualPasswordFields li.disabled {
    width: 20px;
    margin-right: 10px;
}

ul.dualPasswordFields li.disabled input[type=password] {
    background: #b6b5b5;
    border: 1px solid #787878;
    width: 20px;
    box-shadow: none;
}

div.securityQuestion {
    width:342px;
    padding: 5px 75px 5px 10px;
}

input.securityAnswer {
	width: 320px;
}

.greyTable td{
	padding:10px 0;
	border-bottom:1px solid #CCC;
	background:#EDEFED;
}

.greyTable tr.withoutBorderBottom td, .greyTable td.withoutBorderBottom {
	border-bottom: 0;
}

.greyTable td input.changePassword[type=password] {
	width: 160px;
}

/* Smart Tips Overlay */
.overlay-smartTips, .overlay-secQue{
	position:absolute;
	top: 15px;
	left: -405px;
	width: 494px;
	min-height:30px;
	z-index:9101;
}
.overlay-smartTips.left {
	left: -44px;
}

.overlay-secQue {
	left: -200px;
}

.overlay-smartTips .top, .overlay-secQue .top{
	width:100%;
	height:18px;
	background:url(../images/overlay-serviceHour-bg-topBottom.png) 0 0 no-repeat;
}
.overlay-smartTips.left .top {
	width:100%;
	height:18px;
	background:url(../images/overlay-serviceHour-bg-topBottom-left.png) 0 0 no-repeat;
}

.overlay-smartTips .middle, .overlay-secQue .middle{
	width:493px;
	min-height:10px;
	background: #FFF url(../images/overlay-smarttips-bg-middle.png) repeat-y;
	text-align:justify;
}

.overlay-smartTips .bottom, .overlay-secQue .bottom{
	width:100%;
	height:10px;
	background:url(../images/overlay-serviceHour-bg-topBottom.png) 0 bottom no-repeat;
}

.overlay-smartTips #commentBox, .overlay-secQue #commentBox{
	margin: 0 auto;
	padding:10px;
	width:456px;
	background:#e3e1e1;
	text-align:left;
}

.overlay-smartTips #commentBox P, .overlay-secQue #commentBox P{
	color:#000;
	font-size:0.8em;
	text-shadow:1px 1px 2px #FFF;
}
.overlay-smartTips ul, .overlay-secQue ul  {
	margin: 0;
	padding: 10px 20px 10px 30px;
}
.overlay-smartTips ul li, .overlay-secQue ul li {
	list-style:disc;
}

/* logon smart tips */
.overlay-smartTips.logon h2, .overlay-smartTips.logon h3{
	background: #e3e1e1;
	height: 37px;
	margin:0;
	padding: 0 20px;
	color:#000;
	font-size:14px;
	font-weight: bold;
	text-align:left;
	line-height: 37px;
	border-bottom: 1px solid #CCC;
}

.overlay-smartTips.logon div.messageContainer{
	width: 476px;
	height: 100%;
	margin: 0 9px;
}

.overlay-smartTips.logon div.message{
	width: 433px;
	padding: 10px 20px;
	color: #000 !important;
}

.overlay-smartTips.logon div.message p {
	color: #000 !important;
}

#contentBox3-middle-message3 {background: #CECFCE; border-top: 1px solid #AFAFAF; border-bottom: 1px solid #AFAFAF;padding: 15px 20px; margin: 0 4px;}
#contentBox3-middle-message3.shadow {
	background: #CECFCE url("../images/bg-contentBox3-stepShadow.png") left top no-repeat; 
}

#contentBox3-middle-message3 p{
	font-size: 14px;
	padding: 0;
}

#contentBox3-bottom-border{
	margin:0;
	padding:0;
	height:10px;
	background:url(../images/bg-contentBox3-topBottom.png) left bottom no-repeat;
}

div.smarttips {
	display: inline;
}

.smarttips-text {
	color:#3d82c1;
	text-decoration:underline;
	cursor:pointer;
	vertical-align: middle;
}

.sectionSpacing {
	padding-top: 10px;
	padding-bottom: 10px;
}

#contentBox3-top.stepBar {
	height: 52px;
}
div.stepBarShadow {
	height: 10px;
	width: 789px;
	background: url("../images/bg-contentBox3-stepShadow.png") left top no-repeat;
}

#contentBox-top-border{
	margin:0;
	padding:0;
	height:10px;
	background:url(../images/bg-contentBox-topBottom.png) left top no-repeat;
}

#contentBox-bottom-border{
	margin:0;
	padding:0;
	height:10px;
	background:url(../images/bg-contentBox-topBottom.png) left bottom no-repeat;
}

#contentBox-middle-message3 {
	background: url("../images/bg-contentBox-middle2.png") repeat-y; 
	margin: 0;
}

#contentBox-middle-message3Border{
	background: #CECFCE url("../images/bg-contentBox-stepShadow.png") left top no-repeat; 
	border-top: 1px solid #AFAFAF; 
	border-bottom: 1px solid #AFAFAF;
	padding: 15px 20px; 
	margin-left:4px;
	width:573px;
}

#contentBox-middle-message3 .shadow {
	background: url("../images/bg-contentBox-stepShadow.png") left top no-repeat; 
	height: 10px;
}

#contentBox-middle-message3 p{
	font-size: 14px;
	padding: 0;
}

/* Add for EBPP*/
#contentBox-middle.noTopPadding{
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}
/* end 15 oct 2011 Travis Customer Authentication Phase 1*/

/* 13 Apr 2012 Project Winnie Enhancement  */

/* Content box common */
.contentBox{/*Height Review */ /*margin-bottom:15px*/ margin-bottome:2px;min-height:0;}
.contentBox>.top{position:relative; margin:0; padding:0; /*Height Review */ /* height:15px;*/ height:10px;}
.contentBox .top-header{margin:0 2px; /*Height Review */ /* padding:13px 20px;*/ padding: 8px 16px;  font-size:16px; line-height:1em; font-weight:bold; color:black; text-shadow:1px 1px 2px white;height:1em;}
.contentBox .top-header:first-child{/*Height Review */  /*padding:3px 20px 13px;*/ padding: 3px 16px 8px;}
.contentBox .top-header.withBtn:first-child{padding-right:220px;}
.contentBox .top-header>SPAN{float:right; font-size:0.8em; font-weight:bold; color:black;}
.contentBox .top-header+.btn{position:absolute; right:17px; top:-7px;}

.contentBox>.middle, .content_full.dynamic .contentBox .middle{margin:0; padding:0;min-height:0;}
.contentBox>.middle .messageBar, .content_full.dynamic .contentBox .middle .messageBar{margin:0 4px; /*Height Review */ /*padding:10px 18px;*/ padding:6px 14px; background:#CECFCE center top no-repeat; border-bottom:1px solid #AFAFAF; font-size:0.85em;}
.contentBox>.middle .messageBar.errorBar, .content_full.dynamic .contentBox .middle .messageBar.errorBar{background-color:#036CA4;}
.contentBox>.middle .messageBar P, .content_full.dynamic .contentBox .middle .messageBar P{padding:0; /*Height Review */ /*text-shadow: 1px 1px 2px white;*/ }
.contentBox>.middle .messageBar.errorBar P, .content_full.dynamic .contentBox .middle .messageBar.errorBar P{margin:0.3em 0; color:white; text-shadow:0 -1px 0 rgba(0,0,0,0.5);}
.contentBox>.middle TABLE+.messageBar, .content_full.dynamic .contentBox .middle TABLE+.messageBar{margin-top:15px;}
.contentBox>.bottom{margin:0; padding:0; /*Height Review */ /*height:20px;*/ height:10px;}
.contentBox>.bottom.short{height:10px;}
.contentBox .btnRow{/*Height Review */ /*padding:15px 35px;*/ padding: 5px 35px;}
.contentBox .separator-shadow{margin:0 auto; width:99%; height:10px;}
.contentBox .separator-solidGrey{/*Height Review */ /*margin:0 auto;*/ margin:5px auto 0; width:99%;}
.contentBox .note>P, .contentBox .note LI, .contentBox .note>table p, #plans{font-size:0.8em}

.content_full, .content_w_portlet{margin:0; padding:0;min-height:0;}
.content_full>.heading, .content_w_portlet>.heading{margin-top:-2px; padding:18px 20px 20px; font-size:16px; line-height:1em; color:white; text-shadow:0px -1px 0px #588212;}
.content_full>.heading>SPAN, .content_w_portlet>.heading>SPAN{font-size:0.7em; font-weight:normal; padding-left:5px;}
.content_full>.banner, .content_w_portlet>.banner{text-align:center;}
.content_full .titleBtnSet2, .content_w_portlet .titleBtnSet2{top:9px;}

/* Content full only */
.content_full{width:795px;}
.content_full>.heading{background:url(../images/headingBar-3.png) no-repeat;}
.content_full>.contentBox>.top{background: url(../images/bg-contentBox3-top.png) no-repeat;}
.content_full>.contentBox>.middle{background:url(../images/bg-contentBox3-middle.png) 0 top repeat-y;}
.content_full>.contentBox>.bottom{background:url(../images/bg-contentBox3-bottom.png) 0 bottom no-repeat;}
.content_full>.contentBox>.middle .messageBar.shadow{background-image: url(../images/bg-contentBox3-stepShadow.png);}
.content_full>.contentBox .separator-shadow{/*Height Review */ height:5px; background: url(../images/bg-contentBox3-middle-topShadow.png) center top no-repeat;}
.content_full .tabnav_v3_bottom{background: url(../images/tabNav2-bottom.png) no-repeat;}
.content_full .dTable{margin:0 auto; width:787px;}

.dynamic{width:795px;}
TABLE.dynamic{width:795px;}
.content_full.dynamic{min-width:795px;}
.content_full.dynamic .contentBox>.top{display:none;}
.content_full.dynamic .contentBox .middle{margin-left:2px; margin-right:2px; padding:10px 0 5px; background:#EFEFEF; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 2px 2px rgba(0,0,0,0.5); border:2px solid white; border-radius:5px;}
.content_full.dynamic .contentBox .separator-shadow{margin:0 auto; width:100%; background:url(../images/table-topShadow.png) center top repeat-x;}
.content_full.dynamic .dTable{width:100%;}
.content_full.dynamic .pagination{width:100%;}
.content_full.dynamic .contentBox>.bottom{display:none;}
.content_full.dynamic .contentBox .middle .messageBar{margin:0; background: url(../images/table-topShadow.png) center top repeat-x #CECFCE;}
.content_full.dynamic .tabnav_v3_bottom {display:none;margin-left:2px; margin-right:2px;background:#EFEFEF; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); border:2px solid white; border-top:none; }
.content_full.dynamic.withTab  .contentBox .middle{border-top:0; border-radius:0 0 5px 5px;}

/* Content with portlet only */
.content_w_portlet{width:592px;}
.content_w_portlet>.heading{background:url(../images/headingBar-5.png) no-repeat;}
.content_w_portlet>.contentBox>.top{background: url(../images/bg-contentBox5-top-bottom.png) 0 0 no-repeat;}
.content_w_portlet>.contentBox>.middle{background:url(../images/bg-contentBox5-middle.png) 0 50% repeat-y;}
.content_w_portlet>.contentBox>.bottom{background:url(../images/bg-contentBox5-top-bottom.png) 0 100% no-repeat;}
.content_w_portlet>.contentBox>.middle .messageBar.shadow{background-image: url(../images/bg-contentBox5-stepShadow.png);}
.content_w_portlet>.contentBox .separator-shadow{background: url(../images/bg-contentBox5-stepShadow.png) center top no-repeat;}
.content_w_portlet .dTable{width:584px;}

/* Banner Row */
.content_w_portlet>.banner-row{margin:5px auto; width:588px;}
.banner-row>.banner{
	display:inline-block; margin:0 3px; padding:10px; width:265px;
	background:#F0F0F0; border:2px solid white; border-radius:5px;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
	cursor:pointer;
}
.banner-row>.banner{margin-left:0;float:left}
.banner-row>.banner+.banner{position:static; right:0;float:right;}
.banner-row>.banner>H3{font-size:1em; color:#FC6F00; text-shadow:1px 1px 2px white;}
.banner-row>.banner>P{font-size:0.9em; color:black; text-shadow:1px 1px 2px white;}
.banner-row>.banner>IMG{float:right; margin-left: 5px;}

/* Portlet common */
.subNav{position:absolute; top:48px; right:31px; z-index:8000;}
.portlet{margin:0; padding:0;}
.portlet H3, .portlet P, .portlet LI{font-size:0.85em; font-weight:bold; text-shadow:1px 1px 2px white;}
.portlet+.portlet{margin-top:3px;}
.portlet>.top{margin:0; padding:20px 15px 0 15px; height:43px;}
.portlet>.top H3{color:black; text-shadow:1px 1px 2px rgba(255,255,255,0.5); line-height:1.2em;}
.portlet>.middle{/*Height Review */ /*padding:10px 15px;*/ padding:2px 15px;}
.portlet>.middle P{/*Height Review */ /*margin-top:0.5em;*/ margin-top:0.4em; /*Height Review */ /*margin-bottom:0.5em;*/ margin-bottom:0.4em;}
.portlet>.middle A{
	margin:0; padding:0; 
	color:#3D82C1; line-height:1.2em; 
	text-decoration:underline; cursor:pointer;
}
.portlet>.middle A.txt-black{color:#333;}
.portlet>.middle A:hover{color:#3D82C1; text-decoration:underline; }
.portlet>.middle A>.icon{margin-bottom:-4px;}
.portlet>.middle>UL{margin:0; padding:0 0 0 1.5em;}
.portlet>.middle>UL>LI{padding-bottom:10px; color:#3D82C1;}
.portlet>.bottom{/*Height Review */ /*height:20px;*/ height:8px;}
.portlet .separator-solidGrey{border-top:1px solid #CCC;}
/* Portlet ver.3 */
#subNav4{width: 198px;}
#subNav4>.portlet>.top{background:url(../images/subnav4-portlet-top-bottom.png) 0 0 no-repeat;}
#subNav4>.portlet>.middle{background: url(../images/subnav4-portlet-middle.png) repeat-y;}
#subNav4>.portlet>.bottom{background: url(../images/subnav4-portlet-top-bottom.png) 0 100% no-repeat;}

/*
#subNav4>.portlet.orange>.top, #subNav4>.portlet.green>.top, #subNav4>.portlet.red>.top{padding:20px 10px 0 40px; height:27px;background:url(../images/subnav4-portlet-top-color.png) no-repeat;}
#subNav4>.portlet.orange>.top.twoLine, #subNav4>.portlet.green>.top.twoLine, #subNav4>.portlet.red>.top.twoLine{padding:12px 10px 0 40px; height:35px;}
*/
#subNav4>.portlet.orange>.top, #subNav4>.portlet.blue>.top, #subNav4>.portlet.red>.top{padding:20px 13px 0 33px; height:32px;background:url(../images/subnav4-portlet-top-color.png) no-repeat;}
#subNav4>.portlet.orange>.top>H3, #subNav4>.portlet.blue>.top>H3, #subNav4>.portlet.red>.top>H3{color:white; text-shadow:0 -1px 0 rgba(0,0,0,0.5);}
#subNav4>.portlet.orange>.top.twoLine, #subNav4>.portlet.blue>.top.twoLine, #subNav4>.portlet.red>.top.twoLine{padding:12px 13px 0 33px; height:40px;}
#subNav4>.portlet.orange>.top.threeLine, #subNav4>.portlet.blue>.top.threeLine, #subNav4>.portlet.red>.top.threeLine{padding:6px 13px 0 33px; height:46px;}
#subNav4>.portlet>.black A{
	color:#333333 !important;
	text-shadow:1px 1px 2px white;
}
#subNav4>.portlet>.noUnderline A{
	text-decoration:none;
}
#subNav4>.portlet>.middle.black A:hover{
	color:#3D82C1 !important;
	text-decoration:underline;
	text-shadow:1px 1px 2px white;
}

/* Portlet Orange only */
#subNav4>.portlet.orange>.top{background-position: 0 0;}
#subNav4>.portlet.orange>.middle EM{color:#FC6F00; font-style:normal;}

/* Portlet Blue only */
#subNav4>.portlet.blue>.top{background-position: 0 -60px;}
#subNav4>.portlet.blue>.middle EM{color:#22AF93; font-style:normal;}

/* Portlet Red only */
#subNav4>.portlet.red>.top{background-position: 0 -120px;}
#subNav4>.portlet.red>.middle EM{color:#FB1800; font-style:normal;}

#subNav4>.portlet>.middle EM.red{color:#FB1800 !important; font-style:normal;}
#subNav4>.portlet>.middle EM.blue{color:#22AF93 !important; font-style:normal;}
#subNav4>.portlet>.middle EM.orange{color:#FC6F00 !important; font-style:normal;}

/* Portlet List Saved Application */
#subNav4>.portlet.banner{padding:5px; height:77px; width:188px; background:url(../images/subnav4-portlet-banner-bg.png) 0 0 no-repeat;}
#subNav4>.portlet.banner TABLE TD{padding:5px; line-height:1.2em; font-size:0.9em; color:#666; text-shadow:0 1px 0 white;}
#subNav4>.portlet.banner a{text-shadow:none;}
#subNav4>.portlet.banner .banner-icon-card{width:32px; height:32px; background:url(../images/subnav4-portlet-banner-icon-cards.png) 0 0 no-repeat;}


/* Content specific */
.from-day, .from-month, .to-day, .to-month, .from-monthpb, .to-monthpb{float:left; display: inline-block; margin:0 6px;}
.from-day>.ui-dropDown-btn, .from-month>.ui-dropDown-btn, .to-day>.ui-dropDown-btn, .to-month>.ui-dropDown-btn{padding:5px 30px 5px 5px;}
.from-day, .to-day{width:80px;}
.from-month, .to-month{width:150px;}
.from-monthpb, .to-monthpb{width:115px;}
.from-day{margin-left:0;}
.to-month{margin-right:0;}
.from-day>.ui-dropDown-btn, .to-day>.ui-dropDown-btn{width:40px;}
.from-month>.ui-dropDown-btn, .to-month>.ui-dropDown-btn{width:115px;}
.from-monthpb>.ui-dropDown-btn, .to-monthpb>.ui-dropDown-btn{width:95px;}
.date-select>.to{float:left; display: inline-block; padding:5px 0; width:20px; text-align:center;}
.date-select>.datepicker{float:left; display: inline-block; padding:5px 0; width:30px; text-align:center;}

#accSumTable TH.accNo, #loanSumTable TH.accNo, #insuSumTable TH.accNo{width:28%;}
#accSumTable TH.currency, #loanSumTable TH.currency, #insuSumTable TH.currency{width:13%;}
#accSumTable TH.balance, #loanSumTable TH.balance, #insuSumTable TH.balance{width:25%;}

/* Loan & Overdraft Overview */
/* Not implemented */
/*
.loan-service>.top.orange{height:48px; background: url(../images/bg-contentBox5-top-orange.png) 0 0 no-repeat;}
.loan-service>.top.orange>H2{padding:15px 0 0; font-size:1em; color:white; text-shadow:0 -1px 0 rgba(0,0,0,0.3); text-align:center;}
.loan-service .dTable TH{background:#EEE; color:black; text-shadow:1px 1px 2px white; border-color:#CCC;}
.loan-service .dTable TH, .loan-service .dTable TD{padding:5px 14px;}
.loan-service .dTable TD>P.oneLine{padding-top:0.6em;}
.loan-service .dTable TD>P>A{color: #3D82C1; text-decoration:underline;}
.loan-service .dTable TD>P>EM{color:#FC6F00; font-style:normal;}
.loan-service .dTable TR.twoItems>TH, .loan-service .dTable TR.twoItems>TD{width:50%;}
.loan-service .dTable TR.threeItems>TH, .loan-service .dTable TR.threeItems>TD{width:33%;}
.loan-service.contentBox>.middle TABLE+.messageBar{margin-top: 0;}
*/

/* Loan & Overdraft Overview 2 */
.loan-service2>.top.orange{/*Height Review */ /*height:48px;*/ height:38px; background: url(../images/bg-contentBox5-top-orange.png) 0 0 no-repeat;}
.loan-service2>.top.orange>H2{/*Height Review */ /*padding:15px 0 0;*/ padding:11px 0 0; font-size:1em; color:white; text-shadow:0 -1px 0 rgba(0,0,0,0.3); text-align:center;}
.loan-service2 .dTable TH{background:#DDD; border-top:1px solid #CCC; border-bottom:1px solid #CCC; color:black; text-shadow:1px 1px 2px white;line-height:29px; font-size:1.1em;}
.loan-service2 .dTable TH, .loan-service2 .dTable TD{padding:2px 10px; vertical-align:middle;}
.loan-service2 .dTable TD{border:0;}
.loan-service2 .dTable TD>P>A{color: #3D82C1; text-decoration:underline;}
/*Height Review */
.loan-service2  .btn{height:25px;}

/* Loan icons */
.icon-loan{float:left; margin-right:5px; width:29px; height:29px; background: url(../images/icon-loan.png) 0 0 no-repeat;}
.icon-loan.fixAmount{background-position:0 0;}
.icon-loan.flexRepay{background-position:-30px 0;}
.icon-loan.reborrow{background-position:-60px 0;}
.icon-loan.tax{background-position:-90px 0;}
.icon-loan.unsecured{background-position:-120px 0;}
.icon-loan.assetLink{background-position:-150px 0;}
.icon-loan.mortgage{background-position:-180px 0;}
.icon-loan.extraLargeCash{background-position:-210px 0;}

/* error message box */
.errorMessageBox H3, .errorMessageBox P{margin:0; color:#333; font-size:1em;}
.errorMessageBox P{padding:0.5em 18px;}
.errorMessageBox H3{padding:1em 18px;}
.errorMessageBox P.note{color:#666;}
.errorMessageBox H3+P, .errorMessageBox P+P{padding-top:0;}
.contentBox.errorMessageBox .separator-solidLightGrey{margin:0 auto; width:95%;}

/* pop up remarks page */
.noLeftMenu{padding:0 !important}

/* fixed width table with 5 columns */
/* columns : Date(16%) , Details(40%), Debit (12%) , Credit(12%), Account balance(HKD) (20%) */
.table_5col_fix_width td:first-child { width:16%; }
.table_5col_fix_width td+td { width:40%; }
.table_5col_fix_width td+td+td { width:12%; }
.table_5col_fix_width td+td+td+td { width:12%; }
.table_5col_fix_width td+td+td+td+td { width:20%; }

/* IS Banner style */
.content_w_portlet .is-banner {width:590px;}
.is-banner img{display:block;}
.is-banner p{line-height:12px;padding-bottom:0}
.is-banner p a{line-height:1em;}

/* Top Banner */
.content_full>.top-banner, .content_w_portlet>.top-banner{margin:0px 0; width:592px; text-align:center;}
.content_w_portlet>.top-banner .highlight{color:red;}
.content_w_portlet>.top-banner .btn-row TD{text-align:center;}
.content_w_portlet>.top-banner .btn-row TD>H3{font-size:1em; color:#255903;}

.content_w_portlet>.top-banner.theme1{padding:10px; width:572px; height:46px; background: url(../images/banner-bg-theme1.png) 0 0 no-repeat; text-align:left;}
.content_w_portlet>.top-banner.theme1 TD{padding:5px; text-shadow:0 1px 0 white;}
.content_w_portlet>.top-banner.theme1 TD>.btn{
	display:inline-block;
	padding:8px 30px 10px 10px;
	width:65px; height:22px;
	background:url(../images/btn-set2.png) 0 -175px no-repeat;
	font-size:0.85em; text-align:center;
	color:white; text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
.content_w_portlet>.top-banner.theme2{padding:10px; width:572px; height:126px; background: url(../images/banner-bg-theme2.png) 0 0 no-repeat; text-align:left;}
.content_w_portlet>.top-banner.theme2 TD{padding:5px; text-shadow:0 1px 0 white;}
.content_w_portlet>.top-banner.theme2 .btn-row TD>.btn{
	display:inline-block;
	padding:10px 30px 10px 10px;
	width:188px; height:20px;
	background:url(../images/btn-set-banner.png) 0 0 no-repeat;
	font-size:0.85em; text-align:center;
	color:white; text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

/** 
Copy Steps style from HangSengBlankLogon 
**/

#contentBox3-top-step13, #contentBox3-top-step14, #contentBox3-top-step15 {
	padding: 0 3px;	
	margin: 0;
	display: table;
}

#contentBox3-top-step13 li, #contentBox3-top-step14 li, #contentBox3-top-step15 li {
	position: relative;
	margin:3px 0 0 1px;
	padding:5px 0 5px 20px;
	height:37px;
	list-style: none;
	float: left;
	display: table-row;
}



#contentBox3-top-step13 li.step1 {background:url(../images/bg-step.png) -10px -208px no-repeat; width:261px; z-index: 4999;}
#contentBox3-top-step13 li.step2 {background:url(../images/bg-step.png) -9px -312px no-repeat; width:252px; z-index: 4998; margin-left: -14px;}
#contentBox3-top-step13 li.step3 {background:url(../images/bg-step.png) -9px -416px no-repeat; width:252px; z-index: 4997; margin-left: -14px;}
#contentBox3-top-step14 li.step1 {background:url(../images/bg-step.png) -74px -104px no-repeat; z-index: 4999; width:197px;}
#contentBox3-top-step14 li.step2 {background:url(../images/bg-step.png) -73px -312px no-repeat; z-index: 4998; width:188px; margin-left: -14px;}
#contentBox3-top-step14 li.step3 {background:url(../images/bg-step.png) -73px -312px no-repeat; z-index: 4997; width:188px; margin-left: -14px;}
#contentBox3-top-step14 li.step4 {background:url(../images/bg-step.png) -73px -416px no-repeat; z-index: 4996; width:186px; margin-left: -14px;}
#contentBox3-top-step15 li.step1 {background:url(../images/bg-step.png) -112px 0px no-repeat; width:160px; z-index: 4999;}
#contentBox3-top-step15 li.step2 {background:url(../images/bg-step.png) -111px -312px no-repeat; width:150px; z-index: 4998; margin-left: -14px;}
#contentBox3-top-step15 li.step3 {background:url(../images/bg-step.png) -111px -312px no-repeat; width:150px; z-index: 4997; margin-left: -14px;}
#contentBox3-top-step15 li.step4 {background:url(../images/bg-step.png) -111px -312px no-repeat; width:150px; z-index: 4996; margin-left: -14px;}
#contentBox3-top-step15 li.step5 {background:url(../images/bg-step.png) -112px -416px no-repeat; width:144px; z-index: 4995; margin-left: -15px;}

#contentBox3-top-step13 li.step1.active {background:url(../images/bg-step.png) -9px -260px no-repeat;}
#contentBox3-top-step13 li.step2.active {background:url(../images/bg-step.png) -9px -364px no-repeat;}
#contentBox3-top-step13 li.step3.active {background:url(../images/bg-step.png) -9px -468px no-repeat;}
#contentBox3-top-step14 li.step1.active {background:url(../images/bg-step.png) -74px -156px no-repeat;}
#contentBox3-top-step14 li.step2.active {background:url(../images/bg-step.png) -73px -364px no-repeat;}
#contentBox3-top-step14 li.step3.active {background:url(../images/bg-step.png) -73px -364px no-repeat;}
#contentBox3-top-step14 li.step4.active {background:url(../images/bg-step.png) -70px -468px no-repeat;}
#contentBox3-top-step15 li.step1.active {background:url(../images/bg-step.png) -112px -52px no-repeat;}
#contentBox3-top-step15 li.step2.active {background:url(../images/bg-step.png) -111px -364px no-repeat;}
#contentBox3-top-step15 li.step3.active {background:url(../images/bg-step.png) -111px -364px no-repeat;}
#contentBox3-top-step15 li.step4.active {background:url(../images/bg-step.png) -111px -364px no-repeat;}
#contentBox3-top-step15 li.step5.active {background:url(../images/bg-step.png) -112px -468px no-repeat;}

#contentBox3-top-step13 span, #contentBox3-top-step14 span, #contentBox3-top-step15 span {
	color: #D5D5D5;;
	text-shadow:0 -1px 1px rgba(0,0,0,0.3);
	display: table-cell;
	vertical-align: middle;
}

#contentBox3-top-step13 li.active span, #contentBox3-top-step14 li.active span, #contentBox3-top-step15 li.active span {
	color: #588a05;
	text-shadow: none;
}

contentBox3-top-step13 span.stepNumber, #contentBox3-top-step14 span.stepNumber, #contentBox3-top-step15 span.stepNumber {
	font-family: Arial,Helvetica,sans-serif;
	top: 1px;
	font-size: 35px;
	float: left;
}

#contentBox3-top-step13 li.step1, #contentBox3-top-step14 li.step1, #contentBox3-top-step15 li.step1 {
	padding-left: 10px;
}

#contentBox3-top-step13 span.stepDesc, #contentBox3-top-step14 span.stepDesc, #contentBox3-top-step15 span.stepDesc {
	font-size: 14px;
	font-weight: bold;
	padding-left: 5px;
	width: 140px;
	height: 39px;
}


/* styles for IsInvChoicesAmd portlet */
#contentBox3.isInvChoicesAmd {
	padding-left: 155px; 
	margin-right: 30px;
}	

#contentBox3-middle.isInvChoicesAmd {
	z-index: 1000; 
}

#middle.isInvChoicesAmd {
	margin:5px 5px 0 5px;
	padding: 0;
}
/* ----------------------------- */


/* styles for PbTemplateTablet portlet */
#contentBox-middle-messageBorder-backGround{
	margin-left:5px;
	border-top:1px solid #BBB;
	border-bottom:1px solid #BBB;
	background:#CECFCE;
}
/* ----------------------------- */

/* styles for HABU portlet */
.Bupa-wrap {
	font-family:Arial, Helvetica, sans-serif;
    margin-top:15px;
	margin-bottom:15px;
	background:#FFFFFF;
}

.Bupa-wrap .intro {
	padding:10px 15px;
	position:relative;
	font-size:14px;
	color:#222222;
	margin-bottom:15px;
}

.Bupa-wrap .sub_head{
	padding:0px 15px 0px 15px;
	position:relative;
	font-size:16px;
	font-weight:bold;
	color:#408b26;	
}

.Bupa-wrap .content_roll{
	border:#FFFFFF 1px solid;
	box-sizing:border-box;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	background-image:url(../images/BUPA/content_bg.gif);
	background-position:middle left;
	background-repeat:repeat-y;
	padding:10px 15px;
	font-size:14px;
	color:#222222;
	margin-bottom:20px;
}
.Bupa-wrap .pic {
	float:left;
	clear:right;
	width:30%;
	box-sizing:border-box;
}

.Bupa-wrap .discription{
	float:left;
	clear:right;
	width:70%;
	box-sizing:border-box;
	padding-top:15px;
}

.Bupa-wrap .btn_wrap{
	clear:both;
	width:100%;	
	box-sizing:border-box;
	text-align:right;	
}

.Bupa-wrap .remark{
	font-size:14px;
	color:#222222;
}
/* styles for HABU portlet -- END */