/*
 * This is the BHCC specific Drupal styling for the journey planner widget.
 * It is not the same as the styling provided by SDG, which lives
 * in the library (and isn't used).
 */


/* Fix the width of the components to 320px, and position the labels
 * to the left of the text fields.
 */

.jp-widget {
  position: relative;
  width: 320px;
}

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

.jp-widget .form-type-textfield label {
  position: absolute;
  left: 0;
  top: 5px;
}

.jp-widget .form-text {
  width: 200px;
}

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



/*
 * The following styles are based on those supplied by SDG,
 * but adapted for BHCC's theme.
 */

.searchsuggestions {

  /* make the div line up directly underneath the input field above */
  position: absolute;
  left: 100px;   /* see above for the corresponding 100px left margin */
  margin-top: -2em;   /* the .form-type-textfield has 1em bottom margin, plus the field description is 1em */

  /* behavioural - we always want to be above everything else */
  z-index: 999;
  overflow: auto;

  /* visual */
  background: white;
  border:solid 1px #0593fe;
  -webkit-box-shadow:0px 2px 2px 0px #bbb;
  -moz-box-shadow:0px 2px 2px 0px #bbb;
  box-shadow:0px 2px 2px 0px #bbb;
}

.searchsuggestions .inner {
  overflow:auto;
}

.searchsuggestions a {
  display: block;
  padding: 4px 8px 4px 8px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}

.searchsuggestions a span {
  display: inline;
  color: #69C14C;
  font-style: italic;
}

.searchsuggestions a:hover,
.searchsuggestions a.sel,
.searchsuggestions a.selected  {
  background-color: #efefef;
}

/* override the rule for "div.region-content a" in global.css */
div.region-content .searchsuggestions a {
  text-decoration: none;
}