/*
 * dark brown 深褐色背景
 */

 /* 背景顏色 */
body {
  background: #5B4538;     /* 暗咖啡色背景  */
  color: #E3E2DE;}

hr {
  background: #C5A180;
}

.menutoggle {
  color: #E3E2DE !important;}

.right-panel .top-left, .right-panel .top-right {
    background: #5B4538; }

aside.left-panel {
  background: #5B4538;}

.navbar {
  background: #E3E2DE;
}

.navbar .navbar-nav li > a {
        color: #E3E2DE;}

.navbar .navbar-nav li > a:hover, .navbar .navbar-nav li > a:hover .menu-icon {
          color: #9F622B; }

.right-panel header.header {
  background:#5B4538;
}

.right-panel header.header {
  border-bottom: 0px; }

.content{
      padding-top: 40px;
      background: #5B4538;
      padding-right: 0;
      padding-left: 0;
    }

.q_link {
  text-align: right;
}

.q_link a {
  color: #E3E2DE;
  font-size: 15px;
}

.font-buttons {
  margin-left:20px;
}

.font-buttons img {
  width: 26px;
}

.font-buttons li{
  display: inline;
}

#square {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    background: #5B4538;
}

#triangle-bottomright {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 34px solid #E3E2DE;
    border-left: 34px solid transparent;
}

.page_content{
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
}

h4 {
  color: #5B4538;
}

h6 {
  color: #5B4538;
  margin-top: 30px;
  margin-bottom: 15px;
}

.section_title_link {
  color: #5B4538;
  font-weight: bold;
  font-size: 18px;
  margin-top: -10px;
  margin-bottom: -15px;
}

.section_title {
  color: #5B4538;
  font-size: 22px;
}

.slash {
  width: 160px;
  height: 60px;
  margin-top: -40px;
  margin-left: -5px;
}

.qa_body{
  position: relative;
}

.qa_left_quo {
  position: absolute;
  left: 0;
  top: 0;
}

.qa_content{
  margin-left: 30px;
}

.qa_left_quo img {
  width: 27px;
}

.qa_content img {
  width: 27px;
  margin-left: 5px;
}

.qa {
 color: #9F622B; 
}

ul.share-buttons img{
  width: 30px;
}

ul.tags li {
  display: inline;
  margin-left:10px;
  color: #5B4538;
}

ul.tags li a {
  color: #5B4538;
  font-size: 15px;
}

ul.tags li a.tag_link {
  color: #2E329A;
}

.fa-clock-o,.fa-folder-open {
  color: #5B4538; 
}

.post-date{
  color: #5B4538;
  font-size: 14px;
}

.pagination {
   margin-top: 0px;  
}

.ab_link {
  color: #5B4538;
}

.ab_link p {
  text-align: center;
}

footer.site-footer {
      background: #5B4538;}
footer.site-footer p {
      color: #E3E2DE;}

.left_panel_footer {
     color: #E3E2DE !important;
}

/*---- [特殊] 經節彈出的顏色調整  ----*/
.popover-header {
    color: #5B4538;
    /*background: #5B4538;*/
}

/* select 選單樣式 */
select {
  background-color: #E3E2DE !important;
  border-color:#5B4538 !important;
  color:#5B4538 !important;
}

select:focus {     /* 去除點選後外框的亮藍色邊框 */
  webkit-box-shadow:none !important;
  box-shadow:none !important;
}

option:checked,
    option:hover {
      box-shadow: 0 0 10px 100px #5B4538 inset;
      color: #E3E2DE;
    }

/* 列表式暗版 */
/* PC 大螢幕版面  */
@media (min-width: 1280px) {    
   .list_type {
        margin-top: 20px;}
}
.list_type{
  background: #5B4538 !important;     /* 暗咖啡色背景  */
}

.list_type h2,h4 {
  color: #E3E2DE;
}

.list_type h4 {
    font-size: 1.1rem; }

ul.list_pagination {
  /*margin-top: 10px;*/
}

ul.list_pagination li a {
  background: #5B4538 !important;     /* 暗咖啡色背景  */
  border: 0;
  color: #E3E2DE;
}

ul.list_pagination li a:hover {
  color: #9F622B; }

ul.list_pagination li.active a {
  color: #E3E2DE !important;
}

ul.list_pagination li.active a:hover {
  color: #9F622B;
}

.table-stats table th,
  .table-stats table td {
  border:0;
  border-bottom:1px solid #E3E2DE;
}

@media (min-width: 1024px) {
  .navbar .navbar-nav li.menu-item-has-children .sub-menu {
        background: #5B4538;}
}

/* PC 大螢幕版面  */
@media (min-width: 1280px) {
     .navbar {
        background: #5B4538;
    }
    .detail {                     /*原設定為 container 但會影響 list 樣式 故更改 20231116*/
        position: relative;
        max-width: 99999px;      /* 版面容器顯示最寬寬度  */
        margin-top: 60px;
        padding-left: 300px;
    }
    .content{
      padding-top: 60px;
      padding-left: 30px;
    } 
    .q_link {
      margin-bottom: 15px;
      margin-right: 300px;
    } 
    .q_link a {
      font-size: 12px;
    }
    .font-buttons {
      float: right;
      margin-right: 280px;
    }
    .font-buttons img {
      width: 22px;
    }
    .font-buttons li{
      display: block;
      margin-bottom: 5px;
    }
    .page_content{
      margin-top: 60px;
      margin-left: 30px;
      margin-right: 330px;
   }
   ul.share-buttons img{
     width: 23px;
   }

}

/* 平板與直小筆電版面以下  */
@media (max-width: 800px) {
    .sel_2{
     margin-top: 10px;}
}

/* 平板版面以下  */
@media (max-width: 799px) {
    #left-panel .navbar .main-menu {
      background: #E3E2DE;}   
    .navbar .navbar-nav li > a {
        color: #5B4538;}
    .navbar .navbar-nav li.menu-item-has-children .sub-menu {
        background: #E3E2DE;}
     /*左邊選單底橫線*/
    .link-bottom {
      border-top: solid #5B4538 1px !important;}
}

/* 特別設定平板版面左邊選單背景顏色  */
@media (min-width: 800px) and (max-width: 1280px)  {  
  #left-panel .navbar .main-menu {
      background: #5B4538;}
  .navbar .navbar-nav li.menu-item-has-children .sub-menu {
        background: #5B4538;}
}

/* --- 各版面調整之設定 --- */
@media (min-width: 790px) and (max-width: 800px) {
  .right-panel header.header {
  height: 75px;}
}
@media (min-width: 1080px) and (max-width: 1279px) {
  .card {
    margin-left: -200px;
    margin-right: -50px;
  }
  footer.site-footer {
   margin-left: -200px;}
}
@media (min-width: 1280px) and (max-width: 1900px) {
  .card {
    margin-left: -300px;
  }
  footer.site-footer {
   margin-left: -300px;}
}
@media (min-width: 1440px) and (max-width: 1900px) {
  .card {
    margin-left: -200px;
  }
  footer.site-footer {
   margin-left: -200px;}
}
@media (min-width: 1600px) and (max-width: 1900px) {
  .card {
    margin-left: -80px;
  }
  footer.site-footer {
   margin-left: -80px;}
}

/* 左右空白細部調整 */
@media (min-width: 2551px) {
  .card {
    margin-left: 360px;}
}
@media (min-width: 2381px) and (max-width: 2550px) {
  .card {
    margin-left: 280px;} 
}
@media (min-width: 2261px) and (max-width: 2380px) {
  .card {
    margin-left: 220px;}
}
@media (min-width: 2141px) and (max-width: 2260px) {
  .card {
    margin-left: 160px;}
}
@media (min-width: 1921px) and (max-width: 2140px) {
  .card {
    margin-left: 100px;}
}