@charset "utf-8";

/* ##### Erklärung: ######################################################################################## ALLGEMEINES ##### */

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #fff;
	background: url(../images/style/body.png) no-repeat fixed;
	background-position: top center;	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #999;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
#page {
	max-width: 960px;
	width: 94%;
	margin: 0 auto;
}
#main {}

/* ############################################################################################################## HEADER ##### */

#header {
	height: 200px;
	background: url(../images/header/header_960.png) no-repeat scroll;
	background-position: bottom center;
	background-size: 100% auto;
}
#header img {
	width: 100%;
	height: 200px;
}

/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 800px) { #header { background-image: url(../images/header/header_800.png); }}
@media screen and (max-width: 650px) { #header { background-image: url(../images/header/header_480.png); }}

/* ################################################################################################################# NAV ##### */

#nav {
	width: 100%; 
	border: 1px solid #fff;
 	background-color: #eee;
	background: rgb(125,126,125);
	background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
	background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
	background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
}
#nav .margin {
	float: left;
	margin: 2%;
}
#nav .menue {
	float: left;
	padding: 3% 1.5%;
	margin: 1% 0;
}
#nav .menue a {
	font-family: font-family:sans-serif;
	text-decoration: none;
	font-size: 120%;
	font-weight: normal;
	color: #fff;
}
#nav .menue a.active { color: #f00; }
#nav .menue a:hover { color: #f00; }
#nav .menue a:active { color: #f00; }

/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 650px) {

	#nav .margin { display: none; }
	#nav .menue {
		float: none;
		text-align: center;
		padding: 3% 2%;
		margin: 0.5%;
		border: 1px solid #eee;
		background-color: #fff;
		background-color: #eee;
		background: rgb(125,126,125);
		background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
		background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
		background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		-khtml-border-radius: 8px;
	}
	#nav .menue a { padding: 5%; }
}

/* ############################################################################################################## FOOTER ##### */

#footer {
	width: 100%;
	margin: 2% 0;
	border: 1px solid #fff;
 	background-color: #fff;
	background: rgb(125,126,125);
	background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
	background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
	background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
}

#footer .margin {
	float: left;
	margin: 2%;
}
#footer .menue {
	float: left;
	padding: 2% 1%;
	margin: 1% 0;
}
#footer .menue a {
	font-family: font-family:sans-serif;
	text-decoration: none;
	font-size: 95%;
	font-weight: normal;
	color: #fff;
}
#footer .menue a.active { color: #f00; }
#footer .menue a:hover { color: #f00; }
#footer .menue .copy {
	font-size: 80%;
	color: #999;
}

/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 560px) {

	#footer .margin { display: none; }
	#footer .menue {
		float: none;
		text-align: center;
		padding: 3% 2%;
		margin: 0.5%;
		border: 1px solid #eee;
		background-color: #fff;
		background: rgb(125,126,125);
		background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
		background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
		background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		-khtml-border-radius: 8px;
	}
	#footer .menue a {
		font-size: 100%;
		padding: 5%;
	}
}

/* ############################################################################################################# SPALTEN ##### */

#main .box_1col { margin: 2% 0; }
#main .box_2cols_left	{
	margin: 2% 0;
	float: left;
	width: 49.5%;
}
#main .box_2cols_right {
	margin: 2% 0;
	float: right;
	width: 49.5%;
}
#main .box_2x2cols_left {
	margin: 2% 0;
	float: left;
	width: 49%;
}
#main .box_2x2cols_right {
	margin: 2% 0;
	float: right;
	width: 49%;
}
#main .box_2x3cols_left {
	margin: 2% 0;
	float: left;
	width: 32%;
	text-align: center;
}
#main .box_2x3cols_right {
	margin: 2% 0;
	float: right;
	width: 32%;
	text-align: center;
}
#main .box_2x3cols_middle {
	margin: 2% 0;
	padding: 0 2% 0 0;
	float: right;
	width: 32%;
	text-align: center;
}	
	
/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 800px) {
	#main .box_2cols_left { 
		float: none; 
		width: 100%; 
	}
	#main .box_2cols_right { 
		float: none;
		width: 100%;
	}
}

/* ######################################################################################################## DUNKLE BOXEN ##### */

