body.show-env-label {
    padding-top: 30px;
}

div.env-label {
    position: fixed;
    top: 0px;
    width: 100%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background-color: #00629B;
    color: #FFFF00;
    font-weight: bold;
    font-size: 16px;
    opacity: 0.8;
    z-index: 16777271;
    pointer-events: none;
}

#header>.row {
    border-color: #6d1b6d;
}

h1 {
    color: #6d1b6d;
}

h2 {
    color: #5B165B;
}

h3 {
    color: #400640;
}

.site-banner {
    margin: 20px 0px 0px 0px;
    min-width: 360px;
}

.banner-link {
    text-decoration: none;
    opacity: 1.0;
}

.banner-link:hover {
    text-decoration: none;
    opacity: 1.0;
}

.banner-link .small-logo {
    display: none;
}

.top-bar {
    background: #FFFFFF !important;
    border-top: 1px solid #6d1b6d;
    border-bottom: 0.0625rem solid #6d1b6d;
    float: none !important;
}

.navbar-default .navbar-nav>li>a {
    color: #6d1b6d;
    font-weight: bold;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:active {
    color: #6d1b6d !important;
    text-decoration: none !important;
    opacity: .75;
}

.nav-pills > li {
    margin-left: 0px !important;
}
.nav-pills>li a {
    margin-left: 0px !important;
    background-color: #6d1b6d !important;
}
.nav-pills>li a.active {
    margin-left: 0px !important;
    opacity: .8;
}

a {
    color: #903090;
}

a:focus {
    color: #903090;
    text-decoration: none !important;
}

a:hover,
a:active {
    color: #903090;
    text-decoration: none !important;
    opacity: .75;
}

.panel-footer {
    background-color: #FFFFFF;
}

.btn-primary {
    color: #fff;
    background-color: #6d1b6d;
    border-color: #6d1b6d;
}

.btn-primary:focus {
    color: #fff;
    background-color: #6d1b6d !important;
    border-color: #6d1b6d !important;
}

.btn-primary:hover,
.btn-primary:active {
    color: #fff;
    background-color: #6d1b6d !important;
    border-color: #6d1b6d !important;
    opacity: .75;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #6d1b6d;
}

.search {
    margin-bottom: 20px;
}

.carousel {
    max-width: 400px;
    margin: auto;
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-bottom: 0px;
}

.carousel-indicators li {
    background-color: #999999;
    opacity: 0.5;
    border: 0px;
    border-radius: 0px;
    width: 15px;
    height: 5px;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
}

.carousel-indicators .active {
    background-color: #6d1b6d;
    opacity: 1;
    border: 0px;
    border-radius: 0px;
    width: 15px;
    height: 5px;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
}

.request-failed-message {
    color: #FF0000;
    margin: 5px 0px 10px 0px;
    font-weight: bold;
}

button.page_action .fa {
    padding-bottom: 3px;
}

.pdf-badge {
    position: relative;
}

.pdf-badge:after {
    font-family: Helvetica, Arial, sans-serif;
    content: 'pdf';
    font-size: 0.25em;
    font-weight: bold;
    line-height: 1em;
    position: absolute;
    top: 75%;
    left: 40%;
    height: 1.3em;
    width: 3em;
    border: 0em;
    border-radius: 0.65em;
    padding: 1px 3px 1px 3px;
    color: #FFFFFF;
    background:#00171f;
    text-align:center;
}

.readmore.expanded .more {
    display: block;
}

.readmore.expanded span.more {
    display: inline;
}

.grecaptcha-badge {
    top: 0px !important;
    visibility: hidden !important;
}

.recaptcha-branding {
    color: #AAAAAA;
    font-size: 0.8em;
    margin: 0px;
    margin-left: 5px;
}

.subnote .b {   
    font-weight: bold;
}

.subnote .i {
    font-style: italic;
}

.subnote .u {
    text-decoration: underline;
}

.subnote .s {
    text-decoration: line-through;
}

.note-content .expander {
    margin-left: 5px;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    #header > .row {
        height: 5rem;
    }
    .banner-link .cuhk-logo {
        width: 55px;
    }
    .banner-link .small-logo {
        display: inline;
    }
    .banner-link .large-logo {
        display: none;
    }
}

@media screen and (max-width: 1120px) {
    .search .form-inline {
        width: 100%;
    }
}

@media screen and (max-width: 1440px) {
    .welcome-content {
        width: 100%;
    }
    .welcome-carousel {
        width: 100%;
    }
    .carousel {
        margin: 0 auto;
        width: 400px;
    }
}