/* Green */
div.hotspot.green,
div.media.green {
    border: 1px solid #0a0;
    background-color: rgba(0,200,0, 0.1);
}
div.hotspot.green.hover,
div.media.green.hover {
    border-color: #3a3;
    background-color: rgba(0,200,0, 0.5);
}


/* Red */
div.hotspot.red,
div.media.red {
    border: 1px solid #a00;
    background-color: rgba(200,0,0, 0.1);
}
div.hotspot.red.hover,
div.media.red.hover {
    border-color: #f00;
    background-color: rgba(200,0,0, 0.5);
}


/* Blue */
div.hotspot.blue,
div.media.blue {
    border: 1px solid #008;
    background-color: rgba(0, 0, 255, 0.1);
}
div.hotspot.blue.hover,
div.media.blue.hover {
    border-color: #008;
    border-width: 1px;
    background-color: rgba(0, 0, 255, 0.5);
}


/* Orange */
div.hotspot.orange,
div.media.orange {
    border: 1px solid #ffae00;
    background-color: rgba(255, 174, 0, 0.1);
}
div.hotspot.orange.hover,
div.media.orange.hover {
    border-color: #ffae00;
    border-width: 1px;
    background-color: rgba(255, 174, 0, 0.5);
}


/* Yellow */
div.hotspot.yellow,
div.media.yellow {
    border: 1px solid #d3d300;
    background-color: rgba(255, 255, 0, 0.1);
}
div.hotspot.yellow.hover,
div.media.yellow.hover {
    border-color: #d3d300;
    border-width: 1px;
    background-color: rgba(255, 255, 0, 0.5);
}


/* White */
div.hotspot.white,
div.media.white {
    border: 1px solid #aaa;
    background-color: rgba(210, 210, 210, 0.1);
}
div.hotspot.white.hover,
div.media.white.hover {
    border-color: #aaa;
    border-width: 1px;
    background-color: rgba(210, 210, 210, 0.5);
}