/* Style sheet for the Liber 777 app */

@media all {
  body {
	background: #CCC url(../Images/babalon-hex) top left fixed repeat;
	color: #cc3;
  }
  div#content-header {
	background: transparent url(../Images/shadow-11-pct) top left repeat;
  }
  div#content-notes {
	background: transparent url(../Images/shadow-11-pct) top left repeat;
	border: 1px solid gray;
  }
  div#content-notes p {
	border-top: 1px solid #cc3;
	border-bottom: 1px solid #cc3;
	width: 70%;
  }
  div.drop {
	float: left;
	margin-left: 1em;
	background: transparent url(../Images/action_no) 50% 50% no-repeat;
	text-align: center;
	vertical-align: middle;
	padding: 2px 4px;
	border: 1px solid #cc3;
  }
  div.drop a { color: white; }
  div.drop a:hover { color: red; text-decoration: none; }
  .b0 { background-color: #cff; }
  .b1 { background-color: #ffc; }
}
@media print {
  body {
	background: white;
	color: black;
  }
  div.box-form {
	display: none;
	visibility: hidden;
  }
  div#content-notes p {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	width: 90%;
  }
  div.drop { display: none; }
  .b0 { background-color: #ccc;  }
  .b1 { background-color: white; }
  .b0, .b1 { border-bottom: 1px solid gray; }
}

body {
	margin: 0;
	padding: 0;
}
div#content-header {
	width: 90%;
	margin: 0 auto;
	clear: both;
	padding: 1em 0;
	text-align: right;
}
div#content-header div.box-form {
	float: right;
}
div#content-main {
	background-color: transparent;
	width: 98%;
	margin: 0 auto;
	padding: 1em 4px;
}
div.content-hdr {
	float: left;
	width: 100%;
}
div.content-title {
	float: left;
	margin: 0;
	width: 100%;
	height: 6em;
	line-height: 1.3em;
	text-align: center;
	font-weight: bold;
	font-size: larger;
}
div.content-data {
	float: left;
	margin: 0;
	width: 100%;
}
div.box-form {
	white-space: pre;
	overflow: hidden;
	text-align: center;
	height: 1.3em;
	vertical-align: middle;
}
div#content-notes {
	clear: both;
	margin: 1em auto;
	padding: 0.5em;
}
div#content-notes p {
	margin: 1em 2em;
	padding: 12px 0;
}
div#print-link {
	float: left;
	margin-left: 1em;
	visibility: hidden;
}
div.box-0 {
	height: 5.4em !important;
}
div.content-0 {
	margin: 2px 2px 1em 2px;
	width: 10%;
	max-width: 4em;
	float: left;
	clear: left;
}
div.content-N {
	margin: 2px 2px 1em 0;
	float: left;
}
div.b0,
div.b1 {
	float: left;
	width: 100%;
	color: black;
	white-space: normal;
	overflow: hidden;
	height: 1.8em;
	line-height: 1.8em;
	vertical-align: middle;
}
.alpha {
	width: 52%;
	text-align: right;
	padding-right: 4px;
}
.hebrew {
	float: left;
	width: 100%;
	background-color: transparent;
}
.alpha,
.hebrew2,
.english {
	float: left;
	background-color: transparent;
}
.hebrew2,
.hebrew {
	text-align: right;
	direction: rtl;
	font-size: x-large;
	padding-right: 4px;
}
.hebrew2 {
	width: 58%;
}
.hebrew2 span.enum,
.hebrew span.enum {
	font-size: small;
}
div.block-fmt-r,
div.block-fmt-l {
	float: left;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
}
div.block-fmt-l {
	width: 78%;
	padding-right: 8px;
}
div.block-fmt-r {
	width: 15%;
	padding-left: 2px;
	text-align: right;
}

.arabic,
.greek,
.coptic {
	font-family: "New Athena Unicode", sans-serif;
}
.english {
	width: 38%;
	direction: ltr;
	padding-left: 4px;
}
.l,
.r,
.c  { float: left; width: 100%; }
.l	{ text-align: left; padding-left: 4px; }
.r	{ text-align: right; padding-right: 8px; }
.c	{ text-align: center; }
h1,
h2,
h3	{
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
a {
	text-decoration: none;
	background-color: transparent;
	color: red;
}
a:active, a:hover {
	text-decoration: underline;
	background-color: yellow;
}
div#divLeftMenuBtm div.btn a:active,
div#divLeftMenuBtm div.btn a:hover {
	text-decoration: none;
	background-color: #ccc;
}

div#content-hdr,
div#content-tlr {
    display: flex;
    flex-flow: row wrap;
    flex: 0 0 96vw;
    width: 96vw;
    margin: 0.5em auto;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.11);
}
div#content-tlr {
    border: 1px solid white;
    border-radius: 1em;
    padding: 5px 0.5em;
}
div#content-tlr p {
    max-width: 40em;
}
div#content-body {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 0 96vw;
    width: 96vw;
    justify-content: center;
    align-items: flex-start;
    background: rgba(0,0,0,0.11);
}
div.notes {
    color: black;
    background: rgba(213,255,255,0.95);
    display: none;
    position: absolute;
    width: 80vw;
    max-width: 30em;
    padding: 1vw;
    border: 1px solid white;
    border-radius: 2vw;
    box-shadow: 5px 8px 8px rgba(0,0,0,0.3);
}
div.wide {
    display: flex;
    flex: 0 0 100%;
    width: 99%;
}
div.box-list {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 100;
    align-items: flex-start;
    margin-right: 2px;
}
div.box {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: center;
    min-height: 1.5em;
    padding: 2px 1px;
}
div.box-list div.box {
    flex: 0 0 100%;
    width: 100%;
    padding: 0;
    margin: 1px 2px;
}
div.dropit {
    display: flex;
    flex: 1 1 auto;
    padding: 2px;
    border: 1px solid white;
    border-radius: 0.2em;
    background: rgba(255,156,156,0.3);
    margin: 0 1px;
}
div.dropit p { width: 100%; text-align: center; line-height: 1.2em; margin: 0; }
h4, h2 { width: 100%; text-align: center; }
img.char {
    display: inline;
    height: 1em;
    vertical-align: sub;
}
.dsp0, .dsp1 { color: black; line-height: 1.2em; }
.dsp0 { background: rgba(235,245,251,0.9); }
.dsp1 { background: rgba(214,234,248,0.9); }
.dsp0 p,
.dsp0 h4,
.dsp1 p,
.dsp1 h4 {
    width: 100%; margin: 0; padding: 0 4px;
    max-width: 18vw;
    white-space: pre; overflow: hidden;
}
div.notes h2, div.notes h4 { white-space: normal; overflow: auto; }
.linkish { cursor: pointer; color: red; }
.set-hdr { border-top: 1px solid white; border-bottom: 1px solid white; }
.lf { width: 100%; text-align: left; }
.rt { width: 100%; text-align: right; }
.ctr{ width: 100%; text-align: center; }