/* Base */

html {
  position: relative;
  min-height: 100%;
}

html.map {
  height: 100%;
  width: 100%;
}

html.map.tablet #gutter,
html.map.mobile #gutter
{
  display: none;
}

html.map.mobile .search-places-container {
  display: none !important;
}

html.map.mobile,
html.map.tablet {
  min-width: 0;
}

html.map.desktop.side-menu-open.gutter-open {
  min-width: 960px;
}

html.map.desktop.side-menu-open {
  min-width: 665px;
}

html.map.desktop.gutter-open {
  min-width: 770px;
}

html.map.desktop {
  min-width: 485px;
}

html.map body {
  margin-bottom: 0;
  padding-right: 0px !important; /* iOS 9 modal fix */
}

.modal-open {
  overflow-y: auto; /* iOS 9 modal fix */
}

body {
  margin-bottom: 85px;
}

.container {
  padding-top: 11px;
}

/* Header */

header {
  height: 51px;
}

.logo-ab img {
  padding-top: 2px;
}

header .breadcrumb {
  position: absolute;
  top: 8px;
  left: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

header .breadcrumb li {
  display: inline;
}

@media (max-width: 992px) {
  header .breadcrumb {
    max-width: 400px;
  }
}

body.lt-ie9 .header.container-fluid,
body.lt-ie9 .breadcrumb {
  display: none !important;
}

.navbar-brand img {
  height: 20px;
}

/* image map */
#region-map img[usemap] {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* AmberAlerts */

.amber-alert {
  position: absolute;
  top: 34px;
  right: 0;
  left: 0;
  height: 30px;
}

@media (min-width: 768px) {
  .amber-alert {
    top : 85px;
  }
}

.amber-alert .marquee-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 70px;
}

.amber-alert .marquee-wrapper marquee {
  height: 30px;
  white-space: nowrap;
}

.amber-alert h4 {
  margin-top: 6px;
  margin-bottom: 0px;
}

.amber-alert .btn-full-alert {
  position: absolute;
  top: 0px;
  right: 0px;
}

.lt-ie9 .amber-alert .marquee-wrapper {
  display: none;
}

/* Footer */

footer {
  background: #fdbd2c url("../images/page-bg-bottom.png") no-repeat scroll center bottom;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 85px;
  font-size: 11px;
}

footer .row {
  margin: 24px 0px;
}

footer a {
  color: #36424b;
}

footer ul li {
  border-right: 1px solid #000;
}

footer ul li.last {
  border-right: none;
}

/* Banner */
.panel-body.panel-banner-511 {
  background-color: #00afdb;
  padding: 0px;
}

@media (min-width: 992px) {
  .rather-phone .panel {
    height: 105px;
  }
}
@media (min-width: 1200px) {
  .rather-phone .panel {
    height: 127px;
  }
}

/* Announcements */

@media (min-width: 992px) {
  .announcements .panel-body {
    overflow-y: auto;
    height: 515px;
  }
}
@media (min-width: 1200px) {
  .announcements .panel-body {
    overflow-y: auto;
    height: 530px;
  }
}

/* Helping You */
.helping-you {
  margin: 20px 0px;
}

/* atom */
div.buttons-box {
  float: left;
  height: 20%;
  text-align: center;
  width: 20%;
}

div.subscription-box {
  float: left;
  width: 40%;
}

div.inner-header {
  background-color: #bbbbbb;
  font-weight: bold;
  padding: 2px;
  text-align: center;
}

select.hwy {
  width: 100%;
}

/* Faq */
.ab-blue {
  color: #00afdb;
}

/* legend */

.legend-mini-title a {
display: block;
}

.conditionDesc {
  line-height: 1;
  height: 15px;
  font-size: 11px;
  position: relative;
  margin-top: 7px;
  margin-bottom: 7px;
}

.condition-color {
  border: black solid 1px;
  height: 5px;
  width: 12px;
  margin-top: 0;
  position: absolute;
  top: 2px;
  left: 6px;
}

div.condition-text-primary {
  margin-left: 24px;
  display: inline;
  padding-left: 0px !important;
}

div.condition-text-secondary {
  display: inline;
  padding-left: 0px !important;
}

#condition-nra {
  background-color: #6B6B6B;
}

#condition-b {
  background-color: #000000;
}

#condition-c {
  background-color: #ffffff;
}

#condition-pc {
  background-color: #ffff00;
}

#condition-cl {
  background-color: #ff0000;
}

#condition-pvd {
  background-color: #6B6B6B;
  border: 0px;
  height: 5px;
  width: 21px;
}

#condition-grv1 {}
#condition-grv2 {
  margin-left: 6px;
}
#condition-grv3 {
  margin-left: 11px;
}

