body { 
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
}

.page-container {
	background-color: white;
	height: 700px;
	width: 100%;
}

.header {
	display: flex;
}

.main {
	display: flex;
}

.header-container {
	flex: 50%;
  	height: 25px;
}

.area-title-container {
	height: 50px;
	width: 100%;
	font-size: 20px;
	line-height: 50px;
	padding-left: 0px;

}

.ov-container {
	width: 100%;
	height: 100%;
}

.ov-image {
	max-width:100%;
	max-height:500px;

	display: block;
  	margin-left: 0px;
  	margin-right: auto;
}

.ov-blurb {
	text-align: left;
	padding-left: 10px;
	height: 150px;
	width: 100%;
	font-size: 15px;
	color: #3C3C3C;
}

.ts-container {
	height: 275px;
	width: 100%;
}

.ts-plot {
	height: 100%;
	width: 100%;
}

.ts-plot-content {
	fill: none;
    stroke-width: 1px;
}

.ts-plot-content.summary.between {
	stroke: #cfcfcf;
}

.ts-plot-content.summary.between:hover {
	stroke: #303030;
}

.ts-plot-content.summary.within {
	stroke: #cfcfcf;
}

.ts-plot-content.summary.within:hover {
	stroke: #303030;
}

.ts-plot-content.within {
    stroke: #00A4DE;
}

.ts-plot-content.between {
    stroke: #4E78CF;
}

.ac-plot-container {
	width: 100%;
  	height: 600px;
}

.ac-plot {
	width: 100%;
  	height: 100%;
}

.link {
  fill: none;
  stroke: #A9A9A9;
}

.link:hover {
  stroke: #767676;
}

.node {
	fill: #000;
	stroke-opacity: .2;
}

.description-text {
	line-height: 20px;
	width: 100%;
  	flex-wrap: wrap;
  	text-align: left;
	font-size: 15px;
	color: #3C3C3C;
}

.author-container {
	text-align: left;
	padding-top: 30px;
	line-height: 20px;
	height: 100px;
	width: 100%;
	font-size: 13px;
	color: grey;
}

.image-container {
	height: 100%;
	width: 50%;
	padding: 20px;
	margin: auto;
}

.credit-image {
	max-height: 100%;
	max-width: 100%;
	
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

.credits-container {
	width: 100%;
  	height: 60px;
	display: flex;
	align-self: center;
}

.main-container {
  flex: 50%;
  height: 700px;
  display: inline;
}

.area-dropdown {
	width: 100%;
  	height: 100%;
}

.main-map {
	width: 100%;
  	height: 100%;
}

.button-spacer {
	width: 10px;
    height: auto;
    display: inline-block;
}

.panel-button {
    background-color: white; 
    border: none;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    height: 25px;
    font-size: 12px;
}

#active-button {
	background-color: #cfcfcf;
}

.panel-button:hover {
	background-color: #cfcfcf;
}

.summary-button {
	background-color: white; 
    border: none;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    height: 25px;
    font-size: 12px;
    border-radius: 30px;
}

.summary-button:hover {
	background-color: #cfcfcf;
}

.country.England {
	fill: #6FADDB;
}

.country.Scotland {
	fill: #7499D2;
}

.country.Wales {
	fill: #8083C3;
}

.country.Northern.Ireland {
	fill: #8E6CAD;
}

.country.Ireland {
	fill: lightgrey;
}

.country {
	stroke: black;
	stroke-width: 0.1px;
}

.country:hover {
	stroke-width: 0.5px;
}

.area-selected{
	stroke: black;
	stroke-width: 0.1px;
	fill: #005B5B;
}

.area-active{
	stroke: black;
	stroke-width: 0.1px;
	fill: #0BA531;
}

.figure-caption {
	font-size: 12px;
	flex-wrap: wrap;
	color: #6F6F6F;
}