/* =================================================================================================
	mobilestyle.css
	Mobile Style
================================================================================================= */


/* =================================================================================================
	COMMON ELEMENTS
================================================================================================= */
body, input{
	font-size:100%;
	color:#666;
}
.en, .en #searchBox, .button{
	font-family:Corbel, MuseoSans500, Helvetica, Arial, sans-serif;
}
.tc, .tc #searchBox, .tc .button{
	font-family:Helvetica, Arial, "Microsoft JhengHei", "simhei", MingLiU, sans-serif;
}
.sc, .sc #searchBox, .sc .button{
    font-family: Helvetica, Arial, "Microsoft YaHei", SimSun, sans-serif;
}

p, li, td {
	font-size:100%;
}

p, td {
	line-height: 1.5em;
	padding-top: 0.4em;
	padding-bottom: 0.2em;
	/*padding-bottom: 1em;*/
}


/*a:link{
	color:#930;
	text-decoration:none;
}
a:hover,a:active,a:focus{
	text-decoration:underline;
}*/
/*li{
	list-style-type:none;
	list-style-position:outside;
}*/
.floatedWrapper{
	width:100%;
	overflow:hidden;
}
.left{
	float:left;
	margin:0 5px 5px 0;
}
.right{
	float:right;
	margin:0 0 5px 5px;
}
.header{
	margin:5px 10px;
}
.first{
	border-top:1px solid #CCC;
}
.last{
	border:none !important;
}
.clear{
	clear:both;
}
.nowrap{
	white-space:nowrap;
}
.access {
	position:absolute;
	left:0;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}
/*.lite-image, .lite{
	display:block;
}*/
/* 20120516 remark arrow at right side
.more{
	font-size:81.25%;
	background:#FFF !important;
	border-top:1px solid #CCC !important;
	padding:0;
}
.more a{
	display:none;
	color:#930 !important;
	padding-right:21px !important;
	background:#FFF url(images/more.gif) no-repeat right center !important;
	font-weight:normal !important;
	line-height:1;
}
.more a:hover, .more a:active, .more a:focus{
	background:#EBD7A5 url(images/more.gif) no-repeat right center !important;
	text-decoration:none;
}
*/

/* 20120516: change to "moreLite" and move to left side  */
.moreLite {
	font-size:81.25%;
	background:#FFF !important;
	border-top:1px solid #CCC !important;
	padding:0;
	text-align:left;
}
.moreLite a{
	color:#427100 !important;
	padding-right:50px !important;
	font-weight:normal !important;
	line-height:1;
}
.moreLite a:hover, .moreLite a:active, .moreLite a:focus {
	background:#d1f6c9 !important; 
	text-decoration:none;
}

.moreLite span.moreArrow {
	padding-right:21px;
	background: url(images/more.gif) no-repeat right center !important; 
}


#lastUpdate{
	font-size:81.25%;
	padding:5px 10px;
}
.backToTop{
	margin:0;
	font-size:81.25%;
	border-top:1px solid #CCC;
}
.backToTop a{
	color:#930 !important;
	display:block;
	font-weight:normal;
	padding:5px 10px;
	background:#FFF url(images/backtotop.gif) no-repeat right center !important;
	text-decoration:none;
	line-height:1;
}
.backToTop a:hover, .backToTop a:active, .backToTop a:focus{
	background:#EBD7A5 url(images/backtotop.gif) no-repeat right center !important;
}
.button a, .button2 a{
	text-decoration:none;
}

.projekktor { /*hide video player in mobile version */
	display: none;
}

/* =================================================================================================
	GRID
================================================================================================= */
#wrapper{
	margin:auto;
	width:100%;
	min-width:240px;
	max-width:800px;
	background:#FFF;
	background:#FFF;
}
#branding{
	margin:auto 0;
}
#date{
	float:left;
	margin-left:5px;
}
#sitelogo {
	width: auto;
	max-width: 510px;
}
#topbar {
	margin: 0;
	width: auto;
}
#lang{
	float: right;
	margin: 0 !important;
}
#lang li {
	margin: 0;
	padding: 0;
}
#lang li {
	list-style: none;
	float: left;
	margin-right: 5px;
	border: solid 1px #eee;
	background: #ECF89C;
}
/* lang link */
#lang a {
	padding: 9px 15px;
	display: block;
	color: #000;
	font-size: 110%;
	background: #ecebeb;
}
#lang a:hover {
	background: #360;
	color: #fff;
	text-decoration: none;
}
/* lang dropdown */
#lang ul {
	background: #fff;
	padding: 0;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
}
#lang ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#lang li:hover > ul {
	display: block; /* show dropdown on hover */
}
#lang li.lang_lastitem {
	margin-right: 0 !important;
}
#sel-fb {
	font-size:20px !important;
}

