@charset "utf-8";
/* CSS Document */

body {
  padding: 0px;
/*  margin: 0px;*/
}
#header, #footer, #left, #right {
  background-color: #B5B56A;
}
#header {
  height: 100px;
 /* margin: 10px; */
}

.title, #footer, .banner_text, .tdtext, .tdtext2, .tstext {
	font-family:"Comic Sans MS", cursive;		
/*	font-family:Tahoma, Geneva, sans-serif;*/
}
.tdtext{
	font-weight: bold;
	font-size:24px;			
}
.tdtext2{
	font-weight: bold;
	font-size:18px;			
}
.tstext{
	font-weight: normal;
	font-size:12px;			
}
#footer {
	height: 50px;
	width: 99%;
	position: absolute; 
	bottom: 10px; 
	
	display: flex;
	align-items: center;
	justify-content: center;
}
#center {
  position: relative;
  width: 100%;
}
#inhalt {
  margin: 0px 180px;
  background-color: #FFFFCC;
}
#left {
  position: absolute;
  top: 0px;
  width: 160px;
  height: 800px;;
}
div.middle {
	position:relative; 
	width:900px; 
	height:600px;
    border:1px solid black;
    float: left;
/*    margin: 0 0 10px 10px;*/	
	margin-top:20px;
	margin-left:160px;	
}
div.middle2 {
	position:relative; 
	width:90%; 
	height:600px;
/*    border:1px solid black;*/
    float: left;
/*    margin: 0 0 10px 10px;*/	
	margin-top:20px;
	margin-left:165px;	
}
	  
div.kindDiv { 
	position: absolute; 
	border:1px solid green;
	width:150px;
	height:150px; 
	text-align:center;
	line-height:150px; 
}
#right {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 160px;
  height: 300px;
}
#main {
  position: absolute;
  top: 20px;
  left: 165px;
/*  
  width: 800px;
  height: 760px;
*/  
	border: 1px solid #FFFFFF;
/*	border-radius: 10px; */
	border-color: #ff0000;	  

}
div.logo{
	width:  90px; 
	height: 80px; 

	position: absolute; 
	left: 40px; 
	top: 20px; 
	z-index: 1;	
	border: 10; 
	border-radius: 10px; 
	background-color: #ffffff;	
	background-image:url("logo.gif");
}
.title{
	position: absolute;
/*	font-family:"Comic Sans MS", cursive;*/
	font-size:36px;
	top: 19px;
	width: 100%;
	height: 80px;
	
	/* um vertikal zentriert auszurichten,
	muss dieses div innerhalb eines divs sein */
	display: flex;
	align-items: center;
	justify-content: center;
}
.banner{
	width:  780px; 
	height: 140px; 
	
	position: absolute; 
	left: 18px; 
	top: 900px; 
	z-index: 1;	
/*	border: 10; 
	border-radius: 10px; 
	background-color: #ff0000;*/	

    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg) !important;
    transform: rotate(270deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;	
}
.banner_text{
	position: absolute;
/*	font-family:"Comic Sans MS", cursive;*/
	font-size:36px;
	top: 19px;
	width: 100%;
	height: 80px;
	
	/* um vertikal zentriert auszurichten,
	muss dieses div innerhalb eines divs sein */
	display: flex;
	align-items: center;
	justify-content: center;
}
.box_1:hover, .box_2:hover, .box_3:hover, .box_4:hover{
    background-color: #e4cb00;	
}
.thema_1{
	background-color: #00ff00;	
}

.box_1, .box_2, .box_3, .box_4, .box_1_active, .box_2_active, .box_3_active, .box_4_active{	
	width: 250px;
	height: 26px;
	position: absolute;
	top: 95px;
	z-index: 1;
	text-align: center;
	font-family: "Comic Sans MS", cursive;
	font-size: 20px;
	border: 0px solid #FFFFFF;
	border-radius: 10px 10px 0px 0px;
	background-color: #85A85E;
}

.box_1_active, .box_2_active, .box_3_active, .box_4_active{		
	background-color: #00ff00;
}

div.box_1, .box_1_active{	
	left: 168px;
}
div.box_2, .box_2_active{	
	left: 433px;
}
div.box_3, .box_3_active{
	left: 698px;	
}
div.box_4, .box_4_active{
	left: 963px;
}
a:link {
	color: #000000; 
	text-decoration: none;
	text-underline: none; 
} 
a:aktive {
	color: #0000FF; 
	text-decoration: none;
	text-underline: none; 
} 
/*
a:visited {
	color: #00FF00; 
	text-decoration: none;
	text-underline: none; 
}
*/