@media only screen and (min-width: 200px) and (max-width: 719px) {
html{font-size:0.75em;} /* 1em=16px; 0.75em=12px */
body{width:98%;}
.not_on_sml {display:none;}
}
@media only screen and (min-width: 720px) and (max-width: 939px) {
html{font-size:0.875em;}  /* 1em=16px; 0.875em=14px */
body{width:98%;}
.not_on_med{display:none;} 
}
@media only screen and (min-width: 940px) {
html {font-size:0.875em;} /* 1em=16px; 0.875em=14px */
.not_on_lrg {display:none;} 
}

html {line-height:1.5em; height:100%; max-height:100%; padding:0px; margin:0px; border:0px;
	background-color:#fff;
	font-family:verdana,arial,sans-serif;
	overflow:scroll;
	-webkit-text-size-adjust:100%;	/* zodat font-size niet verandert bij draaien iphone */
	-moz-text-size-adjust: 100%;	/* idem bij adroid */
	-ms-text-size-adjust: 100%;		/* idem bij MS */
}
body {margin:6px; border:0px; height:100%; max-height:100%; 
	  background-color:#fff; color:#000;
	  text-align:left;
	  cursor:default;}
	  
#topdiv  {border:0px;            margin:0px; vertical-align:center; line-height:14px; height:54px;}
#hfdmenu {border:0px;                                    background-color:#fd7;}
#submenu {border:0px;            margin:2px 0px 0px 0px; background-color:#fd7;}
#rompnaam{border:1px solid #ccc; margin:2px 0px 2px 0px; font-size:125%; padding:0px 0px 0px 4px;} /* text-align:center;} /* padding-onder ivm downcomers */
#inhoud  {border:0px;            margin:2px 2px 2px 2px;}

.fs120 {font-size:120%;}
.fs100 {font-size:100%;}
.fs80  {font-size:80%;}
.fs75  {font-size:75%;} 
.fs66  {font-size:75%; color:#999;} 	/* #999 middelgrijs */
.fs60  {font-size:75%; color:#999;}  	/* #999 middelgrijs */
.fs55  {font-size:55%;} 				/*tbv <h2>          */
.verw  {color:#930; font-weight:bold;}	/* Verwijzingen, onder aan meditatie */
.ac	   {text-align:center;}
.kader    {border:1px solid #ccc; padding:5px;}
.hideclock{display:none;} 
.veldnaam{margin:0px; padding:0px; margin-top:10px; background-color:#ddd;}
/* .noprint  {display:none;}  uitsluitend bedoeld voor print.css (bv top.php bevat deze class voor id="top") */              


div {margin:0px; border:0px; padding:0px;} 
p {margin:1em 0em;} 
/* FF line-heigth = html  - IE line-height: aangeven.                 */
/* Beter: in html de line-height in em opgeven, gaat goed in FF en IE */ 
h2   {font-size:150%;} 
hr {border:0px; height:1px; color:#999; background-color:#999;} /* color voor IE, background-color voor FF */
ul {margin:0px; padding:20px; list-style-type:disc;}			/* margin FF en IE verschilt */
audio {width:300px;}
img   {border-style:none; border:0px solid; max-width:100%;}
table {border:0px;}	
td    {padding:0px 5px; vertical-align:top;}

table.border {border:1px solid #ccc} 
table.alt tr:nth-child(even) {background-color:#f2f2f2;} 

a:link {color:#06f; text-decoration:none;} 
a:visited {color:#06f; text-decoration:none;} 
a:hover  {color:#fff; background-color:#06f; text-decoration:none;}  
a:active {color:#fff; text-decoration:none;}  

a img   {vertical-align: bottom;}
a[name] {display:inline-block} /* IE reageert anders niet op springen naar (b.v.) kk-pontivy.php#a4 */

img.afbLi {float:left; padding-right:10px;} 
img.afbRe {float:right; padding-left:10px;} 
img.centr {display:block; margin:auto; text-align:center;}

/* BoldNml en BoldAct alleen in hoofdmenu */
a.BoldNml:link    {color:#06f; font-weight:bold;} 
a.BoldNml:visited {color:#06f; font-weight:bold;} 
a.BoldNml:hover   {color:#fff; background-color:#06f; font-weight:bold;} 
a.BoldNml:active  {color:#fff; background-color:#06f; font-weight:bold;} 

a.BoldAct:link    {color:#fff; background-color:#f60; font-weight:bold;} 
a.BoldAct:visited {color:#fff; background-color:#f60; font-weight:bold;} 
a.BoldAct:hover   {color:#f60; background-color:#06f; font-weight:bold;} 
a.BoldAct:active  {color:#f60; background-color:#06f; font-weight:bold;} 

a.Act:link    {color:#fff; background-color:#f60;} 
a.Act:visited {color:#fff; background-color:#f60;} 
a.Act:hover   {color:#f60; background-color:#06f;} 
a.Act:active  {color:#f60; background-color:#06f;} 

a.agrijs:link    {color:#fff;} 
a.agrijs:visited {color:#fff;} 
a.agrijs:hover   {color:#fff; background-color:#999;} 
a.agrijs:active  {color:#fff; background-color:#999;} 

a.wit:link  {background-color:#fff; text-decoration:none;} 
a.wit:visited {background-color:#fff; text-decoration:none;} 
a.wit:hover {background-color:#fff; text-decoration:none;} 
a.wit:active {background-color:#fff; text-decoration:none;}

a.top:link    {color:#000; background:#fff;} 
a.top:visited {color:#000; background:#fff;} 
a.top:hover   {color:#000; background:#fff;} 
a.top:active  {color:#000; background:#fff;} 

/*#bnToTop {display:none; position:fixed; z-index:99; bottom:0em; right:0%; border:none; outline:none; background-color:red;
		  color:white; cursor:pointer; padding:10px;} /* border-radius: 10px; /* Rounded corners */
#bnToTop {display:none; position:fixed; z-index:99; padding:0px 15px 95px 0px; bottom:0%; right:0%; border:none; outline:none;}	  

/* dialog van HH-icoon in top.php  */
.dialog {display:none; position:fixed; z-index:1; 
	width:98%; left:5px; top:100px; height:200px; 
	overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	text-align:center;
	cursor: pointer;	
}
.dialogContent {width:320px; position:relative; background-color:#ffffff; margin:auto; padding:5px; border:2px solid red;}
/* <span> met class="dialogClose" */
.dialogClose {color:black; float:right; font-weight:bold; }
.dialogClose:hover,
.dialogClose:focus {color:#000; text-decoration:none; cursor:pointer; }

#portrait_only {display:none;}
@media only screen and (orientation:portrait){#portrait_only{display:block;}}
@media only screen and (orientation:landscape){#portrait_only{display:none;}}

/* 
Deze en onderstaande regels zijn het verschil met resp_screen.css 
class="noprint" uitsluitend actief bij PlayAudio(), PlayMP3(), error-html's, 
meditatie_audio.php, phpAV2.php, top.php, voet.php 
*/
.noprint  {display:none;}