/*--- Tools z.B. fur ifram -----*/
         #container
         {
               position:absolute;
               top:120px;
               bottom:0;
               width:100%;
               margin-bottom:11px;
         }
         #bodypage /* style fuer iframe im body */
         {
		margin-top:120px;
               position:static; /* Fehler mit nav tag verschwindet hinter iframe bei: relative, absolute, fixed */          		
         								/* position gegf in Konflikt mit Benutzung #header,#container#footer*/
        	height:calc(100% - 120px); /* 100% - header; Hoehenberechnung, da sonst das iframe nach unten raus rutscht.*/
               width:100%;
               overflow:auto;
               border:none;
         }
         #header
         {
               position:absolute;
               top:0px;
               height:120px;
               color:#ffffff;
               width:100%;
               font-family: Arial,Helvetica; 
       		   font-size:11pt; 
           		background-color:#FFFFFF;
           		background-image: url(pic/nav/bgTop.png); 
           		background-repeat:no-repeat; 
         }
         #footer
         {
               position:fixed;
               bottom:0px;
               height:11px;
               color:#eee;
               background-color:#00aa00;
               width:100%;
         }
/*--- Body - Seiten mit ihren Hintergrundgrafiken  ---*/

html, body
     {
     	/* body fuer iframe */
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.95em;		
         position:absolute;
         height:100%;
         width:100%;
         margin:0;
         padding:0;               
      }

body.lightcolor  {
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.95em;		
         background-color: #fc0031;
      }

body.bdy  { 
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.95em;		
           
         background-image: url(pic/nav/AlleFechtwaffen-small-02.png); 
         background-repeat:no-repeat; 
         background-position: 1vw 25vh; 
         background-attachment:fixed;
         background-size: 15vw;
		} 
body.home  { 
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.95em;		
         background-image: url(pic/nav/logo.png); 
         background-repeat:no-repeat; 
         background-position: 1vw 25vh; 
         background-attachment:fixed;
         background-size: 10vw;
      } 

body.bdy_zeit  { 
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.95em;
           
         background-image: url(pic/DirkEisner_Heilpraktiker.png); 
         background-repeat:no-repeat; 
         background-position: 1vw 25vh; 
         background-attachment:fixed;
         background-size: 18vw;
      } 

/*------------------ end --------------------*/		


/*--- header  ---*/
h1       {   font-size:1em; font-family: Verdana, Arial, sans-serif; /* 1 em entspricht dem 'M' im default font des viewport*/
         }
h2       {   font-size:1.2em; font-family: Verdana, Arial, sans-serif; 
         }
h3       {   font-size:1.4em; font-family: Verdana, Arial, sans-serif; 
         }
h4       {   font-size:0.95em; font-family: Verdana, Arial, sans-serif; 
         }
p        {	 font-size:0.95em; font-family:  Verdana, Arial, sans-serif; 
         }
/*------------------ end --------------------*/		

/*--- Absaetze ---*/
p	{
	/* Automatische Silbentrennung Januar 2019: noch nicht verbreitet...
	  -ms-hyphens: auto;
	  -webkit-hyphens: auto;
	  hyphens: auto;
	  */

	}
