/* =================================================================================================
	layout.css (LAYOUT GRID)
	20141231: eform,os tagcloud
	20150115: hide os tagcloud
	20160201: fix qna bg on type c and d

	Common layout stylesheet for GovHK
	Define the layout grid / base look & feel etc.
================================================================================================= */



/* =================================================================================================
	WRAPPER
================================================================================================= */
body {
	margin:0;
	padding:0;

		/*
	  
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  */
  /*
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  */
	
}
#wrapper{
	width:100%;
	min-width:970px;
}
#pageContainer{
	margin:auto;
	width:970px;
	overflow:hidden;
	height:100%;
	min-height:100%;
}


/* =================================================================================================
	ACCORDION RESET
================================================================================================= */

#wrapper .ui-accordion .ui-accordion-icons {
	padding:0;
}

#wrapper .ui-widget {
	font-size:1em;
}

#wrapper .ui-accordion .ui-accordion-header {
    margin-top: 0px;
}

#wrapper .ui-state-default, 
#wrapper .ui-widget-content .ui-state-default, 
#wrapper .ui-widget-header .ui-state-default {
	border:0;
}


#wrapper .ui-accordion .ui-accordion-icons {
	padding:0;
}
#wrapper .ui-accordion .ui-accordion-noicons {
	padding:0;
}
#wrapper .ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding:0;
}
#wrapper .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	/* position: absolute; */
	left: 0;
	top: 0;
	margin-top: 0;
}
#wrapper .ui-accordion .ui-accordion-content {
	padding: 0; 
	border: 0;
	/* overflow: none; */
	/* 20140704: esp. for hp-en-nonres */
	overflow: hidden;
}


/*
#wrapper .ui-accordion {
	font-size:1em;
}
*/

/* =================================================================================================
	CLEARING
================================================================================================= */
/*Add elements to be clear*/
#topbar, #govhkBar, #info, #announcement, #weather, #currentWeather, #legends, #footer, #badges,
#citizenRelated, #featuredColumns,
#smartMenuContainer, #articleContainer, #tabMenuContainer, #faqContainer, #tabs, #styles,
#govAgencyAlphabeticalList, #findOnlineServices, #findEForms, #ajaxForm, #eFormsTags,
#findEFormsContainer #ajaxSearchForm, #findOnlineServicesContainer #ajaxSearchForm,
#smartMenuPage #iWantTo, #faqPage #topFAQ,
#articleMenu #iWantTo ul, #shareContainer ul,
.sidebar, .buttonContainer, .findOnlineServeicesHeader, .findEFormsHeader, .govAgencyHeaderItem,
.eFormsLegend, .clustersLegend, .styleToolBar,
.singleMenuList li, .onlineFullList li, #topStories li
{
	overflow:hidden;
	width:100%;
}
/* 20120726: add "singleMenuBg" attribute here, when necessary */

/* 20130410: fix firefox ver18 cannot show top button in multilang pages */
/* fix by .collapsibleMenu
#sitemap .content {
	float:none;
}
*/

/* =================================================================================================
	GENERIC ELEMENTS
================================================================================================= */

/* 20121221:apply 1px line-spacing for tc and sc (desktop and mobile) */
.tc, .sc {
	letter-spacing:1px;
}

/* 20121221:0 letter spacing for below */
#weatherTemp {
	letter-spacing:0px;
}


a {padding:0;border:0;}
a:link, a:visited {text-decoration:none;}
a:hover, a:active, a:focus {text-decoration:underline;}

ul{list-style-type:none;list-style-position:outside;}
sup, sub{line-height: 0;}
th{text-align:left;}

.more{
	text-align:right;
	padding-right:10px;
}
.button, .button2{
	float:left;
}
.button a, .button2 a{
	display:block;
	float:left;
	padding-left:15px;
	width:auto;
	height:24px;
	line-height:24px;
	font-weight:bold;
	text-decoration:none !important;
}
.button span, .button2 span{
	padding-right:15px;
	display:block;
}
.buttonRight{
	float:right;
}
.backToTop{
	font-weight:bold;
	margin:1em 0;
	
	
}

/* 20130124: govhk video on featured article */
.backToTop, #lastUpdate{
	display:block;
	width:100%;
	float:left;
	clear:both;
}
.backToTop a{
	padding-left:16px;
}
p.noscript{
	display:block;
	padding:20px;
	text-align:center;
}
.anchor:link,.anchor:visited,.anchor:hover,.anchor:active,.anchor:focus
{text-decoration:none;}


/* 20120829 added no whitespace for images only */
.no-whitespace {
    line-height: 0;
    font-size: 0;
}

/* =================================================================================================
	PRINT
================================================================================================= */
.print{display:none !important;}


/* =================================================================================================
	SCREEN READER
================================================================================================= */
.access {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;}
.ignore {display:none !important;} /*hide elements which added for validation*/

/* =================================================================================================
	MOBILE VERSION: 20120906
================================================================================================= */
.mobileonly {display:none;}  /* for elements display in mobile only*/
.mobileignore {}	 /* elements will be strip on mobile version */	
.codeonly {display:none; } /* 20140122: use for javascript, not display */

/* =================================================================================================
	HEADER
================================================================================================= */
#header{
	width:100%;
}
#topbar{
	margin:auto;
	width:970px;
}

/* 20130603 updated for header */
#quickLinks{float:right}
#toolbar{float:left}

#quickLinks li{
	float:left;
	height:32px;
	line-height:32px;
	padding-right:10px;
	white-space:nowrap;
}
/* 20120720: change all ":last-child" to ".last", as it is CSS3 
/* #quickLinks li:last-child{
	padding-right:0;
} */
#quickLinks li.last{
	padding-right:0;
}
#toolbar li{
	float:left;
	height:32px;
	line-height:32px;
	padding-left:10px;
	white-space:nowrap;
}
#toolbar li:first-child{
	padding-left:0;
}
#rss a{
	padding-left:17px;
}
#languageSelector{
	margin-top:5px;
}

/* 20130104: for nvda, 3 langs in diff. list item, set spacing */
.en #toolbar .subItem {
	padding-left:3px;
}
.tc #toolbar .subItem,
.sc #toolbar .subItem  {
	padding-left:7px;
}

.tc #rss, .sc #rss,
.tc #fontSize, .sc #fontSize,
.tc #languages, .sc #languages{
	margin-top:-1px;
}



/* =================================================================================================
	GOVHK BAR
================================================================================================= */
#govhkBar{
	width:100%;
	padding-top:25px;
}
#govhkLogo{
	float:left;
}
#userGroups{
	float:right;
}
#userGroups ul{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	padding:0;
	margin:0;
}
#userGroups ul li{
	float:left;
	height:36px;
}
#userGroups ul li a{
	font-weight:bold;
	display:block;
	height:36px;
	line-height:36px;
	padding:0 16px;
	text-decoration:none;
}

/* 20130618:reduce from 16px to 12px for social groups (english version only) */
.en #userGroups ul li a{
	padding:0 12px;
}

/* 20100908 add */
#userGroups ul li #anchorsearch {
	display:inline;
	height:0;
	width:0;
	padding:0;
	margin:0;
	border:0;
}
#searchBoxContainer{
	padding:7px 0;
	float:left;
}
#searchForm{
	padding:0;
	margin:0;
	/* 20120223: add float left for fixed search box disappear in chrome17 */
	float:left;	
}
#searchBox{
	float:left;
	border:0;
	width:145px;
	height:19px;
	padding:3px 3px 0 2px;
	margin-left:15px;
}
#searchIcon{
	float:left;
	width:20px;
	height:22px;

	margin-right:15px;
	cursor:pointer;
	text-indent:-9999px;
}

/* =================================================================================================
	INFORMATION
================================================================================================= */
#info{
	padding:10px 0 20px;
}
#today{
	float:left;
}
#govhkTopKeywords{
	float:right;
	font-weight:bold;
}

/* =================================================================================================
	SITE Announcement
================================================================================================= */
#announcement{
	position:relative;
	clear:both;
}

/* =================================================================================================
	THEMEATIC SITE IDENTITY
================================================================================================= */
#themeIdentity{
	padding-bottom:20px;
}


/* =================================================================================================
	MAIN & SIDEBAR
================================================================================================= */
.sidebar #main{
	float:left;


	width:693px;
	overflow:hidden;
}
#sidebar{
	float:right;
	width:277px;
	margin-bottom:20px;
}

#sidebar > div{
	margin:10px 19px 10px 18px;
}


/* =================================================================================================
	FOOTER
================================================================================================= */
#footer{
	width:100%;
	overflow:hidden;
	padding-top:30px;
	padding-bottom:20px;
}
#auxiliaryMenu li.shortFooter{
	width:50px;
}
#auxiliaryMenu{
	width:700px;
	float:left;
}
#auxiliaryMenu li{
	display:block;
	float:left;
	/* width:150px; 20150429: change below for move about HK and Mobile Version from header to footer */
	width:140px;
	height:2.5em;
	line-height:1;
}
.tc #auxiliaryMenu li, .sc #auxiliaryMenu li{
	text-align:center;
}
#brandhk{
	float:right;
	margin-top:-5px;
}
#badges {
	padding-bottom:20px;
}
#conformance{
	float:left;
}
#conformance li{
	display:block;
	float:left;
	/* 20140919 footer */
	/* margin-right:20px; */
	margin-right:11px;
	padding:0;
}
#conformance li a{
	display:block;
}
/* 20140509 added wac */
#conformance .w3 a,
#conformance .wac a{
	margin-top:20px;
}
#awards{
	float:right;
}
#awards li {
	display:block;
	float:left;
	/* 20140919 footer */
	/* margin-left:20px; */
	margin-left:11px;
	padding:0;
}
#awards li a{
	display:block;
}


/* =================================================================================================
	HOMEPAGE FEATURE PROMOTION
================================================================================================= */

/* 20140704: fix flexslider check it out flash */
#whatsNew .slides > div {display: none; -webkit-backface-visibility: hidden;}


/* Direction Nav */
#feature, #whatsNew{
	position:relative;
	overflow:hidden;
}
#feature{
	height:214px;
}
.flex-direction-nav {
	height:0;
}
.flex-direction-nav a {
	width:30px;
	height:30px;
	margin:-20px 0 0;
	display:block; 
	background:url(/images/homepage/banner_direction_nav.png) no-repeat 0 0;
	position:absolute;
	top:50%;
	z-index:10;
	cursor:pointer;
	text-indent:-9999px;
	opacity:0;
	outline:none;
}
#whatsNew .flex-direction-nav a {
	top:68px;
}
.flex-direction-nav .flex-next {
	background-position:100% 0;
	right:-36px;
}
.flex-direction-nav .flex-prev {
	left:-36px;
}
#feature:hover .flex-next, #whatsNew:hover .flex-next {
	opacity: 0.8;
	right: 5px;
}
#feature:hover .flex-prev, #whatsNew:hover .flex-prev {
	opacity: 0.8;
	left: 5px;
}
#feature:hover .flex-next:hover, #feature:hover .flex-prev:hover,
#whatsNew:hover .flex-next:hover, #whatsNew:hover .flex-prev:hover {
	opacity: 1;
}

/* 20140224: hide the "play" and "pause" at top left corner */
.flex-pauseplay {
	display:none;
}


.afeature, #whatsNew .slides{
	position: relative;
}

.afeaturetitle{
	position: absolute;
	bottom: 0;	
	width: 673px;
	text-align:right;
	padding:10px;
	background:rgba(0, 0, 0, .5);
	color:#FFF;
}

/* Text Only Banner */
.afeature .featureText{
	width:693px;
	height:214px;
	overflow:hidden;
	display:table;
	position:static;
	text-decoration:none;
}
.afeature .featureText strong{
	display:table-cell;
	vertical-align:middle;
	width:100%;
}
.afeature .featureText p{
	display:block;
	padding:0 20px;
	text-align:center;
	cursor:pointer;
}
.afeature .blendy{
	background-image:url(/images/feature/blendy.png);
	background-position:left bottom;
}
.afeature .glossy{
	background-image:url(/images/feature/glossy.png);
	background-position:left top;
}
.afeature .featureText span{
	/* move to p-tag */
}

