@font-face {
	font-family: 'SBL BibLit';
	src: url("../fonts/SBL_BLit.ttf");
} 
  
@font-face {
	font-family: 'SBL Hebrew';
	src: url('../fonts/SBL_Hbrw.ttf');

}
  
@font-face {
	font-family: 'SBL Greek';
	src: url('../fonts/SBL_grk.ttf');

}

@font-face {
	font-family: 'Ezra SIL';
	src:url("../fonts/SILEOT.ttf");
	

}

@font-face {
	font-family: 'Estrangelo Antioch';
	src:url("../fonts/SyrCOMAntioch.otf")
}


@font-face {
	font-family: 'Serto';
	/*src: local('Serto Jerusalem');*/
	src:url("../fonts/syrcomjerusalem.ttf") format('truetype');
	src:url("../fonts/syrcomjerusalem.woff") format('woff');
	src:url("../fonts/syrcomjerusalem.svg") format('svg');
	src:url('../fonts/syrcomjerusalem.eot');
	src:url('../fonts/syrcomjerusalem.eot?#iefix') format('embedded-opentype'), url('../fonts/syrcomjerusalem.woff') format('woff'), url('../fonts/syrcomjerusalem.ttf') format('truetype'), url('../fonts/syrcomjerusalem.svg#syrcomjerusalem') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*
@font-face {
	font-family: 'Serto Jerusalem';
	src: local('Serto Jerusalem Bold');
	src: url('../fonts/syrcomjerusalembold.eot');
	src: url('../fonts/syrcomjerusalembold.eot?#iefix') format('embedded-opentype'), url('../fonts/syrcomjerusalembold.woff') format('woff'), url('../fonts/syrcomjerusalembold.ttf') format('truetype'), url('../fonts/syrcomjerusalembold.svg#syrcomjerusalembold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Serto Jerusalem';
	src: local('Serto Jerusalem Italic');
	src: url('../fonts/syrcomjerusalemitalic.eot');
	src: url('../fonts/syrcomjerusalemitalic.eot?#iefix') format('embedded-opentype'), url('/fonts/syrcomjerusalemitalic.woff') format('woff'), url('/fonts/syrcomjerusalemitalic.ttf') format('truetype'), url('/fonts/syrcomjerusalemitalic.svg#syrcomjerusalemitalic') format('svg');
	font-weight: normal;
	font-style: italic;
}

*/
@font-face {
	font-family: 'Gentium';
	src: local('Gentium Plus');
	src:url('../fonts/GentiumPlus-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gentium';
	src: local('Gentium Plus Italic');
	src:url('../fonts/GentiumPlus-Italic.ttf');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Gentium';
	src: local('Gentium Plus Bold');
	src:url('../fonts/GentiumPlus-Bold.ttf');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Gentium';
	src: local('Gentium Plus Bold Italic');
	src:url('../fonts/GentiumPlus-BoldItalic.ttf');
	font-weight: bold;
	font-style: italic;
}





table.verse{
	width: 80%;
}

table.verse td{
	vertical-align: top;
	
}

@media print {
	.nav, #main-nav, h3.verse::after, .tdsubhead, .book-menu-link, .verse-separator, .modal, #copyright {display: none !important}
	 table.verse {
		width: 100%;
	 }
	
	h3.verse {
		margin: 0;
	}
	 #bottom {
		content: counter(page);
	}
	
	.verse .greek, .verse .syriac, th h3 {
		font-size: 14pt !important;
	}
	a h1, h3 a {
		color: black !important;
		text-decoration: none !important;
	}
	/*.chapter-content {
	  column-count: 2;
	 }*/
	 
	 .rtl{
		/*direction: inherit;*/
	 }
}

@page {
  @bottom-right-corner	 {
    content: counter(page);
  }
}


@media only screen and (max-width: 900px)
{

	table.verse{
		width: 90%;
	}

}


@media only screen and (max-width: 720px)  {

	table.verse{
		width: auto;
	}

}

@media only screen and (max-width: 600px)  {
  /*(div.nav {
	position: absolute;
  }*/
  
  div.nav.next{
	right: 0;
  }
  
  /*.hebCol, .hebrew, .greek .gkCol {
	font-size: 150%;
  }*/
  
  div#main-nav {
	text-align:left;
  }
  
  div.nav.top-bottom {
	position: relative;
	float: right;
  }
  
  table.verse
  {
	width: auto;
  }
  
  	
	a.sbl.long {
		display: none;
	}

	a.sbl.short {
		display: inline !important;
	}
}

@media only screen and (max-width: 500px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1090px), 
only screen and (min-resolution: 200dpi) and (max-width: 1090px) {

	html {
		font-size: 5vw;
	}
	#main-nav {
		position:relative !important;
		display:block;
		margin:auto;
		text-align:center !important;
		width:auto !important;
		top:50px !important;
	}
	
	#menu-button {
		position:fixed;
		top:0;
		display:block;
		width: 100% !important;
		float:none;
		margin: auto;
		border-bottom: 2px solid black;
		padding:0 !important;
	}
	
	
	
	div.nav.next {display: none !important;}
	/*div.nav img {height: 15px !important; width: 15px !important}
	div.nav.top-bottom a.nav.font, div.nav.top-bottom a.nav.morph {font-size:1.5em !important;}*/
	/*div.nav.top-bottom {
		float: none;
		position:relative !important;
		vertical-align: middle;
	}*/


	
	.hebCol,td:nth-child(1) {font-size:1.5em; padding-right: 3px; }
	.gkCol, td:nth-child(2){font-size: 1.5em;padding-left:3px;}
	
	a#book-search-toggle-button {
		display:inline-block !important;
		float:left;
		
	}
	
	.jquery-modal.blocker {
		padding: 0;
		
	}
	
	.jquery-modal.blocker .modal {
		width: 100%;
	}
	
	.jquery-modal.blocker .modal a.close-modal {
		top: 5px;
		right:5px;
		/*position:fixed;*/ /*NB: this makes the close button hard to see in dark-mode!*/
	}
	
	table.verse
	{
		width: auto;
	}
