/* CSS-MÄÄRITYKSET ALKAVAT */

@font-face {
    font-family: 'Ezra';
    src: url('fonts/ezrasilsr.eot?#iefix') format('embedded-opentype'),
		url('fonts/ezrasilsr.woff2') format('woff2'),
		url('fonts/ezrasilsr.woff') format('woff'),
	    url('fonts/ezrasilsr.ttf') format('truetype'),
		url('fonts/ezrasilsr.svg#EzraSILSR') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	background-color: #3B4C3B;
	margin: 0;
	padding: 0;
	font-family: Athelas;
	font-size: 1em; 
	-webkit-text-size-adjust: 100%;
}

@media screen {
	#header {
		border: none;
		margin: 0 auto;
		max-width: 1900px;
		width: 100%;
	}

	#main {
		margin: 0 auto;
		max-width: 1900px;
		width: 100%;
	}

	#footer {
		margin: 0 auto;
		max-width: 1900px;
		width: 100%;
	}
	#navibar {
		background-color: #222;
		height: 60px;
		padding: 0;
		margin: 0 auto;
		max-width: 1900px;
		width: 100%;
		display: block;
	}

	#some {
		margin: 0 auto 1em;
		text-align: center;
	}

	.toggled {
		height: auto;		// oli 460px
	}

	li.menu-item {
		padding: 10px;
		margin: 0;
		display: inline-block;
		font-family: Athelas;
		font-size: 1em;
	}
	
	li.menu-item a, li.menu-item a:visited, li.menu-item a:hover {
		color: #FFF;
	}

	#menu {
		float: right;
		margin: 1em 0 0;
		min-height: 750px;
		vertical-align: top;
		width: 18em;
	}

	#print {
		clear: both;
		margin: 0.625em auto;
	}

	#counter {
		font-family: 'Bilbo Swash Caps';
		font-size: 1em;
		font-weight: 500;
		text-align: center;
		vertical-align: bottom;
		display: inline-block;
	}

	.menublock input {
		font-size: 1.2em;
	}

	input.butbut {
		display: inline-block;
		padding: 5px 15px;
		font-size: 1em;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		outline: none;
		color: #fff;
		background-color: #329933;
		border: none;
		border-radius: 0.5em;
		box-shadow: 0 6px #3c4c3b;
		margin: 0.2em 0;
	}

	input.butbut:hover {
		background-color: #7c7
	}

	input.butbut:active {
		background-color: #deb;
		box-shadow: 0 5px #3c4c3b;
		transform: translateY(4px);
	}
	
	#mapbox {
		height: auto;
		padding: 30px 0;
	}

	#mapbox h5 {
		margin: 15px 5px 0;
	}

	select.menu {
		border-color:#999;
	}

	div.menublock {
		background-color: #FFF;
		border-radius: 5px 25px;
		font-family: Arial;
		font-size: 1em;
		margin-bottom: 20px;
		padding: 30px;
		text-align: center;
	}

	.menublock ul {
		line-height: 1.5em;
		list-style: none;
		margin: 0;
		padding: 0 0 0 5px;
	}

	.menublock ul li {
		margin: 0;
		text-align: left;
		text-indent: -1em;
		padding-left: 1em;
	}

	p.chunk {
		font-family: Arial;
		font-size: 1.1em;
		margin: 5px auto 15px;
	//	padding: 0 0 0 25px;
		text-align: center;
	}

	#contentholder {
		width: 100%;
	}

	#content {
		background-color: #FFF;
		margin: 1em 0;
		padding: 2em 2em 0;
		position: relative;
		vertical-align: top;
	}

	#topnavbar {
		display: flex;
		height: 3.125em;
		margin: -2em -2em -1.25em;
		width: auto;
	}

	#bottomnavbar {
		display: flex;
		margin: 0px -2em;
		width: auto;
