/*
====================================================

ReneBook Professional 2.0

book.css

Buchlayout

Teil 1

====================================================
*/


#book{

    width:1400px;

    max-width:96%;

    height:760px;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:2200px;

}


/* ===================================== */

#left,
#right{

    width:48%;

    height:100%;

    position:relative;

}


/* ===================================== */

#spine{

    width:40px;

    height:100%;

    background:

    linear-gradient(
        90deg,
        #2a1b11,
        #5d402c,
        #2a1b11
    );

    box-shadow:

        inset 0 0 20px rgba(0,0,0,.6),

        0 0 18px rgba(0,0,0,.5);

}


/* ===================================== */

.paper{

    width:100%;

    height:100%;

    background:

    #fbf7ee;

    border-radius:6px;

    overflow:hidden;

    position:relative;

    box-shadow:

        0 0 25px rgba(0,0,0,.35);

}


/* ===================================== */

#left .paper{

    border-radius:

    12px 0 0 12px;

}


#right .paper{

    border-radius:

    0 12px 12px 0;

}


/* ===================================== */

.paper::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        rgba(255,255,255,.45),

        rgba(0,0,0,.03)

    );

    pointer-events:none;

}


/* ===================================== */

.pageTitle{

    width:100%;

    padding:18px;

    text-align:center;

    font-size:22px;

    font-weight:bold;

    border-bottom:

    1px solid #ddd;

    background:

    linear-gradient(

        #faf6ef,

        #ece3d0

    );

}
/* ===================================== */
/* EDITOR                                */
/* ===================================== */

.editor{

    width:100%;

    height:calc(100% - 65px);

    padding:35px;

    overflow-y:auto;

    overflow-x:hidden;

    outline:none;

    font-size:20px;

    line-height:1.8;

    color:#2f241c;

    font-family:

    Georgia,
    "Times New Roman",
    serif;

    word-break:break-word;

    overflow-wrap:anywhere;

}



/* Scrollbar */

.editor::-webkit-scrollbar{

    width:10px;

}



.editor::-webkit-scrollbar-track{

    background:#efe6d5;

}



.editor::-webkit-scrollbar-thumb{

    background:#b9996b;

    border-radius:10px;

}



/* ===================================== */
/* ÜBERSCHRIFTEN                         */
/* ===================================== */

.editor h1{

    font-size:34px;

    margin-bottom:20px;

    color:#4a2d19;

}



.editor h2{

    font-size:28px;

    margin-top:25px;

    margin-bottom:15px;

    color:#5d3820;

}



.editor h3{

    font-size:24px;

    margin-top:20px;

    margin-bottom:10px;

}



/* ===================================== */

.editor p{

    margin-bottom:18px;

}



/* ===================================== */

.editor ul{

    margin-left:35px;

    margin-bottom:20px;

}



.editor li{

    margin-bottom:8px;

}



/* ===================================== */

.editor img{

    display:block;

    max-width:100%;

    height:auto;

    margin:20px auto;

    border-radius:8px;

    box-shadow:

    0 6px 18px rgba(0,0,0,.25);

}



/* ===================================== */

.editor table{

    width:100%;

    border-collapse:collapse;

    margin:20px 0;

}



.editor td,

.editor th{

    border:1px solid #999;

    padding:8px;

}



/* ===================================== */

.editor blockquote{

    margin:20px;

    padding:15px;

    border-left:5px solid #8b5a2b;

    background:#f7f1e5;

    font-style:italic;

}



/* ===================================== */

.editor hr{

    margin:25px 0;

    border:none;

    border-top:2px solid #c9b08a;

}
/* ===================================== */
/* PAPIERSTRUKTUR                         */
/* ===================================== */

.paper{

    background:

    linear-gradient(
        180deg,
        #fffdf8 0%,
        #faf5ea 100%
    );

}



/* feine Papierstruktur */

.paper::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    opacity:.08;

    background-image:

    radial-gradient(circle,#000 1px,transparent 1px);

    background-size:18px 18px;

}



/* ===================================== */
/* FALZ                                  */
/* ===================================== */

#left::after{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:18px;

    height:100%;

    background:

    linear-gradient(

        to left,

        rgba(0,0,0,.18),

        rgba(0,0,0,0)

    );

}



#right::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:18px;

    height:100%;

    background:

    linear-gradient(

        to right,

        rgba(0,0,0,.18),

        rgba(0,0,0,0)

    );

}



/* ===================================== */
/* HOVER                                 */
/* ===================================== */

.paper:hover{

    box-shadow:

        0 0 35px rgba(0,0,0,.45);

}



/* ===================================== */
/* BILDER                                */
/* ===================================== */

.bookImage{

    display:block;

    width:auto;

    max-width:90%;

    max-height:350px;

    margin:20px auto;

    border-radius:8px;

    border:1px solid #bca57d;

    box-shadow:

        0 5px 15px rgba(0,0,0,.30);

}



.bookImage:hover{

    border-color:#8b5a2b;

}



/* ===================================== */
/* DRAG & DROP                           */
/* ===================================== */

.editor.dragover{

    outline:3px dashed #8b5a2b;

    background:#fff8e8;

}



/* ===================================== */
/* SEITENNUMMERN                         */
/* ===================================== */

.pageNumber{

    position:absolute;

    bottom:20px;

    right:30px;

    color:#777;

    font-size:14px;

}



/* ===================================== */
/* LINKS                                 */
/* ===================================== */

.editor a{

    color:#0a58ca;

    text-decoration:none;

}



.editor a:hover{

    text-decoration:underline;

}



/* ===================================== */
/* TEXTAUSWAHL                           */
/* ===================================== */

::selection{

    background:#c8a96b;

    color:#fff;

}



/* ===================================== */
/* DRUCK                                 */
/* ===================================== */

@media print{

    body{

        background:white;

    }



    header,

    footer,

    #toolbar{

        display:none;

    }



    #book{

        width:100%;

        height:auto;

        box-shadow:none;

    }



    .paper{

        box-shadow:none;

    }

}