/*
ERS - main CSS
NEW VERSION without iframe
A.Tshubrik, 21 July 2020
Based on version of 15 June 2020
*/

:root {
  --header-height: 50px;
  --header-padding: 4px;
  /*landscape*/
  --ctrls-width: 25%;       
  --cmd-height: 4.2em;
  /*portrait*/
  --ctrls-height: 10em;
  --cmd-width: 6em;
  --menu-width: 6em;
}

body {
  font-family:verdana,arial,helvetica;
  font-size:13px;
  margin:var(--header-height) 0 0 var(--ctrls-width);
  padding:0.5em 1em 1em 0.5em;
  cursor:default;
/*  border:1px solid red;*/
}

div {
  box-sizing:border-box;
}

.noselection {   /* Prevent user selection */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

#divheader {
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:var(--header-height);
  padding-top:var(--header-padding);
  text-align:center;
  background:#D0D8DF;
  color:navy;
}

#divtitle {
  display:inline-block;
  font-weight:bold;
  font-size:2em;
  padding-top:0.1em;
}

#divcontrols {
  position:fixed;
  left:0;
  top:var(--header-height);
  width:var(--ctrls-width);
  bottom:0;
  border-right:1px solid gray;
  background:white;
}

#divtoc {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(100% - var(--cmd-height));
  padding-bottom:0.3em;
  padding-right:0.5em;
/*  padding-left:0.5em;*/
/*  display:flex;*/
/*  flex-flow:column;*/
  border-bottom:1px solid gray;
  overflow-y:auto;
/*  background:#def;*/
}

#divcmd {
  position:absolute;
  width:100%;
  height:var(--cmd-height);
  bottom:0;
/*  background:#fed;*/
}

#divview {
  position:fixed;
  left:var(--ctrls-width);
  top:var(--header-height);
  right:0;
  bottom:0;
  background:#ddd;
  visibility:hidden;
/*  border:1px solid blue;*/
}

#divmediatext {
  display:none;
}

/* Links */

a, .pseudolink {
  font-weight:bold;
  color:blue;
  text-decoration:none;
}

a:visited {
  color:blue;
  text-decoration:none;
}

#ahome, #azone, #ahome:visited, #azone:visited {
  color:blue;
}

a:hover, #ahome:hover, #azone:hover, .pseudolink:hover {
  color:#f0f;
  text-decoration:none;
}

.pseudolink {
  cursor:pointer;
}

.divnewsitem {
  display:block;
  font-weight:bold;
  margin:0.3em 0 0.3em 0.8em;
}

/* TOC elements */

.divtocitem {
  display:inline-block;
  font-weight:bold;
  margin:0.2em 0 0.2em 0.8em;
}

.subitem {
  padding-left:1em;
}

.selected {
/*  text-decoration:underline;*/
/*  border-bottom:1px solid blue;*/
  background:#ddd;
  border:1px solid #ccc;
}
/* Header elements */

#ahome {
  float:left;
  margin-top:var(--header-padding);
}

#azone {
  font-size:0.9em;
  margin:0.4em 1em 0 0;
  float:right;
}

.imglogo {
  margin-left:0.5em;
  vertical-align:middle;
  height:34px;
  width:auto;
}

.imgtitle {
  width:475px;
  height:42px;
}

#subtitle {
  display:inline-block;
  float:right;
  margin-top:0.2em;
  margin-right:1em;
  font-size:1.2em;
  font-weight:bold;
  color:fuchsia;
}

/* Command elements */

#divmenu {
  position:absolute;
  left:0.5em;
  top:0.5em;
  padding:0;
  width:auto;
  height:auto;
/*  border:1px solid blue;*/
}

.command {
  display:inline-block;
  margin-left:0.5em;
  text-align:center;
  padding:1px 0.5em 0 0.5em;
  min-width:2em;
  border:1px solid gray;  
  background:#eee;
  border-radius:3px;
  vertical-align:top;
}

#imgmenu {
  margin-left:4px;
  margin-top:0.5em;
  border:1px solid transparent;
  display:none;
}

#imgmenu:hover {
  border:1px solid red;
}

#copyright {
  position:absolute;
  font-size:0.85em;
  margin-left:1em;
  bottom:0.7em;
}

#divmsg {
  position:fixed;
  padding:0.5em 2em;
  text-align:center;
  font-weight:bold;
  background:#ffe;
  border-radius:5px;
  border:1px solid gray;
  display:none;
}

/* Page elements */

img.back {
  border:0;
  vertical-align:middle;
}

hr {
  color:#000066;   
  background-color:#000066;
  border:0px none;
  height:1px;
}

.sml {
  font-size:0.85em;
}

.larger {
  font-size:1.2em;
}

.center {
  text-align:center;
}

.right {
  text-align:right;
}