/*		height: 3.125em;
		position: absolute;
		bottom: 0; 			*/
	}

	#refholder {
		margin: -1.25em 0 0.5em;
		padding: 0.3125em 2em 1.25em;
		background: #e8e8e8;
	}

	#refs {
		margin-bottom: 1.25em;
	}

	#refs h4 {
		margin-bottom: 0;
	}

	#warning {
		background-color: #DEB;
		border: 2px dotted #000;
		font-size: 1em;
		padding: 0.625em;
		position: fixed;
		right: 1.25em;
		text-align: justify;
		top: 1.25em;
		width: 90%;
		z-index: 150;
	}

	#warning p {
		margin: 0;
	}

	div.alert {
		background-color: #DEB;
		border: 2px dotted #000;
		font-size: 1em;
		line-height: 1.5em;
		margin: 1.25em auto;
		padding: 0.625em;
	}

	#abcnav {
		border: 1px solid blue;
		float: left;
		margin: 0 auto 0 auto;
		top: auto;
		width: 550px;
	}

	img.menu {
		margin-top: -10px;
	}

	img.feature {
		border-radius: 5px 25px;
	}

	p.credit, p.nocredit {
		float: right;
		font-size: 0.7em;
		padding: 0 0.5em;
		position: relative;
		top: -2em;
	}

	p.credit {
		background-color: #fff;
		border-radius: 10px 0 0 10px;
		border: 1px solid #fff;
	}

	span.more {
		float: right;
	}

	div.box {
		margin-bottom: 1.25em;
	}

	div.title {
		clear: both;
		padding: 0.75em 0;
		max-width: 35em;
		margin: auto;
	}

	div.descr {
/*		background-color: #DEB;
		border: 1px dotted #000;	*/
		height: 6.5em;
		margin-left: 6em;
		padding: 0.5em;
	}

	.descr p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	div.title img {
		height: 7.5em;
		width: 5em;
	}

	.rt {
		float: right;
	}

	.lt {
		float: left;
	}

	figure.fleft {
		display: table;
		float: left;
		margin: 1em;
		margin-left: 0;
		clear: both;
	}

	figure.fright {
		display: table;
		float: right;
		margin: 1em;
		margin-right: 0;
		clear: both;
	}

	figure.center {
		display: table;
		margin: 1em auto;
	}

	figcaption {
		caption-side: bottom;
		display: table-caption;
		font-style: italic;
		text-align: center;
		font-size: 0.9em;
	}

	figure img {
		border: 1px solid #000;
	}

	div.clear {
		clear: both;
		font-size: 1px;
		height: 1px;
	}

	div.mediabox {
		text-align: center;
	}

	div.bibleholder {
		clear: both;
		font-style: italic;
		line-height: 1.5em;
		margin: 0 auto;
		text-align: justify;
		vertical-align: top;
	}

	div.bible-top {
		background: url(img/scroll-top.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 1.25em 0 0;
		padding: 1em // 2.5em 1em;
		height: 50px;
	}

	div.bible-bottom {
		background: url(img/scroll-bottom.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0 0 1.25em;
		padding: 1em // 2.5em 1em;
		height: 50px;
	}

	div.bible {
		background: url(img/scroll-mid.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0;
		padding: 0 0 0.5em;
	}

	div.single {
		max-width: 100%;
	}

	div.old {
		margin: -0.7em 0 0;
		max-width: 100%;
	}

	div.new {
		margin: -0.7em 0 0;
		max-width: 100%;
	}

	div.single p, div.old p, div.new p {
		padding: 0 2.5em;
		margin: 0;
	}

	div.bibleholder sup {
		font-style: normal;
	}

	div.ll {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
		flex: 1;
		float: left;
		font-size: 0.9em;
		font-style: italic;
		overflow: hidden;
		padding: 5px 10px 0;
		position: relative;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	div.rl {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
		flex: 1;
		float: right;
		font-size: 0.9em;
		font-style: italic;
		overflow: hidden;
		padding: 5px 10px 0;
		position: relative;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Mikähän tämä on? */
	table.base {		
		background-color: #FFF;
		margin-left: auto;
		margin-right: auto;
	}

	/* Sisällysluettelo Raamatun luvusta */
	table.sections {
		color: black;
		font-family: "Athelas";
		font-size: 1.2em;
		line-height: 1em;
		width: 100%;
	}

	td.r {
		padding-right: 10px;
		text-align: right;
		vertical-align: top;
		width: 60px;
	}

	td.l, td.l1, td.l2, td.l3 {
		text-align: left;
	}

	td.l2 {
		font-size: 0.9em;
		padding-left: 1.5em;
	}

	td.l3 {
		font-size: 0.8em;
		padding-left: 3em;
	}

	td.h {
		color: #323E55;
		font-family: 'Bilbo Swash Caps';
		font-size: 1.8em;
		font-weight: bold;
		padding-top: 1.25em;
		text-align: left;
	}

/*	table.bible {	// Taulukko 1–4 raamatuntekstin sijoittamiseen rinnakkain vertailua varten. Ei käytössä.
		font-style: italic;
		margin: 10px auto 2px;
		padding: 10px;
		text-align: justify;
	}

	td.whole {
		border: 1px dotted #000;
		margin: 5px;
		padding: 5px;
		width: 564px;
	}

	td.half {
		border: 1px dotted #000;
		margin: 5px;
		padding: 5px;
		width: 282px;
	}

	td.third {
		border: 1px dotted #000;
		margin: 5px;
		padding: 5px;
		width: 188px;
	}

	td.quarter {
		border: 1px dotted #000;
		margin: 5px;
		padding: 5px;
		width: 141px;
	} */

/*	table.chars {	// Arvoituksellinen raidallinen taulukko, jonka riviväri vaihtuu vuorotellen. Ei käytössä?
	margin: 10px auto;
	font-family: Athelas;
}

table.chars tr:nth-child(odd) {
	background: #FFF;
}

table.chars tr:nth-child(even) {
	background: #EEE;
}

table.chars td {
	padding: 2px 20px;
} */

	H1 {
		clear: both;
		color: #000;
		font-family: Athelas;
		font-size: 1.4em;
		font-style: italic;
		line-height: 1.4em;
		margin: 1em 0 0.3em;
		text-align: center;
	}

	H1 span {
		color: #000;
		font-family: 'Bilbo Swash Caps';
		font-size: 2em;
		font-weight: 500;
	}

	H2,H3,H4,H5 {
		font-family: 'Bilbo Swash Caps';
		text-align: left;
		clear: both;
	}

	H2 {
		color: #000;
		font-size: 2.2em;
		font-weight: 500;
		margin: 1em 0 0.2em;
	}

	H3 {
		color: #000;
		font-size: 1.9em;
		font-weight: 500;
		margin: 1em 0 0.2em;
	}

	H1 a, H3 a, H4 a {
		font-weight: 500;
	}

	H4 {
		color: #272;
		font-size: 1.6em;
		margin: 1em 0 0.2em;
	}

	H4.menu {
		color: #000;
		font-weight: 500;
		margin: 0;
		text-align: center;
		font-size: 1.8em;
	}

	H5 {
		color: #32553E;
		font-size: 1.4em;
		font-weight: 500;
		margin: 1em 0 0.2em;
	}

	img {
		border: 0;
		margin: 0;
		max-width: 100%;
		vertical-align: middle;
	}

	sup {
		font-family: Athelas;
		font-size: 0.6em;
		line-height: 0;
		vertical-align: super;
	}

	p {
		color: black;
		font-family: Athelas;
		font-size: 1em;
		line-height: 1.5em;
		margin: 0 0 1.25em;
		text-align: justify;
	}

	p.nomargin {
		margin: 0;
	}

	p.menu {
		font-size: 0.9em;
		margin: 5px;
		text-align: center;
	}

/*	p.book {
		margin: 40px 20px 10px 20px;
	} */

	p.vs {
		font-size: 1.2em;
		font-weight: bold;
		text-align: center;
	}

	p.div {	
		font-size: 0.9em;
		text-align: center;
	}

	p.cstamp {
		font-size: 0.8em;
		margin: 0;
		padding: 0;
		text-align: center;
		font-style: italic;
	}

	p.stamp {
		clear: both;
		font-size: 0.8em;
		font-style: italic;
		margin: -2.5em 0 1em;
		padding: 0;
		text-align: right;
		width: 100%;
	}

	p.cont {
		margin: 1em;
		clear: both;
		text-align: center;
	}

	p.quote {
		color: #0000AD;
		font-style: italic;
		font-weight: bold;
		margin: 0 2em 2em;
	}
	
	p.quote sup {
		font-style: normal;
	}

	p.who {
		text-align: right;
		margin: -2em 2em 2em;
	}

	p.bible {		/* Tämä saattaa kaivata uusimista kirjakääröksi. */
		border: 1px dotted #000;
		font-style: italic;
		margin: 10px 50px 10px 50px;
		padding: 10px;
		text-align: justify;
	}

	p.ref {
		font-size: 1em;
		margin-bottom: 0.2em;
		margin-left: 1.8em;
		margin-top: 0.2em;
		text-indent: -1.8em;
	}

	p.sort {
		text-align: center;
		margin: 10px auto 25px;
	}

	div.sort {
		background-color: #DEB;
		border: 2px dotted #000;
		display: block;
		margin: 0.2em auto;
		max-width: max-content;
		padding: 0.1em;
		text-align: center;
	}

	input#nimi, input#email, input#aihe {
		width: 17em;
	}

	textarea#viesti {
		height: 10em;
		width: 17em;
	}

	.links {
		font-size: 0.8em;
		padding: 0 1em;
	}

	hr {
		height: 1px;
		margin-top: 1em;
		text-align: center;
		width: 50%;
	}

	hr.pop {
		width: 10%;
	}

	dl {
		margin-bottom: 1em;
		margin-top: 0;
		text-align: left;
	}

	dt {
		color: #323E55;
		font-family: 'Bilbo Swash Caps';
		font-size: 2em;
		font-weight: bold;
		margin-top: 30px;
	}

	dd {
		font-family: Athelas;
		font-size: 1em;
		display: list-item;
		list-style-type: none;
		margin: 0.2em 2em;
		text-align: justify;
	}
	
	dl.abc > dd {
		list-style-type: '– ';
		text-align: left;
	}

	dl.abc > dd.defn {
		text-align: justify;
	}

	dl.month > dd {
		text-align: justify;
	}

	dd.sub {
		color: #323E55;
		display: inline-block;
		font-size: 1.1em;
		font-weight: bold;
		margin: 0.5em 1em 0;
	}

	.defn {
		display: block;
		margin: 0 1em;
		text-align: justify;
	}

	dd.defn a:link {
		color: #096;	
	}

	dd.defn a:visited {
		color: #074;	
	}
	
	dl.map p {
		text-align: left;
	}

	ul {
		line-height: 1.5em;
		list-style-type: '–  ';
		margin: 0 1em 1.25em 0;
	}

	ul.elsewhere > li::before {
		content: "★";
		font-size: 0.6em;
		position: absolute;
		left: 6em;
	}
	
	ul.elsewhere {
		list-style-type: none;
	}

	ol {
		line-height: 1.5em;
		list-style: decimal outside;
		margin: 0 1em 1.25em 0;
	}

	li {
		font-family: Athelas;
		font-size: 1em;
		margin: 0.5em 0;
		text-align: justify;
	}

	ul.quote, ol.quote {
		margin: 0.2em 2em 2em;
		text-align: justify;
		color: #0000AD;
		font-style: italic;
		font-weight: bold;
	}

/*	Mikähän tämä dialogilista on? */
	ul.dialogue {
		list-style-type: none;
		line-height: 1.5em;
	}

	ul.dialogue li span {
		text-transform: uppercase;
		font-size: 0.9em;
		font-weight: bold;
		padding-right: 0.3em;
	}

	ul.dialogue li {
		padding: 0;
	}

/* div.box li {
	line-height: 1.3em;
	padding: 0;
}

#biblebox li.new, #articlebox li.new, #bookbox li.new  {
	background-color: #DEB;
	border: 2px dotted #000;
	margin: 3px -10px 3px -20px;
	padding: 1px 3px;
} */

	ul.elsewhere li {
		margin: 0;
	}

	.no {
		color: #999;
	}

	.yes {
		color: #000;
		font-weight: bold;
	}

	.center {
		text-align: center;
	}

	sup.suc {
		font-family: "Arial";
		font-size: 0.8em;
		font-style: normal;
		font-weight: bold;
		line-height: 0;
		vertical-align: super;
	}

	.headlist {
		font-family: 'Bilbo Swash Caps';
		font-size: 2em;
		margin: 0 auto;
		max-width: 22em;
		padding: 0;
		text-align: center;
	}

	em {
		color: #096;
		font-style: italic;
		font-weight: bold;
	}

	a {
		font-weight: bold;
		text-decoration: none;
	}	

	a:link {
		color: #393;
	}

	a:visited {
		color: #393;
	}

	a:active {
		color: #7C7;
	}

	a:hover {
		color: #7C7;
	}

	span.greek em {
		font-style: normal;
	}

	span.hebrew {
		font-family: 'Ezra';
		direction: rtl;
		font-size: 1em;
	}

	span.hebrew:hover {
		font-size: 200%;
	}

	span.time {
		border: 0.5px solid black;
		float: right;
		font-size: 0.9em;
		max-width: 23%;
		margin-left: 0.3em;
		white-space: nowrap;
		overflow: hidden;
		padding: 0 0.3em;
		text-overflow: ellipsis;
	}

	span.name {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	span.bookm {
		display: block;
		font: 1em bold italic;
		margin: 0 1em;
		font-family: Athelas;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	span.subtitle {
		font-size: 0.9em;
		margin-left: 0;
	}

	p:has(span.subtitle) {
			text-align: left;
	}

	span.close {
		cursor: pointer;
		float: right;
		font-family: Arial;
	}

	span.title {
		border: 1px dotted #000;
		float: left;
	}

	.bible {
	}

	.bible span.bibref, .bible span.bibref:visited {
		color: #AD0000;
		font-style: normal;
		font-weight: bold;
	}

	.bible span.bibref:hover {
		//
	}

	.bible span.bibref .bibtext, .bible span.bibref .bibhover {
		background: url(img/scroll-mid.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border: none;
		filter: drop-shadow(0.8em 1.2em 0.3em #666); 
		color: #000;
		display: none;
		line-height: 1.5;
		font-family: Athelas;
		font-style: italic;
		font-weight: normal;
		overflow: initial;
		padding: 1em 2em;
		white-space: wrap;
		text-align: justify;
		text-indent: initial;
		text-overflow: ellipsis;
		transform: translateZ(0);
		z-index: 100;
	}

	.bible span.bibref:hover span:first-line, 	.bible span.active .bibtext:first-line {
		color: #272;
		font-family: 'Bilbo Swash Caps';
		font-size: 22pt;
		font-weight: bold;
		line-height: 1.1em;
	}

/* div.books {
	border: 0;
	margin: 5px auto 0;
	padding: 0;
	text-align: left;
	width: 800px;
}

div.shelf {
	background: #DDD url(ISBN/shelf.jpg) repeat scroll center;
	border: 0;
	height: 12px;
	margin: 0 auto;
	padding: 0;
	width: 838px;
} */

	div.bookshelf {
		max-width: 800px;
		position: relative;
		margin: 0 auto;
		padding: 0;
	}

	div.books {
		background: url(ISBN/shelf.png) repeat scroll;
		line-height: 190px;
		position: relative;
	}
	
	img.title {
		border: 1px dotted #000;
	}

	img.shelf {
		border: 0;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		position: relative;
		top: -12px;
	}

	img.abc {
		margin: 0;
		padding: 0;
		position: relative;
		left: 12px;
		vertical-align: bottom;
	}

	div.books a span {
		background: #DEB;
		border: 2px dotted #555;
		color: #000;
		display: none;
		font: 10pt Arial, sans-serif;
		left: -125px;
		padding: 10px;
		position: absolute;
		text-align: justify;
		text-indent: 0;
		top: 100px;
		width: 350px;
		z-index: 300;
	}

	div.books a:hover {
		position: relative;
	}

	div.books a:hover span {
		display: inline;
	}

	span.yelprt {
		display: block;
		float: right;
		margin: 10px 0 10px 15px;
		width: 300px; 
	}

	span.yelplt {
		display: block;
		float: left;
		margin: 10px 15px 10px 0;
		width: 300px; 
	}

	span.yelptop {
		background-image: url(img/top.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: block;
		height: 60px;
		position: relative;
		z-index: 10;
	}

	span.yelpbottom {
		background-image: url(img/bottom.png);
		background-size: 100% 100%;
		display: block;
		height: 60px;
		z-index: 10;
	}

	span.yelptext {
		background-color: white;
		border-left: 3px solid black;
		border-right: 3px solid black;
		display: block;
		font-family: 'Bilbo Swash Caps';
		font-size: 1.4em;
		line-height: 140%;
		padding: 20px 20px;
		margin: -10px 10px;
		text-align: justify;
		z-index: 4;
	}

	textarea:disabled {
		background: #CCC;
	}

	ul.media {
		padding: 0;
	}

	li.media {
		display: block;
		margin: 2em 0;
	}

	li.media iframe {
		display: block;
		margin: 0 auto;
	}

	span.mediatime {
		display: block;
	}

	h2.mediatitle{
		display: block;
		font-family: "Bilbo Swash Caps";
		font-size: 1.5em;
		font-weight: 500;
	}

	span.mediadescription{
		display: block;
		margin: 1em 2em;
	}

	div#instabox {
		overflow: hidden;
		text-align: center;
	}
	
	p.crumbs {
		text-align: center;
	}
	
	div.featurebox {
		background: #DEB;
		border: 1px solid black;
		border-radius: 0.5em 2.5em;
		display: flex;
		flex-wrap: wrap;
		margin: 1.5em 2.5em;
	}
	
	h2.feature {
		background: #3B4C3B;
		border: 1px solid black;
		border-radius: 0.25em 0.8em;
		color: white;
		display: inline;
		left: 0.5em;
		padding: 0.1em 0.5em;
		position: relative;
		top: 0.8em;
	}
	
	div.featured {
		display: flex;
		float: left;
	}

	div.frame {
		background: black;
		border-radius: 0;
	}
	
	div.featured figure {
		margin: 1em 1em 0;
	}
	
	div.featured figure img{
		border-radius: 0.5em 2.5em;
	}

	div.featured figcaption {
		background: #FFF;
		color: #000;
		display: revert;
		position: relative;
		margin: auto;
		top: -4em;
		border: 1px solid black;
		width: 100%;
	}
	
	div.featured figure span {
		position: relative;
		top: -3em;
		background: black;
		padding: 0.2em 0.5em;
		color: red;
	}
	
	div.frame div.featured figure{
		margin: 0 0 -2.2em;
		text-align: center;
	}

	div.frame figcaption {
		border: none;
		width: 80%;
	}

	div.frame figure img{
		border-radius: 0;
		border: none;
	}
	
	div.frame figure span.runtime {
		top: -3.4em;
	}
}

/* Tästä alkavat arvoitukselliset valikkotyylit. */

.main-navigation {
    z-index: 100;
    padding: 0;
    clear: both;
    display:block;
}

.main-navigation a {
    display: block;
    text-decoration: none;
    font-weight: 400;
    text-transform: none;
    font-size: 0.9em;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation .main-nav ul li a {
    padding-left: 20px;
    padding-right: 20px;
    line-height:60px;
    text-align: left;
}

.inside-navigation {
    position:relative;
}

.main-navigation li {
    float: left;
    position:relative;
    font-family: Helvetica;
    margin: 0;
    background: #222;
    z-index: 60;
}

.sf-menu > li.menu-item-float-right {
    float:right !important;
}

.nav-float-right .inside-header .main-navigation {
    float: right;
    clear: right;
}

.nav-float-left .inside-header .main-navigation {
    float: left;
    clear: left;
}

.nav-aligned-center .main-navigation:not(.toggled) .menu > li, .nav-aligned-right .main-navigation:not(.toggled) .menu > li {
    float: none;
    display: inline-block;
}

.nav-aligned-center .main-navigation:not(.toggled) ul, .nav-aligned-right .main-navigation:not(.toggled) ul {
    letter-spacing: -.31em;
    font-size: 1em;
}

.nav-aligned-center .main-navigation:not(.toggled) ul li, .nav-aligned-right .main-navigation:not(.toggled) ul li {
    letter-spacing: normal;
}

.nav-aligned-center .main-navigation {
    text-align: center;
}

.nav-aligned-right .main-navigation {
    text-align: right;
}

.main-navigation .mobile-bar-items a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 60px;
}

.main-navigation ul ul {
    display: block;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
    float: left;
    position: absolute;
    left: -99999px;
    opacity: 0;
    z-index: 99;
    width: 200px;
    text-align: left;
    top: auto;
    transition: opacity 80ms linear;
    transition-delay: 0s;
//    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.main-navigation ul ul.children.expand {
	opacity: 100;
	height: auto;
	position: relative;
	visibility: visible;
	left: 20px;
	width: 100%;
}

.main-navigation ul ul a {
    display: block;
}

.main-navigation ul ul li {
    width: 100%;
    z-index: 200;
}

.main-navigation .main-nav ul ul li a {
    line-height: normal;
    padding: 10px 20px;
    font-size: 0.9em;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 0;
    position: relative;
}

.main-navigation.sub-menu-left .sub-menu {
    right: 0;
}

.main-navigation:not(.toggled) ul li.sfHover > ul, .main-navigation:not(.toggled) ul li:hover > ul {
    left: auto;
    opacity: 1;
    transition-delay: 150ms;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

.main-navigation:not(.toggled) ul ul li.sfHover > ul, .main-navigation:not(.toggled) ul ul li:hover > ul {
    left: 100%;
    top: 0;
}

.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover > ul, .main-navigation.sub-menu-left:not(.toggled) ul ul li:hover > ul {
    right: 100%;
    left: auto;
}

.nav-float-right .main-navigation ul ul ul {
    top: 0;
}

.menu-item-has-children .dropdown-menu-toggle {
    display: inline-block;
    height: 100%;
    clear: both;
    padding-right: 20px;
    padding-left: 10px;
}

.menu-item-has-children ul .dropdown-menu-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
}

.sidebar .menu-item-has-children .dropdown-menu-toggle, nav ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: right;
}

.sidebar .main-navigation.sub-menu-right ul li.sfHover ul, .sidebar .main-navigation.sub-menu-right ul li:hover ul {
    top: 0;
    left: 100%;
}

.sidebar .main-navigation.sub-menu-left ul li.sfHover ul, .sidebar .main-navigation.sub-menu-left ul li:hover ul {
    top: 0;
    right: 100%;
}

.site-main .comment-navigation, .site-main .post-navigation, .site-main .posts-navigation {
    margin: 0 0 2em;
    overflow: hidden;
}

.site-main .post-navigation {
    margin-bottom: 0;
}

.paging-navigation .nav-next, .paging-navigation .nav-previous {
    display: none;
}

.paging-navigation .nav-links > * {
    padding: 0 5px;
}

.paging-navigation .nav-links .current {
    font-weight: 700;
}

.nav-links > :first-child {
    padding-left: 0;
}

#mc_embed_signup {
	background-color: #DEB;
	padding: 10px;
	border: 2px dotted #000;
	width: 300px;
	margin: 5px 0 10px 10px;
}

div.mc-field-group {
	padding: 10px 0;
}

div.mc-field-group label {
	width: 6em;
	float: left;
	font-family: Athelas;
	font-size: 1em;
}

div.mc-field-group .asterisk {
	color: #F00;
}

div.indicates-required {
	color: #F00;
	font-size: 0.8em;
	text-align: center;
}

div.optionalParent {
	text-align: center;
}

div.optionalParent input.button {
	font-size: 20pt;
	margin: 15px 0 40px;
}

/* CSS-MÄÄRITYKSET LOPPUVAT */


    .top-bar {
        background-color: #636363;
        color: #ffffff;
    }

    .top-bar a {
        color: #ffffff;
    }

    .top-bar a:hover {
        color: #303030;
    }

    .main-navigation, .main-navigation ul ul {
        background-color: #222222;
    }

    .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-items {
        color: #ffffff;
    }

    .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a {
        color: #ffffff;
        background-color: #3f3f3f;
    }

    button.menu-toggle:hover, button.menu-toggle:focus, .main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover, .main-navigation .mobile-bar-items a:focus {
        color: #ffffff;
    }

    .main-navigation .main-nav ul li[class * ="current-menu-"] > a {
        color: #ffffff;
        background-color: #3f3f3f;
    }

    .main-navigation .main-nav ul li[class * ="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class * ="current-menu-"].sfHover > a {
        color: #ffffff;
        background-color: #3f3f3f;
    }

    .navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a {
        color: #ffffff;
        background-color: #3f3f3f;
    }

    .main-navigation ul ul {
        background-color: #3f3f3f;
    }

    .main-navigation .main-nav ul ul li a {
        color: #ffffff;
    }

    .main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li.sfHover > a {
        color: #ffffff;
        background-color: #4f4f4f;
    }

    .main-navigation .main-nav ul ul li[class * ="current-menu-"] > a {
        color: #ffffff;
        background-color: #4f4f4f;
    }

    .main-navigation .main-nav ul ul li[class * ="current-menu-"] > a:hover, .main-navigation .main-nav ul ul li[class * ="current-menu-"].sfHover > a {
        color: #ffffff;
        background-color: #4f4f4f;
    }

    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header {
        background-color: #ffffff;
    }

    a.generate-back-to-top {
        background-color: rgba(0, 0, 0, 0.4);
        color: #ffffff;
    }

    a.generate-back-to-top:hover, a.generate-back-to-top:focus {
        background-color: rgba(0, 0, 0, 0.6);
        color: #ffffff;
    }

    @media (max-width: 768px) {
        .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a {
            background: none;
            color: #ffffff;
        }
    }

    .inside-top-bar {
        padding: 10px;
    }

    .inside-header {
        padding: 40px;
    }

    .entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
        margin-left: -40px;
        width: calc(100% + 80px);
        max-width: calc(100% + 80px);
    }

    .rtl .menu-item-has-children .dropdown-menu-toggle {
        padding-left: 20px;
    }

    .rtl .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 20px;
    }

    .site-info {
        padding: 20px;
    }

    @media (max-width: 768px) {
        .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header, .wp-block-group__inner-container {
            padding: 30px;
        }

        .site-info {
            padding-right: 10px;
            padding-left: 10px;
        }

        .entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
            margin-left: -30px;
            width: calc(100% + 60px);
            max-width: calc(100% + 60px);
        }
    }

    .one-container .sidebar .widget {
        padding: 0px;
    }

    @media (max-width: 735px) {
        .main-navigation .menu-toggle, .main-navigation .mobile-bar-items, .sidebar-nav-mobile:not(#sticky-placeholder) {
            display: block;
        }

        .main-navigation ul, .gen-sidebar-nav {
            display: none;
        }

        [class * ="nav-float-"] .site-header .inside-header > * {
            float: none;
            clear: both;
        }
    }

.menu-toggle, .mobile-bar-items, .sidebar-nav-mobile {
    display:none
}

.menu-toggle {
    padding: 0 20px;
    line-height: 60px;
    margin: 0;
    font-weight: 400;
    text-transform: none;
    font-size: 15px;
    cursor:pointer
}

button.menu-toggle {
    background-color: transparent;
    width: 100%;
    border: 0;
    text-align: left;
}

button.menu-toggle:active, button.menu-toggle:focus, button.menu-toggle:hover {
    background-color: transparent;
    text-align: left;
}

.menu-toggle .mobile-menu {
    padding-left:3px
}

.menu-toggle .gp-icon + .mobile-menu {
    padding-left:9px
}

.menu-toggle .mobile-menu:empty {
    display:none
}

.nav-search-enabled .main-navigation .menu-toggle {
    text-align:left
}

.mobile-bar-items {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 21;
    list-style-type:none
}

.mobile-bar-items a {
    display:inline-block
}

nav.toggled ul ul.sub-menu {
    width:100%
}

.dropdown-hover .main-navigation.toggled ul li.sfHover > ul, .dropdown-hover .main-navigation.toggled ul li:hover > ul {
    transition-delay:0s
}

.toggled .menu-item-has-children .dropdown-menu-toggle {
    padding-left:20px
}

.main-navigation.toggled ul ul {
    transition: 0s;
    visibility: hidden;
}

.main-navigation.toggled .main-nav > ul {
    display: block;
}

.toggled .menu-toggle: before {
    content: "\f00d"
}

.main-navigation.toggled .main-nav ul ul.toggled-on {
    position: relative;
    top: 0;
    left: auto !important;
    right: auto !important;
    width: 100%;
    pointer-events: auto;
    height: auto;
    opacity: 1;
    display: block;
    visibility: visible;
    float:none
}

.main-navigation.toggled .main-nav li {
    float: none;
    clear: both;
    display: block;
    text-align: left;
}

.main-navigation.toggled .main-nav li.hide-on-mobile {
    display:none !important
}

.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
    float:right
}

