/*
    Common styles for admin hotspot control & exported template as well
*/

#photo {
    display:block;
    width:100%;
}

.hotspot {
    position: absolute;

    /* Easter Egg - resize browser and hotspots will fluently move to new positions
    -webkit-transition:All 1s ease;
       -moz-transition:All 1s ease;
         -o-transition:All 1s ease;
            transition:All 1s ease;*/
}
    .hotspot-bg {
        background: url(../images/icon_plus.png) no-repeat scroll -3px center transparent;
        width: 39px;
        height: 39px;
        margin: auto;
        position: absolute; /* <top> & <left> are not defined here by purpose - they're defined either in draggable init or inline style */
    }

    .hotspot-bubble {
        display: none;
    }
    .hotspot-references .reference-materials-heading {
        font-family: serif;
        font-weight: normal;
        font-size:20px;
    }

    .hotspot-references table {
        width:100%;
    }
    .hotspot-references td {
        border-bottom: 1px solid #ccc;
    }
        .hotspot-references .reference-type {
            width:80px;
        }


/* Twitter Bootstrap Popover styles */
.hotspot-container .popover {
    width:auto; /* @deprecated since v2.3.0 */
    max-width:none; /* since v2.3.0 */
}
.hotspot-container .popover-content {
    padding:0;
}
.hotspot-container .popover-content li {
	list-style-type: disc;
}
.hotspot-container .popover-title {
    font-size:20px;
    font-weight: bold;
    padding:10px 18px;
}

.hotspot-container .popover .padded,
.hotspot-container .popover .padded td {
    padding:10px 20px;
}

.hotspot-container .carousel button {
    margin-top:15px;
}

/* do not apply it only to .item.active as this causes jumping on sliding transition end - class `item` is toggled */
.carousel .item p {
    line-height: 20px;
}

/* implement popup scrolling */
.hotspot-data {
    overflow-y: auto;
    /* max-height is set in javascript based on window.height() more on https://github.com/Maga-Design-Group/MagaPop/issues/3 */
}