/* 
	Global CSS definitions for the TEITOK system 
	will be overruled by project-dependent styles 
	htmlstyles.css and xmlstyles.css
*/

/* Style used to mark admin-only functions */
.adminpart { background-color: #eeeedd; }

/* Make sure the ACE textarea does not show until loaded */
/* div#editor { color: #ffffff; } */

/* Allow hiding non-used elements in the teiHeader display */
#teiheader *[id=""] { display: none; }

/* Highlighting bar over a facsimile image */
.hlbar { 
	opacity: 0.5; background-color: #ffff00; position: absolute; 
	top: 0px; width: 150px; height: 20px; left: 5px; /* these will be modified */
	display: none; 
}

#rollovertable tr:hover {
	background-color:#FFF3B8;
}
#rollovertable tr:nth-child(even):hover {
	background-color:#FFF3B8;
}
#rollovertable tr:nth-child(even)  {
	background-color: #eaeaee;
}

/* Styles for the Pageflow mode */
#viewport { border: 1px solid #666666; background-color: black; }
#pageflow #title { color: white; font-weight: bold; font-size: 24px; }
#pageflow .material-icons:hover { background-color: #990000; }
#pageflow .material-icons:selected { background-color: #000000; }
#pageflow #info { background-color: white; color: white; }
#pageflow #options { color: white; }
#pageflow #options a { color: #ffdddd; }
#pageflow { box-sizing: border-box; }
#pageflow #toolbar { color: white; }
#facsview { color: #dddddd; text-align: right;  }

