/* Load this file after the openlayer css file
   so that this can override its settings */

#collectorMapContent h2 {
  padding: 10px 20px;
}

#collectorMap {
  height: calc(100% - 210px);
  max-height: 750px;
  width:  auto;
  padding: 0px 20px;
}

.ol-control button {
  background-color: #dc8453c2;
}

.ol-control button:hover,
.ol-control button:focus {
  cursor: pointer;
  background-color: #AA432C;
}

#nodeMapContent {
  margin: 0 auto 15px;
  width: calc(90% - 4px);
  max-width: 1000px;
  height: 350px;
  border: 2px solid #dc8453c2;
}

#collectorMapContent.topRightMap {
  margin-top: 0;
  width: 350px;
  height: 246px;
  float: right;
  border: 2px solid #dc8453c2;
}

#collectorMapContent.expanded {
  position: fixed;
  z-index: 90;
  top: 65px;
  width: calc(100% - 20px);
  height: calc(100% - 85px);
  left: 0;
  border: 10px solid #aa422d;
  background: white;
}

#mapExpandButton, #mapCollapseButton {
  position: relative;
  z-index: 1;
}

#mapExpandButton {
  padding-bottom: 4px;
}

#mapCollapseButton {
  display: none;
}

.ol-attribution {
  font-size: 9px;
}

/*************** Medium screens ***************/

@media screen and (max-width: 1000px) {

  #collectorMapContent.topRightMap {
    float: none;
    clear: both;
    margin-top: 15px;
    width: 100%;
  }

  #collectorMapContent.topRightMap {
    margin-top: 0;
    float: none;
  }

  #collectorMapContent.expanded {
    top: 0;
    width: calc(100% - 20px);  /* account for 10px border */
    height: calc(100% - 20px);
    left: 0;
  }
}