/*}



@media only screen and (max-width: 400px) {*/
	
	table.chapter-heading td {
		display: block;
		width: 100%;
	}
	
	body .verse div, body .verse td, h1 {
		font-size: 1.2em !important;
	}
	
	body.serto .verse div.syriac:not(.estrangelo), body.serto .verse div .syriac:not(.estrangelo)
	{
		/*font-size: 1.3em !important;*/
	}
	
	table.chapter-heading h2 {
		font-size: smaller !important;
		
	}

	table.chapter-heading td {
		margin:0;
	}
	
	table.chapter-heading h2 {
		margin: 0 !important;
		margin-left: 0px;
		margin-right: 0px;
	}
}


/* Font styles */
   /* font families*/
/**html, #main-nav, #main-nav select, #main-nav button, #main-nav option {font-family: "SBL BibLit", serif, "Times New Roman" !important}**/
/*td.hebrew {}
td.greek {}*/

body {
	font-family: 'SBL BibLit', Gentium, "Times New Roman", serif;
}

.greek {font-family: 'SBL Greek', Gentium, "Times New Roman", serif}
.syriac, div.syriac, table tr td .syriac { font-family: 'Estrangelo Antioch';}
.verse .greek, .verse .syriac {font-size: 1.5em;}

body.serto .verse .syriac:not(.estrangelo) {font-size: 1.7em;}

body.serto .syriac, body.serto div.syriac, body.serto table tr td .syriac
/*{font-family: 'Serto Jerusalem'}*/
{font-family: 'Serto'}

.serto.syriac {
	/*font-family: 'Serto Jerusalem' !important;*/
	font-family: 'Serto' !important;
}

.estrangelo.syriac, .syriac .estrangelo, .estrangelo .syriac {
	font-family: 'Estrangelo Antioch' !important;
}



body.sbl .greek, .sbl {font-family: 'SBL Greek', Gentium, "Times New Roman", serif;}

body.syriac-bold  div.syriac, body.syriac-bold .syriac, body.syriac-bold table td td .syriac, 
body.greek-bold  div.greek, body.greek-bold .greek, body.greek-bold table td td .greek
{
	font-weight: bold;
}

