.hs-area{position:relative}

.hs-wrap,.tt-wrap{position:absolute;display:none}

.tt-wrap{border:10px solid transparent;z-index:1000; opacity:.8;}

.tt-wrap.left{top:-2px;right:100%}

.tt-wrap.right{top:-2px;left:100%}

.tt-wrap.top{bottom:100%;left:-2px}

.tt-wrap.bottom{top:100%;left:-2px}

.red-spot{border:1px solid #f00;opacity:.9;box-shadow:0 0 1px #000; background-color:#f00}

.red-spot.active{box-shadow:0 0 2px #ff0d0d inset;border-color:#ff0d0d;opacity:.9}

.tip-tooltip{display:block;border-radius:8px;padding:8px 5px 5px 5px;min-height:20px;min-width:30px;background-color:#000;color:#fff;box-shadow:0 0 10px #000}

.tip-tooltip:before{content:"";position:absolute;border:8px solid;width:0;height:0;z-index:999}

.tip-tooltip.transparent{opacity:.8}

.tip-tooltip.right:before{top:10px;right:100%;border-color:transparent #000 transparent transparent}

.tip-tooltip.left:before{top:10px;left:100%;border-color:transparent transparent transparent #000}

.tip-tooltip.top:before{top:100%;left:12px;border-color:#000 transparent transparent transparent}

.tip-tooltip.bottom:before{bottom:100%;left:12px;border-color:transparent transparent #000 transparent}