[libox-targ], [libox-dl] {
    display: inline-block;
    max-width: 100px;
    max-height: 80px;
    border-radius: 4px;
    border: 1px solid #555;
    box-shadow: 0 0 0 0 #555;
    transition: all 0.2s;
    margin: 0.05em 1em 0.7em 0;
    box-shadow: 0 0 1px 0px #222;
    vertical-align: middle;
}
[libox-dl]{
    background-color: #eee;
    padding: 10px;
    box-sizing: border-box;
}
.header{
    float: left;
    max-height: 200px !important;
    max-width: 200px !important;
}

[libox-targ]:hover, [libox-dl]:hover{
    box-shadow: 0 2px 5px 2px #555;
    margin: 0 1em 0.75em 0;
}
[libox-targ]:active, [libox-dl]:active{
    box-shadow: 0 0 2px 1px #222;
    margin: 0.05em 1em 0.7em 0;
    transition: none;
}
q-libox-back {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background-color: rgba(0,0,0,0.6);
    z-index: 999;
    opacity: 0;
    transition: all 0.3s;
}
q-libox-back.on {
    opacity: 1;
}
q-libox{
    position: fixed;
    transition: all 0.5s;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 4px;
    z-index: 9999;
}
q-libox-x, q-libox-n, q-libox-p {
    opacity: 0;
    transition: all 0.5s;
    position: fixed;
    cursor: pointer;
}
q-libox-x{
    right: 1em;
    top: 1em;
    font-size: 20pt;
    height: 1em;
    width: 1em;
    padding: 0.5em;
    border-radius: 1em;
    background-color: #222;
    text-align: center;
    line-height: 1.1em;
    transform: scale(1);
}
q-libox-p, q-libox-n {
    height: 3em;
    width: 3em;
    top: 50%;
    margin-top: -1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
q-libox-p{
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEREQiIGQ9Ik0xMjgsMjU2TDI1NiwwaDEyOEwyNTYsMjU2bDEyOCwyNTZIMjU2TDEyOCwyNTZ6Ii8+PC9zdmc+');
    left: 1em;
}
q-libox-n{
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEREQiIGQ9Ik0yNTYsMjU2TDEyOCwwaDEyOEwzODQsMjU2bC0xMjgsMjU2SDEyOEwyNTYsMjU2eiIvPjwvc3ZnPg==');
    right: 1em;
}
q-libox-caption {
    position: fixed;
    bottom: -100%;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.7);
    min-height: 2em;
    padding: 0 2em 2em;
    box-sizing: border-box;
    transition: all 0.5s;
}
q-libox-caption.on {
    bottom: 0;    
}