/*
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 : 24-Nov-2016, 22:11:59
    Author     : dsladek
*/
* { box-sizing: border-box; }
body,html { height: 100%; font-family: "Arial"; text-decoration: none; margin: 0px; padding: 0px; -moz-box-sizing: border-box; }
#wrapper { position: static; width: 100%; height: 100vh; top: 0px; margin-top: 0px; background-color: #110F10; background-position:top center; background-size: 100%; background-repeat: no-repeat; }
#gu { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; }
#gu form { display: block; position: relative;  vertical-align: baseline; width: 400px; min-height: 200px; top: 40%; margin-left: auto; margin-right: auto; padding: 15px; background-image: url(../i/dot.png); background-repeat: repeat; color: #fff; box-shadow: 0px 0px 0px 0px #151515; }
#gu h3, #gu h3 a { font-weight: normal; text-decoration: none; color: inherit; }
#gu form input { line-height: 30px; height: 30px; border: solid 1px #999; color: #fff; background-color: transparent; padding: 10px; }
#gu form #lang { width: 25px; font-size: 0.7em; float: left; display: inline-block; text-align: center; }
#gu form #lang a { line-height: 16px; height: 16px; display: block; height: 100%; padding:5px; color: #fff; background-color: #151515; margin: 0px; text-decoration: none; }
#gu form #lang a.active { background-color: #666; }
#gu form input[name=mailaddress] { width: 65%; float: left; margin-right: 10px; }
#gu form input[type=submit] { height: 55px; border: none; background-color: #151515; margin-left: 10px; margin-top: -2px; }
#gu form input[type=submit]:hover, #gu form input[type=submit]:active { background-color: #666; }
#gu form br { float: none; clear: both; position: relative; width: 100%; height: 0px; }


#ug  { height: 100vh; width: 100vw; position: absolute; top: 0px; left: 0px; font-size: .7vw; }
#ug>div { width: 100%; position: relative; float: none; clear: both; }
#ug #header { height: 5%; min-height: 25px; }
#ug #logo { height: 100%; width: 50%; background-color: #888; background-image: url(../i/l/logo.png); background-size:contain; background-repeat: no-repeat; background-position: 15% 50%; float: left; clear: none; }
#ug #menu { position: relative; padding: 0px; margin: 0px; list-style: none; display: table; width: 50vw; height: 100%; float: right; clear: none; }
#ug #menu li { padding: 0px; margin: 0px; list-style: none; display: table-cell; height: 100%; line-height: 5vh; font-size: 1.6vh; }
#ug #menupoint { display: none; height: 100%; line-height: 5vh; font-size: 1.6vw; width: 5%; background-color: #666; text-align: center; color: #fff; }
#ug #menu li a { display: block; height: 100%; width: 100%; text-align: center; background-color: #888; color: #fff; text-decoration: none; }
#ug #menu li a:hover, #ug #menu li a:active, #ug #menu li a.active  { background-color: #f2f2f2; color: #333;  }
#ug #footer { height: 2%; background-color: #888; font-size: 1vh; line-height: 2vh; text-align: center; color: #fff; }
#ug #content { height: 93%; }
#ug #content #book { height: 100%; width: 100%; background-color: #f2f2f2; display: table;  }
#ug #content #book .page { height: inherit; width: 40%; padding: 5%; display: table-cell; margin: 0px; vertical-align: top; }
#ug #content #book .page:first-child { border-right: solid 1px #888; }
#ug h2 { clear: none; margin-top: -3vh; line-height: 3vh; font-size: 3vh; position: absolute; font-weight: normal; display: block; width: 40%; }
#ug .left h2 { text-align: left; }
#ug .right h2 { text-align: right; }
#ug .image { width: 100%; height: 70%; display: block; background-size: cover; background-position: 50% 50%; }
#ug #content #book .page .quotes { width: 100%; height: 30%;  display: block; }
#ug #content #book .page .block { width: 100%; height: 100%;  display: block; }
#ug #content #book .page .half { width: 46%; padding: 2%; display: table-cell;  }
#ug #content #book .page .quote { width: 46%; padding: 2%; display: table-cell;  overflow: auto; }
#ug .pager { width: 100%; font-size: 0.5vw; }
#ug .left .pager { text-align: right; margin-left: 3vw; }
#ug .right .pager { text-align: left; margin-left: -3vw;}
#ug .left.center { text-align: right; }

@media only screen and (min-width: 1201px){
    #ug #menu { position: relative; display: table; }
}

@media only screen and (max-width: 1200px){
    #ug #logo { width: 95vw; }
    #ug #menupoint { display: inline-block; clear: none; }
    #ug #menu { display: none; width: 100vw; position: absolute; margin-top: 5%; z-index: 999; }
    #ug #menu li { display: block; width: 100vw; }
    #ug { font-size: 1.2vw; height: 100vh; }
    #ug #content #book .page { width: 90%; height: 100%; }
    #ug #content #book .page.right { display: none; }
    
}

@media only screen and (max-width: 768px){
    #ug { font-size: 2.0vw; height: 100vh; }
    #ug div { display: block; }
    #ug #content { height: max-content; width: 100%; }
    #ug #content #book { width: 100%; }
    #ug #content #book .page .half { display: block; }
    #ug #content #book .page .quotes { height: auto; }
    #ug #content #book .page .quote { width: 96%; display: block; height: auto; }
    #ug #footer { display: none; }
    
}

@media only screen and (max-height: 600px){
    #ug #menu li { font-size: 12px; line-height: 25px; }
    #ug #content { height: max-content; width: 100%; }
}