@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'IBMPlexSans';
	src: url('./fonts/IBMPlexSans-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face { 
	font-family: 'Objectivity';
	src: url('./fonts/Objectivity-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

HTML {
	font-size: 62.5%; /* 10px  = 62.5% x 16px default-size) */
	scroll-behavior: smooth;
}
BODY {
	margin: 20px 20px 0px 35px;
	font-family: 'IBMPlexSans', Arial, Helvetica, sans-serif;
	font-size: 1.8rem;
	border: 5px solid;
	border-color: #FFFFFF;
	background-color: #FFFFFF;
}

P,DIV,A,UL,OL,LI,TD {
	font-family: 'IBMPlexSans', Arial, Helvetica, sans-serif;
	margin: 0 0 0.6em 0;
	line-height: 130%;
	color: #555;
}

.section  {clear:both; margin:25px 0;}
.subtopic {clear:both; margin:30px 0;}

/********************************/
/* Headings                     */
/********************************/
H1.topictitle1 {color: #023A4F; margin-top:0;}
H1 {font-family: Objectivity, Arial, Helvetica, sans-serif; font-size: 3.2rem; font-weight: bold; color: #023A4F; margin:8rem 0 4rem 0; clear:both}
H2 {font-family: Objectivity, Arial, Helvetica, sans-serif; font-size: 2.8rem; font-weight: bold; color: #023A4F; margin:6rem 0 2rem 0;}
H3 {font-family: Objectivity, Arial, Helvetica, sans-serif; font-size: 2.6rem; font-weight: bold; color: #023A4F; margin:5rem 0 2rem 0;}
H4 {font-family: Objectivity, Arial, Helvetica, sans-serif; font-size: 1.8rem; font-weight: bold; color: #000000; margin:0;}
.margintop {margin-top:1.3em;} /*for second titles inside a section */

/********************************/
/* Images                       */
/********************************/
img {
	border: 0;
	margin: 0;
	vertical-align:bottom;
}
img.border {border:1px solid gray}

.figtable {
	margin: 10px 0 15px 0;
}
.figtable img {
	max-width:100%
}
/* In een frameless tabel is het plaatje naast text, dus figuur niet schalen */
.tableframeless img, .tableframed img {
	max-width:initial;
}
table.tableframeless table.figtable img {padding-bottom:10px;}

.figuretitle {font-weight: normal; font-style: italic; color:#899; margin:5px 0}
.caption     {font-weight: normal; font-style: italic; font-size:1.4rem; margin-top:0.5em; margin-bottom:0.5em;}

.image-inline {display:inline; vertical-align: middle;}

.expandablefig.thumbnail {max-width:150px; max-height:100px;}
.expandablefig {cursor:nw-resize}
div.expandablefigdiv {
	position:relative;
}
div.expandablezoomfig {
	display:block;
	width:21px;
	height:21px;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	background:url('icon_content_sprite.png') no-repeat 0px -350px;
}

/********************************/
/* Video                        */
/********************************/
a:link.timed-videolink{
	font-size:1rem; 
	display: inline-block;
	margin: 0;
	margin-bottom: -2px;
	padding: 0;
	overflow: hidden;
	text-indent:99px;
	height: 20px;
	width:20px;
	vertical-align:middle;
	background: url('icon_content_sprite.png') no-repeat 0px -300px;
}
.video_floatright {
	float:right;
	margin: 0 40px 0 20px;
/*	max-width:800px;*/
	min-width:400px;
	width:50%;
}

.video_floatright video {
	width:100%;
}

.video_popup-floatright {
	float:right;
	margin: 0 40px 0 20px;
}

/* Video in popup */
.videomask {
	/* Mask the original video in the content. Click will show it in the popup */
	position:absolute;
	width:100%;
	height:100%;
	background-color:transparent;
	z-index: 30;
}
.video-masked-in-topic {
	position:relative;
}
.video-masked-in-topic video{
	max-width:220px;
	max-height:220px;
}

#popup{
	visibility: hidden;
	position: fixed;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	text-align: center;
	background: none;
	z-index: 101;
}
#popup.shown {
	visibility: visible;
}

#popup-close{
	position: absolute;
	right: 10px;
	top: 3px;
	margin:0;
	padding: 0;	
	width: 42px;
	height: 42px;
	border-radius: 21px;
	text-align: center;
	font-size: 3.2rem;
	color: #888;
	background-color: #fff;
	cursor: pointer;
	z-index: 104;
}
#popup-close::after {
    content: '\d7';
}

#popup-opacitylayer{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
	margin:0;
	background: #fff;
	opacity: 0;
	z-index: 100;
	transition: opacity 500ms ease-out, visibility 500ms;
}
#popup.shown #popup-opacitylayer {
	opacity: 0.95;
}
#popup-videocontent{
	position: relative;
/*	padding-bottom: 56.25%; /* 16:9 */
/*	padding-top: 25px; */
	margin: auto;
	margin-top: 70px;
	max-width: 1080px;
	width: 90%;
	height: auto !important;
	z-index: 102;
}

.popup-videoplayer{
 	box-shadow: 0px 2px 14px #888;
	top: 15%;
	left: 0;
	width: 100%;
	opacity: 1 !important;
	cursor: pointer;
	z-index: 103;
}

/********************************/
/* X3D                          */
/********************************/
x3d {
	border: 1px solid #ccc !important;
	height:350px;
}

.X3Dobject {
	max-width:600px;
	max-height:400px
}

/********************************/
/* Lists                        */
/********************************/
ol, ul {
	margin:1em 0 1.5em 0;
	padding-left: 21px;
}
ol ol, ol ul, ul ol, ul ul  {margin-top:0; margin-bottom:0;}

li {vertical-align:top; margin: 0.2em 0 0.2em 0;}

.listabove {margin-bottom:0px; padding-bottom:0px;}
.nobullet {list-style-type:none}
.disk     {list-style-type:disk}
.circle   {list-style-type:circle}
.square   {list-style-type:square}
.dash     {list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAB3RJTUUH4AMLDQ81k8IHTAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAAAQSURBVHjaY2RgYPjPMNQBAMLKAQEcvRwXAAAAAElFTkSuQmCC')}

.decimal     {list-style-type:decimal}
.lower-alpha {list-style-type:lower-alpha}
.upper-alpha {list-style-type:upper-alpha}
.upper-roman {list-style-type:upper-roman}

li p {margin:	0;}


.step-number {
	display: inline-block;
	font-size: 2.2rem;
	font-weight: normal;
	color: #009999;
	float: left;
	margin-top: -8px;
	margin-left: -37px;
	padding: 5px 0px 6px 0;
	width: 28px;
	height: 18px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #009999;
	border-radius: 18px;
	background-color: white;
}
.subtopic.step {
	border-left: 1px solid #009999;
	margin-left:-20px;
	padding-left:21px;
}

/********************************/
/* Table                        */
/********************************/
table {
	border-collapse: collapse;
}
table th, table td {
	text-align: left;
	vertical-align: top;
	padding: 4px;
}
table th.center, table td.center {
	text-align: center;
}
table th.right, table td.right {
	text-align: right;
}
th p, td p {margin:0.2em;}
table.figtable td {border:none; padding:0;}
table.tableframed tbody td, table.tableframed tbody th {border: 1px solid #ccc;}
table.tableframed.light tbody td, table.tableframed.light tbody th {border: 1px solid #e0e0e0;}
table.tableframeless > tbody>tr>td {border:none; padding: 1px 4px}
table.tableframeless > tbody>tr>:first-child {padding-left:0px}
table.light .tablehead {background-color: #f3f3f3; font-weight:bold;}
.tablehead {background-color: #e4efef; font-weight:bold;}
.tablecellshade1 {background-color: #B7CEE3;}
.tablecellshade2 {background-color: #C7E0D9;}
.tablecellshade3 {background-color: #E8A900;}

.definitionlist, .definitionlisthead {border:0px solid gray;border-width:1px 0;}

.tabletitle  {font-weight: normal; font-style: italic; font-size: 85%;}

/********************************/
/* Notes                        */
/********************************/
.notes {width:100%; margin: 3px 0;}
.notes * {border:0 !important;}
.notes td {padding:4px !important;}
.notes_icon {vertical-align:top; width: 40px}
.notes_icon img {width:40px;}
.notes_label {font-weight:bold; color:#777;}
.tip *       {}
.note *      {}
.caution *   {}
.warning *   {}
.danger *    {}


.example {
	background-color: #eeeef2;
	margin: 0 0 0 -10px;
	padding: 5px 5px 0 10px;
}
.exampletitle {color: #002255;}
/********************************/
/* Other elements               */
/********************************/
pre  {font-family: Courier New, Courier, Monospaced; font-size: 1.2rem;}


/***************************************/
/* Style classes                       */
/***************************************/
.navtitle    {font-size:1.5rem; font-style: italic; margin:0;}
.searchtitle {font-size:1.5rem; font-style: italic; margin:0;}
.shortdesc   {font-size:1.5rem; margin:0;}

/* Inline classes                      */
.cmdname     {color: #009bdf;}
.filepath    {font-family: Courier New, Courier, Monospaced; font-size: 1.2rem;}
.menucascade {font-weight: bold; color:#777;}
.uicontrol   {font-weight: bold;}
.uicontrol:before {content: "\25B8"}
.uicontrol:first-child:before {content: ""}
.screen      {font-style: italic;}
.systemoutput{font-family: Courier New, Courier, Monospaced; font-size: 1.3rem;}
.userinput   {font-weight: bold; color:#009bdf;}
.userinput:before, .userinput:after {content: "\0022"; font-weight:normal}
.varname     {font-style: italic;}
.wintitle    {font-style: italic; color:#006688}
.codeblock   {font-family: Courier New, Courier, Monospaced; font-size: 1.2rem; line-height: 1.3em;}
.term {}
.termvariable {}
.stringsvariable {font-weight: bold; color:#777; text-decoration: none;}
.emphasis {font-weight: bold}
.definitionterm {border-bottom: 1px dotted #004488;}
.indent {padding-left: 40px;}/*40 px is the default ol and ul padding*/

.small  {font-size:  1.2rem; font-weight: normal;}
.larger {font-size: 1.8rem; font-weight: normal;}
.nospace, .keepwithnext {margin-bottom:0; padding-bottom:0;}
.nospacetop {margin-top:0px; padding-top:0px;}
.semititle {font-weight:bold; padding-bottom:0; margin-bottom:0; margin-top:12px;font-size:1.7rem;}
.role1 {font-weight:bold;}
.class1, .class1 p {/* Opmerkingen boxjes */
	font-weight:bold;
	background-color: #e0f0f5;
	max-width: 900px;
	color: #299 !important;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1.8rem;
	border-radius: 10px;
}
div.class1 {
	margin-top: 30px;
	margin-bottom: 20px;
	padding: 6px;
}
p.class1 {
	padding: 6px;
}
div.class1 p {
	padding: 0; 
	margin-bottom: 0.2em;
}
.class1 img {vertical-align:text-top;}

.clear {clear:both;}

/*Links */
a {text-decoration: none; color: #0E207F;}
a:link    {text-decoration: none; color: #008E91;}
a:hover   {text-decoration: underline;}
a:visited {color: #008E91;}

/***************************************/
/* Content Buttons                       */
/***************************************/
#contentbuttons {
	position: fixed;
	top:0;
	right:0;
	margin:0;
	width:34px
/*	background-color: #fff; */
}
#contentbuttons span {
	display: block;
	overflow: hidden;
	height: 34px;
	width:34px;	
	margin: 1px 0 1px 0;
/*	border:1px solid #eee; */
	background: url('icon_content_sprite.png') no-repeat;
	background-color: transparent;
	border-radius:5px;
	opacity: 0.9;
	cursor: pointer;
}
#contentbuttons span:hover {
	background-color: #eee;
}
#contentbuttons #cbuttonGototop{
	display:none;/* displayed by JS if content height > window */
	background-position: -6px -6px;
}
#contentbuttons #cbuttonToc {
	display:none;/* displayed by JS if content contains a contentTOC(placed by xslt) */
	background-position: -6px -56px;
}
#contentbuttons #cbuttonCollapse {
	display:none;/* displayed by JS if content contains expandable elements */
	background-position: -6px -256px;
}
#contentbuttons #cbuttonPrint {
	display:none;/* displayed by JS if viewed stand-alone */
	background-position: -6px -156px;
}

/* Content TOC */
#contentTOC {
	position:fixed;
	top:15px;
	right: 42px;
	max-width:200px;
	background-color: #9c9c9c;
	border-radius: 5px;
	border: 1px solid transparent;
	padding:5px;
}
#contentTOC p {
	padding:0;
	margin:0;
}
#contentTOC a {
	color:#fff;
}

/***************************************/
/* General expandable element with header and body */
/***************************************/
.expandblock {
	margin:20px 0 0 -21px;
	padding:0 5px 5px 21px;
	border-left: 1px solid transparent;
}
.blockview2 {border-color: #ccc;}

.expandheader {
	margin: 10px 0;
	margin-left: -22px;
	padding-left: 22px;
	background: url('icon_content_sprite.png') no-repeat -16px -214px;	
}
.blockview1 .expandheader {
	background-position: -16px -214px;
}
.blockview2 .expandheader {
	background-position: -16px -264px;
}

.expandbody {
	overflow: hidden;
	-webkit-transition: max-height 0.2s ease-in; /* For Safari 3.1 to 6.0 */
	transition: max-height 0.2s ease-in;
}
.blockview1 .expandbody {
	max-height: 0px;
}
.blockview2 .expandbody {
	max-height: 2000px;
}
/***************************************/
/* Expandable xref-iframe insets       */
/***************************************/
.insetcontainer {
	display:none;
	width: -moz-calc(100% - 20px);
	width: -webkit-calc(100% - 20px);
	width: calc(100% - 20px);
	-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
	transition: 0.5s;
}
.iframeinset {
	display:block;
	width:100%;
	max-height: 650px;/* is overruled by .js */ 
	min-height: 350px;
	border:1px solid #ccc;
	border-radius: 10px;
}
.insetref {
	margin: 0 5px 0 0;
	padding-left: 18px;
	background: url('icon_content_sprite.png') no-repeat -15px -216px;
}
.insetrefExpanded {
	background-position: -15px -264px;
}
.insetrefCollapsed {
	background-position: -15px -214px;
}


/***************************************/
/* tooltip container (for e.g. defenitionterms)*/
/***************************************/
#tooltip {
	-webkit-transition: 
		opacity 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-moz-transition:    
		opacity 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	transition:         
		opacity 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
}
.tooltip-hidden {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
}
.tooltip-show {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 0.9; /* Transparancy of tooltip */
}
/* tooltip inner frame */
.ttip {color: white; font-size:1.4rem; vertical-align:top; border:0; background-color:#666666; padding:6px;  border-radius:3px;} /* inner content */



/**************************************************************/
/* desktop view (width < 768 px)                              */
/**************************************************************/
@media (min-width: 767.98px) {
	HTML {
		font-size: 62.5%; /* 10px  = 62.5% x 16px default-size) */
	}
}

/**************************************************************/
/* Print                                                      */
/**************************************************************/
@media print {
	P,DIV,A,UL,OL,LI,TD {font-size: 10pt;}
	TD {padding:0 !important;}
	H1 {font-size: 26pt;}
	H1.topictitle1 {margin-top:0;}
	H2 {font-size: 20pt}
	H3 {font-size: 16pt;}
	H4 {font-size: 14pt;}
	#contentbuttons {display:none;}
}