#govhkSearch{
	background:url(images/search.gif) repeat-x
}
#searchBoxContainer{
	background:none;
	padding:3px 0 0 0;
}
#searchBox{
	height:28px;
	width:195px;
	margin-left:5px;
	background:url(images/searchbox.gif) no-repeat left top;
	font-size:16px;
}
#searchIcon{
	height:28px;
	width:30px;
	margin-right:5px;
	background:url(images/searchbox.gif) no-repeat right top;
}
#searchBox, #searchIcon{
	-webkit-border-radius:0;
}
#breadCrumb {
	font-size:75%;
	margin:10px 5px;
	padding:0;
	background:none;
	line-height:1.2;
}
#breadCrumb a:link{
	text-decoration:underline;
}
#breadCrumb a:hover,#breadCrumb a:focus,#breadCrumb a:active{
	text-decoration:none;
}
#menu, #other-langs{
	font-size:81.25%;
	line-height:1;
}
#other-langs{
    margin-bottom:30px;
}
#menu a, #other-langs a{
	display:block;
	text-decoration:none;
}
#menu h2, #other-langs h2{
	font-weight:normal;
	color:#000;
	background:#FFF url(images/collapsible.gif) no-repeat right -26px;
	border-bottom:1px solid #CCC;
	padding:6px 10px;
}
#menu h2 {
    border-top:1px solid #CCC;
}
#menu .last {
    border-bottom:1px solid #CCC !important;
}
#menu .hover, #other-langs .hover{
	background-color:#EBD7A5;
}
#menu .close, #other-langs .close{
	background-position:right top;
}
#menu li, #other-langs li{
	line-height:1;
}
#statement{
	margin-top:1em;
	font-size:75%;
	color:#999;
	line-height:1.2;
}



/* =================================================================================================
	BOX (EACH SECTION)
================================================================================================= */
.hr{
	width:100%;
	height:5px;
	margin:0;
	padding:0;
	background-color:#F0F0E8;
	border-top:1px solid #CCC;

	/* 20120810: add clear both (esp. for whatsnew) */
	clear:both;
	
}
/* 20121019: increase height "BetweenMenus" (hr) esp for bf */
.BetweenMenus {
	height:15px;
}
.box{
	clear:both;
	color:#333;
	font-size:100%;
}
.box, .box *{
	word-wrap:break-word;
}
.box li .box{
	border:none;
}
.box h1, .box h2, .box h3{font-size:120%;}
.box h1, .box h2{
	clear:both;
	background:#428333 url(../images/heading.gif) repeat-x;
	color:#FFF;
	padding:6px 10px;
	font-weight:normal;
}
.box h2 a{
	color:#000;
}
.box h3 a{
	display:block;
	clear:both;
	color:#FFF !important;
	background:#837E7A;
	padding:5px 10px;
	text-decoration:none;
}
.box h3 a:hover, .box h3 a:active, .box h3 a:focus{
	background:#C46A2B;
}
.box ul{
	clear:both;
	line-height:1.5;
}
.box ul li{
	border-bottom:1px solid #CCC;
}
.box dl{
	padding:5px;
}
.box table{
	/*wrap long text in table cell*/
	table-layout:fixed;
}
/*box with zebra color*/
.zebra ul li{
	border:none;
}
.zebra h4{
	font-weight:normal;
}

.zebra .alt{
	background:#E9E9E1;
}
.zebra li a{
	display:block;
	padding:8px 30px;
	color:#333;
	text-decoration:none;
}
.zebra li a:hover, .zebra li a:active, .zebra li a:focus{
	background:#dff698;
}



