/* Bollentekst Viewer Styles - Alleen viewer-specifieke styling */

img.header { width:auto; max-width:90vw; height:10vh; }

/* Body styling - alleen achtergrond en user-select */
body { 
	background-color:#00005f; 
	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
}

img { border-radius: 8px; max-width: 80vw; max-height: 50vh; }

#shadowed {
	-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
}

/* Teletext Viewer Specifieke Styling */
#viewer { max-height:80vh; width:100%; display:flex; flex-direction: column; }
#bitmaps { display:none; }
#screen { padding:5px; text-align:center; flex:1}
#container { flex:1; display:inline-flex; width:100%; overflow:hidden }
#right { display:none; max-width:30vw; max-height:45em; width: 15em;}
#below { display:none; height:calc(100vw*0.464);}
#remote { padding:5px; height:100%; width:100%; display:none;}
#remote2 { width:100vw; display:none; height:calc(100vw*0.464);}
#teletextCanvas {position:relative; max-width:100%; max-height:100%; }
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Content Styling */
li.list { font-family: "Arial", Verdana, Tahoma; font-size: 150%; color: #FFFFFF; }
ul.centre { display:table; margin:0 auto;}
a {color: #FFFFFF;}
#share-buttons img { width: 35px; padding: 5px; border: 0; box-shadow: 0; display: inline; }
#share-buttons {text-align:center;}
code { 
	overflow-x: auto; 
	white-space: pre-wrap; 
	white-space: -moz-pre-wrap; 
	white-space: -pre-wrap; 
	white-space: -o-pre-wrap; 
	word-wrap: break-word; 
	-webkit-touch-callout: text; 
	-webkit-user-select: text; 
	-khtml-user-select: text; 
	-moz-user-select: text; 
	-ms-user-select: text; 
	user-select: text;
}

/* Footer Styling */
div.footer { width:100%; background-color:rgba(0,0,0,0.7); overflow: hidden; padding-bottom: 20px; margin-top: auto;}
div.footer h2 { font-family:Arial; font-size:23px; text-align:left; color:#FFFFFF; margin-bottom:0; }
div.footer a { font-family:Arial; float: left; display: block; color: #ffffff; text-align: center; padding-top:8px; padding-bottom:8px; padding-right: 14px; text-decoration: none;font-size: 17px;}
div.footer a:hover {text-decoration: underline;}
div.footer hr {margin-top:2px;}
div.footer-content {width:80%; margin:auto;}

div.content { width:80%; margin: auto;}

/* Navigation Styling */
.nav-container {  margin-bottom: 40px; border-radius: 20px; text-align:center; }
.flex-container { display: flex; flex-flow: row wrap; justify-content: center; padding: 0; margin: 0; list-style: none;}
.flex-container a { text-decoration: none; }
.flex-item { padding: 5px; width: 300px; height: 290px; margin-top: 10px; }
.flex-nav-header-img { width: 80%; max-width: 150px; height: auto; object-fit: contain; padding-top: 10px; margin-bottom: 10px; }
.flex-nav-img { width: 100%; min-width: 200px; height: auto; }
.nav-container h1 { padding-top: 10px; margin-bottom: 10px; }
.nav-container h2 { white-space: nowrap; }

/* Heading Dividers */
.heading { position: relative; font-size: 30px; z-index: 1; overflow: hidden; text-align: center; }
.heading:before, .heading:after { position: absolute; top: 54%; overflow: hidden; width: 40%; height: 1px; content: '\a0'; background-color: white;}
.heading:before { margin-left: -48%; text-align: right;}
.heading:after { margin-left: 8%;}

/* Mobile Landscape Mode */
@media (pointer:none), (pointer:coarse) {
	@media (orientation:landscape) {
		
		#viewer { max-height:99vh; width:100vw; display:flex; flex-direction: column; }
	}
}