@font-face {
  font-family: 'Bariol';
  src: url('assets/fonts/bariol_regular.eot');
  src: url('assets/fonts/bariol_regular.eot?#iefix') format('embedded-opentype'), url('assets/fonts/bariol_regular.woff') format('woff'), url('assets/fonts/bariol_regular.ttf') format('truetype'), url('assets/fonts/bariol_regular.svg#Bariol') format('svg');
  font-weight: 400;
}
@font-face {
  font-family: 'Bariol';
  src: url('assets/fonts/bariol_bold.eot');
  src: url('assets/fonts/bariol_bold.eot?#iefix') format('embedded-opentype'), url('assets/fonts/bariol_bold.woff') format('woff'), url('assets/fonts/bariol_bold.ttf') format('truetype'), url('assets/fonts/bariol_bold.svg#Bariol') format('svg');
  font-weight: 700;
}

html, body, ol, ul {
  margin: 0;
  padding: 0;
}

#map-canvas {
    width: 100%;
    height: 250px;
    margin-top: -250px;
    transition: margin-top 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

ol, ul {
  list-style: none;
}

li, div.title {
    display: block;
    margin: 0;
    font-family: 'Bariol', sans-serif;
    padding: 1em 0.8em;
    border-bottom: 1px solid #DDDDDD;
}

div.title {
  background-color: #22AA66;
  color: #FFFFFF;
  border-bottom: none;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  transition: background-color 0.5s;
  overflow: hidden;
}

div.title.warn {
  background-color: #CC2222;
}

div.title.busy {
  background-color: #5588FF;
}

div#status i {
    color: #FFFFFF;
    opacity: 0.5;
    text-shadow: none;
    font-style: normal;
    float: right;
    margin-left: 0.8em;
}

div#instructions i {
  font-size: 0.6em;
  background-color: #22AA66;
  color: #FFFFFF;
  padding: 0.2em 0.6em;
  vertical-align: middle;
  border-radius: 2em;
  white-space: nowrap;
  font-style: normal;
}

.adp-maneuver {background-size:19px 630px; width:16px; height:16px; float: left; margin-right: 8px;}
.adp-maneuver {background-image: url('https://maps.gstatic.com/mapfiles/api-3/images/maneuvers_hdpi.png')}
.adp-maneuver.adp-turn-sharp-left {background-position:0 0}
.adp-maneuver.adp-uturn-right {background-position:0 -35px}
.adp-maneuver.adp-turn-slight-right {background-position:0 -51px}
.adp-maneuver.adp-merge {background-position:0 -143px}
.adp-maneuver.adp-roundabout-left {background-position:0 -197px}
.adp-maneuver.adp-roundabout-right {background-position:0 -232px}
.adp-maneuver.adp-uturn-left {background-position:0 -305px}
.adp-maneuver.adp-turn-slight-left {background-position:0 -378px}
.adp-maneuver.adp-turn-left {background-position:0 -413px}
.adp-maneuver.adp-ramp-right {background-position:0 -429px}
.adp-maneuver.adp-turn-right {background-position:0 -483px}
.adp-maneuver.adp-fork-right {background-position:0 -499px}
.adp-maneuver.adp-straight {background-position:0 -534px}
.adp-maneuver.adp-fork-left {background-position:0 -550px}
.adp-maneuver.adp-ferry-train {background-position:0 -566px}
.adp-maneuver.adp-turn-sharp-right {background-position:0 -582px}
.adp-maneuver.adp-ramp-left {background-position:0 -598px}
.adp-maneuver.adp-ferry {background-position:0 -614px}
.adp-maneuver.adp-keep-left {/*background-position:0 9000px*/}
.adp-maneuver.adp-keep-right {/*background-position:0 9000px*/}