#main .box_colored {
	padding: 2% 5% 3% 5%;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	border-top: 1px solid #eee;
	background: url(../images/style/box.png) no-repeat scroll;
	background-position: top center;
 	background-color: #fff;	
	behavior: url(border-radius.htc);
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
}
#main .box_clear {
	padding: 0% 5% 3% 5%;
}
/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 800px) { #main .box_colored	{ padding: 3% 5% 5% 5%; }}
@media screen and (max-width: 480px) { #main .box_colored	{ padding: 6% 8% 8% 8%; }}

/* ############################################################################################################### TEXTE ##### */

#main h1 {
	padding: 2% 0;
	font-family: font-family:sans-serif;
	font-size: 260%;	
	font-weight: normal;
	text-shadow: 2px 2px 2px #555;
	color: #f00;
}
#main h2 {
	padding: 1% 0;
	font-family: font-family:sans-serif;
	font-size: 120%;
	font-weight: normal;
	color: #555;
}
#main h3 {
	padding: 1% 0;
	font-size: 95%;
	color: #555;
	font-weight: bold;
	text-align:justify ;
}
#main p {
	padding: 1% 0;
	font-size: 95%;
	color: #555;
	text-align:justify ;
}
#main ul {
	padding: 1% 0 0 3%;
	font-size: 95%;
/*	text-shadow: 2px 2px 2px #000; */
	color: #555;
}
#main a {
	color: #f00;
	text-decoration: none;
}
#main a:hover { color: #555; }
#main .colored { color: #f00; }
#main .center { text-align: center;}
#main .justify { text-align: justify; }
#main .right { text-align: right; }
#main .left { text-align: left; }

/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 800px) {
	#main h1 {
		font-size: 220%;
		padding: 3% 0 3% 0;
	}
	#main h2 {
		font-size: 120%;
		padding: 3% 0 0 0;
		color: #f00;
	}
	#main h2.right { text-align: left; }
	#main p {
		padding: 1% 0;
	}
	#main ul {
	padding: 2% 0 0 8%;
	font-size: 100%;
	}

}
@media screen and (max-width: 480px) {

	#main h1 {
		font-size: 200%;
		padding: 3% 0;
	}
	#main h2 {
		font-size: 120%;
		padding: 3% 0 0 0;
	}
	#main p {
		font-size: 100%;
		padding: 2% 0 0 0;
	}
	#main ul {
	padding: 3% 0 0 10%;
	font-size: 100%;
	}
}

/* ########################################################################################################### FORMULARE ##### */

#main .textfield { 
	width: 85%;
	padding: 10px;
	border: 1px solid #aaa;
	background-color: #fff;
	behavior: url(border-radius.htc);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	font-size: 100%;
	color: #555;
}
#main .textfield.small { 
	width: 20%;
}
#main .textarea { 
	width: 85%;
	padding: 10px;
	border: 1px solid #aaa;
	background-color: #fff;
	behavior: url(border-radius.htc);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #555;
}
#main .button {
 	padding: 2%;
	margin: 3%;
	min-width: 30%;
	border: 0;
	background-color: #aaa;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 120%;
	color: #000;
}
#main .button_small_green {
 	padding: 1%;
	margin: 1%;
	min-width: 20%;
	border: 0;
	background-color: #0f0;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 90%;
	color: #000;
}
#main .button_small_yellow {
 	padding: 1%;
	margin: 1%;
	min-width: 20%;
	border: 0;
	background-color: #ff0;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 90%;
	color: #000;
}
#main .button_small_red {
 	padding: 1%;
	margin: 1%;
	min-width: 20%;
	border: 0;
	background-color: #f00;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 90%;
	color: #000;
}
#main .button:hover, 
#main .button_small_green:hover, 
#main .button_small_yellow:hover, 
#main .button_small_red:hover  			{ color: #fff; }

/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 800px) {
	#main .button { padding: 5% 10%; }
}
@media screen and (max-width: 480px) {
	#main .button_small_red,
	#main .button_small_yellow,
	#main .button_small_green 		{ padding: 3%; width: 60%; }
	#main .textfield.small { width: 25%; }
}

/* ############################################################################################################## BILDER ##### */

#main img { 
	behavior: url(border-radius.htc);
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
}
#main img.border{ border: 1px solid #eee; }
#main .box_img_left_50 { 
	float: left; 
	width: 50%; 
	padding: 0; 
	margin: 1% 4% 3% 0;
}
#main .box_img_right_50 { 
	float: right; 
	width: 50%; 
	padding: 1%; 
	margin: 1% 0 3% 4%;
}
#main .box_img_left_50  img,
#main .box_img_right_50 img { 
	border: 1px solid #eee;
 	background-color: rgba(0, 0, 0, 0.5);
	behavior: url(border-radius.htc);
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
}

/* >>>>>----------------------------------------------------------------------------------------------------- RESPONSIVE ----> */

@media screen and (max-width: 800px) {
	#main .box_img_left,
	#main .box_img_right	{
		width: 100%; 
		float: none; 
		padding: 2% 0;	
		margin: 2% 0;
	}
}