@import "../../general.css";

:root {
	--viewport-width: var(--body-width) /* 960px */;
	--text-width1: calc(100% - 20px); /* with apparatus off */
	--text-width2: 65%; /* with apparatus on */
	--text-width: var(--text-width1); 
	--popup-width: calc(50% - 20px);
}

html {
	height: 100%;
	background-color: var(--col-background);
}

body {
	width: var(--viewport-width);
	display: flex; 
	flex-flow: column;
	height: 100%;
	overflow: hidden;
	margin: auto;
	padding: 0;
	color: rgb(20,20,20);
	font-family: Tahoma, Garamond Premier Pro, Arial Unicode MS;
	font-size: 12pt;
	background-color: var(–-col-document-bg);
}

#ctrlcont, #facscont, #witList, #roadmapcont, #body1 {
	flex: 0 0 auto;
	width: var(--viewport-width);
	border-top: solid 1px grey;
	border-bottom: solid 1px grey;
}

#ctrlcont, #facscont, #witList, #roadmapcont {
	display: block;
}

#body1 {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	background-color: var(--col-document-bg);
	overflow-y: hidden;
}

.body1 {
	background-color: var(--col-document-bg);
}

.text {
	flex: 1;
	display: block;
	height: 100%;
	width: 0;
	overflow-y: scroll;
	transition: flex-grow 0.5s;
    flex-grow: 0;	
}

.text.activated {
    flex-grow: 1;
    width: 100%;	
}

#logo {
	display: block;
	background-image: url("logo.png");
	width: 45px;
	height: 45px;
	background-size: 45px;
	vertical-align: middle;
	float: right;
	margin: 0;
	/*margin-right: 5px;*/
	padding: 0;
}

#ctrlcont {
	background-color: var(--col-settings-bg-dk); /* transparent */
	visibility: visible;
	/*height: 1.5em;*/
}

.btnText, #btnApp, #btnNotes, #btnRoadmap, #btnFacs, .btnFacs, #goto {
	margin: 0.2em;
	display: inline-block;
	padding: 0.1em 0.4em 0.2em 0.4em;
	background-color: silver;
	border: 1pt darkgrey solid;
	border-radius: 10px;
}

.btnText, #btnApp, #btnNotes, #btnRoadmap, #btnFacs, .btnFacs {
	min-width: calc((100% / 10) - 0.4em - 5pt);
	text-align: center;
	vertical-align: middle;
	transition: background-color 0.5s;
}

.btnFacs {
	min-width: calc(3em - 0.4em - 5pt);
}

.btnFacs * {
	pointer-events: none;
}

.btnText:hover, #btnApp:hover, #btnNotes:hover, #btnRoadmap:hover, #btnFacs:hover, .btnFacs:hover {
	background-color: #A0EEA0;
}

.btnText.activated, #btnApp.activated, #btnNotes.activated, #btnRoadmap.activated, #btnFacs.activated, .btnFacs.activated {
	background-color: lime;
}

.btnText:before {
	content: "Version";
}
#btnText0:before {
	content: "Version 1";
}
#btnText1:before {
	content: "Version 2";
}
#btnText2:before {
	content: "Version 3";
}
#btnText3:before {
	content: "Version 4";
}
#btnText4:before {
	content: "Version 5";
}
#btnText5:before {
	content: "Version 6";
}
#btnText6:before {
	content: "Version 7";
}
#btnText7:before {
	content: "Version 8";
}
#btnText8:before {
	content: "Version 9";
}
#btnText9:before {
	content: "Version 10";
}

#btnApp:before {
	content: "Apparatus";
}

#btnNotes:before {
	content: "Notes";
}
#btnRoadmap:before {
	content: "Roadmap";
}

#btnFacs:before {
	content: "Facsimile";
}

#goto {
	margin-top: 0.5em;
	font-size: 80%;
	line-height: 170%;
	padding-bottom: 0.05em;
	padding-right: 0.1em;
	padding-top: 0.2em;
	border: 1pt darkgrey solid;
	background-color: silver;
	border-top-right-radius: 0; 
	border-bottom-right-radius: 0; 
}

#goto:before {
	content: "Go to";
	margin-right: 0.4em;
}

#goto_loc {
	width: 4.4em;
}

#facscont, #witList {
	height: 0;
	background-color: rgb(240,240,240);
	transition: height 0.5s;
	display: flex; 
    flex-direction: column;
}

#witList, .facscont1 {
	overflow: scroll;
}

