/*
 * #wk-2007: Brett's work page drawn as a classic 2007 SySpace profile. Opt-in, tab-only.
 * Colors and sizes follow css/syspace.css and css/profile.css (header #003399, nav #6698cb, blue
 * boxes #6699cc / #b1d0f0 / #d5e8fb, orange heads #ffcc99 / #ff6600, Verdana 8pt, 800 px page).
 * Written for this page, so it does not need :where(); every rule sits under #wk-2007.
 */
#wk-2007{display:block;min-height:100vh;padding:0 0 40px;background:#e4e4e4;color:#000;color-scheme:light;
  font:8pt/1.35 Verdana,Arial,Helvetica,sans-serif;text-align:left}
#wk-2007[hidden]{display:none}
#wk-2007 *{box-sizing:border-box}
#wk-2007 .wk7-notice{max-width:800px;margin:0 auto;padding:10px 6px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;font:8pt Verdana,Arial,sans-serif;color:#333}
#wk-2007 .wk7-back{padding:5px 12px;font:bold 8pt Verdana,Arial,sans-serif;color:#003399;background:#d5e8fb;border:1px solid #6699cc;cursor:pointer;min-height:28px}
#wk-2007 .wk7-back:hover{background:#ffcc99;color:#cc0000}
#wk-2007 .wk7-page{max-width:800px;margin:0 auto;background:#fff;min-height:520px;box-shadow:0 0 0 1px #bbb}
#wk-2007 a{color:#003399;font-weight:bold;text-decoration:none}
#wk-2007 a:hover{color:#cc0000;text-decoration:underline}
#wk-2007 a:focus-visible,#wk-2007 button:focus-visible{outline:2px solid #ff6600;outline-offset:2px}
#wk-2007 .wk7-header{width:100%;background:#003399;color:#fff;border-collapse:collapse}
#wk-2007 .wk7-logo{padding:14px 0 12px 22px;vertical-align:middle}
#wk-2007 .wk7-logo img{display:inline-block;vertical-align:middle;margin-right:10px;border-radius:6px}
#wk-2007 .wk7-word{vertical-align:middle;font:900 30px "Arial Black",Arial,Helvetica,sans-serif;letter-spacing:-1px;color:#fff}
#wk-2007 .wk7-word span{font:bold 15px Arial,Helvetica,sans-serif;letter-spacing:0}
#wk-2007 .wk7-hr{padding:6px 12px;text-align:right;vertical-align:top;font-size:8pt}
#wk-2007 .wk7-hr a{color:#fff}
#wk-2007 .wk7-hr a:hover{color:#ffcc99}
#wk-2007 .wk7-navbar{height:20px;background:#6698cb}
#wk-2007 .wk7-cols{width:100%;border-collapse:separate;border-spacing:0}
#wk-2007 .wk7-cols td{vertical-align:top}
#wk-2007 .wk7-left{width:300px;padding:14px 8px 14px 10px}
#wk-2007 .wk7-right{padding:14px 10px 14px 8px}
#wk-2007 .wk7-name{margin:0 0 4px;font:bold 12pt/1.2 Verdana,Arial,sans-serif;color:#000}
#wk-2007 .wk7-photo{width:130px;padding-right:8px}
#wk-2007 .wk7-init{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border:1px solid #6699cc;
  background:linear-gradient(135deg,#d5e8fb,#b1d0f0);color:#336699;font:900 44px "Arial Black",Arial,sans-serif;letter-spacing:-2px}
#wk-2007 .wk7-basic{width:100%;padding-top:2px;line-height:1.35}
#wk-2007 .wk7-headline{display:block;margin-bottom:1.1em;font-size:8pt}
#wk-2007 .wk7-small{font-size:8pt}
#wk-2007 .wk7-box{width:100%;margin:12px 0 0;border:1px solid #6699cc;border-collapse:collapse}
#wk-2007 .wk7-bh{padding:2px 6px;background:#6699cc;color:#fff;font-weight:bold;font-size:8pt}
#wk-2007 .wk7-cc{width:50%;padding:5px 8px;height:20px;vertical-align:middle}
#wk-2007 .wk7-url td{padding:4px 6px}
#wk-2007 .wk7-obox{width:100%;margin:0 0 12px;border-collapse:collapse}
#wk-2007 .wk7-oh{padding:2px 6px;background:#ffcc99;color:#ff6600;font-weight:bold;font-size:9pt;border-bottom:1px solid #000}
#wk-2007 .wk7-ob{padding:8px 6px;font-size:8pt;line-height:1.45}
#wk-2007 .wk7-flush{padding:0}
#wk-2007 .wk7-inner{width:100%;border-collapse:separate;border-spacing:0 2px}
#wk-2007 .wk7-lab{padding:3px 6px;background:#b1d0f0;color:#336699;font-weight:bold;font-size:8pt}
#wk-2007 .wk7-val{padding:3px 6px;background:#d5e8fb;color:#000}
#wk-2007 .wk7-friends{width:100%;border-collapse:collapse}
#wk-2007 .wk7-friend{padding:2px;text-align:center;vertical-align:top}
#wk-2007 .wk7-tile{display:inline-block;width:64px;height:64px;margin-bottom:3px;border:1px solid #333;color:#05070a;font:bold 13px/62px Verdana,Arial,sans-serif;letter-spacing:.04em;text-align:center}
#wk-2007 .wk7-fname{font-size:7pt;line-height:1.2;display:inline-block;max-width:92px}
#wk-2007 .wk7-foot{margin:6px 0 0;padding:14px 10px 18px;text-align:center;font-size:8pt}

/* the repaint: a wipe with decorative cursors, 1.2 s. js/work/syspace-window.js */
#wk-2007.wk7-wipe .wk7-page{animation:wk7-wipe 1.2s steps(24,end) both}
@keyframes wk7-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.wk7-cursors{position:fixed;inset:0;z-index:99990;pointer-events:none;overflow:hidden}
.wk7-cursors svg{position:absolute;left:0;top:0;width:18px;height:24px;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
html[data-still] #wk-2007.wk7-wipe .wk7-page{animation:none}

@media (max-width:700px){
  #wk-2007 .wk7-cols,#wk-2007 .wk7-cols>tbody,#wk-2007 .wk7-cols>tbody>tr,#wk-2007 .wk7-cols>tbody>tr>td{display:block;width:auto}
  #wk-2007 .wk7-left{width:auto;padding-bottom:0}
  #wk-2007 .wk7-logo{padding-left:12px}
  #wk-2007 .wk7-friends td{padding:3px 1px}
  #wk-2007 .wk7-tile{width:50px;height:50px;font-size:10px;line-height:48px}
  #wk-2007 .wk7-hr{display:none}
}
html.wk-is-2007,html.wk-is-2007 body{background:#e4e4e4!important}
html.wk-is-2007 #portfolio{display:none!important}
#wk-2007 .wk7-inner .wk7-lab{width:30%}
#wk-2007 .wk7-friend{width:20%}