/*
------ Google Fonts-Chinese -----
font-family: 'Ma Shan Zheng', cursive;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;
font-family: 'Noto Serif SC', serif;

------ Google Fonts-English ------
font-family: 'BenchNine', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Rancho', cursive;
font-family: 'Roboto', sans-serif;

------- Color choices --------
red: #dd0000;(heading1)
blue: #308 (regular link), #006 (menu item)
grey: lightgrey (header, footer), #eee (content background)
*/

/*================= Global Styles, Shared across the site ==================*/
* {
  box-sizing: border-box;
}

html {
    background-color: gray;
}

body {
    max-width: 1200px;
    background-color: white;
    margin: 0 auto;
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    line-height: 1.7;
}

p, span, b {
  font-size: 1em;
}

h1 {
/*  font-family: 'Ma Shan Zheng', cursive;*/
  font-family: 'Rancho', cursive;
/*  font-weight: bold;*/
  text-align: center;
  color: #cc0000;
  font-size: 1.6em;
  padding: 20px 0 15px 0;
}

h1.page-title {
  padding: 30px 20px 15px 20px;
  font-size: 1.8em;
  font-weight: bold;
}

h1.page-heading {
  padding: 10px 0;
  font-size: 1.4em;
}

h1.page-heading-english {
  font-family: 'Rancho', cursive;
  font-weight: bold;
  padding: 0;
  font-size: 1.8em;
  letter-spacing: 2px;
}

h2 {
  font-size: 1.05em;
  font-weight: bold;
}

figure {
  margin: 0;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
  color: #308;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  color: #39c;
  font-weight: bold;
}

.red-text, .red {
  color: red;
}

table {
  margin: 0 auto 20px auto;
  border: 1px solid lightgray;
  font-size: 1.0em;
}

th {
  background: #eee;
}

td, th {
  vertical-align: top;
  padding: 8px 0 8px 8px;
  border: 1px solid lightgray;
}

/*================= Header and Nav ==================*/

header {
    padding: 10px 8px;
/*    background-image: linear-gradient(moccasin, #fcfcfc);*/
    background-image: linear-gradient(bisque, white);
    display: flex;
}

img.logo {
  width: 120px;
  align-self: center;
  padding-top: 5px;
}

header span {
  align-self: center;
}

.title-ch {
  font-family: 'Ma Shan Zheng', cursive;
  color: #cc0000;
  font-size: 2.2em;
  margin-right: 12px;
}

.title-en {
  font-family: 'Rancho', cursive;
  font-style: italic;
  font-size: 1.8em;
  color: navy;
}

.chinese-version {
  font-family: 'Georgia', serif;
  font-size: 1.1em;
  margin-left: auto;
  margin-right: 8px;
}
.chinese-version a {
  font-weight: normal;
}

header .fa {
  font-size: 1.2em;
}

.navbar {
  background-color: lightgray;
  padding: 5px !important;
}
.navbar-brand {
  font-family: 'BenchNine', sans-serif;
  font-size: 1.3em;
  color: navy !important;
  padding: 0;
  font-weight: 100;
  margin-left: 10px;
  display: none;
}

.navbar-toggler {
  border: 0 !important;
}

.nav-link {
  font-size: 1.1em;
  font-weight: bold;
  color: #006 !important;
  margin-right: 5px;
}

.navbar a:hover  {
  color: #39c !important;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/*================= Footer ==================*/
footer {
  padding: 10px 15px 5px 15px;
/*  background-color: lightgrey;*/
  background-image: linear-gradient(bisque, white);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  font-size: 0.9em;
}

a.back {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

footer p:nth-child(2) {
  margin-right: 20px;
}

/*================= Common styles for content Pages ==================*/
main {
  background-color: white;
  padding: 0;
}

.section-content {
  width: 85%;
  margin: 0 auto 30px auto;
  padding: 20px 30px 10px 30px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.19);
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.space-after {
  margin-bottom: 40px;
}

.bg-gray {
  background-color: #eee;
}

.tab-group {
  width: 85%; /* match the section width to line up tabs */
  margin: 0 auto 0 auto;
  display: flex;
  flex-flow: row nowrap;
}

.tab {
  background-color: #eee;
  border-radius: 0 20px 0 0;
  padding: 8px 12px;
  margin-right: 8px;
  margin-bottom: 0;
  font-size: 1.1em;
  font-weight: bold;
  color: #308;
  align-self: flex-end;
}

a.tab:hover, button.tab:hover {
  text-decoration: none;
  background-color: #ccddff !important;
}

.btn-group .dropdown-menu {
  background-color: #eee;
}

.page-banner {
  width: 100%;
}

.short {
  display: none;
}

/* ==================Sunday School Pages ================ */
img.sunday-school {
  max-width: 650px;
  display: block;
  margin: 0 auto 20px auto;
}

/*================= Responsive ==================*/

@media only screen and (max-width: 960px) {
  body {
    font-size: 16px;
  }
  .title-ch {
    font-size: 2.1em;
  }
  .title-en {
    font-size: 1.5em;
  }
  img.logo {
    width: 100px;
  }
}

@media only screen and (max-width: 840px) {
  .title-ch {
    font-size: 2.0em;
  }

  h1 {
    font-size: 1.5em;
    padding: 10px 0 15px 0;
  }
  h1.page-title {
    font-size: 1.5em;
    padding: 20px 20px 10px 20px;
  }

  h1.page-heading {
    font-size: 1.3em;
  }
  .nav-link {
    font-size: 1.0em;
  }
}

@media only screen and (max-width: 767px) {
  header {
    padding: 5px 10px;
  }
  .title-en {
    display: none;
  }
  img.logo {
    width: 90px;
  }
  .navbar-brand {
    display: block;
  }
  h1 {
    font-size: 1.3em;
  }
  h1.page-title {
    font-size: 1.3em;
  }

  h1.page-heading {
    font-size: 1.3em;
  }
  h2 {
    font-size: 1.0em;
  }

  footer p:nth-child(2) {
    margin-right: auto;
    margin-left: 0;
  }
}

@media only screen and (max-width: 576px) {

  img.logo {
    width: 80px;
  }
  .title-ch {
    font-size: 1.2em;
  }
  .english-version {
    font-size: 0.6em;
  }

  /* Show short banner, hide long */
  img.long {
      display: none;
  }
  img.short {
      display: block;
      width: 100%;
  }

  .section-content {
    width: 96%;
    padding: 15px;
  }

  .tab-group {
    width: 96%; /* match the section width to line up tabs */
  }
}