@font-face {
    font-family: "RacersDelight";
    src: url("RacersDelight.woff2") format("woff2");
}

body {
    font-family: Roboto, Arial, sans-serif;
    font-size: 16pt;
    margin: 0;
    background-color: #222;
    color: #ddd;
}
h1 {
    font-family: RacersDelight, sans-serif;
    font-size: 160px;
    text-align: center;
    color: #f2b600;
    text-shadow:
	8px 8px 0 black;
    letter-spacing: 3px;
    margin: 0px 0 30px 0;;
}
div.banner {
    margin-top: 40px;
    background-image: url("banner-80.jpg");
    background-position: center center;
    background-repeat: repeat-x;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
h2 {
    text-shadow:
	4px 4px 0 black;
    font-family: RacersDelight, sans-serif;
    font-size: 60px;
    text-align: center;
    color: white;
}
h2.c0 { text-shadow: 6px 6px 0 hsl(0,80%,50%); }
h2.c1 { text-shadow: 6px 6px 0 hsl(25,100%,50%); }
h2.c2 { text-shadow: 6px 6px 0 hsl(50,100%,50%); }
h2.c3 { text-shadow: 6px 6px 0 hsl(120,70%,50%); }
h2.c4 { text-shadow: 6px 6px 0 hsl(190,100%,50%); }
h2.c5 { text-shadow: 6px 6px 0 #0047f7; }
h2.c6 { text-shadow: 6px 6px 0 hsl(280,100%,50%); }

div.text { margin: 0 2em; max-width: 1200px; }
dt { font-weight: bold; margin-bottom: 2ex; color: white; }
dd { margin: 2em 3em; }

div.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
div.map {
    width: 1024px; height: 768px;
    background-image: url("mkw-map.jpg");
    background-size: 1024px;
    display: inline-block;
    vertical-align: top;
    margin: 1em 1em;
}
div.list {
    width: 800px;
    display: inline-block;
    vertical-align: top;
    margin: 1em 1em;
}
div.break { flex-basis: 100%; height: 0; }


table.textlisting { margin: 2em 0 2em 4em; }
table.listing {
    margin-left: 3em;
    border-collapse: collapse;
}
th { padding-bottom: 1em; }
.jr { text-align: right; }
.jl { text-align: left; }
.race { font-weight: bold; padding-right: 3em; text-align: center; }
.ch { padding-left: 2em; padding-right: 2em; font-weight: bold; }

p.credit { color: #999; font-size: 80%; text-align: center; margin: 3em 0; }
p.credit a { color: hsl(240,100%,70%); text-decoration: none; }

svg text.b { font: bold 18px sans-serif; fill: black; text-anchor: middle; dominant-baseline: middle; }
svg text.w { font: bold 18px sans-serif; fill: #000; text-anchor: middle; dominant-baseline: middle; }
svg line.b { stroke: black; stroke-width: 18; }
svg line.w { stroke: #000; stroke-width: 18; }
svg line.c0 { stroke: hsl(0,80%,50%); stroke-width: 14; }
svg line.c1 { stroke: hsl(25,100%,50%); stroke-width: 14; }
svg line.c2 { stroke: hsl(50,100%,50%); stroke-width: 14; }
svg line.c3 { stroke: hsl(120,70%,50%); stroke-width: 14; }
svg line.c4 { stroke: hsl(190,100%,50%); stroke-width: 14; }
svg line.c5 { stroke: #0047f7; stroke-width: 14; }
svg line.c6 { stroke: hsl(280,100%,50%); stroke-width: 14; }

svg ellipse.c0 { fill: hsl(0,80%,50%); }
svg ellipse.c1 { fill: hsl(25,100%,50%); }
svg ellipse.c2 { fill: hsl(50,100%,50%); }
svg ellipse.c3 { fill: hsl(120,70%,50%); }
svg ellipse.c4 { fill: hsl(190,100%,50%); }
svg ellipse.c5 { fill: #0047f7; }
svg ellipse.c6 { fill: hsl(280,100%,50%); }
svg ellipse.b { stroke-width: 2; stroke: black; }
svg ellipse.w { stroke-width: 2; stroke: #000; }

svg path.w { fill: #000; }
svg path.b { fill: black; }

h2.c0 { text-shadow: 4px 4px 0 hsl(0,80%,50%); }
svg ellipse.c1 { fill: hsl(25,100%,50%); }
svg ellipse.c2 { fill: hsl(50,100%,50%); }
svg ellipse.c3 { fill: hsl(120,70%,50%); }
svg ellipse.c4 { fill: hsl(190,100%,50%); }
svg ellipse.c5 { fill: #0047f7; }
svg ellipse.c6 { fill: hsl(280,100%,50%); }