.main-navigation.toggled .menu li.search-item {
    display:none !important
}

.main-navigation.toggled .sf-menu > li.menu-item-float-right {
    float: none;
    display: inline-block;
}
}

@media (max-width: 768px) {
    a, body, button, input, select, textarea {
        transition:all 0s ease-in-out
    }

    .top-bar.top-bar-align-left, .top-bar.top-bar-align-right {
        text-align:center
    }

    .top-bar .widget {
        float: none !important;
        margin:0 10px !important
    }

    .top-bar .widget_nav_menu li {
        float: none;
        display: inline-block;
        padding:5px 0
    }

    .footer-bar .widget_nav_menu li:first-child {
        margin-left:10px
    }

    .footer-bar .widget_nav_menu li:last-child {
        margin-right:10px
    }

    .inside-header > :not(:last-child):not(.main-navigation) {
        margin-bottom:20px
    }

    .header-aligned-right .site-header, .site-header {
        text-align:center
    }

    .header-widget {
        float: none;
        max-width: 100%;
        text-align:center
    }

    .content-area, .inside-footer-widgets > div, .sidebar {
        float: none;
        width: 100%;
        left: 0;
        right:0
    }

    .site-main {
        margin-left: 0 !important;
        margin-right:0 !important
    }

    body:not(.no-sidebar) .site-main {
        margin-bottom:0 !important
    }

    .one-container .sidebar {
        margin-top:40px
    }

    .separate-containers #left-sidebar + #right-sidebar .inside-right-sidebar {
        margin-top:0
    }

    .both-left.separate-containers .inside-left-sidebar, .both-left.separate-containers .inside-right-sidebar, .both-right.separate-containers .inside-left-sidebar, .both-right.separate-containers .inside-right-sidebar {
        margin-right: 0;
        margin-left:0
    }

    .alignleft, .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right:auto
    }

    .post-image-aligned-left .post-image, .post-image-aligned-right .post-image {
        float: none;
        margin: 2em 0;
        text-align:center
    }

    .comment .children {
        padding-left: 10px;
        margin-left:0
    }

    .edd_download {
        display: block;
        float: none !important;
        margin-bottom: 1.5em;
        width:100% !important
    }

    .entry-meta {
        font-size:inherit
    }

    .entry-meta a {
        line-height:1.8em
    }

    .site-info {
        text-align:center
    }

    .copyright-bar {
        float: none !important;
        text-align:center !important
    }

    .footer-bar {
        float: none !important;
        text-align: center !important;
        margin-bottom:20px
    }

    .footer-bar .widget_nav_menu li {
        float: none;
        display: inline-block;
        padding:5px 0
    }

    .inside-footer-widgets > div:not(:last-child) {
        margin-bottom:40px
    }

    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
        margin:0
    }

    .site-footer .footer-widgets .footer-widgets-container .inner-padding {
        padding: 0
    }
}

