/* ==== 17:28 2016-11-25 file: layout_append.css ==== */ /* avoid do you know toggleMenu show up 10:06 2016-11-09 */ .access { top:-5000px; } /* === common useful link === */ /* 17:14 2016-11-16 override single item handling */ .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder, :lang(zh-hk) .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder, :lang(zh-cn) .tagBlock.blockTagHolder .tagContentHolder.singleTagHolder { /* single item: padding-top single from 12 back to 20px, but padding-bottom can be reduce to 0 */ padding-top: 20px; padding-bottom:0; } /* === Weather === */ /* 15:30 2016-06-30 culture weather */ .weatherBlock #weatherIconBig img { width:133px; height:42px; } /* === Feature Article === */ /* 9:24 2016-08-26 fix bullet point Feature Article have bullet point but FAQ within Cluster have not bullet point */ /* 17:25 2016-09-14 /tc/residents/employment/mpf/employees/eca.htm (bottom content have margin-left:40px; 17:30 2016-09-14 hide it 17:16 2016-09-01 Fix Table in small width (Mobile): check: /en/residents/housing/moving/coa_form.htm /tc/about/aboutus.htm */ .articleHolder Section, body.innerPage .innerPageHolder .blockItem { overflow:hidden; } @media screen and (max-width: 640px) { body.innerPage .innerPageHolder .blockItem { overflow: auto; } } /* 16:31 2016-11-24 strong for feature article, TC and SC version Note: ordinary text are not BOLD. /sc/residents/housing/private/rate/ratesenquiry.htm */ body.innerPage .innerPageHolder .blockItem strong { font-weight: bold; } /* h2,h3,h4 and p - block and 100% width 15:01 2016-09-13 */ .articleHolder Section h2, .articleHolder Section h3, .articleHolder Section h4, body.innerPage .innerPageHolder .blockItem h2, body.innerPage .innerPageHolder .blockItem h3, body.innerPage .innerPageHolder .blockItem h4, body.innerPage .innerPageHolder .blockItem p { display:block; float:left; clear:both; width:100%; } /* 12:22 2016-09-30 for /en/about/linkpolicy/index.htm */ body.innerPage .innerPageHolder .blockItem .sectionTitle { font-size:120%; padding-bottom:3px; /* border-bottom:1px solid grey; remove 'underline' 04:52 2016/10/1 */ margin-bottom:17px; display:block; float:left; clear:both; width:100%; } /* 17:40 2016-09-14 if user add "margin-left" to "p", width change to auto */ /* ======== default case, without image wrap text : start ========== */ body.innerPage .innerPageHolder .blockItem p.js-margin-left { width:auto; } /* 11:27 2016-10-06 fix for iPhone 6 Plus */ .articleHolder Section.blockItem li { clear:both; } /* default case 16:45 2016-09-13 */ .articleHolder Section.blockItem ol, .articleHolder Section.blockItem ul { display:block; clear:both; float:left; padding-top:10px; width:100%; margin-bottom:20px; /* align ol and ul, override layout.css 10:05 2016-11-07 */ } /* default case */ .articleHolder Section.blockItem ul > li { list-style-type: disc; display: list-item; list-style-type: disc; margin-left: 1.5em; clear:both; } /* 10:27 2016-09-07 override layout.css "ul ul" only 12:05 2016-09-13 add "ol ol" and change to 10px; for /en/residents/culture/museum/museums/heritagemuseum.htm */ body.innerPage .innerPageHolder ul ul, body.innerPage .innerPageHolder ol ol { /* margin-bottom: 0px; */ margin-bottom: 10px; width:100%; } /* 15:44 2016-09-01 */ body.innerPage .innerPageHolder .blockItem > a { display:block; /* width:100%; 14:41 2016-09-06 */ float:left; clear:both; } /* 17:58 2016-08-26 b span for deedregister.htm 10:57 2016-09-30 add "b i" /en/residents/environment/business/cppp.htm */ /* body.innerPage .innerPageHolder .blockItem p b, body.innerPage .innerPageHolder .blockItem p b span { font-weight:bold; } */ body.innerPage .innerPageHolder .blockItem b, body.innerPage .innerPageHolder .blockItem b i, body.innerPage .innerPageHolder .blockItem b span { font-weight:bold; } /* ======== default case, without image wrap text : end ========== */ /* ======== FAQ within cluster : start ========== */ /* 9:40 2016-09-26 FAQ with cluster - answer part e.g: /en/residents/taxes/etax/faq/faq_about_efiling_er.htm */ .articleHolder .qaHolder.answerHolder .qaContent ol, .articleHolder .qaHolder.answerHolder .qaContent ul { display:block; clear:both; float:left; /* padding-top:10px; */ width:100%; } .articleHolder .qaHolder.answerHolder .qaContent ul > li { list-style-type: disc; display: list-item; list-style-type: disc; margin-left: 10px; margin-bottom: 10px; clear:both; } .articleHolder .qaHolder.answerHolder .qaContent ul > li:last-child { margin-bottom: 0; } /* 10:45 2016-09-27 FAQ with cluster - answer part e.g: /en/residents/taxes/etax/faq/faq_about_efiling_er.htm Q33: A window with message of “Loading is in progress..." */ .articleHolder .qaHolder.answerHolder .qaContent b { font-weight:bold; } /* ======== FAQ within cluster : end ========== */ /* .articleHolder Section.blockItem li { display: list-item; margin-left: 1.5em; } */ /* if section last item is

