/*** VARIABLES ***************************************************************/

:root {
	--color-lightblue:	rgb(167,195,221);
	--color-blue:		rgb(124,165,205);
	--color-darkblue:	#26b;
	--color-lightgrey:	#d8d8d8;
	--color-lightgray:	#d8d8d8;
	--color-darkgrey:	#888;
	--color-darkgray:	#888;
}

/*** RESET *******************************************************************/

body { margin: 0; border: none; padding: 0; font-size: 100%; }
main, header, article, aside, section, nav, footer, figure, figcaption { display: block; width: auto; }
main, header, article, aside, section, nav, footer, figure, figcaption,
div, h1, h2, p, img, ul, ol, li, dl, dt, dd,
table, thead, tbody, tfoot, tr, th, td,
form, fieldset, legend, input, label, select, option,
span, em, strong, i, b, address, cite, abbr, kbd, a, a:link, a:active, a:visited,
br { margin: 0; border: none; padding: 0; font: inherit; line-height: 1em; vertical-align: baseline; color: inherit; text-decoration: inherit; }
table { table-layout: auto; border-spacing: 0; border-collapse: collapse; empty-cells: show; }

/*** GENERIC TEXT ************************************************************/

body { font-family: sans-serif; font-weight: 400; }

h1 { font-size: 1.5em; line-height: 1em; margin-bottom: 1em; }
h2 { font-size: 1.25em; line-height: 1.2em; margin-bottom: 1.2em; }
h2 { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }
section > h1 { font-size: 1.25em; line-height: 1.2em; margin-bottom: 1.2em; }
section > section > h1 { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }
p, li, dt, dd { font-size: 1em; line-height: 1.5em; }

p, ul, ol, dl { margin-bottom: 1.5em; }
dd + dt { margin-top: 1.5em; }

ul p, ul ul, ul ol, ul dl,
ol p, ol ul, ol ol, ol dl { margin-bottom: 0em; }

h1, h2 { font-weight: 600; }

ul, ol, dd { padding-left: 1.5em; }
ul, ol { list-style-position: outside; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-latin; }
ol ol ol { list-style-type: lower-greek; }

a:hover { text-decoration: underline; }
cite, abbr, i { font-style: italic; }
strong, em, b, kbd { font-weight: 600; }

