/*
    COLORS ==========================================================

    Xivmap creates absolutely positioned divs to represent DOM elements.

    These divs have a data-tag attribute that corresponds to the original
    element they represent. This allows for easy CSS styling.

    By default, the elements are grouped into 3 colors of different
    intensity, but feel free to modify and regroup them as necessary.

    The tags *must* be uppercase, as that's how they are returned
    by the DOM api.

    Tip: don't modify this file directly, rather overwrite the rules
    in your own CSS. This way you can download future updated versions of
    xivmap without having to re-edit the styles.
*/

/* These are the darkest, most prominent items on the minimap */
.xivmap [data-tag="A"],
.xivmap [data-tag="H1"],
.xivmap [data-tag="H2"],
.xivmap [data-tag="H3"],
.xivmap [data-tag="H4"],
.xivmap [data-tag="H5"],
.xivmap [data-tag="H6"],
.xivmap [data-tag="INPUT"],
.xivmap [data-tag="BUTTON"],
.xivmap [data-tag="LABEL"] {
    background-color: #808080;
}

/* These items have medium darkness*/
.xivmap [data-tag="Q"],
.xivmap [data-tag="IMG"],
.xivmap [data-tag="MAP"],
.xivmap [data-tag="OBJECT"],
.xivmap [data-tag="AUDIO"],
.xivmap [data-tag="VIDEO"],
.xivmap [data-tag="IFRAME"],
.xivmap [data-tag="CODE"],
.xivmap [data-tag="TEXTAREA"],
.xivmap [data-tag="BLOCKQUOTE"],
.xivmap [data-tag="ADDRESS"] {
    background-color: #b9b9b9;
}

/* These items are the lightest */

/*  NOTE: DIV are not included by default! Either pass in a custom
    array of selectors or pass in the element itself or add
    the .include-in-xivmap class to an element */
.xivmap [data-tag="DIV"],
.xivmap [data-tag="LI"],
.xivmap [data-tag="TR"],
.xivmap [data-tag="P"],
.xivmap [data-tag="PRE"] {
    background-color: #c7c7c7;
}


/*
    STRUCTURE =======================================================

    The styles that follow deal with with structure and behavior.
    Modify with care.
*/

.xivmap {
    /* Default position and size */
    top: 0;
    right: 0;
    width: 70px;
    margin: 20px;
    position: fixed;

    /* used by the autohide option */
    transition: opacity 250ms ease-out;

    /* Prevent accidental text selection while dragging */
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Show the hand icon to indicate that the viewport can be dragged */
    cursor: move; /* IE doesn't support grab, this is a suitable replacement */
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

/* Used when autohide is enabled */
.xivmap.xivmap-hidden {
    opacity: 0;
}

/* Show the grabbing hand when holding down click */
.xivmap:active {
    cursor: move; /* IE doesn't support grabbing, this is a suitable replacement */
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

/* This is the rectangle that indicates your position on the page
   Its height will be set via JavaScript, based on window height */
.xivmap .xivmap-viewport {
    margin-left: -10px;
    border-radius: 2px;
    width: calc(100% + 20px);
    transition: margin-top 150ms ease-out;
    background-color: rgba(0, 0, 0, 0.09);
    border: 1px solid rgba(255, 255, 255, .25);
}

/* Temporarily applied when calling .refresh() to prevent the viewport
   indicator from needlessly animating */
.xivmap.xivmap-no-transition .xivmap-viewport{
    transition: none !important;
}

/* This makes the viewport box more visible on dark websites */
.xivmap .xivmap-viewport > div {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

/*
    POSITIONING =====================================================

    These classes are used to place the minimap in the correct corner or side.
    Modifying them should not be necessary: use margin instead of top/left/right/bottom.
 */
.xivmap.top-left {
    top: 0;
    left: 0;
    right: auto;
}

.xivmap.top-right {
    top: 0;
    right: 0;
}

.xivmap.bottom-right {
    right: 0;
    bottom: 0;
    top: auto;
}

.xivmap.bottom-left {
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
}

.xivmap.left,
.xivmap.right {
    top: 0;
    bottom: 0;
    /*  These margins are necessary for correct positioning,
        Do not overwrite them */
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.xivmap.left {
    left: 0;
    right: auto;
}

.xivmap.right {
    right: 0;
}

/*
    ANIMATIONS ======================================================

    Xivmap comes with slide-in and fade-in animations
    Simply apply one of the two classes to the minimap element,
    the correct animation will run once the minimap is loaded.

    You may also apply your own animations, such as those from
    Animate.css found at https://daneden.github.io/animate.css/

    Default animations available by adding one of these classes:
    .fade-in
    .slide-in
 */
@keyframes xivmap-fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}


@keyframes xivmap-fade-in-left {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes xivmap-fade-in-right {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.xivmap.fade-in {
    animation-delay: 500ms;
    animation-duration: 350ms;
    animation-fill-mode: backwards;
    animation-name: xivmap-fade-in;
}

.xivmap.slide-in.left,
.xivmap.slide-in.top-left,
.xivmap.slide-in.bottom-left {
    animation-delay: 500ms;
    animation-duration: 350ms;
    animation-fill-mode: backwards;
    animation-name: xivmap-fade-in-left;
}

.xivmap.slide-in.right,
.xivmap.slide-in.top-right,
.xivmap.slide-in.bottom-right {
    animation-delay: 500ms;
    animation-duration: 350ms;
    animation-fill-mode: backwards;
    animation-name: xivmap-fade-in-right;
}

/*
    UTILITY =========================================================
 */


/*
    RESPONSIVE ======================================================

    By default, smaller screens have a smaller minimaps, and tiny
    screens under 850px don't display a minimap at all.

    For more information see the "CSS width" and "CSS height"
    columns on this website http://mydevice.io/devices/

    850px minimum means that by default, Xivmap shows up on most tablets in
    landscape mode but not in portrait mode. It does not show up on any phone.
 */
@media (max-width: 1400px) {
    .xivmap {width: 50px;}
}

@media (max-width: 1100px) {
    .xivmap {width: 30px;}
}

@media (max-width: 950px) {
    .xivmap {
        width: 15px;
        margin: 10px;
    }

    .xivmap .xivmap-viewport {
        margin-left: -5px;
        width: calc(100% + 10px);
    }
}

@media (max-width: 850px) {
    .xivmap {display: none;}
}