/*
 * Widget styling:
 *
 * The labels are positioned to the left of the text fields.
 * See journeyon-jp-widget.css for corresponding styles.
 */

.bhcc-trains-widget {
  position: relative;
}

.bhcc-trains-widget .form-type-select {
  position: relative;
  padding-left: 100px;    /* this 100px is also used by the search suggestions, see below */
}

.bhcc-trains-widget .form-type-select label {
  position: absolute;
  left: 0;
  top: 5px;
}

.bhcc-trains-widget .form-select {
  width: 200px;
}

.bhcc-trains-widget .form-submit {
  margin-left: 100px;
}



/*
 * Station map icon:
 *
 * Please note that the size of the icon is defined in code as as 200x20.
 * It is necessary to have a hardcoded size in code as this enables leaflet
 * to center the icon on the precise location. The large icon is transparent
 * so we don't see it's full size.
 */

.bhcc-trains-display-icon {
  text-align: center;
}

/* railway symbol */
.bhcc-trains-display-icon span {
  background-color: white;
  padding: 2px 6px 2px 32px;
  border-radius: 4px;
  border: 1px solid black;
  background-image: url(../images/bhcc-trains-icon.svg);
  background-size: 28px 16px;
  background-repeat: no-repeat;
  background-position: 2px center;
}

/* override the rules for "div.region-content a" */
div.region-content .bhcc-trains-display-icon a,
div.region-content .bhcc-trains-display-icon a:hover,
div.region-content .bhcc-trains-display-icon a:visited {
  text-decoration: none;
  color: black;
}



/*
 * Layout for landing page
 * Show the map on the right if there is room.
 */

.bhcc-trains-landing-page {
  padding-left: 2.5%;    /* this is the same value applied to 'div#region-content h1#page-title' in global.css */
  padding-right: 2.5%;
}

@media only screen and (min-width: 751px) {

  .bhcc-trains-landing-page-list {
    float: left;
    width: 25%;
  }

  .bhcc-trains-landing-page-map {
    float: right;
    width: 75%;
  }

}



/*
 * Layout for station page.
 * Show the map on the right if there is room.
 */

.bhcc-trains-layout {
  padding-left: 2.5%;   /* this is the same value applied to 'div#region-content h1#page-title' in global.css */
  padding-right: 2.5%;
}

@media only screen and (min-width: 751px) {

  .bhcc-trains-layout-first {
    float: left;
    width: 50%;
  }

  .bhcc-trains-layout-second {
    float: right;
    width: 50%;
  }

  .bhcc-trains-station-page-map {
    margin-top: 39px;   /* this compensates for the <h2> that contains the heading within .bhcc-trains-board */
    margin-left: 20px;
  }

}



/* Override things from global.css
 *
 * these rules override those of the following form:
 *   div.region-content table ...
 *
 * by adding ".bhcc-trains-board", otherwise
 * matching the rules in global.css. If those styles change,
 * it is likely that these will need to be changed too:
 */

div.region-content .bhcc-trains-board table {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

div.region-content .bhcc-trains-board table tr th,
div.region-content .bhcc-trains-board table tr td {
  padding-left: inherit;
  padding-right: inherit;
  border: inherit;
  background: inherit;
}

div.region-content .bhcc-trains-board table tr th {
  padding-top: inherit;
  padding-bottom: inherit;
  color: inherit;
}

div.region-content .bhcc-trains-board table tr td {
  padding-top: inherit;
  padding-bottom: inherit;
}



/* Board & station page form styling */

.bhcc-trains-station-form .form-radios {
  margin-bottom: 2em;
}

.responsive-layout-normal .bhcc-trains-station-form .form-item-direction,
.responsive-layout-wide .bhcc-trains-station-form .form-item-direction {
  display: inline;
  margin-right: 2em;
}

.bhcc-trains-station-page .links {
  margin-bottom: 2em;
}

.bhcc-trains-board h2 {
  margin-bottom: 10px;
  color: #A80063;
  font-size: 1.500em;
  font-family: 'Whitney SSm A', 'Whitney SSm B';
  font-weight:600;
  font-style:normal;
  letter-spacing:-0.024em; /* -0.5px */
  margin-bottom: 1em;
}

.bhcc-trains-board table {
  border-collapse: separate;
  border-spacing: 0 1px;
  table-layout: fixed;
  background: black;
  color: white;
}

.bhcc-trains-board .bhcc-trains-row-time,
.bhcc-trains-board .bhcc-trains-row-expected {
  text-align: right;
}

.bhcc-trains-board thead tr {
  background-color: none;
  padding: 8px 4px;
  color: yellow;
}

.bhcc-trains-board tbody tr {
  background-color: #333;
  border-bottom: none;
  padding: 4px 4px;
}


.bhcc-trains-board tbody tr td {
  font-weight: bold;
}

.bhcc-trains-board tbody td.bhcc-trains-row-station {
  color: white;
}

.bhcc-trains-board tbody td.bhcc-trains-row-time {
  color: white;
}

.bhcc-trains-board tbody td.bhcc-trains-row-expected {
  color: white;
}


/* Leaflet control styling */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  text-decoration: none !important;
}