/* === PAGE === */

body {
	/*text-align:center;*/	/* IE6 for center container */
	margin-top:10px; 	/* ceiling the top */
	margin-left:10px;
	margin-right:10px;
	font-size:81.4%;
	font-family: Arial, Helvetica, sans-serif;
	/* font-family tag also appears in class input.SearchBox */
	/* 20090511: move the PMingLiu and MingLiu first (fix for static sc) */
}

/* Hack that target Safari/Webkit/KHTML */
/* because Safari on OS X 10.4 has problem displaying PMingLiu font */
body:last-child:not(:root:root) {
	font-family:MingLiu, Arial, Helvetica, sans-serif;
	/* 20090511: move the MingLiu first (fix for static sc) */	
}

.pageAll 
{
	width:100%;	/* prevent FF display the horizontal scroll barPMingLiu */
	/* 800 to 1280 - mean 760 (or 759 in IE) to 1240 */
/*	width:expression( (document.body.clientWidth < 760 ? "759px" : (document.body.clientWidth > 1220 ? "1220px" : "100%")) ); */
	/* IE */
	min-width:1000px;	
	max-width:1000px;	/* FF */
	text-align:left;	/* restore body tag */
	overflow:hidden;
	margin: 0 auto;
}

.pageAlliframe
{
	width:100%;	/* prevent FF display the horizontal scroll barPMingLiu */
	/* 800 to 1280 - mean 760 (or 759 in IE) to 1240 */
/*	width:expression( (document.body.clientWidth < 760 ? "759px" : (document.body.clientWidth > 1220 ? "1220px" : "100%")) ); */
	/* IE */
	min-width:600px;	
	max-width:600px;	/* FF */
	text-align:left;	/* restore body tag */
	overflow:hidden;
	margin: 0 auto;
}

.pageAllDetailContent
{
	width:100%;	/* prevent FF display the horizontal scroll bar */
	/* 800 to 1280 - mean 760 (or 759 in IE) to 1240 */
/*	width:expression( (document.body.clientWidth < 760 ? "759px" : (document.body.clientWidth > 1220 ? "1220px" : "100%")) ); */
	/* IE */
	/*min-width:1000px;	
	max-width:1000px;	/* FF */
	text-align:left;	/* restore body tag */
	overflow:hidden;
/* 	padding-left:2px;  */
}

/* === GENERIC style === */
h1 {
	/*line-height:0px;*/ 
	display:inline; } /* for enclose GovHK slogan */

h2, h3, h4 {font-size:1.15em;  padding:0; border:0; display:inline;}
img {border:0;}
p {font-size:1em; line-height:1.2em;}
abbr {border-bottom:0;}

sup, sub {font-size:0.8em;} /* 20080527: first line and second line different not obvious than "smaller"  */

.textHolder {float:left; vertical-align:middle; font-size:1em;}
.topHolder {float:left; height:100%; margin-top:3px; margin-right:5px;}

.hidden {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;}
.ignore {display:none;}
.notHiddenInLinear {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;}

/* 20071018: add pagePrefix */
#pagePrefix { display:none; }

/* 20070514: add urlprinttitle */
.urlprinttitle {display:none;}
.urlprintlist {display:none;}
.urlprintcontent {display:none;}

.textGreater {color:#FF6600; }

/* === GENERIC : hyperlink === */

a {text-decoration:none; padding:0; border:0;}
a:link    { color:#000000; }
a:visited { color:#ffffff; }
a:hover, a:active, a:focus   { 
  /* color:#FF6600; 20071127:hover no change */
	text-decoration:underline;	/* 200711-layout default */
} 
/* === GENERIC : bullet point === */

ul,ol {margin:0; border:0; text-align:left; padding-left:5px; padding-right:5px;}
li 
{
	font-size:1em; 
	 
	line-height:1.2em; padding:5px 5px 5px 5px; 
	list-style-type:none;
	text-indent:0;
}

/* === GENERIC : Title and Content === */
.boxTitleText {float:left; color:#FFFFFF; 
  padding:5px 5px 5px 1.2em; 
  background: url(/images/background/bullet_orange.gif) 0.3em 0.8em no-repeat;
}

.boxContent {float:left; width:100%; background-color:#DDE4F6; border-top:2px solid #FFFFFF;} 


/* === TOP PANEL === */
.pageTop {width:1000px;}
.boxHolder1 {
	float:left;
	width:100%;
	margin-right:-2px;
}
.boxHolder2 {
	margin-right:2px;
}
#topPanel
{
	float:left; width:100%; margin:0; padding:0; border:1px solid #000000;
	background-image:URL(CensusBkg.gif); 
	background-repeat:repeat-y; background-position:left;
}

.govhkBanner {float:left; height:64px; margin-top:3px; margin-right:5px;}

/* default navItem change to topNav */
#topNav .navItem {float:left; background-color:#CCCCCC; border-right:1px solid #000000; padding:0; margin:0;
font-family:PMingLiu, MingLiu, Arial, Helvetica, sans-serif; /* 200810: temp fix for IE8beta2 (RSS) */
}
#topNav .navItemSelected  {float:left; background-color:#CCCCCC; border-right:1px solid #000000; padding:0; margin:0;
font-family:PMingLiu, MingLiu, Arial, Helvetica, sans-serif; /* 200810: temp fix for IE8beta2 (RSS)*/
}

#topNav .navItem a {
	font-size:1em;
	float:left;
	padding-top:5px; padding-bottom:2px; padding-left:5px; padding-right:5px;
}

#topNav .navItem a:link, #topNav .navItem a:visited 
{
	/*
	color:#000000;
	background-color:#CCCCCC; 
	*/
	/* 200711option2 */
	color:#FFFFFF;
	background-color:#CC0000; 	
}

#topNav .navItem a:hover, #topNav .navItem a:active, #topNav .navItem a:focus 
{
	/*
	color:#FFFFFF;
	background-color:#FF6600; 
	*/
	/* 200711-non-default */	
	color:#FFFFFF;
	background-color:#666666; 
	text-decoration:none; 
}

#topNav .navItemSelected a {
	font-size:1em;
	float:left;
	padding-top:5px; padding-bottom:2px; padding-left:5px; padding-right:5px;
}

#topNav .navItemSelected a:link, #topNav .navItemSelected a:visited 
{
	/*
	color:#cc0000;;
	background-color:#CCCCCC; 
	*/
	/* 200711option2 */
	color:#CC0000;	
	background-color:#fbf5e4; 	
}

#topNav .navItemSelected a:hover, #topNav .navItemSelected a:active, #topNav .navItemSelected a:focus 
{
	/*
	color:#FFFFFF;
	background-color:#FF6600; 
	*/
	/* 200711-non-default */
	color:#FFFFFF;
	background-color:#666666; 
	text-decoration:none; 
}

#topNav .specialAdv {float:right; padding:0; margin:0;}
#topNav .specialAdv a {
	font-size:1em;
	float:left;
	padding-top:5px; padding-bottom:2px; padding-left:5px; padding-right:5px;
}
#topNav .specialAdv a:link, #topNav .specialAdv a:visited { color:#000000; }
#topNav .specialAdv a:hover, #topNav .specialAdv a:active, #topNav .specialAdv a:focus { 
  /* color:#FF6600; 20071127:hover no change */
}


#topPanelRight {float:right; margin-top:13px; vertical-align:middle;}
#topPanelRight #topSeparator1 { display:none; /* 200810: treat as not exist  */ }
#topPanelRight .topHolder { display:inline; /* 200810: treat as span */  }
#topPanelRight .mainAreaBox { display:inline; /* 200810: treat as span */  }
#topPanelRight #govhkTopKeywords{clear:both;}

#panelButton {width:auto; float:right; padding-top:13px; padding-right:10px;}
#topNavFloat {float:left; width:100%;}
#topNav {float:left; width:100%;
	border-left:1px solid #000000; 
	border-right:1px solid #000000; 
	border-bottom:1px solid #000000;
	/* background-color:#F0F0F0; */
	/* 200711option2 */
	background-color:#CCCCCC;
	
}


#topNav ul {float:left; list-style:none; padding:0;}
#topNav ul li {display:inline; padding:0;} 


/* 20070705 added */
#topNavRight {
	margin:0;
	width:auto;
	float:right;
	white-space:nowrap;
	padding:0;
}

/* 20081023: obsolete? keep for reference
#topNavLinear {
	margin:0.3em 0 0 0 ;
	width:53px;
	padding-right:5px; 
	float:left;
}
*/

