body {
  width: 100%;
  height: 100%;
  background: url(texture-noise.png);
  overflow-y: scroll;
  overflow-x: scroll;
  margin: 0;
  font-size: 14px;
  font-family: "Lucida Bright", Georgia;
}

#loading_message {	
  padding-top: 15px;	
  margin-left: 220px;	
  font-size: 200%;	
  font-weight: bold;	
  color: black;	
}

#showScansion{
  margin-top: -45px;
  margin-left: 35px;
  position:absolute;
  height:32px;
  width:100px;
  background-color: white;
  padding: 3px;
  border-radius: 3px;
  font-size: 11px;
  font-family: "Lucida Bright";
  opacity:100%;
  z-index:0;
}

#hideScansion {
  margin-top: -45px;
  margin-left: 35px;
  position:absolute;
  height:32px;
  width:100px;
  background-color: white;
  padding: 3px;
  border-radius: 3px;
  font-size: 11px;
  font-family: "Lucida Bright";
  opacity:0%;
  z-index:0;
}

.versionButton {
  margin-top: -45px;
  display:block;
  position:absolute;
  height:30px;
  width:100px;
  background-color: black;
  color:white;
  padding: 4px;
  border-radius: 3px;
  font-size: 13px;
  font-family: "Lucida Bright";
  z-index:9;
}

#daleButton{
  margin-left: 150px;
  background-color:gray;
}

#mastButton{
  margin-left: 250px;
}

#diggleButton{
  margin-left: 350px;
}

del{
  text-decoration: none;
}


seg[type = metron].showScan {
  display:inline-block;
  border-right: 1px solid black;
}

seg[ana = long].showScan {
  display:inline-block;
  position:relative;
}

seg[ana = long].showScan .longbg {
  position:absolute;
  height:100%;
  width:100%;
  background: url(long.png);
  background-repeat: no-repeat;
  background-position-y: 5px;
  background-position-x:33%;
  background-size: 11px;
}


seg[ana = short].showScan{
  position:relative;
  display:inline-block;
  padding-top:0px;
}

seg[ana = short].showScan .shortbg {
  position:absolute;
  height:100%;
  width:100%;
  display:inline-block;
  background: url(short.png);
  background-repeat: no-repeat;
  background-size: 11px;
  background-position-x:33%
}

seg[ana = unknown].showScan{
  display:inline-block;
  background: url(x.png);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position-y:-4px;
  background-position-x:90%;
  overflow:visible;
}

seg[ana = shortn].showScan {
  display:inline-block;
  padding-top:-5px;
  background: url(brevis.png);
  background-repeat: no-repeat;
  background-size: 9px;
  background-position-y:0px;
  background-position-x:33%;
}

milestone[unit = period].showScan {
  display:inline-block;
  width:6px;
  height:20px;
  padding-top:0px;
  background: url(period.png);
  background-repeat: no-repeat;
  background-size: 23px;
  background-position-x:70%;
  padding-left:13px;
  font-size:11px;
}

.caesura.showScan {
  display:inline-block;
  height:1.3em;
  width:15px;
  background: url(caesura.png);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position-y: 0px;
  overflow:show;
}

milestone[unit = synapheia].showScan {
  display:inline-block;
  height:22px;
  width: 20px;
  background: url(synapheia.png);
  background-repeat: no-repeat;
  background-size: 23px;
  background-position-x: 70%;
  background-position-y: 90%;
  padding-left:13px;
  font-size:11px;
}


#footer {
  font-size:10px;
  position:absolute;
  /* padding-top:300px; */
  top:815px;
  margin-left:200px;
  width:1100px;
}

@font-face {
  font-family: Menlo; /*a name to be used later*/
  src: url('stats_crossfilter/css/Menlo-Regular.ttf'); /*URL to font*/
}

.meter-markings {
  font-family: Menlo;
}

#footer a {
  color: #3a3a3a;
}

#footer img {
  width:55px;
  height:25px;
}


