@import "/en/stylesheet/govhk.css";

/* 20070726: import the govhk.css for print version (fix the default font size and normal version for print - in FF) */

/* Govhk_print.css */
body { text-align:left; height:auto;  zoom:100%; }

/* added: 20070514 for print */
.urlprinttitle {display:block; /*float:none;*/ clear:both;}
.urlprintlist {display:block; /*float:none;*/ clear:both;
	/* 20071211: IE break-word  */
	word-wrap: break-word;	/* IE only, firefox may need "wbr" or javascript to break it */
}
.urlprintcontent {display:inline;}

/* === for print, set the maximum width is 640px === */
/* === but please make sure all element have width equal or smaller than 640px === */

/* === big container === */
#pageAll {  float:none;	width:640px; margin:0; padding:0; border:0; height:auto; display:inline;}

/* === header === */
.pageTop {float:none; width:640px; margin:0; padding:0; border:0;}

#topPanel { width:638px; }    /* 2px for the border */
#topPanelRight { display:none; } 
#topNav { width:638px; }    /* 2px for the border */ 

/* added 20070511 font size enlarge */
#topNav .fontSelection { display:none; }
#topNavRight { display:none; }

/* no need to handle breadcrumb */

/* === footer === */
/* English pageFooter cannot fit to 640px width  */
/* so now decrease the .navItem padding-left and padding-right to make it fit to 640px for Firefox */
/*
#pageFooter { float:none; clear:both; width:640px; margin:0; padding:0; border:0;  }
#footerArea { float:left; clear:both; width:640px;  margin:0; padding:0; border:0; border-bottom:2px solid #CC0000;}
*/
/* clear:both hack the right side space (>640px) for the flying dragon */
#pageFooter { float:none; clear:both; width:640px; margin:0; padding:0; border:0;  }
#footerArea { float:left; clear:both; width:100%;  margin:0; padding:0; border:0; border-bottom:2px solid #CC0000;}

/* so now decrease the .navItem padding-left and padding-right to make it fit to 640px  */
#footerPanelLeft .textHolder { display:none; width:0; } /* hide the corner image */
#footerPanelLeft .navItem {padding-left:8px; padding-right:8px; }

/* PanelRight float:left for print */
#footerPanelRight {float:left; padding-left:10px; margin-top:13px; vertical-align:middle;}


#conformanceLogo { float:none; width:640px; }

/* === main area (middle part), main area is 640px also === */
#pageMain {float:none; width:640px; margin:0; padding:0; border:0; height:auto; overflow:visible;} 


/* === leftSide and rightSide === */
#rightSide       {float:none; width:100%; margin:0; padding:0; border:0;}
#leftSideHolder1 {float:none; width:100%; margin:0; padding:0; border:0; height:auto;}
#leftSideHolder2 {float:none; width:100%; margin:0; padding:0; border:0; height:auto;}
#leftSide        {float:none; width:100%; margin:0; padding:0; border:0; height:auto;}

/* === promotion (on Homepage) === */
#promotionLeftBlock { display:none; }		/* hack for 20px, no need for print */

#promotionHolder1 {float:none; width:100%; margin:0; padding:0; border:0;}
#promotionHolder2 {float:none; width:100%; margin:0; padding:0; border:0;}
#promotion        {float:none; width:100%; margin:0; padding:0; border:0; height:auto;}

/* 20070521 chun: remark old one */
/*
#promotionColumn1 {float:left; width:100%; margin:0px; border:0px; padding-top:15px; }
#promotionColumn2 {float:left; width:100%; margin:0px; border:0px; padding-top:15px; }
#promotionColumn3 {float:left; width:100%; margin:0px; border:0px; padding-top:15px; }
*/

/* 20070521 chun: for break the page, 0522: add clear:both */
#promotionColumn1 {float:none; clear:both; width:100%; margin:0px; border:0px; padding-top:15px; }
#promotionColumn2 {float:none; clear:both; width:100%; margin:0px; border:0px; padding-top:15px; }
#promotionColumn3 {float:none; clear:both; width:100%; margin:0px; border:0px; padding-top:15px; }
/* promotion box is three horizonial element in screen */
/* for print, add padding-top:15px */


