/* =================================================================================================
	screen.css for psi theme site
================================================================================================= */

/* ===== 20120511: add findDatasets:start ===== */
/* do "explorer" theme only, keep same path to align online service and form */
.en #findDatasets h2{ background:url(/css/theme/explorer/images/en/find_datasets.gif) no-repeat;}
.tc #findDatasets h2{ background:url(/css/theme/explorer/images/tc/find_datasets.gif) no-repeat;}
.sc #findDatasets h2{ background:url(/css/theme/explorer/images/sc/find_datasets.gif) no-repeat;}


#findDatasets{
	color:#F2DAC0;
	background:#B45B24 url(/css/theme/explorer/images/onlineservices/bg.gif) repeat-x;
}
#findDatasets a {
	color:#FFF;
}
.findDatasetsHeader {
	background:url(/css/theme/explorer/images/widget/arrow_header.gif) left .2em no-repeat;
}
/* ===== 20120511: add findDatasets:end ===== */


/* govhk: header color */
#pageHeader{border-left-color:#F7B03C; border-left-width:30px; padding:0 0 0 10px;}


/* LL: 14012011 */
h4 {
font-size:120%;
}


#pageHeader h1{
/* font-family:Arial, Helvetica, sans-serif;
background:url(../images/topic.jpg) no-repeat left;  */
display:block; 
padding:20px 0 20px 0px;
}


#navigation{
	background:#3f3530;
}

/*active item*/
.about		#navigation	li.about,
.welcome		#navigation	li.welcome,
.welcome2		#navigation	li.welcome2,
.datadownload  	#navigation li.datadownload,
.datasets  	#navigation li.datasets,
.linked_information 	#navigation li.linked_information,
.gallery 	#navigation li.gallery,
.terms 		#navigation li.terms,
.terms_conditions 	#navigation li.terms_conditions,
.mailing_list  	#navigation li.mailing_list,
.contest #navigation li.contest,

.faqs 	#navigation li.faqs,
.freqaskedquestions 	#navigation li.freqaskedquestions,

.feedback  			#navigation li.feedback,
.suggestion  			#navigation li.suggestion,
.contactus 		 	#navigation li.contactus
{
	padding:0;
	margin-top:-1px; /*cover the border of previous one*/
}

/*2013-08-28 AM: added PSI mailing list */
/*active item*/
.about		#navigation	li.about  a,
.welcome		#navigation	li.welcome  a,
.datadownload  	#navigation li.datadownload  a,
.datasets  	#navigation li.datasets  a,
.welcome2  	#navigation li.welcome2  a,
.suggestion  	#navigation li.suggestion  a,
.mailing_list  	#navigation li.mailing_list  a,
.contest	#navigation li.contest  a,

.linked_information 	#navigation li.linked_information  a,
.gallery 	#navigation li.gallery  a,
.terms 		#navigation li.terms  a,
.terms_conditions 		#navigation li.terms_conditions  a,

.faqs 	#navigation li.faqs  a,
.freqaskedquestions 	#navigation li.freqaskedquestions  a,

.feedback  			#navigation li.feedback  a,
.contactus 		 	#navigation li.contactus  a
{
	background:#e98713;
	border:none;
	padding-left:20px; 
}

#navigation li a {
	color:#fff;
	border-color:#5f524a;
}
#navigation li a:hover, #navigation li a:focus {
	background:#534741;
}





/* for "faqs" section only: below override style.css, all use important here */
.theme.psi.faqs strong a.anchor, 
.theme.psi.faqs strong a.anchor:link,
.theme.psi.faqs strong a.anchor:visited,
.theme.psi.faqs strong a.anchor:hover, 
.theme.psi.faqs strong a.anchor:active, 
.theme.psi.faqs strong a.anchor:focus {
	color:#000000 !important;
} 