rect {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}

pre {
  font-size: 18px;
}

line {
  stroke: #000;
  stroke-width: 1.5px;
}

.string,
.regexp {
  color: #f39;
}

.keyword {
  color: #00c;
}

.comment {
  color: #777;
  font-style: oblique;
}

a {
  color: #eee;
  text-decoration: none;
}

a:hover {
  color: #666;
}

.hint {
  position: absolute;
  right: 0;
  width: 1280px;
  font-size: 12px;
  color: #999;
}

#specialText {
  font-style: italic;
}



#filtersection a{
  color: #eee;
}

#resizeBox{
  position:fixed;
  width:175px;
  height:760px;
  top:0;
  pointer-events:none;
  z-index:10;
}

#filtersection {
  height: 245px;
  width:175px;
  position:absolute;
  bottom:0;
  background-color: #3a3a3a;
  pointer-events:visible;
  z-index:9;
  top: 300px;
}


.filters {
  position: absolute;
  width: 175px;
  height:160%;
  padding-bottom:0px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.filterLabel {
  position: relative;
}


#clearAll {
  background-color: #eee;
  position: absolute;
  margin-top: 6px;
  margin-left: 125px;
  padding: 3px;
  font-size: 11px;
  z-index: 11;
}

.filterButton.dropbtn {
  position: absolute;
  margin-top: 0px;
  width: 60px;
  padding: 3px;
  font-weight: 400;
  font-size: 22px;
  z-index: 11;
}

#filter2 {
  z-index: 0;
  opacity: 0;
}

.dropdown {
  position: relative;
  margin-top: -10px;
  padding-bottom: 20px;
}

.dropbtn {
  padding: 2px;
  width: 120px;
  margin-left: 30px;
  text-decoration: none;
  font-family: inherit;
  font-weight: 300;
  font-size: 17px;
  color: #eee;
  display: block;
  transition: 0.3s;
  text-shadow: 0 1px 0 #000;
}

.dropbtn:hover,
.dropbtn:focus,
.sidebar a:hover {
  background-color: #999;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  width: 140px;
  display: none;
  position: relative;
  margin-left: 30px;
  padding: 0px;
  transition: .3;
  z-index: 1;
  text-shadow: 0 1px 0 #000;
  font-family: inherit;
  font-weight: 300;
  color: #eee;
  font-size: 13px;
}

.dropdown-content a:hover {
  background-color: #999
}

.show {
  display: block;
}


#boxes {
  position: absolute;
  height: 650px;
  width: 800px;
  margin-left: 450px;
  top: 150px;
}

#searchInput {
  position: absolute;
  padding: 4px;
  width: 50px;
  margin-top: -30px;
  margin-left: 505px;
  border: none;
  font-size: 11px;
  font-family: "Lucida Bright";
}

.sectionDiv {
  height:70px;
  width:100px;
  position: absolute;
  margin-top: 517px;
}

.sectionDiv p {
  font-size:11px;
  font-family: "Lucida Bright";
}

.sectionButton {
  background-color: white;
  padding: 4px;
  border-radius: 3px;
  font-size: 13px;
  width:110px;
  font-family: "Lucida Bright";
}

#prevSection {
  display: none;
  margin-left: 0px;
  z-index:0;
}

#nextSection {
  position:absolute;
  margin-left: 470px;
}


.scroll-box {
  position: absolute;
  display: block;
  padding: 5px;
  height: 500px;
  font: 14px sans-serif;
  line-height: 25px;
  overflow-y: hidden;
  overflow-x: hidden;
}

#sectionHead {
  position:absolute;
  margin-left:240px;
  margin-top:-40px;
  width:200px;
  height:50px;
  font-size:20px;
  font: 14px sans-serif;
  font-weight:bold;
}

#linebox {
  position: absolute;
  z-index: 0;
  margin-left: 85px;
  width: 550px;
  height:500px;
  margin-top: 0px; 
  overflow-y: scroll;
  overflow-x: scroll;
  letter-spacing:.5px;
}