body { color: #444; background-color: #fff; }
a, a:link, a:active, a:visited { color: var(--color-darkblue); }

body { padding: 1em; }

article > img, section > img { display: block; margin: 0 auto 1.5em auto; }
img.floating { float: right; margin-left: 1em; }

/*** TABLE *******************************************************************/

table { margin: 0 auto 1.5em auto; min-width: 100%; }
th, td { border-width: 1px; border-style: solid; line-height: 1.5em; padding: 0.75em 0.75em 0.75em 0.75em; }
th, td { vertical-align: middle; } /* without vertical-align Firefox computes empty cell height wrong */
th { text-align: center; }
td { text-align: left; }
table { margin-top: -1px; } /* border compensation */
th, td { padding-top: calc(0.75em - 1px); } /* border compensation */

/*** HEADER & FOOTER *********************************************************/

body > header {	font-variant: small-caps; text-transform: lowercase; letter-spacing: 2px; }
body > header > nav > ul { padding-left: 0; }
body > header > nav > ul > li { list-style-type: none; }
body > header > nav.portal-menu { font-size: 0.9em; font-style: italic; }
body > header > nav.portal-menu > ul > li + li { display: none; }
body > header > nav.portal-menu a { color: #9bd; }
body > header > h1 > a, body > header > h1 > a:link, body > header > h1 > a:active, body > header > h1 > a:visited { text-decoration: none; color: inherit; }
body > header > nav.portal-menu ul { margin-bottom: 0em; }
body > header > h1 { margin-bottom: 0.125em; margin-top: 0.125em; }

body > header > h1 + h2 {
    color: #888;
    font-weight: normal;
}
body > header > h2 {
    margin-bottom: 0.125em;
    margin-top: 0.125em;
}
body > header > h1 + h2 > a,
body > header > h1 + h2 > a:link,
body > header > h1 + h2 > a:active,
body > header > h1 + h2 > a:visited {
	text-decoration:none;
	color:inherit;
}

body > footer { font-size: 0.75em; text-align: center; margin-top: 5em; color: #888; font-variant: small-caps; clear:both;}
body > footer img.si-logo { padding-bottom: 0.5em; border-bottom: 1px solid #ddd; }
body > footer a, body > footer a:link, body > footer a:active, body > footer a:visited { color: inherit; }

nav.language-menu { position: absolute; right: 20px; top: 20px; font-variant: small-caps; letter-spacing: 2px; font-size: 0.75em; color: #9BD; }
nav.language-menu li { list-style-type: none; text-align: right; margin-bottom: 5px; }

@media all and (min-width: 820px) {
    
    body { padding: 0; margin-top: 50px; margin-bottom: 50px; text-align: center; }
    body > header { margin: 0 auto; margin-bottom: 3em; }
    body > header > nav.portal-menu { font-size: 1em; }
    body > header > nav.portal-menu > ul > li { display: inline; }
    body > header > nav.portal-menu > ul > li + li { display: inline; margin-left: 1em; }
    body > header > h1 { font-size: 2.5em; font-weight: normal; }
    body > header > nav.application-menu { font-size: 1.25em; }
    body > header > nav.application-menu > ul > li { display: inline; }
    body > header > nav.application-menu > ul > li + li { display: inline; margin-left: 1em; }
    body > main { max-width: 800px; margin: 0 auto; padding: 0; text-align: justify; }

}

/*** FORM ********************************************************************/

form { border: 1px solid #EEE; padding: 1em; text-align: center; margin-bottom: 1.5em; }
form fieldset { display: block; }
form fieldset + fieldset { margin-top: 1em; }
form fieldset > * { display: inline; vertical-align: middle; }
form input#expression-text-input { max-width: 240px; height: 32px; margin: 0px; border: 1px solid #BBB; padding: 2px; /* Opera8 ignores it anyway */ font-size: 20px; line-height: 26px; box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
form input#submit-button, form input#keyboard-button { width: 32px; height: 32px; margin: 2px; border: none; padding: 0; padding-left: 32px; /* works for IE6, but Opera 8 & 9 does it its own way */ font-size: 0px; /* works for FF */ }
form input.key-button { 
	width:			24px;
	height:			24px;
	margin:			1px;
	border:			none;
	padding:		0;
	color:			#FFF;
	font-size:		16px;
	vertical-align:	bottom; /* for IE 8 and Safari */
}
form input#submit-button { background: url('/korpus/images/search-button.png'); /* IE 7 */ background-image: url('/korpus/images/search-button.png'); }
form button#submit-button {
	color:				white;
	background-color:	var(--color-blue);
	padding:			2px;
	margin:				0;
	border:				none;
	border-radius:		4px;
	width:				32px;
	height:				32px;
	transform:			scaleX(-1);
}
form button#submit-button:hover {
	background-color:	var(--color-darkblue);
}
form input#show-options-button {
	color:				white;
	background-color:	var(--color-blue);
	padding:			3px 5px;
	border-radius:		3px;
	cursor:				pointer;
}
form input#show-options-button:hover {
	background-color:	var(--color-darkblue);
}
form select { border: 1px solid #BBB; }
form input[type='checkbox'] + label { margin-left: 0.5em; margin-right: 2em; }
form fieldset#expression-fieldset label { display: none; }
form fieldset#options-fieldset { font-size: 0.75em; }
form fieldset#options-fieldset div#options-wrapper {
	display:none;
	flex-wrap:wrap;
	justify-content:space-between;
	justify-content:center;
}
form fieldset#options-fieldset.shown div#options-wrapper {
	display:flex;
}
form fieldset#options-fieldset div#options-wrapper > div.options-block {
	flex-basis:		25%;
	flex-grow:		1;
	flex-grow:		0;
	flex-shrink:	1;
	box-sizing:		border-box;
	padding:		10px 5px 0;
	text-align:		left;
}
form fieldset#options-fieldset div#options-wrapper div.options-block.cql-disabled {
	position:		relative;
}
form fieldset#options-fieldset div#options-wrapper div.options-block.cql-disabled::after {
	color:				black;
	background-color:	white;
	border:				var(--color-blue) 1px solid;
	border-radius:		3px;
	padding:			3px 5px;
	display:			block;
	position:			absolute;
	top:				40px;
	left:				50%;
	transform:			translate(-50%, 0%);
}
html[lang=de] div.options-block.cql-disabled::after {
	content:			'CQL-Syntax';
}
html[lang=dsb] div.options-block.cql-disabled::after {
	content:			'CQL-syntaksa';
}
html[lang=hsb] div.options-block.cql-disabled::after {
	content:			'CQL-syntaksa';
}
form fieldset#options-fieldset div#options-wrapper div.options-block-head {
	font-weight:bold;
	text-align:center;
	margin-bottom:5px;
	color:var(--color-blue);
}
form fieldset#options-fieldset div#options-wrapper div.options-block-head:not(:first-child) {
	margin-top:10px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label {
	display:		block;
	padding-left:	20px;
	padding-top:	1px;
	line-height:	1.3;
	margin:			0px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label:nth-last-of-type(n+1) {
	margin-bottom:	10px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label:has(input[type="number"]) {
	padding-left:	0px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label.subcheckbox {
	margin-left:20px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label#context-width-label {
	text-align:center;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label#context-width-label input[type="number"] {
	margin-bottom:5px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label span.custom-input-unchecked,
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label span.custom-input-checked {
	margin-left:	-20px;
	margin-top:		-1px;
	height:			16px;
	width:			16px;
	color:			var(--color-darkgray);
	color:			var(--color-darkblue);
	position:		absolute;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:focus + label span.custom-input-unchecked,
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:focus + label span.custom-input-checked {
	color:			black;
	/* box-shadow:			var(--color-blue) 0 0 3px 3px; */
	/* background-color:	var(--color-blue); */
	/* color:				white; */
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:disabled + label span.custom-input-unchecked,
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:disabled + label span.custom-input-checked {
	color:			var(--color-lightgray);
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:disabled + label {
	color:			var(--color-lightgray);
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label:hover span.custom-input-unchecked,
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label:hover span.custom-input-checked {
	color:			var(--color-darkblue);
	color:			black;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:focus + label:hover span.custom-input-unchecked,
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:focus + label:hover span.custom-input-checked {
	color:			var(--color-darkblue);
	color:			black;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label span.custom-input-unchecked {
	display:		inline-block;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:checked + label span.custom-input-unchecked {
	display:		none;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block label span.custom-input-checked {
	display:		none;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input:checked + label span.custom-input-checked {
	display:		inline-block;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block a.option-help-link {
	color:				var(--color-darkgray);
	text-decoration:	none;
	display:			inline-block;
	position:			absolute;
	margin-left:		2px;
	margin-top:			-1px;
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block a.option-help-link:hover {
	color:				var(--color-darkblue);
}
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input[type="checkbox"],
form fieldset#options-fieldset.shown div#options-wrapper div.options-block input[type="radio"] {
	position:	absolute;
	opacity:	0;
	height:		0;
	width:		0;
}

form fieldset#expert-options-fieldset {
	flex-basis:100%;
	margin-top:10px;
}
form fieldset#expert-options-fieldset input#show-expert-options-button {
	color:				rgb(223,223,223);
	color:				var(--color-blue);
	background-color:	transparent;
	padding:			3px 5px;
	border-radius:		3px;
	cursor:				pointer;
}
form fieldset#expert-options-fieldset.shown input#show-expert-options-button {
	color:				white;
	background-color:	var(--color-blue);
}
form fieldset#expert-options-fieldset input#show-expert-options-button:hover {
	color:				white;
	background-color:	var(--color-darkblue);
}

form fieldset#expert-options-fieldset div#expert-options-wrapper {
	display:none;
	flex-wrap:wrap;
	justify-content:space-between;
}
form fieldset#expert-options-fieldset.shown div#expert-options-wrapper {
	display:flex;
}
form fieldset#expert-options-fieldset div#expert-options-wrapper > div.options-block {
	flex-basis:25%;
	flex-grow:1;
	flex-shrink:1;
	box-sizing:border-box;
	padding:10px 5px 0;
	text-align:left;
}


		form fieldset#options-fieldset table#options-wrapper {
			display:none;
			width:auto;
			min-width:auto;
			margin:0 auto;
		}
		form fieldset#options-fieldset.shown table#options-wrapper {
			display:table;
		}
		form fieldset#options-fieldset table#options-wrapper td {
			border:none;
			vertical-align:top;
			padding-top:0;
			padding-bottom:0;
		}
		form fieldset#options-fieldset table#options-wrapper tr:first-child td {
			padding-top:1em;
			text-align:center;
		}
		form fieldset#options-fieldset table#options-wrapper div.option-description {
			display:inline-block;
			max-width:300px;
			vertical-align:text-top;
		}
		form fieldset#options-fieldset table#options-wrapper input[type='radio'] {
			vertical-align: text-bottom;
		}
form.without-keyboard input#keyboard-button { background: url('/korpus/images/keyboard-on-button.png'); /* IE 7 */ background-image: url('/korpus/images/keyboard-on-button.png'); }
form.without-keyboard fieldset#keyboard-fieldset { display: none; }
form.with-keyboard input#keyboard-button { background: url('/korpus/images/keyboard-off-button.png'); /* IE 7 */ background-image: url('/korpus/images/keyboard-off-button.png'); }
form.with-keyboard fieldset#keyboard-fieldset { display: block; }

form button#keyboard-button {
	position:			relative;
	width:				32px;
	height:				32px;
	padding:			0px;
	border:				0px;
	border-radius:		4px;
	background-color:	var(--color-blue);
	color:				white;
	text-align:			center;
	letter-spacing:		1.0px;
	font-size:			18px;
	line-height:		32px;
}
form button#keyboard-button::before {
	content:			attr(data-before-content);
	display:			block;
	position:			absolute;
	top:				0;
	left:				50%;
	transform:			translate(-50%,-3px);
}
form button#keyboard-button::after {
	content:			'';
	display:			block;
	position:			absolute;
	bottom:				2px;
	left:				50%;
	transform:			translateX(-50%);
	width:				0;
	height:				0;
	border-left:		6px solid transparent;
	border-right:		6px solid transparent;
	border-top:			6px solid white;
	transition:			transform 300ms;
}
form.with-keyboard button#keyboard-button::after {
	transform:			translateX(-50%) rotate(-180deg);
}
form button#keyboard-button:hover {
	background-color:	var(--color-darkblue);
}

