body {
  font-family: 'Helvetica', 'Open Sans', sans-serif;
  background-color: white;
  color: black;
}

/**** LAYOUT ****/

body {
  display: grid;
  grid-template:
    "head head"       auto
    "lines map"       auto
    "timings timings" auto
    "footer footer"   auto / 1fr auto;
  gap: 1rem;
}

header {
  grid-area: head;
}

#lines {
  grid-area: lines; 
}

#map {
  grid-area: map;
}

#timings {
  grid-area: timings;
}

footer {
  grid-area: footer;
}

/**** GENERAL STYLE ****/

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.frame {
  border: 2px outset #242424;
  background: #ffffff;
}

.copy p {
	font-weight: 300;
	padding: 0 1rem;
	margin: .5rem 0;
	line-height: 1.1rem;
}

.copy p:first-of-type {
	margin-top: 0;
}

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
  margin: 0.9rem 1rem 0.4rem;
}

hr:after {
  background: #fff;
  content: '🚇';
  padding: 0;
  position: relative;
  top: -13px;
}

/**** LINES ****/

#lines table {
  margin: 0;
  display: block;
  overflow-x: auto;
  border-spacing: 0;
  border-top: 1px solid #5555;
  border-left: 1px solid #5555;
}

#lines th,
#lines td {
  border: 1px solid #5555;
}

#lines .selectedColumn {
  background: #81acf0;
}

#lines tbody {
  white-space: nowrap;
}

#lines th,
#lines td {
  padding: 5px 5px;
  border-top-width: 0;
  border-left-width: 0;
  text-align: center;
}

/**** MAP ****/

#map .frame {
  margin-right: 1rem;
}

/**** TIMINGS ****/

#timings {
  padding: 0.7rem 1rem 0.5rem;
}

#stringlineHeader {
  margin-bottom: 5px;
	font-weight: 300;
  padding: 0.7rem 1.5rem 0.5rem;
}

#stringlineHeader span {
  font-size: 1.1em;
}

/**** HEADER / FOOTER ****/

header, footer {
  background-color: #a978d9;;
}

header h1 {
  padding: 1.5rem 1.5rem;
  margin: 0;
}

footer {
	padding: .5rem 1.5rem;
	font-size: 0.8rem;
}