/*
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	font-family: 'Open Sans', sans-serif;
}

html{
	background: url('../images/bg.png') repeat;
}

a, a:focus, a:hover, a:visited{
	text-decoration: none;
}

a, a:visited{
	color: #85B200;;
}

/*
a:hover, a:focus{
	opacity: 0.8;
}
*/

.index-container{
	width:1000px; margin:auto;
}

.container{
	width:1000px; margin:auto;
}

.col-2{
	width: 16.66%;
	float: left;
}
.col-3{
	width: 25%;
	float: left;
}
.col-4{
	width: 33%;
	float: left;
}

.col-5{
	width: 40%;
	float: left;
}
.col-6{
	width: 50%;
	float: left;
}

.col-7{
	width: 60%;
	float: left;
}

.col-8{
	width: 67%;
	float: left;
}

.col-9{
	width: 75%;
	float: left;
}

.col-12{
	width: 100%;
}

.float-left{float: left;}
.float-right{float: right;}

.clear{
	float: none;
	clear: both;
}

i.ita{
	font-style: italic;
}

/* standard header */

#header-logo{
	float: left;
	background: url('../images/logo_all.png') no-repeat center center;
	height:60px;
	overflow: hidden;
	margin-left: 0;
    width: 350px;
}

#header-logo-zh{
	margin-left: 20px;
	float: left;
	background: url('../images/logo_all.png') no-repeat center center;
	width:300px;
	height:60px;
	overflow: hidden;
}

/*
#header-logo{
	float: left;
	background: url('../images/logo.png') no-repeat center center;
	height:60px;
	overflow: hidden;
	margin-left: 0;
    width: 350px;
}

#header-logo-zh{
	margin-left: 20px;
	float: left;
	background: url('../images/logo-zh.png') no-repeat center center;
	width:300px;
	height:60px;
	overflow: hidden;
}
*/

#header-logo-hkbu{
	/*margin-left: 20px;*/
	float: left;
	background: url('../images/logo_hkbu.png') no-repeat center center;
	/*width:300px;*/
	height:60px;
	overflow: hidden;
	margin-left: 0;
    width: 200px;
	background-size: auto 60px;
}
#header-logo-sepline{
	/*margin-left: 20px;*/
	float: left;
	background: url('../images/sepline.png') no-repeat center center;
	/*width:300px;*/
	height:60px;
	overflow: hidden;
	margin-left: 0;
    width: 18px;
}
#header-logo-sus{
	/*margin-left: 20px;*/
	float: left;
	background: url('../images/logo_sus.png') no-repeat center center;
	/*width:300px;*/
	height:60px;
	overflow: hidden;
	margin-left: 0;
    width: 130px;
}

.nav-container{
	width: 100%;
    height: 60px;
	/*border-bottom: 4px solid #000;*/
	background: url('../images/menu-bottom.fw.png') no-repeat bottom center #fff;
}

#navbar {
	width: 1020px;
	margin: auto;
	z-index: 20;
    position: relative;
    /* margin-left: 25%; */
    /*border: 5px solid green;
    border-radius: 10px;*/
    /* width: 55%; */
}

#navbar ul {
	font-size: 14px;
	letter-spacing: 0.3px;
    display: inline-block;
	margin-left: 5px;
    /* position: absolute; */
	float:left;
}

#navbar > ul  > li{
	border-left: 1px solid #EFEFEF;
	padding: 23px 15px;
}

/*capable for ie7,8*/
#navbar > ul  > li#menu-item-01{color: #45ADCB; background: url('../images/menu-bottom-b.fw.png') no-repeat bottom center;}
#navbar > ul  > li#menu-item-02{color: #FFBF00; background: url('../images/menu-bottom-y.fw.png') no-repeat bottom center;}
#navbar > ul  > li#menu-item-03{color: #85B200; background: url('../images/menu-bottom-g.fw.png') no-repeat bottom center;}
#navbar > ul  > li#menu-item-04{color: #45ADCB; background: url('../images/menu-bottom-b.fw.png') no-repeat bottom center;}
#navbar > ul  > li#menu-item-05{color: #FFBF00; background: url('../images/menu-bottom-y.fw.png') no-repeat bottom center;}