@media screen and (max-width: 579px) and (orientation: portrait) {
	#menu {
		display: block;
		width: 100%;
		margin: 0;
	}

	#visitors,  #bibsearch, #settings, #glossary {
		display: none;
	}
	
	p.headlist {
		font-size: 1.8em;
	}
	
	div.menublock {
		margin: 0 auto 20px;
	}

	div.bibleholder {
		max-width: 100%;
	}

	div.single {
		max-width: 100%;
	}

	div.old {
		max-width: 100%;
	}

	div.new {
		max-width: 100%;
	}

	figure.fleft {
		display: table;
		float: none;
		margin: 1em auto;
	}

	figure.fright {
		display: table;
		float: none;
		margin: 1em auto;
	}

	.bible span.bibref .bibtext, .bible span.bibref .bibhover {
		max-height: 80%;
		max-width: 300px;
		width: 90%;
	}

	p.stamp {
		margin: -1em 0 0;
	}

	li.media iframe {
		width: 320px;
		height: 180px;
	}

	span.mediadescription {
		margin: 1em 0;
	}

	span.time {
		height: 1.6em;
		max-width: 3.9em;
		white-space: break-spaces;
		padding: 0 0.3em;
		text-align: right;
		text-overflow: clip;
	}

	span.yelprt, span.yelplt {
		margin: 10px 0;
		width: 100%;
	}

	ul.media {
		margin: 0 0 1.25em;
	}

	iframe.instagram-media, iframe.instagram-media-rendered{
		min-width: 300px !important;
		max-width: 300px !important;
		margin: 0 auto !important;
		height: 360px !important;
	}
	
	div#instabox {
		height: 356px;
	}

	div.featured {
		float: none;
		margin: auto;
		width: 100%;
	}

	div.featurebox {
		margin: 1.5em 0 0.5em; 
	}
	
	h2.feature {
		margin-left: -1em;
	}
}