/* =================================================================================================
	LOOKING FOR (HOMEPAGE)
================================================================================================= */
#lookingFor{
	padding:0;
	width:455px;
	height:59px;
	text-indent:-9999px;
}



/* =================================================================================================
	CLUSTERS (HOMEPAGE)
================================================================================================= */
#clusters{
	width:455px;
	padding-bottom:5px;
	float:left;
}
#cluster1st{
	width:227px;
	float:left;
}
#cluster2nd{
	width:228px;
	float:right;
}
.clusterItem{
	background-position:10px center;
	background-repeat:no-repeat;
}
#cluster1st .clusterItem{
	margin-left:10px;
}
#cluster2nd .clusterItem{
	margin-right:10px;
}
.clusterItem h3{
	background-position:10px center;
	background-repeat:no-repeat;
}


.clusterLink{
	line-height:1;
	width:217px;
	height:55px;
	overflow:hidden;
	display:table;
	position:static;
	border-bottom-width:1px;
	border-bottom-style:solid;
}





.last .clusterLink{
	border:none;
}
.clusterName{
	display:table-cell;
	vertical-align:middle;
	width:100%;
}
.clusterName span{
	display:block;
	padding:0 30px 0 50px;
	font-weight:bold;
}
.clusterName span.hover{
	text-decoration:underline;
	cursor:pointer;
}
.clusterTooltipContainer{
	display:none;
}
.clusterTooltip{
	line-height:1.5;
	width:235px;
	min-height:30px;
	padding-top:14px;
	background-repeat:no-repeat;
	background-color:#FFF;
}
.clusterTooltip div{
	padding:10px;
}



/* =================================================================================================
	FEATURED COLUMNS (HOMEPAGE)
================================================================================================= */
#featuredColumns{
	padding-top:20px;
	padding-bottom:20px;
}
.featuredColumn h2{
	height:2.5em;
	font-weight:bold;
	line-height:2.5em;
	padding-left:10px;
}
.featuredColumn li{
	padding-top:15px;
	font-weight:bold;
}
.featuredColumn li a{
	padding-left:30px;
	padding-right:15px;
	line-height:1.2;
	display:block;
}


/* =================================================================================================
	EXTRA (MULTIMEDIA / MOBILE APPS)
================================================================================================= */
#extra{
	width:217px;
	margin-left:10px;
	float:left;
}
#extra a.ui-accordion-header{
	display:block;
	text-decoration:none;
}
#extra h2{
	font-weight:bold;
	line-height:1;
	padding:.75em 10px;
}
#multimedia p {
	padding:1em 5px;
}
/* 20140625 add wrapper after add jquery.ui css */
/* #hkGallery, #extra ul{  */
#wrapper #hkGallery, #wrapper #extra ul{ 
	width:217px;
	height:37.5em;
	padding-bottom:20px;
}
#hkGallery .more{
	padding:1em 5px;
}
#hkInPictures{
	padding:5px;
}
#hkInVideos{
	padding:5px 5px 20px;
}
#extra li a{
	font-weight:bold;
	display:block;
	text-decoration:none;
	line-height:1.2;
}
#extra li .appIcon {
	display:inline-block;
	vertical-align:middle;
	width:32px;
	height:32px;
	margin:0;
	padding:11px 10px;
	cursor:pointer;
}
#extra li .appTitle {
	display:inline-block;
	vertical-align:middle;
	width:155px;
	margin:0;
	padding:20px 10px 20px 0;
	cursor:pointer;
}
#extra li img{
	width:32px;
	height:32px;
}
#extra li.more, #topOnline li.more{
	height:43px;
	line-height:43px;
}
#extra li.more a, #topOnline li.more a{
	display:inline;
	padding:0 20px 0 0;
}
#extra li.more a:hover, #extra li.more a:active, #extra li.more a:focus
#topOnline li.more a:hover, #topOnline li.more a:active, #topOnline li.more a:focus{
	text-decoration:underline;
}

/* =================================================================================================
	TOP GOVERNMENT FORM / TOP ONLINE SERVICES (HOMEPAGE)
================================================================================================= */
#topOnline{
	margin-left:11px;
	float:left;
	width:217px;
}
#topOnline a.ui-accordion-header{
	display:block;
	text-decoration:none;
}
#topOnline h2{
	font-weight:bold;
	line-height:1;
	padding:.75em 10px;
}
/* 20140625 add wrapper after add jquery.ui css */
/* #topOnline ul{  */
#wrapper #topOnline ul {  
	width:217px;
	height:37.5em;
	padding-bottom:20px;
}
#topOnline li a{
	font-weight:bold;
	display:block;
	padding:20px 10px 20px 50px;
	background-repeat:no-repeat;
	background-position:10px center;
	text-decoration:none;
	line-height:1.2;
}

/* =================================================================================================
	WHAT IS HK TALKING ABOUT (HOMEPAGE)
================================================================================================= */

#hkTalking{
	float:right;
	margin-right:10px;
	width:217px;



}
/* 20140625 add wrapper after add jquery.ui css */
/* #hkTalking ul{ */
#wrapper #hkTalking ul{
	min-height:40em;
	height:auto !important;
	height:40em;
	padding-bottom:20px;
}

/* =================================================================================================
	I WANT TO (HOMEPAGE)
================================================================================================= */
#homepage #iWantTo{
	margin:0 5px;
	width:228px;
	float:right;
	padding-bottom:20px;
}
#homepage #iWantTo h2{
	height:59px;
	text-indent:-9999px;
}
#homepage #iWantTo ul{
	margin:0 10px;
	padding:0;
}
#homepage #iWantTo li{
	border-bottom-width:1px;
	border-bottom-style:solid;
	line-height:1.2;
}
#homepage #iWantTo li.last{
	border:none;
}
#homepage #iWantTo li a{
	padding:12px 24px 12px 12px;
	font-weight:bold;
	display:block;
	text-decoration:none;
}
#homepage #iWantTo li a:hover, #homepage #iWantTo li a:active, #homepage #iWantTo li a:focus{
	text-decoration:underline;
}


/* =================================================================================================
	TOP STORIES (SIDEBAR)
================================================================================================= */
#sidebar #topStories{
	margin:0;
}
#topStories h2{
	width:277px;
	height:59px;
	text-indent:-9999px;
	margin-bottom:8px;
}
#topStories ul{
	margin:0 19px 10px 18px;
}
#topStories ul p{
	line-height:1.5;
}
#topStories ul li{
	border-bottom-width:1px;
	border-bottom-style:solid;
}
#topStories ul li.last{
	border-bottom:0;
}
#topStories ul a:hover, #topStories ul a:active, #topStories ul a:focus{
	text-decoration:none;
}
#topStories ul a{
	padding:5px;
	display:block;
}
#topStories ul a.thumbnail{
	width:240px;
	padding:0;
}
#topStories ul a.thumbnail img{
	display:inline-block;
	vertical-align:middle;
	width:58px;
	height:58px;
}
#topStories ul a.thumbnail span{
	display:inline-block;
	vertical-align:middle;
	width:172px;
	padding:5px;
}


/* =================================================================================================
	SINGLE MENU (SIDEBAR)
================================================================================================= */

/* 20150707: add for fix GovHK Quiz */
.singleList,
.singleMenu {
	display:block;
	float:none;
	clear:both;
}



.singleMenuHeader{
	display:block;
	text-decoration:none !important;
}
.singleMenu h2{
	/* 20131231: changed for multilines */
	font-weight:bold;
	padding:10px 25px 10px 30px;
}
.singleMenuList p{
	line-height:1.5;
}
/* 2012-08-01
** Forces font-size to be 12px
 	20120809: remove as handle multilines
*/
.singleMenuList li{
	border-bottom-width:1px;
	border-bottom-style:solid;
	/* font-size: 12px; */
	line-height:1.2;
}
.singleMenuList li.last{
	border-bottom:0;
}
.singleMenuList a:hover, .singleMenuList a:active, .singleMenuList a:focus{
	text-decoration:none;
}
.singleMenuList a, .singleMenuList p, .singleMenuList .more{
	padding:5px;
	display:block;
}
.singleMenuList a.thumbnail{
	float:left;
	width:240px;
	padding:0;
}
.singleMenuList a.thumbnail img{
	float:left;
	width:auto;
	height:auto;
	margin-right:5px;
}
.singleMenuList a.thumbnail span{
	display:block;
	padding:5px;
}
.singleMenuList .more a{
	display:inline;
}



/* =================================================================================================
	SINGLE LINK (SIDEBAR)
================================================================================================= */
.singleLink a{
	/* 20120808: singleLink: change for multilines
	height:31px;
	*/
	min-height:31px;
	line-height:31px;
	padding-left:30px;
	display:block
}


/* =================================================================================================
	ROTATING VEHICLE (SIDEBAR & HK GALLERY)
================================================================================================= */
#sidebar .vehicle div, #sidebar .vehicle div img{
	width:240px;
	height:139px;
}
#hkGallery .vehicle div, #hkGallery .vehicle div img{
	width:207px;
	height:124px;
}

#sidebar .vehicle .bannerText{
	width:240px;
	height:139px;
}
#hkGallery .vehicle .bannerText{
	width:207px;
	height:124px;
}
.vehicle{
	overflow:hidden;
}
.vehicle .bannerText{
	overflow:hidden;
	display:table;
	position:static;
	text-decoration:none;
}
.vehicle .bannerText strong{
	display:table-cell;
	vertical-align:middle;
	width:100%;
}
.vehicle .blendy{
	background-image:url(/images/banner/blendy.png);
	background-position:left bottom;
}
.vehicle .glossy{
	background-image:url(/images/banner/glossy.png);
	background-position:left top;
}
/* add p */
.vehicle .bannerText p{
	display:block;
	padding:0 10px;
	text-align:center;
	cursor:pointer;
}
.vehicle .bannerText span{
}


/* =================================================================================================
	WHAT'S NEW (CHECK IT OUT) 
================================================================================================= */
#whatsNew {
	width: 228px;
	height: 89px;
	float: right;
	margin: 5px;
}

#whatsNew h2{
	font-weight:bold;
	line-height:31px;
	min-height:31px; 	
	padding:0 10px;
}

#whatsNew .bannerText{
	width:228px;
	height:58px;
}
#whatsNew .bannerText{
	/* 20120827: if not remark */
	overflow:hidden; 
	display:table;
	position:static;
	text-decoration:none;
}
#whatsNew .bannerText strong{
	display:table-cell;
	vertical-align:middle;
	width:100%;
}
#whatsNew .blendy{
	background-image:url(/images/banner/blendy.png);
	background-position:left bottom;
}
#whatsNew .glossy{
	background-image:url(/images/banner/glossy.png);
	background-position:left top;
}
/* add p */
#whatsNew .bannerText p{
	display:block;
	padding:0 10px;
	text-align:center;
	cursor:pointer;
}

.shareIcons {
	display:block;
	
	/*
	note: cannot do this:
	float:left;
	clear:both;
	*/
	width:240px;
	padding:10px 0;
	text-align:center;		/* make img-icons center */
	border-bottom:1px solid;
}

.shareIcons ul, .shareIcons li {
	display:inline;
}

/* 20120823: image size is 25x25 
   space between images is 24
*/
.shareIcons img {
	padding:0px 12px; 	
	margin:0;
}

.shareIcons li:first-child img {
	padding:0px 12px 0px 0px;
}

.shareIcons li.last img {
	padding:0px 0px 0px 12px;
}
/* 20120827: whatsNew and shareIcons - end */

.vehicleControl{height:28px;}
.vcl, .vcr{display:block; width:20px; height:28px; float:left;}
.vcc{
	height:28px;
	float:left;
	text-align:center;
}
#sidebar .vcc{
	width:200px;
}
#hkGallery .vcc{
	width:167px;
}
.vind{
	width:10px;

	height:28px;
	display:inline-block;
}


/* =================================================================================================
	ACCORDION MENU (SIDEBAR)
================================================================================================= */
#sidebar .accordion a.ui-accordion-header{
	display:block;
	text-decoration:none;
}
#sidebar .accordion h2{
	font-weight:bold;
	padding:10px 20px;
}
#sidebar .accordion li a{
	display:block;
	font-weight:bold;
	padding:20px 35px 20px 20px;
	background-position:96% center;
	background-repeat:no-repeat;
	text-decoration:none;
	line-height:1.2;
}
#sidebar .accordion li.more{
	padding-right:0;
}
#sidebar .accordion li.more a{
	background-position:96% center !important;
}
#sidebar .accordion li.more a:hover,
#sidebar .accordion li.more a:active,
#sidebar .accordion li.more a:focus{
	text-decoration:underline;
}