.gravel-road {
  background-color: #6B6B6B;
  border: 0px;
  height: 3px;
  width: 3px;
  margin-left: 1px;
  margin-top: 2px;
}

#condition-both1 {
  width: 8px;
}

#condition-both2 {
  margin-left: 11px;
}

.condition-icon {
  position: absolute;
  margin-top: -5px;
}

.legend-desc {
  margin-left: 30px;
}

/* Text Report */

.accordion-panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.accordion-panel-anchor {
  text-decoration: none !important;
}

.accordion-panel-anchor:hover {
  text-decoration: none !important;
}

.accordion-panel-anchor:active {
  text-decoration: none !important;
}

.accordion-panel-anchor:visited {
  text-decoration: none !important;
}
.accordion-panel-anchor:link {
  text-decoration: none !important;
}
.legend-condition-color {
  border: 1px solid #000;
  height: 5px;
  width: 21px;
}

.show-more-toggle {
  margin-left: 5px;
}

.hidden_col {
  display: none;
}

.cond_color {
  width: 20px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.cc_inner {
  width: 5px;
  height: 10px;
  float: left;
}

.iabr_incident {
      margin-left: 11px !important;
}

.iabr_activity {
      margin-left: 8px !important;
}

.iabr_closed, .seg_closed {
  margin-left: 8px !important;
}

.ferry_icon {
      margin-left: 9px !important;
}

a.external {
  background: url(/images/external.png) center right no-repeat;
  padding-right: 13px;
}

/* Map */

.map_container {
  position: absolute;
  top : 34px;
  right : 0;
  bottom : 0;
  left : 0;
  line-height: 1;
  font-size: 1em;
}

@media (min-width: 768px) {
  .map_container {
    top : 85px;
  }
}

.map_container #popup {
  font-size: 0.75em;
}

.map_container h2,
.map_container h3 {
  color: #36424B;
}

.alert-state .map_container {
  top: 64px;
}

@media (min-width: 768px) {
  .alert-state .map_container {
    top: 115px;
  }
}

#map {
  position: absolute;
  top : 0;
  right : 0;
  bottom : 0;
  left : 45px;
}

#map a {
  color: #337ab7;
}

.side-menu-open #map {
  left : 240px;
}

.desktop.gutter-open #map {
  right : 300px;
}

body.lt-ie9 .olMapViewport {
  position: absolute !important;
}

/* Gutter */

#gutter {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  position: absolute;
  top    : 0;
  right  : 0;
  bottom : 0;
  width : 0;
}

.gutter_title {
  position: absolute;
  right: 0;
  background: #666;
  height: 23px;
  width: 17px;
  overflow: hidden;
  border-radius: 10px 0px 0px 10px;
  z-index: 1;
  cursor: pointer;
}

.gutter_title:hover {
  background: #373737;
}

.gutter-open .gutter_title {
  width: 317px;
}

.gutter-toggle-text {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  color: #fff;
  font-size: 20px;
  padding-top: 1px;
  padding-left: 3px;
}


.gutter_title_descr {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 4px 0;
  height: 20px;
  display: none;
}

.gutter-open .gutter_title_descr,
.gutter-open .gutter_content {
  display: block;
}

.gutter_content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  bottom : 0;
  width: 300px;
}

.gutter_scroll {
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom : 0;
  width: 300px;
}

#gutter table {
  text-align: center;
  border-collapse: collapse;
}

#gutter tbody {
  top: 50px;
  bottom: 0;
}

#gutter td {
  font: 10px sans-serif;
  padding: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#gutter .cond_color {
  width: 20px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

#gutter .odd {
  background: #ffffff;
}

#gutter .even {
  background: #ededed;
}

#gutter .active {
  background: #d6d6d8;
  cursor: pointer;
}

.gutter_empty {
  text-align: center;
  color: #e74c3c;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  display: none;
}

#gutter tr.hovered {
  background: #d6d6d8;
  cursor: pointer;
}

#gutter .seg_link td,
#gutter .iabr_link  td {
  width: 20%;
}

#gutter .seg_link td.row-details,
#gutter .iabr_link  td.row-details {
  width: 40%;
}

#gutter .cam_link td.row-thumb {
  width: 30%;
}

#gutter .cam_link td.row-name {
  width: 60%;
}

/* Left Side Menu */
#side-menu {
  position: absolute;
  top    : 0;
  left  : 0;
  bottom : 0;
  width : 45px;
}

.side-menu-open #side-menu {
  width : 240px;
}

.side-menu-title {
  background: #666666;
  color: #fff;
  height: 23px;
  width: 62px;
  overflow: hidden;
  border-radius: 0px 10px 10px 0px;
  cursor: pointer;
}

