@charset "UTF-8";
/* town theme */
:root {
        --dark: #4f2b15;
        --town: #e0c287;
        --town-100: #ffffff;
        --town-200: #efd6d7d1;
        --town-300: #cfd9e2;
        --town-400: #ffffff;
        --town-500: #000000;
        --town-600: #343a40;
        --town-700: #4f2b15;
        --grass: #82b03d;
        --grass-100: #baef5d;
        --grass-200: #9ecf51;
        --grass-300: #cfd9e2;
        --grass-400: #689232;
        --grass-500: #467022;
        --grass-600: #3d5e08;
        --brick-300: #fbbc6e;
        --brick-400: #9c5319;
        --gray-200: var(--town-300);
}

a {
        color: var(--dark);
}

body {
        background: var(--town-300);
        background: #E7EBF0 url(../img/bg-1.jpg);
        font-family: "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}

h4, .h4 {
    font-size: 1rem;
}



#body {
    background-image: url(../img/background.png);
    repeat-x: ;
    background-attachment: fixed;
    flex: 1 0 auto;
}

.btn-secondary {
        border-color: var(--town-300);
        background-color: var(--town-400);
        color: var(--town-500);
}

.btn-secondary:hover {
        border-color: var(--town-300);
        background-color: var(--town-500);
}

/* header navbar */
.navbar {
        padding: 0;
        border-bottom: 1px solid #ffffff;
        -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
        box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
}


.navbar > .container, .navbar > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-nav {
display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}




.navbar.bg-dark {
        background-color: var(--town-600)!important;
}

.navbar-dark .navbar-toggler {
        padding: 1rem;
        border-color: transparent!important;
        color: var(--town-100);
}

.navbar-dark .navbar-toggler:before {
        display: inline-block;
        content: "\f0c9";
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

.navbar-dark .navbar-toggler-icon {
        display: none;
}

.navbar-dark .navbar-brand {
        padding: 0;
        color: var(--town-100);
}

.navbar-dark .navbar-nav .nav-item {
   border-right: 1px solid #343a40;
    border-left: 1px solid #343a40;
}

.navbar-dark .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        color: var(--town-100);
}

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
        color: var(--town-100);
}

.navbar-dark .navbar-nav .nav-item.active > .nav-link {
        border-right: 1px solid var(--town-600);
        background-color: var(--town-600);
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
        background: var(--town-500);
        color: var(--town-100);
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
        color: var(--town-100);
}

/* aside button */
.aside > a.btn {
        padding: 0.75rem 1rem;
        border-width: 0;
        border-radius: 2px;
        background: #b23032!important;
        box-shadow: 3px 3px 2px #04040400;
        border: 1px solid #dee2e6;
        color: var(--town-100)!important;
}

.aside .form-group {
        box-shadow: 3px 3px 2px var(--town-400);
}

.aside #search_form .btn-primary, .aside #search_form .form-control {
        border-color: var(--town-400);
        border-radius: 0;
        background-color: var(--town-100);
        color: var(--town-500);
}
.aside #search_form .form-control:focus {
		box-shadow: 0 0 0 0.2rem var(--town-400);
}

.aside .text-muted {
        color: var(--town-500)!important;
}
/* form */
#form .form-control,#form .btn-primary {
        border-color: var(--town-400);
        border-radius: 0;
        background-color: #cfd9e2;
        color: var(--town-500);
}

#form .form-group .custom-select {
        border-color: var(--town-400);
        background-color: var(--town-200);
}

.modal-content {
        border-color: var(--town-500);
        border-radius: 0;
        background-color: var(--town-100);
        box-shadow: 3px 3px 0 var(--town-600);
}

.modal-header,.modal-footer {
        border-color: var(--town-500);
}
/* card */
.card {
        border-color: var(--town-400);
        border-width: 1px;
        border-radius: 0;
        background: var(--town-100);
       /* box-shadow: 3px 3px 2px var(--town-400);*/
        color: var(--town-500);
}

.card > .card-header {
        border-color: var(--town-400);
        border-radius: 0;
        background-color: var(--town-200);
        background-image: none;
        color: var(--town-500);
        border-bottom-width: 1px;
}

