@charset "UTF-8";
/**************************************************************
 *                                                            *
 *    style.css                                               *
 *    STYLE grid                                              *
 *                                                            *
 *    Common layout stylesheet for IRD                        *
 *    Define the layout grid / base look & feel etc.          *
 *                                                            *
 **************************************************************/

element.style {
    table-layout: auto;
    width: 100%;
} 



.contentstyle table > caption {
	display: none;
  }

#content table > caption {
	display: none;
}

/****************** Start of global style *********************/
BODY{
	font-family: "Arial", "細明體_HKSCS","新細明體","新细明体","PMingLiu","細明體","细明体","MingLiu","Helvetica","Myriad Pro","Arial","sans-serif";
}

* {
    box-sizing: border-box;
}

a:link, a:visited{
	color: #3d5ba9; /* #3d5ba9 */
	text-decoration: none
}

a:hover, a:focus {
	color: #b62b30;
	text-decoration: underline;
}

hr {
	line-height:1;
	width:calc(100% - 0.5em);
}

h1 {
	font-size: 100%; font-weight: bold; text-align: left; display:inline;
} 

sup {
	/* font-size: inherit; */
	vertical-align: super;
  top: inherit;
}
/******************** End of global style *********************/

/******************** Screen Reader ***************************/ 
.access {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;} 
/******************** End of Screen reader ********************/


/********************** Start of submenu **********************/
.submenu {
	font-family: "Arial", "Helvetica", "sans-serif";
	color: #3E3E3E;
	text-decoration: none;
	line-height: 17px;
}

.submenu a:hover,
.submenu a:focus{
	color: #BE0000;
}

.submenu_ch {
	font-family: "Arial", "Helvetica", "sans-serif";
	color: #3E3E3E;
	text-decoration: none;
	line-height: 17px;
}

.submenu_ch a:hover,
.submenu_ch a:focus{
	color: #BE0000;
}
/*********************** End of submenu ***********************/



/******************** Start of  subtopmenu ********************/
.subtopmenu {
	background-image: url('../images/navi_bg.png');
	background-size: 810px;
	padding: 5px;
	width: 500px;
	float:left;
    
} 
.subtopmenu  div{
	float:right;
	
} 
.subtopmenu  div div{
	float: left;
	*display:inline;
} 

/********************* End of  subtopmenu *********************/

/******************** Start of WCAG hidden msg ********************/
 .skip-link {
     position: relative;
     z-index: 1001;
}
 .skip-link__link {
     display: -moz-inline-stack;
     display: block;
     margin: 0;
     max-height: 0;
     color: #FFF;
     position: absolute;
     top: -5000px;
     left: -5000px;
}
 .skip-link__link:focus {
     max-height: 1920px;
     display: inline-block;
     padding: 15px;
     margin: 5px;
     outline: 3px solid #FFF;
	 color: #000000;
/*     text-decoration: underline;*/
     left: 20px;
     top: 20px;
     background-color: #FFA142;
}
 #skiptargetholder {
     display: block;
     margin: 0 auto;
     max-height: 0;
}
 #skiptargetholder #skiptarget {
     display: -moz-inline-stack;
     display: block;
     margin: 0;
     max-height: 0;
}
/******************** End of WCAG hidden msg ********************/


/**************** Start of WCAG2.0 AA color code **************/
.text{
	color: #006838;
}

.textblue{
	font-weight: bold;
	color: #231f20;
}

.textgreen{
	font-weight: bold;
	color: #003300;
}

.textred{
	font-weight: bold;
	color: #900;
}

.textblack{
	font-weight: bold;
	color: #000000;
}

.textBold{
	font-weight: bold;
}
.text11{
	color: #000000;
}
/*
.ldate{
}

.textsa{
}*/

.red{
	color: #990000;
}

.green{
	color: #003300;
}

.blue:link{
	color: #000000;

}
.blue:hover, .blue:focus {
	color: #b62b30;
	text-decoration: underline;
}
	
.black{
	color: #000000
}
/***************** End of WCAG2.0 AA color code ***************/



/********************* Start of text fonts ********************/
.textxs {
	font-size: x-small;
}


.smallText{
	text-align: justify;
	font-size: 75%;
}

