Note: In style.css, td.sv_title - width changed from 22% to 50%; td.sv_name - width changed from 78% to 50%

@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);

@media (max-width: 1280px ) {
  html {
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
  }
}

@media (max-width: 1152px) {
  html {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
  }
}

@media (max-width: 1024px) {
  html {
    transform: scale(0.78);
    -moz-transform: scale(0.78);
    -webkit-transform: scale(0.78);
    -ms-transform: scale(0.78);
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
  }
}

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
 background-color: #eeeeee;
 font-family: "cwTeXHei", sans-serif;
 height: 100vh;
 margin: 0;
 overflow-x:hidden;
}

div#construction {
  width: 800px;
  height: 500px;
  margin: 0 auto;
  right: 0;
  left: 0;
  font-size: 48pt;
  font-weight: 900;
  text-align: center;
  line-height: 500px;
  color: white;
  text-shadow: 0px 0px 5px #888888;
}

.material-icons.md-48 {
  font-size: 48pt;
}

a#contact {
  width: 71px;
  height: 71px;
  top: -40px;
  left: 1150px;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  position: absolute;
  top: -30px;
  left: -5px;
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.15), 0 6px 10px 0 rgba(0,0,0,0.13);
  z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.p {
  padding-top: 1em;
}

div#header {
  position: fixed;
  width: 1280px;
  margin: 0 auto;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: white;
}

div#header-top {
  height: 145px;
  width: 1280px;
}

.header-bg {
  position:absolute;
  top: 0;
  left: 0;
  height: 145px;
  width: 1280px;
}

#bg1 {
  background: #ffffff url("graphic/header-bg2.jpg") no-repeat center center;
}

#bg2 {
  background: #ffffff url("graphic/header-bg3.jpg") no-repeat center center;
}

#bg3 {
  background: #ffffff url("graphic/header-bg.jpg") no-repeat center center;
}

@keyframes backgroundchangeFadeInOut {
  0% {opacity:1;}
  17% {opacity:1;}
  25% {opacity:0;}
  92% {opacity:0;}
  100% {opacity:1;}
}

@keyframes backgroundchangeFadeInOut3 {
  0% {opacity:1;}
  25% {opacity:1;}
  33% {opacity:0;}
  92% {opacity:0;}
  100% {opacity:1;}
}

#backgroundchange div:nth-of-type(1) {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
#backgroundchange div:nth-of-type(2) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}
#backgroundchange div:nth-of-type(3) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
#backgroundchange div {
animation-name: backgroundchangeFadeInOut3;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 18s;

-webkit-animation-name: backgroundchangeFadeInOut3;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
}

div#header-bottom {
  height: 80px;
  background-color: #ffffff;
}

span#header-bottom-logo {
  height: 80px;
  width: 462px;
}

span#header-bottom-menu {
  position: relative;
  bottom: 10px;
  left: 10px;
}

span#header-bottom-menu:hover > a {
  color: grey;
}

span#header-bottom-menu:hover > a:hover {
  color: #1960A1;
  font-size: 13pt;
}

.menulink, .menulink_current {
  font-size: 12pt;
  text-decoration: none;
  margin-right: 8px;
  margin-left: 8px;
  color: black;
}

.menulink_current {
  font-size: 14pt;
  border-bottom: solid 4px #1960A1;
}

div#wrapper {
  min-height: 100%;
  margin: 0 auto -50px;
}

div#body {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-top: 215px;
  padding-bottom: 25px;
  padding-left: 40px;
  padding-right: 40px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
;
}

div#body > * {
  vertical-align: top;
}

div#weather_warning {
  width: 1169px;
  margin: auto;
  font-size: 14pt;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  text-align: center;
  background-color: darkred;
  color: white;
}

div#BCEFC25 {
  width: 1200px;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding-top: 10px;
  text-align: center;
  background-color: white;
}

footer {
  width: 1280px;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 8pt;
  color: grey;
  text-align: center;
  line-height: 50px;
}

footer, .push {
  height: 50px;
}

