html {
  margin: 2px auto;
  max-width: 960px;
  background-color: gray;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: auto;
  border: 1px solid #c0c0c0;
  padding: 0.5em;
  background-color: white;
}

main {
  clear: both;
}

/* Header Styles */
header {
  padding-bottem: 2em;
}

header img {
  float: left;
  margin-left: 10px;
}

header h2 {
  margin: 0;
  padding: 0;
  font-size:180%;
  color: navy;
  text-shadow: 2px 2px 2px grey;
  margin-left: 50px;
  margin-bottom: 5px;
}

footer {
  padding-top: .5em;
  border-top: 2px solid navy;
  margin-top: 0;
}

table {
  border: 4px solid 808080;
  border-collapse: collapse;
  table-layout: auto;
}

th, td {
  text-align: center;
  border-right: 1px solid #909090;
  padding: 2px;
}

ul {
  list-style-type: circle;
  padding: 0 0 0 1.5em;
  margin: .25em 0 .5em 0;
}

ul ul {
  list-style-type: circle;
  padding: 0 0 0 1em;
  margin: 0 0 0 0;
}

ol {
  padding: 0 0 0 1.5em;
  margin: .25em 0 .5em .5em;
}

.adsense {
  margin: 4px auto;
  padding:8px;
  text-align:center;
  border-style:solid none;
  border-width:1px;
  border-color:#d0d0d0;
}

.adsenseBanner {min-height:160px;}

@media (min-width: 720px) {
  .adsenseBanner {min-height:90px;}
}

.twobreak-0 {display:block;}
.twobreak-1 {display:none;}

@media (min-width: 720px) {
  .twobreak-0 {display:none;}
  .twobreak-1 {display:block;}
}

.break3-0 {display:block;}
.break3-1 {display:none;}
.break3-2 {display:none;}

@media screen and (min-width: 730px) {
  .break3-0 {display:none;}
  .break3-1 {display:block;}
  .break3-2 {display:none;}
}

@media screen and (min-width: 990px) {
  .break3-0 {display:none;}
  .break3-1 {display:none;}
  .break3-2 {display:block;}
}

.viewport-0 {display:inline;}
.viewport-1 {display:none;}

@media (min-width: 640px) {
  .viewport-0 {display:none;}
  .viewport-1 {display:inline;}
}

.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }

.red { color: #000000; background-color: #ffc0c0; }
.redfg { color: red; }
.yellow { color: #000000;  background-color: #ffffb0; }

th.left, td.left { text-align: left; }

thead, tfoot {
  background-color: #a0b0ff;
  border: 2px solid #808080;
}

tbody {
  border: 2px solid #808080;
}

tbody tr:nth-child(even) { background-color: #c8d8ff; }

a {
  color: #0000c0;
  text-decoration: none;
}

p {
  margin: 0;
  padding-bottom: .5em;
}

dd {
  padding-bottom: .5em;
}

h1 {
  margin: 0;
  padding: .5em 0 0.5em;
  font-size: 120%;
}

h2 {
  margin: 0;
  padding: 1em 0 .5em;
  font-size: 100%;
}

h3 {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

h4 {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

.leftblue { text-align: left; background-color: LightBlue; }

.leftaln { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.small  { font-size: small; }

.trainlinks p {
  margin-left: 1em;
  margin-top: .25em;
}

.trainlinks a {
  color: blue;
  text-decoration: none;
}

.routes td {
  white-space: nowrap;
  font-size: small;
}


/* Navigation */

.nav {
  clear: both;
  border-bottom: 2px solid grey;
}

.nav img {
  float: left;
  margin-right: 0px;
  margin-left: 0;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav li {
  float: left;
  font-size: 90%;
}

.nav li a, .dropbtn {
  display: inline-block;
  color: navy;
  text-align: center;
  padding: 5px 6px;
  text-decoration: none;
}

/* .nav li a:hover, .dropdown:hover .dropbtn {
.nav li .dropbtn {
  background-color: #111;
}
*/

.nav li.dropdown {
  display: inline-block;
}

.nav .dropdown-content {
  display: none;
  border: 1px solid grey;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: -2px 8px 12px 0px grey;
  z-index: 1;
  right: 0;
  left: auto;
}

.nav .dropdown-content a {
  color: navy;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav .dropdown-content a:hover {background-color: #f1f1f1;}

/*.nav .dropdown:hover .dropdown-content { */
/*
.nav .dropdown:active .dropdown-content {
  display: block;
}
*/
.nav li:last-child {
  border-right: none;
}

.nav .active {
  font-weight: 900;
  border-bottom: 2px solid navy;
}

.station_index p {
  padding-bottom: 0;
  padding-top: .5em;
}

.station_index ul {
  list-style-type: circle;
  margin: 0;
  padding: 0 0 0 2em;
}

.mapTTclass {
  padding: 1px;
  font-size: 9px;
  border: 1px solid #3366cc
}

.mapTTclassRed {
  padding: 1px;
  font-size: 9px;
  border: 1px solid #3366cc;
  background-color: #ff9090;
}

.mapTTclassYellow {
  padding: 1px;
  font-size: 9px;
  border: 1px solid #3366cc;
  background-color: #ffff90;
}

.leaflet-tooltip-left.mapTTclass::before {
  border-left-color: #3366cc;
}
.leaflet-tooltip-right.mapTTclass::before {
  border-right-color: #3366cc;
}
.leaflet-tooltip-bottom.mapTTclass::before {
  border-bottom-color: #3366cc;
}
.leaflet-tooltip-top.mapTTclass::before {
  border-top-color: #3366cc;
}

.leaflet-tooltip-left.mapTTclassRed::before {
  border-left-color: #3366cc;
}
.leaflet-tooltip-right.mapTTclassRed::before {
  border-right-color: #3366cc;
}
.leaflet-tooltip-bottom.mapTTclassRed::before {
  border-bottom-color: #3366cc;
}
.leaflet-tooltip-top.mapTTclassRed::before {
  border-top-color: #3366cc;
}

.leaflet-tooltip-left.mapTTclassYellow::before {
  border-left-color: #3366cc;
}
.leaflet-tooltip-right.mapTTclassYellow::before {
  border-right-color: #3366cc;
}
.leaflet-tooltip-bottom.mapTTclassYellow::before {
  border-bottom-color: #3366cc;
}
.leaflet-tooltip-top.mapTTclassYellow::before {
  border-top-color: #3366cc;
}