/* The OLD Wildsorrel site, as it would have been built around 2009. Deliberately dated. */
.sample-banner { background: #1b2a22; color: #f4ede0; font: 13px/1.45 Arial, Helvetica, sans-serif; padding: 9px 14px; text-align: center; }
.sample-banner strong { color: #ffb199; text-transform: uppercase; letter-spacing: 1px; }

* { box-sizing: border-box; }
body { margin: 0; background: #f7d6e6; font-family: "Times New Roman", Times, serif; color: #666; font-size: 14px; }
#page { width: 100%; max-width: 760px; margin: 14px auto; background: #fff8fb; border: 3px double #b0578a; }
#header { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; background: linear-gradient(#9c27b0, #6a1b9a); border-bottom: 4px ridge #ffd54f; }
.clipart { width: 56px; height: 56px; flex: none; }
.h-text { text-align: center; }
.h-name { font: bold italic 26px/1.1 "Monotype Corsiva", "Brush Script MT", cursive; color: #fff176; text-shadow: 2px 2px 0 #4a148c; }
.h-tag { font: 12px Verdana, Arial, sans-serif; color: #f8bbd0; margin-top: 4px; }

#navbar { width: 100%; border-collapse: collapse; background: #43a047; }
#navbar td { text-align: center; border: 2px outset #66bb6a; padding: 0; }
#navbar a { display: block; padding: 6px 2px; color: #fff; font: bold 11px Arial, sans-serif; text-decoration: none; }
#navbar a:hover { background: #ffeb3b; color: #c2185b; }

#layout { width: 100%; border-collapse: collapse; }
#side { width: 170px; vertical-align: top; background: #fce4ec; border-right: 1px solid #e1a3bf; padding: 10px 8px; font: 12px Verdana, Arial, sans-serif; }
.side-box { border: 1px solid #c48aa9; background: #fff; margin-bottom: 12px; padding: 0 0 8px; }
.side-title { background: #c2185b; color: #fff; font-weight: bold; padding: 3px 6px; margin-bottom: 6px; }
.side-box a { color: #0000cc; margin-left: 6px; }
.big-phone { color: #c2185b; font: bold 16px Arial, sans-serif; text-align: center; margin: 6px 0 0; }
.counter { text-align: center; font-size: 10px; color: #999; }
.digits { display: inline-flex; gap: 1px; margin-top: 3px; background: #000; padding: 2px; border: 2px inset #999; }
.digits span { background: #222; color: #39ff14; font: bold 13px "Courier New", monospace; padding: 1px 3px; }

#main { vertical-align: top; padding: 12px 16px 18px; }
h1 { font: bold 22px Arial, Helvetica, sans-serif; color: #7b1fa2; text-align: center; margin: 4px 0 10px; text-decoration: underline; }
h2 { font: bold 17px Arial, sans-serif; color: #2e7d32; margin: 10px 0 6px; background: #f1f8e9; border-left: 6px solid #8bc34a; padding: 2px 6px; }
.intro { text-align: center; color: #999; line-height: 1.4; }
p { line-height: 1.35; }
hr { border: 0; border-top: 2px dashed #e1a3bf; margin: 14px 0; }
.prices { width: 100%; border: 2px solid #9c27b0; border-collapse: collapse; font: 13px Arial, sans-serif; }
.prices th { background: #9c27b0; color: #ffeb3b; padding: 4px; text-align: left; }
.prices td { padding: 4px; border: 1px solid #e1bee7; color: #777; }
.prices .alt td { background: #f3e5f5; }
.note { font-size: 11px; color: #bbb; font-style: italic; }
.bevel-row { text-align: center; margin: 10px 0; }
.bevel { display: inline-block; margin: 4px; padding: 5px 14px; background: linear-gradient(#ffe082, #ffb300); border: 3px outset #ffca28; color: #6a1b9a; font: bold 12px Arial, sans-serif; text-decoration: none; }
.bevel:active { border-style: inset; }

#footer { background: #6a1b9a; color: #e1bee7; text-align: center; font: 10px Verdana, sans-serif; padding: 8px; border-top: 4px ridge #ffd54f; }
#footer a { color: #fff176; font-size: 12px; }

@media (max-width: 560px) {
  #page { margin: 0; border-width: 0; }
  #layout, #layout > tbody, #layout > tbody > tr, #side, #main { display: block; width: 100%; }
  #side { border-right: 0; border-bottom: 1px solid #e1a3bf; }
  .h-name { font-size: 20px; }
  .clipart { width: 40px; height: 40px; }
  #navbar a { font-size: 9px; }
}