#topNavText1 {
	display:inline; /* 20081023: treat as "span" */
	line-height:1.5em;	/* 20081000: make the text almost "valign" */	
	/* margin:0.2em 2px 0 0 ;
	width:auto;
	float:left; */
}

#topNavTextSize {
	/* it is span */
}

#topNavThreeA {
	display:inline;  /* 20081023: treat as "span" */
	/* margin:0.3em 0 0 0 ;
	width:52px;
	float:left; */
}

#topNavThreeA img {
	padding-right:2px; /* give some padding between images, since source is stick together */
	position:relative; /* move the img a bit lower */
	top:2px;
}

input.SearchBox {

	font-size:0.95em;	
	/* 20080508: make it follow font size change, 0.95 to make "Larger" size can show 3 lines */

	line-height:1.2em;
	height:1.2em;
	padding:0;
	font-family:inherit;
	color:#666666;

	/* 20081015: fix IE8b2 */
	width:11em;	
}

#advSearch {padding-top:2px;}
#advSearch a {float:left; font-size:1em;  vertical-align:middle;} 


/* === BREAD CRUMB === */
#breadCrumb {float:left; width:100%; padding:2px 5px 3px 5px; line-height:1.2em; font-size:1em; }
.bcPlainItem {float:left; }
.bcPlainItem2 {float:right; height:100%; padding-right:10px;}

#breadCrumb p {margin:0px;}
#breadCrumb p a:link, #breadCrumb p a:visited { color:#000000; }
#breadCrumb p a:hover, #breadCrumb p a:active, #breadCrumb p a:focus { 
  /* color:#FF6600; 20071127:hover no change */
}

/* === MAIN AREA : big container === */
#pageMain { height:auto; overflow:hidden; width:1000px}

#pageMainiframe { height:auto; overflow:hidden; width:600px}

/* === Promotion Items === */
#promotionItems{
	margin:5px 0;
	float: left;
	overflow: hidden;
	width:100%;
}
#promotionItem1, #promotionItem2, #promotionItem3{
	float:left;
	width:33.3%;
	margin-bottom:-300px;
	padding-bottom:300px;
}
#promotionItem1{
	background:url(/images/background/pomo_item_box_bg.gif) repeat-y top left;
}
#promotionItem2, #promotionItem3 {
	background:url(/images/background/pomo_item_box_bg2.gif) repeat-y top left; /*mimic the margin*/
}

#promotionItem4, #promotionItem5, #promotionItem6{
	display:none;
}

#promotionItem1 .itemTitleBar{
	background:url(/images/background/pomo_item_title_bg.gif) repeat-y top left;
	padding:5px 0 5px 0;
}
#promotionItem2 .itemTitleBar, #promotionItem3 .itemTitleBar{
	background:url(/images/background/pomo_item_title_bg2.gif) repeat-y top left;
	padding:5px 0 5px 5px; /*width of the "margin"*/
}
.itemTitleBar h2{
	display:block;
	margin:0;
	padding-left:1.2em;
	background:url(/images/background/bullet_orange.gif) no-repeat scroll 0.4em 0.4em;
	font-size:1em;
	line-height:1.2;
}
#promotionItem1 .itemContent{
	padding:5px 10px;
}
#promotionItem2 .itemContent, #promotionItem3 .itemContent{
	padding:5px 10px 5px 15px; /*+width of the "margin"*/
}
.itemContent{
	float:left;
}
.itemContent img{
	float:left;
	border:1px solid #813A0C;
	margin:3px 10px 0 0;
}
.itemContent p{
	margin:0;
	padding:0;
}
.itemTitleBar h2, .itemContent a{
    zoom:1; /*trigger hasLayout of IE to fix the un-aligned Chinese and English Characters*/
	vertical-align:baseline;
}

#rightSide {float:left; width:180px; height:auto; background-color:#dde4f6; margin-left:10px;}

#leftSideHolder1 {float:left; margin-left:-190px; width:100%; height:100%;}
#leftSideHolder2 {margin-left:190px;}
#leftSide {float:left; /* 20081022 fix for ff Background */ 
  width:100%; height:100%;
}

/* === MAIN AREA : LEFT MENU === */
.leftMenuBackground
{
	background-image:url(/images/background/leftmenu_bg.gif);
	background-repeat:repeat-y;
	background-color:#FFFFFF;
}

#leftMenuArea {float:left; 
  width:138px;
  height:auto; overflow:hidden; padding:0;}

#leftMenuArea .boxTitleBar {
  float:left; width:100%; padding:0; 
  /* background-image: url(/images/background/hd_bg.gif); */
  /* 200711option2 */
  background-image: url(/images/background/side_bg.gif); 
  /* margin:0; line-height:1.8em; */
}

/* === leftMenuOne - On Homepage === */
#leftMenuOne {float:left; width:100%; height:100%;}

#leftMenuOne ul { padding:0; margin:0; }
#leftMenuOne li { padding:0; margin:0; }

/* mainmenu, default item, bg-color */
#leftMenuOne li { background-color:#CCCCCC; color:#FFFF00; width:138px; 
  float:left; clear:both;
  /* 20070717: important to float:left and clear:both; */
}

/* mainmenu, selected item, bg-color */
#leftMenuOne li.mainon { background-color:#CC0000;    /* background:url(../images/HD_bg.gif) repeat;  */ }

/* mainmenu, default item, div */
#leftMenuOne .maindiv { 

  /* 20070717: now act as a container for text and image */
  /* 20070717: change width, add float and clear */	  
  /* total width: 138px */
  width:134px; /* IE6 */ 
  padding-left:4px;	/* pad left for no bullet */
  float:left;	 
  clear:both;
  
  border-bottom: 2px solid #FFFFFF; 
  /* background:url(/images/background/bullet_orange.gif) 0.3em 1.3em no-repeat;  */
}

#leftMenuOne .itemText {
  float:left;
  padding: 1em 0px 1em 0px; /* pad top and bottom should be same */ 
  font-size:1.15em; /* for B-and-T length (max) */
  line-height:1.3em;
  /* border:1px solid red; test */
}

#leftMenuOne .itemImage {
	float:left;
	padding-top:10px; /* en tc diff */
	/* remark: image (youth) is 30px height */
	/* when prepare the image, it should have have some spaces for characters */
}

/* mainmenu, default item, link style */
#leftMenuOne a { font-weight:bold; padding:0; border:0;
	/* text-decoration:none; */	/* 200711 remark */
}
#leftMenuOne a:link,
#leftMenuOne a:visited { color:#000000; 
	text-decoration:none; /* 200711 move from "a"-only */
}
#leftMenuOne a:hover,
#leftMenuOne a:active,
#leftMenuOne a:focus  { 
  /* color:#FF6600; 20071127:hover no change */
  text-decoration:underline; /* 200711 add when have define "a"-only */
}

/* mainmenu, selected item, link style (do this at last) */
/* please group "link and visited", "hover and active" together */
#leftMenuOne li.mainon a { 
  /* 200711 remark: text-decoration:none; */
  padding:0; border:0;
}
#leftMenuOne li.mainon a:link,
#leftMenuOne li.mainon a:visited { color:#FFFFFF;
	text-decoration:none; /* 200711 move from "a"-only */
}
#leftMenuOne li.mainon a:hover,
#leftMenuOne li.mainon a:active,
#leftMenuOne li.mainon a:focus  { 
  /* color:#FFFFFF; 20071127:hover no change */
	text-decoration:underline; /* 200711 add when have define "a"-only */
}

/* === leftMenuTwo - Other Then Homepage === */


#leftMenuTwo {float:left; width:100%; height:100%;}

#leftMenuTwo ul { padding:0; margin:0; }
#leftMenuTwo li { padding:0; margin:0; }

/* mainmenu, default item, bg-color */
#leftMenuTwo li { background-color:#CCCCCC; color:#FFFF00; width:138px; 
  /* 20070717: add float and clear, important for FF */
  float:left; clear:both;
}

/* mainmenu, selected item, bg-color */
#leftMenuTwo li.mainon {   background:url(/images/background/hd_bg.gif) repeat;  }

/* mainmenu, default item, div */
#leftMenuTwo .maindiv { 
  /* 20070717: now act as a container for text and image */
  /* 20070717: change width, add float and clear */	  
  /* total width: 138px */
  width:124px; /* IE6 */ 
  padding-left:14px; /* pad left for bullet */
  float:left;	 
  clear:both;

  /* 20070717: move padding, fontsize lineheight to inside element */	  	
  border-bottom: 2px solid #FFFFFF; 
  background:url(/images/background/bullet_orange.gif) 3px 1.1em no-repeat; 
}

