/* Feale Barbers: the old site. System fonts, fixed width, no JS. Black and gold, a script heading,
   a stretched slideshow, a price list that is a photo, and Facebook for everything else. */
body {
  margin: 0;
  padding: 16px 0 30px;
  background: #000 repeating-linear-gradient(135deg, #0b0b0b 0 3px, #000 3px 8px);
  font: 12px/1.6 Verdana, Tahoma, sans-serif;
  color: #8a8a8a;
}
#wrap { width: 900px; margin: 0 auto; background: #151515; border: 2px solid #3a3326; }

#head { height: 120px; text-align: center; border-bottom: 3px double #b8962e; padding-top: 14px; box-sizing: border-box; }
.logo { font: italic 58px/1.1 "Brush Script MT", "Lucida Handwriting", "Comic Sans MS", cursive; color: #d4af37; text-shadow: 2px 2px 2px #000; }
.tag { margin-top: 4px; font: italic 13px Georgia, serif; color: #a89a6a; }

#nav { display: flex; margin: 0; padding: 0; list-style: none; background: #222; border-bottom: 1px solid #b8962e; }
#nav li { border-right: 1px solid #3a3a3a; }
#nav a { display: block; padding: 9px 16px; font: bold 11px Verdana, sans-serif; color: #c9b36b; text-decoration: none; text-transform: uppercase; }
#nav a:hover { background: #b8962e; color: #000; }
#nav small { font-weight: normal; text-transform: none; color: #888; }

#slide { position: relative; height: 170px; overflow: hidden; border-bottom: 1px solid #b8962e; }
#slide img { display: block; width: 900px; height: 170px; }
.arrow { position: absolute; top: 56px; font: 48px/1 Arial, sans-serif; color: #fff; opacity: 0.7; }
.arrow.l { left: 12px; }
.arrow.r { right: 12px; }
.dots { position: absolute; bottom: 6px; width: 100%; text-align: center; color: #fff; font-size: 22px; letter-spacing: 3px; }

#cols { display: flex; align-items: flex-start; gap: 20px; padding: 20px; }
#main { width: 600px; }
#side { width: 220px; }

h1 { margin: 0 0 12px; font: italic bold 30px "Brush Script MT", "Comic Sans MS", cursive; color: #d4af37; }
h2 { margin: 26px 0 8px; font: italic bold 22px "Brush Script MT", "Comic Sans MS", cursive; color: #d4af37; }
h3 { margin: 18px 0 8px; font: bold 12px Verdana, sans-serif; color: #b8962e; text-transform: uppercase; }
p { margin: 0 0 10px; }
.intro { text-align: justify; font-size: 11px; color: #777; }

.book { margin: 20px 0; text-align: center; }
.book a { display: inline-block; padding: 10px 30px; background: #b8962e; border: 2px solid #e6c65a; color: #000; font: bold 18px Arial, sans-serif; text-decoration: none; letter-spacing: 2px; }
.book small { color: #777; }

.plist { display: flex; align-items: center; gap: 14px; }
.plist img { display: block; width: 80px; height: 106px; border: 1px solid #555; }
.xmas { color: #888; }
.xmas b { color: #c9b36b; }

.fb { border: 1px solid #333; background: #1d1d1d; }
.fbhead { padding: 6px 10px; background: #3b5998; color: #cdd6ea; font: bold 11px Tahoma, sans-serif; }
.fbbody { height: 120px; padding: 10px; color: #666; }
.insta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.insta span { display: block; height: 66px; background: #2a2a2a; }
.follow { margin-top: 6px; font-size: 10px; color: #777; }
.counter { margin-top: 18px; padding: 8px; border: 1px solid #333; text-align: center; font-size: 10px; color: #666; }
.counter b { font: bold 18px "Courier New", monospace; color: #b8962e; letter-spacing: 2px; }

#contact { padding: 14px 20px; border-top: 3px double #b8962e; text-align: center; color: #777; }
.copy { margin: 4px 0 0; font-size: 10px; color: #555; }