/* TJ Publishing — shared styles.
   Page layout lives in inline style attributes on each page.
   This file holds the resets, and the hover/focus states
   (which cannot be written inline). */

* { box-sizing: border-box; }
  body {
  background: #F4EFE6; margin: 0; }
  a { color: #C0392B; text-decoration: none; }
  a:hover { color: #16130F; }

/* --- hover / focus states ---
   Each rule below is attached to elements via a short class name.
   Example: class="x1" on a nav link gives it the red hover fill.
   !important is required because the base styling is inline, and
   inline styles otherwise beat any stylesheet rule. */
.x1:hover { background: #C0392B !important; border-color: #C0392B !important; color: #F4EFE6 !important; }
.x2:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #C0392B !important; color: #F4EFE6 !important; }
.x3:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #35618E !important; color: #16130F !important; }
.x4:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #C0392B !important; color: #16130F !important; }
.x5:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #9C6B10 !important; color: #16130F !important; }
.x6:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #4A7A2B !important; color: #16130F !important; }
.x7:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #7B4B87 !important; color: #16130F !important; }
.x8:hover { color: #C0392B !important; }
.x9:hover { background: #35618E !important; border-color: #35618E !important; color: #F4EFE6 !important; }
.x10:hover { background: #16130F !important; color: #F4EFE6 !important; }
.x11:hover { transform: translate(-2px, -2px) !important; box-shadow: 11px 11px 0 #C0392B !important; color: #F4EFE6 !important; }
.x12:hover { background: #9C6B10 !important; border-color: #9C6B10 !important; color: #F4EFE6 !important; }
.x13:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #9C6B10 !important; color: #F4EFE6 !important; }
.x14:hover { background: #4A7A2B !important; border-color: #4A7A2B !important; color: #F4EFE6 !important; }
.x15:hover { background: #7B4B87 !important; border-color: #7B4B87 !important; color: #F4EFE6 !important; }
.x16:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 #C0392B !important; }
.x17:focus { border-color: #C0392B !important; background: #FFFFFF !important; }