/* =================================================================================================
	HOMEPAGE
================================================================================================= */
#featureTitles {
	height:auto;
}
#featureTitles li h2{
	background:#FFF;
	color:#000;
	font-size:100%;
	font-weight:bold;
	padding:0;
}
#featureTitles li a{
	display:block;
	text-decoration:none;
	padding:6px 30px;
}
#featureTitles li a:hover, #featureTitles li a:active, #featureTitles li a:focus{
	background:#EBD7A5;
}
.weather{
	padding:10px;
	border-bottom:1px solid #CCC;
}
.weather img{
	vertical-align:middle;
	margin-right:5px;
}
.weather p{
	line-height:1.2;
	padding:0;
}
.weather span{
	line-height:1.5;
}

/* 20120830: add styles */
.weather .moreLite {
	margin-top:10px;
	border-bottom: 1px solid #CCCCCC;
}

/* 20100410: change more to moreLite */
.weather .moreLite a{
	display:block;
	padding:8px 10px;
}
/* 2012-08-07: added for combining weather with api */
#currentWarning a{
	float:none;
}
#weatherForecast a:link{
	text-decoration:underline;
}
#weatherForecast a:visited{
	color:#939;
	text-decoration:underline;
}
#weatherForecast a:hover,#weatherForecast a:focus,#weatherForecast a:active{
	text-decoration:none;
}
#weatherTemp{
	float:none;
	width:auto;
	text-align:left;
}
#currentWarning{
	padding:0;
}

/* 20120829: fix height by float none */
#currentWarning a {
	float:none;
}

#whatsHKTalking ul, #topOnlineServices ul {
	background:none;
}
.hpClusters li{
	background-color:#FFF;
}
#w3 {
    float:left;
}
#w3 a{
    display:block;
    float:left;
    margin-right:10px;
}

/* =================================================================================================
	SMART MENU
================================================================================================= */
#smartContent{
	float:none;
	width:100%;
	padding:0;
}
#smartContent li{
	border:none;
	margin:0;
	border-bottom:1px solid #CCC;
}
.contentItems li{
	position:relative;
	background-color:#FFF;
}
.contentItems li li{
	position:static;
	background-color:transparent;
}
.contentItems strong a{
	padding-right:60px;
}
#smartContent .clustersLegend{
	position:absolute;
	width:auto;
	margin:0 !important;
	right:10px;
	top:12px;
	line-height:1 !important;
}
#smartContent .clustersLegend li{
	margin:0 0 0 5px !important;
}
.subCategories h3, .subCategories h4{
	padding:5px 10px;
	font-weight:bold;
}
#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:none !important;
}
.subCategories .contentItems{
	padding:10px;
}
.subCategories .subCategories{
	padding:10px;
}
#smartMenuPage #legends{
	border-top:1px solid #CCC;
	padding:5px 0;
	margin:0;
	font-size:75%;
}
#smartMenuPage #legends li{
	/*padding:2px;*/
}

/* =================================================================================================
	NAVIGATION
================================================================================================= */
#navigation {
	background:none;
}
#navigation li{
	padding:0;
}
#navigation li a{
	padding:5px 10px;
	border-bottom:1px solid #CCC;
}
#navigation li a:hover,#navigation li a:focus,#navigation li a:active{
	background-color:#C46A28 !important;
}
#subNavigation{
	padding:0;
}
#subNavigation li{
	margin:0;
	padding:0;
}
#subNavigation li a{
	display:block;
	padding:8px 10px !important;
}

/* =================================================================================================
	GADGET
================================================================================================= */
.gadgetContainer,.gadget{background:none}


/* =================================================================================================
	RSS
================================================================================================= */
.rssList .url {width:58%;}
.rssList .subscribe {width:12%;}


/* =================================================================================================
	CONTENT / FAQ
================================================================================================= */
#article, #faq{
	margin-top:10px;
}
.content, .content h3{
	background-color:#FFF;
}
.content, .contentLink, .faq{
	margin-left: 10px;
	margin-right: 10px;
}
.content li, .contentLink li, .faq li{
	border:none !important;
}
.content a:hover, .content a:active, .content a:focus,
.contentLink a:hover, .contentLink a:active, .contentLink a:focus{
	text-decoration:underline !important;
}
.faqQuestion:hover, .faqQuestion:active, .faqQuestion:focus{
	text-decoration:none;
}

.faqAnswer a{
	color:#000;
}




