@charset "utf-8";
/* CSS Document */

#shadowT {width:980px; background:url(../images/shadow_T.gif) no-repeat center bottom; height:20px; margin:0 auto;}
#shadowB {width:980px; background:url(../images/shadow_B.gif) no-repeat center top; margin:0 auto; padding:15px 0 20px 0;}
#shadowL {width:5px; background:url(../images/shadow_L.gif) no-repeat right center; height:600px; position:absolute; left:0; top:0; z-index:100;}
#shadowR {width:6px; background:url(../images/shadow_R.gif) no-repeat left center #FFF; height:600px; position:absolute; right:-1px; top:0; z-index:100;}

#mainContainer {width:100%; height:600px; position:relative; overflow:hidden; min-width:990px;}
#mainDiv {width:990px; height:600px; position:absolute; overflow:hidden;}
#mainContent {position:absolute; width:990px; height:600px; overflow:visible; top:0; left:0;/*right:0;*/}

#flashContainer, #mainNav, #homeDetails, #mask {position:absolute; top:0;}
#flashContainer {left:5px; z-index:10; width:645px; height:600px; overflow:hidden;}
#homeDetails {left:805px; overflow:hidden; z-index:1; width:170px; background:url(../images/home_details.jpg) no-repeat; height:100%; padding-left:10px;}
#mask {left:985px; width:790px; z-index:10;}
#rightContent {width:100%; background:#000;}
#mainIFrame {width:100%; height:600px;}

/*Main Nav starts*/
#mainNav {left:650px; z-index:10; width:155px; height:600px; background:url(../images/nav_bg.gif) no-repeat; line-height:16px; overflow:hidden;}
#logo {margin:14px 0 0 1px; display:inline-block;}
#mainNav .nav {margin:35px 0 0 0;}
#mainNav .nav li {padding:0 0 8px 0;}
#mainNav .nav a {width:155px; height:16px; display:block; text-indent:-2000px; overflow:hidden; background-repeat:no-repeat; background-position:14px 3px; margin:0 0 0 0;}
#mainNav .nav a:hover, #mainNav .nav a.active {border-left:2px solid #D10000; background-position:-148px 3px;}

#mainNav .nav a.home {background-image:url(../images/nav/nav_home.gif);}
#mainNav .nav a.about {background-image:url(../images/nav/nav_about.gif);}
#mainNav .nav a.myHK {background-image:url(../images/nav/nav_myhk.gif);}
#mainNav .nav a.facts {background-image:url(../images/nav/nav_facts.gif);}
#mainNav .nav a.events {background-image:url(../images/nav/nav_events.gif);}
#mainNav .nav a.multimedia {background-image:url(../images/nav/nav_multimedia.gif);}
#mainNav .nav a.interactive {background-image:url(../images/nav/nav_interactive.gif);}
#mainNav .nav a.souvenirs {background-image:url(../images/nav/nav_souvenirs.gif);}

#mainNav .nav ul {overflow:hidden; height:0;}
#mainNav .nav ul li {padding:0 0 0 0;}
#mainNav .nav ul a {height:14px; display:block; text-indent:-2000px; overflow:hidden; background-repeat:no-repeat; background-position:14px 0; margin:10px 0 2px 0;*margin-top:8px; line-height:16px;}
#mainNav .nav ul a:hover, #mainNav .nav ul a.active {border-left:none; background-position:-146px 0;}

#mainNav .nav a.overview {background-image:url(../images/nav/subnav_overview.gif);}
#mainNav .nav a.communicating {background-image:url(../images/nav/subnav_communicating.gif); height:26px;}
#mainNav .nav a.development {background-image:url(../images/nav/subnav_development.gif); height:26px;}
#mainNav .nav a.guidelines {background-image:url(../images/nav/subnav_guidelines.gif);}

#mainNav .nav a.faces {background-image:url(../images/nav/subnav_faces.gif);}
#mainNav .nav a.funfacts {background-image:url(../images/nav/subnav_funfacts.gif);}
#mainNav .nav a.views {background-image:url(../images/nav/subnav_views.gif);}
#mainNav .nav a.myhk2020 {background-image:url(../images/nav/subnav_myhk2020.gif);}

#mainNav .nav a.publications {background-image:url(../images/nav/subnav_publications.gif);}
#mainNav .nav a.factsheets {background-image:url(../images/nav/subnav_factsheets.gif);}

#mainNav .nav a.whatson {background-image:url(../images/nav/subnav_whatson.gif);}
#mainNav .nav a.world {background-image:url(../images/nav/subnav_world.gif); height:26px;}

#mainNav .nav a.videos {background-image:url(../images/nav/subnav_videos.gif);}
#mainNav .nav a.photoGallery {background-image:url(../images/nav/subnav_photoGallery.gif);}