form div.keyboard-layout-buttons-wrapper {
	display:			flex;
	justify-content:	center;
	margin-bottom: 		3px;
}
form button.keyboard-layout-button {
	background-color:	var(--color-lightblue);
	color:				white;
	border:				none;
	border-radius:		3px;
	margin:				0px 1px;
}
form button.keyboard-layout-button.selected {
	background-color:	var(--color-blue);
}
form button.keyboard-layout-button:hover {
	background-color:	var(--color-darkblue);
}
form div.keyboard-wrapper {
	display:	none;
	position:	relative;
	min-height:	calc( 34px * var(--data-row-count) );
}
form div.keyboard-wrapper.show {
	display:	block;
}
form div.keyboard-row {
	display:			flex;
	justify-content:	center;
}
form div.keyboard-row.keyboard-row-base.base-key-active ~ div.keyboard-row.keyboard-row-base {
	position:	absolute;
	left:		50%;
	top:		calc( 34px * var(--data-row-index) );
	transform:	translate(-50%,0);
}
form div.double-key-wrapper {
	display:		flex;
	flex-direction:	column;
	width:			34px;
}
form div.key-row-break {
	flex-basis:	100%;
	height:		0;
}

form input.key-button {
	background:			url('/korpus/images/key-button.png'); /* IE 7 */
	background-image:	url('/korpus/images/key-button.png');
}
form button.base-key-button,
form button.key-button {
	width:				32px;
	height:				32px;
	font-size:			24px;
	margin:				1px;
	border:				none;
	padding:			0;
	color:				#FFF;
	vertical-align:		bottom; /* for IE 8 and Safari */
	border-radius:		4px;
	background-color:	var(--color-lightblue);
}
form button.key-button.primary-key-button {
	background-color:	var(--color-blue);
}
form button.key-button:disabled {
	visibility:			hidden;
}
form button.base-key-button:hover {
	background-color:	var(--color-blue);
}
form button.key-button:hover,
form button.base-key-button:active,
form button.key-button:active {
	background-color:	var(--color-darkblue);
}
form .keyboard-wrapper.base-key-active button.base-key-button:not(.active) {
	opacity:	0.3;
}
form .keyboard-wrapper.base-key-active button.base-key-button:not(.active):hover {
	opacity:	0.5;
}
form button.base-key-button.active {
	background-color:	var(--color-darkblue);
}

