body {font-family: Arial Unicode MS;color: #666;background: #ffffff ;font-size: 15px; line-height: 1.4em;}
html, body {width:100%; padding:0; margin:0;}
#layer_content {position:absolute; top:0; left:0; right:0;margin-left:auto; margin-right:auto;}
.grad {
    height: 425px;
}

header{
	font-family: Calibri;
	color: white;
	padding-top:0px;
}
h3{margin-top:20px;font-weight:bold;}
.logo_cu {padding:20px;}

.content {text-align: justify;}

@media print {
    .noprint {display:none !important;}
    a:link:after, a:visited:after {  
      display: none;
      content: "";
	  
    }
}

.chi{ 
 	font-family: Microsoft JhengHei; 
	letter-spacing:2px;
}

.eng{ 
 	font-family: Arial Unicode MS;
	letter-spacing:0px;
}

/* ------------------------------------Menu------------------------------------ */
#menu {background-color: #888888;border-radius: 0; font-size:16px;}
#menu .navbar-collapse{padding:0;padding-left:13px}
#menu .dropdown-menu {background-color: #009974;border:none;}
#menu ul.nav .dropdown-menu li a{color: #f8f8f8; padding: 5px 10px; border-radius: 5px !important;}
#menu ul.nav .dropdown-menu li a:hover{color: #fff;background-color: #888888;}
#menu .dropdown-inner {display: table;}
#menu .dropdown-inner ul {display: table-cell;}
#menu .dropdown-inner a {min-width: 250px;display: block;padding: 3px 20px;clear: both;line-height: 1.1em;color: #000;font-size: 14px;margin: 0 5px;}
#menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{background: #009974;} 

#menu ul.nav li a{color: #fff;border-radius: 5px;padding: 15px 10px;}
#menu ul.nav li a.double{padding: 5px 15px;}
#menu ul.nav li.dropdown a{border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}
#menu .nav > li > a:hover, #menu .nav > li > a:focus{background-color: #009974;color:#f8f8f8;}

#menu .btn-navbar {font-size: 16px;color: #FFF;padding: 5px 15px;float: left;border: 3px solid #fff;}

@media  (max-width: 1199px) {
	#menu ul.nav li a{color: #fff;border-radius: 5px;padding: 15px 7px; font-size:13px;}
	#menu ul.nav li a.double{padding: 5px 7px;}
	#menu .navbar-collapse{padding-left:20px;}
}
@media  (min-width: 992px) {
	#menu {background-color: #888888;border-radius: 0;}
    #menu.navbar{padding: 0; height: auto;margin-top: 5px;margin-bottom: 0px;}
 	#menu .dropdown:hover .dropdown-menu {display: block;}
}
@media(max-width:991px) {
    #menu ul.nav li a{color: #fff;border-radius: 5px;padding: 7px 7px; font-size:14px;}
	#menu.navbar{margin-bottom: 0px;margin-top: 5px;}
	#menu div.dropdown-inner > ul.list-unstyled {display: block;}
	#menu .dropdown-inner a {width: 100%;color: #fff;}
	#menu div.dropdown-menu {margin-left: 0 !important;	padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
}


/* ------------------------------------Other------------------------------------ */
#bg_white {background-color: #fff; padding: 15px;}
#bg_grey {background-color: #f2f2f2; padding: 15px;}

.hr1 {
	background: #cccccc;
	height: 1px;
}
.hr_dot {
	border-top: 2px dashed #e6e6e6;
}

img {
	border: 0px;
	max-width:100%;
	height:auto;
}

img.fixed {
	border: 0px;
	max-width:none;
	height:auto;
}

.img-holder { margin: 0px 20px 20px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border: 3px solid #fff; align: left;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }


.img_border
{
    padding:4px 4px;
    margin:0px;
}
	
.float_right {float:right; padding-left:10px;}
.float_left {float:left; padding-right:10px;}
.verticalLine {border-left:1px solid #E6E6E6;}
.verticalLineR {border-right:1px solid #E6E6E6;}

.title_bar {font-size:16px; font-weight:bold; font-style: italic; color:#FFFFFF; letter-spacing:1px;}
.title {font-size:24px; line-height:130%; text-transform: uppercase; text-align:left; color:#0059B2;}
.leftTitle {font-size:24px; line-height:130%; text-transform: uppercase; text-align:left; color:#0059B2;}
.contentTitle {font-size:1.1em; font-weight:bold; text-transform: uppercase; text-align:left; letter-spacing:1px; color:#0059B2;}
.TPTitle {font-size:1.1em; font-weight:bold; color:red;letter-spacing:1px;}
.subTitle {font-size:1.1em; font-weight:bold; text-align:left; color:#0059B2;}

.pad {
  margin-right: 5px;
  margin-left: 0px;
}

a:link, a:visited, a:active {
	color: #0066cc;
	text-decoration: none;
}

a:hover {
	color: #4966B6;
	text-decoration: underline;
}

a.top {color:#fff;}

a.fed {color:#5F1F71;}

a.home {
	color: #000;
	background-color:F0FFF9;
	text-decoration: none;
	display:block;
	width:100%;
	padding:6px 10px 10px 10px;
	font-size: 14px;
}

a.home:hover {
	color: #fff;
	background-color:#A5A5A5;
	text-decoration: none;
	display:block;
	width:100%;
}


a.more:link, a.more:visited, a.more:active {
	color: #FF7F00;
	text-decoration: none;
	font-weight: bold;
}

a.more:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #FF7F00;
	padding: 5px;
}

a.btn {
	color: #fff;
}

.home_logo {
	padding-bottom:10px;
}

.min_height {
	min-height: 600px;
}

.home_box {
     background-color: #F0FFF9;
	 padding-bottom:5px;
	 min-height: 60px;
 }

.activelink {
	color:#FF9326;
}

#pond {
width: 100%;
position: relative;
}

.cover {
	position:absolute; 
	width:100%; 
	padding:15px;
	background-image: url('/20201208123339oe_/https://www.spe.cuhk.edu.hk/images/bg_bar01.png');
 }

ul.nomargin {
padding: 0;
margin-left: 20px;
margin-top: 0px;
}


.panel ul
{
    padding:0px;
    margin:0px;
    list-style:none;
}

.news-item
{
    padding:4px 4px;
    margin:0px;
    border-bottom:1px dotted #555; 
}

.gallery UL {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
.gallery LI {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}

#gallery_list UL LI {
	MARGIN-TOP: 5px; MARGIN-bottom: 5px; WIDTH: 230px; FLOAT: left; HEIGHT: 200px; MARGIN-RIGHT: 40px
}
#gallery_list UL LI DIV {
	MARGIN: 10px
}

#gallery_items{
}

#gallery_items ul li{
	float:left;
	margin-right:50px;
	margin-left:0px;
	margin-top:10px;
	margin-bottom:20px;
	list-style: none; 
}

#gallery_div{ 
box-shadow: 7px 7px 8px #999999; 
-webkit-box-shadow: 7px 7px 8px #999999; 
-moz-box-shadow: 7px 7px 8px #999999; 
border:#EEEEEE 1px solid;
display:table-cell;
vertical-align:middle;
padding:10px; 
width:300px;
height:100%;
}

#gallery_items_sm ul li{
	float:left;
	margin-right:30px;
	margin-left:0px;
	margin-top:10px;
	margin-bottom:20px;
	list-style: none; 
}

#gallery_div_sm{ 
box-shadow: 7px 7px 8px #999999; 
-webkit-box-shadow: 7px 7px 8px #999999; 
-moz-box-shadow: 7px 7px 8px #999999; 
border:#EEEEEE 1px solid;
display:table-cell;
vertical-align:middle;
padding:10px; 
width:230px;
height:100%;
}
 /******************* Scroll Top ********************/

.scrollToTop{
	width:100px; 
	height:100px;
	padding:10px; 
	text-align:center; 
	background: whiteSmoke;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	bottom: 65px;
	right:15px;
	display:none;
	background: url('/20201208123339oe_/https://www.spe.cuhk.edu.hk/images/arrow-up.png') no-repeat 0px 20px;
	z-index:999;
}
.scrollToTop:hover{
	text-decoration:none;
}


/******************* footer style ********************/
footer{	font-family: Calibri;background-color: #009974; color:#ffffff; font-size:13px;}
a.footer{color:#fff;}
a.sitemap{color:#777777;}

footer ul{padding: 0;list-style-position: inside;}
.container-fluid{
	background-color: #999999; 
	color:#fff;
	font-size: 14px;
	padding: 10px 0px;
}

.container-fluid b{font-size:14px;}
.copyright {padding: 10px 30px 10px 30px;}

/****************** mobile style ********************/
@media(max-width:1199px) {
	h3 {font-size: 20px; margin-top:20px;}
	h2 {font-size: 28px; margin-top:10px;}
}

@media(max-width:991px) {
	h2 {font-size: 20px; margin-top:10px;}
}	

@media(max-width:767px) {
	header {padding-top: 0px;}
	h3 {font-size: 20px; margin-top:20px;}
	#bg_white {background-color: #fff; padding: 15px;}
	#bg_white .odd{background-color: #EBEBEB; padding-top:15px; padding-right:10px;}
	#bg_white .even{background-color: #f8f8f8; padding-top:15px; padding-right:10px;}
	.logo_cu {padding:10px;}
}

@media(max-width:500px) {
	h3 {font-size: 16px;}
	h2 {font-size: 18px;}
	h1 {font-size: 25px;}
	.copyright {padding: 20px 40px 20px 50px;}
}


/****************** table style ********************/
table.general {border-collapse:collapse;}
table.general td, table.general th {padding: 5px; }


/****************** flex style ********************/
@media only screen and (min-width : 992px) {
  .flex-row.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
  }

	/* Grow thumbnails to fill columns height */
	.flex-row .thumbnail,
	.flex-row .caption {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
				flex: 1 0 auto;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
			-ms-flex-direction: column;
				flex-direction: column;
	}
}

.flex-row .thumbnail {padding:15px 0px 15px 15px; border: 0;}
.flex-row .caption {padding:0; border: 0;}

.flex-row alnk {display: inline !important;}
.flex-row img {display: inline !important;}

/* Flex Grow Text Container */
.flex-row .caption .flex-text {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

/* Flex apply to all size */
  .flex-all.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
  }
  .flex-all .thumbnail,
  .flex-all .caption {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
				flex: 1 0 auto;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
			-ms-flex-direction: column;
				flex-direction: column;
	}

.flex-all .thumbnail {padding:15px 15px 15px 15px; border: 0;}
.flex-all .caption {padding:0; border: 0;}
.flex-all img {display: inline !important;}