/* =================================================================================================
	GOVT AGENCIES
================================================================================================= */
.govAgencyAlphabetical h3{
	padding:10px;
	background:#666;
	color:#FFF;
}
.govAgencyAlphabetical *, .govAgencyOrganisational *{
	line-height:1;
}
#govAgencyAlphabeticalList li{
	border:none;
}

/* =================================================================================================
	ONLINE SERVICES / ONLINE FORM
================================================================================================= */
#tabs{
	padding-left:5px;
	margin-bottom:10px;
}

#findOnlineServicesContainer, #findEFormsContainer {
	float:none;
	width:auto;
}
.onlineFullList li div {
	width:auto;
}
.onlineFullList li .onlineServicesLegend, .onlineFullList li .eFormsLegend{
	float:none;
	margin-left:1.8em;
}
#legends{
	margin-left:10px;
	margin-right:10px;
	width:auto;
}
#legends li{
	border:none;
}
/*override forms style*/
.eformsDetails{
	float:none !important;
	width:auto !important;
}
.eformsOthers{
	float:none !important;
	max-width:100% !important;
	width:auto !important;
}
.eformsFormats{
	background:none !important;
	padding-left:0 !important;
	margin-left:1.5em !important;
	float:left !important;
	margin-right:5px !important;
}
.eFormsLegend{
	float:left !important;
	width:auto !important;
	margin-left:0 !important;
}
.eFormsLegend a{
	margin-right:5px !important;
}


/* =================================================================================================
	SITEMAP
================================================================================================= */
#sitemap .clusters li h4 a{
	color:#333;
}
#sitemap .subcategories li li{
	border:none !important;
}

/* =================================================================================================
	COLLAPSIBLE
================================================================================================= */
.collapsibleTitle, .noncollapsibleTitle h3 a{
	background:none;
	color:#000 !important;
}
.noncollapsibleTitle h3 a{
	padding:10px;
}
.noncollapsibleTitle h3 a:hover, .noncollapsibleTitle h3 a:active, .noncollapsibleTitle h3 a:focus{
	background:#EBD7A5;
}

/* =================================================================================================
	SETTINGS
================================================================================================= */
#settings form{
	padding:10px;
}
#settings form p{
	margin-bottom:1em;
}
#settings form p input{
	vertical-align:text-top;
}
h2.settings{
	display:block;
	padding:20px;
	text-align:center;
	background:#FEFF9F;
	color:#F00;
	font-weight:normal;
}
#settings .button{
	color:#FFF;
	background:#333 url(images/button.gif) repeat-x;
	border:none;
	padding:2px 10px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}


/* =================================================================================================
	EXTERNAL / UNAVAILABLE PAGE
================================================================================================= */
.script{
	display:none;
}
#external-form{
	padding:10px;
}
#external-form p{
	margin-bottom:1em;
}
#external-form p input{
	vertical-align:text-top;
}
#unavailable{
	padding:0 5px;
}
#unavailable p{
	margin:1em 0;
}

/* =================================================================================================
	CLUSTER COLOR
================================================================================================= */
.business{
	color:#000;
	background:#D8D58D url(images/gloss.png) repeat-x;
	border:none;
}
.nonresidents{
	color:#000;
	background:#5BADCF url(images/gloss.png) repeat-x;
	border:none;
}
.communication{
	color:#FFF;
	background:#4B729E url(images/gloss.png) repeat-x;
	border:none;
}
.culture{
	color:#000;
	background:#78C2BD url(images/gloss.png) repeat-x;
	border:none;
}
.education{
	color:#FFF;
	background:#B15074 url(images/gloss.png) repeat-x;
	border:none;
}
.employment{
	color:#000;
	background:#EBDD52 url(images/gloss.png) repeat-x;
	border:none;
}
.environment{
	color:#FFF;
	background:#588144 url(images/gloss.png) repeat-x;
	border:none;
}
.government{
	color:#FFF;
	background:#7E6E9F url(images/gloss.png) repeat-x;
	border:none;
}
.health{
	color:#FFF;
	background:#9C2E2E url(images/gloss.png) repeat-x;
	border:none;
}
.housing{
	color:#FFF;
	background:#A15838 url(images/gloss.png) repeat-x;
	border:none;
}
.immigration{
	color:#FFF;
	background:#233F6E url(images/gloss.png) repeat-x;
	border:none;
}
.taxes{
	color:#000;
	background:#B1D561 url(images/gloss.png) repeat-x;
	border:none;
}
.transport{
	color:#000;
	background:#CBB6DA url(images/gloss.png) repeat-x;
	border:none;
}
/* =================================================================================================
	Announcement and footer message
================================================================================================= */
#announcement{
	border-top:1px solid #CCC;
}
#announcement p{
	padding:8px 10px;
}

