/*
 * legacy-fixes.css — preservation-minded improvements for VenusKetch.com.
 * Goal: make the old Trellix archive readable and pleasant without turning it
 * into a new app-style website. Square edges, old teal palette, Arial/Verdana,
 * and table-era rhythm are kept; mobile layout and contrast are repaired.
 */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  background-color:#336666 !important;
  color:#ffffff;
  margin:0;
}
body > table{
  margin-left:auto;
  margin-right:auto;
}
a{ text-underline-offset:2px; }

/* Hide dead hosted-ad remnants from the archived Tripod pages. They create the
   broken icon/empty banner seen at the top on phones. */
/* Do not hide #tb_container itself: several archived Tripod pages are
   malformed and the real site content can become a descendant of that wrapper.
   Hide only the dead ad pieces inside it. */
#tb_container{
  background:transparent !important;
  border:0 !important;
}
#tb_ad,
#ad_container,
#footerAd_container,
#FooterAd,
#lyslider-adblock-wrapper,
iframe[src*="tripod"],
iframe[src*="lycos"],
iframe[src*="ad"],
object,
embed,
img[src^="http://ad.yieldmanager.com"],
img[src*="ly.lygo.com"],
img[src*="adtrack."]{
  display:none !important;
}

/* Preservation notice: still present, but not allowed to dominate mobile. */
#legacy-preservation-notice{
  box-sizing:border-box !important;
  padding:9px 14px !important;
  border-bottom:1px solid #6b563f !important;
  background:#fff8dc !important;
  color:#2b2118 !important;
  font:13px/1.35 Georgia,serif !important;
}
#legacy-preservation-notice a{ color:#5b3d1f !important; }

/* A simple square-edged site head. Uses the Venus symbol as a mark and stays
   close to the original teal/cyan language. */
.vk-site-head{
  box-sizing:border-box;
  width:100%;
  background:#1a3333;
  border-top:1px solid #669999;
  border-bottom:3px solid #99cccc;
  color:#ffffff;
  padding:14px 18px 13px;
  display:flex;
  align-items:center;
  gap:13px;
  font-family:Arial, Helvetica, sans-serif;
}
.vk-head-mark{
  flex:0 0 auto;
  width:42px;
  height:42px;
  line-height:40px;
  text-align:center;
  border:1px solid #99cccc;
  color:#ccffff !important;
  text-decoration:none !important;
  font:34px/40px Georgia, 'Times New Roman', serif;
}
.vk-head-title{
  color:#ffffff !important;
  text-decoration:none !important;
  font:bold 24px/1.05 Arial, Helvetica, sans-serif;
  letter-spacing:.02em;
}
.vk-head-sub{
  margin-top:3px;
  color:#ccffff;
  font:12px/1.25 Verdana, Arial, Helvetica, sans-serif;
  letter-spacing:.04em;
}

/* Side and horizontal menus: readable visited/current states. */
a.NavBar,
a.NavBar:link,
a.NavBar:visited,
a.NavBar:active,
a.NavBar font,
a.NavBar:visited font{
  color:#ffffff !important;
  text-decoration:none !important;
}
a.NavBar:hover,
a.NavBar:hover font,
a.NavBar:focus,
a.NavBar:focus font{
  color:#ccffff !important;
  text-decoration:underline !important;
}
a.NavBar{
  display:inline-block;
  padding:3px 6px;
  line-height:1.25;
}
td[width="150"][bgcolor="#336666"]{
  background-color:#336666 !important;
  vertical-align:top !important;
  padding-bottom:14px !important;
}
td[width="150"][bgcolor="#336666"] table{
  background:transparent !important;
  width:150px;
}
td[width="150"][bgcolor="#336666"] a.NavBar{
  display:block;
  padding:4px 8px;
}

/* Main content and image columns. */
td[width="610"][bgcolor="#669999"]{
  padding-bottom:12px;
}
td[width="288"][bgcolor="#336666"],
td[width="288"][bgcolor="#000000"]{
  background-color:#336666 !important;
  padding-top:5px;
}
td[width="288"] img,
td[width="258"] img,
td[width="265"] img{
  max-width:100%;
  height:auto;
}
td[width="288"] p,
td[width="258"] p,
td[width="265"] p{
  margin-top:8px;
  margin-bottom:12px;
}
img{
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#ccffff;
}

