/* === 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 */
}

#pageAll {
    width: 100%;
    /* 800 to 1280 - mean 760 (759 for IE) to 1240 */
    /*  width:expression( (document.body.clientWidth < 760 ? "759px" : (document.body.clientWidth > 1220 ? "1220px" : "100%")) ); */
    /* IE */
    min-width: 300px;
    /* min-width:760px;  */
    max-width: 1220px;
    /* FF */
    text-align: left;
    /* restore body tag */
    overflow: hidden;
}


/* === GENERIC style === */


/* h2, h3, h4 {font-size:1.15em;  padding:0; border:0; display:inline;} */

img {
    border: 0;
}

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;
}

.showblock {
    display: block;
}


/* 20081029: temp for GIH */

.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: #267300;
}

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.15em;
    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/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 {
    float: left;
    width: 100%;
}

.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(images/topsearch_bg.gif);
    background-repeat: repeat-y;
    background-position: right;
}

.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;
}

#topNav .navItemSelected {
    float: left;
    background-color: #CCCCCC;
    border-right: 1px solid #000000;
    padding: 0;
    margin: 0;
}

#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 {
    /* 200711option2 remark
  color:#000000;
  background-color:#CCCCCC; 
  */
    /* 200711option2 */
    color: #FFFFFF;
    background-color: #CC0000;
}

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

#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 {
    /* 200711option2
  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;
    /* border:1px solid yellow; */
}


/* 20081023: obsolete? keep for reference
#topNavLinear {
  margin:0.2em 0 0 0 ;
  width:60px;
  padding-right:5px; /+ give some space between "format" and "Text Size" +/
  float:left;
}
*/

#topNavText1 {
    display: inline;
    /* 20081023: treat as "span" */
    line-height: 1.5em;
    /* 20081024: 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.2em 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.15em;
    height: 1.15em;
    padding: 0;
    font-family: inherit;
    color: #666666;
    /* color:#000000; */
    /* 20081009: 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.15em;
    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 {
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
}


/* === 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;
    /* 200711option2 */
    /* background-image: url(/images/background/hd_bg.gif); */
    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;
}

#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 {
    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 {
    width: 100%;
    height: 100%;
}

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


/* === HOMEPAGE : big containers === */


/* 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.15em;
    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;
}


/* === GENERIC : 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.15em;
    /* 20080430: mainly fix 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.15em;
    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.15em;
    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.15em;
    padding: 5px 5px 5px 5px;
}


/* === HOMEPAGE : Weather === */

.textGreyHolder {
    float: left;
    color: #cccccc;
    font-size: 0.85em;
    padding: 8px;
}


/* 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.15em;
}


/* added for banner advertisement:LL 17-5-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;
}

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


/* 20071024: with image, change for 2 lines title */


/* 20071024: 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;
}


/*margin-left:8px;*/

#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.15em;
}

.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;
}


/* --- writeup legend Right Side --- */


/* 2007.05.02 TH: do not use list to display the legends */


/* .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.15em;
    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.15em;
}

#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.15em;
}

#supportContainer .contentItemContent p {
    margin: 0 0 1em 0;
}

#supportContainer .contentItemContent 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;20071127:hover no change */
}


/* 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;
}

#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: 5em;
}

#legendDefineHolder1 {
    float: left;
    width: 100%;
    margin-right: -5em;
}

#legendDefineHolder2 {
    margin-right: 5em;
}

#legendDefine {
    width: 100%;
    overflow: hidden;
}

#legendDefineLabel a {
    padding-left: 5px;
    font-weight: bold;
    line-height: 1.15em;
}

#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.9%;
}

#legendDefine ul li {
    float: left;
    display: inline;
    font-weight: normal;
    margin: 0;
    padding: 0 5px 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 */


/* 20071221: icon pad-top use 0.3 for en */

.legendDefineOSIcon {
    float: left;
    width: 1.8em;
    margin: 0;
    padding: 0.3em 0.2em 0 0;
    /* TRDL */
}


/* 20071221: changed width */

#legendDefineBullet1 {
    float: left;
    padding: 0;
    margin: 0;
    width: 6.1em;
}

#legendDefineBullet2 {
    float: left;
    padding: 0;
    margin: 0;
    width: 6.6em;
}

#legendDefineBullet3 {
    float: left;
    padding: 0;
    margin: 0;
    width: 9.8em;
}

