/* Connis Signs - one stylesheet for every page */

body {
  margin: 0;
  padding: 16px 12px 32px;
  background: #e9dfc8 url("images/bg.png");   /* bg.png tiles behind the page */
  color: #2a2118;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

#page {
  max-width: 760px;
  margin: 0 auto;
  background: #fbf7ee;
  border: 2px solid #2a2118;
  padding: 12px 16px 20px;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* ---------- painted header ---------- */
#header {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}
#header img { display: block; margin: 0 auto; }

/* ---------- painted nav buttons ---------- */
#nav {
  text-align: center;
  margin: 0 0 16px;
  font-size: 0;                  /* removes gaps between inline buttons */
}
#nav a {
  display: inline-block;
  width: 180px;
  max-width: 48%;
  margin: 2px;
  vertical-align: top;
}
#nav a img { display: block; width: 100%; }
#nav a img.hover { display: none; }
#nav a:hover img.base,
#nav a.here img.base { display: none; }
#nav a:hover img.hover,
#nav a.here img.hover { display: block; }

/* ---------- page title panels ---------- */
.title {
  display: block;
  margin: 8px auto 12px;
  width: 400px;
}

.divider {
  display: block;
  margin: 20px auto;
  width: 400px;
}

/* ---------- text ---------- */
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  margin: 24px 0 6px;
  border-bottom: 1px solid #c9b998;
}
p { margin: 0 0 12px; }

a { color: #1f3f8f; }
a:visited { color: #6b2a7a; }
a:hover { color: #b3261e; }

.center { text-align: center; }

.hand {
  width: 60px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ---------- gallery ---------- */
.gallery {
  text-align: center;
  font-size: 0;
}
.gallery a {
  display: inline-block;
  box-sizing: border-box;
  width: 220px;
  max-width: 45%;
  margin: 6px;
  border: 1px solid #2a2118;
  background: #fff;
  padding: 4px;
  vertical-align: top;
}
.gallery a img { display: block; width: 100%; }
.gallery small {
  display: block;
  font-size: 12px;
  color: #5a4a38;
  padding-top: 3px;
}

/* ---------- service area table ---------- */
table.zones {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0 12px;
  font-size: 14px;
}
table.zones th,
table.zones td {
  border: 1px solid #a8977a;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
table.zones th { background: #efe4cc; }
table.zones td.fee { white-space: nowrap; font-weight: bold; }

/* ---------- footer ---------- */
#footer {
  margin-top: 28px;
  padding-top: 10px;
  border-top: 1px solid #c9b998;
  text-align: center;
  font-size: 12px;
  color: #5a4a38;
}

/* ---------- small screens ---------- */
@media (max-width: 480px) {
  body { padding: 8px 6px 24px; font-size: 16px; }
  #page { padding: 10px; }
  table.zones { font-size: 13px; }
}