#mainNav .nav a.screensaver {background-image:url(../images/nav/subnav_screensaver.gif);}
#mainNav .nav a.wallpaper {background-image:url(../images/nav/subnav_wallpaper.gif);}

#mainNav .nav a.product-listing {background-image:url(../images/nav/subnav_product-listing.gif);}
#mainNav .nav a.shop-locations {background-image:url(../images/nav/subnav_shop-locations.gif);}
/*Main Nav ends*/

#corpVid{padding:16px 0 0 0px; height:184px;}
#corpVid .videoThumb{margin-top:12px; margin-bottom:11px; display:block}
#corpVid #corpVidTab{float:right; padding-right:13px; padding-top:13px;}
#corpVid #corpVidTab a{background:url(../images/btn_videoLink_over.gif) no-repeat; width:7px; height:6px; display:block; float:left; margin-right:2px;}
#corpVid #corpVidTab a:hover, #corpVid #corpVidTab a.active{background:url(../images/btn_videoLink.gif) no-repeat; width:7px; height:6px; display:block; float:left; margin-right:2px;}
#corpVidItemContainer div {display:none; width:100%;}

#funFacts{padding:10px 0 0 0px; color:#fff; font-size:11px; line-height:13px; height:106px;}
#facesOfHK{padding:22px 0 0 0; background:url(../images/bg_faceofHK.jpg) no-repeat 0px 30px; height:89px; color:#fff; font-size:11px; line-height:13px;}

#setUp, #busAndCom, #studying, #trading{height:44px;}

#functionNav{position:absolute; bottom:0px; height:174px; font-size:11px; color:#999999}
#langNav{background:url(../images/bg_lang.jpg) no-repeat; width:155px; height:17px; padding:8px 0 0 25px; /*padding:8px 0 0 48px*/}
#langNav .langsep{background:url(../images/img_lang_sep.gif) no-repeat; margin:0px 8px 0 8px; width:1px; height:8px; float:left; display:block;}
#langNav a{background:url(../images/img_lang.gif) no-repeat 0px 0px; float:left; display:block;}
#langNav a#en {height:14px;width:19px; background-position:0px -1px}
#langNav a#en:hover, #langNav a#en.active{background-position:0px -23px;}
#langNav a#tc{width:26px; height:14px; background-position:-38px -1px;}
#langNav a#tc:hover, #langNav a#tc.active{background-position:-38px -23px;}
#langNav a#sc{width:26px; height:14px; background-position:-80px -1px;}
#langNav a#sc:hover, #langNav a#sc.active{background-position:-80px -23px;}

#search{padding:19px 0 0 16px;}
#search .searchText{width:100px; height:18px; border:1px solid #CCCCCC; float:left;}
#search .searchBtn{width:22px; height:22px; background:url(../images/btn_go.gif) no-repeat 3px 7px #fff; border:none; padding:0; margin:0 0 2px 2px; line-height:inherit; cursor:pointer; float:left}

#timeDiv{padding:13px 0 0 16px;}

#weather{padding:3px 0 0 16px;}
#weather img{padding-right:5px; float:left}
#weather .humid{padding-top:3px;}
#weather .sep{float:left; margin:0 10px 0 10px;}

#fontSize{padding:8px 0 0 16px;}
#fontSize .sizeChoice{float:left; padding:2px 0 0 18px;}
#fontSize .sizeChoice a{background:url(../images/img_font.gif) no-repeat 0px 0px; display:block; float:left;}
#fontSize .sizeChoice a#small{width:8px; height:9px; background-position:0px -1px; margin:5px 3px 0 0; overflow:hidden;}
#fontSize .sizeChoice a#small:hover, #fontSize .sizeChoice a#small.active{width:8px; height:9px; background-position:-11px -1px;}
#fontSize .sizeChoice a#mid{width:8px; height:9px; background-position:0px -10px; margin:2px 3px 0 3px;}
#fontSize .sizeChoice a#mid:hover, #fontSize .sizeChoice a#mid.active{width:8px; height:9px; background-position:-11px -10px;}
#fontSize .sizeChoice a#large{width:8px; height:9px; background-position:0px -24px; margin:1px 3px 0 3px;}
#fontSize .sizeChoice a#large:hover, #fontSize .sizeChoice a#large.active{width:8px; height:9px; background-position:-11px -24px;}

#share{padding:8px 0 0 16px;}
#share .shareChoice{float:left; padding:2px 0 0 13px;}
#share .shareChoice a{background:url(../images/img_social.gif) no-repeat 0px 0px; display:block; float:left;}
#share .shareChoice a#facebook{width:16px; height:16px; margin-right:5px;}
#share .shareChoice a#twitter{width:16px; height:16px; background-position:-20px 0px; margin-right:5px;}
#share .shareChoice a#flicr{width:16px; height:16px; background-position:-39px 0px;}
