* { /*padding:0; margin:0; outline:0;*/ }
html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
body {
background-image:url(../image/inner-bg.jpg);
background-repeat: repeat;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
a { color:#555;text-decoration:none }
h2, h4 {margin:0px;padding:0px;}
h3 {font-size:15px;margin:0px;padding:0px;}
h5 { font-size: 14px; margin: 15px 0 5px 5px; padding: 0; color:#fff;font-weight:normal; }
img {border:0px;}
.right {float:right;}
.left {float:left;}
.more { -webkit-text-size-adjust: none;display:block;float:left;background-image:url(../image/more.png);background-position:6px 8px;background-color:#60be00;background-repeat:no-repeat;font-size:1em;text-indent:8px;padding:0px 10px;margin-top:-10px;margin-bottom:10px;line-height:20px;color:#ffffff;}
.more:hover {text-decoration:none!important;}
.more span {-webkit-transform:scale(0.83);font-size:10px;-webkit-transform-origin: 0 0;color:#ffffff;}
#accessibility-skip-content, #accessibility-skip-search { display: block !important;position: absolute; left: 0px; top: -500px; width: 150px; height: 1px; overflow: hidden; }
#accessibility-skip-content:focus, #accessibility-skip-search:focus { width: auto; height: auto; padding: 5px; top: 10px; left: 45%; font-size: 16px;background-color:#275502;color:#ffffff;width: 150px;text-align:center; }
.accessibility { position: absolute !important; top: -9999px; left: -9999px;}
.text_control {white-space:nowrap; font-weight:bold;background-image:url(../image/bg-header.png);position:fixed;right:0px;border-top:solid 1px #ffffff;display:none;left:0px;z-index:9999999;}
.text_control * { line-height:1.5em}
.text_control a { display:block;height:50px;width:50px;line-height:50px;float:right;text-align:center;border-left:solid 1px #275502;border-right:solid 1px #bbbbbb; color:#ffffff;}
.text_control a:first-child {border-right:0px;}
.text_control .current { text-decoration: underline; background-color:#275502; }
.text_control .text_small { font-size:12px}
.text_control .text_mid { font-size:16px}
.text_control .text_large { font-size:20px}
.search_control {white-space:nowrap; font-weight:bold;background-image:url(../image/bg-header.png);position:fixed;right:0px;border-top:solid 1px #ffffff;left:0px;display:none;z-index:9999999;}
.search_control #search-box { background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #61BD00;display:block;height:48px;line-height:48px;float:left;padding:0px 5px;font-size:18px;}
.search_control #search-button { width:50px; height:50px; background-size:16px;background-image:url(../image/icon-search.png); background-repeat:no-repeat;background-position:center;background-color:#60be00; border:none; cursor:pointer; float:left; text-indent: -999999px; }
#header a { text-decoration:none!important; }
#header {line-height:50px;background-image:url(../image/bg-header.png); position:fixed;left:0px;right:0px;top:0px;bottom:auto;z-index:9999999;}
#header .btn {height:50px;line-height:50px;width:50px;background-position:center;background-repeat:no-repeat;display:block;background-size:auto 30%;margin:0px;padding:0px;}
#header .btn.active {background-color:#275502;}
#header .btn.right.menu {background-image:url(../image/icon-menu.png);border-right:0px;}
#header .btn.fontsize {background-image:url(../image/icon-fontsize.png);}
#header .btn.search {background-image:url(../image/icon-search.png);}
#header .btn.hku {background-image:url(../image/logo-hku.png);background-size:auto 80%;}
#header .btn.right {border-left:solid 1px #275502;border-right:solid 1px #bbbbbb;}
#nav-menu {clear:both;display:none;}
#nav-menu > ul {list-style:none;padding:0px;margin:0px;}
#nav-menu > ul > li {border-top:solid 1px #ffffff;background-color:#60be00;}
#nav-menu > ul.down > li {background-color:#5e902b;}
#nav-menu > ul > li.havesub {background-image:url(../image/nav-more.png);background-repeat:no-repeat;background-size:auto 10px;background-position:97% 20px;}
#nav-menu > ul > li.havesub.show {background-image:url(../image/nav-more-close.png);}
#nav-menu > ul > li > a {line-height:30px;height:30px;display:block;padding:10px;font-size:18px;color:#ffffff;text-decoration:none!important;}
#nav-menu > ul > li:not(.havesub) > a:hover {background-color:#275502;}
#nav-menu > ul > li ul {border-top:solid 3px #fbfa00;list-style:none;padding:0px;margin:0px;display:none;}
#nav-menu > ul > li ul li{background-color:#275502;}
#nav-menu > ul > li ul li a{text-decoration:none!important;color:#ffffff;line-height:20px;display:block;padding:10px 10px 10px 25px;font-size:14px;background-image:url(../image/nav-list.png);background-repeat:no-repeat;background-position:11px 16px;}
#nav-menu > ul > li ul li b{color:#cbe1b2;padding:5px;display:block;}
.logo {margin:10px;display:none;}
.logo img {height:50px;}
.flex-container a:active, .flexslider a:active {outline: none;}
.slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {width: 100%; margin: 0px; padding: 0; overflow:hidden; }
.flexslider .slides > li {display: none;}
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}
.flex-direction-nav li a {width: 28px; height: 55px; display: block; position: absolute; top: 180px; cursor: pointer; text-indent: -9999px;margin:0px; }
.flex-direction-nav li a.next {right: 0px; background: url(../image/right-arrow.png) no-repeat 0 0;background-size:100% 100%;}
.flex-direction-nav li a.prev {left: 0px; background: url(../image/left-arrow.png) no-repeat 0 0;background-size:100% 100%;}
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {display: none;}
.slidesshow {margin:0px;background:#ffffff;margin-bottom:10px;}
.slidesshow a {text-decoration:none;display:block;overflow:hidden;margin-top:0px;border-top:solid 5px #60be00;}
.slidesshow a img {z-index:99;}
.slidesshow a div {font-size:14px;line-height:24px;color:#ffffff;text-decoration:none;padding:10px 5px;font-weight:bold;background-color:#60be00;}
#container .box.box1 {
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background:#ffffff;margin:0px;overflow:hidden;margin-bottom:10px;
}
#container .box.box1.custombox a {
color:blue!important;text-decoration: underline;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
#container .box.box1 img {max-width:100%!important;}
#container .box.box1 ul.mobile_list, #container .box.box1 ul.mobile_list2, #container .box.box1 ul.mobile_list3 {margin:0px;list-style:none;padding:0px;}
#container .box.box1 ul.mobile_list li, #container .box.box1 ul.mobile_list2 li {overflow:hidden;display:block;border-bottom:solid 1px #cfcfcf;background-color:#f7f7f7}
#container .box.box1 ul.mobile_list li+li, #container .box.box1 ul.mobile_list2 li+li {border-top:solid 1px #f0f0f0;}
#container .box.box1 ul.mobile_list li:first-child, #container .box.box1 ul li.first_child {border:0px;min-height:10px;background-color:#60be00;border-bottom:solid 1px #cccccc;}
#container .box.box1 ul.mobile_list li:last-child, #container .box.box1 ul li.last_child, #container .box.box1 .list_footer {border:0px;min-height:10px;background-color:#60be00; }
#container .box.box1 ul.mobile_list li.publication_template {background-image:url(../image/bg-bookcase.png); }
#container .box.box1 ul.mobile_list li.publication_template {background-image:url(../image/bg-bookcase.png);}
#container .box.box1 ul.mobile_list li a, #container .box.box1 ul.mobile_list2 li a, #container .box.box1 ul li h2 {display:block;padding:10px;font-size:14px;}
#container .box.box1 ul.mobile_list li a.arrow, #container .box.box1 ul.mobile_list2 li a.arrow {background-image:url(../image/list-arrow.png);background-repeat:no-repeat;background-size:auto 10px;background-position:97% 50%;padding-right:30px;overflow:hidden;}
#container .box.box1 ul.mobile_list li a.moreli, #container .box.box1 ul.mobile_list2 li a.moreli {text-align:center;}
#container .box.box1 ul.mobile_list li h3, #container .box.box1 ul.mobile_list2 li h3 {display:block;padding:5px 10px; font-size:12px;background-color:#eeeeee;}
#container .box.box1 ul li {/*background-color:#ffffff;*/}
#container .box.box1 ul li.block_title {overflow:hidden;background-color:transparent!important;background-image:url(../image/logo-li2.png);background-repeat:no-repeat;background-size:auto 90%;background-position:7px 3px;}
#container .box.box1 ul li div.calendar-bg {float:left;width:50px;height:70px;background-image:url(../image/calendar-bg.png);background-repeat:no-repeat;background-position:center top;background-size:80% auto;}
#container .box.box2 {
background:#60be00;margin:10px;overflow:hidden;
}
#container .box .wrapper {
margin:10px;overflow:hidden;
}
#container .box h2 {
font-size:16px;
}
#container .box h2.style1 {
color: #6dbc2f;margin-bottom:10px;
}
#container .box h2.style1 a {color:#6dbc2f;font-family:InterstateBoldCondensedBold, arial, sans-serif;}
#container .box h2.style1 a:hover {text-decoration:underline;}
#container .box h2.style2 {
color: #ffffff;margin-bottom:10px;
}
#container .box h2.style3 {
color:#ffffff;margin-bottom:0px;float:left;margin-left:25px;color:#60be00;
/*color:#ffffff;margin-bottom:0px;background:#60be00;padding:10px;*/
}
#container .box .calendar_wrapper {
margin:0px;overflow:hidden;
}
#container .box ul.style1 {
list-style:disc;margin-bottom:10px;
}
#container .box ul.style1 li {margin:3px 0px 8px 0px;}
#container .box.box2 ul.style1 li { color:#ffffff; }
#container .box.box2 ul.style1 li a { color:#ffffff; }
#container .box ul.style1 li a {font-size:15px;}
#container .box ul.style1 li a:hover { text-decoration:underline; }
#container .box ul.style2 {overflow:hidden;list-style:none;padding:0px;margin:0px;}
#container .box ul.style2 li { border-bottom:dotted 1px; }
#container .box ul.style2 li:last-child, #container .box ul.style2 li.last-child {border:0px;}
#container .box ul.style2 li a{
display:block;padding:5px;font-size:15px;
}
#container .box ul.style2 li a:hover {background-color:#60be00;color:#ffffff;}
#container .box.custombox table.contact {
border-collapse: collapse;margin:0px 0px 20px 0px;
}
#container .box.custombox table.contact, #container .box table.contact th, #container .box table.contact td {
border: 1px solid #ffffff;
}
#container .box.custombox table.contact thead th {
padding:5px;text-align:left;background-color:#fceeee;font-size:14px;font-weight:normal;
}
#container .box.custombox table.contact tbody td {
padding:5px;
}
#container .box.custombox table.contact tbody tr:nth-child(odd) td{
background-color:#e1f0fd;
}
#container .box.custombox table.contact tbody td,
#container .box.custombox table.contact tbody td a { font-size:14px; }
#container .box.custombox table.contact tbody tr:hover td{
background-color:#b8eb18;
}
#container .box.custombox .section {padding:5px;font-size:14px;overflow:hidden;background-color:#c2efd1;border:solid 1px #ffffff;line-height:18px;border-bottom:0px;margin-bottom:15px;}
#container .box.custombox .section label {display:block;float:left;width:100px;line-height:18px;}
#container .box.custombox h3 { color:#6dbc2f;margin-bottom:5px; }
#container .box.custombox li {padding:2px 0px;}
#container .box.custombox a { color:#000000; }
#container .box.custombox a:hover {text-decoration:underline;}
#container .box.newsfeedbox {height:150px;overflow-y: scroll;padding:10px;}
#container .box.newsfeedbox > div.header {border-bottom: 5px solid #60be00; color:#60be00; padding:10px 5px;}
#container .box.newsfeedbox > p { display: block; text-align: left; color: #60be00; font-size: 13px; font-weight: bold; padding:5px 0px; margin:5px;}
#container .box.newsfeedbox > ul {list-style:none;margin:0px;padding:0px 5px 10px 5px; border-bottom: 1px dotted #CCCCCC; }
#container .box.newsfeedbox > ul > li > a{font-size:14px;padding:5px 0px;display:block;}
/*#container .box.newsfeedbox > ul > li+li { border-top: 1px dotted #CCCCCC; }*/
#container .box.newsfeedbox > ul > li ul {list-style-type:disc;}
#container .box.newsfeedbox > ul > li ul li a{font-size:12px;}
#container .box.newsfeedbox a:hover, #container .box.newsfeedbox a.actived {color:#996c2b;}
#container .breadcrumb {/*display:none;*/padding:3px;font-size:14px;}
#container #calendar .events_item_details {margin:0px;padding:0px;border-top:solid 1px #aaaaaa;}
#container #calendar .events_item_details > a {color:#000000;font-weight:normal;display:block;border-bottom:0px;background-image:url(../image/list-arrow.png);background-repeat:no-repeat;background-size:auto 10px;background-position:100% 50%;padding:5px 20px 5px 5px;}
#content div.item {padding:10px 0px 10px 0px;border-top:dotted 1px #dddddd;}
#content div.event_left div.item label, #content div.item label { color:#999999; display:block; }
#content div.event_left div.item div.value, #content div.item div.value { font-weight:bold; }
.footerlinks {overflow:hidden;margin:0px 5px 5px 5px;}
.footerlinks a { font-size:12px;color:#000000;display:block;float:left;padding:0px 5px;margin:2px 0px;border-right:solid 1px #3e3e3e; }
.footerlinks a:last-child {border:0px;}
#top {line-height:30px;font-weight:bold;text-align:center;width:50px;position:fixed;right:0px;bottom:0px;background-image:url(../image/bg-banner.png);font-size:12px;color:#ffffff;}
#footer { font-size:11px;background-image:url(../image/bg-banner.png); }
#footer div {line-height:20px;padding:5px 0px 5px 0px; }
#footer div span {margin-left:5px;color:#ffffff;display:block; }
#footer div a{ color:#fff;font-weight:bold;padding:0px 10px; }
/*for Careers */
#container .col-1,
#container .col-2,
#container .col-3,
#container .col-4,
#container .col-5,
#container .col-6,
#container .col-7,
#container .col-8,
#container .col-9,
#container .col-10,
#container .col-11,
#container .col-12 {width: 100%;}
.pic {
width: 28%;
overflow: hidden;
/*margin: 20px;*/
border: 2px solid #aaaaaa;
-webkit-box-shadow: 5px 5px 5px #555;
box-shadow: 5px 5px 5px #555;
float: left;
/*-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;*/
background-color:#ffffff;
}
.pic:hover {
cursor: pointer;
}
.pic.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pic.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* Accordion */
.accordion {
background-color: transparent;
font-weight:bold;
color: #c45911; /*#1e3a70;*/
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
font-size: 14px;
}
.active, .accordion:hover {
background-color: white; /*#e3e8f2;*/
}
.panel {
padding: 0px 18px 10px;
background-color: white; /* #f7f8f9;*/
display: none;
overflow: hidden;
font-size: 14px;
}
.accordion:after {
content: '\2795';
font-size: 13px;
color: #304e87;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
}
/* ---------- */
.share-btn {
background-color: #60be00;
line-height:50px;
height:50px;
text-align: center;
display:block;
color:#ffffff!important;
text-decoration: none!important;
}
.share-btn:hover {
background-color: #387e00;
color:#ffffff!important;
text-decoration: none!important;
}
.pagination {
border-top: 1px solid #DDDDDD;
display: inline-block;
width: 100%;
padding-top: 6px;
}
.pagination .links {
float: left;
padding-top: 6px;
}
.pagination .links a {
border: 1px solid #DDDDDD;
padding: 4px 10px;
font-size: 12px;
text-decoration: none;
color: #A3A3A3;
}
.pagination .links b {
border: 1px solid #269BC6;
padding: 4px 10px;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #269BC6;
background: #FFFFFF;
}
.pagination .results {
float: right;
padding-top: 6px;
font-size: 12px;
}
.ui-dialog {
z-index:99999999 !important ;
}