body { font-size: 10pt; font-family: "Helvetica Neue", sans-serif; margin: 0 8px 0 8px }
a { color: black; text-decoration: none }
table { width: 100% }

div.header { width: 100%; top: 0; background-color: #FFF; 
    font-weight: normal; }
div.header p.station { font-size: 150%; font-weight: bold; 
    padding-top: 1em; margin-top: 0; margin-bottom: 0 }
div.header p.date { margin: .25em 0 0 0 }
div.header p.station-list { font-size: 75%; margin: .25in; padding: .125in; float: right; border: 1px solid black }
thead th { position: sticky; top: 0; background-color: white;
    border-width: 0 0 2px 0; border-style: none none solid none; }
div.sort p { font-size: 125%; margin-bottom: 1.0 em; padding: 0, 0, 1.0em 0; }
div.sort a { font-size: 100% }
div.sort a.selected { font-weight: bold }
div.sort span { display: inline-block; margin-left: 1.5em }

div.station-list p.nearby { font-size: 125%; margin-bottom: .25em }
div.station-list p.station a { font-size: 125% }

/*tr.departures { margin-top: 150px }*/
tr.departures p.destination { font-size: 150%; margin: .25in 0 0 0 }

tr.row1 td { padding: 1em .25em 0 .25em }
tr.row1 td.destination { width: 40% }
tr.row1 td.minutes { width: 30% }
tr.row2 td { padding: 0 .25em 0 .25em }
td.minutes { text-align: left }
td.length { text-align: left }
td.abbr { text-align: left }
td.time { text-align: left }
tr.row1 { font-size: 150% }
tr.row2 { font-size: 125%  }
tr.cancelled { text-decoration: line-through }
tr.hidden { display: none }

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

@media only screen and (max-device-width: 568px)
{
body { font-family: "AvenirNextCondensed-Medium", sans-serif; font-size: 36pt }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
body { font-size: 125% }
}

@media only screen and (min-device-width: 1025px)
{
body { width: 500px }
}