body.alt-greek-font .greek, .gentium {font-family:  Gentium, 'SBL Greek',"Times New Roman", serif;}
div.nav.top-bottom a.nav.font, div.nav.top-bottom a.nav.morph {font-size:2em; color: black; display:inline-block; vertical-align:middle}


span .sbl.greek:not(.gentium), .sbl.greek:not(.gentium), span .sbl.greek :not(.gentium){
	font-family: 'SBL Greek', serif !important;
}

.gentium.greek {
  font-family: 'Gentium' !important;
}


   /*font decoration/size*/
a, .modal a, body.dark-mode .modal a, body.dark-mode a.book-link, body.dark-mode .popup.nav-menu a {
	text-decoration:none;
	color: #1111aa;
}

.book-link {
    font-weight: bold;
}




body.dark-mode a{
	text-decoration:none;
	color: #79b3f7;
}
a:hover h1, a:hover h2, h3 a:hover  {
	text-decoration:underline !important;
}
 
h3.verse {font-variant: small-caps;}	
hr {background-color: black}

h1{text-align:center}

.hebCol,td:nth-child(1) {text-align:right;  padding-right: 10px; width: 50%;}

.gkCol, td:nth-child(2){text-align:left; padding-left:10px}

tr.tdsubhead td {font-size: small; border-bottom: 1px black solid;}
tr.phrase td {border-bottom: 1px #ccc dashed; }
tr.phrase:last-child td {border-bottom:0px;}

/*div.nav{ font-family: "Arial Black"; font-size: xx-large; }*/
div.nav img {height: 30px; width: 30px; vertical-align:middle; padding:3px}

.small {
	font-size: small;
}

.phrase a {
	color:inherit;
	text-decoration: none;
}

.phrase a:hover {
	text-decoration: underline;
}

hr.verse-separator {
	height: 2px;
}

form#lookup{text-align:center}

html {
	/*width:100%;
	margin:0;*/
	
}	

h1 {
	padding-top: 50px
}
/* h2 used in book printing*/
h2 {

}
#main-nav {
	position: fixed;
	z-index:1000;
	top: 0;
	
	/*font-family: 'SBL BibLit', "Times";*/
	/*font-size: 1.5em;*/
	background: rgba(255,255,255, 0.9);
	width: 100%;
	text-align:center;
	left: 0;
	border-bottom: 2px black solid;
	min-height:45px;
}

body.dark-mode #main-nav {
	border-bottom: 2px white solid;
	background: rgba(0,0,0, 0.9);
}

div.nav.top-bottom { 
	/*float:right;*/
	position: fixed;
	top:0;
	right:0;
	display:inline;
	/*display:none;*/
}


#main-nav form {
	display:inline;

}
#main-nav select, form#lookup select, #main-nav button {
	font-size:1.5em;
	min-height:30px;

}

select#bookref {
	font-weight: bold;

}

.chapter-content {
	z-index:100;
}

.chapter-content div.nav.next {
	position: absolute;
	right: 0;
	z-index: 10;
}
.chapter-content div.nav.next img {
	background-color:white;
}

h3.verse::before { 
  display: block; 
  content: " "; 
  margin-top: -50px; 
  height: 50px; 
  visibility: hidden; 
  pointer-events: none;
}

body.dark-mode {
	background-color: black;
	color:white;
}


body.dark-mode tr.tdsubhead td, body.dark-mode tr.phrase td a  {
	border-color: white;
	color:white;
}

body.dark-mode tr.phrase td {
	border-bottom-color: #555;
	color:white;
}

body.dark-mode hr {
	color: white;
	border-color: white;
	background-color: white;
}


body.dark-mode .chapter-content{
	color: white;
	background-color:black;
}

body.dark-mode .nav.top-bottom {
	background-color:white;
}

body.dark-mode .nav.next img{
/*	background-color:#777;*/
}

h3 a.nav img {

    width: 1em;
    display: inline-block !important;
	
}

h3 a.nav.prev img {
	float:left;
}

h3 a.nav.next img, h3 a.nav.top img {
	float:right;
}

table.centered {
	margin-right: auto;
	margin-left: auto;
}

.center {
	text-align:center;
}

hr.thick {

 height:4px;
   
}

