body {background-color:#ffffff; font-family: arial,geneva,verdana; text-align:left;}
h1 {font-size: 14px; color: #444;text-align:center;}
.container {margin: 3px auto; padding: 5px; position:relative; width:99%;}
p, div {font-size: 16px;}
@media screen and (max-width: 1280px) {
	p, div {font-size: 15px; }
}
@media screen and (max-width: 980px) {
	p, div {font-size: 14px; }
}
@media screen and (max-width: 736px) {
	p, div {font-size: 13px; }
}
.r {background: transparent; margin-top:2px;}
.r.ind0 {padding-left:0;}
.r.ind1 {padding-left:15px;}
.r.ind2 {padding-left:30px;}
.r.ind3 {padding-left:45px;}
.r.ind4 {padding-left:60px;}
.r.ind5 {padding-left:75px;}
.r.ind6 {padding-left:90px;} /* not programmed to output beyond this level (7, or, 0-6 indexed), but the potential is here for a customization */
.r.ind7 {padding-left:105px;}
.r.ind8 {padding-left:120px;}
.c {background: transparent; cursor:default; display: inline;}
.cmt {cursor:pointer;border-bottom:1px solid #C6B5A5;box-shadow:inset 0 -1px 0 #C6B5A5;color:inherit;-webkit-transition:background .15s cubic-bezier(.33,.66,.66,1);transition:background .15s cubic-bezier(.33,.66,.66,1);}
.z {background-color: #555; color: #FFFFFF; margin-left: -3px; padding:0 2px; text-decoration:none; } /* line number - devolopment */
#ln-toggle { background-color: #777; color: #fff; font-size: 11px; margin-left:12px; padding: 2px 3px; text-decoration: none; } /* line number toggle - development */
.wrap {background: transparent; cursor:default; } /* margin-left value needs to be 2 px more than .b class width */
.wrap > .wrap {margin-left: 16px;}  
.b {float:left;width: 14px;} /* between the width of b and w, there's a sweet spot at 14/9 and 16/10 */
.w {width: 9px;}
#showDiv {
  display: none;
}
#popup {
  position: absolute;
  padding: 5px;
  overflow: auto;
  z-index: 1;
  cursor:move;
  border: 3px solid grey;
  border-radius: 5px;
  background: #fff;
}
div.dragBar {background-color:#737373; height:18px; margin-bottom:10px; padding: 2px;}
div.dragBar  a {background-image: url('close.gif'); float:right; width:18px; height:18px;}
div.dragBar  a:hover {background-position: 0 -18px}
.hebrew {font-size: 20px; line-height: 20px; color: #001320; font-family: Ezra SIL, SBL Hebrew, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, Cardo, Arial, Helvetica, Sans-serif; text-decoration: none; }
.greek {font-size: 14px;line-height: 17px;color: #001320;font-family: Cardo, GentiumAlt, Galilee Unicode Gk, Galatia SIL, Palatino Linotype, Arial, Helvetica, Sans-serif;text-decoration: none;text-align: justify;}

/* ====== BARS ====== */
.wrap {
  position: relative; /*for bars*/
}
.bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16px;
}
.b1 {
  background: url(bar1.gif) repeat-y;
}
.b2 {
  background: url(bar2.gif) repeat-y;
}
.b3 {
  background: url(bar3.gif) repeat-y;
}
.a1 {
  background: url(bar1a.gif) repeat-y;
}
.a2 {
  background: url(bar2a.gif) repeat-y;
}
.a3 {
  background: url(bar3a.gif) repeat-y;
}
.a1, .a2, .a3 {
  cursor: pointer;
}
.wrap .r {
  margin-left: 16px; /*bar width*/
}

/* ===== COMMENT-CONTAINER ====== */
.comment-container .c {
  display: block;
  padding-right: 5px;
}
.comment-container .c > div {
  position: relative;
}
.comment-container .c > div:after { /* clearfix */
  clear: both;
  content: ' ';
  display: block;
}
.comment-container .left-column {
  box-sizing: border-box;
  margin-right: 50%;
  padding-left:3px;
}
.comment-container .right-column {
  box-sizing: border-box;
  margin-right: -5px;
  padding-left:3px;
  float: right;
  width: 50%;
}
.comment-container .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  margin-right: -5px;
  width: 5px;
  background: #fff;
}
.comment-container .right-column.no-comment {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
}
.comment-container .r .right-column.no-comment,
.comment-container .r .divider {
  top: -2px;
  bottom: -2px;
}
/* new styles for collapsing feature */
.container {background: white }
.wrap { background: inherit }
.collapsed {
	background: #f4f4f4;
	overflow: hidden;
    margin-top: 2px;
    height: 13.6px;
}
.collapsed:after {
    position: absolute;
    content: 'Click (or double-tap) here to expand this section';
    background: inherit;
    height: 13.6px;
    left: 10px;
    right: 0;
    top: 0;
    font-style: italic;
    color: grey;
    padding-left: 6px;
    cursor: pointer;
}