/* Dysart Family Butchers: the old site. System fonts only, fixed 960px box. */
html, body { margin: 0; padding: 0; }
body {
  min-width: 1000px;
  padding: 14px 0 30px;
  background-color: #e9dfc9;
  background-image:
    linear-gradient(90deg, rgba(160, 30, 30, 0.35) 50%, transparent 50%),
    linear-gradient(rgba(160, 30, 30, 0.35) 50%, transparent 50%);
  background-size: 30px 30px;
  font: 13px/1.4 Verdana, Geneva, Tahoma, sans-serif;
  color: #000;
}
#page { width: 960px; margin: 0 auto; background: #fffbea; border: 4px ridge #8a1c1c; }

#banner {
  position: relative;
  height: 150px;
  background: linear-gradient(#b52121, #6d0f0f);
  border-bottom: 3px solid #ffd800;
  text-align: center;
  color: #fff;
}
.banner__cow { position: absolute; left: 22px; top: 18px; width: 160px; height: 113px; }
.banner__title { padding-top: 26px; font: bold 50px "Brush Script MT", "Monotype Corsiva", "Comic Sans MS", cursive; text-shadow: 3px 3px 0 #000; color: #ffe600; }
.banner__sub { margin-top: 12px; font: italic bold 14px Georgia, "Times New Roman", serif; color: #fff; }

#marquee { overflow: hidden; white-space: nowrap; background: #ff0; border-bottom: 2px solid #c00; }
#marquee span { display: inline-block; padding: 6px 0; padding-left: 100%; font: bold 15px Arial, sans-serif; color: #d00; animation: scroll 22s linear infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

#cols { display: table; width: 100%; table-layout: fixed; }
#left, #main, #right { display: table-cell; vertical-align: top; }
#left { width: 170px; padding: 10px; background: #f0e4c3; border-right: 1px solid #b9a56e; }
#right { width: 190px; padding: 10px; background: #f0e4c3; border-left: 1px solid #b9a56e; }
#main { padding: 14px 18px; }

#left ul { margin: 0; padding: 0; list-style: none; }
#left li { margin-bottom: 4px; font-size: 11px; }
#left a { display: block; padding: 5px 6px; border: 2px outset #ddd; background: linear-gradient(#f4f4f4, #bdbdbd); color: #222; font: bold 12px Verdana, sans-serif; text-decoration: none; }
.uc { display: block; margin-top: 2px; color: #c00; font: bold 10px Arial, sans-serif; text-decoration: blink; }
.hit { margin-top: 18px; text-align: center; font-size: 10px; color: #555; }
.hit__n { display: flex; justify-content: center; gap: 2px; }
.hit__n b { padding: 3px 4px; background: #000; color: #0f0; font: bold 14px "Courier New", monospace; }

h1 { margin: 0 0 8px; font: bold 28px "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; color: #b00; text-align: center; }
h2 { margin: 14px 0 6px; font: bold 18px "Comic Sans MS", "Comic Sans", cursive; color: #1a3d9c; }
.intro { margin: 0 0 10px; font: 13px/1.5 "Times New Roman", Times, serif; text-align: justify; color: #333; }
.xmasbox { margin: 14px 0; padding: 8px 12px; border: 3px dashed #c00; background: #fff4b5; }
.xmasbox h2 { margin: 0 0 4px; color: #c00; text-align: center; font-size: 20px; }
.xmasbox p { margin: 0; font: 13px/1.45 Arial, sans-serif; }
.xmasbox a { color: #00e; }
.spec { text-align: center; text-decoration: underline; }
.specials { width: 100%; border: 2px solid #8a1c1c; border-collapse: collapse; font: bold 14px "Comic Sans MS", cursive; }
.specials td { padding: 4px 8px; border: 1px solid #8a1c1c; }
.specials tr:nth-child(odd) { background: #ffe9a8; }
.specials td + td { text-align: right; color: #c00; }
.small { font: 10px Arial, sans-serif; color: #999; }
.pl { margin: 6px 0; }
.pl img { border: 1px solid #999; }
.opening { margin: 12px 0 2px; font: 12px Arial, sans-serif; color: #777; }
.old { margin: 0; font: 10px Arial, sans-serif; color: #aaa; }

.fb { margin-bottom: 14px; padding: 8px; background: #3b5998; color: #fff; text-align: center; font: 12px Arial, sans-serif; border: 2px solid #1f3a73; }
.fb p { margin: 4px 0 0; }
.fb__f { display: inline-block; width: 30px; height: 30px; background: #fff; color: #3b5998; font: bold 26px/30px Arial, sans-serif; }
.gallery { margin-bottom: 14px; text-align: center; font: 12px "Comic Sans MS", cursive; }
.gallery p { margin: 2px 0; }
.gallery img { width: 170px; height: 260px; object-fit: fill; border: 3px outset #8a1c1c; }
.box { padding: 8px; border: 1px solid #999; text-align: center; font: 12px Arial, sans-serif; background: #fff; }
.box p { margin: 2px 0; }

#foot { padding: 8px 12px; background: #4a0b0b; text-align: center; font: 10px Arial, sans-serif; color: #b9a2a2; }
#foot p { margin: 2px 0; }