/* 20070521: ul,li,a float:none */
#promotion ul,
#promotion li,
#promotion a { float:none; clear:both;}
/* 20070522: try clear:both although no problem */

/* === promotion 3 boxes id === */
#boxFeatLink   {float:none; width:100%; margin:0; padding:0; border:0;}
#boxUsefulInfo {float:none; width:100%; margin:0; padding:0; border:0;}
#boxTopOnServ  {float:none; width:100%; margin:0; padding:0; border:0;}

/* === promotion height, set a height smaller to make it shrink === */
#promotion .boxContent { min-height:5em; height:5em; }	

/* === Hide Leftmenu for "standard page" (non-homepage) === */
#leftMenuArea { display:none; }

/* === main area handling === */
#centerHolder1 {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; display:inline;}
#centerHolder2 {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; display:inline;}
#centerHolder3 {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; display:inline;}
#mainHolder1   {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; display:inline;}
#mainHolder2   {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; display:inline;}
#mainArea      {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; display:inline;}

/* === SHOW Leftmenu for homepage (override above) === */
#ForAndAbout #leftMenuArea  { display:block; float:left; width:138px; }
#ForAndAbout #centerHolder1 { display:block; float:left; width:502px; }


/* === standard banner for "standard page" === */
#standardBannerArea           {float:none; width:640px; height:70px; margin:0; padding:0; border:0; }
#standardBannerPhoto          {float:left; width:205px; height:70px; margin:0; padding:0; border:0; }
#standardBannerHeadingHolder1 {float:left; width:435px; height:70px; margin:0; padding:0; border:0; }
#standardBannerHeadingHolder2 {float:none; width:435px; height:70px; margin:0; padding:0; border:0; }
#standardBannerHeading        {float:none; width:435px; height:70px; margin:0; padding:0; border:0; }

#pictureColourBar,
#pictureColourBar[id] ,
#pictureColourBarMiddle ,
#pictureColourBarMiddle[id] ,
#pictureColourBarInner 
{
  position:static; display:block; float:none; 
  top:0; width:435px; height:70px; overflow:visible; 
  margin:0; padding:0; border:0;
}
#pictureColourBarInner { padding-left:10px; width:425px; }

/* === content container for "standard page" === */
.contentContainer {float:left; clear:both; width:640px; padding-top:10px; }
/* clear:both is added, check if any error */

/* === content container element default setting, (on writeup page and support page) === */
.contentContainer .contentItemArea  {float:none; width:100%; margin:0; padding:0;  border:0; height:auto; padding-bottom:10px; display:inline;} 
.contentContainer .contentItemTitleBar {float:none;  width:100%; margin:0; padding:0; border-top:1px solid #CC0000; height:auto; display:inline;}
.contentContainer .contentItemContent {float:none; width:100%; margin:0; padding:0; border:0; height:auto; display:inline;}
.contentContainer .textHolder { float:none; width:95%; } /* textHolder have some padding itself */

/* === writeup need special handling (on contentContainer), because it have legendRightSide === */
#writeupContainer .contentItemTitleBar {  float:left; width:100%; }
#writeupContainer .contentItemTitleBar .textHolder {  float:left; width:85%; }
/* remaining width is given to legendRightSide */
#writeupContainer .contentItemTitleBar .legendRightSide {  float:right;  } 

/* === page like "govdirectory.htm" === */
#supportContainer .columnAreaHolder1 {float:none; clear:both; width:640px; margin:0; padding:0; border:0; }
#supportContainer .columnAreaHolder2 {float:none; width:100%; margin:0; padding:0; border:0; }
#supportContainer .columnArea {float:none; width:100%; margin:0; padding:0; border:0; }
#supportContainer .columnLeft {float:none; width:100%; margin:0; padding:0; border:0; /* padding-bottom:10px; */ }
#supportContainer .columnRight {float:none; width:100%; margin:0; padding:0; border:0; /* padding-bottom:10px; */ }
#supportContainer .contentItemContent p {margin:0 0 0.5em 0;} 
#supportContainer ul.supportsectionlink li.supportsectionlink {width:100%; display:inline; }

/* ===== 20071129 add online service ===== */
#legendDefineLabel .textHolder { padding-left: 0; }

/* big container for title and each online service */
#onlineServiceContainer .contentItemArea { 
  float:none; clear:both; display:inline;  width:640px;  
	margin:0; padding:0;  
  /* border:1px solid red; */
}