.verySmallTextWithRightAlign{
	text-align: right;
}

.verySmallText{
	text-align: justify;
}

.verySmallTextVertical{
	vertical-align: top;
}

.smallTextBlue{
	color: #231f20;
	font-weight: bold;
	font-size: 75%;
}
/********************** End of text fonts *********************/



/******************** Start of new iconBar ********************/
.iconBarItem {
    cursor: pointer;
    padding-right: 15px;
}

.iconBarItemFont {
    color: #231F20;
    padding-top: 1px;
}

.iconBar {
    float: left;
    padding-top: 2px;
}

.iconBar a{
	font-size: 85%;
	margin-left:auto;
	margin-right:auto;
}

.iconBar:link {
	color: #231F20;
    text-decoration: none;
}

.iconBarItemPadding {
    padding-right: 3px;
}

.iconBarItemFont {
    color: #231F20;
    float: right;
    padding-top: 1px;
    text-decoration: none;
}

.iconBarItemFont:hover {
	color: #a6262c;
}

.iconBarItem:hover {
	color: #a6262c;

}

.iconBarItem2 {
    cursor: pointer;
    float: left;
    padding-left: 15px;
}

.iconBarItem3 {
    cursor: pointer;
    float: left;
    padding-left: 15px;
}
.iconBarItem4 {
    cursor: pointer;
    float: left;
    padding-left: 15px;
}
.iconBarItem5 {
    cursor: pointer;
    float: left;
    padding-left: 15px;
}

/******************** Start of new share ********************/

/*.shareItem {
    display: inline;
    float: left;
    padding-left: 0px;
    padding-top: 25px;
}*/

.shareItem
{
    float: left;
	display:inline;
	padding-top:25px;
	padding-left:12px;
}

/*a.shareItem {
	margin: 0px 4px;
    text-decoration: none;
}*/

a.shareItem 
{  
	margin:1px;
    text-decoration: none;
}

div.shareItem {
	float:left;
	margin: 6px;
    text-decoration: none;
}


a.shareItem img {
    vertical-align: bottom;
}
.sharepos {
    position: relative;
    z-index: 519;
}

.share_bg{
 visibility:hidden;
 width: 160px;
 height: 66px;
 position: absolute;
 top:14px;
 z-index:520;
 left:-50px;
 _left:-144px;
}

.share_content{
 visibility:hidden;
 width: 150px;
 height: 66px;
 position: absolute;
 top:12px;
 z-index:521;
 left:-40px;
 _left:-144px;
}
/********************* End of new iconBar *********************/



/***************** Start of ID featured item ******************/
#featured {
    background: transparent;
    border: 0 none;
    padding-right: 2px;
    position: relative;
    width: 100%;
	height: 200px;
	font-size: 16px;
}

#featured ul.ui-tabs-nav {
    list-style: none ;
    margin: 0;
    padding: 0;
    top: 0;
	height: auto;
	float: left;
	*width:540px;
	*height:60px;
}

#featured ul.ui-tabs-nav li {
   	display: inline-table;
	width: 177px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 98%;
	*margin-right: 0px;
	*width: 177px;
	*height: 50px;
}

#featured ul.ui-tabs-nav li img {
    background: transparent;
    border: 0 none;
    margin: 0;
    padding: 0;
}

#featured ul.ui-tabs-nav li span {
}

#featured ul.ui-tabs-nav li {
	background: #ddedda; 
	border: 1px solid #c0c0c0;
	display:table-cell;
   	*display: inline;
	color: #333333;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	*float: left;
}

/*#featured li.ui-tabs-nav-item a {
    background: #ddedda;
	border: 1px solid #c0c0c0;
    color: #333333;
	display: table-cell;
	height: 50px;
	text-align: center;
    text-decoration: none;
	width: 179px;
	*width: 181px;
	vertical-align: middle;
}
*/
#featured li.ui-tabs-nav-item a:hover {
	text-decoration: none;
}

#featured li.ui-tabs-selected {
}

#featured ul.ui-tabs-nav li.ui-tabs-selected {
    background: #9ecb74;
}

#featured .ui-tabs-panel {

}

#featured .ui-tabs-hide {
    display: none;
}

