@charset "utf-8";

div.qMessage {
    position: absolute;
    z-index: 1001;
}

div.qMessage > div {
    position: relative;
    margin-left: -5px;
    margin-right: -5px;
    background: #333;
    color: #fff;
    padding: 0.2em 1em;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}
div.qMessage.left > div {
    left: -10px;
}
div.qMessage.right > div {
    right: -10px;
}
div.qMessage.above > div {
    top: -3px;
}
div.qMessage.below > div,
div.qMessage.autobelow > div {
    top: auto;
    left: 0;
    right: 0;
    bottom: -3px;
}

/* ----- arrows ----- */

div.qMessage.pointer > div:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
div.qMessage.left > div:after {
    top: 50%;
    left: 100%;
}
div.qMessage.right > div:after {
    top: 50%;
    right: 100%;
}
div.qMessage.above > div:after {
    top: 100%;
    left: 50%;
}
div.qMessage.below > div:after,
div.qMessage.autobelow > div:after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
}
div.qMessage.pointer > div:after{
    border-color: transparent;
    border-width: 4px;
}
div.qMessage.left > div:after,
div.qMessage.right > div:after {
    margin-top: -4px;
}
div.qMessage.above > div:after,
div.qMessage.below > div:after,
div.qMessage.autobelow > div:after {
    margin: 0;
    margin-left: -4px;
}
div.qMessage.left > div:after {
    border-left-color: #333;
}
div.qMessage.right > div:after {
    border-right-color: #333;
}
div.qMessage.above > div:after {
    border-top-color: #333;
}
div.qMessage.below > div:after,
div.qMessage.autobelow > div:after {
    border-color: transparent;
    border-bottom-color: #333;
}