form div.key-variants {
	display:			none;
	z-index:			1;
	flex-wrap:			wrap;
	justify-content:	center;
	/* max-width:			340px; */
}
form div.key-variants.show {
	display:			flex;
}

form input[type='number'] {
	border: 1px solid #BBB;
	display:block;
	margin:0 auto;
}

/*** ARTICLE: ... ************************************************************/

img.mwfk-logo {
	display:block;
	width:200px;
	margin:0 auto 1em; 
}

p.indented {
	padding-left:2.5em;
}

span.blue-kw {
	color: var(--color-darkblue);
	font-weight:900;
}
span.example-kw {
	font-style:italic;
}

p.previous {
	float:left;
}
p.previous > a::before {
	content:"« ";
}
p.next {
	float:right;
}
p.next > a::after {
	content:" »";
}

article code {
	background-color:#eee;
	padding:0 3px;
}

dl.sources_list dt { color: #8B8B8B; }
dl.sources_list span.title {font-style: italic; font-weight: bold; color: #1A3A59;}
dl.sources_list p.title {
	font-style: italic; font-weight: bold; color: #1A3A59;
	margin-top:0.5em;
}
dl.sources_list p {
	margin-bottom: 0.5em;
}
details > summary {
	cursor:		pointer;
}
dl.sources_list > dd > details > summary {
	display:		block;
	list-style:		none;
	margin-bottom:	0.5em;
}
dl.sources_list > dd > details > summary::after {
	color:			var(--color-blue);
	font-size:		75%;
	padding:		1px 5px;
	border-radius:	3px;
	content:		attr(data-after-content-closed);
}
dl.sources_list > dd > details[open] > summary::after {
	content:	attr(data-after-content-open);
}
dl.sources_list > dd > details > summary:hover::after {
	background-color:	var(--color-blue);
	color:				white;	
}
dl.sources_list > dd > details  details > summary::marker {
	color:	inherit;
}
dl.sources_list > dd > details  details > summary:hover::marker {
	color:	var(--color-blue);
}
dl.sources_list > dd > details > details > details {
	margin-left:	10px;
}
dl.sources_list > dd ul {
	margin-bottom:	0px;
}
dl.sources_list dt + dd,
dl.sources_list ul li {
	transition:	background-color 1000ms;
	transition:	box-shadow 1000ms;
	box-shadow:	var(--color-darkblue) 0 0 0px 0;
}
dl.sources_list dt.highlighted + dd,
dl.sources_list ul li.highlighted {
	transition:	background-color 1500ms;
	/* background-color:	var(--color-blue); */
	transition:	box-shadow 1500ms;
	box-shadow: var(--color-darkblue) 0 0 5px 3px;
}
dl.sources_list ul li.source-type-separator {
	list-style-type:	none;
	border-top:			1px solid #eee;
	margin:				0.4em 0px;
}

dl.development-history {
	text-align:	left;
}
dl.development-history li {
	margin-top:	5px;
}

th { background-color: #F0F0F0; }

table.results { font-size: 0.75em; }
table.results td { border-color: #D8D8D8; border-left: none; border-right: none; padding: 2px 4px; }
table.results td.col_nb { text-align: right; color: #B2B2B2; font-size: 0.75em; padding-right: 15px; }
table.results td.col_lc { text-align: right; }
table.results td.col_fm { text-align: center; font-weight: bold; color: #1A3A59; cursor: pointer; }
table.results td.col_rc { text-align: left; }
table.results td.col_sr { text-align: right; color: #B2B2B2; font-size: 0.75em; padding-left: 15px; white-space: nowrap; }
table.results td.col_sr a { color: inherit; }
table.results td.col_mx {
	text-align:left;
	padding-right:15px;
}

table.results td.col_mx span.chevron_wrapper {
	display:block;
	width:35px;
	height:20px;
/*	margin:2px 0px -2px;	*/
	white-space:nowrap;
	position:relative;
}
table.results td.col_mx span.chevron_wrapper span {
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	transition:opacity 200ms, transform 400ms;
}
table.results td.col_mx span.chevron_wrapper span.left_chevron {
	left:0;
	background-image:url('/korpus/images/chevrons-left-gray.svg');
}
table.results td.col_mx span.chevron_wrapper span.right_chevron {
	right:0;
	background-image:url('/korpus/images/chevrons-right-gray.svg');
}
table.results td.col_mx span.chevron_wrapper span.left_chevron_hover {
	left:0;
	background-image:url('/korpus/images/chevrons-left-darkblue.svg');
	opacity:0;
}
table.results td.col_mx span.chevron_wrapper span.right_chevron_hover {
	right:0;
	background-image:url('/korpus/images/chevrons-right-darkblue.svg');
	opacity:0;
}
table.results td.col_mx:hover span.chevron_wrapper span.left_chevron {
	transform:translateX(-50%);
}
table.results td.col_mx:hover span.chevron_wrapper span.right_chevron {
	transform:translateX(50%);
}
table.results td.col_mx:hover span.chevron_wrapper span.left_chevron_hover {
	transform:translateX(-50%);
	opacity:1;
}
table.results td.col_mx:hover span.chevron_wrapper span.right_chevron_hover {
	transform:translateX(50%);
	opacity:1;
}
table.results tr.enlarged_context td.col_mx span.chevron_wrapper span.left_chevron {
	transform:translateX(-50%) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx span.chevron_wrapper span.right_chevron {
	transform:translateX(50%) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx span.chevron_wrapper span.left_chevron_hover {
	transform:translateX(-50%) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx span.chevron_wrapper span.right_chevron_hover {
	transform:translateX(50%) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx:hover span.chevron_wrapper span.left_chevron {
	transform:translateX(0) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx:hover span.chevron_wrapper span.right_chevron {
	transform:translateX(0) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx:hover span.chevron_wrapper span.left_chevron_hover {
	transform:translateX(0) scaleX(-1);
}
table.results tr.enlarged_context td.col_mx:hover span.chevron_wrapper span.right_chevron_hover {
	transform:translateX(0) scaleX(-1);
}




table.results td.col_mx a.enlarge_context {
	display:inline-block;
	height:20px;
	width:35px;
	margin:2px 0px -2px;
	position:relative;
	transition:width 333ms;
	cursor:pointer;
}
table.results td.col_mx a.enlarge_context::before {
	content:"";
	display:block;
	height:20px;
	width:35px;
	position:absolute;
	left:50%;
	background-image:
		url('/korpus/images/chevrons-left-darkblue.svg'),
		url('/korpus/images/chevrons-right-darkblue.svg');
	background-repeat:no-repeat;
	background-position:0% 50%,100% 50%;
	transform:translateX(-50%);
	transition:width 333ms, background-position 333ms;
}
table.results td.col_mx a.enlarge_context::after {
	content:"";
	display:block;
	height:20px;
	width:35px;
	position:absolute;
	left:50%;
	background-image:
		url('/korpus/images/chevrons-left-gray.svg'),
		url('/korpus/images/chevrons-right-gray.svg');
	background-repeat:no-repeat;
	background-position:0% 50%,100% 50%;
	transform:translateX(-50%);
	transition:opacity 200ms, width 333ms, background-position 333ms;
}
table.results td.col_mx a.enlarge_context:hover::before {
	width:50px;	
}
table.results td.col_mx a.enlarge_context:hover::after {
	width:50px;
	opacity:0;
}
table.results tr.enlarged_context td.col_mx a.enlarge_context::before {
	width:50px;
	background-position:100% 50%,0% 50%;
}
table.results tr.enlarged_context td.col_mx a.enlarge_context::after {
	width:50px;
	background-position:100% 50%,0% 50%;
}
table.results tr.enlarged_context td.col_mx a.enlarge_context:hover::before {
	width:35px;	
}
table.results tr.enlarged_context td.col_mx a.enlarge_context:hover::after {
	width:35px;
	opacity:0;
}
table.results td.col_continuous {
	text-align:left;
}
table.results td.col_continuous span.user_defined_context {
	display:inline;
}
table.results td.col_continuous span.full_context {
	display:none;
}
table.results tr.enlarged_context td.col_continuous span.user_defined_context {
	display:none;
}
table.results tr.enlarged_context td.col_continuous span.full_context {
	display:inline;
}
table.results td.col_continuous span.kw {
	color: var(--color-darkblue);
	font-weight:900;
}
table.results td.col_nopad {
	padding:0;
	max-width:20px;
}
table.results td.col_digbib {
	max-width:20px;
}
a.digbiblink {
	display:inline-block;
	height:20px;
	width:20px;
	margin:2px 0px -2px;
	position:relative;
	background-image:url('/korpus/images/book-open-darkblue.svg');
}
a.digbiblink::before {
	content:"";
	display:block;
	height:20px;
	width:20px;
	position:absolute;
	background-image:url('/korpus/images/book-open-gray.svg');
	transition:opacity 200ms;
}
a.digbiblink:hover::before {
	opacity:0;
}
a.digbiblink.inline {
	margin:-2px 0px -5px;
}

table.results td.col_dt { text-align: center; font-size: 1em; cursor: pointer; }
table.results td.col_dt strong { font-weight: bold; color: #1A3A59; }


table.results span.tok.detailview {
	position:	relative;
}
table.results table.detailview {
	margin:		0;
	z-index:	1;
	min-width:	auto;
	position:	absolute;
	top:		calc(100% + 6px);
	left:		50%;
	transform:	translateX(-50%);
	background-color:	white;
	border:		1px solid var(--color-blue);
}
table.results table.detailview::before {
	content:			"";
	position:			absolute;
	bottom:				100%;
	left:				50%;
	transform:			translateX(-50%);
	border-left:		6px solid transparent;
	border-right:		6px solid transparent;
	border-bottom:		6px solid var(--color-blue);
}
table.results table.detailview th,
table.results table.detailview td {
	text-align:		center;
	font-weight:	normal;
	border:			none;
	padding:		1px 3px;
	color:			black;
}
table.results table.detailview tr:last-child th,
table.results table.detailview tr:last-child td {
	box-shadow:	none;
}
table.results table.detailview th {
	background-color:	#cde;
	box-shadow:			inset 0 -1px 0 0 white;
}
table.results table.detailview td {
	box-shadow:		inset 0 -1px 0 0 #cde;
}

/*** OTHER *******************************************************************/

p.message { padding: 0.5em; background-color: #cde; text-align: center; }
p.message#cqp-errors {
	display:none;
}
p.message#cqp-errors.shown {
	display:block;
}
p.message input#show-cqp-errors-button {
	color:white;
	background-color:var(--color-blue);
	padding:3px 5px;
	border-radius:3px;
	cursor:pointer;
	font-size:12px;
}
p#status-message { color: #faa; position: fixed; top: 0; right: 0; margin: 0.25em; background-color: rgba(255, 255, 255, 0.75); padding: 0.1em 0.25em; }
address.author { text-align: right; }
p.footnote { font-size: 0.75em; }
body > footer p#status-message {
    color: #f00;
    position: fixed;
    top: auto;
	bottom: 0;
    left: 0;
    right: 0;
    margin: 0.25em;
    background-color: rgba(255, 127, 127, 0.5);
    padding: 0.1em 0.25em;
	
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	padding: 5px 60px 5px;
	margin: 0;
	transform: translate(-45px, 20px) rotate(-45deg);
	
}
body > footer p#status-message a {
    position:			absolute;
    transform:			translate(45px, 8px) rotate(45deg);
    border:				1px solid transparent;
    color:				red;
    background-color:	transparent;
    padding:			0px 4px;	
	font-size:			20px;
}
body > footer p#status-message:hover a {
	border-color:		red;
}
body > footer p#status-message a:hover {
	border-color:		red;
	text-decoration:	none;
	cursor:				pointer;
}


@keyframes borderRotate {
	to {	--angle:	630deg;	}
}
@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}
@property --c1 {
  syntax: '<color>';
  initial-value: rgba(124,165,205,1);
  inherits: true;
}
@property --c2 {
  syntax: '<color>';
  initial-value: rgba(124,165,205,0.05);
  inherits: true;
}
.novelty-hint {
	--d:		4000ms;
	--angle:	270deg;
	--c1:		#e60;
	--c2:		rgba(124,165,205,1);
	
	--c1:		rgba(124,165,205,1);
	--c2:		rgba(124,165,205,0.05);
	
	margin:			10px 0px 10px -5px;
	position:		relative;
	padding:		2px 2px 10px;
	border:			3px solid transparent;
	border-image:	conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	border-image:	conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn, var(--c2) 0.5turn, var(--c1) 0.6turn, var(--c1) 0.65turn, var(--c2) 0.75turn) 30;
	animation:		borderRotate var(--d) linear infinite forwards;	
}
.novelty-hint::after {
	position:	absolute;
	display:	block;
	right:		5px;
	bottom:		0px;
	transform:	translateY(-50%);
	color:		#e60;
}
.novelty-hint.stop {
	transition:	--c1 400ms linear, --c2 400ms linear, padding 400ms linear, margin 400ms linear;
	--c1:		rgba(124,165,205,0);
	--c2:		rgba(124,165,205,0);
	padding:	2px 2px 2px;
	margin:		-5px 0px -5px -5px;
}
.novelty-hint.stop::after {
	transition:	opacity 400ms;
	opacity:	0;
}
html[lang=dsb] .novelty-hint::after {
	content:	'Nowe!'
}
html[lang=de] .novelty-hint::after {
	content:	'Neu!';
}


@keyframes highlightCheckbox {
	to {	transform:	scale(2);	}
}
.highlight-checkbox {
	animation:	highlightCheckbox 300ms ease-in 2 alternate;
}


.proofread,
.test-only {
	outline:	1px red dashed !important;
	position:	relative !important;
}
.proofread::before,
.test-only::before {
	color:			red !important;
	font-weight:	bold !important;
	position:		absolute !important;
	left:			100% !important;
	top:			0 !important;
	transform:		translateX(5px) !important;
	white-space:	nowrap;
}
span.proofread::before,
span.test-only::before {
	transform:		translate(0px, -75%) !important;
	font-size:		50%;
}
html[lang=de] .proofread::before {
	content:		"Bitte kontrollieren!" !important;
}
html[lang=dsb] .proofread::before {
	content:		"Kontrolěrowaś, pšosym!" !important;
}
html[lang=hsb] .proofread::before {
	content:		"Prošu kontrolować!" !important;
}
html[lang=de] .test-only::before {
	content:		"Nur in Testumgebung sichtbar!" !important;
}
html[lang=dsb] .test-only::before {
	content:		"Jano widobne w testowem naglěźe!" !important;
}
html[lang=hsb] .test-only::before {
	content:		"Jenož widźomne w testowym napohledźe!" !important;
}


/*** PRINT STYLE *************************************************************/

@media print {
	body > header, body > footer { display: none; }
	form { display: none; }
	nav { display: none !important; }
	body > main { max-width: none; }
	body, a, a:link, a:active, a:visited, .bible-fragment .footnote-reference, .bible-fragment .footnotes, .bible-fragment .end-mark, .bible-fragment .footnotes a { color: #000; }
	.print-media-notice { display: block; text-align: right; color: #888; margin-top: 1em; padding-bottom: 97px; background-image: url(/si-logo.png); background-repeat: no-repeat; background-position: bottom right; }
	
}

/*****************************************************************************/
