=================================================================================================
	layout.css
	LAYOUT GRID

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



/* =================================================================================================
	WRAPPER
================================================================================================= */
body {
	margin:0;
	padding:0;
}
#wrapper{
	width:100%;

}
#pageContainer{
	margin:auto;
	
	overflow:hidden;
	height:100%;
	min-height:100%;
}




/* =================================================================================================
	GENERIC ELEMENTS
================================================================================================= */
a {padding:0;border:0;color: #269ED2;}
a:link, a:visited {	color:#269ed2;text-decoration:none;}
a:hover, a:active, a:focus {color:#269ed2;text-decoration:none;}
a:visited {	
/* color:#269ed2; */
color:#007DBB;
}

.more{
	text-align:right;
	padding-right:10px;
	
}

  .separatorLine{
  letter-spacing: 7px;
}

.contentStar{
  background: url("/english/image/general/star.png") no-repeat scroll 0 3px transparent;
  float: left;
    height: 23px;
    //margin-top: 3px;
    padding-left: 25px;
    //width: 18px;
}

.contentStar_h3{
  background: url("/english/image/general/star.png") no-repeat scroll 0 0 transparent;
  float: left;
    height: 17px;
    margin-top: 11px;
    padding-right: 7px;
    width: 18px;
}

.contentCircle{
  background: url("/english/image/general/_-27_1.png") no-repeat scroll 0 0 transparent;
  float: left;
    height: 17px;
    margin-top: 3px;
    padding-right: 7px;
    width: 18px;
}

  .contentLeft{
    float: left;
  }

  .lessWidth{
  width:385px;
  }
  
  .contentRight{
    float: left;
    width: 310px;
  }

.bottomBtn{
    margin: 0 auto;
    width: 695px;
    float: left;
}

  .contentText{
    float: left;
    font-size: 12px;
    text-align: justify;
  }

.lessLineHeight{
  line-height:25px;
}



.press{
	text-align:right;
	padding-right:10px;
	
}

.back{
text-align:left;
padding-right:10px;
}

.top{

	text-align:right;
	padding-right:10px;	
}




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

#languageSelector{
	margin-top:5px;
}
.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;
}

#searchBoxContainer{
	padding:7px 0;
	float:left;
}
#searchForm{
	padding:0;
	margin:0;
}
#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;
}




/* =================================================================================================
	WEATHER (SIDEBAR)
================================================================================================= */
#weather{
	width:240px;
/*font-size:1.3em;*/
	color:#2C2C2C;
}


/*hide error by default*/




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

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


/* =================================================================================================
	Homepage Highlights
================================================================================================= */
.highlight_header{
	height: 20px;
	position: relative;
	margin-left: 20px;
}

.highlightTitle {
	left: -180px;
	position: relative;
	top: -8px;
}

.scrolling_button{
/*	position: relative;*/
	float:right;
/*	height: 17px;
	*height: 0px;*/
	
}

div.horizontal_scroller, div.vertical_scroller{
	position:relative;
	height:24px;
	display:block;
	overflow:hidden;
	width:100%;
	height:480px;
}
div.scrollingtext{
	position:absolute;
	color:#000000;
	margin-left:20px;

}
#highlight_sidebar {
    color: #212121;
    float:left;
    margin:0 0 24px;
    width:100%;
	height: 100%;
    overflow: hidden;
    position: relative; 
}
 
#highlight_sidebar ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
}
	
#highlight_sidebar li {
    height: auto;
    overflow: hidden;
	width: 750px;
	margin-bottom: 0.5em;
}
 
#highlight_sidebar li h5 {
    color:#A5A9AB;
    margin-bottom:-0.5em;
	margin-top: 0;
}
 
#highlight_sidebar li h5 a {
    color:#212121;
    text-decoration:none;
}
 
#highlight_sidebar li img {
    margin-right:8px;  
	display:inline;
	vertical-align:top;

}
 
#highlight_sidebar li .info {
    color:#808080;
}

#highlight_sidebar .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;  
}
 
#highlight_sidebar {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#play_click{
	width: 15px;
	text-indent: -9999px;
	display: block;
	cursor: pointer;
	margin-top: -20px;
	margin-left: 510px;
    position: relative;
}

