/* Cariboo Country Sausage — styles for elements that used to be JPEGs.
   Metrics below were measured off the images they replace, so the page
   looks the same but the words are real text: selectable, searchable,
   readable by screen readers, and sharp on high-DPI screens.
   See SITE.md for which images were converted and which were kept. */

/* --- Main navigation -------------------------------------------------
   Was ten JPEGs (b-*-01.jpg normal, b-*-02.jpg hover) swapped by the
   Dreamweaver MM_swapImage script, now gone. Each button was 160x24 with
   black Arial ~18px on white; hover added an orange glow behind the text.
   Five buttons x 160px = the 800px table width. */
.sitenav {
  font-size: 0;            /* closes the gaps between inline-block links */
}
.sitenav a {
  display: inline-block;
  width: 160px;
  height: 24px;
  text-align: center;
  background: #ffffff;
  color: #000000;
  font: 18px/24px Arial, Helvetica, sans-serif;
  text-decoration: none;
}
.sitenav a:hover,
.sitenav a:focus {
  color: #000000;
  text-shadow: 0 0 5px #ff6633, 0 0 10px #ff6633, 0 0 16px #ff6633;
}

/* --- Business hours panel --------------------------------------------
   Was hours-03.jpg (240x288, shown at 200x230): black rounded box on the
   orange sidebar. The opening hours are the most-wanted fact on the site
   and were invisible to search engines as an image. */
.hours {
  width: 200px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 12px 8px;
  background: #ff6633;
  border: 3px solid #000000;
  border-radius: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
  text-align: center;
  line-height: 1.3;
}
.hours .h-head {
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 4px;
}
.hours .h-day {
  font-size: 14px;
  font-weight: bold;
}
.hours .h-time {
  font-size: 14px;
  margin-bottom: 12px;
}
.hours .h-closed {
  font-size: 19px;
  font-weight: bold;
  margin-top: 14px;
}
.hours .h-note {
  font-size: 14px;
}

/* --- Services panel in the sidebar -----------------------------------
   Was menu.jpg: orange panel, white border, white bold Arial 18px,
   linking through to the services page. */
a.svcpanel {
  display: block;
  width: 180px;
  height: 97px;
  box-sizing: border-box;
  margin: 12px auto;
  text-align: center;
  background: #ff6633;
  border: 2px solid #ffffff;
  color: #ffffff;
  /* 93px line-height = the 97px box less its 2px borders, centring the
     single line vertically. It must ride inside the `font` shorthand,
     which would otherwise reset line-height to normal. */
  font: bold 18px/93px Arial, Helvetica, sans-serif;
  text-decoration: none;
}
a.svcpanel:hover,
a.svcpanel:focus {
  text-decoration: underline;
}

/* --- Vertical rule between the specials columns ----------------------
   Was sp-01.jpg, a 2x160 image of solid #999999. */
.vrule {
  display: inline-block;
  width: 2px;
  height: 160px;
  background: #999999;
}