#onlineServiceContainer .contentItemContent { float:none; clear:both; display:inline; }

/* each Cluster expand Icon and Clsuter Title */
#onlineServiceContainer .contentItemTitleBar { float:none; clear:both; display:block; width:640px;}
#onlineServiceContainer .contentItemTitleBar .expandLeftSide { float:left;  clear:left; /* border:1px green red; */}
#onlineServiceContainer .contentItemTitleBar .textHolder { float:left; width:600px;  /* border:1px blue red; */}


/* each item legend(s) */
#onlineServiceContainer .contentItemContent { float:left; clear:both; width:640px; /* border:1px solid blue; */
  display:inline;  
}

/* fix print accross page problem */
#onlineServiceContainer .contentItemContent ul li { float:none; }

#onlineServiceContainer .contentItemOSLinkHolder1 {	float:left; margin:0; padding:0; width:460px; /* border:1px solid green; */ }  
#onlineServiceContainer .contentItemOSLinkHolder2, 
#onlineServiceContainer .contentItemOSLinkHolder3 {	float:left;  margin:0; padding:0;    } 
#onlineServiceContainer .contentItemOSLink        {	float:left;  margin:0; padding:6px 0 6px 25px;    }

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

#onlineServiceContainer .urlprintlist {	float:left; clear:both; padding:0 0 10px 25px;    }


/* ===== 20071129: sitemap ===== */
#sitemapContainer .contentItemArea { 
  float:none; clear:both; display:block;  width:640px;  
	margin:0; padding:0; 
  /* border:1px solid red; */
}

#sitemapContainer .contentItemContent { float:none; clear:both; width:640px; 
	display:block; 
	padding-bottom:15px;	/* added in print */
  /*border:1px solid blue;*/
}

/* for each UserGroup */
#sitemapContainer .contentItemUserGroupBar { 
	float:none; clear:both;	/* CAUTION: 200711: need to say explicit in FF */
	padding-top:30px;
}

/* for UserGroup Title */
#sitemapContainer .boxTitleBar { float:none;  width:100%; } 
#sitemapContainer .boxTitleText { float:none;  } 

/* for Cluster Title */
#sitemapContainer .contentItemTitleBar { float:none; clear:both; display:block; width:640px;}
#sitemapContainer .contentItemTitleBar .expandLeftSide { float:left;  clear:left; /*border:1px green red;*/}
#sitemapContainer .contentItemTitleBar .textHolder { float:left; width:600px;  /*border:1px blue red;*/}

/* for sitemap item */
#sitemapContainer .contentItemArea ul, 
#sitemapContainer .contentItemArea li, 
#sitemapContainer .contentItemArea a { float:none; clear:both;}

/* for padding on sitemap item */
#sitemapContainer .contentItemArea ul { padding-left:30px; } 
#sitemapContainer .contentItemArea ul ul { padding-left:10px; } 

/* === anchorpage additional handling === */
#anchorpageContainer .contentItemArea { float:none; clear:both; display:block; width:640px; }

#anchorpageContainer .contentItemTitleBar { float:left; clear:both; display:block; width:640px;}
#anchorpageContainer .contentItemTitleBar .textHolder { float:left; width:600px;  /* border:1px blue red; */}

#anchorpageContainer .contentItemContent { float:none; clear:both; width:640px; }
/* ul and li cannot have width, because have ul ul and li li */
#anchorpageContainer .contentItemArea ul { float:none; clear:both; 
	margin:0; padding:0; 
	/* border:1px solid red; */
	list-style:disc outside none;
}
#anchorpageContainer .contentItemArea li { float:none; clear:both;  display:list-item; 
	margin:0; padding:0; 
	/* margin-left:40px; */ 
	padding-left:0px; 
	list-style:none; 
	/*  border:1px solid blue; */
}
#anchorpageContainer .contentItemArea li li {
	margin-left:2em; 
	list-style-type:disc;
}

