html, body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; */
font-size: 14px;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0em;
color:#231F20;
min-height: 100%;
}
/*.zh-HK {letter-spacing: 0.05em;font-family: Arial,"微軟æ£é»‘é«”","Microsoft JhengHei","Heiti TC",Hei, sans-serif; }*/
.zh-CN {letter-spacing: 0.05em;font-family: Arial,"Microsoft Yahei", "微软雅黑","Heiti SC",hei,sans-serif; }
.zh-HK { letter-spacing: 0.05em;font-family: Arial, Helvetica, 微軟正黑體, "Microsoft JhengHei", 黑體, SimHei, "儷黑 Pro", "LiHei Pro Medium", 蘋果儷中黑, "Apple LiGothic Medium", 新細明體, PMingLiU, 細明體, MingLiU, 標楷體, DFKai-sb, sans-serif !important; }
strong, b {
font-weight: 600;
line-height: inherit;
}
.zh-HK strong, .zh-HK b {
font-weight: 700;
}
.zh-CN strong, .zh-CN b {
font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
}
.zh-HK h1, .zh-HK h2, .zh-HK h3, .zh-HK h4, .zh-HK h5, .zh-HK h6 {
font-weight: 700;
}
.zh-CN h1, .zh-CN h2, .zh-CN h3, .zh-CN h4, .zh-CN h5, .zh-CN h6 {
font-weight: 700;
}
.h1 {
font-size: 28px;
}
h2,
.h2 {
font-size: 24px;
}
h3,
.h3 {
font-size: 20px;
}
h4,
.h4 {
font-size: 18px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 12px;
}
input {padding:5px 10px;background:#fff;color:#231F20;border:none;font-size:0.9em;}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
a {color: #63A9E2;text-decoration: none;}
a:hover, a:focus {color: #231F20;text-decoration: underline;}
figcaption {font-size:0.9em;line-height:1.2;padding:0.5rem;}
.floatleft {float:left;position:relative;}
.floatright {float:right;position:relative;}
.aligncenter {text-align:center;}
.valignmiddle {display: table-cell;vertical-align: middle;width:100%;}
.clear {clear:both;}
.hidden {display:none;}
.small {font-size:14px;font-weight:300;}
.constHeight {min-height:400px;}
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.touch * { text-rendering: optimizeSpeed; }
table { background-color: transparent;table-layout:fixed; border-collapse: collapse;border:none;}
th {padding: 0.7em;font-weight:600;}
td {padding: 0.7em;text-align:left;vertical-align:top;}
/*
.clearfix {overflow: auto;zoom: 1; display: inline-block;}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
*/
.dl {color:#D72121;margin-left:1em;}
.dl:hover {color:#231F20;text-decoration:none;}
.dl:before {
font-family: 'FontAwesome';
content: '\f019';
margin:0 5px 0 -15px;
}
.fa-fw {width:1em;}
.greybg {background-color:#F2F2F2;}
.sticky {position:fixed;}
.row {
margin-left: 0;
margin-right: 0;
}
.imgbg img {max-width:100%;}
.col4 {width:300px;margin:0 10px 20px 10px;min-height:270px;}
article.col4 {min-height:340px;}
article.col4 .imgbg {min-height:226px;}
.col8 {width:620px;margin:0 10px 20px 10px;}
.col12 {width:940px;margin:0 10px 20px 10px;}
.col12nopad {width:960px;margin:0 0px 20px 0px;}
.supportdiv {width:320px;}
.supportcell {width:320px;padding:0 0 0 20px;min-height:75px;cursor:pointer;
color:#fff;font-size:20px;font-weight:300;line-height:1.1;display:table;}
.supportcell:hover {color:#fff;background:#D72121;}
.supportborder {border-bottom:1px solid #fff;}
.supportgap {margin:0 0 1px 0;}
.scol2 {width:200px;margin:0 0px 10px 0px;}
.scol4 {width:410px;margin:0 10px 10px 0px;}
.scol8 {width:620px;margin:0 0px 10px 0px;}
.tcol2 {width:150px;margin:0 5px 10px 5px;}
.fullcol {width:100%;margin:10px 10px 20px 10px;padding:12px 20px 12px 20px;background:#eee;}
.fullcol .newsdate {width:20%;margin:0;font-size:14px;line-height:18px;text-align:right;padding:0 30px 0 0;}
.fullcol .newscontent {width:80%;margin:0;font-size:14px;line-height:18px;}
.linkart {min-height:240px !important;}
.linkart .imgbg {max-width:300px;max-height:160px;}
.linkart .imgbg img {max-width:100%;max-height:100%;}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
margin-right: 0px;
margin-left: 0px;
}
.toppage {margin-top:0px;}
.container {width:100%; padding-left: 0px;padding-right: 0px;margin-bottom:20px;}
.navbar-header {width:80%;height:125px;padding:0 10px 0 10px;}
.navbar-default {background-color:#fff;border-color:#231F20;height:125px;}
.navbar-brand {padding:0px 20px 0px 10px;}
.navbar-brand > img { max-height: 120px; }
.navbar-default .navbar-brand {color: #fff;}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #fff;
}
.navbar-toggle {border:none;}
.nav>li>a {padding:0;letter-spacing:0.02em;}
.navbar-nav {float:left;margin: 28px 0 0 0;}
.navbar-nav>li {margin-right:22px;font-weight:400;letter-spacing:0.02em;height:60px;}
.navbar-nav>li>a {color: #a9a9a9 !important;padding:10px 5px 10px 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navbar-nav>li>a:hover {color: #fff !important;background:#63A9E2 !important;}
.navbar-nav>li:hover ul.dropdown-menu { display: block; }
.en-US .navbar-nav>li {margin-right: 12px;}
.en-US .navbar-nav>li>a {padding: 10px 5px 10px 5px;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
background-color: #63A9E2;
color: #fff !important;
}
.nav-closebtn {display:none;}
.dropdown-menu {
position: absolute;
top: 51px;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 220px;
padding: 10px 0;
margin: 0 0 0 0;
list-style: none;
font-size: 14px;
line-height:1.2;
color:#fff;
background-color: #63A9E2;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
background-clip: padding-box;
}
.dropdown-menu>li>a {
display: block;
padding: 6px 20px 6px 30px;
clear: both;
font-weight: 300;
line-height: 1.2;
color: #fff;
/*white-space: nowrap;*/
}
.secondmenu {width:680px;min-height:240px;background-color: #63A9E2;}
.submenu {float:left;position:relative;min-width:220px;}
.submenu>a {
padding: 3px 20px 3px 20px !important;
font-weight: 400 !important;
}
.subdropmenu {
position: absolute;
top: 30px;
left: 0;
z-index: 1000;
float: left;
font-size: 14px;
color:#fff;
background-color: #63A9E2;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
background-clip: padding-box;
}
.fa-ul {
padding-left: 0px;
margin-left: 0px;
list-style-type: none;
}
.fa-li {
position: absolute;
left: 1.14285714em;
width: 0.84285714em;
top: .44285714em;
text-align: center;
}
.submenu .fa-li {
position: absolute;
left: 1.14285714em;
width: 0.84285714em;
top: .44285714em;
text-align: center;
}
.subdropmenu>li>a {
display: block;
padding: 6px 20px 6px 30px;
clear: both;
font-weight: 300;
line-height: 1.2;
color: #fff;
}
.subdropmenu>li>a:hover, .subdropmenu>li>a:focus {
text-decoration: none;
color: #231F20;
background-color: #f5f5f5;
}
.navbar-nav li a .arrow {
display: none;
position: absolute;
bottom: 0;
left: 45%;
}
.navbar-nav li a .arrow:after {
position: absolute;
top: 0;
margin-left:-40%;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 12px solid #63A9E2;
border-left: 10px solid transparent;
content: ' ';
}
.navbar-nav li:hover a .arrow {
display:block;
}
.dropdown-menu a:hover {color:#fff;}
.navbar-langbox {float:right;margin-top:10px;}
.navbar-langbox>li {float:left;margin-right:10px;font-size:14px;}
.navbar-langbox>li>a {padding:0;color:#ababab;}
.navbar-langbox>li>a:hover, .navbar-langbox>li .active {color:#231F20;background:none;}
.searchbox {width:180px;height:24px;border-radius:12px;background:#d4d4d4;font-size:14px;padding:5px 32px 5px 10px;}
.icon-search {background:none;
border: none;cursor: pointer;
color:#9f9f9f;position:relative;
right:32px;margin-right:-32px;
}
.langspacer {width:400px;}
.langtop {margin-top:2px;}
.topicon {font-size:22px !important;line-height:1;}
.topicon a {color:#231F20;}
.navbar-donate {
float:right;
/*margin: 80px 10px 0 0;*/
margin-top:38px;
padding:10px 20px 10px 20px;
color:#fff;
font-size:12px;
cursor:pointer;
vertical-align:bottom;
}
.navbar-donate:lang(zh-HK) {
/*margin: 35px 10px 0 0;*/
font-size:20px;
}
.navbar-donate:lang(zh-CN) {margin: 35px 10px 0 0;font-size:15px;}
.navbar-donate:hover {background:#63A9E2 !important;}
.navbar-donate a {color:#fff;}
.navbar-donate a:hover {color:#fff;text-decoration:none;}
.navbar-fof {float:right;margin: 40px 10px 0 0;padding:10px 10px 10px 10px;color:#fff;font-size:12px;cursor:pointer;}
.navbar-fof:lang(zh-HK) {margin: 35px 10px 0 0;font-size:15px;}
.navbar-fof:lang(zh-CN) {margin: 35px 10px 0 0;font-size:15px;}
.navbar-fof a {color:#fff;}
.navbar-fof a:hover {color:#fff;text-decoration:none;}
.navbar-fof:hover {background:#63A9E2 !important;}
.navbar-home {
height:125px;
/*width:230px;
margin-right:5px;
margin-left: 10px;
min-height:100%;*/
}
.navbar-content {
margin-top: 25px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 45px;
width:100%;
text-align: center;
min-height:100%;
}
.navbar-home-header {
padding:20px 20px 0px 20px;
background-color:#fff;
font-size: 20px;
width:240px;
}
.navbar-home-item {
padding-left: 15px;
padding-right:15px;
padding-top: 8px;
padding-bottom: 10px;
background:#ffffff !important;
color:#4a90e2 !important;
font-size: 20px;
cursor:pointer;
height:44px;
margin-top:72px;
margin-left:10px;
margin-right:10px;
margin-bottom: 1px;
display: inline-block;
}
.navbar-home-item a {color:#606060;}
.navbar-home-item:hover { color:#4a90e2; }
.navbar-home-item:hover > a { color:#4a90e2; }
.navbar-home-item a:hover {color:#4a90e2;text-decoration:none;}
.navbar-home-item.active {
background:#4a90e2 !important;
color:#ffffff !important;
/*-webkit-box-shadow: 3px 8px 25px -5px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 8px 25px -5px rgba(0,0,0,0.6);
box-shadow: 3px 8px 25px -5px rgba(0,0,0,0.6);
box-shadow: 3px 8px 25px -5px rgba(0,0,0,0.6); */
}
.navbar-home-item.active > a { color:#ffffff; }
.navbar-content-box-res {
line-height: 30px;
font-size: 18px;
color: #323232;
padding:20px 25px 25px 25px;
text-align:left;
border: 1px solid #eaf2f4;
background-color: #f5f9fa;
box-shadow: 3px 8px 25px -5px rgba(0,0,0,0.6);
}
.navbar-content-box-res-item {
margin: 0 auto;
/*margin-top:0px;*/
/*padding:18px 20px 20px 20px;*/
padding-top:10px;
background:#F69739 !important;
color: #ffffff !important;
font-size: 18px;
xcursor:pointer;
height:45px;
width:180px;
box-shadow: 3px 8px 25px -5px rgba(0,0,0,0.6);
float: right;
text-align: center;
}
.xnavbar-content-box-res-item:hover {
background:#63A9E2 !important;
/*background:#ffffff !important;
color:#78bde9 !important;
-webkit-box-shadow: 3px 10px 25px -5px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 10px 25px -5px rgba(0,0,0,0.6);
box-shadow: 3px 10px 25px -5px rgba(0,0,0,0.6);
box-shadow: 3px 10px 25px -5px rgba(0,0,0,0.6);
*/
color:#ffffff;
}
.xnavbar-content-box-res-item:hover > a { color:#ffffff; }
.xnavbar-content-box-res-item a {color:#ffffff;}
.xnavbar-content-box-res-item a:hover {color:#ffffff;text-decoration:none;}
.navbar-content-box-res-text {
padding-top:20px;
line-height: 24px;
font-size: 18px;
}
.min_nav {
display: none;
}
.resource_container {
display:flex;
}
.resource_selection {
padding-left:15px;
margin-top:10px;
/*min-width: 260px;*/
display:block;
}
.resource_body {
margin-left:25px;
}
.btn-group-vertical {
min-width:250px;
width:100%;
/*margin-right:10px;*/
}
.btn {
padding: 14px 24px;
border: 0 none;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
}
.btn-primary {
background: #ffffff;
color: #606060;
width: 250px;
}
.btn-primary.btn-active {
background: #4a90e2;
color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: #4a90e2;
}
.btn-primary:active, .btn-primary.active {
background: #007299;
box-shadow: none;
}
.navbar-content-box-res-cards {
padding-top:20px;
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
/*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;*/
width: 220px;
/*margin: 12px;*/
border-radius: 8px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
background: #fff;
border: 1px solid #d3d3d3;
border-radius: 30px 0px 30px 0;
}
.card > .card-image {
height:165px;
overflow: hidden;
}
.card > div >img {
border-radius: 30px 0px 0px 0;
}
.card:hover {
/*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);*/
}
.card-container {
padding-top: 8px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.card-container > div {
font-size:14px;
line-height:normal;
padding-top:8px;
padding-bottom:8px;
}
.navbar-content-box-news-cards {
padding-top:20px;
padding-left:15px;
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.news-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 250px;
/*margin: 12px;*/
border-radius: 8px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
background: #fff;
border: 1px solid #d3d3d3;
}
.news-card > .news-card-image {
height:180px;
overflow: hidden;
}
.news-card > div >img {
border-radius: 8px 8px 0 0;
}
.news-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}
.news-card-container {
padding-top: 8px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.news-card-container > div {
font-size:14px;
line-height:normal;
padding-top:8px;
padding-bottom:8px;
}
.full-width {width:100%;}
.full-width img {
display: block;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.newscontent {font-size:14px;line-height:1.3;font-weight:600;margin:10px;}
.newsdate {font-size:13px;margin:10px;}
.sectiontitle {font-size:28px;line-height:38px;text-transform:uppercase;margin:40px 10px 20px 10px;}
.subsectiontitle {font-size:20px;line-height:24px;margin:40px 0px 20px 0px;}
.pagetitle {font-size:28px;line-height:38px;text-transform:uppercase;margin:20px 5px 16px 0;font-weight:bolder; padding-left:10px;}
.pagetitlesub {font-size:16px;line-height:24px;text-transform:uppercase;margin:5px 5px 15px 0;
padding:8px;
color:#fff;
background-color:#4a90e2;
margin-left:6px;
}
.fullpagetitle {font-size:28px;line-height:34px;text-transform:uppercase;margin:40px 10px 20px 10px;}
.fullsubtitle {font-size:20px;line-height:22px;text-transform:uppercase;margin:20px 10px 20px 10px;padding:40px 0 0 0;}
.related {margin:40px 0 20px 0;width:100%;}
.fullrelated {margin:40px 10px 20px 10px;width:100%;}
.hline {border-top:1px solid #6D6F71;}
.newstitle {font-size:24px;line-height:30px;text-transform:uppercase;margin:40px 0 10px 0;}
.newssubtitle {font-size:20px;line-height:28px;margin:0px 0 20px 0;}
.pagemenutitle {font-size:22px;line-height:28px;text-transform:uppercase;margin:43px 0 27px 0;}
.pagemenusubtitle {font-size:18px;line-height:24px;text-transform:uppercase;margin:8px 0 8px 0;}
.pagesectiontitle {font-size:22px;line-height:38px;margin:40px 0 20px 0;}
.bannercontent {font-size:16px;font-weight:300;letter-spacing:0.05em;line-height:1.2;color:#fff;background:#231F20;padding:10px;position:absolute;bottom:30px;left:0px;width:70%;}
.rightbannercontent {font-size:16px;font-weight:300;letter-spacing:0.01em;line-height:1.3;color:#fff;background:#231F20;padding:10px;position:absolute;bottom:30px;right:0px;width:70%;}
.bannercontentSingle {bottom:49px;}
.centercontent {font-size:20px;line-height:1.1;color:#fff;background:none;position:absolute;top:0;bottom:0;left:0;right:0;width:100%;padding:20px;text-align:center;height:300px;}
.centercontent div {height:260px;vertical-align:middle;display:table-cell;}
.thumbcontent {font-size:13px;line-height:1.3;margin:10px;text-align:center;text-transform:uppercase; height:30px;}
.thumbmore {font-size:24px;font-weight:300;color:#63A9E2;background:rgba(35, 31, 32, 0.2);display:table;cursor:pointer;}
.thumbmore:hover {background:#63A9E2;color:#231F20;}
.thumbsq {width:150px;height:150px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.glyphicon-chevron-left:before {content: "";}
.glyphicon-chevron-right:before {content: "";}
.alink a {color:#231F20;}
.alink a:hover {color:#63A9E2;text-decoration:none;}
.alink a:hover div img {
filter: brightness(1.3);
-webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter: brightness(1.3);
-ms-filter: brightness(1.3);
opacity: 0.9;filter: alpha(opacity=90);
}
.alink a:hover>.bannercontent {background:#231F20;}
.alink a:hover>.rightbannercontent {background:#231F20;}
.carousel-indicators {bottom: 0px;}
.carousel-indicators li {
display: inline-block;
width: 24px;
height: 6px;
margin: 1px;
text-indent: -999px;
border: 0px solid #fff;
border-radius: 6px;
cursor: pointer;
background-color: rgba(255,255,255,0.4);
}
.carousel-indicators .active {
width: 24px;
height: 6px;
margin: 1px;
background-color: #fff;
}
.carousel-control.left, .carousel-control.right {
background-image: none;
}
.carousel-control {width:70px;}
.carousel-caption-div {
position: absolute;
bottom: 40px;
z-index: 10;
padding:0;
width:412px;
}
.caption-left {left:90px;}
.caption-right {right:90px;}
.caption-title {
/*font-family:verdana,arial,sans-serif;*/
font-size:22px;
line-height:1.1;
font-weight:400;
letter-spacing:0.05em;padding:10px 20px;color:#fff;}
.caption-content {font-size:14px;line-height:1.3;margin:2px 0 0 0;padding:10px 20px;background:#d8d8d8;background:rgba(255,255,255,0.8);color:#231F20;}
.readmore {float:right;text-align:right;color:#CC1919;margin-top:10px;font-size:0.8em;}
.readmore:hover {color:#231F20;}
.hblock {width:300px;height:300px;padding:20px;}
.sqpadding {padding:20px;}
.centitle {color:#fff;text-align:center;width:100%;font-weight:300;}
.subtitle {margin:10px 0 12px 0;}
.submitbtn {background:#231F20;color:#fff;font-size:0.8em;padding:5px;margin:20px 0 20px 0;}
.submitbtn:hover {background:#fff;color:#231F20;}
.cenfooter {color:#231F20;text-align:center;width:100%;font-weight:400;font-size:0.8em;}
.cenfooter a {color:#231F20;}
.hslist {width:960px;margin:0 auto;margin-bottom:40px;}
footer {background-color:#231F20; }
footer {font-size:13px;line-height:1.3;color:#a9a9a9;letter-spacing:0.05em;}
footer .container {padding:20px 10px 20px 10px;margin-bottom: 0px;}
footer ul {padding:0;}
footer li {list-style:none;}
footer>div>ul>li {float:left;color:#fff;margin-right:12px;min-width:11%;/*margin-right:20px;min-width:12%;*/}
footer .subli {float:left;color:#fff;margin: 16px 12px 0 0;width:200px;}
footer ul ul {margin-top:16px;}
footer ul li ul li {font-size:12px;font-weight:300;margin:1em 0 0 1.1em;}
footer a {color:#a9a9a9;}
footer a:hover {color:#fff;text-decoration:none;}
footer .fa-li {
position: absolute;
left: -1.04285714em;
width: 0.24285714em;
top: .04285714em;
text-align: center;
}
footer>div>ul>li {
width:13%;
margin-right: 2%;
}
footer>div>ul>li:nth-child(2) {
width:38%;
}
footer .subli {
margin: 16px 2% 0 0;
width: 31%;
}
.footericon {float:left;font-size:28px;margin-top:40px;width:20%;}
.footericon a {float:left;margin:0 20px 0 0;opacity: 0.65;filter: alpha(opacity=65);}
.footericon a:hover {opacity: 1;filter: alpha(opacity=100);}
.footericon a img {max-width:100%;}
.copyright {float:left;font-size:14px;width:100%;text-align:right;}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0px;}
.side-nav ul {margin:0;padding:0;}
.side-nav ul li {list-style:none;width:100%;}
.side-nav ul li a {
position: relative;
left: 0;
display: table-cell;
padding: 18px 10px 18px 36px;
color: #6D6F71;
width:300px;
vertical-align: middle;
font-size: 18px;
line-height: 22px;
font-weight: 300;
font-style: normal;
overflow: hidden;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.side-nav ul li a:hover {text-decoration:none;background-color:#454545;color:#fff;}
.side-nav ul li .active {background-color:#454545;color:#fff;}
.side-nav .fa-ul {
padding-left: 0px;
margin-left: 0px;
list-style-type: none;
}
.side-nav .fa-li {
position: absolute;
left: 0.84285714em;
width: 0.84285714em;
top: 1.14285714em;
text-align: center;
}
.side-nav ul li ul li a {
position: relative;
left: 0;
display: table-cell;
padding: 10px 10px 10px 52px;
color: #b6b6b6;
width:300px;
vertical-align: middle;
font-size: 18px;
line-height: 22px;
font-weight: 300;
font-style: normal;
}
.side-nav ul li ul li a:hover {text-decoration:none;background-color:#b3b3b3;/* #4a90e2 */ color:#fff;}
.side-nav ul li ul li .active {background-color:#b3b3b3;/* #4a90e2 */color:#fff;}
.side-nav ul li ul li .fa-li {
position: absolute;
left: 1.84285714em;
width: 0.84285714em;
top: 0.64285714em;
text-align: center;
}
.side-nav ul li ul li ul li a {
position: relative;
left: 0;
display: table-cell;
padding: 10px 10px 10px 70px;
color: #b6b6b6;
width:300px;
vertical-align: middle;
font-size: 18px;
line-height: 20px;
font-weight: 300;
font-style: normal;
}
.side-nav ul li ul li ul li a:hover {text-decoration:none !important;background:none !important;color:#231F20 !important;}
.side-nav ul li ul li ul li .active {background:none !important;color:#231F20 !important;}
.side-nav ul li ul li ul li .fa-li {
position: absolute;
left: 2.84285714em;
width: 0.84285714em;
top: 0.74285714em;
text-align: center;
}
.section10 .side-nav ul li a:hover {text-decoration:none;background-color:#04BFC7;color:#fff;}
.section10 .side-nav ul li .active {background-color:#04BFC7;color:#fff;}
.section21 .side-nav ul li a:hover {text-decoration:none;background-color:#63A9E2;color:#fff;}
.section21 .side-nav ul li .active {background-color:#63A9E2;color:#fff;}
.section21 .side-nav ul li ul li a:hover {text-decoration:none;background-color:#92c3eb;color:#fff;}
.section21 .side-nav ul li ul li .active {background-color:#92c3eb;color:#fff;}
.section21 .side-nav ul li ul li ul li a:hover {text-decoration:none !important ;background-color:#92EBE6 !important;color:#fff; !important}
.section21 .side-nav ul li ul li ul li .active {background-color:#92EBE6 !important ;color:#fff !important;}
.section30 .side-nav ul li a:hover {text-decoration:none;background-color:#BF973B;color:#fff;}
.section30 .side-nav ul li .active {background-color:#BF973B;color:#fff;}
.section40 .side-nav ul li a:hover {text-decoration:none;background-color:#D72121;color:#fff;}
.section40 .side-nav ul li .active {background-color:#D72121;color:#fff;}
.news-nav {font-size:16px;line-height:1.2;}
.news-nav ul li a {font-size:16px;line-height:1.3;padding:10px 10px 10px 20px;}
.news-nav .fa-ul {
padding-left: 0px;
margin-left: 0px;
list-style-type: none;
}
.news-nav .fa-li {
position: absolute;
left: 0.44285714em;
width: 0.44285714em;
top: .72285714em;
text-align: center;
}
.side-ad {margin:0 0 20px 0;position:relative;}
.copy p+p {margin-top:26px;}
.copy ul {margin-bottom:26px;}
.copy li {line-height:1.5;margin-bottom:6px;}
.caption {font-size:14px;font-weight:300;}
.tabnav {background:#dfdfdf;}
.tabnav li a {color:#231F20;border-right:1px solid #9a9a9a;}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
.tabnav>li>a:hover, .tabnav>li>a:focus, .tabnav>li>.active {
text-decoration: none;
background-color: #a9a9a9;
color: #fff;
}
p img, div img {max-width:100%;}
.container {width:1280px;}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0px;}
#pagenav .navbar-nav {margin:0;}
#pagenav .navbar-nav li {background:#b6b7b8;color:#231F20;text-align:center;font-size:16px;line-height:1.1;font-weight:300;margin:0;border-left:1px solid #fff;display:table;}
#pagenav .navbar-nav li:first-child {border:none;}
#pagenav .navbar-nav li a {color:#231F20 !important;display:table-cell;padding:0;min-height:70px;vertical-align:middle;}
#pagenav .navbar-nav li:hover, #pagenav .navbar-nav .active {background:#231F20;color:#fff !important;}
#pagenav .navbar-nav li:hover a, #pagenav .navbar-nav .active a {background:#231F20;color:#fff !important;}
.sectitle {color:#D72121;font-size:20px;padding:20px 0 0px 0;}
.imgleft {float:left;margin:0 20px 20px 0;}
.imgright {float:right;margin:0 0 20px 20px;}
.imgleftgap {margin:0 20px 0 0;}
.imgrightgap {margin:0 0 0 20px;}
.uppercase {text-transform:uppercase;}
.bgcolor11 {background:#04BFC7;}
.bgcolor111 {background:#4FD2d8;}
.bgcolor21 {background:#63A9E2;}
.bgcolor211 {background:#92c3eb;}
.bgcolor22 {background:#6DAA40;}
.bgcolor221 {background:#78bde9;}
.bgcolor23 {background:#F69739;}
.bgcolor231 {background:#F9b674;}
.bgcolor31 {background:#BF973B;}
.bgcolor311 {background:#D2b675;}
.bgcolor41 {background:#D72121;}
.bgcolor411 {background:#E36363;}
.bgcolor011 {background:#ffffff;}
.bgcolorspecies {background:#4a90e2;}
.bgcolorspecies a {color:#fff;text-decoration:none;}
.bgactive {background:#231F20;}
.thead {background: #ddd;}
.row01 {background: #fff;color: #333;}
.row02 {background: #eee;color: #333;}
/*.zh-HK .secondmenu, .zh-CN .secondmenu {min-height:220px;width:520px;}*/
.zh-HK .dropdown-menu, .zh-CN .dropdown-menu {min-width:180px; width:100%;}
.zh-HK footer .subli, .zh-CN footer .subli {/*width:200px;*/min-width: 100px;width: 150px;}
.zh-HK .submenu, .zh-CN .submenu {width:160px !important;}
.newsgap {height:20px;}
.centerdiv {margin:0 10px 0 10px;position:relative;}
.topleftdiv {position:absolute;top:0;left:0;padding:15px 20px 15px 20px;color:#fff;letter-spacing:0.05em;}
.topleftdiv i {font-size:1.3em;margin-left:10px;}
.leftnamediv {position:absolute;bottom:60px;left:0;padding:15px 20px 15px 20px;color:#fff;font-size:22px;letter-spacing:0.05em;width:30%;}
.sppage {margin-bottom:9em;}
.spheader {color:#cc1919;font-size:1em;padding:15px 0;font-weight:700;}
.spheader i {font-size:1.1em;margin-right:6px;}
.spnav {background:#fff;margin-bottom:0;position:relative;}
.spnav a {margin-bottom:1px;padding:15px 10px 15px 30px;background:#d0d0d0;color:#282828;display:block;text-decoration:none;}
.spnav a:hover {background:#000;color:#fff;cursor:pointer;}
.spnav .active {background:#000;color:#fff;}
.spnav a:before {font-family: 'FontAwesome';/*content: '\f105';*/font-size:1.1em;position:absolute;left:15px;}
.fixspnav {position:fixed;top:117px;width:300px;}
.spovtable {width:100%;}
.spovtable tr:nth-child(odd) {background: #f0f0f0}
.spovtable tr:nth-child(even) {background: #f8f8f8}
.spovtable td {padding:15px 20px;vertical-align:top;text-align:left;}
.spovtable td:first-child {width:40%;}
.spcol4 {width:300px;margin:0 10px 20px 0;}
.spcol8 {width:620px;margin:0 0 20px 10px;}
.spcentdiv {position:relative;width:80%;margin:0 auto;padding:15px 20px;top:-3em;background:rgba(245,245,245,1);}
.spcentdiv header {font-weight:700;text-align:center;margin:0 1em 1em 1em ;}
.spstatus {float:left;width:30px;height:30px;text-align:center;vertical-align:middle;display:table-cell;background:#ccc;margin-right:1em;border-radius:50%;font-size:14px;padding-top:4px;cursor:pointer;}
.redstatus {background:#cc1919;color:#fff;}
.spinheader {font-size:1em;font-weight:700;padding:15px 0;}
.spintable {width:97%;margin:0 0 0 3%;}
.spintable th {padding:0 20px 0 0;vertical-align:top;text-align:center;}
.spintable td {padding:15px 20px 0 20px;vertical-align:top;text-align:left;}
.spintable td:first-child {width:48%;padding:15px 0 0 0;}
.spwholediv {margin-right:25px;min-height:238px;}
.ui-tooltip {background:#fff;max-width:200px;border-radius:5px;font-size:0.9em;padding:8px;line-height:1.3;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.vertgap {height:1em;}
.othersp {margin-top:2em;border-top:1px solid #646464;}
.onethird td {width:33%;vertical-align:top;text-align:left;}
.ntable {width:100%;margin:0px;padding:0px;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;border-collapse: collapse;border-spacing: 0;}
.ntable tr:nth-child(odd) {background-color:#f0f0f0;}
.ntable tr:nth-child(even) {background-color:#ffffff;}
.ntable td {text-align:center;vertical-align:top;border-top:1px solid #d0d0d0;border-left:1px solid #d0d0d0;padding:5px;}
.ntable td:first-child {text-align:left;font-weight:bold;}
.ntable tr:first-child td {vertical-align:middle;background:#e0e0e0;}
.ntable tr:last-child td {vertical-align:middle;border-top:2px solid #a0a0a0;}
.ntable th {text-align:center;}
.detable {width:100%;margin:0px;padding:0px;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;border-collapse: collapse;border-spacing: 0;}
.detable tr:nth-child(odd) {background-color:#f0f0f0;}
.detable tr:nth-child(even) {background-color:#ffffff;}
.detable td {text-align:left;vertical-align:top;border-top:1px solid #d0d0d0;border-left:1px solid #d0d0d0;padding:5px;}
.detable td:first-child {text-align:left;font-weight:bold;width:30%;}
.detable ul {margin:0;padding:0;}
.detable li {margin-left:1.5em;}
.wholeyear {width:940px;font-size:1.1em;font-weight:400;padding:0.1em 0.6em;clear:both;margin:10px 10px 30px 10px;color:#fff;}
.wholeyear:hover {background:#63A9E2;}
.pcursor {cursor:pointer;}
.listyear {font-size:1.1em;font-weight:600;padding:0.1em 0.6em;clear:both;margin:10px 0 10px 10px;}
.listyearblock {float:left;font-size:1.1em;font-weight:400;padding:0;margin:1px 1px 1px 0;}
.listyearblock a {color:#fff;text-decoration:none;padding:3px 17px;display:block;}
.listyearblock a:hover {background:#000;}
.projecttable {width:100%;margin:0;padding:0px;border-top:1px solid #d0d0d0;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;border-collapse: collapse;border-spacing: 0;font-size:0.9em;line-height:1.3;}
.projecttable tr:nth-child(odd) {background-color:#f0f0f0;}
.projecttable tr:nth-child(even) {background-color:#ffffff;}
.projecttable td {text-align:left;vertical-align:top;border-top:1px solid #d0d0d0;border-left:1px solid #d0d0d0;padding:10px 5px;}
.projecttable th {text-align:center;font-weight:600;background-color:#e0e0e0;border-top:1px solid #d0d0d0;border-left:1px solid #d0d0d0;padding:5px;}
.projshowrow {padding:3px !important;display:none;}
.projshowtag {font-size:0.9em;padding-top:10px;cursor:pointer;color:#F69739;}
.projshowtag:hover {color:#c00;}
.projshowdesc {padding:10px 10px 5px 10px;color:#000;}
.projdRow {background:#F69739 !important;}
.projyearblock {float:left;font-size:1em;font-weight:400;padding:0;margin:0 1px 1px 0;}
.projyearblock a {color:#fff;text-decoration:none;padding:3px 8px;display:block;}
.projyearblock a:hover {background:#000;}
.selected {background:#000;}
.milestonediv {width:100%;margin:24px 0;}
.mstoneleft {float:left;width:15%;}
.milestoneyear {background:#04BFC7;opacity:0.5;cursor:pointer;padding:0.5em 1em; width:100px;margin-bottom:1px;text-align:center;}
.milestoneyear:hover {opacity:1;}
.mstoneleft .active {opacity:1;}
.mstoneright {float:left;width:85%;}
.milestonedesc {display:none;}
.mstitle {font-size:20px;line-height:22px;margin:20px 10px 20px 10px;}
.tbremark {font-size:0.8em;}
.mstop1 {margin-top:0;}
.mstop2 {margin-top:0;}
.mstop3 {margin-top:0;}
.mstop4 {margin-top:3em;}
.mstop5 {margin-top:3em;}
.mstop6 {margin-top:3em;}
.mstop7 {margin-top:3em;}
.mstop8 {margin-top:3em;}
.mstop9 {margin-top:3em;}
.mstop10 {margin-top:5em;}
.mstop11 {margin-top:7em;}
.mstop12 {margin-top:7em;}
.mstop13 {margin-top:20em;}
.mstop14 {margin-top:20em;}
.mstop15 {margin-top:20em;}
.mstop16 {margin-top:20em;}
.mstop17 {margin-top:20em;}
.mstop18 {margin-top:20em;}
/* species short */
.sptoptitle {font-size:1.1em;padding:10px 20px;color:#fff;}
.sptitlelink{
float:left;
/*width: 425px;*/
background: url(../images/listpointer-b.gif) no-repeat;
padding: 0 8px 0 12px;
font-size: 14px;
font-weight: bold;
}
.sptitlelinkov {
background: url(../images/listpointer-b_ov.gif) no-repeat top left;
padding-left: 12px;
}
.sptitlelink a {
color: #1976bb;
text-decoration: none;
}
.sptitlelink a:hover, .cenlink a.active {
color: #f89726;
}
.spthumb {
margin: 0px 0px 12px 14px;
}
.spthumbtext {
padding: 0px 8px 0px 12px;
text-align: left;
line-height: 120%;
}
.sscontent {
width: 688px;
margin: 0px 0px 0px 14px;
}
.sspic {
width: 23%;
float: left;
margin: 0 2% 0 0;
padding:1em 0 0 0;
text-align:center;
}
.sspictop {
height:0;
}
.sspicbot {
height:0;
}
.sspicimg {
text-align:center;
margin-bottom:1em;
}
.sspictxt {
font-size: 0.9em;
line-height: 130%;
color: #777777;
}
.sscontext {
width: 73%;
margin: 0 2% 0 0;
float: left;
}
.sscontext td {border:1px solid #ddd;}
.sstablehead {
font-weight: 600;
background-color: #f3f8fb;
text-align: left;
line-height: 120%;
width:30%;
}
.sstablecell {
width:70%;
background-color: #ffffff;
text-align: left;
}
.sstabletitle {
background-color: #ffffff;
text-align: left;
font-weight: 600;
}
.fielderror {background:#c00 !important;}
.radioerror {text-align:center;height:129px;margin-top:20px;}
.noerror {text-align:center;height:129px;margin-top:20px;}
.fielddisabled {background:#aaa !important;color:#999 !important;}
.fielddisabled:hover {background:#aaa !important;color:#999 !important;}
.navbar-default .navbar-toggle {
display:none;
}
.navbar-toggle-resc {
border-color: #ddd;
display: none;
background-color: #888;
/*float: left;*/
padding: 9px 10px;
}
.btn-group-header {
display: none;
}
.btn-group-top {
padding-left:8px;padding-top:12px;margin-bottom:10px;
}
#photogallery {
height:480px;
}
.jgallery[data-jgallery-id="1"] .zoom-container .nav-bottom {
background: rgb(255,255, 255);
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
table {
max-width:100%;
display:block;
}
.carousel {width:1260px;margin:0 auto;margin-top:0px; }
@media (max-width: 1280px) {
.carousel {width:100%;margin:0;margin-top:0px;}
.container {width:100%;}
.sectiontitle {margin:40px 0 20px 0;padding:0 1%;}
.fullpagetitle {margin:20px 0 20px 0;padding:0 1%;}
.navbar-header {width: 78%;height: auto;padding: 0 0px 0 0px;}
.navbar-collapse {width:20%;float:left;}
.navbar-nav {margin: 28px 0 0 10px;font-size:12px;}
.navbar-nav>li {margin-right: 12px;letter-spacing: 0em;height: auto;}
.navbar-nav>li>a {padding: 10px 5px 10px 5px;}
.navbar-langbox {margin:10px 1% 0 0;}
.navbar-langbox>li {margin-right:0;margin-left:20px;}
.langspacer {width: 400px;}
.navbar-fof {
margin: 45px 0 0 0;
padding: 6px 10px 6px 10px;
font-size: 14px;
}
.navbar-donate {
margin-top: 46px;
padding: 6px 10px 6px 10px;
font-size: 14px;
}
.subdropmenu>li>a {
padding: 6px 0px 6px 30px;
}
.col4 {
width:23%;
margin: 0 1% 2em 1%;
}
article.col4 {
min-height: 16em;
}
article.col4 .imgbg {min-height:165px;}
.col8 {
width: 48%;
margin: 0 1% 1em 1%;
}
header.col8 {
margin-top:1em;
}
#pagenav .navbar-nav li {
padding:0.5em 2px;
}
.col12nopad {
width: 75%;
margin: 0 0 2em 0;
}
.col12 {
width: 73%;
margin: 0 1% 2em 1%;
}
.col12nopad .col12 {
width: 98%;
margin: 0 1% 2em 1%;
}
.col12nopad .col8 {
width: 73%;
margin: 0 1% 1em 1%;
}
.scol8 {
width: 66.5%;
margin: 0 0px 10px 0px;
}
.supportdiv {
width: 33.5%;
}
.section10 .floatleft.col8.copy table tr td:first-child {
width:35%;
}
.tcol2 {
width: 16%;
margin: 0 0 1em 1%;
max-width:150px;
}
.spwholediv {
margin-right: 3%;
min-height: 13em;
}
.section21 .floatleft.col12.copy table {
width:100% !important;
}
.wholeyear {
width:98%;
margin: 1em 1% 2em 1%;
}
.section40 .col8 table {
width:100% !important;
}
.section40 .col8 table td:first-child {
width:5%;
}
.section40 .col8 table table td:first-child {
width:20% !important;
}
#pagenav {
width:98%;
margin:0 1%;
}
footer .container {
padding: 2em 1% 2em 1%;
margin-bottom: 0px;
}
.spcol4 {
width: 39%;
margin: 0 1% 1em 0;
}
.spcol8 {
width: 59%;
margin: 0 0 1em 1%;
}
.fixspnav {
width: 23%;
}
.thumbsq {
width: auto;
height: auto;
}
.thumbcontent {
margin:1em 2px;
}
.thumbmore {
font-size:1.5em;
padding:1em;
width: 100%;
}
.centerdiv {
margin: 0 1% 0 1%;
}
.en-US .navbar-nav>li {margin-right: 12px;}
.en-US .navbar-nav>li>a {padding: 10px 5px 10px 5px;}
}
@media only screen and (max-width:1279px) {
#pagenav {display:none;}
}
@media only screen and (max-width:1200px) {
.en-US .navbar-nav>li {margin-right: 12px;}
.en-US .navbar-nav>li>a {padding: 10px 2px 10px 2px;}
.en-US .navbar-fof {
padding: 6px 5px 6px 5px;
}
.en-US .navbar-donate {
margin: 45px 0px 0 0;
padding: 6px 5px 6px 5px;
}
.en-US .navbar-nav li a .arrow {
left: 30%;
}
}
@media (max-width:1102px) {
.en-US .navbar-fof {
display:none;
}
}
@media (max-width:1024px) {
.en-US .navbar-donate {
margin-right:0;
}
.scol8 {
width: 70.5%;
margin: 0 0px 10px 0px;
}
.supportdiv {
width: 29.5%;
}
.supportcell {
font-size: 1rem;
min-height:4em;
width:100%;
}
.col4 {
min-height:auto;
margin-bottom:1em;
}
.bannercontent {
width:auto;
}
.centitle {
font-size:0.8em;
}
.hblock {
height: 255px;
}
footer>div>ul>li {
margin-bottom:2em;
}
.sectiontitle {font-size:1.3em;}
.fullpagetitle {font-size:1.3em;}
.pagetitle {/*font-size:1.3em;*/}
.pagetitlesub {font-size:1.0em;}
.zh-HK footer .subli, .zh-CN footer .subli {
width: 25%;
}
footer>div>ul>li {
margin-right: 0.5em; /*1em;*/
}
footer>div>ul>li:nth-child(1) {
width: 13%; /*15%;*/
}
footer>div>ul>li:nth-child(2) {
width: 45%; /*55%;*/
}
.tcol2 {
width: 17%;
margin: 0 0 1em 1%;
max-width:150px;
}
.spwholediv {
margin-right: 2%;
min-height: 10em;
}
}
@media only screen and (max-width:958px) {
.navbar-fof {
display:none;
}
.hslist {
width: 100%;
}
.langspacer {
width: 10px;
}
.fullpagetitle {
margin: 2em 0 1em 0;
}
footer ul {display:none;}
footer .container {
padding: 1em 1% 2em 1%;
margin-bottom: 0px;
min-height: auto;
}
.footericon {
float: none;
font-size: 28px;
margin-top: 0;
width: 100%;
text-align:center;
display:block;
}
.footericon:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.footericon a {
float:none;
}
.copyright {
float: none;
margin-top: 1em;
width: 100%;
text-align: center;
display:block;
clear:both;
}
.pagetitle {margin:0.5em 0;}
.sectiontitle {
margin-top:0.5em;
margin-bottom:0.5em;
}
.subsectiontitle {
margin-top:0.5em;
margin-bottom:0.5em;
}
.fullpagetitle {
margin: 0.5em 0 0.5em 0;
}
.col4 {
width: 31%;
margin: 0 2% 2em 1%;
min-height: initial;
}
.col8 {
width: 63%;
margin: 0 1% 2em 2%;
}
.col12 {
width: 96%;
margin: 0 2% 2em 2%;
}
.col12nopad {
width:96%;
margin: 0 2% 2em 2%;
}
.col4.side-nav {
width:50%;
}
.side-nav {
/*display:none;*/
width: 96%;
margin: 0 2% 0 2%;
}
.side-nav .side-nav {
display:none;
}
.side-nav:hover .side-nav {
display:block;
}
.side-nav ul li a {
padding: 8px 8px 8px 22px;
}
.side-nav ul li ul li a {
padding: 8px 8px 8px 40px;
}
.side-nav .fa-li {
left: 0.3em;
top: 0.5em;
}
.side-nav ul li ul li .fa-li {
left: 1.3em;
top: 0.5em;
}
.pagemenutitle {
margin: 12px 0 12px 1%;
}
.pagemenutitle:before {
font-size: 22px;
font-family: 'fontawesome';
content: '\f0c9';
padding: 0 5px 5px 0;
}
.spwholediv {
min-height: 12em;
}
.spnav {
display:none;
}
.sppage {
margin-bottom: 1em;
}
article.col4 {
margin: 0 1% 2em 1%;
}
article.col4 .imgbg {
min-height: 213px;
}
.homediv .col8 {
width: 48%;
margin: 1em 1% 1em 1%;
}
.homediv .col4 {
width: 23%;
margin: 0 1% 1em 1%;
}
.homediv article.col4 .imgbg {
min-height: 165px;
}
.navbar-header {
width:79%;
}
.homesupport .col12 {
width: 70.5%;
margin: 0 0.5% 1em 1%;
}
.homesupport .col4 {
width: 26.5%;
margin: 0 1% 1em 0.5%;
}
.homesupport .supportcell {
min-height: 57.5px;
}
.hslist .tcol2 {
width: 16%;
margin: 0 0 1em 1%;
}
.hblock {
padding:12px;
height:230px;
}
.bannercontent {font-size:14px;}
}
@media only screen and (max-width:860px) {
.homesupport .supportcell {
min-height: 52px;
}
.hblock {
height: 208px;
}
}
@media only screen and (max-width:792px) {
.navbar-home {
display:none;
}
.navbar-fof {
display:block;
}
.homesupport .supportcell {
min-height: 49px;
}
.navbar {
min-height: none;
margin-bottom: 4px;
}
.navbar:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.navbar .container {
margin-bottom: 0;
}
.navbar .container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.navbar-default .navbar-toggle {
display: block;
}
.navbar-toggle-resc {
display: block;
}
.btn-group-top {
padding-left:0px;padding-top:0px;margin-bottom:10px;
}
.btn-group-header {
display: block;
}
.navbar-header {
width: 100%;
height: auto;
padding: 0 0px 0 0px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background:none;
}
.navbar-toggle {
margin: 1em 1em;
background:none;
border: none;
}
.navbar-toggle .icon-bar {
display: block;
width: 2em;
height: 3px;
border-radius: 1px;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 6px;
}
.navbar-toggle-resc {
/*margin: 1em 1em;*/
margin-bottom: 0.5em;
margin-right: 0.5em;
background:none;
border: none;
}
.navbar-toggle-resc .icon-bar {
display: block;
width: 2em;
height: 3px;
border-radius: 1px;
background-color: #000000;
}
.navbar-toggle-resc .icon-bar+.icon-bar {
margin-top: 6px;
}
.navbar-toggle-resc .fa .fa-angle-right {
}
.navbar-brand {
float: left;
height: auto;
padding: 0;
max-width:217px;
min-width:100px;
width:50%;
margin: 1em;
margin-left:1em;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 1em;
}
.navbar-fixed-top {
position:relative;
}
.navbar-default {
background-color: #fff;
border: none;
height: auto;
}
.navbar-collapse {
width: 100%;
float: none;
position: absolute;
top: 0;
left: 0;
background: #fff;
padding-bottom:50px;
}
.navbar-fixed-top .navbar-collapse {
max-height:none;
position: absolute;
-webkit-box-shadow: 0px 10px 11px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 10px 11px 0px rgba(0,0,0,0.4);
box-shadow: 0px 10px 11px 0px rgba(0,0,0,0.4);
}
.collapse {
display: none;
visibility: hidden;
}
.navbar-langbox {
margin: 20px 12px 0 0;
float:right;
}
.navbar-nav {
float:none;
width:100%;
/*margin: 2em 1em;*/
/*padding-bottom:2em;*/
clear:both;
font-size:16px;
font-weight:bolder;
}
.navbar-nav>li {
float: none;
clear: both;
}
.nav-closebtn {
position:absolute;
top:0.5em;
left:0.5em;
font-size:1.5em;
display:block;
color: #333;
}
.navbar-nav li:hover a .arrow {
display:none;
}
.dropdown-menu.fa-ul{
display:block;
}
.dropdown-menu li {
margin-bottom:1em;
float:left;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
background-color: #fff;
color: #777 !important;
}
.fixed-top .navbar-collapse {
max-height: none;
}
.navbar-fof {
margin: 0 0 0 0;
padding: 6px 10px 6px 10px;
float: none;
width: auto;
position:absolute;
bottom:1em;
right:1em;
}
.navbar-donate {
margin: 0 0 0 0;
padding: 6px 10px 6px 10px;
/*float: none;*/
width: auto;
/*position:absolute;*/
/*bottom:1em;*/
/*right:11em; */
}
.en-US .navbar-donate {
right:19em;
}
.dropdown-menu {
position:relative;
top:0;
min-width: initial;
color:#777;
background-color:#fff;
}
.dropdown-menu>li>a {
color:#777;
}
.submenu {
float: left;
min-width:initial;
}
.submenu>a {
padding: 6px 20px 6px 30px;
}
.zh-HK .dropdown-menu, .zh-CN .dropdown-menu {
min-width:initial;
}
.secondmenu {
width:auto;
min-height: 240px;
background-color: #fff;
}
.subdropmenu {
background:#fff;
color:#777;
}
.subdropmenu li {
margin-bottom:1em;
}
.subdropmenu>li>a {
color:#777;
}
.toppage {
margin-top: 0;
}
.navbar-collapse:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.hslist {
width:100%;
margin-bottom: 0px;
}
.tcol2 {
width: 18%;
margin: 0 1% 1em 1%;
}
.supportcell {
min-height: 3em;
}
.subtitle {
font-size:0.8em;
}
.hblock {
height:auto;
margin-bottom:0;
padding: 0.5em;
}
.hblock .vertgap {
height:0.4em;
}
.col12 {
width: 96%;
margin: 0 2% 1em 2%;
}
.col8 {
width: 64%;
margin: 0 1% 1em 2%;
}
.col4 {
width: 30%;
margin: 0 2% 1em 1%;
}
.spwholediv {
min-height: 12em;
}
.post__article {
width: 64%;
margin: 0 1% 1em 2%;
}
.fixspnav {
width: 30%;
}
.post__article .vertgap {
height:0;
}
input {font-size:16px;}
.hslist .tcol2 {
width: 18.5%;
margin: 0 0 1em 1%;
}
.homesupport .scol8 {
width: 100%;
margin: 0 0 0 0;
float:none;
}
.homesupport .supportdiv {
float:none;
width:100%;
}
.side-nav {
margin: 0 2% 1em 2%;
}
}
@media only screen and (min-width:792px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 10px;
overflow: visible !important;
visibility: visible !important;
}
.btn-group-vertical {
display: block !important;
}
.min_nav {
display: none;
}
.btn-group-vertical {
display:block !important;
width:100%;
}
.resource_selection {
display: block;
}
}
@media only screen and (max-width:792px) {
.navbar-collapse.collapse {
display: none !important;
padding-bottom:25px;
}
.navbar-collapse.collapse.in {
display: block !important;
visibility: visible !important;
}
.btn-group-vertical {
display: none;
}
.min_nav {
padding-top: 10px;
display: block;
}
.resource_container {
display: block;
}
.resource_selection {
margin-top:5px;
display:block;
}
}
@media only screen and (max-width:736px) {
.navbar-nav>li {
float: none;
}
.navbar-toggle {
margin-top:2em;
}
/*.navbar-donate {
bottom: 8em;
}
.navbar-fof {
bottom: 2em;
}*/
.navbar-brand {
width:30%;
}
.container {
padding:0 1%;
}
.sectiontitle {
padding:0 2%;
}
article.col4 {
min-height: 16em;
}
.greybg .col8 {
width: 50%;
margin: 1em 0 1em 0;
}
.greybg .col4 {
width: 23%;
margin: 0 1% 1em 1%;
}
.bannercontent {
font-size:0.8em;
}
.scol8 {
width: 63%;
margin: 0 0px 10px 0px;
}
.supportdiv {
width: 37%;
}
.thumbcontent {
font-size: 0.9em;
}
.copyright span {
display:block;
padding:1em 0 0 0;
}
nav.col4 {
/*display:none;*/
}
.col12.copy.post__article {
width: 100%;
margin: 0 0 1em 0;
}
.newscontent {
font-size:0.7em;
}
.toggleDiv .col4 {
min-height: 16em;
}
.sppage {
margin-bottom: 2em;
}
.dropdown-menu>li>a {
white-space:normal;
}
.subdropmenu {
position:relative;
top:0;
}
.en-US .hslist .tcol2 {
min-height: 15em;
}
.col4.side-nav {
width: 90%;
}
}
@media only screen and (max-width:667px) {
.col4 {
width: 47%;
margin: 0 2% 1em 1%;
}
.tcol2 {
width: 31%;
margin: 0 1% 1em 1%;
min-height:15em;
}
.col8, .col12nopad .col8 {
width: 96%;
margin: 0 2% 1em 2%;
}
.col12.copy.post__article {
width: 96%;
margin: 0 2% 1em 2%;
}
.topleftdiv {
padding: 0.5em;
color: #fff;
letter-spacing: 0.05em;
}
.leftnamediv {
bottom: 60px;
left: 0;
padding: 0.5em;
color: #fff;
font-size: 1.1em;
letter-spacing: 0.05em;
width: auto;
}
/*.langspacer {
width: 300px;
}*/
.navbar-collapse {
padding-bottom:4em;
}
.navbar-fof {
bottom:1em;
right:1em;
}
.en-US .navbar-fof {
bottom:1em;
right:1em;
width:18em;
}
.navbar-donate {
bottom:1em;
right:12em;
}
.en-US .navbar-donate {
right:20em;
}
.dropdown-menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.dropdown-menu li {
float:left;
width:33%;
}
.dropdown-menu li:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.secondmenu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.subdropmenu {
width:100%;
margin-top:1em;
}
.subdropmenu li:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.subdropmenu li {
float: none;
width: 100%;
}
.hslist .tcol2 {
width: 24%;
margin: 0 0 1em 1%;
}
article.col4 .imgbg {
min-height: auto;
}
}
@media only screen and (max-width:640px) {
.carousel-caption-div {
width:50%;
}
.homesupport .bannercontent {
font-size:1em;
}
.homesupport floatleft {
float:none;
}
.homesupport .col12 {
width: 96%;
margin: 0 2% 1em 2%;
}
.homesupport .col4 {
width: 96%;
margin: 0 2% 1em 2%;
}
.homesupport .scol8 {
width: 100%;
margin: 0 0px 0px 0px;
}
.hslist .tcol2 {
width: 31%;
margin: 0 0 1em 2%;
}
.supportdiv {
width: 100%;
}
}
@media only screen and (max-width:790px) {
.navbar-content {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
/*margin-bottom: 20px; */
}
}
@media only screen and (max-width:568px) {
body {
font-size:14px;
}
.newscontent {
font-size: 0.9em;
}
.greybg .container .alink:nth-child(1) {
width: 48%;
margin: 0 1% 1em 1%;
}
.greybg .container .alink:nth-child(2) {
display:none;
}
.greybg .container .alink:nth-child(3) {
width: 48%;
margin: 0 1% 1em 1%;
}
.greybg .container .alink:nth-child(4) {
display:none;
}
.caption-left {
left: 1em;
}
.caption-right {
right: auto;
left: 1em;
}
.langspacer {
width: 10px;
}
/*.carousel-caption-div {
width: 90%;
}*/
.caption-title {
font-size: 1em;
line-height: 1.1;
font-weight: 400;
letter-spacing: 0.05em;
padding: 5px 5px;
}
.caption-content {
font-size: 1em;
padding: 5px 5px;
}
.sectiontitle {
font-size:1em;
line-height:1.1;
}
.scol8 {
width: 100%;
margin: 0 0px 0px 0px;
}
.hblock {
width:96%;
margin: 0 2% 1em 2%;
}
.centitle {
font-size: 1em;
}
.subtitle {
font-size: 1em;
}
}
@media only screen and (max-width:480px) {
body {
line-height:130%;
}
.dropdown-menu li {
width:50%;
}
.subdropmenu li {
width: 100%;
}
.langspacer {
width: 100px;
}
.mstoneleft {
float: left;
width: 25%;
}
.mstoneright {
float: left;
width: 75%;
}
.milestoneyear {
width:100%;
padding: 0.5em 0.5em;
}
.navbar-langbox>li {
margin-right: 0;
margin-left: 1em;
}
.homediv .col4 {
width: 48%;
}
.bannercontent, .rightbannercontent {
bottom:0;
font-size:14px;
padding:6px;
}
.hslist .tcol2 {
min-height: 12em;
}
.en-US .hslist .tcol2 {
min-height: 15em;
}
}
@media only screen and (max-width:479px) {
.navbar-brand {
width:50%;
margin:0.5em;
}
.copyright {
font-size:0.8em;
}
.langspacer {
width: 0px;
}
.navbar-fof {
position:relative;
right:0;
margin-bottom:1em;
width: 12em;
}
.en-US .navbar-fof {
position:relative;
right:0;
margin-bottom:1em;
width: 18em;
}
.navbar-donate {
/*position:relative;*/
right:0;
/*width: 8em;*/
}
.en-US .navbar-donate {
position:relative;
right:0;
}
.spheader {
margin-top:2em;
}
.sspic {
width: 100%;
float: none;
margin: 0 0 1em 0;
padding: 1em 0 0 0;
text-align: left;
}
.sscontext {
width: 100%;
margin: 0 2% 0 0;
float: none;
}
}
@media only screen and (max-width:380px) {
.dropdown-menu li {
width:100%;
}
.thumbmore {
padding: 1em 0.5em;
}
.homediv article.col4 .imgbg {
min-height: 25px;
}
.thumbcontent {
font-size:0.8em;
}
.carousel-caption-div {
width: 60%;
}
}
@media only screen and (max-width:330px) {
.navbar-langbox>li {
margin-left: 0.6em;
}
.caption-title {
font-size:0.9em;
}
.caption-content {
font-size:0.8em;
}
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: none!important;
}
}
@media (min-width: 792px) {
.navbar-collapse.collapse {
display: block!important;
}
}
.navbar-header-icon-opcf {
display:inline-block;
vertical-align:top;
/*padding-top:25px;*/
padding-right:20px;
padding-left:10px;
max-height: 120px;
}
.navbar-header-icon-mers {
display:inline-block;
vertical-align:top;
padding-top:25px;
padding-right:20px;
}
.navbar-header-icon-text {
display:inline-block;
text-decoration:inherit;
letter-spacing:normal;
line-height:normal;
color:#009CFF;
padding-top:10px;
}
.navbar-header-icon-text > a > img {
height: 110px;
}
@media only screen and (max-width:1120px) {
.navbar-donate:lang(zh-HK) {
margin-top:53px;
/*margin: 87px 10px 0 0;*/
font-size:16px !important;
}
.navbar-home-item {
font-size:16px !important;
height:45px;
margin-top:73px;
margin-left:0px;
margin-right:0px;
padding-left: 8px;
padding-right:8px;
padding-top: 12px;
/*padding-left: 15px;
padding-right:15px;
padding-top: 10px;
padding-bottom: 10px;
background:#ffffff !important;
color:#4a90e2 !important;
font-size: 20px;
cursor:pointer;
height:50px;
margin-top:55px;
margin-left:10px;
margin-right:10px;
margin-bottom: 1px;
display: inline-block;*/
}
.navbar-header-icon-opcf {
padding-left: 8px;
padding-right: 5px;
padding-top: 30px;
}
.navbar-header-icon-mers {
padding-left: 5px;
padding-right: 5px;
padding-top: 30px;
}
.navbar-header-icon-text {
padding-top: 15px;
}
.navbar-header-icon-opcf > a > img {
height:60px;
}
.navbar-header-icon-mers > a > img {
height:60px;
}
.navbar-header-icon-text > a > img {
height: 90px;
}
}
@media only screen and (max-width:984px) {
.navbar-header-icon-opcf > a > img {
height:54px;
}
.navbar-header-icon-mers > a > img {
height:54px;
}
.navbar-header-icon-text > a > img {
height: 75px;
}
.navbar-donate:lang(zh-HK) {
margin-top:56px;
/*margin: 35px 10px 0 0;*/
font-size:14px !important;
}
}
@media only screen and (max-width:792px) {
.navbar-donate:lang(zh-HK) {margin: 5px 10px 0 0;font-size:14px !important;}
}
@media only screen and (max-width:795px) {
.navbar-content-box-res-item {
float: none;
}
.navbar-content-box-res-text {
padding-top:25px;
}
.navbar-header-icon-opcf {
padding-left: 8px;
padding-right: 5px;
padding-top: 10px;
}
.navbar-header-icon-mers {
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
}
.navbar-header-icon-text {
padding-top: 10px;
}
.navbar-header-icon-text > a > img {
height: auto;
}
.resource_body {
margin-left:0px;
}
}
@media only screen and (max-width:520px) {
.navbar-header-icon-opcf > a > img {
height:60px;
}
.navbar-header-icon-mers > a > img {
height:60px;
}
.navbar-header-icon-text {
padding-top: 0px;
width:100%;
}
}
@media only screen and (max-width:460px) {
.navbar-header-icon-opcf {
padding-left: 5px;
padding-right: 0px;
padding-top: 20px;
}
.navbar-header-icon-mers {
padding-top: 20px;
}
.navbar-header-icon-opcf > a > img {
height:46px;
}
.navbar-header-icon-mers > a > img {
height:46px;
}
}
.tabgp > .dropdown-menu {
width: 100%;
min-width: 250px;
top: 50px;
background-color: #ffffff;
color: #606060;
position: sticky;
}
.tabgp > .dropdown-menu >li {
margin-bottom:0px;
}
.tabgp > .dropdown-menu >li >a {
color: #000000;
}
.tabgp > .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: #4a90e2 !important;
color: #ffffff !important;
}
@media only screen and (max-width: 792px)
{
.tabgp {
margin-left:0px !important;
}
.tabgp > .dropdown-menu {
top: 0px;
min-width:100%;
color:#fff;
background-color: #ffffff;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
background-clip: padding-box;
}
.tabgp > .dropdown-menu > li {
width:100%;
}
.tabgp > .dropdown-menu >li >a {
display: block;
padding: 5px 30px 5px 30px;
clear: both;
font-weight: 300;
line-height: 1.2;
color: #000000;
/*white-space: nowrap;*/
}
.tabgp > .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: #4a90e2;
color: #ffffff;
}
}