html { 
  height: 100%; 
}
body {
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  font-family: junicoderegular;
  font-size: 1em;
  background-color:black;
overflow: hidden
}

#whole {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    width:100%;
    align-items: center;
    justify-content: flex-start;
    gap:5px;
}
#page-head {
    display: flex;
    width:97%;
     min-height: 45px;
    align-items: center;
    flex-wrap: wrap;
    font-weight: lighter;
    font-family: Helvetica;
    color: #d6ced0;
    justify-content: space-between;
    background-color: black;
    margin-top: 1px;
    margin-bottom: 2px;
}
#page-head a {text-decoration:none}
#grp1 {display:flex; justify-content: space-between;   padding-left: 10px; align-items: center; flex-grow:1; white-space:no-wrap; padding-right: 5px;}
#grp2 {display:flex; justify-content: space-between;   align-items: center; max-width: 600pxpx; flex-grow:1; white-space:no-wrap; margin-left:5px}
#search {display:flex; margin-right:10px; justify-content: space-evenly; align-items: center};
#title {font-size: 140%; font-weight: 600; color: white }

#rTable {
  display: block;
  overflow: hidden;
  height: 50%;
//  flex-grow:2;
  width: 99%;
  margin-bottom: 5px;
}


#panel-left {
    width: 49%;
     min-width: 100px;
    min-height: 100px;
    background-color:black;
}

#panel-right {
     height: 100%;
    width: 49%;
    background: #fff7e8;
    min-width: 100px;  //mobile phone width
    min-height: 100px;
    overflow: hidden;
//    margin:auto;
}

/* #footer {
	height: 50px;
	background-color: #fff7e8;
} */

#searchVBase {background-color: #fff7e8; display:none}
#searchContainer {background-color: #fff7e8; ; display:none; height: 91%; overflow: auto; width: 98%;}
#transcriptFrame {width:100%; overflow:auto}
#compareFrame {min-width:250px; overflow:auto; width:98%; display:none; background-color: #fff7e8; height:88%}
#editorial {display:none}
#popUps {display:none}
#collationFrame {display:none}
#splash {margin:auto; height:30%; flex-grow:2;}

a.splash {
    color: #c49d61;
    text-decoration: none;
}

#p-r-top {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  min-width: 400px;
}
#c-r-top {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  min-width: 520px;
}

.pageLinks {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 8px;
  margin-top: 3px;
}
.pageInf {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 8px;
}
#transcript {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  margin-left: 20px;
  margin-right: 10px;
  overflow:auto;
  width: 100%;
  height: 100%;
} 
#collation {overflow:auto; margin-left: 20px; margin-right: 15px; }
#transcript-tm {
  margin-bottom: 10px;
  width:100%;
  display: flex;
  justify-content:space-between;
}
#transcript-bm {
  font-size: 80%;
  width: 90%;
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
}
#transcript-body {
  display:flex;
  justify-content:flex-start;
  flex-direction: row;
 }

#transcript-text {
//  display:flex;
//  justify-content:center;
//  flex-direction: row;
	margin-bottom: 30px;
 }
#edNotes {width:80%; margin:auto;}
#br {display: flex; justify-content: flex-end;}
.col {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
}


#select {width:235px; white-space: nowrap}
#bm {display: block; text-align: center}
#popApp {display:flex; align-items: center; justify-content: space-between; width: 100%}
#popAppFrame {display: flex; flex-direction: column; align-items: center}
#rdgApp {display:flex; align-items: center; line-height: 110%; }
#popAppTitle {display:flex; justify-content: space-between; width: 50%}



#splitter {     
   flex: none;
   width: 12px;
   height: 100%;
   cursor: col-resize;
    background-image: url("../../common/images/splithandvert.png");
    background-color: black;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
}


.gutter:hover {
	background-color: darkgrey;
}
.gutter {
    background-color: black;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 40px;
    cursor: row-resize;
   background-image: url("../../common/images/splithandhoriz.png");
}

.gutter.gutter-horizontal {
	   background-image: url("../../common/images/splithandvert.png");
	   background-size: 15px;
       cursor: col-resize;
}

div#tipDiv {padding:5px; color:#000;  line-height: 1.5; background-color:#fff7e8; border: thin solid #844D18; font-family: junicoderegular; margin-left: 8px }
.tooltip2 {width:260px}
.tooltip {width:430px; max-height:600px; overflow:scroll; }

unclear {color:  darkgrey};

.msInf {background-color: #CBBAA1;}

.commRef {color:red}

@media all and (max-width : 829px) {
	#grp1 {max-width: 829px; }
	#grp2 {max-width: 829px; padding-left: 5px; margin-left: 0px}
	#page-head {height: 67px;}
}

@media all and (max-width : 839px) {
	#grp1 {max-width: 839px; }
	#grp2 {max-width: 839px; padding-left: 5px; margin-left: 10px}
}
@media all and (max-width : 849px) {
	#grp1 {max-width: 849px; }
	#grp2 {max-width: 849px; padding-left: 5px; margin-left: 20px}
}

@media all and (max-width : 880px) {
	#grp1 {max-width: 880px; }
}
@media all and (max-width : 859px) {
	#grp2 {max-width: 859px; padding-left: 5px; margin-left: 0px}
}

#ssDoSearch {
  background-image: url("../../common/images/searchicon.png");
  background-size: 15px;
  height: 23px;
 width: 23px;
 font-size: 0px;
 background-position: 50%;
 background-repeat: no-repeat;
 position: relative;
 top: -4px;
}

#ssQuery {
	width: 100px;
}

#ssResults {display:none}
#ssPoweredBy {display:none}
#ssSearching {display:none}

#editorial {background-color: #fff7e8; ; display:none; height: 88%; overflow: auto; width: 98%;}
#editorial p {margin-left: 15px; margin-right: 15px;}
#editorial h3 {margin-left: 15px; margin-right: 15px;}

#editorial h2{text-align: center}

#splashLogos{margin-top: 25px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;}