#Ma1, #Ma2, #Ma3 {
	font-size: 16px;
}
/****************** End of ID featured item *******************/


/****************** Start of General unorder list *******************/
ul{
    list-style:none;
    margin:0 0 0 15px;
    padding: 0;
}

ul li{
    line-height:1.5em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(../images/dot.png) no-repeat 0 0.6em;
}

ul li ul{
    list-style:none;
}

ul li ul li{
    line-height:1.5em;
    margin: .30em 0;
    padding: 0 0 0 15px;
    background:url(../images/level2.png) no-repeat 0 0.6em;	
}

ul li ul li ul{
    list-style:none;
}
ul li ul li ul li{
    line-height:1.5em;
    margin: .35em 0;
    padding: 0 0 0 15px;
    background:url(../images/level3.png) no-repeat 0 0.6em;	
}

ul li ul li ul li ul{
    list-style:none;
}

ul li ul li ul li ul li{
    line-height:1.5em;
    margin: .40em 0;
    padding: 0 0 0 15px;
    background:url(../images/level4.png) no-repeat 0 0.6em;	
}

ul li ol li{
	background: none;
}
ul li ul li ol li{
	background: none;
}
ul li ul li ul li ol li{
	background: none;
}

ol li{
	margin-bottom: 10px;
}
ol li ol li{
	margin-bottom: 10px;
}
ol li ol li ol li{
	margin-bottom: 10px;
}

/****************** End of General unorder list *******************/

/****************** Start of news unorder list ****************/
.newss-ul {
	list-style-image:url('../images/dot.png');
}

.newss-ul li{
	padding: 0 150px 10px 0;
}

.newss-ul a:hover{
	color: #B62A30;
}
/****************** End of news unorder list ******************/



/**************** Start of tax info list style ****************/
.taxinfo {
	line-height: 1.8em;
}
/*******	list-style-image:url('../images/arrow.png'); ******/
/***************** End of tax info list style *****************/



/**************** Start of tax video list style ***************/
.taxvideo {
	list-style: none;
}

.taxvideo  li{
	vertical-align: middle;
	line-height: 30px;
}
/***************** End of tax video list style ****************/



/********************** Start of arrows ***********************/
.arrowtop:link, .arrowtop:visited {
	color: #B62A30;
	background-image: url('../images/arrow_top.png');
	background-repeat: no-repeat;
	background-position:100% 57%; 
	padding-right:16px;
}

.arrowtop:hover, .arrowtop:focus {
	color: #006828;
	background-image: url('../images/arrow_top_o.png');
	background-position:100% 57%;
	background-repeat: no-repeat;
	text-decoration: none;           /* For better underline  */
	border-bottom: #006828 1px solid;/* to include images     */
	padding-right:16px;              /* under background      */
}

.arrowright:link, .arrowright:visited {
	background-image: url('../images/arrow_right.png');
	background-position:100% 57%; 
	background-repeat: no-repeat;
	color: #B62A30;
	padding-right:16px;
}

.arrowright:hover, .arrowright:focus{
	background-image: url('../images/arrow_right_o.png');
	background-position:100% 57%; 
	background-repeat: no-repeat;
	color: #006838;
	text-decoration: none;           /* For better underline  */
	border-bottom: #006828 1px solid;/* to include images     */
	padding-right:16px;              /* under background      */
}
/*********************** end of arrows ************************/



/********************* Start of home menu *********************/
.homemenu:link, .homemenu:active, .homemenu:visited{
	color: #b62a30;
}

.homemenu:hover{
	color: #006838;
	background:none;
}

.homemenu2:link, .homemenu2:active, .homemenu2:visited{
	color: #231F20;
}

.homemenu2:hover{
	color: #B62A30;
	background:none;
}
/********************** End of home menu **********************/



/************ Start of Organisation Chart boxmodel ************/
/*                           notice                           */
/*    This class is use for mapping the org chart to make     */
/*    words appear on it.                                     */
/*                                                            */
/**************************************************************/

.org_chart{/* The size of organisation Chart size */
	width: 601px;
	height: 546px; 
	font-weight: bold;
}

