html, body {width:100%; height:100%; margin:0px; padding:0px;}
body {position:relative;}
* {font-family:'Inconsolata', monospace; box-sizing:border-box; font-size:24px;}

.map {position:absolute; width:calc(100vw - 840px); height:100%; top:0px; left:0px; z-index:30;}
.map-label {
    background:none; border:0px; box-shadow:none; margin-top:6px;
    color:white; text-shadow:0px 0px 3px rgba(0,0,0,0.6); font-size:24px; font-weight:bold;
    white-space:normal; max-width:120px; text-align:center; line-height:28px;
}
.sidebar {
    position:absolute; width:840px; height:100%; top:0px; right:0px; overflow-y:scroll;
    background:white; z-index:40; overflow:hidden;
}

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

/* Timeline styles*/
.trip.black {border-color:#333; background:#333;}
.trip.red {border-color:#e76f51; background:#e76f51;}
.trip.orange {border-color:#f4a261; background:#f4a261;}
.trip.yellow {border-color:#e9c46a; background:#e9c46a;}
.trip.green {border-color:#2a9d8f; background:#2a9d8f;}
.trip.blue {border-color:#264653; background:#264653;}
.trip.purple {border-color:#9d4edd; background:#9d4edd;}
.trip.pink {border-color:#ff758f; background:#ff758f;}
.trip.published, .legend i.published {border-style:solid; border-width:6px; background:none;}
.trip.detected, .legend i.detected {border:none;}

.legend {background:#f1f1f1; padding:22px 30px;}
.legend h2, .legend div, .legend i, .legend span {display:inline-block; vertical-align:middle; line-height:25px;}
.legend h2 {margin:0px; font-size:28px;}
.legend div {margin-left:30px;}
.legend i {height:37.5px; width:60px; background:#333; border-color:#333;}
.legend span {margin-left:15px;}

.outbound {left:90px}
.inbound {left:457.5px;}
.outbound.detected {left:270px;}
.inbound.detected {left:637.5px;}

.headings {position:relative; margin:10px; height:45px;}
.heading {position:absolute; bottom:0px; font-size:28px; font-weight:bold;}

#timeline {position:relative; margin:15px; height:calc(90px * 24); border-bottom:1px solid #ccc;}
.border {position:absolute; width:1px; margin-left:-18px; border-left:1.5px solid #ccc; height:100%; z-index:2;}
.column {position:absolute; width:187.5px; margin-left:-15px; background:#f5f5f5; height:100%; z-index:1;}
.hour {position:absolute; width:100%; border-top:1.5px solid #ccc; padding-top:8px; color:#333; z-index:5;}
.fifteen {position:absolute; width:100%; border-top:1.5px solid #e5e5e5; z-index:3;}
.now {position:absolute; width:100%; border-top:1.5px solid red; z-index:10;}
.trip {position:absolute; height:67.5px; width:45px; z-index:7;}

/* Boat styles */
#boat-list {position:absolute; bottom:0px; left:0px; padding:30px; z-index:50; max-height:100%;}
.boat-item {margin-top:25px; padding:12px 15px; color:white; box-shadow:0px 0px 6px rgba(0,0,0,0.2);}
.boat-item span {display:block; line-height:1.2;}
.boat-item .title {font-weight:bold;}
.boat-item .time {font-style:italic;}
.boat-item.black {background:#333;}
.boat-item.red {background:#e76f51;}
.boat-item.orange {background:#f4a261;}
.boat-item.yellow {background:#e9c46a;}
.boat-item.green {background:#2a9d8f;}
.boat-item.blue {background:#264653;}
.boat-item.purple {background:#9d4edd;}
.boat-item.pink {background:#ff758f;}

svg .primary {fill:#eee;}
.boat.inactive {opacity:0.4;}
.boat-black {fill:#333333;}
.boat-red {fill: #e76f51}
.boat-orange {fill: #f4a261;}
.boat-yellow {fill: #e9c46a;}
.boat-green {fill: #2a9d8f;}
.boat-blue {fill: #264653;}
.boat-purple {fill: #9d4edd;}
.boat-pink {background:#ff758f;}