/* =================================================================================================
	WEATHER (SIDEBAR): 20120828 move below sidebar
================================================================================================= */
#weather{
	width:240px;
}

/* Modified on 2012-07-27 */
#currentWeather {
	float:left;
	
	padding:10px 0 0 0;
}

/* inside "currentWeather" */
#weatherIcon{
	float:left;
	
	padding:0 0 8px 0;
	
	/*padding:10px 0; */
	
	/* height:33px; */
	/* 20120829: remark this for 2 icons
	width:105px;
	height:3.3em;
	position:relative;
	*/
}

/* 20121126 KC: fix second icon flash by make it 100% */
.wIcon2 #weather2Icons {
	width:240px;
}



/* Modified on 2012-07-27 */
#weatherIcon a{
	display:block;
	
	padding:0;
	margin:0;
	/* 20120829: remove width for 2 icons
	left:1px;
	bottom:0;
	*/
	
	/* combine */
    background: none;
	float:left;	
}

/* for weather: 2nd icons */
#secondIcon {
	position:relative;
	overflow:hidden;
	display:inline-block;
	white-space: nowrap;
}


/* inside "currentWeather" */
#weatherInfo{
	width:135px;
	float:right;
}
/* Modified on 2012-07-27 */
#weatherInfo p{
	display:block;
	line-height:1;
	
	padding-top:0;	/* 20120830 */
	padding-right:5px;
	
	/*
	font-size: 80%;
	*/
}

.wIcon2 #weatherInfo {
	/* 20121127: for 2 icons, a little bit padding-top to align the warning icons */
	padding-top:4px;
}


/* inside "currentWeather", "weatherInfo" */
#weatherTemp{
	text-align:right;
	
	/* combine below */
	display: block;
    padding: 5px 0px 2px;
}
#weatherTemp .figure{
	font-size:116.7%;
}

/* inside "currentWeather", "weatherInfo", "weatherTemp" */
.weatherFigures,#weatherUpdateTime{
	white-space:nowrap;
}

/*
.weatherFigures .figure:nth-child(4) {
	padding-left:5px;
}
*/


/* inside "currentWeather", "weatherInfo" */ 
#weatherForecast{
    display: block;
    padding: 0px; 
}

#weatherForecast a{
	display:block;
}


/* Modified on 2012-07-27 */
#currentWarning{
	/* padding:0px 10px; */
	/* 20120828: reduce for 2 icon plus temp and RH */
	padding:0px 8px;
}

/* 20121127: for 0 or 1 icon, (note:cannot set as default as it override "display:inline" */
.wIcon0 #currentWarning, 
.wIcon1 #currentWarning {
	float:left;	
}

/* 20121127: two icons, let temp and R.H follow it */
.wIcon2 #currentWarning {
	display:inline;
}

/* inside "weather" */
#currentWarning img{
	width:33px;
	height:33px;
	/* 20120828: try remove */
	/* margin-right:5px; */
}

/* When 2 icons, additional style when "weatherInfo" move into "currentWarning" */
#currentWarning #weatherInfo {
	padding-top:5px;
	padding-bottom:5px;
}


/* hide error by default */
/* 20131217: comment it
#weatherError, #apiError{
	display:none;
}
*/

/* 20120830: for weather links */
#weatherError a {
	border-width:1px 0 0 0;
	border-style:solid;
	border-color:#fbf8f7;	
}
 
#currentWarning a {
    background: none;
	float:left;
}


/* =================================================================================================
	AQHI (SIDEBAR): 20131220
================================================================================================= */

/* hide title in environment cluster */
.environment .aqhi_title {
	display: none;
}

p.aqhi_info {
	padding-bottom:0;
}

.aqhi_range {
	text-align: center;
}

.aqhi_to {
	display: inline-block;
	text-align: center;
	width: 20px;
}

.aqhi_value {
	border: 1px solid black;
	display: inline-block;
	text-align: left;
	width: 4.5em;
	padding: 2px 2px 2px 22px;
	background-position:2px center;
	background-repeat: no-repeat;
}

.aqhi_low 		{background-image: url(/images/weather/aqhi/low.png);}
.aqhi_moderate 	{background-image: url(/images/weather/aqhi/moderate.png);}
.aqhi_high 		{background-image: url(/images/weather/aqhi/high.png);}
.aqhi_very_high {background-image: url(/images/weather/aqhi/very_high.png);}
.aqhi_serious	{background-image: url(/images/weather/aqhi/serious.png);}

/* =================================================================================================
	Weather near Date (20130531)
================================================================================================= */
/*

*/

/* general div setting for "todayWeather" and inside div-s */
#todayWeather, #todayWeather div {
	display:block; float:left; 
}

/* padding or margin, left or right  */
#today { 
	padding-right:15px;
	/* pad right */
}


#tempTop {
	padding-left:8px;
}

/* only margin-top */
#weatherWarningTop, #weatherCurrentTop {
	margin-top:-5px;
}

/* pad right for each img */
#weatherCurrentTop img {
	padding-right:5px;
}

/* little pad for warning icons */
#weatherWarningTop img {
	padding-right:2px;
}

/* "More" Text:  pad left */
#weatherTextTop, #trafficTextTop {
	display:block; float:left; 
	padding-left:15px;
}

/* note: no style for 1 icon */
.weatherBcIcon1 {
}

/* for 2 icons, space on right will be more */
.weatherBcIcon2 {
	width:90px; 
}

/* 20140127: added */
.feedLinkList {
	display:none;
}



/* =================================================================================================
	KEYPAGES (SMART MENU / ARTICLE)
================================================================================================= */
#pageHeader{
	line-height:1.2;
	border-left-width:30px;
	border-left-style:solid;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:50px; /*for page header icon*/
	background-position:7px center;
	background-repeat:no-repeat;
}
.about #pageHeader{
	padding-left:10px; /*no page header icon*/

}
#pageHeader h1{
	display:inline;
}


/* =================================================================================================
	BREADCRUMB
================================================================================================= */
#breadCrumb {
	padding:10px;
	line-height:1.5;
}
/* 20110228: Home Icons */
#breadCrumbHome {
	display:block;
	padding-left:20px;
	padding-right:3px;
	float:left;
	font-weight:bold;
	color:#990000;
	background-image:url(/images/breadcrumb/home.png);
	background-repeat:no-repeat;
	background-position:left center;
}


/* =================================================================================================
	I WANT TO HEADER (SMART MENU PAGE)
================================================================================================= */
#smartMenuPage #iWantTo h2{
	float:left;
	width:206px;
	height:125px;
	text-indent:-9999px;
}
#smartMenuPage #iWantTo div{
	float:left;
	width:417px;
	padding:10px 20px 10px 50px;
}
#smartMenuPage #iWantTo ul{
	margin-top:10px;
}
#smartMenuPage #iWantTo li{
	margin:10px 0;
	font-weight:bold;
}
#smartMenuPage #iWantTo li a{
	padding-left:20px;
	display:block;
}


/* =================================================================================================
	SMART MENU
================================================================================================= */
#smartMenuContainer{
	padding-top:18px;
}
#smartMenu{
	float:left;
	width:220px;
	height:100%;
	margin-left:3px;
	padding-top:8px;
	/* 20101101: topLegends */
	margin-bottom:20px;
}
#smartMenu ul{
	padding-bottom:5px;
}
#smartMenu li{
	font-weight:bold;
}
#smartMenu li a{
	display:block;
	padding:20px 40px 20px 35px;
	text-decoration:none;
}
/*active state*/
.sec1 #smartMenu li.sec1 a, .sec2 #smartMenu li.sec2 a,
.sec3 #smartMenu li.sec3 a, .sec4 #smartMenu li.sec4 a,
.sec5 #smartMenu li.sec5 a, .sec6 #smartMenu li.sec6 a,
.sec7 #smartMenu li.sec7 a, .sec8 #smartMenu li.sec8 a,
.sec9 #smartMenu li.sec9 a, .sec10 #smartMenu li.sec10 a,


.sec11 #smartMenu li.sec11 a, .sec12 #smartMenu li.sec12 a,
#smartMenu li.active a
{
	margin-left:8px;
	border-left-width:17px;
	border-left-style:solid;
	padding-left:10px;
}
#smartMenu li.active a{
	cursor:default;
}
#smartContent{
	height:100%;
	float:right;
	width:445px;
	padding-right:10px;
	padding-top:5px;
	/* 20101101: topLegends */
	padding-bottom:20px;
}
#smartContent li{
	margin-bottom:25px;
}
/* #smartContent li:last-child{
	margin-bottom:0;
} */
#smartContent li.last{
	margin-bottom:0;
}
#smartContent h3, #smartContent h4{
	line-height:1.3;
}
#smartContent p{
	line-height:1.3;
}
#smartContent ul ul{
	padding:20px;
}
#smartContent .subCategories a:hover, #smartContent .subCategories a:active, #smartContent .subCategories a:focus,
#smartContent .subCategories h3:hover, #smartContent .subCategories h3:active, #smartContent .subCategories h3:focus,
#smartContent .subCategories h4:hover, #smartContent .subCategories h4:active, #smartContent .subCategories h4:focus{
	text-decoration:underline;
}
#smartContent .clustersLegend{
	padding:0 !important;
	margin:10px 0 !important;
	background-color:transparent !important;
}
#smartContent .clustersLegend span{
	display:block;
	width:14px;
	height:14px;
	float:left;
	margin:0 5px 0 0;
	padding:0;
	text-indent:-9999px;
}
#smartContent .contentItems strong a{
	line-height:1.2;
}
#smartMenuPage #legends{
	text-align:center;
	/* 20101101: topLegends */
	/* margin:50px auto; */
	margin:25px auto 0px auto;
}
#smartMenuPage #legends .clustersLegend{
	display:inline;
}
#smartMenuPage #legends .clustersLegend li{
	display:inline;
	padding-left:18px;
	padding-bottom:5px;
	margin-right:15px;
	line-height:1.5;
}






/* =================================================================================================
	TOP FAQ
================================================================================================= */
#topFAQ h2{
	float:left;
	width:203px;
	height:125px;
	text-indent:-9999px;
}
#topFAQ div{
	float:left;
	width:470px;
	padding:10px 20px 10px 0;
}
#topFAQ ul{
	margin-top:10px;
}
#topFAQ li{
	margin:10px 0;
	font-weight:bold;
}
#topFAQ li a{
	display:block;
	margin-left:45px;
}


/* =================================================================================================
	FAQ PAGE
================================================================================================= */
#faqContainer{
	padding-top:15px;
}
#tabContent #faqContainer{
	padding-top:0;
}

#faq{line-height:1.2}
.faq li{
	margin-bottom:20px;
}
.faqNo{
	display:block;
	float:left;
	width:45px;
}
.faqQuestion{
	margin-left:45px;
}
.faqQuestion:hover, .faqQuestion:active, .faqQuestion:focus{
	text-decoration:underline;
}
.faqAnswer{
	margin:15px 0 0 45px;
	padding:10px;
}
.faqAnswer p{
	line-height:1.5;
}
.faqAnswer p, .faqAnswer h3, .faqAnswer table{
	margin-bottom:1em;
}
/* 20120720: move to govhk.js, as it is CSS3
.faqAnswer p{
	word-wrap:break-word;
} 
*/
.faqAnswer a:link, .faqAnswer a:visited{
	text-decoration:underline;
}
.faqAnswer a:hover, .faqAnswer a:active, .faqAnswer a:focus{
	text-decoration:none;
}
.faqAnswer ul, .faqAnswer ol{
	list-style-position:outside;
	margin:1.5em;
}
.faq .faqAnswer li{
	margin-bottom:1em;
	list-style:disc;
	line-height:1.5;
}
.faq .faqAnswer ul li{list-style:disc;}
.faq .faqAnswer ul li ul li{list-style:disc;}
.faq .faqAnswer ul li ul li ul li{list-style:disc;}
.faq .faqAnswer ol li{list-style:decimal;}
.faq .faqAnswer ol li ol li{list-style:lower-alpha;}
.faq .faqAnswer ol li ol li ol li{list-style:lower-roman;}