.side-menu-open .side-menu-title {
  width: 257px;
}

.side-menu-title:hover {
  background: #373737;
}

.side-menu-title-icon {
  padding-top: 4px;
  padding-left: 8px;
}

.side-menu-title-descr {
  display: none;
  font-weight: bold;
  padding-top: 4px;
  padding-left: 11px;
}

.side-menu-open .side-menu-title-descr {
  display: block;
}

.side-menu-toggle {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: pointer;
  font-size: 20px;
  padding-top: 1px;
  padding-right: 4px;
}

.side-menu-scroll {
  position: absolute;
  top: 26px;
  bottom: 0;
  overflow-y: auto;
  left  : 0;
  bottom : 0;
  width : 45px;
}

.side-menu-open .side-menu-scroll {
  width: 100%;
}

.instructions {
  display: none;
  padding: 10px;
  color: #e74c3c;
}

.side-menu-open .instructions {
  display: block;
}

.legend {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  width: 30px;
}
.side-menu-open .legend {
  width: 100%;
}

.legend_entry_first,
.legend_entry {
  display: block;
  margin-bottom: 10px;
}

.legend_entry:hover{
  cursor: pointer;
}

.legend_title {
  background: #666666;
  color: #fff;
  display: block;
  font-weight: bold;
}

.legend_entry:hover .legend_title,
.legend_entry_first:hover .legend_title {
  background: #373737;
}

.legend_row, .legend_title {
  position: relative;
  clear: both;
  height: 20px;
}

.legend_row {
  padding-left: 1px;
}

.legend_checkbox input[type="checkbox"] {
  margin-top: 3px;
  margin-left: 8px;
}

.legend_seg {
  width: 25px;
  position: absolute;
  text-align: center;
  top: 7px;
  left : 2px;
}

.legend_icon {
  width: 25px;
  position: absolute;
  text-align: center;
  top: 2px;
  left : 2px;
}

.legend_disabled .legend_row .legend_icon {
  opacity: 0.3;
}

.legend_descr {
  padding-top: 3px;
  padding-left: 30px;
  display: none;
}

.legend_descr.legend_title_descr {
  padding-left: 11px;
}

.side-menu-open .legend_descr {
  display: block;
}

.road_cond_color {
  height: 5px;
  border: 1px solid black;
}

.road_cond_color_paved {
  height: 3px;
  border: 0;
  top: 8px;
  width: 27px;
}

.road_cond_color_gravel,
.road_cond_color_paved_gravel_b {
  height: 3px;
  border: 0;
  top: 8px;
  width: 3px;
}

.road_cond_color_paved_gravel_a{
  height: 3px;
  border: 0;
  top: 8px;
  width: 9px;
}

.gravel_0 { margin-left: 0px; }
.gravel_1 { margin-left: 6px; }
.gravel_2 { margin-left: 12px; }
.gravel_3 { margin-left: 18px; }
.gravel_4 { margin-left: 24px; }

.paved_gravel_0 { margin-left: 0px; }
.paved_gravel_1 { margin-left: 12px; }
.paved_gravel_2 { margin-left: 18px; }

.road_cond_color_paved_gravel {
  height: 3px;
  border: 0;
  top: 7px;
  width: 27px;
}

.road_cond_black  { background-color: #000000; }
.road_cond_red    { background-color: #ff0000; }
.road_cond_yellow { background-color: #ffff00; }
.road_cond_white  { background-color: #ffffff; }
.road_cond_grey   { background-color: #6b6b6b; }

/* Search Bar */
.desktop .search-places-container,
.tablet .search-places-container {
  display: block;
  position: absolute;
  right: 50px;
  top: 10px;
  width: 335px;
}

.search-places-cancel {
  display: none;
}

.desktop.gutter-open .search-places-container {
  right: 350px;
}

.autocomplete-mouse-catcher {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

body.lt-ie9 .search-places-route {
  display: none;
}

body.lt-ie9 .search-places-container .lt-ie9-wrap {
  display: none;
}

/* Cameras */
a.thumbnail.thumbnail-camera {
  height: 160px;
}
@media (min-width: 455px) {
  a.thumbnail.thumbnail-camera {
    height: 140px;
  }
}
@media (min-width: 768px) {
  a.thumbnail.thumbnail-camera {
    height: 140px;
  }
}
@media (min-width: 1200px) {
  a.thumbnail.thumbnail-camera {
    height: 155px;
  }
}

#camera ul li.active {
  font-weight: 700;
  text-decoration: underline;
}

#camera .thumbnail {
  height: 110px;
}

.thumbnail.thumbnail-horizontal {
  height: 100px;
}