@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|PT+Serif:400,400i,700');

#wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 50px 200px 50px 200px;
  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

#header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 15px;
  border-bottom: 1px solid #4a7da3;
  cursor: default;
}

#header > .logo {
  border: 1px solid #4a7da3;
  width: 150px;
  margin-right: 15px;
}

#header > .eob {
  font-family: "Open Sans";
  font-size: 20pt;
  color: #4a7da3;
  font-weight: 400;
  line-height: 18pt;
  text-transform: uppercase;
}

#content {
  display: flex;
  flex-direction: row;
  font-family: "Open Sans";
}

#left-container {
  flex: 0 1 70%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#right-container {
  flex: 0 1 30%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#breadcrumbs {
  text-transform: uppercase;
  margin: 0px 0px 15px 0px;
  font-size: 10pt;
}

.paragraph {
  font-family: "Open Sans";
  font-size: 11pt;
  color: #666666;
  font-weight: 400;
  line-height: 18pt;
  margin: 5px 0px 5px 0px;
}


.content-header {
  font-family: "Open Sans";
  font-size: 20pt;
  color: #4a7da3;
  font-weight: 400;
  margin-top: 15px;
  cursor: default;
}

.reference {
  width: 100%;
  /* background-color: #fafafa; */
  background-color: rgba(253, 147, 105,0.3);
  /* border: 1px solid #4a7da3; */
  border: 1px solid #F6C900;
  margin: 5px 0px 5px 0px;
  padding: 10px;
  font-size: 11pt;
}

.source {
  font-family: "Open Sans";
  font-size: 11pt;
  color: #666666;
  font-weight: 400;
  line-height: 18pt;
  margin: 5px 0px 5px 0px;
  padding-left: 40px;
  text-indent: -40px;
}

a:link, a:visited {
  color: #4a7da3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.annotation {
  display: inline;
  margin: 0px;
  padding: 5px;
  background-color: rgba(246,201,0,0.3);
  cursor: pointer;
}




#map, #svg {
  margin: 15px 0px 15px 0px;
  width: 100%;
}

#map {
  border: 1px solid #fdd869;
  height: 250px;
}

#svg {
  height: 250px;
}

.axis .domain {
  stroke: none;
  stroke-width: 0;
}

.tick line {
  stroke: #4a7da3;
}

.tick text {
  fill: #4a7da3;
}

.topic {
  font-family: "Open Sans";
  font-size: 11pt;
  color: #4a7da3;
  margin: 3px 0px 3px 10px;

}

.spacefill {
  margin: 3px 0px 3px 10px;
  width: 250px;
  height: 12pt;
  content: "";
  background-color: rgba(246,201,0,0.3);
  border-bottom: 2px solid #F6C900;
  border-right: 1px solid #F6C900;
}

.content-subheader {
  font-family: "Open Sans";
  font-size: 14pt;
  color: #4a7da3;
  margin: 6px 0px 3px 0px;
}

.resource-subheader {
  font-family: "Open Sans";
  font-size: 10pt;
  font-weight: 700;
  text-transform: uppercase;
  color: #4a7da3;
  margin: 15px 0px 3px 0px;
}

.timelineLabel {
  font-family: "Open Sans";
  font-size: 8pt;
  fill: #4a7da3;
  text-anchor: end;
}

.photo-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: 15px 0px 15px 0px;
}

.photo {
  width: 50%;
  flex: 0 1 50%;
}

.photo img {
  width: 100%;
}

.caption {
  flex: 0 1 50%;
  padding: 0px 10px 0px 10px;
  font-family: "Open Sans";
  font-size: 11pt;
  color: #666666;
  font-weight: 400;
  line-height: 18pt;
  margin: 5px 0px 5px 0px;
}

.divider {
  width: 100%;
  height: 2px;
  border-bottom: 1px dotted #4a7da3;
  margin: 25px 0px 25px 0px;
}