#witList {
	font-size: 80%;
	column-count: 3;
	column-gap: 0.5em;
	height: auto;
	max-height: 0;
	transition: max-height 0.5s;
}

#roadmapcont {
	max-height: 0;
	overflow-y: scroll;
	overflow-x: scroll;
	transition: max-height 0.5s;
	background-color: var(--col-document-bg);
}

#roadmapcont svg {
}

#facscont.activated, .facscont.activated {
	height: 300px;
}

#witList.activated {
	max-height: 20%;
}

#roadmapcont.activated {
	max-height: 300px;
	height: auto;
}

.facscont1 {
	position: relative;
	height: 0;
	transition: height 0.5s;
    flex-grow: 0;	
}

.facscont1.activated {
     flex-grow: 1;	
}

.facs {
    position: relative;
	z-index: 1;
	visibility: hidden;
	top: 0px;
	left: 0px;
	margin: 0;
	transition: left 0.5s, top 0.5s;
	transition: visibility 0.5s;
}

.facs[src] {
	visibility: visible;
}

.facs.invert {
	filter: invert(100%); /* todo: switch button */
}

.facszone {
	position: absolute;
	border: solid 1pt w;
	pointer-events: none;
	color: yellow;
	background-color: white;
	mix-blend-mode: soft-light;
	box-shadow: 0px 0px 20px white;
	z-index: 2;
	top: -5px;
}

.paragraph {
	display: flex;
	flex-flow: row nowrap;
	/*border-top: solid 1px grey;*/
}

.paragraph-text, .paragraph-notes {
	display: block;
	position: relative; /* this is important for the popup notes to scroll with the content! */
	vertical-align: top;
}

.paragraph-text, h1, h2, h3, h4 {
	width: var(--text-width);
	flex: 0 0 auto;
	margin: 0;
	padding-left: 0.3em;
	padding-right: 0.2em;
}

.paragraph-notes {
	display: none;
	flex: 1 1 auto;
	direction: ltr;
	margin: 0;
	position: relative;
}

.paragraph-notes.activated {
	display: block;
}

.appref, .noteref {
	color: blue; var(--col-popup);
	font-weight: bold;
	transition-property: color;
	transition-duration: 0.5s;
	transition-property: background-color;
	transition-duration: 0.5s;
}

.appref:before, .noteref:before {
	content: "⸢";
	font-size: 16pt;
	line-height: 18pt;
	font-style: normal;
	font-weight: normal;
}

/* modify individual markers like this: */
.noteref.n1:before {
	content: "*";
}

.appref.witStart:before {
	content: "►";
}

.appref.witEnd:before {
	content: "◄";
}

a.anchor {
	color: transparent;
	font-weight: bold;
	transition-property: color;
	transition-duration: 0.5s;
}

a.anchor:after {
	content: "⸣";
}

.appref.active, .noteref.active, a.anchor.active {
	color: red;
	/*background-color: yellow;*/
}

.app, .popup-note {
	display: block;
	position: absolute;	
	visibility: hidden;
	padding: 3px 3px 3px 3px;
	font-size: 80%;
	z-index: 1;
	color: blue;
	text-align: left;
	line-height: 120%;
	border: inset 1px silver;
	border-top-left-radius: 0; 
	border-bottom-right-radius: 10px; 
	background-color: white;
	box-shadow: 3px 3px 3px #303030;
	transition: transform 0.2s, visibility 1s;
	transform-origin: 0 0;
	font-style: normal;
	font-weight: normal;
}

.app {
	left: 100%;
	width: var(--popup-width);
	transform: translateY(-1em) scaleX(0);
	border-top-right-radius: 10px; 
	border-bottom-left-radius: 0;
}

.popup-note {
	transform: scaleY(0);
	border-top-right-radius: 0px; 
	border-bottom-left-radius: 10px;
}

.app:first-child {
	transform: translateY(0) scaleX(0);
}

.popup-note:first-child {
	transform: scaleY(0);
}

.app.active, .popup-note.active {
	visibility: visible;
}

.app.active {
	transform: translateY(-1em) scaleX(1);
	transform-origin: 0 0;
	transition: transform 0.4s, visibility 1s;
}

.popup-note.active {
	transform: scaleY(1);
	transform-origin: 0 0;
	transition: transform 0.4s, visibility 1s;
}

.app:first-child.active {
	transform: translateY(0) scaleX(1);
}

.popup-note:first-child.active {
	transform: scaleY(1);
}

