body{
		/* Stel "figurecounter" voor figuren in op 0 */
		counter-reset: figurecounter;
	}
	
	/* tekst onder de infoboxes op de indexpagina */
	.section#ans-index-onder-textbox{
		float: left;
		margin-top: 80px;
	}
	
	/* een disclaimer bij een section */
	.section#importance_high{
		border: 5px solid #cb8300;
		padding: 10px 30px;
	}
	
	/***********************************

		main > topictitle
		
	*************************************/	

	#topictitle{
		/*font-weight: bold;*/
		font-family: 'Roboto', 'Schoolboek', 'Asap Condensed';
		float: left;
		width: 100%;
		margin-top: 30px;
	}
	
	.staticpag #topictitle{
		margin-bottom: 30px;
	}

	#topictitle sub{
		vertical-align: unset;
		font-size: inherit;
	}

	#topictitle sub:before{
		content: " (";
	}

	#topictitle sub:after{
		content: ")";
	}


	/***********************************

		main > article
		
	*************************************/

	/* we kunnen na de quickinfo wel of geen topic-toc hebben. Dit verandert de marge aan de onderkant */
	.quickinfo-container{
		/*border: 1px solid #00b36b;
		border-color: #00b36b;
		border-color: var(--ans-groen-donkerder-links);*/
		/*border: 1px solid #00b36b;
		border: 1px solid var(--ans-groen-donkerder-links);*/
		
		margin-top: 20px;
		float: left;
		/* een box met een lichtgroene achtergrond en wat padding:*/
		/* let op dat de margin onderaan ook bepaald wordt door de margin-top van de readmore (in ans-style-main.css)
		/*padding: 40px;
		float: left;
		background: #daffdb;
		background: rgb(218,255,219);
		background: linear-gradient(180deg, rgba(218,255,219,1) 0%, rgb(232, 249, 233) 26%);*/
	}
	
	.article:not(.staticpag) .quickinfo-container + .readmore{
		margin-top: 30px;
	}
	
	/*
	.quickinfo-container + .section-toc{
		margin-top: 0px;
	}
	*/

	.quickinfo{
		/*background-color: #ecf8ed;*/
		/*background-color: var(--ans-groen-bleek);*/
		/*background-color: #e0ebeb;*/ /* #e0ebeb*/
		/*padding: 10px 20px;*/
		/*border-bottom: 2px solid #00b36b;
		border-bottom: 2px solid var(--ans-groen-donkerder-links);*/
	}

	.topic-toc{
		margin-top: 50px;
		margin-bottom: 0px;
		line-height: 150%;
	}

	.topic-toc-link .fa{
		margin-right: 10px;
	}

	.topic-toc-link span{
		text-decoration: none;
		color: #009900;
		cursor: pointer;
	}

	.topic-toc-link span:hover{
		text-decoration: underline;
	}

	p > .header, .section > .header, .p > .header, .section > .header{
		font-style: italic;
	}

	.p .emphasis, p .emphasis, ul .emphasis, li .emphasis, #topictitle .emphasis{
		font-style: italic;
	}
	
	.p > .emphasis, p > .emphasis, ul > .emphasis, li > .emphasis, #topictitle > .emphasis{
		/*background-color: yellow;*/
	}
	

	/************** de voorbeeldonderdelen die de voorbeeldpopup triggeren (zie js-ans-search.js) ****************/
	.ilex-wg, .word, .wordgroup, .affix{
		cursor: pointer;
	}
	/*
	:not(.reg-ex-list) .ilex-wg:hover, .word:hover, .wordgroup:hover, .affix:hover{
		border-bottom: 2px solid #00b36b;
		border-bottom: 2px solid var(--ans-groen-donkerder-links);
	}
	*/
	
	/* markeer emphasis met underline, tenzij het voorbeeld uitzichzelf al cursief is gemarkeerd (in dat geval wordt emphasis aangegeven met niet-cursief) */
	.wordgroup .emphasis{
		text-decoration: underline;
	}
	
	.lexample .wordgroup .emphasis{
		/*font-style: normal;*/
		font-weight: bold;	/* zie overzicht in mailtje aan Marjolijn 15/07/2020 */
		text-decoration: none;
	}
	
	.reg-ex-list .wordgroup .emphasis{
		font-style: italic;
	}

	.lexample .wordgroup{
		font-style: italic;
	}
	
	.lexample .translation:before, .lexample .translation:after{
		content: "'";
	}
	
	.reg-ex-list .lexample .wordgroup{
		font-style: normal !important;
	}

	.lexample .wordgroup .underline{
		text-decoration: underline;
	}
	
	.lexample .wordgroup .bold{
		font-weight: bold;
	}

	.lexample .wordgroup .noncursive{
		font-style: normal;
	}

	.lexample .phonologicalAnalysis, .lexample .phoneticTranscription{
		display: inline-block;	/* voorkomt afbreking met / of [ aan einde regel */
	}


	.lexample .phonologicalAnalysis:before, .lexample .phonologicalAnalysis:after{
		content: "/";
	}

	.lexample .spelling:before{
		content: "<";
	}

	.lexample .spelling:after{
		content: ">";
	}

	.lexample .phoneticTranscription:before{
		content: "[";
	}

	.lexample .phoneticTranscription:after{
		content: "]";
	}

	.lexample .syntacticalAnalysis{
		font-family: courier;
	}

	.lexample .src{
		font-style: italic;
		display: none;
	}
	/*
	.lexample .src:before{
		content: " [bron: ";
	}

	.lexample .src:after{
		content: "]";
	}
	*/
	
	.lexample .label{
		font-style: italic;
		padding-left: 2px;
	}
	
	.lexample .label:before{
		content: "<<";
	}

	.lexample .label:after{
		content: ">>";
	}

	.lexample .sub{
		vertical-align: sub;
		font-size: 0.7em;
	}
	
	/* om een of andere reden wordt de * veel hoger geplaatst dan de ?. Vandaar gesplitst. */
	/* 	NB nog besluit over nemen: * en ? liever niet gebruiken, beter: <<uitgesloten>> (judgment), alleen
		kunnen die niet altijd, bv middenin een rij voorbeelden */
	.lexample .sup.ast, .innerexample .sup.ast{
		vertical-align: top;
		font-size: small;
		/*display: none;*/
	}
	
	.lexample .sup.qm, .innerexample .sup.qm{
		vertical-align: super;
		font-size: 0.8em;
		/*display: none;*/
	}

	.p .lingterm, p .lingterm, table .lingterm, .term, li .lingterm, li .keyword{
		font-variant: small-caps;
		color: #219b4b;
		color: var(--ans-groen-donkerder-links);
	}

	.p a, p a, ul a, .ilex-header a, .section a{
		text-decoration: none;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
	}

	.p a:hover, p a:hover, ul a:hover, .ilex-header a:hover, .section a:hover{
		text-decoration: underline;
	}
	
	.affix{
		font-style: italic;
		white-space: nowrap;
	}

	.lexterm{
		font-style: italic;
	}

	.section-title .lexterm{
		font-style: normal;
	}

	.lexterm > .translation{
		font-style: normal;
	}

	.lexterm > .translation:before, .lexterm > .translation:after{
		content: "'";
	}
	
	/* speciale uitlijning, met name bij breukgetallen (7.3), zodat de line-height niet wordt verstoord */
	sup{
		vertical-align: top; position: relative; top: -0.3em; font-size: 13px;
	}
	
	.quickinfo sub, .readmore sub{
		vertical-align: bottom; position: relative; bottom: -0.3em; font-size: 13px;
	}

	/***********************************

		main > titles
		
	*************************************/

	.p_header{
		font-family: 'Roboto', Schoolboek, 'Quicksand', 'Rubik', 'Arial', 'Sans';
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
	}

	.main h1 .emphasis{
		font-style: italic;
	}

	:not(.extra) > .section .section-title{
		font-family: 'Roboto', Schoolboek, 'Quicksand', 'Rubik', 'Arial', 'Sans';
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
	}
	
	.extra .extra-title-main .section-title{
		color: black !important;
		width: 85%;
	}
	
	:not(.extra) > .section > .section-title{
		font-size: 20px;
	}
	
	:not(.extra) .section-level2 > .section-title{
		font-size: 18px;
	}
	
	:not(.extra) > .section .section-level3 > .section-title{
		font-style: italic;
	}
		
	:not(.extra) > .section{
		margin-bottom: 30px;
		/*float: left;*/
	}
	
	.article-wrapper.onderwijs :not(.extra) > .section{
		float: left;
	}


	/***********************************

		main > ilexample
		
	*************************************/

	
	.ilex-label{
		/* 	labels worden niet meer gebruikt in ANS3, gaat nu via 'variationpopup'
			Omdat ze nog wel in ANS2 staan, gaat dit via JS general.
		*/
		/*display: table-cell;
		padding-left: 10px;
		color: orange;*/
		
		padding: 2px 6px;
		margin-left: 5px;
		/*font-style: italic;
		color: red;*/
		background: orange;
		color: white;
		/*display: none;*/
		font-family: 'Asap Condensed', sans;
		font-size: 0.9em;
		white-space: nowrap;
	}
	
	/*
	.ilex-label:before{
		content: "<<";
	}
	
	.ilex-label:after{
		content: ">>";
	}
	*/
	
	.ilexample{
		width: 90%;
		margin-left: 2%;
		line-height: 150%;
		margin-bottom: 5px;
		font-size: 90%;
	}
	
	.note .ilexample{
		font-size: 100%;
	}
	
	.ilexample + .ilexample{
		/*margin-top: 10px;*/
	}

	/*.ilexample > .relatedList{ 
		margin-top: 10px;
	}*/

	.ilexample > .relatedList > .header{
		font-weight: bold;
	}

	
	.ilexample .ilex-index{
		/*padding-right: 20px;*/
		width: 60px;
	}

	/* de afstand tussen index en vb */
	/* 1 vb */
	.ilexample .ilex-index .mainindex{
		width: 60px;
	}

	/* relatedList */
	.ilexample .unnumberedList .ilex-index .mainindex{
		width: 60px;
	}
	
	/* unnumberedList */
	.ilexample .relatedList .ilex-index .mainindex{
		width: 35px;
	}
	
	
	.ilexample .ilex-index .mainindex{
		/*display: table-cell;*/
		/*background: red;*/
		display: inline-block;
		vertical-align: top;
	}
	
	.ilexample .ilex-index .subindex{
		/*display: table-cell;*/
		display: inline-block;
		vertical-align: top;
		/*background: red;*/
		width: 25px;
	}
	
	.ilexample .ilex-index .mainindex:not(.isempty):after{
		content: ")";
	}
	
	.ilexample .ilex-index .subindex:after{
		content: ".";
	}
	
	.ilexample .ilex-index .mainindex.isempty{
		
	}
	
	.ilexample .ilex-index .subindex{
		/*background: orange !important;*/
	}
	
	.ilexample  .ilex-index.donotshow{
		visibility: hidden;
	}
	
	.innerexample{
		/*width: 100%;
		display: table;*/
	}
	
	/* bv 1.6.3 vb 2/3 */
	.unnumberedList .ilex-header-container + .innerexample .mainindex, 	.relatedList .ilex-header-container + .innerexample .mainindex{
		visibility: hidden;
	}
	

	
	.innerexample-wg{
		/* eerste laag, meestal met wg maar kan ook morpho-analyse zijn */
		width: 100%;
		display: table;
		table-layout: fixed;
	}
	
	.innerexample .ilex-wg{
		/*width: calc(100% - 200px);*/
		width: 85%;				/* was 75%, maar dan passen sommige vb-zinnen met een comment niet meer op 1 regel, bv in 20.7.2 */
		display: inline-block;
		/*border: 1px solid blue;*/
	}
	
	
	.innerexample-gl{
		/* volgende laag, met gl */
		width: 100%;
		display: table;
	}
	
	.innerexample-tr{
		/* volgende laag, met tr */
		width: 100%;
		display: table;
	}
		
	.innerexample .ilex-wg, .innerexample .ilex-judgment, /*.innerexample .ilex-label, */.innerexample .ilex-comment, .innerexample .ilex-src, .innerexample .ilex-pa, .innerexample .ilex-pt, .innerexample .ilex-flag, .innerexample .ilex-labeltest/*, .innerexample .ex-varpopup*/{
		/*display: table-cell;*/
	}
	
	/* index van een voorbeeld met daarnaast het voorbeeld */
	.innerexample .ilex-index{
		/*display: table-cell;*/
	}
	
	/* index van een voorbeeld met een header ernaast */
	/*.ilex-header-container .ilex-index{
		display: inline-table !important;
	}
	*/
	
	/* zorgt ervoor dat lange headers goed uitgelijnd worden */
	/*
	.ilexample .ilex-header-container .ilex-index, .ilexample .ilex-header-container .ilex-header{
		display: table-cell;
	}
	*/
	
	/* css hieronder bepaalt ook gedrag voor ilexamples in het register, maar daar ontbreekt de 'ilexample' tag */
	.innerexample .ilex-flag{
		margin-left: -7px;
		float: left;
		font-weight: bold;
		/*color: #009900;*/
		color: orange;
		cursor: pointer;
	}
	
	.lex-flag{
		/*font-weight: bold;*/
		color: orange;
		cursor: pointer;
		margin-left: 2px;
		margin-right: 5px;
	}
	
	.lex-flag:before{
		content: "[";
	}
	
	.lex-flag:after{
		content: "]";
	}
	
	.flag-popup{
		position: absolute;
	}

	
	.ilexample .ilex-header{
		font-weight: bold;
		margin-bottom: 5px;
		margin-top: 10px;
		/*line-height: 120%;*/
	}
	
	/* 2e header bij een unnumberedlist */
	.ilexample .unnumberedList .innerexample:not(:first-of-type) .ilex-header{
		margin-left: 60px;
	}

	.ilexample .ilex-header .emphasis{
		font-style: italic;
	}