@media screen and (max-height: 480px) and (orientation: landscape) {
	#menu {
		display: block;
		width: 100%;
		margin: 0;
	}

	#visitors,  #bibsearch, #settings, #glossary {
		display: none;
	}
	
	div.menublock {
		margin: 0 auto 20px;
	}

	p.headlist {
		font-size: 1.6em;
	}
	
	div.bibleholder {
		max-width: 80%;
	}

	div.single {
		margin: 0 auto;
		max-width: 80%;
	}

	div.old {
		max-width: 100%;
	}

	div.new {
		max-width: 100%;
	}

	figure.fleft {
		max-width: 50%;
	}

	figure.fright {
		max-width: 50%;
	}

	li.media iframe {
		width: 240px;
		height: 135px;
	}

	.bible span.bibref .bibtext, .bible span.bibref .bibhover {
		max-height: 80%;
		max-width: 600px;
		width: 90%;
	}

	iframe.instagram-media, iframe.instagram-media-rendered{
		min-width: 300px !important;
		max-width: 300px !important;
		margin: 0 auto !important;
		height: 360px !important;
	}
	
	div#instabox {
		height: 356px;
	}

	div.featured {
		float: none;
		margin: auto;
		width: 100%;
	}
	
	div.featured figure {
		margin: 1em 2em 0;
	}

	div.featured figcaption{
		font-size: 1.1em;
	}

}