.expandButton{
	margin:10px 0;
	float:right;
}


/* =================================================================================================
	VERTICAL TAB MENU
================================================================================================= */
#tabMenuContainer{
	padding-top:18px;
}
#tabMenu{
	float:left;
	width:220px;
	height:100%;
	margin-left:3px;
	padding-top:8px;
}
#tabMenu ul{
	padding-bottom:5px;
}
#tabMenu li{
	font-weight:bold;
}
#tabMenu li a{
	display:block;
	padding:20px 40px 20px 35px;
	text-decoration:none;
}
/*active state*/
#tabMenu li.active a,
.sub1 .individual #tabMenu li.sub1 a,
.sub2 .individual #tabMenu li.sub2 a,
.sub3 .individual #tabMenu li.sub3 a,
.sub4 .individual #tabMenu li.sub4 a,
.sub5 .individual #tabMenu li.sub5 a,
.sub6 .individual #tabMenu li.sub6 a,
.sub7 .individual #tabMenu li.sub7 a,
.sub8 .individual #tabMenu li.sub8 a,
.sub9 .individual #tabMenu li.sub9 a,
.sub10 .individual #tabMenu li.sub10 a
{
	margin-left:8px;
	border-left-width:17px;
	border-left-style:solid;
	padding-left:10px;
}
.single #tabMenu li.active a{
	cursor:default;
}
#tabContent{
	height:100%;
	float:right;
	padding:5px 10px 0;
}
.sidebar #tabContent{
	width:450px;
}
.page #tabContent{
	width:727px;
}



/* =================================================================================================
	MAIN CONTENT AREA
================================================================================================= */
#pagePhoto{
	height:125px;
	overflow:hidden;
}
/*Fixed the image size*/
.page #pagePhoto img{
	width:970px;
	height:125px;
}
.sidebar #pagePhoto img{
	width:693px;
	height:125px;
}
#articleContainer{
	padding-top:15px;
}
#tabContent #articleContainer{
	padding-top:0;
}
#article{
	line-height:1.5;
}
.topdown #article, .topdown #faq, .topdown #sitemap{
	padding:0 10px 5em 10px;
}
.sidebar .abreast #article, .sidebar .abreast #faq{
	width:470px;
	float:right;
	padding:0 20px 5em 20px;
	overflow:hidden;
}
.page .abreast #article, .page .abreast #faq{
	width:747px;
	float:right;
	padding:0 20px 5em 20px;
	overflow:hidden;
}



/* =================================================================================================
	CONTENT SECTIONS
================================================================================================= */
.content h3{
	border-bottom-width:1px;
	border-bottom-style:solid;
	padding:5px 0;
}
.content h3 a{
	display:block;
	text-decoration:none;
	margin:-5px -2px;
	padding:5px 2px;
}
.content h4 a{
	text-decoration:none !important;
}
.content, .content p, .content h3, .content table, .contentLink{
	margin-bottom:1em;
}
/* 20130124: GovHK video: featured article - "normal" content and content link */
.content, .contentLink, .specialcontent {
	width:100%;	/* 20130205 fix ilearnathome, mobile set at govhklite.css */
	display:block;
	float:left;
	clear:both;
}

/* 20130128: for collapse menu, float:none */
.collapsibleContent .content {
	float:none;
	clear:none;
}

/* 20130726 fix multilang page button on ff22 */
.multilangroot .content {
	float:none;
}


/* 20130118: GovHK Video: override last item margin-bottom */
.content p.last {
	margin-bottom:0;
}


.content td p{
	margin-bottom:0;
}
.content p{
	line-height:1.5;
}
.content ul, .content ol{
	list-style-position:outside;
	margin:1em;
}
.content li{
	display:list-item;
	margin-left:1.5em;
}
.content th{
	padding:5px;
	border-bottom-width:1px;
	border-style:solid;
}
.content td{
	padding:5px;
}
.content blockquote{
	padding-left:2em;
}
/* 20101101: previous code
.content ul li{list-style:disc;}
.content ul li ul li{list-style:disc;}
.content ul li ul li ul li{list-style:disc;}
.content ol li{list-style:decimal;}
.content ol li ol li{list-style:lower-alpha;}
.content ol li ol li ol li{list-style:lower-roman;}
*/

/* 20101101: bullet point for ie6 */
.content ol li{list-style:decimal;}
.content ul li{list-style:disc;}
.content ol ol li{list-style:lower-alpha;}
.content ol ul li{list-style:disc;}
.content ol ol ol li{list-style:lower-roman;}
.content ol ol ul li{list-style:disc;}
.content ol ol ol ol li{list-style:lower-roman;}
.content ol ol ol ul li{list-style:disc;}
/* 20101101: bullet point for ie7+ and FF */
.content ol>li {list-style-type:decimal; }
.content ul>li {list-style-type:disc; }
.content ol ol>li {list-style-type:lower-alpha; }
.content ol ol ol>li {list-style-type:lower-roman; }

.collapsibleContent .content td{
	border-bottom-width:1px;
	border-style:solid;
}

/*Overided general holiday style*/
.about .content .desc {width:50% !important;}
.about .content .date {width:25% !important;}
.about .content .weekday {width:25% !important;}

/*temp. hide all GIH buttons*/
.mapButtons{display:none;}


/* =================================================================================================
	Video for Featured Articles and About-Multimedia
================================================================================================= */


/* 20121214: 1em top and bottom margin for videoList */
.contentLink li.videoList {
	display:block;
	
	/* old: 1 video 1 line: do not set "float" and "clear" */
	float:left;
	clear:both;
	width:100%;
}

/* videoTypes styles */
.videoType1,
.videoType2  {
	display:block;
	width:100%;
	float:left;
	clear:both;	
	margin:5px 0; 
}



/* common: default for "videoType1" (1 row 1 cell), also for "videoType4" */
.videoBlock {
	display:block;
	/* margin:1em 0; 20121130 */
	margin:5px 5px 5px 0;
	padding:5px;
	/* same vertical margin between content and section link 
		note: margin between videos is also 1em
	*/
	
	float:left;clear:both;
	width:100%;
}

/* === video Thumbnail image: common for all videoType === */
.videoTitle {display:block;clear:both;}

.videoThumb {
	position:relative;

	display:block;
	padding:0;
	border:0;
	margin:0;
	/* fix it */
	width:139px;
	height:107px;
}

/* 20140410: no use
.videoLink {}
*/

.videoImage {
	/* resize to below */
	width:139px;
	height:107px;
}

.videoDurationBg {
    position: absolute;
	display: inline-block;

	top:73px;
	left:0;
	
	padding:0;
	width:139px;	/* 139px total */
	height:34px;	/* top+height=107 */
	
    background-color: #8C3D1E;
	
	/* opacity:0.65; 20130408: move to govhk.js */ 

}

.videoDurationFg {
    position: absolute;
	display: inline-block;

	top:73px;
	left:0;
	
	padding: 0 3px;
	width:133px;	/* 139px total */
	height:34px;	/* 107px total */
	
	color:#ffffff;	/* white */
	
    font-size: 15px; /* 20121130: fix the font size (no enlarge) */
    /* font-weight: bold; */
	line-height: 34px;	/* equal height */

	background-image:url(/images/video/play_icon.png);
	background-position:96px -7px;	
 	background-repeat:no-repeat;
	
	/* opacity:1; */
}	




/* ====== videoType1 ====== */
.videoType1 .videoBlock { 
	width:460px; 
	/* note: desktop width
	   (A) block width: 460px
	   (B) thumbnail image: 139px
	   (C) text width: 300px 
	*/
} 

/* left side container */
.videoType1 .videoThumb  { 
	float:left;  clear:left;  
} 

/* right side container  */
.videoType1 .videoRight  { 
	display:block;
	float:right; 
	width:300px; 
} 

.videoType1 .videoTitle {
	display:block;
	float:left;
	clear:both;
	width:300px; 
	padding-bottom:5px;
} 

/* 20140411: now it is fix width image */
.videoType1 .videoTrans,
.videoType1 .videoAudioDesc  { 
	display:block;
	float:left;
} 

/* 20px space between 2 images */
.videoType1 .videoAudioDesc   { 
	padding-right:20px;
}

/* ====== videoType1 ====== */
/* about-multimedia page (1 row 4 cells) */
.videoType4 .videoBlock { 
	float:left; 
	width:22%; 
	clear:none;
}

/* linear Thumb and Right */
.videoType4 .videoThumb  , 
.videoType4 .videoRight { 
	width:148px;
	display:block;
	float:left;
	clear:both;
} 

/* linear element */
.videoType4 .videoTitle,
.videoType4 .videoAudioDesc,
.videoType4 .videoTrans,
.videoType4 .providedBy  {
	display:block;
	float:left;
	clear:both; 
	padding-right:0;
}

/* reduce provideBy size */
.videoType4 .providedBy  {
	font-style:italic;
	font-size:86%;
	padding-top:5px;
}


/* =================================================================================================
	ARTICLE MENU
================================================================================================= */
.topdown #articleMenu{
	padding:0 10px 2em 10px;

	/* 20130128 fix form icons shift right (topdown only) */
	display:block;
	width:100%; 
	float:left;
	clear:both;
}
.abreast #articleMenu{
	width:173px;
	float:right;
	padding-left:10px;
}
.abreast #articleMenu #iWantTo h2{
	width:173px;
}
.topdown #articleMenu #iWantTo li{
	display:block;
	float:left;
	margin-right:10px;
}

/* 20110228 add iWantTo-li */
.topdown #articleMenu #iWantTo li{
	display:block;
	float:left;
	margin-right:10px;
}
#articleMenu #iWantTo{
	margin-top:5px;
	margin-bottom:20px;
}
#articleMenu #iWantTo h2{
	height:37px;
	text-indent:-9999px;
}
/* 20110228 add iWantTo-ul */
#articleMenu #iWantTo ul{
	display:block;
	float:left;
	clear:both;
	visibility:hidden;
}
#articleMenu #iWantTo li{
	/* 20110228 remark
	padding:3px 0;
	*/
	/* 20110228 added */
	width:100%;
	margin:0;
	padding:0;
	display:block;
	float:left;
	clear:both;
}
/* 20110228 add abreast-li */
.abreast #articleMenu #iWantTo li {
	border-bottom:1px solid #ebebeb;
}

/* 20110228: add (default:abreast) share change from anchor to id (span or anchor) */
#articleMenu #iWantTo li #feedback,
#articleMenu #iWantTo li #share {
	display:block;
	float:left;
	clear:both;
	margin:0;
	margin:3px 0;
	padding:6px 15px 6px 28px; 	/* for show background image */
}
/* 20110228: add: override default padding for topdown  */
.topdown #articleMenu #iWantTo li #share {
	padding:6px 5px 6px 28px;
}
#otherArticle h2{
	height:23px;
	line-height:23px;
	padding-left:10px;
}
#otherArticle li a{
	display:block;
	padding:5px 10px;
}
/* 20110228: remark: #shareContainer, line-height */
#feedbackContainer{
	line-height:1.5;
}
/* 20110228: remark #shareContainer strong, #shareContainer ul, style */
#feedbackContainer strong, #feedbackContainer p{
	display:block;
	padding:5px;
}

/* 20110228: add for shareContainer style */
.abreast #iWantTo #shareContainer {
	display:block;
	width:125px;	/* enough width for 5 icons */
	float:left;
	padding:0 0 5px 28px; /* space for bottom and left */
	margin:0;
	clear:both;
}
.topdown #iWantTo #shareContainer {
	display:block;
	width:125px;	/* enough width for 5 icons */
	float:left;
	padding:7px 0 0px 0px; /* space for bottom and left */
	margin:0;
	clear:right;
}
#iWantTo #shareContainer a{
	width:auto;
	padding:0px 5px 0px 0px;
	margin:0;
	display:block;
	float:left;
	clear:none;
}


