body {
    background: #404040;
    color: white;
    cursor: default;
    font: 56.3%/1.3 "Monaco", "Menlo", monospace;
}

.timeline {
    position: relative;
    text-align: left;
    width: 320px;
}

a:link, a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted white;
}

a:hover, a:active, a:focus {
    border-bottom-style: solid;
}

/* header and footer */

.labels {
    height: 1.75em;
    color: white;
    font-weight: bold;
}

/* timeline layout */

.marker {
    position: absolute;
    visibility: visible;
    border-top: 1px dashed gray;
    width: 100%;
    display: inline;
    z-index: -2;
    font-weight: bold;
}

.day {
    height: 1px;
    position: relative;
}

.blog, .events {
    position: absolute;
    width: 120px;
    height: 1px;
    text-align: center;
}

.blog {
    left: 80px;
}

.events {
    left: 200px;
}

.day .blog, .day .events {
    opacity: .5;
}

.day:hover .blog, .day:hover .events {
    opacity: 1;
}

.comment {
    position: absolute;
    margin: -0.625em 0 0 135px;
    white-space: nowrap;
}

/* event type colors */

.blog.new {
    background-color: red;
}

.blog.indet {
    background-color: pink;
}

.events.wayback {
    background-color: green;
}

.events.new {
    background-color: blue;
}

.events.indet {
    background-color: lightblue;
}

.events.futago {
    background-color: yellow;
}

.indet {
    background-image: url(pinstripe.png);
}

.row-2 .indet {
    background-position: 1px 0;
}

.row-3 .indet {
    background-position: 2px 0;
}

/* date hover line */

.date {
    position: absolute;
    left: 0;
    margin: 0;
    visibility: hidden;
}

.day:hover .date {
    border-top: 3px double #c0c0c0;
    border-color: rgba(128, 128, 128, .5);
    margin-top: -1px;
    width: 100%;
    visibility: visible;
    z-index: -1;
    font-weight: bold;
}

.day:hover .date span {
    position: absolute;
    background: #808080;
    color: white;
    margin-top: -1px;
}