.org_chart .oLvbox{/* Commissioner's box */
	float: left;
	height: 170px;
	overflow-y: auto;
	padding-top: 10px;
	position: relative;
	text-align: center;
	width: 187px;
}

.org_chart .nLvbox{/* normal box */
	position: relative;
	width: 90px;
	height: 62px;
	float: left;
}

.org_chart a:hover,
.org_chart a:focus{
	text-decoration:none;
}
/************* End of Organisation Chart boxmodel *************/



/****** Start of specify style for No. of officers table ******/
.ppltable{
	width: 650px;
	border: 0px;
	padding: 4px;
	border-spacing: 2px;
}

.ppltable th{
	width: 25%;
	background-color: #BBE3B9;
	padding: 4px;
	border-spacing: 2px;
}

.ppltable td{
	text-align:center;
	width: 25%;
	background-color: #E9E9E9;
	height: 23px;
	padding: 4px;
	border-spacing: 2px;
}

.ppltable  .red td{
	background-color: #FEBCBE;
}

.ppltable  .red th{
	background-color: #FEBCBE;
}
/******* End of specify style for No. of officers table *******/



/*************************** Others ***************************/
.paddingleft20 {
    padding-left: 2px;
}

.overfocusul{
	text-decoration: none ;
}
.overfocusul:hover, .overfocusul:focus {
	text-decoration: underline ;
}

.toggle_div{
	cursor: pointer;
	margin-top: 10px;
}

.sub_category{
	color: #006;
	margin-top: 15px;
	*margin-bottom: 15px;
}
.sub_category div{
	margin-left: 15px;
}
.sub_category p {
	margin-top: 0px;
	margin-bottom: 0px;
}

.cat_abstract{
	color: #030;
	*margin-bottom: 15px;
}
.cat_abstract div{
	margin-left: 15px;
	margin-top: 15px;
}

.cat_abstract p{
	margin-top: 0px;
	margin-left: 14px;
}

.sub_category_container{
	margin-left:20px;
	margin-top:15px;
}

.question_container{
	margin-left:20px;
}

.question_container table{
	width: 100%;
}

.faq_title{
	font-weight: bold;
	vertical-align:top;
}

.faq_title p{
	margin-top: 0px;
	vertical-align:top;
}

.answer{
	vertical-align: top;
  padding-bottom: 5px;
}

.answer p{
	margin-top: 0px;
	vertical-align:top;
}

.questionNum{
	width:30px;
  vertical-align:top;
}

.questionLine{
	size:1px;
}

.hid_div{
	display: none;
}


.staticdisplay_KeyTable{
	border-color: transparent;
	border:none;
	border-collapse: separate;
	border-spacing: 2px;
}

.staticdisplay_KeyTable th{
	background-color: #eedadc;
	border-color: transparent;
	padding-left: 6px !important;
	padding-right: 6px !important;
}

.staticdisplay_KeyTable tr{
	border-color: transparent;
}

.staticdisplay_KeyTable td{
	border-color: transparent; 
    border-bottom-color: #FFFFFF; 
    border-right-color: #FFFFFF; 
	padding-left: 6px !important;
	padding-right: 6px !important;
}

.staticdisplay_KeyTable_border th{
	background-color: #eedadc;
	padding-left: 6px !important;
	padding-right: 6px !important;
}

.staticdisplay_KeyTable_border td{
	padding-left: 6px !important;
	padding-right: 6px !important;
}

table.red_table {
	/*
  border-collapse:separate;
	border-spacing: 2px 2px;
	*/
  border:3px solid red;
  width: 90%;
  /*border-color: #b2b2b2 #000 #000 #b2b2b2;*/
}

table.border_table {
	/*
  border-collapse:separate;
	border-spacing: 2px 2px;
	*/
  border:1px solid gray;
  border-style: outset;
  /*border-color: #b2b2b2 #000 #000 #b2b2b2;*/
}

.border_table>tbody>tr>th,.border_table>thead>tr>th{
	font-weight: normal;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 1px solid gray;
  border-style: inset;
  box-sizing: content-box;
  /*border-color: #000 #b2b2b2 #b2b2b2 #000;*/
}