/* =================================================================================================
	iPhone bookmark
================================================================================================= */
#iBookMark{
	background:transparent url(/mobile/images/iphone/iAddToHome.png) no-repeat center bottom;
	width:280px;
	height:145px;
	position:relative;
}
#iBookMark p{
	color:#FFF;
	font-family:Helectiva;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	padding-top:20px;
	line-height:1.2;
}
#iClose{
	position:absolute;
	right:5px;
	top:-5px;
	display:block;
	width:30px;
	height:30px;
	background:transparent url(/mobile/images/iphone/close.png) no-repeat;
	text-indent:-9999px;
}

/* 201012: add, other-langs added above */
/* =================================================================================================
	MultiLang
================================================================================================= */
/* For right-to-left language (pakistan), float right for some elements */
.pakistan .multiLangText { direction:rtl; } /* generic mark the right-to-left language */
.pakistan  #sitemap .content .multiLangText {display:block;  }
.pakistan  #sitemapList .multiLangText { float:right;  }
.pakistan  #sitemapList .clusters h4 .multiLangText { padding-right:28px;  }  /* avoid arrow */
.pakistan  #sitemapList .subcategories li {
	overflow:hidden;  /* note:will remove bullet point */
}
.pakistan  #sitemapList .subcategories a:hover .multiLangText,
.pakistan  #sitemapList .subcategories a:active .multiLangText,
.pakistan  #sitemapList .subcategories a:focus .multiLangText
{text-decoration:underline;}
/* fix the underline of link */

/* 20110512: hide eprocurement search (last item), display other subMenu */
.theme.eprocurement #navigation .last {
	display:none;
}
.theme.eprocurement #subNavigation .last {
	display:block;
}

/* 20110531: remark hide Flash content */
/*	hide for wifi to see
object, embed {
	display:none;
}
*/

/* 20120810: add for share Icons */
/* =================================================================================================
	Share Icons (Homepage)
================================================================================================= */
.shareIcons {
	display:block;
	float:left;
	clear:both;
	width:100%;
	
	/*
	padding:0;
	margin:0;
	*/
	border:0; 	/* override layout.css border-bottom */
	border-top:1px solid #CCCCCC;
	
}

/*
.box .shareIcons {
	clear:both;
}
*/

.shareIcons ul {
	display:block;
	clear:none;
	float:left;
	padding: 0px 30px;
}


.shareIcons li {
	display:inline;
	clear:none;
	/*
	padding:0;
	margin:0;
	*/
	line-height:10px;	/* 20120810: set a line-height smaller than images height */
}


/* 20120823: add first and last img to override layout.css */
.shareIcons img,
.shareIcons li:first-child img,
.shareIcons li.last img {
	/* 20120810: hide the dimension
	width:30px;
	height:30px;
	*/
	padding:0;
	margin:0;
}

.shareIcons li, .shareIcons li a {
	display:block;
	float:left;
	clear:none;
	padding:0;
}
.shareIcons li {
	margin:0;
}
.shareIcons li a {
	margin:0 10px 0 0 ;
}

td {
	padding: 5px 10px 5px 5px;
}

.mbodycontent {
	padding: 5px 10px;
	clear: both;
}


/*20150614 Fix for FDRC */
ul, ol {
	list-style-position: outside !important;
	margin-left: 0 !important;
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}
ul li, ol li {
	margin-left: 1.4em;
}

ul.mfront li, ol.mfront li {
	margin-left: 0;
}

ul li p, ol li p {
	margin: 0 !important;
	padding: 0.4em 0 0 0 !important;
}

ol.bulletnumber {
	/*padding-left: 0.6em !important;*/
}

div.jp-audio,
div.jp-video {
	display: none !important;
}

.videomessage {
	display: none !important;
}

img {
	width: auto;
}

