/* ============================================================
   CTRLCORE / GAKHED  -  the look of one machine.
   640x480 logical. integer-ish upscale. nothing is smoothed.
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#000;}
body{
  font-family:"Times New Roman",Times,serif;
  -webkit-font-smoothing:none;
  text-rendering:optimizeSpeed;
}

/* ============================================================
   THE POINTER
   The Windows XP set, drawn at double size so it is made of the
   same blocks as everything else on this screen. Black outline,
   white body, one soft pixel of shadow down and to the right.
   default is forced everywhere: this machine never showed you a
   hand for a link and it is not going to start now -- except on
   the links, where GAK would have been delighted by it.
   ============================================================ */
:root{
  --cur-arrow:url("../../assets/cursors/arrow.png") 0 0;
  --cur-hand:url("../../assets/cursors/hand.png") 5 0;
  --cur-ibeam:url("../../assets/cursors/ibeam.png") 2 8;
  --cur-wait:url("../../assets/cursors/wait.png") 4 8;
  --cur-start:url("../../assets/cursors/appstart.png") 0 0;
}
html,body,*{cursor:var(--cur-arrow),default;}
a,a *,.tb,.btn9,.dico,.dico *,#titlebtns b,[data-go],[data-act],[data-ext],
#counter,#hdrfrog,#bigfrog,.menu .mitem{cursor:var(--cur-hand),pointer;}
input[type=text],input:not([readonly]),textarea{cursor:var(--cur-ibeam),text;}
body.busy,body.busy *{cursor:var(--cur-wait),wait;}
body.loading,body.loading *{cursor:var(--cur-start),progress;}

#desk{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  image-rendering:pixelated;
}

/* ---------- THE SCREEN ---------- */
#screen{
  position:relative;
  width:640px; height:480px;
  transform:scale(var(--k,1));
  transform-origin:center center;
  /* the whole screen is scaled up by a whole number and it must not be
     interpolated on the way. a soft pixel is a modern pixel. */
  image-rendering:pixelated;
  background:#000;
  overflow:hidden;
  box-shadow:0 0 0 2px #1a1a1a, 0 0 0 5px #2b2b2b, 0 0 24px 10px rgba(0,0,0,.9);
}
/* The channel-crush belongs to the machine drawing the PAGE. The world
   does its own colour reduction in a shader, against the same palette,
   at 320x240 -- so running the SVG filter over the top of it as well
   quantised an already-quantised picture and slammed every dark green
   and every blue to pure black. The sky went out. It applies to the
   layers that are actually a Windows desktop, and to nothing else. */
#pagelayer,#paint,#crackfx{filter:url(#ctrlcore) saturate(1.06) contrast(1.03);}
#screen.shake{animation:shk .18s steps(2,end) infinite;}
@keyframes shk{
  0%{transform:scale(var(--k,1)) translate(0,0)}
  25%{transform:scale(var(--k,1)) translate(1px,-1px)}
  50%{transform:scale(var(--k,1)) translate(-1px,1px)}
  75%{transform:scale(var(--k,1)) translate(1px,1px)}
}

/* the other place. it is behind the page the whole time. */
/* The other place. It sits underneath the browser the whole time, at
   nothing, until either the crack opens a hole in the page for it to
   show through or you fall into it. Nearest-neighbour on the way up,
   because there is a 320x240 buffer inside it and it must not be
   smoothed on the way to the glass. */
#gl{
  position:absolute; inset:0;
  width:640px; height:480px;
  image-rendering:pixelated;
  display:block; background:#000;
  opacity:0;
  z-index:0;
}