/*txt color*/
#navbar > ul  > li a {color: #777;} 
#navbar > ul  > li#menu-item-01:hover > a, #navbar > ul  > li#menu-item-01.active > a{color: #45ADCB;}
#navbar > ul  > li#menu-item-02:hover > a, #navbar > ul  > li#menu-item-02.active > a{color: #D8A300;}
#navbar > ul  > li#menu-item-03:hover > a, #navbar > ul  > li#menu-item-03.active > a{color: #85B200;}
#navbar > ul  > li#menu-item-04:hover > a, #navbar > ul  > li#menu-item-04.active > a{color: #45ADCB;}
#navbar > ul  > li#menu-item-05:hover > a, #navbar > ul  > li#menu-item-05.active > a{color: #D8A300;}

/*cursor*/
#navbar > ul  > li:hover{cursor:pointer;}
/*
#navbar > ul  > li:nth-child(1){background: url('../images/menu-bottom-y.fw.png') no-repeat bottom center;}
#navbar > ul  > li:nth-child(2){background: url('../images/menu-bottom-g.fw.png') no-repeat bottom center;}
#navbar > ul  > li:nth-child(3){background: url('../images/menu-bottom-b.fw.png') no-repeat bottom center;}
#navbar > ul  > li:nth-child(4){background: url('../images/menu-bottom-y.fw.png') no-repeat bottom center;}
#navbar > ul  > li:nth-child(5){background: url('../images/menu-bottom-g.fw.png') no-repeat bottom center;}
#navbar > ul  > li:nth-child(1){border-bottom: 3px solid #000;}
#navbar > ul  > li:nth-child(2){border-bottom: 3px solid #888;}
#navbar > ul  > li:nth-child(3){border-bottom: 3px solid #222;}
#navbar > ul  > li:nth-child(4){border-bottom: 3px solid #888;}
#navbar > ul  > li:nth-child(5){border-bottom: 3px solid #444;}
*/

#navbar span.lang {
	display: inline-block; 
	background-color: #85B200; 
	color: #fff; 
	font-size: 16px; 
	width: 40px; 
	height: 60px;
	text-align: center;
	padding-top: 20px;
}

#navbar > ul > li {
    list-style: none;
    position: relative;
    display: inline-block;
    /*float: left;*/
    /*margin-right: 5px;*/
    /*text-align: left;*/
}
#navbar ul li a {
    text-decoration: none;
    /*color:lime;
    line-height:30px;*/
    width: 40px;
    /* display: block; */
}
#navbar ul ul {
    display:none;
    position:absolute;
	margin: 0;
	padding: 0;
}
#navbar ul li:hover ul {
	margin-top: 22px; /*location of the sub-menu*/
	margin-left: -15px; /*location of the sub-menu*/
    display:block;
	padding: 5px;
	line-height:18px;
}
#navbar ul li#menu-item-01:hover ul, #navbar ul li#menu-item-04:hover ul {background-color: #45ADCB;}
#navbar ul li#menu-item-02:hover ul, #navbar ul li#menu-item-05:hover ul {background-color: #D8A300;}
#navbar ul li#menu-item-03:hover ul {background-color: #85B200;}

#navbar ul li#menu-item-01:hover ul{width: 320px;}
#navbar ul li#menu-item-02:hover ul{width: 220px;}
#navbar ul li#menu-item-03:hover ul{width: 300px;}
#navbar ul li#menu-item-04:hover ul{width: 140px;}
#navbar ul li#menu-item-05:hover ul{width: 140px;}

#navbar > ul > li:hover > ul > li{
	padding: 8px 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#navbar > ul > li:hover > ul > li:last-child{border-bottom: 1px solid rgba(255, 255, 255, 0);}

#navbar > ul > li:hover > ul > li a{color: #fff;}
#navbar > ul > li > ul > li a:hover{color: rgba(255, 255, 255, 0.75);}

/* standard footer */

.footer-line{
	height:132px;
	width:100%;
	min-width: 1000px;
	background: url('../images/footer.fw.png');
	background-repeat:no-repeat;
	background-position: center center;
}

.footer-line .copyright-container{
    position: relative;
	width: 1000px;
	height: 132px;
	margin: auto;
	text-align: right;
	color: #fff;
	font-size: 14px;
}

.footer-line .copyright{
    position: absolute;
    bottom: 4px;
    width: 500px;
    right: 0;
}

.footer-line .copyright-container a{
	color: #fff;
	text-decoration: underline;
}

/*social icon - right hand side*/
.social-icon{
	position: fixed;
	z-index: 30;
	right: 0;
	margin:0;
	padding:0;
	top: 450px;
}
.social-icon img{
	display: block;
}

img.responsive{
	width: 100%;
}

table {width: 100%;}
table td{border: 1px solid #efefef;}
table th {background: #9ebb4c; color: #fff;}
table tr th {font-weight: bold;}
table tr th , table tr td {padding: 15px;}