/* General */
* { margin:0; padding:0; }
html { overflow-y:scroll;}
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 16px; line-height: 1.5;  font-family: Helvetica, Arial, sans-serif; font-weight: 300; padding-bottom: 150px;  }
#nav, main { margin:0 auto; display:block; }
h1,h2,h3,h4,h5,h6,body > main b, body > main strong { font-weight: 300; }
a { color: #08c; }
a:hover i:before { cursor:pointer; }

/* Utilities */
.a-center { text-align: center; }
.no-display { display: none !important; }
.f-right { float: right; }
.f-left { float: left; }

/* Header Nav */
header { height: 40px; position: relative; color: #fff; margin-bottom: 10px; background-color: #222; z-index: 10; }
header a { color: #fff; text-decoration: none; display: block; }
#nav { }
#nav,
#nav li { list-style: none; line-height: 40px; position: relative; }
#nav .top { display: inline-block; position: relative; width: 24%; text-align: center; }
#nav .top > a { }
#nav .top.hover > a { background-color: #444; }
#nav i { margin-right: 3px; }
#nav .top .sub { display: none; position: absolute; padding:15px 0 0 0; top:35px; left:50%; width: 250px; margin-left: -125px;    }
#nav .top .sub .inner-sub { background-color: #444; padding:5px 0; text-align: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  }
#nav .top .sub .inner-sub:before { 
    content:""; 
    display: block; 
    width: 0px; 
    height: 0px; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #444 transparent; 
    position: absolute; 
    left:50%;
    margin-left: -10px;  
    top:8px;
}
#nav .top.hover .sub { display: block; }
#nav .top .sub { font-size: 14px; }
#nav .top .sub .loader { text-align: center; }
#nav .top .sub .loader,
#nav .top .sub a { padding:10px 15px; line-height: 1.3; }
#nav .top .sub a:hover,
#nav .top .sub li.active a { background-color: #333; }
#nav .top .sub a small { display: block; color: #aaa; line-height: 1.5 ;  }
#nav .top .sub a small span { color: #ccc; }
#nav .top .sub li > small { padding:10px 15px 0; font-size: .9em; }
#nav .top .sub .actions { overflow: hidden; border-bottom: 1px solid #555; border-top: 1px solid #333;  }
#nav .top .sub .actions a { background-color: #555; float: left; width: 33.33332%; display: block; padding:0; line-height: 40px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #333; border-top-color:#5c5c5c; border-left-color:#666; }
#nav .top .sub .actions2 a { width: 49.9998%; }
#nav .top .sub .actions4 a { width: 24.9998%; }
#nav .top .sub .actions a.hover,
#nav .top .sub .actions a:hover { background-color: #444; }
.showing-tour #nav .top .sub .actions a:hover { background-color: #555; }
.showing-tour #nav .top .sub .actions a.hover:hover { background-color: #444; }
#nav .top .sub .actions a:first-child { border-left:0; }
#nav .top .sub .actions a:last-child { border-right:0; }
#nav .top .sub .actions a i { margin:0;}
#nav .top .sub .divider { height: 0px; margin:4px; border-top: 1px solid #333; border-bottom: 1px solid #555;  }

#nav .top .sub .empty-placeholder li { padding: 15px; line-height: 20px;}
#nav .top .sub .empty-placeholder li a.btn-danger { line-height: 20px; padding: 0 9px;}
#nav .top .sub .empty-placeholder li a.btn-danger:hover { background-color: #BD362F;}

/* Read Nav */
#nav .read-nav h4 { padding: 5px 15px 0; font-size: 20px; background-color: #404040; line-height: 2; border-bottom: 1px solid #555; margin-top: -1px;  }
#nav .read-nav h5 { padding: 5px 0 0; margin:0 15px 5px; color: #999;  font-size: 16px; background-color: #444; line-height: 1.5; border-bottom: 1px solid #555;  }
#nav .read-nav h4 i,
#nav .read-nav .inner-sub > li { display: none; }
#nav .read-nav .inner-sub > .actions,
#nav .read-nav .inner-sub > #log { display: inherit; }
#nav .read-nav .custom { margin: 5px; text-align: center; }
#nav .read-nav .custom a {  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#nav .read-nav #log a { opacity:.55; position: relative; z-index: 10;  }
#nav .read-nav #log .unread a { opacity: 1; }
#nav span.date { color: #777; position: absolute; right:8px; top:50%; font-size: 14px; z-index: 15; display: block; line-height: 20px; padding:0 5px; border-radius:3px; margin-top: -10px; }
#nav .read-nav #bookmarks a > span { float: right; opacity:0;}
#nav .read-nav #bookmarks a:hover > span { opacity:.3;}
#nav .read-nav #bookmarks a:hover > span:hover { opacity:1;}
#nav .read-nav #reading_plans li a small,
#nav .read-nav #reading_plans li a .plan-name { display: block;  width: 85%;  }
#nav .read-nav #reading_plans li a .edit-actions { position: absolute;  top:7px; right:1%; margin-top: 0; width: 10%; }
#nav .read-nav #reading_plans li a .edit-actions span { font-size: 16px; padding:3px; display: block; color: #fff; opacity:0; }
#nav .read-nav #reading_plans li a:hover .edit-actions span { opacity:0.3; }
#nav .read-nav #reading_plans li.powered a .edit-actions span.power { opacity:0.3;}
#nav .read-nav #reading_plans li a .edit-actions span:hover { background: none; opacity:1; }
#nav .read-nav #reading_plans li.powered a:hover .edit-actions span.power { opacity:1;}

/* Search Nav */
#nav .search-nav .form-wrap { line-height: 30px; margin:0 5px; padding:0 5px; background-color: #fff;  position: relative; min-height: 40px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#nav .search-nav ul { padding-top: 5px; background-color: #444; margin:0 -5px; }
#nav .search-nav form,
#nav .search-nav input { margin-bottom: 0; }
#nav .search-nav input { width: 100%; padding:7px 0; background: none; border:0; box-shadow:none; line-height: 40px; font-size: 20px; height: 30px;  }
#nav .search-nav li a { color: #bbb; }
#nav .search-nav li a strong { font-weight: bold; color: #fff; }

/* Tweak Nav */
#nav .top .sub .actions a.theme-link { border-left:1px solid #333; border-right: 0; opacity: 0.95; -moz-opacity: 0.95; filter:alpha(opacity=95);}
#nav .top .sub .actions a.theme-link:last-child { border-right:1px solid #333;}
#nav .top .sub .actions a.theme-link:hover { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=1); }
#nav .top .sub .actions a.font-link { font-size: 20px; }

/* Share Nav */
#nav .share-nav .actions a span { display: none; }

/* Content */
body > main { text-align: justify; text-justify: newspaper; }
body > main h2 { margin-top: 30px; }
body > main h4 { line-height: 2.5em; margin-bottom: .5em;}
body > main b.reference { vertical-align: super; font-size: .7em; position: relative; top: .15em; z-index: 1; cursor: pointer;}
body > main span[id] { border-bottom: 1px solid rgba(100, 100, 100, 0.0); transition: all .4s ease; -moz-transition: all .4s ease; -webkit-transition: all .4s ease;}
body > main span.read b.reference { border-bottom: 1px dotted; }
body > main span.clicked { border-bottom: 1px solid rgba(100, 100, 100, 0.4); }
body > main span.spacer:after { content:''; display: block; margin-bottom: 1em; }
body > main span.inner-spacer { display: block;}
body > main a[rel="toggle-read"] { float: right; cursor: default; color: #666; text-decoration: none; opacity: 0.5; transition: opacity .4s ease; -moz-transition: opacity .4s ease; -webkit-transition: opacity .4s ease;}
body > main a[rel="toggle-read"] i { text-decoration: none !important; margin-right: 3px;}
body > main a[rel="toggle-read"] .icon-ok { display: inline-block;}
body > main a[rel="toggle-read"].passage-unread { opacity: 0;}
body > main a[rel="toggle-read"].passage-unread .icon-ok { display: none;}

/* Tour */
.showing-tour .empty-placeholder { display: none;}

/* Modals/Popovers ============================================= */
.modal.fade.in { top:20%;}
.modal-header em {  font-size: 14px; display: block; line-height: 16px; color: #aaa;  }
.modal-header small { float: right; font-size: 12px; margin-right: 20px; line-height: 36px;  }
.modal-footer .response span { font-size: 13px; line-height: 30px; }
/* Intro Styles */
.showing-tour .modal-backdrop { opacity:0;}
.popover { color: #666; font-size: 14px; }
.popover-title { font-size: 18px; }
.popover-title a { font-size: 14px; float: right; color: #999; display: block; padding:2px; }
.popover-title a:hover { color: #333; }
.popover-content .btn { margin-top: 10px; }
.popover.top .arrow:after { bottom:2px;}
.popover.right .arrow:after { left:2px;}
.popover.bottom .arrow:after { top:2px;}
.popover.left .arrow:after { right:2px;}
.popover .label { background-color: #555; color: #fff; padding:0 6px; display: inline-block;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;   }
.popover .label.gray { color: #aaa; }

/* Verses Popovers */
body > main .popover .actions { width: 201px; margin:0 auto; }
body > main .popover .popover-title small { white-space: nowrap; }

/* Responsive ============================================= */
@media only screen and (min-width:1200px) {
    body > main { font-size:30px; line-height: 1.5; }
    #nav, body > main { width: 800px; }
}
@media only screen and (min-width:800px) and (max-width:1199px) {
    body > main { font-size: 24px; line-height: 1.5; }
    #nav, body > main { width: 650px; }
}
@media only screen and (min-width:600px) and (max-width:799px) {
    body > main { font-size: 22px; line-height: 1.5; }
    #nav, body > main { width: 500px; }
}
@media only screen and (max-width:799px) {
    #nav .top { position: static; }
    #nav .top .sub { top:40px; padding-top: 0; left:0; right:0; width: auto; margin-left: 0;   }
    #nav .top .sub .inner-sub { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }
    #nav .top .sub .inner-sub:before { display: none; }
    #nav .read-nav .custom { margin:0;}
    #nav .read-nav .custom a { padding:15px 0 14px;}
    #nav .read-nav #reading_plans li a { overflow: hidden; position: relative; }
    #nav .read-nav #reading_plans li a small,
    #nav .read-nav #reading_plans li a .plan-name { width: 65%;  }
    #nav .read-nav #reading_plans li a .edit-actions { position: absolute; width: 25%; right:3%; top:50%; margin-top: -10px; }
    #nav .read-nav #reading_plans li a .edit-actions span { float: right; display: block; opacity:0.15; font-size: 18px; width: 25%;  }
    #nav .read-nav #reading_plans li.powered a .edit-actions span.power { opacity:1;}
}
@media only screen and (max-width:600px) {
    .modal { margin-left: 0; left:2.5%; width:95%;}
    .modal-header small { float: none; display: block; line-height: 1.2; }
    .modal-footer p.response span { display: block; }
    .modal-footer p.response .no { padding-left: 0; margin-top: 10px; }
}
@media only screen and (min-width:450px) and (max-width:600px) {
    body > main { font-size: 20px; line-height: 1.5; }
    #nav, body > main { width: 85%; }
}
@media only screen and (max-width:449px) {
    #nav .top { width: 23.9%; }
    #nav .top:last-child { float: right; margin-right: 0; }
    #nav .top > a span { display: none; }
    body > main { font-size: 18px; line-height: 1.5; }
    #nav, body > main { width: 90%; }
}

@media only screen and (max-width:400px) {
    #nav .read-nav #reading_plans li { border-bottom:1px solid #3c3c3c; border-top: 1px solid #4c4c4c; }
    #nav .read-nav #reading_plans li a small,
    #nav .read-nav #reading_plans li a .plan-name { width: 85%;  }
    #nav .read-nav #reading_plans li a .edit-actions { top:7px; right:2%; margin-top: 0; width: 10%;  }
    #nav .read-nav #reading_plans li a .edit-actions span { float: none; opacity:0.1; font-size: 18px; padding:3px; display: block; }
}

/* Tweaks */
body.light #nav .top .sub .actions a.light-link,
body.sepia #nav .top .sub .actions a.sepia-link,
body.dark #nav .top .sub .actions a.dark-link,
body.serif .font-link.serif,
body.sans .font-link.sans { display: none !important; } 

/* Themes */
/*
::selection { background: rgba(0,0,0,.1); color: #346D9F; }
::-moz-selection { background: rgba(0,0,0,.1); color: #fff; }
*/
body { transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease;}
body.light,
#nav .top .sub .actions a.light-link { background-color: #eee; color: #333; }
body.sepia,
#nav .top .sub .actions a.sepia-link { background-color: #DED6B5; color: #32322A; }
body.dark,
#nav .top .sub .actions a.dark-link { background-color: #111; color: #666; }

/* Fonts */
body.serif > main,
.font-link.serif { font-family: "Droid Serif", "Times New Roman", Times, serif; }
body.sans > main,
.font-link.sans { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }