/* ============================================
   EquiMatch.AI - Y2K Edition Stylesheet
   Best viewed in Internet Explorer 6.0
   Resolution: 800x600
   ============================================ */

/* Reset - they didn't really do this in 2000 but we need it */
* { margin: 0; padding: 0; }

body {
  background-color: #003366;
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///9ra2iH5BAAAAAAALAAAAAAEAAQAAAIFhB+px6oFADs=');
  font-family: "Comic Sans MS", "MS Sans Serif", Verdana, Arial, sans-serif;
  color: #000000;
  font-size: 12px;
}

/* The classic centered table layout wrapper */
.page-wrapper {
  width: 780px;
  margin: 0 auto;
  background-color: #ffffff;
  border-left: 3px solid #6699cc;
  border-right: 3px solid #336699;
  border-bottom: 3px solid #336699;
}

/* ===== TOP BANNER ===== */
.top-banner {
  background: linear-gradient(to right, #003366, #0066cc, #003366);
  text-align: center;
  padding: 10px 0;
  border-bottom: 3px solid #ffcc00;
}

.top-banner .site-title {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 42px;
  color: #ffcc00;
  text-shadow: 2px 2px 0px #000000, 4px 4px 0px #003366;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.top-banner .site-title span.ai {
  color: #00ff00;
  font-size: 28px;
  vertical-align: super;
}

.top-banner .tagline {
  color: #99ccff;
  font-size: 11px;
  font-family: Verdana, sans-serif;
  margin-top: 4px;
  font-style: italic;
}

/* Animated marquee-style banner */
.marquee-bar {
  background-color: #000033;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid #00ff00;
  border-bottom: 1px solid #00ff00;
}

.marquee-bar .scroll-text {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ===== NAVIGATION BAR ===== */
.nav-bar {
  background: linear-gradient(to bottom, #6699cc, #336699);
  border-bottom: 2px solid #ffcc00;
  text-align: center;
  padding: 2px 0;
}

.nav-bar a {
  display: inline-block;
  color: #ffffff;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px outset #6699cc;
  background: linear-gradient(to bottom, #4488bb, #336699);
  margin: 3px 2px;
  text-transform: uppercase;
}

.nav-bar a:hover {
  background: linear-gradient(to bottom, #ffcc00, #ff9900);
  color: #003366;
  border: 1px inset #cc9900;
}

.nav-bar a.active {
  background: linear-gradient(to bottom, #ffcc00, #ff9900);
  color: #003366;
  border: 1px inset #cc9900;
}

/* ===== VISITOR COUNTER ===== */
.visitor-counter {
  background-color: #000000;
  text-align: center;
  padding: 4px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #00ff00;
  border-bottom: 1px solid #333333;
}

.visitor-counter .counter-digits {
  background-color: #111;
  color: #ff0000;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 6px;
  border: 1px inset #333;
  letter-spacing: 2px;
  font-family: "Courier New", monospace;
}

/* ===== MAIN CONTENT AREA ===== */
.content-area {
  padding: 15px;
}

/* Section headers - beveled look */
.section-header {
  background: linear-gradient(to right, #003366, #0066cc, #003366);
  color: #ffcc00;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 16px;
  padding: 6px 12px;
  margin: 15px 0 10px 0;
  border: 2px outset #6699cc;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #000;
}

.section-header-alt {
  background: linear-gradient(to right, #663300, #cc6600, #663300);
  color: #ffff00;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 16px;
  padding: 6px 12px;
  margin: 15px 0 10px 0;
  border: 2px outset #996633;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #000;
}

/* Star separator */
.star-separator {
  text-align: center;
  padding: 8px 0;
  color: #ffcc00;
  font-size: 14px;
  letter-spacing: 4px;
}

/* Content tables */
.content-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.content-table td {
  padding: 8px;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.5;
}

.content-table .label-cell {
  background-color: #003366;
  color: #ffcc00;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  width: 160px;
  border: 1px solid #336699;
}

.content-table .data-cell {
  background-color: #e8f0f8;
  border: 1px solid #99aabb;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}

/* Beveled info boxes */
.info-box {
  background-color: #ffffcc;
  border: 2px outset #cccc99;
  padding: 10px;
  margin: 10px 0;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.6;
}

.info-box-blue {
  background-color: #dde8f0;
  border: 2px outset #99aabb;
  padding: 10px;
  margin: 10px 0;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.6;
}

/* Warning/highlight box */
.highlight-box {
  background-color: #ffcc00;
  border: 3px double #cc9900;
  padding: 12px;
  margin: 10px 0;
  text-align: center;
  font-family: "Arial Black", sans-serif;
  font-size: 14px;
  color: #660000;
}

/* ===== HERO / WELCOME SECTION ===== */
.welcome-section {
  background: linear-gradient(135deg, #dde8f0, #ffffff, #dde8f0);
  border: 2px inset #99aabb;
  padding: 15px;
  text-align: center;
  margin: 10px 0;
}

.welcome-section h1 {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 24px;
  color: #003366;
  text-shadow: 1px 1px 0px #99ccff;
}

.welcome-section .welcome-sub {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  color: #336699;
  margin-top: 8px;
  font-style: italic;
}

/* Blinking text - essential Y2K */
.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
}

@keyframes blinker {
  50% { opacity: 0; }
}

/* Hot/New badges */
.badge-new {
  display: inline-block;
  background-color: #ff0000;
  color: #ffffff;
  font-family: "Arial Black", sans-serif;
  font-size: 9px;
  padding: 1px 4px;
  border: 1px outset #cc0000;
  vertical-align: super;
  text-transform: uppercase;
  animation: blinker 1.5s step-start infinite;
}

.badge-hot {
  display: inline-block;
  background-color: #ff6600;
  color: #ffffff;
  font-family: "Arial Black", sans-serif;
  font-size: 9px;
  padding: 1px 4px;
  border: 1px outset #cc3300;
  vertical-align: super;
  text-transform: uppercase;
}

/* ===== BUTTONS ===== */
.retro-button {
  display: inline-block;
  background: linear-gradient(to bottom, #ffcc00, #ff9900);
  color: #003366;
  font-family: "Arial Black", Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 20px;
  border: 2px outset #ffcc00;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  margin: 5px;
}

.retro-button:hover {
  background: linear-gradient(to bottom, #ff9900, #cc6600);
  border: 2px inset #cc9900;
}

.retro-button-blue {
  display: inline-block;
  background: linear-gradient(to bottom, #6699cc, #336699);
  color: #ffffff;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 16px;
  border: 2px outset #6699cc;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}

.retro-button-blue:hover {
  background: linear-gradient(to bottom, #336699, #003366);
  border: 2px inset #336699;
}

/* ===== TEAM MEMBER CARDS ===== */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.team-card {
  width: 160px;
  border: 2px outset #999999;
  background-color: #e8f0f8;
  text-align: center;
  padding: 8px;
}

.team-card img {
  width: 120px;
  height: 120px;
  border: 3px ridge #6699cc;
  object-fit: cover;
  image-rendering: pixelated;
}

.team-card .name {
  font-family: "Arial Black", sans-serif;
  font-size: 11px;
  color: #003366;
  margin-top: 6px;
}

.team-card .title {
  font-family: Verdana, sans-serif;
  font-size: 9px;
  color: #666666;
  margin-top: 2px;
}

.team-card a {
  display: inline-block;
  margin-top: 4px;
  font-size: 9px;
  color: #0000ff;
  font-family: Verdana, sans-serif;
}

/* ===== COMPARISON TABLE ===== */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  border: 2px outset #999999;
}

.comparison-table th {
  background: linear-gradient(to bottom, #003366, #004488);
  color: #ffcc00;
  font-family: "Arial Black", sans-serif;
  font-size: 12px;
  padding: 8px;
  border: 1px solid #002244;
  text-transform: uppercase;
}

.comparison-table td {
  padding: 6px 8px;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  border: 1px solid #cccccc;
}

.comparison-table tr:nth-child(even) td {
  background-color: #e8f0f8;
}

.comparison-table tr:nth-child(odd) td {
  background-color: #ffffff;
}

.comparison-table .col-bad {
  color: #cc0000;
}

.comparison-table .col-good {
  color: #006600;
  font-weight: bold;
}

/* ===== STEPS / HOW IT WORKS ===== */
.step-item {
  background-color: #f0f4f8;
  border: 1px solid #99aabb;
  border-left: 4px solid #003366;
  padding: 8px 10px;
  margin: 6px 0;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}

.step-item .step-number {
  display: inline-block;
  background-color: #003366;
  color: #ffcc00;
  font-family: "Arial Black", sans-serif;
  font-size: 14px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-right: 8px;
  border: 1px outset #336699;
}

.step-item .step-title {
  font-weight: bold;
  color: #003366;
  font-size: 12px;
}

.step-item .step-desc {
  margin-top: 4px;
  color: #333;
  margin-left: 34px;
}

/* ===== AUDIENCE BOXES ===== */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.audience-box {
  border: 2px outset #999999;
  padding: 10px;
  background: linear-gradient(135deg, #ffffff, #e8f0f8);
}

.audience-box .aud-title {
  font-family: "Arial Black", sans-serif;
  font-size: 12px;
  color: #003366;
  border-bottom: 1px dashed #99aabb;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.audience-box .aud-desc {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
}

/* ===== KEY FACTS ICONS ===== */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.fact-item {
  text-align: center;
  border: 1px solid #99aabb;
  background-color: #f0f4f8;
  padding: 10px 4px;
}

.fact-item .fact-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.fact-item .fact-label {
  font-family: "Arial Black", sans-serif;
  font-size: 10px;
  color: #003366;
}

.fact-item .fact-desc {
  font-family: Verdana, sans-serif;
  font-size: 9px;
  color: #666;
  margin-top: 4px;
}

/* ===== FAQ SECTION ===== */
.faq-category {
  margin: 10px 0;
}

.faq-item {
  border: 1px solid #cccccc;
  margin: 6px 0;
  background-color: #ffffff;
}

.faq-item .faq-q {
  background: linear-gradient(to bottom, #e8f0f8, #d0dce8);
  padding: 6px 10px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #003366;
  cursor: pointer;
  border-bottom: 1px solid #cccccc;
}

.faq-item .faq-q::before {
  content: ">>> ";
  color: #ff6600;
  font-family: "Courier New", monospace;
}

.faq-item .faq-a {
  padding: 8px 10px 8px 30px;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: #333333;
  line-height: 1.6;
  display: none;
  background-color: #fffff8;
}

.faq-item.open .faq-a {
  display: block;
}

/* ===== CONTACT FORM ===== */
.contact-form {
  background-color: #e8f0f8;
  border: 2px inset #99aabb;
  padding: 15px;
  margin: 10px 0;
}

.contact-form label {
  display: block;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #003366;
  margin-top: 8px;
  margin-bottom: 2px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 4px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  border: 2px inset #999999;
  background-color: #ffffff;
  box-sizing: border-box;
}

.contact-form textarea {
  height: 100px;
  resize: vertical;
}

.contact-form select {
  width: auto;
  min-width: 200px;
}

/* ===== FOOTER ===== */
.footer {
  background: linear-gradient(to right, #003366, #004488, #003366);
  border-top: 3px solid #ffcc00;
  text-align: center;
  padding: 12px;
}

.footer .footer-links {
  margin: 8px 0;
}

.footer .footer-links a {
  color: #99ccff;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  text-decoration: underline;
  margin: 0 6px;
}

.footer .footer-links a:hover {
  color: #ffcc00;
}

.footer .copyright {
  color: #6699cc;
  font-family: Verdana, sans-serif;
  font-size: 9px;
  margin-top: 6px;
}

.footer .best-viewed {
  color: #336699;
  font-family: "Courier New", monospace;
  font-size: 9px;
  margin-top: 6px;
  font-style: italic;
}

/* ===== GUESTBOOK LINK (classic!) ===== */
.guestbook-link {
  text-align: center;
  margin: 10px 0;
  padding: 8px;
  background: linear-gradient(to right, transparent, #ffffcc, transparent);
}

.guestbook-link a {
  color: #ff6600;
  font-family: "Comic Sans MS", sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
}

/* ===== UNDER CONSTRUCTION ===== */
.under-construction {
  text-align: center;
  padding: 6px;
  font-family: "Comic Sans MS", sans-serif;
  font-size: 11px;
  color: #ff6600;
  background-color: #ffffcc;
  border: 1px dashed #ffcc00;
  margin: 10px 0;
}

/* ===== ANIMATED EMAIL ICON ===== */
.email-icon {
  display: inline-block;
  animation: bounce 0.6s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

/* ===== WEBRING ===== */
.webring {
  text-align: center;
  border: 1px solid #999;
  background-color: #f0f0f0;
  padding: 6px;
  margin: 10px 0;
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

.webring a {
  color: #0000ff;
  margin: 0 4px;
}

/* ===== SPARKLE / STARS AROUND TEXT ===== */
.sparkle {
  color: #ffcc00;
  animation: sparkle-anim 0.8s ease-in-out infinite alternate;
}

@keyframes sparkle-anim {
  from { opacity: 1; text-shadow: 0 0 4px #ffcc00; }
  to { opacity: 0.5; text-shadow: 0 0 8px #ff9900; }
}

/* ===== HIT COUNTER STYLE ===== */
.hit-counter {
  display: inline-block;
  background: #000;
  border: 2px inset #666;
  padding: 2px 4px;
}

.hit-counter span {
  display: inline-block;
  background: #111;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: bold;
  width: 14px;
  text-align: center;
  margin: 0 1px;
  border: 1px inset #333;
}

/* ===== SELLERS PAGE SPECIFIC ===== */
.testimonial-box {
  background-color: #f8f8f0;
  border: 2px groove #cccc99;
  padding: 10px;
  margin: 8px 0;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

.testimonial-box .quote-mark {
  font-size: 24px;
  color: #cc9900;
  font-family: Georgia, serif;
  line-height: 0;
  vertical-align: -6px;
}

.testimonial-box .attribution {
  text-align: right;
  font-style: normal;
  font-weight: bold;
  color: #003366;
  margin-top: 4px;
  font-size: 9px;
}

/* Service boxes for sellers */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.service-box {
  border: 2px outset #cccc99;
  background: linear-gradient(135deg, #fffff0, #f0f0e0);
  padding: 10px;
}

.service-box .svc-title {
  font-family: "Arial Black", sans-serif;
  font-size: 11px;
  color: #663300;
  margin-bottom: 4px;
}

.service-box .svc-desc {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
}

/* ===== ANIMATED CONSTRUCTION GIF REPLACEMENT ===== */
.construction-bar {
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    #ffcc00,
    #ffcc00 10px,
    #000000 10px,
    #000000 20px
  );
  animation: construction-move 1s linear infinite;
}

@keyframes construction-move {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}

/* ===== SIDEBAR WIDGETS ===== */
.sidebar {
  width: 180px;
  vertical-align: top;
  padding-right: 10px;
}

.sidebar-widget {
  border: 2px outset #999;
  margin-bottom: 10px;
  background-color: #f0f4f8;
}

.sidebar-widget .sw-header {
  background: linear-gradient(to bottom, #003366, #004488);
  color: #ffcc00;
  font-family: "Arial Black", sans-serif;
  font-size: 10px;
  padding: 4px 6px;
  text-transform: uppercase;
}

.sidebar-widget .sw-body {
  padding: 6px;
  font-family: Verdana, sans-serif;
  font-size: 9px;
  color: #333;
  line-height: 1.6;
}

.sidebar-widget .sw-body a {
  color: #0000ff;
  text-decoration: underline;
}

/* ===== PROBLEM IMAGE ===== */
.problem-image {
  max-width: 100%;
  border: 3px ridge #999999;
  image-rendering: pixelated;
}

/* ===== VALUES / CORE VALUES ===== */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.value-box {
  border: 2px outset #6699cc;
  padding: 10px;
  background: linear-gradient(135deg, #e8f0f8, #d0dce8);
}

.value-box .val-title {
  font-family: "Arial Black", sans-serif;
  font-size: 11px;
  color: #003366;
  margin-bottom: 4px;
}

.value-box .val-desc {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
}

/* ===== MISC ===== */
a { color: #0000cc; }
a:visited { color: #660099; }
a:hover { color: #ff6600; }

hr.fancy {
  border: none;
  height: 3px;
  background: linear-gradient(to right, transparent, #003366, #ffcc00, #003366, transparent);
  margin: 12px 0;
}

.center { text-align: center; }
.small { font-size: 9px; }
.bold { font-weight: bold; }

/* Scrolling text ticker */
.ticker {
  background-color: #ffffcc;
  border: 1px solid #cccc99;
  padding: 4px 8px;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: #660000;
  margin: 8px 0;
  overflow: hidden;
}

.ticker span {
  display: inline-block;
  animation: marquee 15s linear infinite;
}

/* Dropdown shadow for IE feel */
.drop-shadow {
  box-shadow: 4px 4px 0px #999999;
}