div#home_greeting {
  font-size: 13pt;
  text-align: center;
  line-height: 32pt;
  color: darkred;
}

div .box_shadow {
  display: inline-block;
  margin-top: 25px;
  margin-left: 15px;
  margin-bottom: 15px;
  background-color: white;
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.15), 0 6px 10px 0 rgba(0,0,0,0.13);
  border-radius: 5px;
}
  
div#home_news {
  height: 403px;
  width: 600px;
}

div#cschool {
  width: 600px;
  margin-top: 25px;
}

div#cschool_title {
  width: 588px;
  background-color: #1960A1;
  color: white;
}  

.titles {
  height: 33px;
  font-size: 18pt;
  padding: 5px;
  padding-left: 7px;
}

div#home_news_title {
  width: 588px;
  background-color: #1960A1;
  color: white;
}  

div#home_news_content {
  height: 345px;
  width: 586px;
  background-color: white;
  overflow: auto;
  padding: 5px;
  margin: 2px;
}

div.hnc_heading {
  font-weight: bold;
  color: darkred;
  padding-top: 5px;
}

div.hnc_detail {
  padding-bottom: 5px;
  border-bottom: solid 1px lightgrey;
}

div#service {
  width: 250px;
}

div#service_title {
  width: 238px;
  background-color: #A45E4D;
  color: white;
}

div#sv_date {
  padding-top: 5px;
  padding-left: 7px;
  color: red;
}

table#sv_list tr:nth-child(even) {
  background-color: #eeeeee;
}

td.sv_title {
  width: 22%;
  padding-left: 3px;
  vertical-align: top;
}

td.sv_name {
  width: 78%;
  vertical-align: top;
}

div#fellowship {
  display: inline-block;
  width: 275px;
  margin-top: 25px;
  margin-left: 15px;
}

div#fellowship_title {
  width: 263px;
  border-bottom: 1px solid lightgrey;
}

table#f_list, table#sv_list {
  width: 98%;
  margin: 0 auto;
  border-spacing: 0;
  padding: 2px;
  margin: 3px;
}

table#f_list td, table#sv_list td {
  padding-top: 4px;
  padding-bottom: 4px;
}

table#f_list tr:nth-child(even) {
  background-color: #DEE9FF;
}

td.f_name {
  width: 45%;
  padding-left: 3px;
}

td.f_program {
  width: 55%;
  font-weight: bold;
}

div#fnote {
  font-size: 9pt;
  width: 95%;
  text-align: right;
  padding: 5px;
}

div#about_left {
  display: inline-block;
  width: 525px;
  margin-left: 15px;
  margin-top: 25px;
  margin-bottom: 15px;
}

div#about_left_title {
  border-bottom: 1px solid lightgrey;
}

div#about_left_content {
  padding: 5px;
  padding-bottom: 30px;
}

div#about_left_content div.f {
  float: left;
  padding: 2px;
  padding-right: 10px;
}

div#about_faith {
  width: 350px;
  height: 650px;
}

div#about_faith_title, div#about_mission_title {
  background-color: #1960A1;
  color: white;
}

div#about_faith_content, div#about_mission_content {
  background-color: white;
  padding: 5px;
  padding-right: 7px;
  margin: 2px;
  font-size: 11pt;
}

div#about_faith_content {
  height: 593px;
  overflow: auto;
}

div#about_faith_content div.item {
  font-weight: bold;
  font-size: 13pt;
}

div#about_faith_content ol {
  list-style-position: outside;
  margin-left: -10px;
  margin-top: 0px;
  margin-bottom: 0px;
}

div#about_faith_content ol li {
  padding-bottom: 5px;
}

div#about_faith_content ol li:nth-child(even) {
  color: darkred;
}

div#about_mission {
  width: 250px;
}

div#about_mission_content div.item {
  font-size: 16pt;
  color: #1960A1;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #eeeeee;
}

div.pastors {
  width: 250px;
}

div.pastors .title {
  padding-top: 15px;
  font-size: 11pt;
  text-align: center;
  color: darkred;
}

div.pastors .cname {
  font-size: 18pt;
  text-align: center;
  color: darkred;
}