.bulletarrowdigital {
	list-style-type: square;
	list-style-image: url(../images/img_bullet_arrowdigital.gif);
	line-height: 1.4em;
	margin-left: 0px;
	padding-left: 1.4em;
}
.bulletarrowdigital_profiletitle {
	list-style-type: square;
	list-style-image: url(../images/img_bullet_arrowdigital.gif);
	line-height: 1em;
	margin-left: 0px;
	padding-left: 0.85em;
	width: 380px;
}
.bulletarrowdigital_profiletitle li{
	color: #999;
	font-size: small;
	line-height: 1.3em;
}
.td_bordertop {
	border-top: 1px solid #ddd;
}
.td_borderbottom {
	border-bottom: 1px solid #ddd;
}
.td_borderleft {
	border-left: 1px solid #ddd;
}
.td_borderright {
	border-right: 1px solid #ddd;
}
.td_bordertopbottom {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.td_borderleftright {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.td_border_dot_top {
	border-top: 1px dotted #ccc;
}
.td_border_dot_bottom {
	border-bottom: 1px dotted #ccc;
}
.td_border_dot_left {
	border-left: 1px dotted #ccc;
}
.td_border_dot_right {
	border-right: 1px dotted #ccc;
}
.td_border_dot_topbottom {
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}
.td_border_dot_leftright {
	border-left: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
}
.td_head_blue0 {
	background-color: #2F73B7;
	color: #fff;
}
.td_blue0 {
	background-color: #488CD0;
}
.td_blue1 {
	background-color: #e6edf1;
}
.td_blue2 {
	background-color: #edf7f8;
}
.td_blue3 {
	background-color: #f5f9fA;
}
.td_head_green0 {
	background-color: #46992B;
	color: #fff;
}
.td_green0 {
	background-color: #46992B;
}
.td_green1 {
	background-color: #ecf5e4;
}
.td_green2 {
	background-color: #edf8ee;
}

/*Enable Mobile links and Disable Desktop version links*/
a.desktop_link {
	display: none;
}

a.mobile_link {
	display: inherit;
}


.nopadding {
	padding: 0;
}
.nomargin {
	margin: 0;
}

.frontbanner {
	width: auto;
	margin: 5px 0 0 0;
	clear: both;
	height: auto;
	max-height: 450px;
	overflow: hidden;
}

.frontbanner img {
	margin: 0 auto;
}

a.go2top:link {
	font-size: 105%; /* For mobile version */
	font-weight: bold;
	padding: 7px 10px; /* For mobile version */
	color: #fff; /* For mobile version */
	background-color: #4A9500; /* For mobile version */
	text-decoration: none;
	margin: 0px 3px;
}

a.go2top:hover {
	font-size: 120%; /* For mobile version */
	padding: 7px 10px; /* For mobile version */
	color: #fff; /* For mobile version */
	background-color: #65CA00; /* For mobile version */
	text-decoration: none;
}

a.go2top:visited {
	padding: 7px 10px; /* For mobile version */
	color: #fff; /* For mobile version */
	background-color: #4A9500; /* For mobile version */
	text-decoration: none;
}

.boxgreendotborder {
	border:1px dotted #99CC66;
	padding:10px;
}

.boxgreydotborder {
	border:1px dotted #BBBBBB;
	padding:10px;
}


/************************************************************************************
GENERAL
*************************************************************************************/
body {
	font: 1em/150% Helvetica, Arial, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 
	/*"MHei PRC Medium", "Hiragino Kaku Gothic Pro W3",*/ /* For Mac OSX" */ /*"微软正黑体", */ Microsoft YaHei, "微软雅黑",   /* For Windows Vista or 7 with Office 07 */ SimHei, "黑体", STXihei, "华文细黑", /*"MS PGothic",*/  /* For Windows with this font */ Helvetica, Arial, sans-serif; /* For Other Platforms */
	font-weight: normal;
	line-height: 120%;
}

h1 {
	color: #1b350f;
	font-size: 160%;
	margin-bottom: 14px;
}
h2 {
	color: #1b350f;
	font-size: 135%;
	margin-bottom: 14px;
}
h3 {
	color: #224c0e;
	font-size: 125%;
	margin-bottom: 12px;
}
h4 {
	color: #2d6313;
	font-size: 115%;
	margin-bottom: 11px;
}
h5 {
	color: #222;
	font-size: 110%;
	margin-bottom: 9px;
}
h6 {
	color: #000;
	font-size: 105%;
	margin-top: 4px;
	margin-bottom: 8px;
}

header {
	content: " "; 
	display: table; 
}

form select, form input, form textarea {
	width: 100%;
	border: 1px solid #999;
}

form input.submit {
	width: auto;
	font-size: 100%;
	padding: 0.5em;
}


/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 30px auto 0;
}
#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
}

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin-top: 20px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #360;
	color: #fff;
	text-decoration: none;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 0;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
}
#nav ul li {
	float: none;
	/*margin: 0;*/
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/* image with fix size in mobile version */
img.fixsizeimage {
	width: auto !important;
	height: auto !important;
}
	