/* =================================================================================================
	GOVERNMENT AGENCIES
================================================================================================= */
#govAgencyHeader{
	padding:10px;
}
.govAgencyHeaderItem{
	padding-left:20px;
	font-weight:bold;
	margin-bottom:20px;
	width:auto;
}
.govAgencyHeaderItem p{
	line-height:1.2;
}
#govAgencyAlphabeticalList{
	margin-top:10px;
}
#govAgencyAlphabeticalList li{
	float:left;
	margin:0 .2em .2em 0;
}
#govAgencyAlphabeticalList a {
	display:block;
	text-align:center;
	min-width:1em;
	padding:.2em;
	text-decoration:none;
}
#browseOrganisational{
	float:left;
	margin-right:.5em;
}


.govAgencyAlphabetical h3{
	padding:10px 0;
}
.govAgencyAlphabetical li a{
	text-decoration:none;
	padding:8px 10px;
	display:block;
	font-weight:bold;
	border-top-width:1px;
	border-top-style:solid;
}
.govAgencyAlphabetical ul ul{
	border-top-width:1px;
	border-top-style:solid;
}
.govAgencyAlphabetical ul ul ul{
	margin-left:2em;
	border:none;
}
.govAgencyAlphabetical li li{
	display:list-item;
	list-style:disc inside;
	margin:0 1em;
	padding:10px;
	border-bottom-width:1px;
	border-bottom-style:solid;
}
/* .govAgencyAlphabetical li li:last-child{
	border:none;
} */
.govAgencyAlphabetical li li.last{
	border:none;
}
.govAgencyAlphabetical li li a{
	display:inline;
	border:none;
	padding:0;
	font-weight:normal;
}
.govAgencyAlphabetical li li a:hover,
.govAgencyAlphabetical li li a:active,
.govAgencyAlphabetical li li a:focus{
	text-decoration:underline;
}
.govAgencyAlphabetical li li li{
	border:none;
	margin:0;
	padding:0;
}
.govAgencyOrganisational ul ul ul{
	margin-left:2em;
}
.govAgencyOrganisational li li{
	display:list-item;
	list-style:disc inside;
	margin:0;
	padding:10px;
	border-bottom-width:1px;
	border-bottom-style:solid;
}
/* .govAgencyOrganisational li li:last-child{
	border:none;
} */
.govAgencyOrganisational li li.last{
	border:none;
}
.govAgencyOrganisational li li a{
	display:inline;
	border:none;
	padding:0;
	font-weight:normal;
}
.govAgencyOrganisational li li li{
	border:none;
	margin:0;
	padding:0;
}




/* =================================================================================================
	SITE MAP
================================================================================================= */
#sitemap{
	line-height:1.5;
}
#sitemap .usergroups h3 a {
	display:block;
	padding:10px 10px 10px 20px;
	text-decoration:none;
	border-bottom-width:1px;
	border-bottom-style:solid;
}
#sitemap .clusterHeader{
	display:block;
	text-decoration:none;
}
#sitemap .clusters {
	padding-bottom:10px;
}
#sitemap .clusters > li{
	margin:0 10px;
	border-bottom-width:1px;
	border-bottom-style:solid;
}
/* #sitemap .clusters li:last-child{
	border-bottom:none;
} */
#sitemap .clusters li.last{
	border-bottom:none;
}
#sitemap .clusters li h4.collapsible{
	padding:10px;
}
#sitemap .clusters li h4 a{
	display:block;
	padding:10px;
	text-decoration:none;
}
#sitemap .clusters li h4.collapsible a{
	padding:0;
}
#sitemap .subcategories{
	border-top-width:1px;
	border-top-style:solid;
}
#sitemap .subcategories ul{
	margin:0 1em;
}
#sitemap .subcategories > li{
	padding:10px;
	border-bottom-width:1px;
	border-bottom-style:solid;
}
/* #sitemap .subcategories li:last-child{
	border-bottom:none;
} */
#sitemap .subcategories li.last{
	border-bottom:none;
}
#sitemap .subcategories li{
	display:list-item;
	list-style:disc inside;
	margin:0 20px;
}


/* =================================================================================================
	RSS
================================================================================================= */
.rssList {
	width:100%;

}
.rssList tr{
	border-bottom-width:1px;
	border-bottom-style:solid;
}
/* .rssList tr:last-child{
	border:none;
} */
.rssList tr.last{
	border:none;
}
.rssList .subject{width:30%}
.rssList .url{width:60%}
.rssList .subscribe{width:10%;text-align:center;}
.rssList .rss{
	display:block;
	width:21px;
	height:21px;
	margin:auto;
	text-indent:-9999px;
}

/* =================================================================================================
	SOCIAL MEDIA
================================================================================================= */
.about .content .blog{
	display:block;
	margin:auto 0;
	width:44px;
	height:15px;
	text-indent:-9999px;
	background:url(/images/icons/socialmedia/blog.gif) no-repeat 0 0;
}
.about .content .blog:hover, .about .content .blog:focus, .about .content .blog:active{
	background-position:-44px 0;
}
.about .content .facebook{
	display:block;
	margin:auto 0;
	width:16px;
	height:16px;
	text-indent:-9999px;
	background:url(/images/icons/socialmedia/facebook.gif) no-repeat 0 0;
}
.about .content .facebook:hover, .about .content .facebook:focus, .about .content .facebook:active{
	background-position:-16px 0;
}
/* 20120720: move opacity to govhk.js, as it is CSS3
.about .content table a:hover img, .about .content table a:active img, .about .content table a:focus img{
	// opacity:0.5;
} */


/* =================================================================================================
	ONLINE SERVICES / E-FORMS
================================================================================================= */
#findOnlineServices h2, #findEForms h2{
	float:left;
	width:250px;
	height:125px;
	text-indent:-9999px;
}
#findOnlineServicesContainer, #findEFormsContainer{
	float:left;
	width:403px;
	padding:10px 20px 10px 20px;
	font-weight:bold;
}
#eFormsTags{
	padding-left:20px;
	margin-bottom:1em;
	width:383px;
}
#eFormsTags .tagCloudLabel{
	margin-left:-20px;
	padding-left:20px;
	background-position:left .5em;
	background-repeat:no-repeat;
}
#eFormsTags span{
	margin-right:1em;
	text-transform:capitalize;
	display:block;float:left;
	line-height:26px;
}
/* 20141204: fix keyword line-height */
.font-size-larger #eFormsTags span{
	line-height:31px;
}
.font-size-largest #eFormsTags span{
	line-height:36px;
}

#eFormsTags span a{
	white-space:nowrap;
}
#eFormsTags .tag-ex-large{
	font-size: 160%;
}
#eFormsTags .tag-large{
	font-size: 120%;
}
/* 20101101: topLegends :override margin-bottom for "content" */
.forms .content2 {
	margin-bottom: 2em;
}
.findOnlineServeicesHeader, .findEFormsHeader{
	line-height:1.2;
	padding-left:20px;
	margin-bottom:1em;
}
.onlineFullList li{
	border-bottom-width:1px;
	border-bottom-style:solid;
	padding:5px 0;
	position:relative;
}
/* .onlineFullList li:last-child{
	border:none;
} */
.onlineFullList li.last{
	border:none;
}
.onlineFullList li div{
	display:block;
	float:left;
	margin:0 5px;
}
.onlineFullList li span{
	display:list-item;
	list-style:disc outside;
	margin-left:1.5em;
}
.onlineFullList .eformsTitle{
	display:inline;
	margin-left:0;
}
.onlineFullList .eformsTitle a{
	/*display:block;*/
	line-height:1;
	padding:0 0 .2em 20px;
}
.tc .onlineFullList .eformsTitle a, .sc .onlineFullList .eformsTitle a{
	padding-top:.1em;
}
.onlineFullList .eformsNotes {
	display:block;
	margin:.5em 0;
}

/* 20141231: add osKeyword */
.onlineFullList .eformsKeywords,
.onlineFullList .onlineServicesKeywords {
	display:none;
}
/*.onlineFullList .eformsNotes a{
	margin-right:1em;
}
.onlineFullList li .eformsOthers{
	display:inline;
	float:left;
	margin-left:1.5em;
	margin-right:.5em;
	padding-left:16px;
	background:url(/css/theme/explorer/images/widget/arrow.gif) no-repeat left center;
}
.onlineFullList .eformsDetails{
	float:left;
	margin:0;
}
.onlineFullList .eformsNotes{
	display:block;
	float:left;
	width:150px;
	text-align:right;

	padding:0 !important;
}
.onlineFullList .eformsTitle a{
	padding-right:23px;
}
.onlineFullList .eformsNotes a{
	line-height:1.5;
}
.onlineFullList .eformsKeywords{
	display:none;
}
.onlineFullList .eformsRelated{
	display:inline;
	margin-left:0;
}*/

/*Ajax Search*/
.onlineFullList li span.highlight{
	display:inline;
	margin:0;
}

/*Max width of the item*/
.onlineFullList li .eformsDetails{
	width:483px;
}
.collapsibleContent .collapsibleContent .onlineFullList li .eformsDetails{
	width:443px;
}


/*Legends of each item*/
.onlineFullList li .onlineServicesLegend{
	display:block;
	width:auto;
	max-width:88px;
	float:right;
}
.onlineFullList li .eformsOthers{
	display:block;
	width:auto;
	max-width:120px;
	float:right;
}
.onlineFullList li .eformsFormats{
	display:block;
	margin:0;
	padding-left:20px;
	background-position:left .4em;
	background-repeat:no-repeat;
}
.onlineFullList li .eFormsLegend{
	display:block;
	width:111px;
	float:left;
	margin-left:20px;
}
.onlineFullList li .onlineServicesLegend li, .onlineFullList li .eFormsLegend a{
	display:block;
	width:17px;
	height:17px;
	padding:0;
	margin:.2em 5px 0 0;
	border:none;
	float:left;
	text-indent:-9999px;
}
.onlineFullList li .eFormsLegend a{
	margin-right:20px;
}
.onlineFullList li .onlineServicesLegend li a, .onlineFullList li .eFormsLegend a{
	display:block;
}

/*Legends at the bottom*/
#legends {
	/* 201011101: for easysignon */
	/* margin:10px 0; */
	margin:10px;
}

/* 20130128 fix form icons shift right */
#legends, #tabs, #tabsPage {
	display:block;
	width:100%; 
	float:left;
	clear:both;
}

/* 20130410 for rss page, firefox version 18 */
.collapsibleMenu  {
 	/* display:block; */
	width:100%;
	float:left;
	clear:both;
}


#legends p{
	margin:.5em 0;
}
#legends .onlineServicesLegend li{
	display:inline;
	padding-left:21px;
	padding-top:2px;
	padding-bottom:3px;
	margin-right:15px;
	line-height:2;
}
/* 20101101: easysignon: Legend is a long sentence */
#legends .onlineServicesLegend li.easysignon{
	display:block;
	clear:left;
	padding-right:10px;
}
#legends .eFormsLegend li{
	display:block;
	float:left;
	width:147px;
	height:2em;
	padding-left:21px;
	padding-top:2px;
	padding-bottom:3px;
	margin-bottom:10px;
	line-height:1;
}


/* =================================================================================================
	PERSONALISATION
================================================================================================= */
#styles div{
	visibility:hidden
}
#styleSelector{
	float:left;
	width:240px;
	padding:30px 0 30px 40px;
}
#styleList{
	margin-top:20px;
	padding-bottom:1px;
}
#styleList a{
	display:block;
	line-height:1;
	text-decoration:none;
	padding-right:45px;
}
#styleList span{
	display:block;
	padding:.5em 20px .5em 0;
}
#styleList strong, #styleList img{
	display:block;
	padding:.5em 0;
}
#stylePreview{
	float:left;
	width:625px;
	padding:30px 40px 30px 0;

}
#styleNote{
	margin-top:1.5em;
}
.styleToolBar{
	margin-bottom:20px;
}
.styleToolBar .stylePreviewControl{
	float:left;
	width:108px;
}
.styleToolBar .buttonContainer{
	float:left;
	width:517px;
}
.stylePreviewControl{
	height:14px;
}
.spcl, .spcr{
	display:block;
	width:7px;
	height:14px;

	float:left;
}
.spcc{
	display:block;
	width:94px;
	height:14px;
	float:left;
	text-align:center;
}
.spind{
	width:10px;
	height:14px;
	display:inline-block;
	margin:0 3px;
}
.stylePreview img{
	border:1px solid #CCC;

	margin:0 auto;
}
.stylePreview, .preview{
	display:none;
}
.stylePreview.active, .preview.active{
	display:block;
}