div.line {
  width: fit-content;
}


#numbox {
  z-index: 2;
  margin-left: 650px;
  width: 89px;
  text-align: left;
  overflow-y: hidden;
  overflow-x: hidden;
}

#charbox {
  z-index: 1;
  margin-left: -22px;
  width: 100px;
  text-align: right;
  overflow-y: hidden;
  overflow-x: hidden;
  font-weight: 600;
}

#commentbox {
  position:absolute;
  margin-top:520px;
  margin-left:115px;
  width:350px;
  height:150px;
  font: 14px sans-serif;
  text-align:left;
  line-height: 25px;
  overflow-y:scroll;
 

}

#transbox {
  opacity: 0;
  z-index: 0;
  margin-top: -40px;
  margin-left: 700px;
  padding-right: 60px;
  width: 0px;
  transition: .4s;
  overflow-y: scroll;
}


.directions {
/*
  text-align: left;
  position: absolute;
  width:300px;
  height:75px;
  padding-bottom:30px;
  margin-left: 0px;
  padding-bottom:20px;
  */
  font-style: italic;
}



.filterline {
  width:650px;
  cursor:pointer;
}


.char {
/*
  position: absolute;
  z-index: 5;
  margin-top: 0px;
  margin-left: 0px;
  text-align: right;
  height:30px;
  padding-top:100px;
  padding-bottom:15px;
  */
  font-weight: bold;
}

.trans {
/*
  margin-top: 0px;
  padding-top:50px;
  height:100%;
  margin-left: 70px;
  width:300px;
  */
}

.translationButton {
  position: absolute;
  margin-left: 655px;
  margin-top: 530px;
  background-color: white;
  padding: 4px;
  border-radius: 3px;
  width:120px;
  font-size: 13px;
  font-family: "Lucida Bright";
}

#hideTranslationButton {
  display: none;
}

.characters {
  background: url(texture-noise.png);
  position: sticky;
  top: 0;
  z-index:5;
}


.lineloc {
  cursor: pointer;
}

.panel {
  opacity: 1;
  z-index: 3;
  position: absolute;
  display: flex;
  height: 520px;
  width: auto;
  box-sizing:border-box;
  padding-right:100px;
  margin-left: 700px;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: .4s;
}

.accordion {
  height: 510px;
  color: black;
  z-index: 1;
  cursor: pointer;
  width: 0px;
  min-width: 0px;
  border: none;
  opacity: 0;
  transition: 0.4s;
  resize:horizontal;
}

.inner .scroll-box {
  position: absolute;
  padding: 0px;
  height: 500px;
  background: url(texture-noise.png);
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  border: none;
  opacity: 0;
  width: 0px;
  transition: 0.4s;
}

.inner .scroll-box.boxShown {
  opacity: 1;
  top: -1px;
  margin-left: 15px;
  padding: 5px;
  border: 1px solid black;
  transition: 0s;
  resize: horizontal;
  overflow-x: hidden;
}

.panelShown {
  min-width: 0px;
  width: 15px;
  border: 1px solid black;
  opacity: 1;
  transition: .4s;
}

#meter {
  background-color: rgb(255, 210, 117);
}


#elements{
  background-color:#fd8867;
}

#lyricSidebar {
  background-color: rgb(102, 154, 193);
}

#lyricSidebar.expand {
  width: 78px;
  opacity: 1;
  border: 1px solid black;
}


#lyricSidebarbox.boxShown {
  width: 53px;
}

#category {
  background-color: rgb(111, 196, 92);
}

#category.panelShown.expand {
  width: 45px;
}

#categorybox.boxShown {
  width: 20px;
}

#type {
  background-color: rgb(160, 147, 198);
}

#type.panelShown.expand {
  width: 90px;
}

#typebox.boxShown {
  width: 65px;
}

#alternate {
  background-color: #ffd4ca;
}

