body {margin:0; padding:0; background:#FBFCFC; font-family:'Varela Round', 'Simple CLM', Tahoma, sans-serif; font-size:12pt;}
html, body {height: 100%;}
 
a {text-decoration:none;}

h2 {font-size:1em;}

.glyphicons {color:#34495E;}

input {border:0 none; background:#fff; padding:2px 4px; line-height:22px; border-bottom: 2px solid #34495E;}
button {border:0 none; background:none; font-size:1em; color:#FBFCFC;}
button:hover {color:#ddd; cursor:pointer;}
button.btn {background: #7f8c8d; font-weight:normal; padding: .5em 1em; border-radius:5px; box-shadow: -2px 2px 3px #bbb; color:#fff !important;}
button.btn:hover {background:#95a5a6; cursor:pointer;}
button.icon-btn {/*border:1px solid #ccc;*/ height:30px; width:30px; border-radius:50%; padding-right:7px;}
button.icon-btn i {color:#555;}
button i {color:#fff;}
i.btn {margin-left:1em;}

select {background:#fff; border: 0 none; height:24px; display:inline-block; border-bottom: 2px solid #34495E;}
select, ipnut, button {font-family: font-family:'Varela Round', 'Simple CLM', Tahoma, sans-serif;}
button.nonactive {background:#ddd;}

#main_panel {display:flex; flex-direction: column; flex:1; background:#eee;}

#branding {
	position:fixed; z-index:100; height:300px; width:450px; bottom:-222px; right:-295px;
	text-align:justify; font-size:14pt; background:#d35400; background:#22313F; background:#333; color:#fff; border-radius: .5em 0 0 0; box-shadow: -2px -2px 3px #bbb;
	transform: rotate(-45deg); transition: right 1s, bottom 1s, transform 1s;
}
#branding:hover {right:0; bottom:0; transform: rotate(0deg); transition: right 1s, bottom 1s, transform 1s;}
#branding h1 {font-size: 14pt; text-align:center; margin-top:4px; font-size:1em; transition: margin 1s, font-size 1s;}
#branding:hover h1 {font-size:22pt; margin:20px 0 15px; transition: margin 1s, font-size 1s;}
#branding p {padding:0 1em;}

#controls {line-height:40px; position:relative;}
#locationbar {text-align: right; border-radius: 0 .5em .5em 0;}
#locationbar #location, #search_in {box-shadow: -2px 2px 3px #bbb}

#locationbar #location {background:#2980b9; background:#2c3e50; background:#d35400; color:#fff; border-radius:5px; padding:0 .8em; font-size:1.5em; cursor:pointer; display:inline-block;}
#locationbar #location span {padding-right:.2em;}
#locationbar #location:hover {color:#ddd;}
#locationbar #location_menu {background: #fafafa; border:1px solid #ddd; display:none; position:absolute; top:4em; box-shadow: 0 0 20px #555;}

#locationbar #books_menu ul {list-style:none; display: inline-block; vertical-align:top; margin:0; padding:0;}
#locationbar #books_menu ul li {border-radius:3px; padding:5px; line-height:1em;}
#locationbar li {cursor:pointer; color:#34495E;}
#locationbar li.active {background:#d35400; color:#fff;}
#locationbar li:hover {background: #2980b9; color:#fff;}

#locationbar #chapters_menu {display:none;}
#locationbar #chapters_menu strong {margin-right:1em;}
#locationbar #chapters_menu ul {display:flex; flex-wrap: wrap;}
#locationbar #chapters_menu li {display:block; padding:.3em 0; border: 1px solid #ccc; flex-basis: 2.5em; text-align: center; font-weight:bold;}

#copy_btn {position: fixed; left:3em; top:3em; border-radius:50%; background:red; padding:.5em; box-shadow:5px 5px 5px #ccc; display:none;}
#copy_btn i {font-size:1.5em; color:#fff;}

#settings_menu_btn {position: absolute; left:2em; bottom:2em; border-radius:50%; background:#777; padding:.5em; box-shadow:0px 0px 5px #aaa; z-index:2;}
#settings_menu_btn:hover {background:#888; cursor:pointer;}
#settings_menu_btn i {font-size:1.5em; color:#fff;}

#settings_menu {display: none; position: absolute; left:2em; top:2em; width:auto; background:#eee; box-shadow: 0 0 20px #000; z-index:100;}
#settings_menu div {display: flex; margin: 2em 1em;}
#settings_menu label {margin-left: .3em; width:3em;}
#settings_menu h3 {text-align:center; font-weight:normal; font-size:1.8em;}
#settings_menu #font_size {cursor: pointer;width:20em; margin-right:0;}
#settings_menu #lang_select_cont {display:none;} /* Hide lang selection */
#settings_menu #strong {border-radius: 50%; width:20px; height: 20px; margin-top: 10px; background: #ccc;}
#settings_menu #strong.on {background: #f2c921;}
#settings_menu .selected {font-weight:bold;}
#settings_menu #settings_close i {color:#fff;}

#ajax_loading {float:left;}

#text {text-align: justify; overflow:auto; overflow-y:scroll; width:100%;}
#text strong {color: #888;}
#text a {color:#000;}
#text .current {color: #2980b9;}
#text .non-chapter {color:#888;}
#text.cols1 .chap {column-count:1; -moz-column-count:1; -webkit-column-count:1; -o-column-count:1;}
#text.cols2 .chap {column-count:2; -moz-column-count:2; -webkit-column-count:2; -o-column-count:2;}
#text.cols3 .chap {column-count:3; -moz-column-count:3; -webkit-column-count:3; -o-column-count:3;}

#text .chap.p {display:flex;}
#text .chap.p .heb {width:49%;}
#text .chap.p .eng {width:49%; margin-right:2%; font-size:.8em; direction:ltr;}

#text #loading_next {margin: 2em 0; color:#27ae60;}
#text #load_next_chap {background:#999; margin:0 auto; display:block; margin-top:2em;}

#searchbar {bottom: 0;}
#searchbar form {margin-left:2%;}
#search_hide {float:left; color:#aaa; margin-top:1em; cursor: pointer; display:none;}
#search_count {font-weight:bold; display: block; margin: 1em 0; color:#aaa;}

#search_in {text-align:center; display: inline-block; border-radius:5px;}
#search_in #searchq, #search_in button{height:2em; padding:.5em; font-size:1.3em; vertical-align:top;}
#search_in #searchq {color:#7f8c8d; border:0 none; margin:0; width:100%; max-width:18em; border-radius:5px; box-shadow: 0px 0px 3px #ccc inset; background:#f7f7f7;}
/*
#search_in #search_box {box-shadow: 0px 0px 3px #ccc inset; background:#f7f7f7; display:inline-block; border-radius: 0 5px 5px 0;}
*/
#search_in #searchq:focus {box-shadow: 0 0 3px yellow inset;}
#search_in button {border:0 none; margin:0; width:2em;}
#search_in #search_filters_btn {margin-right:-4em;}
#search_in #search_filters_btn i {color:#777;}
#search_in #search_submit {background:#16a085; position:relative; color:#fff; border-radius:5px 0 0 5px; box-shadow:none;}
#search_in #search_submit.nonactive {background:inherit;}
#search_in #search_submit i {color:#fff;}

#search_filters {display:flex; flex-direction: column; display:none; background:#eee; position:absolute; z-index:5; padding:0 1em;}
#search_filters p label {width:	5em; display: inline-block;}
#search_filters select {width: 12em;}
#search_filters #instructions {color:#2980b9;}

#search_results {margin: 5px 0 0; padding: 0 5px; overflow: auto;}
#search_results a {display: block; color:#000; padding:.2em; text-decoration:none;}
#search_results a span.hl {background-color: #ffff50; padding:0 .1em;}
#search_results a:nth-child(even) {background:#fff;}
#search_results a:nth-child(odd) {background:#eee;}
#search_results a:hover {background: #feffc1;}

/*
#close_search_results {position: absolute; top: 10px; left: 20px; background:#F2C921;}
*/

#info {text-align: justify; color:#888; position:absolute; z-index:0; padding:1em 0 0 1em; font-size:.9em;}
#info a {color:#aaa;}

@media only screen and (min-width: 900px) {
	/* desktop */

	main {resize: horizontal;}

	main {display: grid; grid-template-columns: 70% auto; grid-template-rows: 5em auto; position:absolute;
		align-items: stretch; height:100%; width:100%; background:#eee;}

	#controls {grid-column: 1/1; grid-row: 1/1; padding:1em;}

	#text_container {
		grid-column: 1/1; grid-row: 2/2; margin:0 1em 1em; padding:1em 0;
		background:#fff; border:1px solid #ccc; border-radius:5px; overflow-y:auto;
	}
	#text_container #text {max-height:96%; width:96%; margin:0;padding:1% 2%;}

	#sidebar {grid-column: 2/2; grid-row: 1/3; padding: 1em; position:relative;}
	#close_sidebar, #open_sidebar {position:absolute; background:#aaa; right: -1em; font-size: 3em; width: 1em; border-radius: 0 .2em .2em 0; display:none;}

	main.search-closed {grid-template-columns:99% auto;}

	main.search-closed #searchbar, main.search-closed #search_results{display:none;}
	main.search-closed #sidebar {padding:0;}

	#search_results {height:79%; position:absolute; bottom:1em; margin-left:1em;}

	/***********
	 * Colors: *
	************/

	#main_panel {background:#eee;}
	#sidebar {background:#333;}

}

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

	main {display:flex; flex-direction: column; padding:0;}

	#ajax_loading {position:fixed; bottom:10%; text-align:center; width:100%;}
	#info {display:none;}

	#books_menu ul {display:block;}
	#locationbar #location {display:block; border-radius:0; height:2em; line-height:2em;}
	#controls {position: fixed; position:absolute; top: 0; right: 0; width: 100%; }
	#locationbar #location_menu {top: 3em;}
	#text_container {margin-top:2em; padding: 1em;}
	#searchbar {position: absolute; top: 0; bottom:auto; left:0; width:100%;}
	#searchbar form {margin:0;}
	#search_in button {height:1.3em;}
	#search_in {box-shadow:none; text-align: left; margin-left: 2em; display:block;}
	#search_in #searchq {
		position:absolute; left:1.7em; font-size:1.5em; padding:.1em .5em; width:5em;  transition: width 1s;
		background:#e67e22; color:#fff; box-shadow:none; border-radius:0;
		background: rgb(255, 150,60);
	}
	#search_in #search_filters_btn {position:absolute; left:4em; display:none;}
	#search_in #search_filters_btn i {color:#fff;}
	#search_in:focus-within #search_filters_btn {display:inline-block;}
	#search_in #searchq:focus {width:100%; padding-right:2em; box-shadow:none;}
	#search_in #search_submit {position:absolute; left:1em; background:transparent; font-size:2em; padding:.2em;}
	#search_filters {margin-top:3em;}
	/* rgb(211, 84, 0) --> rgb(230, 126, 34) */
	#search_count {margin-top:4em;}
	#search_results {margin-top:5em;}

	#settings_menu_btn {top:0; left:0; bottom:inherit; background:transparent; box-shadow: none; font-size:1.1em;}
	#settings_menu {position:fixed; left:1%; width:98%; top:0.1em;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* IE 10+ */
	main {display: -ms-grid; -ms-grid-columns: 70% 30%; -ms-grid-rows: 10% 90%; -ms-grid-column-align: stretch;}
	#controls {-ms-grid-column: 1; -ms-grid-column-span: 1; -ms-grid-row: 1; -ms-grid-row-span: 1;}
	#text_container {-ms-grid-column: 1; -ms-grid-column-span: 1; -ms-grid-row: 2; -ms-grid-row-span: 1;}
	#sidebar {-ms-grid-column: 2; -ms-grid-column-span: 1;}
}