.theme.psi.faqs strong a:link , 
.theme.psi.faqs strong a:visited,
.theme.psi.faqs strong a:hover,
.theme.psi.faqs strong a:active,
.theme.psi.faqs strong a:focus { 
	text-decoration:none !important;
}

.theme.psi.faqs strong a:link,
.theme.psi.faqs .qonly a:link {color:#000000 !important;}
.theme.psi.faqs strong a:visited,
.theme.psi.faqs .qonly a:visited {color:#993399 !important;} 

.theme.psi.faqs strong a:hover, 
.theme.psi.faqs strong a:active, 
.theme.psi.faqs strong a:focus,
.theme.psi.faqs .qonly a:hover, 
.theme.psi.faqs .qonly a:active, 
.theme.psi.faqs .qonly a:focus {
	color:#990000 !important; 
}

/* 20110310 force question part have not underline */
.theme.psi.faqs .qonly a { 
	text-decoration:none !important;
}


/* added by LL 11-7-2012 for new folder */

/* for "faqs" section only: below override style.css, all use important here */
.theme.psi.freqaskedquestions strong a.anchor, 
.theme.psi.freqaskedquestions strong a.anchor:link,
.theme.psi.freqaskedquestions strong a.anchor:visited,
.theme.psi.freqaskedquestions strong a.anchor:hover, 
.theme.psi.freqaskedquestions strong a.anchor:active, 
.theme.psi.freqaskedquestions strong a.anchor:focus {
	color:#000000 !important;
} 

.theme.psi.freqaskedquestions strong a:link , 
.theme.psi.freqaskedquestions strong a:visited,
.theme.psi.freqaskedquestions strong a:hover,
.theme.psi.freqaskedquestions strong a:active,
.theme.psi.freqaskedquestions strong a:focus { 
	text-decoration:none !important;
}

.theme.psi.freqaskedquestions strong a:link,
.theme.psi.freqaskedquestions .qonly a:link {color:#000000 !important;}
.theme.psi.freqaskedquestions strong a:visited,
.theme.psi.freqaskedquestions .qonly a:visited {color:#993399 !important;} 

.theme.psi.freqaskedquestions strong a:hover, 
.theme.psi.freqaskedquestions strong a:active, 
.theme.psi.freqaskedquestions strong a:focus,
.theme.psi.freqaskedquestions .qonly a:hover, 
.theme.psi.freqaskedquestions .qonly a:active, 
.theme.psi.freqaskedquestions .qonly a:focus {
	color:#990000 !important; 
}

/* 20110310 force question part have not underline */
.theme.psi.freqaskedquestions .qonly a { 
	text-decoration:none !important;
}






/* for "linked information" section only */
.theme.psi.linked_information .content .even td, 
.theme.psi.linked_information .content .odd td, 
.theme.psi.linked_information .content .even th, 
.theme.psi.linked_information .content .odd th {
	background:#E1E0D4 !important;
}

/* readable format text */
.theme.psi.datadownload .readable {
	font-size:75%;
}

/* for "welcome" section */
.theme.psi.welcome .content .cyberportphoto {
}
.theme.psi.welcome .content .cyberporttext {
	text-align:right;
	padding-right:6px;
	font-size: 70%;
}


/* govhk: space between breadcrumb and content */
/*
#articleContainer { padding-top:0; }
*/

/*
.topdown #article{padding:0 0 10px 0;}
*/


/* =================================================================================================
	PSI Expand Menu style (2012.05)
================================================================================================= */

/* ===== mimic online services and eform containers in layout.css ===== */
#findDatasets, #findDatasetsContainer #ajaxSearchForm, .findDatasetsHeader
{
	/* 201205: 
		(1) add 'findDatasets' to 'findDatasetsHeader
		(2) reuse 'onlineFullList' inside  
	*/
	overflow:hidden;
	width:100%;
}

/* for "search" text in search box */
#ajaxForm {
	font-size:150%;
}


/* 201205: add find data, reduce height to 100px */
#findDatasets h2 {
	float:left;
	width:250px;
	height:100px;
	text-indent:-9999px;
}

/* 201205: add find data, width reduce 20px because it is move inside "div.article" */
 #findDatasetsContainer {
	float:left;
	width:383px;
	padding:10px 20px 10px 20px;
	font-weight:bold;
}

.findDatasetsHeader {
	/* 201205: add findDatasets */
	line-height:1.2;
	padding-left:20px;
	margin-bottom:1em;
	
}


/* ===== override default style (1) ===== */
.collapsibleTitle h3,
.noncollapsibleTitle h3,
.onlineFullList
{
   /* font-size:100%; */
   margin-bottom: 0;	
   border-bottom-width:0;	
}


.collapsibleContent ul.onlineFullList,
/* .collapsibleContent .onlineFullList li, */
.onlineFullList ul,
.onlineFullList li
{
	margin:0;
}


/* override .content ul > li (at some div/span have disc)  */
.content ul.onlineFullList > li {
    list-style-type: none;
}

#psiExpandMenu  .button {
	font-size:150%; 
}


