@font-face {
font-family: "Source Serif Pro";
font-style: normal;
font-weight: 400;
src: url("source-serif-pro.ttf");
}

@font-face {
font-family: "Asap";
font-style: normal;
font-weight: 400;
src: url("asap-vf.ttf");
}

@font-face {
font-family: "Rosarivo";
font-style: normal;
font-weight: 400;
src: url("rosarivo-regular.ttf");
}

@font-face {
font-family: "Asap Condensed";
font-style: normal;
font-weight: 400;
src: url("asapvfbeta-condensed.ttf");
}

@font-face {
font-family: "Koine Greek";
font-style: normal;
font-weight: 400;
src: url("koine-greek.ttf");
}

html {
height: 100%;
}

body {
font-family: "Source Serif Pro";
margin: 0;
padding: 0;
height: 100%;
}

#wholePage {
height: 100%;
}

#wholeTable {
border-collapse: collapse;
height: 100%;
}

#wholeTable tbody, #wholeTable tr {
height: 100%;
}

td {
padding: 0;
}

#sidebarCell {
height: 100%;
vertical-align: top;
}

#sidebar {
font-family: "Asap";
width: 200px;
height: 100%;
background-image: url(background.webp);
background-repeat: no-repeat;
}

#title {
padding-top: 10px;
}

#title2, #navOther, #navVerse, #noscriptNav, #navOptions {
margin: 0 10px 10px 10px;
padding: 5px 10px;
border: 1px solid silver;
background-color: rgba(255, 255, 255, 0.7);
}

#title {
font-family: "Source Serif Pro";
font-size: 0.85em;
}

#title2 {
padding-bottom: 0;
}

#title h1 {
text-align: center;
font-family: "Rosarivo";
font-size: 1.5em;
margin: 5px 0;
}

#readMore {
color: rgb(0, 0, 255);
text-align: right;
text-decoration: underline;
cursor: pointer;
padding-top: 2px;
padding-bottom: 5px;
}

#popupPanelAbout, #popupPanelContact {
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background-color: rgba(80, 80, 80, 0.8);
width: 100%;
height: 100%;
}

.popupPanelInside {
position: relative;	/* make this the root for close button position */
margin-top: 100px;
margin-left: 300px;
width: 750px;
height: 550px;
background-color: white;
box-shadow: 0px 0px 10px 8px rgb(60, 60, 60);
		/* horiz, vertical, blur, spread, color */
}

.popupPanelInside2 {
float: left;
width: 100%;
height: 100%;
overflow-y: scroll;
}

.popupText {
margin: 4em 3em;
font-family: "Source Serif Pro";
}

#addressS, #addressP {
height: 19px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
}

#addressS {
width: 77px;
margin-left: 0.3em;
background-image: url(address-s.png);
}

#addressP {
width: 131px;
background-image: url(address-p.png);
}

.closePanelButton {
width: 26px;
height: 26px;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
background-image: url(close.png);
}

body.blurred #imageCell,
body.blurred #textCell,
body.blurred #title,
body.blurred #navOther,
body.blurred #navVerse,
body.blurred #noscriptNav,
body.blurred #navOptions,
body.blurred #contact,
body.blurred #version,
body.blurred #copyright,
body.blurred #thumbnailsCell {
filter: blur(2px);
}

#navOther {
text-align: center;
}

#navOther a {
font-size: 0.8em;
color: rgb(0, 0, 255);
}

#navVerse {
padding-bottom: 10px;
}

#navVerse select {
width: 100%;
font-family: "Source Serif Pro";
font-size: 1em;
margin-top: 5px;
}

#noscriptNav a {
font-size: 0.8em;
color: rgb(0, 0, 0);
text-decoration: none;
}

#navOptions {
text-align: center;
}

#navOptions table {
border-collapse: collapse;
margin-top: 0.3em;
}

#navOptions td {
vertical-align: top;
font-size: 0.9em;
cursor: pointer;
text-align: left;
padding: 1px;
}

#navOptions input, #navOptions label {
cursor: pointer;
}

#contact {
text-align: center;
padding: 0px 5px 5px 5px;
font-size: 0.8em;
color: rgb(255, 255, 255);
text-decoration: underline;
cursor: pointer;
}

#version {
text-align: center;
padding: 2px 5px 3px 5px;
font-size: 0.8em;
font-family: "Source Serif Pro";
color: rgb(155, 155, 155);
}

