/*
 * Title                   : Hotspotter - styles
 * Author                  : Basm , aka z-B
 * Version                 : 1.7.6
 * Last Modified           : 27 Mar 2013
 * CodeCanyon Profile      : http://codecanyon.net/user/z-B
 * License                 : http://codecanyon.net/licenses/regular_extended
 */
.hs-area {
    position: relative
}

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

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

.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
}

.invisible-spot, .red-spot, .onhover-spot {
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
}

.red-spot {
    border: 2px solid #f00;
    opacity: .7;
    box-shadow: 0 0 10px #000
}

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

.shadow-spot {
    box-shadow: 0 0 20px #000
}

.shadow-spot.active {
    box-shadow: 0 0 50px #000
}

.glass-spot {
    box-shadow: 0 0 20px #fff
}

.glass-spot.active {
    box-shadow: 0 0 50px #fff
}

.sniper-spot {
    background-color: #f00;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    z-index: 10;
    opacity: .8;
    border: 2px solid #752424;
    box-shadow: 0 0 12px #000 inset
}

.sniper-spot:before, .sniper-spot:after {
    content: "";
    position: absolute;
    background-color: #f00
}

.sniper-spot:before {
    top: 3px;
    left: 11px;
    width: 2px;
    height: 19px
}

.sniper-spot:after {
    top: 11px;
    left: 3px;
    width: 19px;
    height: 2px
}

.sniper-spot.active:before, .sniper-spot.active:after {
    width: 0;
    height: 0
}

.sniper-spot.active {
    border: 2px solid #000;
    background-color: #f99;
    opacity: .4;
    box-shadow: 0 0 10px #000
}

.onhover-spot {
    border: 2px solid transparent
}

.onhover-spot.active {
    border: 2px solid #f00;
    opacity: .7;
    box-shadow: 0 0 10px #000
}

.img-spot img, .markup-spot div:last-child {
    display: none
}

.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
}

.tip-tooltip.white {
    background-color: #fff;
    color: #000
}

.tip-tooltip.white.right:before {
    border-color: transparent #fff transparent transparent
}

.tip-tooltip.white.left:before {
    border-color: transparent transparent transparent #fff
}

.tip-tooltip.white.top:before {
    border-color: #fff transparent transparent transparent
}

.tip-tooltip.white.bottom:before {
    border-color: transparent transparent #fff transparent
}

.bubble-tooltip {
    display: block;
    position: relative;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 0 10px #fff;
    padding: 10px 5px 8px 5px;
    opacity: .8;
    z-index: 999;
    min-height: 20px;
    min-width: 30px
}

.bubble-tooltip:before {
    content: "";
    position: absolute;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 20px;
    bottom: -10px;
    left: 9px;
    height: 16px;
    width: 20px
}

.bubble-tooltip:after {
    content: "";
    position: absolute;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 20px;
    bottom: -17px;
    left: 18px;
    height: 9px;
    width: 11px
}

.aim-tooltip {
    display: none;
    position: absolute;
    background-color: #000;
    color: #fff;
    padding: 6px
}

.aim-tooltip .tt-content {
    display: none
}

.aim-tooltip.top {
    border-radius: 10px 10px 0 0
}

.aim-tooltip.right {
    border-radius: 0 10px 10px 0
}

.aim-tooltip.bottom {
    border-radius: 0 0 10px 10px
}

.aim-tooltip.left {
    border-radius: 10px 0 0 10px
}

.hs-aim-rect, .hs-aim-pillar {
    display: none;
    position: absolute;
    background-color: #000;
    opacity: .75;
    z-index: 1000
}

.hs-aim-pillar {
    opacity: .2;
    z-index: 1001;
    background-color: #fff
}

.hs-flatten {
    border-radius: 0 !important
}