/* ---------- BROWSER ---------- */
#win{
  position:absolute; inset:auto;
  left:9px; top:11px; width:622px; height:452px; z-index:12;
  display:flex; flex-direction:column;
  background:#c0c0c0;
  font-family:Arial,Helvetica,sans-serif; font-size:11px;
  border-top:1px solid #dfdfdf; border-left:1px solid #dfdfdf;
  border-right:1px solid #000; border-bottom:1px solid #000;
}
#titlebar{
  height:16px; flex:0 0 16px; cursor:default; user-select:none;
  background:linear-gradient(90deg,#000082,#1084d0);
  color:#fff; font-weight:bold; font-size:11px;
  display:flex; align-items:center; padding:0 2px; user-select:none;
}
#titletext{flex:1;overflow:hidden;white-space:nowrap;padding-left:2px;}
#titlebtns b{
  display:inline-block;width:14px;height:12px;line-height:11px;text-align:center;
  background:#c0c0c0;color:#000;font-size:9px;margin-left:1px;
  border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #000;border-bottom:1px solid #000;
}
#menubar{
  flex:0 0 15px; padding:2px 4px; background:#c0c0c0; color:#000;
  border-bottom:1px solid #9a9a9a; user-select:none; letter-spacing:.3px;
}
#menubar u{text-decoration:underline;}
#toolbar{
  flex:0 0 20px; padding:2px 3px; background:#c0c0c0;
  border-bottom:1px solid #9a9a9a; white-space:nowrap;
}
.tb{
  display:inline-block; padding:1px 5px; margin-right:2px; font-size:10px; background:#c0c0c0;
  border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #000;border-bottom:1px solid #000;
}
.tb:active{border-top:1px solid #000;border-left:1px solid #000;border-right:1px solid #fff;border-bottom:1px solid #fff;}
.tb.dead{color:#808080;text-shadow:1px 1px 0 #fff;}
#locbar{
  flex:0 0 20px; padding:2px 4px; background:#c0c0c0; display:flex; align-items:center;
  border-bottom:1px solid #9a9a9a; font-size:10px;
}
#locurl{
  flex:1; font-family:"Courier New",monospace; font-size:10px; height:15px;
  background:#fff; color:#000; padding:0 3px; outline:none;
  border-top:1px solid #808080;border-left:1px solid #808080;border-right:1px solid #fff;border-bottom:1px solid #fff;
}
#statusbar{
  flex:0 0 16px; padding:1px 4px; background:#c0c0c0; font-size:10px;
  display:flex; align-items:center; gap:4px;
  border-top:1px solid #fff;
}
#statustext{flex:1;font-family:"Courier New",monospace;overflow:hidden;white-space:nowrap;}
#statusright{font-size:9px;filter:grayscale(1);}

/* ---------- THE PAGE ---------- */
#viewport{
  flex:1 1 auto; overflow-y:scroll; overflow-x:hidden;
  background:#0a1a0e;
  border-top:1px solid #808080;
}
#viewport::-webkit-scrollbar{width:15px;background:#c0c0c0;}
#viewport::-webkit-scrollbar-thumb{background:#c0c0c0;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #000;border-bottom:1px solid #000;}
#viewport::-webkit-scrollbar-button{height:15px;background:#c0c0c0;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #000;border-bottom:1px solid #000;}
#page{
  min-height:100%;
  background:#0a1a0e url("../../assets/tile.png") repeat;
  color:#d8f0d8;
  font-family:"Times New Roman",Times,serif; font-size:13px;
  padding:6px 4px 20px 4px;
}
#pagebody{max-width:100%;}