#anchorpageContainer .contentItemArea p { float:none; padding:0.5em 0 1em 0;  }
#anchorpageContainer .urlprintcontent {  }

/* 20071211 legend print - use legendDefineLabel bigger of en tc */
#legendDefineLabel {float:left; width:6.5em;}
#legendDefineHolder1 {float:left; width:100%; margin-right:-6.5em;}
#legendDefineHolder2 {margin-right:6.5em;}

/* === right side, "comment" element === */
/* === "comment" as a manual page break by setting float:none on homepage === */
/*
#commentHolder1        {float:none; display:block; width:100%; margin:0; padding:0; border:0; margin-top:20px; overflow:visible; }
#comment			   {float:none; width:100%; margin:0; padding:0; border:0; }	  
*/
#commentHolder1        {float:none; clear:both; width:100%; margin:0; padding:0; border:0; padding-top:20px; overflow:visible; }
#comment			   {float:none; width:100%; margin:0; padding:0; border:0; }	  


/* === right side, hotItems element === */
#hotItems               {float:none; width:100%;  margin:0; padding:0; border:0; height:auto; overflow:visible;   }
#hotItems .boxTitleBar  {float:none; width:100%; height:auto; margin:0; padding:0; border:0; }
/* #hotItems .boxTitleText {float:left; width:100%; height:auto; margin:0; ++ padding by screen ++ border:0;   } */
#hotItems .boxTitleText {float:none; width:100%; height:auto; margin:0; /* padding by screen */ border:0;   }
#hotItems .boxContent   {float:none; width:100%; height:auto; margin:0; padding:0; border:0; }
#hotItems h2 { color:#FFFFFF; }


/* 20070522: try ul li float:none, clear:both, since have problem */
#hotItems ul,
#hotItems li,	        
#hotItems a { display:block; float:none; clear:both; }

/* 20070522: IE7 need this (try IE6 no harm), FF cannot have it */
/* #hotItems img, */
#hotItems li.first, 
#hotItems li.last   { *float:none; *clear:both; }


/* === Homepage Right Boxes === */
/* just let whole 3 elements maintain at page1 or page2 (by float:left) === */
/*
#boxHpNews    {float:left; display:block; width:100%;  margin:0; padding:0; border:0; padding-top:20px;}
#boxHpWeather {float:left; display:block; width:100%;  margin:0; padding:0; border:0; padding-top:20px;}
#boxHpTraffic {float:left; display:block; width:100%;  margin:0; padding:0; border:0; padding-top:20px;}
*/

/* 20070522 */
#boxHpNews    {float:none; clear:both; display:block; width:100%;  margin:0; padding:0; border:0; padding-top:20px;}
#boxHpWeather {float:none; clear:both; display:block; width:100%;  margin:0; padding:0; border:0; padding-top:20px;}
#boxHpTraffic {float:none; clear:both; display:block; width:100%;  margin:0; padding:0; border:0; padding-top:20px;}


/* 2007.05.14: override Weather Title */
#boxHpWeather .boxTitleBar {float:left;}
#boxHpWeather .boxTitleText {width:auto;}
#weatherUpdateTime {float:left;}


/* === Right Box Element for "standard page" === */
/* remark:  */
/* float:none only : Firefox no padding-top:20px */
/* float:left only : IE7 will have about 10 line between two RightAddArea */
/* float:left; clear:both : IE7 will have not the 2nd RightAddArea */
/* float:none; clear:both : seem ok for IE7 and FF */
.RightAddArea {float:none; clear:both; display:block;  width:100%;  margin:0; padding:0; border:0; padding-top:20px;}

/* 20070521: try ul li float:none */
/* try
.RightAddArea .boxTitleBar,
.RightAddArea .boxContent,
*/

.RightAddArea ul,
.RightAddArea li,
.RightAddArea a { float:none; clear:both;}
/* 20070522: add clear:both, try avoid cross page text disappear */


.RightAddArea li { display:block;}


/* === Right Box Element for "theme page" === */
.RightAddArea .pictureContent { float:none; }
.pictureContent ul li a { text-align:left;}

#termsOfUse {
	clear:both;
	border:none;
	height:auto;
	overflow:visible;
	page-break-inside:auto;
}