div.pastors .ename {
  font-size: 9pt;
  text-align: center;
  color: darkred;
}

div.pastors .desc {
  padding: 15px;
  text-align: justify;
  text-justify: distribute;
}

div#calendar {
  width: 575px;
  height: 557px;
}

div#calendar_title {
  background-color: #1960A1;
  color: white;
}

div#calendar div#cwrapper {
  width: 573px;
  height: 500px;
  overflow: auto;
  margin-top:2px;
  padding-top: 10px;
}

table#calendar_entries {
  width: 100%;
  height: 300px;
}

table#calendar_entries td {
  vertical-align: top;
  padding-top: 10px;
}

div#calendar .month {
  width: 75px;
  height: 55px;
  padding-top: 20px;
  margin: 0 0px 15px 15px;
  text-align: center;
  font-size: 20pt;
  border-radius: 5px;
}

div#calendar tr:nth-child(odd) .month {
  color: white;
  background-color: #1960A1;
}

div#calendar tr:nth-child(even) .month {
  border: 1px solid lightgrey;
  background-color: white;
}
 
div#calendar .small {
  line-height: 1em;
  font-size:10pt;
}

div.entry {
  border-top: 1px solid lightgrey;
  padding-top: 2px;
  padding-bottom: 2px;
}

div.same_day {
  margin-left: 175px;
  line-height: 150%;
}

table#calendar_entries tr:nth-child(odd) div.entry {
  color: #084F90;
}

div.entry span.day {
  display: inline-block;
  width: 75px;
}

div.entry span.dow {
  display: inline-block;
  width: 100px;
}

div#meeting_ch {
  width: 370px;
}

div#meeting_en {
  width: 190px;
}

div#meeting_ch_title {
  width: 358px;
  background-color: #A45E4D;
  color: white;
}

div#meeting_en_title {
  width: 178px;
  background-color: #A45E4D;
  color: white;
}

div#meeting_ch_content, div#meeting_en_content {
  background-color: white;
  padding: 5px;
  padding-right: 7px;
  margin: 2px;
}

div.meeting_entry {
  width: 174px;
  height: 70px;
  display: inline-block;
  border-top: 1px solid #dddddd;
  margin-top: 10px;
  padding-top: 5px;
}

div.meeting_entry:first-child,
div#meeting_ch_content div.meeting_entry:nth-child(2) {
  border: 0;
  margin-top: 0;
  padding-top: 0;
}

div.meeting_name {
  font-size: 16pt;
  display: inline-block;
}

div.meeting_time {
  font-size: 10pt;
}

div.meeting_lang {
  font-size: 11pt;
  display: inline-block;
  position: relative;
  height: 14pt;
  width: 14pt;
  top: -2px;
  margin-left: 5px;
  text-align: center;
  border-radius: 50%;
  color: white;
}

.lang_m {
  background-color: darkred;
}

.lang_c {
  background-color: midnightblue;
}

.lang_e{
  background-color: teal;
}

div.meeting_group {
  font-size: 10pt;
}

div#weekly_prayer {
  width: 400px;
}

div#monthly_prayer {
  width: 750px;
}

span.lastup {
  font-size: 9pt;
  line-height: 150%;
}

div#weekly_prayer_title {
  width: 388px;
  background-color: #A45E4D;
  color: white;
}

div#monthly_prayer_title {
  width: 738px;
  background-color: #1960A1;
  color: white;
}

div#weekly_prayer_content, div#monthly_prayer_content {
  background-color: white;
  padding: 5px;
  margin: 2px;
}

div#monthly_prayer_content {
  height: 500px;
  overflow: auto;
}

div#weekly_prayer_content li {
  margin: 10px 5px 0px 0px;
  font-size: 14pt;
}

div#weekly_prayer_content li:first-child {
  margin-top: -12px;
}

div.monthly_prayer_cat {
  font-size: 18pt;
  color: midnightblue;
  border-bottom: 2px solid #dddddd;
}

div#monthly_prayer_content li {
  margin: 5px 5px 5px -15px;
}