p.rotmarkiert { background-color:#FF4000; padding:6px; margin:0px; }

p.gruenmarkiert { background-color:#01d030; padding:6px; margin:0px; }

p.weissmarkiert { background-color:#ffffff; padding:6px; margin:0px; }

p.comment{
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.85em;		
		   color:#f99909;
		 }         

small { 
			font-family: Verdana, Arial, sans-serif;
			font-size: 0.85em;		
      }
         
dir   { 
			font-family: Verdana, Arial, sans-serif;	
      }
b     {   
			font-family: Verdana, Arial, sans-serif;
		     color:#b80031;
      }
ol	{
		font-family: Verdana, Arial, sans-serif;
		font-size: 0.95em;		
	}
ul	{
		font-family: Verdana, Arial, sans-serif;
		font-size: 0.95em;		
	}
hr	{
	  background:#fce805
	}
	
img.anfahrt {
		width: 70vw;
	 	max-width: 25em;
		float: none;
	}

/*------------------ end --------------------*/		

/*--- Links ---*/
a:link    { color:#b80031; 
				text-decoration: none; 

          }
a:visited { 
				color:#b80031; 
				text-decoration: none; 
          }
a:active  { color:#fc0031; 
				text-decoration: none;  
          }
a:hover   { color:#fc0031; 
				text-decoration: none; 
          }

a.darkcolor:link    { 
				color:#b80031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }
a.darkcolor:visited { 				
				color:#b80031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }
a.darkcolor:active  { 				
				color:#fc0031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }
a.darkcolor:hover  { 				
				color:#fc0031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }
          
a.lightcolor:link    { 
				color:#fc0031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }
a.lightcolor:visited { 				
				color:#fc0031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }          
a.lightcolor:active  { 				
				color:#fc0031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }
a.lightcolor:hover  { 				
				color:#fc0031; 
				text-decoration: none; 
				font-weight: bold; 
				font-stretch: ultra-condensed;
          }

/*------------------ end --------------------*/		

/* under construction*/
table.underconstruction {		
		background-image : url(pic/nav/balken-yb.jpg);
		/*background-size: 100%;
		background-repeat: repeat-y;*/
		width:100vm;
		text-align: left;
		vertical-align: top;
		padding: 0;
		margin-left: 20vw;	
		margin-right: 1em;
		margin-top: 1em;
   }

/*--- Tabelle und Text Boxen ---*/
	
/* Auessere box table.box s.u. abh. viewport Breite*/
table.box {		/* auessere box, Breiten angaben von% auf vw (viewport width */
		width:100vm;
		text-align: left;
		vertical-align: top;
		padding: 0;
		margin-left: 20vw;	
		margin-right: 1em;
		margin-top: 1em;
   }

table.box th.boxtitle{
		background-image : url(pic/nav/BoxHeader.png);
		background-size: 100%; /* Viewport breite waere 100vm */
		background-repeat: no-repeat;
		padding-top: 0;
		padding-left: 3em;
		padding-right: 2em;
		padding-bottom: 0;
		margin: 0em;
		text-align: center;
		font-size: 0.85em;		
		font-weight:bold;
		color:#b80031;
	}

table.box td.boxcontent {
		background-image : url(pic/nav/BoxContentBg.gif);
		background-size: 100%;
		background-repeat: repeat-y;
		background-color: #ffffff;
		text-align: left;
		vertical-align: top;
		padding-top: 0;
		padding-left: 0.5em;
		padding-right: 0.3em;
		padding-bottom: 0;
		margin: :0em;
   }
   
table.box td.boxcontent img.withtext{
	 	width: 10em;
	 	max-width: 20vw;
		float: left;
		margin-right: 1em;
		margin-bottom: 0.3em;
		margin-top: 0.3em;
	}

table.box td.boxfooter {
		background-image : url(pic/nav/BoxContentBg.gif);
		background-size: 100%;
		background-repeat: repeat-y;
		background-color: #ffffff;
		padding-top: 0;
		padding-left: 0.5em;
		padding-right: 0.3em;
		padding-bottom: 0;
		text-align: right;
		font-size: 0.6em;
	}

table.box td.boxfooter p {
		text-align: left;
	}

table.lightcolor  {background-color:#fce805;
                  }

table.darkcolor  {background-color:#b5d8e5;
                  }

table.buecher{
		border-collapse: collapse;
		width: 100%;
	}
table.buecher td{
		padding-top: 0.3em;
		padding-left: 0.3em;
		padding-right: 0.3em;
		padding-bottom: 0.5em;
		text-align: left;
		vertical-align: too;
	}

table.buecher img {
	 	width: 10em;
	 	max-width: 20vw;
		float: left;
		margin-right: 1em;
		margin-bottom: 0.3em;
	}
/*------------------ end --------------------*/		


/*--- Mobile section ---*/
	/*----- Logo -----*/	
		.logo {
			float: left;
			padding: 0.5em 1em 0 0.5em;
			font-family: Times, Roman, serif;
			font-style: italic;
			font-weight: bold;
		}
		
	/*----- Menu -----*/	
		nav {
			margin: 0 auto;
			position:absolute;
         top:0px;
         width: 100%;
			height: 120px; /* y Hoehe der Menueleiste */
			text-align: right;
			background: rgba(255, 255, 255, 0.0); /* letzter Wert ist transparenz */
			/* border-bottom: 1px solid white; */
			-webkit-transition: all 0.8s ease;
			-moz-transition: all 0.8s ease;
			-o-transition: all 0.8s ease;
			transition: all 0.8s ease;
			
         background-image: url(pic/nav/bgTop.png); 
         background-repeat:no-repeat; 
			background-size: 105% 120px; /* width x y : x> 100 wegen Seitengleiter */
		}	
		nav ul {
			margin: 0;
			padding: 80px 0 0 0;	/* y Pos der Menueliste */
			height: 100vh;		/* vh viewportheight */
		}
		nav ul li {			
			list-style: none;
			margin: 0;
			display: inline;
		}
		nav ul li a {
			/* Farbe ueber <a> color: #009999; */
			position: relative;
			padding: 0 0 0.5em 0;
			display: inline-block;
			text-decoration: none;
			text-transform: uppercase;
		}
		nav ul.menu li a:hover {
			/* Farbe ueber <a> color: #03405f; */
			border-bottom: 2px solid #fc0031;
		}		
	/*----------------*/
		
	/*----- Media Queries -----*/
		@media screen and (min-width: 1500px) {
			nav div.logo a.darkcolor {
				font-size: 2em
			}			
			
			nav ul.menu {
				max-height: 20px;
			}			
			a#nav-m, a.close {
				display: none;
			}
			nav ul li {
				margin: 0 1em 0 0;
			}		
					
   }
	
		@media screen and (max-width: 1500px) {	
			/* Formatierung Logo text */
			nav div.logo a.darkcolor {
				font-size: 1.3em
			}			
					
			/*Formatierung Mobiles Menue*/				
			nav ul {
				top:120px;		/* y Position des mobile menue */
				position: absolute;
				background: #ccc;	
				/*background: rgba(200,200,200,0.95);*/
				/* width: 100%;  // war 300px Bei klick in Bereich neben <a> geht das menue nicht weg. */
				height: 27em; /* 3em pro Zeile */
				left: -100%; /* Minus wert blendet das Menue aus */

				list-style-type:none;
				margin: 0;
				padding: 0;				
				transition:all .6s ease;
				-webkit-transition:all .6s ease;
			}
			nav ul li{
				display: block;
				text-align: left;
				padding: 0em 0.5em;
				border-bottom: 1px solid #fff;
			}	
			nav ul li a {
				/* Farbe uber <a> color: #555;*/
				padding: 1em 0;				
			}
			nav ul.menu li a:hover {
				border-bottom: 0;
			}			

			/*Hamburger-Icon*/
			a#nav-m img, a.close img {
				margin-top: 30px;
				width: 40px;
				height: auto;
			}			
			nav > .close,
			a#nav-m:target {
				display: none;
			}

			a:target ~ ul,
			a:target ~ .close {
				display: inline-block;
			}
			
			a:target ~ .close {
				position: absolute;
				margin-left: -40px;
			}		

			a:target ~ ul {
				left: 0;
			}
					
		@media screen and (max-width: 400px) {	
			/* Formatierung Logo text */
			nav div.logo a.darkcolor {
				font-size: 1em
			}			
					
		}
/*------------------ end --------------------*/