#leftMenuTwo .itemText {
  float:left;
  padding: 8px 0px 8px 0px; /* pad top and bottom should be same */ 
  font-size:1.15em; /* for B-and-T length (max) */
  line-height:1.4em;
  /* border:1px solid red; test */
}

#leftMenuTwo .itemImage {
	float:left;
	padding-top:4px; 
	/* 20070718: some pad-top for fake vert-align */
	/* remark: image (youth) is 30px height */
	/* when prepare the image, it should have have some spaces for characters */
}

#leftMenuTwo a:link,
#leftMenuTwo a:visited { color:#000000; }
#leftMenuTwo a:hover,
#leftMenuTwo a:active,
#leftMenuTwo a:focus  { 
  /* color:#FF6600; 20071127:hover no change */
}

/* mainmenu, selected item, link style (do this at last) */
/* please group "link and visited", "hover and active" together */
#leftMenuTwo li.mainon a:link,
#leftMenuTwo li.mainon a:visited { color:#FFFFFF; }
#leftMenuTwo li.mainon a:hover,
#leftMenuTwo li.mainon a:active,
#leftMenuTwo li.mainon a:focus  { 
  /* color:#FFFFFF; 20071127:hover no change */
}

/* submenu, default item, "box" style */
#leftMenuTwo ul.submenu li { 
  width: 128px;
  padding:5px 5px 3px 5px; /* T R B L */
  background-color:#FBF5E4;
  border-bottom:2px solid #FFFFFF;
  font-size:1em;
}

/* submenu, default item, link style */
#leftMenuTwo ul.submenu a:link,
#leftMenuTwo ul.submenu a:visited { color:#000000; }
#leftMenuTwo ul.submenu a:hover,
#leftMenuTwo ul.submenu a:active,
#leftMenuTwo ul.submenu a:focus  { 
  /* color:#FF6600; 20071127:hover no change */
}

/* submenu, selected item, link style */
#leftMenuTwo ul.submenu li.subon { background-color:#cc0000; }
#leftMenuTwo ul.submenu li.subon a:link,  
#leftMenuTwo ul.submenu li.subon a:visited { color:#FFFFFF; }	
#leftMenuTwo ul.submenu li.subon a:hover,
#leftMenuTwo ul.submenu li.subon a:active,
#leftMenuTwo ul.submenu li.subon a:focus  { 
  /* color:#FFFFFF; 20071127:hover no change */	
}
/* chun: leftMenu - end */


/* === GOVERNMENT SHORTCUT === */
#governmentShortcuts{
	clear:both;
	margin:5px 0;
	width:100%;
	background:url(/images/background/shortcut_bg.gif) repeat-x;
}
#governmentShortcuts p{
	margin:0;
	line-height:1;
	text-align:center;
}
#governmentShortcuts p span{
	display: -moz-inline-stack;
	display:inline-block;
	vertical-align: top;
	margin:.3em 1.5em;
	padding:1em 0 1em 30px;
	white-space:nowrap;
}
#enquiry{ background:url(/images/homepage/enquiry.gif) no-repeat 0 .6em}
#govwebsite{ background:url(/images/homepage/govwebsite.gif) no-repeat 0 .6em}
#govstructure{ background:url(/images/homepage/govstructure.gif) no-repeat 0 .6em}

/* === MAIN AREA : For ALL Templates === */
#centerHolder1 {float:left; width:100%; height:100%; margin-right:-138px; background-color:#FFFFFF;}
#centerHolder2 {margin-right:138px;}
#centerHolder3 {width:100%; height:100%;}
#mainHolder1 {width:100%; margin-left:0px; background-color:#FFFFFF;}
#mainHolder2 {margin-left:10px;}
#mainArea {float:left; width:100%; height:100%;}
#mainArea .boxTitleBar {float:left; width:100%; 
	/* background-image: url(/images/background/hd_bg.gif); */
	/* 200711option2 */
	background-image:url(/images/background/side_bg.gif);		
	padding:0;
}	
	
/* === HOMEPAGE : big container === */
/* new remove the Holder1 */
#homepageSkyline {float:left; width:100%; margin-right:0px; height:72px; overflow:hidden;
	margin-bottom: 10px; /* replace hoz image */
}


/* width: expression(document.body.clientWidth-190); */
#ForAndAbout {float:left; width:100%; height:auto; background-color:#FEF6D2;
	border-top:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD;
	margin-bottom:5px;
}



/* === HOMEPAGE : elements === */

#hpUserGroup {
	float: left; width: 100%;
	margin:0; padding:0; overflow:hidden;
	background:#DADADA url(/images/background/usergroup_bg.gif) repeat-x
}
#hpUserGroup li{
	float: left; width: 25%; margin:0; padding:0;
	margin-bottom:-100px; padding-bottom:100px;
	background:#DADADA url(/images/background/usergroup_bg.gif) repeat-x;
}
#hpUserGroup li#secondLast {margin-right:-3px;}
#hpUserGroup li.current{
	background:url(/images/background/usergroup_bg_on.gif) repeat-x;
}
#hpUserGroup li span{
	display:block;
	float:left;
	background:url(/images/background/bullet_off.gif) no-repeat 14px 12px;
	padding-left:30px;
}
#hpUserGroup li.current span{
	background:url(/images/background/bullet_on.gif) no-repeat 14px 12px;
}
#hpUserGroup li a {
	font-weight:bold; color:#666666;
	display:block;
	padding:10px 0;
}
#hpUserGroup li.current a {color:#000000;}

#hpUserGroup li a#youth{
	padding-right:58px;
	background:url(/images/homepage/youth.gif) no-repeat right .4em;
}

.hpClusterGroup {float:left; width:33.3%;}

.hpCluster{
	padding:5px 2px 5px 45px;
}

/* === Cluster Icon === */
#hpResidents #communication{
	background: url(/images/homepage/residents/communication.gif) .4em .8em no-repeat;
}
#hpResidents #culture{
	background: url(/images/homepage/residents/culture.gif) .4em .8em no-repeat;
}
#hpResidents #education{
	background: url(/images/homepage/residents/education.gif) .4em .8em no-repeat;
}
#hpResidents #employment{
	background: url(/images/homepage/residents/employment.gif) .4em .8em no-repeat;
}
#hpResidents #environment{
	background: url(/images/homepage/residents/environment.gif) .4em .8em no-repeat;
}
#hpResidents #government{
	background: url(/images/homepage/residents/government.gif) .4em .8em no-repeat;
}
#hpResidents #health{
	background: url(/images/homepage/residents/health.gif) .4em .8em no-repeat;
}
#hpResidents #housing{
	background: url(/images/homepage/residents/housing.gif) .4em .8em no-repeat;
}
#hpResidents #immigration{
	background: url(/images/homepage/residents/immigration.gif) .4em .8em no-repeat;
}
#hpResidents #taxes{
	background: url(/images/homepage/residents/taxes.gif) .4em .8em no-repeat;
}
#hpResidents #transport{
	background: url(/images/homepage/residents/transport.gif) .4em .8em no-repeat;
}
#hpBusiness #businessgov{
	background: url(/images/homepage/business/businessgov.gif) .4em .8em no-repeat;
}
#hpBusiness #businessmainland{
	background: url(/images/homepage/business/businessmainland.gif) .4em .8em no-repeat;
}
#hpBusiness #corporate{
	background: url(/images/homepage/business/corporate.gif) .4em .8em no-repeat;
}
#hpBusiness #ecommerce{
	background: url(/images/homepage/business/ecommerce.gif) .4em .8em no-repeat;
}
#hpBusiness #global{
	background: url(/images/homepage/business/global.gif) .4em .8em no-repeat;
}
#hpBusiness #humanresources{
	background: url(/images/homepage/business/humanresources.gif) .4em .8em no-repeat;
}
#hpBusiness #market{
	background: url(/images/homepage/business/market.gif) .4em .8em no-repeat;
}
#hpBusiness #registration{
	background: url(/images/homepage/business/registration.gif) .4em .8em no-repeat;
}
#hpBusiness #supportenterprises{
	background: url(/images/homepage/business/ssupportenterprises.gif) .4em .8em no-repeat;
}
#hpBusiness #taxes{
	background: url(/images/homepage/business/taxes.gif) .4em .8em no-repeat;
}
#hpNonResidents #investinghk{
	background: url(/images/homepage/nonresidents/investinghk.gif) .4em .8em no-repeat;
}
#hpNonResidents #living{
	background: url(/images/homepage/nonresidents/living.gif) .4em .8em no-repeat;
}
#hpNonResidents #protection{
	background: url(/images/homepage/nonresidents/protection.gif) .4em .8em no-repeat;
}
#hpNonResidents #studyinghk{
	background: url(/images/homepage/nonresidents/studyinghk.gif) .4em .8em no-repeat;
}
#hpNonResidents #visarequire{
	background: url(/images/homepage/nonresidents/visarequire.gif) .4em .8em no-repeat;
}
#hpNonResidents #visitinghk{
	background: url(/images/homepage/nonresidents/visitinghk.gif) .4em .8em no-repeat;
}
#hpNonResidents #workinghk{
	background: url(/images/homepage/nonresidents/workinghk.gif) .4em .8em no-repeat;
}

