body {
  font: 12pt "PMingLiU", "MingLiU", "細明體", serif;
  margin: 0;
  color: #222;
}

a { text-align: center; text-decoration: none; }
a:link, a:visited { color: #3333aa; }
a:hover { color: #aa3333; }

#title {
  border: 2px solid #7777ff;
  padding: 10px;
  background: #ddeeff;
  font: 16pt "DFKai-SB", "KaiTi", "標楷體", serif;
}
#title a { cursor: pointer; }

#menu { float: left; width: 13.5em; margin: 7px 2px; }
#menu ul { list-style-type: none; margin: 0; padding: 0; }
#menu a {
  font: 9pt "PMingLiU", "MingLiU", "細明體", serif;
  display: inline-block;
  text-align: center;
  background: #eeeeff;
  border: 1px solid #aaaaff;
  margin: 1px 3px;
  padding: 2px 7px 2px 5px;
  line-height: 1.25;
  width: 12em;
}
#menu a.on { color: #aa3333; background: #ffeeee; border-color: #333; }

#context { margin: 10px 12px 0 14em; }

.info {
  font: 12pt "PMingLiU", "MingLiU", "細明體", serif;
  background: #eeffff;
  padding: 5px 7px 3px 7px;
  border: 1px solid #33aa33;
  margin-bottom: 5px;
}
.info .TrDate, .info .Date { font-weight: bold; margin-right: 10px; }
.info .TrTitle, .info .PicTitle { font-weight: bold; color: #3333aa; margin-right: 10px; }
.info .Source { margin-right: 10px; font-weight: bold; color: #555; }
.info #sw { font: 9pt "PMingLiU", "MingLiU", "細明體", serif; cursor: pointer; }

#memo {
  font: 12pt "PMingLiU", "MingLiU", "細明體", serif;
  line-height: 1.5;
  letter-spacing: 2px;
  background: #eee;
  padding: 5px 7px 3px 7px;
  margin-bottom: 10px;
  border: 1px solid #33aa33;
}

.list132 { margin-bottom: 5px; border-collapse: separate; border-spacing: 4px 0; }
.list132 td {
  vertical-align: top;
  text-align: center;
  background: #ddeecc;
  padding: 3px;
  border: 1px solid #7777ff;
  width: 148px;
}
.list132 img { width: 132px; max-width: 100%; height: auto; }
.list132 .d { color: #333; padding: 3px 0; }
.list132 .t { color: #3333aa; }
.list132 .s { color: #555; padding-bottom: 5px; font-size: 9pt; }
.list132 a { display: inline-block; border: 0; margin: 0; padding: 0; }

#index #news { padding: 5px; border: 1px solid #ccccff; background: #ffeeee; }
#index #news ul { list-style-type: none; margin: 0; padding-left: 0; }
#index #news li { margin: 4px 0; }
#index #info {
  padding: 5px;
  background: #eee;
  border: 2px solid #aaffaa;
  line-height: 1.5;
  letter-spacing: 2px;
}

.nav {
  margin: 5px;
  padding: 5px;
  background: #eeeeff;
}
.nav a { margin-right: 0.75em; }
#pnStep { margin: 0 5px 0 8px; background: #ccccff; padding: 3px 10px 2px 5px; color: #337733; }
#edStep {
  font: 12pt "PMingLiU", "MingLiU", "細明體", serif;
  text-align: right;
  width: 2.4em;
  background: #aaaaff;
  border: 1px solid #7777cc;
}
.photo { display: block; max-width: calc(100% - 10px); height: auto; margin: 0 5px 20px; }
#msg { margin: 0 5px 8px; color: #aa3333; font-weight: bold; }
.empty { margin: 8px 0; color: #666; }

#footer {
  clear: both;
  text-align: center;
  background: #eee;
  font: 9pt "PMingLiU", "MingLiU", "細明體", serif;
  color: #777;
  padding: 2px 0 3px 0;
  margin-top: 12px;
}

@media (max-width: 800px) {
  #menu { float: none; width: auto; }
  #menu ul { display: flex; flex-wrap: wrap; }
  #menu a { width: auto; min-width: 9em; }
  #context { margin: 10px 8px 0; }
  .list132, .list132 tbody, .list132 tr, .list132 td { display: block; width: auto; }
  .list132 td { margin-bottom: 6px; }
}