/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}



/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */


body {
  font: 13px/1.231 sans-serif;
  *font-size: small;
}

/* Hack retained to preserve specificity */
select,
input,
textarea,
button {
  font: 99% sans-serif;
}

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}


/**
 * Minimal base styles.
 */

/* Prevent mobile zooming while remain desktop zooming: github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover,
a:active {
  outline: none;
}

ul,
ol {
  margin-left: 2em;
}

ol {
  list-style-type: decimal;
}

/* Remove margins for navigation lists */
nav ul,
nav li {
  margin: 0;
  list-style: none;
  list-style-image: none;
}

small {
  font-size: 85%;
}

strong,
th {
  font-weight: bold;
}

td {
  vertical-align: top;
}

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 15px;
}

textarea {
  overflow: auto;
}

/* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.iem7 legend {
  margin-left: -7px;
}

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}

.iem7 input[type="checkbox"] {
  vertical-align: baseline;
}

/* Hand cursor on clickable input elements */
label,
input[type="button"],
input[type="submit"],
input[type="image"],
button {
  cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}

/* Colors for form validity */
input:valid,
textarea:valid {}

input:invalid,
textarea:invalid {
  border-radius: 1px;
  -moz-box-shadow: 0px 0px 5px red;
  -webkit-box-shadow: 0px 0px 5px red;
  box-shadow: 0px 0px 5px red;
}

.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
  background-color: #f0dddd;
}


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection {
  background: #FF5E99;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #FF5E99;
  color: #fff;
  text-shadow: none;
}

/* j.mp/webkit-tap-highlight-color */
a:link {
  -webkit-tap-highlight-color: #FF5E99;
}

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
  width: auto;
  overflow: visible;
}

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.iem7 img {
  -ms-interpolation-mode: bicubic;
}


/**
 * You might tweak these..
 */

body,
select,
input,
textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Set your base font here, to apply evenly */
  /* font-family: Georgia, serif;  */
}

/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

a,
a:active,
a:visited {
  color: #607890;
}

a:hover {
  color: #036;
}


/*
 * Helper classes
 */

/* prevent callout */
.nocallout {
  -webkit-touch-callout: none;
}

/* Text overflow with ellipsis */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea.contenteditable {
  -webkit-appearance: none;
}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
.gifhidden {
  position: absolute;
  left: -100%;
}

/* For image replacement */
.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
  display: none;
  visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix {
  zoom: 1;
}


/* Primary Styles for mobile
   Author: Matthew Ruten, matt@matthewruten.com
*/

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  font: normal 11px/22px Arial, sans-serif;
  text-shadow: #ffffff 1px 1px, #ffffff 2px 2px
}

#map_canvas {
  height: 100%;
  width: 100%;
}

/* Controls Box */
#controls {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  z-index: 1000;
  /* Ensure it appears above Leaflet map */
  /* rounded corners */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  /* background gradient */
  background-color: #ffffff;
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eeeeee));
  background-image: -webkit-linear-gradient(#ffffff, #eeeeee);
  background-image: linear-gradient(top, #ffffff, #eeeeee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
  /* box shadow */
  -moz-box-shadow: 2px 2px 4px #999;
  -webkit-box-shadow: 2px 2px 4px #999;
  box-shadow: 2px 2px 4px #999;
}

#update {
  display: none;
  float: left;
  color: black;
  text-decoration: none;
  margin-right: 13px;
}

#update:hover {
  color: #666;
}

#show-hide-controls {
  display: block;
  float: left;
  text-indent: -999px;
  overflow: hidden;
  width: 26px;
  height: 20px;
  background: url(../img/streetcar-post-bg.png) 0 -118px no-repeat;
  margin-left: 0px;
}

#show-hide-controls:hover {
  background-position: -27px -118px;
}

#show-hide-controls.open {
  background-position: -54px -118px;
}

#show-hide-controls.open:hover {
  background-position: -81px -118px;
}

#last-updated {
  display: none;
  clear: both;
}

#show-routes {
  display: none;
  clear: both;
  overflow: auto;
  height: 300px;
}