@media screen and (min-width: 580px) and (max-width: 768px) {
	#menu {
		display: block;
		width: 100%;
		margin: 0;
	}

	#visitors,  #bibsearch, #settings, #glossary {
		display: none;
	}
	
	p.headlist {
		font-size: 1.6em;
	}
	
	div.menublock {
		margin: 0 auto 20px;
		width: 49%;
		box-sizing: border-box;
	}
	
	#newarticles, #newbooks, #newblogs{
		float: left;
	}
	
	#newcomms, #mapbox, #ad{
		float: right;
	}

	#header, #navibar, #main, #footer {
		width: 96%;
	}

	div.bibleholder {
		max-width: 60%
	}

	div.single {
		margin: 0 auto;
		max-width: 100%;
	}

	div.old {
		float: left;
		width: 100%;
	}

	div.new {
		float: right;
		width: 100%;
	}

	figure.fleft {
		max-width: 50%;
	}

	figure.fright {
		max-width: 50%;
	}

	li.media iframe {
		width: 320px;
		height: 180px;
	}

	.bible span.bibref .bibtext, .bible span.bibref .bibhover {
		max-height: 80%;
		max-width: 600px;
		width: 90%;
	}

	iframe.instagram-media, iframe.instagram-media-rendered{
		display: inline !important;
		min-width: 300px !important;
		max-width: 300px !important;
		margin: 0 auto !important;
		height: 360px !important;
	}
	
	div#instabox {
		height: 356px;
	}

	div.featured {
		float: none;
		margin: auto;
		width: 100%;
	}
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
	#menu {
		display: block;
		width: 100%;
		margin: 0;
	}

	#visitors,  #bibsearch, #settings, #glossary {
		display: none;
	}
	
	div.menublock {
		margin: 0 auto 20px;
		width: 49%;
		box-sizing: border-box;
	}
	
	#newarticles, #newbooks, #newblogs {
		float: left;
	}
	
	#newcomms, #mapbox, #ad {
		float: right;
	}

	#header, #navibar, #main, #footer {
		width: 96%;
	}

	div.bibleholder {
		max-width: 80%;
	}

	div.single {
		margin: 0 auto;
		max-width: 60%;
	}

	div.old {
		float: left;
		width: 48%;
	}

	div.new {
		float: right;
		width: 48%;
	}

	figure.fleft {
		max-width: 50%;
	}

	figure.fright {
		max-width: 50%;
	}

	li.media iframe {
		width: 480px;
		height: 270px;
	}
	
	.bible span.bibref:hover span.bibhover {
		translate: -13.4em 1.3em;
	}	

	iframe.instagram-media, iframe.instagram-media-rendered{
		display: inline !important;
		min-width: 300px !important;
		height: 360px !important;
	}
	
	div#instabox {
		height: 360px;
		width: 700px;
		margin: 0 auto;
	}

	div.featured {
		width: 50%;
	}
}

