.home-map-area {
        background: transparent url("../img/highlight.png") repeat scroll 0% 0%;
        position:relative;
        min-height:560px;
        border:1px solid #ccc;
        border-top:none;
        margin-bottom:15px;
    }
    .catchment-list li {
        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:100%;
        height:28px;
        line-height:28px;
        text-decoration: none;
        font-weight:bold;
        box-sizing:border-box;
        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 #est {
        position:absolute;
        top: -999em;
        left:-999em;
    }

    .grade-key li {
        margin:0;
        padding:0;
    }

    .ehi-grade-key {
        list-style: none;
        padding:0;
        margin:0 auto;
    }
    .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;
    }

    .grade-popup {
        display:none;
    }

    .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, .marine-grade-key li {
        display:none;
    }

@media only screen and (max-width:949px) {
    .home-map-area #map,
    .home-map-area .catchment-icons,
    .grade-key,
    .marine-grade-text {
        display:none;
    }

    .home-map-area {
        border:1px solid #ccc;
        border-top:none;
        margin-bottom:15px;
        padding:10px;
        background: transparent url("../img/highlight.png") repeat scroll 0% 0%
    }
}


@media only screen and (min-width:750px) {
    .home-map-area #map,
    .home-map-area .catchment-icons {
        display:block;
        position:absolute;
        top:50%;
        left:66%;
        width:490px;
        margin-left:-245px;
        margin-top:-245px;
        height:490px;
        z-index:120;
    }
    .catchment-list li {
        width:225px;
    }
    .grade-key {
        display:block;
    }
}

@media only screen and (min-width:950px) {

    .home-map-area #map,
    .home-map-area .catchment-icons {
        display:block;
        position:absolute;
        top:0;
        left:50%;
        width:490px;
        margin-left:-245px;
        margin-top:0;
        height:490px;
        z-index:120;
    }
    .home-map-area .catchment-icons {
        pointer-events:none;
    }

    #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;
    }
    .ehi-grades-box,
    .marine-grades-box {
        display:block;
    }
    .catchment-list {
        list-style: none;
        padding:0 0 0 10px;
        width:229px;
        margin:0;
    }

    .home-map-area #est {
        position:absolute;
        top: 32px;
        left:540px;
    }
    #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;
    }
    .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);
    }
    .ehi-grade-key {

        position:absolute;
        top:500px;
        right:320px;
    }

    .marine-grade-key  {
        margin:0 0 0 auto;

        display:block;
        list-style: none;
        padding:0;
        background: #EFEFEF;
        height:50px;
        overflow: hidden;
        width:210px;
    }
        .marine-grade-key li {
        display:block;
        float:left;
    }
}