/* ======================================================================================== 
overall  
*/

  @font-face { font-family: 'Consolas';
    src: url('./fonts/Consolas.eot');
    src: url('./fonts/Consolas.woff2') format('woff2'),
         url('./fonts/Consolas.woff') format('woff'),
         url('./fonts/Consolas.ttf') format('truetype'),
         url('./fonts/Consolas.svg#Consolas') format('svg'),
         url('./fonts/Consolas.eot?#iefix') format('embedded-opentype');
    font-weight: normal; font-style: normal; 
    }

  @font-face { font-family: 'MonospaceTypewriter';
    src: url('./fonts/MonospaceTypewriter.eot');
    src: url('./fonts/MonospaceTypewriter.eot?#iefix') format('embedded-opentype'),
         url('./fonts/MonospaceTypewriter.woff') format('woff'),
         url('./fonts/MonospaceTypewriter.ttf') format('truetype'),
         url('./fonts/MonospaceTypewriter.svg#MonospaceTypewriter') format('svg');
    font-weight: normal; font-style: normal; 
    }

  @font-face { font-family: "CrystalRadioKit-Regular";
    src: url("./fonts/crystal-radio-kitregular.eot"); 
    src: url("./fonts/crystal-radio-kitregular.eot?#iefix") format("embedded-opentype"), 
      url("./fonts/crystal-radio-kitregular.otf") format("opentype"), 
      url("./fonts/crystal-radio-kitregular.svg") format("svg"), 
      url("./fonts/crystal-radio-kitregular.ttf") format("truetype"), 
      url("./fonts/crystal-radio-kitregular.woff") format("woff"), 
      url("./fonts/crystal-radio-kitregular.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
    }

  @font-face {
    font-family: 'Bahnschrift Regular';
    src: url('./fonts/Bahnschrift Regular.eot');
    src: url('./fonts/Bahnschrift Regular.eot?#iefix') format('embedded-opentype'),
         url('./fonts/Bahnschrift Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    }

  @font-face {
    font-family: 'Bahnschrift';
    src: url('./fonts/Bahnschrift.svg#Bahnschrift') format('svg'),
         url('./fonts/Bahnschrift.ttf') format('truetype'),
         url('./fonts/Bahnschrift.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

    body { 
      background-color:white; color:#303030; margin:0;
      font-size:1.1em; font-family:Verdana, SVera, Roboto;
      }

    h2 {
      margin:1em 0 0.3em 0;
      }

    h3 {
      font-size:1.8em; font-weight:bold; color:#6c7b8b;margin:0 0 1em 0;
      }

    h4 {
      margin:1em 0 0.3em 0;
      }

    h5 {
      font-size:1.1em; font-weight:bold; margin:1.5em 0 0.5em 0; color:firebrick;
      }

    h6 {
      font-size:1.0em; font-weight:bold; margin:0.8em 0 0.2em 0; color:firebrick; opacity:0.8;
      }

    pre {
      float:left; font-size:1em; font-weight:bold; font-family:MonospaceTypewriter, Consolas-bodee1,consolas,system,verdana; color:#27408b;
      }

    h6.mail {
      font-size:0.9em; font-weight:bold; margin:0; color:black; opacity:0.8;
      }

    pre.mail {
      float:left; font-size:1em; font-weight:normal; margin-left:3em;
      font-family:Roboto, Arial, MonospaceTypewriter, Consolas-bodee1,consolas,system,verdana; color:black;
      }

    h6.mail_ar {
      font-size:0.9em; font-weight:bold; margin:0; color:#27408b; opacity:0.8;
      }

    pre.mail_ar {
      float:left; font-size:1em; font-weight:normal; margin-left:3em;
      font-family:Roboto, Arial, MonospaceTypewriter, Consolas-bodee1,consolas,system,verdana; color:#27408b;
      }

    fieldset { 
      border-color:#f0f0f0; 
      }

    blockquote { 
      font-size:0.95em; color:#363636;
      }

    cite { 
      font-style:normal;
      }

    i { 
      color:black; 
      }
    hr { 
      float:left; width:100%;color:#fcfcfc; margin:1em 0 1em 0; 
      }

    hr.toegift { 
      float:left; width:100%;height:2px; fill:red; color:red; margin:1em 0 1em 0; 
      }

    legend { 
      color:black; font-variant:small-caps; padding:0 0.2em 0 0.2em; 
      }

    table.foot {
      width:100%; border:0; margin:0; background-color:#171717; color:white;
      }

    section { 
      margin:1em 1em 1em 2em; 
      }

    .midget { 
      font-size:90%; 
      }

    a { 
      color:#cd0000; text-decoration:none; 
      }

    a:hover { 
      color:firebrick; text-decoration:underline; 
      }

    a.gnome { 
      margin:1em; font-size:1em; color:orange; text-decoration:none; 
      }

    a.gnome:hover { 
      color:white; 
      }

    a.pvq { 
      border:1px solid red;
      padding:1px;
      }

    a.pvq:hover { 
      border:1px solid orange;
      }

    a.switch { 
      background-color:green; color:white; font-variant:small-caps;
      margin:0 0.4em 0 0.4em; padding:0.1em 1em 0.2em 1em; 
      text-decoration:none; text-align:center;
      border-radius:6px; border:1px solid black;
      }

    a.switch:hover { 
      background-color:seagreen; color:yellow;
      }

    .report { font-size:110%; width:65%; color:#0f0f0f; }


    table.report { 
      padding:0; spacing:0; width:100%; border:0; visibility:collapse;
      float:left; 
      }

    table.covid { 
      padding:0; spacing:0; width:100%; border:0; visibility:collapse;
      float:left; 
      }

    table.mail { 
      padding:0.5em; spacing:0; width:80%; border:1px solid black; visibility:collapse;
      float:left; font-size:1em; font-weight:normal; 
      font-family:Roboto, Arial, verdana; background-color:white;
      }

    td.send    { background-color:#3F3F3F; color:white; font-weight:bold; padding:0.3em 0.3em 0.3em 1em; margin:0; } 
    td.send_ar { background-color:#27408b; color:white; font-weight:bold; padding:0.3em 0.3em 0.3em 1em; margin:0; }
    td.mail    { color:#3F3F3F; padding:0 0 1em 1em; }
    td.mail_ar { color:#27408b; padding:0 0 1em 1em; }
    .stamp     { float:right; margin-right:0.3em; }

    #version { 
      text-align:left;font-size:0.6em;color:lightgray;position:relative;bottom:-2.5em;left:1em; 
      }

    img.logo-top { 
      margin:1em 2.5em 0.5em 1em; width:1024px;
      }

    .foto { 
      float:right;font-size:0.85em; margin:0.2em; 
      }

    .book { 
      float:left;font-size:0.85em; margin:2em; width:320px; border:0px solid firebrick;
      }

    .fsbook { width:320px; }

    .fcbook { font-size:0.9em; }

    .alert { background-color:yellow;color:grey;width:420px;padding:1em; }
    h6.alert { color:grey; font-size:1.1em;font-weight:bold;padding:0;}
    h1.alert { color:red; font-size:1.3em;font-weight:bold;padding:0;}

div.deflist {
  border:1px solid dimgray;
  width:100%;
  }

dl.defcon {
  border: 1px solid #ccc;
  padding: 0.0m;
  background:snow;
  margin:0;
  }

dt.defcon {
  float: left;
  clear: left;
  width: 170px;
  text-align: right;
  color: darkslategray;
  font-weight: normal;
  font-size:1em;
  background-color: #e3e3e3;
  padding: 0 1em 0 0;
  border-right : 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  }

dt.defcon::after {
  content: " ";
  }

dd.defcon {
  font-size:1em;
  margin: 0 0 0 12em;
  padding: 0 0 0 1em;
  background: snow;
  color:black;
  }

dd.defcon::before {
  content: " ";
  }

dl.title {
  background:lightyellow;
  }

dt.title {
  float: left;
  clear: left;
  width: 170px;
  text-align: right;
  font-size:1em;
  padding: 0 1em 0 0;
  border-right : 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  font-weight:bold;
  color:black;
  background:#e3e3e3;
  }

dd.title {
  margin: 0.2em 1em 0.8em 13em;
  font-size:1em;
  height:2.2em;
  font-weight:bold;
  color:black;
  background:lightyellow;
  }

dl.namevalue {
  border: 0px solid dimgray;
  padding: 0.0m;
  margin:0;
  background:darkgray;
  border-bottom : 1px solid dimgray;
  }

dt.name {
  width: 170px;
  font-variant:small-caps;
  font-size:1em;
  font-weight:bold;
  background:darkgray;
  color:white;
  border-right  : 2px solid dimgray;
  border-bottom : 1px solid dimgray;
  }

dd.value {
  margin: 0 0 0 13em;
  font-variant:small-caps;
  font-size:1em;
  font-weight:bold;
  background:darkgray;
  color:white;
  }

/* video-panes 640x480 resp. 1920x1080 */
    .brel   { width:640px; height:480px; }
    .ange   { width:1280px; height:720px; }
    .pvq    { width:640px; height:360px; border:1px solid orange; border-radius:6%; }
    .pvq:hover { border:1px solid firebrick; }

/* Facebook and YouTube - buttons */
    #quicknav {	float:middle;margin-left:10px;}
    #quicknav ul {float:left;margin:0;padding:0;line-height:34px;}
    #quicknav li {float:left;padding:0;list-style:none;padding-left:15px;}
    #quicknav .social_icon {display: block;background: url(./socialicons.png) no-repeat;
      	height:32px;width:32px;padding:0;border-radius: 100%;}
    #quicknav a.twitter {background-position: 0 0;}
    #quicknav a.facebook {	background-position: 0 -32px;}
    #quicknav a.youtube {background-position: 0 -64px;}
    #quicknav a.rss {background-position: 0 -96px;}
    #quicknav a:hover {
     	box-shadow:0px 0px 5px rgba(210,210,210,0.8);
     	background-color: rgba(210,210,210,0.7)}
    #quicknav .social_icon { float: left;display: block;
     	background: url(./socialicons.png) no-repeat;
     	height: 32px;width: 32px;	padding: 0;border-radius: 100%;}

/* ======================================================================================== 
responsive 
*/

@media screen and (max-width: 480px) {
	body 	{
		padding: 0 !important;
		min-width: 200px !important;
		max-width: 480px;
 font-size:1.0em;
	}

 img.logo-top { margin:0 0.5em -2em 1.5em; width:260px !important;}

 h3 { font-size:1.2em; margin-top:1em;}

 .brel   {  width:360; height:240; }
 .ange   { width:420px; height:270px; }
 section { margin:0.1em 0.1em 0.1em 0.2em; }
 pre { font-size:0.7em; }

 .title { 
 font-size:1.5em; color:#ee7600; margin:0px;
 }
 table.container { 
 border-radius:5px;
 }
 td.menu {
 min-width: 120px !important;
		max-width: 260px;
 }
 td.videos {
 display:none;
 }
}

@media screen and (max-width: 640px) {
	body 	{
		padding: 0 !important;
		min-width: 200px !important;
		max-width: 640px;
 font-size:1.1em;
	}
 img.logo-top { margin:0 0.5em -2em 1.5em; width:600px !important;}
 iframe.brel   {  width:480; height:320; }
 .ange   { width:600px; height:360px; }
 section { margin:0.2em 0.2em 0.2em 0.3em; }
 pre { font-size:0.4em; }

 .title { 
 font-size:1.4em; color:#ee7600; margin:0px;
 }
 table.container { 
 border-radius:7px;  
 }
 td.menu {
 min-width: 100px !important;
		max-width: 280px;
 }
 td.videos {
 display:none;
 }
}

@media screen and (max-width: 767px) {
	body 	{
		padding: 0 !important;
		min-width: 200px !important;
		max-width: 767px;
 font-size:1.1em;
	}
 img.logo-top { margin:0 0.5em -1em .5em; width:560px !important;}
 h3 { font-size:1.2em; margin-top:1em;}
 .brel   { width:520px; height:340px; }
 .ange   { width:520px; height:340px; }
 pre { font-size:59%; }
 a.gnome { font-size:0.9em; }

 .title { 
 font-size:1.3em; color:#ee7600; margin:0px;
 }
 table.container { 
 border-radius:7px;  
 }
 td.menu {
 min-width: 120px !important;
		max-width: 320px;
 }
 td.videos {
 display:none;
 }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
	body 	{
		padding: 0 !important;
		min-width: 200px !important;
		max-width: 1024px;
 font-size:1.1em;
	}
 img.logo-top { margin:1em 0.5em -1em 1.5em; width:720px !important;}
 h3 { font-size:1.2em; margin-top:1em;}
 .brel   { width:600px; height:400px; }
 .ange   { width:690px; height:400px; }
 pre { font-size:59%; }
 a.gnome { font-size:0.9em; }

 .title { 
 font-size:1.2em; color:#ee7600; margin:0px;
 }
 table.container { 
 border-radius:10px;  
 }
 td.menu {
 min-width: 220px !important;
		max-width: 360px;
 }
 td.videos {
 display:none;
 }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
	body 	{
		padding: 0 !important;
		min-width: 1024px !important;
		max-width: 1920px;
 font-size:1.1em;
	}

 img.logo-top { margin:1em 0.5em -1em 1.0em; width:800px !important;}
 h3 { font-size:1.2em; margin-top:1em;}
 a.gnome { font-size:0.9em; }
 .brel   { width:720px; height:540px; }
 .ange   { width:920px; height:520px; }
 pre { font-size:1em; }
 section { margin:1em 1em 1em 2em; }

 .title { 
 font-size:1.2em; color:#ee7600; margin:0px;
 }
 table.container { 
 border-radius:20px;  
 }
 td.menu {
 min-width: 300px !important;
		max-width: 320px;
 }
 td.videos {
 min-width: 240px !important;
		max-width: 400px;
 }
}