/*
.onlineFullList ul ,
.onlineFullList li ,
{
	list-style:none;
}
*/


/*
 #findOnlineServices, #findEForms, .onlineFullList,
 #findDatasets, 
  {
    font-size: 150%;
}
*/

/* ===== override default style: result block ===== */
#ajaxResultContainer {
    padding: 10px 0px 0px 10px;
	margin:10px 0 0 0;
}

#ajaxResultContainer h3 {
    /* font-size: 100%; */
	background-color:#ECECEC;
	/* add to style.css when necessary */
}


/* ===== psi Expand Menu style ===== */
/* topHeader */
.collapsibleTopHeader {
	width:100%;
	padding:10px 0px;
	margin:0;
	overflow:hidden; 
	/* border:1px solid blue; */
	border-top:1px solid #CCCDC8;
	font-size:150%; 
	font-weight:bold;
}

/* topHeader : default fields style */
.collapsibleTopHeader .topName,
.collapsibleTopHeader .topBD,
.collapsibleTopHeader .topFormat {
	float:left;
	display:block;
	/* border:1px solid red; */
}

/* topHeader : each fields style */
.collapsibleTopHeader .topName {
	padding-left:10px;
	width:360px;
}
.collapsibleTopHeader .topBD {
	width:170px;
}
.collapsibleTopHeader .topFormat {
	width:80px;
}






/* ===== Detail Data AND Search Result style ===== */


.onlineFullList li .psiName ,
.onlineFullList li .psiBD ,
.onlineFullList li .psiFormat {
	float:left; 
	display:block; 
	/* border:1px solid red; */
	margin:0;
	
}

/* div width */
.onlineFullList li .psiName {
	width: 330px;
	padding-right:10px;
}
.onlineFullList li .psiBD {
	width: 170px;
	padding-right:20px;
}
.onlineFullList li .psiFormat {
	
	width:auto;
	padding:0;
	/* width: 60px; */
	/* list-style-image: url("/images/space/spacer.gif"); */
	/* display:block; */
	
}



/* default span style for Name, Desc and BD */
.onlineFullList li .dataName,
.onlineFullList li .dataDesc ,
.onlineFullList li .dataBD  {
	display:block; 
	padding:0;
	margin:0;
	/* border:1px solid blue; */
	/* border:1px solid green; */
}

/* individual span style */
.onlineFullList li .dataName {
	font-weight:bold;
}

/* 20120601: reduce font-size */
.onlineFullList li .dataDesc {
	font-size:85%;
}

/* style for dataFormat */
.onlineFullList li .dataFormat {

	display:block; 
	margin:0px; 
	padding:2px; 
	border:0;
	/* border:1px solid; 	*/
	/* 	display:inline;  	*/
	/* list-style:none; */
	/* border:1px solid red;   */
	/* list-style-image: url("/images/space/spacer.gif"); */
	
}

