body { font-family:Arial,sans-serif; font-size:1.3 em;}
 h1 { font-size:2 em; font-weight:bold; font-style:italic;color:#6060ff  }
 h2 { font-size:1.7 em;}
 h3 { font-size:1.5 em;}
 table.tab { border-color:#0000A0 ;border-width:4px; border-color:#9999FF; border-style:outset; padding:2px;border-collapse:collapse; vertical-align:middle;}
 table.menu { border-width:none;border-collapse:collapse }
 td { font-family:Arial,sans-serif; font-size:0.9 em; }
 td.menu { font-family:Arial,sans-serif; font-size:1 em; }
 td.tab { font-family:Arial,sans-serif; font-size:0.9 em; border-color:#0000A0 ;border-width:4px; border-color:#9999FF; border-style:outset; padding:2px;border-collapse:collapse; vertical-align:middle;}
 a:link { color:#000080; text-decoration:none; font-weight:bold; }
 a:visited { color:#000080; text-decoration:none; font-weight:bold; }
 a:hover { color:#0000A0; text-decoration:none; background-color:#CCCCCC; font-weight:bold; }
 a:active { color:#0000A0; background-color:#CCCCCC; font-weight:bold; }
 a:focus { color:#0000A0; background-color:#CCCCCC; font-weight:bold; }
 ul#Navigation {
    width:860px; 
		margin: 12px; 
		padding: 12px 12px;
    text-align: center;
    border: 3px solid; color:#eeeeee;
		background-color:#eeeeee;
  }
 ul#Navigation li {
    list-style: none;
    display: inline; margin: 2px; padding: 2px;text-align: center;
  }
  ul#Navigation a {
    margin: 6px;
    padding: 6px 6px;
		width:90px; height:50px;
		border: 3px solid #888;
		text-align: center;
		vertical-align: middle;
    text-decoration: none; font-weight: bold;
    border-left-color: white; border-top-color: white;
    color:#00c; background-color: #ccc;
  }
  ul#Navigation a:hover, ul#Navigation span {
    margin: 6px;
    padding: 6px 6px;
		width:90px; height:50px;
		text-decoration: none; font-weight: bold;
		border: 3px solid #888;
		text-align: center;
		vertical-align: middle;
    border-left-color: black; border-top-color: black;
    color: white; background-color: #aaa;
		
  }

	
 ul#Nav {
    //width:860px; 
		//margin: 12px; 
		//padding: 1em 1em;
    text-align: center;
    //border: 3px solid; color:#ffffff;
		padding-left: 0em;
		//background-color:#eeeeee;
  }
 ul#Nav li  {
    list-style: square outside;
		margin: 2px; padding: 2px;text-align: left; // display: inline;
  }
	ul#Nav li span {
    position: relative;
	  left: 0em;
    
  }
  ul#Nav a {
    margin: 3px;
    //padding: 6px 6px;
		//width:90px; height:50px;
		//border: 3px solid #888;
		//text-align: center;
		vertical-align: middle;
    text-decoration: none; font-weight: bold;
    // border-left-color: white; border-top-color: white;
    color:#00c; //background-color: #ccc;
  }
  ul#Nav a:hover {
    margin: 3px;
    //padding: 6px 6px;
		//width:90px; height:50px;
		text-decoration: none; font-weight: bold;
		//border: 3px solid #888;
		text-align: center;
		vertical-align: middle;
    //border-left-color: black; border-top-color: black;
    color: #00f; background-color: #ddd;
		
  }
	
	
	
ul#Nav2 {
    //width:860px; 
		//margin: 12px; 
		//padding: 12px 12px;
    text-align: left;
    border: 3px solid; color:#ffffff;
		padding-left: 1em;
		//background-color:#eeeeee;
  }
 ul#Nav2 li {
    list-style: none;
    margin: 2px; padding: 2px;text-align: left;//display: inline;
  }
  ul#Nav2 a {
    //margin: 6px;
    //padding: 6px 6px;
		//width:90px; height:50px;
		//border: 3px solid #888;
		text-align: left;
		vertical-align: middle;
    text-decoration: none; font-weight: bold;
    //border-left-color: white; border-top-color: white;
    color:#00c; //background-color: #ccc;
  }
  ul#Nav2 a:hover {
    //width:90px; height:50px;
		//border-left-color: black; border-top-color: black;
    color: #00f; background-color: #ddd;
		
  }
	
	
	
	 /* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  //background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 120px;
}


/* Style page top */
.top {
  //margin-left: 160px; //
  //padding: 0px 10px;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  //background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  //padding-top: 120px;
}