/* =================================================================================================
	TABS
================================================================================================= */
#tabs li{
	display:block;
	float:left;
	margin-right:5px;
	height:30px;
	line-height:30px;
	font-weight:bold;
}
#tabs li a{
	display:block;
	padding-left:15px;
	text-decoration:none;
}
#tabs li span{
	display:block;
	padding-right:15px;
}


/* =================================================================================================
	AJAX SEARCH
================================================================================================= */
#ajaxContainer{
	float:left;
}
#ajaxContainer label{
	float:left;
	line-height:25px;
}

#ajaxSubmitContainer {
	margin-left:10px;
	float:left;
}
#ajaxQuery{
	float:left;
	border:0;
	width:145px;

	padding:3px 3px 0 2px;
	height:23px;
	font-weight:bold;
}
#ajaxSubmit{
	float:left;
	width:20px;
	height:23px;
	cursor:pointer;
	text-indent:-9999px;
}
#ajaxResultContainer{
	margin:10px;
	padding:15px 15px 10px 15px;
	border-width:1px;
	border-style:solid;
	line-height:1.5;
}
#ajaxResultContainer h3{
	padding:0 0 10px;
	font-weight:bold;
	border-bottom-width:1px;
	border-bottom-style:solid;
}
#ajaxResultContainer p{
	padding:10px;
}
#ajaxResultContainer ol li{
	margin:.5em 0;
	list-style:decimal inside;
}
#ajaxResultCount{
	display:none;
}
#ajaxMore{
	padding:0 !important;
}


/* =================================================================================================
	COLLAPSIBLE MENU
================================================================================================= */
.collapsibleHeader{
	display:block;
	text-decoration:none !important;
}

/* 20130415: full list of forms - quick fix  */
.about.residents.forms .collapsibleHeader{
	width:100%;
	float:left;
	clear:both;
}

.collapsibleTitle h3, .noncollapsibleTitle h3 a,
.collapsibleTitle h4, .noncollapsibleTitle h4 a{
	display:block;
	padding:10px 40px 10px 10px;
	border-top-width:1px;
	border-top-style:solid;
	text-decoration:none;
}
.collapsibleContent{
	padding:10px 20px;
	border-top-width:1px;
	border-top-style:solid;
	overflow:hidden;
}

/* 20130415: full list of forms - quick fix  */
.about.residents.forms .collapsibleContent{
	/* 20130415: full list of forms - quick fix  */
	width:94%;
	float:left;
	clear:both;
}

/* collapsible submenu */
.collapsibleContent .collapsibleMenu{
	margin:-11px 0 -10px 0;
}


/* =================================================================================================
	GADGETS (THEMATIC SITE)
================================================================================================= */
.gadgetContainer{
	padding-top:5px;
}
.gadget{
	padding:5px 10px 10px 10px;
}
.gadget img{
	vertical-align:middle;
}
.gadget p{
	line-height:1.5;
}
.gadget li{
	display:list-item;
	list-style:disc inside;

}
.gadget li a{
	display:inline !important;
	padding:0 !important;
}




/* =================================================================================================
	NAVIGATION MENU
================================================================================================= */
#navigation{
	font-weight:bold;
}
#navigation li{
	padding:0 10px;
}
#navigation li a{
	display:block;
	padding:12px 10px;
	border-bottom-width:1px;
	border-bottom-style:solid;
	text-decoration:none;
}

/*active item*/
.communication 	#navigation li.communication,
.culture		#navigation li.culture,
.education		#navigation li.education,
.employment		#navigation li.employment,
.environment	#navigation li.environment,
.government		#navigation li.government,
.health			#navigation li.health,
.housing		#navigation li.housing,
.immigration	#navigation li.immigration,
.taxes			#navigation li.taxes,
.transport		#navigation li.transport,
.businessgov 		#navigation	li.businessgov,
.businessmainland	#navigation	li.businessmainland,
.corporate			#navigation	li.corporate,
.ecommerce			#navigation	li.ecommerce,
.global				#navigation	li.global,
.humanresources		#navigation	li.humanresources,
.market				#navigation	li.market,
.registration		#navigation	li.registration,
.supportenterprises	#navigation	li.supportenterprises,
.taxes				#navigation	li.taxes,
.investinghk	#navigation	li.investinghk,
.living			#navigation	li.living,
.studyinghk		#navigation	li.studyinghk,
.visarequire	#navigation	li.visarequire,
.visitinghk		#navigation	li.visitinghk,
.workinghk		#navigation	li.workinghk{
	padding:0;
	margin-top:-1px; /*cover the border of previous one*/
}

.communication 	#navigation li.communication	a,
.culture		#navigation li.culture			a,
.education		#navigation li.education		a,

.employment		#navigation li.employment		a,
.environment	#navigation li.environment		a,
.government		#navigation li.government		a,
.health			#navigation li.health			a,
.housing		#navigation li.housing			a,
.immigration	#navigation li.immigration		a,
.taxes			#navigation li.taxes			a,
.transport		#navigation li.transport		a,
.businessgov 		#navigation	li.businessgov	a,
.businessmainland	#navigation	li.businessmainland a,
.corporate			#navigation	li.corporate	a,
.ecommerce			#navigation	li.ecommerce	a,
.global				#navigation	li.global		a,
.humanresources		#navigation	li.humanresources a,
.market				#navigation	li.market		a,
.registration		#navigation	li.registration a,
.supportenterprises	#navigation	li.supportenterprises a,
.taxes				#navigation li.taxes		a,
.investinghk	#navigation	li.investinghk		a,
.living			#navigation	li.living			a,
.studyinghk		#navigation	li.studyinghk		a,
.visarequire	#navigation	li.visarequire		a,
.visitinghk		#navigation	li.visitinghk		a,
.workinghk		#navigation	li.workinghk		a
{
	border:none;
	padding-left:20px;
}

/*remove border of last cluster*/
/* 20120720 remove last-child as it is CSS3: #navigation li:last-child a {border:none;} */
#navigation li.last a {border:none;}
.en #navigation li.transport a,
.tc #navigation li.environment a,
.sc #navigation li.environment a
{border:none;}




/* =================================================================================================
	SUB NAVIGATION MENU


================================================================================================= */
#smartMenuPage #subNavigation, #smartMenuPage #smartMenuRightMenu2{
	display:none;
}
#subNavigation{
	padding:10px 0;
	list-style-position:outside;
	list-style-type:disc;
}
#subNavigation li{
	display:list-item;
	padding:5px 0;
	margin:0 20px 0 30px;
}
#subNavigation li a{
	display:inline;
	border:none;
	padding:0 !important;
	line-height:1.2;
}
#subNavigation li a:hover,
#subNavigation li a:active,
#subNavigation li a:focus{
	text-decoration:underline;
}
.communication 	#subsubNavigation li a,
.culture		#subsubNavigation li a,
.education		#subsubNavigation li a,
.employment		#subNavigation li a,
.environment	#subNavigation li a,
.government		#subNavigation li a,
.health			#subNavigation li a,
.housing		#subNavigation li a,
.immigration	#subNavigation li a,
.taxes			#subNavigation li a,
.transport		#subNavigation li a,
.businessgov 		#subNavigation li a,
.businessmainland	#subNavigation li a,
.corporate			#subNavigation li a,
.ecommerce			#subNavigation li a,
.global				#subNavigation li a,
.humanresources		#subNavigation li a,
.market				#subNavigation li a,
.registration		#subNavigation li a,
.supportenterprises	#subNavigation li a,
.investinghk	#subNavigation li a,
.living			#subNavigation li a,
.studyinghk		#subNavigation li a,
.visarequire	#subNavigation li a,
.visitinghk		#subNavigation li a,
.workinghk		#subNavigation li a
{padding-left:0 !important;}





/* =================================================================================================
	CLUSTER ICONS
================================================================================================= */
.residents #clusters		.communication,
.residents .communication 	#pageHeader,
#topOnline .communication
			{background-image: url(/images/icons/residents/communication.png);}
.residents #clusters 		.culture,
.residents .culture 		#pageHeader,
#topOnline .culture
			{background-image: url(/images/icons/residents/culture.png);}
.residents #clusters 		.education,
.residents .education 		#pageHeader,
#topOnline .education
			{background-image: url(/images/icons/residents/education.png);}
.residents #clusters 		.employment,
.residents .employment 		#pageHeader,
#topOnline .employment
			{background-image: url(/images/icons/residents/employment.png);}
.residents #clusters 		.environment,
.residents .environment 	#pageHeader,
#topOnline .environment
			{background-image: url(/images/icons/residents/environment.png);}
.residents #clusters 		.government,
.residents .government 		#pageHeader,
#topOnline .government
			{background-image: url(/images/icons/residents/government.png);}
.residents #clusters 		.health,
.residents .health 			#pageHeader,
#topOnline .health
			{background-image: url(/images/icons/residents/health.png);}
.residents #clusters 		.housing,
.residents .housing 		#pageHeader,
#topOnline .housing
			{background-image: url(/images/icons/residents/housing.png);}
.residents #clusters 		.immigration,
.residents .immigration 	#pageHeader,
#topOnline .immigration
			{background-image: url(/images/icons/residents/immigration.png);}
.residents #clusters 		.taxes,
.residents .taxes 			#pageHeader,
#topOnline .taxes
			{background-image: url(/images/icons/residents/taxes.png);}
.residents #clusters 		.transport,
.residents .transport 		#pageHeader,
#topOnline .transport
			{background-image: url(/images/icons/residents/transport.png);}

.business #clusters 		.businessgov,
.business .businessgov 		#pageHeader,
#topOnline .businessgov
		{background-image: url(/images/icons/business/businessgov.png);}
.business #clusters 		.businessmainland,
.business .businessmainland #pageHeader,
#topOnline .businessmainland
		{background-image: url(/images/icons/business/businessmainland.png);}
.business #clusters 		.corporate,
.business .corporate 		#pageHeader,
#topOnline .corporate
		{background-image: url(/images/icons/business/corporate.png);}
.business #clusters 		.ecommerce,
.business .ecommerce 		#pageHeader,
#topOnline .ecommerce
		{background-image: url(/images/icons/business/ecommerce.png);}
.business #clusters 		.global,
.business .global 			#pageHeader,
#topOnline .global
		{background-image: url(/images/icons/business/global.png);}
.business #clusters 		.humanresources,
.business .humanresources 	#pageHeader,
#topOnline .humanresources
		{background-image: url(/images/icons/business/humanresources.png);}
.business #clusters 		.market,
.business .market 			#pageHeader,
#topOnline .market
		{background-image: url(/images/icons/business/market.png);}
.business #clusters 		.registration,
.business .registration 	#pageHeader,
#topOnline .registration
		{background-image: url(/images/icons/business/registration.png);}
.business #clusters 		.supportenterprises,
.business .supportenterprises #pageHeader,
#topOnline .supportenterprises
		{background-image: url(/images/icons/business/supportenterprises.png);}
.business #clusters 		.taxes,
.business .taxes 			#pageHeader,
#topOnline .taxes
		{background-image: url(/images/icons/business/taxes.png);}
.business #clusters 		.bf,
.business .bf 				#pageHeader,
#topOnline .bf
		{background-image: url(/images/icons/business/bf.png);}

.nonresidents #clusters		.investinghk,
.nonresidents .investinghk	#pageHeader,
#topOnline .investinghk
		{background-image: url(/images/icons/nonresidents/investinghk.png);}
.nonresidents #clusters		.living,
.nonresidents .living 		#pageHeader,
#topOnline .living
		{background-image: url(/images/icons/nonresidents/living.png);}
.nonresidents #clusters		.studyinghk,
.nonresidents .studyinghk	#pageHeader,
#topOnline .studyinghk
		{background-image: url(/images/icons/nonresidents/studyinghk.png);}
.nonresidents #clusters		.visarequire,
.nonresidents .visarequire	#pageHeader,
#topOnline .visarequire
		{background-image: url(/images/icons/nonresidents/visarequire.png);}
