/*
 * This file is part of the LibreOffice project.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                     LIBREOFFICE GUIDES IN BROWSER                 +
+                          DEFAULT STYLESHEET                       +
+                           WESTERN LANGUAGES                       +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

*/
* {
  box-sizing: border-box;
}
html {
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
}
/* DONATION button */
.donation{
    background: linear-gradient(90deg, #4275b2 0%, #4eaa88 100%);
    border-radius: 2px;
    padding: 5px 10px;
    margin: auto;
    max-width: 200px;
    color: #ffffff;
}
.donation:hover {
    background: linear-gradient(90deg, #1c71d8 0%, #30c877 100%);
}
.donation a {
    color: white;
    text-decoration: none;
}
.donation p {
    font-size:1.2rem;
    text-align: center;
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){
#SEC_LOGO{}
#SEC_GUIDE{}
#SEC_DONATION{}
#SEC_TOC{}
#SEC_DISPLAYAREA{}
#SEC_BOOK_TOC{}
#SEC_IMPRINT{}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px){
#SEC_LOGO{}
#SEC_GUIDE{}
#SEC_DONATION{}
#SEC_TOC{}
#SEC_DISPLAYAREA{}
#SEC_BOOK_TOC{}
#SEC_IMPRINT{}
#SEC_SEARCH{}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
body {
  display: grid;
  grid-template-areas: 
    'leftheader header header header rightheader' 
    'leftmiddle title  title  title  rightmiddle' 
    'leftmiddle middle middle middle rightmiddle' 
    'leftfooter footer footer footer footer';
   grid-column-gap: 0px; /*- if you want gap between the columns */    
}
#SEC_LOGO{}
#SEC_GUIDE{}
#SEC_DONATION{}
#SEC_TOC{}
#SEC_DISPLAYAREA{}
#SEC_BOOK_TOC{}
#SEC_IMPRINT{}
#SEC_SEARCH{}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
body {
  display: grid;
  grid-template-areas: 
    'leftheader'
    'header1'
    'header2'
    'leftmiddle'
    'middle' 
    'rightmiddle' 
    'leftfooter'
    'footer'
    'rightmiddle'
     'rightheader';
   /*grid-column-gap: 0px;*/ /*- if you want gap between the columns */
   grid-row-gap: 0px; /*- if you want gap between the rows */
   grid-template-columns: auto;
   /*grid-template-rows: 15vh 70vh auto;*/ 
} 
    
div#SEC_LOGO{}
div#SEC_GUIDE{}
div#SEC_TITLE{}
div#SEC_DONATION{}
div#SEC_TOC{}
div#SEC_DISPLAYAREA{}
div#SEC_BOOK_TOC{}
div#SEC_IMPRINT{}
div#SEC_SEARCH{}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) { 
body {
  display:grid;
  grid-template-areas:'leftheader header1 header2 header2 rightheader'
    'leftmiddle middle middle middle rightmiddle' 
    'leftmiddle footer footer footer rightmiddle';
   grid-column-gap: 0px; /*- if you want gap between the columns */
   grid-template-columns: 20vw 20vw 20vw 20vw 20vw;
} 

body div#SEC_LOGO{
    grid-area: leftheader;
    padding: 10px;
    top:0px;
    left:0px;
    right:80vw;
    bottom:90vh;
    position: fixed;
    z-index:100;
}
div#SEC_LOGO img{
    height: 100%;
    width: 100%;
    object-fit:contain;    
}

div#SEC_GUIDE{
    grid-area: header1;
    padding: 10px;
    position: fixed;
    top:0px;
    left:20vw;
    right:60vw;
    bottom:90vh;
    z-index:100;
}

div#SEC_GUIDE > p {
    margin-top:10px;
    padding:0px;
}

div#SEC_TITLE{
    grid-area: header2;
    padding: 0px 10px 0px 10px;
    position:fixed;
    top:0px;
    right:20vw;
    left:40vw;
    bottom:90vh;    
}
div#SEC_TITLE > p{
    padding:0px;
    margin:0px;
    font-size:2em;
}
div#SEC_TITLE > p.Subtitle{
    display:none;
}

div#SEC_TOC{
    grid-area: leftmiddle;
    padding: 10px;
    overflow-y:auto;
    position: fixed;
    top:10vh;
    left:0px;
    right: 80vw;
    bottom:0vh;
}

div#SEC_DISPLAYAREA{
    grid-area: middle;
    padding: 10px;
    overflow-y:auto;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
    position:fixed;
    left:20vw;
    right:20vw;
    top:10vh;
    bottom:0vh;
}
div#SEC_DISPLAYAREA p{
    font-size:1.15rem;
}

div#SEC_DISPLAYAREA img {
  max-width: 100%;
  height: auto;
  border: 0px;
  transition:transform .2s; /* Animation */
  transition-property: border;
}

div#SEC_DISPLAYAREA img:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport)*/
    border: 1px solid black;
    background-color:white;
}

div#SEC_BOOK_TOC{
    grid-area: rightmiddle;
    padding: 10px;
    overflow-y:auto;
    position:fixed;
    right:0px;
    left:80vw;
    top:10vh;
    bottom:0px;
}

div#SEC_BOOK_TOC img {
    height: 300px;
    width: 212px;
}

div#SEC_IMPRINT{
/*    grid-area: footer;
    padding: 5px 10px 5px 10px;
    position:fixed;
    bottom:0px;
    left:20vw;
    top:90vh;
    right:20vw;*/
}
div#SEC_IMPRINT p {
    font-size:0.8em;    
}

div#SEC_DONATION{
/*    grid-area: leftfooter;
    padding: 10px;
    position:fixed;
    bottom:0px;
    left:0px;
    right:80vw;
    top:90vh;*/
}
div#SEC_SEARCH{
    grid-area: rightheader;
    padding: 10px;
    top:0px;
    position: fixed;
    right:0px;
    top:0px;
    left:80vw;
    bottom:90vh;
    z-index:100;
}
}