/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 23.11.2019, 19:49:39
    Author     : elmar
*/

/* COMICS */
.site-main.jl-comics{
    margin:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap:20px;
}

.site-main.jl-comics article{}
.site-main.jl-comics article > header{
    margin-bottom:10px;
}
.site-main.jl-comics article > header > h1{
    line-height:1.2;
    font-size:18px;
}
.site-main.jl-comics article > .thumbnail{}
.site-main.jl-comics article > .thumbnail img{
    width:100%;
}
.site-main.jl-comics article > .buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:10px;
}
.site-main.jl-comics article > .buttons > .button{
    display:block;
    text-decoration:none;
    text-align:center;
    padding:10px;
    text-transform:uppercase;
    font-weight:bold;
    transition:0.2s;
    font-size:14px;
}
.site-main.jl-comics article > .buttons > .button:hover{
    opacity:0.8;
}
.site-main.jl-comics article > .buttons > .button.button-more{
    background:#6c7781;
    color:#fff;
}
.site-main.jl-comics article > .buttons > .button.button-read{
    background:#e80602;
    color:#fff;
}

/* COMICS PAGE */
.site-main.jl-comics-page{
    margin:0;
}
.site-main.jl-comics-page .jl-comics-table{
    display:grid;
    grid-template-columns:300px 1fr;
    grid-gap:20px;
}
.site-main.jl-comics-page .jl-comics-table .thumbnail{}
.site-main.jl-comics-page .jl-comics-table .thumbnail img{width:100%;}

.site-main.jl-comics-page .jl-comics-table .thumbnail > .read-buttons{}
.site-main.jl-comics-page .jl-comics-table .thumbnail > .read-buttons .jl-comics-pagelist-title{
    font-size:14px;
    font-weight:bold;
}
.site-main.jl-comics-page .jl-comics-table .thumbnail > .read-buttons .button{
    display:block;
    vertical-align:top;
    border:1px solid;
    color:#2f2f2f;
    padding:0 10px;
    transition:0.2s;
    margin:0 5px 5px 0;
    text-align:center;
    padding:10px;
}
.site-main.jl-comics-page .jl-comics-table .thumbnail > .read-buttons .button.read-start{
    color:#e80602;
}
.site-main.jl-comics-page .jl-comics-table .thumbnail > .read-buttons .button:hover{
    opacity:0.8;
    border:1px dashed;
}

.site-main.jl-comics-page .jl-comics-table .props{}
.site-main.jl-comics-page .jl-comics-table .props > .prop{
    display:grid;
    grid-template-columns:0.3fr 0.7fr;
    grid-gap:30px;
    padding: 5px 0;
}
.site-main.jl-comics-page .jl-comics-table .props > .prop > .name{font-weight:bold;}
.site-main.jl-comics-page .jl-comics-table .props > .prop > .value{}
.site-main.jl-comics-page .jl-comics-table .props > .description{
    margin-top:20px;
}

/* COMICS READ */
#jl-comics-read{
    position:fixed;
    z-index:9998;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#292929;
    overflow-y: auto;
}
#jl-comics-read.horizontal{
    max-height:100%;
}
#jl-comics-read .jl-comics-read-page{
    text-align:center;
    height:100%;
}
#jl-comics-read .jl-comics-read-page img{
    max-width:100%;
}
#jl-comics-read.horizontal .jl-comics-read-page{
    overflow-x: auto;
}
#jl-comics-read.horizontal .jl-comics-read-page img{
    max-width:none;
}

#jl-comics-read .jl-comics-control{
    position:fixed;
    z-index:9999;
    font-size:40px;
    right:20px;
    bottom:20px;
    text-align:center;
}
#jl-comics-read .jl-comics-control .jl-comics-read-page-counter{
    display:inline-block;
    vertical-align:top;
    background:rgba(0,0,0,1);
    height:60px;
    line-height: 62px;
    padding:0 10px;
    font-size:23px;
    cursor:move;
}
#jl-comics-read .jl-comics-control .jl-comics-read-nav{
    color:#fff;
    display:inline-block;
    vertical-align:top;
    padding:10px 30px;
    line-height: 35px;
    background:rgba(0,0,0,0.8);
    height:60px;
    transition:0.2s;
}
#jl-comics-read .jl-comics-control .jl-comics-read-nav.active{
    background:rgba(0,0,0,1);
}
#jl-comics-read .jl-comics-control .jl-comics-read-nav.jl-comics-read-stop{
    font-size:30px;
    line-height:40px;
}
#jl-comics-read .jl-comics-control .jl-comics-read-nav:hover{
    background:rgba(0,0,0,1);
}