.card > .card-body {
        border-top-width: 0;
}

.card-header-tabs {
        margin-top: -0.25rem;
}

.card-header-dropdown span {
        color: var(--grass-100)!important;
}

.card-header-tabs > .nav-item > .nav-link {
        color: var(--town-500);
}

.card-header-tabs > .nav-item > .nav-link:hover:not(.active) {
        border-color: var(--town-400);
        background: var(--town-200);
        color: var(--town-500);
}

.card-header-tabs > .nav-item > .nav-link.active {
        border-color: var(--town-400);
        background: var(--town-100);
        background-image: none;
        color: var(--town-500);
        border-bottom-color: var(--town-100);
}

.card-header-dropdown .dropdown .dropdown-toggle {
        color: var(--town-500);
}

.card-header-dropdown .dropdown .dropdown-menu {
        border: 1px solid var(--town-400)!important;
        border-radius: 0;
        background-color: var(--town-100)!important;
}
.card-header-dropdown .dropdown-menu .dropdown-item {
		color: var(--town-500)!important;
}
.card-header-dropdown .dropdown-item:hover, .card-header-dropdown .dropdown-item:focus {
        background-color: var(--town-200)!important;
        color: var(--town-500)!important;
}

.card-header-dropdown .text-primary {
        color: var(--town-500)!important;
}

.card-header-dropdown span.text-muted {
        color: var(--town-500)!important;
}

.card.card-threadlist > .card-body {
        padding: 0;
}

.threadlist li {
        padding: 0.7rem;
}

.threadlist > .thread {
        padding: 0.7rem;
}

.threadlist > .thread:hover {
        background-color: #ebebeb;
}

.threadlist .d-flex span {
        color: var(--town-500)!important;
}

.threadlist .avatar-3 {
        padding: 1px;
        border: 1px solid var(--town-400);
}

.avatar-3 {
    width: 3rem;
    height: 3rem;
    border-radius: 0.3rem;
}



.threadlist .ml-2.d-none {
        display: inline-flex!important;
}

.threadlist .d-flex.justify-content-between.small {
        font-size: 13px;
}

.thread, .post {
        border-color: #e9e9e9;
}
.btn-secondary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #e1e1e1;
    border-color: #cfd9e2;
}
.card.card-postlist {
        border-top-right-radius: 0!important;
        border-top-left-radius: 0!important;
        font-size: 14px;
}

.postlist-sort svg {
        fill: var(--town-500)!important;
}

.card.card-postlist a,.card.card-postlist span, .card.card-postlist .text-muted {
        color: var(--town-500)!important;
}

.card.card-postlist .form-control {
        border-color: var(--town-400)!important;
        border-radius: 2px;
    background-color: #e1e1e1!important;
}


.card.card-postlist .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(224, 194, 135, 0.83);
}

.postlist .btn.btn-secondary {
        border-color: var(--grass-400);
        border-radius: 2px;
    background-color: #52789b;
        color: var(--town-100);
}

.card.card-thread {
        border-bottom-right-radius: 0!important;
        border-bottom-left-radius: 0!important;
        color: var(--town-500)!important;
}

.card.card-thread .card-body .media {
        margin: -1.25rem;
        padding: 1.25rem;
        border-bottom: 1px solid var(--town-300);
        background: var(--town-200);
        background-image: url(../img/bg_banner.png);
}

.card.card-thread .card-body .media .avatar-3 {
        padding: 0rem;
        border: 2px solid var(--town-300);
        border-radius: 2px;
        background-color: var(--white); 
}

.card.card-thread hr {
        border-color: transparent;
}

.card.card-thread span, .card.card-thread a {
        color: var(--town-500)!important;
}

.postlist .text-muted,.postlist .text-grey {
        color: var(--town-500)!important;
}
/* .breadcrumb */
.breadcrumb {
        border-color: var(--town-400);
        border-radius: 0;
        background-color: #ededed!important;
        /*box-shadow: 3px 3px 2px var(--town-400);*/
        color: var(--town-500);
        font-size: 14px;
/*        border-top-color: var(--town-100);
        border-left-color: var(--town-100);*/
}