.border_table>tbody>tr>td,.border_table>thead>tr>td{
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 1px solid gray;
  border-style: inset;
  box-sizing: content-box;
  /*border-color: #000 #b2b2b2 #b2b2b2 #000;*/
}

.print_view td{
	width: 100%;
}

p {
	display: block;
	/*
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
	*/
  /*
	margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0px;
  margin-right: 0px;
  */
}

#award-archived-area , #award-nonarchived-area, #awards-area{
	display: none;
}

@media print{
  table.border_table>tbody>tr>td[rowspan="3"]>p{
    float:left;
  }
}



/******************** Start of relocation ********************/

.relocation_header {
		color: #1A8452;
		font-family: "Arial";
		font-weight: bold;
		font-size: 20px;
}
.relocation_header2 {
		font-size: 16px;
}

img.headicon {
  vertical-align: text-top;
}

.relocation_text_green {
		font-weight: bold;
		color: #1A8452;
		font-size: 15px;
}
.relocation_text_red {
		color: #BA081B;
		font-weight: bold;
		font-size: 10px;
}
.relocation_text_blue {
		font-weight: bold;
		color: #43C2D9;
}

.relocation_text_grey {
		color: #454545;
		font-weight: bold;
	    font-size: 14px;
}


.relocation_container {
padding: 0px 0px 0px 0px;
width: 100%;
background-color: #ECF9FB; /*#F6FCFD*/
}


.relocation_block  {
background: rgba(0, 0, 0, 0);
}


.relocation_alternative_block {
background-color: #ffffff;
}

.relocation_container_content, .relocation_alternative_block {
padding: 10px 5% 10px 5%;
width: 100%;
}

/*
.relocation_container div:nth-child(even){
  background-color: #ffffff;
}
*/

.show_bar {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0);
}

.show_bar li {
  display: inline-block;
  padding: 20px;
    background: rgba(0, 0, 0, 0);
}

#schedule_table {
  border: 1px  solid;
}

#schedule_table td {
  padding: 0px 0px 0px 30px;
}

ul.green_dot {
  list-style-type: disc;
  margin-left: 45px;
  color: #1A8452;
  background: rgba(0, 0, 0, 0);
}

li.green_dot2 {
	margin: 0 0;
    padding: 0 0 0 0px;
    background: rgba(0, 0, 0, 0);
}

.schedule_bar {
	width:100px;
	height:100px;
	  padding: 0px 0px 0px 0px;
  background-image: url("../../images/abo/relocation/3dots.png");
  background-repeat: repeat-y;
}

#schedule_bar_table td {
  vertical-align: middle;
  padding-bottom: 60px;
}



.relocation {
  border-collapse: collapse;
  border: none;
  width: 100%;
  background-color: #ECF9FB;
}

.relocation td, .relocation th {
  border-left: 1px solid #43C2D9;
  padding: 12px 12px 12px 12px;
  vertical-align: middle;
}


.relocation th {
  text-align: left;
  background-color: #ffffff;
}

.relocation tr:nth-child(even){background-color: #FFFFFF;}
.relocation td:first-child, .relocation th:first-child { border-left: none; }
.relocation td:last-child, .relocation th:last-child { border-right: none; }


.relocation_container {
width: 100%;
}
.download_elements1, .download_elements2, .download_elements3 {
	  line-height: 25px;
	    float: left; 
		min-width: 50px; 
        height: 50px;
        box-sizing: border-box;

}
.contact_tel, .contact_email {
	    width: 50%;  
	    float: left; 
        padding-bottom: 30px;
        min-height: 50px;
        box-sizing: border-box;
}
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.contact_eservice, .contact_person {
width: 100%;
padding-bottom: 30px;
}

.arrowtop2:link, .arrowtop2:visited {
    color: #1A8452;
    background-image: url("../../images/abo/relocation/btn_top2.png");
    background-repeat: no-repeat;
    background-position:0% 40%;
    padding-left: 25px;
	line-height:200%;
}

/********************************************************
.relocation tr:hover {background-color: #ddd;}

/******************** end of relocation ********************/

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{
	background-color: #ddedda;
    height: 36px;
	padding-top:14px;
	left: 0 !important;
	width: 5% !important;
    padding-left: 0%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{
	right: 0;
    width: 95% !important;
}