/* ====================================================================
   Range Rover L322 Wiki - shared stylesheet
   Plain, circa-2000 look: Arial/Verdana, grey + navy, table feel.
   Kept simple on purpose so every page looks identical.
   ==================================================================== */

body{
  margin:0; padding:0;
  background:#FFFFFF;
  color:#000000;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1.5;
}
a{ color:#0000EE; }
a:visited{ color:#551A8B; }
a:hover{ color:#CC0000; }

/* ---- page frame ---- */
.page{ width:820px; margin:10px auto; }

/* ---- header ---- */
.hdr{ background:#000099; color:#FFFFFF; padding:10px 12px; }
.hdr .title{ font-size:24px; font-weight:bold; }
.hdr .sub{ font-size:12px; color:#CCCCFF; }
.hdr a{ color:#FFFFFF; text-decoration:none; }

/* ---- main nav bar ---- */
.nav{ background:#666666; }
.nav table{ width:100%; border-collapse:collapse; }
.nav td{ text-align:center; padding:0; }
.nav a{ display:block; padding:5px 4px; background:#CCCCCC; color:#000000;
  text-decoration:none; font-size:12px; font-weight:bold; border-right:1px solid #FFFFFF; }
.nav a:hover{ background:#FFFFFF; color:#CC0000; }
.nav .hot a{ background:#FFCC00; }
.nav .here a{ background:#000099; color:#FFFFFF; }

/* ---- breadcrumb ---- */
.crumb{ background:#EEEEEE; padding:4px 8px; font-size:11px; color:#555555;
  border-bottom:1px solid #CCCCCC; }
.crumb a{ color:#0000EE; }

/* ---- 2-column body ---- */
.body{ width:100%; border-collapse:collapse; }
.body > tbody > tr > td{ vertical-align:top; }
.side{ width:185px; padding:10px 10px 10px 0; }
.content{ padding:10px 0 10px 14px; border-left:1px solid #CCCCCC; }

/* ---- sidebar boxes ---- */
.menu{ border:1px solid #999999; margin-bottom:12px; }
.menu .cap{ background:#000099; color:#FFFFFF; font-size:12px; font-weight:bold;
  padding:3px 6px; }
.menu .cap.alt{ background:#006600; }
.menu .cap.warn{ background:#990000; }
.menu .in{ background:#F5F5F5; padding:6px 8px; font-size:12px; }
.menu .grp{ font-weight:bold; margin-top:6px; }
.menu .grp:first-child{ margin-top:0; }
.menu a{ display:block; padding:1px 0 1px 8px; text-decoration:none; }
.menu a:hover{ background:#E8E8E8; }
.counter{ font-family:"Courier New",monospace; font-size:15px; font-weight:bold;
  text-align:center; background:#000000; color:#00FF00; padding:3px; }

/* ---- content headings ---- */
h1{ font-size:21px; margin:0 0 2px; color:#000066; }
h2{ font-size:16px; margin:18px 0 4px; color:#000066;
  border-bottom:2px solid #000099; padding-bottom:2px; }
h3{ font-size:13px; margin:14px 0 3px; color:#000000; }

/* prominent heading for each engine block in the detail lists */
h3.enghead{ font-size:15px; color:#FFFFFF; background:#000099; margin:20px 0 8px;
  padding:5px 9px; border-left:6px solid #FFCC00; }
.lead{ font-size:13px; }

/* ---- tables ---- */
table.data{ width:100%; border-collapse:collapse; margin:8px 0; }
table.data th{ background:#000099; color:#FFFFFF; text-align:left; padding:4px 7px;
  font-size:12px; }
table.data td{ border:1px solid #BBBBBB; padding:4px 7px; font-size:12px;
  vertical-align:top; }
table.data tr.odd td{ background:#F2F2F2; }
table.data td.k{ background:#DDDDDD; font-weight:bold; width:28%; }

/* ---- callout boxes ---- */
.tip{ border:1px solid #CC9900; background:#FFFFCC; padding:8px; margin:10px 0; font-size:12px; }
.note{ border:1px solid #6699CC; background:#EAF2FB; padding:8px; margin:10px 0; font-size:12px; }
.warnbox{ border:1px solid #CC0000; background:#FFEEEE; padding:8px; margin:10px 0; font-size:12px; }
.verdict{ border:1px solid #339933; background:#EAF7EA; padding:8px; margin:10px 0; font-size:12px; }
.fact{ border:1px solid #9966CC; background:#F3EDF9; padding:8px; margin:10px 0; font-size:12px; }

/* coloured labels in front of a line */
.lbl{ display:inline-block; color:#FFFFFF; font-size:10px; font-weight:bold;
  padding:1px 6px; margin-right:5px; }
.lbl-warn{ background:#CC0000; }      /* watch out / danger */
.lbl-tip{ background:#CC9900; }       /* tip */
.lbl-note{ background:#3366CC; }      /* note / info */
.lbl-good{ background:#339933; }      /* strength / plus */
.lbl-bad{ background:#CC4400; }       /* weakness / minus */
.lbl-cost{ background:#990099; }      /* cost / money */

/* inline coloured text */
.good{ color:#1A7A1A; font-weight:bold; }   /* positive */
.bad{ color:#C00000; font-weight:bold; }    /* negative / warning */
.cost{ color:#990099; font-weight:bold; }   /* prices / money */

/* pros / cons table cells */
table.data td.pro{ background:#EAF7EA; }
table.data td.con{ background:#FDEDED; }

/* coloured table-row highlighting for emphasis rows */
table.data tr.hi td{ background:#FFF6D5; }
table.data tr.warn td{ background:#FDE8E8; }
table.data tr.ok td{ background:#E9F6E9; }

/* rating dots */
.rate{ font-weight:bold; }
.rate-good{ color:#1A7A1A; }
.rate-mid{ color:#CC8800; }
.rate-bad{ color:#C00000; }

/* ---- misc ---- */
.new{ color:#CC0000; font-weight:bold; font-size:10px; vertical-align:super; }
.updated{ color:#777777; font-size:11px; }
ul.tight{ margin:4px 0; padding-left:20px; }
ul.tight li{ margin:2px 0; }
.toplink{ font-size:11px; }
hr{ border:0; border-top:1px solid #CCCCCC; }

/* ---- homepage hub tiles ---- */
.tiles{ width:100%; border-collapse:separate; border-spacing:8px; margin:10px 0; }
.tiles td{ width:33%; vertical-align:top; border:2px solid #000099; background:#F4F6FC; padding:0; }
.tiles .tt{ background:#000099; color:#FFFFFF; font-family:Arial,sans-serif; font-weight:bold;
  font-size:13px; padding:5px 8px; }
.tiles .tc{ padding:7px 9px; font-size:12px; }
.tiles .tc a{ display:block; padding:1px 0; font-weight:bold; }
.pathbox{ border:2px solid #1A7A1A; background:#EEF7EE; padding:10px 14px; margin:12px 0; }
.pathbox .ph{ font-weight:bold; color:#1A6A1A; font-family:Arial,sans-serif; margin-bottom:5px; }
.pathbox a{ font-weight:bold; }

/* ---- quick answer (TL;DR) box ---- */
.quickans{ border:3px double #000099; background:#FFFDF0; padding:10px 14px; margin:12px 0; }
.quickans .qatag{ display:inline-block; background:#000099; color:#FFEB3B; font-family:Arial,sans-serif;
  font-weight:bold; font-size:11px; padding:2px 8px; margin-bottom:5px; letter-spacing:1px; }
.quickans p{ margin:4px 0 0; font-size:13px; }
/* ---- nicer related box (already have .related; add card flourish) ---- */
.related{ box-shadow:2px 2px 0 #c3cbe8; }
.related .rh{ border-bottom:1px solid #c3cbe8; padding-bottom:3px; margin-bottom:5px; }
/* ---- on-this-page menu emphasis ---- */
.menu .cap{ letter-spacing:0.5px; }

/* ---- interactive tools (comparator / calculator) ---- */
.tool{ margin:18px 0; border:4px ridge #000099; background:#ECEFF9; box-shadow:4px 4px 0 #999999; }
.tool .thead{ background:#000099; color:#FFFF00; font-family:Arial,sans-serif; font-weight:bold;
  font-size:15px; padding:7px 12px; border-bottom:2px solid #FFCC00; letter-spacing:1px; }
.tool .tbody{ padding:14px; }
.tool label{ font-weight:bold; font-family:Arial,sans-serif; font-size:12px; color:#000066; }
.tool select, .tool input[type=number]{ font-family:Arial,sans-serif; font-size:13px; padding:4px 6px;
  border:2px inset #88a; background:#FFFFEF; margin:2px 0; }
.tool button{ font-family:Arial,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF;
  background:#CC0000; border:3px outset #FF6666; padding:7px 18px; cursor:pointer; margin-top:8px; }
.tool button:hover{ background:#EE0000; }
.tool .chk{ font-family:Arial,sans-serif; font-size:12px; display:inline-block; width:48%; padding:2px 0; }
#cmpOut table, #calcOut table{ width:100%; border-collapse:collapse; margin-top:10px; border:2px solid #000099; }
#cmpOut th, #calcOut th{ background:#000099; color:#FFF; padding:4px 8px; font-size:12px; text-align:left; }
#cmpOut td, #calcOut td{ border-bottom:1px solid #ccc; padding:4px 8px; font-size:12px; }
#cmpOut td.lab, #calcOut td.lab{ background:#EAEEF9; font-weight:bold; width:30%; }
.calcrow{ margin:6px 0; }
.bignum{ font-size:22px; font-weight:bold; color:#CC0000; }

/* ---- header search box ---- */
.hdrsearch{ position:absolute; top:14px; right:16px; }
.hdrsearch input{ font-family:Arial,sans-serif; font-size:12px; padding:4px 6px; border:2px inset #88a;
  width:150px; background:#FFFFEF; }
.hdrsearch button{ font-family:Arial,sans-serif; font-size:12px; font-weight:bold; padding:4px 10px;
  border:2px outset #aac; background:#dde3f5; cursor:pointer; color:#000066; }
.hdrsearch button:hover{ background:#eef1fb; }
.hdr{ position:relative; }
/* ---- search results ---- */
.sresult{ border:1px solid #000099; background:#F7F8FD; margin:10px 0; padding:8px 12px; }
.sresult a{ font-size:14px; font-weight:bold; }
.sresult .surl{ font-size:11px; color:#1A7A1A; }
.sresult .ssnip{ font-size:12px; color:#333; margin-top:3px; }
.sresult .ssnip b{ background:#FFF2A8; font-weight:bold; }
.scount{ font-size:12px; color:#666; margin:8px 0; }

/* ---- VIN decoder (retro tool look) ---- */
.vintool{ margin:18px 0; border:4px ridge #000099; background:#ECEFF9;
  box-shadow:4px 4px 0 #999999; }
.vintool .vthead{ background:#000099; color:#FFFF00; font-family:Arial,sans-serif;
  font-weight:bold; font-size:15px; padding:7px 12px;
  border-bottom:2px solid #FFCC00; letter-spacing:1px; }
.vintool .vthead .gear{ color:#FFFFFF; }
.vintool .vtbar{ background:#FFF7CC; border-bottom:1px solid #E0C040; color:#665500;
  font-size:11px; padding:3px 12px; font-family:Arial,sans-serif; }
.vintool .vtbody{ padding:14px; }
.vinbox{ }
.vinbox label{ font-weight:bold; font-family:Arial,sans-serif; font-size:12px; display:block; margin-bottom:5px; color:#000066; }
.vinbox input{ font-family:"Courier New",monospace; font-size:20px; letter-spacing:4px;
  text-transform:uppercase; padding:9px 10px; width:100%; box-sizing:border-box;
  border:2px inset #8888AA; background:#FFFFEF; color:#000066; }
.vinbox button{ font-family:Arial,sans-serif; font-weight:bold; font-size:14px; color:#FFFFFF;
  background:#CC0000; border:3px outset #FF6666; padding:8px 22px; margin-top:10px; cursor:pointer; }
.vinbox button:hover{ background:#EE0000; }
.vinbox button:active{ border-style:inset; }
.vinbtns{ margin-top:8px; }
.vinbtns a{ font-size:11px; margin-right:12px; cursor:pointer; color:#0000CC; text-decoration:underline; }
.vinbtns a:hover{ color:#CC0000; }
.vinchars{ margin:14px 0; font-family:"Courier New",monospace; line-height:1; text-align:center; }
.vinchars .vc{ display:inline-block; width:26px; text-align:center; padding:7px 0; margin:1px;
  border:2px outset #BBBBBB; background:#FFFFFF; font-size:17px; font-weight:bold; color:#000066; }
.vinchars .vc.wmi{ background:#cfdcff; } .vinchars .vc.vds{ background:#d6f0d6; }
.vinchars .vc.yr{ background:#ffec99; } .vinchars .vc.plant{ background:#eccced; }
.vinchars .vc.ser{ background:#e8e8e8; }
.vinpos{ font-size:8px; color:#888; font-weight:normal; }
#vinResult{ margin-top:14px; }
#vinResult table{ width:100%; border-collapse:collapse; border:2px solid #000099; }
#vinResult th{ background:#000099; color:#FFFFFF; text-align:left; padding:5px 8px; font-size:12px; }
#vinResult td{ border-bottom:1px solid #ccc; padding:5px 8px; font-size:12px; vertical-align:top; }
#vinResult td.p{ width:10%; font-family:"Courier New",monospace; font-weight:bold; text-align:center; background:#EAEEF9; }
#vinResult td.c{ width:14%; font-family:"Courier New",monospace; font-weight:bold; text-align:center; background:#FFFFEF; font-size:14px; }
.vinlegend{ font-size:11px; margin:6px 0 10px; font-family:Arial,sans-serif; }
.vinlegend span{ padding:2px 6px; margin-right:3px; border:1px solid #aaa; }
.vinwarn{ background:#FFF6D6; border:2px solid #E0C040; padding:8px 12px; font-size:12px; margin:10px 0; }
.vinok{ background:#E2F6E2; border:2px solid #4CAF50; padding:9px 12px; font-size:13px; margin:10px 0; font-weight:bold; }
.vinerr{ background:#FBE0E0; border:2px solid #CC4444; padding:9px 12px; font-size:13px; margin:10px 0; font-weight:bold; }

/* ---- related pages box ---- */
.related{ border:1px solid #000099; background:#EEF1FB; padding:8px 12px; margin:14px 0; font-size:12px; }
.related .rh{ font-weight:bold; color:#000099; font-family:Arial,sans-serif; margin-bottom:3px; }
.related a{ font-weight:bold; }

/* ---- key-takeaway highlight ---- */
.takeaway{ border-left:5px solid #1A7A1A; background:#EEF7EE; padding:8px 12px; margin:12px 0; font-size:13px; }
.takeaway b{ color:#1A6A1A; }

/* ---- quick facts card ---- */
.qfacts{ border:2px solid #000099; background:#F4F6FC; margin:12px 0; }
.qfacts .qhead{ background:#000099; color:#FFFFFF; font-weight:bold; padding:5px 10px;
  font-family:Arial,sans-serif; font-size:13px; }
.qfacts table{ width:100%; border-collapse:collapse; }
.qfacts td{ padding:4px 10px; font-size:12px; border-bottom:1px solid #DDE1F0; vertical-align:top; }
.qfacts td.qk{ width:42%; color:#444444; font-weight:bold; background:#EAEEF9; }
.qfacts tr:last-child td{ border-bottom:none; }

/* ---- image placeholder ---- */
.imgph{ border:2px dashed #AAAAAA; background:#EFEFEF; color:#777777; text-align:center;
  font-family:Arial,sans-serif; padding:26px 10px; margin:10px 0; }
.imgph .ic{ font-size:26px; line-height:1; color:#999999; }
.imgph .cap{ font-size:12px; margin-top:6px; }
.imgph .sub{ font-size:10px; color:#999999; margin-top:2px; }
.imgrow{ width:100%; }
.imgrow td{ width:50%; vertical-align:top; }

/* ---- source tags (manufacturer vs estimate) ---- */
.src{ display:inline-block; font-size:9px; font-weight:bold; color:#FFFFFF; padding:1px 5px;
  vertical-align:middle; margin-left:4px; }
.src-oem{ background:#1A7A1A; }      /* manufacturer / official */
.src-est{ background:#CC7700; }      /* estimate / community */
.sourcebox{ border:1px solid #BBBBBB; background:#F4F4F4; padding:6px 8px; margin:8px 0;
  font-size:11px; color:#555555; }
.sourcebox b{ color:#333333; }

/* ---- paint colour swatch ---- */
.sw{ display:inline-block; width:54px; height:26px; border:1px solid #555555; vertical-align:middle; }
.swcode{ font-family:"Courier New",monospace; font-size:11px; }

/* ---- footer ---- */

/* ---- status table on sitemap ---- */
.done{ color:#006600; font-weight:bold; }
.todo{ color:#999999; }

/* ---- help tooltips (the "?" in a circle) ---- */
.help{ position:relative; display:inline-block; width:14px; height:14px; line-height:14px;
  text-align:center; font-size:10px; font-weight:bold; color:#FFFFFF; background:#3366CC;
  border-radius:50%; cursor:help; margin:0 2px; vertical-align:super; font-family:Arial,sans-serif; }
.help .tip-pop{ visibility:hidden; opacity:0; position:absolute; z-index:50;
  bottom:135%; left:50%; margin-left:-110px; width:220px;
  background:#FFFCEB; color:#000000; border:1px solid #CC9900; padding:6px 8px;
  font-size:11px; font-weight:normal; line-height:1.45; text-align:left;
  box-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.help:hover .tip-pop{ visibility:visible; opacity:1; }
.help .tip-pop b{ color:#000066; }

/* ---- footer ---- */
.foot{ background:#CCCCCC; padding:8px; text-align:center; font-size:11px;
  color:#333333; margin-top:14px; border-top:1px solid #999999; }
.foot a{ color:#0000AA; }

/* ---- print button ---- */
.printbtn{ font-family:Arial,sans-serif; font-weight:bold; font-size:13px; color:#FFFFFF;
  background:#000099; border:3px outset #5566cc; padding:7px 16px; cursor:pointer; }
.printbtn:hover{ background:#0000CC; }

/* ---- print stylesheet: clean printout ---- */
@media print {
  /* hide navigation chrome, keep only the content */
  .nav, .side, .foot, .crumb, .hdrsearch, .printbtn, .toplink, .related, .imgph { display:none !important; }
  .hdr { border:none; }
  .hdr .sub { display:none; }
  .page { width:100%; margin:0; border:none; box-shadow:none; }
  .body, .content { display:block; width:100%; }
  td.content { padding:0; }
  body { background:#FFFFFF; color:#000000; font-size:12pt; }
  a { color:#000000; text-decoration:none; }
  /* show tooltips' hidden text is not needed; hide the ? markers */
  .help { display:none; }
  table.data { page-break-inside:auto; }
  tr { page-break-inside:avoid; }
  h1,h2 { page-break-after:avoid; }
}

/* ============================================================
   MOBILE RESPONSIVE  (applies only on narrow screens;
   desktop retro layout above is untouched)
   ============================================================ */
@media screen and (max-width: 860px){
  .page{ width:auto; margin:0; }
  .hdr{ padding:8px 10px; }
  .hdr .title{ font-size:20px; }
  .hdr .sub{ font-size:11px; padding-right:0; }

  /* search box: move below the title instead of absolute-right */
  .hdrsearch{ position:static; margin-top:6px; }
  .hdrsearch input{ width:60%; max-width:none; }

  /* top navigation: let it wrap onto multiple lines */
  .nav table, .nav tbody, .nav tr{ display:block; }
  .nav td{ display:inline-block; }
  .nav td a{ display:inline-block; padding:6px 9px; }

  /* main layout: stack the sidebar UNDER the content */
  .body, .body > tbody, .body > tbody > tr{ display:block; }
  .body > tbody > tr > td{ display:block; width:auto !important; }
  .content{ border-left:none; padding:10px 10px; }
  .side{ width:auto; padding:10px; border-top:2px solid #000099; }

  /* the left menu reads better as a footer-nav on mobile */
  .menu{ margin-bottom:10px; }

  /* tables: allow horizontal scroll instead of breaking layout */
  table.data{ display:block; overflow-x:auto; width:100%; }

  /* tiles + image-rows stack vertically */
  .tiles, .tiles tbody, .tiles tr{ display:block; }
  .tiles td{ display:block; width:auto !important; margin-bottom:8px; }
  .imgrow, .imgrow tbody, .imgrow tr{ display:block; }
  .imgrow td{ display:block; width:auto !important; }

  /* tooltips: on touch they can overflow; cap width */
  .tip-pop{ max-width:240px; }

  /* interactive tools fit the screen */
  .vintool, .tool{ box-shadow:2px 2px 0 #999; }
  .vinbox input, .tool input, .tool select{ max-width:100%; box-sizing:border-box; }
}

/* ---- real photos ---- */
.photo{ margin:12px 0; border:1px solid #999; background:#fff; }
.photo img{ display:block; width:100%; height:auto; }
.photo .credit{ font-size:10px; color:#777; padding:3px 6px; background:#f4f4f4; border-top:1px solid #ddd; }
.photo .credit a{ color:#777; }