.home-map-area {
	position:relative;
	height:560px;
    border:1px solid #ccc;
    border-top:none;
    margin-bottom:15px;
}
.catchment-list {
	list-style: none;
	padding:0 0 0 10px;
	width:229px;
	margin:0;
}

.catchment-list li {
	width:225px;
	height:28px;
	margin:0 0 12px 0;
	padding:0 2px;
	overflow: hidden;
	background: #EFEFEF;
}
.catchment-list li.highlight {
	background: #ffffff;
}
.catchment-list li.highlight a {
	color:#193C42;
}
.catchment-list li a {
	display:block;
	width:200px;
	height:28px;
	line-height:28px;
	text-decoration: none;
	font-weight:bold;
	font-size: 13px;
	position:relative;
	padding-left:25px;
	text-indent: 3px;
}
.catchment-list li img {
	width:25px;
	height:25px;
	position:absolute;
	top:1px; left:0;
	vertical-align: middle;
}
.home-map-area #map,
.home-map-area .catchment-icons {
	position:absolute;
	top: 0px;
	left:220px;
}
.home-map-area #est {
	position:absolute;
	top: 32px;
	left:540px;
}

.ehi-grade-key {
	list-style: none;
	padding:0;
	margin:0;
}
.ehi-grade-key li {
	display:block;
	float:left;
}
.ehi-grade-key li a {
	text-decoration: none;
	display:block;
	margin:10px 15px;
}

.ehi-grade-key {
	background: #EFEFEF;
	width:300px;
	text-align:center;
	height:50px;
	width:300px;
	position:absolute;
	top:500px;
	right:320px;
}

#ehi-grades-box {
	position: absolute;
	top:0;
	left:0;
}
#marine-grades-box {
	position: absolute;
	top:-1px;
	right:-1px;
	width:305px;
	height:240px;
	padding-right:20px;
	border: 1px solid #ccc;
	background: #EDF4F3;
}
#marine-grades-box h3 {
	text-align:center;
	width:200px;
	margin:0 0 0 auto;
}

.marine-grade-text {
	width:200px;
	margin:0 0 0 auto;
	font-size:90%;
	line-height:1.1;
	text-align:center;
}
.catchment-list-marine {
	margin:0 0 0 auto;
}

.marine-grade-key li {
	display:block;
	float:left;
}
.marine-grade-key li a {
	text-decoration: none;
	display:block;
	margin:10px 1px;
}
.marine-grade-key li a img {
	height:40px;
	width:40px;
}

.marine-grade-key {
	list-style: none;
	padding:0;
	background: #EFEFEF;
	height:50px;
	overflow: hidden;
	width:210px;
	margin:0 0 0 auto;
}
.grade-popup {
	position:absolute;
	top:0;
	left:0;
	background: #653C87;
	color:#fff;
	width:180px;
	padding:10px;
	height:75px;
	display:none;
	font-size:90%;
	line-height: 1.3;
	text-align:center;
}
.marine-grade-key .grade-popup {
	position: absolute;
	top:78px;
	left:100px;
}
.marine-grade-key .grade-popup strong {
	display:block;
}

.highlight .grade-popup {
	display:block;
}

/* creating the triangles for the hover tooltips for marine scores*/
.marine-grade-key .grade-popup::after {
	border-color: #653C87 transparent;
    border-style: solid;
    border-width: 17px 17px 0;
    bottom: -17px;
    content: "";
    display: block;
    left: 0px;
    position: absolute;
    width: 0;
}
/* creating the triangles for the hover tooltips for marine - repositioning for specific grades*/
.marine-grade-key .grade_info_VG .grade-popup::after {
    left: -1px;
}
.marine-grade-key .grade_info_G .grade-popup::after {
    left: 37px;
}
.marine-grade-key .grade_info_M .grade-popup::after {
    left: 78px;
}
.marine-grade-key .grade_info_P .grade-popup::after {
    left: 122px;
}
.marine-grade-key .grade_info_VP .grade-popup::after {
    left: 163px;
}

/*EHI tooltips!*/
.ehi-grade-key .grade-popup {
	position:absolute;
	top:-138px;
	left:-75px;
	width:130px;
	height:100px;
}

/*grade C is a bit bigger, so icrease its size a bit.*/
.ehi-grade-key .grade_info_C .grade-popup {
	position:absolute;
	top:-153px;
	left:-75px;
	width:130px;
	height:114px;
}

/*grade Move D and E to the other side of the map*/
.ehi-grade-key .grade_info_D .grade-popup,
.ehi-grade-key .grade_info_E .grade-popup {
	position:absolute;
	top:-138px;
	left:260px;
	width:130px;
	height:100px;
}

.ehi-grade-key .grade-popup:before {
  content:"";
  position:absolute;
  bottom:-20px; 
  left:71px; 
  border:0;
  border-right-width:30px;
  border-bottom-width:20px;
  border-style:solid;
  border-color:transparent #653C87;
  display:block;
  width:0;
}
.ehi-grade-key .grade-popup:after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:91px;
  border:0;
  border-right-width:10px;
  border-bottom-width:20px;
  border-style:solid;
  border-color:transparent #CCCCCC;
  display:block;
  width:0;
}
.ehi-grade-key .grade_info_B .grade-popup:before {
	left:130px;
}
.ehi-grade-key .grade_info_B .grade-popup:after {
	left:150px;
}

.ehi-grade-key .grade_info_C .grade-popup:before {
    border-color: rgba(0, 0, 0, 0) #653C87;
    border-style: solid;
    border-width: 0 117px 20px 0;
    bottom: -20px;
    content: "";
    display: block;
    left: 108px;
    position: absolute;
    width: 0;
}
.ehi-grade-key .grade_info_C .grade-popup:after {
    border-color: rgba(0, 0, 0, 0) #CCCCCC;
    border-style: solid;
    border-width: 0 77px 20px 0;
    bottom: -20px;
    content: "";
    display: block;
    left: 148px;
    position: absolute;
    width: 0;
}
.ehi-grade-key .grade_info_E .grade-popup:before {
  content:"";
  position:absolute;
  bottom:-20px; 
  left:10px; 
  border:0;
  border-left-width:30px;
  border-bottom-width:20px;
  border-style:solid;
  border-color:transparent #653C87;
  display:block;
  width:0;
}
.ehi-grade-key .grade_info_E .grade-popup:after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:10px;
  border:0;
  border-left-width:10px;
  border-bottom-width:20px;
  border-style:solid;
  border-color:transparent #CCCCCC;
  display:block;
  width:0;
}
.ehi-grade-key .grade_info_D .grade-popup:before {
  content:"";
  position:absolute;
  bottom:-20px; 
  left:-50px; 
  border:0;
  border-left-width:82px;
  border-bottom-width:20px;
  border-style:solid;
  border-color:transparent #653C87;
  display:block;
  width:0;
}
.ehi-grade-key .grade_info_D .grade-popup:after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:-50px;
  border:0;
  border-left-width:51px;
  border-bottom-width:20px;
  border-style:solid;
  border-color:transparent #CCCCCC;
  display:block;
  width:0;
}

.download-data-box img, .got-questions-box img {
	vertical-align: middle;
	margin-right:0.5em;
}
.download-data-box p, .got-questions-box p {
	padding:0 15px;
}
.got-questions-box p {
	text-align:right;
}

.infographic img {
	margin:0.75em auto;
	display:block;
}

#box2 .box2 {
    background: url("../img/highlight2.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}