@keyframes appAnimation {
	0% {
			transform: scale(0,1);
			transform-origin: 0 0;
		}
	100% {
			transform: scale(1,1);
			transform-origin: 0 0;
		}
}
.app2 {
	display: block;
	position: relative;
	left: 0 !important;
	top: 0;
	margin: 0 !important;
	/* padding-left: 2em;
	text-indent: -2em;*/
}

.rdg {
	padding-left: 1.2em;
	text-indent: -1em;
}

.rdg + .rdg {
	margin-top: 0.1em;
	padding-top: 0.1em;
	border-top: 0.5pt silver solid;
}

.rdg_note {
	display: inline; 
	color: brown;
	text-before:"  ";
}

div.p, h1, h2, h3 {
	display: block;
	line-height: 1.3em;
	position: relative;
	direction: ltr;
	text-align: justify;
	clear: both;
}

h1 {
	font-size: 120%;
	margin-bottom: 0.2em;
}

h2 {
	font-size: 110%;
	margin-bottom: 0.2em;
}

h3 {
	margin-bottom: 0.2em;
}


.emph {
	border: none;
	display: inline;
	color: brown;
}

.mssClr {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.5em;
}

.mss {
	color: green;
}

.mssGrouped {
	display: inline;
}

.mssUngrouped {
	display: none;
}

.left, .right, .paragraph-note {
	margin-left: 0;
	display: inherit;
	text-indent: 0 !important;
	line-height: 1em;
	font-size: 70%;
	font-style: normal; 
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	font-variant: normal;
	vertical-align: baseline; 
	letter-spacing: 0;
	direction: ltr;
}

.left p,.right p, .paragraph-note p {
	margin-left: 0;
	width: auto;
	line-height: 1em;
}

.left p, .right p {
	display: inline;
}

 .paragraph-note p {
	display: inline;
	padding-left: 10px !important;
	padding-right: 10px !important;
}

 .paragraph-note {
	display: block;
	padding: 0.2em 0.2em 0.2em 0.2em;
	max-height: 80px;
	overflow: auto;
	border: solid 1px grey;
	text-align: left;
	line-height: 1.3em !important;
	color: #404000;
	background-color: white;
	z-index: 1;
}

.left {
	display: block;
	margin-left: 0;
	position: relative;
	clear: both;
	left: -100px !important;
	width: 80px !important;
	/*float: left;*/
	font-size: 70%;
	top: 0.3em !important;
	text-align: right;
}

.right {
	display: block;
	position: relative;
	top: 0;
	left: 50px !important;
	width: 40px !important;
	margin-left: 0;
	clear: both;
	float: right;
	font-size: 70% !important;
	top: 0.3em;
	text-align: left;
}

.right:focus {
	color: red;
}

.facslinks {
	display: inline;
	color: aqua;
	transition-property: color;
	/*transition-property: text-shadow;*/
	transition-duration: 0.5s;
	transition-property: background-color;
	transition-duration: 0.5s;
}

.facslinks:before {
	content: "⇗";
	position: relative;
	top: -0.1em;
}

.facslinks.active, .facslinks:hover {
	color: red;
	/*background-color: yellow;*/
	text-shadow: 0 0.2em 10px red, 0 0.2em 20px orange; 
}

.witness .witness {
	display: block;
	margin-left: 1em;
	text-indent: -0.5em;
}

.sigil {
	color: brown;
}

.mss-desc {
	color: black;
}

.mentioned {
	color: blue;
}


.milestone-page, .milestone-line, .milestone-chapter, .milestone-chapterline  {
	font-family: Arial;
	font-size: 7pt;
	vertical-align: super;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
	text-transform: none;
	color: blue;
}

.milestone-chapter {
	display: none;
}

.milestone-chapter:after { content: " " }

.milestone-page, .milestone-line, .milestone-chapterline {
	display: none;
}

.milestone-page {
	font-size: 9pt;
}

.milestone-page:before { content: "p." }
.milestone-page:after { content: "" }

.milestone-line:before { content: "l." }
.milestone-line:after { content: "" }

.milestone-page + .milestone-line:before { content: "," }
.milestone-chapter + .milestone-chapterline:before { content: "," }

.appref, .noteref, a.anchor, .facslink, .facslinks {
	display: none;
}

.appref.activated, .noteref.activated, a.anchor.activated, .facslinks.activated {
	display: inline;
}

div.getXML, div.getCTE {
	width: 8em;
}

span.getXML:before {
content: "GET\A0 XML";
}

span.getCTE:before {
	content: "GET\A0 CTE";
}