/* Mobile: the old fixed tables were rendering as a tiny unreadable strip.
   On phones, stack the tables, remove spacer columns, turn the nav into a
   compact readable wrap, and lay image pages out as simple grids. */
@media (max-width: 820px){
  body{
    background:#255858 !important;
    min-width:0 !important;
    overflow-x:hidden;
  }
  #legacy-preservation-notice{
    font-size:12px !important;
    line-height:1.3 !important;
    padding:8px 10px !important;
  }
  .vk-site-head{
    padding:13px 14px 12px;
    gap:11px;
  }
  .vk-head-mark{
    width:38px;
    height:38px;
    line-height:36px;
    font-size:31px;
  }
  .vk-head-title{ font-size:22px; }
  .vk-head-sub{ font-size:11px; }

  body > table,
  body > table > tbody,
  body > table > tbody > tr{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  body > table td{
    box-sizing:border-box;
    max-width:100% !important;
  }

  /* Remove empty Trellix spacer gutters that caused huge blank strips. */
  td[width="200"]:empty,
  td[width="7"],
  td[width="2"],
  td[width="9"],
  td[width="10"],
  td[width="150"] > table > tbody > tr:first-child,
  img[src="/imagelib/sitebuilder/layout/spacer.gif"],
  img[src="imagelib/sitebuilder/layout/spacer.gif"],
  img[src*="/spacer.gif"],
  img[src*="imagelib/sitebuilder/layout/spacer.gif"]{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  img{
    max-width:100% !important;
    height:auto !important;
  }

  /* Major layout cells become readable blocks. */
  td[width="150"],
  td[width="200"],
  td[width="553"],
  td[width="610"],
  td[width="599"],
  td[width="542"],
  td[width="541"],
  td[width="288"],
  td[width="265"],
  td[width="258"],
  td[width="740"],
  td[width="760"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* Content panels keep their original light/dark intent: light-cyan pages
     remain light with black text; dark gallery pages remain dark teal. */
  td[bgcolor="#99cccc"],
  td[bgcolor="#99CCCC"],
  td[bgcolor="#669999"],
  td[bgcolor="#669999"] td{
    background-color:#99cccc !important;
    color:#000000 !important;
  }
  td[bgcolor="#99cccc"] font,
  td[bgcolor="#99CCCC"] font,
  td[bgcolor="#669999"] font,
  td[bgcolor="#99cccc"] p,
  td[bgcolor="#99CCCC"] p,
  td[bgcolor="#669999"] p,
  td[bgcolor="#99cccc"] div,
  td[bgcolor="#99CCCC"] div,
  td[bgcolor="#669999"] div{
    color:#000000 !important;
  }
  td[width="553"],
  td[width="542"],
  td[width="541"]{
    background:#336666 !important;
  }

  /* Page title/headings. Override pale inline font colors enough to read. */
  td[width="541"] > p,
  td[width="541"] > div,
  td[width="609"] > p{
    margin:0 0 5px !important;
  }
  td[width="541"] font[size="3"],
  td[width="609"] font[size="6"]{
    color:#ccffff !important;
    font-size:17px !important;
    line-height:1.2 !important;
  }
  td[width="541"] font[size="5"],
  td[width="609"] font[size="6"]{
    color:#ffffff !important;
    font-size:26px !important;
    line-height:1.15 !important;
  }
  font[color="66ccff"],
  font[color="#66ccff"],
  font[color="00ff99"],
  font[color="#00ff99"]{
    color:#ffffff !important;
  }

  /* Mobile navigation: no nested scroll boxes. Keep the 34-link legacy menu
     available behind a native disclosure so the page starts with content. */
  .vk-nav-menu{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border-top:1px solid #669999;
    border-bottom:2px solid #99cccc;
    background:#2f6b68 !important;
  }
  .vk-nav-menu > summary{
    display:block;
    cursor:pointer;
    padding:8px 12px !important;
    color:#ccffff !important;
    font:bold 12px/1 Verdana, Arial, Helvetica, sans-serif !important;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .vk-nav-menu > summary::after{
    content:" \\2014  tap for site links";
    color:#ffffff;
    font-weight:normal;
    letter-spacing:0;
    text-transform:none;
  }
  a.NavBar{
    display:inline-block !important;
    margin:0 3px 5px 0 !important;
    padding:4px 7px !important;
    background:#1f4e4e;
    border:1px solid #5f9a9a;
    color:#ffffff !important;
    font:bold 11px/1.12 Verdana, Arial, Helvetica, sans-serif !important;
    white-space:nowrap !important;
    text-decoration:none !important;
  }
  a.NavBar:link,
  a.NavBar:visited,
  a.NavBar:hover,
  a.NavBar:active,
  a.NavBar font{ color:#ffffff !important; }
  td[width="150"][bgcolor="#336666"],
  td[bgcolor="#336666"]:has(.vk-nav-strip){
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding:0 !important;
    background:#2f6b68 !important;
  }
  .vk-nav-strip{
    display:block !important;
    box-sizing:border-box !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:normal !important;
    padding:7px 8px 8px !important;
    background:#2f6b68 !important;
  }
  td[width="150"][bgcolor="#336666"] table,
  td[width="150"][bgcolor="#336666"] tbody,
  td[width="150"][bgcolor="#336666"] tr,
  td[width="150"][bgcolor="#336666"] td,
  td[bgcolor="#336666"]:has(.vk-nav-strip) table,
  td[bgcolor="#336666"]:has(.vk-nav-strip) tbody,
  td[bgcolor="#336666"]:has(.vk-nav-strip) tr,
  td[bgcolor="#336666"]:has(.vk-nav-strip) td{
    display:inline !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* Typography. */
  p, div, td{
    color:#ffffff;
  }
  td font[size="1"]{ font-size:11px !important; line-height:1.35 !important; }
  td font[size="2"], td font[size="-2"]{ font-size:14px !important; line-height:1.45 !important; }
  td font[size="3"]{ font-size:18px !important; line-height:1.3 !important; }
  td font[size="5"]{ font-size:26px !important; line-height:1.12 !important; }

  /* Photo/gallery pages: arrange image paragraphs as a tidy two-column grid,
     but leave normal captions/text full-width and readable. */
  td[width="265"] > table,
  td[width="258"] > table,
  td[width="599"] > table,
  td[width="542"] > table{
    width:100% !important;
  }
  td[width="265"],
  td[width="258"],
  td[width="599"]{
    display:block !important;
  }
  td[width="265"] p,
  td[width="258"] p,
  td[width="599"] p{
    display:block;
    width:auto;
    margin:8px 0 12px !important;
  }
  td[width="265"] p:has(img),
  td[width="258"] p:has(img),
  td[width="599"] p:has(img){
    display:inline-block;
    vertical-align:top;
    width:47%;
    margin:7px 1% 12px !important;
    text-align:center !important;
  }
  td[width="265"] p:has(img) + p[align="center"],
  td[width="258"] p:has(img) + p[align="center"],
  td[width="599"] p:has(img) + p[align="center"]{
    display:block;
    width:auto;
    clear:both;
    margin:2px 6px 14px !important;
    text-align:left !important;
  }
  td[width="265"] p img,
  td[width="258"] p img,
  td[width="599"] p img,
  td[width="265"] table img,
  td[width="258"] table img,
  td[width="599"] table img{
    width:100% !important;
    max-width:190px !important;
    height:auto !important;
    margin:0 auto !important;
    display:block !important;
  }

  /* Homepage right column: keep image stack but stop black/broken panels. */
  td[width="288"]{
    background:#336666 !important;
  }
  td[width="288"] p{
    text-align:center !important;
  }
}

@media (min-width: 821px){
  .vk-site-head{
    max-width:760px;
    margin:0 auto;
  }
}