@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);


@font-face {
    font-family: "MStiffHeiHKS";
    src: url('../font/MStiffHeiHK-UltraBold.ttf') format('truetype'); /*,*/
    /*url('../font/MYuenHK-Light/MYuenHK-Light.eot?#iefix') format('embedded-opentype'),*/
}


body {  
    color: black;
    /*font-size: 1.6em;*/ 
    /*font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;*/
    font-family:  "Noto Sans TC", sans-serif;
    background-color: #FBFFE2;
} 

 .container-full {
  margin: 0 auto;
  padding:15px;
  width: 100%;
}

 .title1 {
    font-size: 1.35rem; /*1.4rem;*/
    color: #F64537;
    font-weight: bold;
    /*margin-left:1rem;*/
}

.title2 {
    color: #F64537;
    font-size: 1rem; /*12pt;*/ /*1.2rem;*/
    font-weight: bold;
    /*margin-left:0.5rem;*/
}

.navbar-default {
/*   background-color: #5bc0de; 
  border-color: #428bca; */ /*2018-01-30 */
  /*background-color: #517a38;*/ /* 2018-04-11 */
    background-color: #C08E38; /*#48dbda; /*#e19631;*/ /*#5cb099*/ /*#F0531C;*/ /*3ea98d;*/
    padding:0 20px;
    /*border-color: #C08E38;*/
  /*border-color: #4bd7ae;*/ /*#48dbda; /*#F0531C;*/ /*#3ea98d;*/ /*8cbb49;*/ 
}

.navbar-default ul.navbar-nav>li>a {
  color: white;
  font-size: 18px;
  text-align: center;
  padding: 16px 16px; /*16px 16px;*/  /*8px 16px; */
  text-decoration: none;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color:  #694e1e; /*#ecf0f1;*/
  background-color: #CAAA7F; /*lightgray;*/
  border-bottom-left-radius:10px; 
  border-bottom-right-radius:10px;
  font-weight:500;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,255,255);
} 

/*.navbar-default*/ /*.navbar-toggler {
  border-color: #ffffff;
  color:white;
}*/
.navbar-default .navbar-toggler:hover,
.navbar-default .navbar-toggler:focus {
  /*background-color: #ffffff;*/
}
.navbar-default .navbar-toggler .icon-bar {
  /*background-color: #ffffff;*/
}

/*.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #ecf0f1;
}

.navbar {
	margin-bottom: 0; 
	/* width: 90%; */ /* 2018-02-05 */
	/*}*/

#activityDiv {
    font-size: 0.85rem;
}

#activityDiv a:link, #activityDiv a:visited {
    color:#269A55;
}

.footerBottom {
    height:30px; 
    background-color:#f74537;
}

@media (max-width: 768px) {
.navbar-default {
/*   background-color: #5bc0de; 
  border-color: #428bca; */ /*2018-01-30 */
  /*background-color: #517a38;*/ /* 2018-04-11 */
    /*background-color: #C08E38;*/ /*#48dbda; /*#e19631;*/ /*#5cb099*/ /*#F0531C;*/ /*3ea98d;*/
    padding: 10px;
    /*text-align:left;*/
    /*border-color: #C08E38;*/
  /*border-color: #4bd7ae;*/ /*#48dbda; /*#F0531C;*/ /*#3ea98d;*/ /*8cbb49;*/ 
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  border-bottom-left-radius:0; 
  border-bottom-right-radius:0;
}

.navbar-default ul.navbar-nav>li>a {
  font-size: 16px;
  text-align: left;
  padding-left:32px;
}

/*.navbar-default .navbar-nav > li > a {
  font-size: 16px;
  text-align: left;
  padding: 30px;
}*/

  /*.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #000000;
    text-align: center;
    text-decoration: none;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecf0f1;
    background-color: #428bca;
  }*/

.footerBottom {
    height:55px; 
}

}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    /*padding: 15px;*/ /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}