.overlay {
	border: 2px solid black;
	background-color: #ddd;
	max-height: 90vh;
	overflow-y:scroll;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	position:fixed;
	display:none;

}

.overlay, .overlay div {
	
	
}
#morph-overlay {
	/*display:none;
	position: fixed;*/
	/*top: 50px;*/
	/*z-index: 500;*/
	/*color: black;*/
/*	width: 80%;*/
	/*background-color: #eeeeee;*/
}

div.footnote {
	display: inline-block;
}

.footnote {
	font-size: .4em ;
/*	line-height:.4em;*/
	vertical-align: super;
	position:relative;
	
}
	
.hebrewLine .footnote {
	float:right;
	direction: ltr;
}
#close-help, .close-link {

	float:right; padding-right: 20px; display:inline-block; font-size:x-large;
}


/*#help-overlay {
	display:none;
	z-index: 1001;
	background: #eeeeee;
	position: fixed;
	
	color:black;
	
}*/



#nav-buttons.unbold a:not(.bold), .unbold a span:not(.bold){
	font-weight: normal !important;
}

.bold, #nav-buttons.unbold a span.bold, #nav-buttons.unbold a .bold {
	font-weight: bold !important;
}

#help-overlay {
	font-size: larger;
}

#wordinfo-note {
	display:none;
	position:fixed;
	top:50px;
	z-index:200;
	right:0;
	
	background-color:red;
	color:white;
}

#wordOverlay {
	font-size: larger;
}

.verse-ref {
	display: inline-block;
	float: right;
	font-size: small;
}

.modal {
	color: black;
}

.modal a {
	
}



/*#help-button {

	display: block;
	width:40px;
	height: 40px;
	vertical-align: middle;
	position: fixed;
	right: 0;
	bottom: 0;
	background-color:#333;

}

#help-button a {
	color: white;
	font-size: x-large;
	font-weight: bold;
	text-align:center;
	vertical-align:middle;
	position:relative;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	display: inline-block;
}
*/

#menu {
	display:none;
}

.popup, div.nav.popup {
	display:none;
	position: fixed;
	top:0px;
	bottom:0;
	left:0;
	right:0;
	z-index:1000;
	background-color: rgba(50,50,50, 0.8) !important;
	color:white;
	padding: 20px 10px;
	text-align:center;
}

div.nav.popup .nav.button {
	display:inline-block;
	/*width: 100px;
	height: 100px;*/
	min-width: 45px;
	min-height: 45px;
	max-width:45%;
	/*border-width: 2px;*/
	background-color:white;
	color:black;
	padding: 10px;
	font-size:40px !important;
	vertical-align: middle;
	text-align: center;
	margin: 5px;
}

div.nav.popup .nav.button img {
	min-width: 45px;
	min-height: 45px;
	max-width:45%;
	padding: 0;
	margin:0;
	border:none;
	
}

#nav-buttons {
	padding-top: 90px;
}


.jquery-modal.blocker.current {
	z-index:2000
}

#menu-button {
display:inline-block;
/*float:right;*/
position:fixed;
top:0;
right:0;
padding: 0px 10px;
font-size: 2em;
width:45px;
height: 45px;
color: black;
background-color: rgba(255,255,255,.9);
text-align:center;
font-weight: bold;
z-index: 1000;
}

#close-menu-button::before, .close-button::before {
    content: ' ';
    clear: both;
    display: block;
}

#close-menu-button{
	color:white !important;
}

body.dark-mode #close-menu-button, #close-menu-button, .close-button {
clear:both;
margin:auto;
background-color:rgba(0,0,0,0.5);
color:white !important;
font-size: 3em;
font-weight: bold;
}
.rtl {
	direction:rtl;
	float:right;
}

.inline-block {
	display:inline-block;
}

body.morph-mode .greek a:hover {
    text-decoration: underline;
}

div.hebword {
    display:inline-block;
    float:right;
    direction: rtl;
    /*padding-left: 5px;*/
}

.greek a:hover {
   text-decoration: none;
}

.space {
	padding: 1px;
}
.hebrewLine {
	/*direction: rtl;*/ /*NB: setting 'direction' to  'rtl' garbles the betacode 'title' attribute text.*/
	display:block;
	clear:both;
}