@media screen and (min-width:1024px) and (max-width: 1279px) {

	#header, #navibar, #main, #footer {
		width: 1004px;
	}

	#ase, #haku {
		display: none;
	}

	#menu {
		width: 25%;
	}

	#contentholder {
		float: left;
		width: 73%;
	}

	#mapbox {
		padding: 30px 0;
	}

	p.headlist {
		font-size: 1.8em;
	}

	div.bibleholder {
		max-width: 100%;
	}

	div.single {
		margin: 0 auto;
		max-width: 60%;
	}

	div.old {
		float: left;
		width: 48%;
	}

	div.new {
		float: right;
		width: 48%;
	}

	div.menublock {
		font-size: 0.9em;
	}

	div.menublock > p > a > img {
		width: 18%;
		height: 18%;
	}
	
	figure.fleft {
		max-width: 50%;
	}

	figure.fright {
		max-width: 50%;
	}

	li.media iframe {
		width: 480px;
		height: 270px;
	}

	select.menu {
		font-size: 0.9em;
	}

	ul.elsewhere > li::before {
		left: 5.5em;
	}

	iframe.instagram-media, iframe.instagram-media-rendered{
		display: inline !important;
		min-width: 48% !important;
		height: 375px !important;
	}
	
	div#instabox {
		height: 376px;
	}

	div.featured {
		width: 50%;
	}
}

