/* Dalek Attack Regenerated -- the release site.
   Deliberately 1997: tiled stars, Times, tables, blue links, a marquee.
   No frameworks, no scripts, no web fonts. Every page works from a folder
   on a disk, or on any web host that serves files. */

body {
    background: #000010 url("img/stars.gif");
    color: #d8d8d8;
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    margin: 12px;
}

a:link    { color: #6fa8ff; }
a:visited { color: #c080ff; }
a:hover   { color: #ffcc00; }

.page {
    max-width: 780px;
    margin: 0 auto;
}

/* the banner: chunky, glowing, a little too much -- as it should be */
h1.banner {
    font-family: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;
    font-size: 42px;
    letter-spacing: 2px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #cc0000, 4px 4px 0 #550000;
    margin: 8px 0 0 0;
    text-align: center;
}
.regen {
    display: block;
    font-family: "Courier New", Courier, monospace;
    font-size: 20px;
    letter-spacing: 12px;
    color: #c4dcff;
    text-shadow: 0 0 6px #3a7bff;
    text-align: center;
    margin: 2px 0 10px 0;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffcc00;
    border-bottom: 2px solid #003b6f;
    padding-bottom: 2px;
    margin-top: 28px;
}

.box {
    background: #0b0b24;
    border: 3px ridge #6f8fbf;
    padding: 6px 12px;
}

table.nav {
    width: 100%;
    border: 2px outset #8080a0;
    background: #003b6f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
table.nav td { text-align: center; padding: 4px; }
table.nav a:link, table.nav a:visited { color: #ffffff; }
table.nav a:hover { color: #ffcc00; }

table.grid { border-collapse: separate; border-spacing: 6px; margin: 0 auto; }
table.grid td {
    background: #000;
    border: 2px inset #6f6f8f;
    padding: 4px;
    text-align: center;
    font-size: 14px;
    vertical-align: top;
}

img.pix {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    max-width: 100%;
    height: auto;
}

.new {
    color: #ff3030;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }

marquee, .ticker {
    background: #000;
    color: #00ff66;
    font-family: "Courier New", Courier, monospace;
    border: 1px solid #00aa44;
    padding: 2px 0;
}

code, pre {
    font-family: "Courier New", Courier, monospace;
    color: #b0ffb0;
    background: #001400;
}
pre { padding: 6px; border: 1px solid #004400; overflow-x: auto; }

.small { font-size: 13px; color: #a0a0b0; }
.centre { text-align: center; }
.buttons img { margin: 2px; vertical-align: middle; }

hr.bar {
    border: 0;
    height: 6px;
    background: url("img/bar.gif") repeat-x;
    margin: 18px 0;
}

@media (max-width: 600px) {
    h1.banner { font-size: 28px; }
    .regen { letter-spacing: 6px; font-size: 16px; }
    table.layout td { display: block; }
    table.grid { border-spacing: 3px; }
    table.grid td { font-size: 13px; padding: 3px; }
    table.nav td { font-size: 14px; padding: 3px 2px; }
}