/* Traditional layout and image maps for Safari on the iPad 3. */
.location-button { padding: 3px 0; min-height: 36px; border: 0; background: none; text-align: left; font-size: inherit; line-height: 1.4; -webkit-appearance: none; }
.location-button:hover { color: #d9f4c8; }
.location-traffic { display: block; font-size: 9px; color: #c4edb1; }
.traffic-overlay { z-index: 40; padding: 12px; overflow: hidden; }
.traffic-details { position: relative; width: 100%; max-width: 1440px; height: 100%; margin: 0 auto; overflow: hidden; }
.traffic-header { position: absolute; top: 0; left: 0; right: 0; height: 125px; padding: 16px 22px 10px; border-bottom: 1px solid #314248; }
.traffic-header h2 { font-size: 25px; font-weight: 400; margin: 6px 40px 5px 0; }
.traffic-header p { font-size: 11px; color: #9dafb2; margin-right: 35px; }
.traffic-header .close-button { width: 44px; height: 44px; top: 6px; right: 8px; }
.traffic-connection { margin-top: 8px; font-size: 11px; color: #9dafb2; }
.traffic-connection button { float: right; min-height: 32px; margin-top: -5px; }
.traffic-body { position: absolute; top: 125px; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px; }
.traffic-body:after { content: ""; display: table; clear: both; }
.traffic-buses { float: left; width: 47%; padding-right: 22px; border-right: 1px solid #314248; }
.traffic-roads { float: right; width: 53%; padding-left: 22px; }
.traffic-body h3 { font-size: 16px; font-weight: 500; margin-bottom: 10px; color: #d1e3d0; }
.traffic-source { color: #8fa8ac; font-size: 10px; margin-left: 6px; white-space: nowrap; }
.traffic-switches { margin-bottom: 7px; }
.traffic-switches button { min-height: 36px; margin: 0 5px 5px 0; }
.traffic-switches button[aria-pressed="true"] { color: #d9f4c8; border-color: #8aaf82; background: #233932; }
.traffic-note { font-size: 11px; line-height: 1.5; color: #91a7ab; margin: 6px 0 10px; }
.scheduled-key { white-space: nowrap; }
.traffic-link { display: inline-block; font-size: 11px; padding: 10px 0; }
.traffic-stop { margin-top: 17px; }
.traffic-stop h4 { font-size: 13px; font-weight: 500; margin: 0 0 3px; color: #cbdad6; }
.traffic-age { color: #8fa8ac; font-size: 10px; line-height: 1.5; }
.traffic-age.stale, .traffic-connection .stale { color: #edbc7b; }
.traffic-route { margin-top: 10px; padding-top: 9px; border-top: 1px solid #314248; }
.traffic-route h5 { font-size: 12px; font-weight: 400; margin: 0 0 7px; color: #cbdad6; }
.traffic-route-number { display: inline-block; min-width: 29px; padding: 3px 5px; margin-right: 7px; text-align: center; border-radius: 4px; background: #c4edb1; color: #19272c; font-size: 14px; font-weight: 600; }
.departure-list { list-style: none; padding: 0; margin: 0; }
.departure-list li { display: inline-block; margin: 0 5px 5px 0; padding: 5px 7px; border-radius: 5px; background: #22343a; font-size: 13px; line-height: 1.35; }
.departure-list time { font-variant-numeric: tabular-nums; }
.departure-countdown { display: block; color: #adc4be; font-size: 10px; }
.departure-scheduled { font-size: 9px; color: #91a7ab; margin-left: 3px; }
.traffic-stop.stale .departure-list li { background: #34362c; color: #d1c5ac; }
.traffic-empty { color: #91a7ab; font-size: 12px; line-height: 1.5; padding: 7px 0; }
.traffic-travel-times { display: table; width: 100%; table-layout: fixed; border-spacing: 6px 0; margin: 0 -6px 8px; }
.travel-card { display: table-cell; vertical-align: top; border: 1px solid #465655; border-radius: 8px; padding: 12px; }
.travel-card h4 { font-size: 13px; font-weight: 400; color: #cbdad6; margin: 0 0 3px; }
.travel-destination { font-size: 10px; color: #91a7ab; }
.travel-duration { font-size: 27px; font-weight: 300; line-height: 1.2; margin: 7px 0; font-variant-numeric: tabular-nums; }
.travel-delay, .travel-condition { font-size: 11px; line-height: 1.5; color: #adc4be; }
.travel-card.normal { border-color: #678263; }
.travel-card.warning { border-color: #a58f51; }
.travel-card.warning .travel-duration, .travel-card.warning .travel-condition { color: #edbc7b; }
.travel-card.critical { border-color: #b66c63; }
.travel-card.critical .travel-duration, .travel-card.critical .travel-condition { color: #f19182; }
.travel-card.stale { border-style: dashed; border-color: #887653; }
.travel-card.stale .travel-duration, .travel-card.stale .travel-condition { color: #edbc7b; }
.traffic-body .traffic-map-heading { margin-top: 18px; }
.traffic-map-frame { position: relative; min-height: 120px; background: #22343a; border-radius: 7px; overflow: hidden; }
#traffic-map-image { display: block; width: 100%; height: auto; }
#traffic-map-placeholder { padding: 35px 15px; text-align: center; }
#traffic-map-age { margin-top: 6px; }
.night #traffic-map-image { opacity: .72; }
@media (min-width: 1250px) { .traffic-buses { width: 43%; } .traffic-roads { width: 57%; } }
@media (max-width: 700px) {
  .traffic-overlay { padding: 6px; }
  .traffic-header { padding-left: 14px; padding-right: 14px; height: 139px; }
  .traffic-header h2 { font-size: 22px; }
  .traffic-body { top: 139px; padding: 15px 14px; }
  .traffic-buses, .traffic-roads { float: none; width: 100%; padding: 0; border: 0; }
  .traffic-roads { margin-top: 24px; border-top: 1px solid #314248; padding-top: 20px; }
  .traffic-connection { max-width: 100%; }
  #traffic-status { display: inline-block; max-width: 75%; }
  .travel-duration { font-size: 24px; }
}