/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 720px) {
	img {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {

	#sitelogo {
		width: 100%;
	}

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menuPositionLayer - addition layer for mobile device positioning */
	#menuPositionLayer {
		position: absolute;
		/*width: 100%;*/
		top: -60px;
		left: 0;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		font-size: 105%;
		width: 42px;
		height: 30px;
		background: #9C6 url("../images/icon-menu.png") no-repeat 10px center;
		padding: 11px 10px 1px 42px;
		cursor: pointer;
		/*border: solid 1px #693;*/
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		color: #fff;
		background-color: #360;
	}
	#menu-icon.active {
		/*width: 100%;*/
		background-color: #9c6;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		/*width: 100%;*/
		width: 320px; /* Same width with the @media screen and (max-width: 600px) */
		z-index: 10000;
		padding: 0;
		margin: 0 !important;
		background: #f8f8f8;
		border: dotted 1px #ccc;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 0 /*5px 0 5px 10px*/;
	}
	#nav a, 
	#nav ul a {
		font-size: 110%;
		background: none;
		display: block;
		color: #666;
		border: none;
		padding: 10px 13px 8px 13px;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: #360;
		color: #fff;
		text-decoration: none;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

	/* maincontent series - Mobile Friendly - Started */
	
	.mbodycontent {
		padding: 0 1px 0 5px;
	}

	.maincontenttextbox, .maincontentfullbox {
		padding: 0;
	}

	/* how2becomeMnA - Mobile Friendly - Started */
	
	div.how2becomeMnAHeader {
		width: 100%;
		height: auto;
		overflow: hidden;
		/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-webkit-border-radius: 0px; 
		/* Firefox 1-3.6 */
		-moz-border-radius: 0px; 
		/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		border-radius: 0px;
		background: #539f44;
	}
	div.how2becomeMnAHeader .head1 {
		width: 100%;
		height: auto;
		border: 1px solid #afd137;
		float: none;
	}
	div.how2becomeMnAHeader .head1 p {
		color: #FBF5B4;
		font-size: 100%;
		font-weight: bold;
		margin: 10px 20px;
		padding-top: 0;
	}
	div.how2becomeMnAHeader .head2 {
		display: none;
	}
	
	div.how2becomeMnAContent {
		width: 98%;
		height: auto;
		overflow: hidden;
		/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-webkit-border-radius: 0px;
		/* Firefox 1-3.6 */
		-moz-border-radius: 0px;
		/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		border-radius: 0px;
		border: 1px solid #afd137;
		margin: 0 0 0 1%;
	
		background: #f6fcf2; /* Old browsers */
	}
	div.how2becomeMnAContentAddOnBox {
		width: 98%;
		height: auto;
		overflow: hidden;
		/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-webkit-border-radius: 0px;
		/* Firefox 1-3.6 */
		-moz-border-radius: 0px;
		/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		border-radius: 0px;
		border: 1px solid #afd137;
		margin: 0 0 0 1%;

		background: #f6fcf2; /* Old browsers */
	}
	div.how2becomeMnAContent .content1,
	div.how2becomeMnAContentAddOnBox .content1 {
		width: 100%;
		height: auto;
		float: left;
		
		background: #dcf1c8; /* Old browsers */
	}
	div.how2becomeMnAContent .content1 p, 
	div.how2becomeMnAContentAddOnBox .content1 p, 
	div.how2becomeMnAContent .content1 li, 
	div.how2becomeMnAContentAddOnBox .content1 li {
		color: #111111;
		font-size: 90%;
		text-shadow: 1px 1px #fff;
		padding: 5px 20px;
	}
	div.how2becomeMnAContent .content1 ol, 
	div.how2becomeMnAContentAddOnBox .content1 ol, 
	div.how2becomeMnAContent .content1 ul, 
	div.how2becomeMnAContentAddOnBox .content1 ul {
		margin: 10px 15px;
	}
	div.how2becomeMnAContent .content2, 
	div.how2becomeMnAContentAddOnBox .content2 {
		width: 268px;
		height: auto;
		float: left;
	}
	div.how2becomeMnAContent .content2 p, 
	div.how2becomeMnAContentAddOnBox .content2 p {
		color: #111111;
		font-size: 80%;
		margin: 10px 20px;
	}
	div.how2becomeMnAContent .content2 li, 
	div.how2becomeMnAContentAddOnBox .content2 li {
		color: #111111;
		font-size: 80%;
	}
	div.how2becomeMnAContent .content2 ul, 
	div.how2becomeMnAContentAddOnBox .content2 ul {
		margin: 10px 15px;
	}
	.how2becomeMnAContentRemarks {
		margin: 10px 20px !important;
		font-size: 90%;
	}
	.how2becomeMnAContentRemarks li {
		/*font-size: 80%;*/
	}
	p.how2becomeMnAContentArrow {
		margin: 0 0 0 45%;
	}
	/* how2becomeMnA - Mobile Friendly - Ended */

	.boardmembertitles {
		font-size: 80% !important;
	}

	a.go2top:link {
		font-size: 110%; /* For mobile version */
		font-weight: normal; /* For mobile version */
		padding: 6px 13px; /* For mobile version */
		color: #fff; /* For mobile version */
		background-color: #4A9500; /* For mobile version */
		text-decoration: none;
		margin: 0px 3px;
	}
	
	a.go2top:hover {
		font-size: 120%; /* For mobile version */
		padding: 6px 13px; /* For mobile version */
		color: #fff; /* For mobile version */
		background-color: #65CA00; /* For mobile version */
		text-decoration: none;
	}
	
	a.go2top:visited {
		padding: 6px 13px; /* For mobile version */
		color: #fff; /* For mobile version */
		background-color: #4A9500; /* For mobile version */
		text-decoration: none;
	}
	
	.responsive-stacked-table thead, .responsive-stacked-table .empty {
		display: none;
	}

	.responsive-stacked-table tr,
	.responsive-stacked-table th,
	.responsive-stacked-table td {
		display: block;
		width: auto;
		border: 0px solid #fff;
		font-size: 100%;
	}
	
	.responsive-stacked-table tr td:first-child {
		font-weight: bold;
		color: #666;
	}
	
	.responsive-stacked-table .img2colgallery, .responsive-stacked-table .img2colgallery_590px {
		width: 100%;
	}
	
	.responsive-stacked-table .facilities_title {
		padding: 5px 5px 0 5px;
	}
	
	.responsive-stacked-table .facilities_title h6 {
		font-size: 120%;
	}
	
	.responsive-stacked-table .moreinfo {
		text-align: left;
		padding: 0 5px 10px 5px;
	}

	.photogallery td { /* To maximise the photo width in smartphone */
		padding: 0;
	}
	
	.tablelist td { /* To optimize the height of list in smartphone */
		padding: 0;
	}
	
	.tablelist .tablelisthead {
		font-size: large;
		padding-top: 0.7em;
	}
	
	.boxlightgreen { /* For Download button in 'Audio' */
		width: 50%;
		text-align: center;
		margin: 0.6em auto 0.5em auto;
		padding-top: 0.3em;
		padding-bottom: 0.3em;
	}
	
	form select, form input, form textarea {
		width: 100%;
		font-size: 100%;
		border: 1px solid #999;
	}

	form input.submit {
		font-size: 100%;
		padding: 0.5em;
	}

}

/*@media screen and (max-width: 430px) { settings without fb icon */
@media screen and (max-width: 530px) {
	.o_element_s {
		display: none !important;
	}
}

/*@media screen and (max-width: 370px) { settings without fb icon*/
@media screen and (max-width: 430px) {
	#sel-fb {
		background-color: #36C !important;
		color: white !important;
		font-size:20px !important;
	}
	.o_element_ss {
		display: none !important;
	}
}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}
	.responsive-stacked-table .img2colgallery {
		width: 320px; /*Must change the same css class in divstyle.css*/
	}
	.responsive-stacked-table .img2colgallery_590px {
		width: 590px;
	}

}