/*
	.innerexample .ilex-wg{
		white-space: nowrap;
	}
*/

	/* hover over de vb voor markering (van de popup) */
	.ilex-wg:hover, .word:hover, .wordgroup:hover, .affix:hover{
		background-color: #00b36b;
		background-color: var(--ans-groen-donkerder-links);
		color: white;
	}

	.innerexample .ilex-wg, .innerexample .ilex-pa{
		/*padding-left: 20px;*/
	}
	
	.innerexample span.ilex-pt{
		padding-left: 60px;
	}
	
	/* zie bv 1.8.2.2, vb 1 */
	.innerexample span.ilex-pa{
		padding-left: 60px;
	}

	.innerexample .ilex-tr{
		display: contents; /* dit gaat fout bij oa. 29.1.3 vb 4 voor een tr op 2 regels */
	}
	
	.innerexample .ilex-tr:before, .innerexample .ilex-tr:after {
		content: "'";
	}
	
	.innerexample .sub{
		vertical-align: sub;
		font-size: 0.7em;
	}

	.innerexample .ilex-index.dummy{
		visibility: hidden;
		display: inline-table;
		
		/*padding-right: 20px;*/
	}

	/*
	.ilexample .innerexample .ilex-index:before{
		content: "(";
	}
	.ilexample .innerexample .ilex-index:after{
		content: ")";
	}
	*/
	
	/* dit type (<<uitgesloten>>) is vervangen door type * aan het begin van de wg. Wordt in general.js omgezet omdat het nog wel door de xslt wordt omgezet naar ilex-judgment */
	/* niet uitgesloten, uitgesloten-in-de-bedoelde-interpretatie of twijfelachtig krijgt standaard rood */
	.innerexample .ilex-judgment, .lexample .judgment{
		padding: 2px 6px;
		margin-left: 5px;
		/*font-style: italic;
		color: red;*/
		background: red;
		color: white;
		/*display: none;*/
		font-family: 'Asap Condensed', sans;
		font-size: 0.7em;
		white-space: nowrap;
		vertical-align: top;
	}
	
	/* de kleur van het judgment-blok hangt af van de tekst, die ook de class is */
	.innerexample .ilex-judgment.twijfelachtig, .lexample .judgment.twijfelachtig{
		background: #cb8300 !important;
	}
	
	.innerexample .ilex-judgment.uitgesloten, .lexample .judgment.uitgesloten, .innerexample .ilex-judgment.uitgesloten-in-de-bedoelde-interpretatie, .lexample .judgment.uitgesloten-in-de-bedoelde-interpretatie{
		background: red !important;
	}
	
	
	.lexample .judgment{
		/*padding: 2px 5px;
		font-style: italic;
		color: red;*/
	}
	
	
	
	/*
	.innerexample .ilex-judgment:before, .lexample .judgment:before{
		content: "<< ";
	}

	.innerexample .ilex-judgment:after, .lexample .judgment:after{
		content: " >>";
	}
	*/
	
	.innerexample .ilex-comment{
		/*padding-left: 20px;*/
		padding: 2px 10px;
		font-family: 'Asap Condensed', sans;
		font-size: 0.9em;
		line-height: 120%;
		float: right;
		/*display: table-cell;*/
		/*max-width: 20%;*/
		text-align: center;
		background: #fde3e3;
		/*color: #423434;*/
	}
	
	.innerexample .ilex-comment .lexample{
		font-style: italic;
	}
	
	.ilexample .innerexample .ilex-comment{
		/*white-space: nowrap;*/
	}

	/*
	innerexample .ilex-judgment:before, .innerexample .ilex-label:before{
		content: "<<";
	}

	.innerexample .ilex-judgment:after, .innerexample .ilex-label:after{
		content: ">>";
	}
	*/
	
	/* testjes met labels */
	
	/* variationpopup met NN/BN/etc informatie erin in een popup */
	.innerexample .ex-varpopup{
		display: inline;
		padding-left: 10px;
	}
	
	/* wat extra markering bij een variationpopup in een lexample .. */
	.lexample .ex-varpopup .ex-varpopuplabel:before{
		/*content: " [\00a";*/
	}
	
	.lexample .ex-varpopup .ex-varpopuplabel:after{
		/*content: "\00a]";*/
	}
	
	
	/* ... maar niet in een tabel */
	td .lexample .ex-varpopup .ex-varpopuplabel:before{
		content: "";
	}
	
	td .lexample .ex-varpopup .ex-varpopuplabel:after{
		content: "";
	}
	
	.innerexample .ex-varpopup .ex-varpopuplabel, .lexample .ex-varpopup .ex-varpopuplabel{
		cursor: pointer;
		/*color: #cb8300;*/
		background: #cb8300;
		padding: 2px 5px;
		color: white;
		font-family: 'Asap Condensed', sans;
		font-size: 0.9em;
		white-space: nowrap;
	}
	
	
	.innerexample .ex-varpopup .ex-varpopuptext, .lexample .ex-varpopup .ex-varpopuptext{
		display: none;
	}
	
	.innerexample .ex-varpopup .fa-info-circle, .lexample .ex-varpopup .fa-info-circle{
		/*vertical-align: super;*/
		margin-left: 5px;
	}

	.lexample .ex-varpopup .fa-info-circle{
		vertical-align: unset;
	}

	
	.innerexample .ex-varpopuplabel:hover, .lexample .ex-varpopuplabel:hover{
		color: orange;
	}
	
	.innerexample > img{
		margin-left:50px;
	}
	
	/*
	.innerexample .ilex-labeltest{
		position: absolute;
		margin-left: -20px;
		color: #3399ff;
	}
	
	
	.innerexample .ilex-labeltest2{
		display: table-cell;
		padding-left: 10px;
		color: #3399ff;
	}
	
	.innerexample .ilex-labeltest2 img{
		height: 15px;
	}
	
	.innerexample .ilex-labeltest .fa-flag{
		color: red;
	}
	
	.innerexample .ilex-labeltest .fa-star, .innerexample .ilex-labeltest2 .fa-star{
		color: orange;
	}
	
	.ilex-label3, .ilex-label4, .ilex-label3b{
		display: table-cell;
		padding-left: 10px;
		white-space: nowrap;
		cursor: pointer;
	}
	
	.ilex-label3b:hover{
		font-weight: bold;
	}
	
	.fa-question-circle{
		vertical-align: super;
		font-size: 80%;
		margin-left: 5px;
	}
	*/
	
	/* labelpopup, zelfde opmaak als versie, citeer, prev/next */
	
	.labeltext{
		display: none;
	}
	
	.label-popup{
		/*
		font-size: 13px;
		position: absolute;
		background: #ffe2ae;
		padding: 20px;
		max-width: 200px;
		opacity: 0.85;
		font-weight: normal;
		box-shadow: 0 3px 10px rgba(0,0,0,0.3);
		z-index: 100000;
		*/
		
		position: absolute;
		font-size: 13px;
		background-color: white;
		border: 2px solid #00b36b;
		border: 2px solid var(--ans-groen-donkerder-links);
		margin-left: 1px;
		margin-top: 2px;
		padding: 20px;
		max-width: 200px;
		box-shadow: 0 40px 40px rgba(0,0,0,0.3);
		z-index: 101;
	}
	
	.label-popup a{
		text-decoration: none;
		color: #cb8300;
	}
	
	.label-popup a:hover{
		text-decoration: underline;
	}
	
	.label-arrow{
		background-color:#00b36b;
		background-color: var(--ans-groen-donkerder-links);
		width: 20px;
		height: 20px;
		transform: rotate(45deg);
		position: absolute;
		bottom: 0px;
		margin-bottom: -10px;
		z-index: 100;
		display: none;
	}
	
	.label-info{
		display: block;
		margin-top: 5px;
		font-size: 80%;
	}
	
	.label-close{
		position: absolute;
		top: 0px;
		right: 10px;
		font-size: 18px;
		cursor: pointer;
		z-index: 1000;
	}
	
	.label-close:hover{
		color: orange;
	}
	

	/*.innerexample .ilex-comment:before, */.innerexample .ilex-pt:before{
		content: "[";
	}

	/*.innerexample .ilex-comment:after, */.innerexample .ilex-pt:after{
		content: "]";
	}

	.innerexample .ilex-pa:before, .innerexample .ilex-pa:after{
		content: "/";
	}

	.ilexample .innerexample .ilex-comment a{
		text-decoration: none;
		color: #007700;
	}

	.ilexample .innerexample .ilex-comment a:hover{
		text-decoration: underline;
	}

	.innerexample .ilex-wg .emphasis{
		font-style: italic;
	}

	.innerexample .ilex-wg .underline{
		text-decoration: underline;		
	}

	.innerexample .ilex-wg .bold{
		font-weight: bold;
	}

	.innerexample .ilex-wg .u_i{
		text-decoration: underline;
		font-style: italic;
	}
	
	.innerexample .ilex-wg .b_i{
		font-style: italic;
		font-weight: bold;
	}
	
	.innerexample .ilex-wg .b_u{
		text-decoration: underline;
		font-weight: bold;
	}
	
	.innerexample .ilex-wg .contraction, .innerexample .ilex-wg .strikethrough{
		text-decoration: line-through;
	}

	.innerexample .ilex-src{
		/* staat op onzichtbaar, wordt zichtbaar door hover */
		/* komt nu onder een voorbeeld, omdat er rechts van de uitlijning van het voorbeeld zelf door de war gooit */
		padding-left: 60px;
		font-family: 'Asap Condensed', sans;
		/*white-space: nowrap;*/ /* als deze aanstaat krijg je soms hele lange regels, die de hele tekst oprekken, bv in 9.6.4 */
		display: none;
		font-size: 0.7em;
		line-height: 100%;
		color: #423434;
	}

	.ilexample .innerexample .ilex-src a{
		/*color: #009900;*/
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		text-decoration: none;
	}

	.ilexample .innerexample .ilex-src a:hover{
		text-decoration: underline;
	}

	.ilexample .innerexample .ilex-src:before{
		content: "bron: ";
	}
	/*
	.ilexample .innerexample .ilex-src:after{
		content: "]";
	}
	*/
	/*.ilexample .innerexample .ilex-label, */ .ilexample .innerexample .ex-varpopup, .lexample .innerexample .ex-varpopup{
		white-space: nowrap;
	}
	
	/* hover popup met src */
	.ilex-src-popup{
		position: absolute;
		background: white;
		box-shadow: 0 3px 10px rgba(0,0,0,0.3);
		padding: 10px 20px;
		line-height: 150%;
		font-family: 'Asap Condensed', sans;
		font-size: 0.7em;
		line-height: 100%;
		color: #423434;
		z-index: 100;
	}



	/***********************************

		main > ul
		
	************************************/

	.p > ul, p > ul{
		/*margin-top: 30px;*/
	}

	/* bij p > ilexample komt de marge van de p */
	li > .ilexample:first-of-type{
		margin-top: 20px;
	}

	li > .ilexample:last-of-type{
		margin-bottom: 20px;
	}
	
	/***********************************

		main > ol
		geen padding
		
	************************************/

	ol{
		padding-left: 20px;
	}
	
	ol li{
		margin-bottom: 30px;
	}
	
	ol.alphanum{
		list-style-type: lower-alpha;
	}
	
	/***********************************

		main > generalization
		
	*************************************/
	
	.generalization{
		width: 90%;
		margin-left: 5%;
		margin-top: 20px;
		font-size: 0.9em;
		line-height: 150%;
	}
	
	.generalizationLabel{
		font-weight: bold;
		font-variant: all-small-caps;
	}
	
	
	.generalizationDesc{
		display: block;
		font-variant: small-caps;
	}

	

	/***********************************

		main > extra
		
	*************************************/


	.extra{
		/*border: 1px solid #ccc;*/
		border: 2px solid #00b36b;
		border: 2px solid var(--ans-groen-donkerder-links);
		font-size: 15px;
		/*padding: 20px;*/
		/*margin-left: 5%;
		padding: 10px;
		margin-right: 5%;*/
		margin-top: 20px;
		margin-bottom: 20px;
		/*box-shadow: 0px 0px 5px 5px #ddd;*/
		color: #222;
		line-height: 150%;
		background: white;
		float: left;
		width: 100%;
	}
	
	.extra .extra-title-main{
		padding: 5px 10px 5px 15px;
		font-size: 13px;
		/*font-variant: small-caps; */ /* toont geen trema's (7.1.3.1) */
		text-transform: uppercase;
		cursor: pointer;
	}
	
	/* voorkomen dat voorbeelden, en met name fonetische tekens (ANK 1.1.1.2) uppercase worden */
	.extra .extra-title-main .lexample{
		text-transform: none;
	}
	
	/* correctie van foutieve xslt: in een extra-titel worden per ongeluk ook alle table-titles getoond */
	.extra .extra-title-main .simpletable-title{
		display: none;
	}
	
	.extra .extra-title-main .phonologicalAnalysis, .extra .extra-title-main .phoneticTranscription{
		font-variant: none;
	}
	
	.extra .extra-title-main .extra-label{
		float: right;
		background-color: #00b36b;
		background-color: var(--ans-groen-donkerder-links);
		color: white;
		font-variant: normal;
		padding: 6px 15px;
		font-size: 0.8em;
		margin-top: -28px;
		margin-right: -10px;
	}
	
	/* toggle-pijltjes bij extra-titel en uitklapbare td */
	
	.toggle-extra, .toggle-td{
		height: 20px;
		margin-right: 5px;
		width: 15px;
		float: left;
		cursor: pointer;
	}

	.toggle-extra.angle-down, .toggle-td.angle-down{
		background-image: url(../img/angle_down.png);
		background-size: 10px 10px;
		background-repeat: no-repeat;
		background-position: center;
	}

	.toggle-extra.angle-up, .toggle-td.angle-up{
		background-image: url(../img/angle_up.png);
		background-size: 10px 10px;
		background-repeat: no-repeat;
		background-position: center;
	}