.hpCluster h3 {display:inline; font-weight:bold;}
.hpCluster h3 a:link {color:#CC0000; font-weight:bold; }
.hpCluster h3 a:visited {color:#990000; font-weight:bold; }
.hpCluster h3 a:hover, .hpCluster h3 a:active, .hpCluster h3 a:focus {
  /* color:#FF6600; 20071127:hover no change */
	font-weight:bold; 
}

.hpCluster li {display:inline; line-height:1.2em; font-size:1em;}
.hpCluster li a:link {color:#000000; font-size:1em;}
.hpCluster li a:visited {color:#666666; font-size:1em;}
.hpCluster li a:hover, .hpCluster li a:active, .hpCluster li a:focus {
  /* color:#FF6600; 20071127:hover no change */
	font-size:1em;
}

.hpCluster li a.moreArticle:link, .hpCluster li a.moreArticle:visited {color:#FF6600;}
.hpCluster li a.moreArticle:hover, .hpCluster li a.moreArticle:active, .hpCluster li a.moreArticle:focus {
  /* color:#000000;20071127:hover no change */
}

.hpCluster ul {list-style:none; padding:0 0 0.25em 0;} 
.hpCluster ul li {display:inline; padding:0;	} 


/* === HOMEPAGE : promotion area (three column) === */
#promotionLeftBlock { width:20px; float:left; }		/* hack for 20px */

#promotionHolder1 {float:left; margin-right:-20px; width:100%;}
#promotionHolder2 {margin-right:20px;}
#promotion {width:100%; height:100%;}

#promotionColumn1 {float:left; width:33.3%;}
#promotionColumn2 {float:left; width:33.3%;}
#promotionColumn3 {float:left; width:33.3%;}

#boxFeatLink {width:100%; margin-left:-20px; position:relative; }
#boxUsefulInfo {width:100%; margin-left:-10px; position:relative; }
#boxTopOnServ {width:100%; margin-left:0px; position:relative; }

#promotion .boxTitleBar {float:left; width:100%; border-bottom: 1px solid #FFFFFF; background-image: url(/images/background/hd_bg.gif);}
#promotion .boxContent {float:left; width:100%; height:100%; background-color:#F0F0F0; 
	min-height:17em;	/* add padding to allow equal height */
	height:auto !important;
	height:17em;
}
#promotion .boxContent ul {padding-left:0; padding-right:0;}
#promotion .boxContent ul li{clear:both;}
#promotion .boxContent ul li:first-child{clear:none;}
#promotion .boxThumbnail {float:left; margin:0 10px 5px 0;}

/* === GENERIC : Right Add Area  === */
.RightAddArea {width:100%;}
.RightAddArea .boxTitleBar {float:left; width:100%; background-image: url(/images/background/side_bg.gif); padding:0;}
.RightAddArea .boxContent {float:left; width:100%; padding:0;}

.RightAddArea ul {float:left; list-style:none; width:100%; padding:0;}
.RightAddArea ul li {float:left; display:table-header-group; width:100%; padding:0px; border:0; margin:0; border-bottom:2px solid #FFFFFF;}
.RightAddArea ul li a {float:left; padding:5px 5px 5px 5px;}

.RightAddArea .pictureContent {float:left; width:100%; padding:10px 0 0 0; background-color:#FFFFFF;}
.pictureContent ul {float:left; list-style:none; width:100%; padding:0;}
.pictureContent ul li {float:left; display:table-header-group; width:100%; padding:0px; border:0; margin:0; border-bottom:10px solid #FFFFFF;}
.pictureContent ul li a {float:left; padding:0; width:100%; text-align:center;}

.RightAddArea .pictureContent p a:link {color:#000000; text-decoration:underline;}
.RightAddArea .pictureContent p a:visited {color:#666666; text-decoration:underline;}
.RightAddArea .pictureContent p a:hover, 
.RightAddArea .pictureContent p a:active, 
.RightAddArea .pictureContent p a:focus {
  /* color:#FF6600;20071127:hover no change */	
}

/* === For ALL : Right comment  === */
#commentHolder1 {float:left; width:180px;  
	overflow:hidden;
	background-color:#FFFFFF;
	padding:0;
/*	padding:0 0 10px 0;*/
}

/* 200801: add flash */
#commentFlash {float:left; padding:0 0 10px 0;}

#comment {float:left; padding:0;}
#comment h2 {float:left; padding:0 0 10px 0; margin:0; line-height:0;}
#comment h2 a:link {float:left; color:#000000; }
#comment h2 a:visited {color:#666666; }
#comment h2 a:hover, #comment h2 a:active, #comment h2 a:focus {
  /* color:#FF6600; 20071127:hover no change */
}

/* === GENERIC : hotItems (Right Box) === */
#hotItems {float:left; width:180px; height:100%; background-color:#dde4f6; overflow:hidden;}
#hotItems .boxTitleBar {float:left; width:100%; background-image: url(/images/background/side_bg.gif); padding:0;}
#hotItems .boxContent {border:0;} 

/* === CLUSTER : clusterHotItems === */
/* cluster HotItems, remove background-image and color will be override by pictureCluster.css */
#clusterHotItems {float:left; width:180px; height:100%; background-color:#dde4f6; overflow:hidden;}
#clusterHotItems .boxTitleBar {float:left; width:100%; padding:0; background-image:none;  }
#clusterHotItems .boxContent {border:0;border-bottom:2px solid #FFFFFF;}	
/* to seperate each item */
#clusterHotItems .item { padding:5px 5px 2px 5px; 
  line-height:1.2em; /* 20080430: fix number and chinese text */
}
#clusterHotItems .imgHolder { padding:10px 5px 7px 5px;  text-align:center; 
	 width:165px; overflow:hidden; /* hide overflow-x, but not y-coor */
}

/* === HOMEPAGE : News, Weather, Traffic === */
/* outer box first */
#boxHpNews {float:left; width:100%;}
#boxHpWeather {float:left; width:100%;}
#boxHpTraffic {float:left; width:100%;}

/* === HOMEPAGE : News === */
#boxHpNews ul {float:left;  list-style:none; width:100%; padding:0; padding-top:5px;  }
#boxHpNews ul li {float:left; display:table-header-group; width:100%; padding:0; border:0; margin:0; }
#boxHpNews ul li.first			{font-weight:bold;  border-bottom:2px solid #FFFFFF; }
#boxHpNews ul li a {  float:left; line-height:1.2em;  padding: 5px 5px 5px 5px; }
#boxHpNews ul li.first a:link	{color:#000000; font-weight:bold; }
#boxHpNews ul li.first a:visited	{color:#666666; font-weight:bold; }
#boxHpNews ul li.first a:hover, #boxHpNews ul li.first a:active, #boxHpNews ul li.first a:focus	{
  /* color:#FF6600; 20071127:hover no change */
	font-weight:bold; 
}
/* 2007.05.17 add white line after "last" */
#boxHpNews ul li.last {border-bottom:2px solid #FFFFFF; }

#boxHpNews ul li.last a:link, #boxHpNews ul li.last a:visited	{color:#FF6600; }
#boxHpNews ul li.last a:hover, #boxHpNews ul li.last a:active, #boxHpNews ul li.last a:focus	{
  /* color:#000000; 20071127:hover no change */
}

/* 20070817 add for live webcast */
#boxHpWebcast { float:left; width:100%; border-bottom:2px solid #FFFFFF; }
#boxHpWebcast p  { margin:5px 5px 5px 5px; border:0; padding:0; }
#boxHpWebcast span.orange { font-size:0.85em; color:#FF6600; padding:0; margin:0;  }
#boxHpWebcast ul {float:left;  list-style:none; width:100%; padding:0; }
#boxHpWebcast ul li {float:left; display:table-header-group;  line-height:1.2em; width:100%; padding:5px; border:0; margin:0; }

/* 20070817 add for press release */
#boxHpPress { float:left; width:100%; } 
#boxHpPress p  { margin:5px 5px 5px 5px; border:0; padding:0; }

/* 20080415 add for RSS Olympic News */
#boxHpRSS { float:left; width:100%; border-top:2px solid #FFFFFF; border-bottom:2px solid #FFFFFF; line-height:0; }

/* === HOMEPAGE : Traffic === */
#boxHpTraffic ul {float:left;  list-style:none; width:100%; padding:0; padding-top:5px;  }
#boxHpTraffic ul li {float:left; display:table-header-group; width:100%; padding:0; border:0; margin:0; }
#boxHpTraffic ul li a {  float:left; line-height:1.2em;  padding: 5px 5px 5px 5px; }

/* === HOMEPAGE : Weather === */
.textGreyHolder {float:left; color:#cccccc; font-size:0.85em; padding:0.5em 0 0 4px;}

/* warning Icons */
#weatherWarningArea {float:left; width:100%; margin:0; padding:0;  border-bottom:2px solid #FFFFFF;}
#weatherWarningArea ul {float:left; list-style:none; margin:0; border:0; padding:5px 0px 5px 5px;}
#weatherWarningArea ul li { display:inline; margin:0; border:0; padding:0;}

/* current 1 Icons, Temperature, RH */
#weatherCurrentArea {float:left; width:100%; padding:5px;border-bottom:2px solid #FFFFFF;}
#weatherCurrentArea .imgHolder { width:40px; float:left; }
#weatherCurrentArea .textHolder {float:left; padding-left:5px; width:125px;}
#weatherUpdateTime {font-size:0.85em;}

/* 2007.05.18 for space between Temperature,RH and weather forecast */
#weatherCurrentArea .textHolder p { margin:0px; padding:0px 0px 5px 0px; }

#weatherCurrentArea .textHolder a:link, 
#weatherCurrentArea .textHolder a:visited {color:#000000; }
#weatherCurrentArea .textHolder a:hover, #weatherCurrentArea .textHolder a:active, 
#weatherCurrentArea .textHolder a:focus {
  /* color:#FF6600; 20071127:hover no change */
}

/* Air Pollution Index */
#weatherAPIArea {float:left; padding:0px 5px 0px 5px; /* T R B L */ }
#weatherAPIArea p {margin-top:0.5em; margin-bottom:0.65em; line-height:1.5em; }
/* 20071018: add line-height */
#weatherAPIArea a		{font-weight:normal;  }
#weatherAPIArea a:link, #weatherAPIArea a:visited	{ color:#000000; }
#weatherAPIArea a:hover, #weatherAPIArea a:active, #weatherAPIArea a:focus	{ 
  /* color:#FF6600; 20071127:hover no change */
}
#weatherAPIArea ul		{list-style:none; margin:0; padding:3px 0px 0px 0px; list-style-type:none;  }
#weatherAPIArea li      {width:100%; padding:0px; margin:0; line-height:2em; }
#weatherAPIArea .low      { background-color:#009900; color:#FFFFFF; padding:1px;}
#weatherAPIArea .medium   { background-color:#00FFFF; color:#000000; padding:1px;}
#weatherAPIArea .high     { background-color:#FFFF00; color:#000000; padding:1px;}
#weatherAPIArea .veryhigh { background-color:#CC0000; color:#FFFFFF; padding:1px;}
#weatherAPIArea .severe	  { background-color:#000000; color:#FFFFFF; padding:1px;}
#weatherAPIArea .reading  { margin-right:0.5em;}

/* Display when weather update fail, default display:none */
#weatherErrorArea {float:left; width:100%; padding:0px 5px 0px 5px; border-bottom:2px solid #FFFFFF; display:none;}
#weatherErrorArea p {margin-top:0.5em; margin-bottom:0.65em;}
#weatherErrorArea a:link, #weatherErrorArea a:visited { color:#000000; }
#weatherErrorArea a:hover, #weatherErrorArea a:active, #weatherErrorArea a:focus {
  /* color:#FF6600; 20071127:hover no change */
}

/* === FOOTER === */
#pageFooter {width:100%; margin:0; padding:0; float:left; padding-bottom:5px;}
#footerArea {float:left; width:100%; border-bottom:2px solid #CC0000;}

#footerPanelLeft {float:left; margin-top:57px; vertical-align:bottom; background-color:#DDE4F6; }
#footerPanelLeft .navItem {float:left; background-color:#DDE4F6; margin-top:5px; padding-top:2px; padding-left:10px; padding-right:10px; border-right:1px solid #000000;}


#footerPanelLeft ul {float:left; list-style:none; padding:0;}
#footerPanelLeft ul li {display:inline; padding:0 0 2px 0; } 
#footerPanelLeft ul li a:link,
#footerPanelLeft ul li a:visited { color:#000000; }
#footerPanelLeft ul li a:hover,
#footerPanelLeft ul li a:active,
#footerPanelLeft ul li a:focus  { 
  /* color:#FF6600; 20071127:hover no change */
}