/* period type */
h1,h2,h3{font-family:"Times New Roman",Times,serif;margin:.2em 0;font-weight:bold;}
h1.big{font-size:26px;color:#ffff99;letter-spacing:-.5px;text-shadow:2px 2px 0 #000;margin:2px 0 2px 0;}
h2{font-size:19px;color:#ffffaa;text-shadow:1px 1px 0 #000;}
h3{font-size:15px;color:#cceecc;}
font[size="1"]{font-size:10px;} font[size="2"]{font-size:12px;} font[size="3"]{font-size:14px;}
font[size="4"]{font-size:17px;} font[size="5"]{font-size:22px;} font[size="6"]{font-size:28px;}
p{margin:.5em 0;}
.mono{font-family:"Courier New",Courier,monospace;}
.tny{font-size:9px;}

/* hyperlinks, exactly as the machine drew them */
a{color:#0000ee;text-decoration:underline;cursor:pointer;}
a:visited,a.v{color:#551a8b;}
a:active{color:#ff0000;}
#page a{color:#7d9dff;}
#page a.v,#page a:visited{color:#c090e0;}
#page a:hover{color:#ffffff;background:#003300;}

hr.crude{border:0;height:2px;background:#000;border-top:1px solid #6a8a6a;margin:6px auto;}
hr.crude2{border:0;height:4px;background:repeating-linear-gradient(90deg,#3a5a3a 0 4px,#0a1a0e 4px 8px);margin:8px auto;}

table.lay{border-collapse:collapse;margin:0 auto;}
table.lay td{
  border:1px solid #4a6a4a; vertical-align:top;
  background:rgba(4,14,6,.55); font-size:12px; color:#cfe8cf;
}
table.lay td.navcell{background:#0d2411;}
table.data{border-collapse:collapse;margin:4px auto;font-size:11px;}
table.data td,table.data th{border:1px solid #557755;padding:2px 5px;}
table.data th{background:#16341a;color:#ffffaa;}

.box{border:2px ridge #5a7a5a;background:rgba(3,12,5,.6);padding:5px 7px;margin:6px 0;}
.inset{border-top:1px solid #000;border-left:1px solid #000;border-right:1px solid #6a8a6a;border-bottom:1px solid #6a8a6a;background:#04120a;padding:4px 6px;}

/* every image is a real pixel image. nothing is resampled softly. */
img,.px{image-rendering:pixelated;}
img{border:0;}
img.bd{border:2px solid #88aa88;}
img.bdl{border:2px outset #7799ff;}

.counter{
  display:inline-block; font-family:"Courier New",monospace; font-size:16px; font-weight:bold;
  letter-spacing:3px; color:#33ff33; background:#000; padding:1px 5px; margin:2px;
  border-top:2px solid #000;border-left:2px solid #000;border-right:2px solid #777;border-bottom:2px solid #777;
}

.blink{animation:bl 1.06s steps(1,end) infinite;}
@keyframes bl{0%,49%{opacity:1}50%,100%{opacity:0}}
.blink2{animation:bl 2.3s steps(1,end) infinite;}

marquee-ish{display:block;overflow:hidden;white-space:nowrap;width:100%;}
marquee-ish>font{display:inline-block;padding-left:100%;animation:mq 13s linear infinite;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-200%)}}

/* primitive buttons, image-ish */
.btn9{
  display:inline-block;padding:2px 8px;font-family:Arial,sans-serif;font-size:11px;
  background:#c0c0c0;color:#000;cursor:pointer;text-decoration:none;
  border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;
}
.btn9:active{border-top:2px solid #404040;border-left:2px solid #404040;border-right:2px solid #fff;border-bottom:2px solid #fff;}
input.f9,textarea.f9{
  font-family:"Courier New",monospace;font-size:11px;background:#fff;color:#000;padding:1px 3px;
  border-top:2px solid #808080;border-left:2px solid #808080;border-right:2px solid #fff;border-bottom:2px solid #fff;
}

.gbentry{border-bottom:1px dotted #557755;padding:3px 2px;font-size:11px;}
.gbname{color:#ffff88;font-weight:bold;}
.gbdate{color:#668866;font-size:9px;}

.sep{display:block;margin:5px auto;height:6px;width:70%;
  background:repeating-linear-gradient(90deg,#6a8a6a 0 2px,transparent 2px 4px);}

.gal{display:inline-block;margin:3px;text-align:center;vertical-align:top;font-size:9px;color:#aaccaa;}

/* ---------- things going wrong ---------- */
.dim{filter:brightness(.45) saturate(.4);}
.dim2{filter:brightness(.2);}
.inv{filter:invert(1) hue-rotate(90deg);}
.stretchy{transform:scaleY(1.9) translateY(-2px);display:inline-block;}
.stretchx{letter-spacing:6px;word-spacing:-3px;}
.corrupt{filter:url(#tear);}
.jit{animation:jit .09s steps(2,end) infinite;}
@keyframes jit{0%{transform:translate(0,0)}50%{transform:translate(1px,0)}}
.frozen{animation:none !important;}
.missingimg{
  display:inline-block;background:#c0c0c0;border:1px solid #000;color:#000;
  font-family:Arial,sans-serif;font-size:9px;text-align:center;overflow:hidden;
  vertical-align:middle;
}
.wobble{animation:wob 5s ease-in-out infinite;display:inline-block;}
@keyframes wob{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}

/* ---------- the person's writing / the crack ---------- */
#paint,#crackfx,#hud,#esp{
  position:absolute; inset:0; width:640px; height:480px;
  image-rendering:pixelated; pointer-events:none; display:block;
}
/* the HUD is under the person's writing, because they can write over it */
#hud{z-index:35;display:none;}
#screen.inworld #hud{display:block;}
/* The debug overlay sits ON TOP of the HUD and UNDER the person, because
   it is a layer of the game that leaked, and she is not part of the game. */
#esp{z-index:36;display:none;}
#screen.inworld #esp{display:block;}
#paint{z-index:40;}
#crackfx{z-index:45;}

#flash{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:0;background:#fff;}

/* CRT. cheap, because the machine is cheap. */
#scan{
  position:absolute;inset:0;z-index:70;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,rgba(0,0,0,0) 1px 2px);
  mix-blend-mode:multiply;
}
#glow{
  position:absolute;inset:0;z-index:71;pointer-events:none;
  background:radial-gradient(ellipse 82% 78% at 50% 48%,rgba(255,255,255,.05) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);
}
#screen.rgbshift #win{text-shadow:.6px 0 rgba(255,0,0,.35),-.6px 0 rgba(0,180,255,.3);}

/* ---------- in-world overlay ---------- */
#win.gone{display:none;}
#screen.inworld,#screen.inworld *{cursor:none !important;}
#lockhint{
  position:absolute;z-index:50;left:0;right:0;bottom:26px;text-align:center;
  font-family:"Courier New",monospace;font-size:11px;color:#9dff9d;
  text-shadow:1px 1px 0 #000;pointer-events:none;
}
#stam{
  position:absolute;z-index:50;left:8px;bottom:8px;width:74px;height:6px;
  background:#000;border:1px solid #3a5a3a;display:none;
}
#stam i{display:block;height:100%;width:100%;background:#2ecc40;}
#stam.low i{background:#ffcc00;}
#stam.out i{background:#cc2200;}
#invbar{
  position:absolute;z-index:50;right:6px;bottom:6px;
  font-family:"Courier New",monospace;font-size:10px;color:#cfe8cf;text-align:right;
  text-shadow:1px 1px 0 #000;pointer-events:none;
}
#subs{
  position:absolute;z-index:50;left:0;right:0;bottom:40px;text-align:center;
  font-family:"Courier New",monospace;font-size:12px;color:#e8ffe8;
  text-shadow:1px 1px 0 #000;pointer-events:none;
}
#recticle{
  position:absolute;z-index:50;left:50%;top:50%;width:3px;height:3px;margin:-1px 0 0 -1px;
  background:#bfe8bf;pointer-events:none;display:none;opacity:.55;
}

/* ---------- the gate ---------- */
#gate{
  position:fixed;inset:0;z-index:9000;background:#000;display:none;overflow:hidden;
}
#gate canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;}

/* ---------- dialogs the machine would show ---------- */
.w95dlg{
  position:absolute;z-index:80;background:#c0c0c0;font-family:Arial,sans-serif;font-size:11px;color:#000;
  border-top:2px solid #dfdfdf;border-left:2px solid #dfdfdf;border-right:2px solid #000;border-bottom:2px solid #000;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.w95dlg .bar{background:linear-gradient(90deg,#000082,#1084d0);color:#fff;font-weight:bold;padding:1px 3px;font-size:11px;display:flex;}
.w95dlg .bar span{flex:1;}
.w95dlg .bdy{padding:9px 10px;display:flex;gap:8px;align-items:flex-start;}
.w95dlg .bdy .ic{font-size:22px;line-height:1;}
.w95dlg .ft{padding:0 10px 9px;text-align:center;}

/* ---------- menus (they open instantly, like they used to) ---------- */
#menubar .mi{padding:0 4px;cursor:default;}
#menubar .mi.on{background:#000082;color:#fff;}
.menu{
  position:absolute; z-index:80; background:#c0c0c0; color:#000;
  border-top:1px solid #fff; border-left:1px solid #fff;
  border-right:1px solid #000; border-bottom:1px solid #000;
  box-shadow:1px 1px 0 #808080; padding:1px; min-width:132px;
  font-family:Tahoma,"MS Sans Serif",Geneva,sans-serif; font-size:11px;
}
.menu .mitem{padding:2px 18px 2px 16px; white-space:nowrap; cursor:default; position:relative;}
.menu .mitem:hover{background:#000082;color:#fff;}
.menu .mitem.dis{color:#808080;text-shadow:1px 1px 0 #fff;}
.menu .mitem.dis:hover{background:transparent;color:#808080;}
.menu .mitem .k{position:absolute;right:5px;color:#404040;}
.menu .mitem:hover .k{color:#c0c0c0;}
.menu .msep{height:0;border-top:1px solid #808080;border-bottom:1px solid #fff;margin:2px 1px;}
.menu .mitem.chk::before{content:"\2713";position:absolute;left:4px;}

/* ---------- view source / find ---------- */
.srcwin{
  position:absolute; z-index:82; left:16px; top:20px; width:436px; height:300px;
  background:#c0c0c0; border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #000; border-bottom:2px solid #000; display:flex; flex-direction:column;
}
.srcwin .bar{background:linear-gradient(90deg,#000082,#1084d0);color:#fff;font-weight:bold;
  padding:1px 3px;font-size:11px;display:flex;font-family:Tahoma,"MS Sans Serif",sans-serif;}
.srcwin .bar span{flex:1;}
.srcwin .bar b{width:14px;height:12px;background:#c0c0c0;color:#000;border-top:1px solid #fff;
  border-left:1px solid #fff;border-right:1px solid #000;border-bottom:1px solid #000;
  font-size:8px;line-height:11px;text-align:center;margin-left:1px;cursor:default;}
.srcwin pre{
  flex:1; margin:0; overflow:auto; background:#fff; color:#000;
  font-family:"Courier New",monospace; font-size:10px; line-height:12px; padding:3px 4px;
  border:1px solid #000; white-space:pre; -webkit-font-smoothing:none;
}
.srcwin pre::-webkit-scrollbar{width:15px;background:#c0c0c0;}
.srcwin pre::-webkit-scrollbar-thumb{background:#c0c0c0;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #000;border-bottom:1px solid #000;}
.srcwin pre i{background:#ffff00;font-style:normal;}
mark.hilite{background:#00ffff;color:#000;}

/* the forest link is not in the menu. gak took it out. */
#lnk-forest{display:none;}
#lnk-forest.shown{display:inline;}

/* ============================================================
   THE DESKTOP
   The browser is a window sitting on a desktop. You can pick it
   up by the title bar and move it. Behind it there is only the
   desktop. (For now.)
   ============================================================ */
#pagelayer{
  position:absolute; inset:0; z-index:10;
  image-rendering:pixelated;
}
#win.dragging{cursor:default;}
#win.maxed{left:0 !important;top:0 !important;width:640px !important;height:480px !important;}

#deskicons{
  position:absolute; left:4px; top:4px; width:76px; z-index:11;
  font-family:Tahoma,"MS Sans Serif",Geneva,sans-serif; font-size:10px;
}
.dico{
  width:72px; padding:3px 0 2px; margin-bottom:6px; text-align:center;
  color:#fff; cursor:default; user-select:none;
}
.dico .ig{display:block;font-size:22px;line-height:24px;filter:grayscale(.35) contrast(1.2);}
.dico .il{display:inline-block;padding:0 2px;text-shadow:1px 1px 0 #000;line-height:11px;}
.dico.sel .il{background:#000082;}
.dico.sel .ig{filter:grayscale(.35) contrast(1.2) brightness(.7);}
.dico[data-ico="forest"]{display:none;}
.dico[data-ico="forest"].shown{display:block;}
.dico[data-ico="forest"] .ig{filter:none;}

/* ---------- the throbber. it is the only thing that ever hurried. ---------- */
#throb{
  width:24px; height:24px; margin-left:auto; margin-right:1px; align-self:center;
  image-rendering:pixelated; display:block; cursor:default;
  border-top:1px solid #808080; border-left:1px solid #808080;
  border-right:1px solid #fff; border-bottom:1px solid #fff;
}
#toolbar{align-items:center;}

/* ---------- the little segmented progress bar ---------- */
#prog{
  width:88px; height:11px; flex:0 0 88px; margin:0 4px;
  border-top:1px solid #808080; border-left:1px solid #808080;
  border-right:1px solid #fff; border-bottom:1px solid #fff;
  background:#c0c0c0; overflow:hidden; display:block;
}
#prog i{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg,#000082 0 5px,#c0c0c0 5px 7px);
  transition:width .08s steps(2,end);
}
#statusbar{align-items:center;}

/* file listing rows */
.frow{padding:1px 3px;white-space:nowrap;overflow:hidden;}

/* ---------- the visitor counter ---------- */
/* seven little reels. they roll upward, because that is what a counter does. */
.counter .cd{
  display:inline-block; width:11px; height:16px; text-align:center;
  background:#000; color:#33ff33; border:1px solid #227722;
  margin:0 -1px; overflow:hidden; vertical-align:top; position:relative;
}
.counter .cd .reel{
  display:block;
  transform:translateY(0);
  transition:transform .42s cubic-bezier(.34,1.5,.62,1);
  will-change:transform;
}
.counter .cd.snap .reel{transition:none;}
.counter .cd .reel b{
  display:block; height:16px; line-height:16px; font-weight:bold;
  font-family:"Courier New",monospace; font-size:16px;
}
/* the two that stopped being numbers */
.counter .cd.bad{color:#ff5555;border-color:#772222;}
.counter.flick{animation:cflick .07s steps(2,end) 6;}
@keyframes cflick{0%{filter:none}50%{filter:invert(1)}}

/* the dialog that says it cannot reach four pictures */
.w95dlg .dlgtext{margin:0 0 6px;}
.w95dlg .dlgfiles{
  font-family:"Courier New",monospace; font-size:10px; line-height:13px;
  background:#fff; border-top:1px solid #808080; border-left:1px solid #808080;
  border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;
  padding:3px 5px; margin:0 0 7px; color:#000; user-select:text;
}

/* a letter that bled through from underneath */
.bleed{color:#c01010 !important;text-shadow:0 0 1px rgba(200,0,0,.6);}

/* ---------------------------------------------------------------
   THE START BUTTON, and some air
   ---------------------------------------------------------------
   The page was piled up: every block sat on the one above it with
   nothing between them, which is authentic and also unreadable. So
   the blocks are still blocks -- centre-aligned, tables, horizontal
   rules -- they just have a gap now, and one of them is obviously
   the thing you press.

   The button is a Windows button on a web page, which is exactly
   what people put on pages in 1998, because it was the only button
   the browser knew how to draw.
   --------------------------------------------------------------- */
.band{margin:0 auto 11px;max-width:566px;}
.band:last-child{margin-bottom:0;}
.hdr{padding:1px 0 2px;}
.hdr .sub{display:block;margin-top:1px;}

#startwrap{margin:8px auto 4px;line-height:1;}
.startbtn{
  display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:bold;
  letter-spacing:.3px;padding:4px 18px 5px;color:#000;background:#c0c0c0;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  border-top:2px solid #fff;border-left:2px solid #fff;
  border-right:2px solid #404040;border-bottom:2px solid #404040;
}
.startbtn:active{
  padding:5px 17px 4px 19px;
  border-top:2px solid #404040;border-left:2px solid #404040;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
}
#page .startbtn,#page .startbtn:hover{color:#000;background:#c0c0c0;}
/* once the glass has gone it is not a grey button any more */
.startbtn.hot{background:#d8d8d8;box-shadow:0 0 0 1px #ff2a2a;}
#startnote{display:block;margin-top:3px;}

.foot{padding-top:2px;}
.foot .badges{margin:3px 0 5px;}
.foot .badges img,.foot .badges span.missingimg{margin:0 2px;}