#show-routes input {
  float: left;
  margin: 4px 5px 0 0;
  clear: left;
}

#show-routes label {
  display: block;
  float: left;
}

/* "About" Box */
#about {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  z-index: 1000;
  /* Ensure it appears above Leaflet map */
  /* rounded corners */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  /* background gradient */
  background-color: #ffffff;
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eeeeee));
  background-image: -webkit-linear-gradient(#ffffff, #eeeeee);
  background-image: linear-gradient(top, #ffffff, #eeeeee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
  /* box shadow */
  -moz-box-shadow: 2px 2px 4px #999;
  -webkit-box-shadow: 2px 2px 4px #999;
  box-shadow: 2px 2px 4px #999;
}

#about-show {
  display: block;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

#about-show:hover {
  color: #666;
}

#about-content {
  display: block;
  width: 140px;
}

#about-content a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}

#about-content a:hover {
  color: #666;
}

/* Notification messaging */
#notification {
  z-index: 1000;
  position: absolute;
  bottom: 35px;
  left: 50px;
  right: 15px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  /*  max-width: 50%;*/

  /* rounded corners */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  /* background gradient */
  background-color: #ffffff;
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eeeeee));
  background-image: -webkit-linear-gradient(#ffffff, #eeeeee);
  background-image: linear-gradient(top, #ffffff, #eeeeee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
  /* box shadow */
  -moz-box-shadow: 2px 2px 4px #999;
  -webkit-box-shadow: 2px 2px 4px #999;
  box-shadow: 2px 2px 4px #999;

}

#notification h3 {
  color: red;
}

/* Map Styling */

/* Route label text styling */
.route-number {
  font-weight: bold;
}

.route-branch {
  font-weight: bold;
}

.route-direction {
  font-weight: normal;
}

.route-direction-arrow {
  font-weight: normal;
  font-size: 9px;
  padding: 1px;
  display: inline-block;
}

/* Adding extra space to make room for badge */
.route-spacer {
  padding-right: 1px;
}

/* Occupancy badge - dot positioned at top right of label like a notification badge */
.occupancy-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid #000000;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Somewhat Crowded: orange dot */
.occupancy-badge.somewhat-crowded {
  background-color: #FF9800;
}

/* Crowded: red dot */
.occupancy-badge.crowded {
  background-color: #F44336;
}

/* Move bottom-left controls up 15px */
.leaflet-bottom.leaflet-left {
  bottom: 25px;
}

/* Info Window Styles */
.info-window {}

.info-window h1 {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 5px;
  color: #333;
}

.info-window div {
  font-size: 10px;
  line-height: 16px;
  color: #666;
}

.info-window a {
  color: black;
  font-size: 10px;
  line-height: 16px;
}

.info-window .reveal {
  display: none;
}

/* MapLibre GL Popup Styles */
.streetcar-details-popup .maplibregl-popup-content {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  padding: 15px 18px !important;
}

.streetcar-details-popup .maplibregl-popup-tip {
  border-top-color: #fff !important;
}

.streetcar-details-popup .maplibregl-popup-close-button {
  font-size: 14px;

  /* Increase tap target */
  padding-left: 8px;
  padding-bottom: 8px;
}

.streetcar-details-popup .maplibregl-popup-close-button:hover {
  background: none;
  color: #666;
}

/*
 * Media queries for responsive design https://github.com/shichuan/mobile-html5-boilerplate/wiki/The-Style
 */

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  #about-content {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  /* Add margin to MapLibre controls to account for rounded phone edges in app mode */
  .maplibregl-ctrl-bottom-left {
    margin-bottom: 25px;
    margin-left: 5px;
  }

  .maplibregl-ctrl-bottom-right {
    margin-bottom: 25px;
    margin-right: 5px;
  }
}

/* Small Screens & Landscape: Format the menus to be wider and not as tall */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
  #show-routes {
    width: 270px;
  }

  #show-routes div.check {
    width: 125px;
    float: left;
  }
}

/* Styles for desktop and large screen ----------- */

/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {

  /* Styles */
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }

}

/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}