.nonresidents #clusters		.visitinghk,
.nonresidents .visitinghk	#pageHeader,
#topOnline .visitinghk
		{background-image: url(/images/icons/nonresidents/visitinghk.png);}
.nonresidents #clusters		.workinghk,
.nonresidents .workinghk	#pageHeader,
#topOnline .workinghk
		{background-image: url(/images/icons/nonresidents/workinghk.png);}


/* =================================================================================================
	CLUSTER COLORS
================================================================================================= */
.about #pageHeader,
.about #tabMenu a 					 	 {border-left-color:#D9541B;}
.residents .communication	#pageHeader,
.residents .communication	#smartMenu a {border-left-color:#4B729E;}
.residents .culture			#pageHeader,
.residents .culture			#smartMenu a {border-left-color:#78C2BD;}
.residents .education		#pageHeader ,
.residents .education		#smartMenu a {border-left-color:#B15074;}
.residents .employment		#pageHeader,

.residents .employment		#smartMenu a {border-left-color:#EBDD52;}
.residents .environment		#pageHeader,
.residents .environment		#smartMenu a {border-left-color:#588144;}
.residents .government		#pageHeader,
.residents .government		#smartMenu a {border-left-color:#7E6E9F;}
.residents .health			#pageHeader,
.residents .health			#smartMenu a {border-left-color:#9C2E2E;}
.residents .housing			#pageHeader,
.residents .housing			#smartMenu a {border-left-color:#A15838;}
.residents .immigration		#pageHeader,
.residents .immigration		#smartMenu a {border-left-color:#233F6E;}
.residents .taxes			#pageHeader,
.residents .taxes			#smartMenu a {border-left-color:#B1D561;}
.residents .transport		#pageHeader,
.residents .transport		#smartMenu a {border-left-color:#CBB6DA;}
.business #pageHeader,
.business #smartMenu a					 {border-left-color:#D8D58D;}
.nonresidents .investinghk	#pageHeader,
.nonresidents .investinghk	#smartMenu a {border-left-color:#5BADCF;}
.nonresidents .living		#pageHeader,
.nonresidents .living		#smartMenu a {border-left-color:#C4B574;}
.nonresidents .studyinghk	#pageHeader,
.nonresidents .studyinghk	#smartMenu a {border-left-color:#B15074;}
.nonresidents .visarequire	#pageHeader,
.nonresidents .visarequire	#smartMenu a {border-left-color:#233F6E;}
.nonresidents .visitinghk	#pageHeader,
.nonresidents .visitinghk	#smartMenu a {border-left-color:#78C2BD;}
.nonresidents .workinghk	#pageHeader,
.nonresidents .workinghk	#smartMenu a {border-left-color:#EBDD52;}


/* =================================================================================================
	SINGLE MENU ICONS (SIDEBAR)
================================================================================================= */
.singleMenu h2, .singleLink h2{
	background-position:6px center;
	background-repeat:no-repeat;
}

/* 20120808: add multiline, background top=(31-17)/2=7  */
/* note: singleLink and multilines in same div */
.singleMenu .multilines h2, .singleLink.multilines  h2{
	background-position:6px 7px;
	background-repeat:no-repeat;
}

/* 20120824: still use "cloud" (api.png) */
/* .smWeather	{background-image:url(/images/icons/singlemenu/weather.png);} */
.smWeather	{background-image:url(/images/icons/singlemenu/api.png);}

.smNews		{background-image:url(/images/icons/singlemenu/news.png);}

.smPress	{background-image:url(/images/icons/singlemenu/press.png);}

/* added for ISD TV API 20140618*/
.smTVAPI	{background-image:url(/images/icons/singlemenu/tv.png);}

/* LL: added psi 20110331 */
.smPsi		{background-image:url(/images/icons/singlemenu/psi.png);}

/* 20151127: add e-cheque  */
.smECheque	{background-image: url(/images/icons/singlemenu/echeque.png);}

.smEnquiries{background-image:url(/images/icons/singlemenu/enquiries.png);}
.smWebcast	{background-image:url(/images/icons/singlemenu/webcast.png);}
.smTraffic	{background-image:url(/images/icons/singlemenu/traffic.png);}
.smMap		{background-image:url(/images/icons/singlemenu/map.png);}
.smECard	{background-image:url(/images/icons/singlemenu/ecard.png);}
.smGadget	{background-image:url(/images/icons/singlemenu/gadget.png);}
.smAPI		{background-image:url(/images/icons/singlemenu/api.png);}
.smAQHI		{background-image:url(/images/icons/singlemenu/api.png);}	
/* 20140128: change for AQHI */

/* ===== 20150707: add for GovHKQuiz: start ===== */
.smQuiz		{ background-image:url(/images/icons/singlemenu/quiz.png); }


	
.smGovHKQuiz .QuestionAndAnswer, 
.smGovHKQuiz .thumbAndQuestion,
.smGovHKQuiz .questionOnly,
.smGovHKQuiz .answerPanel,
.smGovHKQuiz .buttonPanel {
	display:block;
	float:left;
	clear:both;
}

.smGovHKQuiz .QuestionAndAnswer { 
	font-size: 120%;
	margin-bottom:10px;
}

/* 20150710: make "a" as block for bg color effect */
.smGovHKQuiz .QuestionAndAnswer a { 
	/* try */
	background-color:none;
	
	display:block;
	float:left;
	clear:both;
}

.smGovHKQuiz .QuestionAndAnswer.bgImage a:hover .question,
.smGovHKQuiz .QuestionAndAnswer.bgImage a:hover .answerList { 
	text-decoration:underline;
}

/* test
.smGovHKQuiz .QuestionAndAnswer.bgImage:hover  { 
	opacity:0.8; 
}
*/


.smGovHKQuiz .thumbAndQuestion .thumb,
.smGovHKQuiz .thumbAndQuestion .question,
.smGovHKQuiz .questionOnly .question  {
	display:block;
	float:left;
	clear:none;
}


.smGovHKQuiz  .question  {
	line-height:1.4em; /* for all question */
}

/* "smGovHKQuiz" width total: 240px */
.smGovHKQuiz .thumbAndQuestion .thumb  {
	width:64px;
	line-height:0;	/* reset height */
}


.smGovHKQuiz .thumbAndQuestion .question  {
	/* total width: 176px */	
	width:160px;
	padding:7px 7px 0 7px;
	/* note: pad bottom is 0 (esp with thumbnail) */
}

.smGovHKQuiz .questionOnly .question  {
	/* total width: 240px */	
	width:210px;
	padding:10px 15px 0 15px;
	/* note: pad bottom is 0 (esp with thumbnail) */
}

/* typeD */
.smGovHKQuiz.typeD .questionOnly .question  {
	padding-bottom:20px;
}

.smGovHKQuiz .answerPanel {
	/* total width: 240px */	
	padding:10px 0px 10px 30px;
	/* padding: top, bottom and left */
	width:210px;	/* note: make area clickable */
}

.smGovHKQuiz .answerList {
	display:block;
	float:left;
	clear:both;
	line-height:1.8em;
}


.smGovHKQuiz .checkAnswerButton,
.smGovHKQuiz .submitAnswerButton {
	display:block;
	float:left;
	clear:none;
	margin:0px 0px 20px 20px; /* bottom and left */
	border:1px solid black;
	padding:2px;
}

/* 20160201: fix background on typeC and typeD */
/* CAUTION: css class weight this item bigger then style.css */
.singleMenu .bgImage a.thumbnail {
	background-color:transparent;
}



/* ===== 20150707: add for GovHKQuiz: end ===== */

/* =================================================================================================
	LEGEND ICONS
================================================================================================= */
/* Clusters (Smart menu) */
.clustersLegend span, .clustersLegend li{
	background-image:url(/images/legend/clusters.gif);
	background-repeat:no-repeat;
}
.clustersLegend .nongov		{background-position:left 0;}
.clustersLegend .rss		{background-position:left -50px;}
.clustersLegend .service	{background-position:left -100px;}
.clustersLegend .form		{background-position:left -150px;}


/* Online Services */
.onlineServicesLegend li{
	background-image:url(/images/legend/onlineservices.gif);
	background-repeat:no-repeat;
}
.onlineServicesLegend .onlinepayment	{background-position:left 0;}
.onlineServicesLegend .ecert			{background-position:left -50px;}
.onlineServicesLegend .password			{background-position:left -100px;}
.onlineServicesLegend .scanning			{background-position:left -150px;}
.onlineServicesLegend .printing			{background-position:left -200px;}
/* 20101101: easysignon icon at each item */
.onlineServicesLegend .easysignon		{background-position:left -250px;}
/* 20101101: easysignon legend (long sentence) */
#legends .onlineServicesLegend .easysignon	{background-position:left -246px;}


/* 20110601: form efillable to onlineform */
/* e-Forms */
#legends .eFormsLegend li, .eFormsLegend a, .eformsTitle a{
	background-image:url(/images/legend/eforms.gif);
	background-repeat:no-repeat;
}
#legends .eFormsLegend .efillable,
.eFormsLegend .efillable,
.eformsTitle .efillable				{background-position:left 0;}
#legends .eFormsLegend .onlinesubmission,
.eFormsLegend .onlinesubmission,
.eformsTitle .onlinesubmission		{background-position:left -200px;}
#legends .eFormsLegend .pdf,
.eFormsLegend .pdf,
.eformsTitle .pdf					{background-position:left -400px;}
#legends .eFormsLegend .fillablepdf,
.eFormsLegend .fillablepdf,
.eformsTitle .fillablepdf			{background-position:left -600px;}
#legends .eFormsLegend .msword,
.eFormsLegend .msword,
.eformsTitle .msword				{background-position:left -800px;}
#legends .eFormsLegend .msexcel,
.eFormsLegend .msexcel,
.eformsTitle .msexcel				{background-position:left -1000px;}
#legends .eFormsLegend .richtext,
.eFormsLegend .richtext,
.eformsTitle .richtext				{background-position:left -1200px;}
#legends .eFormsLegend .eft,
.eFormsLegend .eft,
.eformsTitle .eft					{background-position:left -1400px;}
#legends .eFormsLegend .ldform,
.eFormsLegend .ldform,
.eformsTitle .ldform 				{background-position:left -1600px;}
#legends .eFormsLegend .dynadoc,
.eFormsLegend .dynadoc,
.eformsTitle .dynadoc				{background-position:left -1800px;}
#legends .eFormsLegend .html,
.eFormsLegend .html,
.eformsTitle .html					{background-position:left -2000px;}
#legends .eFormsLegend .gifjpeg,
.eFormsLegend .gifjpeg,
.eformsTitle .gifjpeg				{background-position:left -2200px;}
/* for easyfillform */
#legends .eFormsLegend .easyfillform,
.eFormsLegend .easyfillform,
.eformsTitle .easyfillform				{background-position:left -2400px;}

.eFormsLegend .efillable:hover,
.eformsTitle .efillable:hover			{background-position:left -100px;}
.eFormsLegend .onlinesubmission:hover,
.eformsTitle .onlinesubmission:hover	{background-position:left -300px;}
.eFormsLegend .pdf:hover,
.eformsTitle .pdf:hover					{background-position:left -500px;}
.eFormsLegend .fillablepdf:hover,
.eformsTitle .fillablepdf:hover			{background-position:left -700px;}
.eFormsLegend .msword:hover,
.eformsTitle .msword:hover				{background-position:left -900px;}
.eFormsLegend .msexcel:hover,
.eformsTitle .msexcel:hover				{background-position:left -1100px;}
.eFormsLegend .richtext:hover,
.eformsTitle .richtext:hover			{background-position:left -1300px;}
.eFormsLegend .eft:hover,
.eformsTitle .eft:hover					{background-position:left -1500px;}
.eFormsLegend .ldform:hover,
.eformsTitle .ldform:hover				{background-position:left -1700px;}
.eFormsLegend .dynadoc:hover,
.eformsTitle .dynadoc:hover				{background-position:left -1900px;}
.eFormsLegend .html:hover,
.eformsTitle .html:hover				{background-position:left -2100px;}
.eFormsLegend .gifjpeg:hover,
.eformsTitle .gifjpeg:hover				{background-position:left -2300px;}
/* for easyfillform */
.eFormsLegend .easyfillform:hover,
.eformsTitle .easyfillform:hover		{background-position:left -2500px;}