#footerPanelRight {float:right; margin-top:13px; vertical-align:middle;}

/* === STANDARD (cluster,writeup,support) : Banner  === */
#standardBannerArea {float:left; width:100%;}
#standardBannerPhoto {float:left; width:205px; height:70px; overflow:hidden;}
#standardBannerHeadingHolder1 {float:left; width:100%; margin-right:-205px;}
#standardBannerHeadingHolder2 {margin-right:205px;}
#standardBannerHeading {width:100%;}

/* 20081013 */
/* 1. No Hack  - for Newest Browser: FF3, IE8b2, Safari, Chrome, Opera */
#pictureColourBar {
	float:left;
	width:100%;
	height:70px;
	overflow:hidden; 
	background-color:#DCE3F4;
	
	display:table; 
	position:static;  
	/* position:relative;	firefox background will have a bit different when resize to small window */
}
#pictureColourBarMiddle {
	display:table-cell;  
	vertical-align:middle; 
	position:static; 
}
#pictureColourBarInner {
	position:relative;
	padding-left:10px; 
}

/* 2. star hack - IE6 and IE7 only */
#pictureColourBar {
	*position:relative;
}
#pictureColourBarMiddle {
	*position:absolute;
	*top:50%;
}
#pictureColourBarInner {
	*position:relative;
	*top:-50%;
}

/* override by cluster's stylesheet */
#pictureColourBar h2 {
	color:#000000;
	font-size:1.46em;
	line-height:1.2em;
}


/* added for banner advertisement:LL 13-6-2007 */

/* === STANDARD : Banner Adv Area  === */
#bannerAdvImageContainer {
	float:left; width:100%; margin-right:0px; height:72px; overflow:hidden;
	margin-bottom: 10px;
}

#bannerAdvContainer {
	float:left;
	padding-top:10px;
	width:100%;
	margin-right:-2px; /* reserve 2px for drawing box border */
}
#bannerAdvHolder1 {


	margin-right:2px; /* reserve 2px for drawing box border */
}
#bannerAdvHolder2 {
	float:left;
	width:100%;
	border:1px solid #000000;
	background-color:#FBF5E4;
}
#bannerAdvArea {
	float:left;
	width:100%;
	padding: 8px 0 8px 0;
}

#bannerAdvSmallPhoto {
	float:left;
	margin-left:8px;
	width:90px;
	height:60px;
	overflow:hidden;
	line-height:0px;
	display:inline;
}

#bannerAdvTextHolder1 {
	float:left;
	width:100%;
	margin-right:-98px;
}
#bannerAdvTextHolder2 {
	margin-right:98px;
}

/* 20071000 remark by chun: 
#bannerAdvNoImageTextHolder1 {
	background-color: #006699;
	margin-right:-5px;
}
#bannerAdvNoImageTextHolder2 {
	background-color: #FFCC66;
	margin-right:5px;
}
*/

#bannerAdvTextContent {
	float:left;
	width:100%;
}

/* 20071000: with image, change for 2 lines title */
/* 20071000: add ContentTitle, since two line title will not align left together */
#bannerAdvTextContentTitle {padding:0 0 0 8px;margin:0;}
#bannerAdvTextContent h3 {font-size:1.15em;padding:0;}
#bannerAdvTextContent p {padding:0 0 0 8px;margin:0;}
#bannerAdvTextContent a:link {color:#CC0000;}
#bannerAdvTextContent a:visited {color:#990000;}
#bannerAdvTextContent a:hover, #bannerAdvTextContent a:active, #bannerAdvTextContent a:focus {
  /*color:#FF6600;20071127:hover no change */
}