/* hide this for desktop, show it in mobile.css only */
.onlineFullList li .dataFormat.mobileonly {display:none; } 

/* preDatasets Link, do not display in desktop but show in mobile */
#preDatasets {
	display:none;
}

/*
.content h3 {
	background:none;
	border:1px solid blue;
}
*/

/* =================================================================================================
	AM: 2013-08-28
	PSI Dataset page
================================================================================================= */

.left{
	float: left;
	overflow: hidden;
}

.right{
	float: right;
	overflow: hidden;
}

#mailingList{
	margin-top:10px;
	overflow: hidden;
}

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


#psiWelcomeSearchArea #findDatasetsContainer{
	background-color: #C0C0C0;
	width: 633px;
	/*margin-top: -4px;*/
	position: relative;
	top: 1px;
}
#psiWelcomeSearchArea #findDatasetsContainer.en{	
	background: url("/en/theme/psi/images/search.png") no-repeat;
}

#psiWelcomeSearchArea #findDatasetsContainer.tc{
	background: url("/tc/theme/psi/images/search.png") no-repeat;
}

#psiWelcomeSearchArea #findDatasetsContainer.sc{
	background: url("/sc/theme/psi/images/search.png") no-repeat;
}

#psiWelcomeSearchArea #ajaxContainer label{
	font-weight: bold;
}

#psiWelcomeSearchArea #ajaxSearchForm{
	margin-left: 140px;
}

#psiWelcomeSearchArea #ajaxQuery{
	background: white;
	width: 470px;
}

#psiWelcomeSearchArea #ajaxSubmit{
	display: none;
}

#joinListForm input{
	vertical-align:inherit;
}

#joinListForm div{
	margin-bottom: 0.5em;
}

.buttonCrop{
	width: 222px;
}

/* =================================================================================================
	AM: 2013-08-28
	PSI Mailing List
================================================================================================= */

#joinListForm .error{
	color: red;
}

#joinListForm #captchaBox{
	overflow: hidden;
}

#joinListForm {
	display: block;
}

#joinListForm label{
	display: block;
}

#joinListForm #captcha{
	border: 1px solid #CCCCCC;
	float: left;
	margin-right: 5px;
}

#joinListForm .button{
	font-size: 1em;
}

#joinListForm input{
	font-size: 1em;
}	


/* =================================================================================================
	AM: 2013-10-10 Data.One Application Contest Submission Form
================================================================================================= */

div#result {
    margin: 1em 0 1em 0;
}

span.privacy{
	font-size: 0.85em;
	color: #333333;
}

/* AM: end Contest Submission Form */

/* =================================================================================================
	AM: 2013-10-29 Data.One Application Contest pages header
================================================================================================= */
#topSection{
	display: block;
	float: left;
	width: 100%;
	margin: 0 0 20px;
/*
	height: 115px;
    padding-top: 30px;
    width: 380px;
*/
}

#navagationLinkSection{
	width:	350px;
	padding: 20px 20px;
	position: absolute;
}


.navigationLink{
	display: block;
	float: left;
	width: 110px;
}

/* KC: 20131029: align it for all state
.navigationLink a:link{ 
*/
.navigationLink a:link,
.navigationLink a:visited,
.navigationLink a:hover,
.navigationLink a:active,
.navigationLink a:focus {
	text-decoration: none;
	font-weight: bold;
}

#navagationLinkSection div{
	display: block;
	/*position:absolute;*/
	float: left;
	margin: 0 10px;
}

#topSection div{
	display: block;
	float: left;	
}

#contestFaqList li{
	margin-bottom: 1.5em;
}

/* 20140502 AM: add to center gallery images*/
#gallery img {
    vertical-align: middle;
}

/* AM: Data.One Application Contest pages header*/

/* =================================================================================================
	KC: change navigation to list items (20131029)
================================================================================================= */
#navagationLinkSection ul,
#navagationLinkSection li {
	list-style-type:none;
	margin:0;
}