*
 { margin: 0px; padding: 0px; }

html {
    background-color: #f4f4f1; /* Farbe hinter der Website */
}

body 
 { 	background-color: #ffffff; color: #565452; font-size: 1em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
 	max-width: 889px; margin: 0 auto;
     border-left: 1px solid #e9e9e5;  /* Feiner linker Rand */ border-right: 1px solid #e9e9e5; /* Feiner rechter Rand */
 }

h1,h2,h3,h4,h5,h6,th
 	{ font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;  
 	font-weight: normal; margin-top: 1.875em; margin-right: 0.625em; 
 	}
 	 
p 
 { text-align: left; display: block;
 }

a
 {color: #666666; text-decoration: underline; 
 }
 
a right { color: red;
		}
object 
 	{ text-align: left; display: block;
 	}
	a:hover
 	{text-decoration: none; background-color: ; color: #990000;
 	}
.active
	{text-decoration: none; background-color: ; color: #990000;
 	}
.red 
 	{ color:#990000
 	}
.green 
 	{ color:#669966; margin-left: 0px; 
 	}

.right 
 	{ text-align: right; margin-right: 10%; margin-bottom: 1,5em;
 	}
.grey
   { background: /**#ebebe3; **/ #f4f4f1;
 	}
.one
 	{margin-top: 4.125em; margin-left: 0.438em;
 	}
.oneright
	{margin-top: 4.125em; text-align: right;
 	}
 .date
 	{text-align: right; font-size: 0.8em;
 	}
 	
[hidden] {
   display: none;
}

.accordion	{ 
			}

/**-----------------------------------------------------------------------------------**/
#header
        { background-image: url(images/logo-tanguito-header-neu.jpg);
          	background-color: #bab5ac;
          	background-repeat: no-repeat;
 			background-size: contain;  
 			background-position: center;
  			width: 100%; height: 9vh;
  			min-height: 60px; 
 			max-width: 889px; 
 			margin: 0 auto;
 			z-index: 9; 
 			position: sticky; 
 			} 			
/**_________MENUE______________________________________________________________________**/		 	 		 
.nav 	{	background-image: url(images/tanguito-Bild-menue.jpg);
		padding-top: 0.1em; padding-bottom: 0.1em;
		background-size: contain;
		width: 100%;
		z-index: 1;
		}		
.nav ul {list-style-type: none;
		padding: 0; margin-rigth: 2em;
		text-align: right;
		}
.nav ul li 
		{padding: 0.3em 1em;
		font-size: 1em;
		box-sizing: border-box;
		width: 40%;
		background-color: #f4f4f1;
		padding: 0em; margin: 0.3em;
		border-radius: 4px;
		}	
.nav ul li a 
		{display: block;
		text-decoration: none;
		color: #333;
		padding: 0.25em 1.2em;     
		border-radius: 4px; 
		}
.nav ul li .active 
		{ background-color: #e9e6d9;				
		transition: background-color 0.6s ease;
		width: 90%;
   		height: 100%;
    	display: block;   
		}
.nav ul li a:hover 
		{background-color: #a8c6c6;
		transition: background-color 0.6s ease;
		width: 90%;
   		height: 100%;
    	display: block;
		}

/**_________MENUE_WORKSHOPS und KURSE__________________________________________________**/		 	 		 
.navws 	{background-color: #bab5ac;
		padding-top: 0.1em; padding-bottom: 0.1em;
		background-size: contain;
		width: 100%;
		z-index: 1;
		}
.navws ul 	
		{list-style-type: none;
		padding: 0; margin-rigth: 2em; margin-bottom: 2em;
		text-align: right;
		}
.navws ul li 
		{float: left;
		padding: 0.3em 1em;
		font-size: 1em;
		box-sizing: border-box;
		width: 40%;
		background-color:/** #f4f4f1; **/   #ededea;
		padding: 0;
		margin: 0.25em;
		border-radius: 4px;
		}
.navws ul li a 
		{display: block;
		text-decoration: none;
		color: #333;
		padding: 0.2em 1.2em;
		border-radius: 4px;
		}
.navws ul li .active 
		{background-color: #e9e6d9;
		transition: background-color 0.3s ease;
		}
.navws ul li a:hover 
		{background-color: #a8c6c6;
		margin: 0em	;
		transition: background-color 0.6s ease;
		}
		
/**____________BILDER__________________________________________________________________**/			
img.flow
 		{ position: relative; 
 		width: 100%; height: 100%; 
		margin-bottom: 0.1em; margin-top: 0.1em
 		} 	
img.button 
		{ padding-top: 0; 
		background-size: contain;
		width: 10%;
		}		

/**_____________Hauptseite_____________________________________________________________**/
#main
 		{ margin: 0 auto; position: relative; 
	 	z-index: 2; background-color: #7DAFBD
 		overflow:  scroll;
 		}
#main h2,h3
 	{ color: #be5304;
 	}
#main h2
 	{ font-size: 1.25em; margin-bottom: -0px; padding-left: 1.875em; height: 0.625em 
 	}	
#main h2.ws
 	{ font-size: 1.25em; margin-top: 0.4em; padding-left: 1.875em; height: 0.625em 
 	}
#main p
 	{ text-align: left; margin-bottom: 1.25em; margin-top: 1.25em; margin-left: 3.125em; margin-right: 3.125em;
 	}
#main p.eingerueckt 
 	{ padding-left:2em;
 	} 	
#main p.center
 	{ text-align: center; margin-bottom: 0.313em; margin-top: 0.938em; margin-left: 4.375em 
 	}
#main p.grey
 	{ text-align: left; margin-left: 0.438em; margin-right: 0.813em; margin-top: -1.563em; 
 	padding-left: 4.375em; padding-top: 0.375em; padding-bottom: 1em; 
 	} 
#main p.left
 	{ text-align: left; margin-bottom: 1.25em; margin-left: 0.625em 
 	}	
#main p.right
 	{ text-align: right;margin-bottom: 0.875em; margin-top: 0.875em; margin-left: 2.813em 
 	}

/**_____________Fussleiste_____________________________________________________________**/
#footer
	{ position: relative; top: 0; background: #ffffff; margin: 2em;
	padding: 0; height: 1.25em; width: 66.25em; z-index: 2; color: #999999;  
	}
#footer a
    { color: /**#669999;**/ #81c0c0 }

#footer a:hover
     { background-color: #7DAFBD; color: #E8FAFF; }