/* ======================================================================================== 
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;
      }

    h3 {
      font-size:1.8em; font-weight:bold; color:#6c7b8b;margin:0 0 1em 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;
      }

    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; 
      }

    #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; 
      }

/* video-panes 640x480 resp. 1920x1080 */
    .brel   { width:640px; height:480px; }
    .ange   { width:1280px; height:720px; }

/* 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;
 }
}