/*	.article-extra-content.isHidden{
		display: none;
	}

	.article-extra-content.isVisible{
		display: block;
	}
*/

	
	.extra .section{
		position: relative; /* nodig voor de juiste positionering van de notes in een extra */
	}
	
	.extra .section.isHidden{
		display: none;
	}
	
	.extra .section.isVisible{
		display: block;
		margin: 5px 20px 20px 20px;
	}

	.extra > .section  > .section-title{
		/*font-size: 14px;
		font-style: italic;
		color: #222;*/
		display: none;
	}

	.extra > .section > p:first-of-type, .extra > .section > .p:first-of-type{
		margin-top: 0px;
	}
	
	.extra .p, .extra p{
		/*line-height: 150%;*/
	}


	/***********************************

		main > note
		
	*************************************/


	/*
	.note.copy{
		font-size: 14px;
		padding: 0px 20px 0px 20px;
		position: absolute;
		line-height: 150%;
		background-color: white;
		width: 125px;
	}
	
	.note.copy{
		width: 125px;
	}

	.note.copy .note-asterisk{
		background-color: white;
		border-radius: 50%;
		border: 4px solid #f2f2f2;
		padding: 10px;
		font-size: 23px;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		position: absolute;
		top: -25px;
		left: -34px;
		cursor: pointer;
	}

	.note.copy .note-asterisk:hover{
		animation: pulse 1.5s infinite;
	}
	*/

	/* pulseren van de bullseye bij note */
	/*
	@keyframes pulse {
	  0% {
	  transform: scale(0.9);
	  }
	  70% {
	    transform: scale(1);
	    box-shadow: 0 1 0 10px rgba(90, 153, 212, 0);
	  }
	    100% {
	    transform: scale(0.9);
	    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
	  }
	}


	.note.copy .note-asterisk span{
	}

	.note.copy .noteline{
		border-top: 1px solid #00e68a;
		border-top: 1px solid var(--ans-groen);
		width: 300px;
		margin-left: -150px;
		display: none;
	}

	.note.copy .note .header{
		font-size: 14px;
		border-left: 3px solid #00b36b;
		border-left: 3px solid var(--ans-groen-donkerder-links);
		margin-left: -20px;
		padding-left: 15px;
	}

	.note.copy p{
		font-size: 12px;
		line-height: 150%;
	}

	.note.copy .note-content{
		display: none;
	}

	.note.copy .note-content.isVisible{
		display: block;
	}
	*/

	/* opmaak van de oorspronkelijke note (wordt alleen getoond bij printen) */
	
	.note:not(.copy){
		/*visibility: hidden;*/	/* NB display none geeft een verkeerde positionering van de notes in de aside */
	}
	
	/*
	.note:not(.copy) p{
		display: none;
	}
	*/
	
	.note-marker{
		cursor: pointer;
		z-index: 10;
		/*position: absolute;*/
	}
	
	.note-marker.isSelected > .fas{
		color: #00b36b; 
		color: var(--ans-groen-donkerder-links);
	}
	
	.note-marker > .fas{
		font-size: 14px;
		vertical-align: top;
		color: #cb8300;
	}
	
	.innerexample .note-marker{
		padding-left: 2px;
	}
	
	.note-marker .fas:hover{
		color: #00b36b; 
		color: var(--ans-groen-donkerder-links);
	}
	
	.note-arrow{
		background-color: #00b36b; 
		background-color: var(--ans-groen-donkerder-links);
		/*border: 1px solid red;*/
		/* dit is een ruitje */
		/*width: 20px;
		height: 20px;
		z-index: 100;
		transform: rotate(45deg);
		margin-top: 16px;
		margin-left: -16px;
		*/
		/* verticale streep */
		width: 2px;
		height: 30px;
		margin-top: 16px;
		margin-left: -9px;
		position: absolute;
		
		visibility: hidden;
		z-index: 5;
		
	}
	
	.note-arrow.isVisible{
		visibility: visible;
	}
	
	.note{
		position: absolute;
		display: none;
		z-index: 9;	/* komt achter de note-marker */
		
		/*background: #ffe2ae;
		padding: 10px 20px;
		box-shadow: 0 3px 10px rgba(0,0,0,0.3);
		*/
		
		background-color: white;
		
		padding: 10px 30px 20px 30px;
		border: 2px solid var(--ans-groen-donkerder-links);
		box-shadow: 0 40px 40px rgba(0,0,0,0.3);
		cursor: default;
	}
	
	.note.isVisible{
		display: block;
	}
	
	.note .note-content{
		position: relative;
		/*float: left;*/
		color: #222;
		font-size: 13px;
	}
	
	.note, .note .note-content{
		line-height: 140% !important;
	}
	
	.note .note-popup-close{
		position: absolute;
		float: right;
		right: 10px;
		top: 5px;
		cursor: pointer;
	}
	
	.note .note-popup-close:hover{
		color: #00b36b; 
		color: var(--ans-groen-donkerder-links);
	}
	
	.note .ilexample{
		line-height: 150% !important;
	}
	
	
	/***********************************

		main > prev/next topic onderaan readmore
		
	*************************************/

	.prev-next-topic-bottom-container{
		border-top: 1px solid #00b36b; 
		border-top: 1px solid var(--ans-groen-donkerder-links);
		padding-top: 20px;
		line-height: 140%;
		float: left;
		width: 100%;
	}
	
	.prev-topic-bottom, .next-topic-bottom{
		width: 40%;
	}
	
	.prev-topic-bottom a.title, .next-topic-bottom a.title{
		display: none;
	}
	
	.prev-topic-bottom a, .next-topic-bottom a{
		color: #00b36b; 
		color: var(--ans-groen-donkerder-links); 
		text-decoration: none;
	}
	
	.prev-topic-bottom a:hover, .next-topic-bottom a:hover{
		text-decoration: underline;
	}
	
	.next-topic-bottom{
		float: right;
		text-align: right;
	}
	
	.prev-topic-bottom a .sub:before, .next-topic-bottom a .sub:before{
		content: "(";
	}

	.prev-topic-bottom a .sub:after, .next-topic-bottom a .sub:after{
		content: ")";
	}
	
	.prev-topic-bottom a .emphasis, .next-topic-bottom a .emphasis{
		font-style: italic;
	}


	/***********************************

		main > literatuur
		
	*************************************/

	.literature{
		/*display: none;*/ /* tenzij overruled in js-lit.js */
	}
	
	
	.literature-header{
		border-bottom: 1px solid #ccc;
		font-size: 25px;
		padding: 10px 0px;
	}

	.literature ul{
		list-style-type: none;
		margin: 0px;
		padding: 10px 0px 20px 0px;
		padding-left: 40px;
		font-size: 14px;
		float: left;
	}

	.literature ul li{
		text-indent: -1em;
		line-height: 2em;
	}
	
	.literature ul li a .fas{
		margin-left: 15px;
	}

	/***********************************

		literatuur op de pagina 'literatuur'
		
	*************************************/

	.lit-title{
		margin-top: 20px;
	}
		
	.lit-title a{
		font-size: 15px;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		text-decoration: none;
	}
	
	.lit-title a:hover{	
		text-decoration: underline;
	}

	.lit-elt{
		font-size: 14px;
		margin-left: 12px;
		margin-bottom: 5px;
		line-height: 150%;
	}


	/***********************************

		main > previous, next topic
		
		De hover is een standaard title-attribuut, dat 
		een eigen klasse (en gegenereerde inhoud) a-title-popup meekrijgt in js-ans-general.js.
		
	*************************************/