#stop_click{
	width: 15px;
	text-indent: -9999px;
	display: block;
	cursor: pointer;
	margin-top: -15px;
	margin-left: 535px;
	position: relative;
}
#play_click2{
	width: 15px;
	text-indent: -9999px;
	display: none;
	cursor: pointer;
	margin-top: -20px;
	margin-left: 510px;
    position: relative;
}

#stop_click2{
	width: 15px;
	text-indent: -9999px;
	display: none;
	cursor: pointer;
	margin-top: -15px;
	margin-left: 535px;
	position: relative;
}

td.tableMore  a{
	color: #06F;
	text-decoration: none;
}

td.tableMore a:hover {

    text-decoration: underline;
}

td.tableDate {
	color: #6e6767;
}

td.tableContent{
	margin: -100px;
}

td.tableTitle {
	color: #1E486E;
}

td.tableTitle a{
	color: #06F;
	text-decoration: none;
}

td.tableTitle a:visited{

	color: #1E486E;
}


td.tableTitle:hover {

    text-decoration: underline;
}





#mousecolor1{
	background-color: #FFFFFF;
}

.itf-event-info-block{
  background-color: #efefef;
  width: 100%;
  display: block;
  margin-bottom: 20px;
  .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.2));
}
  P{
    text-align: justify;
  }
  h4{
    margin-bottom: 0;
    margin-top: 10px;
  }
  .itf-event-info-block-table{
    padding: 10px;
    width: 100%;
    td{
      padding: 0 30px 5px 30px;
    }
  }
  .event-info-table-left{
	padding: 0 5px 5px;
    width: 50px;
    text-align: center;
    background-color: #D9EDF7;
    
    &:hover{
      background-color: darken(#D9EDF7, 8%)
    }
  }
  
  .event-info-table-left img{
      margin-top: 10px;
      margin-bottom: 10px;
      width: 50px;
    }

.event_text
{
	font-size: 15px !important;
}
.fonth1{
  display:block;
  padding:15px;
  padding-bottom: 5px;
  font-size:18px;
  font-weight:bold;
  }
.fonth2{
  display:block;
  padding:4px;
  padding-left:0px;
  font-size:15px;
  font-weight:bold;
  }
.fonth3{
  display:block;
  padding:0 33px;
  //padding-bottom: 5px;
  font-size:18px;
  font-weight:bold;
  }
dl {
	font-size: 14px;
}



#mainnav1{
}
ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}
dl {
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 20px;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 10px;
}
.dl-horizontal {
  *zoom: 1;
}
.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  content: "";
  line-height: 0;
}
.dl-horizontal:after {
  clear: both;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}
.dl-horizontal dt {
    text-align: left;
}





/* =================================================================================================
	Menu Style
================================================================================================= */


.graphite {
    background-color: #DEDEDD;
    float: left;
    /*margin-top: 2px;*/
    margin-top: 60px;
    width: 100%;
}


.accordion{
	border: medium none;
	list-style-type: none;
	padding-top: 16px;
	margin-left: 10px;
  margin-right: 10px;
	//font: bold 0.8em Arial,sans-serif;
	margin-bottom: 20px;
}

ul, ul li{list-style-type: disc;}
ul.text {margin-bottom: 1em; line-height: 1.5em;}
.text-center {text-align: center;}
body {font: normal 13px Arial, sans-serif;}
/*h2 {font: normal 26px Arial, sans-serif; padding: 20px 0; margin: 0 0 30px 0;}*/
.wrap {width: 960px; margin: 0 auto;}

.demo-container h4 {font-size: 14px; margin: 0 0 5px 0;}
.clear {clear: both;}

.dcjq-count {float: right;}

.accordion li {
    border: medium none;
    list-style-type: none;
    /*padding-top: 2px;*/
    /*line-height: 32px;*/
    /*line-height: 33px;*/
    /*padding-top: 1px;*/
    padding-top: 10px;
    /*margin-top: -1px;*/
    margin-top: -10px;
    /*background: linear-gradient(to bottom, #028BCE 0%, #1C467A 100%) repeat-x scroll 0 0 rgba(0, 0, 0, 0);*/
}