.breadcrumb:hover {
        background-color: var(--town-200)!important;
}

.breadcrumb-item + .breadcrumb-item::before, .breadcrumb a {
        color: var(--town-500);
}
/* nav_tag_list */
.nav_tag_list {
        display: flex;
        flex-direction: column;
}

.nav_tag_list .text-muted {
        color: var(--town-500)!important;
}

/* card list-group*/
.card .list-group-item {
        background-color: var(--town-200);
        border-color: var(--town-300);
}

.card .list-group-item:hover {
        background-color: var(--town-100);
}

.card .list-group-item.active {
        background-color: var(--town-400);
        border-color: var(--town-400);
        color: var(--town-600);
}

.card > .list-group:last-child .list-group-item:last-child {
        border-radius: 0;
}
/* noticelist */
#my_main .noticelist {
        color: var(--town-500)!important;
}

#my_main .noticelist > .notice a,.noticelist > .notice span, .noticelist > .notice .comment-info {
        color: var(--town-400)!important;
}

#my_main .noticelist > .notice:not(:last-child) {
        border-color: var(--town-300);
}

#my_main .text-muted {
        color: var(--town-500)!important;
}

#my_main .btn-light {
        border-color: var(--town-400);
        background-color: var(--town-300);
        color: var(--town-400)!important;
}

#my_main .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        background-color: var(--town-500);
}

.input-group-prepend .input-group-text {
        border: 1px solid var(--town-400);
        border-radius: 0;
        background-color: var(--town-300);
}

#my_main .custom-file-input {
        cursor: pointer;
}

#my_main .form-group.custom-file .custom-file-label {
        border-color: var(--town-400);
        border-radius: 0;
        background-color: var(--town-100);
}

#my_main .form-group.custom-file .custom-file-label::after {
        border-left: 1px solid var(--town-400);
        background-color: var(--town-200);
        color: var(--town-400);
        content: "Ñ¡Ôñ";
}

#my_main .progress {
        background-color: var(--town-200);
}
/* edui-container */
.edui-container {
        border-color: var(--town-400)!important;
}

.edui-container .edui-toolbar {
        border-color: var(--town-400)!important;
        background-color: var(--town-100)!important;
}
/* fieldset */
.fieldset {
        border-color: var(--town-200)!important;
        background-color: var(--town-300)!important;
        font-size: 12px;
}
/*btn btn-secondary btn-block xn-back*/
.btn.xn-back {
        border-color: var(--town-200);
        border-radius: 0;
        background-color: var(--town-200)!important;
        box-shadow: 3px 3px 2px var(--town-400);
        color: var(--town-500);
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
        color: var(--town-300);
}

.pagination .page-link {
		border-color: var(--town-300);
    	background-color: var(--town-200);
    	color: var(--town-500);
}

.pagination .page-link:hover {
        /*border-color: var(--town-400);*/
        background-color: var(--town-100);
        color: var(--town-400);
}

.pagination .page-item.active .page-link {
        border-color: transparent;
        background-color: var(--town-400);
        color: var(--town-100);
}

.postlist .blockquote {
        background-color: var(--town-200);
        background-image: none;
} 
#footer.bg-dark {
        padding: 1rem 0!important;
        border-top: 3px solid var(--town-400)!important;
        background: var(--town-500)!important;
        color: var(--town-200)!important;
        font-size: 12px;
}

#footer a {
        color: var(--town-300)!important;
}

/* icon */
[class^="icon-top-"]:before {
        content: "\f0aa";
}

@media (max-width: 992px){
#nav > ul > li > a.nav-link {
        border-bottom: 1px solid rgba(134, 142, 150, 0.3);
}

}

@media screen and (min-width: 1408px) {
        html {
                font-size: 16px;
        }

        #body > .container, #footer > .container {
                width: 1344px;
                max-width: 1140px;
        }
}

@media (max-width: 576px) {
        html {
                font-size: 12px;
        }

        .navbar-dark .navbar-nav .nav-item {
                border-right: none;
                border-left: none;
        }

        #nav {
                padding-top: 0;
                padding-left: 0;
        }
}