#copyright {
text-align: center;
padding: 0px 5px 5px 5px;
font-size: 0.8em;
font-family: "Source Serif Pro";
color: rgb(155, 155, 155);
}

#imageCell {
height: 100%;
vertical-align: top;
}

#imagePanelOutside, #imagePanel {
width: 600px;				/* must match lastImagePanelWidth in javascript */
transition-property: width;
transition-delay: 0s;
transition-duration: 1s;		/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
}

#imagePanelOutside {
height: 100%;
}

body.hideImage #imagePanelOutside, body.hideImage #imagePanel {
width: 0px !important;		/* need !important to override inline width after user changes imagePanel width */
}

body.hideImage2 #imagePanelOutside {
display: none;
}

#imagePanel {
height: 100%;
overflow: scroll;
background-color: rgb(190, 190, 190);
position: absolute;
cursor: grab;
resize: horizontal;
}

#imagePanelOutside #zoomOutButton {
width: 27px;
height: 27px;
float: left;
margin: 5px 0 5px 5px;
position: relative;
z-index: 1;
cursor: pointer;
background-image: url(zoom-out.png);
}

#imagePanelOutside #zoomInButton {
width: 27px;
height: 27px;
float: left;
margin: 5px 0 5px 5px;
position: relative;
z-index: 1;
cursor: pointer;
background-image: url(zoom-in.png);
}

#imagePanelInside {
zoom: 0.55;		/* must match currentZoomLevel in javascript */
width: 1530px;		/* width of widest Sinai column image */
margin: 20px auto 0 auto;
text-align: center;
}

.imageDiv {
position: relative;	/* make this the root for arrow positions */
display: inline-block;
margin-bottom: 20px;
box-shadow: 4px 4px 10px 8px rgb(150, 150, 150);
		/* horiz, vertical, blur, spread, color */
}

.imageDiv img {
display: block;		/* get rid of blank space below image */
}

.vsArrow {			/* verse arrow on image */
position: absolute;
width: 16px;
height: 28px;
margin: 0;
padding: 0;
background-image: url("arrow-blue.png");
color: white;
font-size: 10px;
text-align: center;
cursor: pointer;
display: grid;		/* make vertically centered */
place-items: center;	/* make vertically centered */
}

.vsArrow div {
position: relative;
left: -2px;
}

#textCell {
height: 100%;
vertical-align: top;
}

body.hideTranscript.hideStandardGreek.hideLemmasParsing.hideParsingDescription.hideInterlinearEnglish.hideMarginalEnglish #textCell {
display: none;
}

#textDiv {
font-family: "Source Serif Pro";
font-size: .95em;
line-height: 1.25em;
height: 100%;
overflow-y: scroll;
padding: 0;
margin-left: 5px;
cursor: default;
position: relative;	/* show above zoom buttons during width change */
z-index: 1;		/* show above zoom buttons during width change */
}

#textNav {
font-family: "Asap Condensed";
line-height: 1em;
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}

#textNav th {
height: 2em;
padding: 3px 10px 0 3px;
text-align: left;
cursor: default;
transition-property: padding;
transition-delay: 0s;
transition-duration: 1s;		/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
}

body.hideTranscript #headerTranscript,
body.hideStandardGreek #headerStandardGreek,
body.hideLemmasParsing #headerLemmasParsing,
body.hideParsingDescription #headerParsingDescription,
body.hideInterlinearEnglish #headerInterlinearEnglish,
body.hideMarginalEnglish #headerMarginalEnglish {
max-width: 0px;
min-width: 0px;
padding-left: 0;
padding-right: 0;
}

body.hideTranscriptDiv #headerTranscript div,
body.hideStandardGreekDiv #headerStandardGreek div,
body.hideLemmasParsingDiv #headerLemmasParsing div,
body.hideParsingDescriptionDiv #headerParsingDescription div,
body.hideInterlinearEnglishDiv #headerInterlinearEnglish div,
body.hideMarginalEnglishDiv #headerMarginalEnglish div {
display: none;
}

#textTable {
border-collapse: collapse;
background-color: rgb(230, 221, 206);
}

#textDiv td.currVsArrow {
position: relative;
min-width: 16px;
max-width: 16px;
padding: 7px 0 0 5px;
color: white;
font-size: 10px;
text-align: center;
}

.currVsArrow div {
display: none;
}