.eFormsLegend .efillable:active,
.eformsTitle .efillable:active			{background-position:left -100px;}
.eFormsLegend .onlinesubmission:active,
.eformsTitle .onlinesubmission:active	{background-position:left -300px;}
.eFormsLegend .pdf:active,
.eformsTitle .pdf:active				{background-position:left -500px;}
.eFormsLegend .fillablepdf:active,
.eformsTitle .fillablepdf:active		{background-position:left -700px;}
.eFormsLegend .msword:active,
.eformsTitle .msword:active				{background-position:left -900px;}
.eFormsLegend .msexcel:active,
.eformsTitle .msexcel:active			{background-position:left -1100px;}
.eFormsLegend .richtext:active,
.eformsTitle .richtext:active			{background-position:left -1300px;}
.eFormsLegend .eft:active,
.eformsTitle .eft:active				{background-position:left -1500px;}
.eFormsLegend .ldform:active,
.eformsTitle .ldform:active				{background-position:left -1700px;}
.eFormsLegend .dynadoc:active,
.eformsTitle .dynadoc:active			{background-position:left -1900px;}
.eFormsLegend .html:active,
.eformsTitle .html:active				{background-position:left -2100px;}
.eFormsLegend .gifjpeg:active,
.eformsTitle .gifjpeg:active			{background-position:left -2300px;}
/* for easyfillform */
.eFormsLegend .easyfillform:active,
.eformsTitle .easyfillform:active		{background-position:left -2500px;}


.eFormsLegend .efillable:focus,
.eformsTitle .efillable:focus			{background-position:left -100px;}
.eFormsLegend .onlinesubmission:focus,
.eformsTitle .onlinesubmission:focus	{background-position:left -300px;}
.eFormsLegend .pdf:focus,
.eformsTitle .pdf:focus					{background-position:left -500px;}
.eFormsLegend .fillablepdf:focus,
.eformsTitle .fillablepdf:focus			{background-position:left -700px;}
.eFormsLegend .msword:focus,
.eformsTitle .msword:focus				{background-position:left -900px;}
.eFormsLegend .msexcel:focus,
.eformsTitle .msexcel:focus				{background-position:left -1100px;}
.eFormsLegend .richtext:focus,
.eformsTitle .richtext:focus			{background-position:left -1300px;}
.eFormsLegend .eft:focus,
.eformsTitle .eft:focus					{background-position:left -1500px;}
.eFormsLegend .ldform:focus,
.eformsTitle .ldform:focus				{background-position:left -1700px;}
.eFormsLegend .dynadoc:focus,
.eformsTitle .dynadoc:focus				{background-position:left -1900px;}
.eFormsLegend .html:focus,
.eformsTitle .html:focus				{background-position:left -2100px;}
.eFormsLegend .gifjpeg:focus,
.eformsTitle .gifjpeg:focus				{background-position:left -2300px;}
/* for easyfillform */
.eFormsLegend .easyfillform:focus,
.eformsTitle .easyfillform:focus		{background-position:left -2500px;}



/* =================================================================================================
	ARTICLE MENU ICON (ARTICLE MENU)
================================================================================================= */
#articleMenu #iWantTo li a{
}
#articleMenu #iWantTo #share {
	background:url(/images/icons/article/share.gif) 5px center no-repeat;

}
#articleMenu #iWantTo #feedback {
	background:url(/images/icons/article/feedback.gif) 5px center no-repeat;
}
#articleMenu #iWantTo #bookmark {
	background:url(/images/icons/article/bookmark.gif) 5px center no-repeat;
}

/* =================================================================================================
	MULTILANG PAGE and mygovhk button

================================================================================================= */

/* multiLang default color */
.multiLangText { color:#993333; }

#languages {
	/* 20101215 use unicode symbol for triangle */
	/*
	padding-right:20px;
	background:url(/images/header/lang_other.png) no-repeat right center;
	*/
}

#mygovhk {
	color:#FFFFFF;
	display:block;
	background:url(/images/header/mygovhk_left.gif) no-repeat left center;
	padding-left:4px;
	font-weight:bold;
}

#mygovhk span {
	display:block;
	background:url(/images/header/mygovhk_right.gif)  right center no-repeat;
	padding-right:4px;
}

/*20130603 - MyGov img in header
#mygovhk2 img{
	padding-top: 5px;
}*/

/* 20130610 - MyGov in header (en)*/
#mygovhk_header.en.A{
	background: url(/images/header/1A_en_blank.gif) center center no-repeat;
	width: 180px;
}

.en.A #mygovhk_header_text{
	padding-left: 80px;
}

#mygovhk_header.en.AA{
	background: url(/images/header/2A_en_blank.gif) center center no-repeat;
	width: 196px;
}

.en.AA #mygovhk_header_text{
	padding-left: 83px;
}

#mygovhk_header.en.AAA{
	background: url(/images/header/3A_en_blank.gif) center center no-repeat;
	width: 225px;
}

.en.AAA #mygovhk_header_text{
	padding-left: 95px;
}

/* 20130610 - MyGov in header (tc)*/
#mygovhk_header.tc.A{
	background: url(/images/header/1A_tc_blank.gif) center center no-repeat;
	width: 180px;
}

.tc.A #mygovhk_header_text{
	padding-left: 110px;
}

#mygovhk_header.tc.AA{
	background: url(/images/header/2A_tc_blank.gif) center center no-repeat;
	width: 196px;
}

.tc.AA #mygovhk_header_text{
	padding-left: 116px;
}

#mygovhk_header.tc.AAA{
	background: url(/images/header/3A_tc_blank.gif) center center no-repeat;

	width: 225px;
}

.tc.AAA #mygovhk_header_text{
	padding-left: 134px;
}

/* 20130610 - MyGov in header (sc)*/
#mygovhk_header.sc.A{
	background: url(/images/header/1A_sc_blank.gif) center center no-repeat;
	width: 180px;
}

.sc.A #mygovhk_header_text{
	padding-left: 110px;
}

#mygovhk_header.sc.AA{
	background: url(/images/header/2A_sc_blank.gif) center center no-repeat;
	width: 196px;
}

.sc.AA #mygovhk_header_text{
	padding-left: 116px;
}

#mygovhk_header.sc.AAA{
	background: url(/images/header/3A_sc_blank.gif) center center no-repeat;
	width: 225px;
}

.sc.AAA #mygovhk_header_text{
	padding-left: 134px;
}

/* QuickTips */
ul#langList li {  padding:3px; } /* quick fix */
ul#langList li a{display:block;border-bottom:1px solid #aaa; padding:5px;}
ul#langList li a.last{border-bottom:1px solid #fff;}
/* ul#langList a:hover{opacity:0.5;filter: alpha(opacity = 50);width:100%;zoom:1;} */
/* #waLanguageSelector { padding:5px 5px;}  */

/* =================================================================================================
	socialGroups (20130614)
================================================================================================= */

#searchBox{
	/* width:145px; reduce search box for social groups (20130618) */
	width:135px;	
}

/* div1: set it not exist, for qtip to grab it only */
#socialGroupsDiv1 { 
	display:none; 
	position:absolute; z-index:2; top:0px; left:0px; 
	float:left;
	clear:both;
	margin:0;
	padding:0;
	border:0;
	/* no width specify */
}

/* div2: container for div3 and div4 */
#socialGroupsDiv2  { 
	display:block;
	top:0px; left:0px; 
	float:left;
	clear:both;
	margin:0;

	padding:0;
	border:0;	
	/* no width specify */
}

/* div3: background arrow */
#socialGroupsDiv3 {  
	/* note: float:left will have not background */
	clear:both; 
	padding:0; 
	margin:0; 
	border:0;
	/* no width */
	height:23px;
	background:url(/en/images/socialgroups/underline.png) -225px 0px no-repeat;
	/* background same as 6 style:f7f7f7, -225px by tuning */
	display:block;
 }
 
.tc  #socialGroupsDiv3,
.sc  #socialGroupsDiv3 {
	background:url(/en/images/socialgroups/underline.png) -215px 0px no-repeat;
	/* background same as 6 style:f7f7f7, -130px by tuning */
}


/* div3: background arrow */ 
#socialGroupsDiv4{ 
	display:block; float:left; clear:both; 
	/* margin-top:23px ;	*/
	/* width:800px;  */
	margin:0;
	background:#f7f7f7;
	border-style:solid;
	border-color:#EBEBEB;	/* equal background arrow color */
	border-width:0px 2px 2px 2px;
	padding:0 8px; /* make leftmost and rightmost padding align with padding between items */
	
}

ul#socialGroupsList  { 
	/* line-height:50px; 20130618 */
	line-height:65px;
}

ul#socialGroupsList li { 
	float:left; 
	padding:8px; /* padding between items */
	/* line-height:50px; 20130618 */
	line-height:65px;
	
}

ul#socialGroupsList  li a img { 
	
	vertical-align:middle;
	
}

/*
ul#socialGroupsList li a { 
	vertical-align:middle;

}
*/

/* =================================================================================================
	MYGOVHK BADGE (HOMEPAGE)
================================================================================================= */

/* new homepage */
#mygovhkBadge {
	width:455px;
	margin:5px 0;
	line-height:0;
	float:left;
	position:relative;
}

#mygovhkBadgeHeader{
	width:455px;
	height:66px;
	background:url(/images/mygovhk/homepage/header.gif) no-repeat;
}

#mygovhkBadgeHeader a{
	display:block;
	padding-left:35px;
	height:46px;
	line-height:46px;
	position:absolute;
	top:10px;
}

.en #mygovhkBadgeHeader a{width:50px;}
.tc #mygovhkBadgeHeader a{width:40px;}
.sc #mygovhkBadgeHeader a{width:40px;}

#mygovhkLogin{
	background:url(/images/mygovhk/homepage/login.gif) left center no-repeat;
	right:130px;
}
#mygovhkRegister{
	background:url(/images/mygovhk/homepage/register.gif) left center no-repeat;
	left:345px;
}

#mygovhkRegister{
	position:absolute;
}

#mygovhkBadgeFooter {
	padding:0; margin:0; border:0;
	display:block;
	float:none;
	height:23px;
	line-height:23px;
	text-align:center;
	background:url(/images/mygovhk/homepage/footer.gif) no-repeat;
}

#mygovhkBadgeFooter, #mygovhkBadgeFooter a {
	color:#ffffff;
}
#mygovhkBadgeFooter a {
	font-weight:bold;
}

/* 20140430: wac default hide */
#conformance #wcagWac {
	display:none;
}

/* ===== 20150408: minor enhancment ===== */
/* 20150408: writesup - legend hide */
#smartMenuPage #legends { display:none; }
#smartContent p.clustersLegend  { display:none; }

/* 20150414: OVERRIDE external link icon on videoBlock URLs */
#articleContainer #article .contentLink .videoBlock  a[rel="external"]:link:after,
#articleContainer #article .contentLink .videoBlock  a[rel="external"]:visited:after,
#articleContainer #article .contentLink .videoBlock  a[rel="external"]:hover:after,
#articleContainer #article .contentLink .videoBlock  a[rel="external"]:active:after,
#articleContainer #article .contentLink .videoBlock  a[rel="external"]:focus:after,
body.FeaturedArticle  #article .content .videoBlock a[rel="external"]:link:after,
body.FeaturedArticle  #article .content .videoBlock a[rel="external"]:visited:after,
body.FeaturedArticle  #article .content .videoBlock a[rel="external"]:hover:after,
body.FeaturedArticle  #article .content .videoBlock a[rel="external"]:active:after,
body.FeaturedArticle  #article .content .videoBlock a[rel="external"]:focus:after {
    content: "";
    background: none;
}

/* ===== 20150713: special handling for taxes table ===== */
.font-size-largest #article .content.DivScroll {
	overflow:scroll;
}

/* ===== 20150720: Gov Forms : additional rotating banner style (copy from mygovhk) ===== */
.about.forms .additionRotatingCell {padding-top:10px;}
.about.forms .additionRotatingCell h2 {display:none;}
.about.forms .additionRotatingCell  p {line-height:20px; padding-top:5px; }
.about.forms .additionRotatingCell  a {font-family:Arial, Helvetica, sans-serif; font-size:14px;}