@media screen and (min-width: 1280px) and (max-width: 1919px) {
	body {
		font-size: 1.1em;
	}

	#header, #navibar, #main, #footer {
		width: 1260px;
	}

	#ase, #haku {
		display: none;
	}

	#menu {
		width: 26%;
	}

	#contentholder {
		float: left;
		width: 72.5%;
	}

	div.bibleholder {
		max-width: 100%;
	}

	div.single {
		margin: 0 auto;
		max-width: 50%;
	}

	div.old {
		float: left;
		width: 48%;
	}

	div.new {
		float: right;
		width: 48%;
	}

	figure.fleft {
		max-width: 50%;
	}

	figure.fright {
		max-width: 50%;
	}

	li.media iframe {
		width: 480px;
		height: 270px;
	}

	select.menu {
		font-size: 0.9em;
	}

	ul.elsewhere > li::before {
		left: 5em;
	}

	iframe.instagram-media, iframe.instagram-media-rendered{
		display: inline !important;
		min-width: 30% !important;
		max-width: 32% !important;
		height: 324px !important;
	}
	
	div#instabox {
		height: 333px;
	}

	div.featured {
		width: 50%;
	}
}

@media screen and (min-width: 1920px) {
	body {
		font-size: 1.3em;
	}

	#header, #navibar, #main, #footer {
		width: 1900px;
	}

	#ase, #haku {
		display: none;
	}

	#menu {
		width: 400px;
	}

	#contentholder {
		float: left;
		width: 1480px;
	}

	div.bibleholder {
		max-width: 70%;
	}

	div.single {
		margin: 0 auto;
		max-width: 60%;
	}

	div.old {
		float: left;
		width: 48%;
	}

	div.new {
		float: right;
		width: 48%;
	}

	figure.fleft {
		max-width: 50%;
	}

	figure.fright {
		max-width: 50%;
	}

	li.media iframe {
		width: 640px;
		height: 360px;
	}

	select.menu {
		font-size: 0.9em;
	}

	ul.elsewhere > li::before {
		left: 5em;
	}

	iframe.instagram-media, iframe.instagram-media-rendered{
		display: inline !important;
		min-width: 24% !important;
		height: 401px !important;
	}
	
	div#instabox {
		height: 414px;
	}
	
	div.featured {
		width: 33.3%;
	}
}

@media screen and (hover: none) {
	.bible span.bibref:active span.bibtext, .bible span.active span.bibtext {
		display: inline-block;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 330px;
	}
}

@media screen and (hover: hover) {
	.bible span.bibref:hover span.bibhover {
		display: inline-block;
		position: absolute;
		width: 330px;
	}
}


<?php //ob_end_flush();
?>