#alternate.panelShown.expand {
  width: 85px;
}

#alternatebox.boxShown {
  min-width: 60px;
}

#responsion {
  background-color: #d6eadf;
}

#responsion.panelShown.expand {
  width: 100px;
}

#responsionbox.boxShown {
  width: 75px;
}

.inner {
  position: absolute;
  margin-left: 0px;
  height: 507px;
  width: 0px;
  min-width: 0px;
}

.panelShown .inner {
  width: 15px;
}

.panelLabel {
  width: 510px;
  text-align: center;
  opacity: 0;
  font-size: 0px;
  position: absolute;
  top: 50%;
  left: 8px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panelShown .panelLabel {
  opacity: 1;
  font-size: 14px;
}

.panelButton {
  position: absolute;
  margin-left: 700px;
  margin-top: -30px;
  font-size: 25px;
  opacity: 1;
  z-index: 1;
  cursor: pointer;
}

.panelButtonHidden {
  opacity: 0;
  z-index: 0;
}

.translationShown {
  opacity: 0;
}

#statsbox {
  position:absolute;
  margin-top:650px;
  height:1000px;
  width:800px;
  display:none;
}

#statscat {
  position: relative;
  padding-left: 20px;
  padding-top: 10px;
  width:800px;
  height:1000px;
}

#statsfilters {
  position:relative;
  padding: 10px;
  font-family: "Lucida Bright";
  font-size: 13px;
  font-weight: 400;
  width: 650px;
  height: auto;
  overflow-y: scroll;
}

#filterContainer {
  display: inline-block;
  text-align: left;
  padding-right: 10px;
  padding-left: 5px;
}

.lineloc {
  display:inline-block;
  text-align:left;
  padding-right: 10px;
  padding-left: 5px;
}

#filterInner {
  background-color: #d6eadf;
}

.totals {
  position:relative;
  width:200px;
  height:20px;
  left:10px;
  font:14px sans-serif;
  font-weight:bold;
  color:black;
  cursor:pointer;
}

.totals a{
  color:black;
}

.totals a:hover{
  color:gainsboro;
}

#totalbox {
  top:20px;
}

#totalMetraBox{
  top:30px;
}

#totalSyllsBox {
  top:40px;
  padding-bottom:50px;
}

#filterbox {
  position:relative;
  padding-left:22px;
  width: 650px;
  height:500px;
  font: 14px sans-serif;
  line-height: 25px;
  padding:5px;
  border:1px solid black;
  overflow-y:scroll;
  overflow-x:hidden;
}

#filterboxlabel{
  position:relative;
  top:0px;
  font:14px sans-serif;
  font-weight:bold;
  color:black;
  width:150px;
  height:20px;
  left:250px;
}


milestone {
  padding-left:6.5px;
}

#menu_spacer_1 {
    height: 5px;
}

.indent_line {
    padding-left: 20px;
}

.editorial_mark {
	/*font-weight: bold;*/
}

#inputs {	
  padding-top: 15px;	
  margin-left: 220px;	
}	
#chartContainer {	
  margin-left: 220px;	
}	
.optionContainer {	
  float: left;	
  width: 225px;	
}	
option {	
  width: 150px;	
}	
.label {	
  font-weight: bold;	
  font-size: 18px;	
}	
#in {	
  display: none;	
}	
#excludeButton{	
  font-size: 16px;	
  padding-top: 20px;	
  padding-bottom: 20px;	
}	
#submit {	
  height: 50px;	
  width: 100px;	
  border: 1px solid white;	
  background-color: black;	
  color: white;	
  font-size: 14px;	
  cursor: pointer;	
}	
.chart {	
  height: 700px;	
  width: 800px;	
}	
#table {	
}	
#barChart {	
}	
#pieChart {	
}

#lyric {	
  background-color: rgba(102, 154, 193, .8);	
}	
#lyric.expand {	
  width: 78px;	
  opacity: 1;	
  border: 1px solid black;	
}