/* 20071023 add for BannearAdv Text With NoImage */
#bannerAdvNoImageContent   {padding:0px 8px 0px 8px; }	
#bannerAdvNoImageContent h3 {font-size:1.15em; margin:0px; }
#bannerAdvNoImageContent p {margin:3px 0px 3px 0px;}
#bannerAdvNoImageContent a:link {color:#CC0000;}
#bannerAdvNoImageContent a:visited {color:#990000;}
#bannerAdvNoImageContent a:hover, #bannerAdvNoImageContent a:active, #bannerAdvNoImageContent a:focus {
  /* color:#FF6600;20071127:hover no change */
}



/* === STANDARD PAGE : generic content container === */
.contentContainer {float:left; width:100%; margin-top:10px; }

/* === WRITEUP and SUPPORT PAGE : Holder for hack === */
/* pseudo class to override styles of contentItemContent in writeup and support pages */
#clusterContainer {}	
#writeupContainer {}
#supportContainer {}
#onlineServiceContainer {}

/* === STANDARD PAGE : generic content Item === */
/* 2007.05.15: default contentItemContent, DO NOT change */
.contentItemArea {float:left; width:100%; padding-bottom:10px;} /* Container */

.contentItemTitleBar {float:left; width:100%; background-color:#FBF5E4;border-top:1px solid #CC0000;} 

.contentItemTitleBar .textHolder 
{
	padding:5px 5px 5px 5px;
	float:left; color:#000000; 
	font-size:1.15em;  
	line-height:1.2em;
}
.contentItemTitleBar .textHolder h3 {font-size:1em; font-weight:normal; color:#CC0000;}

.contentItemTitleBar .textHolder a:link {color:#CC0000;}
.contentItemTitleBar .textHolder a:visited {color:#990000;}
.contentItemTitleBar .textHolder a:hover, 
.contentItemTitleBar .textHolder a:active, 
.contentItemTitleBar .textHolder a:focus {
  /* color:#FF6600;20071127:hover no change */
}

.contentItemTitleBar .legendRightSide {float:right; padding:0.45em 2px 3px 2px;}
/* 2007.05.02 TH: remove list in legends */
/* --- writeup legend Right Side --- */
/* .legendRightSide ul {float:left; list-style:none; padding:0.45em 2px 3px 2px;}
.legendRightSide ul li {display:inline; padding:0; margin:0; } */

/* 20070530: use "contentItemArea" instead of "contentItemTitleBar" because of the "Expand ALL" is not in "TitleBar" */
.contentItemArea .expandRightSide {float:right; padding:0.45em 10px 3px 0px;} /* T R B L */

.contentItemContent {float:left; padding:5px; font-size:1em; }

.contentItemContent a:link, .contentItemContent a:visited {color:#000000; font-size:1em; }
.contentItemContent a:hover, .contentItemContent a:active, .contentItemContent a:focus {
  /* color:#FF6600; 20071127:hover no change */	
	font-size:1em; 
}

.contentItemContent a.linkWithLine:link {color:#CC0000; font-size:1em;  text-decoration:underline;}
.contentItemContent a.linkWithLine:visited {color:#990000; font-size:1em;  text-decoration:underline;}
.contentItemContent a.linkWithLine:hover, 
.contentItemContent a.linkWithLine:active, 
.contentItemContent a.linkWithLine:focus {
	/* color:#CC0000; 20071127:hover no change */
  font-size:1em;  text-decoration:none;
}

.contentItemContent a.moreArticle:link, .contentItemContent a.moreArticle:visited {color:#FF6600;}
.contentItemContent a.moreArticle:hover, 
.contentItemContent a.moreArticle:active, 
.contentItemContent a.moreArticle:focus {
  /* color:#000000;  20071127:hover no change */
}

.contentItemContent ul, .contentItemContent ol {list-style:none; padding:0;} 
.contentItemContent ul li, .contentItemContent ol li {display:inline; line-height:1.2em; font-size:1em; padding:0;} 

.contentItemContent li a:link {color:#000000;}
.contentItemContent li a:visited {color:#666666;}
.contentItemContent li a:hover, .contentItemContent li a:active, .contentItemContent li a:focus {
  /* color:#FF6600; 20071127:hover no change */
}

.contentItemContent li a.moreArticle:link {color:#FF6600;}
.contentItemContent li a.moreArticle:visited {color:#FF6600;}
.contentItemContent li a.moreArticle:hover, 
.contentItemContent li a.moreArticle:active, 
.contentItemContent li a.moreArticle a:focus {
  /* color:#000000;  20071127:hover no change */
}

.contentItemContent textarea {font-family:inherit; font-size:inherit;}

/* === CLUSTER PAGE : override === */
/* 2007.05.15: added for Cluster Page, linear the sub-cat display */
#clusterContainer ul {list-style-type:disc; padding:0;margin-left:0.5em; } 
#clusterContainer ul li {list-style-type:disc;display:list-item; line-height:1.4em; font-size:1em; padding:0; margin-left:1em;} 
#clusterContainer p {padding:0; margin:0 0 0 1.5em; line-height:1.4em;}
#clusterContainer p a {text-decoration:underline;}

/* === WRITESUP PAGE : override === */
#writeupContainer .contentItemContent {font-size:1.15em; line-height:1.2em;}
#writeupContainer .contentItemContent p {margin:0 0 0.5em 0;}

/* === SUPPORT PAGE : override === */

#supportContainer .contentItemTitleBar {margin-bottom:1em; border:none; background-color:#DCE3F4;}
#supportContainer .contentItemTitleBar .textHolder h3 {font-weight:bold; color:#000000;}

/* add p width:99.5% to prevent dropping of the whole content area in IE6 for italic style content */
#supportContainer .contentItemContent {width:99.5%; padding:0; font-size:1.15em; line-height:1.2em;}
#supportContainer .contentItemContent p {margin:0 0 1em 0;}
#supportContainer h4 {
	display:block; width:100%;
	padding:0; margin-top:0; margin-bottom:1em;
	font-size:1em; font-weight:bold; color:#000000;
}

#supportContainer .boxTitleBar {float:left; width:100%; background-image: url(/images/background/side_bg.gif); padding:0;}
#supportContainer .contentItemContent a:link {color:#000000; text-decoration:underline;}
#supportContainer .contentItemContent a:visited {color:#666666; text-decoration:underline;}
#supportContainer .contentItemContent a:hover, 
#supportContainer .contentItemContent a:active, 
#supportContainer .contentItemContent a:focus {
  /* color:#FF6600;  20071127:hover no change */
}

#supportContainer .contentItemContent a.moreArticle:link, #supportContainer .contentItemContent a.moreArticle:visited {color:#FF6600; text-decoration:none;}
#supportContainer .contentItemContent a.moreArticle:hover, 
#supportContainer .contentItemContent a.moreArticle:active,
#supportContainer .contentItemContent a.moreArticle:focus {
  /* color:#000000; */
}

/* 20090929: Bullet Point Fix 
   order list  : first 1,2,3,4 	second a,b,c,d  third i,ii,iii,iv  fourth=third 
   unorder list: black circle for all level */
/* Bullet Point Fix for IE6 (all underscore, no child selector, specify to 4 level only) */
#supportContainer .contentItemContent ul {_list-style:disc outside none; _margin-bottom:1em; _margin-left:2em; _clear:left;}
#supportContainer .contentItemContent ul li {_display:list-item; _margin-left:1em; _list-style-type:disc; }

#supportContainer .contentItemContent ol {_list-style:decimal outside none; _margin-bottom:1em; _margin-left:2em; _clear:left;}
#supportContainer .contentItemContent ol li {_display:list-item; _margin-left:1em; _list-style-type:decimal; }

#supportContainer .contentItemContent ol ol li {_list-style-type:lower-alpha; }
#supportContainer .contentItemContent ol ul li {_list-style-type:disc; }
#supportContainer .contentItemContent ol ol ol li {_list-style-type:lower-roman; }
#supportContainer .contentItemContent ol ol ul li {_list-style-type:disc; }
#supportContainer .contentItemContent ol ol ol ol li {_list-style-type:lower-roman; }
#supportContainer .contentItemContent ol ol ol ul li {_list-style-type:disc; }

/* Bullet Point Fix for IE7+ and FF */
#supportContainer .contentItemContent ol {list-style:decimal outside none; margin-bottom:1em; margin-left:2em; clear:left;}
#supportContainer .contentItemContent ol>li {display:list-item; margin-left:1em; list-style-type:decimal; }

#supportContainer .contentItemContent ul {list-style:disc outside none; margin-bottom:1em; margin-left:2em; clear:left;}
#supportContainer .contentItemContent ul>li {display:list-item; margin-left:1em; list-style-type:disc; }

#supportContainer .contentItemContent ol ol>li {list-style-type:lower-alpha; }
#supportContainer .contentItemContent ol ol ol>li {list-style-type:lower-roman; }


/* 20070813 for two or more level ul */
#supportContainer .contentItemContent ul ul { margin-bottom:0em; }


/* 20090925: fix for ol-ul or ul-ol  */
#supportContainer .contentItemContent ul ol li{list-style:decimal outside none; }
#supportContainer .contentItemContent ol ul li{list-style:disc outside none; }

#supportContainer ul.supportsectionlink {list-style:none; margin-bottom:1em; margin-left:0;}
#supportContainer ul.supportsectionlink li.supportsectionlink {display:block; margin-left:0;}
#supportContainer ul.supportsectionlink li.supportsectionlink a {color:#CC0000; text-decoration:underline;}
#supportContainer ul.supportsectionlink li.supportsectionlink a:visited {color:#990000;}
#supportContainer ul.supportsectionlink li.supportsectionlink a:hover, 
#supportContainer ul.supportsectionlink li.supportsectionlink a:active, 
#supportContainer ul.supportsectionlink li.supportsectionlink a:focus {
  /* color:#FF6600;  20071127:hover no change */
}

/* === ONLINE SERVICE PAGE : override === */
#onlineServiceContainer .contentItemContent {font-size:1.15em;}
#onlineServiceContainer .contentItemContent ul {list-style:disc outside none;}
#onlineServiceContainer .contentItemContent ul li {display:list-item; margin-left:1em; list-style-type:disc;}

/* === SITEMAP PAGE : override === */
#sitemapContainer .boxTitleBar {float:left; width:100%; background-image: url(/images/background/side_bg.gif); padding:0; margin-bottom:10px;}
#sitemapContainer .boxTitleBar h3 a:link, #sitemapContainer .boxTitleBar h3 a:visited {color:#FFFFFF;}
#sitemapContainer .boxTitleBar h3 a:hover, #sitemapContainer .boxTitleBar h3 a:active, 
#sitemapContainer .boxTitleBar h3 a:focus {
  /* color:#FF6600;  20071127:hover no change */
}
#sitemapContainer .contentItemTitleBar .textHolder h4 {font-size:1em; font-weight:normal; color:#CC0000;}
#sitemapContainer .contentItemContent {font-size:1.15em;}
#sitemapContainer .contentItemContent ul li {display:list-item;}
#sitemapContainer .contentItemContent ul li ul {list-style:disc outside none;}
#sitemapContainer .contentItemContent ul li ul li {display:list-item; margin-left:2em; list-style-type:disc;}

/* === ANCHOR PAGE : override === */
#anchorpageContainer .contentItemTitleBar {border:none; background-color:#DCE3F4;}
#anchorpageContainer .contentItemTitleBar .textHolder h3 {font-weight:bold; color:#000000;}
#anchorpageContainer .contentItemContent {font-size:1.15em;}
#anchorpageContainer .contentItemContent p {margin:0 0 0.5em 0;}
#anchorpageContainer .contentItemContent ul {list-style:none; margin-bottom:1em;}
#anchorpageContainer .contentItemContent ul li {display:list-item; margin-left:0;}
#anchorpageContainer .contentItemContent ul li ul {list-style:disc outside none; margin-bottom:0;}
#anchorpageContainer .contentItemContent ul li ul li {display:list-item; margin-left:2em; list-style-type:disc;}

#supportContainer a.backToTop:link, #supportContainer a.backToTop:visited {color:#CC0000; text-decoration:underline;}
#supportContainer a.backToTop:hover, #supportContainer a.backToTop:active, #supportContainer a.backToTop:focus {
  /* color:#FF6600; 20071127:hover no change */ 	
	text-decoration:none;
}
#anchorpageContainer a.backToTop:link, #anchorpageContainer a.backToTop:visited {color:#CC0000; text-decoration:underline;}
#anchorpageContainer a.backToTop:hover, #anchorpageContainer a.backToTop:active, 
#anchorpageContainer a.backToTop:focus {
  /* color:#FF6600;   20071127:hover no change */
  text-decoration:none;
}

/* === AboutHK LIKE Pages : override === */
#gridContainer .contentItemTitleBar {margin-bottom:0;}
#gridContainer .contentItemContent {font-size:1.15em;}
#gridContainer .contentItemContent p {margin:0 0 1em 0;}

#gridContainer .boxTitleBar {float:left; width:100%; background-image: url(/images/background/side_bg.gif); padding:0;}
#gridContainer .contentItemContent a:link {color:#000000; text-decoration:underline;}
#gridContainer .contentItemContent a:visited {color:#666666; text-decoration:underline;}
#gridContainer .contentItemContent a:hover, 
#gridContainer .contentItemContent a:active, 
#gridContainer .contentItemContent a:focus {
 /* color:#FF6600;20071127:hover no change */ 
}
#gridContainer .contentItemContent a.moreArticle:link, #gridContainer .contentItemContent a.moreArticle:visited {color:#FF6600; text-decoration:none;}
#gridContainer .contentItemContent a.moreArticle:hover, 
#gridContainer .contentItemContent a.moreArticle:active, 
#gridContainer .contentItemContent a.moreArticle:focus {
  /* color:#000000;  20071127:hover no change */
}

#gridContainer .contentItemContent ul {list-style:disc outside none; margin-bottom:1em; margin-left:2em; clear:left;}
#gridContainer .contentItemContent ul li {display:list-item; margin-left:1em; list-style-type:disc;}
#gridContainer .contentItemContent ol {list-style:decimal outside none; margin-bottom:1em; margin-left:2em; clear:left;}
#gridContainer .contentItemContent ol li {display:list-item; margin-left:1em; list-style-type:decimal;}

#gridContainer ul.supportsectionlink {list-style:none; margin-bottom:1em; margin-left:0;}
#gridContainer ul.supportsectionlink li.supportsectionlink {display:block; margin-left:0;}
#gridContainer ul.supportsectionlink li.supportsectionlink a {color:#CC0000; text-decoration:underline;}
#gridContainer ul.supportsectionlink li.supportsectionlink a:visited {color:#990000;}
#gridContainer ul.supportsectionlink li.supportsectionlink a:hover, 
#gridContainer ul.supportsectionlink li.supportsectionlink a:active, 
#gridContainer ul.supportsectionlink li.supportsectionlink a:focus {
  /* color:#FF6600;20071127:hover no change */
}


/* === LEGEND DEFINE : Default for WRITESUP page === */
#legendDefineArea {float:left; width:100%; background-color:#F5F5F5; margin-bottom:10px; padding-top:3px; padding-bottom:3px;}
#legendDefineLabel {float:left; width:6.5em;}
#legendDefineHolder1 {float:left; width:100%; margin-right:-6.5em;}
#legendDefineHolder2 {margin-right:6.5em;}
#legendDefine {
	width:100% !important;
	width:98%;	/* hack for IE6, the chinese legend definition sometimes drop to 2nd line in IE6 */
	overflow:hidden;
}

#legendDefineLabel a {padding-left:5px; font-weight:bold; line-height:1.2em;}
#legendDefineLabel a:link {color:#000000;}
#legendDefineLabel a:visited {color:#666666;}
#legendDefineLabel a:hover, #legendDefineLabel a:active, #legendDefineLabel a:focus {
  /* color:#FF6600; 20071127:hover no change */
}