.accordion a, .accordion a:link{
    /*background: linear-gradient(to bottom, #028BCE 0%, #1C467A 100%) repeat-x scroll 0 0 rgba(0, 0, 0, 0);*/
    font-size:2.2em;
    //border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding-left: 4px;
    padding-top: 13px;
    position: relative;
    text-decoration: none;

    /*background: -moz-linear-gradient(top,  #028BCE 0%, #1C467A 100%); /* FF3.6+ */
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#028BCE), color-stop(100%,#1C467A)); /* Chrome,Safari4+ */
  /*background: -webkit-linear-gradient(top,  #028BCE 0%,#1C467A 100%); /* Chrome10+,Safari5.1+ */
  /*background: -o-linear-gradient(top,  #028BCE 0%,#1C467A 100%); /* Opera 11.10+ */
  /*background: -ms-linear-gradient(top,  #028BCE 0%,#1C467A 100%); /* IE10+ */
  /*background: linear-gradient(to bottom,  #028BCE 0%,#1C467A 100%); /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E7FA4', endColorstr='#2a3345',GradientType=0 ); /* IE6-8 */
  /*background-repeat:repeat-x;*/
}

/*.m_layer3 a:hover {
    background-color: #FFFFFF;
    colo/r: #000000;
    height: auto;
    margin-left: -10px;
    padding-left: 23px;
    width: 97%;
}*/

.m_layer3 {
    border: medium none;
    list-style-type: none;
    margin-left: 10px;
    //padding-top: 2px;
}

.m_layer4{
  padding-left: 20px;
}


.accordion img {
    /*dot image*/
/*z-index:999;
width:15px;
height:15px;
float:right;
position: relative;
top:-33px;*/

}
.menuimg{

z-index:999;
margin-left:-50px;
float:right;
position: relative;
top:-46px;


}

.m_layer2, .m_layer3, .m_layer4, .m_layer2 li, .m_layer3 li, .m_layer4 li{
  height: 0;
  transition: height 1s ease 0s;

}
.m_layer2 li a{
  height: auto;
  /*background-color:#FFFFFF;*/
}
.expand_menu_ul, .expand_menu_ul li{
  height: auto;
}

.accordion > li > ul > li > a, .accordion > li > ul > li > a:link{
    background: #DEDEDD;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DEDEDD', endColorstr='#DEDEDD',GradientType=0 ); /* IE6-8 */
    color: #000000;
    height: auto;
}
.accordion > li > ul > li > ul > li > a, .accordion > li > ul > li > ul > li > a:link{
    background: #DEDEDD;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DEDEDD', endColorstr='#DEDEDD',GradientType=0 ); /* IE6-8 */
    color: #000000;
    height: auto;
}

#m_layer1_4 #m_layer2_0 > a, #m_layer1_4 #m_layer2_0 > a:link {
    background-color: #2A3445;
    height: auto;
}

#m_layer1_4 #m_layer2_1 > a, #m_layer1_4 #m_layer2_1 > a:link {
    background-color: #FBCDCB;
    color: #000000;
    height: auto;
}

#m_layer1_4 #m_layer2_2 > a, #m_layer1_4 #m_layer2_2 > a:link {
    background-color: #048945;
    height: auto;
}

.m_layer3 a, .m_layer3 a:link {
    background-color: #DEDEDD;
    color: #000000;
    height: auto;
    margin-left: -10px;
    padding-left: 23px;
    width: 97%;
}

#accordionlv1>:first-child,#accordionlv2>:first-child,#accordionlv1>:first-child,#accordionlv1>:first-child,#accordionlv1>:first-child,#accordionlv1>:first-child,#accordionlv1>:first-child,#accordionlv1>:first-child,#accordionlv1>:first-child,#m_layer1_9>:first-child,#m_layer1_10>:first-child {
  background: -moz-linear-gradient(top,  #028BCE 0%, #1C467A 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#028BCE), color-stop(100%,#1C467A)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #028BCE 0%,#1C467A 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #028BCE 0%,#1C467A 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #028BCE 0%,#1C467A 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #028BCE 0%,#1C467A 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E7FA4', endColorstr='#2a3345',GradientType=0 ); /* IE6-8 */
  background-repeat:repeat-x;
}
/* ----------------------------- end menu style ---------------------------