/*
	.previous-next-topics{
		border-top: 1px solid #ccc;
		padding-top: 10px;
		padding-bottom: 30px;
		margin-top: 30px;
		margin-bottom: 50px;
		display: block;
		position: relative;
		clear: left;
	}
*/

/* bij gebruik van img voor prev/next */
/*
	.previous-topic, .next-topic{
		font-size: 12px;
		width: 40%;
		padding: 20px 0px;
		text-decoration: none;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
	}

	.previous-topic img, .next-topic img{
		height: 25px;
		margin-top: 5px;
	}

	.previous-topic{
		margin: 0 8px;
	}
*/

	.previous-topic a, .next-topic a{
		text-decoration: none;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		cursor: pointer;
	}
	
	/*
	.previous-topic, .next-topic{
		color: #ccc;
	}
	*/
	
	.previous-topic{
		margin-right: 5px;
	}
	
	.previous-topic a:hover, .next-topic a:hover{
		color: green;
	}

	/*
	#next-topic, #next-topic a{
		float: right;
	}

	#previous-topic a, #next-topic a{
		text-decoration: none;
		color: inherit;
	}
	*/

	/* vervangen door de animatie */
	.previous-topic a:hover, .next-topic a:hover{
		/*text-decoration: underline;*/
		/*border: 1px solid #ccc;
		background-color: white;*/
		/*text-decoration: underline;*/
	}

	/*	
	.next-topic span{
		display: table-cell;
		vertical-align: middle;
		line-height: 1.3em;
		float:right;
	}

	.next-topic span:first-child{
		padding-left: 10px;
	}

	.previous-topic span{
		display: table-cell;
		vertical-align: middle;
		line-height: 1.3em;
		text-align: left;
	}

	.previous-topic span:first-child{
		padding-right: 10px;
	}
	*/


	/*
	.previous-topic a:before{
		content: "<\00a";
		color: #009900;
	}

	.next-topic a:after{
		content: "\00a>";
		color: #009900;
	}
	*/

	/* bibref */
	/*
	.bibref:hover{
		text-decoration: underline;
		cursor: pointer;
	}
	*/
	
	/***********************************

		title-hover bij a, toont bij ANS2 het kruimelpad
		en popup bij vlaggetjes-voorbeelden.
		Krijgt dezelfde opmaak als de popups van term/versie/citeer
		
	*************************************/

	.a-title-popup, .flag-popup{
		position: absolute;
		/*font-size: 13px;
		background-color: #00b36b;
		background-color: var(--ans-groen-donkerder-links);
		color: white;
		padding: 20px;
		max-width: 200px;
		opacity: 0.85;
		font-weight: normal;
		*/
		margin-top: -6px;
		background-color: white;
		color: #222;
		font-size: 13px;
		font-family: Abel, Rubik, Arial;
		padding: 10px;
		border: 2px solid var(--ans-groen-donkerder-links);
		box-shadow: 0 40px 40px rgba(0,0,0,0.3);
		z-index: 1000;
	}

	.a-title-popup .emphasis{
		font-style: italic;
	}

	.comment{
		display: block;
		border: 5px solid red;
		padding: 20px;
		margin: 20px;
		color: red;
		font-size: 0.8em;
		line-height: 120%;
	}
	
	/***************************************************** ONDERWIJS *****************************************/
	/*.article-wrapper.onderwijs #article-nav, .article-wrapper.onderwijs .literature, .article-wrapper.onderwijs .history, .article-wrapper.onderwijs .prev-next-topic-bottom-container, .article-wrapper.onderwijs .rm-label, .article-wrapper.onderwijs .mainindex, body.onderwijs .termlist{
		display: none;
	}
	
	.article-wrapper.onderwijs .ilex-index{
		width: 30px;
	}
	
	.article-wrapper.onderwijs .readmore{
		padding-top: 20px;
		margin-top: 0px;
	}
	
	.article-wrapper.onderwijs .quickinfo-container{
		background: none;
	}
	
	header .mainheader.onderwijs, .shortheader.onderwijs{
	background: rgb(255,115,0);
	
	}
	
	.article-wrapper.onderwijs .rm-label, .article-wrapper.onderwijs .section-toc, .article-wrapper.onderwijs .isSelectedExample, body.onderwijs .searchbox-box ul li span:not(.disabled) + .clarin-warning, .article-wrapper.onderwijs table.simpletable tr.tableheader, body.onderwijs .note-arrow{
		background: #176882;
		background: var(--ans-onderwijs-blauw);
	}
	
	.article-wrapper.onderwijs .readmore, body.onderwijs #searchbox-container, body.onderwijs .searchbox-header, body.onderwijs .searchbox-box ul li span:not(.disabled):hover, .article-wrapper.onderwijs .note{
		border-color: #176882;
		border-color: var(--ans-onderwijs-blauw);
	}
	
	.article-wrapper.onderwijs .lingterm, .article-wrapper.onderwijs .section-title, nav.onderwijs .nav-chapters, nav.onderwijs ul li a:hover, body.onderwijs .autocomplete-group, body.onderwijs .autocomplete-suggestions .autocomp-articleindex, nav.onderwijs .fas.fa-chevron-down:hover, nav.onderwijs .fas.fa-chevron-up:hover, .article-wrapper.onderwijs a,body.onderwijs article h1, body.onderwijs .note-marker .fas:hover, body.onderwijs .note-marker.isSelected > .fas{
		color: #176882;
		color: var(--ans-onderwijs-blauw);
	}
	
	.article-wrapper.onderwijs ul.important, .article-wrapper.onderwijs .p.important{
		border: 2px solid #176882;
		border: 2px solid var(--ans-onderwijs-blauw);
	}
	
	.article-wrapper.onderwijs ul.important{
		padding: 30px 50px;
	}
	
	.article-wrapper.onderwijs .p.important{
		padding: 10px 10px;
		display: inline-block;
		margin: 20px 0px;
	}
	
	.article-wrapper.onderwijs .p.important:hover{
		background: #176882;
		background: var(--ans-onderwijs-blauw);
		color: white !important;
	}
	
	.article-wrapper.onderwijs .p.important:hover a{
		color: white !important;
	}
	*/
	
	
	
	/*body.onderwijs .lingterm, */.lingterm{
		cursor: pointer;
	}
	
	/*body.onderwijs .term-popup, */.term-popup{
		position: absolute;
		background: white;
		box-shadow: 0 3px 10px rgba(0,0,0,0.3);
		padding: 20px;
		font-size: 12px;
		display: none;
		line-height: 150%;
		max-width: 200px;
		z-index: 10;
	}
	
	/*body.onderwijs .term-popup .term-popup-label{
		margin-bottom: 5px;
		color: #176882;
		font-variant: all-small-caps;
		color: var(--ans-onderwijs-blauw);
	}
	*/
	
	.term-popup .term-popup-label{
		margin-bottom: 5px;
		font-variant: all-small-caps;
		color: #00b36b; 
		color: var(--ans-groen-donkerder-links);
	}
	
	.term-popup .term-popup-def em{
		/*text-decoration: underline;*/
	}
	/*
	body.onderwijs .section#termenoverzicht_t9 ul{
		list-style-type: none;
	}
	
	body.onderwijs .section#termenoverzicht_t9 li{
		border-bottom: 1px solid #176882;
		border-bottom: 1px solid var(--ans-onderwijs-blauw);
		padding: 10px 0px;
	}
	
	body.onderwijs .section#termenoverzicht_t9 li .tt-term{
		font-variant: all-small-caps;
		margin-bottom: 5px;
		color: #176882;
		color: var(--ans-onderwijs-blauw);
	}
	
	body.onderwijs .section#termenoverzicht_t9 li .tt-vb, body.onderwijs .section#termenoverzicht_t9 li .tt-syn{
		margin-top: 10px;
	}
	
	*/
	
	/********************* ONDERWIJS OEFENINGEN *********************/
	
	/*
	
	body.onderwijs .ond_oef{
		cursor: pointer;
	}
	
	body.onderwijs .oefening .oef-metadata{
		font-size: 0.8em;
		line-height: 140%;
	}
	
	body.onderwijs .oefening .oef-intro{
		color: white;
		background-color: #176882;
		background-color: var(--ans-onderwijs-blauw);
		padding: 20px;
		margin: 20px 0px;
	}
	
	body.onderwijs .oefening .oef-intro a{
		color: white;
	}
	
	body.onderwijs .oefening{
		float: left;
	}
	
	body.onderwijs .oefening .vraag-idx{
		color: white;
		background-color: #176882;
		background-color: var(--ans-onderwijs-blauw);
		width: 30px;
		height: 30px;
		border-radius: 30px;
		text-align: center;
		padding-bottom: 2px;
	}
	
	body.onderwijs .oefening .vraag-content{
		margin-left: 50px;
	}
	
	
	body.onderwijs .oef-container .oef-antw{
		margin-left: 20%;
	}
	
	body.onderwijs .oef-container .vraag-beeld{
		width: 100%;
	}
	
	body.onderwijs .oefening .vraag-input input{
		width: 70px;
		color: #176882;
		color: var(--ans-onderwijs-blauw);
		font-family: 'Roboto', 'Schoolboek', 'Asap Condensed';
		font-size: inherit;
	}
	
	body.onderwijs .oefening .vragen{
		width: 90%;
	}
	
	body.onderwijs .oefening .vragen, body.onderwijs .oefening .vraag{
		float: left;
		clear: both;
		margin-bottom: 30px;
	}
	
	body.onderwijs .oefening .oef-check{
		color: white;
		background-color: #176882;
		background-color: var(--ans-onderwijs-blauw);
		padding: 10px 20px;
		margin: 20px 0px;
		border-radius: 20px;
		float: left;
		cursor: pointer;
		display: block;
	}
	
	body.onderwijs .oefening .oef-container.invul .vraag-idx{
		font-weight: bold;
	}
	
	body.onderwijs .oefening .vraag .oef-antw .correctanswer{
		color: green;
		margin-left: 10px;
	}
	
	body.onderwijs .oefening .vraag .oef-antw.correctemundo, body.onderwijs .oefening .vraag-input.correctemundo{
		color: green;
	}
	
	body.onderwijs .oefening .vraag .oef-antw.incorrectemundo, body.onderwijs .oefening .vraag-input.incorrectemundo{
		color: red;
	}
	
	body.onderwijs .oefening .vraag .oef-antw .incorrectanswer, body.onderwijs .oefening .vraag-input .incorrectanswer{
		color: red;
		margin-left: 10px;
	}
	
	body.onderwijs .oefening .oef-container.invul .vraag-antw:not(.isVisible), body.onderwijs .oefening .oef-container.invul .vraag-toelichting:not(.isVisible){
		display: none;
	}
	
	body.onderwijs .oefening .oef-container.invul .vraag-antw, body.onderwijs .oefening .oef-container.invul .vraag-toelichting{
		font-size: 0.9em;
		line-height: 150%;
		margin-top: 5px;
	}
	
	*/