Highcharts custom css

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto; "></div>
<div id="cont">
    <div id="legend">
<a href="#" id="a1">CPM</a>

<a href="#" id="a2">IPMS</a>

<a href="#" id="a3">SPEND</a>
 <a id="at">BY <span>TIME</span></a>

    </div>
</div>

CSS

.highcharts-tooltip>span p {
	margin: 0;
}
.highcharts-tooltip>span span{
    display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}
#cont {
    position:absolute;
    top: 30px;
    width: 100%;
}
#legend {
    z-index: 99999;
    background: black;
    color: #CCC;
    width: 240px;
    height: 26px;
    margin: 0 auto;
}
#legend a {
    float: left;
    margin: 5px;
    text-decoration: none;
    color: black;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 0 5px;
    background: #CCC;
}
#legend #at {
    background: black !important;
    color: #CCC;
    padding: 0px;
}
#legend span {
    background: #CCC !important;
    color: black;
    padding: 0 5px;
}
.leg-clicked {
    color: #CCC !important;
}
#legend #a1 {
    background: rgb(87, 188, 0);
}
#legend #a2 {
    background: rgb(213, 156, 72);
}
#legend #a3 {
    background: rgb(12, 170, 226);
}
.highcharts-legend {
    display: none;
}

JavaScript

$(function () {
    $("#a1").click(function () {
        $('.highcharts-legend-item:nth-child(1)').click();
        $(this).toggleClass("leg-clicked");
    });
    $("#a2").click(function () {
        $('.highcharts-legend-item:nth-child(2)').click();
        $(this).toggleClass("leg-clicked");
    });
    $("#a3").click(function () {
        $('.highcharts-legend-item:nth-child(3)').click();
        $(this).toggleClass("leg-clicked");
    });

    $('#container').highcharts({
        chart: {
            backgroundColor: 'black',
            type: 'area'
        },
        title: {
            text: '', //'CPM IMPS SPEND BY TIME'
        },
        legend: {
            align: 'center',
            verticalAlign: 'top',
            x: 0,
            y: 10
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return 'Week ' + this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: [{

            lineWidth: 1,
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    
                }
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0
        }, {

            lineWidth: 1,
            title: {
                text: ''
            },
            labels: {
                formatter: function() {
                    
                }
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            linkedTo: 0,
            opposite: true
        }],
        tooltip: {
            backgroundColor: null,
            borderWidth: 0,
            shadow: false,
            useHTML: true,
            style: {
                padding: 0
            },
            pointFormat: '<p id="p{series.name}"><b>${point.y:,.0f}</b> </p>',
           ...