#legendDefineBullet4 {
    float: left;
    padding: 0;
    margin: 0;
    width: 6.2em;
}

#legendDefineBullet5 {
    float: left;
    padding: 0;
    margin: 0;
    width: 6em;
}


/* Width: OSIcon + textHolder + (0.1em or 0.2em) = Bullet */

#legendDefineBullet1 .textHolder {
    float: left;
    width: 3.9em;
    line-height: 1.2em;
}

#legendDefineBullet2 .textHolder {
    float: left;
    width: 4.5em;
    line-height: 1.2em;
}

#legendDefineBullet3 .textHolder {
    float: left;
    width: 7.6em;
    /* 0.2em space */
    line-height: 1.2em;
}

#legendDefineBullet4 .textHolder {
    float: left;
    width: 4.1em;
    padding: 0.5em 0 0.8em 0;
    line-height: 1.2em;
}

#legendDefineBullet5 .textHolder {
    float: left;
    width: 3.9em;
    padding: 0.5em 0 0.8em 0;
    line-height: 1.2em;
}


/* 20071221: add line-height because "g" in "printing" cannot see the lower part clearly */


/* 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: 6.9em;
}

body:first-of-type #legendDefineBullet2 {
    width: 7.4em;
}

body:first-of-type #legendDefineBullet3 .textHolder {
    width: 8em;
}

body:first-of-type #legendDefineBullet3 {
    width: 10.6em;
}

body:first-of-type #legendDefineBullet4 {
    width: 7.2em;
}

body:first-of-type #legendDefineBullet5 {
    width: 6.8em;
}


/* for english, no need to have a "textHolder" to padding top
   since all legend Text is 2 lines */


/* #legendDefineBullet1 .textHolder {} */


/* === LEGEND DEFINE : ONLINE SERVICES override === */


/* 20071126: need to hack in a group */


/* 20071221: change for new text */

#onlineServiceContainer #legendDefineLabel {
    float: left;
    width: 8em;
    /* padding-top:0.6em; */
}

#onlineServiceContainer #legendDefineHolder1 {
    float: left;
    width: 100%;
    margin-right: -8em;
}

#onlineServiceContainer #legendDefineHolder2 {
    margin-right: 8em;
}

#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        { float:left; 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.15em;
}

.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.15em;
    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.15em;
    text-align: left;
    padding: 5px;
    vertical-align: top;
    border-color: #FFFFFF;
    border-style: solid;
}

.odd {
    background-color: #F0F0F0;
}

.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 */

#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;
}

#new_wel_banner_C3 {
    background-image: url("../en/images/banner_bg0.jpg");
    background-repeat: no-repeat;
    height: 85px;
    /* max-width: 409px; */
    width: 100%;
    background-size: cover;
}

#new_wel_banner {
    background-image: url("../en/images/banner_bg1.jpg");
    background-repeat: no-repeat;
    /* background-size: ; */
    /* width:818px; */
    max-height: 85px;
    min-height: 85px;
    /* max-width: 425px; */
    height: 100%;
    width: 100%;
    /* background-size: 100%; */
    background-size: cover;
}


/* Default
#new_wel_banner {
    background-image: url("../en/images/banner_bg.jpg");
    width:818px;
    height:85px; 
    max-width: 818px;
    width: 100%;
    background-size: 100%;
}
*/

#new_wel_banner>.new_wel_banner_logo {
    height: 85px;
    opacity: 0;
    position: absolute;
    /* margin-left: -200%; */
}

#new_wel_banner>.banner_txt, #new_wel_banner_C3>.banner_txt {
    position: absolute;
    opacity: 0;
    display: none;
    /* color: #ffffff; */

    color: white;
      font-size: 18px;
    font-family: Arial;
    
    margin-top: -75px;
    height: 85px;
    word-wrap: normal;
    z-index: 100;
}

@media screen and (max-width: 767.8px) {
    #new_wel_banner>.banner_txt, #new_wel_banner_C3>.banner_txt {
        width: auto;
        margin-top: -75px;
    }
}

@media screen and (min-width: 768px) {
    #new_wel_banner>.banner_txt, #new_wel_banner_C3>.banner_txt {
        width: auto;
        margin-top: -75px;
    }
}
#new_wel_banner>.bg2  {
    /* position: absolute; */
    /* margin-left:393px; */
    /* width: inherit; */
    width: inherit;
    /* margin-left: calc(100% - 425px); */
    height: 85px;
    opacity: 0;
}