src/arborator-draft/arborator-draft.css

.token {
	font: 18px DejaVu Sans;
	fill: black;
	font-family:sans-serif;
	--wordDistance:33;
	text-align: center;
} 
.FORM {
	/* 	font: 18px DejaVu Sans; */
	/* 	fill: black; */
	/* 	font-family:sans-serif; */
		--wordDistance:55;
		fill:black;
		text-align: center;
	} 

.LEMMA {
		font: 15px DejaVu Sans;
		fill: black;
		font-family:sans-serif;
		text-align: center;
		font-style: italic;
		--wordDistance:22;
	} 

.MISC-Gloss {
		font: 15px DejaVu Sans;
		fill: rgb(124, 96, 86);
		font-family:sans-serif;
		text-align: center;
		font-style: italic;
		--wordDistance:11;
	} 
.UPOS {
		font: 11px DejaVu Sans;
		fill: rgb(80, 29, 125);
		text-align: center;
		--wordDistance:22;
	} 



.DEPREL {
		font: 12px Arial;
		fill: #501d7d;
		font-style: oblique;
		font-family:sans-serif;
		--funcCurveDist:3; /* distance between the function name and the curves highest point */
	} 


.lemma {
	font: 15px DejaVu Sans;
	fill: black;
	font-family:sans-serif;
	text-align: center;
	font-style: italic;
} 


.MISC-Gloss {
	font: 15px DejaVu Sans;
	fill: rgb(124, 96, 86);
	font-family:sans-serif;
	text-align: center;
	font-style: italic;
	--wordDistance:11;
} 

.xdeprel {
	font: 12px Arial;
	font-style: oblique;
	fill: #21ba45;
	--funcCurveDist:3; /* distance between the function name and the curves highest point */

} 

.xdep {
	stroke: #21ba45;
	fill: none;
	--startOffset: 8;
	--tokDepDist: 15; /* distance between tokens and depdendency relation */
	--depMinHeight: 15; /* minimum height for dependency */
	--wordDistanceFactor: -1; /* distant words get higher curves. this factor fixes how much higher */
} 

.arrowhead {
	fill: white;
	stroke: black;
	stroke-width: .8;
}

.arrowheadxdep {
	fill: white;
	stroke: #21ba45;
	stroke-width: .8;
}

.curve {
	stroke: black;
	stroke-width: 1;
	fill: none;
	--startOffset: 8;
	--tokDepDist: 15; /* distance between tokens and depdendency relation */
	--depMinHeight: 15; /* minimum height for dependency */
	--wordDistanceFactor: -1; /* distant words get higher curves. this factor fixes how much higher */
}

.conll {
	display:none; /*toggles to inline*/
	unicode-bidi: embed;
	font-family: monospace;
	white-space: pre;
	margin-bottom: 0.6em;
	border-bottom: 1px solid #aaa;
	padding: 0.5em 0 0.17em 0;
	tab-size: 12;
	background-color: #fff ;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.sentencebox {
	margin-bottom: 0.6em;
	border-bottom: 1px solid lightgrey;
	padding: 0.5em 0 0.17em 0;
	margin-top: 1em;
}

/* Button */
.button {
	display: inline-block;
	position: relative;
	width: 120px;
	height: 32px;
	line-height: 32px;
	border-radius: 2px;
	font-size: 0.9em;
	background-color: #fff;
	color: #646464;
	cursor:pointer;
  }
  
  .button > paper-ripple {
	border-radius: 0px;
	overflow: hidden;
  }


.button.raised {
	transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: 0.2s;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  }

  .button.raised:active {
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
	transition-delay: 0s;
  }

  .center {
	text-align: center;
  }


	.svgbox {
		overflow-x: auto;
	}




nav {
	display: inline-block;
	vertical-align: middle;
}



nav ul {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    /* text-align: center; */
	width: 100%;
	
}
nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
	/* min-width: 33%; */
	
}
nav a {
  
	display: block;
	font: normal 16px sans-serif;
    padding-right: 9px;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
			transition: all .25s ease;
		
}

nav li ul li:hover a {
    background: #f5f5f5;
}
nav li ul {
	
	background: #fff;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 10px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav li:hover ul {
    opacity: 1;
    top: 23px;
	visibility: visible;
}
nav li ul li {
	width: 130px;
	display: inline-block;
	border-bottom: 1px solid lightgrey;
	background: #fff;
	cursor:pointer;
	
}
nav li ul a {
	color: #000;
	font: normal 16px/32px sans-serif
}
nav li ul a:hover {
	color: #501d7d;
	
	text-decoration: none;
}