#textTable td {
vertical-align: top;
padding: 8px 5px 5px 5px;
}

#textDiv td.tr {			/* transcript */
min-width: 150px;
max-width: 150px;
transition-property: max-width, min-width, padding;
transition-delay: 0s;
transition-duration: 1s;	/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
padding-left: 3px;
font-family: "Koine Greek";
font-size: 1.2em;
}

#textDiv td.tr div {		/* transcript */
min-width: 150px;
max-width: 150px;
}

.tr .vR {				/* verse reference */
font-family: "Source Serif Pro";
font-size: 0.8333em;
}

#textDiv td.stdG {		/* standard greek */
min-width: 150px;
max-width: 150px;
transition-property: max-width, min-width, padding;
transition-delay: 0s;
transition-duration: 1s;	/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
padding-left: 3px;
}

#textDiv td.stdG div {		/* standard greek */
min-width: 150px;
max-width: 150px;
}

#textDiv td.lmPr {		/* lemmas and parsing */
max-width: 20em;
transition-property: max-width, padding;
transition-delay: 0s;
transition-duration: 1s;	/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
padding-left: 3px;
}

#textDiv td.prD {		/* parsing description */
max-width: 40em;
transition-property: max-width, padding;
transition-delay: 0s;
transition-duration: 1s;	/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
padding-left: 3px;
}

#textTable .lmPr table,	/* lemmas and parsing */
#textTable .prD table {	/* parsing description */
border-collapse: collapse;
font-size: 0.9em;
line-height: 1em;
}

#textTable .lmPr td,		/* lemmas and parsing */
#textTable .prD td {		/* parsing description */
padding: 0 8px 0 0;
}

#textTable .pr,			/* parsing */
#textTable .prD {		/* parsing description */
font-family: Asap;
white-space: nowrap;
}

#textDiv td.int {		/* interlinear english */
min-width: 150px;
max-width: 150px;
transition-property: max-width, min-width, padding;
transition-delay: 0s;
transition-duration: 1s;	/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
padding-left: 3px;
}

#textDiv td.int div {		/* interlinear english */
min-width: 150px;
max-width: 150px;
}

#textDiv td.mg {		/* marginal english */
min-width: 150px;
max-width: 150px;
transition-property: max-width, min-width, padding;
transition-delay: 0s;
transition-duration: 1s;	/* must match transitionDuration in javascript */
transition-timing-function: ease-in-out;
padding-left: 3px;
}

#textDiv td.mg div {		/* marginal english */
min-width: 150px;
max-width: 150px;
}

body.hideTranscript #textDiv td.tr,
body.hideStandardGreek #textDiv td.stdG,
body.hideLemmasParsing #textDiv td.lmPr,
body.hideParsingDescription #textDiv td.prD,
body.hideInterlinearEnglish #textDiv td.int,
body.hideMarginalEnglish #textDiv td.mg {
max-width: 0px;
min-width: 0px;
padding-left: 0;
padding-right: 0;
overflow: hidden;
}

body.hideTranscriptDiv #textDiv td.tr div,
body.hideStandardGreekDiv #textDiv td.stdG div,
body.hideLemmasParsingDiv #textDiv td.lmPr div,
body.hideParsingDescriptionDiv #textDiv td.prD div,
body.hideInterlinearEnglishDiv #textDiv td.int div,
body.hideMarginalEnglishDiv #textDiv td.mg div {
visibility: hidden;
}

.overline, .numeral {
text-decoration: overline;
}

.highlightedVerse {
background-color: white;
}

.highlightedVerse .currVsArrow {
background-image: url(arrow-red.png);
background-repeat: no-repeat;
background-position: 5px 3px;
}

.highlightedVerse .currVsArrow div {
display: block;
position: relative;
left: -2px;
}

.highlightedWord {
background-color: rgb(239, 234, 225);
}

/* start original photos page */
#thumbnailsCell {
height: 100%;
vertical-align: top;
padding: 1em;
font-family: "Asap";
}

h3 {
font-family: "Source Serif Pro";
}

.tagline {
font-size: 0.9em;
margin-bottom: 1em;
}

.pageThumbnail {
margin: 0.5em;
padding: 10px;
border: 1px solid silver;
text-align: center;
float: left;
}

.pageThumbnail a {
color: rgb(30, 30, 30);
}

.pageThumbnail div {
padding-top: 3px;
}
/* end original photos page */