/* Style page content */
.main {
  margin-left: 160px; //
  //padding: 0px 10px;
	padding-top: 120px;
	
}

/* Style page content */
.footer {
  padding-left: 160px; //
  //padding: 0px 10px;
	padding-top: 120px;
	
}

/* Style page content */
.tableend {
  padding-left: 160px; //
  //padding: 0px 10px;
	//padding-top: 120px;
	width:auto; 
	border:2px solid blue;
	margin:5pt;
}

.tablefloat {
  margin-left: 160px; //
  //padding: 0px 10px;
	//padding-top: 120px;
	width:auto; 
	border:2px solid blue;
	margin:5pt;
}


/* fuerkalender */

form {  padding:5px; border:2px solid #aaf;float:left;margin:3pt }
button { background-color:#ccc; color:#00c; font-weight:bold;width:150px; border:3px solid #888; }
buttoninact { background-color:#aaa; color:#fff; font-weight:bold;width:150px; border:3px solid #ddd; }
/* form.body { font-family:Arial,sans-serif; font-size:10pt;}
form.h2 { font-size:12pt;}
form.h3 { font-size:12pt;}
form.td { font-family:Arial,sans-serif; font-size:9pt;margin:1em;}
form.a:link { color:#000080; text-decoration:none; font-weight:bold; }
form.a:visited { color:#000080; text-decoration:none; font-weight:bold; }
form.a:hover { color:#0000A0; text-decoration:none; background-color:#CCCCCC; font-weight:bold; }
form.a:active { color:#0000A0; background-color:#CCCCCC; font-weight:bold; }
form.a:focus { color:#0000A0; background-color:#CCCCCC; font-weight:bold; } */



/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  //.sidenav {padding-top: 15px;}
  .sidenav a {font-size: 1.2 em;}
} 

/* gallery */

@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
#galerie {
	box-sizing: border-box;
	background-color: lightblue;
	//background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);
	background-size: 20px 20px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	padding: 2em 2em;
  margin-left: 10px; //
  margin-right: 10px; //
  //padding: 0px 10px;
	//padding-top: 120px;
}
/* weitere Muster mit linear-gradient unter: http://lea.verou.me/css3patterns/   */

#galerie figure {
	background: #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	//height: 15em;
	margin: 0 0 1em 1em;
	overflow: hidden;
	padding: 0;
	width: 15em;
	transition: all 0.25s ease-in;
}

#galerie figure img {
	width: 15em;
	//height: 15em;
}

#galerie figure:hover,
#galerie figure:focus {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	margin: -1em 0px 0 20px;
	padding: 5px 5px 30px 5px;
	width: 15em;
	z-index: 2;
	transform: scale(2.5);
}

#galerie figcaption {
	color: #333;
	font: cursive 10px/150%;
	font-family: "Reenie Beanie", cursive;
	position: relative;
	text-align: center;
	width: 15em;
}

#galerie figure:nth-child(3n-2):hover,
#galerie figure:nth-child(3n-2):focus {
	transform: scale(2.5) rotate(-5deg);
}

#galerie figure:nth-child(5n):hover,
#galerie figure:nth-child(5n):focus {
	transform: scale(2.5) rotate(5deg);
}

#galerie:after {
	clear: both;
	content: " ";
	display: block;
}

/* gallery */

@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
#kalo {
	box-sizing: border-box;
	background-color: lightblue;
	//background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);
	background-size: 20px 20px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	padding: 2em 2em;
  margin-left: 10px; //
  margin-right: 10px; //
  //padding: 0px 10px;
	//padding-top: 120px;
}
/* weitere Muster mit linear-gradient unter: http://lea.verou.me/css3patterns/   */

#kalo table {
	background: #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	//height: 15em;
	margin: 0 0 1em 1em;
	overflow: hidden;
	padding: 0;
	width: 15em;
	transition: all 0.25s ease-in;
}


#kalo table:hover,
#kalo table:focus {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	//margin: -1em 0px 0 20px;
	/padding: 5px 5px 30px 5px;
	width: 15em;
	z-index: 2;
	// transform: scale(1.5);
}


#kalo:after {
	clear: both;
	content: " ";
	display: block;
}


/*   */
@media only screen and (max-width: 75em) {
	body {
		width: 100%;
		margin: 2% 0;
		padding: 5%;
	}
	#galerie {
		width: 850px;
		margin: 100px auto;
	}
}

@media only screen and (max-width: 50em) {
	#galerie {
		width: 100%;
		margin: 100px auto;
	}
}