#legendDefineLabel .textHolder {padding-left:5px; font-weight:bold;}

#legendDefine ul 
{
	float:left; display:inline; list-style:none; width:99%;
}

#legendDefine ul li 
{
	float:left;
	display:inline;
	font-weight:normal;
	margin:0;
	padding:0 1.4em 0 0;
	white-space:nowrap;
} 
#legendDefine img {vertical-align:text-top;} 

/* 20071120 add - legend for online service*/
.contentItemArea .expandLeftSide {float:left; padding:6px 3px 3px 5px;} /* T R B L */

.legendDefineOSIcon { float:left; width:1.8em;  margin:0; padding:0.25em 0.2em 0 0; /* T R B L */}

/* 20071221: changed width */
#legendDefineBullet1 { float:left; padding:0; margin:0; width:6.6em; }
#legendDefineBullet2 { float:left; padding:0; margin:0; width:6.6em; }
#legendDefineBullet3 { float:left; padding:0; margin:0; width:8em; }
#legendDefineBullet4 { float:left; padding:0; margin:0; width:6.6em; }
#legendDefineBullet5 { float:left; padding:0; margin:0; width:5em; }

/* Width: OSIcon (2em) + textHolder + 0.1em = Bullet */
#legendDefineBullet1 .textHolder {  float:left; width:4.5em; padding:0.5em 0 0.6em 0;  }
#legendDefineBullet2 .textHolder { float:left; width:4.5em; padding:0.5em 0 0.6em 0; }
#legendDefineBullet3 .textHolder { float:left; width:5.9em; }
#legendDefineBullet4 .textHolder { float:left; width:4.5em; padding:0.5em 0 0.8em 0; }
#legendDefineBullet5 .textHolder {  float:left; width:2.9em; padding:0.5em 0 0.8em 0;  }
/* 20071221: add padding top bottom for float to left-most */