.clear {
	clear:both;
}
.hebrewLine > div, .rtl > div {
	display: inline-block;
	float:right;
	direction: rtl;

	
}
#verse-menu, #chapter-menu, #book-menu {
	display:none;
	background-color:rgba(0,0,0,0.8);
	overflow-y:scroll;
	
	/*position: fixed;*/
	/*top:30px;*/
	
}	

.popup.nav-menu h2 {
	background-color: rgba(0,0,0,0.5);
}

a.verse-link, a.chapter-link, a.book-link {
		font-weight: bold;
		display:inline-block;
		background-color:white;
		font-size: 2em;
		color: black;
		padding: 5px;
		min-height: 1em;
		min-width: 2em;
		margin: 5px;
		border: 1px solid #333333;
}

a.book-link {
	min-width: 4em;
	
}
#close-all-button{
	position:fixed;
	display:none;
	right:0;
	top:0;
	min-width:40px;
	padding:5px 10px;
	font-size:2.5em;
	z-index: 10000;
	background-color:rgba(255,255,255,0.9);
	color:black;
	font-weight:bold;
	text-align: center;
	border:2px solid black;
}

#book-search-toggle-button {
	display:none;
	
}
#book-search-toggle-button img {
	width: 1.5em;
	
	
}

/*
.hebrewLine > div.vocalized {
	display:none;
}
*/

div.hebword.vocalized {
	display:none;
}

body.vocalization .hebrewLine > div.hebword.vocalized {
	display:inline-block;
}

body.vocalization .hebrewLine > div.hebword.hebA.vocalizable,
body.vocalization .hebrewLine .space.vocalizable
{
	display:none !important;
}

/*body.vocalization .hebrewLine > div.hebword.hebA.ketiv, 
body.vocalization .hebrewLine > div.footnote.ketiv {
	display:inline-block !important;
}
* */

tr.tdsubhead td {
	vertical-align: middle;
}

tr.tdsubhead td.syriac {
	font-size: 1.5em;
}

a.greek-apparatus-link {
	display: inline;
}


body.no-greek-apparatus a.greek-apparatus-link {
	display: none;
}

body.no-diacritics div.no-diacritics, div.diacritics {
	display: block;
}

body.no-diacritics div.diacritics, div.no-diacritics {
	display: none;
}


body.unvocalized div.unvocalized, div.vocalized {
	display: block; 
}

body.unvocalized div.vocalized, div.unvocalized {
	display: none;
}

table.verse th {
	
	}

table.chapter-heading h2 {
	margin: 0;
	margin-left: 50px;
	margin-right: 50px;
}

table.chapter-heading td.greek h2 {
	font-size: 1em;
}

table.chapter-heading td {
	
	
}


tr.verse td.english {
 text-align: center;
 display: none;
 
}

body.english td.english{
	display: table-cell;
}
 
 
div#copyright {
	text-align: center;
	font-size: smaller;
	
}

table.verse hr.verse-heading {
	
}

a.sbl.short {
	display: none;
}

hr.english {
	border: none;
	background: none !important;
	border-top-width: 1px !important;
	border-top-style: dashed !important;
	
	color: #888888;
}


.tabs {

   width: 100%;
    height:30px; 
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;
   

}

.tabs li {
    float:left; 
    list-style:none; 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    border-right:1px solid #ccc; 
    margin-right:5px; 
    border-top-left-radius:3px;  
    border-top-right-radius:3px;
      outline:none;
}

.tabs li a {

    font-family:Arial, Helvetica, sans-serif; 
    font-size: small;
    font-weight: bold; 
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px; 
    display:block; 
    background: #FFF;
    border-top-left-radius:3px; 
    border-top-right-radius:3px; 
    text-decoration:none;
    outline:none;
  
}

.tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

.tabs li a:hover, .tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}

.tab-container {

    clear:both;           
    width:100%; 
    border-left: solid 1px #CCC;
      border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
    text-align:left;
  padding-top: 20px;
  display: none;

}



.tab-container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.tab-container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.tab-container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.tab-container li { padding-bottom: 5px; margin-left: 5px;}