/* Style for the Query Builder */
.tokdiv { border: 1px solid #aaaaaa; padding: 5px; background-color: #ffffff; display: inline-block; margin-bottom: 10px; margin-right: 5px; vertical-align: middle;  }
.globdiv { border-left: 1px solid #aaaaaa; padding: 5px; background-color: #eeffee; display: inline-block; margin-bottom: 10px; margin-right: 5px; vertical-align: middle;  }
.tokdiv p { font-size: smaller; margin: 2px; }
.globdiv p { font-size: smaller; }
.helpbox { border: 1px solid #444444; background-color: #f3f3f3; padding-left: 10px; padding-right: 10px; }
.caption { margin-top: -2px; margin-bottom: 3px; font-size: smaller; color: #888888; }
.blocksep { width: 100%; border-bottom: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; color: #888888; background-color: #eeeeee; margin-bottom: 9px; text-align: center; }
.andor { color: #888888; font-weight: bold; }
.wrong { font-weight: bold; color: #ff0000; }
.warning { font-weight: bold; color: #ff9900; margin-bottom: 3px; }

/* Style for anonimiztion */
anon { color: #9999bb; }
anon::before { content: '['; }
anon::after { content: ']'; }

/* New style for gaps - instead of JS treatment */
#mtxt gap::before { content: '[...]'; }

/* Default styles for TEI */
#mtxt hi[rend=italic] { font-style: italic; }
#mtxt hi[rend=bold] { font-weight: bold; }
#mtxt hi[rend=underlined] { text-decoration: underlined; }
#mtxt tei_head { display: block; font-size:  140%; }
#mtxt tei_head[n=2] { display: block; font-size: 120%; }
#mtxt tei_head[n=3] { display: block; font-size: 110%; }
#mtxt tei_head[n=4] { display: block; font-size: 100%; }
#mtxt tei_div { display: block; }

/* Style for the token boxes when showing tags */
.floatblock {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin: 0px; margin-bottom: 3px;
	padding: 4px;
	font-size: 10pt;
	border: 1px solid #cccccc;
}
.floatblock div {
	font-size: 10px;
	margin-top: 2px; margin-bottom: 0px;
	padding-top: 0px; padding-bottom: 0px;
	font-weight: normal;
	font-style: normal;
}


*[onclick] {
	cursor: pointer;
}

/* Some common definitions for the XML styles */
#mtxt mtok:hover { text-shadow: 1pt 1pt #99dd99;}

#rollovertable 

.header { font-weight: bold; }

*[hl] { background-color: #ffee99;  }
tok[hl="2"] { background-color: #ffcccc; }

/* Style for thumbnail blocks */
.thumbnail {
	display: inline-block;
	float: left;
	width: 80px; height: 135px;
	text-align: center;
	margin: 5px;
}
.thumbnail img { 
	width: 100%;
}

.tocnav { 
	margin-bottom: 10px;
}

#tokinfo {
	display: block; 
	position: absolute; 
	right: 5px; 
	top: 5px; 
	width: 300px; 
	background-color: #ffffee; 
	border: 1px solid #ffddaa;
}

#mtxt note { color: #0000aa; display: none; font-size: 10pt; vertical-align: super; }
#mtxt note[type=app] { color: #00aa00; }
#footnotediv {
    z-index: 50;
    width: 400px;
    position: fixed; 
    top: 10px; right: 10px; 
    border: 1px solid #cccccc;
    padding: 20px;
    background-color: #eeffee;
}
#footnotediv p.title {
	font-size: normal;
	margin: 0px;
	margin-bottom: 5px;
	font-weight: bold;
}
#footnotediv label { color: #88aa88; font-style: italic; display: inline-block; margin: 0; padding-right: 10px; }

app:hover { background-color: #bbffff; }

#facstable {
	border-collapse: separate;
	border-spacing: 0 15px;
}
#facstable tr:hover {
	background-color: #ffffdd;
}
#facstable td {
	border-bottom: 1px  dotted #eeeeee;
	padding: 0 5px 0 5px; 
}
#facstable img {
	margin-bottom: 5px;
}
#facstable .subtable th {
	background: none;
	border: none;
	font-weight: bold;
	opacity: 0.5;
}

#floatbox { float: right; width: 200px; border: 1px solid #cccccc; padding: 5px; padding-left: 15px; background-color: white; }
#floatbox .selbox { color: black; display: inline-block; background-color: #eeeeee; border 1px solid #666666; padding: 5px; margin-right: 5px; margin-bottom: 5px; }
#floatbox .x { cursor: pointer; }

#jsoptions button { background-color: #ffffff; }
#jsoptions button[active] { background-color: #eeeecc; }

video#track { display: block; position: fixed; right: 0px; top: 0px; }

/* CQL Highlighting */
#cqlbox { width: 620px; }
#cqlconsole { min-height: 28px; }
#cqlcode { padding: 5px; width: 600px; border: 1px dotted grey; margin-right: 15px; display: inline-block; font-family: monospace; white-space: pre; }
#cqlcode .Token { color: blue; }
#cqlcode .regionEdge { color: blue; }
#cqlcode .Attname { color: #aa0000; }
#cqlcode .sAttname { color: #aa0000; }
#cqlcode .pAttname { color: #aa0000; }
#cqlcode .Regex { color: green; }
#cqlcode .Within { color: purple; }
#cqlcode .Tokenname { color: #009999; }
#cqlcode .Number { color: orange; }
#cqlcode .Multiplier { color: brown; }
#cqlcode .Regionname { color: #aa0000; }
#cqlcode .Globalname { color: blue; }
#cqlcode .Globalexpr { color: #009999; }
#cqlcode .Tokname { color: #009999; }
#cqlcode .Flag { color: #009999; }

span[status=checked] { color: green; }
span[status=none] { color: #cccccc; }
span[status=auto] { color: orange; }
span[status=corrected] { color: blue; }
span[status=wrong] { color: red; }

.csscheck { display: none; }
.listcheck { display: block; }

/* Style TEI tables as HTML tables */
#mtxt row { display: table-row; }
#mtxt cell { display: table-cell; padding: 5px; }

#topswitch .switchopt { background-color: white; border: 1px solid #aaaaaa; padding: 2px; padding-left: 10px; padding-right: 10px; }
#topswitch .switchopt a { color: black; font-size: normal;  }
#topswitch .active { background-color: buttonface; }

/* Explicitly define TEI elements so that the DOM picks up on them */
ab { display: inline-block; }