/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
 Modifications by: Brian Franco
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

strong { font-weight: bold; }

em { font-style: italic; }

a { text-decoration: none; }

a, span { display: inline-block; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.cf:after { content: " "; clear: both; display: block; }

@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.eot"); src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon.svg#icomoon") format("svg"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"); font-weight: normal; font-style: normal; }
[class*="icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-gift:before { content: "\1f381"; }

.icon-book:before { content: "\e006"; }

.icon-users:before { content: "\1f465"; }

.icon-book2:before { content: "\1f4d5"; }

.icon-export:before { content: "\ee00"; }

.icon-arrow-down:before { content: "\e022"; }

.icon-pinterest:before { content: "\e008"; }

.icon-file-word:before { content: "\e00d"; }

.icon-arrow-up:before { content: "\e023"; }

.icon-pencil3:before { content: "\1f4dd"; }

.icon-books:before { content: "\1f4da"; }

.icon-pencil:before { content: "\270e"; }

.icon-link:before { content: "\1f517"; }

.icon-menu:before { content: "\e9a1"; }

.icon-file-excel:before { content: "\e00e"; }

.icon-file-powerpoint:before { content: "\e00f"; }

.icon-search:before { content: "\6d"; }

.icon-earth:before { content: "\1f30e"; }

.icon-video:before { content: "\e320"; }

.icon-note:before { content: "\e903"; }

.icon-marker:before { content: "\2712"; }

.icon-borg_icon:before { content: "\62"; }

.icon-file-zip:before { content: "\e010"; }

.icon-download:before { content: "\e012"; }

.icon-facebook:before { content: "\66"; }

.icon-home:before { content: "\2302"; }

.icon-info:before { content: "\2139"; }

.icon-volume:before { content: "\e004"; }

.icon-book3:before { content: "\1f4d6"; }

.icon-twitter:before { content: "\74"; }

.icon-arrow-right:before { content: "\e000"; }

.icon-arrow-left:before { content: "\e009"; }

.icon-googleplus:before { content: "\67"; }

.icon-book-search:before { content: "\e967"; }

.icon-eye:before { content: "\e001"; }

.icon-bookmark:before { content: "\e002"; }

.icon-printer:before, .icon-print:before { content: "\2399"; }

.icon-calendar:before { content: "\1f4c5"; }

.icon-arrow-left2:before { content: "\e017"; }

.icon-arrow-right2:before { content: "\e01a"; }

.icon-trashcan:before { content: "\e0d0"; }

.icon-cog:before { content: "\2699"; }

.icon-bookmark2:before { content: "\e003"; }

.icon-bookmarks:before { content: "\e005"; }

.icon-user:before { content: "\1f464"; }

.icon-exit:before { content: "\ee02"; }

.icon-bug:before { content: "\e01b"; }

.icon-photo:before { content: "\1f304"; }

.icon-speech:before { content: "\1f4ac"; }

.icon-list:before { content: "\ed50"; }

.icon-video:before { content: "\e8a1"; }

.icon-lock:before { content: "\1f512"; }

.icon-bars:before { content: "\e574"; }

.icon-add:before { content: "\2b"; }

.icon-times:before { content: "\2421"; }

.icon-font-size:before { content: "\e600"; }

.icon-move:before { content: "\e070"; }

.icon-credit:before { content: "\1f4b3"; }

.icon-phone:before { content: "\1f4de"; }

.icon-envelope:before { content: "\2709"; }

.icon-paypal:before { content: "\e601"; }

@font-face { font-family: 'Greek Uncials'; src: url("../fonts/uncials-webfont.eot"); src: url("../fonts/uncials-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/uncials-webfont.ttf") format("truetype"), url("../fonts/uncials-webfont.svg#greek_uncialsregular") format("svg"), url("../fonts/uncials-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
h1, h2, h3, h4, h5 { -webkit-transition: font-size 0.3s; transition: font-size 0.3s; }

h1, article > h2:first-of-type { color: #333; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 40px; font-size: 2.5rem; font-weight: bold; line-height: 100%; margin-bottom: 32px; }
h1 a, article > h2:first-of-type a { color: #333; }

h2 { font-family: "Bitter", Georgia, "Times New Roman", sans-serif; font-size: 24px; font-size: 1.5rem; margin-bottom: 20px; max-width: 100%; }
h2.big { color: #333; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 30px; font-size: 1.875rem; font-style: normal; line-height: 118px; padding-left: 20px; text-transform: uppercase; }

h3 { color: #5E5E5E; font-family: "Bitter", Georgia, "Times New Roman", sans-serif; font-size: 18px; font-size: 1.125rem; line-height: 140%; margin-bottom: 20px; }
h3.sm { font-size: 15px; font-size: 0.9375rem; }
h3.big { font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 20px; font-size: 1.25rem; }

h4 { font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 15px; font-size: 0.9375rem; font-weight: 400; margin-bottom: 12px; text-transform: uppercase; }
h4.sm { font-size: 14px; font-size: 0.875rem; }

h5 { font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 12px; font-size: 0.75rem; font-weight: bold; margin-bottom: 12px; text-transform: uppercase; }

h6 { margin-bottom: 10px; }

a { color: #488DCD; text-decoration: none; }
a:hover { color: #70a6d8; }
a.btn { background: #1E1E1E; color: #DCDCDC; display: inline-block; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 38px; margin-bottom: 12px; padding: 0 12px; width: auto; }
a.btn i { color: #488DCD; margin-right: 10px; }
a.btn:hover { background: #444444; text-decoration: none !important; }

p, blockquote { font-size: 15px; font-size: 0.9375rem; line-height: 160%; }
p.bodytext span, blockquote.bodytext span { display: inline; }

p i { font-style: italic; }

p b { font-weight: bold; }

p.editor { color: #333; font-style: italic; padding-left: 10px; }

p.center { text-align: center; }

p.scripture { color: #5E5E5E; padding-left: 20px; }

.taba { padding-left: 10px; }

.tabb { padding-left: 20px; }

.tabc { padding-left: 30px; }

.tabd { padding-left: 40px; }

.tabe { padding-left: 50px; }

.tabf { padding-left: 60px; }

.tabg { padding-left: 70px; }

sup { font-size: 0.8em; font-weight: bold; margin-right: 6px; position: relative; top: -5px; }

sc { font-variant: small-caps; }

.logo { float: left; height: 64px; line-height: 64px; padding-left: 10px; padding-right: 40px; position: relative; width: 220px; }
.logo > a { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; }
.logo img { display: inline-block; width: 100%; vertical-align: middle; }
.logo:not(.touch):hover > img, .logo.hover > img { opacity: 0.8; }
.logo:not(.touch):hover .project-menu, .logo.hover .project-menu { max-height: 400px; }
.logo:not(.touch):hover > i:before, .logo.hover > i:before { content: "\e023"; }
.logo .project-menu { background: #2A2A2A; background: rgba(38, 38, 38, 0.98); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-style: normal; max-height: 0px; overflow: hidden; position: absolute; top: 100%; left: 0; -webkit-transition: max-height 0.3s; transition: max-height 0.3s; width: 100%; }
.logo .project-menu li { border-top: 1px solid #3A3A3A; line-height: 40px; }
.logo .project-menu a { color: #B1B1B1; display: block; padding: 0 10px; }
.logo .project-menu a:hover { background: #373737; }
.logo .project-menu img { padding: 8px 0; width: 80%; }
.logo > i { color: white; cursor: pointer; font-size: 20px; font-size: 1.25rem; line-height: 64px; position: absolute; top: 0; right: 0; text-align: center; width: 30px; z-index: 2; }

#mainMenu { background: #191919; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 15px; font-size: 0.9375rem; font-style: normal; height: 100%; line-height: 150%; position: fixed; overflow: auto; top: 0; left: 0; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); width: 205px; z-index: 99; -webkit-overflow-scrolling: touch; }
#mainMenu .close { display: block; font-size: 32px; font-size: 2rem; line-height: 40px; padding: 0; position: absolute; top: 10px; right: 10px; text-align: center; width: 40px; }
#mainMenu .home { line-height: 54px; }
#mainMenu img { width: 70%; }
#mainMenu a { color: white; display: block; letter-spacing: 2px; padding: 5px 25px; }
#mainMenu a:hover { background: #333333; }
#mainMenu li.active a { background: #333333; }
#mainMenu span, #mainMenu em { display: block; font-size: 12px; font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
#mainMenu ul { margin-bottom: 45px; }
#mainMenu ul.primary, #mainMenu ul.prime { font-size: 16px; font-size: 1rem; text-transform: uppercase; }
#mainMenu .tall a { line-height: 40px; }

body.active #mainMenu { -webkit-transform: translate(0%, 0); -moz-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); }

.results li { border-top: 1px solid #E5E5E5; overflow: hidden; padding: 15px 25px 15px 0; position: relative; }
.results li.add-note { padding: 15px 0; }
.results li:last-child { border-bottom: 1px solid #E5E5E5; }
.results li p { margin-bottom: 0; }
.results > li { padding: 15px 0; }
.results > li:last-child { border-bottom: 0 none; border-top: 0 none; }
.results li.light { background: #fffee3; background: -webkit-linear-gradient(left, white 0%, #fffee3 25%, #fffee3 75%, white 100%); background: linear-gradient(to right, white 0%, #fffee3 25%, #fffee3 75%, white 100%); }
.results .edit, .results .del { color: #BBB; font-size: 16px; font-size: 1rem; position: absolute; top: 15px; right: 5px; }
.results .del { top: 35px; }
.results .add-note a { background: #ba180c; -webkit-border-radius: 3px; border-radius: 3px; color: white; display: block; font-weight: bold; line-height: 42px; margin: 0 auto; max-width: 50%; padding: 0 5px; text-align: center; }
@media all and (max-width: 40em) { .results .add-note a { max-width: 80%; } }
.results .edit-note { background: #F8F8F8; border: 1px solid #CCC !important; -webkit-border-radius: 4px; border-radius: 4px; margin-bottom: 20px; padding: 0 15px 15px 15px; }
.results .edit-note h4 { line-height: 40px; margin-bottom: 0; }
.results .edit-note h4 span { color: black; }
.results .edit-note textarea { border: 1px solid #E1E1E1; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 14px; font-size: 0.875rem; font-weight: normal; margin-bottom: 20px; padding: 5px; resize: none; width: 100%; }
.results .edit-note input[type=submit] { background: #ba180c; }
.results .edit-note input.cancel { background: #CCC; color: #333; }
.results #user-notes:empty { background: #FAFAFA; border: 1px solid #EEE; -webkit-border-radius: 3px; border-radius: 3px; height: 200px; line-height: 200px; text-align: center; }
.results #user-notes:empty:before { content: "No notes to display"; }

.net-search-result { border-bottom: 1px solid #E5E5E5; font-family: "Bitter", Georgia, "Times New Roman", sans-serif; font-size: 14px; font-size: 0.875rem; line-height: 150%; padding: 16px 0; }
.net-search-result:first-child { border-top: 1px solid #E5E5E5; }
.net-search-result a { color: #666; }
.net-search-result .searchVref { color: #4885BE; font-weight: bold; }
.net-search-result em { color: #222; }
.net-search-result b { font-weight: bold; }

#gridHolder, #searchGridHolder { background: white; border: 1px solid #CCCCCC; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); font-family: "Lato",Tahoma,Helvetica,Arial,sans-serif; font-weight: normal; position: absolute; max-width: 342px; width: 90%; z-index: 3; }
@media all and (min-width: 40em) { #gridHolder, #searchGridHolder { left: 50%; margin-left: -171px; } }
@media all and (max-height: 35em) { #gridHolder, #searchGridHolder { left: 5%; margin-left: 0; max-width: 90%; } }
#gridHolder:before, #searchGridHolder:before { content: ''; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 6px 9px 6px; border-color: transparent transparent #cccccc transparent; position: absolute; top: -9px; left: 21px; }
@media all and (min-width: 40em) { #gridHolder:before, #searchGridHolder:before { left: 50%; margin-left: -1px; } }
#gridHolder:after, #searchGridHolder:after { content: ''; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 5px 7px 5px; border-color: transparent transparent white transparent; position: absolute; top: -7px; left: 22px; z-index: 1; }
@media all and (min-width: 40em) { #gridHolder:after, #searchGridHolder:after { left: 50%; } }
#gridHolder h4, #searchGridHolder h4 { color: #555; font-size: 18px; font-size: 1.125rem; font-weight: bold; line-height: 120%; text-transform: none; }
#gridHolder > div, #searchGridHolder > div { height: 100%; overflow: hidden; width: 100%; }
#gridHolder span, #searchGridHolder span { background: #DCDCDC; color: #555; clear: both; display: block !important; line-height: 24px; padding: 0 5px; }
#gridHolder a, #searchGridHolder a { background: #FAFAFA; float: left; height: 40px; line-height: 40px; width: 40px; text-align: center; }
#gridHolder a:nth-child(even), #searchGridHolder a:nth-child(even) { background: #EFEFEF; }
#gridHolder .gridWrapper, #searchGridHolder .gridWrapper { -webkit-transition: all 0.4s; transition: all 0.4s; height: auto; width: 200%; }
#gridHolder .gridWrapper:after, #searchGridHolder .gridWrapper:after { clear: both; content: ''; display: table; }
#gridHolder.chapter-select .gridWrapper, #searchGridHolder.chapter-select .gridWrapper { -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }
#gridHolder.chapter-select .gridWrapper #bookGrid, #searchGridHolder.chapter-select .gridWrapper #bookGrid { max-height: 10px; overflow: hidden; }

#searchGridHolder { height: 460px; margin-left: 0; max-width: 100%; top: 0; left: 0; width: 90%; }
#searchGridHolder a { font-size: 12px; font-size: 0.75rem; width: 20%; }
#searchGridHolder a.disabledFilterBook { background: #DDD; color: #999; pointer-events: none; }

#bookGrid, #chapterGrid { max-height: 460px; overflow: auto; float: left; padding: 10px; width: 50%; -webkit-transition: all 0.4s; transition: all 0.4s; }

#chapterGrid { background: white; height: auto; }

.popoverButton { position: relative; }

.popover, .verse-popover { background: white; -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.4); display: none; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; font-size: 15px; font-size: 0.9375rem; padding: 13px; position: absolute; top: -50px; left: 5%; z-index: 2; }
.active.popover, .active.verse-popover { display: block; }
.popover:after, .verse-popover:after { content: ''; display: block; width: 0px; height: 0px; border-style: solid; border-width: 6px 5px 0 5px; border-color: #ffffff transparent transparent transparent; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; z-index: 1; }

.popover.under { top: 100%; left: 15%; }
.popover.under:after { border-width: 0 5px 6px 5px; border-color: transparent transparent #ffffff transparent; position: absolute; top: -5px; left: 50%; }
.popover.fontSize { color: #555; cursor: default; left: 50%; margin-left: -145px; width: 290px; }
.popover.fontSize .sizes { font-family: "Bitter", Georgia, "Times New Roman", sans-serif; }
.popover.fontSize .sizes.active { background: #d8e9ff; border-color: #bbd3f0; }
.popover.fontSize .sizes.active + span { border-left-color: #bbd3f0; }
.popover.audioPlayer { left: 50%; margin-left: -175px; width: 350px; }
.popover.shareMenu { margin-left: -88px; text-align: left; width: 200px; }
.popover.bookmarks { color: #666; cursor: default; height: 220px; line-height: 140%; margin-left: -136px; width: 300px; }
.popover.bookmarks > div { height: 100%; overflow: auto; text-align: left; }
.popover.bookmarks li { border-bottom: 1px solid #CCC; font-size: 14px; font-size: 0.875rem; margin-bottom: 10px; min-height: 45px; padding-bottom: 10px; padding-left: 20px; position: relative; }
.popover.bookmarks .bookmarkRef { font-weight: bold; }
.popover.bookmarks br:last-child { display: none; }
.popover.bookmarks .edit, .popover.bookmarks .del { color: #CCC; position: absolute; left: 0; }
.popover.bookmarks .edit:hover, .popover.bookmarks .del:hover { color: #4885be; }
.popover.bookmarks .edit { top: 0; }
.popover.bookmarks .del { top: 20px; }

.verse-popover { line-height: 40px; padding: 0 20px; margin-top: -52px; margin-left: -58px; min-width: 120px; }
.verse-popover a { color: #555; }
.verse-popover i { color: #5f8ac9; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.cf:after, .wrap:after, p:after, blockquote:after { clear: both; content: ''; display: block; }

html { overflow: hidden; -webkit-text-size-adjust: 100%; }

html, body { height: 100%; min-width: 240px; }

body { background: white; font-family: "Bitter", Georgia, "Times New Roman", sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
body .appBody { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 2; }
body.active .appBody { -webkit-transform: translate(205px, 0); -moz-transform: translate(205px, 0); -ms-transform: translate(205px, 0); transform: translate(205px, 0); }
body.active #mainMenu { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

span, a { display: inline; }

h2 { margin-bottom: 0; }

h3 { margin: 20px 0; }

#loginPanel form { margin: 0 auto; padding: 50px 0; text-align: center; width: 80%; }
#loginPanel form a { display: block; font-size: 14px; font-size: 0.875rem; }

label { display: block; margin-bottom: 20px; }

input { border: 1px solid #E1E1E1; display: block; height: 32px; margin-bottom: 18px; padding: 0 10px; -webkit-transition: all 0.3s; transition: all 0.3s; width: 100%; }
input[type=checkbox] { display: inline-block; height: auto; margin: 0 10px 0 0; width: auto; vertical-align: middle; }
input[type=submit] { background: #096DC9; border: 0 none; color: #FFF; cursor: pointer; display: inline-block; padding: 0 18px; width: auto; -webkit-appearance: none; }
input[type=submit]:hover { background: #0a7ae1; }
input[type=text], input[type=password], input textarea { -webkit-font-smoothing: antialiased; }
input[type=text]:focus, input[type=password]:focus, input textarea:focus { -webkit-box-shadow: inset 0 0 0 1px #4885be; box-shadow: inset 0 0 0 1px #4885be; }
input[type=text].error, input[type=password].error, input textarea.error { -webkit-box-shadow: inset 0 0 0 1px #be4949; box-shadow: inset 0 0 0 1px #be4949; }

.logo, .logo i { height: 40px; line-height: 40px; }

.logo { padding-left: 0; padding-right: 0; overflow: hidden; width: 40px; }

.logo > i { color: #ba180c; }

.logo > img { height: 26px; margin: 10px 0 11px; padding-left: 10px; width: 144px; }

.logo .project-menu img { width: 70%; }

#mainMenu { font-size: 13px; font-size: 0.8125rem; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; }
#mainMenu a { padding: 5px 0 5px 15px; }
#mainMenu i { vertical-align: middle; }
#mainMenu ul.primary { font-size: 14px; font-size: 0.875rem; }
#mainMenu ul.primary a { line-height: 40px; }

.main-menu { background: #A61405; color: white; float: left; font-family: "Lato", Tahoma, Helvetica, Arial, sans-serif; height: 40px; line-height: 40px; overflow: hidden; text-align: center; -webkit-transition: width 0.3s; transition: width 0.3s; width: 40px; }
.main-menu i { display: inline-block; line-height: 40px; vertical-align: middle; }
.main-menu:hover { color: white; }

header { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; position: relative; }
header h2 { color: white; font-size: 16px; font-size: 1rem; padding-left: 10px; padding-right: 60px; text-align: center; }
header h2 i { vertical-align: middle; }

header.thin .search { height: 30px; margin: 5px 5px 5px 0; position: absolute; top: 0; right: 0; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 3; }
header.thin .search i { color: #B5B5B5; font-size: 20px; font-size: 1.25rem; pointer-events: none; position: absolute; top: 19%; left: 12px; }
header.thin .search input[type=search] { background: #404040; -webkit-box-shadow: 0 0 0 2px #222222; box-shadow: 0 0 0 2px #222222; border: 0 none; -webkit-border-radius: 18px; border-radius: 18px; color: #828282; font-size: 13px; font-size: 0.8125rem; height: 100%; padding: 0 15px 0 30px; -webkit-transition: all 0.3s; transition: all 0.3s; width: 40px; }
header.thin .search input[type=search]:focus { background: white; color: #262626; padding: 0 15px 0 40px; width: 220px; }

#content { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; height: 100%; line-height: 140%; overflow: auto; overflow-x: hidden; position: relative; }
#content h2 { color: #333; line-height: 160%; }

.chapterNumber { font-size: 28px; font-size: 1.75rem; font-weight: bold; margin-right: 3px; position: relative; }

.vref { font-weight: bold; position: relative; }

#gridHolder { display: none; }
#gridHolder a { font-size: 14px; font-size: 0.875rem; width: 20%; }
#gridHolder:before { left: 50%; margin-left: -1px; }
#gridHolder:after { left: 50%; }
#gridHolder #bookGrid, #gridHolder #chapterGrid { -webkit-overflow-scrolling: touch; }

.results h3 { margin-top: 0; }
.results .edit, .results .del { font-size: 24px; font-size: 1.5rem; }
.results .del { top: 55px; }
.results > li { min-height: 100px; padding-right: 20px; }
.results > li:last-child { border-top: 1px solid #E5E5E5; }
.results > li.net-search-result { min-height: 20px; }

.netVerse { cursor: pointer; }

.container { background: white; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 40px 10px 0; position: absolute; top: 0; left: 0; -webkit-transition: all 0.5s; transition: all 0.5s; width: 100%; }
.container:not(.active) { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); }
.container#resultsPanel { padding-top: 10px; }

.card { background: white; max-height: 200px; margin-top: -100px; position: fixed; left: 10%; top: 50%; width: 80%; }

.verse-popover { color: #CCC; padding: 0; margin-left: -106px; }
.verse-popover a { border-right: 1px solid #E5E5E5; font-size: 24px; font-size: 1.5rem; display: inline-block; font-weight: normal; height: 40px; line-height: 40px; padding: 0 15px; }
.verse-popover a:last-child { border-right: 0 none; }
.verse-popover a i { line-height: inherit; }
.verse-popover.social { margin-left: -104px; }
.verse-popover.searchWord { margin-left: -94px; }

.overlay { background: rgba(0, 0, 0, 0.2); height: 100%; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: -1; }
.overlay p.note { background: white; opacity: 0; padding: 20px; position: absolute; top: 0; left: 10%; width: 80%; -webkit-transform: translate(0, -150%); -moz-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); -webkit-transition: all 0.5s; transition: all 0.5s; }
.overlay.active { opacity: 1; z-index: 99; }
.overlay.active div.note { 
}

#noteOverlay {
    position: absolute;
    bottom: 10px;
    background: white;
    width: 98%;
    left: 1%;
    overflow: auto;
    
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
opacity: 1;

-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
border: 1px solid gray;
padding: 5px;
height: 100px;
}