@charset "utf-8";
/* Home CSS Document */

html, body {margin:0; padding:0; border:0; width:100%; height:100%; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:85%; color:#000; line-height:140%; background:#FFF; background-repeat:repeat-x; background-position:0 89px;}
body.error {background-image:url(../images/bg.gif);}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
img {border:0;}
ul {list-style:none; margin:0; padding:0;}
h1, h2, h3, h4 {padding:0; margin:0;}
p {padding:0 0 20px 0; margin:0;}
dl, dt, dd {padding:0; margin:0;}
table, tr, th, td {margin:0; padding:0; border:0; outline:0; vertical-align:top;}
input, select {font-size:12px;}

h1 {padding:4px 10px; color:#FFF; font-size:12px; margin-bottom:2px;}
h2 {font-size:12px;}
.floatLeft {float:left !important;}
.floatRight {float:right !important;}
.clearfix {display: inline-block;}
.clearfix:after {content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}
.clearfix {display: block;}


/* Main Structure starts */
#mainVisualContainer {width:100%; position:absolute; top:88px; z-index:1;}
#mainVisual {width:980px; margin:0 auto; position:relative;}
#mainVisual img {position:absolute; top:0; left:0; display:none;}
#mainContainer {width:964px; font-size:105%; position:relative; margin:0 auto; z-index:10;}
#header {height:73px; clear:both;}
#logo {display:block; width:171px; height:50px; margin:13px; background:url(../images/logo_hkjc.gif) no-repeat; text-indent:-2000px; float:left;}
#contentContainer {width:100%; position:absolute; top:435px; z-index:2;}
#contentContainer .content {width:962px; margin:0 auto; position:relative;}
#contentContainer .shadowL, #contentContainer .shadowR {width:11px; height:124px; float:left;}
#contentContainer .shadowL {background:url(../images/content_shadow_L.png) no-repeat;}
#contentContainer .shadowR {background:url(../images/content_shadow_R.png) no-repeat;}
#innerContent {width:929px; float:left; padding:10px 0px 10px 10px; background-color:#FFF; min-height: 120px; height: auto !important; height: 120px;}
/*#contentContainer .content .navBg {width:920px; height:23px; background:#204A88; margin:0 10px;}
#innerContent {position:relative;}*/
#content {float:left; width:770px;}
/* Main Structure ends */

/* Header starts */
#header .nav {font-size:12px; color:#848484; line-height:100%; float:right; vertical-align:bottom; margin:22px 25px 0 0; position:relative;}
#header .nav div {float:left;}
#topNav {margin:20px 5px 0 0;}
#topNav a {color:#848484; padding:5px 0 0 0; display:inline-block;}
/*#topNav a.lang {color:#2A3981; padding:0 0 0 10px; margin:0 10px 0 10px; border-left:1px solid #2A3981; height:13px; font-size:11px;}*/
#topNav a.lang {color:#2A3981; padding:0 0 0 10px; margin:0 10px 0 10px; border-left:0px solid #2A3981; height:13px; font-size:11px; line-height:14px;}
/** 20101021 new globalLoginControl class starts **/
#topNav #globalLoginControl {position:relative;}
#topNav #globalLoginControl a.login {color:#2A3981; font-weight:700; padding:0 0 0 10px; margin:0 0 0 5px; border-left:1px solid #2A3981;}
#topNav #globalLoginControl a.faq {color:#848484; padding:0 0 0 10px; margin:0 0 0 5px; border-left:1px solid #2A3981;}
/** 20101021 new globalLoginControl class ends**/
#fontSizeContainer {line-height:150%; text-align:right; height:20px;}
#fontSizeContainer div {float:right;}
#fontSizeContainer div span {float:left; margin-right:10px; color:#999;}
#fontSizeContainer a {width:14px; height:14px; display:block; text-indent:-2000px; float:left; border:1px solid #FFF;}
#fontSizeContainer a:hover, #fontSizeContainer a.active {border:1px solid #0A2773;}
#fontSizeContainer a.small {background:url(../images/icon_fontsize_S.gif) no-repeat;}
#fontSizeContainer a.medium {background:url(../images/icon_fontsize_M.gif) no-repeat;}
#fontSizeContainer a.large {background:url(../images/icon_fontsize_L.gif) no-repeat; margin:0 3px 0 0;}
#ewinContainer {background:url(../images/icon_ewin.gif) no-repeat 0 1px; padding:0 0 0 45px; height:45px; position:relative;}
#ewinContainer a {display:block; background:url(../images/arrow_1.gif) no-repeat 0 4px; padding:0 0 0 9px; color:#7B7135; line-height:120%;}
#ewinContainer .ewin {position:absolute; width:39px; height:45px; left:0; top:0; padding:0; background:none;}
/* Header ends */

/* Main Nav starts */
#mainNav {clear:both;}
#mainNav .nav {height:27px;}
#mainNav .nav .content, #mainNav .subNav .content {width:940px; height:100%; float:left;}
#mainNav .shadowL, #mainNav .shadowR {width:12px; height:100%; float:left;}
#mainNav .nav .shadowL {background:url(../images/mainnav_shadow_TL.png) no-repeat right bottom;}
#mainNav .nav .shadowR {background:url(../images/mainnav_shadow_TR.png) no-repeat;}
#mainNav .shadowB {width:952px; height:24px; background:url(../images/mainnav_shadow_B.png) no-repeat center top; margin:0 auto; overflow:hidden;}
#mainNav .nav .content a {height:27px; background-repeat:no-repeat; overflow:hidden;}
#mainNav .nav .content a img {float:left;}

#mainNav .nav .content ul li {float:left; position:relative; z-index:1000;}
#mainNav .nav .content ul li div.pullmenu {visibility:hidden; width:155px; height:auto; position:absolute; z-index:100; text-align:left; top:27px; left:-4px;}
#mainNav .nav .content ul li div.pullmenu .shadowL {background:url(../images/pullnav_shadow_L.png) repeat-y; width:4px;}
#mainNav .nav .content ul li div.pullmenu .shadowR {background:url(../images/pullnav_shadow_R.png) repeat-y; width:6px;}
#mainNav .nav .content ul li div.pullmenu .shadowB {background:url(../images/pullnav_shadow_B.png) no-repeat; width:155px; height:9px;}
#mainNav .nav .content ul li div.pullmenu .content {width:145px; background:none; text-align:left; height:auto; background-color:#FFF;}
#mainNav .nav .content ul li div.pullmenu .content dl {margin:5px 0 0 0;}
#mainNav .nav .content ul li div.pullmenu .content dl dt {height:auto; padding:0; position:relative;}
#mainNav .nav .content ul li div.pullmenu .content dl dt a {display:block; width:145px; height:auto;}
#mainNav .nav .content ul li div.pullmenu .content dl dt .subArrow span {background:url(../images/navigation/nav_arrow.gif) no-repeat 100% 0; width:3px; height:6px; margin-top:2px; overflow:hidden; position:absolute; right:12px; top:8px; display:block;}
#mainNav .nav .content ul li div.pullmenu .content dl dt .subArrow:hover span, #mainNav .nav .content ul li div.pullmenu .content dl dt .subArrow.active span {background:url(../images/navigation/nav_arrow_over.gif) no-repeat 100% 0 #5990F0;}
#mainNav .nav .content ul li div.pullmenu .content dl dt a img {margin-top:0;}
#mainNav .nav .content ul li div.pullmenu .content dl dd {background:url(../images/navigation/dash.gif) no-repeat 50% 0; height:1px; margin:1px 0; overflow:hidden;}

#mainNav .nav .content ul li div.pullmenu .content div.pullmenu {left:141px; top:0;}
#mainNav .nav .content ul li.last div.pullmenu .content div.pullmenu {left:-149px; top:0;}
#mainNav .nav .content ul li div.pullmenu .content div.pullmenu .content {border:none;}
#mainNav .nav .content ul li div.pullmenu .content div.pullmenu .content dl {margin:0;}
#mainNav .subNav {display:none;}
/* Main Nav ends */

/* SEO starts */
#seo {width:100%; font-size:12px; min-width:964px; clear:both; background:url(../images/seo_bg.gif) repeat-x #F0F0F0; position:relative; z-index:10;}
#seo .content {width:964px; margin:0 auto; min-height:50px; padding:20px 0;}
#seo .content div {float:left; width:1px; margin:0 12px; background:url(../images/seo_stroke.gif) no-repeat right top; min-height:156px;}
#seo .content dl {float:left; width:136px; min-height:156px;}
#seo .content dl.last {margin-right:0; background:none;}
#seo .content dl dt, #seo .content dl dd {margin:0;}
#seo .content dl dt {font-weight:bold; font-size:1.1em; margin:0 0 5px 0; line-height:120%; min-height:30px; color:#7B7B7B;}
#seo .content dl dd {margin:0 0 5px 0;}
#seo .content a {display:block; width:100%; color:#858585;}
/* 6 Columns */
#seo.sixCol .content {width:941px;}
/* 5 Columns */
#seo.fiveCol .content {width:780px;}
/* 4 Columns */
#seo.fourCol .content {width:616px;}
/* 3 Columns */
#seo.threeCol .content {width:458px;}
/* 2 Columns */
#seo.twoCol .content {width:297px;}
/* SEO ends */

/* Footer starts */
#footer {width:964px; margin:0 auto; clear:left; font-size:12px; position:relative; z-index:10;}
#footer .rgp {height:103px; margin:20px 0;}
#footer .rgp .ifha {width:51px; height:49px; background:url(../images/icon_ifha.gif) no-repeat; float:right; margin:7px 0;}
#footer .nav {color:#CCC; clear:both; margin:0 0 10px 0;}
#footer .nav .content {float:left;}
#footer .nav .content a, #footer .nav .copyright {color:#00326F;}
#footer .nav .content a {margin:0 3px;}
#footer .nav .content a.first {margin-left:0;}
#footer .nav .copyright {float:right;}
/* Footer ends */

/* Highlight Box starts */
#highlights {height:308px;}
#highlightsContent {height:282px;}
#highlights .shadowL, #highlights .shadowR, #highlights .content {float:left; height:100%;}
#highlights .shadowL {background:url(../images/hightlight_shadow_L.png) no-repeat 0 100%; width:4px;}
#highlights .shadowR {background:url(../images/hightlight_shadow_R.png) no-repeat 0 100%; width:8px;}
#highlights .shadowB {width:237px; height:11px; background:url(../images/hightlight_shadow_B.png) no-repeat left top; overflow:hidden;}
#highlights .content {width:225px; height:282px; overflow:hidden;}
#highlights .content .mask {width:225px; height:119px; overflow:hidden;}
#highlights .content ul {width:225px; background-color:#FFF; padding:3px 0 1px 0; filter: Alpha(Opacity=85); -moz-opacity: 0.85; opacity: 0.85; min-height:160px; height:auto !important; height:160px;}
#highlights .content ul li {background:url(../images/pt_highlight.gif) no-repeat 12px 7px; padding:0 10px 5px 23px; line-height:19px; min-height:33px; height:auto !important; height:33px;}
#highlights .content ul li a {font-weight:700; color:#333; padding:5px 0 0 0;}
#highlights .content ul li a:hover span {text-decoration:underline;}
#highlights .content ul li a span {font-weight:700; color:#1C2C79; display:block; /*min-height:38px; height:auto !important; height:38px;*/}
#highlights .content .nav {position:relative; display:block; width:225px; height:22px; overflow:hidden;}
#highlights .content .nav span {position:absolute; top:8px; right:8px; background:url(../images/icon_open.gif) no-repeat; display:block; width:5px; height:5px;}
#highlights .content .nav.active span {background:url(../images/icon_close.gif) no-repeat;}
/* Highlight Box ends */

/* Home Bottom Item starts */
.homeItem {float:left; width:291px; margin-bottom:20px; position:relative;}
.homeItem .photo {background:url(../images/photo_frame.gif) no-repeat 0 0; padding:4px; float:left; width:106px;}
.homeItem .detail {margin-left:114px; font-size:12px; color:#858585; min-height:120px;}
.homeItem .detail a {color:#858585;}
.homeItem .detail a strong {color:#0C2677; margin:0 0 3px 0;}
.homeItem .detail a:hover strong {text-decoration:underline;}
.homeItem .detail a.more {display:inline-block; color:#333; background:url(../images/arrow_blue.gif) no-repeat 0 3px; padding:0 0 0 17px; position: absolute; bottom:0; right:20px; font-size:12px;}
/* Home Bottom Item ends */

/* Emergency Message starts */
#emergency {width:890px; border-top:#0049D4 2px solid; background:#FFCC00; padding:15px; margin:0 0 10px 0; font-size:12px; display:none;}
#emergency img {margin:0 0 5px 0;}
#emergencyMessage {width:890px; height:16px; overflow:hidden; white-space:nowrap; position:relative;}
#emergencyMessage p {padding:0; white-space:nowrap; position:absolute; left:0; top:0;}
/* Emergency Message ends */

/* 404 Error starts */
.errorPharse {padding:5px 10px; min-height:300px;}
.errorPharse a {color:#0C2677;}
.errorPharse div.left {float:left; width:200px;}
.errorPharse div.right {float:left; width:650px; border-left: 1px #DDD solid; margin:0 0 0 20px; padding:0 0 0 20px;}
.errorPharse div.right h3 {padding:0 0 20px 0;}
.errorPharse div.right ul {padding:0 0 0 15px;}
.errorPharse div.right ul li {padding:0 0 20px 0;}
.errorPharse div.right ul li {background:url(../images/pt_highlight.gif) no-repeat 5px 6px; padding:0 0 20px 15px;}
.errorPharse div.right .borderBtm {border-bottom: 1px #DDD solid; margin-bottom:20px;}
.errorPharse div.right .copyright {font-size:12px;}
/* 404 Error ends */


/* Event Spotlight starts */
#spotlight {width:235px; position:relative;}
#spotlight .bg {width:235px; height:273px; background:url(../images/spotlight_bg.png) no-repeat;}
#spotlight .details {position:absolute; left:7px; top:4px;}
/* Event Spotlight ends */

/* News Healines starts */
#newsHeadlines {border-bottom:1px solid #adadad; padding:0 0 10px 10px; color:#666; font-size:12px;}
#newsHeadlines strong {display:inline-block; margin:0 10px 0 0; background:url(../images/headline_stroke.gif) no-repeat center right; padding:0 10px 0 0;}
#newsHeadlines a {color:#666; display:inline-block; width:auto;}
/* News Healines ends */

/* JC popup start*/
.shiftcontainer{
position: relative;
left: 7px; /*Number should match -left shadow depth below*/
top: 7px; /*Number should match -top shadow depth below*/
}

#apDiv1 {
 position:absolute;
 left:90px;
 top:108px;
 width:498px;
 height:218px;
 z-index:1;
 visibility: hidden;
}
#apDiv1 table tr td table tr td p {
 font-size: 12px;
}
.shiftcontainer2 {
 position:absolute;
 left:671px;
 top:105px;
 z-index:100;
}
/* JC popup ends */

/* Added by DC 24/05/2010 starts */
#mainNav .nav .content ul li div.pullmenu .content dl dt a {color:#3A4B9E; font-size:12px; font-weight:700;padding:5px 10px; width:125px; background-color:#FFF;}
#mainNav .nav .content ul li div.pullmenu .content dl dt a:hover, #mainNav .nav .content ul li div.pullmenu .content dl dt a.active {color:#FFF; background-color:#5990F0; text-decoration:none;}
/* Added by DC 24/05/2010 ends */

/* Added by DC 11/08/2010 starts */
#topNav {line-height:14px;}
#topNav input {width:125px; height:14px; color:#868686;}
#topNav input.iconToggle {width:16px; height:17px; margin:0px 0 0 0; line-height:14px;}
#topNav a.login {color:#2A3981; font-weight:700; padding:0 0 0 10px; margin:0 0 0 5px; border-left:1px solid #2A3981;}
#topNav a.logout {padding-bottom:2px;} /* added 20101027 */
#topNav a.help {padding:0;}
#topNav a.help img {margin:0 10px;}
/* Left Nav starts */
#contentContainer #innerContent #leftNav {float:left; width:130px; margin-right:10px; display:inline;}
#contentContainer #innerContent #leftNav dl {border-bottom:1px solid #003C84;}
#contentContainer #innerContent #leftNav dt {color:#003C84; font-size:13px; font-weight:700; min-height: 20px; height: auto !important; height:26px; overflow:visible; text-transform:uppercase; line-height:13px; padding:0 0 4px 4px; overflow:hidden; vertical-align:middle; border-bottom:2px solid #003C84;}
#contentContainer #innerContent #leftNav dt span {width:1px; height:1px; display:inline-block;}
#contentContainer #innerContent #leftNav dd {background:url(../images/dash_1.gif) bottom repeat-x; margin:0;}
#contentContainer #innerContent #leftNav dd.last {background:none;}
#contentContainer #innerContent #leftNav dd a {font-size:11px; font-weight:700; color:#666; width:auto; display:block; padding:10px 5px;}
#contentContainer #innerContent #leftNav dd a:hover, #contentContainer #innerContent #leftNav dd a.active {color:#003C84; text-decoration:none;}
#contentContainer #innerContent #leftNav dd dl {font-size:11px; padding:0 0 5px 0; border:none; display:none; background: url(../images/navigation/dash_left.gif) repeat-x 0 0 #E9EDF5;}
#contentContainer #innerContent #leftNav dd dl dd {background:none;}
#contentContainer #innerContent #leftNav dd dl dd a {color:#333333; padding-top:5px; padding-bottom:5px; font-weight:400;}
#contentContainer #innerContent #leftNav dd dl dd a:hover, #contentContainer #innerContent #leftNav dd dl dd a.active {font-weight:700; color:#003C84;}
/* Left Nav ends */

h4.dashLine {background:url(../images/dash_2.gif) repeat-x 0 100%; height:21px;}
h4 {color:#003C84; padding:0 0 4px 0; font-size:16px; line-height:20px;}

/* FAQ starts */
#contentContainer #innerContent .faqContainer {margin:10px 0 0 0; font-size:12px;}
#contentContainer #innerContent .faqContainer dl dt {float:left; width:22px; padding:0 0 0 3px;}
#contentContainer #innerContent .faqContainer dl dd {float:left; width:745px; background:none; margin:0; padding:0 0 15px 0;}
#contentContainer #innerContent .faqContainer dl dd a {padding:0; font-weight:400; background:none; display:inline; color:#254FA1;}
#contentContainer #innerContent .faqContainer dl dd dl {background:none; padding:5px 0 0 0; display:none;}
#contentContainer #innerContent .faqContainer dl dd dl dt {width:33px; padding:0;}
#contentContainer #innerContent .faqContainer dl dd dl dd {width:700px; font-size:12px; padding:0;}
#contentContainer #innerContent .faqContainer .answerContainer {background:url(../images/dash_1.gif) repeat-x 0 0; padding:0 0 20px 0;}
#contentContainer #innerContent .faqContainer .answerContainer .answer {padding:0 0 0 3px; font-size:11px;}
#contentContainer #innerContent .faqContainer .answerContainer .answer h3 {color:#254FA1; font-size:12px; padding:15px 0 10px 0;}
#contentContainer #innerContent .faqContainer .answerContainer .answer p {padding:0 0 10px 19px;}
#contentContainer #innerContent .faqContainer .answerContainer .answer ul {padding:0 0 5px 19px;}
#contentContainer #innerContent .faqContainer .answerContainer .answer ul li {color:#254FA1; background:url(../images/pt_blue.gif) no-repeat 6px 6px; padding:0 0 10px 16px;}
#contentContainer #innerContent .faqContainer .answerContainer .answer a {color:#254FA1;}
#contentContainer #innerContent .faqContainer .answerContainer .answer div {background:url(../images/dash_1.gif) repeat-x 0 0;}
#contentContainer #innerContent .faqContainer .answerContainer .answer div span {display:block; text-align:right; background:url(../images/dash_1.gif) repeat-x 0 100%; padding:3px 0; font-size:10px;}
/* FAQ ends */
/* Added by DC 11/08/2010 ends */

/* Added by DC 18/08/2010 starts */
/* Search starts */
.full #content {width:920px;}
.searchHeader {background:url(../images/dash_2.gif) repeat-x 0 100%; height:27px; margin-bottom:1px; padding:3px 0 0 5px;}
.searchForm {background:#254FA1; padding:5px 8px; color:#FFF; font-size:11px; font-weight:700; text-align:right; height:60px;}
.searchForm h3 {text-align:left; font-size:11px; margin:5px 0 10px 0;}
.searchForm input, .searchForm select {color:#666; float:left; margin-right:5px;}
.searchForm input {width:185px; height:13px;}
.searchForm input.radio {width:auto; height:auto;}
.searchForm select {width:170px; height:19px;}
.searchForm a {float:left; background: url(../images/btn_search_blue.gif) no-repeat 0 0; color:#FFF; width:56px; height:18px; display:inline-block;text-align:center; padding-top:1px;}
.searchForm span {float:right; display:inline-block; margin-top:1px;}
.searchForm label {float:left; display:inline-block; margin-right:10px;}
.searchForm .keyword {float:left; margin-right:5px; font-weight:400;}
.searchForm .stroke {float:left; width:1px; height:18px; background:#91A7D0; overflow:hidden; margin-right:10px;}
.searchResult {padding:15px 10px; background:url(../images/dash_1.gif) repeat-x 0 100%; font-size:11px; color:#666;}
.searchResult h2 {padding:0 0 5px 0; background:none; border:none; font-size:11px; color:#224FA0;}
.searchResult p {padding:0 0 5px 0;}
.searchResult p span {color:#254FA1;}
.searchResult a {color:#254FA1;}
.searchPage .pagenator {margin-top:15px; text-align:center;}
/* Search ends */
/* Added by DC 18/08/2010 ends */

/*#topNav .searchComponent {display:none;} /*comment this when showing the search bar, otherwise uncomment it*/
/*#searchtext  {display:none;}
#searchimg  {display:none;}
#topNav .iconToggle {display:none;} */