@import "farbschema_var0.css";
@import "animationen.css";
/*Deklarationen für den body*/
body
{
 background-image:url(../images/kariert_2.gif);
text-align:center;
 font-family:Verdana;
 font-size:12px;
 padding:0px;
 margin:0px auto;
}
/*Die verschiedenen Überschriften*/
h1 {font-size:20px;margin-bottom:0px;padding-top:0px;margin-top:0px;}
h2 {font-size:16px;}
h3 {font-size:14px;}

/*Und "normaler" Text*/
p {margin-top:0px;}


/* Die verschiedenen Zustände eines Links */
a:link, a:visited, a:active, a:hover
{
  text-decoration:none;
  font-weight:bold;
  font-size:1em;
}

/*...weitere Zustände eines Links/Ankers */
a:active, a:hover
{
 margin: 0;
 padding: 0.3em;
/*font-size: 1.3em;*/
 text-decoration:underline;
}
nav a{
  display: block;
/*  margin: .5em; */
  padding: 0.3em;
  text-decoration: none; font-weight: bold;
  border: 1px solid blue;
/*  border-radius: 10px; */
  box-shadow: 0px 5px 10px -3px white inset;
}

li{
/*  font-weight:bold; */
  line-height:1em;
}

ol{
  line-height:1em;
}

dl{
  padding-top:1em;
  padding-bottom:1em;
}
dt{
  font-weight:bold;
  line-height:2em;

}
dd{
  font-size: 1em;
  padding-bottom:1.5em;
}
/*
dd:hover {
  font-size: 1.5em;
}
*/
table ( font-weight: bold;)

nav ul {
/*  margin: 1em; */
}

nav li {
  list-style: none;
  overflow-x: hidden;
}

#overtitle {
clear;
text-align:center;
width:100%;
padding:0px;
margin:0px;
}

#title {

text-align:center;
vertical-align:middle;
/*	<img src="./images/logo_gross.jpg" style="float:center;width:540px; height:147px;" alt="Logo" />*/
height:9em;
width:100%;
padding-bottom:1em;

	background-image : url("../images/logo_gross.jpg");
	background-position: center;
	background-repeat : no-repeat;
	background-size: 540px 147px;
}


#total {
clear;
text-align:left;

/*box-shadow: horizontaleVerschiebung vertikaleVerschiebung [weichzeichner(0=scharf)] [zoom(negativ=kleiner positiv=größer)] farbe ["inset"]*/

box-shadow: -20px -20px 20px -10px rgba(30,30,30,0.4);
border: 1px solid black; padding: 0px;

/*background-image:url(../images/ballonRotKlein.gif);*/

width:90%;
height:100%;
margin:2px auto;
padding-top:0px;
margin-top:0px;
padding-bottom: 0px;
margin-bottom:0px;
}

#left, #right {
padding-top:0px;
margin-top:0px;
width:15%;

}

#left {
	float:left;
	text-align:center;
	align:left;
}

#right {
float:right;
text-align:left;

}

#knopf {
	display:none;
}
#menueliste {
	display:block;
}

#content {
clear;
width:65%;
height:100%;
margin:0px auto;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;

}



#bottom {
 clear;
 text-align:center;
 width:100%;
}

@media (max-width: 39em) {

	#title{
		background-image : url("../images/logo_klein.jpg");
		background-position: center;
		background-repeat : no-repeat;
		background-size: 222px 60px;
	}

	#total{
		width : 95%;
	}

	#right {
		display : none;
	}
	
	#left{
		top : 6em;
		position: fixed;
		float:left;
		text-align:center;
		align:left;
	}
	
	#content {
		float:left;
		width: 95%;
	}

	#knopf {
		background-image: url("../images/menue_icon_64x64.png");
		background-position: center;
		background-repeat : no-repeat;
		background-size: 128px 128px;
		display:block;	
	}
	
	#menueliste {
		display:none;
		width:0%;
	}
	
}


@media (min-width: 40em) and (max-width: 60em){

	#title{
		background-image : url("../images/logo_mittel.jpg");
		background-position: center;
		background-repeat : no-repeat;
		background-size: 332px 90px;
	}

	#total{
		width : 95%;
	}

	#right {
		display : none;
	}
	
	#left{
		top : 6em;
		position: fixed;
		float:left;
		text-align:center;
		align:left;
	}
	
	#content {
		float:left;
		width: 95%;
	}

	#knopf {
		background-image: url("../images/menue_icon_64x64.png");
		background-position: center;
		background-repeat : no-repeat;
		background-size: 128px 128px;
		display:block;	
	}
	#menueliste {
		display:none;
		width:0%;
	}

}


@media (min-width: 120em) {

	#total{
		width : 80%;
	}

}