, remove the margin-bottom */ /* note: The :last-child selector matches every element that is the last child of its parent (section in this case) */ /* 12:11 2016-08-19 move to feedin.js body.innerPage .innerPageHolder .blockItem p:last-child { margin-bottom:0; } */ /* For all SmartMenu Cards (not matter have expand rectangle or not, override padding to 20px, (maybe from 45px) 15:38 2016-08-19 */ /* body.innerPage .innerPageListGrid .item .text { padding: 20px; } */ /* ============ smartmenu : start ============ */ .item .outer .text h3 { font-size:1.125em; /* 1em is 16, change to 18px, 17:58 2016-11-07 */ /* border: 1px solid red; */ } /* 9:32 2016-11-11 fix the external icons dropdown on card (TC/SC version) TC and SC only, do to EN will make english long word break to 2 words */ :lang(zh-hk) .item .outer .text a .wordBreak, :lang(zh-cn) .item .outer .text a .wordBreak { display:inline; } /* ============ smartmenu : end ============ */ /* ============= feature article: image wrap text : start ======== */ /* Note: for image wrap text Left Image: the image itself is float left Right Image: the image itself is float right the container of image (p) is float none sibling (p), (ul), (ol) float none For Left Image: (ul) is float none, clear right For Right Image: (ol) is float none, clear left */ /* 12:00 2016-09-13: for p inside bullet both "ul li p" and "ol li p" so use "li p" only for /en/residents/communication/mobilecomm/mobilebill.htm - left bullets */ body.innerPage .innerPageHolder .blockItem li p { display:inline; width:auto; float:none; clear:none; } /* 9:28 2016-11-07 /en/about/govdirectory/po/fs.htm - left image /en/residents/environment/air/exhaustgas.htm - left image /en/business/registration/deregistration/compulsory.htm - left image - ul,ol */ body.innerPage .innerPageHolder .blockItem p[align="left"], body.innerPage .innerPageHolder .blockItem p.js-left { display:block; width:auto; float:none; clear:none; } /* 14:51 2016-09-13 for /tc/residents/environment/waste/constructionwaste.htm - right image */ body.innerPage .innerPageHolder .blockItem p[align="right"], body.innerPage .innerPageHolder .blockItem p.js-right, body.innerPage .innerPageHolder .blockItem span.js-right { display:block; width:auto; float:none; clear:none; /* display:inline; clear:none; text-align:left; padding-bottom:15px; */ } body.innerPage .innerPageHolder .blockItem span.js-right::after { content: '\A\A'; /* 17:01 2016-10-14: 2 line break to mock up an empty line */ white-space: pre; } /* body.innerPage .innerPageHolder .blockItem p.js-right { display:inline; } */ .articleHolder Section.blockItem ul.js-left { } .articleHolder Section.blockItem ol.js-left, .articleHolder Section.blockItem ul.js-left { list-style-position: inside; display:block; float:none; clear:right; width:auto; /* normal padding-top is 10px padding-top:0; border:1px solid red; */ } /* 17:03 2016-10-14 ol: fix /en/residents/transport/publictransport/hketransport.htm bullet point ul: fix /en/residents/taxes/etax/services/application_for_exemption_br.htm padding-top:0; 16:36 2016-09-13 for /en/residents/culture/museum/museums/heritagemuseum.htm */ .articleHolder Section.blockItem ol.js-right, .articleHolder Section.blockItem ul.js-right { display:block; float:none; clear:left; width:auto; /* normal padding-top is 10px padding-top:0; border:1px solid red; */ } .articleHolder Section.blockItem ul.js-left > li, .articleHolder Section.blockItem ol.js-left > li { clear:right; } .articleHolder Section.blockItem ul.js-right > li, .articleHolder Section.blockItem ol.js-right > li { clear:left; } /* 9:02 2016-08-24 desktop float left 14:31 2016-09-01 fix again For image itself align left, may be: /en/about/govdirectory/po/sfh.htm */ /* body.innerPage .innerPageHolder .blockItem img, 11:52 2016-10-20 remove only img there is image only (not float left or right) cases like: /tc/residents/taxes/taxfiling/filing/e_supplement.htm */ body.innerPage .innerPageHolder .blockItem img.js-left { display:block; float:left; clear:none; } body.innerPage .innerPageHolder .blockItem img.js-right { display:block; float:right; clear:none; } /* 9:09 2016-08-17 fix image 10:06 2016-08-25 do not affect online service icons 17:44 2016-10-14 for /tc/residents/taxes/taxfiling/filing/e_supplement.htm - change padding to margin 11:56 2016-10-24 change to "js-left" and "js-right" only (default have not margin) also check: left: /en/residents/environment/air/exhaustgas.htm right: /en/residents/environment/waste/constructionwaste.htm */ /* 12:02 2016-10-24 image for /tc/residents/taxes/taxfiling/filing/e_supplement.htm */ .articleHolder Section.blockItem img { vertical-align:baseline; } .articleHolder Section.blockItem img.js-left, .articleHolder Section.blockItem img.js-right { /* padding:5px 8px 8px 8px; */ margin:3px 8px 8px 8px; } /* ============= feature article: image wrap text : end ======== */ /* ============= social media : start ======== */ /* 17:21 2016-09-22 11:50 2016-10-24 use class "SocialMediaPage" /en/about/govdirectory/socialmedia.htm note: padding to "a img" will crop image smaller. */ .articleHolder .SocialMediaPage Section.blockItem a img { padding:0; margin:0 8px 0 0; } /* 11:13 2016-09-15 reset external link icon for imgLink for: /tc/about/govdirectory/socialmedia.htm */ /* .articleHolder Section.blockItem a.imgLink img, no need 11:28 2016-09-15 */ body.innerPage .innerPageHolder.SocialMediaPage .blockItem p img.imgZero { /* .articleHolder Section.blockItem img.imgZero { */ padding: 0 5px 0 0; margin:0; } /* ============= social media : end ======== */ /* 9:02 2016-08-24 img clear both at mobile view 14:31 2016-09-01 fix again 14:45 2016-09-02 change/add the img to "js-left", "js-right" */ @media screen and (max-width: 640px) { /* body.innerPage .innerPageHolder .blockItem img, 11:52 2016-10-20 remove only img there is image only (not float left or right) cases like: /tc/residents/taxes/taxfiling/filing/e_supplement.htm */ body.innerPage .innerPageHolder .blockItem img.js-left, body.innerPage .innerPageHolder .blockItem img.js-right { display:block; float:none; clear:both; /* border:5px solid red; test */ } } /* 14:23 2016-08-26 KC: added for full list of gov forms */ .commonlyUsed .fileFormatIcon.msexcel, .commonlyUsed .onlineServicesLegend .legendIcon.msexcel, .commonlyUsed .onlineServicesLegend li.msexcel, .commonlyUsed .eFormsLegend a.msexcel { background-image: url(../images/common_icons/icon_filetype_excel.png); } .commonlyUsed .fileFormatIcon.ld-eform, .commonlyUsed .onlineServicesLegend .legendIcon.ld-eform, .commonlyUsed .onlineServicesLegend li.ld-eform, .commonlyUsed .eFormsLegend a.ld-eform { background-image: url(../images/common_icons/icon_for_batch_4_5/Layer-933.png); } /* 15:57 2016-09-06 /en/about/form_types.htm */ .helpDesksContents .blockContentWrap { display:block; float:left; clear:both; width:100%; /* 11:32 2016-09-15 for /tc/about/govdirectory/socialmedia.htm */ } /* 15:57 2016-09-06 /en/about/form_types.htm */ body.innerPage .innerPageHolder .helpDesksContents .blockContentWrap p { /* display:inline; float:left; clear:none; */ } /* 14:24 2016-08-29 fix: /sc/about/govdirectory/govstructure.htm manual adjust only, not see fs */ .helpDesksContents .blockContentWrap a.contentLink.boldLink:not(.inlineLink) { margin-bottom: 0px; display: block; /* 9:35 2016-09-02 /tc/about/abouthk/facts.htm */ clear:both; float:left; } /* 10:19 2016-08-30 Full list of Forms */ .commonlyUsed .eFormsLegend a { margin-bottom:10px; /* 4 or more icons */ } /* 16:21 2016-08-30 oohk.htm */ body.innerPage .innerPageHolder p a:not([href]) { color: #353535; /* black (like content) */ display: inline; } /* body.innerPage .innerPageHolder p a:not([href]).inlineLink { */ body.innerPage .innerPageHolder p a:not([href]):hover { text-decoration:none; cursor: auto; } /* 11:43 2016-08-31 case for: /en/residents/housing/moving/coa_form.htm */ body.innerPage .innerPageHolder table a:not(.btn) { display: inline; } /* body.innerPage .innerPageHolder p a:not([href]) br { content: ' '; clear: both; display: block; width:100%; } */ /* a[name]:not([href]) { display: block; padding-top: 90px; margin-top: -90px; } a[name]:not([href]):before { display: block; content: " "; padding-top: 90px; margin-top: -90px; visibility: hidden; } */ /* 14:45 2016-09-07 table, style copy from wiki 15:01 2016-10-13 add tbody */ body.innerPage .innerPageHolder .blockItem table { margin: 1em 0; overflow: auto; overflow-y: hidden; overflow-x: auto; display: block; /* width: 100% !important; 15:04 2016-09-07: note: taxes table can larger than 100% */ } /* 15:11 2016-10-13 for /tc/about/govdirectory/pshd.htm - table width 100% - ie11 need special handling for /tc/residents/taxes/salaries/salariestax/chargeable/residence.htm - table no width */ body.innerPage .innerPageHolder .blockItem table[width="100%"] { display:table; border-collapse: collapse; } /* for IE11: best effort is make the border separate */ body.trident.innerPage .innerPageHolder .blockItem table[width="100%"] { border-collapse: separate; } /* 14:26 2016-10-14 not do this work, may be trouble body.trident.innerPage .innerPageHolder .blockItem table td { border-left-width:1px; border-right-width:0px; } body.trident.innerPage .innerPageHolder .blockItem table td:last-child { border-right-width:1px; } */ body.innerPage .navigator li.breadCrumbAbout { position:absolute; top:-100px; } body.innerPage .navigator li.breadCrumbAbout::before { content: " "; } /* 17:30 2016-09-06 /tc/about/govdirectory/govwebsite/alphabetical.htm#p2 note: fs have span-print-url afterwards now hae not span-print-url */ body.innerPage .govAgencyAlphabetical > ul > li > ul > li a, body.innerPage .govAgencyAlphabetical > ul > li > ul > li a:last-child { list-style: initial; margin: 0; padding: 0; } /* 15:20 2016-09-08 */ .weatherBlock .aqhiVeryHigh { background-image: url(/images/weather/aqhi/very_high.png); } .weatherBlock .aqhiSerious { background-image: url(/images/weather/aqhi/serious.png); } /* 16:29 2016-09-09 /en/about/copyright.htm The input have not ".disclaimerWrap .disclaimerTitle h2" apply it on ".disclaimerWrap .disclaimerTitle" .disclaimerWrap .disclaimerTitle { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; } Change: add "h2" on "Copyright" */ /* 11:13 2016-09-15 reset external link icon for imgLink for: /tc/about/govdirectory/socialmedia.htm */ .externalLink.imgLink::after { content: ""; } /* not useful 15:07 2016-09-15 @media screen and (max-width: 767px) { .homePage #blockEnquiries .enquiresLinks li { width:300px; } } */ /* 15:07 2016-09-15 homepage gov_enq bullet point downward issue */ @media screen and (max-width: 767px) { .homePage #blockEnquiries .enquiresLinks a { width: 80%; } } /* 16:01 2016-09-15 special handling for SocialMediaPage no background and no padding */ body.innerPage .innerPageHolder.SocialMediaPage { background:none; padding: 0; } /* 14:52 2016-09-19 ================= pakistan language =============== */ /* intro box */ /* 16:57 2016-11-11 fix tc and sc pakistan box shrink */ :lang(en) .RightToLeft .pageIntro { display:block; float:left; clear:both; } /* intro text */ body #mainHolder.RightToLeft .blueText { float:right; clear:both; direction: rtl; } /* big title */ body #mainHolder.RightToLeft h1 span.blue { float:right; direction: rtl; } /* Note: move bullet point (disc) up */ .RightToLeft .commonlyUsed .accordions .accordionContent .secondLevel a { width:95%; vertical-align:top; display:inline-block; } /* "residents" text */ .RightToLeft .commonlyUsed .accordions.online-service.multiLang .accordionTitle > span.blue { float:right; direction: rtl; } .RightToLeft .firstLevelTitle { overflow:auto; } /* expand-collapse title - english */ .RightToLeft .firstLevelTitleName { width:45%; } /* expand-collapse title - multi */ .RightToLeft .firstLevelTitleNameOtherLang { /* display:inline-block; width:45%; */ float:right; text-align:right; direction: rtl; } /* inside text */ .RightToLeft .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent span { display:inline-block; width:45%; } .RightToLeft .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent span:not(.red) { float:right; direction: rtl; text-align:right; } @media screen and (max-width: 800px) { /* expand-collapse title - multi */ .RightToLeft .firstLevelTitleName, .RightToLeft .firstLevelTitleNameOtherLang { width:auto; } /* both eng and multi lang */ .RightToLeft .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent span { width:auto; } /* multi lang */ .RightToLeft .commonlyUsed .accordions.online-service .secondLevel .secondLevelContent span:not(.red) { margin-bottom:20px; } } /* ======== pakistan language :end =========== */ /* 11:34 2016-09-21 "expandToFullPage" class added */ .expandToFullPage .sideNav.gridBlock.noBG.block-1-4.blockTb-1-1.tagBlock.expandable.expandTb { display:none; } .expandToFullPage .innerPageWrapper.showOnTablet { display:none; } .expandToFullPage #innerPageSideNav { width:100%; padding-left:0; } /* 14:40 2016-10-06 hide the doYouKnow section before render of items show at feedin.js */ #doYouKnow { position:absolute; top:-1000px; } /* 17:58 2016-10-24 move from feedin.js to here fix for /en/about/helpdesk/ (margin become 20px + 30px) */ body.innerPage .innerPageHolder .blockContentWrap { margin-bottom:50px; display:block; clear:both; float:left; } /* 8:53 2016-10-25 fix for border move up */ .yourService.innerPageWrapper .recommendHolder .item { float:left; } /* ===================================== 14:55 2016-11-01 for /en/about/govdirectory/mobileapps.htm */ #mobileAppDropDown { display:block; float:none; margin-bottom:20px; } .govDirMobileApp h2.subMainTitle { margin-top:35px; } .govDirMobileApp .blockItemAppIntro { /* margin-top:10px; */ margin-bottom:10px; } .govDirMobileApp .blockItemAppIntro p { margin-top:10px; } .govDirMobileApp .blockItemAppIntro a, .govDirMobileApp .blockItemAppIntro a > span { color: #951717; } /* h2,h3,h4 and p - block and 100% width 15:01 2016-09-13 */ /* 10:00 2016-11-11 make below bullet point normal */ .govDirMobileApp .articleHolder Section h2 { float:none; } /* 9:58 2016-11-11 make apps title underline normal */ .govDirMobileApp .articleHolder Section h4 { float:none; } /* 15:32 2016-11-16 override for very long apps name */ .govDirMobileApp .mobileAppRelatedRows .relatedTable { min-height: 100px; /* en: 100px - 4 line, 74px - 3 lines apps name */ height:auto; vertical-align: top; display:inline-block; float:left; clear:none; margin-bottom:10px; } :lang(zh-hk) .govDirMobileApp .mobileAppRelatedRows .relatedTable, :lang(zh-cn) .govDirMobileApp .mobileAppRelatedRows .relatedTable { min-height: 68px; /* tc and sc: 2 lines app name */ } /* 15:32 2016-11-16 put the image to v-top */ .govDirMobileApp .mobileAppRelatedRows .cell.cellImage { vertical-align: top; } /* ============== */ /* 16:44 2016-11-01 /en/theme/mygovhk/ make the white background for mygovhk */ .yourService .recommendHolder, .yourService .recommendHolder .helpDesksContents { display:block; float:left; clear:both; } /* ======= Search ======= */ /* 9:04 2016-11-14 fix for ui overlap by other layers */ .ui-autocomplete { z-index:9999; } /* 17:23 2016-11-25 to align "Hot Searches" text with keywords */ .hotSearch span { display:inline-block; padding-top:10px; } /* ============== */