.txt {
  text-indent:1.5em;
  text-align:justify
}

.divup {
  position:fixed;
  right:0;
  bottom:0;
  font-size:1.6em;
  padding:0 0.5em 0 0.5em;
  border:1px solid gray;
  border-radius:5px;
  background:#eee;
  opacity:0.7;
  cursor:pointer;
}

.divup:hover {
  background:#def;
  border:1px solid #89a;
}         

/* articles */

.divembed {
  text-align:center;
  float:left;
/*  border:1px solid blue;*/
}

.divembedrgt {
  text-align:center;
  float:right;
}

.imgflex {
  max-width:95%;
  height:auto;
}

.imgembed {
  margin:0.5em;
  float:left;
  border:1px solid gray;
}

.imgembedrgt {
  margin:0.5em;
  float:right;
  border:1px solid gray;
}

.hiddentext {
  display:none;
  padding:0 20px 0 20px;
}

/* control element */

.togglediv {
  display:inline-block;
  background:#ddd;
  border:1px solid gray;
  border-radius:3px;
  padding:0 5px 0 5px;
  cursor:pointer;
  color:blue;
  font-weight:bold;
} 

.togglediv:hover {
  color:fuchsia;
}

/* new lit */

.divbook, .divbooktext {
  display:inline-block;
  margin:0.5em;
}

.divbooktext {
  min-width:280px;
  text-align:left;  
}

td.time {
  width:10em;
  vertical-align:top;
}

/* Verses.htm */

.indent {
  padding-left:5em;
}

.divverse {
  width:calc(100% - 2px);
/*  padding:0.2em 0.2em 1em 0.2em;*/
  display:inline-block;
/*  border:1px solid blue;*/
}

.imgverse {
  float:left;
  max-width:25%;
  height:auto;
}

.imginline {
  max-width:98%;
  height:auto;
}

.divtext {
  margin-left:calc(25% + 1em);
}

/* Contacts */

.fldname {
/*  width:12em;*/
  font-weight:bold;
}

.contact td {
  padding:0.3em;
}

/* Poster elements */

.divposter {
  border-top:1px solid black;
}

.divcombo {
  width:100%;
  display:inline-block;
/*  border:1px solid red;*/
}

.divimage {
  float:left;
  display:inline-block;
  margin:2px;
/*  border:1px solid gray;*/
}

/* Graphics elements */

.imgsmall {         /*normal cursor*/
  margin:0.4em;
  border:1px solid gray;
}

.imgthumb {
  margin:0.4em;
  cursor:pointer;
  border:1px solid gray;
}

.divcontainer {
  width:100%;
  text-align:center;
/*  border:1px solid blue;*/  
}

.imgfullsized {
  max-width:100%;
  height:auto;
  border:1px solid gray;
}

.divimg {
  display:inline-block;
  margin:0.5em;
  padding:0;
  max-width:95%;
  vertical-align:top;
/*  border:1px solid blue;*/  
}

.divthumb {
  display:inline-block;
  margin:5px 5px;
  width:232px;
  height:calc(230px + 1.5em);
  border:1px solid gray;
  border-radius:5px;
  background:#ccc;
}

.divpvpic {
  width:230px;
  height:230px;
  padding:5px;
  display:flex;
  justify-content: center;
  align-items: center;
/*  border:1px solid blue;*/
}

.imgpv {
  max-height:100%;
  max-width:100%;
  border:1px solid gray;
  cursor:pointer;
}

.pvtitle {
  display:inline-block;
  width:95%;
/*  margin-top:0.2em;*/
  font-size:0.9em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Graphics view */

#divpictitle {
  position:absolute;
  top:2px;
  left:4em;
  right:40px;
  text-align:center;
  font-weight:bold;
  overflow:hidden;
}

#divpicinfo {
  position:absolute;
  left:0.5em;
  top:2px;
}

#divviewcontrols {
  position:absolute;
  top:2.5em;
  right:0;
/*  width:40px;*/
  height:150px;
  max-height:calc(100% - 2em);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
/*  border:1px solid red;*/
}

.imgbtnview {
  width:30px;
  height:30px;
  margin:4px;
  cursor:pointer;
}

.disabled {
  opacity:0.3;
  pointer-events:none;
}

#divscrollback,
#divscrollforw {
  position:absolute;
  cursor:pointer;
  top:5%;
  width:40%;
  height:90%;
/*  border:1px solid green;*/
}

#divscrollback {
  left:6%;
}

#divscrollforw {
  right:6%;
}

.divpicture {
  position:absolute;
  left:2px;
  right:38px;
  top:2.5em;
  bottom:2px;
  display:flex;
  justify-content: center;
  align-items: center;
/*  border:1px solid blue;*/
}

img.imgview {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
/*  border:1px solid red;*/
/*  cursor:pointer;*/
}