/* 20080102: override for safari 3.0.4 on winxp */
body:first-of-type #legendDefine .textHolder { padding-left:0.8em; }
body:first-of-type #legendDefineBullet1 { width:7.4em; }
body:first-of-type #legendDefineBullet2 { width:7.4em; }
/* body:first-of-type #legendDefineBullet3 .textHolder { width:8em; } */
body:first-of-type #legendDefineBullet3 { width:8.8em; }
body:first-of-type #legendDefineBullet4 { width:7.2em; }
body:first-of-type #legendDefineBullet5 { width:6.8em; }


/* === LEGEND DEFINE : ONLINE SERVICES override === */
/* 20071126: need to hack in a group */
/* 20071221: change for new text */
#onlineServiceContainer #legendDefineLabel {float:left; width:8.5em; padding-top:0.6em;}
#onlineServiceContainer #legendDefineHolder1 {float:left; width:100%; margin-right:-8.5em;}
#onlineServiceContainer #legendDefineHolder2 {margin-right:8.5em;}
#onlineServiceContainer #legendDefine {
	width:100% !important;
	width:98%;	/* hack for IE6, the chinese legend definition sometimes drop to 2nd line in IE6 */
	overflow:hidden;
}

#onlineServiceContainer #legendDefine ul li 
{
	white-space:normal;
	padding:2px 10px 2px 0;
}

/* 20071121 add - bullet point style for online service */

#onlineServiceContainer .contentItemContent {
	font-size:1.15em; 
	float:left;
	width:100%; /* big container 100% */
	border:0; margin:0; padding:0;
	border-top:4px solid #FFFFFF;
}
#onlineServiceContainer .contentItemContent ul {float:left; list-style:none; width:100%; padding:0; margin:0; }
#onlineServiceContainer .contentItemContent ul li {

	/* float:left; IE float left will not have bullet */ /* display:table-header-group; */
	 display:list-item; 	          /* li must be list item */
 	 list-style-type:none;          /* cannot be disc, because need padding or margin */	 
	 margin:0; padding:0; border:0; /* dont do style here, do inside */
	 border-bottom:2px solid #FFFFFF;	/* white */
	 width:100%; 	                  /* 100% is ok when no bullet point and no margin/padding left-right */
	 background-color:#F0F0F0;			/* light grey */
	 float:left; clear:both; 
}

#onlineServiceContainer .contentItemBullet  {	width:100%; }

#onlineServiceContainer .contentItemOSLinkHolder1  {	float:left; margin-left:-125px; width:100%; }
#onlineServiceContainer .contentItemOSLinkHolder2  {	margin-left:125px; }
#onlineServiceContainer .contentItemOSLinkHolder3  {	width:100%; }
#onlineServiceContainer .contentItemOSLink  {	padding:6px 0 6px 27px; 
	background: url(/images/background/disc.gif) 10px 12px no-repeat;
}

/* right and align left 
#onlineServiceContainer .legendRightSideHolder1 { float:left; width:125px; }  
#onlineServiceContainer .legendRightSide { padding:0.3em 2px 0 0 ; }  
#onlineServiceContainer .legendRightSide img { padding-left:2px; ; }
*/

/* right and align right */
#onlineServiceContainer .legendRightSideHolder1 { float:left; width:125px; }  
#onlineServiceContainer .legendRightSide { padding:0.3em 2px 0 0 ; text-align:right;}  
#onlineServiceContainer .legendRightSide img { padding-right:2px; ; }
/* for pretty, the right-est icon is 2+2=4px padding */

/* === GENERIC column seperate to Left and Right === */
.columnAreaHolder1 {float:left; width:100%;}
.columnAreaHolder2 {margin-right:10px;}
.columnArea {float:left; width:100%;}
.columnLeft {float:left; width:50%; position:relative;}
.columnRight {float:right; width:50%; margin-right:-10px; position:relative;}

/* === Conformance Logo === */
#conformanceLogo {width:100%; margin:0; padding:0; float:left; padding-bottom:5px;}
#conformanceLogo ul {float:left; list-style:none; padding:0;}
#conformanceLogo ul li {display:inline; margin:0; padding:0 5px 0 0;}

/* === General style for thematic sites === */
.freestyle1content {font-size:1.15em; line-height:1.2em;}
.freestyle1content p {margin:0 0 0.5em 0;}

/* === Anchor list for pages like Links to Government and Related Organisations === */
.horizontalAnchor {float:left; width:100%;}
.horizontalAnchor ul {float:left; list-style:none; padding:0;}
.horizontalAnchor ul li {float:left; display:inline; padding:0 10px 2px 10px; white-space:nowrap; margin-top:2px; border-right:1px solid #000000; font-size:1.15em;}

.verticalAnchor {float:left; width:100%;}
.verticalAnchor ul {float:left; list-style:none; padding:0;}
.verticalAnchor ul li {display:list-item; margin-left:0; font-size:1.15em;}

#pageAnchor ul li a:link,
#pageAnchor ul li a:visited { color:#000000; text-decoration:underline;}
#pageAnchor ul li a:hover,
#pageAnchor ul li a:active,
#pageAnchor ul li a:focus  { 
  /* color:#FF6600; 20071127:hover no change */
  text-decoration:underline;
}

/* === Table for all contentItemContent === */
.contentItemContent table {
	display:table;
	border-color:#FFFFFF;
	border-style:solid;
	border-collapse:collapse;
}

.contentItemContent table tr {
	display:table-row;
}

.contentItemContent table tr th {
	display:table-cell;
	font-weight:bold;
	font-size:0.87em;	/* 13px for table content */
	line-height:1.2em;
	text-align:left;
	padding:5px;
	vertical-align:top;
	border-color:#FFFFFF;
	border-style:solid;
}

.contentItemContent table tr td {
	display:table-cell;
	font-weight:normal;
	font-size:0.87em;	/* 13px for table content */
	line-height:1.2em;
	text-align:left;
	padding:5px;
	vertical-align:top;
	border-color:#FFFFFF;
	border-style:solid;
}

.odd { background-color:#F4F4F4; }
.even { background-color:#FFFFFF; }

#termsOfUse {
	clear:both;
	border:2px solid #DCE3F4;
	height:12em;
	margin:0 0 1em 0;
	overflow:auto;
	padding:0.5em;
}
#termsOfUse ol {list-style:decimal outside;}
#termsOfUse ol li {list-style:decimal outside;padding:0 0 1em 0;}

/* 20080325 add for search assist - temp not use */
#searchAssist { 
	display:none;	/* hide when load */
	/* border:1px solid #000000;  - black - when it is div */
	background-color:#FFFFFF; /* white */
	text-align:left;
	position:absolute;
	float:left;
	z-index:99;
}

#searchAssist select {
	font-weight:normal;
	font-size:0.95em; /* 20080508: make it follow font size change, 0.95 to make "Larger" size can show 3 lines */				
	line-height:1em;
	font-family:inherit;
}

/* 20090506 for GIH */
/* hide GIH by default */
.contentItemMap { display:none; }
/* For GIH showing */
.contentItemMap a { padding-right:3px; } /* since source code is pack */

/* 20091016 writesupSpecial */
.writesupSpecial1 { font-weight:bold; }